/* Shared by the six storefront themes, including the legacy .scrollup link. */
html body #scrollUp,
html body a.scrollup {
    box-sizing: border-box;
    position: fixed;
    right: 12px;
    left: auto;
    bottom: calc(85px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 8px;
    background: var(--dynamic-primary, #9f315a);
    color: #fff;
    font-size: 0;
    line-height: 44px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
    /* scrollUp injects a maximum inline z-index; keep dialogs above it. */
    z-index: 1035 !important;
    transition: background-color .15s ease;
}

html[dir="rtl"] body #scrollUp,
html[dir="rtl"] body a.scrollup {
    right: auto;
    left: 12px;
}

html body #scrollUp > i,
html body a.scrollup > i {
    display: none;
}

/* Draw the arrow without relying on a loaded icon font. */
html body #scrollUp::before,
html body a.scrollup::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -3px 0 0 -6px;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(-45deg);
}

html body #scrollUp:hover,
html body a.scrollup:hover {
    background: var(--dynamic-primary-hover, #7d2746);
    color: #fff;
}

html body #scrollUp:focus-visible,
html body a.scrollup:focus-visible {
    outline: 2px solid #24211f;
    outline-offset: 3px;
}