/* Wishlist page: header + product grid (reusing .qg-product-card from
   components/product-grid/component.css) + empty state. */

.qg-page-header {
	padding-top: var(--qg-space-5);
	padding-bottom: var(--qg-space-5);
}

.qg-page-header__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--qg-space-3);
	margin-top: var(--qg-space-2);
}

.qg-page-header__title {
	font-family: var(--qg-font-heading);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
	color: var(--qg-color-ink);
}

.qg-page-header__subtitle {
	margin: 0;
	color: var(--qg-color-ink-soft);
	font-size: 1rem;
}

.qg-page-header__count {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--qg-color-surface);
	border: 1px solid var(--qg-color-line);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--qg-color-ink-soft);
	white-space: nowrap;
}

/* Grid: matches .qg-product-grid__list breakpoints (2/3/4/5-up). */

.qg-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--qg-space-4) var(--qg-space-3);
	list-style: none;
	margin: 0 0 var(--qg-space-6);
	padding: 0;
}

@media (min-width: 640px) {
	.qg-wishlist-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.qg-wishlist-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1440px) {
	.qg-wishlist-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

.qg-wishlist-card {
	transition: opacity 0.35s var(--qg-ease), transform 0.35s var(--qg-ease);
}

.qg-wishlist-card.is-removing {
	opacity: 0;
	transform: scale(0.94);
	pointer-events: none;
}

/* The remove button reuses .qg-product-card__wishlist's hit-area and
   position, on a flat solid accent-colour disc — same flat-icon-button
   language as the shop grid's wishlist heart and the add-to-cart circle
   (see components/product-grid/component.css), not a frosted-glass disc
   with an inset highlight ring and a heavy drop shadow (that combination
   was the "3D" look). A single ambient shadow on the button itself is as
   far as depth goes; nothing on the icon or an inset rim light. The heart
   is rendered twice, split down the middle with a jagged clip-path into
   .qg-heart-break__half--left/--right — at rest the two halves sit flush
   and it just reads as a normal (already-liked) heart; clicking to remove
   adds .is-breaking (see the click handler in component.js), which pulls
   the halves apart, flashes them to the danger colour and fades them out
   in sync with the card's own removal animation, rather than reusing a
   generic heart or an unrelated icon for "unlike". */

.qg-wishlist-card__remove::before {
	content: none;
}

.qg-wishlist-card__remove .yith-wcwl-add-to-wishlist {
	top: var(--qg-space-2);
	right: var(--qg-space-2);
}

.qg-wishlist-card__remove a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--qg-gradient-cta);
	border: 2px solid var(--qg-color-surface);
	box-shadow: 0 2px 8px -2px rgba(22, 19, 15, 0.35);
	transition: background-color 0.2s var(--qg-ease), transform 0.2s var(--qg-ease), box-shadow 0.2s var(--qg-ease);
}

.qg-wishlist-card__remove a:hover,
.qg-wishlist-card__remove a:focus-visible {
	background: var(--qg-gradient-cta-hover);
	transform: scale(1.08);
	box-shadow: 0 6px 16px -4px rgba(255, 48, 48, 0.55);
}

.qg-wishlist-card__remove a:hover .qg-heart-break,
.qg-wishlist-card__remove a:focus-visible .qg-heart-break {
	animation: qg-heart-wobble 0.5s var(--qg-ease);
}

.qg-heart-break {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 13px;
}

.qg-heart-break__half {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--qg-color-surface);
	filter: none;
	transition: transform 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97), color 0.3s var(--qg-ease), opacity 0.4s var(--qg-ease);
}

.qg-heart-break__half--left {
	clip-path: polygon(0 0, 52% 0, 46% 18%, 58% 32%, 42% 48%, 60% 66%, 45% 84%, 52% 100%, 0 100%);
}

.qg-heart-break__half--right {
	clip-path: polygon(52% 0, 100% 0, 100% 100%, 52% 100%, 45% 84%, 60% 66%, 42% 48%, 58% 32%, 46% 18%);
}

@keyframes qg-heart-wobble {
	0%,
	100% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-8deg);
	}
	75% {
		transform: rotate(8deg);
	}
}

/* Triggered by component.js the instant "remove" is clicked — plays
   alongside (not instead of) the card's own is-removing fade. */
.qg-wishlist-card__remove a.is-breaking {
	background: rgba(200, 16, 16, 0.85);
}

.qg-wishlist-card__remove a.is-breaking .qg-heart-break__half {
	color: #fffdfa;
}

.qg-wishlist-card__remove a.is-breaking .qg-heart-break__half--left {
	transform: translate(-5px, 3px) rotate(-30deg);
	opacity: 0;
}

.qg-wishlist-card__remove a.is-breaking .qg-heart-break__half--right {
	transform: translate(5px, 3px) rotate(30deg);
	opacity: 0;
}

/* WooCommerce core ships `a.remove { color: var(--wc-red) !important; }`
   (assets/css/woocommerce.css) — harmless here since colour now lives on
   .qg-heart-break__half, not the link itself, but neutralised anyway so it
   can never leak through as a stray red tint on the badge background. */
.qg-wishlist-card__remove a.remove {
	color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
	.qg-wishlist-card__remove a:hover .qg-heart-break,
	.qg-wishlist-card__remove a:focus-visible .qg-heart-break {
		animation: none;
	}

	.qg-wishlist-card__remove a,
	.qg-heart-break__half {
		transition: none;
	}
}

.qg-wishlist-card__variation {
	font-size: 0.78rem;
	color: var(--qg-color-muted);
}

.qg-wishlist-card__stock {
	font-size: 0.75rem;
	font-weight: 600;
}

.qg-wishlist-card__stock.is-out {
	color: var(--qg-color-danger);
}

.qg-wishlist-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: var(--qg-space-6);
}

.qg-wishlist-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--qg-space-2);
}

/* Empty state */

.qg-wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 420px;
	margin: var(--qg-space-6) auto;
	padding: var(--qg-space-6) var(--qg-space-4);
}

.qg-wishlist-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--qg-color-accent-soft);
	color: var(--qg-color-accent-dark);
	margin-bottom: var(--qg-space-4);
}

.qg-wishlist-empty__icon .qg-icon {
	width: 34px;
	height: 34px;
}

.qg-wishlist-empty__title {
	font-family: var(--qg-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: var(--qg-color-ink);
}

.qg-wishlist-empty__text {
	margin: 0 0 var(--qg-space-4);
	color: var(--qg-color-ink-soft);
	line-height: 1.6;
}

.qg-wishlist-empty__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.9rem 1.9rem;
	border-radius: 999px;
	background: var(--qg-color-ink);
	color: var(--qg-color-paper);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background-color 0.3s var(--qg-ease), transform 0.3s var(--qg-ease);
}

.qg-wishlist-empty__cta:hover {
	background: var(--qg-color-accent-dark);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	.qg-page-header__row {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qg-wishlist-card,
	.qg-wishlist-empty__cta {
		transition: none;
	}
}