@layer stickyAffiliateCta {
	:root {
		--sac-text: #000000;
		--sac-border: #f2f2f2;
		--sac-background: #ffffff;
		--sac-shadow: rgb(187 187 187 / 36%);
		--sac-button: #00d318;
	}

	.sticky-affiliate-cta {
		font-size: 1rem !important;
		width: 100% !important;
		position: fixed !important;
		bottom: 0 !important;
		color: var(--sac-text) !important;
		background: var(--sac-background) !important;
		z-index: 999 !important;
		padding: .5em 0 !important;
		box-sizing: border-box !important;
		border-top: solid 1px var(--sac-border) !important;
		transform: translateY(100%) !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: all .3s !important;

		&.is-floating {
			opacity: 1 !important;
			visibility: visible !important;
			transform: translateY(0) !important;
		}

		@media (min-width: 678px) {
			top: 0 !important;
			bottom: auto !important;
			border: none !important;
			padding: 1em 0 !important;
			box-shadow: 0 0 20px var(--sac-shadow) !important;
			transform: translateY(-100%) !important;
		}

		* {
			box-sizing: border-box !important;
		}

		.sticky-affiliate-cta__inner {
			display: flex !important;
			justify-content: space-between !important;
			gap: 10px !important;
			align-items: center !important;
			padding: 0 .5em !important;
			margin-inline: auto !important;
			width: 100% !important;
			max-width: 1080px !important;

			@media (min-width: 678px) {
				padding: 0 1em !important;
			}

			.sticky-affiliate-cta__inner-title {
				display: none !important;

				@media (min-width: 678px) {
					font-weight: 600 !important;
					display: block !important;
				}
			}

			.sticky-affiliate-cta__inner-link {
				flex-shrink: 0 !important;
				font-weight: 600 !important;
				color: #fff !important;
				text-align: center !important;
				line-height: 45px !important;
				height: 45px !important;
				border-radius: 4px !important;
				text-decoration: none !important;
				padding: 0 1em !important;
				background: var(--sac-button) !important;
				transition: background .3s !important;

				&:hover {
					background: color-mix(in oklab, var(--sac-button), #000 10%) !important;
				}

				@media (max-width: 678px) {
					display: block !important;
					width: 100% !important;
				}

				&.sticky-affiliate-cta__inner-link--mobile {
					@media (min-width: 678px) {
						display: none !important;
					}
				}

				&.sticky-affiliate-cta__inner-link--desktop {
					display: none !important;

					@media (min-width: 678px) {
						display: inline-block !important;
					}
				}
			}
		}
	}
}