/* Piknikovich - favorites.css
   Избранное гостя, ГЛОБАЛЬНАЯ часть (transfer-23, эталон ds-14): счётчик на
   сердце шапки, активное сердечко карточки каталога, тост. Грузится на каждой
   странице: сердечки бывают в любой выдаче, шапка и тост - везде. Сама
   страница /izbrannoe/ - отдельный файл izbrannoe.css.

   Специфичность. Сердце в шапке стало ссылкой, а base.css держит
   `.pk-front a { color: inherit }` (0-1-1) и перебил бы цвет `.pk-icon-btn`
   (0-1-0) из layout.css. Поэтому здесь `a.pk-fav-link` под `.pk-front`. */

/* ---- Сердце в шапке ---- */

.pk-front a.pk-fav-link {
	position: relative;
	color: var(--pk-text);
	text-decoration: none;
}
.pk-front a.pk-fav-link:hover,
.pk-front a.pk-fav-link:focus-visible {
	color: var(--pk-green);
	border-color: var(--pk-green);
}
/* На самой странице избранного кнопка в активном виде: это текущая
   страница, а не выход на неё (эталон SiteHeader favActive). */
.pk-front a.pk-fav-link.is-active {
	color: var(--pk-green);
	border-color: var(--pk-green);
}

/* Счётчик: янтарный кружок в правом верхнем углу (эталон fav-store.js). */
.pk-front .pk-fav-badge {
	position: absolute; top: -3px; right: -3px;
	min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-star); color: #3d2600;
	font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;
}
.pk-front .pk-fav-badge[hidden] { display: none; }

/* ---- Кнопка «В избранное» (эталон IconButton variant "fav") ----
   Один вид на всех поверхностях: карточка каталога (.pk-card__fav) и любая
   кнопка с классом .pk-fav-btn. 34px, белый круг 95%, прозрачная рамка,
   мягкая тень; сердце тёмное, на наведении и в активном состоянии красное,
   активное залито (как красит кит, fav-store.js).
   Вес. `.pk-front button { background: none; border: 0 }` из base.css
   (0-1-1) снимал белый круг у `.pk-card__fav` из components.css (0-1-0):
   сердце висело на фото голой иконкой с тенью, не так, как в ките (замер
   2026-09-11: computed background rgba(0,0,0,0)). Поэтому здесь тег в
   селекторе под .pk-front - 0-2-1. Положение (top/right) задаёт поверхность. */
.pk-front button.pk-card__fav,
.pk-front button.pk-fav-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0; box-sizing: border-box;
	border: 1px solid transparent; border-radius: 50%;
	background: rgba(255, 255, 255, 0.95); color: var(--pk-text);
	/* ListingCard перебивает тень IconButton на var(--e2) - берём её. */
	box-shadow: var(--e2);
	cursor: pointer;
	transition: background var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base);
}
/* Кнопка на миниатюре (мегаменю, карта, лента мобильного меню): круг тот
   же 34px, а зона нажатия шире на 5px во все стороны - 44x44 без того,
   чтобы круг закрыл половину снимка 104x78. */
.pk-front button.pk-fav-btn--thumb::after {
	content: ""; position: absolute; inset: -5px; border-radius: 50%;
}
/* На мобильных кадрах кита у корня --tap-min: 44px, и IconButton карточки
   вырастает до круга 44x44. То же здесь для сердечка карточки и галереи
   объявления - на снимке во всю ширину экрана круг 44 соразмерен. */
@media (max-width: 760px) {
	.pk-front button.pk-card__fav,
	.pk-front button.pk-ls-gallery__fav { width: var(--tap-min); height: var(--tap-min); }
}
.pk-front button.pk-card__fav:hover,
.pk-front button.pk-fav-btn:hover,
.pk-front button.pk-card__fav.is-active,
.pk-front button.pk-fav-btn.is-active { color: var(--pk-danger); }
.pk-front button.pk-card__fav.is-active svg,
.pk-front button.pk-fav-btn.is-active svg { fill: currentColor; }
.pk-front button.pk-card__fav:focus-visible,
.pk-front button.pk-fav-btn:focus-visible { outline: 2px solid var(--pk-green); outline-offset: 2px; }
.pk-front button.pk-card__fav svg,
.pk-front button.pk-fav-btn svg { flex: none; }

