.ccsl-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.ccsl-swatch{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(0,0,0,.15);background:#fff;border-radius:999px;min-width:36px;min-height:36px;padding:0 12px;line-height:1;transition:box-shadow .15s ease,border-color .15s ease,transform .05s ease}
.ccsl-swatch:active{transform:scale(.98)}
.ccsl-swatch.is-selected{border-color:rgba(0,0,0,.55);box-shadow:0 0 0 2px rgba(0,0,0,.25)}

/* Button-type */
.ccsl-type-button .ccsl-swatch{border-radius:10px}
.ccsl-type-button .ccsl-swatch-text{font-size:13px}

/* Color-type */
.ccsl-type-color .ccsl-swatch{padding:0;border-radius:999px;min-width:30px;min-height:30px}
.ccsl-type-color .ccsl-swatch.is-selected{box-shadow:0 0 0 3px rgba(228,189,146,.9)}

/* Image-type */
.ccsl-type-image .ccsl-swatch{padding:0;border-radius:12px;min-width:54px;min-height:54px;overflow:hidden}
.ccsl-swatch-img{width:54px;height:54px;object-fit:cover;display:block}

/* A11y */
.ccsl-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Hide native dropdowns but keep them in DOM for Woo variations logic */
.variations_form select.ccsl-select-hidden{
  position:absolute !important;
  left:-99999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Ensure color swatches use their inline background-color (or CSS var fallback) */
.ccsl-swatch.is-color{
  background-color: var(--ccsl-color, #ddd);
}

/* Hide Avada select wrapper when swatches are present */
.variations_form td.ccsl-has-swatches .avada-select-parent{display:none !important;}
.variations_form .ccsl-hide-select{display:none !important;}