.swatches{display:flex;align-items:center;gap:var(--spacing--0_5, var(--spacing--0_5--base));-webkit-user-select:none;-moz-user-select:none;user-select:none}.swatch-link.is-selected{pointer-events:none}.swatch{--swatch--size: var(--swatch-input--size, 2.2rem);--swatch--border-color: transparent;--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));--swatch--border-radius: var(--swatch-input--border-radius, 50%);--swatch--border-width: 1px;--swatch--padding: .2rem;--ease: var(--ease--inOut--default);--duration: .25s;--_inset: calc(var(--swatch--padding) + var(--swatch--border-width));--inset: var(--_inset);--border-transition: inset var(--duration, var(--duration--default)) var(--ease, var(--ease--default)), box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default)) var(--duration--var(--duration));--border-color: var(--swatch--border-color);--border-width: var(--swatch--border-width);--border-radius: var(--swatch--border-radius);--border-inset: calc(var(--inset, 0px) + var(--border-width));position:relative}.swatch:after{content:"";position:absolute;top:var(--border-inset);right:var(--border-inset);bottom:var(--border-inset);left:var(--border-inset);z-index:1;border-radius:var(--border-radius);box-shadow:0 0 0 var(--border-width) var(--border-color);transition:box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default))}.swatch{display:block;max-width:100%;aspect-ratio:1 / 1;background:var(--swatch--background);background-position:var(--swatch-focal-point, initial);background-size:cover;background-origin:border-box;border-radius:var(--swatch--border-radius);padding:calc(var(--swatch--padding) + var(--swatch--border-width));width:-moz-fit-content;width:fit-content}.swatch:before{content:"";border-radius:var(--border-radius);position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;opacity:0;transition:opacity var(--duration, var(--duration--default)) var(--ease, var(--ease--default));border:rgb(var(--color-background)) calc(var(--swatch--border-width)*2) dotted}.swatch:after{transition:var(--border-transition);will-change:inset,top,left,right,bottom;z-index:0;pointer-events:none}.swatch-input__input:active+.swatch-input__label .swatch{--inset: 0px;--border-transition: inset var(--duration, var(--duration--default)) var(--ease, var(--ease--default)), box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default))}.swatch-input__input:checked+.swatch-input__label .swatch{--inset: 0px;--border-transition: inset var(--duration, var(--duration--default)) var(--ease, var(--ease--default)), box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default))}.swatch.is-selected,.swatch:hover,.swatch-input-wrapper:hover .swatch,.swatch-input__input:focus-visible+.swatch-input__label .swatch{--inset: 0px;--border-transition: inset var(--duration, var(--duration--default)) var(--ease, var(--ease--default)), box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default))}.swatch.is-selected,.swatch-input__input:is(:active,:checked)+.swatch-input__label .swatch,.swatch:hover,.swatch-input-wrapper:hover .swatch,.swatch-input__input:focus-visible+.swatch-input__label .swatch{--inset: 0px;--border-transition: inset var(--duration, var(--duration--default)) var(--ease, var(--ease--default)), box-shadow var(--duration, var(--duration--default)) var(--ease, var(--ease--default))}.swatch-input__input:active+.swatch-input__label .swatch{--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));pointer-events:none;--ease: var(--ease--inOut--default)}.swatch-input__input:checked+.swatch-input__label .swatch{--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));pointer-events:none;--ease: var(--ease--inOut--default)}.swatch.is-selected{--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));pointer-events:none;--ease: var(--ease--inOut--default)}.swatch.is-selected,.swatch-input__input:is(:active,:checked)+.swatch-input__label .swatch{--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));pointer-events:none;--ease: var(--ease--inOut--default)}.swatches:has(.swatch:hover) .swatch.is-selected:not(.does-not-exist):not(.does-not-exist){--ease: var(--ease--out--quart);--inset: var(--_inset)}.swatches:has(.swatch:hover) :is(.swatch-input__input:active+.swatch-input__label .swatch){--ease: var(--ease--out--quart);--inset: var(--_inset)}.swatches:has(.swatch:hover) :is(.swatch-input__input:checked+.swatch-input__label .swatch){--ease: var(--ease--out--quart);--inset: var(--_inset)}.swatches:has(.swatch:hover) :is(.swatch.is-selected,.swatch-input__input:is(:active,:checked)+.swatch-input__label .swatch){--ease: var(--ease--out--quart);--inset: var(--_inset)}.swatch:hover,.swatch-input-wrapper:hover .swatch,.swatch-input__input:focus-visible+.swatch-input__label .swatch{--swatch--border-color: rgb(var(--rgb--border, var(--color--border)));--ease: var(--ease--out--quart)}.swatch-input__input:focus-visible+.swatch-input__label .swatch .swatch__inner{opacity:.75}.swatch:hover:not(.does-not-exist):not(.does-not-exist) .swatch__inner,.swatch-input-wrapper:hover .swatch:not(.does-not-exist) .swatch__inner{opacity:.75}:is(.swatch:hover,.swatch-input-wrapper:hover .swatch,.swatch-input__input:focus-visible+.swatch-input__label .swatch) .swatch__inner{opacity:.75}.swatch-input__input:disabled+.swatch-input__label .swatch{opacity:.5}.swatch.is-unavailable,.swatch-input__input.visually-disabled+.swatch-input__label .swatch{opacity:.5}.swatch.is-unavailable,.swatch-input__input:is(:disabled,.visually-disabled)+.swatch-input__label .swatch{opacity:.5}.swatch.is-unavailable:not(.does-not-exist):not(.does-not-exist):before{opacity:1}.swatch-input__input:disabled+.swatch-input__label .swatch:before{opacity:1}.swatch-input__input.visually-disabled+.swatch-input__label .swatch:before{opacity:1}:is(.swatch.is-unavailable,.swatch-input__input:is(:disabled,.visually-disabled)+.swatch-input__label .swatch):before{opacity:1}.swatch--square{--swatch--border-radius: var(--swatch-input--border-radius, .2rem)}.swatch__inner{border-radius:var(--swatch--border-radius);display:flex;width:var(--swatch--size);overflow:hidden;transition:opacity var(--duration, var(--duration--default)) var(--ease, var(--ease--default));position:relative;z-index:1}.swatch__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.swatch-input__input{clip:rect(0,0,0,0);overflow:hidden;position:absolute;height:1px;width:1px}.swatch-input__label{cursor:pointer}