.hdl-back-to-top {
	position: fixed;
	right: clamp(16px, 2vw, 28px);
	bottom: calc(clamp(16px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
	z-index: 9998;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--primary-dark-trans-20, rgba(75, 66, 52, 0.2));
	border-radius: 50%;
	background: var(--primary-ultra-light, #f5f3f0);
	color: var(--primary-ultra-dark, #2f2b25);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.hdl-back-to-top[hidden] {
	display: none !important;
}

.hdl-back-to-top:hover,
.hdl-back-to-top:focus-visible {
	background: var(--primary-light, #c0b5a5);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.hdl-back-to-top:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.hdl-back-to-top svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 767px) {
	.hdl-back-to-top {
		width: 44px;
		height: 44px;
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.hdl-back-to-top {
		transition: none;
	}
}