/* My Account "Wishlist" tab (/my-account/wishlist/) — is_wc_endpoint_url('wishlist')
   scoped, so this never loads on any other account page. Card look
   deliberately matches .lumgem-carousel--product-page's cards (same 1:1
   image, name/price hierarchy) rather than inventing a second product-card
   design. */

.lumgem-wishlist {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lumgem-space-4);
}

.lumgem-wishlist__empty {
	grid-column: 1 / -1;
	color: var(--lumgem-color-muted);
}

.lumgem-wishlist__item {
	display: flex;
	flex-direction: column;
	gap: var(--lumgem-space-2);
}

.lumgem-wishlist__item-link {
	display: flex;
	flex-direction: column;
	gap: var(--lumgem-space-2);
	text-decoration: none;
	color: inherit;
}

.lumgem-wishlist__image img {
	display: block;
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.lumgem-wishlist__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: var(--lumgem-color-ink);
}

.lumgem-wishlist__price {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--lumgem-color-accent-dark);
}

/* `.lumgem-scope` prefix (2 classes) needed to beat the generic
   `.lumgem-scope button` reset (1 class + 1 element) — same specificity
   fix pattern as the carousel arrows/quick-add elsewhere in this project;
   a bare 1-class selector here would otherwise silently render as that
   reset's dark-ink-filled button instead of this outline style. */
.lumgem-scope .lumgem-wishlist__remove {
	width: 100%;
	min-height: 40px;
	font-size: 12px;
	background: transparent;
	border: 1px solid var(--lumgem-color-line);
	color: var(--lumgem-color-ink);
}

.lumgem-scope .lumgem-wishlist__remove:hover {
	border-color: var(--lumgem-color-ink);
	background: var(--lumgem-color-surface-alt);
}

@media (max-width: 1023px) {
	.lumgem-wishlist {
		grid-template-columns: repeat(2, 1fr);
	}
}