:root {
--phox-facet-accent: #6366f1;
--phox-facet-accent-hover: #4f46e5;
--phox-facet-accent-soft: rgba(99, 102, 241, 0.12);
--phox-facet-border: #e5e7eb;
--phox-facet-border-focus: #6366f1;
--phox-facet-bg: #ffffff;
--phox-facet-bg-soft: #f8fafc;
--phox-facet-bg-hover: #f1f5f9;
--phox-facet-text: #1e293b;
--phox-facet-text-muted: #64748b;
--phox-facet-radius: 8px;
--phox-facet-radius-sm: 6px;
--phox-facet-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
--phox-facet-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
--phox-facet-shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.2);
--phox-facet-transition: 0.2s ease;
--phox-facet-title-size: 0.8125rem;
--phox-facet-title-weight: 600;
--phox-facet-title-spacing: 0.04em;
} .phox-facets-loading {
position: relative;
pointer-events: none;
opacity: 0.6;
transition: opacity var(--phox-facet-transition);
}
.phox-facets-dimmed {
opacity: 0.6;
transition: opacity var(--phox-facet-transition);
}
.phox-facets-loader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity var(--phox-facet-transition), visibility var(--phox-facet-transition);
z-index: 100;
}
.phox-facets-loader.active {
opacity: 1;
visibility: visible;
}
.phox-facets-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--phox-facet-bg-soft);
border-top: 3px solid var(--phox-facet-accent);
border-radius: 50%;
animation: phox-spin 0.8s linear infinite;
}
@keyframes phox-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}  .phox-facet {
padding: 1.25em;
max-width: 100%;
box-sizing: border-box;
background: var(--phox-facet-bg);
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius);
box-shadow: var(--phox-facet-shadow);
transition: box-shadow var(--phox-facet-transition), border-color var(--phox-facet-transition);
}
.phox-facet:hover {
border-color: var(--phox-facet-border);
box-shadow: var(--phox-facet-shadow-hover);
}
.phox-facet__title {
font-weight: var(--phox-facet-title-weight);
margin-bottom: 0.875em;
font-size: var(--phox-facet-title-size);
text-transform: uppercase;
letter-spacing: var(--phox-facet-title-spacing);
color: var(--phox-facet-text);
padding-bottom: 0.5em;
border-bottom: 1px solid var(--phox-facet-border);
}
.phox-facet__list {
list-style: none;
padding: 0;
margin: 0;
}
.phox-facet__item {
margin-bottom: 0.5em;
padding: 0.35em 0;
border-radius: var(--phox-facet-radius-sm);
transition: background var(--phox-facet-transition);
}
.phox-facet__item:hover {
background: var(--phox-facet-bg-soft);
}
.phox-facet__empty {
color: var(--phox-facet-text-muted);
font-style: italic;
font-size: 0.9em;
} .phox-facet-checkbox .phox-facet__item {
display: flex;
align-items: center;
gap: 0.5em;
}
.phox-facet-checkbox input[type="checkbox"] {
width: 1.125rem;
height: 1.125rem;
margin: 0;
cursor: pointer;
accent-color: var(--phox-facet-accent);
flex-shrink: 0;
}
.phox-facet-checkbox label {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.625em;
flex: 1;
color: var(--phox-facet-text);
font-size: 0.9375rem;
}
.phox-facet__count {
color: var(--phox-facet-text-muted);
font-size: 0.8125rem;
margin-left: auto;
background: var(--phox-facet-bg-soft);
padding: 0.2em 0.5em;
border-radius: 4px;
}
.phox-facet__count::before { content: "("; }
.phox-facet__count::after { content: ")"; } .phox-facet__search {
margin-bottom: 0.875em;
}
.phox-facet__search-input {
width: 100%;
padding: 0.5em 0.75em;
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
font-size: 0.9em;
background: var(--phox-facet-bg);
transition: border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);
}
.phox-facet__search-input:focus {
outline: none;
border-color: var(--phox-facet-border-focus);
box-shadow: var(--phox-facet-shadow-focus);
} .phox-facet.is-collapsible > .phox-facet__title {
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
.phox-facet.is-collapsible > .phox-facet__title::after {
content: "";
width: 0.45em;
height: 0.45em;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
margin-left: 0.5em;
opacity: 0.5;
}
.phox-facet.is-collapsible.is-collapsed > .phox-facet__title::after {
transform: rotate(-45deg);
}
.phox-facet.is-collapsed > .phox-facet__list,
.phox-facet.is-collapsed > .phox-facet__search {
display: none !important;
} .phox-facet-radio .phox-facet__item {
display: flex;
align-items: center;
gap: 0.5em;
}
.phox-facet-radio input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
cursor: pointer;
accent-color: var(--phox-facet-accent);
}
.phox-facet-radio label {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5em;
flex: 1;
} .phox-facet-dropdown select,
.phox-facet-sort select {
width: 100%;
padding: 0.625em 2.25em 0.625em 0.875em;
font-size: 0.9375rem;
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
background: var(--phox-facet-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.75em center;
background-size: 12px;
appearance: none;
cursor: pointer;
color: var(--phox-facet-text);
transition: border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);
}
.phox-facet-dropdown select:hover,
.phox-facet-sort select:hover {
border-color: var(--phox-facet-text-muted);
}
.phox-facet-dropdown select:focus,
.phox-facet-sort select:focus {
outline: none;
border-color: var(--phox-facet-border-focus);
box-shadow: var(--phox-facet-shadow-focus);
} .phox-facet-search {
position: relative;
}
.phox-facet-search__form {
position: relative;
display: flex;
align-items: center;
}
.phox-facet-search__input {
width: 100%;
padding: 0.625em 2.5em 0.625em 1em;
font-size: 0.9375rem;
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
background: var(--phox-facet-bg);
color: var(--phox-facet-text);
transition: border-color var(--phox-facet-transition), box-shadow var(--phox-facet-transition);
}
.phox-facet-search__input::placeholder {
color: var(--phox-facet-text-muted);
}
.phox-facet-search__input:hover {
border-color: var(--phox-facet-text-muted);
}
.phox-facet-search__input:focus {
outline: none;
border-color: var(--phox-facet-border-focus);
box-shadow: var(--phox-facet-shadow-focus);
}
.phox-facet-search__icon {
position: absolute;
right: 0.8em;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
font-size: 0.9em;
}
.phox-facet-search__clear {
position: absolute;
right: 0.8em;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #999;
cursor: pointer;
font-size: 1.2em;
padding: 0;
line-height: 1;
transition: color var(--phox-facet-transition);
}
.phox-facet-search__clear:hover {
color: #333;
} .phox-facet-range {
padding: 1em 1.25em;
margin: 0;
}
.phox-facet-range__inputs {
display: flex;
align-items: center;
gap: 0.5em;
}
.phox-facet-range__input {
flex: 1;
padding: 0.5em;
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius);
text-align: center;
font-size: 0.9em;
max-width: 100px;
}
.phox-facet-range__input:focus {
outline: none;
border-color: var(--phox-facet-accent);
}
.phox-facet-range__separator {
color: var(--phox-facet-text-muted);
}
.phox-facet-range__prefix,
.phox-facet-range__suffix {
color: var(--phox-facet-text-muted);
font-size: 0.9em;
white-space: nowrap;
}
.phox-facet-range__slider {
margin: 1.5em 0 1em;
position: relative;
height: 30px;
}
.phox-facet-range__track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
transform: translateY(-50%);
background: #e5e5e5;
border-radius: 3px;
pointer-events: none;
}
.phox-facet-range__fill {
position: absolute;
top: 0;
bottom: 0;
background: var(--phox-facet-accent);
border-radius: 3px;
} .phox-facet-range__handle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-appearance: none;
appearance: none;
background: transparent;
pointer-events: none;
outline: none;
transform: translateY(-6px);
} .phox-facet-range__handle::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--phox-facet-bg, #fff);
border: 2px solid var(--phox-facet-accent);
cursor: pointer;
pointer-events: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
.phox-facet-range__handle::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} .phox-facet-range__handle::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--phox-facet-bg, #fff);
border: 2px solid var(--phox-facet-accent);
cursor: pointer;
pointer-events: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.phox-facet-range__handle::-moz-range-thumb:hover {
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
} .phox-facet-range__handle::-moz-range-track {
background: transparent;
border: none;
height: 6px;
} .phox-facet-range .noUi-connect {
background: var(--phox-facet-accent);
}
.phox-facet-range .noUi-handle {
border-color: var(--phox-facet-accent);
}  .phox-facet-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
} .phox-facet-pagination--hidden {
display: none !important;
}
.phox-facet-pagination__numbers,
.phox-facet-pagination__nav {
display: flex;
align-items: center;
gap: 0.5em;
flex-wrap: wrap;
}
.phox-facet-pagination__link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5em;
height: 2.5em;
padding: 0 0.75em;
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
text-decoration: none;
color: var(--phox-facet-text);
font-size: 0.875rem;
font-weight: 500;
transition: all var(--phox-facet-transition);
cursor: pointer;
background: var(--phox-facet-bg);
}
.phox-facet-pagination__link:hover:not(.is-active):not(.is-disabled) {
background: var(--phox-facet-bg-hover);
border-color: var(--phox-facet-text-muted);
color: var(--phox-facet-accent);
}
.phox-facet-pagination__link.is-active {
background: var(--phox-facet-accent);
border-color: var(--phox-facet-accent);
color: #fff;
cursor: default;
box-shadow: var(--phox-facet-shadow);
}
.phox-facet-pagination__link.is-disabled {
opacity: 0.45;
pointer-events: none;
cursor: default;
}
.phox-facet-pagination__ellipsis {
padding: 0 0.25em;
color: #999;
}
.phox-facet-pagination__load-more {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75em 1.75em;
border: 1px solid var(--phox-facet-accent);
border-radius: var(--phox-facet-radius-sm);
background: var(--phox-facet-accent);
color: #fff;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all var(--phox-facet-transition);
}
.phox-facet-pagination__load-more:hover {
background: var(--phox-facet-accent-hover);
border-color: var(--phox-facet-accent-hover);
box-shadow: var(--phox-facet-shadow-hover);
} .phox-facet-reset {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.5em 1em;
background: var(--phox-facet-bg-soft);
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all var(--phox-facet-transition);
color: var(--phox-facet-text-muted);
}
.phox-facet-reset:hover {
background: var(--phox-facet-bg-hover);
border-color: var(--phox-facet-text-muted);
color: var(--phox-facet-text);
}
.phox-facet-reset__icon {
font-size: 1.1em;
opacity: 0.8;
}
.phox-facet-reset-wrapper.is-hidden {
display: none;
}  .phox-facet-results {
font-size: 0.9375rem;
color: var(--phox-facet-text-muted);
}
.phox-facet-results__count {
font-weight: 600;
color: var(--phox-facet-accent);
} .phox-facet-active__list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
align-items: center;
}
.phox-facet-active__item {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.4em 0.75em;
background: var(--phox-facet-bg-soft);
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
font-size: 0.8125rem;
color: var(--phox-facet-text);
transition: background var(--phox-facet-transition), border-color var(--phox-facet-transition);
}
.phox-facet-active__item:hover {
background: var(--phox-facet-bg-hover);
border-color: var(--phox-facet-text-muted);
}
.phox-facet-active__label {
white-space: nowrap;
font-weight: 500;
color: var(--phox-facet-text-muted);
}
.phox-facet-active__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25em;
height: 1.25em;
background: var(--phox-facet-accent);
border: none;
border-radius: 50%;
color: #fff;
font-size: 0.75em;
cursor: pointer;
padding: 0;
line-height: 1;
transition: background var(--phox-facet-transition), transform var(--phox-facet-transition);
}
.phox-facet-active__remove:hover {
background: var(--phox-facet-accent-hover);
transform: scale(1.08);
}
.phox-facet-active__clear-all {
background: var(--phox-facet-bg);
border: 1px solid var(--phox-facet-border);
border-radius: var(--phox-facet-radius-sm);
padding: 0.4em 0.85em;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
color: var(--phox-facet-text-muted);
transition: all var(--phox-facet-transition);
}
.phox-facet-active__clear-all:hover {
background: var(--phox-facet-bg-hover);
border-color: var(--phox-facet-text-muted);
color: var(--phox-facet-text);
}
.phox-facet-active.is-hidden {
display: none;
} .phox-facet__item.is-disabled,
.phox-facet__swatch-item.is-disabled {
opacity: 0.4;
pointer-events: none;
cursor: default;
}
.phox-facet__item.is-disabled label,
.phox-facet__swatch-item.is-disabled .phox-facet__swatch-label {
cursor: default;
}
.phox-facet-dropdown .phox-facet__select option:disabled {
color: var(--phox-facet-text-muted);
opacity: 0.5;
} @media (max-width: 768px) {
.phox-facet-pagination__numbers,
.phox-facet-pagination__nav {
gap: 0.25em;
}
.phox-facet-pagination__link {
min-width: 2em;
height: 2em;
padding: 0 0.5em;
font-size: 0.85em;
}
.phox-facet-range__inputs {
flex-direction: column;
}
.phox-facet-range__separator {
display: none;
}
.phox-facet-range__input {
max-width: none;
}
}  body:has([data-phox-facet="sort"]) .woocommerce-ordering,
body:has([data-phox-facet="sort"]) .breakdance-woocommerce .woocommerce-ordering {
display: none !important;
}
body:has([data-phox-facet]) .woocommerce-pagination,
body:has([data-phox-facet]) .breakdance-woocommerce nav.woocommerce-pagination {
display: none !important;
}
.breakdance-woocommerce .phox-facets-loading {
min-height: 200px;
} @keyframes phox-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.phox-facets-target > * {
animation: phox-fade-in 0.3s ease forwards;
} .phox-facet input:focus-visible,
.phox-facet select:focus-visible,
.phox-facet button:focus-visible,
.phox-facet a:focus-visible {
outline: 2px solid var(--phox-facet-border-focus);
outline-offset: 2px;
} .phox-facet-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}