/* BoemBoost Theme — pages/results.css
   Filter bar, results bar, property list
   ======================================= */

/* ----------------------------------------
   Mini hero
---------------------------------------- */
.bb-results-hero {
  background: var(--bb-srl-hero-bg, var(--bb-dark));
  padding: var(--bb-s7) 5%;
  position: relative;
  overflow: hidden;
}

.bb-results-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(153,255,187,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.bb-results-hero__inner {
  max-width: 680px;
  position: relative;
  z-index: 1;
}

/* ----------------------------------------
   Filter bar wrapper
---------------------------------------- */
.bb-filterbar {
  background: var(--bb-srl-filterbar-bg, var(--bb-dark));
  border-top: 3px solid var(--bb-srl-hero-line, var(--bb-accent));
  padding: 1.2rem 0;
  box-shadow: var(--bb-shadow-filterbar, var(--bb-shadow-md));
  position: relative;
  z-index: 40; /* below nav-bar (9000) */
  /* NOTE: no overflow:hidden here — it would clip the filter dropdown panels */
}

/* Same width as bb-container — aligns with results below */
.bb-filterbar__container {
  width: 100%;
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: 0 var(--bb-s6);
  box-sizing: border-box;
}

.bb-filterbar__inner {
  width: 100%;
}

/* +N badge inside pill */
.bb-pill-plus {
  display: inline-block;
  background: var(--bb-dark);
  color: var(--bb-accent);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 2px;
  vertical-align: middle;
}

.bb-filter-group.is-active .bb-pill-plus {
  background: rgba(0,59,59,0.3);
  color: var(--bb-dark);
}

/* Active filter tags row */
.bb-filterbar__actief {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bb-srl-actief-line, rgba(153,255,187,0.1));
}

.bb-filterbar__actief.is-visible {
  display: flex;
}

/* Fav count badge */
.bb-fav-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bb-accent-dark);
}

@media (max-width: 768px) {
  .bb-filterbar__container {
    padding: 0 var(--bb-s4);
  }
}

/* ----------------------------------------
   Main row
---------------------------------------- */
.bb-filterbar__hoofdrij {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

/* ----------------------------------------
   6-pill grid (left side)
---------------------------------------- */
.bb-filterbar__zes {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

/* ----------------------------------------
   Filter group + pill button
---------------------------------------- */
.bb-filter-group {
  position: relative;
}

.bb-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 0.65rem 1rem;
  background: #ffffff;
  border: none;
  border-radius: var(--bb-r-sm);
  font-family: var(--bb-font);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bb-dark);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.bb-filter-pill:hover { background: #edf2ee; }

.bb-filter-group.is-active .bb-filter-pill,
.bb-filter-group:has(.bb-filter-panel.is-open) .bb-filter-pill {
  background: rgb(244, 247, 245);
  color: #1a2a1a;
}

.bb-filter-pill svg {
  width: 18px;
  height: 18px;
  fill: var(--bb-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}

.bb-filter-group.is-active .bb-filter-pill svg,
.bb-filter-panel.is-open ~ .bb-filter-pill svg {
  transform: rotate(180deg);
  fill: var(--bb-dark);
}

/* ----------------------------------------
   Dropdown panel — same width as the pill above it
---------------------------------------- */
.bb-filterbar__zes {
  position: static; /* panels anchor to their group, not the grid */
}

.bb-filter-group {
  position: relative; /* anchor point for the panel */
}

.bb-filter-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%; /* exactly matches the pill/group width */
  background: var(--bb-srl-slk-panel-bg, #ffffff);
  border: 1px solid var(--bb-srl-slk-panel-border, var(--bb-border));
  border-radius: var(--bb-r-md);
  box-shadow: var(--bb-shadow-filterpanel, var(--bb-shadow-lg));
  z-index: 8000; /* above results-bar (no stacking context) and all page sections */
}

.bb-filter-panel.is-open {
  display: block;
}

.bb-filter-panel__inner {
  padding: 0.75rem;
}

/* Price and bedrooms: same width as their pill, no overrides needed */
#fg-prmin,
#fg-prmax,
#fg-slk {
  position: relative;
}

/* Checkboxes / radios */
.bb-filter-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.25rem;
  font-size: 0.9rem;
  color: var(--bb-text);
  cursor: pointer;
  border-bottom: 1px solid var(--bb-border);
  transition: color 0.15s;
}

.bb-filter-check:last-child { border-bottom: none; }

.bb-filter-check:hover { color: var(--bb-dark); }

.bb-filter-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--bb-dark);
  cursor: pointer;
  flex-shrink: 0;
}

.bb-filter-count-badge {
  font-size: 0.72rem;
  color: var(--bb-text-muted);
  margin-left: auto;
}

/* Bedrooms quick-select */
.bb-slk-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bb-slk-btn {
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--bb-srl-slk-border, var(--bb-border));
  border-radius: var(--bb-srl-slk-radius, var(--bb-r-sm));
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--bb-srl-slk-text, var(--bb-text-muted));
  background: var(--bb-srl-slk-bg, #fff);
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--bb-font);
}

.bb-slk-btn:hover {
  background: var(--bb-srl-slk-hover-bg, var(--bb-dark));
  color: var(--bb-srl-slk-hover-text, var(--bb-accent));
  border-color: var(--bb-srl-slk-hover-bg, var(--bb-dark));
}

.bb-slk-btn.is-active {
  background: var(--bb-srl-slk-active-bg, var(--bb-dark));
  color: var(--bb-srl-slk-active-text, var(--bb-accent));
  border-color: var(--bb-srl-slk-active-bg, var(--bb-dark));
}

/* ----------------------------------------
   Right side: search + submit
---------------------------------------- */
.bb-filterbar__rechts {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 1px solid rgba(153,255,187,0.2);
  padding-left: 1rem;
}

.bb-filterbar__search-wrap {
  position: relative;
  width: 100%;
}

.bb-filterbar__search {
  width: 100%;
  padding: 0.65rem 0.9rem 0.65rem var(--bb-srl-si-padleft, 2.2rem);
  background: var(--bb-srl-si-bg, #d8e8e4);
  border: 1px solid var(--bb-srl-si-border, transparent);
  border-radius: var(--bb-srl-si-radius, var(--bb-r-sm));
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--bb-role-srp-flt-search-font, var(--bb-font));
  font-size: var(--bb-role-srp-flt-search-size, 0.88rem);
  font-weight: var(--bb-role-srp-flt-search-weight, 400);
  line-height: 1.2;
  color: var(--bb-role-srp-flt-search-color, var(--bb-srl-si-text, var(--bb-dark)));
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.bb-filterbar__search::placeholder {
  color: var(--bb-srl-si-placeholder, var(--bb-dark-light));
  font-family: var(--bb-role-srp-flt-search-font, var(--bb-font));
  font-size: var(--bb-role-srp-flt-search-size, 0.88rem);
  font-weight: var(--bb-role-srp-flt-search-weight, normal);
  opacity: 1;
}

.bb-filterbar__search:focus {
  box-shadow: 0 0 0 3px rgba(153,255,187,0.3);
  border-color: var(--bb-srl-si-focus-border, transparent);
}

.bb-filterbar__search-icon {
  position: absolute;
  left: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: var(--bb-srl-si-icon, var(--bb-dark-light));
  pointer-events: none;
  display: var(--bb-srl-si-icon-display, block);
}

.bb-filterbar__search-clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bb-text-muted);
  display: flex;
  align-items: center;
  padding: 2px;
}

