/* ====== Marco Grammer Zoekpagina ====== */

.marco-zoekpagina-wrap {
  margin: 30px 0;
  padding: 0;
}

/* ── Paginatitel ── */
.marco-zoekpagina-titel {
  font-size: 18px;
  font-weight: 400;
  color: #555;
  margin: 0 0 14px;
  line-height: 1.3;
}
.marco-zoekpagina-titel em {
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  color: #085096;
}

/* ── Twee-kolom layout ──
   Productkaartjes: 270px breed, 30px tussenruimte → 3×270 + 2×30 = 870px
   Sidebar: 1220px (pagina) − 30px (gap) − 870px (producten) = 320px
── */
.marco-zoekpagina-kolommen {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.marco-zoekpagina-sidebar {
  flex: 0 0 360px;
  width: 360px;
  border: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
#marco-filters-container {
  margin: 0;
  padding: 0;
}
#marco-filters-container > *:first-child,
.marco-zoekpagina-sidebar > *:first-child {
  margin-top: 0 !important;
}
.marco-zoekpagina-hoofd {
  flex: 1;
  min-width: 0;
}

/* Verwijder clearfix pseudo-elementen — worden anders onzichtbare grid-items */
.marco-zoekpagina-hoofd ul.products::before,
.marco-zoekpagina-hoofd ul.products::after {
  display: none !important;
  content: none !important;
}

/* Woocommerce-wrapper: geen extra marge/padding */
.marco-zoekpagina-hoofd .woocommerce {
  margin: 0 !important;
  padding: 0 !important;
}

/* Productgrid: 3 gelijke kolommen, max 270px per kaartje, 30px gap */
.marco-zoekpagina-hoofd ul.products.columns-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 270px)) !important;
  gap: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: 100% !important;
}
.marco-zoekpagina-hoofd ul.products.columns-3 li.product {
  display: block !important;
  list-style: none !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  border-radius: 6px;
  overflow: hidden;
}
.marco-zoekpagina-hoofd ul.products li.product.marco-verborgen {
  display: none !important;
}

