/* ==========================================================================
   BACK TO TOP — floating arrow with a scroll-progress ring (see js/totop.js).
   Sits on the opposite side from the snowflake cart. Remove this <link> to drop the styling.
   ========================================================================== */

.to-top {
    position: fixed;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    inset-inline-start: 18px;          /* the cart snowflake is on the other side */
    z-index: 950;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #1d4f8f 0%, #0c2340 60%, #006971 130%);
    box-shadow: 0 8px 20px rgba(12, 35, 64, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.8);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0.25s, box-shadow 0.2s ease;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px) scale(1.07); box-shadow: 0 12px 26px rgba(0, 105, 113, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.to-top:active { transform: scale(0.94); }
.to-top:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }

/* the ring that fills as you scroll down the page */
.to-top__ring { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); transform: rotate(-90deg); }
.to-top__track, .to-top__bar { fill: none; stroke-width: 3; }
.to-top__track { stroke: rgba(255, 255, 255, 0.16); }
.to-top__bar { stroke: #ffd166; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }

.to-top__arrow {
    position: relative;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}
.to-top:hover .to-top__arrow { animation: to-top-hop 0.7s ease infinite; }
@keyframes to-top-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (max-width: 480px) {
    .to-top { width: 48px; height: 48px; bottom: calc(32px + env(safe-area-inset-bottom, 0px)); inset-inline-start: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .to-top, .to-top__arrow, .to-top__bar { transition: none; }
    .to-top:hover .to-top__arrow { animation: none; }
}