/* ============================================================
   BoemBoost — Property Detail Page
   Matches the design in suplusnis-project-detail-v2.html
============================================================ */

/* ---- Hero Carousel ---- */
.bb-prop-hero { margin-top: 5px; background: var(--bb-white); padding: 32px 0 20px; overflow: hidden; }
/* v3.9.372 — name+city header above the image.
   v3.9.474 — now shown on desktop too, centred. The mobile block further down
   (max-width:768px) keeps its own left-aligned sizing, untouched. The bar's
   own name/location slot is left alone — remove it there via the bar slot
   settings if you don't want it twice. */
.bb-prop-hero__mobhead {
    display: block;
    text-align: center;
    padding: 0 16px 20px;
}
.bb-prop-hero__mobhead .bb-prop-eyebrow {
    font-size: var(--bb-prop-mobhead-name-size, 1.75rem);
    letter-spacing: 0; text-transform: none;
    color: var(--bb-prop-mobhead-name, var(--bb-dark));
    font-weight: 700; margin: 0 0 4px;
}
.bb-prop-hero__mobhead .bb-prop-bar__location {
    font-size: var(--bb-prop-mobhead-city-size, 12px);
    color: var(--bb-prop-mobhead-city, var(--bb-text-muted));
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
/* v3.9.477 — the header above the image holds the name and the city, each
   shown or hidden per device by the position settings. Both keep the styling
   of the place they come from. */
.bb-prop-hero__mobhead:has(> :not(.bb-hide-desktop)) { display: block; }
.bb-prop-hero__viewport { width: 100%; overflow: hidden; position: relative; }
.bb-prop-hero__track {
    display: flex;
    align-items: center;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.bb-prop-hero__slide {
    flex-shrink: 0;
    width: min(76vw, 1024px);
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: unset;
    border-radius: var(--bb-prop-hero-slide-radius, 16px);
    overflow: hidden;
    margin: 0 10px;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.55s;
    opacity: 0.45;
    transform: scale(0.93);
    cursor: pointer;
    position: relative;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.bb-prop-hero__slide.is-active {
    opacity: 1;
    transform: scale(1);
    cursor: zoom-in;
}
.bb-prop-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    user-select: none;
}
.bb-prop-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,20,20,0.72) 0%, transparent 55%);
    opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.bb-prop-hero__slide.is-active .bb-prop-hero__overlay { opacity: 1; }

