.detail .mainImage{cursor:zoom-in}
/* 固定定位 + inset:0 + margin:auto：无论页面滚到哪里都在视口正中央 */
.productImageDialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100% - 24px);width:min(760px,calc(100% - 24px));padding:16px;background:#fff;overflow:hidden}
/* 视口高度跟随图片，图片在视口内水平垂直居中，不再出现大片空白 */
.zoomViewport{display:flex;align-items:center;justify-content:center;min-height:180px;max-height:min(78vh,720px);overflow:hidden;border-radius:10px;background:#f5f6f7;cursor:grab;touch-action:none}
.zoomViewport[hidden]{display:none}
.zoomViewport.isDragging{cursor:grabbing}
.productImageDialog img{display:block;width:auto;height:auto;max-width:100%;max-height:min(78vh,720px);object-fit:contain;border-radius:10px;cursor:grab;-webkit-user-drag:none;user-select:none;will-change:transform}
.productImageDialog img[hidden],.originalLoading[hidden]{display:none}
/* 图片带 will-change:transform 会形成层叠上下文并盖住关闭按钮，这里显式抬到上层 */
.productImageDialog .close{z-index:5}
.originalLoading{position:absolute;inset:16px;z-index:2;display:grid;place-content:center;justify-items:center;gap:14px;color:#53606a;font-size:14px;background:rgba(255,255,255,.78);backdrop-filter:blur(2px);border-radius:10px;pointer-events:none}
.originalLoading i{width:38px;height:38px;border:4px solid #ffe1d6;border-top-color:#ff5a1f;border-radius:50%;animation:originalSpin .8s linear infinite}
.originalProgress{width:min(260px,72vw);height:6px;overflow:hidden;border-radius:99px;background:#f0e7e3}
.originalProgress b{display:block;width:100%;height:100%;border-radius:inherit;background:#ff5a1f;transform:translateX(-100%)}
.originalProgress b.isIndeterminate{animation:originalProgress 1.1s ease-in-out infinite}
@keyframes originalSpin{to{transform:rotate(360deg)}}
@keyframes originalProgress{0%{transform:translateX(-100%)}55%{transform:translateX(-8%)}100%{transform:translateX(100%)}}
@media(max-width:700px){
  .productImageDialog{width:calc(100% - 16px);padding:12px}
  .zoomViewport{max-height:74vh}
  .productImageDialog img{max-height:74vh}
}