.product-colors { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; margin:0 0 14px; }
.color-dot { display:inline-block; flex:0 0 auto; width:18px; height:18px; border:1px solid #a0a0a0; border-radius:50%; background:var(--swatch); box-shadow:inset 0 0 0 2px #ffffff45; }
.product-card .product-colors { flex-wrap:nowrap; gap:6px; margin:0 0 12px; }
.product-card .color-dot { width:11px; height:11px; box-shadow:inset 0 0 0 1px #ffffff45; }
button.color-dot { width:32px; height:32px; cursor:pointer; }
button.color-dot[aria-pressed="true"] { outline:2px solid var(--accent); outline-offset:3px; }
button.color-dot:focus-visible { outline:3px solid #1d1d1f; outline-offset:4px; }
.selected-color { color:#64748b; font-size:.85rem; margin:-4px 0 18px; }
.colors-admin-button { display:block; margin:5px 8px; padding:6px 10px; font-size:.75rem; border:1px solid #dce3ed; border-radius:6px; background:#f8fafc; cursor:pointer; }
.color-editor { width:min(760px, calc(100% - 24px)); max-height:90dvh; margin:auto; border:0; border-radius:16px; padding:22px; color:#1d1d1f; }
.color-editor::backdrop { background:#0009; }
.color-editor h2 { font-size:1.1rem; margin-bottom:16px; }
.color-editor .colors-enabled { display:flex; align-items:center; gap:9px; font-weight:600; margin-bottom:8px; }
.color-editor .colors-enabled input { width:18px; height:18px; }
.color-editor p { font-size:.8rem; color:#64748b; margin-bottom:16px; }
.color-editor .color-table-wrap { overflow-x:auto; margin-bottom:12px; }
.color-editor table { width:100%; border-collapse:collapse; min-width:390px; }
.color-editor th, .color-editor td { padding:8px; text-align:left; border-bottom:1px solid #e5e7eb; font-size:.8rem; }
.color-editor th { background:#f8fafc; }
.color-editor input[type=text] { width:100%; min-width:100px; padding:8px; border:1px solid #dce3ed; border-radius:5px; }
.color-editor input[type=color] { width:36px; height:32px; padding:2px; border:1px solid #dce3ed; background:white; border-radius:5px; cursor:pointer; }
.color-photo-upload { display:flex; align-items:center; gap:8px; cursor:pointer; position:relative; color:#0071e3; }
.color-photo-upload img { width:40px; height:48px; object-fit:contain; }
.color-photo-upload input { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.color-photo-upload:focus-within { outline:2px solid #0071e3; }
.color-editor button { padding:8px 12px; border:1px solid #dce3ed; border-radius:7px; background:#f8fafc; cursor:pointer; }
.color-editor button:disabled { opacity:.5; cursor:wait; }
.color-editor-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.color-editor .save-colors { background:#0071e3; color:white; border-color:#0071e3; }
#colorEditorError { color:#b42318; margin-top:12px; }
.color-order { min-width:112px; }
.color-position { display:block; font-size:.7rem; font-weight:600; margin-bottom:5px; color:#64748b; white-space:nowrap; }
.color-order-buttons { display:flex; gap:3px; }
.color-editor .color-order-buttons button { padding:5px 7px; font-size:.7rem; }
.color-editor .color-order-buttons button:disabled { cursor:default; opacity:.3; }
@media (max-width:600px) {
    .product-card .product-colors { flex-wrap:nowrap; gap:3px; margin-bottom:10px; width:100%; }
    .product-card .color-dot { flex:0 1 12px; width:12px; height:auto; aspect-ratio:1; min-width:0; box-sizing:border-box; box-shadow:inset 0 0 0 1px #ffffff45; }
    #detColors .product-colors { flex-wrap:nowrap; gap:8px; padding:5px; }
    #detColors button.color-dot { flex:0 1 26px; width:26px; height:auto; aspect-ratio:1; min-width:0; box-sizing:border-box; }
}