/**
 * Obľúbené produkty (wishlist) — srdiečko na produktovej karte, textové
 * tlačidlo na detaile, počítadlo v hlavičke a prázdny stav stránky Obľúbené.
 *
 * Načítava sa globálne (plugin PX_Wishlist). Tokeny --pc-* sú na :root
 * (base.css), takže platia aj mimo .pc-scope — bez záložných hodnôt.
 */

/* ---- Srdiečko na produktovej karte (overlay vpravo hore) ---- */

.pc-card-wish {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-pill);
	background: rgb(var(--pc-card) / 0.92);
	color: rgb(var(--pc-muted));
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Dotykový cieľ 44 px bez zmeny kresby — neviditeľná plocha okolo
   36 px kruhu. Zvislo len 42 px: srdiečko a porovnanie stoja nad sebou
   s medzerou 0.375rem a ich plochy sa nemajú prekryť. */
.pc-card-wish::after {
	content: '';
	position: absolute;
	inset: -0.1875rem -0.25rem;
}

.pc-card-wish .pc-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.pc-card-wish:hover {
	color: rgb(var(--pc-accent));
	border-color: rgb(var(--pc-accent) / 0.4);
	transform: scale(1.06);
}

.pc-card-wish.is-active {
	color: rgb(var(--pc-accent));
	border-color: rgb(var(--pc-accent) / 0.4);
}

.pc-card-wish.is-active svg {
	fill: currentColor;
}

/* ---- Textové tlačidlo na detaile produktu ---- */
/* Rozloženie riadku (spolu s porovnaním) drží .pc-single__actions v single.css. */

.pc-wish-action {
	display: inline-flex;
	align-items: center;
	gap: var(--pc-space-2);
	/* Textové tlačidlo bez podkladu: cieľ dotyku drží min. výška 24 px
	   (WCAG 2.5.8), samotný riadok písma má 18 px. */
	min-height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--pc-fs-sm);
	font-weight: 500;
	color: rgb(var(--pc-muted));
	cursor: pointer;
	transition: color 0.15s ease;
}

.pc-wish-action:hover,
.pc-wish-action.is-active {
	color: rgb(var(--pc-accent));
}

.pc-wish-action.is-active svg {
	fill: currentColor;
}

/* ---- Stav počas požiadavky ---- */

[data-px-wish].is-loading {
	pointer-events: none;
}

/* Srdiečko počas volania REST jemne pulzuje */
[data-px-wish].is-loading svg {
	animation: pc-wish-pulse 0.75s ease-in-out infinite;
}

@keyframes pc-wish-pulse {
	0%,
	100% {
		opacity: 0.45;
		transform: scale(0.88);
	}
	50% {
		opacity: 1;
		transform: scale(1.06);
	}
}

/* Potvrdenie po pridaní — srdiečko raz poskočí */
[data-px-wish].is-added svg {
	animation: pc-wish-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pc-wish-pop {
	0% {
		transform: scale(0.75);
	}
	45% {
		transform: scale(1.3);
	}
	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-px-wish].is-loading svg,
	[data-px-wish].is-added svg {
		animation: none;
	}

	[data-px-wish].is-loading {
		opacity: 0.55;
	}
}

/* ---- Počítadlo v hlavičke (rovnaký vzhľad ako počítadlo košíka) ---- */

.px-header__wishlist {
	position: relative;
}

.px-header-wish-count {
	position: absolute;
	top: -0.125rem;
	right: -0.125rem;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 var(--pc-space-1);
	border-radius: var(--pc-radius-pill);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-size: var(--pc-fs-3xs);
	font-weight: 700;
	line-height: 1.125rem;
	text-align: center;
}

.px-header-wish-count[hidden] {
	display: none;
}

/* Mobil: tlačidlo je bez krúžku a užšie, počítadlo na rohu boxu by viselo
   vo vzduchu — sadne priamo na roh ikony. */
@media (max-width: 767.98px) {
	.px-header-wish-count {
		top: 0;
		right: 0;
	}
}

/* ---- Stránka Obľúbené ---- */

.px-wishlist {
	margin: var(--pc-space-4) 0 var(--pc-space-8);
}