/* Hide the original dropdown but keep it in DOM for Woo variation JS */
select.wc-vcs-hidden-select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Container sits inside the same td.value cell */
.wc-vcs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

/* Round circle button */
.wc-vcs-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgb(255, 255, 255);           /* white circle */
  color: rgb(63, 64, 71);                    /* dark text */
  border: 1px solid rgba(63, 64, 71, 0.35);  /* subtle outline */
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


/* Inner white ring so the circle edge is always visible */
/* Inner ring for depth */
.wc-vcs-swatch::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  border: 1px solid rgba(63, 64, 71, 0.25);
  pointer-events: none;
}



.wc-vcs-swatch:hover {
  border-color: rgb(63, 64, 71);
}

.wc-vcs-swatch:hover::before {
  border-color: rgba(63, 64, 71, 0.6);
}


.wc-vcs-swatch.is-selected {
  box-shadow:
    0 0 0 2px rgba(63, 64, 71, 0.35),
    0 0 0 3px rgba(63, 64, 71, 0.85);
}



/* Text inside circle */
.wc-vcs-swatch__text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 0 6px; /* helps with “XL” etc. */
  user-select: none;
}