.colors-wrap { margin-bottom: 20px; }
.colors-wrap .colors-list { display: flex; gap: 10px; flex-wrap: wrap; }
.colors-wrap .colors-list .color-item-wp { border: solid 1px #ccc; position: relative; overflow:hidden; cursor: pointer;}
.colors-wrap .colors-list .color-item-wp .input-color { position: absolute; visibility: hidden; }
.colors-wrap .colors-list .color-item-wp .color-item_text { font-size: 12px; }
.colors-wrap .colors-list .color-item-wp > * { line-height: 1; }
.colors-wrap .colors-list .color-item-wp { position: relative; display: flex; flex-direction: column; gap: 2px; }
.colors-wrap .colors-list .color-item-wp .color-item_image { position: relative; line-height: 0; }
.colors-wrap .colors-list .color-item-wp .color-item_image img { width: 75px; height: 55px; object-fit: cover; }
.colors-wrap .colors-list .color-item-wp input:checked + span.color-item_image:after { bottom: -6px; color: #019b5d; content: "✓"; font-size: 14px; height: 16px; overflow: hidden; position: absolute; right: -3px; width: 16px; top: 0; line-height: 1; font-weight: bold; }
.colors-wrap .colors-list .color-item-wp input:checked + span.color-item_image:before { border: 30px solid transparent; border-top: 30px solid #fff; top: 0; content: ""; position: absolute; right: -30px; }
.colors-wrap .colors-list .color-item-wp .color-item_text {
  background: rgba(32,40,52,.902);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  bottom: 0;
  height: auto;
  max-height: 50%;
  opacity: 1;
  top: unset;
  position: absolute;
  width: 100%;
  text-align: center;
  padding:3px 2px;
  color: #fff;
  transition: all .2s ease-in-out;
}

.colors-wrap .colors-list .color-item-wp:focus .color-item_text,
.colors-wrap .colors-list .color-item-wp:hover .color-item_text{
	top: 100%;
	opacity: 0;
}