/* "Back to top" button: bottom-right, shown after scrolling. The WhatsApp button is bottom-LEFT; the live-chat widget (when
   enabled) is bottom-right, so .to-top--chat lifts the button above it. Colours fall back so the admin layout can use it too. */
.to-top {
    position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 3400;
    width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink, #0B1027); color: #fff; cursor: pointer;
    box-shadow: 0 10px 26px rgba(11, 16, 39, .28), 0 2px 6px rgba(11, 16, 39, .18);
    opacity: 0; visibility: hidden; transform: translateY(10px);          /* hidden: also out of the tab order and away from screen readers */
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background .2s ease;
}
.to-top svg { width: 22px; height: 22px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--cyan-deep, #0E85A6); }
.to-top:focus-visible { outline: 3px solid var(--cyan, #1AA3C7); outline-offset: 3px; }
.to-top--chat { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 900px) {
    .to-top { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
    .to-top--chat { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    body:has(.cf-bar) .to-top { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }   /* the Configure page's fixed price bar */
}
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }
@media print { .to-top { display: none !important; } }