/* Filters inside deprecated "Grid" element ---------------------------------------------------------------------------*/ .g-filters { display: flex; flex-wrap: wrap; margin-bottom: calc(var(--gap, 0px) * 2); position: relative; z-index: 11; /* needed to overlay grid layouts */ } .g-filters.align_center { justify-content: center; } .rtl .g-filters.align_left, body:not(.rtl) .g-filters.align_right { justify-content: flex-end; } .g-filters-item, .w-filter-item.values_as_btn.style_1 .w-filter-item-value, .w-filter-item.values_as_btn.style_2 .w-filter-item-value, .w-filter-item.values_as_btn.style_3 .w-filter-item-value { flex-shrink: 0; position: relative; white-space: nowrap; text-overflow: ellipsis; line-height: 2.8; padding: 0 1.2em; background: none; transition-duration: .2s; } .g-filters-item.active { cursor: default; pointer-events: none; } .g-filters-item-amount { display: none; margin-left: .5rem; } .ui-datepicker.for_list_filter { z-index: 99999 !important; } .ui-datepicker.for_list_filter, .ui-datepicker.for_list_filter .ui-datepicker-prev, .ui-datepicker.for_list_filter .ui-datepicker-next, .ui-datepicker.for_list_filter .ui-datepicker td a { border-radius: var(--site-border-radius); } /* STYLE: 1 OLD */ .g-filters.style_1 { background: var(--color-content-bg-alt-grad); } .g-filters.style_1 .g-filters-item { line-height: 3.5; color: inherit; } .g-filters.style_1 .g-filters-item.active { background: var(--color-content-bg-grad); color: var(--color-content-primary); } .no-touch .g-filters.style_1 .g-filters-item:hover { background: var(--color-content-primary-grad); color: #fff; } /* STYLE: 1 NEW */ .w-filter-item.values_as_btn.style_1 .w-filter-item-value { border: 1px solid var(--color-content-border); border-radius: var(--site-border-radius); } .w-filter-item.values_as_btn.style_1 .w-filter-item-value:has(input:checked) { border-color: var(--color-content-primary); color: var(--color-content-primary); } .no-touch .w-filter-item.values_as_btn.style_1 .w-filter-item-value:hover { background: var(--color-content-bg-alt-grad); } /* STYLE: 2 */ .w-grid[style*="--gap:0"] .g-filters.style_2 { margin-bottom: 1.5rem; } .g-filters.style_2 .g-filters-item, .w-filter-item.values_as_btn.style_2 .w-filter-item-value { color: var(--color-content-link); border-radius: var(--site-border-radius); } .g-filters.style_2 .g-filters-item.active, .w-filter-item.values_as_btn.style_2 .w-filter-item-value:has(input:checked) { background: var(--color-content-bg-alt-grad); color: inherit; } .no-touch .g-filters.style_2 .g-filters-item:hover, .no-touch .w-filter-item.values_as_btn.style_2 .w-filter-item-value:hover { background: var(--color-content-primary-grad); color: #fff; } /* STYLE: 3 */ .g-filters.style_3 .g-filters-item, .w-filter-item.values_as_btn.style_3 .w-filter-item-value { line-height: 3.2rem; border-bottom: 3px solid; opacity: .66; color: inherit; } .g-filters.style_3 .g-filters-item:not(.active), .w-filter-item.values_as_btn.style_3 .w-filter-item-value:not(:has(input:checked)) { border-color: transparent; } .g-filters.style_3 .g-filters-item.active, .w-filter-item.values_as_btn.style_3 .w-filter-item-value:has(input:checked) { color: var(--color-content-primary); opacity: 1; } .no-touch .g-filters.style_3 .g-filters-item:hover, .no-touch .w-filter-item.values_as_btn.style_3 .w-filter-item-value:hover { opacity: 1; color: inherit; } /* List Filter ---------------------------------------------------------------------------*/ .w-filter-message { display: inline-block; padding: .5em 1em; margin-bottom: 1em; background: var(--color-content-primary-faded); } .w-filter-opener { display: none; vertical-align: top; background: none; padding: 0; position: relative; z-index: 11; /* fix to overlay grid layouts */ font-weight: bold; transition: color .3s; } .no-touch .w-filter-opener:hover { color: var(--color-content-link-hover); } .w-filter-opener .w-btn-label[data-count-active]::after { position: absolute; bottom: 50%; font-size: max(10px, .7em); text-align: center; line-height: 1.4; letter-spacing: 0; padding: 0 .2em; min-width: 1em; border-radius: 50%; background: var(--badge-bg-color, var(--color-content-bg)); color: var(--badge-color, #fff); } .w-filter-opener.icon_atright .w-btn-label[data-count-active]::after { margin-left: 1.9em; } .w-filter.active .w-filter-opener .w-btn-label[data-count-active]::after { content: attr(data-count-active); } .w-filter-opener.icon_atleft i { margin-right: .3em; } .w-filter-opener.icon_atright i { margin-left: .3em; } .w-filter-list-title { display: none; font-family: var(--font-h5); font-size: 1.4rem; padding-inline-end: 3rem; margin-bottom: 1.5rem; } .w-filter-item { flex-shrink: 0; position: relative; } .w-filter-item-title { display: block; font-weight: bold; text-align: start; background: none; color: inherit; padding: 0; } .w-filter-item-reset { display: none; font-size: 13px; } .w-filter-item.has_value .w-filter-item-reset { display: inline-block; } .w-filter-item.type_checkbox .w-filter-item-values[style*="max-height"], .w-filter-item.type_radio .w-filter-item-values[style*="max-height"] { overflow-y: auto; } .w-filter-item-search { margin-bottom: 1em; position: relative; } .w-filter-item-search > input { padding-inline-end: var(--inputs-height, 2em); } .w-filter-item-search > i { position: absolute; top: 50%; inset-inline-end: 0; text-align: center; width: var(--inputs-height, 2em); transform: translateY(-50%); color: var(--inputs-text-color, inherit); } .w-filter-item-search > input:focus + i { color: var(--inputs-focus-text-color, inherit); } .w-filter-item-message { font-size: 13px; } .w-filter.state_desktop .w-filter-item-content { font-size: .9em; line-height: 1.5; } .w-filter-item-value { display: block; text-align: start; margin-bottom: .4em; } .w-filter-item-value.depth_2 { margin-inline-start: 1em; } .w-filter-item-value.depth_3 { margin-inline-start: 2em; } .w-filter-item-value.depth_4 { margin-inline-start: 3em; } .w-filter-item-value.depth_5 { margin-inline-start: 4em; } .w-filter-item-value > label { display: flex; align-items: center; } input:checked ~ .w-filter-item-value-label { font-weight: 600; } .w-filter-item-value-amount { opacity: .5; margin-inline-start: .5em; } .w-filter-item-value[style*="--swatch-bg-color"] > label > input { background: var(--swatch-bg-color, transparent); color: var(--swatch-color, inherit); } /* Disabled values */ .w-filter.loading, .w-filter-item.loading, .w-filter-item.disabled, .w-filter-item.type_range_input.disabled .w-filter-item-values, .w-filter-item.type_range_slider.disabled .w-filter-item-values, .w-filter-item:not(.disabled) .w-filter-item-value.disabled { opacity: .5; pointer-events: none; } .w-filter-item-value.disabled label { cursor: default; } .w-filter-item-value.disabled input[disabled] { opacity: 1; } .w-filter-item-value-amount:empty, .w-filter.hide_post_count .w-filter-item-value-amount, .w-filter.hide_disabled_items .w-filter-item.disabled, .w-filter.hide_disabled_values .w-filter-item-value.disabled, .w-filter.hide_disabled_values option.disabled { display: none; visibility: hidden; } /* Dropdown */ .w-filter-item.type_dropdown .w-filter-item-values { position: relative; } .w-filter-item.type_dropdown .w-filter-item-values > select { -webkit-appearance: none; } /* Range */ .w-filter-item.type_range .w-filter-item-values, .w-filter-item.type_range_input .w-filter-item-values { display: flex; gap: .6em; } .w-filter-item.type_range_input .w-filter-item-value { margin: 0; } /* Slider */ .w-filter-item.type_range_slider .ui-slider { cursor: e-resize; font-size: var(--inputs-font-size, inherit); height: calc( var(--inputs-checkbox-size, 1.5em) + 2 * var(--inputs-border-width, 1px) ); margin: 0 calc( var(--inputs-checkbox-size, 1.5em) / 2 ); position: relative; min-width: 150px; } .w-filter-item.type_range_slider .ui-slider:before, .w-filter-item.type_range_slider .ui-slider-range { position: absolute; top: 50%; height: 20%; transform: translateY(-50%); border-style: solid; border-radius: var(--inputs-border-radius, 0px); border-color: var(--inputs-border-color, currentColor); border-width: var(--inputs-border-width, 1px); box-sizing: content-box; } .w-filter-item.type_range_slider .ui-slider:before { content: ''; left: calc( var(--inputs-checkbox-size, 1.5em) / -2 ); right: calc( var(--inputs-checkbox-size, 1.5em) / -2 ); background: var(--inputs-background, transparent); box-shadow: var(--inputs-box-shadow, none); } .w-filter-item.type_range_slider .ui-slider-range { background: currentColor; border-color: currentColor; } .w-filter-item.type_range_slider .ui-slider-handle { position: absolute; z-index: 2; top: 0; left: 0; transform: translateX(-50%); width: var(--inputs-checkbox-size, 1.5em); height: var(--inputs-checkbox-size, 1.5em); border-radius: 50%; border-style: solid; border-color: var(--inputs-border-color, currentColor); border-width: var(--inputs-border-width, 1px); background: var(--color-content-bg-grad); box-shadow: var(--box-shadow); box-sizing: content-box; } .w-filter-item.type_range_slider .ui-slider-handle.ui-state-focus { border-color: var(--inputs-focus-border-color, currentColor); box-shadow: var(--inputs-focus-box-shadow, var(--box-shadow) ); } .w-filter-item.type_range_slider .ui-slider-handle:last-child { left: 100%; } .w-filter-item-slider-result { display: flex; justify-content: space-between; font-size: var(--inputs-font-size, inherit); margin-top: 5px; } .w-filter-item.has_value .w-filter-item-slider-result { font-weight: bold; } /* LAYOUT: VER */ .w-filter.layout_ver .w-filter-item, .w-filter.state_mobile.layout_hor .w-filter-item { margin-bottom: var(--items-gap, 1.5em); } /* LAYOUT: HOR */ .w-filter.state_desktop.layout_hor .w-filter-list { display: flex; flex-wrap: wrap; gap: var(--items-gap, 1.5em); } .w-filter.state_desktop.layout_hor .w-filter-item { z-index: 11; /* to override ver/hor wrappers inside Grid Layout */ } /* Alignment */ .w-filter.align_center .w-filter-list { justify-content: center; } body.rtl .w-filter.align_left .w-filter-list, body:not(.rtl) .w-filter.align_right .w-filter-list { justify-content: flex-end; } .w-filter.align_right .w-filter-item-values { right: 0; } .w-filter.align_justify .w-filter-item { flex: 1 0 50px; } /* ITEM LAYOUT: Default */ .w-filter.mod_default .w-filter-item-title, .w-filter.state_mobile:not(.mod_toggle) .w-filter-item-title { display: inline-block; vertical-align: top; margin-inline-end: .8em; margin-bottom: .5em; } /* ITEM LAYOUT: Toggles */ .w-filter.mod_toggle.layout_hor .w-filter-list { align-items: flex-start; } .w-filter.mod_toggle .w-filter-item { border-top: 1px solid var(--color-content-border); } .w-filter.mod_toggle.layout_hor .w-filter-item, .w-filter.mod_toggle .w-filter-item:last-child { border-bottom: 1px solid var(--color-content-border); } .w-filter.mod_toggle .w-filter-item-title { position: relative; width: 100%; padding: 1em 2em 1em 0; } .no-touch .w-filter.mod_toggle .w-filter-item-title:hover { color: var(--color-content-link-hover); } .w-filter.mod_toggle .w-filter-item-title::after { content: ''; position: absolute; top: 50%; right: 0; margin-top: -.2em; pointer-events: none; border: .4em solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-radius: var(--site-border-radius); } .w-filter.mod_toggle .w-filter-item.expand .w-filter-item-title::after { margin-top: -.6em; transform: rotate(180deg); } .w-filter.mod_toggle .w-filter-item-title > span { font-weight: normal; margin-inline-start: .3em; margin-bottom: -.3em; color: var(--color-content-link); } .no-touch .w-filter.mod_toggle .w-filter-item-title > span:hover { color: var(--color-content-link-hover); } .w-filter.mod_toggle .w-filter-item-content { display: none; visibility: hidden; /* required to disable tab navigation without JS */ margin-bottom: 1.75em; } .w-filter.mod_toggle .w-filter-item.expand .w-filter-item-content { display: block; visibility: visible; } /* ITEM LAYOUT: Dropdown */ .w-filter.state_desktop.mod_dropdown.drop_on_hover .w-filter-item:hover { z-index: 100; /* prevent overlapping by other items below */ } .w-filter.state_desktop.mod_dropdown .w-filter-item-content { display: none; visibility: hidden; /* required to disable tab navigation without JS */ position: absolute; z-index: 99; min-width: 15em; width: 100%; padding: 1em; box-shadow: var(--box-shadow); background: var(--color-content-bg-grad); color: var(--color-content-text); } .w-filter.state_desktop.mod_dropdown.drop_on_hover .w-filter-item:hover .w-filter-item-content, .w-filter.state_desktop.mod_dropdown .w-filter-item.expand .w-filter-item-content { display: block; visibility: visible; } .w-filter.state_desktop.mod_dropdown .w-filter-item-title { font-family: var( --inputs-font-family, inherit ); font-size: var( --inputs-font-size, inherit ); font-weight: var( --inputs-font-weight, inherit ); letter-spacing: var( --inputs-letter-spacing, inherit ); text-transform: var( --inputs-text-transform, inherit ); min-height: var(--inputs-height, 2em); line-height: var(--inputs-height, 2em); padding: 0 var(--inputs-padding, .6em); border-radius: var( --inputs-border-radius, 0px ); background: var( --inputs-background, transparent ); border-color: var(--inputs-border-color, currentColor); color: var( --inputs-text-color, inherit ); box-shadow: var( --inputs-box-shadow, none ); border-width: var(--inputs-border-width, 1px); border-style: solid; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .w-filter.state_desktop.mod_dropdown .has_value .w-filter-item-title { background: var( --inputs-focus-background, transparent ); border-color: var( --inputs-focus-border-color, currentColor ); color: var( --inputs-focus-text-color, inherit ); box-shadow: var( --inputs-focus-box-shadow, none ); } .w-filter-item.type_dropdown .w-filter-item-values > select, .w-filter.state_desktop.mod_dropdown .w-filter-item-title { padding-inline-end: max( var(--inputs-padding, .6em) * 2 + .8em, 1.5em ); } .w-filter-item.type_dropdown .w-filter-item-values::after, .w-filter.state_desktop.mod_dropdown .w-filter-item-title::after { content: ''; position: absolute; top: calc( var(--inputs-height, 2em) / 2 + var(--inputs-border-width, 1px) ); inset-inline-end: 0; margin: -.2em calc( var(--inputs-padding, .6em) + var(--inputs-border-width, 1px) ); font-size: var(--inputs-font-size, inherit); pointer-events: none; border: .4em solid; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-radius: var(--site-border-radius); } .w-filter-item.type_dropdown .w-filter-item-values::after { color: var(--inputs-text-color, inherit); } .w-filter.state_desktop.mod_dropdown .w-filter-item.has_value .w-filter-item-title::after { visibility: hidden; } .w-filter.state_desktop.mod_dropdown .w-filter-item.has_value .w-filter-item-title > span:before { content: ':\0020'; } .w-filter.state_desktop.mod_dropdown .w-filter-item-value:last-child { margin-bottom: 0; } .w-filter.state_desktop.mod_dropdown .w-filter-item-reset { position: absolute; top: var(--inputs-border-width, 1px); inset-inline-end: var(--inputs-border-width, 1px); text-align: center; font-size: var(--inputs-font-size, inherit); line-height: var(--inputs-height, 2em); padding: 0 calc( var(--inputs-padding, .6em) + var(--inputs-border-width, 1px) ); color: var(--inputs-text-color, inherit); text-decoration: none !important; } .w-filter.state_desktop.mod_dropdown .has_value .w-filter-item-reset { color: var(--inputs-focus-text-color, inherit); } .w-filter.state_desktop.mod_dropdown .w-filter-item-reset:before { vertical-align: top; content: '\f00d'; font-family: fontawesome; font-weight: 900; } .w-filter.state_desktop.mod_dropdown .w-filter-item-reset span { display: none; } /* ITEM LAYOUT: None */ .w-filter.state_desktop.mod_no_titles .w-filter-item-title, .w-filter.state_desktop.mod_no_titles .w-filter-item-reset { display: none !important; } /* DROPDOWN STYLE: Trendy */ .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy .w-filter-list { gap: 2.5em; } .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy .w-filter-item-title { font-size: inherit; font-family: inherit; font-weight: bold; line-height: 2.5em; min-height: 0; padding: 0; background: none; border-radius: 0; border: none; box-shadow: none; color: inherit; } .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy .w-filter-item-reset { top: 0; inset-inline-end: 0; font-size: inherit; line-height: 2.5em; padding: 0; } .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy .has_value .w-filter-item-title { box-shadow: 0 -2px 0 currentColor inset; } .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy .w-filter-item-title::after { position: static; display: inline-block; vertical-align: top; margin: 1.1em 0 0 .6em; } .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy input[type=checkbox], .w-filter.state_desktop.mod_dropdown.dropdown_style_trendy input[type=radio] { font-size: .75em !important; margin-top: .2em; box-shadow: none !important; background: none !important; border: none !important; color: inherit !important; } /* Switch */ .w-filter.state_desktop[class*="style_switch_"] input[type=checkbox], .w-filter.state_desktop[class*="style_switch_"] input[type=radio], .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-reset, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-title > span, .w-filter.state_desktop[class*="style_switch_"].hide_item_title .w-filter-item-title { display: none; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-list { flex-direction: column; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item { display: flex; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-title { flex-shrink: 0; line-height: 2.8; margin-inline-end: 1em; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-content { flex-grow: 1; font-size: inherit; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item.type_checkbox .w-filter-item-values, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item.type_radio .w-filter-item-values, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item.type_dropdown .w-filter-item-values { display: flex; flex-wrap: wrap; gap: 4px; } .w-filter.state_desktop[class*="style_switch_"].align_center .w-filter-item-values { justify-content: center; } .rtl .w-filter.state_desktop[class*="style_switch_"].align_left .w-filter-item-values, body:not(.rtl) .w-filter.state_desktop[class*="style_switch_"].align_right .w-filter-item-values { justify-content: flex-end; } .w-filter.state_desktop[class*="style_switch_"].align_justify .w-filter-item-value { flex: 1 0 auto; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value { flex-shrink: 0; position: relative; text-align: center; white-space: nowrap; font-size: inherit; line-height: 2.8; margin: 0; } .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value > label { display: block; padding: 0 1.2em; } .w-filter.state_desktop[class*="style_switch_"] .type_radio .w-filter-item-value.selected { cursor: default; pointer-events: none; } .w-filter.state_desktop[class*="style_switch_"] .selected .w-filter-item-value-label { font-weight: inherit; } .w-filter.state_desktop.style_switch_default .w-filter-item-value { border-radius: var(--site-border-radius); color: var(--color-content-link); } .w-filter.state_desktop.style_switch_default .w-filter-item-value.selected { background: var(--color-content-bg-alt-grad); color: inherit; } .no-touch .w-filter.state_desktop.style_switch_default .w-filter-item-value:hover { background: var(--color-content-primary-grad); color: #fff; } .l-section.color_primary .w-filter.state_desktop.style_switch_default .selected, .l-section.color_secondary .w-filter.state_desktop.style_switch_default .selected { background: rgba(255,255,255,0.15); } .w-filter.state_desktop.style_switch_trendy .w-filter-item-title { line-height: 3.2; } .w-filter.state_desktop.style_switch_trendy .w-filter-item-value { line-height: 3.2; border-bottom: 2px solid transparent; } .w-filter.state_desktop.style_switch_trendy .w-filter-item-value.selected { color: var(--color-content-primary); border-color: currentColor; } /* Values as buttons for checkboxes and radio */ .w-filter.layout_hor .w-filter-item.values_as_btn { flex-shrink: 1; justify-content: inherit; } .w-filter.layout_hor .w-filter-item.values_as_btn .w-filter-item-content { width: auto; justify-content: inherit; } .w-filter-item.values_as_btn .w-filter-item-values { display: grid; grid-auto-rows: 1fr; gap: .5em; } .w-filter-item.values_as_btn.btns_in_row_2 .w-filter-item-values { grid-template-columns: repeat(2, 1fr); } .w-filter-item.values_as_btn.btns_in_row_3 .w-filter-item-values { grid-template-columns: repeat(3, 1fr); } .w-filter-item.values_as_btn.btns_in_row_4 .w-filter-item-values { grid-template-columns: repeat(4, 1fr); } .w-filter-item.values_as_btn.btns_in_row_5 .w-filter-item-values { grid-template-columns: repeat(5, 1fr); } .w-filter-item.values_as_btn.btns_in_row_auto .w-filter-item-values { display: flex; flex-wrap: wrap; justify-content: inherit; } .w-filter.layout_ver .w-filter-item.btns_in_row_auto .w-filter-item-value { flex-grow: 1; } .w-filter-item.values_as_btn .w-filter-item-value { display: flex; justify-content: center; align-items: center; position: relative; margin: 0; min-width: 0; overflow: hidden; } .w-filter-item.values_as_btn .w-filter-item-value[style*="--swatch-bg-color"] { background: var(--swatch-bg-color, transparent) !important; color: var(--swatch-color, inherit) !important; } .w-filter-item.values_as_btn .w-filter-item-value.w-btn::before { background: none; /* fix for border gradient animation */ } .w-filter-item.values_as_btn .w-filter-item-value > label { position: static; /* fix for buttons with gradient bg */ } .w-filter-item.values_as_btn .w-filter-item-value input { position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; width: auto !important; height: auto !important; margin: 0 !important; border-radius: 0 !important; opacity: 0; } .w-filter-item.values_as_btn .w-filter-item-value input::before { display: none !important; } .w-filter-item.values_as_btn .w-filter-item-value-label { font-weight: inherit; } /* STATE: mobile */ body.us_filter_open { overflow: hidden !important; } .w-filter.state_mobile .w-filter-list { display: none; position: fixed; z-index: 1111; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; bottom: 4rem; /* height of w-filter-list-panel */ overflow: auto; padding: 1rem 1.5rem; text-align: initial; background: var(--color-content-bg-grad); color: var(--color-content-text); } .w-filter-list-closer { display: none; position: fixed; z-index: 1; top: inherit; inset-inline-end: 0; padding: 0; font-size: 2rem; line-height: 2; width: 2em; text-align: center; background: inherit; } .no-touch .w-filter-list-closer:hover { color: var(--color-content-link-hover); } .w-filter-list-closer:before { content: '\f00d'; font-family: fontawesome; font-weight: 400; vertical-align: top; } .w-filter-list-panel { display: none; position: fixed; z-index: 1112; left: 0; right: 0; bottom: 0; padding: .75rem; box-shadow: var(--box-shadow-up); background: var(--color-content-bg-grad); } .w-filter-list-panel > .w-btn { font-size: 1rem; line-height: 2.5rem !important; padding-top: 0; padding-bottom: 0; width: 100%; } .w-filter.state_mobile .w-filter-list-title, .w-filter.state_mobile .w-filter-list-closer, .w-filter.state_mobile.open_for_mobile .w-filter-list, .w-filter.state_mobile.open_for_mobile .w-filter-list-panel { display: block; } .w-filter.state_mobile .w-filter-item-values { max-height: none !important; overflow: visible !important; } /* Reset animation for correct appearance of opened mobile popup */ /* DEV: "position: fixed" isn't working inside containers with the "transform" property applied */ .w-filter.state_mobile.open_for_mobile[class*="us_animate_"] { animation: none; opacity: 1; } /* For correct display in sticky row when header is used */ .header_hor .l-section.type_sticky .w-filter.state_mobile .w-filter-list { top: var(--header-height); } .header_hor .l-header.sticky ~ .l-main .l-section.type_sticky .w-filter.state_mobile .w-filter-list { top: var(--header-sticky-height); } /* Colors ========================================================================== */ .color_alternate .g-filters.style_1 .g-filters-item.active { background: var(--color-alt-content-bg-grad); } .color_alternate .g-filters.style_1, .color_alternate .g-filters.style_2 .g-filters-item.active, .color_alternate .w-filter-item.values_as_btn.style_2 .w-filter-item-value:has(input:checked), .color_alternate .w-filter.state_desktop.style_switch_default .w-filter-item-value.selected { background: var(--color-alt-content-bg-alt-grad); } .color_alternate .g-filters.style_1 .g-filters-item.active, .color_alternate .g-filters.style_3 .g-filters-item.active, .color_alternate .w-filter.state_desktop.style_switch_trendy .w-filter-item-value.selected { color: var(--color-alt-content-primary); } .no-touch .color_alternate .g-filters.style_1 .g-filters-item:hover, .no-touch .color_alternate .g-filters.style_2 .g-filters-item:hover, .no-touch .color_alternate .w-filter-item.values_as_btn.style_2 .w-filter-item-value:hover, .no-touch .color_alternate .w-filter.state_desktop.style_switch_default .w-filter-item-value:hover { background: var(--color-alt-content-primary-grad, var(--color-content-primary-grad) ); } .l-section.color_primary .g-filters.style_1, .l-section.color_secondary .g-filters.style_1 { background: none; } .l-section.color_primary .g-filters.style_2 .g-filters-item, .l-section.color_secondary .g-filters.style_2 .g-filters-item, .l-section.color_primary .w-filter-item.values_as_btn.style_2 .w-filter-item-value, .l-section.color_secondary .w-filter-item.values_as_btn.style_2 .w-filter-item-value { color: inherit; } .l-section.color_primary .g-filters.style_2 .g-filters-item.active, .l-section.color_secondary .g-filters.style_2 .g-filters-item.active, .l-section.color_primary .w-filter-item.values_as_btn.style_2 .w-filter-item-value:has(input:checked), .l-section.color_secondary .w-filter-item.values_as_btn.style_2 .w-filter-item-value:has(input:checked) { background: rgba(255,255,255,0.15); } .l-section.color_primary .g-filters.style_3 .g-filters-item.active, .l-section.color_secondary .g-filters.style_3 .g-filters-item.active, .l-section.color_primary .w-filter-item.values_as_btn.style_3 .w-filter-item-value:has(input:checked), .l-section.color_secondary .w-filter-item.values_as_btn.style_3 .w-filter-item-value:has(input:checked) { color: #fff; } /* Rounded Corners ========================================================================== */ .rounded_none .w-filter-item-title::after, .rounded_none .w-filter-item-value, .rounded_none .g-filters-item { border-radius: 0 !important; } /* Responsive ========================================================================== */ @media screen and (max-width: 480px) { .g-filters-list, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-values { justify-content: flex-start !important; } .g-filters-item, .w-filter.state_desktop[class*="style_switch_"] .w-filter-item-value { font-size: .9rem !important; text-align: center; margin: 0 !important; padding-left: .6rem !important; padding-right: .6rem !important; text-overflow: ellipsis; overflow: hidden; width: 50%; } } /* List Filter Reset element ========================================================================== */ .w-filter-reset { display: flex; flex-wrap: wrap; align-items: center; font-size: .9em; gap: var(--values-gap, 10px); } .w-filter-reset.pos_after .w-filter-reset-all { order: -1; } .w-filter-reset:not(.show_selected_values) .w-filter-reset-single { display: none; } .w-filter-reset-all.style_1 { padding: 0; background: none; color: var(--color-content-link); } .w-filter-reset.show_selected_values.pos_before .w-filter-reset-all.style_1 { margin-inline-start: var(--values-gap, 10px); } .w-filter-reset.show_selected_values.pos_after .w-filter-reset-all.style_1 { margin-inline-end: var(--values-gap, 10px); } .no-touch .w-filter-reset-all.style_1:hover { color: var(--color-content-link-hover); } .w-filter-reset-all.style_2 { padding: .15em 1.1em; border-radius: 9em; background: none; box-shadow: inset 0 0 0 1px var(--color-content-border); color: var(--color-content-text); } .no-touch .w-filter-reset-all.style_2:hover { background: var(--color-content-border); } .w-filter-reset-single.style_1 { position: relative; display: inline-flex; align-items: center; padding: .2em 1em; border-radius: var(--site-border-radius); background: var(--color-content-bg-alt); color: var(--color-content-text); } .no-touch .w-filter-reset-single.style_1:hover { background: var(--color-content-border); color: var(--color-content-text); } .w-filter-reset-single.style_2 { position: relative; display: inline-flex; align-items: center; padding: .15em 1.1em; border-radius: 9em; background: var(--color-content-primary-grad); color: var(--color-content-bg); } .no-touch .w-filter-reset-single.style_2:hover { background: var(--color-content-secondary-grad); color: var(--color-content-bg); } .w-filter-reset-single .w-btn-label::after { content: '\f00d'; font-family: fontawesome; font-weight: 400; vertical-align: top; margin-left: .75em; }