.bb-filterbar__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 0.65rem;
  background: var(--bb-srl-fs-bg, var(--bb-accent));
  border: 1px solid var(--bb-srl-fs-border, transparent);
  border-radius: var(--bb-srl-fs-radius, var(--bb-r-sm));
  font-family: var(--bb-font);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bb-srl-fs-text, var(--bb-dark));
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
  margin-top: auto;
}
.bb-filterbar__submit svg { fill: var(--bb-srl-fs-text, var(--bb-dark)); display: var(--bb-srl-fs-icon-display, inline-block); }

.bb-filterbar__submit:hover {
  background: var(--bb-srl-fs-hover-bg, var(--bb-accent-hover));
  color: var(--bb-srl-fs-hover-text, var(--bb-srl-fs-text, var(--bb-dark)));
  border-color: var(--bb-srl-fs-hover-border, var(--bb-srl-fs-border, transparent));
  transform: translateY(-1px);
}

/* ----------------------------------------
   "of" divider
---------------------------------------- */
.bb-filterbar__kaart-of {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 4px;
}

.bb-filterbar__of-lijn {
  width: 1px;
  flex: 1;
  background: var(--bb-srl-of-line, rgba(153,255,187,0.2));
}

.bb-filterbar__of-tekst {
  font-size: 0.72rem;
  color: var(--bb-srl-of-text, rgba(153,255,187,0.45));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ----------------------------------------
   Map tile — "Zoek op kaart" button
---------------------------------------- */
.bb-filterbar__kaart-tegel {
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  border: 1.5px solid var(--bb-srl-tegel-border, rgba(153,255,187,0.3));
  border-radius: var(--bb-srl-tegel-radius, var(--bb-r-sm));
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;
  min-height: 80px;
}

.bb-filterbar__kaart-tegel:hover {
  border-color: rgba(153,255,187,0.7);
  transform: translateY(-1px);
}

.bb-filterbar__kaart-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bb-filterbar__kaart-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.bb-filterbar__kaart-tegel:hover .bb-filterbar__kaart-map img {
  opacity: 0.9;
}

/* Dark overlay so label is always readable */
.bb-filterbar__kaart-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,30,20,0.75) 0%, rgba(0,30,20,0.2) 60%);
}

.bb-filterbar__kaart-label {
  position: relative;
  z-index: 2;
  font-family: var(--bb-font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bb-srl-kl-text, var(--bb-accent));
  text-align: center;
  line-height: 1.3;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.bb-filterbar__kaart-label svg {
  width: 13px;
  height: 13px;
  fill: var(--bb-srl-kl-icon, var(--bb-accent));
  flex-shrink: 0;
}

/* ----------------------------------------
   Active filter tags
---------------------------------------- */
.bb-filterbar__actief {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(153,255,187,0.1);
}

.bb-filterbar__actief-label {
  font-size: 0.8rem;
  color: var(--bb-srl-actief-label, rgba(153,255,187,0.55));
  font-weight: 600;
  flex-shrink: 0;
}

.bb-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(153,255,187,0.12);
  border: 1px solid rgba(153,255,187,0.25);
  color: var(--bb-accent);
  border-radius: var(--bb-srl-tag-radius, var(--bb-r-pill));
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.bb-filter-tag__remove {
  color: var(--bb-accent);
  opacity: 0.7;
  text-decoration: none;
  line-height: 1;
  margin-left: 2px;
}

.bb-filter-tag__remove:hover { opacity: 1; }

.bb-filterbar__reset {
  font-size: 0.78rem;
  color: var(--bb-srl-reset-text, rgba(255,255,255,0.45));
  text-decoration: none;
  margin-left: auto;
  transition: color 0.2s;
}

.bb-filterbar__reset:hover { color: var(--bb-srl-reset-hover, #fff); }

/* ----------------------------------------
   Results bar
---------------------------------------- */
.bb-results-bar {
  background: #fff;
  border-bottom: 1px solid var(--bb-border);
  padding: 0.6rem 0;
}

.bb-results-bar__inner {
  width: 100%;
  max-width: var(--bb-max);
  margin: 0 auto;
  padding: 0 var(--bb-s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-s4);
  flex-wrap: wrap;
}

.bb-results-bar__count {
  font-size: 0.875rem;
  color: var(--bb-srl-count-text, var(--bb-text-muted));
}

.bb-results-bar__count strong {
  font-weight: 700;
  color: var(--bb-srl-count-number, var(--bb-text));
}

.bb-results-bar__clear {
  margin-left: var(--bb-s3);
  font-size: 0.8rem;
  color: var(--bb-accent-dark);
  text-decoration: none;
  font-weight: 600;
}

.bb-results-bar__clear:hover { text-decoration: underline; }

.bb-results-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--bb-s3);
}

/* v3.9.361 — per-page keeps its own vars; scoped to #bb-per-page so it no longer
   bleeds onto the sort dropdown (both share .bb-sort-select). */
#bb-per-page {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bb-srl-pp-text, var(--bb-text));
  background: var(--bb-srl-pp-bg, transparent);
  border: 1px solid var(--bb-srl-pp-border, transparent);
  cursor: pointer;
  padding: var(--bb-s2) var(--bb-s3);
  border-radius: var(--bb-srl-pp-radius, var(--bb-r-sm));
  outline: none;
  appearance: none;
  font-family: var(--bb-font);
}
/* Sort dropdown (desktop + mobile) — own design vars. */
#bb-sort, #bb-sort-desktop {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bb-srl-sort-text, var(--bb-text));
  background: var(--bb-srl-sort-bg, transparent);
  border: 1px solid var(--bb-srl-sort-border, transparent);
  border-radius: var(--bb-srl-sort-radius, var(--bb-r-sm));
  padding: var(--bb-s2) var(--bb-s3);
  cursor: pointer;
  outline: none;
  appearance: none;
  font-family: var(--bb-font);
}

