/* patch-6.0-swatches.css
   Свотчи = мини-фото товаров-соседей по группе (_gifts_group_id).
   Источник перенесён с pa_czvet (никогда не заполнялся) на kp_get_product_colors()
   через postmeta (RESUME 2026-05-29). Покрывает оба рендера:
     .kp-swatch          — карусель главной (template-parts/home/products-carousel.php)
     .kp-prod-swatch     — универсальная карточка (template-parts/product-card.php)
   Скоуп: body.kp-body.
*/

/* контейнер */
body.kp-body .kp-prod-swatches{
  display:flex;
  gap:6px;
  align-items:center;
  height:auto;
  min-height:22px;
  margin-top:6px;
  flex-wrap:nowrap;
}

/* свотч-ссылка (общие правила для обеих обёрток) */
body.kp-body .kp-prod-swatches .kp-swatch,
body.kp-body .kp-prod-swatches .kp-prod-swatch{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1.5px solid rgba(0,0,0,.12);
  background:#fff;
  padding:0;
  overflow:hidden;
  flex-shrink:0;
  display:block;
  line-height:0;
  transition:transform .15s, border-color .15s, opacity .15s;
  opacity:.85;
}

body.kp-body .kp-prod-swatches .kp-swatch img,
body.kp-body .kp-prod-swatches .kp-prod-swatch img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

body.kp-body .kp-prod-swatches .kp-swatch:hover,
body.kp-body .kp-prod-swatches .kp-prod-swatch:hover{
  transform:scale(1.15);
  opacity:1;
  border-color:rgba(0,0,0,.25);
}

body.kp-body .kp-prod-swatches .kp-swatch.is-active,
body.kp-body .kp-prod-swatches .kp-prod-swatch.is-active{
  border:2px solid var(--yellow,#ffca28);
  opacity:1;
}

/* счётчик "+K" */
body.kp-body .kp-prod-swatches .kp-swatch-more,
body.kp-body .kp-prod-swatches .kp-prod-swatch-more{
  font-size:11px;
  font-weight:700;
  color:var(--ink-3,#a0a0a0);
  margin-left:2px;
  font-feature-settings:"tnum";
}