/* ==========================================================================
   PARTMACH · 图片放大（产品主图放大镜 + 全屏查看器）
   zoom.css —— 2026-11-04 新增，配合 assets/js/zoom.js
   设计原则：不引入任何库；不改动 theme-v2 已有排版；键盘可完成全部操作；
   RTL（阿语）用逻辑属性自动镜像。
   ========================================================================== */

/* ---------- 1. 产品主图：光标放大 + 点击徽章 ---------- */
.gmain img{ transition:transform .3s cubic-bezier(.2,.7,.3,1); will-change:transform; }

@media (hover:hover) and (pointer:fine){
  .gmain{ cursor:zoom-in; }
  .gmain.is-hover img{ transform:scale(1.85); transition:transform .12s ease-out; }
}

/* 覆盖整块主图的全透明按钮：可点、可 Tab、可 Enter */
.gmain-hit{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  padding:0; border:0; background:transparent; cursor:zoom-in;
  display:flex; align-items:flex-end; justify-content:flex-end; gap:8px;
}
.gmain-hit:focus-visible{ outline:3px solid var(--brass,#C9962B); outline-offset:-3px; border-radius:inherit; }

.gzoom-badge{
  display:inline-flex; align-items:center; gap:7px; margin:10px; padding:8px 12px;
  border-radius:var(--r-full,999px); background:rgba(8,11,14,.74); color:#fff;
  font-family:var(--font-ui,system-ui,sans-serif); font-size:12px; font-weight:600; letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:.82; transform:none; transition:opacity .18s ease,transform .18s ease; pointer-events:none;
}
.gmain:hover .gzoom-badge,
.gmain:focus-within .gzoom-badge,
.gmain-hit:focus-visible .gzoom-badge{ opacity:1; transform:translateY(-2px); }
@media (hover:none){ .gzoom-badge{ opacity:1; } }

/* 张数角标：始终可见，告诉用户"这里还有几张" */
.gcount{
  position:absolute; z-index:3; inset-inline-start:10px; top:10px;
  padding:5px 9px; border-radius:var(--r-full,999px);
  background:rgba(8,11,14,.6); color:#fff; font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11px; letter-spacing:.1em; pointer-events:none;
}

/* 缩略图：aria-current 与旧 .on 双轨，鼠标/键盘状态一致 */
.gthumbs button[aria-current="true"]{
  border-color:var(--ink-900,#0C1116); outline:1px solid var(--ink-900,#0C1116); outline-offset:-1px;
}

/* ---------- 2. 通用可放大图片（About 公司实拍等 [data-lightbox] 容器） ---------- */
[data-lightbox] img.is-zoomable{ cursor:zoom-in; }
[data-lightbox] img.is-zoomable:focus-visible{
  outline:3px solid var(--brass,#C9962B); outline-offset:2px;
}

/* ---------- 3. 全屏查看器 ---------- */
html.pmv-open{ overflow:hidden; }
body.pmv-open{ overflow:hidden; }

.pmv{
  position:fixed; inset:0; z-index:320; display:grid;
  grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(8,11,14,.95); color:#fff; overscroll-behavior:contain;
}
.pmv[hidden]{ display:none !important; }

.pmv-top{
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top));
}
.pmv-count{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:12.5px; letter-spacing:.12em;
  color:rgba(255,255,255,.7); margin-inline-end:auto; white-space:nowrap;
}
.pmv-sku{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; letter-spacing:.1em;
  color:rgba(255,255,255,.42); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:34vw;
}
.pmv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:40px; height:40px; padding:0 12px; border-radius:var(--r-full,999px);
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.07); color:#fff;
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; flex:none;
  transition:background .16s ease,border-color .16s ease;
}
.pmv-btn:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.34); }
.pmv-btn:focus-visible{ outline:3px solid var(--brass,#C9962B); outline-offset:2px; }
.pmv-btn[disabled]{ opacity:.35; cursor:default; }

.pmv-stage{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(8px,3vw,56px); touch-action:none; min-height:0; min-width:0;
}
/* flex 容器 + max-height:100% 才能可靠地把竖图收进舞台（grid auto 轨道会失效） */
.pmv-img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  transform-origin:center center; will-change:transform; cursor:zoom-in;
  -webkit-user-select:none; user-select:none; -webkit-user-drag:none;
  transition:transform .2s ease-out;
}
.pmv.is-zoomed .pmv-img{ cursor:grab; }
.pmv.is-panning .pmv-img{ cursor:grabbing; transition:none; }

.pmv-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; }
.pmv-prev{ inset-inline-start:clamp(4px,1vw,14px); }
.pmv-next{ inset-inline-end:clamp(4px,1vw,14px); }

.pmv-bottom{
  display:flex; flex-direction:column; gap:8px; min-width:0;
  padding:10px 14px calc(12px + env(safe-area-inset-bottom));
}
.pmv-film{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0; scrollbar-width:thin;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; min-width:0;
}
.pmv-film button{
  flex:0 0 auto; width:60px; height:60px; padding:0; border-radius:var(--r-sm,6px);
  overflow:hidden; border:2px solid transparent; background:#12181E; cursor:pointer;
  scroll-snap-align:center; transition:border-color .16s ease,opacity .16s ease; opacity:.72;
}
.pmv-film button[aria-current="true"]{ border-color:var(--brass,#C9962B); opacity:1; }
.pmv-film button:hover{ opacity:1; }
.pmv-film button:focus-visible{ outline:3px solid var(--brass,#C9962B); outline-offset:2px; }
.pmv-film img{ width:100%; height:100%; object-fit:cover; display:block; }

.pmv-hint{
  margin:0; text-align:center; font-size:11.5px; line-height:1.5;
  color:rgba(255,255,255,.55); font-family:var(--font-ui,system-ui,sans-serif);
}
.pmv-hint kbd{
  font-family:var(--font-mono,ui-monospace,monospace); font-size:10.5px;
  border:1px solid rgba(255,255,255,.22); border-radius:4px; padding:1px 5px; margin:0 1px;
  background:rgba(255,255,255,.06);
}

/* 移动端：隐藏键盘提示，放大缩小按钮保留，缩略图更小 */
@media (max-width:680px){
  .pmv-hint{ display:none; }
  .pmv-bar{ display:none; }
  .pmv-film button{ width:52px; height:52px; }
  .pmv-sku{ display:none; }
  .pmv-stage{ padding:0 4px; }
}

@media (prefers-reduced-motion:reduce){
  .gmain img, .pmv-img, .pmv-btn, .pmv-film button, .gzoom-badge{ transition:none !important; }
}

@media print{ .pmv{ display:none !important; } }