.color-options {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
}

.color-options::-webkit-scrollbar {
    display: none;
}

.color-circle {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 18px rgba(40, 24, 31, 0.12);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.color-circle:hover {
    transform: scale(1.08);
}

.color-circle.selected {
    transform: scale(1.12);
    border-color: rgba(38, 27, 34, 0.78);
    box-shadow: 0 10px 24px rgba(40, 24, 31, 0.18);
}

.color-circle.Negro { background-color: black; }
.color-circle.Estampados.surtidos { background: linear-gradient(135deg, #ff6b6b, #f9cb28, #4a90e2, #50e3c2, #e94e77); }
.color-circle.Estampados.Varios { background: linear-gradient(135deg, #b0a2a2, #d0b5a1, #8ca4c9, #a9d8c4, #d9a4b3); }
.color-circle.Azul.Petroleo { background-color: #004d99; }
.color-circle.Natural { background-color: #f5f5dc; }
.color-circle.Salmon { background-color: #fab993; }
.color-circle.Marron { background-color: #704e25; }
.color-circle.Fucsia { background-color: #d63384; }
.color-circle.Rosa { background-color: #e67db2; }
.color-circle.Blanco { background-color: #fff; }
.color-circle.Verde { background-color: #006d00; }
.color-circle.Azul.Francia { background-color: #0033cc; }
.color-circle.Amarillo { background-color: rgb(240, 240, 104); }
.color-circle.Verde.Agua { background-color: #a0ca9e; }
.color-circle.Rojo { background-color: red; }
.color-circle.Bordo { background-color: #720101; }
.color-circle.Celeste { background-color: #b0e0e6; }
.color-circle.Azul.Marino { background-color: #022b54; }
.color-circle.Violeta { background-color: #c7a4d5; }
.color-circle.Naranja { background-color: rgb(210, 97, 5); }
.color-circle.Turquesa { background-color: #40e0d0; }
.color-circle.Lila { background-color: #bd71bd; }
.color-circle.Verde.Militar { background-color: #2d3915; }
.color-circle.Lisas,
.color-circle.Estampadas,
.color-circle.Combinada {
    border: 2px solid #fff;
}
.color-circle.Lisas { background: linear-gradient(135deg, #d0d0d0 50%, #b0b0b0 50%); }
.color-circle.Estampadas { background: linear-gradient(135deg, #b3cde0, #f4a582); }
.color-circle.Gris { background-color: rgb(74, 73, 73); }
.color-circle.Combinada { background: linear-gradient(135deg, #d0d0d0 25%, #b0b0b0 25% 50%, #b3cde0 50%, #f4a582 50% 100%); }