@media (max-width: 767px) {
	html {
		scroll-padding-bottom: 100px;
	}

	.msbn-nav {
		position: fixed;
		z-index: 99999;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom, 0px));
		left: 12px;
		box-sizing: border-box;
		max-width: 520px;
		margin-inline: auto;
		padding: 8px;
		color: var(--msbn-color);
		background: var(--msbn-bg);
		border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
		border-radius: 24px;
		box-shadow: 0 14px 38px rgba(15, 23, 42, 0.2);
		isolation: isolate;
	}

	.msbn-list {
		display: flex;
		align-items: center;
		gap: 4px;
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.msbn-product-purchase {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 2px 10px;
		margin-bottom: 8px;
		border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
	}

	.msbn-product-pricing {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 8px;
		min-width: 0;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.35;
	}

	.msbn-product-price {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 7px;
		align-items: center;
		min-width: 0;
	}

	.msbn-product-price .woocommerce-Price-amount {
		white-space: nowrap;
	}

	.msbn-product-price del {
		opacity: 0.58;
		font-size: 0.82em;
		font-weight: 500;
	}

	.msbn-product-price ins {
		color: inherit;
		text-decoration: none;
	}

	.msbn-discount-badge {
		padding: 2px 7px;
		color: var(--msbn-active-color);
		background: var(--msbn-active-bg);
		border-radius: 999px;
		font-size: 11px;
		font-weight: 800;
		white-space: nowrap;
	}

	.msbn-nav .msbn-purchase-button {
		appearance: none !important;
		-webkit-appearance: none !important;
		flex: 0 0 auto;
		max-width: 48%;
		min-height: 42px;
		padding: 9px 16px !important;
		color: var(--msbn-active-color) !important;
		background-color: var(--msbn-active-bg) !important;
		background-image: none !important;
		border: 1px solid transparent !important;
		border-radius: 15px !important;
		box-shadow: 0 5px 14px rgba(15, 23, 42, 0.18) !important;
		box-shadow: 0 5px 14px color-mix(in srgb, var(--msbn-active-bg) 30%, transparent) !important;
		font-family: inherit !important;
		font-size: 13px !important;
		font-style: normal !important;
		font-weight: 800 !important;
		line-height: 1.25 !important;
		text-align: center;
		text-decoration: none !important;
		text-shadow: none !important;
		cursor: pointer;
		transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
	}

	.msbn-nav .msbn-purchase-button:hover,
	.msbn-nav .msbn-purchase-button:focus {
		color: var(--msbn-active-color) !important;
		background-color: var(--msbn-active-bg) !important;
		border-color: transparent !important;
		transform: translateY(-1px);
	}

	.msbn-nav .msbn-purchase-button:active {
		transform: translateY(0);
	}

	.msbn-nav .msbn-purchase-button:disabled,
	.msbn-nav .msbn-purchase-button.is-unavailable {
		color: var(--msbn-color) !important;
		background-color: var(--msbn-bg) !important;
		background-color: color-mix(in srgb, var(--msbn-color) 9%, var(--msbn-bg)) !important;
		border-color: rgba(127, 127, 127, 0.25) !important;
		border-color: color-mix(in srgb, var(--msbn-color) 20%, transparent) !important;
		box-shadow: none !important;
		cursor: not-allowed;
		opacity: 0.78 !important;
		transform: none;
	}

	.msbn-nav .msbn-purchase-button:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	form.cart.msbn-needs-attention {
		animation: msbn-attention 650ms ease;
	}

	.msbn-item {
		flex: 1 1 0;
		min-width: 0;
		padding: 0;
		margin: 0;
	}

	.msbn-item.is-active-item {
		flex-grow: 1.65;
	}

	.msbn-link {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-height: 48px;
		padding: 7px;
		color: var(--msbn-color);
		text-decoration: none;
		border-radius: 18px;
		outline-offset: 2px;
		transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
		-webkit-tap-highlight-color: transparent;
	}

	.msbn-link.is-active {
		padding-inline: 12px;
	}

	.msbn-link:hover,
	.msbn-link:focus,
	.msbn-link:visited {
		color: var(--msbn-color);
		text-decoration: none;
	}

	.msbn-link:focus-visible {
		outline: 2px solid var(--msbn-active-bg);
	}

	.msbn-link.is-active {
		color: var(--msbn-active-color);
		background: var(--msbn-active-bg);
	}

	.msbn-link.is-active:hover,
	.msbn-link.is-active:focus,
	.msbn-link.is-active:visited {
		color: var(--msbn-active-color);
	}

	.msbn-icon-wrap {
		display: grid;
		flex: 0 0 auto;
		place-items: center;
		width: 27px;
		height: 27px;
	}

	.msbn-icon {
		display: block;
		width: 25px;
		height: 25px;
		background-color: currentColor;
		-webkit-mask: var(--msbn-icon-url) center / contain no-repeat;
		mask: var(--msbn-icon-url) center / contain no-repeat;
	}

	.msbn-label {
		overflow: hidden;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.msbn-link:not(.is-active) .msbn-label,
	.msbn-hide-labels .msbn-label {
		display: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.msbn-link {
			transition: none;
		}

		.msbn-nav .msbn-purchase-button {
			transition: none;
		}

		form.cart.msbn-needs-attention {
			animation: none;
		}
	}
}

@keyframes msbn-attention {
	0%, 100% { box-shadow: none; }
	50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--e-global-color-primary, #2563eb) 25%, transparent); }
}

@media (min-width: 768px), print {
	.msbn-nav {
		display: none !important;
	}
}

@supports not (color: color-mix(in srgb, black, white)) {
	@media (max-width: 767px) {
		.msbn-nav {
			border-color: rgba(127, 127, 127, 0.2);
		}
	}
}