:root{
--ink:#111; --muted:#6b7280; --line:rgba(17,17,17,.10); --surface:#fff; --bg:#fafafa; --accent:#186CAB; --accent-hi:#186CAB; --radius:14px;
--radius-pill:999px;
--shadow:0 10px 30px rgba(0,0,0,.06);
} .kujundusstuudio-filter{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius);
padding:16px 16px 12px;
box-shadow:var(--shadow);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
overflow: auto;
} .kujundusstuudio-filter .mf-group{
margin:14px 0 10px;
border: 1px solid lightgray;
} .kujundusstuudio-filter legend{
margin:0 0 8px;
font-weight:700;
font-size:12.5px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--muted);
} .kujundusstuudio-filter .mf-group,
.kujundusstuudio-filter .mf-group .mf-scroll{
display:flex;
flex-wrap:wrap;
gap:8px;
} .kujundusstuudio-filter .mf-check{
position:relative;
display:inline-flex;
align-items:center;
margin:0;
padding:0;
} .kujundusstuudio-filter .mf-check input{
position:absolute; inset:0;
width:100%; height:100%;
opacity:0; cursor:pointer;
} .kujundusstuudio-filter .mf-check span{
display:inline-flex;
align-items:center;
gap:8px;
padding:.44em .86em;
font-size:14px;
color:var(--ink);
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius-pill);
transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
} .kujundusstuudio-filter .mf-check input:hover + span{
border-color:rgba(0,0,0,.22);
}
.kujundusstuudio-filter .mf-check input:focus-visible + span{ } .kujundusstuudio-filter .mf-check input:checked + span{
background:linear-gradient(180deg, #fff, #fff) padding-box,
linear-gradient(90deg, var(--accent), var(--accent-hi)) border-box;
border:1px solid transparent;
color:#111; } .kujundusstuudio-filter .mf-price{
display:flex; align-items:center; gap:8px; width:100%;
}
.kujundusstuudio-filter .mf-price input{
width:120px; max-width:40vw;
padding:10px 12px;
background:#fff;
border:1px solid var(--line);
border-radius:12px;
font:inherit;
transition:border-color .2s ease, box-shadow .2s ease;
}
.kujundusstuudio-filter .mf-price input:focus{
outline:none;
border-color:rgba(0,0,0,.22);
box-shadow:0 0 0 3px rgba(179,0,0,.12);
}
.kujundusstuudio-filter .mf-sep{ color:var(--muted) }  .kujundusstuudio-filter .mf-actions{
display:flex; gap:10px; margin-top:12px; display:none;
}
.kujundusstuudio-filter .mf-btn{
appearance:none; border-radius:14px;
padding:10px 14px; font-weight:700;
border:1px solid var(--line); background:#fff; color:var(--ink);
cursor:pointer; transition:box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease, transform .06s ease;
}
.kujundusstuudio-filter .mf-btn:active{ transform:translateY(1px); }
.kujundusstuudio-filter .mf-btn:hover{ border-color:rgba(0,0,0,.22); }
.kujundusstuudio-filter .mf-btn--apply{
background:linear-gradient(90deg, var(--accent), var(--accent-hi));
border-color:transparent; color:#fff;
box-shadow:0 10px 24px rgba(209,0,0,.18);
}
.kujundusstuudio-filter .mf-btn--apply:hover{
filter:saturate(1.05) brightness(1.02);
}
.kujundusstuudio-filter .mf-btn--reset{
background:#fff; color:var(--ink);
} .kujundusstuudio-filter__meta{
margin-top:10px; font-size:12.5px; color:var(--muted);
}  .mf-trigger{
display:inline-flex; align-items:center; gap:8px;
padding:10px 14px; border-radius:14px; border:0; cursor:pointer;
background:inherit;
color:#fff; font-weight:800; letter-spacing:.02em;
}
.mf-trigger .mf-badge{
background:inherit; color:inherit; font-weight:800; font-size:12px;
border-radius:999px; padding:3px 8px;
} @media (min-width:1000px){
.kujundusstuudio-filter{ display:none; }
.kujundusstuudio-filter.is-open{ display:block; margin-bottom:60px; } .mf-trigger{ position:static; margin:0 0 12px; }
} @media (max-width:1000px){
.mf-trigger{
position:fixed; z-index:100002; left:16px; right:16px; bottom:16px;
}
}
.mf-overlay{ display:none }
.mf-close{ display:none }
@media (max-width:1000px){
.mf-trigger{
position:fixed; z-index:100002; left:16px; right:16px; bottom:16px;
display:flex; justify-content:center; align-items:center; gap:8px;
padding:12px 14px; border-radius:14px; border:0; cursor:pointer;
background:linear-gradient(90deg, var(--accent), var(--accent-hi));
color:#fff; font-weight:800; letter-spacing:.02em;
}
.mf-trigger .mf-badge{
background:#fff; color:var(--accent); font-weight:800; font-size:12px;
border-radius:999px; padding:3px 8px;
}
.mf-overlay{
position:fixed; inset:0; z-index:100000;
background:rgba(0,0,0,.28); display:none;
backdrop-filter: blur(4px);
}
.mf-overlay.is-show{ display:block; }
.kujundusstuudio-filter{
position:fixed; z-index:100001; left:0; right:0; bottom:0;
height:76vh; max-height:86vh;
border-radius:16px 16px 0 0;
box-shadow:0 -18px 40px rgba(2,8,20,.28);
transform:translateY(104%); transition:transform .24s ease;
padding:18px 16px 14px; border:0;
}
.kujundusstuudio-filter.is-open{ transform:translateY(0) }
.kujundusstuudio-filter .mf-head{
display:flex; justify-content:space-between; align-items:center;
position:sticky; top:-18px; padding-top:10px; padding-bottom:10px;
background:linear-gradient(#fff 60%, rgba(255,255,255,.86));
border-bottom:1px solid var(--line); margin:-18px -16px 10px;
padding-left:16px; padding-right:8px;
z-index:9;
}
.kujundusstuudio-filter .mf-title{ font-weight:800; letter-spacing:.01em }
.kujundusstuudio-filter .mf-close{
display:inline-flex; align-items:center; justify-content:center;
border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 10px;
font-weight:700; cursor:pointer;
}
.kujundusstuudio-filter .mf-actions{
position:sticky; bottom:-14px; padding:10px 16px 16px;
background:linear-gradient(rgba(255,255,255,.86), #fff 42%);
}
} @media (min-width:1000px){
.kujundusstuudio-filter .mf-head, .kujundusstuudio-filter .mf-close{ display:none; }
} .kujundusstuudio-filter .mf-group.mf-y{ padding-bottom:8px; display:none; }
.kujundusstuudio-filter .mf-group.mf-y .mf-scroll{
max-height:280px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-right:6px;
}
@media (max-width:1000px){
.kujundusstuudio-filter .mf-group.mf-y .mf-scroll{ max-height:40dvh }
} .kujundusstuudio-filter .mf-group.mf-y .mf-scroll::-webkit-scrollbar{ width:8px }
.kujundusstuudio-filter .mf-group.mf-y .mf-scroll::-webkit-scrollbar-thumb{
background: rgba(16,24,40,.18);
border-radius:999px;
} .kujundusstuudio-filter.is-loading{ opacity:.75; pointer-events:none; }
.kujundusstuudio-filter.is-loading::after{
content:""; position:absolute; right:18px; top:18px; width:18px; height:18px;
border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent);
animation:mkspin .9s linear infinite;
}
@keyframes mkspin{ to{ transform:rotate(360deg) } } .woocommerce-result-count{ color:var(--muted) }