.woocommerce .shf-filter-bar {
margin: 0 0 32px;
}
.woocommerce .shf-filter-bar__inner {
background: #f5f5f5;
border: 1px solid #d8d8d8;
border-radius: 8px;
padding: 18px;
}
.woocommerce .shf-filter-bar__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 18px;
align-items: start;
}
.woocommerce .shf-filter-bar .widget,
.woocommerce .shf-filter-bar .shf-custom-categories-widget,
.woocommerce .shf-filter-bar .widget_block,
.woocommerce .shf-filter-bar .wc-block-components-filter-wrapper,
.woocommerce .shf-filter-bar .wp-block-woocommerce-price-filter,
.woocommerce .shf-filter-bar .wp-block-woocommerce-attribute-filter,
.woocommerce .shf-filter-bar .wp-block-woocommerce-stock-filter,
.woocommerce .shf-filter-bar .wp-block-woocommerce-rating-filter {
margin: 0;
padding: 0;
background: #fff;
border: 1px solid #d7d7d7;
border-radius: 6px;
min-width: 0;
overflow: visible;
box-sizing: border-box;
}
.woocommerce .shf-filter-bar .widget-title,
.woocommerce .shf-filter-bar .wp-block-heading,
.woocommerce .shf-filter-bar .wc-block-components-filter-header,
.woocommerce .shf-filter-bar h2,
.woocommerce .shf-filter-bar h3 {
margin: 0;
padding: 14px 16px;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
color: #222;
border-bottom: 1px solid #ececec;
background: #fff;
}
.woocommerce .shf-filter-bar .shf-accordion-trigger {
position: relative;
cursor: pointer;
user-select: none;
}
.woocommerce .shf-filter-bar .shf-accordion-trigger::after {
content: '+';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
line-height: 1;
color: #666;
}
.woocommerce .shf-filter-bar .shf-accordion-ready:not(.is-collapsed) > .shf-accordion-trigger::after,
.woocommerce .shf-filter-bar .shf-custom-categories-widget:not(.is-collapsed) > .shf-accordion-trigger::after {
content: '−';
}
.woocommerce .shf-filter-bar .shf-accordion-content {
padding: 14px 16px 16px;
}
.woocommerce .shf-filter-bar .is-collapsed > .shf-accordion-content {
display: none;
}
.woocommerce .shf-filter-bar select,
.woocommerce .shf-filter-bar input[type="text"],
.woocommerce .shf-filter-bar input[type="number"] {
width: 100%;
min-height: 46px;
padding: 10px 14px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
}
.woocommerce .shf-filter-bar .widget_price_filter .price_slider_wrapper {
padding: 0;
}
.woocommerce .shf-filter-bar .widget_price_filter .price_slider {
margin: 0 8px 18px;
}
.woocommerce .shf-filter-bar .widget_price_filter .price_slider_amount {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.woocommerce .shf-filter-bar .widget_price_filter .price_label {
font-size: 14px;
}
.woocommerce .shf-filter-bar .widget_price_filter .button,
.woocommerce .shf-filter-bar .widget_price_filter button,
.woocommerce .shf-filter-bar .wc-block-price-filter__controls button {
min-height: 42px;
padding: 10px 16px;
border-radius: 6px;
}
.woocommerce .shf-custom-categories-inner {
padding: 6px 0;
}
.woocommerce .shf-filter-bar .shf-cat-list,
.woocommerce .shf-filter-bar .product-categories {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce .shf-cat-list--depth-0 > li + li {
border-top: 1px solid #f0f0f0;
}
.woocommerce .shf-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 16px;
}
.woocommerce .shf-cat-row a {
display: block;
flex: 1 1 auto;
color: #222;
text-decoration: none;
line-height: 1.35;
}
.woocommerce .shf-cat-row a:hover {
color: #d90416;
}
.woocommerce .shf-custom-categories-widget .current-cat > .shf-cat-row > a {
font-weight: 700;
color: #d90416;
}
.woocommerce .shf-cat-toggle {
flex: 0 0 auto;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #ddd;
border-radius: 999px;
background: #fff;
cursor: pointer;
position: relative;
}
.woocommerce .shf-cat-toggle span::before,
.woocommerce .shf-cat-toggle span::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 2px;
background: #444;
transform: translate(-50%, -50%);
}
.woocommerce .shf-cat-toggle span::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.woocommerce .shf-has-children.is-open > .shf-cat-row .shf-cat-toggle span::after {
display: none;
}
.woocommerce .shf-cat-children {
display: none;
padding: 0 0 8px 0;
}
.woocommerce .shf-has-children.is-open > .shf-cat-children {
display: block;
}
.woocommerce .shf-cat-list--depth-1,
.woocommerce .shf-cat-list--depth-2,
.woocommerce .shf-cat-list--depth-3 {
padding-left: 14px;
}
.woocommerce .shf-widget-select-wrap {
padding: 0;
}
.woocommerce .shf-filter-bar .shf-reset-button,
.woocommerce .shf-filter-bar .button.shf-reset-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 12px 24px;
border: 0;
border-radius: 6px;
background: #d90416;
color: #fff;
text-decoration: none;
font-weight: 700;
}
.woocommerce .shf-filter-bar .shf-reset-button:hover,
.woocommerce .shf-filter-bar .shf-reset-button:focus {
color: #fff;
opacity: 0.92;
}
.woocommerce .shf-filter-bar__footer {
display: flex;
justify-content: flex-end;
margin-top: 18px;
}
.woocommerce .shf-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.woocommerce .shf-filter-bar .shf-dropdown-widget {
border: 0;
background: transparent;
overflow: visible;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter {
position: relative;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__trigger {
width: 100%;
min-height: 56px;
padding: 14px 48px 14px 16px;
border: 1px solid #cfcfcf;
border-radius: 6px;
background: #fff;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
box-sizing: border-box;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__label {
display: flex;
flex-direction: column;
min-width: 0;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__primary {
font-size: 16px;
line-height: 1.2;
color: #3c3c3c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__secondary {
display: none;
margin-top: 4px;
font-size: 12px;
line-height: 1.2;
color: #7a7a7a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__secondary:not(:empty) {
display: block;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__arrow {
position: absolute;
right: 16px;
top: 50%;
width: 10px;
height: 10px;
margin-top: -7px;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
transform: rotate(45deg);
pointer-events: none;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter.is-open .shf-dropdown-filter__trigger {
border-color: #8f8f8f;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter.is-open .shf-dropdown-filter__arrow {
transform: rotate(-135deg);
margin-top: -2px;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% - 1px);
z-index: 30;
background: #fff;
border: 1px solid #8f8f8f;
border-top: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__list {
list-style: none;
margin: 0;
padding: 0;
max-height: 320px;
overflow-y: auto;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__item + .shf-dropdown-filter__item {
border-top: 1px solid #ececec;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 12px 16px;
color: #222;
text-decoration: none;
line-height: 1.3;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__option:hover {
background: #f4f4f4;
color: #222;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__item.is-selected .shf-dropdown-filter__option {
background: #efefef;
font-weight: 700;
}
.woocommerce .shf-filter-bar .shf-dropdown-filter__count {
color: #6f6f6f;
font-size: 14px;
white-space: nowrap;
}
@media (max-width: 992px) {
.woocommerce .shf-filter-bar__grid {
grid-template-columns: 1fr;
}
}
.woocommerce .shf-filter-bar .shf-custom-categories-widget {
overflow: hidden;
}
.woocommerce .shf-cat-breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
font-size: 12px;
line-height: 1.45;
color: #666;
}
.woocommerce .shf-cat-breadcrumb a {
color: #666;
text-decoration: none;
}
.woocommerce .shf-cat-breadcrumb a:hover {
color: #d90416;
}
.woocommerce .shf-cat-breadcrumb__sep {
color: #999;
}
.woocommerce .shf-cat-breadcrumb__current {
font-weight: 700;
color: #222;
}
.woocommerce .shf-cat-back-wrap {
margin: 0 0 12px;
}
.woocommerce .shf-cat-back {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #222;
text-decoration: none;
}
.woocommerce .shf-cat-back:hover {
color: #d90416;
}
.woocommerce .shf-cat-list--tree-root > .cat-item > .shf-cat-row {
background: #fafafa;
}
.woocommerce .shf-cat-list--tree-root > .cat-item > .shf-cat-row > a {
font-weight: 700;
}
.woocommerce .shf-cat-list--depth-1 > li + li,
.woocommerce .shf-cat-list--depth-2 > li + li,
.woocommerce .shf-cat-list--depth-3 > li + li,
.woocommerce .shf-cat-list--depth-4 > li + li,
.woocommerce .shf-cat-list--depth-5 > li + li,
.woocommerce .shf-cat-list--depth-6 > li + li {
border-top: 1px solid #f0f0f0;
}
.woocommerce .shf-cat-list--depth-1,
.woocommerce .shf-cat-list--depth-2,
.woocommerce .shf-cat-list--depth-3,
.woocommerce .shf-cat-list--depth-4,
.woocommerce .shf-cat-list--depth-5,
.woocommerce .shf-cat-list--depth-6 {
border-top: 1px solid #f0f0f0;
}
.woocommerce .shf-cat-list--depth-1 {
padding-left: 12px;
}
.woocommerce .shf-cat-list--depth-2,
.woocommerce .shf-cat-list--depth-3,
.woocommerce .shf-cat-list--depth-4,
.woocommerce .shf-cat-list--depth-5,
.woocommerce .shf-cat-list--depth-6 {
padding-left: 18px;
}
.woocommerce .shf-filter-bar .is-current-path > .shf-cat-row > a {
font-weight: 600;
}