/* ===================================================================
   ASTYLIO Wishlist — heart icon + confirmation
   =================================================================== */

/* ── Wishlist Button ───────────────────────────────────────────── */
.aksh-wishlist-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-left: var(--astylio-space-3, 12px);
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text, #252525);
	transition: color 0.2s ease, transform 0.2s ease;
	vertical-align: middle;
}

.aksh-wishlist-btn:hover {
	background: transparent;
	color: var(--color-brand-primary);
}

.aksh-wishlist-btn:focus,
.aksh-wishlist-btn:focus-visible {
	outline: none;
	box-shadow: none;
}

.aksh-wishlist-btn.is-wishlisted {
	color: var(--color-brand-primary);
}

.aksh-wishlist-btn svg {
	width: 20px;
	height: 20px;
}

/* ── Confirmation Message ──────────────────────────────────────── */
.aksh-confirmation {
	padding: var(--astylio-space-3, 12px) var(--astylio-space-4, 16px);
	margin-top: var(--astylio-space-3, 12px);
	background: var(--color-bg-surface, #FCFAF7);
	border: 1px solid var(--color-border, #DED6CE);
	border-radius: var(--radius-sm, 4px);
	font-family: var(--astylio-font-body, 'Poppins', sans-serif);
	font-size: var(--astylio-body-sm, 13px);
	color: var(--color-text, #252525);
	animation: aksh-fade-in 0.2s ease;
}

@keyframes aksh-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}