/**
 * Shopper lists (inc/shopper-lists.php): toggle buttons, header counters in the bottom bar,
 * fly notice. Sizes and colours from UniShop2 (product-thumb__wishlist, product-page__wishlist-btn).
 */
.stovery-list-toggle {
	--stovery-toggle-color: color-mix(in srgb, var(--wp--preset--color--muted) 62%, var(--wp--preset--color--base));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	height: 28px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 3px;
	background-color: var(--wp--preset--color--surface-subtle);
	color: var(--stovery-toggle-color);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s linear, background-color 0.15s linear;
}

.stovery-list-toggle::before {
	content: "";
	flex: none;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--stovery-icon) center / contain no-repeat;
	mask: var(--stovery-icon) center / contain no-repeat;
}

.stovery-list-toggle:hover,
.stovery-list-toggle:focus-visible,
.stovery-list-toggle.is-active {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
}

.stovery-list-toggle.is-active.stovery-list-toggle--wishlist::before {
	-webkit-mask-image: var(--stovery-icon-filled, var(--stovery-icon));
	mask-image: var(--stovery-icon-filled, var(--stovery-icon));
}

.stovery-list-toggle--wishlist {
	--stovery-icon-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M1.95287 3.03636C3.0432 1.94604 4.522 1.3335 6.06395 1.3335C6.95245 1.3335 7.74989 1.46037 8.52626 1.79851C9.12481 2.0592 9.68481 2.43415 10.25 2.93326C10.8152 2.43415 11.3752 2.0592 11.9737 1.79851C12.7501 1.46037 13.5475 1.3335 14.436 1.3335C15.978 1.3335 17.4568 1.94604 18.5471 3.03636C19.6375 4.12669 20.25 5.60549 20.25 7.14745C20.25 9.59298 18.6364 11.4032 17.2524 12.7596L10.7433 19.2687C10.4709 19.5411 10.0291 19.5411 9.75667 19.2687L3.2492 12.7612C1.8509 11.409 0.25 9.60063 0.25 7.14745C0.25 5.60549 0.86254 4.12669 1.95287 3.03636Z'/%3E%3C/svg%3E");
}

.stovery-list-toggle--remove:hover {
	color: var(--wp--preset--color--accent-sale);
}

/* Bottom bar navigation link counter (UniShop2 fly-menu__wishlist-total): red badge over the icon. */
.wp-block-navigation-item__content {
	position: relative;
}

.stovery-nav-count {
	position: absolute;
	top: -0.35rem;
	left: calc(50% + 0.2rem);
	min-width: 1.1rem;
	padding: 0 0.25rem;
	border-radius: 1rem;
	background-color: var(--wp--preset--color--accent-sale);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.1rem;
	text-align: center;
}

/* Fly notice (UniShop2 uniFlyAlert): bottom right, above the mobile bottom bar. */
.stovery-lists-notice {
	position: fixed;
	right: var(--wp--preset--spacing--40);
	bottom: calc(var(--wp--preset--spacing--40) + 4.5rem);
	z-index: 1100;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	max-width: min(24rem, calc(100vw - 2 * var(--wp--preset--spacing--40)));
	padding: var(--wp--preset--spacing--40);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0;
	visibility: hidden;
	transform: translateX(1rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.stovery-lists-notice.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.stovery-lists-notice.is-error {
	border-left-color: var(--wp--preset--color--accent-sale);
}

.stovery-lists-notice a {
	color: var(--wp--preset--color--primary);
}

.stovery-lists-notice__close {
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}