/* ---- Где стоит кнопка на поверхностях (transfer-23) ----
   Везде правый верхний угол снимка - как у карточки каталога. Кнопка лежит
   рядом со ссылкой или кнопкой снимка, а не внутри неё, поэтому координаты
   считаются от обёртки. */

/* Галерея объявления: угол галереи - на десктопе это угол верхней правой
   миниатюры (или крупного кадра, если фото одно), на ленте до 760px - угол
   текущего кадра; счётчик «1 / N» там отъезжает левее кнопки. */
.pk-front .pk-ls-gallery > .pk-ls-gallery__fav { position: absolute; top: 12px; right: 12px; z-index: 3; }
@media (max-width: 760px) {
	.pk-front .pk-ls-gallery[data-pk-fav-id] .pk-ls-gallery__count { top: 23px; right: calc(12px + var(--tap-min) + 8px); }
}
/* Объявление без фото: сердечко рядом с заголовком. */
.pk-front .pk-ls-head__fav { display: inline-flex; flex: none; margin-top: 6px; }

/* Строка списка карты: снимок 104x78 стоит в 11px от края строки
   (поле 10 + рамка 1), у продвинутой строки ещё +6 подложки. */
.pk-mp-rowwrap { position: relative; }
.pk-front .pk-mp-rowwrap > .pk-mp-row__fav { position: absolute; top: 15px; left: 77px; z-index: 2; }
.pk-front .pk-mp-rowwrap.is-promoted > .pk-mp-row__fav { top: 21px; left: 83px; }

/* Мини-карточка пина: крестик в углу (24px, right 8) - сердечко левее него;
   у компактной карточки (шторка на телефоне) - угол квадратного снимка 116. */
.pk-front .pk-mp-card > .pk-mp-card__fav { position: absolute; top: 8px; right: 40px; z-index: 3; }
.pk-front .pk-mp-card.is-compact > .pk-mp-card__fav { top: 6px; left: 76px; right: auto; }

/* Мини-карточка мегаменю: снимок 120x120 в 9px от края (поле 8 + рамка 1). */
.pk-mm-cardwrap { position: relative; min-width: 0; }
.pk-front .pk-mm-cardwrap > .pk-mm-card__fav { position: absolute; top: 15px; left: 89px; z-index: 2; }

/* Лента мобильного меню: снимок 200x125 наверху карточки; у платного слота
   ещё 6px подложки. */
.pk-front .pk-mstrip__item { position: relative; }
.pk-front .pk-mstrip__item > .pk-mstrip__fav { position: absolute; top: 8px; right: 8px; z-index: 2; }
.pk-front .pk-mstrip__item.pk-mm-slot--strip > .pk-mstrip__fav { top: 14px; right: 14px; }

/* ---- Тост ---- */

.pk-fav-toast {
	position: fixed; left: 50%; bottom: 28px; z-index: 1000;
	display: inline-flex; align-items: center; gap: 12px;
	height: 48px; padding: 0 18px; box-sizing: border-box;
	border-radius: var(--pk-radius-pill);
	background: var(--pk-green-deep); color: #fff;
	box-shadow: var(--e4);
	font-size: 15px; font-weight: var(--fw-semibold); line-height: 1.2;
	white-space: nowrap;
	opacity: 0; transform: translate(-50%, 8px);
	transition: opacity var(--dur-mid) var(--ease-entrance), transform var(--dur-mid) var(--ease-entrance);
}
.pk-fav-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.pk-front .pk-fav-toast__btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 32px; padding: 0 12px; box-sizing: border-box;
	border: 0; border-radius: var(--pk-radius-pill);
	background: rgba(255, 255, 255, 0.18); color: #fff;
	font-family: inherit; font-size: 14px; font-weight: var(--fw-bold); line-height: 1;
	text-decoration: none; cursor: pointer;
	transition: background var(--dur-base);
}
.pk-front .pk-fav-toast__btn:hover,
.pk-front .pk-fav-toast__btn:focus-visible { background: rgba(255, 255, 255, 0.28); color: #fff; }
.pk-front .pk-fav-toast__btn:visited { color: #fff; }

/* Узкие экраны: выше зоны чат-виджета (см. шапку favorites.js), во всю
   ширину минус поля страницы. */
@media (max-width: 760px) {
	.pk-fav-toast {
		left: 16px; right: 16px; bottom: 110px;
		display: flex; justify-content: space-between;
		transform: translateY(8px);
	}
	.pk-fav-toast.is-on { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.pk-fav-toast { transition: none; }
}