/* WC Color Groups – Frontend Swatches */

.wcg-swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wcg-swatch-item a {
  display: block;
  text-decoration: none;
  position: relative;
  line-height: 0;
}

/* Swatch block */
.wcg-swatch {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.wcg-swatch--img {
  background-size: cover;
  background-position: center;
}

/* Hover */
.wcg-swatch-item a:hover .wcg-swatch {
  border-color: #dc0f7d;
}

/* Selected */
.wcg-swatch-item.chosen .wcg-swatch {
  border-color: #dc0f7d;
  box-shadow: inset 0 0 0 1px #dc0f7d;
}

/* Hide WooCommerce "x" / chosen prefix on selected items */
.wcg-swatch-item.chosen a::before {
  display: none !important;
}

/* Count badge – hidden by default for minimal look */
.wcg-swatch-item .count {
  display: none;
}

/* CSS-only tooltip on hover */
.wcg-swatch-item a::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e1b3a;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 10;
}
.wcg-swatch-item a:hover::after {
  opacity: 1;
}