/* Color choices for individual products, respecting both site themes. */
.add-to-cart-form.has-colors { flex-wrap: wrap; }
.product-color-picker {
    flex: 0 0 100%; min-width: 0; padding: 15px; margin: 0 0 5px;
    border: 1px solid #323b52; border-radius: 13px;
    background: rgba(125, 135, 165, .055);
}
.product-color-picker legend {
    font-size: 12px; font-weight: 800; padding: 0 7px;
}
.product-color-selected { margin-right: 10px; color: #a3aabd; font-size: 10px; font-weight: 400; }
.product-color-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.product-color-option {
    position: relative; display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; border: 1px solid #40475a; border-radius: 10px;
    padding: 8px 12px; font-size: 11px; transition: border-color .15s, box-shadow .15s;
}
.product-color-option input {
    position: absolute; opacity: 0; width: 1px; height: 1px;
}
.product-color-swatch, .inline-color-swatch {
    width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%;
    background-color: var(--swatch-color); border: 2px solid rgba(128,128,128,.45);
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
.product-color-option:has(input:checked) { border-color: #a957ff; box-shadow: 0 0 0 2px rgba(169,87,255,.26); }
.product-color-option:has(input:focus-visible) { outline: 2px solid #a957ff; outline-offset: 3px; }
.product-color-option:hover { border-color: #ab75ef; }
.product-color-summary { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.inline-color-swatch { width: 13px; height: 13px; flex-basis: 13px; border-width: 1px; }
html[data-theme="light"] .product-color-picker { background: rgba(90,70,130,.045); border-color: #d9d7e2; }
html[data-theme="light"] .product-color-option { border-color: #d6d3df; color: #343042; }
html[data-theme="light"] .product-color-selected { color: #666077; }