
.mf-filter{--ink:#111;--mut:#5A5A57;--line:#E5E3DE;--acc:#00AEEF;--hover:#F2F0EB;font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--ink);margin:0 0 30px;}
.mf-filter *{box-sizing:border-box;}
.mf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mf-phead,.mf-pfoot,.mf-open,.mf-overlay,.mf-barcount{display:none;}
.mf-barcount{font-size:11px;color:var(--mut);}
/* CHIPS */
.mf-chips{display:flex;flex-wrap:wrap;gap:9px;}
.mf-filter .mf-chip{font:inherit;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--line)!important;background:#fff!important;color:var(--ink)!important;border-radius:999px;cursor:pointer;transition:.18s;white-space:nowrap;line-height:1;}
.mf-filter .mf-chip:hover{border-color:var(--ink)!important;}
.mf-filter .mf-chip.is-on{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;}
/* SELECTY */
.mf-selects{margin-left:auto;}
.mf-fields{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.mf-field{display:flex;align-items:center;gap:9px;}
.mf-lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.mf-dd{position:relative;}
.mf-filter .mf-dd-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-width:160px;font:inherit;font-size:13px;color:var(--ink)!important;background:#fff!important;padding:14px 16px;border:1px solid var(--line)!important;border-radius:4px;cursor:pointer;transition:.18s;line-height:1;}
.mf-filter .mf-dd-btn:hover{border-color:var(--ink)!important;}
.mf-dd.is-open .mf-dd-btn{border-color:var(--acc)!important;box-shadow:0 0 0 3px rgba(0,174,239,.12);}
.mf-dd-chev{flex:0 0 auto;transition:transform .2s;opacity:.6;}
.mf-dd.is-open .mf-dd-chev{transform:rotate(180deg);}
.mf-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.14);padding:6px;z-index:60;display:none;}
.mf-dd.is-open .mf-dd-menu{display:block;animation:mfpop .16s ease;}
@keyframes mfpop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.mf-dd-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--ink);padding:12px 14px;border:0;background:none;border-radius:5px;cursor:pointer;white-space:nowrap;transition:.12s;}
.mf-dd-menu button:hover{background:var(--hover);}
.mf-dd-menu button.is-sel{background:var(--ink);color:#fff;}
/* ===== ÚZKE OKNO (≤1620px): selecty -> off-canvas, chipy zostávajú vľavo ===== */
@media (max-width:1620px){
  .mf-open{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:inherit;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--ink)!important;background:var(--ink)!important;color:#fff!important;border-radius:999px;cursor:pointer;}
  .mf-open:hover{opacity:.9;}
  .mf-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:2147483646;}
  .mf-overlay.is-on{display:block;opacity:1;visibility:visible;}
  .mf-selects{position:fixed;top:0;right:0;height:100%;width:min(90vw,380px);margin:0;background:#fff;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1);z-index:2147483647;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,.18);display:flex;flex-direction:column;}
  .mf-selects.is-on{transform:translateX(0);}
  .mf-phead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em;text-transform:uppercase;}
  .mf-close{font:inherit;font-size:22px;line-height:1;width:34px;height:34px;border:0!important;background:none!important;cursor:pointer;color:var(--ink)!important;padding:0;}
  .mf-fields{flex-direction:column;align-items:stretch;gap:14px;padding:20px;}
  .mf-field{flex-direction:column;align-items:flex-start;gap:7px;}
  .mf-lbl{font-size:10px;}
  .mf-dd,.mf-dd-btn{width:100%;}
  .mf-filter .mf-dd-btn{font-size:13px;padding:13px 14px;}
  .mf-dd-menu button{font-size:13px;padding:11px 12px;}
  .mf-pfoot{display:flex;gap:10px;padding:18px 20px;margin-top:auto;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;}
  .mf-reset{flex:0 0 auto;font:inherit;font-size:11px;text-transform:uppercase;padding:14px 18px;border:1px solid var(--ink)!important;background:var(--ink)!important;color:#fff!important;border-radius:999px;cursor:pointer;}
  .mf-apply{flex:1;font:inherit;font-size:11px;text-transform:uppercase;padding:14px;border:0;background:var(--acc)!important;color:#fff!important;border-radius:999px;cursor:pointer;}
  .mf-selects .mf-chip{font-size:11px;padding:10px 16px;}
}
/* ===== MOBIL (≤768px): v lište len tlačidlo Filtre, chipy do off-canvasu ===== */
@media (max-width:1024px){
  .mf-bar{justify-content:space-between;}
  .mf-barcount{display:inline;}
  .mf-open{margin-left:0;}
  .mf-selects .mf-chips{display:flex;flex-wrap:wrap;gap:9px;padding:22px;border-bottom:1px solid var(--line);margin:0;}
}

