.lei-product-attribute-range-filter .wc-block-product-filter-chips__items {
display: none !important;
}
range-slider {
--thumb-width: 16px;
--thumb-height: var(--thumb-width);
--thumb-mobile-scale: 1.4;
--thumb-mobile-width: calc(var(--thumb-width) * var(--thumb-mobile-scale));
--thumb-mobile-height: calc(var(--thumb-height) * var(--thumb-mobile-scale));
--thumb-border: 1px solid #fff;
--thumb-border-radius: 999px;
--thumb-bg: 10 89 254;
--thumb-mobile-scale: 1.4;
--track-height: 4px;
--track-border-radius: var(--thumb-border-radius);
--track-bg: 234 234 234;
--value-font-size: inherit;
--value-color: 40 40 40;
--value-bg: 255 255 255;
--value-border-radius: 3px;
position: relative;
display: inline-block;
}
range-slider input {
margin: 0;
width: 100%;
-webkit-appearance: none;
}
range-slider input:focus {
outline: 0;
}
range-slider::before,
range-slider input::-webkit-slider-runnable-track {
background: rgb(var(--track-bg));
height: var(--track-height);
border-radius: var(--track-border-radius);
}
range-slider input::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: rgba(var(--thumb-bg) / .9);
border: var(--thumb-border);
border-radius: var(--thumb-border-radius);
height: var(--thumb-height);
width: var(--thumb-width);
margin-top: calc(var(--track-height) / 2 - var(--thumb-height) / 2);
transition: box-shadow 200ms ease-out;
}
@media (pointer:coarse) {
range-slider input::-webkit-slider-thumb {
--thumb-height: var(--thumb-mobile-height);
--thumb-width: var(--thumb-mobile-width);
}
}
range-slider input:focus::-webkit-slider-thumb,
range-slider input:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(var(--thumb-bg) / .2);
}
range-slider input::-moz-range-thumb {
-webkit-appearance: none;
cursor: pointer;
background: rgba(var(--thumb-bg) / .9);
border: var(--thumb-border);
border-radius: var(--thumb-border-radius);
height: var(--thumb-height);
width: var(--thumb-width);
margin-top: calc(var(--track-height) / 2 - var(--thumb-height) / 2);
transition: box-shadow 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
range-slider input:focus::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(var(--thumb-bg) / .2);
}
range-slider .filler {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
range-slider .range {
position: absolute;
left: 0;
top: 50%;
height: 0 !important;
overflow: visible;
}
range-slider .range::-webkit-slider-thumb {
position: relative;
z-index: 2;
}
range-slider .range:first-child::-webkit-slider-thumb {
z-index: 3;
}
@-moz-document url-prefix() {
range-slider .range::-moz-range-track {
background: transparent !important;
}
range-slider::before {
content: '';
width: 100%;
position: absolute;
top: calc(50% - var(--track-height) / 2);
}
range-slider .range {
top: calc(50% + 20px);
}
range-slider .range::-moz-range-thumb {
transform: translateY(-20px);
}
} range-slider :nth-child(1 of input)::-webkit-slider-thumb {
anchor-name: --range-slider-thumb-1;
}
range-slider :nth-child(2 of input)::-webkit-slider-thumb {
anchor-name: --range-slider-thumb-2;
}
range-slider :nth-child(1 of output) {
position-anchor: --range-slider-thumb-1;
}
range-slider :nth-child(2 of output) {
position-anchor: --range-slider-thumb-2;
}
range-slider output {
position-area: top;
inset: 0 -5em;
display: none;
margin-bottom: .3em;
position: absolute;
z-index: 4;
text-align: center;
color: rgb(var(--value-color));
background: rgb(var(--value-bg));
border-radius: var(--value-border-radius);
font-size: var(--value-font-size);
filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 2px 3px rgb(0 0 0 / 0.1));
padding: 0.1em 0.3em;
min-width: 1.5em;
}
@supports(anchor-name: --name) {
range-slider output {
display: block;
}
}
range-slider:has(:nth-child(1 of input):focus) :nth-child(1 of output),
range-slider:has(:nth-child(2 of input):focus) :nth-child(2 of output) {
z-index: 5;
}
range-slider:has(:nth-child(1 of input):hover) :nth-child(1 of output),
range-slider:has(:nth-child(2 of input):hover) :nth-child(2 of output) {
z-index: 6;
}
range-slider output::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0px;
height: 0px;
border-style: solid;
border-width: .27em .27em 0 .27em;
border-color: rgb(var(--value-bg)) transparent transparent transparent;
}