/* ================================================================
   WoningSync – Single Woning Pagina
   Design geïnspireerd op Kolmeijer Makelaars & Funda
   Warm · Clean · Licht · Categoriegericht
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Merk — blauw als primaire kleur */
  --ws-primary:        #1856a4;
  --ws-primary-dark:   #0e417f;
  --ws-primary-light:  #e8f0fc;

  /* Achtergrond — warm crème, zoals Kolmeijer */
  --ws-bg:             #f5f3ee;
  --ws-surface:        #ffffff;
  --ws-surface-soft:   #faf9f6;

  /* Tekst */
  --ws-text:           #1a1c2e;
  --ws-text-soft:      #5a6272;
  --ws-text-muted:     #919aaa;

  /* Borders & scheidingslijnen */
  --ws-border:         rgba(0, 0, 0, 0.08);
  --ws-border-soft:    rgba(0, 0, 0, 0.05);
  --ws-border-medium:  rgba(0, 0, 0, 0.11);
  --ws-divider:        #e8e5de;

  /* Radii — zakelijker dan voorheen */
  --ws-radius-xl:      5px;
  --ws-radius-lg:      3px;
  --ws-radius-md:       2px;
  --ws-radius-sm:       1px;
  --ws-radius-pill:    999px;

  /* Schaduwen — minimaal, contrast van achtergrond vs wit */
  --ws-shadow-card:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.05);
  --ws-shadow-hover:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.09);
  --ws-shadow-sm:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 4px rgba(0, 0, 0, 0.04);

  /* Spacing — consistent ritme voor de hele pagina */
  --ws-gap:            clamp(16px, 2.2vw, 24px);
  --ws-sidebar-w:      clamp(300px, 30vw, 390px);
  --ws-card-pad:       clamp(20px, 3vw, 32px);
  --ws-page-x:         clamp(16px, 4vw, 52px);
  --ws-page-top:       clamp(20px, 3vw, 32px);
  --ws-page-bot:       clamp(48px, 7vw, 96px);
  --ws-max:            1440px;

  /* Easings */
  --ws-ease:           cubic-bezier(.2, .6, 0, 1);
  --ws-ease-out:       cubic-bezier(0, 0, .2, 1);
}

/* ----------------------------------------------------------------
   2. TOEGANKELIJKHEID
   ---------------------------------------------------------------- */
.ws-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   3. PAGINA SHELL + HEADING OVERRIDES
   Gescopet onder .ws-property-page zodat Elementor-stijlen
   elders op de site niet worden geraakt.
   !important is nodig omdat Elementor inline/specifieke stijlen
   anders voorrang krijgen.
   ---------------------------------------------------------------- */
.ws-property-page h1,
.ws-property-page h2,
.ws-property-page h3,
.ws-property-page h4,
.ws-property-page h5,
.ws-property-page h6 {
  margin-top: 0;
  font-family: inherit;
  text-wrap: balance;
}

.ws-property-page h1 {
  font-size: clamp(1.375rem, 2vw, 1.5rem) !important;   /* 22–24px */
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.9rem !important;
}

.ws-property-page h2 {
  font-size: clamp(1.25rem, 1.7vw, 1.375rem) !important; /* 20–22px */
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.8rem !important;
  margin-top: 1.75rem !important;
}

.ws-property-page h3 {
  font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important; /* 18–20px */
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.7rem !important;
  margin-top: 1.5rem !important;
}

.ws-property-page h4 {
  font-size: clamp(1rem, 1.3vw, 1.125rem) !important;    /* 16–18px */
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 0.65rem !important;
  margin-top: 1.25rem !important;
}

.ws-property-page h5 {
  font-size: clamp(0.9375rem, 1.1vw, 1rem) !important;   /* 15–16px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin-bottom: 0.55rem !important;
  margin-top: 1rem !important;
}

.ws-property-page h6 {
  font-size: 0.9375rem !important;                       /* 15px */
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0.9rem !important;
}

