.color-white { background-color: #fff; }
.color-black { background-color: #000; }
.color-fosco { background-color: #999; }
.color-bronze1001 { background-color: #8c5e3c; }
.color-bronze1002 { background-color: #7a4a33; }
.color-bronze1003 { background-color: #5c3a28; }
.color-gold { background-color: #ffd700; }
.color-rose { background-color: #e0b7b7; }
.color-chrome {
  background: linear-gradient(
    135deg,
    #f0f0f0 0%,
    #d9d9d9 25%,
    #bfbfbf 50%,
    #d9d9d9 75%,
    #f0f0f0 100%
  );
  border: 1px solid #999;
}

.color-squares {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

@media (min-width: 992px) {
  .color-box {
    width: 1.7rem;
    height: 1.7rem;
    border: 0.08rem solid #ccc;
    border-radius: 0.25rem;
  }
}

@media (max-width: 576px) {
  .color-box {
    width: 1.125rem;
    height: 1.125rem;
    border: 0.063rem solid #ccc;
    border-radius: 0.25rem;
  }
}