/**
 * Избранное и сравнение: кнопки на карточках и всплывашка.
 *
 * Состояние приходит из localStorage уже после отрисовки страницы, поэтому
 * «включённый» вид навешивается классом .is-on, а не отдельной разметкой.
 * Счётчики в шапке — в components/header.css.
 */

/* ── Кнопки ──────────────────────────────────────────── */

.collect {
  display: flex;
  gap: var(--space-2);
}

/* Поверх фото карточки, слева — справа уже стоят иконки назначения */
.collect--card {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  left: var(--space-4);
  flex-direction: column;
}

.collect--inline {
  margin-top: var(--space-4);
}

.collect__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  transition: color var(--transition), background-color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.collect--card .collect__btn {
  width: 2.25rem;
  height: 2.25rem;
  background: rgb(255 255 255 / 0.95);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border);
}

.collect--inline .collect__btn {
  flex: 1;
  min-height: 2.75rem;
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.collect__icon {
  font-size: 1.25rem;
  /* Незакрашенный контур — «ещё не добавлено» */
  font-variation-settings: 'FILL' 0;
}

.collect__btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.collect--card .collect__btn:hover {
  transform: scale(1.08);
}

/* Включено: сердце заливается, весы окрашиваются в бренд */
.collect__btn.is-on {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.collect__btn--fav.is-on {
  color: var(--color-sale);
  border-color: var(--color-sale);
}

.collect__btn.is-on .collect__icon {
  font-variation-settings: 'FILL' 1;
}

.collect--inline .collect__btn.is-on {
  background: var(--color-primary-light);
}

.collect--inline .collect__btn--fav.is-on {
  background: var(--color-danger-bg);
}

/* ── В строке с хлебными крошками ─────────────────────── */

.collect--topline {
  flex: none;
  gap: var(--space-2);
}

.collect--topline .collect__btn {
  gap: var(--space-2);
  min-height: 2.25rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.collect--topline .collect__btn.is-on {
  background: var(--color-primary-light);
}

.collect--topline .collect__btn--fav.is-on {
  background: var(--color-danger-bg);
}

@media (max-width: 47.9375rem) {
  .collect--card {
    top: var(--space-2);
    left: var(--space-2);
  }

  .collect--card .collect__btn {
    width: 2rem;
    height: 2rem;
  }

  .collect__icon { font-size: 1.125rem; }

  /* На телефоне остаются только значки: подписи не влезают рядом с крошками,
     но из разметки не убраны — их читает скринридер */
  .collect--topline .collect__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .collect--topline .collect__btn {
    width: 2.25rem;
    padding-inline: 0;
  }
}

/* ── Всплывающая подсказка ───────────────────────────── */

.collect-toast {
  position: fixed;
  z-index: var(--z-modal);
  bottom: var(--space-6);
  left: 50%;
  max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-3) var(--space-5);
  background: var(--color-text);
  border-radius: var(--radius-full);
  color: var(--color-text-invert);
  font-size: var(--fs-sm);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 0.75rem);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.collect-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}