.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 .25s 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:1em;
min-height:1em;
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:1px solid var(--wd-swatch-brd-color);
border-radius:inherit}
[class*="wd-swatches"] {
--wd-swatch-size: 25px;
--wd-swatch-w: 1em;
--wd-swatch-h: 1em;
--wd-swatch-text-size: 16px;
--wd-swatch-h-sp: 15px;
--wd-swatch-v-sp: 10px;
--wd-swatch-inn-sp: .001px;
--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: 20px;
--wd-swatch-text-size: 14px}
[class*="wd-swatches"].wd-size-m {
--wd-swatch-size: 35px}
[class*="wd-swatches"].wd-size-large {
--wd-swatch-size: 45px;
--wd-swatch-text-size: 18px}
[class*="wd-swatches"].wd-size-xlarge {
--wd-swatch-size: 70px;
--wd-swatch-text-size: 24px}
[class*="wd-swatches"].wd-size-xxl {
--wd-swatch-size: 90px;
--wd-swatch-text-size: 32px}
.wd-swatches-grid {
--wd-swatch-v-sp: 5px;
--wd-swatch-h-sp: 8px}
.wd-swatches-grid:is(.wd-size-xs,.wd-size-default) {
--wd-swatch-size: 15px;
--wd-swatch-text-size: 14px}
.wd-swatches-grid.wd-size-m {
--wd-swatch-size: 20px}
.wd-swatches-grid.wd-size-large {
--wd-swatch-size: 25px;
--wd-swatch-text-size: 16px}
.wd-swatches-grid:is(.wd-size-xlarge,.wd-size-xxl) {
--wd-swatch-size: 35px;
--wd-swatch-text-size: 18px}
.wd-swatches-filter {
--wd-swatch-h-sp: 10px}
.wd-swatches-filter.wd-size-small {
--wd-swatch-size: 15px;
--wd-swatch-text-size: 14px}
.wd-swatches-filter.wd-size-large {
--wd-swatch-size: 35px}
[class*="wd-swatches"].wd-shape-round .wd-swatch {
border-radius:1em}
[class*="wd-swatches"].wd-shape-rounded .wd-swatch {
border-radius:5px}