body button.wc300-back-to-top {
  display: none;
}
@media (max-width: 767px) {
  body button.wc300-back-to-top:not([hidden]) {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(var(--wc300-back-to-top-offset, 50px), env(safe-area-inset-bottom));
    z-index: 1000;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: #174c65;
    color: #fff;
    box-shadow: 0 3px 12px rgba(8,32,48,.18), 0 0 0 4px rgba(135,206,250,.18), 0 0 20px 5px rgba(135,206,250,.38);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    opacity: .9;
    line-height: 1;
    animation: wc300-back-to-top-enter 1100ms linear;
  }
  body button.wc300-back-to-top:active { background: #103b50; transform: scale(.94); opacity: 1; }
  body button.wc300-back-to-top:focus-visible { outline: 3px solid #95c11f; outline-offset: 3px; opacity: 1; }
  body button.wc300-back-to-top svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
}

@keyframes wc300-back-to-top-enter {
  0% { opacity: 0; transform: translateY(-100vh); animation-timing-function: cubic-bezier(.3,0,.65,1); }
  8% { opacity: .9; }
  72% { opacity: .9; transform: translateY(0); animation-timing-function: ease-out; }
  86% { opacity: .9; transform: translateY(-5px); animation-timing-function: ease-in; }
  100% { opacity: .9; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body button.wc300-back-to-top:not([hidden]) { animation: none; }
}
