.product-filter {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    background:#eaf0e9;
    padding:24px;
    margin-bottom:27px;
    border:1px solid #d9e2d8;
}
.product-filter__field {
    width:100%;
    min-width:0;
}
.product-filter__number {
    width:100%;
}
.product-filter__field>label {
    display:block;
    font-size:12px;
    font-weight:600;
    margin-bottom:6px;
}
.product-filter input[type=search] {
    width:100%;
    height:46px;
    border:1px solid var(--line);
    background:white;
    padding:10px 13px;
}
.product-filter__actions {
    display:flex;
    gap:10px;
    align-items:flex-end;
    flex:1;
    flex-wrap:wrap;
}
.product-filter__actions>button {
    display:flex;
    gap:7px;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:10px 13px;
    flex:1;
    border:1px solid var(--gold);
    background:var(--gold);
    font-weight:600;
    transition:background .2s,color .2s,border-color .2s;
}
.product-filter__actions>button:hover {
    background:var(--gold-dark);
    border-color:var(--gold-dark);
    color:white;
}
.product-filter__actions>[type=reset] {
    background:transparent;
    border-color:#bdcbbf;
}
.product-filter #filter-status {
    flex-basis:100%;
    color:var(--teal);
    font-size:12px;
    display:flex;
    align-items:center;
    gap:8px;
}
.product-filter #filter-status::before {
    content:"";
    width:14px;
    height:14px;
    border:2px solid #bbc9bd;
    border-top-color:var(--teal);
    border-radius:50%;
    animation:spin .7s linear infinite;
}
@media(max-width:1100px) {
    .product-filter {
        padding:18px;
    }
}
@media(min-width:641px) and (max-width:900px) {
    .product-filter__field {
        width:calc(50% - 8px);
    }
    .product-filter__number {
        width:100%;
    }
}
@media(max-width:640px) {
    .product-filter {
        gap:15px;
    }
    .product-filter__actions {
        width:100%;
        flex:auto;
    }
}