/**
 * Публичный модуль каталога товаров.
 * v1.4: размер цветовых точек уменьшен до 15×15px,
 *       обводка focus-visible / is-active сделана тоньше
 *       (внутреннее кольцо 1px, внешнее 3px вместо 2px/6px).
 *
 * ИСТОРИЯ: инлайн-блок <style> в app/modules/products/views/category.php
 * задаёт .pf-color-dot размером calc(var(--space-s) + var(--space-xs)) (~12px)
 * и рендерится в <body> ПОСЛЕ <link> на данный файл. Патчить category.php
 * запрещено (AI-PRODUCT-RECIPE: code audit ложно срабатывает на инлайн CSS/JS),
 * поэтому специфичность селекторов повышена до body .pf-color-dot (0,1,1),
 * что гарантированно перекрывает инлайн (0,1,0) по правилам каскада.
 *
 * Размер точек: 15×15 = calc(var(--space-m) - var(--space-xs) / 4) = 16px - 1px.
 * Контейнер .pf-card__colors — flex-wrap: wrap, перенос на новую строку при избытке.
 *
 * Подключается на странице категории (/catalog/{category})
 * через хук headStyles в ProductsController::category().
 * Все значения — только var(--...) из /admin/assets/variables (§10.6).
 */

/* ============================================================
   Контейнер цветовых точек на карточке.
   body .pf-card__colors (0,1,1) перекрывает инлайн (0,1,0).
============================================================ */
body .pf-card__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m) 0;
}

/* ============================================================
   Цветовая точка: базовое состояние, размер 15×15.
   body .pf-color-dot (0,1,1) перекрывает инлайн (0,1,0).
============================================================ */
body .pf-color-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-m) - var(--space-xs) / 4);
  height: calc(var(--space-m) - var(--space-xs) / 4);
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  cursor: default;
  transition: var(--transition-fast);
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Точка с data-image — кликабельная */
body .pf-color-dot[data-image] {
  cursor: pointer;
}

body .pf-color-dot[data-image]:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
}

/* Тонкая обводка фокуса: 1px фон + 3px primary (было 2px + 6px) */
body .pf-color-dot[data-image]:focus-visible {
  box-shadow:
    0 0 0 calc(var(--space-xs) / 4) var(--color-bg),
    0 0 0 calc(var(--space-xs) * 3 / 4) var(--color-primary);
}

/* Активная точка (выбранный цвет) — та же тонкая обводка */
body .pf-color-dot.is-active {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 calc(var(--space-xs) / 4) var(--color-bg),
    0 0 0 calc(var(--space-xs) * 3 / 4) var(--color-primary);
  transform: scale(1.08);
}

/* ============================================================
   Уважение к prefers-reduced-motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
  body .pf-color-dot {
    transition: none;
  }
  body .pf-color-dot[data-image]:hover {
    transform: none;
  }
  body .pf-color-dot.is-active {
    transform: none;
  }
}