.kw-mfilter { --kwf-ink: var(--wp--preset--color--kw-ink, #16323f); --kwf-soft: var(--wp--preset--color--kw-text-soft, #5b6b76); --kwf-accent: var(--wp--preset--color--primary, #0e5486); --kwf-border: #d8dfe5; --kwf-hover-bg: #eef3f6; --kwf-radius: 10px;
--kwf-h: 46px; margin-bottom: 36px;
} .kw-mfilter__row {
display: flex;
flex-wrap: nowrap;
gap: 10px;
align-items: center;
}
.kw-mfilter__selectwrap { flex: 0 0 auto; }
.kw-mfilter__search,
.kw-mfilter__select {
height: var(--kwf-h);
border: 1px solid var(--kwf-border);
border-radius: var(--kwf-radius);
background-color: #fff;
color: var(--kwf-ink);
font: inherit;
font-size: 0.95rem;
transition: border-color .15s ease, box-shadow .15s ease;
}
.kw-mfilter__search:hover,
.kw-mfilter__select:hover {
border-color: var(--kwf-soft);
}
.kw-mfilter__search:focus,
.kw-mfilter__select:focus {
outline: none;
border-color: var(--kwf-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kwf-accent) 15%, transparent);
} .kw-mfilter__search {
flex: 1 1 auto;
min-width: 160px;
padding: 0 16px 0 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b6b76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 14px center;
}
.kw-mfilter__search::placeholder { color: var(--kwf-soft); }
.kw-mfilter__search::-webkit-search-cancel-button { cursor: pointer; } .kw-mfilter__select {
appearance: none;
-webkit-appearance: none;
padding: 0 40px 0 14px;
cursor: pointer;
max-width: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316323f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
} .kw-mfilter__apply {
height: var(--kwf-h);
padding: 0 20px;
border: 1px solid var(--kwf-ink);
border-radius: var(--kwf-radius);
background: var(--kwf-ink);
color: #fff;
font: inherit;
font-size: 0.95rem;
cursor: pointer;
}
.kw-mfilter--js .kw-mfilter__apply { display: none; }
.kw-mfilter__reset {
display: inline-flex;
align-items: center;
height: var(--kwf-h);
padding: 0 4px;
color: var(--kwf-soft);
font-size: 0.92rem;
text-decoration: underline;
text-underline-offset: 3px;
transition: color .15s ease;
white-space: nowrap;
}
.kw-mfilter__reset:hover { color: var(--kwf-ink); } .kw-mfilter__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
border: 0;
padding: 0;
margin: 20px 0 0;
}
.kw-mfilter__legend {
width: 100%;
padding: 0;
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--kwf-soft);
}
.kw-pill { position: relative; }
.kw-pill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.kw-pill span {
display: inline-flex;
align-items: center;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--kwf-border);
background: #fff;
color: var(--kwf-ink);
font-size: 0.92rem;
font-weight: 500;
line-height: 1;
cursor: pointer;
user-select: none;
transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.kw-pill span:hover {
border-color: var(--kwf-ink);
background: var(--kwf-hover-bg);
}
.kw-pill input:checked + span {
background: var(--kwf-accent);
border-color: var(--kwf-accent);
color: #fff;
box-shadow: 0 2px 10px color-mix(in srgb, var(--kwf-accent) 30%, transparent);
} .kw-pill input:checked + span::before {
content: '';
width: 13px;
height: 13px;
margin-right: 8px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.kw-pill input:focus-visible + span {
outline: 2px solid var(--kwf-accent);
outline-offset: 2px;
} .kw-mfilter__status {
margin: 22px 0 0;
padding-top: 14px;
border-top: 1px solid var(--kwf-border);
font-size: 0.88rem;
color: var(--kwf-soft);
min-height: 1.4em;
} .wp-block-post-template > li[hidden] { display: none !important; }
.kw-mfilter__empty {
padding: 36px 0;
color: var(--kwf-soft);
} @media (max-width: 900px) {
.kw-mfilter__row { flex-wrap: wrap; }
.kw-mfilter__search { flex: 1 1 100%; }
.kw-mfilter__selectwrap { flex: 1 1 auto; }
.kw-mfilter__select { width: 100%; }
}
@media (max-width: 640px) {
.kw-mfilter__selectwrap { flex: 1 1 100%; }
}