/* ============================================================
   图片放大浮层（详情页）
   手机版、PC 右栏通用；只在这一页用，单独一个文件
   ============================================================ */
.lbx {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(12, 14, 18, .86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lbx.on { display: flex; }

.lbx-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 56px 64px;
}
.lbx-img {
  display: none;
  max-width: 100%; max-height: 100%;
  border-radius: 10px; object-fit: contain;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.lbx-img.on { display: block; }

.lbx-btn {
  position: absolute; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
  font-family: inherit;
}
.lbx-btn:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }

.lbx-close { top: 16px; right: 18px; font-size: 24px; }
.lbx-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lbx-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lbx-prev:hover, .lbx-next:hover { transform: translateY(-50%) scale(1.06); }

.lbx-count {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .72); font-size: 13px; letter-spacing: .5px;
  font-variant-numeric: tabular-nums; z-index: 2;
}

@media (max-width: 640px) {
  .lbx-stage { padding: 64px 12px 72px; }
  .lbx-prev { left: 8px; }
  .lbx-next { right: 8px; }
}