/* ── Чипы выбора варианта (product_detail.html) — НЕ то же самое, что
   .filter-chip в 02-components/filter-chip.css (фильтры каталога).
   Похожие имена, разные компоненты — не объединять при будущей правке. ── */
.chips {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

/* Плоский чистый чип + «неоновая заливка» при выборе. Заливка НЕ «наезжает» слева,
   а РАСЦВЕТАЕТ ИЗ ТОЧКИ КЛИКА пружиной (лёгкий овершут), и в момент выбора чип даёт
   короткую вспышку-«поджиг», оседая в мягкое свечение — не просто заполнение.
   Анимации выбора включаются классом .cfg-anim на пикере (JS ставит его после
   загрузки), поэтому НА ЗАГРУЗКЕ выбранные чипы просто отрисованы готовыми, без
   пружины/вспышки. Анимируем transform (GPU) и box-shadow (не режется overflow —
   свечение видно за краем чипа). Акцент (cyan / violet для +HDD) — в --chip-*. */
.chip {
  --chip-accent: var(--cyan);
  --chip-glow: var(--cyan-a40);
  --chip-glow-hot: var(--cyan-a60);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  background: var(--pure-white-a04);
  border: 1px solid var(--line);
  color: var(--silver);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  /* всегда: подъём/нажатие/фон (hover). Транзишены СОСТОЯНИЯ выбора — ниже, под .cfg-anim */
  transition: transform .2s cubic-bezier(.2, 0, 0, 1),
              background .2s ease;
}
/* транзишены выбора включаются только после загрузки — на init без анимации */
.cfg-anim .chip {
  transition: transform .2s cubic-bezier(.2, 0, 0, 1),
              background .2s ease,
              color .35s cubic-bezier(.32, .72, 0, 1),
              border-color .35s cubic-bezier(.32, .72, 0, 1),
              box-shadow .35s cubic-bezier(.32, .72, 0, 1);
}

/* заливка: полноразмерная, но невидимая; видимость — через opacity.
   Вход (выбор) — расцветает из точки клика через scale (анимация chipFill).
   Выход (снятие) — гаснет НА МЕСТЕ через opacity, без схлопывания в точку. */
.chip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--chip-accent);
  opacity: 0;
  transform: scale(1);
  transform-origin: var(--cx, 50%) var(--cy, 50%);
}
/* выход: плавное затухание (только после загрузки), scale не трогаем → нет «точки» */
.cfg-anim .chip::before { transition: opacity .28s var(--ease-standard); }
.chip.is-active::before { opacity: 1; }
/* вход: заливка «расцветает» из точки клика; opacity держим 1, чтобы затухание не мешало */
.cfg-anim .chip.is-active::before { animation: chipFill .45s var(--ease-spring) both; }
@keyframes chipFill {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}

.chip:hover {
  transform: translateY(-2px);
  background: var(--pure-white-a07);
}

/* нажатие на чип — тактильный отклик перед сменой варианта */
.chip:active {
  transform: translateY(-1px) scale(.96);
}

/* выбран: тёмный текст, контур убран, стойкое мягкое свечение */
.chip.is-active {
  color: var(--cta-ink);
  border-color: transparent;
  box-shadow: 0 0 14px -3px var(--chip-glow);   /* только мягкое свечение, без обводки */
}
/* вспышка-«поджиг» при живом выборе (не на загрузке): всплеск свечения → оседает, без кольца */
.cfg-anim .chip.is-active {
  animation: chipIgnite .5s cubic-bezier(.2, 0, 0, 1);
}
@keyframes chipIgnite {
  0%   { box-shadow: 0 0 22px 1px var(--chip-glow-hot); }
  100% { box-shadow: 0 0 14px -3px var(--chip-glow); }
}

/* комбинация недоступна с текущим выбором другой оси (клик подберёт ближайшую) */
.chip--off:not(.is-active) {
  opacity: .4;
}

/* Дополнительный накопитель (+HDD) — фирменный фиолет вместо синего акцента */
.chips--addon .chip {
  --chip-accent: var(--violet);
  --chip-glow: var(--violet-a40);
  --chip-glow-hot: var(--violet-a60);
  border-color: color-mix(in srgb, var(--violet) 30%, transparent);
}
.chips--addon .chip.is-active {
  color: var(--pure-white);
}

/* reduced-motion: без пружины и вспышки — заливка мгновенная, свечение статично */
@media (prefers-reduced-motion: reduce) {
  .cfg-anim .chip::before { transition-duration: 1ms; }
  .cfg-anim .chip.is-active,
  .cfg-anim .chip.is-active::before { animation: none; }
}