/* ==========================================================================
   回到顶部按钮（所有页面共用）
   --------------------------------------------------------------------------
   按钮由 js/back-to-top.js 在页面底部自动创建，各页面只需引入本文件与脚本，
   无需在 HTML 里写标记。

   行为：页面滚动超过一定距离后淡入显示，点击平滑回到顶部。
   外观与位置沿用商品详情页原来的悬浮按钮：右侧中部、火箭图标。
   图标资源：images/back-to-top.png（默认）、images/back-to-top-hover.webp（悬停）。
   ========================================================================== */

.back-to-top {
  position: fixed;
  top: 50%;
  right: 45px;
  z-index: 20;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: url('../images/back-to-top.png') no-repeat center;
  background-size: 100%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 滚动到一定位置后加上该类名，按钮淡入 */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* 悬停时换成橙色底的火箭图标（与商品详情页原效果一致） */
.back-to-top:hover {
  background-image: url('../images/back-to-top-hover.webp');
}

.back-to-top:focus-visible {
  outline: 0.2rem solid #121212;
  outline-offset: 0.2rem;
}

/* 平板：右侧间距与尺寸同步缩小（沿用商品详情页原断点） */
@media screen and (max-width: 768px) {
  .back-to-top {
    right: 26px;
    width: 45px;
    height: 45px;
  }
}

/* 手机：位置略上移，尺寸进一步缩小 */
@media screen and (max-width: 767px) {
  .back-to-top {
    top: 40%;
    right: 28px;
    width: 40px;
    height: 40px;
  }
}

/* 系统开启"减少动态效果"时不做过渡 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: none;
  }
}