/* Кнопка «Назад в каталог» на карточке товара и подсветка карточки,
   к которой вернулись в каталоге. Логика — js/catalog-return.js.

   Цвета берутся из токенов карточки товара (--pc-*), с запасными
   значениями на случай, если стили карточки не подгрузились. */

/* ── Кнопка ─────────────────────────────────────────────────────────
   Крошки остаются для поиска, но это мелкий серый текст — их не видят.
   Кнопка — заметное действие: рамка, крупный шрифт, зона нажатия 44 px. */
.pc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 4px 0 12px;
  padding: 0 18px 0 12px;
  border: 1px solid var(--pc-line-strong, rgba(26, 21, 18, .18));
  border-radius: 999px;
  background: var(--pc-bg-1, #fff);
  color: var(--pc-text-1, #1a1512);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease,
              background-color .2s ease,
              transform .1s cubic-bezier(.23, 1, .32, 1);
}
.pc-back svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform .22s cubic-bezier(.23, 1, .32, 1);
}
/* Отклик в момент нажатия, а не по отпусканию пальца. */
.pc-back:active { transform: scale(.97); }
.pc-back:focus-visible { outline: 2px solid var(--pc-red, #c0392b); outline-offset: 2px; }

/* Наведение — только там, где есть мышь: на телефоне оно залипает после тапа.
   Стрелка чуть уходит влево — подсказывает, куда ведёт кнопка. */
@media (hover: hover) and (pointer: fine) {
  .pc-back:hover { border-color: var(--pc-text-1, #1a1512); }
  .pc-back:hover svg { transform: translateX(-3px); }
}

@media (max-width: 600px) {
  .pc-back {
    min-height: 44px;
    margin: 12px 0 2px;
    font-size: 14.5px;
  }
  /* Крошки сразу под кнопкой — двойной отступ сверху им уже не нужен. */
  .pc-back + .pc-crumbs { margin-top: 8px; }
}

/* ── Подсветка карточки в каталоге после возврата ──────────────────
   Короткое золотое кольцо: глаз сразу находит, откуда ушёл. */
.mpk-catalog [data-id].is-returned {
  animation: mpk-returned 1.8s cubic-bezier(.23, 1, .32, 1) both;
}
@keyframes mpk-returned {
  0%   { box-shadow: 0 0 0 0 rgba(196, 137, 58, 0); }
  14%  { box-shadow: 0 0 0 3px rgba(196, 137, 58, .6); }
  100% { box-shadow: 0 0 0 3px rgba(196, 137, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .mpk-catalog [data-id].is-returned { animation-duration: .6s; }
}