.clearfix:after{display:block;clear:both;height:0;visibility:hidden;content:''}.swatch-input{position:absolute;left:-1000px;visibility:hidden}.swatch-attribute-label{position:relative;display:inline-block;margin-bottom:3px;font-weight:700}.swatch-attribute-selected-option{padding-left:17px;color:#646464}.swatch-option{position:relative;float:left;box-sizing:content-box;min-width:30px;max-width:100%;margin:0 10px 5px 0;padding:1px 2px;overflow:hidden;text-align:center;text-overflow:ellipsis;border:1px solid #dadada;border-radius:3px;cursor:pointer;will-change:box-shadow,border}.swatch-option.text{min-width:22px;margin-right:7px;padding:4px 8px;color:var(--base-contrast);font-weight:700;font-size:12px;line-height:20px;background-color:var(--base)}.swatch-option .value{font-weight:400;font-size:11px}.swatch-option.text.selected{color:#000;background-color:#fff;border:1px solid var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}.swatch-option.disabled{background-color:#f0f0f0;border:1px solid #f0f0f0;box-shadow:inset 0 0 0 1px #f0f0f0;box-shadow:unset;cursor:default;pointer-events:none}.swatch-option.disabled .value,.swatch-option.disabled .description{opacity:.2}.swatch-option.image:not(.disabled):hover,.swatch-option.color:not(.disabled):hover{box-shadow:inset 0 0 0 2px var(--primary)}.swatch-option:not(.disabled):hover{color:#333}@media (min-width:768px){@supports not (-webkit-touch-callout:none){.swatch-option.image:not(.disabled):hover,.swatch-option.color:not(.disabled):hover{border:1px solid var(--primary)}.swatch-option:not(.disabled):hover{border:1px solid var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}}}.swatch-attribute-options{margin:0 0 10px}