/**
 * Wishlist — button active state, header badge, wishlist page grid.
 *
 * Conventions:
 *   - Reuses existing tokens from variable.css (--danger-red-border, --text-secondary, etc.)
 *   - Heart fill on active matches the price-sale red used elsewhere
 *   - No !important — specificity bumps via button/.header__wishlist context
 */

/* ---------- Toggle button (used inside .product-card__btns-wrap) ---------- */

button.wishlist-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
	line-height: 0;
}

button.wishlist-toggle[aria-pressed="true"] .lucide-heart {
	fill: var(--danger-red-border, #c0392b);
	stroke: var(--danger-red-border, #c0392b);
}

/* Text variant — used inside .product-info__links on the PDP. Reuses the
   .product-info__link* styling already present in product-detail.css; this
   block strips the default <button> chrome so the inherited link styling
   applies. */
button.wishlist-toggle--text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	letter-spacing: inherit;
}

button.wishlist-toggle--text[aria-pressed="true"] .wishlist-toggle__icon {
	color: var(--danger-red-border, #c0392b);
}

/* ---------- Header heart icon + count badge ---------- */

.header__wishlist {
	position: relative;
	display: inline-block;
}

.header__wishlist .wishlist-count {
	position: absolute;
	top: 0;
	right: 0;
	transform: translate(35%, -35%);
}

.header__wishlist .wishlist-count[data-count="0"] {
	display: none;
}

/* ---------- Wishlist page body (chrome lives in page-wishlist.php) ----------
   Mirrors the cart-page card pattern so the wishlist and cart share a single
   visual language (.cart-page__items-card / .cart-page__item). */

.wishlist-page {
	padding: 100px 0;
	overflow-x: hidden;
}

@media (max-width: 991.98px) {
	.wishlist-page {
		padding: 60px 0;
	}
}

@media (max-width: 767.98px) {
	.wishlist-page {
		padding: 40px 0;
	}
}

.wishlist-page__empty {
	text-align: center;
	padding: 80px 20px;
}

.wishlist-page__empty p {
	margin-bottom: 24px;
	color: var(--text-secondary);
}

/* =========================================================================
   Items card — one row per product, parallels .cart-page__items-card
   ========================================================================= */

.wishlist-page__items {
	margin-bottom: 24px;
}

.wishlist-page__items-card {
	background: #fff;
	border: 1px solid var(--border-color-2);
	border-radius: 4px;
}

.wishlist-page__items-head {
	display: none;
}

@media (min-width: 768px) {
	.wishlist-page__items-head {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr) 110px 150px 28px;
		gap: 20px;
		align-items: center;
		padding: 16px 24px;
		border-bottom: 1px solid var(--border-color-2);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--text-secondary);
	}
}

.wishlist-page__item {
	display: block;
	padding: 20px 18px;
	border-bottom: 1px solid var(--border-color-2);
	position: relative;
	transition: opacity 0.3s ease;
}

.wishlist-page__item:last-child {
	border-bottom: 0;
}

/* Heart toggle sits at the row's top-right on mobile (so it never crowds the
   title) and inline as the last grid cell on desktop. */
.wishlist-page__item-remove {
	position: absolute;
	top: 18px;
	right: 16px;
}

.wishlist-page__item-remove.wishlist-toggle {
	color: var(--text-secondary);
}

.wishlist-page__item-remove.wishlist-toggle:hover {
	color: var(--danger-red-border);
}

@media (min-width: 768px) {
	.wishlist-page__item {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr) 110px 150px 28px;
		gap: 20px;
		align-items: center;
		padding: 20px 24px;
	}

	.wishlist-page__item-remove {
		position: static;
		justify-self: center;
	}
}

.wishlist-page__item-thumb {
	display: block;
}

.wishlist-page__item-thumb img,
.wishlist-page__item-img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 80px;
}

.wishlist-page__item-title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
}

.wishlist-page__item-title a {
	color: var(--text-primary);
	text-decoration: none;
}

.wishlist-page__item-title a:hover {
	color: var(--gold-color);
}

.wishlist-page__item-stock {
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wishlist-page__item-stock.is-in {
	color: var(--success-green);
}

.wishlist-page__item-stock.is-out {
	color: var(--danger-red-border);
}

.wishlist-page__item-stock.is-backorder {
	color: var(--warning-orange, #ff9800);
}

.wishlist-page__item-price {
	font-weight: 500;
	color: var(--text-primary);
}

.wishlist-page__item-price del {
	color: var(--text-secondary);
	margin-right: 6px;
}

.wishlist-page__item-price ins {
	text-decoration: none;
	color: var(--danger-red-border);
}

.wishlist-page__item-cart .btn {
	white-space: nowrap;
}

/* wpc-ajax-add-to-cart injects an <a class="added_to_cart">"View cart"</a>
   after a successful add — the header badge + toast already confirm it. */
.wishlist-page__items .added_to_cart {
	display: none !important;
}

/* Empty-wishlist action row below the card */
.wishlist-page__actions {
	text-align: right;
	margin-bottom: 32px;
}

/* ---------- Mobile stack — mirror .cart-page__item's per-row layout ---------- */

@media (max-width: 767.98px) {
	.wishlist-page__item-thumb {
		max-width: 110px;
		margin: 0 0 14px;
	}

	.wishlist-page__item-thumb img {
		max-width: 100%;
	}

	.wishlist-page__item-body {
		padding-right: 36px; /* clear the absolutely-positioned heart icon */
		margin-bottom: 14px;
	}

	.wishlist-page__item-price {
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--border-color-2);
	}

	.wishlist-page__item-price::before {
		content: 'Price';
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--text-secondary);
		margin-bottom: 6px;
	}

	.wishlist-page__item-cart .btn {
		width: 100%;
	}

	.wishlist-page__actions {
		text-align: center;
	}
}