/* =====================================================================
   Page styles for the rebuilt inner pages (aanbod, detail, locatie, …).
   Additive only — reuses the site's CSS variables/palette.
   ===================================================================== */

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
  font-size: .875rem;
  color: var(--secondary);
  opacity: .8;
  padding: 0 0 12px;
}
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span[aria-current] { opacity: .7; }

/* ---------- generic text page ---------- */
.page-section { padding: 140px 0 72px; }
.page-section h1 { margin: 0 0 16px; }
.page-section .page-intro { max-width: 65ch; margin-bottom: 28px; font-size: 1.0625rem; }

/* ---------- Aanbod listing ---------- */
.aanbod-listing { padding: 140px 0 72px; }
.aanbod-listing h1 { margin: 0 0 8px; }
.aanbod-intro { max-width: 62ch; margin: 0 0 24px; font-size: 1.0625rem; line-height: 1.6; }
.aanbod-count { font-size: .9rem; opacity: .7; margin-bottom: 20px; }

.aanbod-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.aanbod-filters button {
  border: 1px solid var(--secondary);
  background: none;
  color: var(--secondary);
  border-radius: 80rem;
  padding: 8px 18px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.aanbod-filters button:hover { background: rgba(0,0,0,.05); }
.aanbod-filters button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.aanbod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.aanbod-item { display: block; }
.aanbod-item.is-hidden { display: none; }
.aanbod-grid .cardWrapper { height: 100%; }
.aanbod-grid .propertyCard { height: 100%; display: flex; flex-direction: column; }
.aanbod-grid .propertyContent { display: flex; flex-direction: column; flex: 1; }
.aanbod-grid .buttonarea { margin-top: auto; }

/* ---------- Property detail ---------- */
.house-detail { padding-top: 140px; padding-bottom: 72px; }
.house-detail .gallery-main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--quaternary);
}
.house-detail .gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.house-detail .gallery-thumbs button {
  flex: 0 0 auto;
  width: 84px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: none;
}
.house-detail .gallery-thumbs button.active { border-color: var(--primary); }
.house-detail .gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.house-detail h1 { margin: 4px 0 8px; font-size: 2rem; line-height: 1.2; }
.house-detail .detail-type { font-size: 1.0625rem; opacity: .8; margin: 0 0 16px; }
.house-detail .detail-price { font-size: 1.5rem; margin: 0 0 4px; }
.house-detail .detail-von { font-size: .8rem; opacity: .7; margin: 0 0 20px; }

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: .9rem;
  padding: 6px 12px;
  border-radius: 80rem;
  background: rgba(0,0,0,.05);
  margin-bottom: 12px;
}
.detail-badge::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
}
.detail-badge.status-1 { color: #1ab30d; }
.detail-badge.status-3 { color: #e7342e; }
.detail-badge.status-2 { color: #8c8c8c; }

.detail-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.detail-specs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: .95rem;
}
.detail-specs b { font-weight: 700; }

.house-detail .description { max-width: 72ch; line-height: 1.7; }
.house-detail .description p { margin: 0 0 1em; }
.house-detail .description h2 { margin-top: 0; }

.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 991px) {
  .page-section, .aanbod-listing, .house-detail { padding-top: 96px; }
}

@media (max-width: 768px) {
  .detail-specs { grid-template-columns: 1fr; }
  .house-detail h1 { font-size: 1.6rem; }
}

/* ---------- Master-plan hotspot map ---------- */
.property-map { padding: 0 0 28px; }
.property-map h2 { margin: 0 0 8px; }
.property-map__intro { max-width: 60ch; margin: 0 0 20px; line-height: 1.6; }
.property-map__frame {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--quaternary);
}
.property-map__img { display: block; width: 100%; height: auto; }

