/* Kaart */
.s2b-exposed.card {
  margin-bottom: 16px;
  background: var(--bs-body-bg, #fff);
}

/* =========================
   TOPBAR GRID (6 controls)
   Phone:   2 kolommen → 3 rijen (2–2–2)
   Tablet:  3 kolommen → 2 rijen (3–3)
   Desktop: 6 kolommen → 1 rij     (6)
   ========================= */
.s2b-topbar{
  margin-bottom: 10px;
}
.s2b-topgrid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));    /* <576px: 2 kolommen */
  align-items: end;
  min-width: 0;
}
@media (min-width: 576px){
  .s2b-topgrid{ grid-template-columns: repeat(3, minmax(0,1fr)); } /* 576–991px: 3 kolommen */
}
@media (min-width: 992px){
  .s2b-topgrid{ grid-template-columns: repeat(6, minmax(0,1fr)); } /* ≥992px: 6 kolommen op één lijn */
}
.s2b-topgrid > .s2b-cell{ min-width: 0; }

/* Label boven input + netjes wrappen (altijd) */
.s2b-cell .form-item{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  margin: 0;
}
.s2b-cell .form-item > label{
  display: block;
  margin: 0 0 .35rem 0;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.s2b-cell .form-item > .form-autocomplete,
.s2b-cell .form-item > select,
.s2b-cell .form-item > input:not([type="checkbox"]):not([type="radio"]){
  width: 100%;
  min-width: 0;
  border-radius: .5rem;
}

/* Favoriet: compacte checkbox (label naast vinkje) */
.s2b-cell--favoriet .form-item{
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.s2b-cell--favoriet .form-item > label{
  margin: 0;
  white-space: nowrap;
  font-size: .95rem;
}
.s2b-cell--favoriet .form-check{ margin: 0; }

/* ===== Advanced (range) panel ===== */
#s2b-advanced{
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  background: var(--bs-tertiary-bg, #f8f9fa);
  padding: 12px;
  margin-bottom: 10px;
  transition: padding .25s ease, margin .25s ease, border-width .25s ease;
  overflow: hidden;
}
#s2b-advanced[data-open="0"]{
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
}
#s2b-advanced[data-open="0"] .s2b-ranges{ display: none; }

.s2b-ranges{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .s2b-ranges{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px){
  .s2b-ranges{ grid-template-columns: repeat(5, 1fr); }
}

.s2b-range{
  background: #e9eef3;
  border: 1px solid var(--bs-border-color, #d0d7de);
  border-radius: .6rem;
  padding: 12px;
}
.s2b-range .form-item > label{ font-weight: 700; }
.s2b-range .container-inline{ display: grid; gap: 10px; }
.s2b-range .container-inline > .form-item{ display: block; margin-right: 0; }

/* Min/Max naast elkaar in range-tegels */
.s2b-range fieldset > .fieldset-wrapper,
.s2b-range .container-inline{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.s2b-range .fieldset-wrapper .form-item,
.s2b-range .container-inline > .form-item{ min-width: 0; margin: 0; }
.s2b-range .form-control{ min-width: 0; width: 100%; white-space: nowrap; }
@media (max-width: 380px){
  .s2b-range .form-control{ padding-left: .5rem; padding-right: .5rem; }
  .s2b-range fieldset > .fieldset-wrapper{ gap: 6px; }
}

/* Inputs algemeen binnen exposed form */
.s2b-exposed input[type="text"],
.s2b-exposed input[type="search"],
.s2b-exposed input[type="number"],
.s2b-exposed select{
  width: 100%;
  border-radius: .5rem;
}

/* ===== Onderste actie-balk ===== */
.s2b-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}
.s2b-actions__left .form-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.s2b-actions__left .form-actions .s2b-clear{ margin-left: 0 !important; }
.s2b-actions__right{
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Buttons breken niet */
.s2b-exposed .btn{ white-space: nowrap; }

/* Verberg origin widgets als proxy gebruikt wordt */
.s2b-hidden-origin{ position: absolute !important; left: -9999px !important; }

/* Operator-selects definitief weg */
.s2b-range select[name$="[op]"],
.s2b-range select[name$="_op"],
.s2b-range .form-item--operator,
.s2b-range .form-type-select.operator{ display: none !important; }

/* Verberg lege range-kaartjes */
.s2b-range:not(:has(input:not([type="hidden"]), select, textarea)){ display: none !important; }

/* ——— Forceer label-boven bij Makelaar & Favoriet ——— */

/* 1) Geldt altijd: label boven, control eronder */
.s2b-cell--makelaar .form-item,
.s2b-cell--favoriet .form-item{
  display: flex;
  flex-direction: column;     /* label -> control */
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.s2b-cell--makelaar .form-item > label,
.s2b-cell--favoriet .form-item > label{
  order: 0;
  display: block;
  margin: 0 0 .35rem 0;
  font-weight: 700;
  white-space: normal;
}

/* Makelaar: select/auto-complete onder label */
.s2b-cell--makelaar .form-item > select,
.s2b-cell--makelaar .form-item > .form-autocomplete{ order: 1; width: 100%; }

/* 2) Favoriet kan Bootstrap .form-check gebruiken: label óók boven de checkbox */
.s2b-cell--favoriet .form-check{
  width: 100%;
  display: flex;
  flex-direction: column;     /* label -> checkbox */
  align-items: flex-start;
  gap: 6px;
}
.s2b-cell--favoriet .form-check-label{
  order: 0;
  margin: 0 0 .25rem 0;
  font-weight: 700;
}
.s2b-cell--favoriet .form-check-input{
  order: 1;
  margin-left: 0;
}

/* 3) Overrulet eventueel eerdere regel die de favoriet-rij horizontaal zette */
.s2b-cell--favoriet .form-item{ flex-direction: column !important; }
/* Normaliseer labelgroottes in de exposed filter topbar */
.s2b-exposed .s2b-topgrid .form-label,
.s2b-exposed .s2b-topgrid .form-check-label {
  font-size: 1rem;     /* zelfde als base */
  line-height: 1.25;
}

/* Zeker weten dat Favoriet niet kleiner valt */
.s2b-exposed .s2b-cell--favoriet .form-check-label,
.s2b-exposed .s2b-cell--favoriet label {
  font-size: 1rem;
  font-weight: 500;     /* optioneel, voor consistentie */
  margin-bottom: .25rem;
}
/* === PATCH: labels in topbar overal gelijk, incl. Favoriet === */
.s2b-exposed .s2b-topgrid .form-item > label,
.s2b-exposed .s2b-topgrid .form-check > .form-check-label,
.s2b-exposed .s2b-topgrid legend{
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  margin-bottom: .35rem;
}

/* Favoriet: label boven checkbox, zelfde typografie als andere labels */
.s2b-exposed .s2b-cell--favoriet .form-item{
  display: flex;
  flex-direction: column !important;
  align-items: flex-start;
  gap: 6px;
}
.s2b-exposed .s2b-cell--favoriet .form-check{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s2b-exposed .s2b-cell--favoriet .form-check > .form-check-label{
  order: 0;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  margin: 0 0 .25rem 0;
}
.s2b-exposed .s2b-cell--favoriet .form-check-input{
  order: 1;
  margin-left: 0;
}
/* Titelbalk met toggle rechts */
.s2b-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0 12px;
}
.s2b-titlebar .page-title{
  margin:0;
  font-size:clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  font-weight:600;
}
.s2b-titlebar__actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Optioneel: op hele smalle schermen iets compacter */
@media (max-width:576px){
  .s2b-titlebar{ gap:8px; }
  .s2b-titlebar__actions{ gap:6px; }
}

/* ============================================
   1. Zelfde tegel-stijl voor bovenste rij
   ============================================ */

/* De "tegels" onder zijn .s2b-range; geef .s2b-cell hetzelfde gevoel */
.s2b-exposed .s2b-topgrid {
  gap: .75rem;
}

.s2b-exposed .s2b-cell {
  background: #edf2f7;          /* zelfde soort grijs als de blokken eronder */
  border-radius: 14px;
  padding: .45rem .75rem .55rem; /* ruimte rond label + veld */
}

/* Label bovenin iets los van het veld */
.s2b-exposed .s2b-cell > label,
.s2b-exposed .s2b-cell .form-item > label {
  display: block;
  margin-bottom: .15rem;
  font-weight: 600;
}

/* Zorg dat de input/select niet tegen de randen plakt */
.s2b-exposed .s2b-cell select,
.s2b-exposed .s2b-cell input {
  margin-top: .1rem;
}

/* ============================================
   2. Dark mode: kaart + tegels donkerder maken
   ============================================ */

/* Pas deze wrapper indien nodig aan:
   - gebruik body.is-dark, of .schepen-container.is-dark,
   - wat jij nu voor dark mode gebruikt.                      */
body.is-dark .s2b-exposed,
.schepen-container.is-dark .s2b-exposed {
  background: #0b1120;           /* donkerder achtergrond voor hele filterkaart */
}

/* Bovenste rij + blokken eronder dezelfde donkere tegelkleur geven */
body.is-dark .s2b-exposed .s2b-cell,
body.is-dark .s2b-exposed .s2b-range,
.schepen-container.is-dark .s2b-exposed .s2b-cell,
.schepen-container.is-dark .s2b-exposed .s2b-range {
  background: #111827;
  border-radius: 14px;
}

/* Inputs/selects mogen zelf zwart/donker blijven */
body.is-dark .s2b-exposed select,
body.is-dark .s2b-exposed input,
.schepen-container.is-dark .s2b-exposed select,
.schepen-container.is-dark .s2b-exposed input {
  background: #020617;
  color: #f9fafb;
  border-color: #020617;
}
/* Bovenste rij labels (Trefwoord, Scheepstype, Scheepsmakelaar, Favoriet, Sorteren, Order)
   nooit afbreken op twee regels */
.s2b-exposed .s2b-topgrid .s2b-cell > label,
.s2b-exposed .s2b-topgrid .s2b-cell .form-item > label {
  white-space: nowrap;
  font-size: 0.85rem; /* eventueel iets kleiner zodat "Scheepsmakelaar" beter past */
}

/* Als je de labels onder (Lengte/Breedte/Tonnage...) NIET wilt beïnvloeden,
   laat je .s2b-range met rust, dus geen extra rules daarvoor. */
/* ============================================
   Dark mode: labels in exposed filter lichter
   ============================================ */

/* Pas de selector aan je dark-class aan: 
   ik ga nu uit van body.is-dark óf .schepen-container.is-dark */
body.is-dark .s2b-exposed label,
body.is-dark .s2b-exposed .form-item__label,
.schepen-container.is-dark .s2b-exposed label,
.schepen-container.is-dark .s2b-exposed .form-item__label {
  color: #e5e7eb;      /* lichtgrijs, goed leesbaar op donker */
}
/* ============================================
   DARK MODE: labels & teksten in exposed filter
   ============================================ */

/* Bovenste rij + "Meer filters" blokken */
body.is-dark .s2b-exposed,
body.s2b-dark .s2b-exposed,
body[data-theme="dark"] .s2b-exposed,
.schepen-container.is-dark .s2b-exposed,
.s2b-theme-dark .s2b-exposed {
  color: #e5e7eb;
}

/* Alle labels (bovenste rij + Lengte/Breedte/Tonnage/Bouwjaar/Vraagprijs) */
body.is-dark .s2b-exposed label,
body.is-dark .s2b-exposed .form-item__label,
body.s2b-dark .s2b-exposed label,
body.s2b-dark .s2b-exposed .form-item__label,
body[data-theme="dark"] .s2b-exposed label,
body[data-theme="dark"] .s2b-exposed .form-item__label,
.schepen-container.is-dark .s2b-exposed label,
.schepen-container.is-dark .s2b-exposed .form-item__label,
.s2b-theme-dark .s2b-exposed label,
.s2b-theme-dark .s2b-exposed .form-item__label {
  color: #e5e7eb !important;
}

/* Kleine tekst binnen de blokken (bijv. "Min" / "Max") */
body.is-dark .s2b-exposed .s2b-range span,
body.s2b-dark .s2b-exposed .s2b-range span,
body[data-theme="dark"] .s2b-exposed .s2b-range span,
.schepen-container.is-dark .s2b-exposed .s2b-range span,
.s2b-theme-dark .s2b-exposed .s2b-range span {
  color: #d1d5db;
}

/* Placeholders in inputs ook wat lichter */
body.is-dark .s2b-exposed input::placeholder,
body.s2b-dark .s2b-exposed input::placeholder,
body[data-theme="dark"] .s2b-exposed input::placeholder,
.schepen-container.is-dark .s2b-exposed input::placeholder,
.s2b-theme-dark .s2b-exposed input::placeholder {
  color: #9ca3af;
  opacity: 1;
}
/* Bovenste rij: alle cellen en labels gelijk uitlijnen */
.s2b-exposed .s2b-topgrid .s2b-cell {
  display: flex;
  flex-direction: column;
}

/* Alle labels in de bovenste rij exact dezelfde marge en lijnhoogte */
.s2b-exposed .s2b-topgrid .s2b-cell label {
  display: block;
  margin: 0 0 0.15rem 0;  /* geen extra top-marge */
  line-height: 1.2;
}

/* Form-item in de cellen: geen gekke extra marges (ook voor Favoriet) */
.s2b-exposed .s2b-topgrid .s2b-cell .form-item,
.s2b-exposed .s2b-topgrid .s2b-cell .js-form-item {
  margin-top: 0;
  margin-bottom: 0;
}
/* Specifiek: Favoriet-label gelijk trekken met de rest */
.s2b-exposed .s2b-cell--favoriet > label,
.s2b-exposed .s2b-cell--favoriet .form-item > label,
.s2b-exposed .s2b-cell--favoriet .js-form-item > label {
  position: relative;
  top: 2px;          /* eventueel 1px maken als 2 te veel is */
}

/* Voor de zekerheid ook eventuele marges neutraliseren */
.s2b-exposed .s2b-cell--favoriet .form-item,
.s2b-exposed .s2b-cell--favoriet .js-form-item {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ===== Ship2Buy premium filterblok redesign ===== */

.s2b-exposed.card {
  background: #f7fafc !important;
  border: 1px solid #d9e2ea !important;
  border-radius: 26px !important;
  box-shadow: 0 10px 30px rgba(30, 43, 58, 0.08) !important;
  overflow: hidden;
  margin-bottom: 24px !important;
}

.s2b-exposed.card .card-body {
  padding: 26px !important;
}

.s2b-topbar {
  margin-bottom: 16px;
}

.s2b-topgrid {
  gap: 16px !important;
}

.s2b-cell .form-item > label,
.s2b-cell .form-check > .form-check-label,
.s2b-cell legend {
  color: #1e2b3a !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: .45rem !important;
}

.s2b-exposed input[type="text"],
.s2b-exposed input[type="search"],
.s2b-exposed input[type="number"],
.s2b-exposed select,
.s2b-cell .form-item > .form-autocomplete,
.s2b-cell .form-item > select,
.s2b-cell .form-item > input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 58px !important;
  width: 100% !important;
  border: 1px solid #d9e2ea !important;
  background: #ffffff !important;
  color: #24313d !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  box-shadow: none !important;
}

.s2b-exposed input::placeholder {
  color: #8a97a6 !important;
  opacity: 1;
}

.s2b-exposed select:focus,
.s2b-exposed input:focus,
.s2b-exposed .form-control:focus {
  border-color: #1e2b3a !important;
  box-shadow: 0 0 0 3px rgba(30, 43, 58, 0.08) !important;
  outline: 0 !important;
}

#s2b-advanced {
  background: #eef3f7 !important;
  border: 1px solid #d9e2ea !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
}

.s2b-ranges {
  gap: 14px !important;
}

.s2b-range {
  background: #ffffff !important;
  border: 1px solid #d9e2ea !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 4px 12px rgba(30, 43, 58, 0.04);
}

.s2b-range .form-item > label {
  color: #1e2b3a !important;
  font-weight: 700 !important;
}

/* ==== DISABLED DESKTOP ACTION LAYOUT IN SCHEPEN-FILTERS-B START ==== */
.s2b-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: wrap;
  margin-top: 8px;
}

.s2b-actions__left .form-actions {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
  margin: 0 !important;
}

.s2b-actions__right {
  margin-left: auto !important;
}
/* ==== DISABLED DESKTOP ACTION LAYOUT IN SCHEPEN-FILTERS-B END ==== */

.s2b-exposed .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn,
  .btn-primary
),
.s2b-exposed .s2b-toggle,
.s2b-exposed .s2b-clear {
  min-height: 56px !important;
  padding: 14px 24px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.s2b-exposed .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn-primary
) {
  background: #1e2b3a !important;
  border: 1px solid #1e2b3a !important;
  color: #ffffff !important;
}

.s2b-exposed .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn-primary
):hover {
  background: #26384b !important;
  border-color: #26384b !important;
  color: #ffffff !important;
}

.s2b-exposed .s2b-clear {
  background: #ffffff !important;
  border: 1px solid #d9e2ea !important;
  color: #1e2b3a !important;
}

.s2b-exposed .s2b-clear:hover {
  background: #f3f6f9 !important;
  border-color: #c9d6e2 !important;
  color: #1e2b3a !important;
}

.s2b-exposed .s2b-toggle,
.s2b-exposed .btn-outline-primary {
  background: transparent !important;
  border: 2px solid #1e2b3a !important;
  color: #1e2b3a !important;
}

.s2b-exposed .s2b-toggle:hover,
.s2b-exposed .btn-outline-primary:hover {
  background: #1e2b3a !important;
  color: #ffffff !important;
  border-color: #1e2b3a !important;
}

.s2b-cell--favoriet .form-check-input {
  width: 20px;
  height: 20px;
  border-color: #c8d3de;
}

.s2b-cell--favoriet .form-check-input:checked {
  background-color: #1e2b3a;
  border-color: #1e2b3a;
}

@media (max-width: 767px) {
  .s2b-exposed.card .card-body {
    padding: 22px 18px !important;
  }

  .s2b-actions {
    align-items: stretch !important;
  }

  .s2b-actions__left,
  .s2b-actions__right {
    width: 100%;
    margin-left: 0 !important;
  }

  .s2b-actions__left .form-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px !important;
    width: 100%;
  }

  .s2b-actions__left .form-actions > * {
    min-width: 0;
    width: 100% !important;
    justify-content: center;
  }

  .s2b-actions__right .s2b-toggle {
    width: 100% !important;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .s2b-exposed input[type="text"],
  .s2b-exposed input[type="search"],
  .s2b-exposed input[type="number"],
  .s2b-exposed select {
    min-height: 54px !important;
    padding: 12px 16px !important;
  }

  .s2b-exposed .form-actions :is(
    input[type="submit"],
    button[type="submit"],
    .button,
    .form-submit,
    .btn,
    .btn-primary
  ),
  .s2b-exposed .s2b-toggle,
  .s2b-exposed .s2b-clear {
    min-height: 54px !important;
    padding: 12px 18px !important;
  }
}

/* ===== /Ship2Buy premium filterblok redesign ===== */


/* ===== Ship2Buy filterblok step 2 ===== */

/* Kaart chiquer en witter */
.s2b-exposed.card {
  background: #ffffff !important;
  border: 1px solid #dfe6ed !important;
  box-shadow: 0 14px 34px rgba(30, 43, 58, 0.09) !important;
}

.s2b-exposed.card .card-body {
  background: #ffffff !important;
}

/* Bovenste grid iets luchtiger */
.s2b-topgrid {
  gap: 18px !important;
}

/* Velden netter */
.s2b-exposed input[type="text"],
.s2b-exposed input[type="search"],
.s2b-exposed input[type="number"],
.s2b-exposed select,
.s2b-cell .form-item > .form-autocomplete,
.s2b-cell .form-item > select,
.s2b-cell .form-item > input:not([type="checkbox"]):not([type="radio"]) {
  background: #ffffff !important;
  border: 1px solid #d8e0e8 !important;
  border-radius: 18px !important;
  min-height: 60px !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  color: #24313d !important;
}

/* Placeholder rustiger */
.s2b-exposed input::placeholder {
  color: #8e99a6 !important;
}

/* Selects strakker */
.s2b-exposed select {
  padding-right: 44px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-position: right 16px center !important;
  background-size: 16px 16px !important;
}

/* Sorteren/order minder lelijk afgekapt */
.s2b-cell--sort-by select,
.s2b-cell--sort-order select {
  font-size: 15px !important;
}

/* Lege balk / lege actie-ruimte weg */
.s2b-actions__right:empty,
.s2b-actions__left:empty {
  display: none !important;
}

.s2b-actions .form-actions:empty {
  display: none !important;
}

/* Als er een lege outline knop of lege toggle wordt gerenderd, verberg hem */
.s2b-actions .btn:empty,
.s2b-actions button:empty,
.s2b-actions a:empty {
  display: none !important;
}

/* Knoppen definitief in Ship2Buy-stijl */
.s2b-exposed .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn-primary
) {
  background: #1e2b3a !important;
  border: 1px solid #1e2b3a !important;
  color: #ffffff !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
}