.bb-fav-toggle {
  display: flex;
  align-items: center;
  gap: var(--bb-s2);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bb-srl-fav-text, var(--bb-text-muted));
  cursor: pointer;
  background: var(--bb-srl-fav-bg, none);
  border: 1px solid var(--bb-srl-fav-border, transparent);
  border-radius: var(--bb-srl-fav-radius, var(--bb-r-sm));
  padding: var(--bb-srl-fav-pad, var(--bb-s2) var(--bb-s3));
  font-family: var(--bb-font);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.bb-fav-toggle:hover { color: var(--bb-srl-fav-text, var(--bb-text)); }
.bb-fav-toggle.is-active {
  color: var(--bb-srl-fav-active-text, #e84040);
  background: var(--bb-srl-fav-active-bg, none);
}
.bb-view-toggle { display: flex; gap: var(--bb-s2); }

/* ----------------------------------------
   Results area
---------------------------------------- */
.bb-results { background: var(--bb-bg); padding: var(--bb-s6) 0 var(--bb-s9); }
.bb-results__list { display: grid; grid-template-columns: 1fr; gap: 4rem; padding-top: 2rem; }
@media (max-width: 640px) { .bb-results__list { gap: 2rem; padding-top: 0; } }
.bb-results__list.is-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 0; }
@media (max-width: 1024px) { .bb-results__list.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bb-results__list.is-grid { grid-template-columns: 1fr; } }
.bb-results__empty { text-align: center; padding: var(--bb-s9) 0; }
.bb-prop-card__no-image {
  width: 100%; height: 100%; min-height: 200px;
  background: var(--bb-bg-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--bb-border);
}

/* Mobile drawer elements — hidden on desktop */
.bb-mobile-filter-trigger,
.bb-mobile-filter-overlay,
.bb-mobile-drawer-submit,
.bb-mobile-view-toggle { display: none; }

/* Drawer: on desktop, invisible wrapper so filterbar renders normally */
.bb-mobile-filter-drawer {
  display: block;
  position: static;
  transform: none;
  overflow: visible;
  width: auto;
  height: auto;
  background: transparent;
  z-index: auto;
}

/* ----------------------------------------
   Responsive
---------------------------------------- */
@media (max-width: 1024px) {
  .bb-filterbar__zes { grid-template-columns: repeat(2, 1fr); }
  .bb-filterbar__kaart-tegel { display: none; }
  .bb-filterbar__kaart-of { display: none; }
}

