/* ============================================================================
 * gallery-zoom.css —— 商品详情图集「点击放大」灯箱
 * ----------------------------------------------------------------------------
 * 配套脚本：/assets/gallery-zoom.js
 * 引用范围：**仅 index.html**（商品详情是 SPA 路由，挂在这个页面里）
 *
 * 主图右下角已经有 .gallery-counter（"2 / 6"），左上左右是 .gallery-nav 箭头，
 * 所以「点击放大」的提示胶囊放左下角，互不打架 —— 用纯 CSS 伪元素出，零 DOM 改动。
 *
 * z-index：站内既有 正文 < .bottom-nav(90) < 弹窗(100) < 顶栏(1000)
 *   灯箱必须是全屏最高层 → 3000，连顶栏一起盖住。
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 一、主图上的「点击放大」提示（纯伪元素）
 * -------------------------------------------------------------------------- */
.product-gallery-main::after {
  content: "🔍 点击放大";
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(38, 33, 29, 0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background 0.16s ease;
}

/* 主图整体可点 */
.product-gallery-main img {
  cursor: zoom-in;
}

@media (max-width: 640px) {
  .product-gallery-main::after {
    left: 8px;
    bottom: 8px;
    font-size: 11px;
    padding: 3px 9px;
  }
}

/* ---------------------------------------------------------------------------
 * 二、灯箱本体
 * -------------------------------------------------------------------------- */
.gz {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 9, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* 脚本用 hidden 控制显隐，display 会盖掉 UA 的 [hidden]，必须补回来 */
.gz[hidden] {
  display: none;
}

.gz.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gz {
    transition: none;
  }
}

/* 舞台：图片居中，占满剩余空间
   ⚠️ 这里必须用 flex 而不是 grid。
     第一版写成 display:grid + place-items:center，结果行高被内容撑成
     max-content（图片原始高度 1328px > 900px 视口），grid 区域高度 = 1328px，
     于是 .gz-img 的 max-height:100% 参照的是"被撑开的区域"而不是舞台高度
     → 完全失去约束，图片直接溢出视口、盖住底部工具条。
     flex 下容器的内容高度是确定的（flex:1 1 auto + min-height:0），
     子项的 max-height:100% 才真正等于"舞台高度"。 */
.gz-stage {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
}

.gz-img {
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 放大态：光标变缩小，transition 关掉（否则拖动时会拖影） */
.gz.zoomed .gz-img {
  cursor: zoom-out;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .gz-img {
    transition: none;
  }
}

/* 左右切换按钮 */
.gz-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.gz-nav:hover {
  background: var(--c-primary, #c93628);
  border-color: transparent;
}

.gz-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.gz-nav[disabled] {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.gz-prev {
  left: 14px;
}

.gz-next {
  right: 14px;
}

/* 底部工具条 */
.gz-bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
}

.gz-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.gz-hint {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 600;
}

.gz-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.gz-close:hover {
  background: var(--c-primary, #c93628);
  border-color: transparent;
}

/* 展开期间锁滚动（灯箱本身是全屏的，页面在下面别乱动） */
html.gz-lock {
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 三、窄屏
 * -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .gz-nav {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .gz-prev {
    left: 6px;
  }
  .gz-next {
    right: 6px;
  }
  .gz-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  /* 手机上没键盘，把「左右方向键切换」那半句藏掉 */
  .gz-hint {
    display: none;
  }
  .gz-bar {
    font-size: 12.5px;
    gap: 10px;
  }
}