/* =====================================================================
   ModusTech back-to-top button.
   A navy circle (same family as the chat bubble) with a teal ring that fills as you scroll down the page.
   Position: bottom right. scroll-top.js measures the chat bubble, the sticky buy bar and the "added to
   basket" notice and sets --mt-top-lift so the button stacks above them and never covers them.
   ===================================================================== */
.mt-top {
	--mt-top-navy: #1A1A2E;
	--mt-top-teal: #00A6B2;
	--mt-top-size: 48px;
	position: fixed;
	z-index: 900;
	right: 34px; /* lines up with the centre of the 56px chat bubble (30px from the edge) */
	bottom: max(calc(24px + env(safe-area-inset-bottom, 0px)), var(--mt-top-lift, 0px));
	box-sizing: border-box;
	display: grid; /* also overrides the [hidden] attribute, which only covers the moment before this stylesheet loads */
	place-items: center;
	width: var(--mt-top-size);
	height: var(--mt-top-size);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mt-top-navy);
	color: #fff;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 22px rgba(26, 26, 46, .3);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(14px) scale(.85);
	transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1), bottom .25s ease, background-color .2s ease, box-shadow .2s ease, visibility 0s linear .3s;
}
.mt-top.is-on {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

/* The theme and Elementor style every button (teal on hover and focus, capitals, padding), so ours is pinned. */
button.mt-top.mt-top, button.mt-top.mt-top:hover, button.mt-top.mt-top:focus, button.mt-top.mt-top:active {
	min-width: 0; min-height: 0; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
	background: var(--mt-top-navy) !important; color: #fff !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; line-height: 1 !important;
}
@media (hover: hover) { button.mt-top.mt-top:hover { background: #24243D !important; } }

/* Progress ring: starts at 12 o'clock and fills clockwise as you read down the page. */
.mt-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.mt-top__ring circle { fill: none; stroke-width: 2.5; }
.mt-top__track { stroke: rgba(255, 255, 255, .16); }
.mt-top__bar { stroke: var(--mt-top-teal); stroke-linecap: round; stroke-dasharray: 135.09; stroke-dashoffset: 135.09; }

.mt-top__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s cubic-bezier(.2, .8, .2, 1); }

/* Label that slides out to the left on desktop hover / keyboard focus. */
.mt-top::after {
	content: attr(data-label);
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--mt-top-navy);
	color: #fff;
	font: 600 13px/1 "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	opacity: 0;
	transform: translate(8px, -50%);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

@media (hover: hover) {
	.mt-top:hover { background: #24243D; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 28px rgba(26, 26, 46, .38); transform: translateY(-3px); }
	.mt-top:hover .mt-top__arrow { transform: translateY(-2px); }
	.mt-top:hover::after { opacity: 1; transform: translate(0, -50%); }
}
.mt-top:focus-visible { outline: 3px solid var(--mt-top-teal); outline-offset: 3px; }
.mt-top:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.mt-top:active { transform: scale(.92); transition-duration: .08s; }

/* Click: the arrow shoots up and comes back in from below. */
.mt-top.is-launching .mt-top__arrow { animation: mt-top-fly .55s cubic-bezier(.5, 0, .2, 1); }
@keyframes mt-top-fly {
	0% { transform: translateY(0); opacity: 1; }
	45% { transform: translateY(-190%); opacity: 0; }
	46% { transform: translateY(190%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

@media (max-width: 767px) {
	.mt-top { --mt-top-size: 44px; }
	.mt-top::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-top, .mt-top__arrow, .mt-top::after { transition-property: opacity, visibility; transition-duration: .15s; }
	.mt-top, .mt-top:hover, .mt-top:active { transform: none; }
	.mt-top.is-launching .mt-top__arrow { animation: none; }
}

@media print { .mt-top { display: none !important; } }