/* Hide original WooCommerce dropdown for color swatches (keep in DOM for variations JS) */
.phvs-hidden-select{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;}
.phvs-hidden-select select{display:block !important;}

.phvs-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  margin:8px 0 12px;
}

.phvs-swatch{
  width:var(--phvs-size, 34px);
  height:var(--phvs-size, 34px);
  border-radius:var(--phvs-radius, 999px);
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:transform .08s ease, opacity .12s ease;
  box-sizing:border-box;
}

.phvs-swatch:active{ transform: scale(.98); }

.phvs-swatch.is-selected{
  outline:2px solid rgba(0,0,0,.75);
  outline-offset:2px;
}

.phvs-swatch.is-disabled{
  opacity:.35;
  cursor:not-allowed;
}

.phvs-type-color .phvs-dot{
  width:calc(var(--phvs-size, 34px) - 8px);
  height:calc(var(--phvs-size, 34px) - 8px);
  border-radius:inherit;
  background: var(--phvs-swatch, #fff);
  border:1px solid rgba(0,0,0,.12);
}

.phvs-type-image .phvs-img{
  width:calc(var(--phvs-size, 34px) - 6px);
  height:calc(var(--phvs-size, 34px) - 6px);
  border-radius:calc(var(--phvs-radius, 999px) - 6px);
  background-image: var(--phvs-img);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(0,0,0,.10);
}

/* LABELS (configurable) */
.phvs-type-label .phvs-swatch{
  height: var(--phvs-size, 34px);
  min-width: 44px;
  padding: 0 10px;
  width: auto;
}
.phvs-type-label .phvs-label{
  display:block;
  max-width:100%;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}
.phvs-labelmode-single .phvs-swatch{ max-width: var(--phvs-label-max, 140px); }
.phvs-labelmode-single .phvs-label{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.phvs-labelmode-two .phvs-swatch{
  max-width: var(--phvs-label-max, 140px);
  height: auto;
  padding: 8px 10px;
}
.phvs-labelmode-two .phvs-label{
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  white-space:normal;
}

.phvs-labelmode-fixed .phvs-swatch{ width: var(--phvs-label-fixed, 120px); }
.phvs-labelmode-fixed .phvs-label{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

.phvs-type-label .phvs-swatch.is-selected{
  background:#000;
  color:#fff;
  border-color:#000;
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.2);
}

.phvs-clear{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}

.phvs-tooltip{
  position:absolute;
  transform: translate(-50%, -100%);
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  font-size:12px;
  box-shadow:0 6px 22px rgba(0,0,0,.12);
  pointer-events:none;
  opacity:0;
  transition:opacity .10s ease;
  z-index:999999;
}
.phvs-tooltip.is-visible{ opacity:1; }

.phvs-loop-preview{ margin-top:8px; }
.phvs-loop-preview .phvs-swatches{ margin:6px 0 0; gap:8px; }
.phvs-preview .phvs-swatch{ cursor:default; pointer-events:none; }

@media (max-width: 480px){
  .phvs-labelmode-single .phvs-swatch,
  .phvs-labelmode-two .phvs-swatch{ max-width: 110px; }
  .phvs-labelmode-fixed .phvs-swatch{ width: 110px; }
}