/* CSS Document */

        /* ============================================================
           【全局 CSS 变量 - 修改此处可统一调整组件外观】
           
           优先级：组件 style 属性 > :root
           即：在 <div class="prodetail-gallery" style="--xx:yy"> 中
           写的变量会覆盖这里的默认值。
        ============================================================ */
        :root {
            /* ---- 整体尺寸 ---- */
            --pg-max-width: 900px;        /* 组件最大宽度，设为 100% 可撑满父容器 */
            --pg-padding: 20px;           /* 组件内边距，移动端在 @media 中覆盖为 12px */

            /* ---- 大图区域 ---- */
            --pg-stage-height: auto;      /* 大图固定高度，如 400px；auto 则使用下方宽高比 */
            --pg-stage-aspect: 4 / 3;    /* 大图宽高比，仅当 height=auto 时生效 */
            --pg-stage-radius: 12px;      /* 大图圆角大小，同时影响组件整体圆角 */

            /* ---- 缩略图 ---- */
            --pg-thumb-width: 100px;      /* 单个缩略图宽度 */
            --pg-thumb-height: 70px;      /* 单个缩略图高度 */
            --pg-thumb-gap: 10px;         /* 缩略图之间的间距 */

            /* ---- 左右箭头 ---- */
            --pg-arrow-size: 36px;        /* 箭头按钮的宽高（正方形） */
            --pg-arrow-font:18px;        /* 箭头符号 ‹ › 的字体大小 */

            /* ---- 颜色主题 ---- */
            --pg-primary: #3b82f6;        /* 主题色（蓝）：用于激活态边框、箭头悬停、外发光 */
            --pg-bg: #fafafa;             /* 组件整体背景色（深蓝黑） */
            --pg-card: #fff;           /* 卡片底色：大图舞台背景、缩略图背景 */
            --pg-border: #CDD2D9;         /* 边框色：大图边框、滚动条颜色 */
        }

        /* ============================================================
           【组件根容器】
           作用：包裹整个图片展示区域，控制整体宽度和背景。
           修改 --pg-max-width 可改变组件宽度，
           修改 --pg-padding 可改变内边距。
        ============================================================ */
        .prodetail-gallery {
            max-width: var(--pg-max-width);
            width: 100%;                  /* 填满父容器，保证响应式 */
            margin: 0 auto;               /* 水平居中 */
            padding: var(--pg-padding);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--pg-bg);     /* 使用变量 --pg-bg */
            border-radius: var(--pg-stage-radius);
            box-sizing: border-box;
            outline: none;                /* 接收键盘焦点时无外框 */
        }

        /* 统一盒模型，避免 padding/border 撑大元素 */
        .prodetail-gallery *,
        .prodetail-gallery *::before,
        .prodetail-gallery *::after {
            box-sizing: border-box;
        }

        /* ============================================================
           【大图舞台】
           作用：上方主图展示区域。
           修改 --pg-stage-height 可固定高度（如 400px），此时 --pg-stage-aspect 失效。
           修改 --pg-stage-aspect 可改变宽高比（仅当 height=auto 时生效）。
           修改 --pg-stage-radius 可改变圆角。
           修改 --pg-card 可改变加载前的占位背景色。
           修改 --pg-border 可改变外边框颜色。
        ============================================================ */
        .prodetail-gallery__stage {
            position: relative;
            width: 100%;
            height: var(--pg-stage-height);
            aspect-ratio: var(--pg-stage-aspect);
            background: var(--pg-card);   /* 大图加载前显示的底色 */
            border-radius: var(--pg-stage-radius);
            overflow: hidden;             /* 裁剪超出圆角的内容 */
            margin-bottom: 16px;
            border: 1px solid var(--pg-border);
            cursor: zoom-in;              /* 鼠标提示可点击放大 */
            touch-action: pan-y;          /* 允许垂直滚动，水平滑动由 JS 处理 */
        }

        /* 当用户通过 style 属性设置了固定高度时，取消 aspect-ratio 避免冲突 */
        .prodetail-gallery__stage[style*="--pg-stage-height"] {
            aspect-ratio: auto;
        }

        /* ============================================================
           【主图（双图重叠）】
           作用：实现交叉淡入淡出效果。
           两张图绝对定位重叠，通过 opacity 切换显示。
           不要修改此处，过渡时间由下方 transition 控制。
        ============================================================ */
        .prodetail-gallery__main-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;          /* 保持比例，完整显示 */
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 1;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        /* 当前显示的主图 */
        .prodetail-gallery__main-img--active {
            opacity: 1;
            z-index: 2;
        }

        /* ============================================================
           【左右切换按钮（大图区域）】
           作用：点击切换上一张/下一张。
           修改 --pg-arrow-size 可改变按钮大小。
           修改 --pg-arrow-font 可改变箭头符号大小。
           修改 --pg-primary 可改变悬停时的背景色。
        ============================================================ */
        .prodetail-gallery__arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            width: var(--pg-arrow-size);   /* 使用变量 */
            height: var(--pg-arrow-size);  /* 使用变量 */
            border: none;
            border-radius: 50%;
            background: rgba(15, 23, 42, 0.4);
            color: #fff;
            font-size: var(--pg-arrow-font); /* 使用变量 */
            line-height: 1;  /* 新增：让符号垂直居中 */
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(4px);
            transition: all 0.25s ease;
            user-select: none;
        }

        /* 鼠标悬停：背景变为主题色，略微放大 */
        .prodetail-gallery__arrow:hover {
            background: var(--pg-primary);
            transform: translateY(-50%) scale(1.08);
        }

        /* 点击瞬间缩小，提供触觉反馈 */
        .prodetail-gallery__arrow:active {
            transform: translateY(-50%) scale(0.95);
        }

        /* 左箭头位置 */
        .prodetail-gallery__arrow--prev {
            left: 12px;
        }

        /* 右箭头位置 */
        .prodetail-gallery__arrow--next {
            right: 12px;
        }

        /* ============================================================
           【图片计数器】
           作用：右下角显示 "当前 / 总数"，如 1 / 10。
        ============================================================ */
        .prodetail-gallery__counter {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            backdrop-filter: blur(4px);
            z-index: 10;
        }

        /* ============================================================
           【缩略图滚动容器】
           作用：横向排列缩略图，超出时显示滚动条。
           重要：必须加 position: relative，否则 offsetLeft 计算会出错。
           修改 --pg-thumb-gap 可改变缩略图间距。
           修改 --pg-border 可改变滚动条颜色。
        ============================================================ */
        .prodetail-gallery__thumbs {
            position: relative;           /* 【关键】确保子元素 offsetLeft 以此为基准 */
            display: flex;
            gap: var(--pg-thumb-gap);
            overflow-x: auto;             /* 超出时横向滚动 */
            padding: 4px;
            scrollbar-width: thin;        /* Firefox 细滚动条 */
            scrollbar-color: var(--pg-border) transparent;
            
        }

        /* Webkit 浏览器（Chrome/Safari/Edge）滚动条样式 */
        .prodetail-gallery__thumbs::-webkit-scrollbar {
            height: 6px;
        }

        .prodetail-gallery__thumbs::-webkit-scrollbar-track {
            background: transparent;
        }

        .prodetail-gallery__thumbs::-webkit-scrollbar-thumb {
            background: var(--pg-border);
            border-radius: 3px;
        }

        /* ============================================================
           【缩略图单项】
           作用：下方小图，点击可切换大图。
           修改 --pg-thumb-width 可改变宽度。
           修改 --pg-thumb-height 可改变高度。
           修改 --pg-thumb-radius 可改变圆角。
           修改 --pg-card 可改变背景色。
           修改 --pg-primary 可改变激活态边框色。
        ============================================================ */
        .prodetail-gallery__thumb {
            flex: 0 0 auto;               /* 不伸缩，固定尺寸 */
            width: var(--pg-thumb-width);
            height: var(--pg-thumb-height);
            border-radius: var(--pg-thumb-radius);
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
            background: var(--pg-card);
            transition: all 0.3s ease;
            position: relative;
        }

        /* 鼠标悬停：上浮阴影效果 */
        .prodetail-gallery__thumb:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /* 激活态：蓝色边框 + 外发光 */
        .prodetail-gallery__thumb--active {
            border-color: var(--pg-primary);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
        }

        /* 缩略图图片本身 */
        .prodetail-gallery__thumb-img {
            width: 100%;
            height: 100%;
            object-fit: cover;            /* 裁剪填满，保持比例 */
            display: block;
            opacity: 0.65;                /* 默认稍暗 */
            transition: opacity 0.3s ease;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        /* 悬停或激活时变亮 */
        .prodetail-gallery__thumb:hover .prodetail-gallery__thumb-img,
        .prodetail-gallery__thumb--active .prodetail-gallery__thumb-img {
            opacity: 1;
        }

        /* ============================================================
           【弹出层（模态框）】
           作用：点击大图后全屏放大查看。
           背景色为黑色半透明，z-index 很高确保在最上层。
        ============================================================ */
        .prodetail-gallery__modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.92);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            touch-action: pan-y;
        }

        /* 打开状态 */
        .prodetail-gallery__modal--open {
            opacity: 1;
            visibility: visible;
        }

        /* 弹出层内部图片容器 */
        .prodetail-gallery__modal-stage {
            position: relative;
            width: 90vw;                    /* 占视口宽 90% */
            height: 85vh;                   /* 占视口高 85% */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 弹出层内的图片（双图重叠，同主图逻辑） */
        .prodetail-gallery__modal-img {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
            z-index: 1;
            border-radius: 4px;
            user-select: none;
            -webkit-user-drag: none;
        }

        .prodetail-gallery__modal-img--active {
            opacity: 1;
            z-index: 2;
        }

        /* ============================================================
           【弹出层左右箭头】
           作用：在模态框中切换图片。
           尺寸与主图箭头相同，使用相同变量。
        ============================================================ */
        .prodetail-gallery__modal-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 20;
            width: 56px;                  /* 弹出层箭头稍大，固定值 */
            height: 56px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
            transition: all 0.25s ease;
            user-select: none;
        }

        .prodetail-gallery__modal-arrow:hover {
            background: var(--pg-primary);
            transform: translateY(-50%) scale(1.08);
        }

        .prodetail-gallery__modal-arrow--prev {
            left: 20px;
        }

        .prodetail-gallery__modal-arrow--next {
            right: 20px;
        }

        /* ============================================================
           【弹出层关闭按钮】
           作用：右上角 × 关闭模态框。
        ============================================================ */
        .prodetail-gallery__modal-close {
            position: absolute;
            top: 20px;
            right: 24px;
            z-index: 20;
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 28px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
            transition: all 0.25s ease;
        }

        /* 悬停变红色 */
        .prodetail-gallery__modal-close:hover {
            background: rgba(239, 68, 68, 0.8);
            transform: scale(1.08);
        }

        /* ============================================================
           【弹出层计数器】
           作用：底部居中显示当前图片位置。
        ============================================================ */
        .prodetail-gallery__modal-counter {
            position: absolute;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
            backdrop-filter: blur(4px);
            z-index: 20;
        }

        /* ============================================================
           【响应式：小屏幕适配】
           当屏幕宽度 ≤ 640px 时生效。
           修改此处可调整移动端显示效果。
        ============================================================ */
        @media (max-width: 640px) {
            :root {
                --pg-padding: 12px;       /* 移动端减小内边距 */
                --pg-thumb-width: 80px;   /* 移动端缩略图变小 */
                --pg-thumb-height: 56px;
            }

            /* 移动端箭头变小 */
            .prodetail-gallery__arrow {
                width: 36px;
                height: 36px;
                font-size: 20px;
            }

            /* 移动端弹出层箭头变小 */
            .prodetail-gallery__modal-arrow {
                width: 44px;
                height: 44px;
                font-size: 22px;
            }

            .prodetail-gallery__modal-arrow--prev {
                left: 8px;
            }

            .prodetail-gallery__modal-arrow--next {
                right: 8px;
            }
        }