.hpd-product-filters {
width: 100%;
max-width: 1080px;
margin: 0 auto 20px auto;
padding: 0;
font-family: inherit;
box-sizing: border-box;
} .hpd-product-filters__header {
display: flex;
align-items: center;
width: 100%;
background: #0e2a47;
padding: 6px 14px;
min-height: 35px;
border: 0;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
} .hpd-product-filters__title {
margin: 0;
padding: 0;
color: #ffffff;
font-family: inherit;
font-size: 14px;
line-height: 1.15; font-weight: 500;
}
.hpd-product-filters__title span {
color: #ff8a00;
font-weight: 500;
} .hpd-product-filters__body {
display: grid;
grid-template-columns:
repeat(5, minmax(0, 1fr))
auto;
align-items: center;
gap: 9px; padding: 7px 14px 3px 14px; background: #ffffff; border: 0;
border-radius: 0;
box-sizing: border-box;
} .hpd-product-filter {
min-width: 0;
margin: 0;
padding: 0;
} .hpd-product-filter label {
display: none;
} .hpd-product-filter select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
height: 38px;
margin: 0;
padding:
0
34px
0
11px;
background-color: #ffffff; background-image:
linear-gradient(
45deg,
transparent 50%,
#0e2a47 50%
),
linear-gradient(
135deg,
#0e2a47 50%,
transparent 50%
);
background-position:
calc(100% - 16px) 16px,
calc(100% - 11px) 16px;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
color: #25384a;
border: 1px solid #c9d4df;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
line-height: 38px;
font-weight: 500;
cursor: pointer;
box-shadow: none;
box-sizing: border-box;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease,
background-color 0.18s ease;
}
.hpd-product-filter select:hover {
border-color: #8ea3b7;
}
.hpd-product-filter select:focus {
border-color: #ff8a00;
outline: none;
box-shadow:
0 0 0 2px
rgba(255, 138, 0, 0.12);
} .hpd-product-filter.is-active select {
border-color: #ff8a00;
background-color: #fffaf4;
} .hpd-product-filters__clear {
appearance: none;
-webkit-appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
min-height: 38px;
margin: 0;
padding:
0
14px;
background: #ff8a00;
color: #ffffff;
border: 1px solid #ff8a00;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition:
background-color 0.18s ease,
border-color 0.18s ease;
}
.hpd-product-filters__clear:hover,
.hpd-product-filters__clear:focus {
background: #e87900;
border-color: #e87900;
color: #ffffff;
} .hpd-product-filters__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-top: 8px;
}
.hpd-product-filters__results {
color: #53677a;
font-size: 13px;
line-height: 1.4;
font-weight: 500;
}
.hpd-product-filters__sort {
display: flex;
align-items: center;
gap: 9px;
margin-left: auto;
}
.hpd-product-filters__sort label {
margin: 0;
color: #0e2a47;
font-size: 13px;
font-weight: 700;
}
.hpd-product-filters__sort select {
min-width: 185px;
height: 38px;
padding:
0
34px
0
11px;
background: #ffffff;
color: #25384a;
border: 1px solid #c9d4df;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
cursor: pointer;
box-sizing: border-box;
} .hpd-product-filters__mobile-toggle {
display: none;
} @media (max-width: 980px) {
.hpd-product-filters {
width: calc(100% - 30px);
margin-left: auto;
margin-right: auto;
}
.hpd-product-filters__body {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 9px;
padding:
9px
0;
}
.hpd-product-filters__clear {
width: 100%;
}
.hpd-product-filters__footer {
flex-wrap: wrap;
}
} @media (max-width: 767px) {
.hpd-product-filters {
width: calc(100% - 24px);
margin-bottom: 18px;
}
.hpd-product-filters__header {
padding:
6px
12px;
min-height: 35px;
border-radius:
6px
6px
0
0;
}
.hpd-product-filters__title {
font-size: 14px;
font-weight: 500;
}
.hpd-product-filters__title span {
font-weight: 500;
} .hpd-product-filters__mobile-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding:
10px
12px;
background: #0e2a47;
color: #ffffff;
border: 0;
border-top:
1px solid
rgba(255, 255, 255, 0.15);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
}
.hpd-product-filters__mobile-toggle::after {
content: "+";
color: #ff8a00;
font-size: 21px;
line-height: 1;
font-weight: 700;
}
.hpd-product-filters.is-open
.hpd-product-filters__mobile-toggle::after {
content: "−";
} .hpd-product-filters__body {
display: none;
grid-template-columns: 1fr;
gap: 9px;
padding:
10px
0;
background: #ffffff;
border: 0;
}
.hpd-product-filters.is-open
.hpd-product-filters__body {
display: grid;
} .hpd-product-filter select {
height: 44px;
padding-left: 12px;
font-size: 16px;
line-height: 44px;
background-position:
calc(100% - 17px) 19px,
calc(100% - 12px) 19px;
}
.hpd-product-filters__clear {
width: 100%;
height: 42px;
min-height: 42px;
font-size: 13px;
}
.hpd-product-filters__footer {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.hpd-product-filters__results {
text-align: center;
}
.hpd-product-filters__sort {
width: 100%;
margin-left: 0;
}
.hpd-product-filters__sort select {
flex: 1;
min-width: 0;
}
} @media (max-width: 420px) {
.hpd-product-filters__title {
font-size: 13px;
}
} .hpd-product-filters__sort {
display: none !important;
} body.tax-product_cat .woocommerce-ordering {
display: none !important;
}