/* WBM Motoren - strak & modern (v1.1) */
.wbm-wrap{--wbm-accent:#e11d2a;--wbm-dark:#111418;--wbm-line:#e6e8eb;--wbm-muted:#6b7280;max-width:1200px;margin:0 auto;font-family:inherit;color:var(--wbm-dark)}
.wbm-wrap *{box-sizing:border-box}

/* Filterbalk */
.wbm-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 28px;padding:16px;background:#f7f8f9;border:1px solid var(--wbm-line);border-radius:12px}
.wbm-filters select{flex:1 1 160px;min-width:140px;padding:11px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:15px;color:var(--wbm-dark);appearance:auto}
.wbm-filter-btn{flex:0 0 auto;padding:11px 26px;background:var(--wbm-accent);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}
.wbm-filter-btn:hover{background:#b7141f}

/* Grid */
.wbm-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.wbm-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--wbm-line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s,box-shadow .18s}
.wbm-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.wbm-card-img{position:relative;aspect-ratio:4/3;background:#0d0f12;overflow:hidden}
.wbm-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.wbm-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#6b7280;background:#1a1d21;font-size:14px}
.wbm-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.wbm-card-title{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--wbm-dark)}
.wbm-card-specs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--wbm-muted)}
.wbm-card-specs span{background:#f2f3f5;padding:3px 10px;border-radius:20px}
.wbm-card-price{margin-top:2px;font-size:22px;font-weight:800;color:var(--wbm-accent)}

/* Status badge */
.wbm-badge{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.wbm-badge-koop{background:#16a34a}
.wbm-badge-res{background:#d97706}
.wbm-badge-verkocht{background:#4b5563}

.wbm-empty{padding:40px;text-align:center;color:var(--wbm-muted);background:#f7f8f9;border-radius:12px}

/* Detailpagina */
.wbm-single{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;margin-bottom:24px}
.wbm-main-photo{position:relative;border-radius:14px;overflow:hidden;background:#0d0f12}
.wbm-main-photo img{width:100%;height:auto;display:block}
.wbm-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.wbm-thumbs a{border-radius:8px;overflow:hidden;display:block;aspect-ratio:1/1}
.wbm-thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .15s}
.wbm-thumbs a:hover img{opacity:.8}
.wbm-single-info{background:#fff;border:1px solid var(--wbm-line);border-radius:14px;padding:22px;color:var(--wbm-dark)}
.wbm-price-box{padding:20px;background:var(--wbm-dark);border-radius:14px;text-align:center;margin-bottom:20px}
.wbm-price-big{font-size:34px;font-weight:800;color:#fff}
.wbm-spec-table{width:100%;border-collapse:collapse;margin-bottom:24px}
.wbm-spec-table th,.wbm-spec-table td{text-align:left;padding:12px 4px;border-bottom:1px solid var(--wbm-line);font-size:15px}
.wbm-spec-table th{color:var(--wbm-muted);font-weight:600;width:45%}
.wbm-spec-table td{font-weight:600;color:var(--wbm-dark)}
.wbm-contact{display:flex;flex-direction:column;gap:10px}
.wbm-btn{display:block;text-align:center;padding:14px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;transition:opacity .15s}
.wbm-btn:hover{opacity:.9}
.wbm-btn-primary{background:var(--wbm-accent);color:#fff}
.wbm-btn-wa{background:#25d366;color:#fff}
.wbm-btn-mail{background:#f2f3f5;color:var(--wbm-dark);border:1px solid var(--wbm-line)}
.wbm-omschrijving{background:#fff;border:1px solid var(--wbm-line);border-radius:14px;padding:24px;margin-top:8px;color:var(--wbm-dark)}
.wbm-omschrijving h2{font-size:22px;margin:0 0 12px;color:var(--wbm-dark)}

@media(max-width:820px){.wbm-single{grid-template-columns:1fr}}

/* ===========================================================
   Thema-fix: op inhoudspagina's (niet de landingspagina/home)
   de fullscreen sticky navbar terugbrengen tot een nette balk
   =========================================================== */
nav.navbar,
nav.navbar > .container,
nav.navbar .custom-logo-link{
  height:auto !important; min-height:0 !important; max-height:none !important;
}
nav.navbar{
  position:sticky !important; top:0 !important; z-index:1000 !important; padding:10px 24px !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  background:#0d0f12 !important; border-bottom:2px solid #e11d2a !important;
}
nav.navbar > .container{
  display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; max-width:1200px !important; margin:0 auto !important;
}
nav.navbar .custom-logo{
  max-height:56px !important; height:auto !important; width:auto !important;
}
.page-section{ padding-top:32px !important; min-height:0 !important; }

/* Detailpagina-wrapper (eigen template) */
.wbm-detail-page{padding:32px 16px 48px}
.wbm-single-title{font-size:30px;font-weight:800;margin:6px 0 22px;color:#fff}
.wbm-back{display:inline-block;margin-bottom:14px;color:var(--wbm-accent);text-decoration:none;font-weight:600}
.wbm-back:hover{text-decoration:underline}

/* ===========================================================
   Mobiel: voorkom dat de vaste/sticky navbar over de inhoud
   valt (logo bleef op mobiel in beeld terwijl content erachter
   langs scrolde). Op smalle schermen wordt de balk een nette,
   meescrollende kop op ALLE pagina's (ook de home).
   =========================================================== */
@media (max-width: 860px){
  nav.navbar{
    position: sticky !important; top: 0 !important; z-index: 1000 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 10px 16px !important;
    background: #0d0f12 !important;
    border-bottom: 2px solid #e11d2a !important;
  }
  nav.navbar > .container{
    height: auto !important; min-height: 0 !important;
    display: flex !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px 16px !important;
  }
  nav.navbar .custom-logo-link{ height: auto !important; }
  nav.navbar .custom-logo{ max-height: 44px !important; height: auto !important; width: auto !important; }
  .page-section{ padding-top: 16px !important; min-height: 0 !important; }
}