/* ══ product-gallery.mobile.css ══
 * 画廊 Mobile 覆写层 — scroll-snap 全宽滑动（Apple 风格）
 * PC 文件：css/modules/product-gallery.css
 * 铁律 #24：只写覆写属性，无 @media 包裹
 * ════════════════════════════════════════ */

/* ── 外层：突破容器限制，全出血 ── */
.mkl-gallery {
    /* 突破 Bricks 容器 padding，全屏宽 */
    width: 100vw;
    margin-left: calc(-1 * (100vw - 100%) / 2);
    overflow: hidden;
    position: relative;   /* player absolute 定位的锚点 */
}

/* ── 主图容器：改为 scroll-snap 横向滚动 ── */
.mkl-main-image-wrap {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 0;   /* 全出血时去掉圆角 */
    cursor: default;    /* 移动端不需要 zoom-in 光标 */
    aspect-ratio: 1 / 1;
    width: 100%;
}
.mkl-main-image-wrap::-webkit-scrollbar { display: none; }

/* ── 每张幻灯片：flex item，全宽，snap ── */
.mkl-main-slide {
    display: flex !important;   /* 覆盖 PC 端 display:none */
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    align-items: center;
    justify-content: center;
    background: #fff;
}

/* ── 图片撑满 ── */
.mkl-main-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0;
}

/* ── 缩略图条：移动端隐藏，改用圆点 ── */
.mkl-thumbs { display: none; }

/* ── 缩放按钮：移动端隐藏 ── */
.mkl-zoom-btn { display: none; }

/* ── 圆点指示器容器（JS 注入） ── */
.mkl-mobile-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0 10px;
    background: #fff;
}
.mkl-mobile-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(0,0,0,0.18);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.mkl-mobile-dot.active {
    background: #1D1D1F;
    transform: scale(1.4);
}

/* ── Lightbox：移动端关闭（scroll-snap 已够用）── */
.mkl-lb-overlay { display: none !important; }

/* ── 移动端视频 slide ── */
.mkl-video-slide {
    display: flex !important;
    position: relative;
    background: #000;
}
.mkl-video-slide-poster {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mkl-video-slide-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    padding: 0;
}
.mkl-video-slide-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.mkl-video-slide-play svg {
    width: 80px;
    height: 80px;
}

/* ── 移动端视频播放器：fixed 覆盖画廊区，JS 动态定位 ── */
.mkl-video-player {
    position: fixed !important;
    z-index: 9999 !important;
    display: none !important;
    background: #000 !important;
    /* top/left/width/height 由 playVideo() 实时 getBoundingClientRect 写入 */
}
/* ── 激活态 ── */
.mkl-video-player.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ── video 撑满容器 ── */
.mkl-video-player video {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ── 移动端隐藏原生控制栏（用播放器自带交互代替）── */
.mkl-video-player video::-webkit-media-controls { display: none !important; }
.mkl-video-player video::-webkit-media-controls-enclosure { display: none !important; }