/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.3-swatches.css
 *
 * Свотчи-кружки в СЕТКЕ каталога: один цветной кружок на каждый цвет-сосед
 * по _gifts_group_id. Источник цвета — pa_czvet (атрибут WC) через
 * kp_color_to_hex() (см. inc/color-map.php).
 *
 * На странице ТОВАРА (single-product галерея) — НЕ применяется: там
 * используются миниатюры (thumb_url из kp_get_product_colors), которые
 * Woodmart-core рендерит своими шаблонами.
 *
 * Высота ряда .kp-prod-swatches (выравнивание карточек) — уже задана в
 * main.css:372 height:20px + страховка min-height в patch-6.2.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Цветной кружок 16×16 — внутри ссылки .kp-prod-swatch / .kp-swatch.
 * border:1px rgba(0,0,0,.12) — лёгкая обводка, чтобы белые/молочные/прозрачные
 * не сливались с белым фоном карточки. flex-shrink:0 — не сжимается, когда
 * соседних кружков несколько и ряд тесный. */
body.kp-body .kp-prod-swatch-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Активный цвет (текущий товар) — чуть толще обводка цвета чернил.
 * .is-active навешивается в шаблоне для соседа с post_id == current. */
body.kp-body .kp-prod-swatch.is-active .kp-prod-swatch-dot,
body.kp-body .kp-swatch.is-active .kp-prod-swatch-dot {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}