/**
 * Wishlist styling.
 *
 * Every selector is prefixed. This drops a button into somebody else's product tile, in
 * somebody else's theme, so it has to style exactly its own markup and nothing near it.
 * Colours come from the two variables below, which a theme can override without touching
 * a single rule.
 */

:root {
	--codebold-wishlist-accent: #d63864;
	--codebold-wishlist-muted: #7a828c;
}

.codebold-wishlist-form {
	margin: 0;
	padding: 0;
}

.codebold-wishlist-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Its own reset: themes style bare `button` heavily, and inheriting a shop's
	   add-to-cart styling would make a heart look like a purchase. */
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var( --codebold-wishlist-muted );
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	/* 44px is the smallest target a finger hits reliably. */
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	transition: color .15s ease, transform .15s ease;
}

.codebold-wishlist-btn:hover,
.codebold-wishlist-btn:focus-visible {
	color: var( --codebold-wishlist-accent );
}

.codebold-wishlist-btn.is-saved {
	color: var( --codebold-wishlist-accent );
}

/* Saved is shown by a filled heart AND by the label, never by colour alone — a filled
   and an unfilled heart are close to identical to anyone who does not see the colour
   change, and on a tile the label is the only other cue. */
.codebold-wishlist-btn .codebold-wishlist-heart {
	display: inline-flex;
	transition: transform .15s ease;
}

.codebold-wishlist-btn.is-saved .codebold-wishlist-heart {
	transform: scale( 1.1 );
}

.codebold-wishlist-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}

.codebold-wishlist-btn:not(.is-saved) .codebold-wishlist-heart svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

/* ------------------------------------------------------- the header link */

.codebold-wishlist-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	min-height: 44px;
	padding: 0 4px;
}

.codebold-wishlist-link:hover {
	color: var( --codebold-wishlist-accent );
}

/* Outline in the header, the same as an unsaved product heart, so the filled version
   always means "this one is saved" and never "this is a link". */
.codebold-wishlist-link .codebold-wishlist-heart svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
}

.codebold-wishlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var( --codebold-wishlist-accent );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Zero saved shows nothing rather than a "0" badge, which reads as a notification the
   shopper cannot clear. */
.codebold-wishlist-count.is-empty {
	display: none;
}

/* ---------------------------------------------------------------- the page */

.codebold-wishlist-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.codebold-wishlist-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.codebold-wishlist-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.codebold-wishlist-name {
	font-weight: 600;
	text-decoration: none;
}

.codebold-wishlist-price {
	color: var( --codebold-wishlist-muted );
}

.codebold-wishlist-stock {
	font-size: 13px;
	color: #2f7a4f;
}

.codebold-wishlist-stock.is-out {
	color: #8a2424;
}

.codebold-wishlist-empty {
	padding: 40px 20px;
	text-align: center;
}

@media ( max-width: 480px ) {
	.codebold-wishlist-grid {
		grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
		gap: 16px;
	}
}