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