/* =========================================================================
   FQD — Mobilox-voorraadwidget in de huisstijl

   De widget van Mobilox rendert zijn eigen HTML op /occasions/. Dit bestand
   legt daar de FQD-opmaak overheen: dezelfde kaarten, lettertypes, chips en
   kleuren als de rest van de site.

   Waarom overal !important: Mobilox zet zijn eigen kleuren in een <style>
   in de pagina, ook met !important. Zonder dit wint hun regel.
   Waarom .mox.mox: dat verdubbelt de specificiteit en wint daarmee van hun
   .mox-regel, zonder dat we hun stylesheet hoeven aan te passen.

   LET OP — een deel hoeft geen CSS te zijn. De vier basiskleuren staan als
   instelling in het Mobilox-account zelf (achtergrond, accent, tekst). Zet
   die daar goed, dan is dit bestand alleen nog nodig voor vorm en typografie.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Basis: kleuren en lettertype van de widget
   ------------------------------------------------------------------------- */
.mox.mox {
  /*
   * Deze vier stonden op vaste donkere waarden. Mobilox gebruikt ze door de
   * hele widget, dus in de lichte weergave werd alles wat op --textColor
   * leunt bijna-wit op bijna-wit. Nu wijzen ze naar de themakleuren en
   * draaien ze vanzelf mee. In de donkere weergave komt er dezelfde kleur
   * uit als eerst.
   */
  --backgroundColor: var(--fqd-ink, #0e0d0c) !important;
  --accentColor:     var(--fqd-red-bright, #f2634f) !important;
  --altAccentColor:  var(--fqd-surface-2, #211d1b) !important;
  --textColor:       var(--fqd-text, #f4f0ec) !important;

  background-color: var(--fqd-ink, #0e0d0c) !important;
  color: var(--fqd-text, #f4f0ec) !important;
  font-family: var(--font-body, "Instrument Sans", system-ui, sans-serif) !important;
}

/* -------------------------------------------------------------------------
   Raster.

   Mobilox bundelt de voertuigen in Bootstrap-rijen van drie. Zolang elke rij
   zijn eigen raster is, zit je dus vast aan drie per rij. Met display:contents
   valt het rij-element weg als doos, komen alle kaarten rechtstreeks in het
   raster eromheen, en bepalen wij hoeveel er naast elkaar staan.

   minmax(0,1fr) is geen detail: met een gewone 1fr mag een kolom niet
   krimpen onder zijn inhoud, en dan duwt een lange autotitel het raster
   breder dan het scherm.
   ------------------------------------------------------------------------- */
.mox .mox-inventorylist-new > div:has(> .mox-gridview-row) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
}

.mox .mox-gridview-row {
  display: contents !important;
}

/* Mobilox tekent de voorraad twee keer: een blok voor grote schermen
   (.d-lg-block.d-none, het raster hierboven) en een eigen blok voor de
   telefoon (.d-lg-none.row). Normaal laat Bootstrap er precies een zien.

   Maar wij zetten op dat eerste blok display:grid met !important, en dat
   wint van de d-none van Bootstrap. Gevolg: op de telefoon stond de hele
   lijst er twee keer onder elkaar — eerst ons raster, daarna nog eens de
   versie van Mobilox met foto's van 900 pixels breed in een scherm van 375.
   Dat zag eruit alsof de auto's ineens waren ingezoomd.

   Ons raster zakt onder 620px netjes naar een kaart per rij, dus dat blok
   van Mobilox hebben we niet nodig. De paginaknoppen eronder zijn een apart
   blok (zonder .row) en blijven dus gewoon staan — die zijn op de telefoon
   de enige die zichtbaar zijn. */
.mox .mox-inventorylist-new > .d-lg-none.row {
  display: none !important;
}

/* Bootstrap zet een clearfix op de rij: ::before en ::after met
   content:" " en display:table. In een flexrij zijn die onzichtbaar, maar
   in een raster worden pseudo-elementen echte rastercellen. Ze pakken dan
   cel 1 en de laatste cel, waardoor elke rij linksboven een gat heeft en
   alle kaarten een plek opschuiven. Uitzetten is de hele oplossing. */
.mox .mox-gridview-row::before,
.mox .mox-gridview-row::after {
  display: none !important;
}

/* De knopjes rechtsboven om tussen raster- en lijstweergave te wisselen zijn
   weg: het raster van drie is de enige weergave die we tonen. De sorteerknop
   ernaast blijft wel staan. De lijstweergave zelf gebruikt heel andere
   opmaak (.mox-product-row) en is hier nooit voor ingericht; zonder knop is
   die niet meer te bereiken. */
.mox .mox-layout-toggle,
.mox .mox-layout-toggle-grid,
.mox .mox-layout-toggle-list {
  display: none !important;
}


.mox .mox-product-column {
  max-width: none !important;
  flex: none !important;
  width: auto !important;
  padding: 0 !important;
  min-width: 0 !important;
}
.mox .mox-product-column-body > div { min-width: 0 !important; }

/* -------------------------------------------------------------------------
   De kaart: buitenschil met hairline, binnenkern met eigen vlak
   ------------------------------------------------------------------------- */
.mox .mox-product-column > div {
  background: var(--fqd-veil, rgba(244, 240, 236, 0.035)) !important;
  padding: 6px !important;
  border-radius: 32px !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.mox .mox-product-column:hover > div { transform: translateY(-5px) !important; }

.mox .mox-product-column > div > a:first-child {
  display: block !important;
  overflow: hidden !important;
  border-radius: 26px 26px 0 0 !important;   /* 32px schil min 6px padding */
}

.mox .mox-image {
  aspect-ratio: 3 / 2 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 0 !important;
}

.mox .mox-product-column-body {
  background: var(--fqd-surface, #171413) !important;
  border-radius: 0 0 26px 26px !important;
  padding: 1.5rem !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------------------
   Titel en specificaties
   ------------------------------------------------------------------------- */
.mox .mox-title {
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  color: var(--fqd-text, #f4f0ec) !important;
  /* twee regels, daarna afkappen, zodat de koppen op een lijn blijven */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Specs worden chips, net als elders op de site */
/* De rij met kenmerken heeft bij Mobilox geen eigen klasse, alleen
   Bootstrap-hulpklassen, en hij mag niet afbreken. Vier chips passen niet
   naast elkaar in een kaart van een derde scherm, dus laten we hem wel
   afbreken. Twee selectoren voor hetzelfde: :has() is de nette, de
   klassenreeks is de reserve voor oudere browsers. */
.mox .mox-product-column-body > div:has(> .mox-spec-column),
.mox .mox-product-column-body > .d-flex.justify-content-between.mb-3 {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.mox .mox-spec-column {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
}
.mox .mox-attribute-icon { display: none !important; }

/* Bij vijf per rij is een chip smal genoeg dat de browser woorden gaat
   afbreken: "Trans-missie" over twee regels. Automatisch afbreken uitzetten;
   past het niet, dan mag het woord gewoon naar de volgende regel. */
.mox .mox-spec-column,
.mox .mox-spec-label,
.mox .mox-attribute-text {
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
}

/* Mobilox zet de btw-aanduiding absoluut bovenop de prijs. Terug in de
   tekstregel, anders staat "Marge" dwars door het bedrag heen. */
.mox .mox-spec-label     { color: var(--fqd-text, #f4f0ec) !important; font-weight: 600 !important; font-size: 0.8125rem !important; }
.mox .mox-attribute-text { color: var(--fqd-muted, #a9a09a) !important; font-size: 0.8125rem !important; }

/* -------------------------------------------------------------------------
   Prijsgebied. Mobilox maakt hier een rode balk van; wij maken er de
   voetregel van de kaart van: prijs links, doorklik rechts.
   ------------------------------------------------------------------------- */
/* De voetregel valt bij Mobilox buiten de binnenmarge van de kaart: de prijs
   stond daardoor 24px links van de titel en de chips erboven. Hier krijgt hij
   dezelfde marge, zodat alles op een lijn staat — prijs links, doorklik of
   leaseprijs rechts. */
.mox .mox-column-financing-price {
  background: transparent !important;
  color: inherit !important;
  border-radius: 0 !important;
  padding: 1rem 1.5rem 1.5rem !important;
  margin: 1rem 0 0 !important;
  border-top: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  gap: 1rem !important;
}
.mox .mox-column-financing-price > * { flex: 0 1 auto !important; min-width: 0 !important; }

/* De doorklik of leaseprijs staat rechts. ml-auto van Bootstrap zou de vrije
   ruimte opslokken; dat regelt space-between hierboven al. */
.mox .mox-column-financing-price .ml-auto { margin-left: 0 !important; text-align: right !important; }
.mox .mox-lease-price,
.mox .mox-calc-leaseprice { white-space: nowrap !important; }

.mox .mox-price {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  white-space: nowrap !important;
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;

  /* Mobilox legt hier een clip-path overheen: polygon(19% 0, 0 100%, ...),
     een schuin afgesneden hoek linksboven als prijskaartje-effect. Bij ons
     sneed dat precies het euroteken eraf — "€ 2.550,-" werd ", 2.550,-".
     Vandaar uit. */
  clip-path: none !important;
}
.mox .mox-price > a { width: max-content !important; white-space: nowrap !important; }

/* Gereserveerd kreeg een breed donker vlak van 259px. Als chip oogt het
   rustiger en staat het op een lijn met de prijzen van de andere kaarten. */
.mox .mox-price.mox-reserved {
  clip-path: none !important;
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  border-radius: 999px !important;
  padding: 0.3rem 0.85rem !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--fqd-red-bright, #f2634f) !important;
}
.mox .mox-price a { color: var(--fqd-text, #f4f0ec) !important; text-decoration: none !important; }

/* De btw-aanduiding ("Marge", "Incl. btw"). Mobilox zet die absoluut
   bovenop het bedrag; hier hoort hij gewoon achter de prijs op dezelfde
   regel, anders wordt de voetregel twee regels hoog.

   Er stonden hier eerder twee regels voor dit element, een met inline en
   een met block. De laatste won en dan viel "Marge" alsnog naar beneden. */
.mox .mox-tax-type {
  position: static !important;
  display: inline !important;
  margin-left: 0.4rem !important;
  white-space: nowrap !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--fqd-muted-2, #918981) !important;
}

.mox .mox-text-primary { margin-left: 0 !important; }

/* Let op: Mobilox gebruikt .mox-lease-price voor twee dingen. Los in de
   voetregel is het de leaseprijs ("va. EUR 104 p/mnd"); genest in
   .mox-text-primary is het de doorklik ("Meer informatie").

   De leaseprijs is een bedrag en mag dus niet rood — die wordt gedempt
   grijs, wat ook past bij zijn rol als bijzaak naast de vraagprijs. De
   doorklik is geen bedrag en blijft wel rood: dat is het enige accent dat
   de kaart nog heeft. */
.mox .mox-lease-price {
  text-decoration: none !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
}
.mox .mox-column-financing-price > .mox-lease-price,
.mox .mox-calc-leaseprice { color: var(--fqd-muted, #a9a09a) !important; }
.mox .mox-text-primary .mox-lease-price { color: var(--fqd-red-bright, #f2634f) !important; }

.mox .mox-reserved {
  background: var(--fqd-overlay-chip, rgba(14, 13, 12, 0.8)) !important;
  color: var(--fqd-muted, #a9a09a) !important;
  border-radius: 8px !important;
  font-size: 0.8125rem !important;
}
.mox .mox-text-secondary { color: var(--fqd-muted, #a9a09a) !important; }

/* -------------------------------------------------------------------------
   Kopbalk, filters, sorteren en paginering
   ------------------------------------------------------------------------- */
/* Mobilox laadt zijn eigen stylesheet vanaf hun server, dus die staat later
   in de pagina en wint bij gelijke specificiteit. Vandaar de dubbele klasse:
   in de lichte weergave stond "33 resultaten gevonden" wit op wit. */
.mox small.mox-results.mox-text-secondary,
.mox .mox-occasionlist-header .mox-results,
.mox .mox-results {
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-size: clamp(1.5rem, 3vw, 1.9rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
  color: var(--fqd-text, #f4f0ec) !important;
}

.mox .mox-filter-toggle,
.mox .mox-sort-toggle,
.mox .mox-btn-outline {
  background: transparent !important;
  color: var(--fqd-text, #f4f0ec) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
  min-height: 48px !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  transition: background-color 420ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.mox .mox-filter-toggle:hover,
.mox .mox-sort-toggle:hover,
.mox .mox-btn-outline:hover { background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important; }

/* Paginering. Mobilox levert Bootstrap-paginering: vierkante hokjes met een
   rand eromheen. Hier worden het ronde knoppen in de huisstijl, met 44px als
   aanraakdoel zodat het op een telefoon te raken is. */
.mox .mox-pagination {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 2.5rem 0 0 !important;
  padding: 0 !important;
}
.mox .mox-pagination .page-item { margin: 0 !important; }

.mox .mox-pagination .page-link {
  display: grid !important;
  place-items: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 0.75rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  color: var(--fqd-muted, #a9a09a) !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 420ms cubic-bezier(0.32, 0.72, 0, 1),
              color 420ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.mox .mox-pagination .page-link:hover {
  color: var(--fqd-text, #f4f0ec) !important;
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
}
.mox .mox-pagination .active .page-link {
  background: var(--fqd-red-fill, #d42a1d) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* =========================================================================
   FILTERPANEEL

   Het paneel achter de knop "Filteren". Mobilox bouwt dit met Bootstrap
   modal-onderdelen en kleurt het met de accentkleur uit hun instellingen —
   die stond op zuiver #ff0000. Daardoor waren alle kopjes, de pijltjes, de
   scheidingslijnen en "Sluiten" felrood, en was het zoekveld een wit vlak.

   Let op de selectoren met .modal-content > : de gewone
   .mox-filter-modal .modal-header verloor van iets in de stylesheet van
   Mobilox zelf, die van hun server komt en dus later in de pagina staat.
   ========================================================================= */
.mox .modal-content,
.mox-filter-modal .modal-content {
  background: var(--fqd-surface, #171413) !important;
  border: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  border-radius: var(--r-lg, 22px) !important;
  color: var(--fqd-text, #f4f0ec) !important;
}

.mox-filter-modal .modal-content > .modal-header {
  background: var(--fqd-surface, #171413) !important;
  border-bottom: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  padding: 1.25rem 1.5rem !important;
}
.mox-filter-modal .modal-content > .modal-body {
  background: transparent !important;
  /* de voetbalk staat vast onderaan; zonder deze ruimte valt het laatste
     filter erachter */
  padding: 1.25rem 1.5rem 7rem !important;
}
/* De voetbalk zit niet direct in .modal-content maar drie lagen dieper:
   modal-content > modal-body > form > modal-footer. Met de >-selector viel
   hij er dus buiten en bleef hij zwart. */
.mox-filter-modal .modal-body .modal-footer {
  background: var(--fqd-surface, #171413) !important;
  border-top: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  padding: 1.25rem 1.5rem !important;
}

.mox-filter-modal .modal-header * {
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  color: var(--fqd-text, #f4f0ec) !important;
}
.mox-filter-modal .close,
.mox-filter-modal .mox-close {
  color: var(--fqd-muted, #a9a09a) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Zoekveld: was een wit Bootstrap-invoerveld midden in een donker paneel. */
.mox-filter-modal .form-control {
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
  border: 1px solid var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
  border-radius: 999px !important;
  color: var(--fqd-text, #f4f0ec) !important;
  padding: 0.7rem 1.1rem !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
}
.mox-filter-modal .form-control::placeholder { color: var(--fqd-muted-2, #918981) !important; }

/* Kopjes van de filtergroepen: Merk, Prijs, Transmissie ... */
.mox-filter-modal .mox-filter-title {
  color: var(--fqd-text, #f4f0ec) !important;
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.mox-filter-modal .mox-modal-filter {
  background: transparent !important;
  border-bottom: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  padding: 0.85rem 0 !important;
  margin-bottom: 0 !important;
}
.mox-filter-modal svg,
.mox-filter-modal svg path { color: var(--fqd-muted, #a9a09a) !important; fill: currentColor !important; }

/* De scheidingslijnen zijn dunne divs met een achtergrondkleur, geen randen. */
.mox .mox-background-filter,
.mox-filter-modal .mox-background-filter {
  background: var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
}

.mox-filter-modal .mox-text-filter { color: var(--fqd-muted, #a9a09a) !important; }
.mox-filter-modal .mox-filter-option { color: var(--fqd-text, #f4f0ec) !important; }

/* Keuzevakjes */
.mox-filter-modal .custom-control-label {
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.9375rem !important;
  color: var(--fqd-text, #f4f0ec) !important;
  padding-top: 0.1rem !important;
}
.mox-filter-modal .custom-control-label::before {
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
  border: 1px solid var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.mox-filter-modal .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--fqd-red-fill, #d42a1d) !important;
  border-color: var(--fqd-red-fill, #d42a1d) !important;
}
.mox-filter-modal .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--fqd-red-edge, rgba(230, 48, 35, 0.30)) !important;
}

.mox .modal-backdrop { background: var(--fqd-overlay, rgba(14, 13, 12, 0.88)) !important; }

/* Zichtbare focus, ook binnen de widget */
.mox a:focus-visible,
.mox button:focus-visible {
  outline: 2px solid var(--fqd-red-bright, #f2634f) !important;
  outline-offset: 3px !important;
}

/* =========================================================================
   DETAILPAGINA VAN EEN AUTO

   Dezelfde widget, andere weergave. Mobilox bepaalt de volgorde van de
   blokken; wij bepalen hoe ze eruitzien. Kader, kaarten, chips, typografie
   en kleur komen hiermee overeen met de rest van de site.
   ========================================================================= */

/* Prijs in de kop */
.mox .mox-detail-price,
.mox .mox-price-detail {
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-size: clamp(2rem, 3.4vw, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: var(--fqd-text, #f4f0ec) !important;
}

/* De specrijen bovenaan worden onze chips */
.mox .mox-pill-holder { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
.mox .mox-attribute {
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  color: var(--fqd-muted, #a9a09a) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
}
.mox .mox-attribute .mox-attribute-icon { color: var(--fqd-red-bright, #f2634f) !important; }

/* Kentekenplaat: geel blijft geel, dat is een herkenningsteken */
.mox .mox-license-plate-body { font-variant-numeric: tabular-nums !important; }

/* De omkaderde blokken (specificaties, uitrusting, beschrijving) krijgen
   het bezel-uiterlijk van de rest van de site. */
.mox .mox-vehicle-specs,
.mox .mox-accessories,
.mox .mox-vehicle-description {
  background: var(--fqd-surface, #171413) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  border-radius: 22px !important;
}

.mox .mox-vehicle-specs h3,
.mox .mox-accessories h3,
.mox .mox-vehicle-description h3 {
  font-family: var(--font-display, "Archivo", sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  color: var(--fqd-text, #f4f0ec) !important;
}

.mox .mox-attribute-label { color: var(--fqd-muted, #a9a09a) !important; font-size: 0.9375rem !important; }
.mox .mox-attribute-value {
  color: var(--fqd-text, #f4f0ec) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  font-variant-numeric: tabular-nums !important;
}

/* Uitrusting: het vinkje in het accent, de tekst rustig */
.mox .mox-accesory i { color: var(--fqd-red-bright, #f2634f) !important; }
.mox .mox-accessory-name {
  color: var(--fqd-muted, #a9a09a) !important;
  font-weight: 400 !important;
  font-size: 0.9375rem !important;
}

/* Verkooptekst leest als lopende tekst, niet als opsomming */
.mox .mox-description-body {
  color: var(--fqd-muted, #a9a09a) !important;
  font-size: 1.0625rem !important;
  line-height: 1.7 !important;
  max-width: 68ch !important;
}

/* Knoppen: financiering, verzekering, contact */
.mox .mox-btn {
  border-radius: 999px !important;
  min-height: 52px !important;
  font-family: var(--font-body, "Instrument Sans", sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  border: 0 !important;
  transition: background-color 420ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.mox .mox-finance-btn,
.mox .mox-insurance-btn {
  background: transparent !important;
  color: var(--fqd-text, #f4f0ec) !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
}
.mox .mox-finance-btn:hover,
.mox .mox-insurance-btn:hover { background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important; }

/* Alle overige knoppen van Mobilox. In hun instellingen staat de accentkleur
   van FQD op zuiver #ff0000, en daarmee verven ze elke .mox-btn:

     .mox-btn, .mox-side-modal .btn { background-color: #ff0000 !important; }

   Financiering en verzekering hadden we hierboven al omgezet, maar "Meer
   informatie" onder de uitrusting en "Toon alle zekerheden" niet — die
   bleven felrode blokjes. Hier krijgen ze dezelfde randknop als de rest van
   de site. Eén klasse is genoeg: die van Mobilox weegt maar .mox-btn. */
.mox .mox-btn.btn.btn-primary,
.mox .mox-more-info,
.mox .mox-collapse-toggle,
.mox .certainty-toggle-btn,
.mox .mox-side-modal .btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fqd-text, #f4f0ec) !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
  border-radius: 999px !important;
  padding: 0.75rem 1.5rem !important;
}
.mox .mox-btn.btn.btn-primary:hover,
.mox .mox-more-info:hover,
.mox .mox-collapse-toggle:hover,
.mox .certainty-toggle-btn:hover,
.mox .mox-side-modal .btn:hover {
  background: var(--fqd-veil-2, rgba(244, 240, 236, 0.06)) !important;
}

/* De verstuurknop van het contactformulier is wél de hoofdactie op die
   plek, dus die wordt licht gevuld — zoals "Bekijk het aanbod". */
.mox .mox-side-modal .btn.button-color,
.mox .button-color {
  background: var(--fqd-text, #f4f0ec) !important;
  border-color: transparent !important;
  color: var(--fqd-ink, #0e0d0c) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.mox .mox-side-modal .btn.button-color:hover,
.mox .button-color:hover { background: var(--fqd-text-strong, #ffffff) !important; }

.mox .mox-contact-link {
  color: var(--fqd-red-bright, #f2634f) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
/* Mobilox zet de kleur ook op de tekst binnenin, niet alleen op de link. */
.mox .mox-contact-link span,
.mox .mox-contact-link .fas,
.mox .mox-phone-link,
.mox .mox-financing-link {
  color: var(--fqd-red-bright, #f2634f) !important;
}

/* Vangnet. Mobilox geeft de accentkleur ook door als losse variabelen. Wat
   we hierboven niet met naam en toenaam omzetten, landt daarmee alsnog op
   ons logorood in plaats van op dat felle #ff0000. */
/* --buttonBackground zetten we bewust NIET om. Mobilox heeft namelijk een
   regel .mox .mox-btn.btn.btn-primary { background: var(--buttonBackground)
   !important } die zwaarder weegt dan onze knopregels hieronder. Zolang die
   variabele niet oplost, valt die regel weg en winnen wij. Vulden we hem,
   dan kleurde "Verzekeringen vergelijken" alsnog vol rood — dat is precies
   wat we hier proberen te voorkomen. */
/* De accentkleuren staan bovenaan bij .mox.mox; die regel weegt zwaarder
   dan een losse .mox en won hier toch al van. */

/* Fotogalerij: zelfde beeldverhouding en ronding als op de kaarten */
.mox .mox-image-grid img,
.mox .mox-subgrid img,
.mox .mox-image-slider-wrapper img {
  border-radius: 14px !important;
  object-fit: cover !important;
}
.mox .mox-gallery-trigger,
.mox .mox-show-gallery {
  background: var(--fqd-overlay-chip, rgba(14, 13, 12, 0.8)) !important;
  color: var(--fqd-text, #f4f0ec) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px var(--fqd-hairline-2, rgba(243, 239, 236, 0.16)) !important;
}
.mox .mox-slider-arrow-prev,
.mox .mox-slider-arrow-next {
  background: var(--fqd-overlay-chip, rgba(14, 13, 12, 0.8)) !important;
  border-radius: 999px !important;
}

/* Zijpaneel en modals volgen dezelfde achtergrond */
.mox .mox-side-modal,
.mox .mox-interest-modal,
.mox .mox-modal-filter {
  background: var(--fqd-surface, #171413) !important;
  color: var(--fqd-text, #f4f0ec) !important;
}

/* -------------------------------------------------------------------------
   Responsief
   ------------------------------------------------------------------------- */
@media (max-width: 1079px) {
  .mox .mox-inventorylist-new > div:has(> .mox-gridview-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 620px) {
  .mox .mox-inventorylist-new > div:has(> .mox-gridview-row) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .mox .mox-product-column-body { padding: 1.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mox .mox-product-column > div { transition: none !important; }
  .mox .mox-product-column:hover > div { transform: none !important; }
}

/* -------------------------------------------------------------------------
   Lichte weergave: wat Mobilox hard op wit heeft gezet

   De widget gaat ervan uit dat de site altijd donker is. Op drie plekken
   zit wit vastgeschroefd, en dat valt pas op zodra je de lichte weergave
   aanzet: dan kijk je naar wit op wit.
   ------------------------------------------------------------------------- */

/* 1. De naam van de auto boven de foto's. Mobilox zet daar color:#fff op.
      In de donkere weergave zie je niets bijzonders, in de lichte was de
      autonaam — het belangrijkste woord op de pagina — onleesbaar. */
.mox .main-title,
.mox h1.main-title,
.mox h2.main-title {
  color: var(--fqd-text, #f4f0ec) !important;
}

/* 2. De icoontjes bij Tellerstand, Transmissie en Brandstof. Dat zijn losse
      SVG'tjes met fill="#ffffff" in de vorm zelf gebakken. Een CSS-regel
      wint van zo'n fill-attribuut, dus we zetten ze op de tekstkleur.

      Alleen exact #ffffff, en dat is geen toeval: het kentekenplaatje
      gebruikt #FFF met hoofdletters voor het wit van de letters op de
      blauwe band. Dat verschil in schrijfwijze houdt die er netjes buiten.
      Voor de zekerheid staan het plaatje en de keurmerkenblokken hieronder
      ook nog met naam en toenaam uitgezonderd. */
.mox svg[fill="#ffffff"],
.mox svg [fill="#ffffff"] {
  fill: var(--fqd-text, #f4f0ec) !important;
}
.mox .esos-Licenseplate-wrapper svg[fill="#ffffff"],
.mox .esos-Licenseplate-wrapper svg [fill="#ffffff"] {
  fill: #ffffff !important;
}

/* -------------------------------------------------------------------------
   De zwarte balk onderaan de uitrusting en de verkooptekst

   Mobilox vouwt allebei die blokken half dicht en legt er een verloop
   overheen: `.mox-fade-background`, een absoluut geplaatst laagje met
   `linear-gradient(0deg, var(--backgroundColor) 25%, transparent)`.

   Dat verloop eindigt in de paginakleur, maar het ligt op een paneel dat
   een tint lichter is. Daardoor zie je er een donkere baan doorheen lopen —
   in de lichte weergave nog opvallender, want daar liep hij naar #0e0d0c.
   ------------------------------------------------------------------------- */

/* Uitrusting: laat gewoon de hele lijst zien. Wie een auto koopt wil weten
   wat erop zit, en dan is half wegvagen met een knop eronder alleen maar
   in de weg. De klasse .closed knijpt de lijst af op 500px; die zetten we
   los, en dan hebben het verloop en de knop geen functie meer. */
.mox .mox-accessories .mox-accessory-grid.closed {
  max-height: none !important;
}
.mox .mox-accessories .mox-fade-background,
.mox .mox-accessories button.mox-collapse-toggle,
.mox .mox-accessories button.mox-more-info {
  display: none !important;
}

/* De verkooptekst vouwt Mobilox met een eigen script open en dicht — dat
   zet de hoogte rechtstreeks op het element, daar komen we met CSS niet
   tussen. Daar laten we de knop dus staan en kleuren we alleen het verloop
   bij: naar de kleur van het paneel zelf in plaats van die van de pagina.
   Dan zie je geen baan meer, alleen tekst die zachtjes ophoudt. */
.mox .mox-vehicle-description .mox-fade-background {
  background-image: linear-gradient(0deg, var(--fqd-surface, #171413) 25%, transparent) !important;
}

/* De rij met prijs, kenmerken en aanvraaglinks staat bij Mobilox op
   color:#fff. Alles daarbinnen dat geen eigen kleur heeft erft dat: de
   drie links "Proefrit aanvragen", "Inruilvoorstel aanvragen" en "Offerte
   aanvragen", en het kader met "Toon alle specificaties". In de donkere
   weergave zag je dat niet, in de lichte was het wit op bijna-wit.

   Een regel op de rij zelf is genoeg. Wat een eigen kleur meekrijgt — de
   rode contactregel, het groene WhatsApp-nummer — houdt die gewoon. Het
   blok "Zekerheden" valt hier buiten: dat zit niet in deze rij en heeft
   een eigen zwarte achtergrond waar wit juist wél op hoort. */
.mox .mox-inventorydetail-new .row {
  color: var(--fqd-text, #f4f0ec) !important;
}

/* De drie aanvraaglinks hebben hun eigen color:#fff en erven dus niet van
   de regel hierboven. En het telefoonnummer erboven staat op zuiver #ff0000
   via een id-selector, die won van alles wat we eerder met klassen deden. */
.mox .mox-contact-links a.d-flex,
.mox .mox-contact-links a.d-flex span,
.mox .mox-contact-links a[data-contact-type],
.mox .mox-contact-links a[data-contact-type] span {
  color: var(--fqd-text, #f4f0ec) !important;
}
.mox #mox-contact-phone,
.mox #mox-contact-phone span {
  color: var(--fqd-red-bright, #f2634f) !important;
}

/* "Toon alle specificaties" staat in een <u> binnen de link, en die <u>
   heeft zijn eigen color:#fff. De link eromheen was al goed, maar je leest
   de <u> — dus die stond nog steeds wit op wit.

   Let op voor de volgende keer: dat kader is d-none d-lg-flex, het bestaat
   alleen vanaf 992px. In een smal venster staat het er niet en vind je het
   dus ook niet als je op zoek gaat naar witte tekst. */
.mox .mox-scrollto-specs u,
.mox .mox-scrollto-specs span {
  color: inherit !important;
}

/* Het blok "Zekerheden" had een pikzwarte achtergrond, in beide weergaven.
   In het donker viel dat weg tegen de pagina, in het licht was het een
   zwarte balk tussen de lichte panelen. Nu dezelfde vlakkleur als de
   panelen ernaast, zodat de grijze partnerkaartjes er nog steeds los op
   liggen. */
.mox .certainties-wrapper {
  background: var(--fqd-surface, #171413) !important;
  color: var(--fqd-text, #f4f0ec) !important;
  border-radius: 18px !important;
}
.mox .certainties-wrapper h3,
.mox .certainties-wrapper .mox-attribute-icon {
  color: var(--fqd-text, #f4f0ec) !important;
}

/* Het kadertje met Tellerstand, Bouwjaar, Transmissie en Brandstof.

   Dat is het enige blok waar de rand van Bootstrap nog op stond: 1px in
   #eeeeee, een vaste lichtgrijze lijn. Op de donkere pagina lees je dat als
   een felle witte streep, op de lichte valt hij juist helemaal weg tegen
   het vlak eronder — dezelfde rand, twee keer verkeerd.

   De drie panelen eronder (specificaties, uitrusting, beschrijving) hebben
   we eerder al omgezet naar een vlak zonder rand. Dit kadertje krijgt nu
   hetzelfde: de vlakkleur van een paneel met een haarlijn eromheen, in
   beide weergaven even rustig. */
.mox .mox-attribute-preview {
  background: var(--fqd-surface, #171413) !important;
  border: 1px solid var(--fqd-hairline, rgba(243, 239, 236, 0.10)) !important;
  border-radius: 18px !important;
}