.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: 'dctech-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: 0.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 0.2s ease;
}
.wd-swatches-filter.wd-checkboxes-on li > a:after {
  position: absolute;
  top: calc(50% + 1px);
  transform: translateY(-50%);
  inset-inline-start: 0.2em;
  color: #fff;
  font-weight: 400;
  font-size: 0.7em;
  opacity: 0;
  content: '\f107';
  font-family: 'dctech-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;
}
