/* KB&A Product Swatches — front-end */
.kba-swatches{--kba-ring:#c8952f;margin:2px 0}
/* Hide WooCommerce's native select but keep it in the DOM for the variation JS. */
.kba-swatches select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

.kba-swatch-list{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kba-swatch{
	display:inline-block;width:34px;height:34px;border-radius:50%;
	background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f3f3f3;
	border:1px solid rgba(0,0,0,.18);cursor:pointer;position:relative;
	box-shadow:0 0 0 2px #fff inset;transition:transform .12s ease,box-shadow .12s ease;outline:none
}
.kba-swatch--image{border-radius:8px;box-shadow:none}
.kba-swatch:hover{transform:translateY(-1px)}
.kba-swatch:focus-visible{box-shadow:0 0 0 2px #fff inset,0 0 0 3px var(--kba-ring)}

/* selected */
.kba-swatch.is-selected{box-shadow:0 0 0 2px #fff inset,0 0 0 2px var(--kba-ring)}
.kba-swatch--image.is-selected{box-shadow:0 0 0 2px var(--kba-ring)}

/* unavailable for the current combination */
.kba-swatch.is-disabled{cursor:not-allowed;opacity:.4}
.kba-swatch.is-disabled::after{
	content:"";position:absolute;left:50%;top:-3px;width:1px;height:calc(100% + 6px);
	background:rgba(0,0,0,.45);transform:rotate(45deg);transform-origin:center
}

/* empty (no color/image set) shows a subtle checker so it's visible */
.kba-swatch--empty{background-image:linear-gradient(45deg,#e9e9e9 25%,transparent 25%,transparent 75%,#e9e9e9 75%),linear-gradient(45deg,#e9e9e9 25%,#fff 25%,#fff 75%,#e9e9e9 75%);background-size:10px 10px;background-position:0 0,5px 5px}

.kba-swatch-selected{display:inline-block;margin-left:4px;font-size:.9em;color:#555;vertical-align:middle}
.kba-swatch-selected:empty{display:none}

@media (max-width:480px){.kba-swatch{width:38px;height:38px}}