@media (max-width: 768px) {
  /* ---- Hide the entire filterbar on mobile — drawer replaces it ---- */
  .bb-filterbar { display: none; }

  /* ---- Mobile filter trigger button ---- */
  .bb-mobile-filter-trigger {
    display: block;
    padding: 0 var(--bb-s4);
    margin: var(--bb-s4) 0;
  }
  .bb-mobile-filter-open {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    /* v3.9.365 — own Mobile vars (falls back to the desktop fs-* so nothing
       changes until you set the Mobile group). */
    background: var(--bb-srl-fsm-bg, var(--bb-srl-fs-bg, var(--bb-accent)));
    color: var(--bb-srl-fsm-text, var(--bb-srl-fs-text, var(--bb-dark)));
    border: 1px solid var(--bb-srl-fsm-border, var(--bb-srl-fs-border, transparent));
    border-radius: var(--bb-srl-fsm-radius, var(--bb-srl-fs-radius, var(--bb-r-sm)));
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .bb-mobile-filter-open svg { fill: var(--bb-srl-fsm-text, var(--bb-srl-fs-text, var(--bb-dark))); display: var(--bb-srl-fsm-icon-display, inline-block); }
  .bb-mobile-filter-open:hover {
    background: var(--bb-srl-fsm-hover-bg, var(--bb-srl-fsm-bg, var(--bb-accent-hover)));
    color: var(--bb-srl-fsm-hover-text, var(--bb-srl-fsm-text, var(--bb-dark)));
    border-color: var(--bb-srl-fsm-hover-border, var(--bb-srl-fsm-border, transparent));
  }
  .bb-mobile-filter-count {
    font-size: 0.85rem;
    font-weight: 700;
    opacity: 0.85;
  }

  /* ---- Overlay ---- */
  .bb-mobile-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9050;
  }
  .bb-mobile-filter-overlay.is-open { display: block; }

  /* ---- Drawer ---- */
  .bb-mobile-filter-drawer {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    background: #fff;
    z-index: 9100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bb-mobile-filter-drawer.is-open {
    transform: translateX(0);
  }

  /* Inside the drawer, show the filterbar normally */
  .bb-mobile-filter-drawer .bb-filterbar {
    display: block;
    background: #fff;
    border-bottom: none;
    box-shadow: none;
    position: static;
  }
  .bb-mobile-filter-drawer .bb-filterbar__container {
    max-width: 100%;
    padding: var(--bb-s4);
    padding-top: calc(72px + var(--bb-s4));
    box-sizing: border-box;
  }
  .bb-mobile-filter-drawer .bb-filterbar__hoofdrij {
    flex-direction: column;
    gap: var(--bb-s3);
  }
  .bb-mobile-filter-drawer .bb-filterbar__zes {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .bb-mobile-filter-drawer #fg-regio  { grid-column: 1 / -1; }
  .bb-mobile-filter-drawer #fg-plaats { grid-column: 1 / -1; }
  .bb-mobile-filter-drawer .bb-filterbar__rechts {
    flex-direction: column;
    border-left: none;
    border-top: 1px solid var(--bb-border);
    padding-left: 0;
    padding-top: var(--bb-s3);
    width: 100%;
    flex: none;
    gap: var(--bb-s3);
  }
  .bb-mobile-filter-drawer .bb-filterbar__search-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .bb-mobile-filter-drawer .bb-filterbar__search {
    font-size: 16px; /* prevent iOS auto-zoom */
  }
  /* Hide the submit button inside rechts — we use the drawer submit instead */
  .bb-mobile-filter-drawer .bb-filterbar__rechts .bb-filterbar__submit {
    display: none;
  }

  /* Mobile view toggle — list / map selector inside drawer.
     v3.9.386 — segmented slide-control (same as the results-bar toggle): the
     container is the track, a sliding pill (::before) moves under the active
     option, buttons are transparent. Shares the --bb-srl-mv-* vars. The "of"
     separator is hidden in the drawer (below), so it's a clean 2-option 50/50. */
  .bb-mobile-view-toggle {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: var(--bb-s3);
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
    background: var(--bb-srl-mv-bg, #f1efe8);
    border: 1px solid var(--bb-srl-mv-border, transparent);
    border-radius: var(--bb-srl-mv-radius, 999px);
  }
  .bb-mobile-view-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--bb-srl-mv-active-bg, #fff);
    border: 1px solid var(--bb-srl-mv-active-border, var(--bb-border, #d3d1c7));
    border-radius: var(--bb-srl-mv-pill-radius, var(--bb-srl-mv-radius, 999px));
    transition: transform 0.25s ease;
    transform: translateX(var(--bb-vt-drag, 0px));
    z-index: 0;
  }
  .bb-mobile-view-toggle.bb-vt-dragging::before { transition: none; }
  .bb-mobile-view-toggle.bb-vt-map-active:not(.bb-vt-dragging)::before {
    transform: translateX(100%);
  }
  .bb-mobile-view-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--bb-srl-mv-text, var(--bb-text, #1a1a1a));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .25s ease;
  }
  .bb-mobile-view-btn svg { stroke: var(--bb-srl-mv-text, var(--bb-text, #1a1a1a)); transition: stroke .25s ease; }
  .bb-mobile-view-btn.is-active,
  .bb-mobile-view-btn[aria-pressed="true"] {
    background: transparent;
    color: var(--bb-srl-mv-active-text, var(--bb-dark, #003b3b));
  }
  .bb-mobile-view-btn.is-active svg,
  .bb-mobile-view-btn[aria-pressed="true"] svg { stroke: var(--bb-srl-mv-active-text, var(--bb-dark, #003b3b)); }
  /* "of" separator between the two view buttons */
  .bb-mobile-view-toggle .bb-filterbar__kaart-of {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    padding: 0 8px;
    height: 40px;
  }
  .bb-mobile-view-toggle .bb-filterbar__of-lijn {
    width: 1px;
    height: 100%;
    background: var(--bb-border, #e0e0dc);
    flex: none;
  }
  .bb-mobile-view-toggle .bb-filterbar__of-tekst {
    padding: 0 6px;
    font-size: 0.75rem;
    color: var(--bb-text-muted, #888);
  }
  /* Hide map tile and "of" separator in drawer */
  .bb-mobile-filter-drawer .bb-filterbar__kaart-of { display: none; }
  .bb-mobile-filter-drawer .bb-filterbar__kaart-tegel { display: none; }
  /* Hide active filter tags in drawer */
  .bb-mobile-filter-drawer .bb-filterbar__actief { display: none; }

  /* Filter pill buttons inside drawer need a visible border */
  .bb-mobile-filter-drawer .bb-filter-pill {
    border: 1.5px solid var(--bb-border, #e0e0dc);
    background: #fff;
    width: 100%;
    justify-content: space-between;
  }
  .bb-mobile-filter-drawer .bb-filter-group.is-active .bb-filter-pill {
    border-color: var(--bb-dark, #003b3b);
  }

  /* Drawer submit button — full width */
  .bb-mobile-drawer-submit {
    display: block;
    margin-top: var(--bb-s3);
    border-top: 1px solid var(--bb-border);
    position: sticky;
    bottom: 0;
    background: #fff;
  }
  .bb-mobile-drawer-submit-btn {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    display: flex;
  }

  /* ---- Results bar: 3-row layout on mobile ---- */
  .bb-results-bar { padding-bottom: 0; }
  .bb-results-bar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bb-s2);
    padding: var(--bb-s2) var(--bb-s4) 0;
  }

  /* Row 1: view toggle (now a sibling of actions) — grid hidden on mobile */
  #bb-view-grid { display: none; }

  /* Mobile Lijst/Kaart segmented slide-control (v3.9.381).
     .bb-view-toggle is the track; a sliding pill (::before) moves under the
     active option. Grid button is hidden on mobile (below), so it's a clean
     2-option 50/50 control. All colours/radii read the --bb-srl-mv-* vars set
     in "Mobiele weergave-knoppen"; fallbacks keep a neutral iOS-style look. */
  .bb-results-bar__inner .bb-view-toggle {
    order: 1;
    width: 100%;
    position: relative;
    display: flex;
    gap: 0;
    margin-left: 0;
    padding: 4px;
    box-sizing: border-box;
    background: var(--bb-srl-mv-bg, #f1efe8);
    border: 1px solid var(--bb-srl-mv-border, transparent);
    border-radius: var(--bb-srl-mv-radius, 999px);
  }
  /* Sliding pill — one half of the track, moves via transform. */
  .bb-results-bar__inner .bb-view-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--bb-srl-mv-active-bg, #fff);
    border: 1px solid var(--bb-srl-mv-active-border, var(--bb-border, #d3d1c7));
    border-radius: var(--bb-srl-mv-pill-radius, var(--bb-srl-mv-radius, 999px));
    transition: transform 0.25s ease;
    z-index: 0;
    transform: translateX(var(--bb-vt-drag, 0px));
  }
  /* While dragging, follow the finger 1:1 with no easing lag. */
  .bb-results-bar__inner .bb-view-toggle.bb-vt-dragging::before {
    transition: none;
  }
  /* Pill sits right when map view is active. JS-class version first so it works
     even where :has() is unsupported (a browser that drops the :has() rule keeps
     this one). v3.9.384. Not applied while dragging — the finger wins then. */
  .bb-results-bar__inner .bb-view-toggle.bb-vt-map-active:not(.bb-vt-dragging)::before {
    transform: translateX(100%);
  }
  .bb-results-bar__inner .bb-view-toggle:not(.bb-vt-dragging):has(#bb-map-toggle.is-active)::before {
    transform: translateX(100%);
  }
  #bb-list-toggle,
  #bb-map-toggle {
    flex: 1;
    width: auto;
    height: auto;
    position: relative;
    z-index: 1;
    padding: 9px 12px;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    color: var(--bb-srl-mv-text, var(--bb-text));
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.25s ease;
  }
  #bb-list-toggle svg,
  #bb-map-toggle svg { stroke: var(--bb-srl-mv-text, var(--bb-text)); transition: stroke 0.25s ease; }
  #bb-list-toggle::after { content: 'Lijst'; }
  #bb-map-toggle::after  { content: 'Kaart'; }
  #bb-list-toggle.is-active,
  #bb-map-toggle.is-active {
    background: transparent !important;
    border: none !important;
    color: var(--bb-srl-mv-active-text, var(--bb-dark));
  }
  #bb-list-toggle.is-active svg,
  #bb-map-toggle.is-active svg { stroke: var(--bb-srl-mv-active-text, var(--bb-dark)); }

  /* Row 2 (v3.9.364): sort + per-page + favorites in their own styled area —
     a light band with padding + rounded corners, like the old sort area, so the
     controls read as a grouped toolbar instead of loose boxes on the page. */
  .bb-results-bar__actions {
    order: 3;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-s2);
    align-items: center;
    background: var(--bb-srl-actions-bg, #f5f5f3);
    /* v3.9.365 — full-width band: cancel the inner's side padding with negative
       margins, then re-add equal padding so the controls stay aligned. */
    margin-left: calc(-1 * var(--bb-s4));
    margin-right: calc(-1 * var(--bb-s4));
    padding: var(--bb-s2) var(--bb-s4);
    box-sizing: border-box;
  }
  #bb-per-page,
  #bb-sort-desktop {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    background: var(--bb-srl-sort-bg, #fff);
    border: 1px solid var(--bb-srl-sort-border, var(--bb-border, #e0e0dc));
    border-radius: var(--bb-srl-sort-radius, var(--bb-r-sm, 6px));
  }
  #bb-per-page {
    background: var(--bb-srl-pp-bg, #fff);
    border-color: var(--bb-srl-pp-border, var(--bb-border, #e0e0dc));
    border-radius: var(--bb-srl-pp-radius, var(--bb-r-sm, 6px));
  }
  /* v3.9.363 — favorites now visible on mobile in the results bar (was hidden
     "moved to navbar"). Its per-viewport visibility is controlled by the admin
     toggle. It still also appears in the hamburger drawer. */
  .bb-fav-toggle {
    flex: 1;
    min-width: 0;
    justify-content: center;
    background: var(--bb-srl-fav-bg, #fff);
    border: 1px solid var(--bb-srl-fav-border, var(--bb-border, #e0e0dc));
    border-radius: var(--bb-srl-fav-radius, var(--bb-r-sm, 6px));
    height: 44px;
  }

  /* Row 3: count text */
  .bb-results-bar__count {
    order: 2;
    width: 100%;
    font-size: 0.8rem;
    text-align: left;
  }

  /* POI bar on mobile: show but restructure via JS into dropdown mode */
  .bb-poi-bar__label  { display: none; }
  .bb-poi-bar__inner > .bb-poi-bar__checks { display: none; }
  .bb-poi-mobile-panel > .bb-poi-bar__checks { display: flex; flex-direction: column; gap: 4px; }
  .bb-poi-bar__actions { width: auto; padding-top: 0; }
  .bb-poi-bar__inner { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 0 var(--bb-side-pad, 16px); }

  /* Mobile dropdown button — pill style matching filter pills */
  .bb-poi-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-dark, #1a1a1a);
    background: #fff;
    border: 1.5px solid var(--bb-border, #e0e0dc);
    border-radius: 20px;
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
  }
  .bb-poi-mobile-btn svg { flex-shrink: 0; transition: transform .2s; }
  .bb-poi-mobile-btn.is-open svg { transform: rotate(180deg); }
  .bb-poi-mobile-btn.has-active { border-color: var(--bb-dark, #1a1a1a); background: var(--bb-accent-light, #f0fff6); }

  /* Mobile POI dropdown panel */
  .bb-poi-mobile-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: var(--bb-side-pad, 16px);
    right: var(--bb-side-pad, 16px);
    background: #fff;
    border: 1.5px solid var(--bb-border, #e0e0dc);
    border-radius: var(--bb-r-md, 8px);
    box-shadow: var(--bb-shadow-mobile-fab, var(--bb-shadow-md));
    z-index: 200;
    padding: 12px;
    max-height: 280px;
    overflow-y: auto;
  }
  .bb-poi-mobile-panel.is-open { display: block; }
  .bb-poi-mobile-panel .bb-poi-check { margin-bottom: 4px; width: 100%; border-radius: 8px; }
  .bb-poi-bar { position: relative; }

  /* Hide map sidebar on mobile — full-screen map only */
  .bb-map-sidebar-wrap { display: none; }
  .bb-map-container { height: 60vh; min-height: 320px; }
}

@media (max-width: 375px) {
  .bb-filterbar__zes { grid-template-columns: 1fr; }
  /* At tiny screens, also remove the full-width spans — everything is 1 col anyway */
  #fg-regio  { grid-column: auto; }
  #fg-plaats { grid-column: auto; }
  /* At 375px, fav toggle label shortens to just the heart */
  .bb-fav-toggle .bb-fav-count { display: inline; }
}

/* ----------------------------------------
   Map view layout
---------------------------------------- */
.bb-map-wrap {
  display: flex;
  height: calc(100vh - 120px);
  min-height: 500px;
}

/* v3.9.326 — aligned = constrain the whole map view to the content width
   (same --bb-max as the results/POI bar), centred. full = edge-to-edge. */
.bb-map-wrap--aligned {
  max-width: var(--bb-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.bb-map-wrap--full {
  max-width: none;
  width: 100%;
}
/* No sidebar → the map container simply fills the row (flex handles it). */
.bb-map-wrap--no-sidebar .bb-map-container { flex: 1 1 100%; }

.bb-map-sidebar-wrap {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--bb-border);
  background: #fff;
}

.bb-map-sidebar-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--bb-border);
  background: #f9f9f9;
}

.bb-map-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--bb-dark);
}

.bb-map-sidebar {
  flex: 1;
  overflow-y: auto;
}

/* v3.9.484 — verticale opbouw: naam + locatie, foto op volle breedte
   (vierkant, cover-crop), daaronder prijs / beschikbaarheid / pills /
   omschrijving. Was een rij met een 70×55 miniatuur links. */
.bb-map-sidebar-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bb-msi-divider, var(--bb-border));
  /* v3.9.511 — had geen schaduw; leeg laten houdt dat zo. */
  box-shadow: var(--bb-shadow-side-card, none);
  cursor: pointer;
  transition: background 0.15s;
}

.bb-map-sidebar-item:hover {
  /* v3.9.509 — dit lichtgroen zat hard in de stylesheet en was nergens in te
     stellen. Nu een token: leeg laten in Property card design geeft geen kleur. */
  background: var(--bb-msi-hover-bg, #f0fdf4);
}

.bb-map-sidebar-item.is-active {
  background: var(--bb-msi-active-bg, #f0fdf4);
  border-left: var(--bb-msi-active-border-w, 3px) solid var(--bb-msi-active-border, var(--bb-dark));
}

.bb-map-sidebar-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--bb-dark);
}

.bb-map-sidebar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bb-map-sidebar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  width: 100%;
}

.bb-map-sidebar-loc {
  font-size: 10px;
  color: var(--bb-role-pc-locatie-color, var(--bb-dark-light));
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bb-map-sidebar-naam {
  font-family: var(--bb-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--bb-role-pc-naam-color, var(--bb-dark));
  line-height: 1.3;
  /* v3.9.484 — mag nu de volle breedte gebruiken; lange namen lopen door
     naar een tweede regel in plaats van meteen af te kappen. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bb-map-sidebar-prijs {
  font-size: 12px;
  color: var(--bb-role-pc-price-bedrag-color, var(--bb-srl-price-amount, var(--bb-text-muted)));
  /* v3.9.484 — margin-top:auto verwijderd: die duwde de prijs naar de onderkant
     van de oude rij-indeling en heeft in de stapel geen functie meer. */
}

/* v3.9.319 — map sidebar extra fields (availability / desc / meta pills),
   following the same card-design colours. */
.bb-map-sidebar-avail {
  display: inline-block;
  /* v3.9.484 — in de bredere kaart zou het flex-item anders over de volle
     breedte uitrekken; een pil hoort om zijn tekst te sluiten. */
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-srl-card-cta-text, var(--bb-accent));
  background: var(--bb-srl-card-cta-bg, var(--bb-dark));
  border-radius: var(--bb-card-availpill-radius, 10px);
  padding: 1px 7px;
  margin: 2px 0;
}
.bb-map-sidebar-desc {
  font-size: 11px;
  color: var(--bb-text-muted);
  line-height: 1.35;
  margin: 2px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.bb-map-sidebar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.bb-map-sidebar-pill {
  /* v3.9.509 — gebruikte eigen vaste kleuren en negeerde daarmee de centrale
     pil-instellingen volledig; dat is waarom de kleuren niet klopten. Volgt nu
     dezelfde tokens als de kaart-pil, met eigen maat en padding. */
  font-size: var(--bb-role-pc-metapill-size, 9px);
  font-weight: var(--bb-role-pc-metapill-weight, 600);
  line-height: var(--bb-role-pc-metapill-lh, 1.5);
  font-family: var(--bb-role-pc-metapill-font, inherit);
  color: var(--bb-role-pc-metapill-color, var(--bb-srl-pill-text, var(--bb-dark)));
  background: var(--bb-srl-pill-bg, var(--bb-hp-clr-soft, #eef2f2));
  border-radius: var(--bb-srl-pill-radius, 6px);
  padding: var(--bb-card-pill-pad-side, var(--bb-card-pill-pad, 1px 6px));
  white-space: nowrap;
}

.bb-map-loading {
  padding: 2rem;
  text-align: center;
  color: var(--bb-text-muted);
  font-size: 14px;
}

.bb-map-container {
  flex: 1;
  position: relative;
}

.bb-google-map {
  width: 100%;
  height: 100%;
}

.bb-map-unavailable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--bb-text-muted);
  gap: 10px;
  background: #f4f7f5;
}

/* Sidebar pagination */
.bb-map-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--bb-border);
  background: #fff;
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
}

.bb-map-pager-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--bb-border);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 15px;
  color: var(--bb-dark);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bb-map-pager-btn:hover:not([disabled]) {
  background: var(--bb-dark);
  color: var(--bb-accent);
  border-color: var(--bb-dark);
}

.bb-map-pager-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.bb-map-pager-info {
  font-size: 12px;
  color: var(--bb-text-muted);
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

/* Google Maps popup */
.bb-map-popup {
  min-width: 200px;
  overflow: hidden;
}
.bb-map-popup-body {
  padding: 0 12px 12px;
}

.bb-map-popup-img {
  width: calc(100% + 0px);
  height: 130px;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: -0px -0px 10px -0px;
  border-radius: 4px 4px 0 0;
}

.bb-map-popup-loc {
  font-size: 10px;
  color: var(--bb-role-pc-locatie-color, var(--bb-dark-light));
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.bb-map-popup-naam {
  font-weight: 700;
  font-size: 14px;
  color: var(--bb-role-pc-naam-color, var(--bb-dark));
  margin: 2px 0;
}

.bb-map-popup-price {
  font-size: 13px;
  color: var(--bb-role-pc-price-bedrag-color, var(--bb-srl-price-amount, var(--bb-dark)));
  margin-bottom: 8px;
}

/* v3.9.319 — map popup extra fields (availability / desc / meta pills). */
.bb-map-popup-avail {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--bb-srl-card-cta-text, var(--bb-accent));
  background: var(--bb-srl-card-cta-bg, var(--bb-dark));
  border-radius: var(--bb-card-availpill-radius, 10px);
  padding: 2px 8px;
  margin: 2px 0 4px;
}
.bb-map-popup-desc {
  font-size: 11px;
  color: var(--bb-text-muted);
  line-height: 1.4;
  margin: 2px 0 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.bb-map-popup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.bb-map-popup-pill {
  /* v3.9.509 — zie de zijbalk-pil hierboven: volgde de centrale instellingen niet. */
  font-size: var(--bb-role-pc-metapill-size, 10px);
  font-weight: var(--bb-role-pc-metapill-weight, 600);
  line-height: var(--bb-role-pc-metapill-lh, 1.5);
  font-family: var(--bb-role-pc-metapill-font, inherit);
  color: var(--bb-role-pc-metapill-color, var(--bb-srl-pill-text, var(--bb-dark)));
  background: var(--bb-srl-pill-bg, var(--bb-hp-clr-soft, #eef2f2));
  border-radius: var(--bb-srl-pill-radius, 6px);
  padding: var(--bb-card-pill-pad-popup, var(--bb-card-pill-pad, 2px 7px));
  white-space: nowrap;
}

.bb-map-popup-cta {
  display: inline-block;
  background: var(--bb-srl-card-cta-bg, var(--bb-dark));
  color: var(--bb-srl-card-cta-text, var(--bb-accent));
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--bb-srl-card-cta-radius, 20px);
  text-decoration: none;
  letter-spacing: .04em;
  transition: background .15s, color .15s;
}

.bb-map-popup-cta:hover {
  background: var(--bb-srl-card-cta-hover-bg, var(--bb-srl-card-cta-bg, var(--bb-dark)));
  color: var(--bb-srl-card-cta-hover-text, var(--bb-srl-card-cta-text, var(--bb-accent)));
}

@media (max-width: 768px) {
  .bb-map-wrap { flex-direction: column; height: auto; }
  .bb-map-sidebar-wrap { display: none; }
  .bb-map-container { height: 400px; }
}

/* ---- Hide irrelevant controls in map mode ---- */
.bb-results-bar.is-map-mode #bb-per-page,
.bb-results-bar.is-map-mode #bb-sort-desktop,
.bb-results-bar.is-map-mode .bb-fav-toggle { display: none; }

@media (max-width: 768px) {
  /* Reduce top padding of results section on mobile: 32px -> 20px */
  .bb-results { padding-top: 20px; }
}

/* v3.9.164 — Results hero tekstkleuren via Search result list vars.
   Fontgrootte/zichtbaarheid verhuist naar Typography (later). De huidige
   waarden blijven als fallback zodat er niets verandert tot je iets zet. */
@media(min-width:769px){
  .bb-results-hero .bb-label{font-size:0.7rem;color:var(--bb-srl-hero-label,#99ffbb);}
  .bb-results-hero .bb-label::before{background:var(--bb-srl-hero-label,#99ffbb);}
  .bb-results-hero .bb-h1-accent{font-size:2.5rem;color:var(--bb-srl-hero-h1,#99ffbb);}
  .bb-results-hero .bb-lead{font-size:1.1rem;color:var(--bb-srl-hero-lead,#a0b8b8);}
}
@media(max-width:768px){
  .bb-results-hero .bb-label{display:none!important;}
  .bb-results-hero .bb-h1-accent{font-size:1.8rem;color:var(--bb-srl-hero-h1,#99ffbb);}
  .bb-results-hero .bb-lead{display:none!important;}
}

/* v3.9.160 — Search result list: view-toggle icon buttons (scoped to results)
   v3.9.384 — desktop-only, so they don't fight the mobile segmented control. */
@media (min-width: 769px) {
/* v3.9.457 — Desktop / iPad view toggle as a 3-slot sliding pill (was 3 loose
   square buttons). The track holds a ::before pill that slides under the active
   icon; position follows .bb-vt-pos-0/1/2 (set by JS) or --bb-vt-drag while
   dragging. Colours reuse the existing --bb-srl-vt-* design vars so the admin
   Property/results styling still controls it. Sizes kept ~as before (44px). */
.bb-results-bar__inner .bb-view-toggle {
  position: relative;
  display: inline-flex;
  gap: 0;
  padding: 4px;
  background: var(--bb-srl-vt-track-bg, var(--bb-srl-vt-bg, #eef0f6));
  border: 1px solid var(--bb-srl-vt-track-border, var(--bb-srl-vt-border, transparent));
  border-radius: var(--bb-srl-vt-track-radius, 12px);
}
.bb-results-bar__inner .bb-view-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 44px;
  height: 44px;
  background: var(--bb-srl-vt-active-bg, var(--bb-dark));
  border-radius: var(--bb-srl-vt-radius, var(--bb-r-md));
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
  transform: translateX(var(--bb-vt-drag, 0px));
}
/* Active-slot positions (when NOT dragging). translateX per slot = 44px icon +
   the flex gap; buttons sit flush (gap:0) so it's exactly 44px per step. */
.bb-results-bar__inner .bb-view-toggle.bb-vt-pos-1:not(.bb-vt-dragging)::before { transform: translateX(44px); }
.bb-results-bar__inner .bb-view-toggle.bb-vt-pos-2:not(.bb-vt-dragging)::before,
.bb-results-bar__inner .bb-view-toggle.bb-vt-map-active:not(.bb-vt-dragging)::before { transform: translateX(88px); }
/* :has() fallback for browsers without the JS position class. */
.bb-results-bar__inner .bb-view-toggle:not(.bb-vt-dragging):has(#bb-view-grid.is-active)::before { transform: translateX(44px); }
.bb-results-bar__inner .bb-view-toggle:not(.bb-vt-dragging):has(#bb-map-toggle.is-active)::before { transform: translateX(88px); }
/* Follow the pointer 1:1 while dragging (no easing lag). */
.bb-results-bar__inner .bb-view-toggle.bb-vt-dragging::before { transition: none; }
/* v3.9.458 — no animation on initial page load (JS adds this for one frame). */
.bb-results-bar__inner .bb-view-toggle.bb-vt-no-anim::before { transition: none; }

/* Buttons sit above the pill; transparent so the pill shows through. */
.bb-view-toggle .bb-btn--icon {
  position: relative;
  z-index: 1;
  color: var(--bb-srl-vt-icon, var(--bb-text-muted));
  background: transparent;
  border: none;
  border-radius: var(--bb-srl-vt-radius, var(--bb-r-md));
  transition: color 0.18s ease;
}
.bb-view-toggle .bb-btn--icon:hover {
  background: transparent;
  color: var(--bb-srl-vt-hover-icon, var(--bb-srl-vt-icon, var(--bb-text-muted)));
}
.bb-view-toggle .bb-btn--icon.is-active {
  background: transparent; /* pill provides the active background */
  color: var(--bb-srl-vt-active-icon, var(--bb-text-light));
  border-color: transparent;
}

/* v3.9.455 — Desktop-only results-bar order: view-toggle (left) · count
   (centred) · actions (right). DOM order stays count → actions → toggle so the
   mobile layout (its own rules below 768px) is untouched; we reorder with
   flex `order` + auto-margins that only take effect at this breakpoint. */
.bb-results-bar__inner { justify-content: flex-start; }
.bb-results-bar__inner .bb-view-toggle      { order: 1; }
.bb-results-bar__inner .bb-results-bar__count  { order: 2; margin: 0 auto; text-align: center; }
.bb-results-bar__inner .bb-results-bar__actions { order: 3; }
}

/* v3.9.160 — Search result list: filter dropdown group (colours only) */
.bb-filterbar__zes .bb-filter-pill {
  color: var(--bb-srl-flt-text, inherit);
  background: var(--bb-srl-flt-bg, #fff);
  border-color: var(--bb-srl-flt-border, var(--bb-border));
  border-radius: var(--bb-srl-flt-radius, var(--bb-r-sm));
}
.bb-filterbar__zes .bb-filter-panel {
  background: var(--bb-srl-flt-bg, #fff);
  border-color: var(--bb-srl-flt-border, var(--bb-border));
}
/* v3.9.165 — Filter-opties in het open paneel */
.bb-filterbar__zes .bb-filter-check {
  color: var(--bb-srl-fp-text, var(--bb-text));
}
.bb-filterbar__zes .bb-filter-check:hover {
  color: var(--bb-srl-fp-hover, var(--bb-dark));
}
.bb-filterbar__zes .bb-filter-check input:checked ~ span:not(.bb-filter-count-badge),
.bb-filterbar__zes .bb-filter-check:has(input:checked) {
  color: var(--bb-srl-fp-active, var(--bb-dark));
}
.bb-filterbar__zes .bb-filter-count-badge {
  color: var(--bb-srl-fp-badge-text, var(--bb-text-muted));
  background: var(--bb-srl-fp-badge-bg, transparent);
  border-radius: var(--bb-srl-fp-radius, 999px);
  padding: 1px 7px;
}

/* ============================================================
   v3.9.301 — Search result page typography roles
   (Design → Typography → Search result page). Each property
   uses var(--bb-role-srp-*-{prop}, <current value>) so leeg =
   huidige stijl. Colour falls back to the existing SRL var.
============================================================ */
/* Hero */
.bb-results-hero .bb-label {
  font-family: var(--bb-role-srp-hero-label-font, inherit);
  font-weight: var(--bb-role-srp-hero-label-weight, inherit);
  line-height: var(--bb-role-srp-hero-label-lh, normal);
}
.bb-results-hero .bb-h1-accent {
  font-family: var(--bb-role-srp-hero-title-font, inherit);
  font-weight: var(--bb-role-srp-hero-title-weight, inherit);
  line-height: var(--bb-role-srp-hero-title-lh, inherit);
}
.bb-results-hero .bb-lead {
  font-family: var(--bb-role-srp-hero-lead-font, inherit);
  font-weight: var(--bb-role-srp-hero-lead-weight, inherit);
  line-height: var(--bb-role-srp-hero-lead-lh, inherit);
}
@media (min-width: 0px) {
  .bb-results-hero .bb-label   { font-size: var(--bb-role-srp-hero-label-size, 0.7rem); color: var(--bb-role-srp-hero-label-color, var(--bb-srl-hero-label, #99ffbb)); }
  .bb-results-hero .bb-h1-accent { font-size: var(--bb-role-srp-hero-title-size, 2.5rem); color: var(--bb-role-srp-hero-title-color, var(--bb-srl-hero-h1, #99ffbb)); }
  .bb-results-hero .bb-lead    { font-size: var(--bb-role-srp-hero-lead-size, 1.1rem); color: var(--bb-role-srp-hero-lead-color, var(--bb-srl-hero-lead, #a0b8b8)); }
}
/* Filterbalk */
.bb-filter-pill {
  font-family: var(--bb-role-srp-flt-pill-font, var(--bb-font));
  font-size: var(--bb-role-srp-flt-pill-size, 0.9rem);
  font-weight: var(--bb-role-srp-flt-pill-weight, 600);
  line-height: var(--bb-role-srp-flt-pill-lh, 1.2);
  color: var(--bb-role-srp-flt-pill-color, var(--bb-dark));
}
.bb-filter-check {
  font-family: var(--bb-role-srp-flt-opt-font, inherit);
  font-size: var(--bb-role-srp-flt-opt-size, inherit);
  font-weight: var(--bb-role-srp-flt-opt-weight, inherit);
  line-height: var(--bb-role-srp-flt-opt-lh, inherit);
  color: var(--bb-role-srp-flt-opt-color, inherit);
}
.bb-filter-count-badge {
  font-family: var(--bb-role-srp-flt-badge-font, inherit);
  font-size: var(--bb-role-srp-flt-badge-size, inherit);
  font-weight: var(--bb-role-srp-flt-badge-weight, inherit);
  line-height: var(--bb-role-srp-flt-badge-lh, normal);
  color: var(--bb-role-srp-flt-badge-color, inherit);
}
.bb-filterbar__submit {
  font-family: var(--bb-role-srp-flt-submit-font, var(--bb-font));
  font-size: var(--bb-role-srp-flt-submit-size, 0.86rem);
  font-weight: var(--bb-role-srp-flt-submit-weight, 700);
  line-height: var(--bb-role-srp-flt-submit-lh, 1.2);
  color: var(--bb-role-srp-flt-submit-color, var(--bb-srl-fs-text, var(--bb-dark)));
}
.bb-filterbar__actief-label {
  font-family: var(--bb-role-srp-flt-actief-font, inherit);
  font-size: var(--bb-role-srp-flt-actief-size, inherit);
  font-weight: var(--bb-role-srp-flt-actief-weight, inherit);
  line-height: var(--bb-role-srp-flt-actief-lh, inherit);
  color: var(--bb-role-srp-flt-actief-color, var(--bb-srl-actief-label, inherit));
}
.bb-filterbar__reset {
  font-family: var(--bb-role-srp-flt-reset-font, inherit);
  font-size: var(--bb-role-srp-flt-reset-size, inherit);
  font-weight: var(--bb-role-srp-flt-reset-weight, inherit);
  line-height: var(--bb-role-srp-flt-reset-lh, inherit);
  color: var(--bb-role-srp-flt-reset-color, var(--bb-srl-reset-text, inherit));
}
/* Weergave */
.bb-results-bar__count {
  font-family: var(--bb-role-srp-count-font, inherit);
  font-size: var(--bb-role-srp-count-size, inherit);
  font-weight: var(--bb-role-srp-count-weight, inherit);
  line-height: var(--bb-role-srp-count-lh, inherit);
  color: var(--bb-role-srp-count-color, var(--bb-srl-count-text, inherit));
}
.bb-sort-select {
  font-family: var(--bb-role-srp-perpage-font, var(--bb-font));
  font-size: var(--bb-role-srp-perpage-size, 0.82rem);
  font-weight: var(--bb-role-srp-perpage-weight, 600);
  line-height: var(--bb-role-srp-perpage-lh, normal);
  color: var(--bb-role-srp-perpage-color, var(--bb-srl-pp-text, var(--bb-text)));
}
.bb-fav-toggle {
  font-family: var(--bb-role-srp-fav-font, var(--bb-font));
  font-size: var(--bb-role-srp-fav-size, 0.82rem);
  font-weight: var(--bb-role-srp-fav-weight, 600);
  line-height: var(--bb-role-srp-fav-lh, normal);
  color: var(--bb-role-srp-fav-color, var(--bb-srl-fav-text, var(--bb-text-muted)));
}
/* Map view */
.bb-poi-bar__label {
  font-family: var(--bb-role-srp-poi-label-font, inherit);
  font-size: var(--bb-role-srp-poi-label-size, inherit);
  font-weight: var(--bb-role-srp-poi-label-weight, inherit);
  line-height: var(--bb-role-srp-poi-label-lh, inherit);
  color: var(--bb-role-srp-poi-label-color, inherit);
}
/* Paginering */
.bb-pagination a, .bb-pagination .current {
  font-family: var(--bb-role-srp-pag-num-font, inherit);
  font-size: var(--bb-role-srp-pag-num-size, 0.875rem);
  font-weight: var(--bb-role-srp-pag-num-weight, 600);
  line-height: var(--bb-role-srp-pag-num-lh, normal);
}
.bb-pagination .prev, .bb-pagination .next {
  font-family: var(--bb-role-srp-pag-nav-font, inherit);
  font-size: var(--bb-role-srp-pag-nav-size, 0.875rem);
  font-weight: var(--bb-role-srp-pag-nav-weight, 600);
  line-height: var(--bb-role-srp-pag-nav-lh, normal);
}

/* v3.9.479 — prompt shown in the map sidebar until an area has been drawn.
   The list is area-driven, so this is its normal resting state, not an error. */
.bb-map-draw-hint {
  padding: 28px 20px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--bb-text-muted, #6b7280);
}

/* v3.9.481 — the map sidebar is a drawing aid, so the column only exists once
   "Teken gebied" is active. Without the class the map takes the full width. */
#bb-map-wrap .bb-map-sidebar-wrap { display: none; }
#bb-map-wrap.bb-map-has-sidebar .bb-map-sidebar-wrap { display: flex; }

/* v3.9.481 — per-view page background, set in Design → Resultlist. Sits behind
   the cards only and starts under the filter bar; empty = theme default. */
/* List and grid share one wrapper; the grid state is `.is-grid` on the inner
   list, so the grid colour is selected via :has() with a list-view fallback. */
#bb-results-list-wrap { background: var(--bb-srl-page-bg-list, transparent); }
#bb-results-list-wrap:has(#bb-results-list.is-grid) { background: var(--bb-srl-page-bg-grid, var(--bb-srl-page-bg-list, transparent)); }
#bb-map-wrap { background: var(--bb-srl-page-bg-map, transparent); }