@media (hover: none), (pointer: coarse) {
  html, body, .customer-main { overscroll-behavior-y: contain; }
}

.site-pull-refresh {
  --pull-distance: 0px;
  position: fixed;
  z-index: 10000;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border: 1px solid rgba(98, 232, 192, .28);
  border-radius: 999px;
  background: rgba(8, 22, 18, .96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42);
  color: #dcebe6;
  font: 600 10px/1 "DM Mono", monospace;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 18px + var(--pull-distance)));
  transition: opacity .14s ease, transform .1s linear, border-color .14s ease;
}
.site-pull-refresh.is-visible { opacity: 1; }
.site-pull-refresh.is-armed { border-color: rgba(98, 232, 192, .72); color: #eef7f3; }
.site-pull-refresh i {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid rgba(98, 232, 192, .24);
  border-top-color: #62e8c0;
  border-radius: 50%;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.site-pull-refresh.is-armed i { transform: rotate(180deg); }
.site-pull-refresh.is-refreshing i { animation: site-pull-refresh-spin .7s linear infinite; }
@keyframes site-pull-refresh-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) { .site-pull-refresh { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-pull-refresh { transition: none; }
  .site-pull-refresh.is-refreshing i { animation: none; }
}