.variant-color-picker{display:flex;flex-direction:column;margin-top:var(--ds-space-9)}.product__card-info .variant-color-picker{align-items:baseline;flex-direction:row}.variant-color-picker--disabled{opacity:.5}.variant-color-picker--disabled div{cursor:default}.variant-color-picker__color-name{margin-top:var(--ds-space-6)}.variant-color-picker .c-variant-selector__label{margin:0;padding:0}.variant-color-picker.variant-read-only ul li button{height:16px;width:16px}.variant-color-picker ul{display:flex;list-style:none;margin:var(--ds-space-6) 0 0 0;padding:0}.variant-color-picker ul li:nth-of-type(n+2){cursor:default;margin-left:var(--ds-space-1)}.variant-color-picker ul li:hover{cursor:pointer}.product__card-info .variant-color-picker ul li:hover{cursor:default}.variant-color-picker ul li button{align-items:center;background:none;border:none;cursor:pointer;display:flex;flex-wrap:wrap;height:44px;justify-content:center;padding:0;width:44px}.variant-color-picker ul li button:focus{outline:none}.variant-color-picker ul li button:focus-visible{outline:4px solid var(--ds-color-focus-default);outline-offset:-4px}.variant-color-picker ul li button>div{border:1.5px solid transparent;border-radius:50px;box-sizing:border-box;height:36px;position:relative;width:36px}.product__card-info .variant-color-picker ul li button>div{height:10px;padding-right:10px;width:10px}.variant-color-picker ul li button>div>div{border-radius:50%;content:"";height:24px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:24px}.product__card-info .variant-color-picker ul li button>div>div{height:10px;width:10px}.variant-color-picker ul li.selected button{cursor:default}.variant-color-picker ul li.selected button>div{border-color:var(--ds-color-fg-link-on-color);transition:border-color .2s}.variant-color-picker ul li.disabled{pointer-events:none}.variant-color-picker ul li.disabled button{cursor:default}.variant-color-picker ul li.disabled button>div>div:after{border-top:2px solid red;content:"";left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotate(-45deg);width:100%}.variant-color-picker>p{font-size:12px;margin:0 0 0 var(--ds-space-1);padding:0}@media (min-width:768px){.variant-color-picker__color-name{margin-top:var(--ds-space-4)}}