/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.4-swatches-color.css
 *
 * Цветные свотчи (путь B): кружок из filter type=21 поставщика, gradient для
 * двухцветных, спецрендер для "прозрачный" и "полноцвет".
 *
 * Источник: _gifts_colors (CSV до 2 filterid) → kp_color_id_to_hex().
 * Рендер: kp_render_swatch_dot() в inc/helpers.php — 4 ветки:
 *   обычный hex / gradient / special (transparent|rainbow) / fallback-thumb.
 *
 * patch-6.3 ставил базовый .kp-prod-swatch-dot с border .12 — оставляем.
 * Здесь добавляем спецрендеры и стили для fallback-миникартинки.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Прозрачный (filterid 22) — клетка-фотошоп ──────────────────────────────
 * Шахматный паттерн 4×4 через линейный gradient (репитингом). Используем
 * conic-free вариант для совместимости со старыми движками.
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-transparent {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

/* ── Полноцвет (filterid 17152) — радужный conic ───────────────────────────
 * Conic-gradient поддерживается во всех современных браузерах (Chrome 69+,
 * Safari 12.1+, Firefox 83+).
 */
body.kp-body .kp-prod-swatch-dot.kp-swatch-rainbow {
  background: conic-gradient(
    #D32F2F, #F57C00, #FBC02D, #43A047,
    #1AA89A, #1B4D8F, #7B3FA0, #E91E63, #D32F2F
  );
}

/* ── Fallback-миникартинка (товар без _gifts_colors, ~11%) ─────────────────
 * <img class="kp-prod-swatch-thumb"> внутри ссылки .kp-prod-swatch/.kp-swatch.
 * Размер и форма — те же 16×16 кружком, чтобы выровнять с цветными свотчами.
 * Рамка через box-shadow inset (не border) для единообразия с .kp-prod-swatch-dot.
 */
body.kp-body .kp-prod-swatch-thumb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  flex-shrink: 0;
  object-fit: cover;
  vertical-align: middle;
}

/* ── Рамка кружка через box-shadow inset, НЕ border ─────────────────────────
 *
 * Перебиваем patch-6.3:25 (`border: 1px solid rgba(0,0,0,.12)`). Проблема
 * border-а на градиентном фоне: на диагонали 135° стык двух половин и
 * пиксели border'а дают визуальную "грязь" + тёмный угол на стыке.
 *
 * box-shadow inset рисуется ВНУТРИ кружка, поверх любого background
 * (хоть одноцветного, хоть gradient, хоть conic), одинаково по всему периметру
 * — никаких артефактов на стыке градиента. Также чуть увеличиваем непрозрачность
 * (.18 vs .12) — белый/прозрачный/неокрашенный не сливаются с фоном карточки.
 */
body.kp-body .kp-prod-swatch-dot {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

/* ── Активный (текущий товар группы) ───────────────────────────────────────
 *
 * Перебиваем patch-6.3:32-36, где было border-color:ink + box-shadow:1px ink —
 * двойная обводка давала "зацеп" в углу. Здесь — два слоя в одном shadow:
 *   inset — базовая рамка (как у обычных свотчей);
 *   outer — жёлтое кольцо-маркер "вы здесь", не накладывается на круг.
 *
 * border оставляем none (перебивает patch-6.3:34 `border-color:ink` —
 * на нашем border:none он ни на что не влияет, но явное none для ясности).
 */
body.kp-body .kp-prod-swatch.is-active .kp-prod-swatch-dot,
body.kp-body .kp-swatch.is-active .kp-prod-swatch-dot {
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .18),
    0 0 0 2px var(--yellow);
}