.elementor-6039 .elementor-element.elementor-element-dfc8401{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-start;--overlay-opacity:0.65;--padding-top:375px;--padding-bottom:75px;--padding-left:50px;--padding-right:50px;}.elementor-6039 .elementor-element.elementor-element-dfc8401:not(.elementor-motion-effects-element-type-background), .elementor-6039 .elementor-element.elementor-element-dfc8401 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://civilwood.nl/wp-content/uploads/2026/07/DSC_8588.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-6039 .elementor-element.elementor-element-dfc8401::before, .elementor-6039 .elementor-element.elementor-element-dfc8401 > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-dfc8401 > .e-con-inner > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-dfc8401 > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-dfc8401 > .e-con-inner > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-dfc8401 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-7704dcd );--background-overlay:'';}.elementor-6039 .elementor-element.elementor-element-69b6dc9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-155c094{text-align:start;}.elementor-6039 .elementor-element.elementor-element-155c094 .elementor-heading-title{font-family:var( --e-global-typography-bb3f545-font-family ), Sans-serif;font-size:var( --e-global-typography-bb3f545-font-size );font-weight:var( --e-global-typography-bb3f545-font-weight );letter-spacing:var( --e-global-typography-bb3f545-letter-spacing );color:var( --e-global-color-659b78c );}.elementor-6039 .elementor-element.elementor-element-978808e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:100px 100px;--row-gap:100px;--column-gap:100px;--overlay-opacity:0.9;--overlay-mix-blend-mode:screen;--padding-top:100px;--padding-bottom:100px;--padding-left:50px;--padding-right:50px;}.elementor-6039 .elementor-element.elementor-element-978808e:not(.elementor-motion-effects-element-type-background), .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://civilwood.nl/wp-content/uploads/2025/06/painted-canvas-brown-grungy-background-texture-2025-03-10-16-17-33-utc-1.webp");background-position:center center;background-repeat:repeat-y;background-size:cover;}.elementor-6039 .elementor-element.elementor-element-978808e::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-659b78c );background-image:url("https://civilwood.nl/wp-content/uploads/2025/07/BG-overlay2.webp");--background-overlay:'';background-position:center center;background-repeat:repeat-y;background-size:cover;}.elementor-6039 .elementor-element.elementor-element-f5a6b21{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:45px 45px;--row-gap:45px;--column-gap:45px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-abfdab8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-0cde170{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-6039 .elementor-element.elementor-element-6f65cff{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-6039 .elementor-element.elementor-element-7c4c981{--grid-columns:3;--grid-row-gap:30px;--grid-column-gap:30px;}.elementor-6039 .elementor-element.elementor-element-4d7732c.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-6039 .elementor-element.elementor-element-0cde170{--width:90%;}}@media(max-width:1024px){.elementor-6039 .elementor-element.elementor-element-155c094 .elementor-heading-title{font-size:var( --e-global-typography-bb3f545-font-size );letter-spacing:var( --e-global-typography-bb3f545-letter-spacing );}.elementor-6039 .elementor-element.elementor-element-abfdab8{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-6039 .elementor-element.elementor-element-7c4c981{--grid-columns:2;}}@media(max-width:767px){.elementor-6039 .elementor-element.elementor-element-dfc8401{--padding-top:200px;--padding-bottom:50px;--padding-left:25px;--padding-right:25px;}.elementor-6039 .elementor-element.elementor-element-155c094 .elementor-heading-title{font-size:var( --e-global-typography-bb3f545-font-size );letter-spacing:var( --e-global-typography-bb3f545-letter-spacing );}.elementor-6039 .elementor-element.elementor-element-978808e::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://civilwood.nl/wp-content/uploads/2025/07/placeholder.png");}.elementor-6039 .elementor-element.elementor-element-978808e{--padding-top:50px;--padding-bottom:50px;--padding-left:25px;--padding-right:25px;}.elementor-6039 .elementor-element.elementor-element-abfdab8{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-6039 .elementor-element.elementor-element-6f65cff{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-6039 .elementor-element.elementor-element-7c4c981{--grid-columns:1;}}@media(max-width:1024px) and (min-width:768px){.elementor-6039 .elementor-element.elementor-element-abfdab8{--width:100%;}}@media(min-width:1025px){.elementor-6039 .elementor-element.elementor-element-978808e::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-video-container::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .e-con-inner > .elementor-background-slideshow::before, .elementor-6039 .elementor-element.elementor-element-978808e > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-abfdab8 *//* ======================================================
MOBIEL: filters als accordeon + subtiele "Filteren op" knop
+ Font Awesome sliders icon styling
Target: .elementor-element-abfdab8 (jouw filter-container)
========================================================= */

