/*
 * Назначение: Сердечко «в избранное» — иконка, отклик на нажатие и полёт
 * в счётчик шапки.
 *
 * Раньше состояние переключалось подменой src (like.svg ↔ like-fill.svg):
 * это загрузка файла в момент клика и мгновенный скачок картинки —
 * анимировать там было нечего. Теперь контур и заливка лежат друг на друге
 * инлайновым SVG, и заливка проявляется переходом.
 */

.fav-heart {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.fav-heart svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Геометрия взята из штатной иконки like-fill.svg: там кайма и тело —
   два пути одного файла, поэтому они совпадают пиксель в пиксель.
   Кайма без заливки тела повторяет like.svg, кайма плюс тело —
   like-fill.svg. Обводки как таковой (stroke) нет ни там, ни там. */
.fav-heart__outline {
  fill: currentColor;
  transition: fill 140ms var(--ease-out);
}

/* В избранном кайма перекрашивается в акцент, а не прячется: сердце
   становится сплошным одноцветным, без тёмного канта по краю. */
.js-fav.is-liked .fav-heart__outline {
  fill: var(--color-accent);
}

.fav-heart__fill {
  fill: var(--color-accent);
  /* Тело вырастает из 0.4, а не из нуля */
  opacity: 0;
  transform: scale(0.4);
  /* Без fill-box точка отсчёта у SVG — угол вьюбокса, и тело уезжало
     влево вверх вместо того, чтобы расти из своего центра */
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 120ms var(--ease-out),
    transform 120ms var(--ease-out);
}

.js-fav.is-liked .fav-heart__fill {
  opacity: 1;
  transform: scale(1);
}

/* Нажатие подтверждается до того, как отработает обработчик */
.js-fav {
  transition: transform var(--dur-press) var(--ease-out);
}
.js-fav:active {
  transform: scale(0.92);
}

/* Размеры под контекст */
.product-hero__gallery-action-btn .fav-heart {
  width: 20px;
  height: 20px;
}

.wishlist-card__like-btn .fav-heart {
  width: 24px;
  height: 24px;
}