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

/* Swatches layout */
.wc-ccs-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 12px;
}

.wc-ccs-swatch {
  border: 1px solid #ccc;
  background: #fff;
  padding: 3px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 0;
}

.wc-ccs-swatch:hover {
  border-color: #000;
}

.wc-ccs-swatch.is-selected {
  border-color: #000;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.wc-ccs-chip {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
}

/* help white show up */
.wc-ccs-swatch[title="White"] .wc-ccs-chip,
.wc-ccs-swatch[title="white"] .wc-ccs-chip {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}