.ws-property-page {
  max-width: var(--ws-max);
  margin: 0 auto;
  padding: var(--ws-page-top) var(--ws-page-x) var(--ws-page-bot);
  color: var(--ws-text);
  font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   4. BASE CARD — wit op crème achtergrond, minimale schaduw
   ---------------------------------------------------------------- */
.ws-card {
  background: var(--ws-surface);
  border: 1px solid var(--ws-divider);
  border-radius: var(--ws-radius-xl);
  box-shadow: var(--ws-shadow-card);
}

/* ----------------------------------------------------------------
   5. BREADCRUMBS
   ---------------------------------------------------------------- */
.ws-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.81rem);
  color: var(--ws-text-muted);
  margin-bottom: var(--ws-gap);
}

.ws-breadcrumbs a {
  color: var(--ws-primary);
  text-decoration: none;
  transition: color .15s;
}
.ws-breadcrumbs a:hover { color: var(--ws-primary-dark); }
.ws-breadcrumbs span[aria-hidden] { color: var(--ws-divider); }

/* ================================================================
   6. HERO — Gallery links, Sidebar rechts
   ================================================================ */
.ws-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ws-sidebar-w);
  gap: var(--ws-gap);
  align-items: stretch; /* beide kaarten even hoog als de hoogste */
}

.ws-gallery-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Hoofdafbeelding vult de resterende ruimte na de thumbnails */
.ws-gallery-main {
  position: relative;
  background: #ede9e1;
  border-bottom: 1px solid var(--ws-divider);
  flex: 1;            /* groeit mee met de hoogte van de sidebar */
  min-height: clamp(240px, 36vw, 500px);
}

#ws-gallery-stage,
.ws-panorama-viewer {
  width: 100%;
  height: 100%;       /* vult de flex-container volledig */
  min-height: clamp(240px, 36vw, 500px);
}

#ws-gallery-stage img,
#ws-gallery-stage video,
.ws-panorama-viewer {
  width: 100%;
  height: 100%;       /* volgt de hoogte van de container */
  min-height: clamp(240px, 36vw, 500px);
  display: block;
  object-fit: cover;
}

.ws-gallery-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(200px, 28vw, 360px);
  color: var(--ws-text-muted);
  font-size: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
}

/* Badges */
.ws-gallery-badges {
  position: absolute;
  top: clamp(12px, 1.6vw, 18px);
  left: clamp(12px, 1.6vw, 18px);
  right: clamp(12px, 1.6vw, 18px);
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  z-index: 2;
}

.ws-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px clamp(10px, 1.2vw, 13px);
  border-radius: var(--ws-radius-pill);
  font-size: clamp(0.64rem, 0.62rem + 0.12vw, 0.73rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.ws-badge--status {
  color: #fff;
  background: rgba(24, 86, 164, 0.90);
}

.ws-badge--subtle {
  color: var(--ws-text);
  background: rgba(255, 255, 255, 0.90);
}

/* Thumbnails */
.ws-gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(58px, 7vw, 88px), 1fr));
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(10px, 1.2vw, 14px);
  background: var(--ws-surface-soft);
}

.ws-thumb {
  border: 1.5px solid var(--ws-border);
  border-radius: var(--ws-radius-md);
  overflow: hidden;
  background: #ede9e1;
  cursor: pointer;
  padding: 0;
  transition: border-color .18s, opacity .18s;
}

.ws-thumb:hover,
.ws-thumb:focus {
  border-color: var(--ws-primary);
  outline: none;
}

.ws-thumb img,
.ws-thumb .ws-thumb-file {
  width: 100%;
  height: clamp(48px, 6vw, 72px);
  display: block;
  object-fit: cover;
}

.ws-thumb-file {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ede9e1;
  color: var(--ws-primary);
  font-size: clamp(14px, 2vw, 22px);
}

/* Video thumbnail: donkere achtergrond met wit play-icoon */
.ws-thumb-video {
  background: #1a1c2e;
  color: #ffffff;
}

/* ================================================================
   7. SIDEBAR CARD — flex column, nul inline margins nodig
   ================================================================ */
