/*!
 * web/assets/css/index/15-image-viewer.css
 * 站内图片查看器（openImageViewer / 57-img.js）+ 缩略图自适应
 * 2026-09-15：替换全项目 `window.open(url,'_blank')` 的图片预览
 */

/* ---------- 查看器容器 ---------- */
.gp-iv{
  position: fixed;
  inset: 0;
  /* 必须压在弹层之上：跟着 --gp-ztop 走，不写死数字（弹层计数器只增不减，封顶 40000，#162）。
     仍低于 .el-popper(50000)：查看器里不该有下拉，有的话也允许浮在它上面。 */
  z-index: calc(var(--gp-ztop,2000) + 60);
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,.92);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: contain;
}
.gp-iv--show{ display: flex; }

/* ---------- 顶栏 ---------- */
.gp-iv__bar{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
  color: #fff;
  font-size: 14px;
  flex: 0 0 auto;
}
.gp-iv__title{
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.gp-iv__counter{ font-size: 12px; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.gp-iv__spacer{ flex: 1 1 auto; }
.gp-iv__btn{
  appearance: none;
  border: 0;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.gp-iv__btn:hover, .gp-iv__btn:active{ background: rgba(255,255,255,.26); }
.gp-iv__btn--text{ font-size: 13px; }

/* ---------- 图片舞台 ---------- */
.gp-iv__stage{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0 8px calc(env(safe-area-inset-bottom, 0px) + 16px);
  -webkit-overflow-scrolling: touch;
}
.gp-iv__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform .18s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- 左右切换 ---------- */
.gp-iv__nav{
  position: absolute;
  /* 2026-09-19（#30 遗留③）：390px 窄屏大图会盖住切换箭头（同层叠上下文内后绘制）——显式抬高 */
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.gp-iv__nav:hover, .gp-iv__nav:active{ background: rgba(255,255,255,.3); }
.gp-iv__nav--prev{ left: 8px; }
.gp-iv__nav--next{ right: 8px; }

@media (max-width: 480px){
  .gp-iv__nav{ width: 38px; height: 38px; font-size: 22px; }
  .gp-iv__title{ max-width: 34vw; }
}

/* ---------- 缩略图自适应（送审反馈：图片被裁切/变形） ---------- */
/* 列表卡片、宫格、单元格里的图片统一「完整显示不裁切」，容器不变形 */
.gp-thumb,
.ep-card__img,
.oo-thumb,
.pos-prod__img,
.mat-thumb{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* 关键：contain 保证整图可见（此前多为 cover 被裁） */
  object-position: center;
  background: var(--cb, #f2f2f7);
  display: block;
}
/* 方形/固定比例的缩略位：容器自己保比例，图片 contain 居中 */
.gp-thumb-box{
  position: relative;
  width: 100%;
  padding-top: 100%;        /* 1:1，需要别的比例就覆盖这个值 */
  overflow: hidden;
  border-radius: 8px;
  background: var(--cb, #f2f2f7);
}
.gp-thumb-box > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 出入库规格选择行（product-detail 的 sm-spec）---------- */
/* 2026-09-15：原选中态 background:var(--cd)=#FFF 与弹层底色相同 → 看不出被选中。 */
.sm-spec{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  border-left: 3px solid transparent;
  transition: background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sm-spec:active{ background: var(--cb); }
.sm-spec.on{
  background: rgba(0, 122, 255, .1);
  border-left-color: var(--pc, #007AFF);
}
.sm-spec__img{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 6px;
  background: var(--cb);
  display: block;
}
.sm-spec__img--empty{
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ts);
  font-size: 16px;
}
.sm-spec__name{ flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--tc); }
.sm-spec.on .sm-spec__name{ font-weight: 600; }
.sm-spec__stock{ flex: 0 0 auto; color: var(--ts); }
.sm-spec__ck{ flex: 0 0 auto; color: var(--pci, #007AFF); font-size: 16px; }