/* ════════════════════════════════════════════════════════════════════════════
 * patch-6.1-badges.css
 *
 * Поддержка НЕСКОЛЬКИХ бейджей на одной карточке: НОВИНКА / ХИТ / ЭКО / РОССИЯ.
 * Источник данных — _gifts_special_ids (CSV спецфильтров type=8), мапинг
 * см. inc/helpers.php::kp_get_product_badges().
 *
 * ВАЖНО — финальная спека Nick'а отличается от main.css:357-361 (там старые
 * цвета: NEW/HIT оба жёлтые, RUS чёрный). Поэтому здесь ПЕРЕБИВАЕМ цвета
 * через скоуп body.kp-body (специфичность 0,0,2,1 vs 0,0,1,0 у main.css —
 * мы выигрываем без !important). И патч грузится после main.css, что даёт
 * дополнительную страховку при равной специфичности.
 *
 * Раскладка: горизонтальный ряд вдоль верха, слева направо, flex-wrap для
 * переноса. max-width оставляет 56px справа под кнопку .kp-prod-fav.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Контейнер группы бейджей: абсолют в левом-верхнем углу .kp-prod-imgwrap */
body.kp-body .kp-prod-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: calc(100% - 56px);
  z-index: 2;
}

/* Сам бейдж — теряет position:absolute (он на родителе), inline-flex нужен
 * для флажка слева от текста (РОССИЯ) и для вертикального выравнивания. */
body.kp-body .kp-prod-badges .kp-prod-badge {
  position: static;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Цвета по финальной спеке (перебивают main.css:357-361) ───────────────── */
body.kp-body .kp-prod-badge-new { background: var(--ink);    color: var(--yellow); }   /* НОВИНКА — инверсия */
body.kp-body .kp-prod-badge-hit { background: var(--yellow); color: var(--ink);    }
body.kp-body .kp-prod-badge-eco { background: var(--eco);    color: #fff;          }
body.kp-body .kp-prod-badge-rus {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e0e0;
}

/* Флажок России внутри бейджа РОССИЯ — круглый 16×16 с рамкой.
 * border-radius:50% + overflow:hidden обрезает триколор в круг без clipPath. */
body.kp-body .kp-prod-badge-rus svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc;
}