.ws-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
  padding: var(--ws-card-pad);
}

.ws-kicker {
  display: inline-block;
  font-size: clamp(0.63rem, 0.61rem + 0.12vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ws-primary);
}

.ws-title {
  margin: 0;
  font-size: clamp(1.4rem, 1.05rem + 1.8vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--ws-text);
}

.ws-address,
.ws-intro,
.ws-note {
  margin: 0;
  color: var(--ws-text-soft);
  line-height: 1.7;
  font-size: clamp(0.82rem, 0.8rem + 0.12vw, 0.91rem);
}

.ws-note a {
  color: var(--ws-primary);
  text-decoration: none;
  transition: color .15s;
}
.ws-note a:hover { color: var(--ws-primary-dark); }

.ws-price {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ws-text);
  margin: 0;
}

/* ================================================================
   STAT STRIP — horizontale balk, geïnspireerd op Funda
   ================================================================ */
.ws-summary-grid {
  display: grid;
  /* Altijd 3 kolommen — 6 items worden zo netjes 2 rijen van 3 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--ws-divider);
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  background: var(--ws-surface-soft);
}

.ws-summary-card {
  padding: clamp(9px, 1.2vw, 13px) clamp(10px, 1.3vw, 14px);
  border-right: 1px solid var(--ws-divider);
  border-bottom: 1px solid var(--ws-divider);
  background: transparent;
  transition: background .15s;
  /* Minimale breedte zodat tekst niet afgeknepen wordt */
  min-width: 0;
  overflow: hidden;
}

/* Rechterrand weg op elke 3e cel */
.ws-summary-card:nth-child(3n) { border-right: none; }

/* Onderrand weg op de laatste rij (items 4, 5, 6) */
.ws-summary-card:nth-last-child(-n+3) { border-bottom: none; }

/* Als er maar 3 of minder items zijn: ook onderrand weg */
.ws-summary-card:only-child,
.ws-summary-card:nth-child(-n+3):last-child { border-bottom: none; }

.ws-summary-card:hover { background: var(--ws-primary-light); }

.ws-summary-label {
  display: block;
  color: var(--ws-text-muted);
  font-size: clamp(0.58rem, 0.56rem + 0.1vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 3px;
  /* Tekst mag afbreken — geen overflow meer */
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.ws-summary-value {
  display: block;
  font-size: clamp(0.85rem, 0.82rem + 0.15vw, 0.97rem);
  font-weight: 700;
  color: var(--ws-text);
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
}

/* ---- Chips in sidebar ---- */
.ws-sidebar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 0.7vw, 8px);
}

/* ---- CTA knoppenrij ---- */
.ws-btn-row {
  display: flex;
  gap: clamp(8px, 1vw, 11px);
  flex-wrap: wrap;
}

/* ---- Knoppen ---- */
.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: clamp(42px, 4.8vw, 50px);
  padding: 0 clamp(15px, 2vw, 22px);
  border-radius: var(--ws-radius-md);
  font-weight: 700;
  font-size: clamp(0.81rem, 0.79rem + 0.12vw, 0.9rem);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.ws-btn:hover,
.ws-btn:focus { outline: none; }

.ws-btn--primary {
  background: var(--ws-primary);
  color: #fff;
}
.ws-btn--primary:hover,
.ws-btn--primary:focus {
  background: var(--ws-primary-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(24, 86, 164, 0.28);
}

.ws-btn--secondary {
  background: var(--ws-surface);
  color: var(--ws-text);
  border-color: var(--ws-border-medium);
}
.ws-btn--secondary:hover,
.ws-btn--secondary:focus {
  border-color: var(--ws-primary);
  color: var(--ws-primary);
}

/* ---- Agent / contactpersoon blok ---- */
.ws-agent-block {
  border-top: 1px solid var(--ws-divider);
  padding-top: clamp(14px, 1.8vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-agent-title {
  font-size: clamp(0.62rem, 0.6rem + 0.1vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ws-text-muted);
  margin: 0;
}

.ws-agent-name {
  font-size: clamp(0.88rem, 0.86rem + 0.12vw, 0.98rem);
  font-weight: 700;
  color: var(--ws-text);
  margin: 0;
}

/* ================================================================
   8. SECTIES GRID — zelfde kolomdefinitie als hero
   ================================================================ */
.ws-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ws-sidebar-w);
  gap: var(--ws-gap);
  align-items: start;
  margin-top: var(--ws-gap);
}

.ws-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ws-gap);
}

