/**
 * Midwest Armor Notify. Header heart icon styling.
 *
 * Mirrors the chrome's .mw-c-icon-btn pattern (account icon) so the heart
 * inherits cleanly across day/night modes. Uses currentColor so the chrome's
 * CSS variables drive the color in both themes.
 */

/* Header heart icon — matches the `.icon-btn` pattern from
 * reference/save_chip_spec.html. 36×36, transparent border by
 * default, dark border when items are saved (visible chrome
 * reads as "highlighted"). Hover adds a faint border. Badge is
 * a dark `#141416` pill with a 2px white ring + mono digits.
 *
 * Hard !important everywhere because the storefront chrome's
 * own .mw-c-icon-btn rules and theme button defaults would
 * otherwise win the cascade.
 */
.mwa-n-heart {
	position: relative;
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: 1px solid transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
	color: #141416 !important;
	cursor: pointer !important;
	font: inherit !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease;
}
.mwa-n-heart:hover {
	border-color: rgba( 0, 0, 0, 0.15 ) !important;
}

/* Per reference/save_header.html: the heart STAYS an outline in
 * the header. It's the entry-point button into the saved drawer —
 * it never represents a "saved" state itself (that's the drawer's
 * job). The count badge alone conveys "you have things here." */
.mwa-n-heart svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	transition: transform 120ms ease;
}

.mwa-n-heart:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Live count badge — neutral chip per reference/save_header.html.
 * LIGHT theme: dark `#141416` background, white text, 2px white
 *              ring (separates from the icon).
 * DARK  theme: light `#EDEEF0` background, dark text, 2px dark
 *              ring (inverted).
 * Positioned top-right corner of the icon button at top:-2px /
 * right:-2px. Brand orange is intentionally NOT used here — the
 * cart icon's orange count is the only conversion-orange in the
 * corner cluster. */
.mwa-n-heart__count {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #141416;
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 9px;
	font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
html[data-mw-mode="night"] .mwa-n-heart__count {
	background: #edeef0;
	color: #141416;
	border-color: #141416;
}
.mwa-n-heart__count[hidden] { display: none; }

/* Mobile variant — match .mw-c-mbar__icon sizing. */
.mwa-n-heart--mobile svg { width: 18px !important; height: 18px !important; }