/* ==========================================================================
   OBĽÚBENÉ PRODUKTY

   Srdiečko leží na fotke oproti ikonkám využitia — tie sú vľavo hore,
   srdiečko vpravo hore. Vzťažným bodom je `.pc-card`, resp.
   `.pc-product__gallery`; obidve už `position: relative` majú.

   Prázdne srdiečko je obrys, plné je ružové. Ikona z Figmy je jednoliata
   plocha (`fill`), preto sa neaktívny stav rieši priehľadnou výplňou
   a obrysom, nie druhým súborom.
   ========================================================================== */

.pc-wish {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	/* Rovnaký krúžok ako porovnanie (compare.css) — obe ikonky pod sebou. */
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition:
		background var(--pc-duration) var(--pc-ease),
		transform var(--pc-duration) var(--pc-ease);
}

.pc-wish:hover,
.pc-wish:focus-visible {
	background: var(--pc-white);
	transform: scale(1.06);
}

.pc-wish__icon {
	display: block;
	width: 22px;
	height: 20px;
}

.pc-wish svg {
	display: block;
	/* Obrys srdca sa kreslí aj mimo tvaru — bez toho bol na krajoch orezaný. */
	overflow: visible;
	width: 100%;
	height: 100%;
}

/*
 * Neaktívne srdiečko: len obrys. `stroke` sa kreslí zvnútra tvaru, preto
 * je zámerne hrubší — inak by pri 20px takmer zanikol.
 */
.pc-wish svg path {
	fill: transparent;
	stroke: var(--pc-caption, #b7b7b7);
	stroke-width: 1.6;
	transition:
		fill var(--pc-duration) var(--pc-ease),
		stroke var(--pc-duration) var(--pc-ease);
}

.pc-wish[aria-pressed='true'] svg path {
	fill: var(--pc-pink);
	stroke: var(--pc-pink);
}

/* Kým beží požiadavka, tlačidlo je stlmené a neklikateľné. */
.pc-wish[data-pc-busy] {
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Umiestnenie ------------------------------------------------------- */

/*
 * Na karte je srdiečko odsadené od rohu — pri `top/right: 0` sa krúžok
 * dotýkal okraja karty a pôsobil odseknuto.
 */
.pc-wish--card {
	top: 8px;
	inset-inline-end: 8px;
	width: 38px;
	height: 38px;
}

.pc-wish--card .pc-wish__icon {
	width: 20px;
	height: 18px;
}

/*
 * Odznaky „Výpredaj" a „Zľava" sedia v pravom hornom rohu fotky. Keď tam
 * sú, srdiečko sa posunie pod ne — počet odznakov sa líši produkt od
 * produktu, preto sú dva prípady.
 */
.pc-card:has(.pc-card__badges) .pc-wish--card {
	top: 46px;
}

.pc-card:has(.pc-card__badges .badge + .badge) .pc-wish--card {
	top: 82px;
}

/*
 * Na myši sa srdiečko ukáže až pri prejdení kartou — v mriežke
 * produktov by inak štyri srdiečka v rade prekrikovali samotné fotky.
 * Čo je už v obľúbených, ostáva viditeľné vždy; inak by zákazník
 * nevedel, čo si uložil.
 *
 * Na dotyku sa nikam „neprejde", preto tam ostáva stále viditeľné.
 */
@media (hover: hover) {
	.pc-wish--card {
		opacity: 0;
		transition:
			opacity var(--pc-duration) var(--pc-ease),
			background var(--pc-duration) var(--pc-ease),
			transform var(--pc-duration) var(--pc-ease);
	}

	.pc-card:hover .pc-wish--card,
	.pc-card:focus-within .pc-wish--card,
	.pc-wish--card[aria-pressed='true'] {
		opacity: 1;
	}
}

.pc-wish--single {
	top: var(--pc-space-12);
	inset-inline-end: var(--pc-space-12);
}

/* ==========================================================================
   POČÍTADLO V HLAVIČKE

   Rovnaké miery ako pri košíku (Figma: krúžok 13.5px v pravom hornom rohu),
   len ružové — aby sa dve čísla vedľa seba nepliedli.
   ========================================================================== */

/*
 * Srdiečko je nižšie a širšie než košík, preto je krúžok posunutý inak —
 * na rovnakej pozícii ako pri košíku by ležal priamo na tvare srdca.
 */
.pc-header__wish-count {
	position: absolute;
	top: 2px;
	right: 2px;
	display: grid;
	place-items: center;
	min-width: 14px;
	height: 14px;
	padding-inline: 3px;
	border-radius: 999px;
	background: var(--pc-pink);
	font-size: 9px;
	font-weight: var(--pc-weight-bold);
	line-height: 1;
	color: var(--pc-white);
}

.pc-header__wish-count.is-empty {
	display: none;
}

.pc-header__icon--wishlist {
	position: relative;
}

/* Počítadlo v mobilnom menu — text, nie krúžok. */
.pc-mobile-menu__count {
	margin-inline-start: var(--pc-space-8);
	color: var(--pc-pink);
	font-weight: var(--pc-weight-bold);
}

.pc-mobile-menu__count.is-empty {
	display: none;
}

/* ==========================================================================
   STRÁNKA SO ZOZNAMOM
   ========================================================================== */

.pc-wishlist {
	padding-block: var(--pc-space-32) var(--pc-space-section);
}

/* Rovnaká mriežka ako vo výpise obchodu — CSS sekcie „Produkty" sa na
   tejto stránke nenačíta, preto je tu vlastná definícia. */
.pc-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 43px;
	align-items: stretch;
}

@media (max-width: 1100px) {
	.pc-wishlist__grid {
		gap: var(--pc-space-32);
	}
}

@media (max-width: 820px) {
	.pc-wishlist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.pc-wishlist__grid {
		gap: var(--pc-space-48) var(--pc-space-24);
	}
}

.pc-wishlist__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pc-space-24);
	max-width: 640px;
}

.pc-wishlist__empty-text {
	margin: 0;
	font-size: var(--pc-fs-base);
	line-height: var(--pc-lh-base);
}