:root {
--color-text-main: #28292A;
--color-accent: #697CD2;
--color-text-light: #000;
--color-background-filter: #EBECED;
--color-white: #fff;
--layout-gap: 40px;
--results-column-gap: 10px;
--results-row-gap: 30px;
--form-padding: 32px;
--form-fields-margin-top: 83px;
--form-field-margin-bottom: 20px;
--card-padding: 20px;
--card-content-gap: 15px;
--card-thumb-height: 222px;
--pagination-margin-top: 105px;
--pagination-gap: 50px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
}
.wi-filter-form .filter-field label,
.filter-field-search input[type="search"],
.wi-loop-item-card .entry-title,
.sort-by-toggle {
font-family: "Neue Haas Grotesk Display Pro", sans-serif;
}
.chip,
.wi-clear-button,
.wi-loop-item-card .entry-excerpt p,
.wi-filter-pagination .page-numbers,
.wi-filter-form .filter-field label,
.dropdown-toggle {
font-family: "Neue Haas Grotesk Text Pro", sans-serif;
}
.wi-loop-item-card .entry-title {
font-weight: 600;
line-height: 1.2;
}
.wi-filter-form .filter-field label,
.sort-by-current {
font-weight: 500;
display: flex;
align-items: center;
}
.wi-filter-form .filter-field label {
margin: 4px 0;
}
.wi-filter-form .filter-field label:hover {
color: var(--color-accent);
cursor: pointer;
}
.wi-filter-form .filter-field .hierarchical label {
margin: 0;
}
.wi-filter-form .filter-field { cursor: pointer}
.wi-filter-form .filter-field .filter-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-weight: bold;
}
.wi-filter-form .filter-field .filter-label:hover,
.wi-filter-form .filter-field .filter-label.active {color: var(--color-accent);}
.chip,
.remove-chip,
.wi-loop-item-card .entry-excerpt p,
.wi-filter-pagination .page-numbers {
font-weight: 400;
}
.wi-results-header {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: start;
justify-content: space-between;
margin-bottom: 20px;
}
.wi-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.wi-filter-chips .swatch-text {
border: none;
border-radius: 0;
background-color: transparent;
padding: 0;
}
.wi-filter-chips .chip:has(.swatch-image),
.wi-filter-chips .chip:has(.swatch-color) {
background-color: transparent;
padding: 0;
}
.wi-filter-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--layout-gap);
width: 100%;
max-width: 1920px;
}
.wi-filter-column-filter {
flex: 1 1;
width: 100%;
max-width: 450px;
}
.wi-filter-column-content {
flex: 3 1;
width: 100%;
}
.wi-show-filter-button {
display: none;
}
.wi-filter-form {
padding: var(--form-padding);
background-color: var(--color-background-filter);
border-radius: 8px;
position: relative;
}
.wi-clear-button {
position: absolute;
top: 21px;
right: 21px;
font-size: var(--font-size-md);
color: var(--color-text-main);
text-decoration: none;
}
.wi-clear-button:hover {
color: var(--color-accent);
text-decoration: underline;
}
.wi-filter-form .filter-fields {
margin-top: var(--form-fields-margin-top);
}
.wi-filter-form .filter-field {
margin-bottom: var(--form-field-margin-bottom);
}
.wi-filter-form .filter-field label.filter-label {
display: block;
margin-bottom: 0;
font-size: var(--font-size-lg);
font-weight: 600;
line-height: 1;
min-height: 1.2lh;
color: var(--color-text-main);
}
.filter-content {
padding-top: 10px
}
.filter-field-view-dropdown_checkbox .filter-content,
filter-field-view-dropdown_checkbox .filter-content {
display: block !important
}
.search-input-wrapper {
position: relative;
}
.search-input-wrapper::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat;
opacity: 0.6;
}
.filter-field-search input[type="search"] {
width: 100%;
padding: 5px 0 5px 40px !important;
border: none;
border-bottom: 1px solid var(--color-text-main);
background-color: transparent;
border-radius: 0;
font-size: var(--font-size-md);
line-height: 1;
outline: none;
opacity: 0.6;
}
/* FIX: Dropdown Positioning */
.select-wrapper {
position: relative;
}
.dropdown-toggle {
width: 100%;
padding: 8px 0;
background-color: transparent;
border: none;
border-bottom: 1px solid var(--color-text-main);
border-radius: 0 !important;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-md);
color: var(--color-text-main);
opacity: 0.6;
}
.dropdown-toggle::after {
content: '';
background: url("data:image/svg+xml;utf8,") no-repeat center;
width: 11px;
height: 7px;
}
.dropdown-toggle.active::after {
background: url("data:image/svg+xml;utf8,") no-repeat center;
}
.dropdown-menu {
display: none;
margin-top: 24px;
position: absolute;
width: 100%;
background: var(--color-background-filter);
padding: 15px;
z-index: 10;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.dropdown-menu label {
display: flex;
align-items: center;
column-gap: 8px;
font-size: var(--font-size-sm);
font-weight: 450;
line-height: normal;
margin-bottom: 0;
padding-bottom: 12px;
cursor: pointer;
}
.dropdown-menu label:hover {
color: var(--color-accent) !important;
}
/* FIX: Restored Checkbox Style */
.checkbox-list input[type="checkbox"], .radio-list input[type="radio"], .dropdown-menu input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border-radius: 4px;
border: 1px solid var(--color-text-main);
padding: 0 !important;
margin-right: 10px;
cursor: pointer;
flex-shrink: 0;
}
.radio-list input[type="radio"] {
border-radius: 50%;
}
.checkbox-list input[type="checkbox"]:checked, .dropdown-menu input[type="checkbox"]:checked {
border-color: var(--color-accent);
background-color: var(--color-accent);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 1 5 7.5 2 5l-1 .5L5 10l8-8.5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.radio-list input[type="radio"]:checked {
border-color: var(--color-accent);
background-color: var(--color-white);
position: relative;
}
.radio-list input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-accent);
}
/* FIX: Styled Chips */
.chip {
background-color: #e0e0e0;
padding: 6px 15px;
border-radius: 20px;
font-size: var(--font-size-sm);
display: flex;
align-items: center;
white-space: nowrap;
font-weight: 500;
}
.remove-chip {
margin-left: 8px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
opacity: 0.6;
}
.remove-chip:hover {
color: var(--color-accent);
opacity: 1;
}
.sort-by-wrapper { position: relative; }
.sort-by-toggle { appearance: none; background: transparent !important; border: none; cursor: pointer; display: flex; align-items: center; justify-self: end; gap: 8px; padding: 0 !important; }
.sort-by-label, .sort-by-current { font-size: var(--font-size-md); color: var(--color-text-light); }
.sort-by-toggle::after { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--color-text-main); border-bottom: 2px solid var(--color-text-main); transform: translateY(-50%) rotate(45deg); position: relative; top: 50%; }
.sort-by-toggle:hover > span { color: var(--color-accent); }
.sort-by-toggle:hover::after { border-color: var(--color-accent); }
.sort-by-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; background: var(--color-background-filter); border: none; border-radius: 8px; padding: 0; z-index: 10; list-style: none; margin: 0; min-width: 150px; }
.sort-by-menu li { padding: 8px 12px; cursor: pointer; font-size: var(--font-size-sm); white-space: nowrap; border-bottom: 1px solid rgb(40 41 42 / 10%); }
.sort-by-menu li:first-child { border-radius: 8px 8px 0 0; }
.sort-by-menu li:last-child { border: none; border-radius: 0 0 8px 8px; }
.sort-by-menu li.active, .sort-by-menu li:hover { background-color: var(--color-text-main); color: var(--color-white); }
.wi-filter-results { position: relative; min-height: 200px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: var(--results-column-gap); row-gap: var(--results-row-gap); }
.wi-loop-item-card { display: flex; flex-direction: column; background-color: var(--color-white); border: 1px solid #e2e2e2; border-radius: 8px; overflow: hidden; margin: 0; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.wi-loop-item-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0,0,0,0.1); }
.wi-loop-item-card .item-thumbnail { width: 100%; height: 400px; line-height: 0; overflow: hidden; } /*height: var(--card-thumb-height); */
.wi-loop-item-card .item-thumbnail img { width: 100%; height: auto; object-fit: contain; transition: transform 0.3s ease; }
.wi-loop-item-card:hover .item-thumbnail img { transform: scale(1.05); }
.wi-loop-item-card .item-content { display: flex; flex-direction: column; flex-grow: 1; gap: var(--card-content-gap); padding: var(--card-padding); }
.wi-loop-item-card .entry-title { font-size: var(--font-size-xl); text-decoration: none; color: var(--color-text-main); }
.wi-loop-item-card .entry-title a { color: inherit; text-decoration: none; }
.wi-loop-item-card .entry-categories { font-size: var(--font-size-sm); color: #666; margin-bottom: auto; }
.wi-loop-item-card .entry-categories a { color: inherit; text-decoration: none; }
.wi-loop-item-card .entry-categories a:hover { color: var(--color-accent); }
.wi-loop-item-card .entry-price { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text-main); margin-top: var(--card-content-gap); }
.wi-loop-item-card .entry-price ins { text-decoration: none; }
.wi-loop-item-card .entry-price .price { display: flex; gap: 8px; align-items: center; }
/* FIX: Button Styles */
.wi-add-to-cart-container .added_to_cart { display: none; }
.wi-add-to-cart-container > a.button {color: var(--color-white) !important; background-color: var(--color-text-main);}
.wi-add-to-cart-container > a.button:hover {background-color: var(--color-accent);}
.wi-added-to-cart-message { margin-top: 10px; font-size: var(--font-size-sm); color: #1e7e34; text-align: start; font-weight: 500; }
/* FIX: Restored Pagination Arrow Styles */
.wi-filter-pagination { margin-top: var(--pagination-margin-top); display: flex; justify-content: flex-start; align-items: center; gap: var(--pagination-gap); }
.wi-filter-pagination .page-numbers { font-size: var(--font-size-lg); line-height: normal; text-decoration: none; color: var(--color-text-main); opacity: 0.6; }
.wi-filter-pagination .page-numbers.current, .wi-filter-pagination .page-numbers:not(.dots):hover { color: var(--color-accent); opacity: 1; }
.wi-filter-pagination .page-numbers.prev, .wi-filter-pagination .page-numbers.next { opacity: 1; font-size: 0; width: 60px; height: 22px; border: 1px solid var(--color-text-main); background: url("data:image/svg+xml;utf8, ") no-repeat center; background-size: 70%; }
.wi-filter-pagination .page-numbers.prev { transform: scaleX(-1); }
.wi-filter-pagination .page-numbers.prev:hover, .wi-filter-pagination .page-numbers.next:hover { background-color: var(--color-accent); background-image: url("data:image/svg+xml;utf8, "); background-size: 70%; }
/* FIX: Hierarchy List Style */
.hierarchical .term-list, .hierarchical .term-list ul { list-style: none; padding-left: 0; margin: 0; }
.hierarchical .term-list > li {margin: 4px 0;}
.hierarchical .term-list li {min-height: 24px;}
.hierarchical .term-list .children-container { padding-left: 25px !important; padding-top: 10px; }
.hierarchical .term-item { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.hierarchical .toggle-children { cursor: pointer; font-size: 20px; font-weight: bold; line-height: 1; width: 20px; text-align: center; user-select: none; order: 1; }
.hierarchical .toggle-children:hover { color: var(--color-accent); }
.hierarchical label { font-weight: 400; }
/* FIX: Swatch Styles */
.swatch-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.swatch-label { position: relative; cursor: pointer; margin-bottom: 0; }
.hidden-checkbox { display: none; }
.swatch-item { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid transparent; transition: all 0.2s ease; }
.swatch-color, .swatch-image, .swatch-image img { border-radius: 50%; }
.swatch-image img { width: 100%; height: 100%; object-fit: cover; }
.swatch-text { padding: 5px 10px; border-radius: 4px; background-color: var(--color-white); border: 1px solid #ccc; width: auto; height: auto; }
.hidden-checkbox:checked + .swatch-item { box-shadow: 0px 0px 3px 3px rgb(0 0 0 / 50%); border: 1px solid #fff; }
/* Range Sliders & Date Pickers */
.range-slider-wrapper, .date-range-wrapper { margin-top: 10px; }
.range-slider { margin-bottom: 15px; }
.range-inputs { display: flex; justify-content: space-between; gap: 10px; }
.range-inputs input { width: 48%; text-align: center; border: 1px solid #ccc; padding: 5px; border-radius: 4px; background-color: var(--color-white); }
.date-range-wrapper { display: flex; gap: 10px; }
.wi-datepicker { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.ui-slider { background: #d7d7d7; border: 1px solid #ccc; }
.ui-slider-handle { background: var(--color-accent); border: 1px solid var(--color-accent); cursor: pointer; }
.ui-slider-range { background: var(--color-accent); }
#ui-datepicker-div { z-index: 100 !important; }
.item-thumbnail {
position: relative;
overflow: hidden; /* Ensures badges stay within the thumbnail area */
}
.card-badges {
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
gap: 5px;
z-index: 2;
}
.card-badge {
padding: 4px 8px;
font-size: 12px;
font-weight: bold;
color: #fff;
border-radius: 4px;
line-height: 1;
}
.badge-sales { background-color: #21d648; }
.badge-new { background-color: #5bc0de; }
.badge-out-of-stock { background-color: #d9534f; }
/* Media Queries (Unchanged) */
@media (max-width: 992px) {
.wi-filter-wrapper { flex-direction: column; }
.wi-filter-column-filter, .wi-filter-column-content { max-width: 100%; }
.wi-show-filter-button { display: block; min-width: 160px; margin-bottom: 20px; }
.wi-filter-column-filter { display: none; }
}
@media (max-width: 781px) {
.wi-filter-results { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (max-width: 600px) {
.wi-filter-results { grid-template-columns: 1fr; }
}
.wi-filter-form label.no-results {
opacity: 0.5;
pointer-events: none; /* Prevents clicking on options with no results */
}
.wi-filter-form label.no-results input {
cursor: not-allowed;
}
.count {
margin-left: 10px;
}