/* ── Groepsfilter-tabs (Stoelen / Kussens / etc.) ── */
.marco-zoekpagina-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.marco-zp-filter {
  padding: 6px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.marco-zp-filter:hover { border-color: #085096; color: #085096; }
.marco-zp-filter.actief { background: #085096; border-color: #085096; color: #fff; }
.marco-zp-filter span { font-weight: 400; opacity: .8; margin-left: 3px; }

/* ── Toolbar: status + sortering ── */
.marco-zp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  min-height: 34px;
}
.marco-zp-status {
  font-size: 13px;
  color: #888;
}
.marco-zp-sortering {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  padding: 6px 32px 6px 12px;
  font-size: 13px;
  color: #333;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  flex-shrink: 0;
}
.marco-zp-sortering:hover { border-color: #aab4c4; }
.marco-zp-sortering:focus { border-color: #0a5096; box-shadow: 0 0 0 3px rgba(10,80,150,.1); }

/* ════════════════════════════════════════
   JQUERY UI SLIDER BASIS
   (was afhankelijk van FiboSearch/BeRocket)
   ════════════════════════════════════════ */

.ui-slider                        { position: relative; text-align: left; }
.ui-slider .ui-slider-handle      { position: absolute; z-index: 2; cursor: default; touch-action: none; }
.ui-slider .ui-slider-range       { position: absolute; z-index: 1; display: block; border: 0; }
.ui-slider-horizontal             { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range  { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

/* ════════════════════════════════════════
   FILTERWIDGETS (prijs + attributen)
   ════════════════════════════════════════ */

.marco-prijsfilter-widget,
.marco-attr-filter {
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

/* Blauwe header — gebruikt .side-title van het thema */
.marco-zoekpagina-sidebar .side-title {
  background: #0a5096;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 7px 23px;
  margin: 0;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ── Prijsfilter ── */
.marco-prijsfilter-widget form {
  padding: 14px 23px 12px;
}

/* jQuery UI slider */
#marco-prijs-slider {
  margin: 4px 6px 16px;
  height: 5px;
  border: none;
  background: #35224c;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
#marco-prijs-slider .ui-slider-range {
  background: #fba439;
  border-radius: 3px;
}
#marco-prijs-slider .ui-slider-handle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f0981a;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
  top: -5px;
  cursor: grab;
  outline: none;
}
#marco-prijs-slider .ui-slider-handle:active { cursor: grabbing; }

/* Filter-knop + prijslabel */
.marco-prijsfilter-balk {
  display: flex;
  align-items: center;
  gap: 10px;
}
.marco-prijsfilter-reset {
  margin-left: auto;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  color: #ccc;
  cursor: default;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
}
.marco-prijsfilter-reset.actief {
  border-color: #0a5096;
  color: #0a5096;
  cursor: pointer;
}
.marco-prijsfilter-reset.actief:hover {
  background: #0a5096;
  color: #fff;
  border-color: #0a5096;
}
.marco-prijsfilter-label {
  font-size: 13px;
  color: #444;
  white-space: nowrap;
}

/* ── Attribuutfilterlijst ── */
.marco-zoekpagina-sidebar .marco-attr-filter-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 8px !important;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list li {
  list-style: none !important;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list li:last-child {
  border-bottom: none;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list li::before,
.marco-zoekpagina-sidebar .marco-attr-filter-list li::marker {
  display: none !important;
  content: none !important;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 23px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin: 0;
  transition: background .1s;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list label:hover {
  background: #f4f8fd;
  color: #0a5096;
}
.marco-zoekpagina-sidebar .marco-attr-filter-list input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  accent-color: #0a5096;
  cursor: pointer;
  margin: 0;
}
.marco-attr-count {
  margin-left: auto;
  color: #999;
  font-size: 13px;
  white-space: nowrap;
}

/* ── Actieve checkbox-rij markeren ── */
.marco-zoekpagina-sidebar .marco-attr-filter-list input:checked + span,
.marco-zoekpagina-sidebar .marco-attr-filter-list label:has(input:checked) {
  color: #0a5096;
  font-weight: 600;
}

/* ── Bestel bij de specialist widget ── */
.marco-zoekpagina-sidebar .widget_custom_html {
  margin-top: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

/* Alle items in het specialist-widget */
.marco-zoekpagina-sidebar .usp-landingwidget li {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.marco-zoekpagina-sidebar .widget_custom_html .side-title {
  padding-left: 23px;
  padding-right: 23px;
}

/* Badges-rij: Thuiswinkel + Kiyoh naast elkaar */
.marco-zoekpagina-sidebar .usp-landingwidget li.marco-usp-badges {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.marco-zoekpagina-sidebar .usp-landingwidget li.marco-usp-badges img {
  float: none !important;
  height: 44px !important;
  width: auto !important;
  flex-shrink: 0;
}

/* Kiyoh widget */
.marco-kiyoh-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #333;
  flex: 1;
}
.marco-kiyoh-widget:hover { color: #0a5096; }

.marco-kiyoh-cirkel {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.marco-kiyoh-cirkel svg {
  width: 100%;
  height: 100%;
}
.marco-kiyoh-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  font-weight: 700;
  color: #464343 !important;
  white-space: nowrap;
}

.marco-kiyoh-rechts {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
/* override thema: usp-landingwidget li span kleurt groen */
.marco-kiyoh-naam {
  font-size: 13px !important;
  font-weight: 700;
  color: #333 !important;
  text-transform: none;
}
.marco-kiyoh-sterren {
  position: relative;
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}
.marco-kiyoh-sterren-vol {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffb915;
}
.marco-kiyoh-sterren-leeg {
  color: #ddd;
  white-space: nowrap;
}
.marco-kiyoh-count {
  font-size: 10px;
  color: #888 !important;
  font-weight: 400;
  text-transform: none;
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

/* Filter-toggle knop — standaard verborgen, zichtbaar op klein scherm */
.marco-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: #0a5096;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 14px;
}
.marco-filter-toggle:hover { background: #083d75; }

/* Sluitknop in sidebar — standaard verborgen */
.marco-filter-sluit {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  z-index: 1;
  padding: 0;
}
.marco-filter-sluit:hover { opacity: .8; }

/* Dimoverlay */
.marco-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 998;
}
.marco-filter-overlay.marco-sidebar-open { display: block; }

/* ── Tablet en kleiner (< 1024px) ── */
@media (max-width: 1023px) {

  .marco-filter-toggle { display: inline-flex; }
  .marco-filter-sluit  { display: block; }

  /* Sidebar als slide-in overlay */
  .marco-zoekpagina-sidebar {
    position: fixed !important;
    top: 0;
    left: -380px;
    width: 340px !important;
    height: 100dvh;
    overflow-y: auto;
    background: #fff;
    box-shadow: 4px 0 20px rgba(0,0,0,.2);
    z-index: 999;
    transition: left .28s ease;
  }
  .marco-zoekpagina-sidebar.marco-sidebar-open { left: 0; }

  /* Sidebar neemt geen ruimte in de flex-rij */
  .marco-zoekpagina-kolommen {
    display: block;
  }

  /* 2-koloms grid */
  .marco-zoekpagina-hoofd ul.products.columns-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ── Mobiel (< 640px) ── */
@media (max-width: 639px) {

  .marco-zoekpagina-wrap { margin: 16px 0; }

  .marco-zoekpagina-hoofd ul.products.columns-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }

  /* Groepstabs scrollen horizontaal */
  .marco-zoekpagina-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .marco-zp-filter { white-space: nowrap; }
}

/* Schuine streep door de oorspronkelijke prijs */
del.marco-doorgestreept {
  text-decoration: none !important;
}
del.marco-doorgestreept bdi {
  display: inline-block !important;
  position: relative;
}
del.marco-doorgestreept bdi::after {
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  top: 50%;
  height: 1px;
  background: #e03;
  transform: rotate(-6deg);
}

/* Normale prijs (niet afgeprijsd) — bold, geen onderstreping */
.marco-prijs-normaal,
ins .marco-prijs-normaal {
  font-weight: 700;
  text-decoration: none !important;
}

/* ====== Einde Marco Grammer Zoekpagina ====== */