/* ZTH Swatches Perfect 2.0.0 */

.zth-swatch-group{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:0;
}

/* Aggressive reset so Hello/Elementor button styles don't affect swatches */
.zth-swatch{
  all:unset !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:26px !important;
  height:26px !important;
  border-radius:999px !important;
  cursor:pointer !important;
  position:relative !important;
  user-select:none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Full-fill circle */
.zth-swatch::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  background:var(--zth-swatch-color, #D1D5DB);
}

/* Outline: none by default */
.zth-swatch{
  border:2px solid transparent !important;
}

/* Selected state: black border only when selected */
.zth-swatch.is-selected{
  border-color:#111827 !important;
  border-width:3px !important;
}

/* Tooltip on hover/focus */
.zth-swatch::after{
  content: attr(aria-label);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  font-size:12px;
  line-height:1;
  padding:6px 8px;
  border-radius:8px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
  z-index:9999;
}

.zth-swatch:hover::after,
.zth-swatch:focus-visible::after{
  opacity:1;
}

/* Focus */
.zth-swatch:focus-visible{
  outline:2px solid #111827 !important;
  outline-offset:2px !important;
}

/* Disabled */
.zth-swatch.is-disabled{
  cursor:not-allowed !important;
  opacity:.35 !important;
}
.zth-swatch.is-disabled::before{
  filter: grayscale(1) !important;
}

/* Hide underlying select but keep it for Woo */
.zth-hidden-select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Notices */
.zth-swatches-notice{
  margin:12px 0;
}
.zth-swatches-notice .zth-dismiss{
  float:right;
  cursor:pointer;
  font-weight:700;
  padding-left:10px;
}