.product-color-picker { border: 0; padding: .65rem 0; margin: 0; min-width: 0; text-align: right; }
.product-color-picker legend { float: none; width: auto; font-size: .95rem; margin-bottom: .65rem; }
.product-color-options { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .5rem; }
.product-color-option { position: relative; display: grid; justify-items: center; gap: .25rem; cursor: pointer; max-width: 5rem; }
.product-color-option input { position: absolute; opacity: 0; width: 36px; height: 36px; margin: 0; cursor: pointer; }
.product-color-swatch { display: grid; place-items: center; width: 36px; height: 36px; border: 3px solid white; border-radius: 50%; background: var(--swatch-color); box-shadow: 0 0 0 1px rgb(175, 181, 190); }
.product-color-swatch i { opacity: 0; display: grid; place-items: center; border-radius: 50%; width: 18px; height: 18px; background: rgb(32, 39, 49); color: white; font-size: .75rem; }
.product-color-option input:checked + .product-color-swatch { box-shadow: 0 0 0 3px rgb(143, 94, 0); }
.product-color-option input:checked + .product-color-swatch i { opacity: 1; }
.product-color-option input:focus-visible + .product-color-swatch { outline: 3px solid rgb(27, 84, 165); outline-offset: 5px; }
.product-color-caption { color: rgb(55, 65, 81); font-size: .75rem; text-align: center; overflow-wrap: anywhere; }
.product-color-caption small { display: block; color: rgb(155, 35, 35); }