.flt { color: var(--ink); font-size: var(--fs-2); }
.flt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.flt-head b { font-weight: 600; font-size: var(--fs-2); }
.flt-clear { border: 0; background: none; padding: 0; color: var(--accent); font-size: var(--fs-1); cursor: pointer; }
.flt-clear[disabled] { color: var(--ink3); cursor: default; opacity: .6; }
.flt-group h3 { margin: 0; font-size: var(--fs-1); font-weight: 600; color: var(--ink2); letter-spacing: .08em; }

.flt-ck { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink2); transition: color .15s, background-color .15s, border-color .15s; user-select: none; }
.flt-ck:hover, .flt-ck.on { color: var(--ink); }
.flt-ck input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; border: 1.5px solid var(--ink3); background: var(--field); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.flt-ck input:checked { background: var(--accent); border-color: var(--accent); }
.flt-ck input:checked::after { content: ""; width: 8px; height: 4px; border: 2px solid var(--on-ink, #fff); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.flt-ck input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.flt-ck .n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fs-1); color: var(--ink3); }
.flt-ck.zero { opacity: .5; }
.flt-mk { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; }
.flt-mk:empty { display: none; }
.flt--left .flt-mk:empty { display: inline-flex; }
.flt-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.flt-dot.stock { background: var(--accent); }
.flt-dot.dev { border: 1.5px solid var(--ink3); }

.flt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.flt-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--field); padding: 3px 8px 3px 10px; font-size: var(--fs-1); cursor: pointer; color: var(--ink); }
.flt-chip span { color: var(--ink3); }
.flt-chip:hover { border-color: var(--accent); }

.flt--left .flt-head { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.flt--left .flt-group { padding-top: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.flt--left .flt-group h3 { margin-bottom: 4px; }
.flt--left .flt-ck { min-height: 38px; }
.flt--left .flt-ck .n { margin-left: auto; }

.flt--top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 14px; padding-bottom: 14px; }
.flt--top .flt-head { order: 99; margin-left: auto; }
.flt--top .flt-head b { display: none; }
.flt--top .flt-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flt--top .flt-group h3 { margin-right: 4px; }
.flt--top .flt-group + .flt-group { padding-left: 28px; border-left: 1px solid var(--line); }
.flt--top .flt-ck { gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); background: var(--field); font-size: var(--fs-2); }
.flt--top .flt-ck.on { border-color: var(--accent); background: var(--field); }
.flt--top .flt-ck input { width: 14px; height: 14px; }
.flt--top .flt-ck input:checked::after { width: 7px; height: 3.5px; }

@media (max-width: 720px) {
  .flt--top { gap: 10px; }
  .flt--top .flt-group + .flt-group { padding-left: 0; border-left: 0; }
  .flt--top .flt-head { margin-left: 0; }
}

@media (max-width: 639px) { .flt-m .flt-head b { visibility: hidden; } }