/* --- Wishlist heart button — child of .pcseal-card-overlays (see
   card-overlays.css: container is position:absolute + pointer-events:none,
   children get pointer-events:auto back), so only button-reset + icon
   styling is needed here, not positioning. --- */
.pcseal-wishlist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--surface);
	color: var(--muted);
	box-shadow: 0 1px 4px rgba(10, 30, 20, .18);
	cursor: pointer;
	transition: color .15s ease, transform .15s ease, background .15s ease;
}

.pcseal-wishlist-btn svg {
	display: block;
}

.pcseal-wishlist-btn:hover,
.pcseal-wishlist-btn:focus-visible {
	color: #e63950;
	transform: scale(1.08);
}

/* Loved state: filled heart. A dedicated red/pink rather than --gold, since
   --gold is already the site's sale/CTA accent — this keeps "on sale" and
   "wishlisted" visually distinct on the same card. */
.pcseal-wishlist-btn.is-active {
	color: #e63950;
}

.pcseal-wishlist-btn.is-active svg {
	fill: currentColor;
}

/* --- [pcseal_wishlist] page --- */
.pcseal-wishlist-root {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	min-height: 60px;
}

/* Empty state: root's own text content (data-empty-text) when the list is
   empty / nothing was returned — no grid needed for a single text line. */
.pcseal-wishlist-root:empty,
.pcseal-wishlist-root:not(:has(.pcseal-card-wrap)) {
	display: block;
	color: var(--muted);
	font-size: 0.95rem;
	padding: 24px 0;
	text-align: center;
}