/* ----------------------------------------------------------------
   9. SECTIE CARDS
   ---------------------------------------------------------------- */
.ws-section { padding: var(--ws-card-pad); }

.ws-section h2 {
  margin: 0 0 clamp(16px, 2vw, 22px);
}

/* ----------------------------------------------------------------
   10. BODYTEKST
   ---------------------------------------------------------------- */
.ws-content {
  color: var(--ws-text-soft);
  line-height: 1.85;
  font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.97rem);
}
.ws-content p            { margin: 0 0 1.15em; }
.ws-content p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------
   11. CHIPS
   ---------------------------------------------------------------- */
.ws-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 0.7vw, 8px);
}

.ws-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(5px, 0.7vw, 8px) clamp(10px, 1.2vw, 14px);
  border-radius: var(--ws-radius-pill);
  background: var(--ws-surface-soft);
  border: 1px solid var(--ws-divider);
  font-size: clamp(0.74rem, 0.72rem + 0.12vw, 0.82rem);
  font-weight: 500;
  color: var(--ws-text-soft);
}

.ws-chip::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ws-primary);
  opacity: 0.45;
  flex-shrink: 0;
}

/* ================================================================
   12. KENMERKEN — categoriegroepering à la Kolmeijer
   ================================================================ */

/* Container voor alle categorieën */
.ws-detail-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.5vw, 26px);
}

/* Categorie-kop: gekleurde label, zoals Kolmeijer */
.ws-detail-cat-header {
  margin: 0 0 2px;
  font-size: clamp(0.74rem, 0.72rem + 0.12vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ws-primary);
  padding-bottom: clamp(6px, 0.8vw, 9px);
  border-bottom: 2px solid var(--ws-primary-light);
}

/* Tabel per categorie */
.ws-detail-table {
  display: grid;
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
  column-gap: clamp(12px, 1.5vw, 18px);
  row-gap: 0;
}

.ws-detail-label,
.ws-detail-value {
  padding: clamp(7px, 0.9vw, 10px) 0;
  font-size: clamp(0.79rem, 0.77rem + 0.1vw, 0.87rem);
  border-bottom: 1px solid var(--ws-border-soft);
}

.ws-detail-label {
  color: var(--ws-text-muted);
  font-weight: 500;
}

.ws-detail-value {
  color: var(--ws-text);
  font-weight: 600;
}

/* Geen border op het laatste rij-paar per categorie */
.ws-detail-label:nth-last-child(-n+2),
.ws-detail-value:nth-last-child(-n+2) {
  border-bottom: none;
}

/* ----------------------------------------------------------------
   13. KAART
   ---------------------------------------------------------------- */
.ws-map {
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  border: 1px solid var(--ws-divider);
  min-height: clamp(240px, 30vw, 360px);
}

#ws-property-map {
  width: 100%;
  height: clamp(240px, 30vw, 360px);
}

/* ----------------------------------------------------------------
   14. FORM BERICHTEN
   ---------------------------------------------------------------- */
