.dbf-filter {
    --dbf-primary: #59338d;
    --dbf-highlight: #ff0073;
    --dbf-range-start: 0%;
    --dbf-range-end: 100%;
    box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    padding: 30px 31px 39px;
    border-radius: 35px;
    background: #fff;
    box-shadow: 0 9px 24px rgb(41 25 72 / 9%);
    color: #101010;
    font-family: inherit;
}
.dbf-filter *, .dbf-filter *::before, .dbf-filter *::after { box-sizing: border-box; }
.dbf-filter__title {
    margin: 0 0 17px;
    font-size: clamp(23px, 3vw, 31px);
    line-height: 1.17;
    font-weight: 450;
    letter-spacing: -.7px;
    color: var(--dbf-primary);
}
.dbf-filter__title strong { color: var(--dbf-highlight); font-weight: 750; }
.dbf-filter__select-label { position: relative; display: block; margin-bottom: 16px; }
.dbf-filter__select-label::after {
    content: ''; position: absolute; right: 22px; top: 45%;
    width: 9px; height: 9px; border-right: 1px solid #344164;
    border-bottom: 1px solid #344164; transform: rotate(45deg); pointer-events: none;
}
.dbf-filter__select-label select {
    width: 100%; min-height: 66px; padding: 14px 40px 14px 30px;
    border: 1px solid #d1d1d1; border-radius: 17px;
    background: #fff; color: #101010;
    font-family: inherit; font-size: 15px; line-height: 1.4; font-weight: 600;
    appearance: none; cursor: pointer;
}
.dbf-filter__price {
    margin: 0 0 32px; padding: 19px 29px 18px;
    border: 1px solid #d2d2d2; border-radius: 17px; min-width: 0;
}
.dbf-filter__price-values { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.dbf-filter__price-values label { font-size: 13px; line-height: 1.6; white-space: nowrap; }
.dbf-filter__price-values strong { color: var(--dbf-highlight); font-weight: 700; }
.dbf-filter__price-values .woocommerce-Price-amount { color: inherit; font-weight: inherit; }
.dbf-filter__range { height: 23px; position: relative; margin: 7px 0 0; }
.dbf-filter__track, .dbf-filter__selected-track { position: absolute; top: 11px; height: 4px; border-radius: 6px; }
.dbf-filter__track { left: 0; right: 0; background: #d7d7d7; }
.dbf-filter__selected-track {
    left: var(--dbf-range-start); right: calc(100% - var(--dbf-range-end));
    background: var(--dbf-primary);
}
.dbf-filter__range input[type='range'] {
    position: absolute; top: 0; left: 0; width: 100%; height: 24px;
    margin: 0; padding: 0; border: 0;
    appearance: none; -webkit-appearance: none;
    background: transparent; cursor: pointer; pointer-events: none;
}
.dbf-filter__range input[type='range']::-webkit-slider-thumb {
    width: 19px; height: 19px; border: 0; border-radius: 50%;
    appearance: none; -webkit-appearance: none;
    background: var(--dbf-primary); pointer-events: auto; cursor: grab;
}
.dbf-filter__range input[type='range']::-moz-range-thumb {
    width: 19px; height: 19px; border: 0; border-radius: 50%;
    background: var(--dbf-primary); pointer-events: auto; cursor: grab;
}
.dbf-filter__range input[type='range']:focus-visible { outline: 0; }
.dbf-filter__range input[type='range']:focus-visible::-webkit-slider-thumb { outline: 2px solid #171717; outline-offset: 3px; }
.dbf-filter__range input[type='range']:focus-visible::-moz-range-thumb { outline: 2px solid #171717; outline-offset: 3px; }
.dbf-filter__colors { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 25px; padding: 0; border: 0; min-width: 0; }
.dbf-filter__swatch { position: relative; display: inline-flex; width: 32px; height: 36px; cursor: pointer; }
.dbf-filter__swatch input { position: absolute; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.dbf-filter__swatch span {
    display: block; width: 100%; height: 100%; border-radius: 11px;
    background: var(--dbf-color); border: 3px solid #fff;
    box-shadow: 0 0 0 1px #bcbcbc; pointer-events: none;
    transition: transform .12s, box-shadow .12s;
}
.dbf-filter__swatch input:checked + span { box-shadow: 0 0 0 3px var(--dbf-primary); transform: translateY(-2px); }
.dbf-filter__swatch input:focus-visible + span { outline: 2px solid #111; outline-offset: 4px; }
.dbf-filter__submit {
    display: block; width: 100%; min-height: 56px;
    padding: 12px 18px; border: 0; border-radius: 17px;
    background: var(--dbf-primary); color: #fff;
    font-family: inherit; font-size: 14px; line-height: 1.4; font-weight: 700;
    letter-spacing: 1.8px; cursor: pointer;
    transition: background .15s, transform .15s;
}
.dbf-filter__submit:hover { background: #43256c; transform: translateY(-1px); }
.dbf-filter__submit:focus-visible { outline: 3px solid #1c1c1c; outline-offset: 3px; }
.dbf-filter__hint { font-size: 12px; margin: 0 0 15px; }
@media (max-width: 520px) {
    .dbf-filter { padding: 24px 19px 28px; border-radius: 25px; }
    .dbf-filter__price { padding: 17px 16px; }
    .dbf-filter__select-label select { padding-left: 15px; font-size: 13px; }
    .dbf-filter__price-values label { font-size: 12px; }
}