.color-swatch{height:14px;width:14px;display:inline-block;border-radius:50%;--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity));position:relative;margin-right:6px;outline:none;vertical-align:middle;border:1px solid transparent}.color-swatch:focus:active,.color-swatch:focus{outline:none}.color-swatch.active:before{content:"";width:calc(100% + 4px);height:calc(100% + 4px);border-radius:50%;border:2px solid currentColor;display:inline-block;position:absolute;top:-4px;left:-4px}.color-swatch--white{border-color:var(--gray)}.color-swatch--white.active{border-color:transparent}.color-option-selector{border:2px solid var(--white);display:flex;min-width:36px;min-height:36px;max-width:36px;max-height:36px;justify-content:center;align-items:center;background-color:var(--white);border-radius:58px;transition:all 150ms ease-in-out}@media (min-width: 768px){.color-option-selector{min-width:40px;min-height:40px;max-width:40px;max-height:40px}}.color-option-selector:hover,.color-option-selector:focus{border:2px solid var(--black-alt-25);cursor:pointer}.color-option-selector.active{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.color-option-selector input[type=radio]{opacity:0;z-index:100}.color-option-selector label{cursor:pointer;z-index:90}.swatch-name-container{max-width:0px;overflow-x:hidden;transition:all 400ms ease-in-out;width:0px}.swatch-name-container.active{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content}.swatch-name{display:none;white-space:nowrap;font-size:12px}.swatch-name.active{padding-left:37px;padding-right:13px;display:flex;padding-top:1px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.color-dot{width:16px;height:16px;position:absolute;top:12px;left:13px;border-radius:50%}