.wd - swatch {
  position: relative;display: inline - flex;align - items: center;justify - content: center;width: var (--wd - swatch - w);height: var (--wd - swatch - h);color: var (--color - gray - 900);vertical - align: middle;text - align: center;font - weight: 600;font - size: var (--wd - swatch - size);line - height: 1;cursor: pointer;transition: all .25 s ease
}.wd - swatch: is(img, picture) {
  display: block;max - height: 100 % ;width: inherit;height: inherit;border - radius: inherit;object - fit: cover
}.wd - swatch.wd - bg.wd - swatch - text {
  display: none
}.wd - swatch.wd - text {
  min - width: 1 em;
  min - height: 1 em;
  width: auto;
  height: auto
}.wd - swatch.wd - text.wd - swatch - text {
  padding: 0 calc(var (--wd - swatch - size) / 5);font - size: var (--wd - swatch - text - size)
}.wd - swatch.wd - linked {
  cursor: pointer!important
}.wd - swatch - bg {
  display: inherit;align - items: inherit;justify - content: inherit;width: 100 % ;height: 100 % ;border - radius: inherit
}: is(body: not(.global - color - scheme - light), .color - scheme - dark).wd - swatch.wd - bg.wd - swatch - bg: is(: not([style ^= "background-color"]), [style *= "#ffffff"], [style *= "#FFFFFF"], [style *= "255,255,255"]): before {
  content: "";position: absolute;inset: 0;border: 1 px solid
  var (--wd - swatch - brd - color);border - radius: inherit
} [class *= "wd-swatches"] {
  --wd - swatch - size: 25 px;
  --wd - swatch - w: 3 em;
  --wd - swatch - h: 3 em;
  --wd - swatch - text - size: 16 px;
  --wd - swatch - h - sp: 15 px;
  --wd - swatch - v - sp: 10 px;
  --wd - swatch - inn - sp: .001 px;
  --wd - swatch - brd - color: var (--brdcolor - gray - 200)
}.wd - swatches - product {
  display: inline - flex;align - items: center;flex - wrap: wrap;justify - content: var (--text - align);vertical - align: middle;gap: var (--wd - swatch - v - sp) var (--wd - swatch - h - sp)
}.wd - swatches - product + select {
  display: none
} [class *= "wd-swatches"].wd - size - xs {
  --wd - swatch - size: 20 px;
  --wd - swatch - text - size: 14 px
} [class *= "wd-swatches"].wd - size - m {
  --wd - swatch - size: 35 px
} [class *= "wd-swatches"].wd - size - large {
  --wd - swatch - size: 45 px;
  --wd - swatch - text - size: 18 px
} [class *= "wd-swatches"].wd - size - xlarge {
  --wd - swatch - size: 70 px;
  --wd - swatch - text - size: 24 px
} [class *= "wd-swatches"].wd - size - xxl {
  --wd - swatch - size: 90 px;
  --wd - swatch - text - size: 32 px
}.wd - swatches - grid {
  --wd - swatch - v - sp: 5 px;
  --wd - swatch - h - sp: 8 px
}.wd - swatches - grid: is(.wd - size - xs, .wd - size -
  default) {
  --wd - swatch - size: 15 px;
  --wd - swatch - text - size: 14 px
}.wd - swatches - grid.wd - size - m {
  --wd - swatch - size: 20 px
}.wd - swatches - grid.wd - size - large {
  --wd - swatch - size: 25 px;
  --wd - swatch - text - size: 16 px
}.wd - swatches - grid: is(.wd - size - xlarge, .wd - size - xxl) {
  --wd - swatch - size: 35 px;
  --wd - swatch - text - size: 18 px
}.wd - swatches - filter {
  --wd - swatch - h - sp: 10 px
}.wd - swatches - filter.wd - size - small {
  --wd - swatch - size: 15 px;
  --wd - swatch - text - size: 14 px
}.wd - swatches - filter.wd - size - large {
  --wd - swatch - size: 35 px
} [class *= "wd-swatches"].wd - shape - round.wd - swatch {
  border - radius: 1 em
} [class *= "wd-swatches"].wd - shape - rounded.wd - swatch {
  border - radius: 5 px
}