/* ====================================================================
   MCS — Gebruikte producten (occasions) overzicht
   Vult AAN op de bestaande .mcs-gp-* / .mcs-occ-* / .mcs-filter* regels
   in style.css. Laadt ná style.css (dependency) → overrides winnen.
   Eigen bestand i.v.m. parallelle agents (niet in style.css schrijven).
   ==================================================================== */

/* Grid-area kolom naast de filter-sidebar */
.mcs-gp-main { min-width: 0; }

/* --- Topbar: resultaatteller + sorteer-dropdown --- */
.mcs-gp-topbar {
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mcs-outline);
}
.mcs-gp-count { color: var(--mcs-navy); font-weight: 700; }
.mcs-gp-count strong { font-weight: 700; }
.mcs-gp-sort { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.mcs-gp-sort label { font-size: 14px; color: var(--mcs-on-surface-variant); white-space: nowrap; }

/* Sorteer-select — appearance reset + eigen pijl (zelfde stijl als contact-select) */
.mcs-gp-select {
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid var(--mcs-outline);
    border-radius: 2px;
    color: var(--mcs-navy);
    font-family: var(--mcs-font-body);
    font-size: 14px;
    line-height: 20px;
    padding: 8px 38px 8px 12px;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--mcs-on-surface-variant) 50%),
        linear-gradient(135deg, var(--mcs-on-surface-variant) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.mcs-gp-select:focus {
    outline: 0;
    border-color: var(--mcs-navy);
    box-shadow: 0 0 0 1px var(--mcs-navy);
}

/* --- Badges: kleuren conform 'design main' --- */
.mcs-occ-badge { text-transform: uppercase; }
.mcs-occ-badge--demo    { background: #E73B5E; color: #fff; }            /* signal-red */
.mcs-occ-badge--inruil  { background: var(--mcs-navy); color: #fff; }
.mcs-occ-badge--verhuur { background: var(--mcs-yellow); color: var(--mcs-navy-deep); }
.mcs-occ-badge--voorraad{ background: var(--mcs-outline); color: #fff; }

/* Lege uitgelichte afbeelding → nette grijze placeholder met merkletter */
.mcs-occ-img.is-empty {
    display: flex; align-items: center; justify-content: center;
    background: var(--mcs-surface-dim);
}
.mcs-occ-img.is-empty::after {
    content: attr(data-ph);
    font-family: var(--mcs-font-head);
    font-size: 28px; font-weight: 700;
    color: var(--mcs-outline);
    letter-spacing: .04em;
}

/* "Aanvragen" knop-stijl (knop i.p.v. link), conform design-kaart */
.mcs-occ-aanvragen { background: none; border: 0; cursor: pointer; padding: 0; }

/* Door JS verborgen kaarten (filter / paginering) */
.mcs-occ-card.is-hidden { display: none !important; }

/* Geen-resultaten melding */
.mcs-gp-empty {
    margin: 8px 0 0; padding: 40px 0;
    text-align: center; color: var(--mcs-on-surface-variant);
    font-size: 15px;
}

/* "Meer laden" verbergen als er niets meer te laden valt */
.mcs-gp-more.is-done { display: none; }

/* --- Filter-typografie: exact op de design-tokens (override style.css) ---
   "Filters" = Montserrat 24px/600 ; groepskoppen = label-caps (Hanken 14px,
   0.1em, uppercase, navy) ; opties = body 16px ; Reset = 14px outline. */
.mcs-filter__head { margin-bottom: 24px; }
.mcs-filter__head h3 {
    font-family: var(--mcs-font-head) !important;
    font-size: 24px !important;
    line-height: 32px !important;
    font-weight: 600 !important;
    color: var(--mcs-navy) !important;
}
.mcs-filter__reset {
    font-size: 14px !important;
    color: var(--mcs-outline) !important;
}
.mcs-filter__reset:hover { color: var(--mcs-navy) !important; }
.mcs-filter__group h4 {
    font-family: var(--mcs-font-body) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: none !important;
    color: var(--mcs-navy) !important;
    margin: 0 0 14px 0 !important;
}
.mcs-filter__opt {
    font-family: var(--mcs-font-body) !important;
    font-size: 16px !important;
    line-height: 26px !important;
    font-weight: 400 !important;
    gap: 12px !important;
    color: var(--mcs-on-surface-variant) !important;
    margin-bottom: 10px !important;
}
.mcs-filter__opt:hover { color: var(--mcs-navy) !important; }
.mcs-filter__opt input {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    accent-color: var(--mcs-navy) !important;
}

/* --- Kaart-footer (prijs + Aanvragen + lijn) altijd onderaan uitlijnen --- */
.mcs-occ-body { flex-grow: 1; }
.mcs-occ-foot { margin-top: auto !important; }

/* --- Kaarttitel = H4 op design-grootte (Salient's heading-stijl maakte 'm 26px) --- */
.mcs-occ-card h4.mcs-occ-title {
    font-family: var(--mcs-font-head) !important;
    font-size: 18px !important;
    line-height: 26px !important;
    font-weight: 700 !important;
    color: var(--mcs-navy) !important;
}

/* --- Responsive --- */
@media only screen and (max-width: 999px) {
    .mcs-gp-layout { grid-template-columns: 1fr; }
    .mcs-filter { position: static; }
    .mcs-gp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 690px) {
    .mcs-gp-grid { grid-template-columns: 1fr; }
    .mcs-gp-topbar { flex-direction: column; align-items: flex-start; }
}