.s2b-exposed .form-actions :is(
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit,
  .btn-primary
):hover {
  background: #26384b !important;
  border-color: #26384b !important;
  color: #ffffff !important;
}

/* Wis = lichte secundaire knop */
.s2b-exposed .s2b-clear {
  background: #eef3f7 !important;
  border: 1px solid #d7e0e8 !important;
  color: #1e2b3a !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
}

.s2b-exposed .s2b-clear:hover {
  background: #e6edf3 !important;
  border-color: #cfd9e2 !important;
  color: #1e2b3a !important;
}

/* Meer filters = outline */
.s2b-exposed .s2b-toggle,
.s2b-exposed .btn-outline-primary {
  background: #ffffff !important;
  border: 2px solid #1e2b3a !important;
  color: #1e2b3a !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
}

.s2b-exposed .s2b-toggle:hover,
.s2b-exposed .btn-outline-primary:hover {
  background: #1e2b3a !important;
  border-color: #1e2b3a !important;
  color: #ffffff !important;
}

/* Actiebalk */
.s2b-actions {
  gap: 14px !important;
  margin-top: 14px !important;
}

/* Mobiel: Meer filters boven Zoek/Wis */
@media (max-width: 767px) {
  .s2b-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .s2b-actions__right {
    order: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .s2b-actions__left {
    order: 2 !important;
    width: 100% !important;
  }

  .s2b-actions__right .s2b-toggle {
    width: 100% !important;
    min-height: 56px !important;
    justify-content: center;
  }

  .s2b-actions__left .form-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .s2b-actions__left .form-actions > * {
    width: 100% !important;
    min-height: 56px !important;
    justify-content: center;
  }

  .s2b-actions__left .form-actions .s2b-clear {
    margin-left: 0 !important;
  }
}

/* Extra nette focus states */
.s2b-exposed select:focus,
.s2b-exposed input:focus,
.s2b-exposed .form-control:focus {
  border-color: #1e2b3a !important;
  box-shadow: 0 0 0 3px rgba(30, 43, 58, 0.08) !important;
}

/* ===== /Ship2Buy filterblok step 2 ===== */