.bb-prop-hero__info {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 32px 40px 36px;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.bb-prop-hero__info-left { max-width: 560px; }
.bb-prop-hero__eyebrow {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(153,255,187,0.75); font-weight: 600; margin-bottom: 10px;
    display: flex; align-items: center; gap: 10px;
}
.bb-prop-hero__eyebrow::before { content: ''; width: 20px; height: 1px; background: rgba(153,255,187,0.5); }
.bb-prop-hero__title { font-size: clamp(1.6rem,3vw,2.6rem); color: #fff; line-height: 1.1; margin-bottom: 14px; }
.bb-prop-hero__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-prop-hero__badge {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(8px);
}
.bb-prop-hero__badge--green {
    background: rgba(153,255,187,0.15); border-color: rgba(153,255,187,0.4); color: var(--bb-accent);
}
.bb-prop-hero__price-box {
    background: rgba(0,59,59,0.75); border: 1px solid rgba(153,255,187,0.2);
    backdrop-filter: blur(12px); padding: 18px 24px; border-radius: 14px;
    text-align: right; flex-shrink: 0;
}
.bb-prop-hero__price-label { font-size: 10px; color: rgba(153,255,187,0.6); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 4px; }
.bb-prop-hero__price { font-family: var(--bb-font-heading); font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1; }
.bb-prop-hero__price-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 4px; }

/* Controls row below carousel */
.bb-prop-hero__controls {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0 0;
    /* v3.9.260 — align to the image via its exact measured left + width (set by
       JS), so both edges match regardless of scrollbar. Fallback centers via
       auto margins before JS runs. */
    width: var(--bb-hero-img-w, min(76vw, 1024px));
    margin-left: var(--bb-hero-img-left, auto);
    margin-right: auto;
    max-width: 100%;
}
.bb-prop-hero__back {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; color: var(--bb-text-muted);
    text-decoration: none; transition: color 0.2s; width: 160px;
}
.bb-prop-hero__back:hover { color: var(--bb-dark); }
.bb-prop-hero__back svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.bb-prop-hero__nav { display: flex; align-items: center; gap: 12px; }
.bb-prop-hero__nav-btn {
    width: 38px; height: 38px; background: var(--bb-dark);
    border: none; border-radius: var(--bb-prop-hero-nav-radius, var(--bb-r-md));
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: opacity 0.2s; flex-shrink: 0;
}
.bb-prop-hero__nav-btn:hover { opacity: 0.8; }
.bb-prop-hero__nav-btn svg { width: 18px; height: 18px; fill: var(--bb-accent); }

/* v3.9.249 — Hero side-arrows (Option B). Hidden by default; shown per-device
   via #bb-hero-nav-modes inline CSS when that device's mode = arrows. Style
   knobs come from --bb-sa-* vars set per breakpoint. */
.bb-prop-hero__side {
    display: none; /* toggled to flex per-device */
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    padding: var(--bb-sa-pad, 0);
    border: none; cursor: pointer;
    background: var(--bb-sa-bg, transparent);
    border-radius: var(--bb-sa-radius, 0);
    color: var(--bb-sa-icon, #fff);
    transition: background 0.2s, color 0.2s, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
}
/* Inset to sit near the active slide edge (active slide ≈ min(76vw,1024px) centered). */
.bb-prop-hero__side--prev { left: var(--bb-sa-inset-left, max(12px, calc((100% - min(76vw, 1024px)) / 2 + 12px))); }
.bb-prop-hero__side--next { right: var(--bb-sa-inset-right, max(12px, calc((100% - min(76vw, 1024px)) / 2 + 12px))); }
.bb-prop-hero__side svg { width: 24px; height: 24px; stroke-width: var(--bb-sa-thick, 2); display: block; }
.bb-prop-hero__side:hover {
    background: var(--bb-sa-bg-hover, var(--bb-sa-bg, transparent));
    color: var(--bb-sa-icon-hover, var(--bb-sa-icon, #fff));
}

.bb-prop-hero__dots { display: flex; gap: 5px; align-items: center; }
.bb-prop-hero__dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(0,59,59,0.2); transition: all 0.25s; cursor: pointer; border: none;
}
.bb-prop-hero__dot.is-active { background: var(--bb-dark); width: 20px; border-radius: 3px; }
.bb-prop-hero__counter { font-size: 11px; color: var(--bb-text-muted); font-weight: 500; min-width: 36px; text-align: right; }
.bb-prop-hero__actions { display: flex; align-items: center; gap: 8px; width: 160px; justify-content: flex-end; }
.bb-prop-hero__action {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff;
    border: 1.5px solid var(--bb-prop-hero-action-border, rgba(0,59,59,0.2));
    border-radius: var(--bb-prop-hero-action-radius, var(--bb-r-md));
    color: var(--bb-text-muted); font-size: 12px; font-weight: 500;
    padding: 7px 12px; cursor: pointer; transition: all 0.2s;
}
.bb-prop-hero__action:hover { border-color: var(--bb-prop-hero-action-hover-border, var(--bb-dark)); color: var(--bb-dark); }
.bb-prop-hero__action svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }

/* ---- Sticky info bar ---- */
.bb-prop-bar {
    position: sticky; top: 72px; z-index: 200;
    background: var(--bb-dark);
    border-bottom: 1px solid rgba(153,255,187,0.1);
}
.bb-prop-bar.is-visible { /* kept for JS compat, not needed */ }
.bb-prop-bar__inner {
    display: flex; align-items: center; gap: 24px;
    /* v3.9.260 — match the image via exact measured left + width (--bb-hero-img-*),
       so the purple bar's content lines up on both edges. Bg stays full-bleed. */
    padding: 0; height: 56px;
    width: var(--bb-hero-img-w, min(76vw, 1024px));
    margin-left: var(--bb-hero-img-left, auto);
    margin-right: auto;
    max-width: 100%;
}
/* v3.9.250 — model A: name + items are equal-share zones so their per-device
   alignment (text-align / justify-content) has room to take effect. CTA pinned right. */
.bb-prop-bar__name { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; }
.bb-prop-bar__location { font-size: 10px; color: rgba(153,255,187,0.6); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.bb-prop-bar__title { font-size: 0.9rem; font-weight: 600; color: #fff; }
.bb-prop-bar__item { flex-shrink: 0; display: flex; flex-direction: column; }
.bb-prop-bar__label { font-size: 10px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.08em; }
.bb-prop-bar__value { font-size: 0.85rem; font-weight: 600; color: #fff; }
.bb-prop-bar__cta {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: var(--bb-accent); color: var(--bb-dark);
    padding: 0.4rem 1rem; border-radius: 20px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    transition: background 0.2s;
}
.bb-prop-bar__cta:hover { background: #66e699; }
.bb-prop-bar__cta svg { width: 14px; height: 14px; fill: currentColor; }

/* v3.9.266 — slot system. Two layout containers, one shown per breakpoint by
   #bb-prop-bar-modes: __flat (spread) and __split (left/right groups). */
.bb-prop-bar__inner { position: relative; }
.bb-prop-bar__flat  { display: flex; align-items: center; gap: 24px; width: 100%; justify-content: space-between; }
.bb-prop-bar__split { display: none; align-items: center; gap: 24px; width: 100%; justify-content: space-between; }
.bb-prop-bar__side  { display: flex; align-items: center; gap: 24px; min-width: 0; }
.bb-prop-bar__side--left  { justify-content: flex-start; }
.bb-prop-bar__side--right { justify-content: flex-end; }
.bb-prop-bar__slot  { display: flex; align-items: center; flex: 0 0 auto; }
.bb-prop-bar__slot .bb-prop-bar__name { flex: 0 0 auto; }
/* v3.9.285 — safety: keep a minimum gap between adjacent slots even if a flex
   container's gap is stripped by caching/older CSS, so items never touch. */
.bb-prop-bar__flat > .bb-prop-bar__slot + .bb-prop-bar__slot,
.bb-prop-bar__side > .bb-prop-bar__slot + .bb-prop-bar__slot { margin-left: 24px; }

/* v3.9.266 — per-device visibility for slots (breakpoints: desktop >=1025,
   tablet 769-1024, mobile <=768). Applies to slots in flat + both split sides. */
@media (min-width:1025px) { .bb-prop-bar__slot.bb-hide-desktop { display: none !important; } }
@media (min-width:769px) and (max-width:1024px) { .bb-prop-bar__slot.bb-hide-tablet { display: none !important; } }
@media (max-width:768px) { .bb-prop-bar__slot.bb-hide-mobile { display: none !important; } }
/* v3.9.476 — the same per-device visibility for the hero header and for
   Info-balk slots relocated above the image. v3.9.475 put bb-hide-* classes on
   these elements, but every rule above is scoped to a bar slot / bar item, so
   nothing matched and both position dropdowns did nothing: the header rendered
   in both places at once. These rules are what make those settings work. */
@media (min-width:1025px) {
  .bb-prop-eyebrow.bb-hide-desktop,
  .bb-prop-bar__location.bb-hide-desktop,
  .bb-prop-hero__mobhead.bb-hide-desktop,
  .bb-prop-hero__mobhead .bb-hide-desktop { display: none !important; }
}
@media (min-width:769px) and (max-width:1024px) {
  .bb-prop-eyebrow.bb-hide-tablet,
  .bb-prop-bar__location.bb-hide-tablet,
  .bb-prop-hero__mobhead.bb-hide-tablet,
  .bb-prop-hero__mobhead .bb-hide-tablet { display: none !important; }
}
@media (max-width:768px) {
  .bb-prop-eyebrow.bb-hide-mobile,
  .bb-prop-bar__location.bb-hide-mobile,
  .bb-prop-hero__mobhead.bb-hide-mobile,
  .bb-prop-hero__mobhead .bb-hide-mobile { display: none !important; }
}
/* keep old __item hide rules for any legacy markup */
@media (min-width:1025px) { .bb-prop-bar__item.bb-hide-desktop { display: none !important; } }
@media (min-width:769px) and (max-width:1024px) { .bb-prop-bar__item.bb-hide-tablet { display: none !important; } }
@media (max-width:768px) { .bb-prop-bar__item.bb-hide-mobile { display: none !important; } }

/* ---- Section base ---- */
.bb-prop-section { padding: 72px 5%; }
.bb-prop-section--sand { background: var(--bb-bg); }
.bb-prop-section--white { background: #fff; }
.bb-prop-section--teal { background: var(--bb-dark); }
.bb-prop-container { max-width: 1100px; margin: 0 auto; }
.bb-prop-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-text-muted); font-weight: 600; margin-bottom: 10px; }
.bb-prop-section--teal .bb-prop-eyebrow { color: rgba(153,255,187,0.6); }
.bb-prop-h2 { font-family: var(--bb-font-heading); font-size: clamp(1.6rem,2.8vw,2.2rem); font-weight: 600; line-height: 1.2; color: var(--bb-text); margin-bottom: 32px; }
.bb-prop-h2 em { font-style: normal; color: var(--bb-dark); }
.bb-prop-section--teal .bb-prop-h2, .bb-prop-section--teal .bb-prop-h2 em { color: #fff; }

/* ---- Description + Facilities ---- */
.bb-prop-desc p { font-size: 0.95rem; line-height: 1.75; color: var(--bb-text-muted); margin-bottom: 1rem; }

/* ── Mobile read-more / lees meer ── */
.bb-prop-read-more {
    display: inline-block; /* v3.9.399 — now shown on all screens, not just mobile */
    margin-top: 10px;
    background: var(--bb-prop-desc-readmore-bg, transparent);
    border: 1px solid var(--bb-border, rgba(0,59,59,.15));
    border-radius: var(--bb-prop-desc-readmore-radius, 20px);
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bb-prop-desc-readmore, var(--bb-dark, #003b3b));
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
/* v3.9.378 — only apply hover on real hover devices, so tapping the button on
   mobile/touch doesn't leave it stuck in the (green) hover state.
   v3.9.400 — no fallback: if the hover colours aren't set in Design → Property,
   the button keeps its normal appearance on hover (no green default). The vars
   stay configurable — set them to enable a hover effect. */
@media (hover: hover) {
    .bb-prop-read-more:hover {
        background: var(--bb-prop-desc-readmore-bg-hover);
        color: var(--bb-prop-desc-readmore-hover);
    }
}
/* v3.9.399 — read-more truncation on ALL screens. Collapsed line count grows
   with viewport: mobile 7 → iPad 10 → desktop 12. */
.bb-prop-desc--truncated.is-collapsed .bb-prop-desc__inner {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; /* mobile default (< 641px) */
}
.bb-prop-desc--truncated.is-expanded .bb-prop-desc__inner {
    overflow: visible;
    display: block;
    -webkit-line-clamp: unset;
}
@media (min-width: 641px) and (max-width: 1024px) {
    .bb-prop-desc--truncated.is-collapsed .bb-prop-desc__inner { -webkit-line-clamp: 10; } /* iPad */
}
@media (min-width: 1025px) {
    .bb-prop-desc--truncated.is-collapsed .bb-prop-desc__inner { -webkit-line-clamp: 12; } /* desktop */
}
.bb-prop-facil { margin-top: 32px; }
.bb-prop-facil-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-text-muted); font-weight: 600; margin-bottom: 16px; }
.bb-prop-facil-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
    list-style: none; padding: 0; margin: 0;
}
.bb-prop-facil-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; color: var(--bb-text-muted); font-weight: 500;
}
.bb-prop-facil-list li::before {
    content: '✓';
    width: var(--bb-prop-facil-icon-size, 18px); height: var(--bb-prop-facil-icon-size, 18px);
    border-radius: var(--bb-prop-facil-icon-radius, 50%);
    background: var(--bb-prop-facil-icon-bg, var(--bb-dark)); color: var(--bb-prop-facil-icon, var(--bb-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.bb-prop-facil-label { font-weight: 600; color: var(--bb-dark); }
.bb-prop-facil-value { color: var(--bb-text-muted); margin-left: 2px; }
.bb-prop-facil-value::before { content: ': '; }

/* v3.9.255 — per-device visibility for facilities list items. */
@media (min-width:1025px) { .bb-prop-facil-list li.bb-hide-desktop { display: none !important; } }
@media (min-width:769px) and (max-width:1024px) { .bb-prop-facil-list li.bb-hide-tablet { display: none !important; } }
@media (max-width:768px) { .bb-prop-facil-list li.bb-hide-mobile { display: none !important; } }

/* ---- Availability table ---- */
.bb-prop-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.bb-prop-tab {
    padding: 8px 20px; border-radius: 20px; border: 1.5px solid var(--bb-border);
    background: transparent; color: var(--bb-text-muted); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.bb-prop-tab.is-active { background: var(--bb-dark); color: var(--bb-accent); border-color: var(--bb-dark); }
.bb-prop-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--bb-border); }
.bb-prop-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.bb-prop-table th {
    background: #f4f7f5; padding: 12px 16px; text-align: left;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--bb-text-muted); border-bottom: 1px solid var(--bb-border); white-space: nowrap;
}
.bb-prop-table td { padding: 14px 16px; border-bottom: 1px solid var(--bb-border); color: var(--bb-text); vertical-align: middle; }
.bb-prop-table tr:last-child td { border-bottom: none; }
.bb-prop-table tr:hover td { background: #f9fbfa; }
.bb-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.bb-status--available { background: rgba(153,255,187,0.15); color: #006633; }
.bb-status--option    { background: rgba(255,165,0,0.1);    color: #996600; }
.bb-status--sold      { background: rgba(220,38,38,0.08);   color: #dc2626; }
.bb-status__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.bb-prop-floorplan-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
    background: var(--bb-dark); color: var(--bb-accent); border: none;
    border-radius: var(--bb-r-sm); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: opacity 0.2s; font-family: inherit;
}
.bb-prop-floorplan-btn:hover { opacity: 0.8; }
.bb-prop-floorplan-btn svg { width: 12px; height: 12px; fill: currentColor; }
.bb-prop-table-note { font-size: 12px; color: var(--bb-text-muted); margin-top: 16px; line-height: 1.6; }

/* Suplusnis advantage trigger */
.bb-prop-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--bb-dark); border-radius: 14px; padding: 28px 32px; margin-top: 40px;
    flex-wrap: wrap;
}
/* v3.9.403 — consecutive trigger blocks stack with a tighter gap */
.bb-prop-trigger + .bb-prop-trigger { margin-top: 16px; }
.bb-prop-trigger__eyebrow { font-size: 10px; color: rgba(153,255,187,0.6); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 8px; }
.bb-prop-trigger__title { font-family: var(--bb-font-heading); font-size: 1.2rem; color: #fff; font-weight: 600; }
.bb-prop-trigger__list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.bb-prop-trigger__list li { font-size: 12px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 6px; }
.bb-prop-trigger__list li::before { content: '✓'; color: var(--bb-prop-trig-check, var(--bb-accent)); font-weight: 700; }
.bb-prop-trigger__cta {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: var(--bb-accent); color: var(--bb-dark);
    padding: 0.7rem 1.6rem; border-radius: 40px;
    font-size: 0.85rem; font-weight: 700; text-decoration: none;
    transition: background 0.2s;
}
.bb-prop-trigger__cta:hover { background: #66e699; }
.bb-prop-trigger__cta svg { width: 16px; height: 16px; fill: currentColor; }
/* v3.9.472 — trigger block can hold two buttons (slot 1 + optional slot 2).
   They stack vertically and share the same width so the block stays tidy. */
.bb-prop-trigger__btns {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; flex-shrink: 0;
    /* v3.9.474 — same trick as the footer: shrink to the widest child so
       both buttons come out equal width regardless of label length. */
    width: fit-content;
}
.bb-prop-trigger__btns > * { justify-content: center; }
@media (max-width: 640px) {
    .bb-prop-trigger__btns { width: 100%; }
}

/* ---- Payment plan ---- */
.bb-prop-payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.bb-prop-payment-step {
    background: #fff; border: 1px solid var(--bb-border); border-radius: 14px;
    padding: 24px;
}
.bb-prop-payment-step--highlight { background: var(--bb-dark); border-color: var(--bb-dark); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__nr  { color: rgba(153,255,187,0.6); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__pct { color: var(--bb-accent); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__moment { color: #fff; }
.bb-prop-payment-step--highlight .bb-prop-payment-step__desc { color: rgba(255,255,255,0.6); }
.bb-prop-payment-step__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bb-prop-payment-step__nr { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--bb-text-muted); }
.bb-prop-payment-step__pct { font-family: var(--bb-font-heading); font-size: 2rem; font-weight: 700; color: var(--bb-dark); line-height: 1; }
.bb-prop-payment-step__moment { font-size: 0.95rem; font-weight: 600; color: var(--bb-text); margin-bottom: 8px; }
.bb-prop-payment-step__desc { font-size: 0.82rem; color: var(--bb-text-muted); line-height: 1.6; }
.bb-prop-payment-note { font-size: 12px; color: var(--bb-text-muted); margin-top: 24px; line-height: 1.6; }

/* ---- Location & map ---- */
/* Stacked layout: POI/distance items in a 5-per-row grid ABOVE, map full-width BELOW. */
.bb-prop-location-grid { display: block; }
.bb-prop-distances {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.bb-prop-distance-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    background: #fff;
}
.bb-prop-distance-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--bb-bg); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bb-prop-distance-icon svg { width: 18px; height: 18px; fill: var(--bb-dark); }
.bb-prop-distance-name { font-size: 0.9rem; font-weight: 600; color: var(--bb-text); line-height: 1.2; }
.bb-prop-distance-km  { font-size: 12px; color: var(--bb-text-muted); margin-top: 2px; }
.bb-prop-map { height: 640px; min-height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--bb-border); }

/* ---- Distance list mobile toggle (v3.9.368) ----
   Desktop: toggle hidden, all distance items always visible.
   Mobile:  toggle shown, items collapsed by default; .is-open reveals them.
   Links reuse .bb-poi-toggle-link styling from filter.css; active = underline. */
.bb-prop-distances-toggle { display: none; }
.bb-prop-distances-toggle .bb-poi-toggle-link.is-active { text-decoration: underline; }

/* ---- Similar properties ---- */
.bb-prop-similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.bb-prop-similar-card {
    display: block; text-decoration: none;
    background: #fff; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--bb-border); transition: transform 0.25s, box-shadow 0.25s;
}
.bb-prop-similar-card:hover { transform: translateY(-3px); box-shadow: var(--bb-shadow-similar-hover, var(--bb-shadow-lg)); }
.bb-prop-similar-photo { height: 180px; background: var(--bb-dark); overflow: hidden; position: relative; }
.bb-prop-similar-photo img { width: 100%; height: 100%; object-fit: cover; }
.bb-prop-similar-pill {
    position: absolute; top: 12px; left: 12px;
    background: rgba(0,59,59,0.85); color: var(--bb-accent);
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 10px; letter-spacing: 0.05em;
}
.bb-prop-similar-body { padding: 16px 18px; }
.bb-prop-similar-location { font-size: 11px; color: var(--bb-text-muted); margin-bottom: 4px; }
.bb-prop-similar-name { font-size: 1rem; font-weight: 700; color: var(--bb-text); margin-bottom: 8px; }
.bb-prop-similar-specs { font-size: 12px; color: var(--bb-text-muted); display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.bb-prop-similar-price { font-size: 0.95rem; font-weight: 600; color: var(--bb-dark); }

/* ---- Contact section ---- */
.bb-prop-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.bb-prop-contact-text h2 { color: #fff; margin-bottom: 16px; }
.bb-prop-contact-text p { color: rgba(255,255,255,0.65); font-size: 0.95rem; line-height: 1.7; }
.bb-prop-contact-input {
    width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--bb-r-md); color: #fff; font-family: inherit; font-size: 0.9rem;
    padding: 12px 16px; margin-bottom: 12px; transition: border-color 0.2s;
}
.bb-prop-contact-input::placeholder { color: rgba(255,255,255,0.35); }
.bb-prop-contact-input:focus { outline: none; border-color: rgba(153,255,187,0.4); }
.bb-prop-contact-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.bb-prop-btn-mint {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bb-accent); color: var(--bb-dark);
    padding: 0.7rem 1.6rem; border-radius: 40px; border: none;
    font-family: inherit; font-size: 0.875rem; font-weight: 700;
    cursor: pointer; transition: background 0.2s; text-decoration: none;
}
.bb-prop-btn-mint:hover { background: #66e699; }
.bb-prop-btn-mint svg { width: 16px; height: 16px; fill: currentColor; }
.bb-prop-btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: var(--bb-accent);
    padding: 0.7rem 1.6rem; border-radius: 40px;
    border: 1.5px solid rgba(153,255,187,0.35);
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.bb-prop-btn-outline:hover { background: rgba(153,255,187,0.1); border-color: var(--bb-accent); }
.bb-prop-btn-outline svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- Lightbox ---- */
.bb-prop-lightbox {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,10,10,0.95);
    flex-direction: column;
    align-items: center;
    padding: 64px 0 16px; /* top: room for close btn; bottom: breathing room */
}
.bb-prop-lightbox.is-open { display: flex; }
.bb-prop-lightbox__close {
    position: absolute; top: 12px; right: 16px;
    background: rgba(255,255,255,0.15); border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 22px; color: #fff; z-index: 10;
    transition: background 0.2s, border-color 0.2s;
}
.bb-prop-lightbox__close:hover {
    background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.6);
}
/* Main area: takes all space above the thumbs, centers image vertically */
.bb-prop-lightbox__main {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; width: 100%; min-height: 0;
}
.bb-prop-lightbox__track {
    display: flex; overflow: hidden;
    max-width: 90vw; width: 90vw;
    height: 100%; max-height: calc(100vh - 64px - 85px); /* viewport minus padding and thumbs */
    align-items: center;
}
.bb-prop-lightbox__img {
    flex-shrink: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.bb-prop-lightbox__img img {
    max-width: 90vw; max-height: calc(100vh - 64px - 85px);
    width: auto; height: auto;
    object-fit: contain; border-radius: 8px; display: block;
}
.bb-prop-lightbox__btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s; z-index: 5;
}
.bb-prop-lightbox__btn:hover { background: rgba(255,255,255,0.2); }
.bb-prop-lightbox__btn svg { width: 24px; height: 24px; fill: #fff; }
.bb-prop-lightbox__btn--prev { left: 16px; }
.bb-prop-lightbox__btn--next { right: 16px; }
.bb-prop-lightbox__thumbs {
    display: flex; gap: 8px; flex-shrink: 0;
    margin-top: 12px; overflow-x: auto; max-width: 90vw; padding-bottom: 4px;
}
.bb-prop-lightbox__thumb {
    width: 60px; height: 45px; border-radius: 6px; overflow: hidden;
    border: 2px solid transparent; cursor: pointer; flex-shrink: 0; opacity: 0.5; transition: all 0.2s;
}
.bb-prop-lightbox__thumb.is-active { border-color: var(--bb-accent); opacity: 1; }
.bb-prop-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Floor plan modal ---- */
.bb-prop-modal {
    display: none; position: fixed; inset: 0; z-index: 800;
    background: rgba(0,20,20,0.9); align-items: center; justify-content: center;
}
.bb-prop-modal.is-open { display: flex; }
.bb-prop-modal__box {
    background: #fff; border-radius: 16px; padding: 32px;
    max-width: 480px; width: 90%; position: relative;
}
.bb-prop-modal__close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; font-size: 20px; cursor: pointer; color: var(--bb-text-muted);
}
.bb-prop-modal__title { font-family: var(--bb-font-heading); font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; }
.bb-prop-modal__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bb-prop-modal__spec { background: var(--bb-bg); border-radius: 10px; padding: 12px 16px; }
.bb-prop-modal__spec-label { font-size: 11px; color: var(--bb-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.bb-prop-modal__spec-value { font-size: 1rem; font-weight: 700; color: var(--bb-dark); margin-top: 2px; }
.bb-prop-modal__placeholder { background: var(--bb-bg); border-radius: 10px; height: 120px; margin: 20px 0; display: flex; align-items: center; justify-content: center; color: var(--bb-text-muted); font-size: 13px; }
.bb-prop-modal__cta { width: 100%; text-align: center; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .bb-prop-hero__slide { width: 85vw; aspect-ratio: 16/9; height: auto; min-height: unset; }
    .bb-prop-hero__info { padding: 20px 24px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
    .bb-prop-hero__price-box { text-align: left; }
    .bb-prop-bar__items { gap: 12px; }
    .bb-prop-distances { grid-template-columns: repeat(3, 1fr); }
    .bb-prop-map { height: 460px; }
    .bb-prop-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .bb-prop-distances { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .bb-prop-map { height: 360px; }
    /* v3.9.368 — distance list collapsed by default on mobile */
    .bb-prop-distances-toggle { display: block; margin-bottom: 12px; }
    .bb-prop-distances-wrap .bb-prop-distance-item { display: none; }
    .bb-prop-distances-wrap.is-open .bb-prop-distance-item { display: flex; }
    /* ── Hero: scroll-snap carousel ─────────────────────────────────────────
       Viewport is the scroll container with 5px padding on each side.
       Each slide is calc(100vw - 10px) wide — absolute, not relative.
       Result: active slide centered, 5px of adjacent slides peeking on each side.
    ── */
    .bb-prop-hero         { padding: 16px 0 0 !important; overflow-x: hidden !important; }
    /* v3.9.372 — mobile name + city above the image */
    .bb-prop-hero__mobhead { display: block; padding: 0 16px 12px; text-align: left; }
    .bb-prop-hero__mobhead .bb-prop-eyebrow {
        font-size: var(--bb-prop-mobhead-name-size, 1.25rem); letter-spacing: 0; text-transform: none;
        color: var(--bb-prop-mobhead-name, var(--bb-dark)); font-weight: 700; margin: 0 0 2px;
        line-height: 1.2;
    }
    .bb-prop-hero__mobhead .bb-prop-bar__location {
        font-size: var(--bb-prop-mobhead-city-size, 12px); color: var(--bb-prop-mobhead-city, var(--bb-text-muted)); text-transform: uppercase;
        letter-spacing: 0.08em; font-weight: 600;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .bb-prop-hero__viewport {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    .bb-prop-hero__viewport::-webkit-scrollbar { display: none; }
    .bb-prop-hero__track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        transition: none !important;
        align-items: stretch !important;
    }
    .bb-prop-hero__slide,
    .bb-prop-hero__slide.is-active {
        width: calc(100vw - 10px) !important;
        min-width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        scroll-snap-align: center !important;
        aspect-ratio: 4/3 !important;
        height: auto !important;
        min-height: unset !important;
        border-radius: var(--bb-prop-hero-slide-radius, 10px);
        overflow: hidden;
    }
    .bb-prop-hero__slide           { opacity: 0.45; transform: scale(0.97); transition: opacity 0.3s, transform 0.3s; }
    .bb-prop-hero__slide.is-active { opacity: 1 !important; transform: scale(1) !important; }

    /* ── Hero controls ── */
    /* v3.9.249 — teller bar visibility on mobile is now driven by the per-device
       mode (#bb-hero-nav-modes), not force-hidden. Default remains "off" unless
       a mobile teller mode is chosen. */
    .bb-prop-hero__controls { padding: 10px 16px 12px; gap: 0; justify-content: space-between; width: auto; }
    .bb-prop-hero__actions { width: auto; }
    /* Side arrows sit near the viewport edge on mobile (slide ≈ full width). */
    .bb-prop-hero__side--prev { left: 10px; }
    .bb-prop-hero__side--next { right: 10px; }
    .bb-prop-hero__side { width: 40px; height: 40px; }

    /* ── Other mobile fixes ── */
    .bb-prop-hero__title { font-size: 1.4rem; }
    /* v3.9.250 — items no longer blanket-hidden on mobile; per-field device
       toggles (.bb-hide-mobile) govern visibility instead. */
    .bb-prop-bar__inner { width: auto; padding: 0 16px; }
    /* v3.9.256 — keep the name block inside the bar on mobile (was overflowing). */
    .bb-prop-bar__name { min-width: 0; overflow: hidden; }
    .bb-prop-bar__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* v3.9.373 — project name shows in the mobile header above the image, so
       hide the duplicate title inside the info-bar on mobile. */
    .bb-prop-bar__title { display: none; }
    /* v3.9.374 — the description eyebrow shows the project name on mobile;
       it's already above the image, so hide this duplicate on mobile only. */
    .bb-prop-sec--desc .bb-prop-eyebrow { display: none; }
    .bb-prop-bar__location { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Default mobile: static. When mobile sticky is enabled (per-device toggle
       emits position:sticky !important), the bar follows the nav bar:
       nav visible → top = nav height; nav hidden (scrolling down) → top: 0, so
       there's no gap. v3.9.256 */
    .bb-prop-bar { position: static; top: var(--bb-nav-h-mobile, 72px); transition: top 0.3s ease; }
    html.bb-nav-gone .bb-prop-bar { top: 0; }
    .bb-prop-section { padding: 48px 5%; }
    .bb-prop-payment-grid { grid-template-columns: 1fr; }
    /* ── Prevent horizontal scroll on property page ── */
    body.single-property { overflow-x: hidden; }
    /* ── Similar properties: single column on mobile ── */
    .bb-prop-similar-grid { grid-template-columns: 1fr; }
    /* ── Availability table: reduce min-width on mobile ── */
    .bb-ut-table { min-width: 480px; }

    /* ── Calculator region cards: compact ── */
    .bb-calc-regio-card    { padding: 14px 16px; gap: 12px; align-items: flex-start; }
    .bb-calc-regio-naam    { font-size: 10px; margin-bottom: 6px; }
    .bb-calc-regio-markt   { font-size: 11px; margin-bottom: 2px; white-space: nowrap; }
    .bb-calc-regio-sup     { font-size: 10px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bb-calc-regio-totaal  { font-size: 12px; padding-top: 5px; margin-top: 5px; }
    .bb-calc-regio-sub     { font-size: 10px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bb-calc-regio-besparing  { font-size: 22px; }
    .bb-calc-regio-besplabel  { font-size: 9px; }
}

/* ── Calculator block ── */
/* v3.9.137 — kleuren via Design System → Blocks (--bb-blk-calculator-*),
   fallback = historische waarde: visueel nul verschil tot iets is ingesteld.
   Opaciteitsvarianten volgen de groepskleur via color-mix. */
.bb-calc-sectie { background: var(--bb-blk-calculator-bg, var(--bb-dark, #003b3b)); padding: 64px 0; }
/* Binnen de builder draagt de block-wrapper de achtergrond (cascade + per-page
   override); de sectie is daar transparant zodat overrides zichtbaar zijn. */
.bb-hp-block--calculator .bb-calc-sectie { background: transparent; }
.bb-calc-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
/* Intro — heading + paragraph above the box */
.bb-calc-intro { margin-bottom: 36px; }
.bb-calc-sectie .bb-calc-intro h2 { font-family: var(--bb-role-calc-heading-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif)); font-size: var(--bb-role-calc-heading-size, clamp(24px, 3vw, 40px)); color: var(--bb-role-calc-heading-color, var(--bb-blk-calculator-calc-title, #ffffff)) !important; line-height: var(--bb-role-calc-heading-lh, 1.2); margin-bottom: 12px; font-weight: var(--bb-role-calc-heading-weight, 700); }
.bb-calc-sectie .bb-calc-intro h2 em { font-family: var(--bb-role-calc-accent-font, inherit); font-size: var(--bb-role-calc-accent-size, inherit); font-weight: var(--bb-role-calc-accent-weight, inherit); line-height: var(--bb-role-calc-accent-lh, inherit); color: var(--bb-role-calc-accent-color, var(--bb-blk-calculator-calc-h2-em, var(--bb-blk-calculator-calc-accent, var(--bb-accent, #99ffbb)))) !important; font-style: italic; }
.bb-calc-sectie .bb-calc-intro p { font-family: var(--bb-role-calc-intro-font, inherit); font-size: var(--bb-role-calc-intro-size, 15px); color: var(--bb-role-calc-intro-color, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.55))) !important; line-height: var(--bb-role-calc-intro-lh, 1.8); max-width: 560px; font-weight: var(--bb-role-calc-intro-weight, 300); margin: 0; }
/* Box */
.bb-calc-box { background: var(--bb-blk-calculator-calc-box-bg, rgba(255,255,255,.04)); padding: 36px; border-radius: 14px; }
/* Slider label — "Aankoopprijs woning € 350.000" */
.bb-calc-sectie .bb-calc-slider-label { font-family: var(--bb-role-calc-slider-label-font, inherit); font-size: var(--bb-role-calc-slider-label-size, 11px); letter-spacing: .1em; text-transform: uppercase; color: var(--bb-role-calc-slider-label-color, rgba(153,255,187,.7)) !important; font-weight: var(--bb-role-calc-slider-label-weight, 600); line-height: var(--bb-role-calc-slider-label-lh, normal); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.bb-calc-sectie .bb-calc-slider-label span { font-family: var(--bb-role-calc-slider-value-font, inherit); font-size: var(--bb-role-calc-slider-value-size, 22px); font-weight: var(--bb-role-calc-slider-value-weight, 700); line-height: var(--bb-role-calc-slider-value-lh, normal); color: var(--bb-role-calc-slider-value-color, var(--bb-blk-calculator-calc-light, #ffffff)) !important; letter-spacing: 0; text-transform: none; }
/* v3.9.140 — slider gesplitst in bolletje (thumb) en balk (track).
   De thumb valt terug op --calc-accent (was accent-color). De track valt terug
   op een gedempte variant daarvan, wat de native "dimmed track" look benadert.
   accent-color blijft staan voor browsers zonder ::-thumb/::-track support. */
.bb-calc-slider {
  width: 100%; margin-bottom: 28px; height: 4px;
  accent-color: var(--bb-blk-calculator-calc-slider-thumb, var(--bb-blk-calculator-calc-accent, var(--bb-accent, #99ffbb)));
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* Track */
.bb-calc-slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: var(--bb-blk-calculator-calc-slider-track, rgba(153,255,187,.35));
}
.bb-calc-slider::-moz-range-track {
  height: 4px; border-radius: 999px;
  background: var(--bb-blk-calculator-calc-slider-track, rgba(153,255,187,.35));
}
/* Thumb */
.bb-calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%; border: none; cursor: pointer;
  margin-top: -6px; /* centreert 16px thumb op 4px track */
  background: var(--bb-blk-calculator-calc-slider-thumb, var(--bb-blk-calculator-calc-accent, var(--bb-accent, #99ffbb)));
}
.bb-calc-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bb-blk-calculator-calc-slider-thumb, var(--bb-blk-calculator-calc-accent, var(--bb-accent, #99ffbb)));
}
.bb-calc-slider:focus-visible { outline: 2px solid var(--bb-blk-calculator-calc-slider-thumb, var(--bb-accent, #99ffbb)); outline-offset: 4px; }
.bb-calc-regio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; margin-bottom: 24px; border-radius: 14px; overflow: hidden; }
.bb-calc-regio-card { padding: 24px 28px; background: var(--bb-blk-calculator-calc-card-bg, var(--bb-blk-calculator-calc-box-bg, rgba(255,255,255,.07))); box-shadow: var(--bb-blk-calculator-calc-card-shadow, none); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* v3.9.141 — met een kaartschaduw zou overflow:hidden de schaduw wegknippen.
   bb_inject_blocks_css() zet daarom body.bb-calc-has-shadow wanneer een schaduw
   is ingesteld; dan vervalt de clipping en krijgt de gap ruimte. */
body.bb-calc-has-shadow .bb-calc-regio-grid { overflow: visible; gap: 14px; }
body.bb-calc-has-shadow .bb-calc-regio-card { border-radius: 12px; }
.bb-calc-regio-naam { font-family: var(--bb-role-calc-card-title-font, inherit); font-size: var(--bb-role-calc-card-title-size, 11px); letter-spacing: .08em; text-transform: uppercase; color: var(--bb-role-calc-card-title-color, rgba(255,255,255,.7)); font-weight: var(--bb-role-calc-card-title-weight, 700); line-height: var(--bb-role-calc-card-title-lh, normal); margin-bottom: 8px; }
.bb-calc-regio-markt { font-family: var(--bb-role-calc-card-row-font, inherit); font-size: var(--bb-role-calc-card-row-size, 13px); font-weight: var(--bb-role-calc-card-row-weight, 400); line-height: var(--bb-role-calc-card-row-lh, normal); color: var(--bb-role-calc-card-row-color, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.55))); margin-bottom: 4px; }
.bb-calc-regio-sup { font-family: var(--bb-role-calc-card-row-font, inherit); font-size: var(--bb-role-calc-card-row-size, 13px); font-weight: var(--bb-role-calc-card-row-weight, 400); line-height: var(--bb-role-calc-card-row-lh, normal); color: rgba(153,255,187,.8); margin-bottom: 12px; }
.bb-calc-regio-totaal { font-family: var(--bb-role-calc-card-row-font, inherit); font-size: var(--bb-role-calc-card-row-size, 13px); color: rgba(255,255,255,.9); font-weight: var(--bb-role-calc-card-row-weight, 600); line-height: var(--bb-role-calc-card-row-lh, normal); border-top: 1px solid rgba(153,255,187,.15); padding-top: 8px; margin-top: 8px; }
.bb-calc-regio-sub { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 4px; }
.bb-calc-regio-left { flex: 1; }
.bb-calc-regio-right { float: right; text-align: right; flex-shrink: 0; margin: -8px 0 8px 16px; }
.bb-calc-regio-left::after { content: ''; display: table; clear: both; } /* clearfix */
.bb-calc-regio-besparing { font-family: var(--bb-role-calc-value-font, inherit); font-size: var(--bb-role-calc-value-size, 32px); font-weight: var(--bb-role-calc-value-weight, 800); color: var(--bb-role-calc-value-color, var(--bb-blk-calculator-calc-accent, var(--bb-accent, #99ffbb))); line-height: var(--bb-role-calc-value-lh, 1); white-space: nowrap; }
.bb-calc-regio-besplabel { font-family: var(--bb-role-calc-value-label-font, inherit); font-size: var(--bb-role-calc-value-label-size, 10px); color: var(--bb-role-calc-value-label-color, rgba(153,255,187,.6)); margin-top: 4px; text-transform: uppercase; letter-spacing: .08em; font-weight: var(--bb-role-calc-value-label-weight, 600); line-height: var(--bb-role-calc-value-label-lh, normal); }
.bb-calc-disclaimer { font-family: var(--bb-role-calc-disclaimer-font, inherit); font-size: var(--bb-role-calc-disclaimer-size, 11px); color: var(--bb-role-calc-disclaimer-color, rgba(255,255,255,.25)); font-weight: var(--bb-role-calc-disclaimer-weight, 400); margin-top: 12px; line-height: var(--bb-role-calc-disclaimer-lh, 1.6); }
.bb-calc-cta { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.bb-calc-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 8px; transition: all .18s; }
.bb-calc-cta-btn.primary { background: var(--bb-btn-calc-cta1-bg, transparent); color: var(--bb-btn-calc-cta1-text, rgba(255,255,255,.7)); border: 1px solid var(--bb-btn-calc-cta1-border, rgba(255,255,255,.2)); border-radius: var(--bb-btn-calc-cta1-radius, 8px); }
.bb-calc-cta-btn.primary:hover { background: var(--bb-btn-calc-cta1-hover-bg, var(--bb-btn-calc-cta1-bg, transparent)); border-color: var(--bb-btn-calc-cta1-hover-border, rgba(255,255,255,.5)); color: var(--bb-btn-calc-cta1-hover-text, #fff); }
.bb-calc-cta-btn.whatsapp { background: var(--bb-btn-calc-cta2-bg, var(--bb-accent, #99ffbb)); color: var(--bb-btn-calc-cta2-text, var(--bb-dark, #003b3b)); border: none; border-radius: var(--bb-btn-calc-cta2-radius, 8px); }
.bb-calc-cta-btn.whatsapp:hover { background: var(--bb-btn-calc-cta2-hover-bg, #7de8a0); color: var(--bb-btn-calc-cta2-hover-text, var(--bb-btn-calc-cta2-text, var(--bb-dark, #003b3b))); }

/* v3.9.139 — Token-driven opaciteitsvarianten: alleen op browsers met
   color-mix. Zonder support blijven de historische literals hierboven
   staan (identiek aan v3.9.136), dus geen visueel verschil op oude browsers.
   Met support volgen deze tinten de Design System → Blocks calculator-groepen. */
@supports (color: color-mix(in srgb, red, blue)) {
  .bb-calc-sectie .bb-calc-slider-label { color: color-mix(in srgb, var(--bb-blk-calculator-calc-accent, #99ffbb) 70%, transparent) !important; }
  .bb-calc-regio-naam    { color: color-mix(in srgb, var(--bb-blk-calculator-calc-light, #ffffff) 70%, transparent); }
  .bb-calc-regio-sup     { color: color-mix(in srgb, var(--bb-blk-calculator-calc-accent, #99ffbb) 80%, transparent); }
  .bb-calc-regio-totaal  { color: color-mix(in srgb, var(--bb-blk-calculator-calc-light, #ffffff) 90%, transparent); border-top-color: color-mix(in srgb, var(--bb-blk-calculator-calc-accent, #99ffbb) 15%, transparent); }
  .bb-calc-regio-sub     { color: color-mix(in srgb, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.55)) 73%, transparent); }
  .bb-calc-regio-besplabel { color: color-mix(in srgb, var(--bb-blk-calculator-calc-accent, #99ffbb) 60%, transparent); }
  .bb-calc-disclaimer    { color: color-mix(in srgb, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.55)) 45%, transparent); }
}
/* Remove 56px side padding from calculator block on all screens so bb-calc-sectie fills to edges */
.bb-hp-block--calculator .bb-hp-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* When rounded corners enabled: give bb-calc-sectie the same radius so it visibly clips */
.bb-hp-rounded.bb-hp-block--calculator .bb-calc-sectie {
  border-radius: 16px;
}

@media (max-width: 640px) {
  /* v3.9.514/515 — de OUDE regiokaarten (.bb-calc-regio-*) blijven onder elkaar
     op mobiel; de calculator die daadwerkelijk in gebruik is, is .bb-calc2-*
     (zie de regels rond max-width 560px). Twee verschillende gedragingen voor
     wat op het scherm hetzelfde oogt is vragen om verwarring. */
  .bb-calc-regio-grid { grid-template-columns: 1fr; }
  .bb-calc-box { padding: 20px; }
  .bb-calc-regio-right {
    float: none;
    margin: 8px 0;
    text-align: left;
  }
  .bb-calc-regio-besparing { font-size: 19px; }
  .bb-calc-regio-markt { white-space: normal; }
}

/* ── Unit accordion table ── */
.bb-ut-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--bb-dark, #003b3b); border-radius: var(--bb-prop-ut-header-radius, 10px) var(--bb-prop-ut-header-radius, 10px) 0 0; margin-bottom: 0; }
.bb-ut-project { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; }
.bb-ut-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.bb-ut-badge { background: var(--bb-accent, #99ffbb); color: var(--bb-dark, #003b3b); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--bb-prop-ut-badge-radius, 20px); white-space: nowrap; }
.bb-ut-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0 16px; }
.bb-ut-filter { background: #f4f7f5; border: 1px solid var(--bb-border, rgba(0,59,59,.12)); border-radius: var(--bb-prop-ut-filter-radius, 20px); padding: 6px 16px; font-size: 12px; font-weight: 600; color: var(--bb-text-muted, #4a6b6b); cursor: pointer; transition: all .18s; }
.bb-ut-filter.is-active, .bb-ut-filter:hover { background: var(--bb-dark, #003b3b); color: #fff; border-color: var(--bb-dark, #003b3b); }
/* Groups */
.bb-ut-group { border: 1px solid var(--bb-border, rgba(0,59,59,.12)); border-radius: var(--bb-prop-ut-grp-radius, 8px); margin-bottom: 8px; overflow: hidden; }
.bb-ut-group-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; background: #fff; transition: background .18s; }
.bb-ut-group-header:hover { background: #f9fbfa; }
.bb-ut-group-label { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; color: var(--bb-dark, #003b3b); }
.bb-ut-group-count { font-size: 11px; color: var(--bb-text-muted, #4a6b6b); background: #f0f4f2; padding: 3px 10px; border-radius: var(--bb-prop-ut-grp-count-radius, 12px); flex-shrink: 0; }
.bb-ut-group-line { flex: 1; height: 1px; background: var(--bb-border, rgba(0,59,59,.12)); }
.bb-ut-chevron { width: 18px; height: 18px; color: var(--bb-text-muted); transition: transform .3s; flex-shrink: 0; }
.bb-ut-group.is-open .bb-ut-chevron { transform: rotate(180deg); }
/* Body */
.bb-ut-group-body { display: none; }
.bb-ut-group.is-open .bb-ut-group-body { display: block; }
.bb-ut-scroll { overflow-x: auto; }
.bb-ut-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
.bb-ut-table thead { background: #f4f7f5; }
.bb-ut-table th { padding: 10px 14px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-text-muted, #4a6b6b); white-space: nowrap; }
.bb-ut-table td { padding: 10px 14px; border-top: 1px solid var(--bb-border, rgba(0,59,59,.08)); color: var(--bb-text, #0d1f1f); white-space: nowrap; }
.bb-ut-table tr:hover td { background: #f9fbfa; }
.bb-ut-status { font-size: 12px; font-weight: 600; }
/* Show more */
.bb-ut-more { padding: 12px 20px; text-align: center; border-top: 1px solid var(--bb-border, rgba(0,59,59,.08)); background: #fff; }
.bb-ut-more-btn { background: none; border: 1px solid var(--bb-border, rgba(0,59,59,.12)); border-radius: var(--bb-prop-ut-more-radius, 6px); padding: 8px 24px; font-size: 12px; font-weight: 600; color: var(--bb-dark, #003b3b); cursor: pointer; transition: all .18s; }
.bb-ut-more-btn:hover { background: var(--bb-dark, #003b3b); color: #fff; border-color: var(--bb-dark, #003b3b); }

/* Unit table mobile pagination — mirrors .bb-pagination, scoped with .bb-ut-pagination */
@media (max-width: 768px) {
  .bb-ut-pagination { display: flex; justify-content: center; margin: 8px 0 4px; }
  .bb-ut-pagination .page-numbers { display: flex; gap: 6px; list-style: none; align-items: center; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0; }
  .bb-ut-pagination a.page-numbers,
  .bb-ut-pagination .page-numbers.current {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    border-radius: var(--bb-r-md, 6px);
    font-size: 0.8125rem; font-weight: 600;
    border: 1.5px solid var(--bb-border, rgba(0,59,59,.12));
    color: var(--bb-text, #0d1f1f);
    transition: background var(--bb-ease, .18s), border-color var(--bb-ease, .18s), color var(--bb-ease, .18s);
    text-decoration: none;
    padding: 0 8px;
    cursor: pointer;
  }
  .bb-ut-pagination a.page-numbers:hover { background: var(--bb-dark, #003b3b); color: #fff; border-color: var(--bb-dark, #003b3b); }
  .bb-ut-pagination .page-numbers.current { background: var(--bb-dark, #003b3b); color: #fff; border-color: var(--bb-dark, #003b3b); }
  .bb-ut-pagination .page-numbers.prev,
  .bb-ut-pagination .page-numbers.next { padding: 0 12px; }
  .bb-ut-pagination .page-numbers.dots { border: none; color: var(--bb-text-muted, #4a6b6b); min-width: auto; background: none; }
}

/* ---- Similar properties carousel ---- */
/* Desktop variant visible above 768px, mobile at or below */
.bb-hp-slider-desktop { display: block; }
.bb-hp-slider-mobile  { display: none;  }
@media (max-width: 768px) {
  .bb-hp-slider-desktop { display: none;  }
  .bb-hp-slider-mobile  { display: block; }
  /* Mobile card track padding matches homepage */
  .bb-hp-slider-mobile .bb-hp-carousel-track { padding: 1.5rem 19px 2rem 29px; }
  .bb-hp-slider-mobile .bb-hp-card-slide { width: calc(100vw - 48px) !important; flex-shrink: 0; }
  /* Break the mobile carousel out of the section's 5% side padding so the
     next card peeks in from the right — matches homepage carousel behaviour */
  .bb-prop-similar-carousel-mobile {
    margin-left: -5%;
    width: 110%;
  }
}

/* Card layout inside carousel slide — mirrors home.css so property page
   renders identically to the homepage carousel (image top, content below) */
.bb-hp-card-slide .bb-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bb-hp-card-slide .bb-card__photo {
  min-height: unset;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.bb-hp-card-slide .bb-card__photo img,
.bb-hp-card-slide .bb-card__photo .bb-card__photo-link {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bb-hp-card-slide .bb-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ============================================================
   Property page — Design System overrides (v3.9.169)
   Consumes --bb-prop-* vars set in Design System → Property page.
   Every var falls back to the current default → nothing changes
   until a value is set in the admin.
   ============================================================ */

/* 1. Hero / gallery controls */
.bb-prop-hero__back            { color: var(--bb-prop-hero-back-text, var(--bb-text-muted)); }
.bb-prop-hero__back:hover      { color: var(--bb-prop-hero-back-hover, var(--bb-dark)); }
.bb-prop-hero__nav-btn         { background: var(--bb-prop-hero-nav-bg, var(--bb-dark)); }
.bb-prop-hero__nav-btn:hover   { background: var(--bb-prop-hero-nav-hover-bg, var(--bb-dark)); }
.bb-prop-hero__nav-btn svg     { fill: var(--bb-prop-hero-nav-icon, var(--bb-accent)); }
.bb-prop-hero__dot             { background: var(--bb-prop-hero-dot, rgba(0,59,59,0.2)); }
.bb-prop-hero__dot.is-active   { background: var(--bb-prop-hero-dot-active, var(--bb-dark)); }
.bb-prop-hero__counter         { color: var(--bb-prop-hero-counter-text, var(--bb-text-muted)); background: var(--bb-prop-hero-counter-bg, transparent); border-radius: 4px; padding: 0 4px; }
.bb-prop-hero__action          { color: var(--bb-prop-hero-action-text, var(--bb-prop-hero-action-icon, var(--bb-text-muted))); background: var(--bb-prop-hero-action-bg, #fff); }
.bb-prop-hero__action:hover    { background: var(--bb-prop-hero-action-hover-bg, #fff); }
.bb-prop-hero__action svg      { fill: var(--bb-prop-hero-action-icon, currentColor); }

/* 2. Top info bar */
.bb-prop-bar                   { background: var(--bb-prop-bar-bg, var(--bb-dark)); }
.bb-prop-bar__location         { color: var(--bb-prop-bar-location, rgba(153,255,187,0.6)); }
.bb-prop-bar__title            { color: var(--bb-prop-bar-title, #fff); }
.bb-prop-bar__label            { color: var(--bb-prop-bar-label, rgba(255,255,255,0.4)); }
.bb-prop-bar__value            { color: var(--bb-prop-bar-value, #fff); }

/* 3. Sections & headings */
.bb-prop-section--white        { background: var(--bb-prop-sec-white-bg, #fff); }
.bb-prop-section--sand         { background: var(--bb-prop-sec-sand-bg, var(--bb-bg)); }
/* v3.9.259 — per-block background overrides (win over the sand/white default).
   Empty = falls back to the block's current sand/white color, so nothing changes
   until a color is set. */
.bb-prop-section.bb-prop-sec--desc     { background: var(--bb-prop-sec-desc-bg,     var(--bb-prop-sec-sand-bg, var(--bb-bg))); }
.bb-prop-section.bb-prop-sec--avail    { background: var(--bb-prop-sec-avail-bg,    var(--bb-prop-sec-white-bg, #fff)); }
.bb-prop-section.bb-prop-sec--payment  { background: var(--bb-prop-sec-payment-bg,  var(--bb-prop-sec-sand-bg, var(--bb-bg))); }
.bb-prop-section.bb-prop-sec--location { background: var(--bb-prop-sec-location-bg, var(--bb-prop-sec-white-bg, #fff)); }
.bb-prop-section.bb-prop-sec--similar  { background: var(--bb-prop-sec-similar-bg,  var(--bb-prop-sec-sand-bg, var(--bb-bg))); }
.bb-prop-eyebrow               { color: var(--bb-prop-eyebrow, var(--bb-text-muted)); }
.bb-prop-h2                    { color: var(--bb-prop-h2, var(--bb-text)); }
.bb-prop-h2 em                 { color: var(--bb-prop-h2-em, var(--bb-dark)); }

/* 4. Description */
.bb-prop-desc p                { color: var(--bb-prop-desc-text, var(--bb-text-muted)); }
.bb-prop-read-more             {
    color: var(--bb-prop-desc-readmore, var(--bb-dark));
    background: var(--bb-prop-desc-readmore-bg, transparent);
    border-radius: var(--bb-prop-desc-readmore-radius, 20px);
}
/* v3.9.378 — hover only on real hover devices (see note above).
   v3.9.401 — no fallback: unset hover colours = no change on hover. */
@media (hover: hover) {
    .bb-prop-read-more:hover       {
        background: var(--bb-prop-desc-readmore-bg-hover);
        color: var(--bb-prop-desc-readmore-hover);
    }
}

/* 5. Facilities */
.bb-prop-facil-eyebrow         { color: var(--bb-prop-facil-eyebrow, var(--bb-text-muted)); }
.bb-prop-facil-label           { color: var(--bb-prop-facil-label, var(--bb-dark)); }
.bb-prop-facil-value           { color: var(--bb-prop-facil-value, var(--bb-text-muted)); }

/* 6. Location / POI + map */
.bb-prop-distance-item         { background: var(--bb-prop-poi-card-bg, #fff); border-color: var(--bb-prop-poi-card-border, var(--bb-border)); border-radius: var(--bb-prop-poi-card-radius, 12px); }
.bb-prop-distance-icon         { background: var(--bb-prop-poi-icon-bg, var(--bb-bg)); }
.bb-prop-distance-icon svg     { fill: var(--bb-prop-poi-icon, var(--bb-dark)); }
.bb-prop-distance-name         { color: var(--bb-prop-poi-name, var(--bb-text)); }
.bb-prop-distance-km           { color: var(--bb-prop-poi-km, var(--bb-text-muted)); }
.bb-prop-map                   { border-color: var(--bb-prop-map-border, var(--bb-border)); border-radius: var(--bb-prop-map-radius, 14px); height: var(--bb-prop-map-height, 640px); }

/* 7. Availability table (bb-ut-* unit table system) */
.bb-ut-header            { background: var(--bb-prop-ut-header-bg, var(--bb-dark, #003b3b)); }
.bb-ut-project           { color: var(--bb-prop-ut-project, #fff); }
.bb-ut-sub               { color: var(--bb-prop-ut-sub, rgba(255,255,255,.55)); }
.bb-ut-badge             { background: var(--bb-prop-ut-badge-bg, var(--bb-accent, #99ffbb)); color: var(--bb-prop-ut-badge-text, var(--bb-dark, #003b3b)); }
.bb-ut-filter            { background: var(--bb-prop-ut-filter-bg, #f4f7f5); color: var(--bb-prop-ut-filter-text, var(--bb-text-muted, #4a6b6b)); border-color: var(--bb-prop-ut-filter-border, var(--bb-border, rgba(0,59,59,.12))); }
.bb-ut-filter.is-active, .bb-ut-filter:hover { background: var(--bb-prop-ut-filter-active-bg, var(--bb-dark, #003b3b)); color: var(--bb-prop-ut-filter-active-text, #fff); border-color: var(--bb-prop-ut-filter-active-bg, var(--bb-dark, #003b3b)); }
.bb-ut-group-header      { background: var(--bb-prop-ut-grp-bg, #fff); }
.bb-ut-group-header:hover { background: var(--bb-prop-ut-grp-hover-bg, #f9fbfa); }
.bb-ut-group-label       { color: var(--bb-prop-ut-grp-label, var(--bb-dark, #003b3b)); }
.bb-ut-group-count       { background: var(--bb-prop-ut-grp-count-bg, #f0f4f2); color: var(--bb-prop-ut-grp-count-text, var(--bb-text-muted, #4a6b6b)); }
.bb-ut-chevron           { color: var(--bb-prop-ut-chevron, var(--bb-text-muted)); }
.bb-ut-table thead       { background: var(--bb-prop-ut-thead-bg, #f4f7f5); }
.bb-ut-table th          { color: var(--bb-prop-ut-th-text, var(--bb-text-muted, #4a6b6b)); }
.bb-ut-table td          { color: var(--bb-prop-ut-td-text, var(--bb-text, #0d1f1f)); border-top-color: var(--bb-prop-ut-td-border, var(--bb-border, rgba(0,59,59,.08))); }
.bb-ut-table tr:hover td { background: var(--bb-prop-ut-row-hover, #f9fbfa); }
.bb-ut-more-btn          { background: var(--bb-prop-ut-more-bg, transparent); color: var(--bb-prop-ut-more-text, var(--bb-dark, #003b3b)); border-color: var(--bb-prop-ut-more-border, var(--bb-border, rgba(0,59,59,.12))); }
.bb-ut-more-btn:hover    { background: var(--bb-prop-ut-more-hover-bg, var(--bb-dark, #003b3b)); color: var(--bb-prop-ut-more-hover-text, #fff); border-color: var(--bb-prop-ut-more-hover-bg, var(--bb-dark, #003b3b)); }
.bb-prop-table-note      { color: var(--bb-prop-tbl-note, var(--bb-text-muted)); }

/* Legacy bb-prop-table (kept for compatibility) */
.bb-prop-table th        { background: var(--bb-prop-ut-thead-bg, #f4f7f5); color: var(--bb-prop-ut-th-text, var(--bb-text-muted)); }
.bb-prop-table td        { color: var(--bb-prop-ut-td-text, var(--bb-text)); }
.bb-status--available    { color: var(--bb-prop-ut-avail, #006633); }
.bb-status--option       { color: var(--bb-prop-ut-reserved, #996600); }
.bb-status--sold         { color: var(--bb-prop-ut-sold, #dc2626); }

/* 8. Payment plan */
.bb-prop-payment-step          { background: var(--bb-prop-pay-step-bg, #fff); }
.bb-prop-payment-step__moment  { color: var(--bb-prop-pay-step-text, var(--bb-text)); }
.bb-prop-payment-step--highlight { background: var(--bb-prop-pay-step-hl-bg, var(--bb-dark)); border-color: var(--bb-prop-pay-step-hl-bg, var(--bb-dark)); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__moment { color: var(--bb-prop-pay-step-hl-text, #fff); }
.bb-prop-payment-note          { color: var(--bb-prop-pay-note, var(--bb-text-muted)); }

/* 9. CTA / WhatsApp button on the page */
.bb-prop-bar__cta              { background: var(--bb-prop-btn-cta-bg, var(--bb-accent)); color: var(--bb-prop-btn-cta-text, var(--bb-dark)); border-radius: var(--bb-prop-btn-cta-radius, 20px); }
.bb-prop-bar__cta:hover        { background: var(--bb-prop-btn-cta-hover-bg, #66e699); color: var(--bb-prop-btn-cta-hover-text, var(--bb-dark)); }

/* ============================================================
   Property page — full element granularity (v3.9.171)
   Hero details, similar cards, trigger, lightbox, modal, contact,
   extra buttons + payment/table sub-parts. All var + fallback.
   ============================================================ */

/* Hero details */
.bb-prop-hero__eyebrow   { color: var(--bb-prop-hero-eyebrow, rgba(153,255,187,0.75)); }
.bb-prop-hero__title     { color: var(--bb-prop-hero-title, #fff); }
.bb-prop-hero__price     { color: var(--bb-prop-hero-price, #fff); }
.bb-prop-hero__price-box { background: var(--bb-prop-hero-price-box-bg, rgba(0,59,59,0.75)); border-color: var(--bb-prop-hero-price-box-border, rgba(153,255,187,0.2)); }
.bb-prop-hero__price-label { color: var(--bb-prop-hero-price-label, rgba(153,255,187,0.6)); }
.bb-prop-hero__price-sub { color: var(--bb-prop-hero-price-sub, rgba(255,255,255,0.45)); }
.bb-prop-hero__badge     { background: var(--bb-prop-hero-badge-bg, rgba(255,255,255,0.12)); color: var(--bb-prop-hero-badge-text, rgba(255,255,255,0.9)); }
.bb-prop-hero__overlay   { background: var(--bb-prop-hero-overlay, linear-gradient(to top, rgba(0,20,20,0.72) 0%, transparent 55%)); }

/* Similar properties */
.bb-prop-similar-card     { background: var(--bb-prop-sim-card-bg, #fff); border-color: var(--bb-prop-sim-card-border, var(--bb-border)); }
.bb-prop-similar-name     { color: var(--bb-prop-sim-name, var(--bb-text)); }
.bb-prop-similar-location { color: var(--bb-prop-sim-location, var(--bb-text-muted)); }
.bb-prop-similar-price    { color: var(--bb-prop-sim-price, var(--bb-dark)); }
.bb-prop-similar-pill     { background: var(--bb-prop-sim-pill-bg, rgba(0,59,59,0.85)); color: var(--bb-prop-sim-pill-text, var(--bb-accent)); }
.bb-prop-similar-specs    { color: var(--bb-prop-sim-specs, var(--bb-text-muted)); }

/* Trigger block */
.bb-prop-trigger          { background: var(--bb-prop-trig-bg, var(--bb-dark)); }
.bb-prop-trigger__eyebrow { color: var(--bb-prop-trig-eyebrow, rgba(153,255,187,0.6)); }
.bb-prop-trigger__title   { color: var(--bb-prop-trig-title, #fff); }
.bb-prop-trigger__list li { color: var(--bb-prop-trig-list, rgba(255,255,255,0.7)); }
.bb-prop-trigger__cta     { background: var(--bb-prop-trig-cta-bg, var(--bb-accent)); color: var(--bb-prop-trig-cta-text, var(--bb-dark)); }

/* Lightbox */
.bb-prop-lightbox__btn         { background: var(--bb-prop-lb-btn-bg, rgba(255,255,255,0.12)); }
.bb-prop-lightbox__close       { background: var(--bb-prop-lb-close-bg, rgba(255,255,255,0.15)); border-color: var(--bb-prop-lb-close-border, rgba(255,255,255,0.3)); color: var(--bb-prop-lb-close-text, #fff); }
.bb-prop-lightbox__thumb.is-active { border-color: var(--bb-prop-lb-thumb-active, var(--bb-accent)); }

/* Unit modal */
.bb-prop-modal__box        { background: var(--bb-prop-modal-bg, #fff); }
.bb-prop-modal__close      { color: var(--bb-prop-modal-close, var(--bb-text-muted)); }
.bb-prop-modal__title      { color: var(--bb-prop-modal-title, var(--bb-dark)); }
.bb-prop-modal__spec-label { color: var(--bb-prop-modal-spec-label, var(--bb-text-muted)); }
.bb-prop-modal__spec-value { color: var(--bb-prop-modal-spec-value, var(--bb-dark)); }
.bb-prop-modal__cta        { background: var(--bb-prop-modal-cta-bg, var(--bb-accent)); color: var(--bb-prop-modal-cta-text, var(--bb-dark)); }

/* Contact section */
.bb-prop-contact-text h2   { color: var(--bb-prop-contact-heading, #fff); }
.bb-prop-contact-input     { background: var(--bb-prop-contact-input-bg, rgba(255,255,255,0.06)); border-color: var(--bb-prop-contact-input-border, rgba(255,255,255,0.12)); color: var(--bb-prop-contact-input-text, #fff); }

/* Extra buttons */
.bb-prop-btn-mint      { background: var(--bb-prop-btn-mint-bg, var(--bb-accent)); color: var(--bb-prop-btn-mint-text, var(--bb-dark)); }
.bb-prop-btn-outline   { color: var(--bb-prop-btn-outline-text, var(--bb-accent)); border-color: var(--bb-prop-btn-outline-border, rgba(153,255,187,0.35)); }
.bb-prop-floorplan-btn { background: var(--bb-prop-btn-floorplan-bg, var(--bb-dark)); color: var(--bb-prop-btn-floorplan-text, var(--bb-accent)); }
.bb-prop-tab           { color: var(--bb-prop-tab-text, var(--bb-text-muted)); border-color: var(--bb-prop-tab-border, var(--bb-border)); }

/* Payment step sub-parts (highlighted step) */
.bb-prop-payment-step--highlight .bb-prop-payment-step__nr  { color: var(--bb-prop-pay-step-hl-text, rgba(153,255,187,0.6)); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__pct { color: var(--bb-prop-pay-step-hl-text, var(--bb-accent)); }
.bb-prop-payment-step--highlight .bb-prop-payment-step__desc { color: var(--bb-prop-pay-step-hl-text, rgba(255,255,255,0.6)); }

/* ============================================================
   CALCULATOR — LAYOUT 2 (v3.9.205)
   Horizontal white cards, table format. Colours honour the SAME
   Design System → Blocks tokens as layout 1 (--bb-blk-calculator-*),
   so the block colour pickers drive both layouts. Mockup colours
   (indigo/purple) are only fallbacks when a token is unset.
============================================================ */
.bb-calc2-sectie {
  background: var(--bb-blk-calculator-bg, #4f39e6);
  padding: 64px 0;
}
.bb-hp-block--calculator .bb-calc2-sectie { background: transparent; padding: 0; }
/* v3.9.518 — er zat geen ruimte onder de sectie, waardoor het callout-kader
   tegen de onderrand plakte en je de achtergrondkleur eronder niet meer zag. */
.bb-calc2-inner {
  max-width: 1280px; margin: 0 auto; box-sizing: border-box;
  padding: 0 32px var(--bb-blk-calculator-calc-pad-bottom, 36px);
}

.bb-calc2-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 40px;
}
.bb-calc2-heading {
  font-family: var(--bb-role-calc-heading-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif));
  font-size: var(--bb-role-calc-heading-size, clamp(28px, 4vw, 48px)); font-weight: var(--bb-role-calc-heading-weight, 700); line-height: var(--bb-role-calc-heading-lh, 1.05);
  color: var(--bb-role-calc-heading-color, var(--bb-blk-calculator-calc-title, #ffffff)) !important; margin: 0;
  letter-spacing: -0.02em;
}
.bb-calc2-head-cta { flex-shrink: 0; }

.bb-calc2-slider-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bb-calc2-slider-label {
  font-family: var(--bb-role-calc-slider-label-font, inherit);
  font-size: var(--bb-role-calc-slider-label-size, 15px); font-weight: var(--bb-role-calc-slider-label-weight, 400);
  line-height: var(--bb-role-calc-slider-label-lh, normal);
  color: var(--bb-role-calc-slider-label-color, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.85))) !important;
}
.bb-calc2-slider-val {
  font-family: var(--bb-role-calc-slider-value-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif));
  font-size: var(--bb-role-calc-slider-value-size, 24px); font-weight: var(--bb-role-calc-slider-value-weight, 700);
  line-height: var(--bb-role-calc-slider-value-lh, normal);
  color: var(--bb-role-calc-slider-value-color, var(--bb-blk-calculator-calc-light, #ffffff)) !important;
}
.bb-calc2-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px;
  background: var(--bb-blk-calculator-calc-slider-track, rgba(255,255,255,.35));
  border-radius: 2px; outline: none; margin: 0 0 36px; cursor: pointer;
}
.bb-calc2-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  background: var(--bb-blk-calculator-calc-slider-thumb, #ffffff);
  border-radius: 4px; cursor: pointer;
}
.bb-calc2-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--bb-blk-calculator-calc-slider-thumb, #ffffff);
  border: none; border-radius: 4px; cursor: pointer;
}

.bb-calc2-grid {
  /* v3.9.559 — de ruimte tussen de kaarten is instelbaar. gap geldt alleen
     tússen de kolommen, dus de buitenranden links en rechts blijven staan. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--bb-blk-calculator-calc-card-gap, 4px);
  margin-bottom: 16px;
}
/* v3.9.557 — De kaartenrij doorloopt tot de rechterrand van het venster, terwijl
   de linkerkant op de contentlijn blijft staan. De rest van het blok (slider,
   disclaimer, callout) blijft ongemoeid binnen de kolom.
   Hoe: de calculatorbox heeft links en rechts 32px padding binnen een kolom die
   op 1280px is gecentreerd. Rechts strekken we de grid met een negatieve marge
   precies zoveel op als er tussen de kolomrand en het venster zit — die afstand
   is (100vw - kolombreedte) / 2, plus de eigen padding van 32px.
   Alleen boven 1024px: daaronder staan er twee of één naast elkaar en zou
   uitlopen de kaarten onleesbaar smal of juist te breed maken. */
@media (min-width: 1025px) {
  .bb-hp-block--calculator .bb-calc2-grid {
    margin-right: calc(-1 * (max(0px, (100vw - 1280px) / 2) + 32px));
  }
  /* De rij en het blok hebben overflow:hidden als inline stijl — bedoeld om
     uitlopende achtergronden netjes af te snijden. Dat knipte hier juist de
     derde en vierde kaart weg. Voor deze rij zetten we het uit; !important is
     nodig omdat inline stijl anders wint. */
  .bb-hp-block--calculator,
  .bb-hp-row:has(.bb-hp-block--calculator) { overflow: visible !important; }
}
.bb-calc2-card {
  background: var(--bb-blk-calculator-calc-card-bg, #ffffff);
  box-shadow: var(--bb-blk-calculator-calc-card-shadow, none);
  /* v3.9.557 — rand om de kaart; 0 = geen rand, dus standaard verandert er niets. */
  border: var(--bb-blk-calculator-calc-card-bw, 0px) solid var(--bb-blk-calculator-calc-card-bc, transparent);
  /* v3.9.560 — afronding van de hoeken; 0 = recht, zoals voorheen. */
  border-radius: var(--bb-blk-calculator-calc-card-radius, 0px);
  padding: 28px 24px; display: flex; flex-direction: column; min-height: 260px;
}
.bb-calc2-card-title {
  font-family: var(--bb-role-calc-card-title-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif));
  font-size: var(--bb-role-calc-card-title-size, 20px); font-weight: var(--bb-role-calc-card-title-weight, 700); margin-bottom: 20px;
  line-height: var(--bb-role-calc-card-title-lh, normal);
  /* v3.9.557 — eigen kleur voor de regionaam; leeg volgt het accent. */
  color: var(--bb-role-calc-card-title-color, var(--bb-blk-calculator-calc-card-name, var(--bb-blk-calculator-calc-accent, #4f39e6)));
}
.bb-calc2-card-rows { display: flex; flex-direction: column; }
/* v3.9.559 — elke kaart heeft vier lijnen: één boven de eerste regel en één
   onder elk van de drie regels. Ze hadden allemaal dezelfde variabele en waren
   dus niet los te zetten. Nu heeft elke lijn een eigen variabele die terugvalt
   op de algemene lijnkleur, zodat er niets verandert zolang je ze leeg laat. */
.bb-calc2-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--bb-role-calc-card-row-font, inherit);
  font-size: var(--bb-role-calc-card-row-size, 14px); font-weight: var(--bb-role-calc-card-row-weight, 400);
  line-height: var(--bb-role-calc-card-row-lh, normal);
  padding: 10px 0;
  border-bottom: 1px solid var(--bb-blk-calculator-calc-card-border, #eee);
  color: var(--bb-role-calc-card-row-color, var(--bb-blk-calculator-calc-card-text, #333));
}
/* 1 — boven "Gem. commissie" */
.bb-calc2-row:first-child {
  border-top: 1px solid var(--bb-blk-calculator-calc-card-line1, var(--bb-blk-calculator-calc-card-border, #eee));
}
/* 2 — onder "Gem. commissie" */
.bb-calc2-card-rows .bb-calc2-row:nth-child(1) {
  border-bottom-color: var(--bb-blk-calculator-calc-card-line2, var(--bb-blk-calculator-calc-card-border, #eee));
}
/* 3 — onder "Suplusnis houdt" */
.bb-calc2-card-rows .bb-calc2-row:nth-child(2) {
  border-bottom-color: var(--bb-blk-calculator-calc-card-line3, var(--bb-blk-calculator-calc-card-border, #eee));
}
/* 4 — onder "Jij krijgt terug" */
.bb-calc2-card-rows .bb-calc2-row:nth-child(3) {
  border-bottom-color: var(--bb-blk-calculator-calc-card-line4, var(--bb-blk-calculator-calc-card-border, #eee));
}
.bb-calc2-row .bb-calc2-pct { color: var(--bb-blk-calculator-calc-card-muted, #999); font-variant-numeric: tabular-nums; }
/* v3.9.557 — de uitgelichte regel ("Jij krijgt terug") heeft nu een eigen
   kleur; leeg volgt het accent, zoals voorheen. */
.bb-calc2-row-hl span { color: var(--bb-blk-calculator-calc-card-hl, var(--bb-blk-calculator-calc-accent, #4f39e6)) !important; font-weight: 600; }
.bb-calc2-card-adv { margin-top: auto; padding-top: 22px; }
.bb-calc2-adv-label { font-family: var(--bb-role-calc-value-label-font, inherit); font-size: var(--bb-role-calc-value-label-size, 12px); font-weight: var(--bb-role-calc-value-label-weight, 400); line-height: var(--bb-role-calc-value-label-lh, normal); color: var(--bb-role-calc-value-label-color, var(--bb-blk-calculator-calc-card-advlabel, var(--bb-blk-calculator-calc-card-muted, #999))); margin-bottom: 4px; }
.bb-calc2-adv-val {
  font-family: var(--bb-role-calc-value-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif));
  font-size: var(--bb-role-calc-value-size, 26px); font-weight: var(--bb-role-calc-value-weight, 700);
  line-height: var(--bb-role-calc-value-lh, normal);
  /* v3.9.557 — eigen kleur voor het voordeelbedrag; leeg volgt het accent. */
  color: var(--bb-role-calc-value-color, var(--bb-blk-calculator-calc-card-amount, var(--bb-blk-calculator-calc-accent, #4f39e6)));
}

.bb-calc2-disclaimer {
  font-family: var(--bb-role-calc-disclaimer-font, inherit);
  font-size: var(--bb-role-calc-disclaimer-size, 12px); font-weight: var(--bb-role-calc-disclaimer-weight, 400);
  line-height: var(--bb-role-calc-disclaimer-lh, normal);
  margin-bottom: 28px; max-width: 720px;
  color: var(--bb-role-calc-disclaimer-color, var(--bb-blk-calculator-calc-muted, rgba(255,255,255,.55)));
}
.bb-calc2-callout {
  /* v3.9.518 — eigen achtergrond; leeg volgt de regiokaart zoals voorheen. */
  background: var(--bb-blk-calculator-calc-callout-bg, var(--bb-blk-calculator-calc-card-bg, #ffffff));
  padding: 24px 28px; display: inline-block; max-width: 480px;
}
.bb-calc2-callout-heading {
  font-family: var(--bb-role-calc-callout-font, var(--bb-blk-calculator-calc-title-font, 'Syne', sans-serif));
  font-size: var(--bb-role-calc-callout-size, 16px); font-weight: var(--bb-role-calc-callout-weight, 700); margin-bottom: 16px;
  line-height: var(--bb-role-calc-callout-lh, normal);
  color: var(--bb-role-calc-callout-color, var(--bb-blk-calculator-calc-callout-text, #1a1a1a));
}

@media (max-width: 900px) {
  .bb-calc2-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* v3.9.515 — twee naast elkaar houden op mobiel.
     Deze regel zette de regiokaarten onder elkaar, waardoor je op een telefoon
     langs vier costa's moest scrollen. Ze passen prima naast elkaar zodra de
     binnenmaten meekrimpen: de kaart had 24px zijpadding en de rijen 10px
     boven en onder, en dat is op ~150px kolombreedte simpelweg te veel. */
  .bb-calc2-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .bb-calc2-head { flex-direction: column; }

  .bb-calc2-card       { padding: 14px 5px; min-height: 0; }
  .bb-calc2-card-title { font-size: 13px; line-height: 1.2; margin-bottom: 8px; }
  .bb-calc2-row        { padding: 3px 0; font-size: 11px; gap: 4px; }
  .bb-calc2-card-adv   { padding-top: 10px; }
  .bb-calc2-adv-label  { font-size: 10px; }
  .bb-calc2-adv-val    { font-size: 17px; line-height: 1.15; }

  /* De percentages mogen niet op een eigen regel belanden. */
  .bb-calc2-row span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bb-calc2-row .bb-calc2-pct    { flex: 0 0 auto; }
}

/* ============================================================
   v3.9.261 — Property page typography roles (Design → Typography →
   Property page). Each block independently controllable. Fallbacks chain to the
   element's REAL default value, so an empty role leaves styling unchanged and a
   set role wins. (v3.9.258 used `inherit`, which wrongly clobbered defaults.)
============================================================ */
/* Info-balk */
.bb-prop-bar__location {
  font-family: var(--bb-role-pp-bar-location-font, inherit);
  font-size:   var(--bb-role-pp-bar-location-size, 10px);
  font-weight: var(--bb-role-pp-bar-location-weight, 600);
  line-height: var(--bb-role-pp-bar-location-lh, normal);
  color:       var(--bb-role-pp-bar-location-color, var(--bb-prop-bar-location, rgba(153,255,187,0.6)));
}
.bb-prop-bar__title {
  font-family: var(--bb-role-pp-bar-title-font, inherit);
  font-size:   var(--bb-role-pp-bar-title-size, 0.9rem);
  font-weight: var(--bb-role-pp-bar-title-weight, 600);
  line-height: var(--bb-role-pp-bar-title-lh, normal);
  color:       var(--bb-role-pp-bar-title-color, var(--bb-prop-bar-title, #fff));
}
.bb-prop-bar__label {
  font-family: var(--bb-role-pp-bar-label-font, inherit);
  font-size:   var(--bb-role-pp-bar-label-size, 10px);
  font-weight: var(--bb-role-pp-bar-label-weight, 400);
  line-height: var(--bb-role-pp-bar-label-lh, normal);
  color:       var(--bb-role-pp-bar-label-color, var(--bb-prop-bar-label, rgba(255,255,255,0.4)));
}
.bb-prop-bar__value {
  font-family: var(--bb-role-pp-bar-value-font, inherit);
  font-size:   var(--bb-role-pp-bar-value-size, 0.85rem);
  font-weight: var(--bb-role-pp-bar-value-weight, 600);
  line-height: var(--bb-role-pp-bar-value-lh, normal);
  color:       var(--bb-role-pp-bar-value-color, var(--bb-prop-bar-value, #fff));
}

/* Omschrijving — Typography roles are authoritative; legacy --bb-prop-* vars remain fallbacks.
 * v3.9.264 — Body role targets the actual <p> nodes as well as the wrapper.
 * The legacy `.bb-prop-desc p` rule sets its own font-size/color/line-height,
 * so styling only `.bb-prop-desc` cannot reach the rendered paragraph text. */
/* v3.9.478 — the eyebrow keeps its role when it renders above the photo.
   The role was scoped to `.bb-prop-sec--desc`, so the relocated copy in
   `.bb-prop-hero__mobhead` fell back to plain body styling. */
.bb-prop-sec--desc .bb-prop-eyebrow,
.bb-prop-hero__mobhead .bb-prop-eyebrow {
  font-family: var(--bb-role-pp-desc-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-desc-eyebrow-size, var(--bb-prop-eyebrow-size, 11px)) !important;
  font-weight: var(--bb-role-pp-desc-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-desc-eyebrow-lh, normal);
  color:       var(--bb-role-pp-desc-eyebrow-color, var(--bb-prop-eyebrow, var(--bb-text-muted)));
}
.bb-prop-sec--desc .bb-prop-h2 {
  font-family: var(--bb-role-pp-desc-h2-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-desc-h2-size, var(--bb-prop-h2-size, clamp(1.6rem,2.8vw,2.2rem))) !important;
  font-weight: var(--bb-role-pp-desc-h2-weight, 600);
  line-height: var(--bb-role-pp-desc-h2-lh, 1.2);
  color:       var(--bb-role-pp-desc-h2-color, var(--bb-prop-h2, var(--bb-text)));
}
.bb-prop-sec--desc .bb-prop-h2 em {
  font-family: var(--bb-role-pp-desc-accent-font, inherit);
  font-size:   var(--bb-role-pp-desc-accent-size, inherit);
  font-weight: var(--bb-role-pp-desc-accent-weight, inherit);
  color:       var(--bb-role-pp-desc-accent-color, var(--bb-prop-h2-em, var(--bb-dark)));
}
.bb-prop-sec--desc .bb-prop-desc,
.bb-prop-sec--desc .bb-prop-desc__inner,
.bb-prop-sec--desc .bb-prop-desc__inner p {
  font-family: var(--bb-role-pp-desc-body-font, inherit) !important;
  font-size:   var(--bb-role-pp-desc-body-size, var(--bb-prop-desc-size, 1rem)) !important;
  font-weight: var(--bb-role-pp-desc-body-weight, 400) !important;
  line-height: var(--bb-role-pp-desc-body-lh, 1.7) !important;
  color:       var(--bb-role-pp-desc-body-color, var(--bb-prop-desc-text, var(--bb-text-muted))) !important;
}

/* Faciliteiten */
.bb-prop-facil-eyebrow {
  font-family: var(--bb-role-pp-facil-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-facil-eyebrow-size, 11px);
  font-weight: var(--bb-role-pp-facil-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-facil-eyebrow-lh, normal);
  color:       var(--bb-role-pp-facil-eyebrow-color, var(--bb-prop-facil-eyebrow, var(--bb-text-muted)));
}
.bb-prop-facil-list li, .bb-prop-facil-label {
  font-family: var(--bb-role-pp-facil-label-font, inherit);
  font-size:   var(--bb-role-pp-facil-label-size, var(--bb-prop-facil-size, 0.95rem)) !important;
  font-weight: var(--bb-role-pp-facil-label-weight, 500);
  line-height: var(--bb-role-pp-facil-label-lh, normal);
  color:       var(--bb-role-pp-facil-label-color, var(--bb-prop-facil-label, var(--bb-dark)));
}
.bb-prop-facil-value {
  font-family: var(--bb-role-pp-facil-value-font, inherit);
  font-size:   var(--bb-role-pp-facil-value-size, inherit);
  font-weight: var(--bb-role-pp-facil-value-weight, inherit);
  line-height: var(--bb-role-pp-facil-value-lh, normal);
  color:       var(--bb-role-pp-facil-value-color, var(--bb-prop-facil-value, var(--bb-text-muted)));
}

/* Beschikbaarheid */
.bb-prop-sec--avail .bb-prop-eyebrow {
  font-family: var(--bb-role-pp-avail-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-avail-eyebrow-size, var(--bb-prop-eyebrow-size, 11px)) !important;
  font-weight: var(--bb-role-pp-avail-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-avail-eyebrow-lh, normal);
  color:       var(--bb-role-pp-avail-eyebrow-color, var(--bb-prop-eyebrow, var(--bb-text-muted)));
}
.bb-prop-sec--avail .bb-prop-h2 {
  font-family: var(--bb-role-pp-avail-h2-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-avail-h2-size, var(--bb-prop-h2-size, clamp(1.6rem,2.8vw,2.2rem))) !important;
  font-weight: var(--bb-role-pp-avail-h2-weight, 600);
  line-height: var(--bb-role-pp-avail-h2-lh, 1.2);
  color:       var(--bb-role-pp-avail-h2-color, var(--bb-prop-h2, var(--bb-text)));
}
.bb-prop-sec--avail .bb-prop-h2 em {
  font-family: var(--bb-role-pp-avail-accent-font, inherit);
  font-size:   var(--bb-role-pp-avail-accent-size, inherit);
  font-weight: var(--bb-role-pp-avail-accent-weight, inherit);
  color:       var(--bb-role-pp-avail-accent-color, var(--bb-prop-h2-em, var(--bb-dark)));
}

/* Betalingsschema */
.bb-prop-sec--payment .bb-prop-eyebrow {
  font-family: var(--bb-role-pp-pay-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-pay-eyebrow-size, var(--bb-prop-eyebrow-size, 11px)) !important;
  font-weight: var(--bb-role-pp-pay-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-pay-eyebrow-lh, normal);
  color:       var(--bb-role-pp-pay-eyebrow-color, var(--bb-prop-eyebrow, var(--bb-text-muted)));
}
.bb-prop-sec--payment .bb-prop-h2 {
  font-family: var(--bb-role-pp-pay-h2-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-pay-h2-size, var(--bb-prop-h2-size, clamp(1.6rem,2.8vw,2.2rem))) !important;
  font-weight: var(--bb-role-pp-pay-h2-weight, 600);
  line-height: var(--bb-role-pp-pay-h2-lh, 1.2);
  color:       var(--bb-role-pp-pay-h2-color, var(--bb-prop-h2, var(--bb-text)));
}
.bb-prop-sec--payment .bb-prop-h2 em {
  font-family: var(--bb-role-pp-pay-accent-font, inherit);
  font-size:   var(--bb-role-pp-pay-accent-size, inherit);
  font-weight: var(--bb-role-pp-pay-accent-weight, inherit);
  color:       var(--bb-role-pp-pay-accent-color, var(--bb-prop-h2-em, var(--bb-dark)));
}
.bb-prop-payment-step__moment, .bb-prop-payment-step__desc {
  font-family: var(--bb-role-pp-pay-step-font, inherit);
  font-size:   var(--bb-role-pp-pay-step-size, inherit);
  font-weight: var(--bb-role-pp-pay-step-weight, inherit);
  line-height: var(--bb-role-pp-pay-step-lh, inherit);
  color:       var(--bb-role-pp-pay-step-color, var(--bb-prop-pay-step-text, var(--bb-text)));
}

/* Locatie */
.bb-prop-sec--location .bb-prop-eyebrow {
  font-family: var(--bb-role-pp-loc-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-loc-eyebrow-size, var(--bb-prop-eyebrow-size, 11px)) !important;
  font-weight: var(--bb-role-pp-loc-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-loc-eyebrow-lh, normal);
  color:       var(--bb-role-pp-loc-eyebrow-color, var(--bb-prop-eyebrow, var(--bb-text-muted)));
}
.bb-prop-sec--location .bb-prop-h2 {
  font-family: var(--bb-role-pp-loc-h2-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-loc-h2-size, var(--bb-prop-h2-size, clamp(1.6rem,2.8vw,2.2rem))) !important;
  font-weight: var(--bb-role-pp-loc-h2-weight, 600);
  line-height: var(--bb-role-pp-loc-h2-lh, 1.2);
  color:       var(--bb-role-pp-loc-h2-color, var(--bb-prop-h2, var(--bb-text)));
}
.bb-prop-sec--location .bb-prop-h2 em {
  font-family: var(--bb-role-pp-loc-accent-font, inherit);
  font-size:   var(--bb-role-pp-loc-accent-size, inherit);
  font-weight: var(--bb-role-pp-loc-accent-weight, inherit);
  color:       var(--bb-role-pp-loc-accent-color, var(--bb-prop-h2-em, var(--bb-dark)));
}

/* Vergelijkbare projecten */
.bb-prop-sec--similar .bb-prop-eyebrow {
  font-family: var(--bb-role-pp-sim-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-sim-eyebrow-size, var(--bb-prop-eyebrow-size, 11px)) !important;
  font-weight: var(--bb-role-pp-sim-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-sim-eyebrow-lh, normal);
  color:       var(--bb-role-pp-sim-eyebrow-color, var(--bb-prop-eyebrow, var(--bb-text-muted)));
}
.bb-prop-sec--similar .bb-prop-h2 {
  font-family: var(--bb-role-pp-sim-h2-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-sim-h2-size, var(--bb-prop-h2-size, clamp(1.6rem,2.8vw,2.2rem))) !important;
  font-weight: var(--bb-role-pp-sim-h2-weight, 600);
  line-height: var(--bb-role-pp-sim-h2-lh, 1.2);
  color:       var(--bb-role-pp-sim-h2-color, var(--bb-prop-h2, var(--bb-text)));
}
.bb-prop-sec--similar .bb-prop-h2 em {
  font-family: var(--bb-role-pp-sim-accent-font, inherit);
  font-size:   var(--bb-role-pp-sim-accent-size, inherit);
  font-weight: var(--bb-role-pp-sim-accent-weight, inherit);
  color:       var(--bb-role-pp-sim-accent-color, var(--bb-prop-h2-em, var(--bb-dark)));
}

/* Trigger-blok */
.bb-prop-trigger__eyebrow {
  font-family: var(--bb-role-pp-trig-eyebrow-font, inherit);
  font-size:   var(--bb-role-pp-trig-eyebrow-size, 10px);
  font-weight: var(--bb-role-pp-trig-eyebrow-weight, 600);
  line-height: var(--bb-role-pp-trig-eyebrow-lh, normal);
  color:       var(--bb-role-pp-trig-eyebrow-color, var(--bb-prop-trig-eyebrow, rgba(153,255,187,0.6)));
}
.bb-prop-trigger__title {
  font-family: var(--bb-role-pp-trig-title-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-trig-title-size, 1.2rem);
  font-weight: var(--bb-role-pp-trig-title-weight, 600);
  line-height: var(--bb-role-pp-trig-title-lh, normal);
  color:       var(--bb-role-pp-trig-title-color, var(--bb-prop-trig-title, #fff));
}
.bb-prop-trigger__list {
  font-family: var(--bb-role-pp-trig-list-font, inherit);
  font-size:   var(--bb-role-pp-trig-list-size, inherit);
  font-weight: var(--bb-role-pp-trig-list-weight, inherit);
  line-height: var(--bb-role-pp-trig-list-lh, inherit);
  color:       var(--bb-role-pp-trig-list-color, var(--bb-prop-trig-list, rgba(255,255,255,0.7)));
}
/* v3.9.471 — Trigger section title (above the block, like "PRIJSLIJST").
   Fallbacks mirror .bb-prop-h2 EXACTLY, so an empty Typography field makes this
   title identical to the other section H2s (e.g. Vergelijkbaar). Earlier this
   fell back to `inherit`, which dropped it to the small container text size —
   making FINANCIEEL VOORDEEL smaller than VERGELIJKBAAR. Setting a Typography
   value still overrides. */
.bb-prop-trigger-sectitle {
  font-family: var(--bb-role-pp-trig-sectitle-font, var(--bb-font-heading));
  font-size:   var(--bb-role-pp-trig-sectitle-size, clamp(1.6rem,2.8vw,2.2rem));
  font-weight: var(--bb-role-pp-trig-sectitle-weight, 600);
  line-height: var(--bb-role-pp-trig-sectitle-lh, 1.2);
  color:       var(--bb-role-pp-trig-sectitle-color, var(--bb-prop-h2, var(--bb-text)));
}

/* v3.9.265 — Description read-more button: configurable mobile background, hover background and radius. */