@media screen and (min-width:10000px){.wpc_show_bottom_widget .wpc-filters-widget-content{height:auto!important}body.wpc_show_open_close_button .wpc-filters-widget-content.wpc-closed,body.wpc_show_open_close_button .wpc-filters-widget-content.wpc-opened,body.wpc_show_open_close_button .wpc-filters-widget-content:not(.wpc-opened){display:block!important}}@media screen and (min-width:9999px){.wpc-custom-selected-terms{clear:both;width:100%}.wpc-custom-selected-terms ul.wpc-filter-chips-list{display:flex;overflow-x:auto;padding-left:0}.wpc-filters-main-wrap .wpc-custom-selected-terms ul.wpc-filter-chips-list{display:block;overflow:visible}html.is-active .wpc-filters-overlay{top:0;opacity:.3;background:#fff}.wpc-filters-main-wrap input.wpc-label-input+label:hover{border:1px solid rgba(0,0,0,.25);border-radius:5px}.wpc-filters-main-wrap input.wpc-label-input+label:hover span.wpc-filter-label-wrapper{color:#333;background-color:rgba(0,0,0,.25)}.wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input+label:hover a{color:#333}.theme-storefront #primary .storefront-sorting .wpc-custom-selected-terms{font-size:inherit}.theme-storefront #primary .wpc-custom-selected-terms{font-size:.875em}}@media screen and (max-width:9999px){.wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper:after,.wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper:before{display:none;}.wpc_show_bottom_widget .wpc-filters-widget-top-container,.wpc_show_open_close_button .wpc-filters-widget-top-container{text-align:center}.wpc_show_bottom_widget .wpc-filters-widget-top-container{position:sticky;top:0;z-index:99999;border-bottom:1px solid #f7f7f7}.wpc-custom-selected-terms:not(.wpc-show-on-mobile),.wpc-edit-filter-set,.wpc_show_bottom_widget .widget_wpc_selected_filters_widget,.wpc_show_bottom_widget .wpc-filters-widget-content .wpc-filter-set-widget-title,.wpc_show_bottom_widget .wpc-filters-main-wrap .widget-title,.wpc_show_bottom_widget .wpc-filters-widget-wrapper .wpc-filter-layout-submit-button,.wpc_show_bottom_widget .wpc-posts-found,body.wpc_show_bottom_widget .wpc-open-close-filters-button,body.wpc_show_open_close_button .wpc-filters-widget-content:not(.wpc-opened){display:none}.wpc_show_bottom_widget .wpc-filters-widget-top-container:not(.wpc-show-on-desktop),.wpc_show_bottom_widget .wpc-spinner.is-active,.wpc_show_bottom_widget .wpc-widget-close-container,html.is-active body:not(.wpc_show_bottom_widget) .wpc-spinner{display:block}body .wpc-filters-main-wrap li.wpc-term-item{padding:2px 0}.wpc-chip-empty{width:0;display:list-item;visibility:hidden;margin-right:0!important}.wpc-overlay-visible #secondary{z-index:auto}html.is-active:not(.wpc-overlay-visible) .wpc-filters-overlay{top:0;opacity:.2;background:#fff}.wpc-custom-selected-terms.wpc-show-on-mobile ul.wpc-filter-chips-list{display:flex;overflow-x:auto;padding-left:0}html.is-active body:not(.wpc_show_bottom_widget) .wpc-filters-overlay{top:0;opacity:.3;background:#fff}body.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-closed,body.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-opened,body.wpc_show_bottom_widget .wpc-filters-widget-content:not(.wpc-opened){display:block!important}.wpc-open-close-filters-button{display:block;margin-bottom:20px}.wpc-overlay-visible body,html.wpc-overlay-visible{overflow:hidden!important}.wpc_show_bottom_widget .widget_wpc_filters_widget,.wpc_show_bottom_widget .wpc-filters-main-wrap{padding:0!important;margin:0!important}.wpc_show_bottom_widget .wpc-filters-range-column{width:48%;max-width:none}.wpc_show_bottom_widget .wpc-filters-toolbar{display:flex;margin:1em 0}.wpc_show_bottom_widget .wpc-inner-widget-chips-wrapper{display:block;padding-left:20px;padding-right:20px}.wpc_show_bottom_widget .wpc-filters-main-wrap .widget-title.wpc-filter-title{display:flex}.wpc_show_bottom_widget .wpc-inner-widget-chips-wrapper .wpc-filter-chips-list,.wpc_show_open_close_button .wpc-inner-widget-chips-wrapper .wpc-filter-chips-list{display:flex;-webkit-box-pack:start;place-content:center flex-start;overflow-x:auto;padding-top:5px;padding-bottom:5px;margin-left:0;padding-left:0}.wpc-overlay-visible .wpc_show_bottom_widget .wpc-filters-overlay{top:0;opacity:.4}.wpc_show_bottom_widget .wpc-filters-main-wrap .wpc-spinner.is-active+.wpc-filters-widget-content .wpc-filters-scroll-container .wpc-filters-widget-wrapper{opacity:.6;pointer-events:none}.wpc_show_bottom_widget .wpc-filters-open-button-container{margin-top:1em;margin-bottom:1em}.wpc_show_bottom_widget .wpc-filters-widget-content{position:fixed;bottom:0;right:0;left:0;top:5%;z-index:999999;padding:0;background-color:#fff;margin:0;box-sizing:border-box;border-radius:7px 7px 0 0;transition:transform .25s;transform:translate3d(0,120%,0);-webkit-overflow-scrolling:touch;height:auto}.wpc_show_bottom_widget .wpc-filters-widget-containers-wrapper{padding:0;margin:0;overflow-y:scroll;box-sizing:border-box;position:fixed;top:56px;left:0;right:0;bottom:0}.wpc_show_bottom_widget .wpc-filters-widget-content.wpc-filters-widget-opened{transform:translate3d(0,0,0)}.theme-twentyfourteen .wpc_show_bottom_widget .wpc-filters-widget-content,.theme-twentyfourteen.wpc_show_bottom_widget .wpc-filters-scroll-container{background-color:#000}.wpc_show_bottom_widget .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list,.wpc_show_open_close_button .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list{max-height:none}.wpc_show_bottom_widget .wpc-filters-scroll-container{background:#fff;min-height:100%}.wpc_show_bottom_widget .wpc-filters-widget-wrapper{padding:20px 20px 15px}.wpc-filter-everything-dropdown .select2-search--dropdown .select2-search__field,.wpc-sorting-form select,.wpc_show_bottom_widget .wpc-filters-main-wrap input[type=number],.wpc_show_bottom_widget .wpc-filters-main-wrap input[type=text],.wpc_show_bottom_widget .wpc-filters-main-wrap select,.wpc_show_bottom_widget .wpc-filters-main-wrap textarea,.wpc_show_bottom_widget .wpc-search-field,.wpc_show_open_close_button .wpc-search-field,.wpc_show_open_close_button .wpc-filter-search-field{font-size:16px}.wpc-filter-layout-dropdown .select2-container .select2-selection--single,.wpc-sorting-form .select2-container .select2-selection--single{height:auto;padding:6px}.wpc_show_bottom_widget .wpc-filters-section:not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric) .wpc-filter-content ul.wpc-filters-ul-list{overflow-y:visible}.theme-twentyeleven #primary,.theme-twentyeleven #secondary{margin-left:0;margin-right:0;clear:both;float:none}#main>.fusion-row{max-width:100%}.wpc_show_bottom_widget .wpc-filters-open-button-container,.wpc_show_bottom_widget .wpc-filters-widget-controls-container,.wpc_show_bottom_widget .wpc-filters-widget-top-container,.wpc_show_open_close_button .wpc-filters-open-button-container{display:block}} .wpc-preload-img{display:none;}.wpc-filter-more-less:not(.wpc-search-active) .wpc-filters-ul-list > li:nth-child(-n+5){display: list-item;} li.wpc-term-item label span.wpc-term-swatch,.wpc-term-swatch-wrapper{width:32px;min-width:32px;height:32px;} .wpc-term-swatch-wrapper:after{width:12.8px;height:6.4px;left:9.1428571428571px;top:9.1428571428571px;}.wpc-term-image-wrapper{width:70px;min-width:70px;height:40px;}.wpc-filters-section:not(.wpc-filter-more-less):not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric):not(.wpc-filter-layout-dropdown):not(.wpc-filter-terms-count-0) .wpc-filter-content:not(.wpc-filter-has-hierarchy) ul.wpc-filters-ul-list{ max-height: 400px; overflow-y: auto; } .wpc-filters-range-inputs .ui-slider-horizontal .ui-slider-range{ background-color: #ffc107; } .wpc-spinner:after { border-top-color: #ffc107; } .theme-Avada .wpc-filter-product_visibility .star-rating:before, .wpc-filter-product_visibility .star-rating span:before{ color: #ffc107; } body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-wrapper{ background-color: #ffc107; } body .wpc-filters-main-wrap input.wpc-label-input:checked+label{ border-color: #ffc107; } body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label span.wpc-filter-label-wrapper{ background-color: #d8d8d8; } body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label{ border-color: #d8d8d8; } body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input+label:hover{ border-color: #d8d8d8; } body .wpc-filters-main-wrap .wpc-term-disabled input.wpc-label-input:checked+label span.wpc-filter-label-wrapper, body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item.wpc-term-disabled input:checked+label a{ color: #333333; } body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-wrapper, body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input:checked+label a{ color: #333333; } body .wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) a{ border-color: #ffc107; } body .wpc-filters-main-wrap .wpc-filters-widget-controls-container a.wpc-filters-apply-button, body .wpc-filters-main-wrap a.wpc-filters-submit-button{ border-color: #ffc107; background-color: #ffc107; color: #333333; } body .wpc-filter-chips-list li.wpc-filter-chip a:hover{ opacity: 0.9; } body .wpc-filter-chips-list li.wpc-filter-chip a:active{ opacity: 0.75; } .star-rating span, .star-rating span:before{ color: #ffc107; } body a.wpc-filters-open-widget:active, a.wpc-filters-open-widget:active, .wpc-filters-open-widget:active{ border-color: #ffc107; background-color: #ffc107; color: #333333; } a.wpc-filters-open-widget:active span.wpc-icon-line-1:after, a.wpc-filters-open-widget:active span.wpc-icon-line-2:after, a.wpc-filters-open-widget:active span.wpc-icon-line-3:after{ background-color: #ffc107; border-color: #333333; } a.wpc-filters-open-widget:active .wpc-icon-html-wrapper span{ background-color: #333333; } body .wpc-filters-main-wrap input.wpc-label-input+label:hover span.wpc-filter-label-wrapper{ color: #333333; background-color: #ffc107; } body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input+label:hover a{ color: #333333; } body .wpc-filters-main-wrap input.wpc-label-input+label:hover{ border-color: #ffc107; } #ui-datepicker-div.wpc-filter-datepicker .ui-state-active, #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-active, #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-active{ border-color: #ffc107; background: #ffc107; opacity: 0.95; } #ui-datepicker-div.wpc-filter-datepicker .ui-state-hover, #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-hover, #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-hover, #ui-datepicker-div.wpc-filter-datepicker .ui-state-focus, #ui-datepicker-div.ui-widget-content.wpc-filter-datepicker .ui-state-focus, #ui-datepicker-div.wpc-filter-datepicker .ui-widget-header .ui-state-focus{ border-color: #ffc107; background: #ffc107; opacity: 0.6; }#ui-datepicker-div.wpc-filter-datepicker .ui-datepicker-close.ui-state-default{ background: #ffc107; color: #333333; } .flrt-star-label svg{ stroke: #ffc107; } .flrt-star-label-hover svg, .wpc-chip-stars svg{ fill: #ffc107; } .wpc-filter-label-stars-wrapper{ padding: 4px 5px !important; } .wpc-filter-label-stars-wrapper .flrt-star-label svg{ height: 17px; width: 17px; } body .wpc-filters-main-wrap input.wpc-label-input:checked+label span.wpc-filter-label-stars-wrapper .flrt-star-label svg, span.wpc-filter-label-stars-wrapper:hover .flrt-star-label svg{ fill: #333333; } .wpc-filters-main-wrap input[type=checkbox], .wpc-filters-main-wrap input[type=radio]{ -webkit-appearance: none; -moz-appearance: none; position: relative; width: 20px; height: 20px; border: 1px solid #c9d1e0; background: #ffffff; border-radius: 5px; min-width: 20px; } i.wpc-toggle-children-list:after, i.wpc-toggle-children-list:before{ background-color: #b8bcc8; } i.wpc-toggle-children-list:hover:after, i.wpc-toggle-children-list:hover:before{ background-color: #ffc107; } .wpc-filters-widget-content input[type=email], .wpc-filters-widget-content input[type=number], .wpc-filters-widget-content input[type=password], .wpc-filters-widget-content input[type=search], .wpc-filters-widget-content input[type=tel], .wpc-filters-widget-content input[type=text], .wpc-filters-widget-content input[type=url]{ height: 44px; } .wpc-filters-widget-content .wpc-filters-section input[type="number"], .wpc-filters-widget-content .wpc-filters-section input[type="text"]{ border: 1px solid #ccd0dc; border-radius: 6px; background: transparent; box-shadow: none; padding: 8px 16px; } .wpc-filters-main-wrap input[type=checkbox]:after { content: ""; opacity: 0; display: block; left: 3px; top: 3px; position: absolute; width: 12px; height: 12px; border: navajowhite; box-sizing: content-box; background-color: #ffc107; border-radius: 2px; } .wpc-filters-main-wrap input[type=radio]:after { content: ""; opacity: 0; display: block; left: 3px; top: 3px; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #ffc107; box-sizing: content-box; } .wpc-filters-main-wrap input[type=radio]:checked, .wpc-filters-main-wrap input[type=checkbox]:checked { border-color: #ffc107; } .wpc-filters-main-wrap .wpc-radio-item.wpc-term-disabled input[type=radio], .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox], .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox]:after, .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:after, .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox], .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio], .wpc-term-swatch-no-image{ border-color: #d8d8d8; } .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:after, .wpc-filters-main-wrap .wpc-checkbox-item.wpc-term-disabled > div > input[type=checkbox]:after { background-color: #d8d8d8; } .wpc-filters-main-wrap .wpc-radio-item.wpc-term-disabled input[type=radio]:after, .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio]:after{ background-color: #d8d8d8; } .wpc-filters-main-wrap input[type=radio]:checked:after, .wpc-filters-main-wrap input[type=checkbox]:checked:after { opacity: 1; } .wpc-filters-main-wrap input[type=radio] { border-radius: 50%; } .wpc-filters-widget-content .wpc-filters-section .wpc-filter-search-wrapper .wpc-filter-search-field { padding: 8px 16px 8px 48px; } .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]{ padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.33333' stroke='%23b8bcc8' stroke-width='1.33333'/%3E%3Cpath d='M2.66699 7.3335H13.3337' stroke='%23b8bcc8' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M6 10.6667H10' stroke='%23b8bcc8' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M5.33301 2L5.33301 4.66667' stroke='%23b8bcc8' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M10.667 2L10.667 4.66667' stroke='%23b8bcc8' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right 16px bottom 50%; background-size: 16px; } .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]:focus, .wpc-filters-widget-content .wpc-filters-date-range-wrapper input[type="text"]:hover{ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.33333' stroke='%23ffc107' stroke-width='1.33333'/%3E%3Cpath d='M2.66699 7.3335H13.3337' stroke='%23ffc107' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M6 10.6667H10' stroke='%23b8bcc8' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M5.33301 2L5.33301 4.66667' stroke='%23ffc107' stroke-width='1.33333' stroke-linecap='round'/%3E%3Cpath d='M10.667 2L10.667 4.66667' stroke='%23ffc107' stroke-width='1.33333' stroke-linecap='round'/%3E%3C/svg%3E%0A"); } .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow b, .wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__arrow b{ border-left: 1px solid #b8bcc8; border-top: 1px solid #b8bcc8; } .wpc-filter-layout-dropdown .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .wpc-sorting-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{ border-left: 1px solid #b8bcc8; border-top: 1px solid #b8bcc8; } .wpc-filter-collapsible .wpc-filter-title .wpc-open-icon, .wpc-filter-collapsible-reverse.wpc-filter-collapsible.wpc-closed .wpc-filter-title .wpc-open-icon, .wpc-filter-collapsible.wpc-closed .wpc-filter-title .wpc-open-icon, .wpc-filter-has-selected.wpc-closed .wpc-filter-title .wpc-open-icon{ border-left: 1px solid #b8bcc8; border-top: 1px solid #b8bcc8; } .wpc-sorting-form .select2-container--default .select2-selection--single:hover, .wpc-filters-widget-content input[type=email]:hover, .wpc-filters-widget-content input[type=number]:hover, .wpc-filters-widget-content input[type=password]:hover, .wpc-filters-widget-content input[type=search]:hover, .wpc-filters-widget-content input[type=tel]:hover, .wpc-filters-widget-content input[type=text]:hover, .wpc-filters-widget-content input[type=url]:hover{ border-color: rgb(255 193 7 / 0.5); } .wpc-filter-layout-dropdown .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .wpc-sorting-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b, .widget_wpc_sorting_widget .select2-container--default .select2-selection--single:hover .select2-selection__arrow b, .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single:hover .select2-selection__arrow b, .wpc-filter-layout-dropdown .select2-container--default .select2-selection--single:hover, .select2-container--default.select2-container--open .wpc-filter-everything-dropdown.select2-dropdown, .wpc-sorting-form .select2-container--open .select2-selection--single:hover, .widget_wpc_sorting_widget .select2-container--open .select2-selection--single, .wpc-filter-layout-dropdown .select2-container--open .select2-selection--single, .wpc-filters-widget-content input[type=email]:focus, .wpc-filters-widget-content input[type=number]:focus, .wpc-filters-widget-content input[type=password]:focus, .wpc-filters-widget-content input[type=search]:focus, .wpc-filters-widget-content input[type=tel]:focus, .wpc-filters-widget-content input[type=text]:focus, .wpc-filters-widget-content input[type=url]:focus, .wpc-filters-widget-content input[type=email]:active, .wpc-filters-widget-content input[type=number]:active, .wpc-filters-widget-content input[type=password]:active, .wpc-filters-widget-content input[type=search]:active, .wpc-filters-widget-content input[type=tel]:active, .wpc-filters-widget-content input[type=text]:active, .wpc-filters-widget-content input[type=url]:active, .wpc-filter-collapsible .wpc-filter-title button:hover .wpc-open-icon, .wpc-filter-collapsible-reverse.wpc-filter-collapsible.wpc-closed .wpc-filter-title button:hover .wpc-open-icon, .wpc-filter-collapsible.wpc-closed .wpc-filter-title button:hover .wpc-open-icon, .wpc-filter-has-selected.wpc-closed .wpc-filter-title button:hover .wpc-open-icon{ border-color: #ffc107; } .wpc-filters-main-wrap a.wpc-toggle-a:hover { color: #ffc107; } .wpc-sorting-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple, .wpc-filter-layout-dropdown .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .wpc-sorting-form .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple, .wpc-filter-layout-dropdown .select2-container--default.select2-container--open.select2-container--above .select2-selection--single{ border-top: 1px solid transparent; } .wpc-search-field-wrapper .wpc-search-clear-icon-wrapper, .wpc-filter-search-wrapper button.wpc-search-clear{ color: #b5bed2; } .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item label { border-color: #ccd0dc; } .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item label span.wpc-filter-label-wrapper{ padding: 8px 7px; } .wpc-filters-labels li.wpc-term-has-image label:hover .wpc-term-image-wrapper, .wpc-filters-labels li.wpc-term-has-image input[type=checkbox]:checked + label .wpc-term-image-wrapper{ border-color: #ffc107; } @media screen and (min-width: 9999px) { .wpc-filters-main-wrap input[type=radio]:hover, .wpc-filters-main-wrap input[type=checkbox]:hover{ border-color: #ffc107; } .wpc-filter-label-wrapper .wpc-term-swatch-no-image:hover, .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=radio]:hover, .wpc-filters-main-wrap .wpc-term-count-0:not(.wpc-has-not-empty-children) input[type=checkbox]:hover{ border-color: #c3c3c3; } }.wpc-sorting-form select, .wpc-filter-content select{ padding: 2px 8px 2px 10px; border-color: #c9d1e0; border-radius: 3px; color: inherit; -webkit-appearance: none; } .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted::after, .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-selected="true"]::after, .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[data-selected="true"]::after { border: 2px solid #ffc107; content: ""; position: absolute !important; right: 13px !important; width: 18px; height: 10px; top: 30% !important; font-size: 16px !important; color: #000 !important; transform: rotate(137deg) !important; border-bottom: none; border-left: none; box-sizing: border-box; } .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted::after { border-top: 2px solid #C7D1E2; border-right: 2px solid #C7D1E2; } .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted[aria-selected], .select2-container--default .wpc-filter-everything-dropdown .select2-results__option--highlighted[data-selected]{ background-color: rgba(0,0,0,0.05); color: inherit; } @media screen and (max-width: 9999px) { .wpc-sorting-form select, .wpc-filter-content select{ padding: 6px 12px 6px 14px; }} @media screen and (min-width: 9999px) { html.is-active .wpc-spinner{ display: block; }} @media screen and (min-width: 9999px) { html.is-active .wpc-filters-overlay{ opacity: .15; background: #000000; }} .select2.select2-container.select2-container--default{min-width:170px !important;} .wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__rendered{min-height:20px; max-height:20px;} .wpc-sorting-form .select2-container--default .select2-selection--single{border-radius:4px;} /** * seorubio — Filter Everything Pro · CSS Completo * ================================================= * Adaptado al design system de seorubio.com * Pegar en: Filters → Settings → Experimental → Custom CSS * * Usa las variables del tema: * --neutral-0 … --neutral-1000 * --brand-primary (#ffc107) * --brand-secondary (#0d6efd) * --verde, --rojo, --amarillo * * Estructura: * 1. Widget wrapper + títulos de sección * 2. Checkboxes * 3. Labels — grid 2 columnas + card (TODAS las etiquetas) * 4. Labels con swatches — estilos adicionales para miniatura * 5. Dropdowns * 6. Range slider (precio) * 7. Chips (filtros activos) * 8. Posts found (contador) * 9. Show more / less * 10. Botón Apply + Reset * 11. Bottom widget (mobile pop-up) * 12. Horizontal layout * 13. Scrollbar dentro de filtros * 14. Campo de búsqueda * 15. Radio buttons * 16. AJAX loading * 17. Links de filtro — colores default/hover/activo * 18. Paréntesis del contador visibles * 19. Responsive general */ /* ========================================= 1. WIDGET WRAPPER + TÍTULOS ========================================= */ /* Wrapper principal */ .wpc-filters-widget-main-wrapper { font-family: inherit; line-height: 1.5; } /* Cada sección de filtro, separadas por línea fina */ .wpc-filters-widget-main-wrapper .wpc-filters-section { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--neutral-200); } .wpc-filters-widget-main-wrapper .wpc-filters-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } /* Header de filtros → movido a Personalizar → CSS adicional de GP para ganar especificidad sobre .widget-title de GeneratePress */ /* Flecha de colapso */ .wpc-filters-widget-main-wrapper .wpc-filter-title .wpc-filter-toggle-icon { transition: transform 0.2s ease; color: var(--neutral-400); } .wpc-filters-widget-main-wrapper .wpc-filter-title .wpc-filter-toggle-icon:hover { color: var(--neutral-700); } /* ========================================= 2. CHECKBOXES ========================================= */ /* Lista sin estilos de lista */ .wpc-filters-widget-main-wrapper ul.wpc-filters-ul-list { list-style: none; margin: 0; padding: 0; } .wpc-filters-widget-main-wrapper li.wpc-term-item { margin-bottom: 0.125rem; } /* Link del término */ .wpc-filters-widget-main-wrapper li.wpc-term-item a { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: 6px; color: var(--neutral-700); text-decoration: none; font-size: 0.875rem; font-weight: 400; line-height: 1.4; transition: background-color 0.15s ease, color 0.15s ease; } .wpc-filters-widget-main-wrapper li.wpc-term-item a:hover { background-color: var(--neutral-100); color: var(--neutral-900); } /* Término seleccionado */ .wpc-filters-widget-main-wrapper li.wpc-term-item.selected a, .wpc-filters-widget-main-wrapper li.wpc-term-item.checked a { background-color: var(--neutral-100); color: var(--neutral-900); font-weight: 500; } /* Checkbox custom (cuadradito) */ .wpc-filters-widget-main-wrapper li.wpc-term-item .wpc-term-checkbox { width: 16px; height: 16px; min-width: 16px; border: 1.5px solid var(--neutral-300); border-radius: 3px; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background-color 0.15s ease; } .wpc-filters-widget-main-wrapper li.wpc-term-item a:hover .wpc-term-checkbox { border-color: var(--neutral-500); } /* Checkbox marcado */ .wpc-filters-widget-main-wrapper li.wpc-term-item.selected .wpc-term-checkbox, .wpc-filters-widget-main-wrapper li.wpc-term-item.checked .wpc-term-checkbox { background-color: var(--neutral-900); border-color: var(--neutral-900); } .wpc-filters-widget-main-wrapper li.wpc-term-item.selected .wpc-term-checkbox::after, .wpc-filters-widget-main-wrapper li.wpc-term-item.checked .wpc-term-checkbox::after { color: var(--neutral-0); } /* Nombre del término */ .wpc-filters-widget-main-wrapper li.wpc-term-item .wpc-term-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Contador entre paréntesis */ .wpc-filters-widget-main-wrapper li.wpc-term-item .wpc-term-count { font-size: 0.75rem; color: var(--neutral-400); font-weight: 400; margin-left: auto; flex-shrink: 0; } .wpc-filters-widget-main-wrapper li.wpc-term-item.selected .wpc-term-count, .wpc-filters-widget-main-wrapper li.wpc-term-item.checked .wpc-term-count { color: var(--neutral-600); } /* Término deshabilitado (0 productos) */ .wpc-filters-widget-main-wrapper li.wpc-term-item.wpc-term-disabled a { color: var(--neutral-300); pointer-events: none; cursor: default; } .wpc-filters-widget-main-wrapper li.wpc-term-item.wpc-term-disabled .wpc-term-checkbox { border-color: var(--neutral-200); background-color: var(--neutral-50); } .wpc-filters-widget-main-wrapper li.wpc-term-item.wpc-term-disabled .wpc-term-count { color: var(--neutral-300); } /* ========================================= 3. LABELS — grid 2 columnas + card Aplica a TODAS las etiquetas (con y sin swatches). Estilo card redondeado inspirado en gp-variaciones-personalizadas. ========================================= */ /* Grid 3 columnas (labels CON swatches) */ .wpc-filters-main-wrap .wpc-filter-layout-labels.wpc-filter-has-swatches .wpc-filters-labels { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0 0; } /* Grid 3 columnas (labels SIN swatches) en móvil, 3 en PC */ .wpc-filters-main-wrap .wpc-filter-layout-labels:not(.wpc-filter-has-swatches) .wpc-filters-labels { display: grid !important; grid-template-columns: 1fr 1fr 1fr 1fr !important; gap: 0.5rem; padding: 0.5rem 0 0; } /* Reset del width nativo de FE Pro */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Card de cada item — borde redondeado */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item label { display: flex !important; align-items: center; width: 100%; margin: 0 !important; padding: 0 !important; border: 2px solid var(--neutral-200, #E5E7EB) !important; border-radius: 6px !important; background-color: var(--neutral-0, #fff); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; overflow: hidden; } .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item label:hover { border-color: var(--neutral-400, #9CA3AF) !important; background-color: var(--neutral-50, #F9FAFB); } /* Inner wrapper — flex horizontal con padding */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item label span.wpc-filter-label-wrapper { display: flex !important; align-items: center; padding: 0.5rem 0.75rem !important; width: 100%; background-color: transparent !important; border: none !important; border-radius: 0 !important; color: var(--neutral-800, #1F2937); } /* Nombre del término — capitalize */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item a.wpc-filter-link { font-size: 0.8125rem !important; font-weight: 500; color: var(--neutral-800, #1F2937) !important; text-decoration: none !important; text-transform: capitalize; line-height: 1.3; margin: 0 !important; padding: 0 !important; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Contador — discreto a la derecha */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item .wpc-term-count { font-size: 0.6875rem; color: var(--neutral-400, #9CA3AF); font-weight: 400; opacity: 1; white-space: nowrap; flex-shrink: 0; margin-left: auto; } /* --- Estado seleccionado --- */ /* Card seleccionada — borde brand-primary */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label { border-color: var(--brand-primary, #ffc107) !important; border-radius: 6px !important; background: var(--neutral-100); } .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label span.wpc-filter-label-wrapper { background-color: transparent !important; color: var(--neutral-900, #111827) !important; } .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label a.wpc-filter-link { font-weight: 600; color: var(--neutral-900, #111827) !important; } /* Contador en seleccionado — ligeramente más visible */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label .wpc-term-count { color: var(--neutral-600, #4B5563); } /* --- Estado deshabilitado (0 productos) --- */ .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item.wpc-term-count-0 label { opacity: 0.4; pointer-events: none; } /* ========================================= 4. LABELS CON SWATCHES — estilos adicionales Solo aplica cuando el filtro tiene imágenes/color. El grid y la card base ya vienen de la sección 3. ========================================= */ /* Swatch wrapper (miniatura de color) — tamaño natural, sin forzar */ .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item .wpc-term-swatch-wrapper { border-radius: 4px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; overflow: hidden; box-sizing: content-box; flex-shrink: 0; } /* Color interno */ .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item .wpc-term-swatch { border-radius: 4px; } /* Brand/image wrapper — tamaño fijo 36px */ .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item .wpc-term-image-wrapper, .wpc-filters-main-wrap .wpc-filter-has-brands .wpc-filters-labels li.wpc-term-item .wpc-term-image-wrapper { width: 36px !important; min-width: 36px !important; height: 36px !important; border-radius: 6px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; padding: 2px !important; margin: 0 !important; flex-shrink: 0; } /* Thumbnail seleccionado — doble borde oscuro */ .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item input.wpc-label-input:checked + label .wpc-term-swatch-wrapper { border-color: var(--neutral-900, #111827) !important; } /* Quitar overlay oscuro y checkmark nativos de FE Pro */ .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item input:checked + label .wpc-term-swatch-wrapper::before, .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item input:checked + label .wpc-term-swatch-wrapper::after, .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper::before, .wpc-filters-main-wrap .wpc-filter-has-swatches .wpc-filters-labels li.wpc-term-item label:hover .wpc-term-swatch-wrapper::after { display: none !important; } /* ========================================= 5. DROPDOWNS ========================================= */ .wpc-filters-widget-main-wrapper .wpc-filter-layout-dropdown select { width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; border: 1px solid var(--neutral-200); border-radius: 6px; background-color: var(--neutral-0); color: var(--neutral-700); font-size: 0.875rem; font-family: inherit; line-height: 1.4; appearance: none; cursor: pointer; transition: border-color 0.15s ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; } .wpc-filters-widget-main-wrapper .wpc-filter-layout-dropdown select:hover { border-color: var(--neutral-400); } .wpc-filters-widget-main-wrapper .wpc-filter-layout-dropdown select:focus { border-color: var(--brand-secondary); outline: 2px solid rgba(13, 110, 253, 0.15); outline-offset: 0; } /* ========================================= 6. RANGE SLIDER (precio) ========================================= */ /* Contenedor */ .wpc-filters-widget-main-wrapper .wpc-filter-layout-range .wpc-filter-range-wrapper { padding: 0.5rem 0; } /* Track (barra de fondo) */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-line { height: 4px; border-radius: 2px; background-color: var(--neutral-200); } /* Barra activa (entre los dos handles) */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-bar { height: 4px; border-radius: 2px; background-color: var(--neutral-900); } /* Handles (circulitos arrastrables) */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-handle { width: 20px; height: 20px; top: 21px; border-radius: 50%; background-color: var(--neutral-0); border: 2px solid var(--neutral-900); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); cursor: grab; transition: box-shadow 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-handle:hover { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08); } .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-handle:active { cursor: grabbing; } /* Quitar barrita interna del handle irs-flat */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-handle i { display: none; } /* Tooltips de valor (min / max) */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-from, .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-to, .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-single { background-color: var(--neutral-900); color: var(--neutral-0); font-size: 0.75rem; font-weight: 500; padding: 2px 6px; border-radius: 4px; } /* Flechita del tooltip */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-from::before, .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-to::before, .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-single::before { border-top-color: var(--neutral-900); } /* Valores min/max estáticos debajo */ .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-min, .wpc-filters-widget-main-wrapper .wpc-filter-range-wrapper .irs--flat .irs-max { font-size: 0.75rem; color: var(--neutral-400); background-color: transparent; } /* Inputs numéricos del rango */ .wpc-filters-widget-main-wrapper .wpc-filter-range-inputs input[type="number"] { width: 100%; padding: 0.375rem 0.5rem; border: 1px solid var(--neutral-200); border-radius: 6px; font-size: 0.8125rem; color: var(--neutral-700); text-align: center; transition: border-color 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filter-range-inputs input[type="number"]:focus { border-color: var(--brand-secondary); outline: 2px solid rgba(13, 110, 253, 0.15); outline-offset: 0; } /* ========================================= 7. CHIPS (filtros activos seleccionados) ========================================= */ /* Wrapper de chips */ .wpc-chips-wrapper, .wpc-filters-widget-main-wrapper .wpc-filters-chips-wrapper { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; } /* Chip individual → pill negro */ .wpc-chip-item, .wpc-chips-wrapper a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.625rem; border-radius: 100px; background-color: var(--neutral-900); color: var(--neutral-0); font-size: 0.75rem; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease; } .wpc-chip-item:hover, .wpc-chips-wrapper a:hover { background-color: var(--neutral-700); color: var(--neutral-0); } /* Icono × de quitar chip */ .wpc-chip-item .wpc-chip-remove, .wpc-chips-wrapper a .wpc-chip-remove-icon { font-size: 0.625rem; opacity: 0.7; transition: opacity 0.15s ease; } .wpc-chip-item:hover .wpc-chip-remove, .wpc-chips-wrapper a:hover .wpc-chip-remove-icon { opacity: 1; } /* Chip "Limpiar todo" → borde discontinuo */ .wpc-chips-wrapper .wpc-chip-reset-all, .wpc-chip-item.wpc-chip-reset { background-color: transparent; color: var(--neutral-500); border: 1px dashed var(--neutral-300); font-weight: 400; } .wpc-chips-wrapper .wpc-chip-reset-all:hover, .wpc-chip-item.wpc-chip-reset:hover { border-color: var(--rojo); color: var(--rojo); background-color: transparent; } /* ========================================= 8. POSTS FOUND (contador de resultados) ========================================= */ .wpc-filters-widget-main-wrapper .wpc-posts-found, .wpc-posts-found-wrapper { font-size: 0.8125rem; color: var(--neutral-500); font-weight: 400; margin-bottom: 1rem; } .wpc-filters-widget-main-wrapper .wpc-posts-found span, .wpc-posts-found-wrapper strong { font-weight: 600; color: var(--neutral-800); } /* ========================================= 9. SHOW MORE / LESS ========================================= */ .wpc-filters-widget-main-wrapper .wpc-filter-more-less .wpc-show-more, .wpc-filters-widget-main-wrapper .wpc-filter-more-less .wpc-show-less { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0; margin-top: 0.375rem; border: none; background: none; color: var(--brand-secondary); font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: color 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filter-more-less .wpc-show-more:hover, .wpc-filters-widget-main-wrapper .wpc-filter-more-less .wpc-show-less:hover { color: var(--neutral-900); } /* ========================================= 10. BOTÓN APPLY + RESET ========================================= */ /* Aplicar filtros → fondo negro */ .wpc-filters-widget-main-wrapper .wpc-filter-apply-button a, .wpc-filters-widget-main-wrapper .wpc-apply-button a, .wpc-filters-widget-main-wrapper button.wpc-apply-button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.625rem 1rem; border: none; border-radius: 6px; background-color: var(--neutral-900); color: var(--neutral-0); font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filter-apply-button a:hover, .wpc-filters-widget-main-wrapper .wpc-apply-button a:hover, .wpc-filters-widget-main-wrapper button.wpc-apply-button:hover { background-color: var(--neutral-700); } /* Limpiar filtros → borde con hover rojo */ .wpc-filters-widget-main-wrapper .wpc-filter-reset-button a, .wpc-filters-widget-main-wrapper a.wpc-filters-reset-button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.5rem 1rem; margin-top: 0.5rem; border: 1px solid var(--neutral-200); border-radius: 6px; background-color: transparent; color: var(--neutral-600); font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filter-reset-button a:hover, .wpc-filters-widget-main-wrapper a.wpc-filters-reset-button:hover { border-color: var(--rojo); color: var(--rojo); } /* ========================================= 11. BOTTOM WIDGET (mobile pop-up) ========================================= */ /* Botón flotante que abre filtros en mobile — estilo moderno */ .wpc-filters-open-button-container { display: flex; justify-content: center; } body .wpc-filters-open-button-container a.wpc-filters-open-widget, body .wpc-filters-open-button-container a.wpc-open-close-filters-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 100px; background-color: var(--neutral-900, #111827); color: var(--neutral-0, #fff); font-size: 0.875rem; font-weight: 600; line-height: 1.3; text-decoration: none; border: none; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body .wpc-filters-open-button-container a.wpc-filters-open-widget:hover, body .wpc-filters-open-button-container a.wpc-open-close-filters-button:hover { background-color: var(--neutral-800, #1F2937); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); transform: translateY(-1px); } body .wpc-filters-open-button-container a.wpc-filters-open-widget:active, body .wpc-filters-open-button-container a.wpc-open-close-filters-button:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Icono dentro del botón */ body .wpc-filters-open-button-container .wpc-icon-html-wrapper { position: relative; top: 0; } body .wpc-filters-open-button-container .wpc-icon-html-wrapper span { background: var(--neutral-0, #fff); height: 2px; margin-bottom: 3px; } /* Texto del botón */ body .wpc-filters-open-button-container .wpc-filters-button-text { font-size: inherit; font-weight: inherit; color: inherit; } /* Overlay del pop-up */ .wpc-filters-overlay { background-color: rgba(0, 0, 0, 0.4); } /* Panel del pop-up */ .wpc-filters-widget-main-wrapper.wpc-filter-mobile-opened { background-color: var(--neutral-0); } /* Header del pop-up */ .wpc-filters-widget-main-wrapper .wpc-filters-mobile-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--neutral-200); display: flex; align-items: center; justify-content: space-between; } .wpc-filters-widget-main-wrapper .wpc-filters-mobile-header .wpc-filters-mobile-title { font-size: 1rem; font-weight: 600; color: var(--neutral-900); } /* Botón cerrar del pop-up */ .wpc-filters-widget-main-wrapper .wpc-filters-mobile-header .wpc-filters-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background-color: var(--neutral-100); color: var(--neutral-600); cursor: pointer; transition: background-color 0.15s ease; } .wpc-filters-widget-main-wrapper .wpc-filters-mobile-header .wpc-filters-close:hover { background-color: var(--neutral-200); } /* Bottom controls del pop-up (Aplicar + Reset) */ .wpc-filters-widget-main-wrapper .wpc-bottom-controls { padding: 1rem 1.25rem; border-top: 1px solid var(--neutral-200); background-color: var(--neutral-0); } /* ========================================= 12. HORIZONTAL LAYOUT ========================================= */ .wpc-filters-widget-main-wrapper.wpc-filter-horizontal-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; } .wpc-filters-widget-main-wrapper.wpc-filter-horizontal-layout .wpc-filters-section { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } /* ========================================= 13. SCROLLBAR DENTRO DE FILTROS ========================================= */ .wpc-filters-widget-main-wrapper .wpc-filter-content ul.wpc-filters-ul-list { scrollbar-width: thin; scrollbar-color: var(--neutral-300) transparent; } .wpc-filters-widget-main-wrapper .wpc-filter-content ul.wpc-filters-ul-list::-webkit-scrollbar { width: 4px; } .wpc-filters-widget-main-wrapper .wpc-filter-content ul.wpc-filters-ul-list::-webkit-scrollbar-track { background: transparent; } .wpc-filters-widget-main-wrapper .wpc-filter-content ul.wpc-filters-ul-list::-webkit-scrollbar-thumb { background-color: var(--neutral-300); border-radius: 2px; } /* ========================================= 14. CAMPO DE BÚSQUEDA ========================================= */ .wpc-filters-widget-main-wrapper .wpc-search-field input[type="text"], .wpc-filters-widget-main-wrapper input.wpc-search-field { width: 100%; padding: 0.4375rem 0.625rem 0.4375rem 2rem; border: 1px solid var(--neutral-200); border-radius: 6px; background-color: var(--neutral-0); color: var(--neutral-700); font-size: 0.8125rem; font-family: inherit; transition: border-color 0.15s ease; margin-bottom: 0.5rem; } .wpc-filters-widget-main-wrapper .wpc-search-field input[type="text"]:focus, .wpc-filters-widget-main-wrapper input.wpc-search-field:focus { border-color: var(--brand-secondary); outline: 2px solid rgba(13, 110, 253, 0.15); outline-offset: 0; } .wpc-filters-widget-main-wrapper .wpc-search-field input[type="text"]::placeholder, .wpc-filters-widget-main-wrapper input.wpc-search-field::placeholder { color: var(--neutral-400); } /* ========================================= 15. RADIO BUTTONS ========================================= */ .wpc-filters-widget-main-wrapper .wpc-filter-layout-radio li.wpc-term-item .wpc-term-checkbox { border-radius: 50%; } .wpc-filters-widget-main-wrapper .wpc-filter-layout-radio li.wpc-term-item.selected .wpc-term-checkbox, .wpc-filters-widget-main-wrapper .wpc-filter-layout-radio li.wpc-term-item.checked .wpc-term-checkbox { background-color: var(--neutral-0); border-color: var(--neutral-900); box-shadow: inset 0 0 0 3px var(--neutral-0), inset 0 0 0 8px var(--neutral-900); } /* ========================================= 16. AJAX LOADING ========================================= */ .wpc-filters-widget-main-wrapper .wpc-overlay-loading { background-color: rgba(255, 255, 255, 0.6); } /* Quitar scrollbar horizontal nativo de FE Pro en listas de filtros */ .wpc-filters-section:not(.wpc-filter-more-less):not(.wpc-filter-post_meta_num):not(.wpc-filter-tax_numeric):not(.wpc-filter-layout-dropdown):not(.wpc-filter-terms-count-0) .wpc-filter-content:not(.wpc-filter-has-hierarchy) ul.wpc-filters-ul-list { overflow-y: visible !important; } /* ========================================= 17. LINKS DE FILTRO — colores default/hover/activo ========================================= */ /* Default → neutral-900 */ .wpc-filters-widget-main-wrapper .wpc-filters-section li.wpc-term-item a, .wpc-filters-widget-main-wrapper .wpc-filters-section li.wpc-term-item a:visited { color: var(--neutral-900); } /* Hover y activo → brand-primary */ .wpc-filters-widget-main-wrapper .wpc-filters-section li.wpc-term-item a:hover, .wpc-filters-widget-main-wrapper .wpc-filters-section li.wpc-term-item.selected a, .wpc-filters-widget-main-wrapper .wpc-filters-section li.wpc-term-item.checked a { color: var(--brand-primary); } /* ========================================= 18. PARÉNTESIS DEL CONTADOR VISIBLES ========================================= */ .wpc-term-count-brackets-open, .wpc-term-count-brackets-close { display: inline; font-size: inherit; color: inherit; visibility: visible; } /* ========================================= 19. RESPONSIVE ========================================= */ @media (max-width: 767px) { /* Items más grandes para tap targets */ .wpc-filters-widget-main-wrapper li.wpc-term-item a { padding: 0.5rem; font-size: 0.9375rem; min-height: 44px; } /* Chips scroll horizontal */ .wpc-chips-wrapper, .wpc-filters-widget-main-wrapper .wpc-filters-chips-wrapper { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.25rem; } .wpc-chips-wrapper::-webkit-scrollbar, .wpc-filters-widget-main-wrapper .wpc-filters-chips-wrapper::-webkit-scrollbar { display: none; } /* Labels grid con swatches: mantener 2 columnas */ .wpc-filters-main-wrap .wpc-filter-layout-labels.wpc-filter-has-swatches .wpc-filters-labels { grid-template-columns: 1fr 1fr; gap: 0.375rem; } /* Labels grid sin swatches: 2 columnas en móvil */ .wpc-filters-main-wrap .wpc-filter-layout-labels:not(.wpc-filter-has-swatches) .wpc-filters-labels { grid-template-columns: 1fr 1fr; gap: 0.375rem; } .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item label span.wpc-filter-label-wrapper { padding: 0.5rem 0.625rem !important; min-height: 44px; } .wpc-filters-main-wrap .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item a.wpc-filter-link { font-size: 0.75rem !important; } } /* Labels grid dentro del popup mobile — con swatches: 2 cols */ .wpc_show_bottom_widget .wpc-filter-layout-labels.wpc-filter-has-swatches .wpc-filters-labels { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0 0; } /* Labels grid dentro del popup mobile — sin swatches: 2 cols */ .wpc_show_bottom_widget .wpc-filter-layout-labels:not(.wpc-filter-has-swatches) .wpc-filters-labels { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.375rem; padding: 0.5rem 0 0; } .wpc_show_bottom_widget .wpc-filter-layout-labels .wpc-filters-labels li.wpc-term-item { width: 100% !important; } /* Popup mobile — más alto, sin esquinas */ @media screen and (max-width: 768px) { .wpc_show_bottom_widget .wpc-filters-widget-content { top: 0% !important; border-radius: 0 !important; } .wpc-widget-close-container { background: var(--brand-primary); } } /* ========================================= PANEL OVERLAY SLIDE-IN IZQUIERDA Forzar en TODOS los tamaños de pantalla Sobreescribe los estilos inline de FE Pro ========================================= */ /* Ocultar botón nativo — usamos el de la sticky bar */ .wpc-filters-open-button-container { display: none !important; } /* Panel: fixed left, oculto por defecto */ .wpc_show_bottom_widget .wpc-filters-widget-content { position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important; width: 450px !important; max-width: 85vw !important; height: 100% !important; z-index: 999999 !important; padding: 0 !important; margin: 0 !important; background-color: var(--neutral-0, #fff) !important; border-radius: 0 !important; box-sizing: border-box !important; transform: translate3d(-100%, 0, 0) !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; box-shadow: none !important; display: block !important; overflow: hidden !important; } /* Panel abierto */ .wpc_show_bottom_widget .wpc-filters-widget-content.wpc-filters-widget-opened { transform: translate3d(0, 0, 0) !important; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important; } /* Overlay oscuro */ .wpc-overlay-visible .wpc-filters-overlay { top: 0 !important; opacity: 0.4 !important; background: #000 !important; } /* Scroll container dentro del panel */ .wpc_show_bottom_widget .wpc-filters-widget-containers-wrapper { position: absolute !important; top: 56px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; overflow-y: auto !important; padding: 0 !important; margin: 0 !important; -webkit-overflow-scrolling: touch; } /* Header del panel — brand-primary */ .wpc_show_bottom_widget .wpc-widget-close-container { background: var(--brand-primary, #ffc107) !important; position: relative !important; z-index: 10 !important; } /* Bloquear scroll del body */ html.wpc-overlay-visible, html.wpc-overlay-visible body { overflow: hidden !important; } /* Mobile — full width */ @media (max-width: 768px) { .wpc_show_bottom_widget .wpc-filters-widget-content { width: 100% !important; max-width: 100% !important; } .wpc_show_bottom_widget .wpc-filters-widget-containers-wrapper { width: 100% !important; } } .wpc-widget-close-container .wpc-icon-html-wrapper{cursor:pointer; border-radius:4px; left:10px !important;} /* Header drawer — layout con botón reset */ .wpc-widget-close-container { display: flex !important; align-items: center !important; justify-content: space-between !important; } .sr-reset-filters { margin-left: auto; padding: 0.375rem 0.75rem; margin-right:10px; font-size: 0.75rem; font-weight: 600; color: var(--neutral-0); background-color: transparent; border: 1px dashed var(--neutral-0); border-radius: 4px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .sr-reset-filters:hover { background-color: var(--neutral-800); color: var(--neutral-0); } .sr-reset-filters { position: relative; z-index: 2; } .wpc-widget-popup-title { flex: 1; overflow: hidden; } .wpc_show_bottom_widget .wpc-filters-widget-wrapper{padding:5px 10px;} a.wpc-widget-close-icon{widht:50px; height:50px;} .wpc-filters-widget-controls-container{background:var(--neutral-950);} .wpc-filters-widget-controls-wrapper{margin-left:10px; margin-right:10px; padding:15px 0px;} .wpc-filters-widget-top-container{display:none !important;} /* Mostrar ocupa todo el ancho */ .wpc-filters-widget-controls-two { display: none !important; } .wpc-filters-widget-controls-one { width: 100% !important; flex: 1 !important; } .wpc-filters-widget-controls-one .wpc-filters-apply-button { width: 100% !important; display: block !important; text-align: center !important; } .wpc-filters-main-wrap .wpc-filters-widget-controls-container a{padding:10px 0px;} .sr-microcopy{font-size:0.8rem; color:var(--neutral-600); .wpc-help-tip { display: none !important; } .wpc-filter-header .wpc-filter-title button{margin:0px !important;} .wpc-filters-section{margin-bottom:20px !important;} /* ========================================= OTROS ========================================= */