/* размер и поведение кружка для SKU */
.sku-feature { display: inline-block; margin: 0 12px 12px 0; }
.sku-feature__input { position: absolute; opacity: 0; pointer-events: none; }

.sku-feature__color{
  width: 80px;
  height: 80px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.12);
  padding: 6px;                    
  background-clip: content-box;    
  background-origin: content-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* hover подсветка (если у темы её нет на tooltip wrapper) */
.sku-feature:hover .sku-feature__color,
.sku-feature:focus-within .sku-feature__color{

}

/* выбранное состояние: затемнение + галочка */
.sku-feature__input:checked + .sku-feature__color::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.18);     /* лёгкая подложка под галочку */
}

.sku-feature__input:checked + .sku-feature__color::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 26px;
  height: 26px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:26px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/%3E%3C/svg%3E");
}

.sku-feature__input:checked + .sku-feature__color::before{
  content:"";
  position:absolute;
  inset: 6px;                      /* тот же, что padding */
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}

.sku-feature__input:checked + .sku-feature__color::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: 26px;
  height: 26px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:26px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7 19.6 5.6z'/%3E%3C/svg%3E");
}