/* ==========================================================================
   Pokoloruj-to – gwiazdki przy kolorowankach
   ========================================================================== */

.pt-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	border: 2px solid var(--pt-ink);
	border-radius: 999px;
	background: var(--pt-white);
	color: var(--pt-ink) !important;
	font-family: var(--pt-font-body);
	font-weight: 800;
	line-height: 1;
	text-decoration: none !important;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.pt-star:hover { background: var(--pt-tint-yellow); color: var(--pt-ink) !important; }
.pt-star:focus-visible { outline: 3px solid var(--pt-accent); outline-offset: 2px; }
.pt-star[disabled] { cursor: progress; }

.pt-star__icon { flex-shrink: 0; fill: transparent; transition: fill .15s ease; }
.pt-star[aria-pressed="true"] { background: var(--pt-tint-yellow); }
.pt-star[aria-pressed="true"] .pt-star__icon { fill: var(--pt-sun); }

.pt-star__count:empty { display: none; }

/* Na karcie – wystaje ponad górną krawędź karty, jak przypięty znaczek-przycisk */
li.product.pt-card { position: relative; overflow: visible !important; }
.pt-star--card {
	position: absolute;
	top: -16px;
	right: 14px;
	z-index: 3;
	min-width: 42px;
	height: 40px;
	padding: 0 12px;
	font-size: 15px;
	box-shadow: 0 3px 0 var(--pt-ink);
}
.pt-star--card:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--pt-ink); }
.pt-star--card:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--pt-ink); }

/* Na stronie kolorowanki – pod tytułem */
.pt-star--single {
	min-height: 44px;
	padding: 0 18px;
	margin: 4px 0 14px;
	font-size: 15px;
	gap: 8px;
}
.pt-star--single .pt-star__icon { width: 20px; height: 20px; }
.pt-star--single .pt-star__count {
	padding-left: 8px;
	border-left: 2px solid var(--pt-line);
}

/* Na liście „Moje gwiazdki” w Moim koncie */
.pt-star--inline {
	height: 34px;
	padding: 0 12px;
	font-size: 14px;
}
.pt-star--inline .pt-star__icon { width: 16px; height: 16px; }
/* kolorowanka, której cofnięto gwiazdkę, blednie (zniknie po odświeżeniu strony) */
.pt-stars-list .pt-dl { transition: opacity .2s ease; }
.pt-stars-list .pt-dl:has(.pt-star[aria-pressed="false"]) { opacity: .5; }

/* Krótkie „podskoczenie” po dodaniu gwiazdki */
.pt-star.is-pop .pt-star__icon { animation: pt-star-pop .35s ease-out; }
@keyframes pt-star-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.35) rotate(-8deg); }
	100% { transform: scale(1); }
}

@media (max-width: 600px) {
	.pt-star--card { top: -13px; right: 10px; height: 34px; min-width: 36px; padding: 0 9px; font-size: 13px; }
	.pt-star--card .pt-star__icon { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pt-star,
	.pt-star__icon { transition: none; }
	.pt-star--card:hover,
	.pt-star--card:active { transform: none; }
	.pt-star.is-pop .pt-star__icon { animation: none; }
}