/* EK Filters 1.0.0: knopstijl 1-op-1 overgenomen van .searchandfilter .sf-label-radio (style.css) */
/* rijhoogte 56px zoals bij S&F (inline-block knop van 46px in regel van 28px) */
.ek-filter__row{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.ek-filter__row .ek-filter__btn{margin:5px 0}
.ek-filter__btn{-webkit-appearance:none;appearance:none;margin:0;font-family:inherit;display:inline-block;padding:16px 32px;border:1px solid #8c6f51;border-radius:2px;cursor:pointer;font-size:12px;font-weight:bold;line-height:1;text-transform:uppercase;letter-spacing:2.4px;background-color:transparent;color:#fff;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}
.ek-filter__btn:hover{background-color:rgba(255,255,255,0.25)}
.ek-filter__btn.is-active,.ek-filter__btn.is-active:hover{background-color:#BB9368;border-color:#BB9368}
.ek-filter__btn:focus{outline:none}
.ek-filter__btn:focus-visible{outline:1px solid #BB9368;outline-offset:2px}
.ek-filter__back{display:inline-flex;align-items:center;gap:12px}
.ek-filter__back-icon{display:block;width:22px;height:10px;color:#BB9368;flex:none;-webkit-transition:-webkit-transform 0.2s ease;transition:transform 0.2s ease}
.ek-filter__back:hover .ek-filter__back-icon,.ek-filter__back:focus-visible .ek-filter__back-icon{-webkit-transform:translateX(-3px);transform:translateX(-3px)}
.ek-filter [hidden]{display:none!important}
.ek-filter__sep{width:1px;height:46px;background-color:#8c6f51;margin:5px 8px}
.ek-filter__subs{display:flex;flex-wrap:wrap;gap:8px}
.ek-filter__status{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ek-filter__empty{color:#fff;margin:0}
.ek-filter__more{display:flex;justify-content:center;margin-top:56px}

/* items */
[data-ek-item].ek-off{display:none!important}
.loopcta[hidden]{display:none!important}
.projectitem.ek-img .default-image{display:none}
.projectitem .filter-image.ek-on{display:block}
.ek-in{-webkit-animation:ekIn 0.3s ease both;animation:ekIn 0.3s ease both}
@-webkit-keyframes ekIn{from{opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px)}to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes ekIn{from{opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px)}to{opacity:1;-webkit-transform:none;transform:none}}
.ek-filter__btn.ek-in{-webkit-animation-duration:0.2s;animation-duration:0.2s;-webkit-animation-name:ekInX;animation-name:ekInX}
.ek-filter__subs.ek-in,.ek-filter__sep.ek-in{-webkit-animation-name:ekInX;animation-name:ekInX}
@-webkit-keyframes ekInX{from{opacity:0;-webkit-transform:translateX(-8px);transform:translateX(-8px)}to{opacity:1;-webkit-transform:none;transform:none}}
@keyframes ekInX{from{opacity:0;-webkit-transform:translateX(-8px);transform:translateX(-8px)}to{opacity:1;-webkit-transform:none;transform:none}}
@media (prefers-reduced-motion:reduce){.ek-in{-webkit-animation:none!important;animation:none!important}}

/* mobiel: Terug + gekozen hoofdcategorie op regel 1, subs eronder (gewoon doorlopend, geen swipe) */
@media only screen and (max-width:800px){
  .ek-filter__sep{display:none!important}
  /* compacter: hoofdniveau ±37px hoog, subniveau ±31px en kleiner, zodat elk niveau op één rij past */
  .ek-filter__row{gap:6px}
  .ek-filter__row .ek-filter__btn{margin:0;padding:12px;font-size:11px;letter-spacing:1.5px}
  .ek-filter__subs{flex-basis:100%;gap:6px;margin-top:4px}
  .ek-filter__subs .ek-filter__btn{padding:10px 9px;font-size:10px;letter-spacing:0.8px}
  .ek-filter__back{gap:8px}
  .ek-filter__back-icon{width:18px;height:8px}
}