.mp-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: block;
  text-decoration: none;
  z-index: 2;
}
.mp-hotspot__dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1ab30d;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mp-hotspot.status-3 .mp-hotspot__dot { background: #e7342e; }
.mp-hotspot:hover .mp-hotspot__dot,
.mp-hotspot:focus-visible .mp-hotspot__dot { transform: scale(1.35); }
.mp-hotspot:focus-visible { outline: none; }
.mp-hotspot:focus-visible .mp-hotspot__dot { box-shadow: 0 0 0 3px rgba(174,164,93,.9); }

.mp-hotspot__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--secondary);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: .8rem;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.mp-hotspot__tip strong { font-weight: 700; }
.mp-hotspot__tip .mp-hotspot__type { opacity: .85; }
.mp-hotspot__tip .mp-hotspot__meta { opacity: .7; font-size: .75rem; }
.mp-hotspot:hover .mp-hotspot__tip,
.mp-hotspot:focus-visible .mp-hotspot__tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.property-map__legend {
  list-style: none;
  display: flex;
  gap: 20px;
  padding: 12px 0 0;
  margin: 0;
  font-size: .85rem;
  opacity: .85;
}
.property-map__legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.property-map__legend .dot.status-1 { background: #1ab30d; }
.property-map__legend .dot.status-3 { background: #e7342e; }

@media (max-width: 768px) {
  .mp-hotspot { width: 18px; height: 18px; }
  .mp-hotspot__tip { display: none; }
}

/* ---------- Master-plan map: real polygon overlay ---------- */
.property-map__frame {
  position: relative;
  aspect-ratio: 1180 / 825.69;
  overflow: hidden;
  border-radius: 6px;
  background: var(--quaternary);
}
.property-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* each lot: invisible polygon + a small centroid hotspot */
.mp-lot polygon {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  transition: fill .12s ease, stroke .12s ease, stroke-width .12s ease;
  cursor: pointer;
}
.mp-lot__dot {
  fill: #1ab30d;
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: transform .12s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.mp-lot.status-3 .mp-lot__dot { fill: #e7342e; }

/* hover / focus: light up the exact villa polygon */
.mp-lot:hover polygon,
.mp-lot:focus polygon {
  fill: rgba(174, 164, 93, 0.38);
  stroke: var(--primary);
  stroke-width: 2;
}
.mp-lot:hover .mp-lot__dot,
.mp-lot:focus .mp-lot__dot { transform: scale(1.55); }
.mp-lot:focus { outline: none; }
.mp-lot:focus polygon { stroke: #fff; stroke-width: 2.5; }

/* ---------- Map hotspots: pastel / greyed refinement ---------- */
.mp-lot polygon {
  fill: rgba(255, 255, 255, 0.015);
  stroke: rgba(255, 255, 255, 0.16);
}
.mp-lot.status-3 polygon {
  fill: rgba(20, 20, 10, 0.06);
  stroke: rgba(255, 255, 255, 0.12);
}

/* available: soft sage dot + gentle pulse ring */
.mp-lot__dot {
  fill: #a9c6ae;
  stroke: #fff;
  stroke-width: 2.5;
  opacity: 1;
}
.mp-lot__ring {
  fill: none;
  stroke: #a9c6ae;
  stroke-width: 1.5;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
}
.mp-lot:not(.status-3) .mp-lot__ring {
  animation: mp-lot-pulse 2.8s ease-out infinite;
}
@keyframes mp-lot-pulse {
  0%   { opacity: .55; transform: scale(0.9); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* sold: muted grey, no pulse */
.mp-lot.status-3 .mp-lot__dot { fill: #b4b1a8; opacity: .8; }
.mp-lot.status-3 .mp-lot__ring { display: none; }

/* hover: soft gold highlight on the exact villa + dot grows */
.mp-lot:hover .mp-lot__dot,
.mp-lot:focus .mp-lot__dot { fill: #fff; opacity: 1; }
.mp-lot:hover .mp-lot__ring,
.mp-lot:focus .mp-lot__ring { display: none; }

.property-map__legend .dot.status-1 { background: #a9c6ae; }
.property-map__legend .dot.status-3 { background: #b4b1a8; }

/* ---------- Map hotspot colours: distinct, readable ---------- */
/* available: vivid emerald with white halo + dark shadow for contrast on foliage */
.mp-lot__dot {
  fill: #12b76a;
  stroke: #fff;
  stroke-width: 2.5;
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.mp-lot__ring { stroke: #12b76a; }

/* sold: readable muted grey (still clearly visible, but secondary) */
.mp-lot.status-3 .mp-lot__dot {
  fill: #c9c6bd;
  opacity: .95;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* hover/focus: exact villa lights gold, dot turns white + grows */
.mp-lot:hover .mp-lot__dot,
.mp-lot:focus .mp-lot__dot {
  fill: #fff;
  transform: scale(1.55);
}

.property-map__legend .dot.status-1 { background: #12b76a; }
.property-map__legend .dot.status-3 { background: #c9c6bd; }

/* ---------- Sold lots: keep polygon, grey-out on hover (not gold) ---------- */
/* at rest: polygon drawn, subtle */
.mp-lot.status-3 polygon {
  fill: rgba(200, 200, 195, 0.10);
  stroke: rgba(255, 255, 255, 0.28);
}
/* sold hover/focus: grey highlight instead of the gold used for available */
.mp-lot.status-3:hover polygon,
.mp-lot.status-3:focus polygon {
  fill: rgba(201, 198, 189, 0.38);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 2;
}
/* sold dot stays grey on hover */
.mp-lot.status-3:hover .mp-lot__dot,
.mp-lot.status-3:focus .mp-lot__dot {
  fill: #c9c6bd;
  transform: scale(1.55);
}

/* sold lots: make the polygon clearly visible + clearly grey on hover */
.mp-lot.status-3 polygon {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.34);
}
.mp-lot.status-3:hover polygon,
.mp-lot.status-3:focus polygon {
  fill: rgba(214, 212, 204, 0.45);
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 2.5;
}

/* ===== Map v3: thin villa outlines + HTML hotspots (crisp on mobile) ===== */
.mp-lot polygon {
  fill: rgba(255, 255, 255, 0.02);
  stroke: rgba(255, 255, 255, 0.60);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke .15s ease, stroke-width .15s ease, fill .15s ease;
}
.mp-lot--avail polygon { cursor: pointer; }
.mp-lot--avail:hover polygon,
.mp-lot--avail.is-hover polygon,
.mp-lot--avail:focus polygon {
  stroke: var(--primary);
  stroke-width: 3;
  fill: rgba(174, 164, 93, 0.28);
}
.mp-lot--avail:focus { outline: none; }

/* sold: greyed slightly, no hotspot, not clickable */
.mp-lot--sold { pointer-events: none; }
.mp-lot--sold polygon {
  fill: rgba(110, 110, 105, 0.27);
  stroke: rgba(255, 255, 255, 0.30);
}

/* available hotspot: fixed-size HTML dot (no mobile scaling) */
.mp-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mp-spot__dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #15d97e;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  transition: transform .15s ease;
}
.mp-spot__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #15d97e;
  opacity: .55;
  animation: mp-spot-pulse 2.6s ease-out infinite;
}
@keyframes mp-spot-pulse {
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}
.mp-spot:hover .mp-spot__dot,
.mp-spot:focus .mp-spot__dot { transform: scale(1.3); }
.mp-spot:focus { outline: none; }
.mp-spot__label {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 3px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
/* sold label: muted, non-interactive (test labels) */
.mp-spot--sold { pointer-events: none; z-index: 2; }
.mp-spot--sold .mp-spot__label {
  font-weight: 600;
  font-style: italic;
  color: #eceae4;
  background: rgba(0, 0, 0, .38);
}

.property-map__legend .dot.status-1 { background: #15d97e; }

@media (max-width: 768px) {
  .mp-spot__dot { width: 11px; height: 11px; border-width: 1.5px; }
  .mp-spot__label { font-size: 9px; padding: 2px 5px; margin-top: 3px; }
}

/* smaller hotspot labels (per request) */
.mp-spot__label { font-size: 9px; padding: 2px 5px; margin-top: 3px; letter-spacing: 0; }
.mp-spot--sold .mp-spot__label { font-size: 8px; padding: 1px 4px; }
@media (max-width: 768px) {
  .mp-spot__label { font-size: 7.5px; padding: 1px 4px; margin-top: 2px; }
  .mp-spot--sold .mp-spot__label { font-size: 7px; }
}

/* "Te koop" / "For sale" hotspot label: 15% smaller */
.mp-spot__label { font-size: 7.6px; }
@media (max-width: 768px) { .mp-spot__label { font-size: 6.4px; } }

/* listing intro moved to bottom (temporary) */
.aanbod-intro--bottom { margin: 40px 0 0; }

/* hotspots: 50% smaller + colour shifts while pulsing */
.mp-spot__dot {
  width: 7px;
  height: 7px;
  border-width: 1px;
  background: currentColor;
  color: #15d97e;
  animation: mp-spot-color 2.6s ease-in-out infinite;
}
.mp-spot__dot::after {
  inset: -2px;
  border-color: currentColor;
}
@keyframes mp-spot-color {
  0%, 100% { color: #15d97e; }
  50%      { color: #b8a75f; }
}
@media (max-width: 768px) {
  .mp-spot__dot { width: 5.5px; height: 5.5px; border-width: 1px; }
  .mp-spot__dot::after { inset: -1.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-spot__dot { animation: none; color: #15d97e; }
  .mp-spot__dot::after { animation: none; opacity: .45; }
}

/* breadcrumb stays attached under the fixed header while scrolling */
.breadcrumbs {
  position: sticky;
  top: 72px;
  z-index: 60;
  background: #fff7ee;
  box-shadow: 0 0 0 100vmax #fff7ee;
  clip-path: inset(0 -100vmax);
  padding: 10px 0;
  margin: 0 0 8px;
}
@media (max-width: 1199px) {
  .breadcrumbs { top: 54px; }
}

/* map heading/description moved below the map */
.property-map h2 { margin: 24px 0 8px; }

/* breadcrumb band: opaque + full-bleed, sits below the header (z 12) */
.breadcrumbs {
  opacity: 1;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  z-index: 11;
}
.breadcrumbs::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff7ee;
  z-index: -1;
}

/* hotspots v4: hairline border, outer ring cycles green->gold->green, plus inner pulse */
.mp-spot__dot {
  width: 7px;
  height: 7px;
  border: 0.5px solid rgba(255, 255, 255, 0.95);
  background: #15d97e;
  color: #15d97e;
  animation: mp-spot-inner 2.8s ease-out infinite;
}
.mp-spot__dot::after {
  inset: -2px;
  border: 0.5px solid #15d97e;
  animation: mp-spot-ring 2.8s ease-out infinite;
}
@keyframes mp-spot-ring {
  0%   { transform: scale(1);   opacity: .90; border-color: #15d97e; }
  45%  { transform: scale(2.2); opacity: .55; border-color: #b8a75f; }
  78%  { transform: scale(3.0); opacity: .22; border-color: #15d97e; }
  100% { transform: scale(3.4); opacity: 0;   border-color: #15d97e; }
}
/* pulse inside the dot itself: white glow expands outward from the centre */
@keyframes mp-spot-inner {
  0%   { box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 0 0 0   rgba(255,255,255,.95); }
  55%  { box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.25); }
  100% { box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 0 0 3px rgba(255,255,255,0); }
}
.mp-spot:hover .mp-spot__dot { animation-play-state: paused; }

@media (max-width: 768px) {
  .mp-spot__dot { width: 5.5px; height: 5.5px; border-width: 0.5px; }
  .mp-spot__dot::after { inset: -1.5px; border-width: 0.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-spot__dot, .mp-spot__dot::after { animation: none; }
  .mp-spot__dot::after { opacity: .4; }
}

/* hairline (sub-pixel) outlines instead of 1px borders */
.mp-spot__dot {
  border: 0;
  background: #15d97e;
  color: #15d97e;
  animation: mp-spot-inner 2.8s ease-out infinite;
}
@keyframes mp-spot-inner {
  0%   { box-shadow: 0 0 0 .5px rgba(255,255,255,.90), 0 1px 3px rgba(0,0,0,.50), inset 0 0 0 0   rgba(255,255,255,.95); }
  55%  { box-shadow: 0 0 0 .5px rgba(255,255,255,.90), 0 1px 3px rgba(0,0,0,.50), inset 0 0 0 2px rgba(255,255,255,.25); }
  100% { box-shadow: 0 0 0 .5px rgba(255,255,255,.90), 0 1px 3px rgba(0,0,0,.50), inset 0 0 0 3px rgba(255,255,255,0); }
}
.mp-spot__dot::after {
  inset: -2px;
  border: 0;
  box-shadow: 0 0 0 .5px currentColor;
  color: #15d97e;
  animation: mp-spot-ring 2.8s ease-out infinite;
}
@keyframes mp-spot-ring {
  0%   { transform: scale(1);   opacity: .90; color: #15d97e; }
  45%  { transform: scale(2.2); opacity: .55; color: #b8a75f; }
  78%  { transform: scale(3.0); opacity: .22; color: #15d97e; }
  100% { transform: scale(3.4); opacity: 0;   color: #15d97e; }
}
@media (max-width: 768px) {
  .mp-spot__dot { width: 5.5px; height: 5.5px; }
  .mp-spot__dot::after { inset: -1.5px; }
}

/* keep inner pulse running on hover */
.mp-spot:hover .mp-spot__dot { animation-play-state: running; }

/* breadcrumb sits flush under the fixed header from the very first paint
   (no 40-90px gap that scrolls with the page before sticky kicks in) */
.aanbod-listing,
.house-detail { padding-top: 54px; }

@media (min-width: 1200px) {
  .aanbod-listing,
  .house-detail { padding-top: 72px; }
}

/* body already offsets the fixed header, so don't add more padding */
.aanbod-listing,
.house-detail { padding-top: 0; }
@media (min-width: 1200px) {
  .aanbod-listing,
  .house-detail { padding-top: 0; }
}

/* desktop: logo tile extends to 110px, keep breadcrumb clear of it */
@media (min-width: 1200px) {
  .aanbod-listing,
  .house-detail { padding-top: 38px; }
}

/* "Te koop" label: another 30% smaller */
.mp-spot__label { font-size: 5.3px; padding: 1px 4px; margin-top: 2px; }
@media (max-width: 768px) {
  .mp-spot__label { font-size: 4.5px; padding: 1px 3px; }
}

/* pulse originates INSIDE the dot, expands outward, and alternates
   dark green -> light green -> dark green with no abrupt colour reset */
.mp-spot__dot::after {
  animation: mp-pulse-alternate 5.6s ease-out infinite;
}
@keyframes mp-pulse-alternate {
  0%    { transform: scale(.25); opacity: .95; color: #0b8f52; }
  40%   { transform: scale(2.2); opacity: .55; color: #4cd695; }
  48%   { transform: scale(3.4); opacity: 0;   color: #7ef0b4; }
  49.9% { transform: scale(.25); opacity: 0;   color: #7ef0b4; }
  50%   { transform: scale(.25); opacity: .95; color: #7ef0b4; }
  90%   { transform: scale(2.2); opacity: .55; color: #3fbf83; }
  98%   { transform: scale(3.4); opacity: 0;   color: #0b8f52; }
  99.9% { transform: scale(.25); opacity: 0;   color: #0b8f52; }
  100%  { transform: scale(.25); opacity: .95; color: #0b8f52; }
}

/* ===== Hotspot wave: colour grows from the centre and becomes the new fill ===== */
@property --mp-fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --mp-c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #0b8f52;
}
@property --mp-c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #15d97e;
}

.mp-spot__dot {
  --mp-fill: 0%;
  --mp-c1: #0b8f52;
  --mp-c2: #15d97e;
  background: radial-gradient(circle closest-side at 50% 50%,
    var(--mp-c1) 0 var(--mp-fill),
    var(--mp-c2) var(--mp-fill) 100%);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .90), 0 1px 3px rgba(0, 0, 0, .50);
  animation: mp-wave 5.6s ease-out infinite;
}

/* half 1: dark wave grows from centre over the light dot, dot ends dark
   half 2: light wave grows from centre over the dark dot, dot ends light  */
@keyframes mp-wave {
  0%    { --mp-fill: 0%;   --mp-c1: #0b8f52; --mp-c2: #15d97e; }
  49.9% { --mp-fill: 100%; --mp-c1: #0b8f52; --mp-c2: #15d97e; }
  50%   { --mp-fill: 0%;   --mp-c1: #15d97e; --mp-c2: #0b8f52; }
  99.9% { --mp-fill: 100%; --mp-c1: #15d97e; --mp-c2: #0b8f52; }
  100%  { --mp-fill: 0%;   --mp-c1: #0b8f52; --mp-c2: #15d97e; }
}

/* outer ring carries the same colour that is filling the dot, dissipates outwards */
.mp-spot__dot::after {
  animation: mp-ring-wave 5.6s ease-out infinite;
}

@keyframes mp-ring-wave {
  0%    { transform: scale(.55); opacity: .95; color: #0b8f52; }
  47%   { transform: scale(3.3); opacity: 0;   color: #0b8f52; }
  49%   { transform: scale(.55); opacity: 0;   color: #15d97e; }
  50%   { transform: scale(.55); opacity: .95; color: #15d97e; }
  97%   { transform: scale(3.3); opacity: 0;   color: #15d97e; }
  99%   { transform: scale(.55); opacity: 0;   color: #0b8f52; }
  100%  { transform: scale(.55); opacity: .95; color: #0b8f52; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-spot__dot { animation: none; background: #15d97e; }
  .mp-spot__dot::after { animation: none; opacity: .35; }
}

/* sold villas: light grey veil over the whole plot so for-sale ones pop */
.mp-lot--sold polygon {
  fill: rgba(233, 231, 224, 0.52);
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}

/* sold villas: soft light-grey veil across the whole plot (not just the outline) */
.mp-lot--sold polygon {
  fill: rgba(238, 236, 230, 0.42);
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 1;
}

/* sold villas: subtle dark dim over the whole plot (no whitening) */
.mp-lot--sold polygon {
  fill: rgba(30, 32, 30, 0.30);
  stroke: rgba(255, 255, 255, 0.20);
  stroke-width: 1;
}

/* sold villas: 20% darker dim than 0.30 */
.mp-lot--sold polygon {
  fill: rgba(30, 32, 30, 0.36);
}

/* sold villas: 5% lighter than 0.36 */
.mp-lot--sold polygon {
  fill: rgba(30, 32, 30, 0.34);
}

/* listing pages (NL aanbod / EN properties) have no breadcrumb any more:
   give the page title its own breathing room under the fixed header */
.aanbod-listing { padding-top: 20px; }
.aanbod-listing .container > h1 { margin: 0 0 18px; }
@media (min-width: 1200px) {
  .aanbod-listing { padding-top: 38px; }
  .aanbod-listing .container > h1 { margin: 0 0 22px; }
}

/* ============================================================
   Fluid map markers + controls
   Mobile is the reference: dot 5.5px and label 4.5px on a 342px
   wide map frame. Everything else scales from that ratio.
   ============================================================ */

/* the map frame is the sizing reference for the markers */
.property-map__frame { container-type: inline-size; }

/* hotspot dot: 5.5 / 342 ≈ 1.6cqw (caps at 19px on the widest frame) */
.property-map__frame .mp-spot__dot {
  width: clamp(5.5px, 1.6cqw, 19px);
  height: clamp(5.5px, 1.6cqw, 19px);
}
/* pulse ring keeps its relative offset around the dot */
.property-map__frame .mp-spot__dot::after { inset: -18%; }

/* "Te koop" label: 4.5 / 342 ≈ 1.32cqw; padding/margin in em so they follow */
.property-map__frame .mp-spot__label {
  font-size: clamp(4.5px, 1.32cqw, 15.5px);
  padding: .22em .95em;
  margin-top: .38em;
}

/* legend + filter pills grow with the viewport (mobile size unchanged) */
@media (min-width: 992px) {
  .property-map__legend { font-size: 15px; gap: 22px; }
  .property-map__legend .dot { width: 12px; height: 12px; }
  .aanbod-filters { gap: 10px; margin-bottom: 32px; }
  .aanbod-filters button { font-size: 17px; padding: 10px 22px; }
}
@media (min-width: 1200px) {
  .property-map__legend { font-size: 16px; }
  .property-map__legend .dot { width: 13px; height: 13px; }
  .aanbod-filters button { font-size: 18px; padding: 12px 26px; }
}
@media (min-width: 1600px) {
  .aanbod-filters button { font-size: 19px; padding: 13px 30px; }
}

/* desktop pills a notch larger again: on a 1200px container 18px still reads small */
@media (min-width: 992px) {
  .aanbod-filters button { font-size: 18px; padding: 11px 24px; }
}
@media (min-width: 1200px) {
  .aanbod-filters button { font-size: 20px; padding: 13px 28px; }
}
@media (min-width: 1600px) {
  .aanbod-filters button { font-size: 22px; padding: 14px 32px; }
  .property-map__legend { font-size: 17px; }
}
/* allow the labels/dots to keep scaling if the map ever gets wider than 1200px */
.property-map__frame .mp-spot__dot { width: clamp(5.5px, 1.6cqw, 22px); height: clamp(5.5px, 1.6cqw, 22px); }
.property-map__frame .mp-spot__label { font-size: clamp(4.5px, 1.32cqw, 18px); }