.sidenav {
	position: absolute;
	top: 2rem;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 10;
}

button.sidenav__cta {
	appearance: none;
	background: no-repeat;
	border: none;
	padding: 0;
}

.sidenav__cta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.sidenav__cta > span {
	flex-grow: 1;
	text-align: center;
	background-color: var(--color-red);
	color: white;
	font: 400 0.8em Sequel-Neue, sans-serif;
	text-transform: uppercase;
	padding: 0.5em 1em;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
}

.sidenav__cta::after {
	content: '';
	background-color: var(--color-mid-green);
	aspect-ratio: 3 / 2;
	height: 3em;
	border-top-left-radius: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto calc(100% - 12px);
}

.sidenav__cta--click2buy::after {
	background-image: url('data:image/svg+xml,<svg enable-background="new 0 0 32 34.4" width="32" height="34" viewBox="0 0 32 34.4" xmlns="http://www.w3.org/2000/svg"><path d="m24.7 7.4-4.1-7.1c-.2-.2-.4-.3-.6-.3h-15.2c-.2 0-.4.1-.6.3l-4.1 7c-.1.2-.1.3-.1.4v1.3c0 1 .4 2 1.1 2.7v14.1c0 .2.1.4.2.5s.3.2.5.2h21.2c.2 0 .3-.1.5-.2.1-.1.2-.3.2-.5v-14c.7-.7 1.1-1.7 1.1-2.7v-1.4c0-.1-.1-.2-.1-.3zm-5.8 1.1h4.5v.6c0 1.3-1 2.4-2.3 2.4-1.2 0-2.3-1.1-2.3-2.4zm-13.7-7.1h14.4l3.3 5.6h-21zm7.8 7h4.5v.6c0 .6-.2 1.3-.6 1.7-.4.5-1 .7-1.6.7s-1.2-.3-1.6-.7c-.4-.5-.7-1.1-.6-1.7zm-5.8 0h4.5v.6c0 .6-.2 1.3-.6 1.7-.4.5-1 .7-1.6.7s-1.2-.3-1.6-.7c-.4-.5-.7-1.1-.6-1.7zm-5.9.7v-.7h4.5v.6c0 .6-.2 1.2-.7 1.7-.4.4-1 .7-1.6.7-1.2 0-2.2-1-2.2-2.3zm8.9 16.1h-4.1v-8.4h4.1zm12.1 0h-10.8v-9.1c0-.2-.1-.4-.2-.5s-.3-.2-.5-.2h-5.3c-.4 0-.7.3-.7.7v9.1h-2.4v-12.6c1.5.6 3.2 0 4.1-1.4.7 1 1.8 1.6 2.9 1.6 1.2 0 2.3-.6 2.9-1.6.7 1 1.8 1.6 2.9 1.6 1.2 0 2.3-.6 2.9-1.6.7 1 1.8 1.6 2.9 1.6.4 0 .8-.1 1.2-.2z" fill="%23fff"/><path d="m19.3 15.4h-5.3c-.4 0-.7.3-.7.7v5.2c0 .2.1.4.2.5s.3.2.5.2h5.3c.2 0 .3-.1.5-.2.1-.1.2-.3.2-.5v-5.2c0-.2-.1-.4-.2-.5-.2-.2-.3-.2-.5-.2zm-.7 5.1h-4v-3.7h4z" fill="%23fff"/><circle cx="23" cy="25.4" fill="%23008436" r="8.3" stroke="%23ffce18" stroke-width="1.5"/><path d="m23.4 30.5-4.2-8.9 8.9 4.2-3.8.9z" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width=".9388"/></svg>');
}

.sidenav__cta--newsletter::after {
	background-image: url('data:image/svg+xml,<svg enable-background="new 0 0 31.9 33.9" width="32" height="34" viewBox="0 0 31.9 33.9" xmlns="http://www.w3.org/2000/svg"><path d="m7.2 5.4-6.2 4c-.2.2-.4.4-.4.7v15.8c0 .5.4.8.8.8h27.3c.5 0 .8-.4.8-.8v-15.8c0-.3-.1-.5-.4-.7l-6.2-4m-13.4-1.4 5.3-3.2c.3-.2.6-.2.9 0l5.3 3.2m2 15.8v-15c0-.3-.2-.6-.6-.6h-14.7c-.3 0-.6.2-.6.6v15m-6 6.4 14.1-8.4 14.2 8.4m.1-10.3-8.8 5.3m-19.7-5.3 8.8 5.3" fill="none" stroke="%23fff" stroke-width="1.393"/><circle cx="22.9" cy="24.9" fill="%23008436" r="8.3" stroke="%23ffce18" stroke-width="1.5"/><path d="m23.4 30.1-4.2-8.9 8.9 4.2-3.8.9z" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width=".9388"/></svg>');
}

@media screen and (min-width: 768px) {
  /* wider layout styles here */

	.sidenav {
		position: fixed;
		right: var(--pad);
	}

	.sidenav__cta > span {
		padding: 0.5em 1.5em 0.5em 1em;
	}

	.sidenav__cta::after {
		aspect-ratio: 1;
		height: 3em;
		border: 2px solid var(--color-yellow);
		border-radius: 50%;
		margin-left: -1em;
	}
}