.adv-filter{
display:flex;
flex-direction:column;
gap:var(--space-3);
}
.adv-filter__label{
font-size:var(--font-size-sm);
font-weight:var(--weight-semibold);
color:var(--color-ink);
}
.adv-filter__hint{
font-size:var(--font-size-sm);
color:var(--color-muted);
margin-top:calc(-1 * var(--space-1));
}

.adv-filter-range{
display:flex;
flex-direction:column;
gap:var(--space-3);
}
.adv-filter-range__row{
display:flex;
align-items:center;
gap:var(--space-3);
font-size:var(--font-size-sm);
color:var(--color-muted);
}
.adv-filter-range input[type="range"]{
width:100%;
accent-color:var(--color-primary);
}

.adv-filter-swatches{
display:flex;
flex-wrap:wrap;
gap:var(--space-2);
}
.adv-filter-swatch{
position:relative;
width:32px;
height:32px;
border-radius:var(--radius-circle);
border:2px solid var(--color-bg);
box-shadow:0 0 0 1px var(--color-line);
cursor:pointer;
transition:var(--transition-base);
}
.adv-filter-swatch:hover{
transform:scale(1.08);
box-shadow:0 0 0 1px var(--color-line-strong);
}
.adv-filter-swatch[aria-pressed="true"]{
box-shadow:0 0 0 2px var(--color-primary);
}
.adv-filter-swatch:focus-visible{
outline:2px solid var(--color-focus);
outline-offset:2px;
}

.adv-filter-sort{
display:flex;
align-items:center;
gap:var(--space-3);
font-size:var(--font-size-sm);
color:var(--color-muted);
}
.adv-filter-sort select{
font-size:var(--font-size-sm);
min-height:36px;
padding:.4em 2em .4em .65em;
}

.adv-filter-clear{
font-size:var(--font-size-sm);
color:var(--color-accent);
background:transparent;
border:0;
padding:0;
cursor:pointer;
}
.adv-filter-clear:hover{text-decoration:underline;text-underline-offset:3px}