.Rojo{
 	background: red !important;
 }

 .Negro{
 	background: black !important;
 }
 .checkmark{
 	left: 1px;
  top: 1px;
 }
 .pro-details-size::after {
  content: '';
  margin-left: 1rem;
  flex-grow: 1;
  border-bottom: 1px solid #CED4DA;
}
.attribute_span{
	background: #ffe4b9;
  padding: 3px;
    padding-right: 3px;
    padding-left: 3px;
  margin: 5px;
  bototm: 10px;
  bottom: 10px;
  position: relative;
  padding-left: 12px;
  padding-right: 12px;

}

.Azul {
  background: #0000ff !important;
}

.Marron, .MARR {
  background: #8b4513 !important;
}

.Rojo, .ROJO, .roja {
  background: #ff0000 !important;
}

.Negro, .NEGRO, .NEGRA {
  background: #000000 !important;
}

.Verde {
  background: #008000 !important;
}

.Surtido {
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff) !important;
}

.Aquamarine {
  background: #7fffd4 !important;
}

.Beige {
  background: #f5f5dc !important;
}

.Blanco, .blanco {
  background: #ffffff !important;
  border: 1px solid #ddd !important;
}

.Transparente {
  background: transparent !important;
  border: 1px solid #ddd !important;
}

.Azul-Marino {
  background: #000080 !important;
}

.Gris {
  background: #808080 !important;
}

.Burdeos {
  background: #800020 !important;
}

.Lila {
  background: #c8a2c8 !important;
}

.Naranja {
  background: #ffa500 !important;
}

.Verde-Pistacho {
  background: #93c572 !important;
}

.Fucsia {
  background: #ff00ff !important;
}

.Azul-Celeste {
  background: #87ceeb !important;
}

.Azul-Claro {
  background: #add8e6 !important;
}

.Rosa {
  background: #ffc0cb !important;
}

.Gris-Oscuro {
  background: #404040 !important;
}

.Azul-Royal {
  background: #4169e1 !important;
}

.Amarillo {
  background: #ffff00 !important;
}

.Natural {
  background: #f5deb3 !important;
}

.Verde-Oscuro {
  background: #006400 !important;
}

.Plata {
  background: #c0c0c0 !important;
}

.Violeta {
  background: #8a2be2 !important;
}

/* Multiple Colors - Gradients */
.NEGRO-DORADO {
  background: linear-gradient(45deg, #000000 50%, #ffd700 50%) !important;
}

.Blanco-Naranja {
  background: linear-gradient(45deg, #ffffff 50%, #ffa500 50%) !important;
}

.Negro-Amarillo {
  background: linear-gradient(45deg, #000000 50%, #ffff00 50%) !important;
}

.Negro-Azul-Marino {
  background: linear-gradient(45deg, #000000 50%, #000080 50%) !important;
}

.Negro-Blanco {
  background: linear-gradient(45deg, #000000 50%, #ffffff 50%) !important;
}

.Negro-Plata {
  background: linear-gradient(45deg, #000000 50%, #c0c0c0 50%) !important;
}

.Negro-Rojo {
  background: linear-gradient(45deg, #000000 50%, #ff0000 50%) !important;
}
.Brown, .Marrón {
  background: brown;
}

/* Common styles for all color swatches */
[class*='swatches-'] {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

[class*='swatches-']:hover {
  transform: scale(1.1);
  border-color: #666;
}