.wd-swatches-filter .wd-swatch {
flex:0 0 auto}
.wd-swatches-filter .wd-swatch.wd-bg:before {
position:absolute;
inset:var(--wd-swatch-inn-sp);
display:flex;
align-items:center;
justify-content:center;
border-radius:inherit;
background-color:rgba(0,0,0,0.2);
color:#fff;
font-weight:400;
font-size:calc(var(--wd-swatch-text-size) - 4px);
opacity:0;
transition:inherit;
content:"\f112";
font-family:"woodmart-font"}
.wd-swatches-filter .wd-swatch-wrap.wd-active a:hover .wd-swatch.wd-bg:before {
opacity:1}
.wd-swatches-filter:not(.wd-bg-style-1) .wd-swatch-wrap.wd-active a:hover .wd-swatch.wd-bg:after {
opacity:0}
.wd-swatches-filter .wd-swatch.wd-text+span {
display:none}
.wd-swatches-brands .wd-swatch :is(img,picture) {
object-fit:contain}
.wd-swatches-brands .wd-swatch.wd-bg {
flex:1 0 auto;
max-width:var(--wd-swatch-w);
width:auto;
height:var(--wd-swatch-h);
border-radius:0}
.wd-swatches-brands .wd-swatch.wd-bg:before {
display:none}
.wd-swatches-brands .wd-swatch-bg:before {
border:none !important}
.wd-swatches-brands :is(.wd-swatch-wrap a:hover,.wd-swatch-wrap.wd-active) .wd-swatch.wd-bg {
opacity:.5}
.wd-swatches-filter.wd-swatches-brands {
--wd-swatch-h: 30px;
--wd-swatch-w: 60px}
.wd-swatches-filter.wd-swatches-brands.wd-size-small {
--wd-swatch-w: 45px}
.wd-swatches-filter.wd-swatches-brands.wd-size-large {
--wd-swatch-h: 40px;
--wd-swatch-w: 90px}
.wd-swatch+.wd-filter-lable {
margin-inline-start:10px}
.wd-swatches-filter.wd-labels-off :is(.wd-swatch+span,.count) {
display:none}
.wd-swatches-filter.wd-checkboxes-on li>a {
position:relative}
.wd-swatches-filter:is(.wd-layout-double,.wd-layout-inline) {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--wd-swatch-v-sp) var(--wd-swatch-h-sp)}
.wd-swatches-filter:is(.wd-layout-double,.wd-layout-inline) li {
margin-bottom:0}
.wd-swatches-filter:is(.wd-layout-double,.wd-layout-inline) a {
padding:0;
background:transparent !important}
.wd-swatches-filter:is(.wd-layout-double,.wd-layout-inline):is(.wd-bg-style-1,.wd-text-style-1) {
padding-bottom:5px}
.wd-product-filters .wd-swatches-filter:is(.wd-layout-double,.wd-layout-inline) {
padding:10px}
.wd-swatches-filter.wd-layout-double li {
flex:0 1 calc(50% - var(--wd-swatch-h-sp) / 2)}
.wd-swatches-filter.wd-checkboxes-on li>a:before {
content:"";
display:inline-block;
margin-inline-end:8px;
width:1em;
height:1em;
flex-shrink:0;
border:2px solid var(--brdcolor-gray-300);
vertical-align:middle;
transition:all .2s ease}
.wd-swatches-filter.wd-checkboxes-on li>a:after {
position:absolute;
top:calc(50% + 1px);
transform:translateY(-50%);
inset-inline-start:.2em;
color:#fff;
font-weight:400;
font-size:.7em;
opacity:0;
content:"\f107";
font-family:"woodmart-font"}
.wd-swatches-filter.wd-checkboxes-on li>a:hover:before {
border-color:var(--wd-primary-color)}
.wd-swatches-filter.wd-checkboxes-on li.wd-active>a:before {
background-color:var(--wd-primary-color);
border-color:var(--wd-primary-color)}
.wd-swatches-filter.wd-checkboxes-on li.wd-active>a:after {
opacity:1}