/**
 * Storefront Wishlist — bound to the site's --ly-* design tokens with hard
 * fallbacks so it also renders correctly stand-alone. Elementor widget controls
 * override the header-trigger values; these are sensible zero-config defaults.
 */

/* ------------------------------------------------------------ heart glyph */
.sfwl-heart {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	overflow: visible;
	transition: fill 150ms ease, transform 150ms ease;
}
.is-active > .sfwl-toggle__icon .sfwl-heart,
.sfwl-toggle.is-active .sfwl-heart {
	fill: currentColor;
}

/* --------------------------------------------------- product heart toggle */
.sfwl-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: var(--ly-color-text, #f5ede6);
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 150ms ease, transform 150ms ease;
}
.sfwl-toggle .sfwl-heart {
	width: 22px;
	height: 22px;
}
.sfwl-toggle:hover {
	color: var(--ly-color-primary, #e0102f);
}
.sfwl-toggle.is-active {
	color: var(--ly-color-primary, #e0102f);
}
.sfwl-toggle:active .sfwl-heart {
	transform: scale(0.88);
}

/* Icon-only variant overlaid on the product-grid card. */
li.product:has(> .sfwl-toggle:not(.sfwl-toggle--labelled)) {
	position: relative;
}
li.product > .sfwl-toggle:not(.sfwl-toggle--labelled) {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: var(--ly-radius-pill, 999px);
	background: var(--ly-color-surface, rgba(18, 10, 15, 0.72));
	border: 1px solid var(--ly-color-border, rgba(245, 237, 230, 0.12));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
li.product > .sfwl-toggle:not(.sfwl-toggle--labelled):hover {
	border-color: var(--ly-color-primary, #e0102f);
}

/* Labelled variant (single product page). */
.sfwl-toggle--labelled {
	gap: 10px;
	font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--ly-letter-spacing-eyebrow, 0.14em);
	color: var(--ly-color-text-muted, rgba(245, 237, 230, 0.72));
}
.sfwl-toggle--labelled:hover,
.sfwl-toggle--labelled.is-active {
	color: var(--ly-color-primary, #e0102f);
}

/* ------------------------------------------------ header trigger + badge */
.sfwl-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	color: var(--ly-color-text, #f5ede6);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: color 150ms ease;
}
.sfwl-trigger:hover {
	color: var(--ly-color-primary, #e0102f);
}
.sfwl-trigger__label {
	font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Count badge — shared by the Elementor trigger and the [wishlist_count] link. */
.sfwl-trigger__count,
.sfwl-mini .sfwl-count {
	position: absolute;
	top: -6px;
	right: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: var(--ly-radius-pill, 999px);
	background: var(--ly-color-primary, #e0102f);
	color: var(--ly-color-text-on-primary, #ffffff);
	font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
.sfwl-trigger__count[hidden],
.sfwl-count[hidden] {
	display: none;
}

/* -------------------------------------------------- [wishlist_count] link */
.sfwl-mini {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--ly-color-text, #f5ede6);
	text-decoration: none;
	transition: color 150ms ease;
}
.sfwl-mini:hover {
	color: var(--ly-color-primary, #e0102f);
}
.sfwl-mini .sfwl-heart {
	width: 22px;
	height: 22px;
}

/* ------------------------------------------------------- wishlist page */
.sfwl-page__loading {
	color: var(--ly-color-text-muted, rgba(245, 237, 230, 0.7));
	font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif);
}
.sfwl-page__empty {
	text-align: center;
	padding: 64px 24px;
}
.sfwl-page__empty-icon .sfwl-heart {
	width: 48px;
	height: 48px;
	color: var(--ly-color-primary, #e0102f);
	opacity: 0.55;
}
.sfwl-page__empty-text {
	margin: 18px 0 24px;
	font-family: var(--ly-text-display, 'Playfair Display', Georgia, serif);
	font-size: 1.5rem;
	color: var(--ly-color-text, #f5ede6);
}
.sfwl-page__cta {
	display: inline-block;
	padding: 14px 30px;
	border-radius: var(--ly-radius-pill, 999px);
	background: var(--ly-color-primary, #e0102f);
	color: var(--ly-color-text-on-primary, #fff);
	font-family: var(--ly-text-body, 'Manrope', system-ui, sans-serif);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--ly-shadow-glow, 0 0 0 1px rgba(224, 16, 47, 0.45), 0 10px 34px rgba(224, 16, 47, 0.28));
	transition: transform 150ms ease, background 150ms ease;
}
.sfwl-page__cta:hover {
	background: var(--ly-color-primary-hover, #f5324d);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.sfwl-heart,
	.sfwl-toggle,
	.sfwl-trigger,
	.sfwl-page__cta {
		transition: none;
	}
}