.card-color-indicator.is-selected {
  position: relative;
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  background: var(--product-color, #b8b5ad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.card-color-indicator.is-selected::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  color: #b8e34f;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -76%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

@media (max-width: 768px) {
  .card-color-indicator.is-selected {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .card-color-indicator.is-selected::after {
    font-size: 15px;
  }
}