/*
 * Ulubione - wlasna lista zyczen.
 *
 * Motyw ma juz gotowe pozycjonowanie serca (.product-card__wishlist ustawia je
 * w prawym gornym rogu karty i pokazuje przy najechaniu). Korzystamy z tego,
 * a tutaj opisujemy tylko sam przycisk.
 */

.triples-ulub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: var(--color-text, #251E1A);
	cursor: pointer;
	line-height: 1;
	transition: opacity 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.triples-ulub:hover {
	opacity: 0.6;
}

.triples-ulub:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

.triples-ulub__ikona {
	display: block;
	pointer-events: none;
}

/* Serce zapalone - wypelnione. */
.triples-ulub[aria-pressed="true"] .triples-ulub__ikona {
	fill: currentColor;
}

/* Krotkie tapniecie, zeby bylo widac, ze klikniecie doszlo. */
.triples-ulub--pyk .triples-ulub__ikona {
	animation: triples-ulub-pyk 0.28s ease;
}

@keyframes triples-ulub-pyk {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* Karta produktu: gdy produkt jest juz na liscie, serce zostaje widoczne
   takze bez najechania myszka. Motyw robi to samo dla starej wtyczki. */
.product-card__wishlist:has(.triples-ulub[aria-pressed="true"]) {
	opacity: 1;
}

/* Strona produktu - serce obok tytulu. */
.triples-ulub--produkt {
	width: 32px;
	height: 32px;
}

.triples-ulub--produkt .triples-ulub__ikona {
	width: 24px;
	height: 24px;
}

/* Licznik przy sercu w naglowku - ten sam ksztalt co licznik koszyka. */
.header-icon--wishlist {
	position: relative;
}

.triples-ulub-licznik {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--color-text, #251E1A);
	color: var(--color-bg, #FBF9F6);
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 500;
}

/* Strona z ulubionymi */
.triples-ulub-strona__stan {
	margin: 0 0 var(--spacing-lg, 2rem);
	color: var(--color-text-muted, #7A7169);
}

.triples-ulub-strona__stan--pusto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-md, 1rem);
}

.triples-ulub-strona__cta {
	display: inline-block;
	padding: 0.9em 2.2em;
	border: 1px solid var(--color-text, #251E1A);
	color: var(--color-text, #251E1A);
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.triples-ulub-strona__cta:hover {
	background: var(--color-text, #251E1A);
	color: var(--color-bg, #FBF9F6);
}