/*
 * Wishlist styling: heart button (used in asset cards) + wishlist page grid.
 *
 * Heart button uses the surrounding text colour by default (currentColor).
 * Fills red when active. Asset cards can apply additional styling.
 */

/* === Heart button === */
.iow-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: rgba(255,255,255,0.9);
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 9999px;
	color: hsl(220 10% 45%);
	cursor: pointer;
	transition: all 200ms;
	position: relative;
}
.iow-heart:hover {
	color: hsl(0 70% 55%);
	transform: scale(1.05);
}
.iow-heart.is-active {
	color: hsl(0 70% 50%);
}
.iow-heart.is-active svg {
	fill: currentColor;
}
/* Hide both label spans visually — they're for screen-reader context */
.iow-heart-label-add, .iow-heart-label-remove {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}
.iow-heart:not(.is-active) .iow-heart-label-remove,
.iow-heart.is-active .iow-heart-label-add {
	display: none;
}

/* === Wishlist page === */
.iow-wishlist-actions {
	display: flex;
	gap: 0.75rem;
	margin: 0 0 2rem;
	flex-wrap: wrap;
}

.iow-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
@media (min-width: 768px) {
	.iow-wishlist-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.iow-wishlist-grid { grid-template-columns: repeat(4, 1fr); }
}

.iow-wishlist-card {
	position: relative;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	transition: border-color 200ms;
}
.iow-wishlist-card:hover {
	border-color: var(--wp--preset--color--primary);
}
.iow-wishlist-card-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--muted);
}
.iow-wishlist-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.iow-wishlist-card-noimg {
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--muted);
}
.iow-wishlist-card-placeholder {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--wp--preset--color--muted-foreground);
}
.iow-wishlist-card-info {
	padding: 0.75rem 1rem;
}
.iow-wishlist-card-title {
	display: block;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.4;
}
.iow-wishlist-card-title:hover {
	color: var(--wp--preset--color--primary);
}
.iow-wishlist-card-price {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted-foreground);
	margin-top: 0.25rem;
}
.iow-wishlist-remove {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.9);
	border: none;
	border-radius: 9999px;
	color: hsl(0 70% 50%);
	cursor: pointer;
	transition: transform 150ms;
}
.iow-wishlist-remove:hover {
	transform: scale(1.1);
}

.iow-wishlist-empty {
	text-align: center;
	padding: 3rem 1.5rem;
}

/* === Toast === */
.iow-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%) translateY(120%);
	background: hsl(220 25% 10%);
	color: hsl(210 15% 95%);
	padding: 0.75rem 1.25rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	z-index: 9999;
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
}
.iow-toast.is-visible {
	transform: translateX(-50%) translateY(0);
}