/* Solomaxhub scroll helper (theme 11.6.0-solomax.56: one button whose arrow follows the scroll direction): see
 * assets/js/scroll-nav.js. Shared by the storefront and the customer portal. 11.6.0-solomax.57.1 (owner's request of
 * 26 Sep 2026): it sits at the lower LEFT, in the same band as the green Support bubble at the lower right (16px from
 * the edges on phones, 24px from 769px), so the two never stack; the script moves it right of the portal's side menu
 * and above a bar that lies under it. */
.sx-scrollnav {
	position: fixed;
	left: var(--sx-scrollnav-left, calc(16px + env(safe-area-inset-left, 0px)));
	bottom: var(--sx-scrollnav-bottom, calc(16px + env(safe-area-inset-bottom, 0px)));
	z-index: 80;
	display: grid;
	gap: 10px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s, bottom .2s ease;
	pointer-events: none;
}
.sx-scrollnav.is-visible { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; pointer-events: auto; }
@media (min-width: 769px) {
	.sx-scrollnav {
		left: var(--sx-scrollnav-left, calc(24px + env(safe-area-inset-left, 0px)));
		bottom: var(--sx-scrollnav-bottom, calc(24px + env(safe-area-inset-bottom, 0px)));
	}
}
.sx-scrollnav__btn {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid #E2CDB9;
	border-radius: 50%;
	background: rgba(255, 255, 255, .96);
	color: #1C1410;
	box-shadow: 0 10px 24px rgba(28, 20, 16, .18), 0 2px 6px rgba(28, 20, 16, .08);
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.sx-scrollnav__btn[hidden] { display: none; }
.sx-scrollnav__btn:hover { background: #FD7702; border-color: #FD7702; color: #1C1410; }
.sx-scrollnav__btn:active { transform: scale(.94); }
.sx-scrollnav__btn:focus-visible { outline: 3px solid #C2410C; outline-offset: 3px; }
.sx-scrollnav__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
/* Scrolling up: the same arrow turns to point up. */
.sx-scrollnav__btn[data-sx-scroll="up"] svg { transform: rotate(180deg); }
html[data-sx-theme="dark"] .sx-scrollnav__btn,
body[data-ux-theme="dark"] .sx-scrollnav__btn { background: rgba(33, 26, 22, .96); border-color: rgba(255, 236, 220, .24); color: #F3EDE6; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
html[data-sx-theme="dark"] .sx-scrollnav__btn:hover,
body[data-ux-theme="dark"] .sx-scrollnav__btn:hover { background: #FD7702; border-color: #FD7702; color: #1C1410; }
html[data-sx-theme="dark"] .sx-scrollnav__btn:focus-visible,
body[data-ux-theme="dark"] .sx-scrollnav__btn:focus-visible { outline-color: #FF9A4D; }
@media (prefers-reduced-motion: reduce) { .sx-scrollnav, .sx-scrollnav__btn, .sx-scrollnav__btn svg { transition: none; } }
@media print { .sx-scrollnav { display: none !important; } }