.wbkb-swatches {

	display:flex;
	flex-wrap:wrap;
	gap:10px;

}

.wbkb-swatch-color {
	width:36px;
	height:36px;
	border-radius:50%;
	padding: 3px;
	border:2px solid #ddd;
	cursor:pointer;
	transition:.2s ease;

}

.wbkb-swatch-color.active {

    border-color:#23b35b;
	transform:scale(1.05);

}

.wbkb-swatch-color:hover{
    border-color:#23b35b;
}

.wbkb-swatch-color:hover {

	transform:scale(1.08);

}

.wbkb-swatch-button {

	display:flex;
	align-items:center;
	justify-content:center;

	padding:8px 14px;

    border:2px solid #ddd;

	cursor:pointer;

	border-radius:6px;

}

.wbkb-swatch-color.active,
.wbkb-swatch-button.active {

    border-color:#23b35b;

	transform:scale(1.08);

}

.wbkb-swatch-color:hover,
.wbkb-swatch-button:hover{
    border-color:#23b35b;
}

.wbkb-swatches-label {
	margin-bottom: 10px;
}

.wbkb-attribute-header{

	display:flex;

	align-items:center;

	gap:6px;

	font-size:15px;

	font-weight:600;
	margin-top:15px;
	margin-bottom:15px;

}

.wbkb-attribute-name{

	color:#111;

}

.wbkb-selected-value{

	color:#111;

}

.wbkb-selected-color{

	width:12px;

	height:12px;

	border-radius:50%;

	display:inline-block;

	border:2px solid #fff;

	box-shadow:
		0 0 0 1px #d8d8d8;

	flex-shrink:0;

	margin-left:2px;

}


.variations , .variations select{

	position:absolute !important;

	left:-9999px !important;

	opacity:0 !important;

	visibility:hidden !important;

	pointer-events:none !important;

}

.wbkb-swatch-image{
    width:80px;
    height:80px;
    border:2px solid #ddd;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    transition:.2s;
}

.wbkb-swatch-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.wbkb-swatch-image.active{
    border-color:#23b35b;
	transform:scale(1.05);
}

.wbkb-swatch-image:hover{
    border-color:#23b35b;
}

/*
|--------------------------------------------------------------------------
| Unavailable / Out Of Stock Swatches
|--------------------------------------------------------------------------
*/

.wbkb-swatch-color,
.wbkb-swatch-button,
.wbkb-swatch-image {

	position: relative;

}

.wbkb-swatch-unavailable-icon {

	display: none;

}

.wbkb-swatch-color.wbkb-swatch-unavailable,
.wbkb-swatch-button.wbkb-swatch-unavailable,
.wbkb-swatch-image.wbkb-swatch-unavailable {

	opacity: .4;
	filter: grayscale(70%);
	cursor: not-allowed;

}

.wbkb-swatch-unavailable .wbkb-swatch-unavailable-icon {

	display: flex;
	align-items: center;
	justify-content: center;

	position: absolute;
	top: -6px;
	inset-inline-end: -6px;

	width: 16px;
	height: 16px;

	border-radius: 50%;

	background: #dc2626;
	color: #fff;

	font-size: 10px;
	line-height: 1;

	pointer-events: none;

}

.wbkb-swatch-button.wbkb-swatch-unavailable {

	text-decoration: line-through;

}