.scroll-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #7b9a8f66;
  border-radius: 50%;
  background: #eae9e2;
  color: #023f17;
  box-shadow: 0 3px 14px #023f171a;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, visibility .2s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: #dce1d7; transform: translateY(-2px); }
.scroll-top:focus-visible { outline: 2px solid #023f17; outline-offset: 4px; }
/* A programmatically focused dialog button is not a keyboard interaction. */
html.pointer-input body :is(button, a, summary, [tabindex]):focus,
html.pointer-input body .product-choice:has(input:focus-visible) { outline: none; }
.scroll-top svg { width: 20px; height: 20px; }
.menu-open .scroll-top { visibility: hidden; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: none; }
}