/* Todos os estados: texto escuro, fundo claro */
.atributo-comum ul li a.atributo-item,
.atributo-comum ul li a.atributo-item:hover,
.atributo-comum ul li a.atributo-item:focus,
.atributo-comum ul li a.atributo-item:active,
.atributo-comum ul li a.atributo-item.selected,
.atributo-comum ul li a.atributo-item.selecionado,
.atributo-comum ul li.active a.atributo-item {
  background: #f2f2f2 !important;
  color: #222 !important;
  border: 2px solid #ccc !important;
}
.atributo-comum ul li a.atributo-item span,
.atributo-comum ul li a.atributo-item:hover span,
.atributo-comum ul li a.atributo-item:active span,
.atributo-comum ul li.active a.atributo-item span {
  background: transparent !important;
  color: #222 !important;
}

/* Só o selecionado ganha destaque */
.atributo-comum ul li.active a.atributo-item {
  border-color: #000 !important;
  font-weight: 700 !important;
}

.atributo-comum ul li.active a.atributo-item::before,
.atributo-comum ul li.active a.atributo-item::after,
.atributo-comum ul li.active::before,
.atributo-comum ul li.active::after {
  display: none !important;
  content: none !important;
}

/* Esconde o check nas variações de cor */
a.atributo-item[data-grade-nome="Cor"]::before,
a.atributo-item[data-grade-nome="Cor"]::after {
  display: none !important;
  content: none !important;
}

/* Contorno fino para a cor branca não "sumir" no fundo branco */
a.atributo-item[data-grade-nome="Cor"] span {
  box-shadow: 0 0 0 1px #ccc;
}

/* Anel escuro na cor selecionada */
li.active a.atributo-item[data-grade-nome="Cor"] span {
  outline: 2px solid #000;
  outline-offset: 2px;
}