.mn-cta {
	--mn-cta-ease: cubic-bezier(0.2, 0.8, 0.3, 1);

	--mn-cta-flaeche: linear-gradient(180deg, var(--mn-cta-hell, #1f8f58), var(--mn-cta-grund, #187a4a));
	--mn-cta-grundflaeche: var(--mn-cta-grund, #187a4a);
	--mn-cta-kante: rgba(201, 162, 101, 0.5);
	--mn-cta-schatten: 0 1px 2px rgba(23, 33, 28, 0.14), 0 6px 18px -8px rgba(23, 33, 28, 0.42);
	--mn-cta-schrift: #fff;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

ul.products .mn-cta {
	--mn-cta-flaeche: var(--mn-cardcart, var(--mn-action, #2eae06));
	--mn-cta-grundflaeche: var(--mn-cardcart, var(--mn-action, #2eae06));
	--mn-cta-kante: transparent;
	--mn-cta-schatten: none;
	--mn-cta-schrift: var(--mn-cardcart-fg, #fff);
}

.mona-result__cart--icon.mn-cta {
	--mn-cta-flaeche: var(--mn-cardcart, var(--mn-action, #2eae06));
	--mn-cta-grundflaeche: var(--mn-cardcart, var(--mn-action, #2eae06));
	--mn-cta-kante: transparent;
	--mn-cta-schatten: none;
	--mn-cta-schrift: var(--mn-cardcart-fg, #fff);

	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 8px;
}

.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta {
	background: var(--mn-cta-flaeche) !important;
	background-color: var(--mn-cta-grundflaeche) !important;
	border: 1px solid var(--mn-cta-kante) !important;
	box-shadow: var(--mn-cta-schatten);
	color: var(--mn-cta-schrift) !important;
	transition:
		background 0.2s var(--mn-cta-ease),
		box-shadow 0.2s var(--mn-cta-ease),
		border-color 0.2s var(--mn-cta-ease),
		color 0.2s var(--mn-cta-ease),
		transform 0.1s var(--mn-cta-ease);
}

.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta.loading,
.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta.is-busy {
	background: linear-gradient(180deg, var(--mn-cta-hell, #1f8f58), var(--mn-cta-grund, #187a4a)) !important;
	background-color: var(--mn-cta-grund, #187a4a) !important;
	border-color: rgba(201, 162, 101, 0.5) !important;
	color: #fff !important;
}


.mn-cta-sheen {
	position: absolute;
	top: -60%;
	bottom: -60%;
	left: -45%;
	width: 38%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.36), transparent);
	transform: skewX(-18deg);
	z-index: 1;
	pointer-events: none;
}

@keyframes mn-cta-sheen {
	to {
		left: 125%;
	}
}


.mn-cta-face {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	transition: opacity 0.2s var(--mn-cta-ease), transform 0.28s var(--mn-cta-ease);
}

.mn-cta-roll {
	display: block;
	height: var(--mn-cta-step, 1.4em);
	overflow: hidden;
}

.mn-cta-roll > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--mn-cta-step, 1.4em);
	white-space: nowrap;
	transition: transform 0.34s var(--mn-cta-ease);
}

.mn-cta .mn-icon {
	flex: 0 0 auto;
}

.mn-cta .mn-cta-ico-plus {
	display: none;
}


@media (hover: hover) and (pointer: fine) {
	.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta:hover {
		background: linear-gradient(180deg, var(--mn-cta-heller, #2aa267), var(--mn-cta-hell, #1f8f58)) !important;
		background-color: var(--mn-cta-hell, #1f8f58) !important;
		border-color: #c9a265 !important;
		color: #fff !important;
		box-shadow: 0 3px 5px rgba(23, 33, 28, 0.14), 0 14px 28px -10px rgba(23, 33, 28, 0.5);
		transform: translateY(-2px);
	}

	.mn-cta--roll:hover .mn-cta-roll > span {
		transform: translateY(calc(-1 * var(--mn-cta-step, 1.4em)));
	}

	.mn-cta:hover .mn-cta-sheen {
		animation: mn-cta-sheen 0.9s var(--mn-cta-ease);
	}
}


.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta.is-press,
body.mn-touchfx .mn-cta.mn-cta.mn-cta.mn-cta.mn-cta.mn-pressed {
	background: linear-gradient(180deg, var(--mn-cta-heller, #2aa267), var(--mn-cta-hell, #1f8f58)) !important;
	background-color: var(--mn-cta-hell, #1f8f58) !important;
	border-color: #c9a265 !important;
	color: #fff !important;
}

.mn-cta.mn-cta.is-press {
	transform: translateY(1px) scale(0.988);
	transition-duration: 0.1s;
}

.mn-cta--roll.is-press .mn-cta-roll > span {
	transform: translateY(calc(-1 * var(--mn-cta-step, 1.4em)));
}

.mn-cta.is-press .mn-cta-sheen {
	animation: mn-cta-sheen 0.5s var(--mn-cta-ease);
}

@media (hover: none) {
	body.mn-touchfx .mn-cta.mn-cta.mn-cta.mn-pressed {
		transform: translateY(1px) scale(0.988);
		filter: none;
	}

	body.mn-touchfx .mn-cta--roll.mn-pressed .mn-cta-roll > span {
		transform: translateY(calc(-1 * var(--mn-cta-step, 1.4em)));
	}

	body.mn-touchfx .mn-cta.mn-pressed .mn-cta-sheen {
		animation: mn-cta-sheen 0.5s var(--mn-cta-ease);
	}
}


.mn-cta-rip {
	position: absolute;
	z-index: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	animation: mn-cta-rip 0.58s var(--mn-cta-ease) forwards;
}

@keyframes mn-cta-rip {
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}


.mn-cta-dots {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	pointer-events: none;
}

.mn-cta-dots i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #fff;
	opacity: 0.5;
	animation: mn-cta-dot 1s infinite var(--mn-cta-ease);
}

.mn-cta-dots i:nth-child(2) {
	animation-delay: 0.15s;
}

.mn-cta-dots i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes mn-cta-dot {
	0%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	50% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

.mn-cta.loading .mn-cta-dots,
.mn-cta.is-busy .mn-cta-dots {
	display: flex;
}

.mn-cta.loading .mn-cta-face,
.mn-cta.is-busy .mn-cta-face {
	opacity: 0.3;
}

.mn-cta.loading,
.mn-cta.is-busy {
	cursor: progress;
}


.mn-cta-done {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(9px);
	pointer-events: none;
	transition: opacity 0.2s var(--mn-cta-ease), transform 0.28s var(--mn-cta-ease);
}

.mn-cta-done .mn-icon-check path {
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
}

.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta.is-done {
	background: linear-gradient(180deg, var(--mn-cta-grund, #187a4a), var(--mn-cta-dunkel, #10593a)) !important;
	background-color: var(--mn-cta-dunkel, #10593a) !important;
	border-color: #a97c3f !important;
	color: #fff !important;
	transform: none;
}

.mn-cta.is-done .mn-cta-face {
	opacity: 0;
	transform: translateY(-9px);
}

.mn-cta.is-done .mn-cta-done {
	opacity: 1;
	transform: translateY(0);
}

.mn-cta.is-done .mn-icon-check path {
	animation: mn-cta-draw 0.38s 0.06s var(--mn-cta-ease) forwards;
}

@keyframes mn-cta-draw {
	to {
		stroke-dashoffset: 0;
	}
}


.mn-cta--icon {
	--mn-cta-step: 24px;
}

.mn-cta--icon .mn-cta-line2 .mn-cta-txt,
.mn-cta--icon .mn-cta-line2 .mn-icon:not(.mn-cta-ico-plus),
.mn-cta--icon .mn-cta-done .mn-cta-txt {
	display: none;
}

.mn-cta--icon .mn-cta-line2 .mn-cta-ico-plus {
	display: block;
}

.mn-cta--icon .mn-cta-sheen {
	width: 52%;
	left: -60%;
}

@media (max-width: 767.98px) {
	.mn-flycart-btn.mn-cta {
		--mn-cta-step: 26px;
	}

	.mn-flycart-btn.mn-cta .mn-cta-line2 .mn-cta-txt,
	.mn-flycart-btn.mn-cta .mn-cta-line2 .mn-icon:not(.mn-cta-ico-plus),
	.mn-flycart-btn.mn-cta .mn-cta-done .mn-cta-txt,
	.mn-flycart-btn.mn-cta .mn-cta-line1 .mn-cta-txt {
		display: none;
	}

	.mn-flycart-btn.mn-cta .mn-cta-line2 .mn-cta-ico-plus {
		display: block;
	}

	.mn-flycart-btn.mn-cta .mn-cta-sheen {
		width: 52%;
		left: -60%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-cta-sheen,
	.mn-cta-rip {
		display: none;
	}

	.mn-cta-roll > span,
	.mn-cta-face,
	.mn-cta-done {
		transition: none;
	}

	.mn-cta-dots i {
		animation: none;
		opacity: 0.8;
	}

	.mn-cta.is-done .mn-icon-check path {
		animation: none;
		stroke-dashoffset: 0;
	}

	@media (hover: hover) and (pointer: fine) {
		.mn-cta.mn-cta.mn-cta.mn-cta.mn-cta:hover {
			transform: none;
		}

		.mn-cta:hover .mn-cta-roll > span {
			transform: none;
		}
	}
}


.mn-cta-bump {
	animation: mn-cta-bump 0.45s var(--mn-cta-ease, cubic-bezier(0.2, 0.8, 0.3, 1));
}

@keyframes mn-cta-bump {
	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.12);
	}

	70% {
		transform: scale(0.97);
	}

	100% {
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-cta-bump {
		animation: none;
	}
}