@media (max-width: 768px){

  /* Maak de sticky/fixed sidebar op mobiel weer normaal */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters,
  .ws-mobile-filters{
    position: relative !important;
    top: auto !important;
    inset-inline-start: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 20 !important;
  }

  /* Subtiele container-styling (cardje) */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion,
  .ws-mobile-filters.ws-mobile-accordion{
    background: var(--ws-surface);
    border: 1px solid var(--ws-border);
    border-radius: 14px;
    padding: 10px;
  }

  /* Panel (de filters) inklappen/uitklappen */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-panel,
  .ws-mobile-filters .ws-mobile-filters-panel{
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.is-open .ws-mobile-filters-panel,
  .ws-mobile-filters.is-open .ws-mobile-filters-panel{
    max-height: 80vh; /* genoeg voor alle filters */
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-panel-inner,
  .ws-mobile-filters .ws-mobile-filters-panel-inner{
    padding-top: 10px;
  }

  /* Divider iets subtieler op mobiel */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .elementor-divider-separator,
  .ws-mobile-filters .elementor-divider-separator{
    opacity: .5;
  }

  /* ======================================================
  Subtielere "Filteren op" knop
  ====================================================== */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle,
  .ws-mobile-filters .ws-mobile-filters-toggle{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid var(--ws-border);
    background: transparent;
    border-radius: 12px;

    padding: 8px 10px;
    font-family: var(--ws-filter-font-family);
    font-size: 13px;
    color: #6B7280; /* subtiel grijs */
    font-weight: 500;

    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:hover,
  .ws-mobile-filters .ws-mobile-filters-toggle:hover{
    background: var(--brand-beige-50);
    border-color: var(--ws-border-strong);
    color: var(--ws-filter-text-color);
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:focus,
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:active,
  .ws-mobile-filters .ws-mobile-filters-toggle:focus,
  .ws-mobile-filters .ws-mobile-filters-toggle:active{
    outline: none;
    box-shadow: none;
  }

  /* Linker cluster: FA icon + tekst */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-left,
  .ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-left{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa,
  .ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid var(--ws-border);
    background: var(--brand-beige-50);
    color: var(--brand-bruin-2);
    flex: 0 0 auto;
  }

  /* Zorg dat icon netjes centreert */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa i,
  .ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa i{
    font-size: 14px;
    line-height: 1;
  }

  /* Rechter chevron (subtiel) */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-chevron,
  .ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-chevron{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #9CA3AF;
    transition: transform .2s ease, color .15s ease;
    flex: 0 0 auto;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle[aria-expanded="true"] .ws-toggle-chevron,
  .ws-mobile-filters .ws-mobile-filters-toggle[aria-expanded="true"] .ws-toggle-chevron{
    transform: rotate(180deg);
    color: var(--brand-bruin-2);
  }
}

/* ======================================================
FORCE override: Filteren op knop NIET bruin + kleiner
(zet dit helemaal onderaan je CSS)
========================================================= */
@media (max-width: 768px){

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle,
  .ws-mobile-filters .ws-mobile-filters-toggle{
    -webkit-appearance: none !important;
    appearance: none !important;

    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    border: 1px solid var(--ws-border) !important;
    border-radius: 12px !important;

    padding: 8px 10px !important;
    min-height: auto !important;
    height: auto !important;

    font-family: var(--ws-filter-font-family) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    color: #6B7280 !important;

    text-transform: none !important;
    letter-spacing: normal !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:hover,
  .ws-mobile-filters .ws-mobile-filters-toggle:hover{
    background: var(--brand-beige-50) !important;
    border-color: var(--ws-border-strong) !important;
    color: var(--ws-filter-text-color) !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:focus,
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle:active,
  .ws-mobile-filters .ws-mobile-filters-toggle:focus,
  .ws-mobile-filters .ws-mobile-filters-toggle:active{
    outline: none !important;
    box-shadow: none !important;
  }

  /* Het FA-icoon blokje ook subtiel houden */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa,
  .ws-mobile-filters .ws-mobile-filters-toggle .ws-toggle-fa{
    background: var(--brand-beige-50) !important;
    border: 1px solid var(--ws-border) !important;
    color: var(--brand-bruin-2) !important;
    width: 28px !important;
    height: 28px !important;
  }
}

@media (max-width: 768px){
  /* Font Awesome sliders unicode */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-fa-sliders::before,
  .ws-mobile-filters .ws-fa-sliders::before{
    content: "\f1de";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900; /* Solid */
    font-style: normal;
    speak: never;
    display: inline-block;
    line-height: 1;
  }
}

@media (max-width: 768px){

  /* Geen extra ruimte wanneer dicht */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-toggle,
  .ws-mobile-filters .ws-mobile-filters-toggle{
    margin: 0 !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-panel,
  .ws-mobile-filters .ws-mobile-filters-panel{
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-panel-inner,
  .ws-mobile-filters .ws-mobile-filters-panel-inner{
    padding-top: 0 !important;
  }

  /* Alleen ruimte toevoegen wanneer open */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.is-open .ws-mobile-filters-panel-inner,
  .ws-mobile-filters.is-open .ws-mobile-filters-panel-inner{
    padding-top: 10px !important;
  }
}

@media (max-width: 768px){

  /* 1) Elementor flex-gap uitzetten op de accordion container */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion,
  .ws-mobile-filters.ws-mobile-accordion{
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  /* 2) Geen "tussenruimte" wanneer dicht */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel,
  .ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel{
    margin-top: 0 !important;
  }

  /* 3) Alleen wanneer open wat ademruimte */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion.is-open .ws-mobile-filters-panel,
  .ws-mobile-filters.ws-mobile-accordion.is-open .ws-mobile-filters-panel{
    margin-top: 10px !important;
  }
}

@media (max-width: 768px){
  /* Inhoud accordeon: 10px padding links/rechts */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel-inner,
  .ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel-inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion.is-open .ws-mobile-filters-panel-inner,
  .ws-mobile-filters.ws-mobile-accordion.is-open .ws-mobile-filters-panel-inner{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media (max-width: 768px){
  /* Ruimte tussen de filter-widgets binnen de accordeon */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel-inner,
  .ws-mobile-filters.ws-mobile-accordion .ws-mobile-filters-panel-inner{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 768px) {
  /* Zodra de accordeon open is, moet de overflow zichtbaar zijn voor de dropdowns */
  .elementor-element.elementor-element-abfdab8.ws-mobile-filters.is-open .ws-mobile-filters-panel,
  .ws-mobile-filters.is-open .ws-mobile-filters-panel{
    overflow: visible !important;
  }

  .elementor-element.elementor-element-abfdab8.ws-mobile-filters .ws-mobile-filters-panel-inner,
  .ws-mobile-filters .ws-mobile-filters-panel-inner{
    overflow: visible !important;
  }

  .ws-wc-filter-options{
    z-index: 9999 !important;
  }
}

/* ======================================================
WS WooCommerce Filter Builder — Global Skin (Civil Wood)
========================================================= */

/* 1. Root variables — Civil Wood huisstijl */
:root {
    /* ======================================================
    Global brand palette — exacte kleuren uit stijlgids
    ====================================================== */
    --brand-bruin:        #5B4C41;          /* Bruin (donker) */
    --brand-bruin-2:      #855E38;          /* Bruin 2 (medium, primaire actie) */
    --brand-bruin-hover:  #956A3E;          /* Bruin 2 Hover */
    --brand-beige:        #B8A18A;          /* Beige */
    --brand-white:        #FFFFFF;          /* Wit */
    --brand-zwart:        #1D1C1A;          /* Zwart */
    --brand-lijn:         rgba(29,28,26,.25); /* Lijn Kleur (#1D1C1A40) */

    /* Afgeleide surfaces */
    --brand-beige-50:     #F7F4F0;          /* zeer licht beige — hover achtergrond */
    --brand-beige-100:    #EDE5DA;          /* licht beige — actieve surface */

    /* ======================================================
    Filter skin tokens (mapped to Civil Wood palette)
    ====================================================== */

    /* Typography */
    --ws-filter-font-family: "Rubik", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ws-filter-font-size: 14px;
    --ws-filter-text-color: var(--brand-zwart);
    --ws-filter-text-weight: 400;

    /* Surfaces & borders */
    --ws-surface: var(--brand-white);
    --ws-surface-warm: var(--brand-beige-50);
    --ws-surface-warm-2: var(--brand-beige-100);

    --ws-border: #D9CFC4;           /* warme beige rand */
    --ws-border-strong: #C4B7A8;    /* iets zwaarder */

    /* Interaction — Bruin 2 als primaire actie-kleur */
    --ws-action: var(--brand-bruin-2);
    --ws-action-contrast: #FFFFFF;

    /* Hover states — licht beige bg + bruin 2 tekst */
    --ws-hover-bg: var(--brand-beige-100);
    --ws-hover-text: var(--brand-bruin-2);

    /* Label */
    --ws-filter-label-color: var(--ws-filter-text-color);
    --ws-filter-label-bg: transparent;
    --ws-filter-label-weight: 600;
    --ws-filter-label-font-size: 14px;
    --ws-filter-label-padding: 0;
    --ws-filter-label-radius: 0;
    --ws-filter-label-hover-bg: transparent;

    /* Wrapper & spacing */
    --ws-filter-gap-between-filters-row: 10px;
    --ws-filter-gap-between-filters-col: 12px;
    --ws-filter-gap-between-pills: 10px;
    --ws-filter-checkbox-gap-row: 10px;
    --ws-filter-checkbox-gap-col: 14px;

    /* Dropdown field width */
    --ws-filter-input-min-width: 220px;

    /* Pills */
    --ws-filter-pill-bg: var(--ws-surface);
    --ws-filter-pill-bg-hover: var(--ws-hover-bg);
    --ws-filter-pill-bg-active: var(--ws-action);
    --ws-filter-pill-border: 1px solid var(--ws-border);
    --ws-filter-pill-border-active: 1px solid var(--ws-action);
    --ws-filter-pill-text: var(--ws-filter-text-color);
    --ws-filter-pill-text-hover: var(--ws-hover-text);
    --ws-filter-pill-text-active: var(--ws-action-contrast);
    --ws-filter-pill-radius: 12px;
    --ws-filter-pill-padding: 10px 14px;
    --ws-filter-pill-font-size: 14px;

    /* Dropdown (custom select) */
    --ws-filter-dropdown-bg: var(--ws-surface);
    --ws-filter-dropdown-border: 1px solid var(--ws-border);
    --ws-filter-dropdown-radius: 12px;
    --ws-filter-dropdown-padding: 10px 14px;
    --ws-filter-dropdown-font-size: 14px;
    --ws-filter-dropdown-text-color: var(--ws-filter-text-color);
    --ws-filter-dropdown-text-hover: var(--ws-hover-text);
    --ws-filter-dropdown-text-active: var(--ws-action-contrast);
    --ws-filter-dropdown-hover-bg: var(--ws-hover-bg);
    --ws-filter-dropdown-panel-bg: var(--ws-surface);
    --ws-filter-dropdown-panel-border: var(--ws-border);
    --ws-filter-dropdown-caret-color: var(--ws-filter-text-color);

    /* Price slider inputs */
    --ws-filter-price-input-width: 86px;
    --ws-filter-price-input-padding: 10px 12px;
    --ws-filter-price-input-font-size: 14px;
    --ws-filter-price-input-text-color: var(--ws-filter-text-color);
    --ws-filter-input-border-radius: 12px;
    --ws-filter-input-border: 1px solid var(--ws-border);
    --ws-filter-input-bg: var(--ws-surface);

    /* Price slider track & thumb */
    --ws-filter-slider-track-color: var(--ws-action);
    --ws-filter-slider-track-height: 3px;
    --ws-filter-slider-thumb-color: var(--ws-action);
    --ws-filter-slider-thumb-size: 14px;
    --ws-filter-slider-thumb-margin-top: -6px;
    --ws-filter-slider-wrapper-width: 120px;

    /* Reset icon / per-filter reset button */
    --ws-filter-reset-icon-size: 20px;
    --ws-filter-reset-icon-color: #8A93A0;
    --ws-filter-reset-icon-color-hover: var(--brand-bruin-2);
    --ws-filter-reset-btn-bg: transparent;
    --ws-filter-reset-btn-bg-hover: transparent;
    --ws-filter-reset-btn-radius: 12px;
    --ws-filter-reset-btn-padding: 0;

    /* Reset All button — SUBTIELER + KLEINER */
    --ws-filter-reset-all-bg: transparent;
    --ws-filter-reset-all-bg-hover: var(--brand-beige-50);
    --ws-filter-reset-all-color: #6B7280;
    --ws-filter-reset-all-color-hover: var(--brand-bruin-2);
    --ws-filter-reset-all-border: 1px solid var(--ws-border);
    --ws-filter-reset-all-radius: 12px;
    --ws-filter-reset-all-padding: 7px 12px;
    --ws-filter-reset-all-weight: 500;

    /* Checkboxes */
    --ws-filter-checkbox-size: 18px;
    --ws-filter-checkbox-color: var(--ws-action);
    --ws-filter-checkbox-border-color: var(--ws-border-strong);
    --ws-filter-checkbox-bg: var(--ws-surface);
    --ws-filter-checkbox-hover-bg: var(--ws-hover-bg);
    --ws-filter-checkbox-check-color: var(--ws-action-contrast);

    /* Sort / filter shared label spacing */
    --ws-filter-header-gap: 8px;
}

/* ======================================================
Z-index Fix voor Dropdowns
========================================================= */
.ws-wc-filter-wrapper {
    position: relative;
    z-index: 1;
}

.ws-wc-filter-wrapper:focus-within,
.ws-wc-filter-wrapper:hover,
.ws-wc-filter-wrapper.is-open {
    z-index: 100;
}

.ws-custom-select-panel {
    z-index: 999 !important;
}

/* ======================================================
2. Base layout & typography (filters)
========================================================= */
.ws-wc-filters-skin.ws-wc-filter-wrapper {
    margin-bottom: var(--ws-filter-wrapper-margin-bottom);
    font-family: var(--ws-filter-font-family);
    font-size: var(--ws-filter-font-size);
    color: var(--ws-filter-text-color);
    font-weight: var(--ws-filter-text-weight);
    width: 100% !important;
    flex: 0 0 100% !important;
    contain: layout style !important;
}

.ws-wc-sort-wrapper {
    font-family: var(--ws-filter-font-family);
    font-size: var(--ws-filter-font-size);
    color: var(--ws-filter-text-color);
    font-weight: var(--ws-filter-text-weight);
}

.ws-wc-filters-skin .ws-wc-filter-form,
.ws-wc-sort-wrapper .ws-wc-sort-form.ws-wc-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-filter-gap-between-filters-row) var(--ws-filter-gap-between-filters-col);
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
}

/* 3. Header (Label + Reset) */
.ws-wc-filters-skin .ws-wc-filter-header {
    display: inline-flex;
    align-items: center;
    gap: var(--ws-filter-header-gap);
}

.ws-wc-filters-skin .ws-wc-filter-label,
.ws-wc-sort-wrapper .ws-wc-filter-label {
    font-weight: var(--ws-filter-label-weight);
    font-size: var(--ws-filter-label-font-size);
    color: var(--ws-filter-label-color);
    background: var(--ws-filter-label-bg);
    padding: var(--ws-filter-label-padding);
    border-radius: var(--ws-filter-label-radius);
    margin-right: 0;
}

.ws-wc-filters-skin .ws-wc-filter-label:hover,
.ws-wc-sort-wrapper .ws-wc-filter-label:hover {
    background: var(--ws-filter-label-hover-bg);
}

/* 4. Generic text input */
.ws-wc-filters-skin .ws-wc-filter-control input[type="text"],
.ws-wc-filters-skin .ws-wc-filter-control input[type="number"] {
    min-width: var(--ws-filter-input-min-width);
    padding: var(--ws-filter-price-input-padding);
    border-radius: var(--ws-filter-input-border-radius);
    border: var(--ws-filter-input-border) !important;
    background: var(--ws-filter-input-bg);
    color: var(--ws-filter-price-input-text-color);
    font-weight: var(--ws-filter-text-weight);
    transition: border-color 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-control input[type="text"]:focus,
.ws-wc-filters-skin .ws-wc-filter-control input[type="number"]:focus {
    outline: none;
    border-color: var(--ws-action) !important;
    box-shadow: none;
}

/* 5. Checkbox groups */
.ws-wc-filters-skin .ws-wc-filter-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ws-filter-checkbox-gap-row) var(--ws-filter-checkbox-gap-col);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: var(--ws-filter-text-weight);
    color: var(--ws-filter-text-color);
    transition: color 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox:hover {
    color: var(--brand-bruin-2);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"] {
    width: var(--ws-filter-checkbox-size);
    height: var(--ws-filter-checkbox-size);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--ws-filter-checkbox-bg);
    border-radius: 4px;
    border: 1px solid var(--ws-filter-checkbox-border-color) !important;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg) scale(0);
    transform-origin: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:checked {
    background-color: var(--ws-filter-checkbox-color);
    border-color: var(--ws-filter-checkbox-color) !important;
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:checked::before {
    border-right-color: var(--ws-filter-checkbox-check-color);
    border-bottom-color: var(--ws-filter-checkbox-check-color);
    transform: rotate(45deg) scale(1);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:hover {
    background-color: var(--ws-filter-checkbox-hover-bg);
    border-color: var(--brand-bruin-2);
}

.ws-wc-filters-skin .ws-wc-filter-checkbox input[type="checkbox"]:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--ws-action) !important;
}

/* 6. Reset button */
.ws-wc-filters-skin .ws-wc-filter-reset {
    border: none;
    background: var(--ws-filter-reset-btn-bg);
    padding: var(--ws-filter-reset-btn-padding);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ws-filter-reset-btn-radius);
}

.ws-wc-filters-skin .ws-wc-filter-reset:focus,
.ws-wc-filters-skin .ws-wc-filter-reset:active {
    outline: none;
    box-shadow: none;
    background: var(--ws-filter-reset-btn-bg);
}

.ws-wc-filters-skin .ws-wc-filter-reset span[aria-hidden="true"] {
    font-size: var(--ws-filter-reset-icon-size);
    color: var(--ws-filter-reset-icon-color);
    transition: color 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-reset:hover {
    background: var(--ws-filter-reset-btn-bg-hover);
}

.ws-wc-filters-skin .ws-wc-filter-reset:hover span[aria-hidden="true"] {
    color: var(--ws-filter-reset-icon-color-hover);
}

.ws-wc-filters-skin .ws-wc-sr-only {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* 7. Custom single-select dropdown */
.ws-wc-filters-skin .ws-custom-select,
.ws-wc-sort-wrapper .ws-custom-select {
    position: relative;
    min-width: var(--ws-filter-input-min-width);
}

.ws-wc-filters-skin .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select-toggle {
    width: 100%;
    padding: var(--ws-filter-dropdown-padding);
    border-radius: var(--ws-filter-dropdown-radius);
    border: var(--ws-filter-dropdown-border);
    background: var(--ws-filter-dropdown-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: var(--ws-filter-dropdown-font-size);
    color: var(--ws-filter-dropdown-text-color);
    font-weight: 500;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Hover state — licht beige bg + bruin 2 tekst */
.ws-wc-filters-skin .ws-custom-select-toggle:hover,
.ws-wc-sort-wrapper .ws-custom-select-toggle:hover {
    background-color: var(--ws-hover-bg) !important;
    color: var(--brand-bruin-2);
    border-color: var(--brand-bruin-2);
}

.ws-wc-filters-skin .ws-custom-select-toggle:hover .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select-toggle:hover .ws-custom-select-caret {
    color: var(--brand-bruin-2);
}

/* Active state */
.ws-wc-filters-skin .ws-custom-select-toggle:active,
.ws-wc-sort-wrapper .ws-custom-select-toggle:active {
    background-color: var(--ws-hover-bg) !important;
    color: var(--brand-bruin-2);
    border-color: var(--brand-bruin-2);
}

/* Focus / open state */
.ws-wc-filters-skin .ws-custom-select-toggle:focus,
.ws-wc-filters-skin .ws-custom-select:focus-within .ws-custom-select-toggle,
.ws-wc-filters-skin .ws-custom-select.is-open .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select-toggle:focus,
.ws-wc-sort-wrapper .ws-custom-select:focus-within .ws-custom-select-toggle,
.ws-wc-sort-wrapper .ws-custom-select.is-open .ws-custom-select-toggle {
    outline: none;
    background-color: var(--ws-surface) !important;
    color: var(--ws-filter-text-color);
    border-color: var(--brand-bruin-2) !important;
    box-shadow: none;
}

.ws-wc-filters-skin .ws-custom-select-toggle:active .ws-custom-select-caret,
.ws-wc-filters-skin .ws-custom-select-toggle:focus .ws-custom-select-caret,
.ws-wc-filters-skin .ws-custom-select.is-open .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select-toggle:active .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select-toggle:focus .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select.is-open .ws-custom-select-caret {
    color: var(--brand-bruin-2);
}

.ws-wc-filters-skin .ws-custom-select-label,
.ws-wc-sort-wrapper .ws-custom-select-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-wc-filters-skin .ws-custom-select-caret,
.ws-wc-sort-wrapper .ws-custom-select-caret {
    margin-left: 0.5rem;
    color: var(--ws-filter-dropdown-caret-color);
    transition: color 0.15s ease;
}

.ws-wc-filters-skin .ws-custom-select-panel,
.ws-wc-sort-wrapper .ws-custom-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 99;
    min-width: 100%;
    max-height: 220px;
    overflow: auto;
    background: var(--ws-filter-dropdown-panel-bg);
    border: 1px solid var(--ws-filter-dropdown-panel-border);
    border-radius: var(--ws-filter-dropdown-radius);
    padding: 0.8rem;
    display: none;
    box-shadow: 0 10px 26px rgba(29, 28, 26, 0.10);
}

.ws-wc-filters-skin .ws-custom-select-option,
.ws-wc-sort-wrapper .ws-custom-select-option {
    width: 100%;
    padding: 0.45rem 0.8rem;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: var(--ws-filter-dropdown-font-size);
    color: var(--ws-filter-dropdown-text-color);
    font-weight: var(--ws-filter-text-weight);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ws-wc-filters-skin .ws-custom-select-option:hover,
.ws-wc-sort-wrapper .ws-custom-select-option:hover {
    background: var(--ws-filter-dropdown-hover-bg);
    color: var(--ws-filter-dropdown-text-hover);
}

.ws-wc-filters-skin .ws-custom-select.is-open .ws-custom-select-panel,
.ws-wc-sort-wrapper .ws-custom-select.is-open .ws-custom-select-panel {
    display: block;
}

/* 8. Multiselect as inline chips (pills) */
.ws-wc-filters-skin .ws-wc-filter-multiselect-inline {
    display: flex;
    flex-wrap: wrap !important;
    gap: var(--ws-filter-gap-between-pills);
    min-width: var(--ws-filter-input-min-width);
    flex-direction: row !important;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--ws-filter-pill-radius);
    border: var(--ws-filter-pill-border);
    background: var(--ws-filter-pill-bg);
    padding: var(--ws-filter-pill-padding);
    font-size: var(--ws-filter-pill-font-size);
    color: var(--ws-filter-pill-text);
    font-weight: 500;
    max-width: fit-content !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:hover {
    background: var(--ws-filter-pill-bg-hover);
    border-color: var(--brand-bruin-2);
    color: var(--ws-filter-pill-text-hover);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option.is-active {
    background: var(--ws-filter-pill-bg-active);
    border-color: var(--ws-filter-pill-border-active);
    color: var(--ws-filter-pill-text-active);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option:active,
.ws-wc-filters-skin .ws-wc-filter-multiselect-option:focus {
    background: var(--ws-filter-pill-bg-hover);
    border-color: var(--brand-bruin-2);
    color: var(--ws-filter-pill-text-hover);
    outline: none;
    box-shadow: none;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option.is-active:focus {
    background: var(--ws-filter-pill-bg-active);
    border-color: var(--ws-filter-pill-border-active);
    color: var(--ws-filter-pill-text-active);
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option input[type="checkbox"],
.ws-wc-filters-skin .ws-wc-filter-multiselect-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ws-wc-filters-skin .ws-wc-filter-multiselect-option span {
    white-space: nowrap;
    color: inherit;
}

/* 9. Price range layout */
.ws-wc-filters-skin .ws-price-range-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 260px;
}

.ws-wc-filters-skin .ws-price-range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.ws-wc-filters-skin .ws-price-range-input {
    width: var(--ws-filter-price-input-width) !important;
    min-width: var(--ws-filter-price-input-width) !important;
    max-width: var(--ws-filter-price-input-width) !important;
    flex: 0 0 var(--ws-filter-price-input-width) !important;
    padding: var(--ws-filter-price-input-padding) !important;
    border-radius: var(--ws-filter-input-border-radius);
    border: var(--ws-filter-input-border) !important;
    font-size: var(--ws-filter-price-input-font-size) !important;
    color: var(--ws-filter-price-input-text-color);
    text-align: center !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

.ws-wc-filters-skin .ws-price-range-input:focus {
    outline: none;
    border-color: var(--ws-action) !important;
    box-shadow: none;
}

.ws-wc-filters-skin .ws-price-range-separator {
    font-size: 1rem;
    display: none;
}

/* Slider wrapper */
.ws-wc-filters-skin .ws-price-range-slider-wrapper {
    position: relative;
    flex: 0 0 var(--ws-filter-slider-wrapper-width);
    width: var(--ws-filter-slider-wrapper-width);
    min-width: var(--ws-filter-slider-wrapper-width);
    height: 30px;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 1;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range.ws-price-range-max {
    z-index: 2;
}

/* WebKit track & thumb */
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-runnable-track {
    height: var(--ws-filter-slider-track-height);
    background-color: var(--ws-filter-slider-track-color) !important;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ws-filter-slider-thumb-size);
    height: var(--ws-filter-slider-thumb-size);
    border-radius: 50%;
    background-color: var(--ws-filter-slider-thumb-color) !important;
    pointer-events: auto;
    margin-top: var(--ws-filter-slider-thumb-margin-top) !important;
    position: relative;
    transition: background-color 0.15s ease;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-thumb:hover {
    background-color: var(--ws-action) !important;
}

/* Firefox track & thumb */
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-moz-range-track {
    height: var(--ws-filter-slider-track-height);
    background-color: var(--ws-filter-slider-track-color) !important;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-moz-range-thumb {
    width: var(--ws-filter-slider-thumb-size);
    height: var(--ws-filter-slider-thumb-size);
    border-radius: 50%;
    background-color: var(--ws-filter-slider-thumb-color) !important;
    margin-top: 0 !important;
    position: relative;
    transition: background-color 0.15s ease;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-moz-range-thumb:hover {
    background-color: var(--ws-action) !important;
}

/* 10. Orientation handling (desktop) */
@media (min-width: 769px) {
    .ws-wc-filters-skin[data-desktop-orientation="horizontal"] .ws-wc-filter-form {
        flex-direction: row;
        align-items: center;
    }
    .ws-wc-filters-skin[data-desktop-orientation="horizontal"] .ws-wc-filter-control,
    .ws-wc-filters-skin[data-desktop-orientation="horizontal"] .ws-wc-filter-checkbox-group {
        flex-direction: row;
    }

    .ws-wc-filters-skin[data-desktop-orientation="vertical"] .ws-wc-filter-form {
        flex-direction: column;
        align-items: flex-start;
    }
    .ws-wc-filters-skin[data-desktop-orientation="vertical"] .ws-wc-filter-label {
        margin-right: 0;
        margin-bottom: 0.35rem;
    }
    .ws-wc-filters-skin[data-desktop-orientation="vertical"] .ws-wc-filter-control,
    .ws-wc-filters-skin[data-desktop-orientation="vertical"] .ws-wc-filter-checkbox-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 11. Orientation handling (mobile) */
@media (max-width: 768px) {
    .ws-wc-filters-skin[data-mobile-orientation="horizontal"] .ws-wc-filter-form {
        flex-direction: row;
        align-items: center;
    }
    .ws-wc-filters-skin[data-mobile-orientation="horizontal"] .ws-wc-filter-control,
    .ws-wc-filters-skin[data-mobile-orientation="horizontal"] .ws-wc-filter-checkbox-group {
        flex-direction: row;
    }

    .ws-wc-filters-skin[data-mobile-orientation="vertical"] .ws-wc-filter-form {
        flex-direction: column;
        align-items: flex-start;
    }
    .ws-wc-filters-skin[data-mobile-orientation="vertical"] .ws-wc-filter-label {
        margin-right: 0;
        margin-bottom: 0.35rem;
    }
    .ws-wc-filters-skin[data-mobile-orientation="vertical"] .ws-wc-filter-control,
    .ws-wc-filters-skin[data-mobile-orientation="vertical"] .ws-wc-filter-checkbox-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 12. Reset All button */
.ws-wc-filter-reset-all {
    padding: var(--ws-filter-reset-all-padding) !important;
    border-radius: var(--ws-filter-reset-all-radius) !important;
    border: var(--ws-filter-reset-all-border) !important;
    background: var(--ws-filter-reset-all-bg) !important;
    color: var(--ws-filter-reset-all-color) !important;
    font-family: var(--ws-filter-font-family);
    font-size: 13px !important;
    font-weight: var(--ws-filter-reset-all-weight);
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ws-wc-filter-reset-all:hover {
    background: var(--ws-filter-reset-all-bg-hover) !important;
    color: var(--ws-filter-reset-all-color-hover) !important;
    border-color: var(--ws-border-strong) !important;
}

.ws-wc-filter-reset-all:focus,
.ws-wc-filter-reset-all:active {
    outline: none !important;
    box-shadow: none !important;
    background: var(--ws-filter-reset-all-bg-hover) !important;
    color: var(--ws-filter-reset-all-color-hover) !important;
    border-color: var(--ws-border-strong) !important;
}

.ws-wc-filter-reset-all:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Verberg pagination alleen als er filters actief zijn */
body.ws-filters-active nav.elementor-pagination,
body.ws-filters-active .elementor-pagination,
body.ws-filters-active .elementor-posts__pagination,
body.ws-filters-active [aria-label="Pagination"] {
    display: none !important;
}

/* ======================================================
Price range tweaks
========================================================= */

/* Track schaduw uit */
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-runnable-track{
  box-shadow: none !important;
  filter: none !important;
}
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-moz-range-track{
  box-shadow: none !important;
  filter: none !important;
}

/* Thumb groter (desktop/tablet) */
:root{
  --ws-filter-slider-thumb-size: 18px;
  --ws-filter-slider-thumb-margin-top: -8px;
}

.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-thumb{
  width: var(--ws-filter-slider-thumb-size) !important;
  height: var(--ws-filter-slider-thumb-size) !important;
  margin-top: var(--ws-filter-slider-thumb-margin-top) !important;
  box-shadow: none !important;
}
.ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-moz-range-thumb{
  width: var(--ws-filter-slider-thumb-size) !important;
  height: var(--ws-filter-slider-thumb-size) !important;
  box-shadow: none !important;
}

/* Mobiel: nog groter */
@media (max-width: 768px){
  :root{
    --ws-filter-slider-thumb-size: 24px;
    --ws-filter-slider-thumb-margin-top: -11px;
  }

  .ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range{
    box-shadow: none !important;
    filter: none !important;
  }

  .ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-runnable-track{
    box-shadow: none !important;
  }
  .ws-wc-filters-skin .ws-price-range-slider-wrapper .ws-price-range::-webkit-slider-thumb{
    box-shadow: none !important;
  }
}/* End custom CSS */