.ws-form-message {
  padding: clamp(10px, 1.2vw, 14px) clamp(13px, 1.5vw, 17px);
  border-radius: var(--ws-radius-md);
  font-weight: 600;
  font-size: clamp(0.81rem, 0.79rem + 0.1vw, 0.9rem);
}
.ws-form-message--success { background: #edf7f2; color: #126841; }
.ws-form-message--error   { background: #fff2f2; color: #9f2d2d; }

/* ----------------------------------------------------------------
   15. LEAD FORMULIER FALLBACK
   ---------------------------------------------------------------- */
.ws-lead-form { display: grid; gap: clamp(9px, 1.1vw, 13px); }

.ws-lead-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(7px, 0.9vw, 11px);
}

.ws-lead-form input,
.ws-lead-form textarea {
  width: 100%;
  border: 1px solid var(--ws-border-medium);
  border-radius: var(--ws-radius-md);
  padding: clamp(10px, 1.2vw, 13px) clamp(12px, 1.4vw, 15px);
  font: inherit;
  font-size: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  color: var(--ws-text);
  background: var(--ws-surface);
  transition: border-color .15s, box-shadow .15s;
}

.ws-lead-form textarea {
  min-height: clamp(100px, 13vw, 145px);
  resize: vertical;
}

.ws-lead-form input:focus,
.ws-lead-form textarea:focus {
  outline: none;
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 3px rgba(24, 86, 164, 0.10);
}

/* ================================================================
   16. VERGELIJKBARE WONINGEN
   ================================================================ */
.ws-similar-section { margin-top: var(--ws-gap); }

.ws-similar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(11px, 1.4vw, 18px);
}

.ws-similar-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ws-divider);
  border-radius: var(--ws-radius-lg);
  overflow: hidden;
  background: var(--ws-surface);
  transition: border-color .18s, box-shadow .18s;
}

.ws-similar-card:hover,
.ws-similar-card:focus {
  border-color: rgba(24, 86, 164, 0.25);
  box-shadow: var(--ws-shadow-hover);
  outline: none;
}

.ws-similar-thumb {
  width: 100%;
  height: clamp(140px, 15vw, 210px);
  object-fit: cover;
  display: block;
  background: #ede9e1;
}

.ws-similar-body {
  padding: clamp(12px, 1.5vw, 18px);
}

.ws-similar-title {
  margin: 0 0 6px;
  font-size: clamp(0.84rem, 0.82rem + 0.15vw, 0.96rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ws-text);
}

.ws-similar-meta {
  color: var(--ws-text-muted);
  font-size: clamp(0.73rem, 0.71rem + 0.1vw, 0.81rem);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ================================================================
   VOLLE BREEDTE SECTIE: Kaart + Formulier
   ================================================================ */
.ws-below-sections {
  display: flex;
  flex-direction: column;
  gap: var(--ws-gap);
  margin-top: var(--ws-gap);
}

/* Kaart op volle breedte: meer hoogte, net als bij Funda */
.ws-below-sections .ws-map {
  min-height: clamp(280px, 40vw, 480px);
}

.ws-below-sections #ws-property-map {
  height: clamp(280px, 40vw, 480px);
}

/* Formulier: geen extra padding of achtergrond van ons,
   shortcode regelt zijn eigen kaart */
#woning-lead-form {
  display: block;
}

/* ================================================================
   17. STICKY SIDEBAR
   ================================================================ */
.ws-sticky-sentinel { height: 1px; }

.ws-sticky-desktop-card.is-stuck {
  position: sticky;
  top: 20px;
}

/* ================================================================
   18. RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 1100px) {
  .ws-hero,
  .ws-sections {
    grid-template-columns: 1fr;
  }

  .ws-sticky-desktop-card.is-stuck { position: static; }

  .ws-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  /* Summary grid blijft 3 kolommen op mobiel — grid regelt dit al */

  .ws-lead-grid { grid-template-columns: 1fr; }

  /* Detail tabel: label boven waarde */
  .ws-detail-table { grid-template-columns: 1fr; }

  .ws-detail-label {
    border-bottom: none;
    padding-bottom: 1px;
    padding-top: 9px;
    color: var(--ws-text-muted);
    font-weight: 600;
  }

  .ws-detail-value {
    padding-top: 1px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--ws-border-soft);
  }

  .ws-detail-value:last-child { border-bottom: none; }

  .ws-btn-row { flex-direction: column; }
  .ws-btn-row .ws-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .ws-similar-grid { grid-template-columns: 1fr; }
}