/**
 * Midwest Armor Notify — wishlist heart icon styles.
 *
 * Two surfaces share the same .mwa-heart class:
 *   - Product card hearts (in the loop): absolute-positioned
 *     top-right, semi-transparent background so it reads on
 *     thumbnail images.
 *   - PDP heart (next to add-to-cart): inline with the button row,
 *     no background, just the SVG.
 *
 * Anti-hype rule: no pulse animation, no scale-up bounce, no
 * confetti. A momentary `.is-toggling` class drives a subtle 200ms
 * scale tick — enough to feel like an action, not enough to read
 * as celebration.
 */

/* Save chip — implementation of reference/save_chip_spec.html.
 * 30×30 square chip with 14×14 heart glyph inside. Three states:
 *
 *   default:  white bg, faint gray border, gray glyph
 *   hover:    dark border + dark glyph (no color change)
 *   saved:    brand-orange border + glyph, light peach background
 *   saved+hover: deeper peach background
 *
 * Note: saved state is the BACKGROUND that's brand-tinted, not the
 * fill on the glyph itself — the glyph fills with currentColor
 * (orange) but the chip background stays a soft peach so the heart
 * reads as "in your list" without screaming.
 */
.mwa-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba( 0, 0, 0, 0.16 ) !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: #5A5D62 !important;
	cursor: pointer;
	transition: border-color 0.18s ease-out, background 0.18s ease-out, color 0.18s ease-out;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
	font: inherit !important;
}

.mwa-heart svg {
	width: 14px !important;
	height: 14px !important;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: transform 0.24s cubic-bezier( 0.34, 1.56, 0.64, 1 ), fill 0.18s ease-out;
}

.mwa-heart:hover {
	border-color: #141416 !important;
	color: #141416 !important;
	background: #ffffff !important;
}

.mwa-heart.is-saved {
	background: #fff6f0 !important;
	border-color: #d97a4a !important;
	color: #d97a4a !important;
}
.mwa-heart.is-saved:hover {
	background: #ffe9d9 !important;
}
.mwa-heart.is-saved svg {
	transform: scale( 1.05 );
	fill: currentColor;
}

.mwa-heart.is-toggling {
	transform: scale( 1.08 );
}

/* Loop-card variant — floats over the product thumbnail. Hard
 * z-index + pointer-events explicitly enabled so card-hover image
 * flip animations or overlay scrims that some themes (and the
 * Jelie gallery) drop on hover don't steal the click. */
.mwa-heart--card {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 20;
	pointer-events: auto;
	background: rgba( 255, 255, 255, 0.94 );
	border-color: rgba( 20, 20, 22, 0.14 );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}

/* Lift the heart above any image flip / scrim that a theme paints
 * on hover. Mo's site uses a flip transform on .woocommerce-
 * LoopProduct-link:hover — we counter by leaving the heart outside
 * that link (see PHP injector hook switch) and pinning it above
 * any sibling transformed layer. */
ul.products li.product:hover .mwa-heart--card,
.products li.product:hover .mwa-heart--card,
.woocommerce ul.products li.product:hover .mwa-heart--card {
	z-index: 30;
}

html[data-mw-mode="night"] .mwa-heart--card {
	background: rgba( 18, 18, 20, 0.92 );
	border-color: rgba( 245, 245, 246, 0.16 );
}

/* PDP variant — inline near the add-to-cart row */
.mwa-heart--pdp {
	margin-left: 8px;
	vertical-align: middle;
}

/* Focus-visible only — keep the click feel clean */
.mwa-heart:focus { outline: 0; }
.mwa-heart:focus-visible {
	outline: 2px solid var( --mw-accent, #d8551f );
	outline-offset: 2px;
}

/* WC product loop items need position:relative for the absolute
 * card heart to anchor correctly. WC's defaults already give
 * ul.products li.product position:relative, but reinforce here
 * because some themes override. */
ul.products li.product {
	position: relative;
}