/* ELI Coin / Rewards control in the site header. Sized like the theme's own header items
   (Wishlist / Compare / Cart: 16px icon over a 12px label, 18px count bubble on the accent colour;
   mobile: 40px rounded box like the phone icon). Namespaced .er-nav; changes no theme element. */
.elementor-widget-container:has(> .er-nav) { display: flex; align-items: center; gap: var(--column-gap, 20px); }

a.er-nav.er-nav {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid transparent;
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	line-height: 21px;
	text-align: center;
	text-decoration: none;
	transition: color .3s, background-color .3s;
}
a.er-nav--desktop.er-nav { flex-direction: column; min-width: 40px; min-height: 40px; padding: 4px 8px 0; border-radius: 40px; }
a.er-nav--desktop.er-nav:hover { color: rgba(255, 255, 255, .72); }
a.er-nav--mobile.er-nav { width: 40px; height: 40px; padding: 0; border-color: #f2f4f7; border-radius: 6px; background: #fff; }
a.er-nav.er-nav:focus-visible { outline: 2px solid var(--e-global-color-accent, #fea231); outline-offset: 2px; }

.er-nav .er-nav__coin { display: block; flex: none; width: 18px; height: 18px !important; max-width: none; margin: 0; object-fit: contain; }
.er-nav--mobile .er-nav__coin { width: 24px; height: 24px !important; }
.er-nav__label { display: block; }

/* Balance bubble: the cart count bubble's size and colours. */
.er-nav__count {
	position: absolute;
	top: -8px;
	right: -2px;
	box-sizing: border-box;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 18px;
	background: var(--e-global-color-accent, #fea231);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}
.er-nav--desktop .er-nav__count { right: 6px; }
.er-nav--mobile .er-nav__count { top: -6px; right: -6px; }

/* Same divider as between Wishlist / Compare / Cart. */
.er-nav__sep { display: block; flex: none; width: 1px; height: 16px; background: rgba(255, 255, 255, .19); }

@media (prefers-reduced-motion: reduce) {
	a.er-nav.er-nav { transition: none; }
}