/* =====================================================
   Leon Product Gallery Pro v1.0.17 — 前端样式
   ===================================================== */

/* ════════════════════════════════════════════════════
   列表页图片统一样式
   ════════════════════════════════════════════════════ */

.lpg-list-img-ready {
    display: block !important;
    width: 100% !important;
    aspect-ratio: var(--lpg-list-ratio, 1/1);
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    /* 覆盖主题的容器级 hover 位移（translateY 等），只允许图片内部动效 */
    transform: none !important;
    transition: none !important;
}
.lpg-list-img-ready img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transform-origin: center center !important;
    will-change: transform, opacity !important;
    transition: transform var(--lpg-hover-dur, 0.35s) ease,
                opacity   var(--lpg-hover-dur, 0.35s) ease !important;
}

/* ── 无效果 ── */
.lpg-list-hover-none img                          { transition: none !important; }

/* ── 放大 ── */
.lpg-list-hover-zoom:hover img,
.lpg-list-hover-zoom-fade:hover img               { transform: scale(var(--lpg-hover-scale, 1.06)) !important; }

/* ── 放大+变亮 ── */
.lpg-list-hover-zoom-fade:hover img               { filter: brightness(1.08) !important; }

/* ── 仅变亮 ── */
.lpg-list-hover-fade:hover img                    { filter: brightness(1.1) !important; }

/* ── 整体上浮（交还控制权给主题，不覆盖） ── */
.lpg-list-hover-lift { transform: none !important; transition: transform var(--lpg-hover-dur, 0.35s) ease !important; }
.lpg-list-hover-lift:hover { transform: translateY(-4px) !important; }
.lpg-list-hover-lift img   { transition: none !important; }

/* WC hook 包装器（兼容） */
.leon-list-img-wrap {
    display: block;
    width: 100%;
    aspect-ratio: var(--lpg-list-ratio, 1/1);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    transform: none !important;
    transition: none !important;
}
.leon-list-img-wrap img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    transform-origin: center center;
    will-change: transform, opacity;
    transition: transform var(--lpg-hover-dur, 0.35s) ease,
                opacity   var(--lpg-hover-dur, 0.35s) ease;
}

/* ════════════════════════════════════════════════════
   详情页图库外层容器
   ════════════════════════════════════════════════════ */
.leon-gallery-wrap {
    --lpg-bg: #f0f0f0;
    --lpg-bg-thumb: #f0f0f0;
    --lpg-padding: 12px;
    --lpg-thumb-size: 80px;
    --lpg-thumb-gap: 8px;
    --lpg-mobile-bp: 768px;

    display: flex !important;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    align-items: flex-start;
}

/* ── 底部布局 ─────────────────────────────────────── */
.leon-gallery-wrap.lpg-pos-bottom               { flex-direction: column; gap: 10px; }
.leon-gallery-wrap.lpg-pos-bottom .lpg-main-wrap    { width: 100%; flex: none; }
.leon-gallery-wrap.lpg-pos-bottom .lpg-thumbs-outer { width: 100%; }
.leon-gallery-wrap.lpg-pos-bottom .lpg-thumbs-track { flex-direction: row; }
.leon-gallery-wrap.lpg-pos-bottom .lpg-thumb-bg     { width: var(--lpg-thumb-size); height: var(--lpg-thumb-size); }
.leon-gallery-wrap.lpg-pos-bottom .lpg-thumb        { flex-shrink: 0; }

/* ── 左侧布局 ─────────────────────────────────────── */
.leon-gallery-wrap.lpg-pos-left  { flex-direction: row; gap: 12px; }
.leon-gallery-wrap.lpg-pos-left .lpg-main-wrap    { flex: 1 1 auto; min-width: 0; }
.leon-gallery-wrap.lpg-pos-left .lpg-thumbs-outer { order: -1; width: calc(var(--lpg-thumb-size) + 4px); flex-shrink: 0; overflow: hidden; }
.leon-gallery-wrap.lpg-pos-left .lpg-thumbs-track { flex-direction: column; }
.leon-gallery-wrap.lpg-pos-left .lpg-thumb,
.leon-gallery-wrap.lpg-pos-left .lpg-thumb-bg     { width: var(--lpg-thumb-size); height: var(--lpg-thumb-size); flex-shrink: 0; }

/* ── 右侧布局 ─────────────────────────────────────── */
.leon-gallery-wrap.lpg-pos-right { flex-direction: row; gap: 12px; }
.leon-gallery-wrap.lpg-pos-right .lpg-main-wrap    { flex: 1 1 auto; min-width: 0; }
.leon-gallery-wrap.lpg-pos-right .lpg-thumbs-outer { width: calc(var(--lpg-thumb-size) + 4px); flex-shrink: 0; overflow: hidden; }
.leon-gallery-wrap.lpg-pos-right .lpg-thumbs-track { flex-direction: column; }
.leon-gallery-wrap.lpg-pos-right .lpg-thumb,
.leon-gallery-wrap.lpg-pos-right .lpg-thumb-bg     { width: var(--lpg-thumb-size); height: var(--lpg-thumb-size); flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   主图区
   ════════════════════════════════════════════════════ */
.lpg-main-wrap {
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
}
.lpg-main-track {
    width: 100%;
    position: relative;
}

/* 所有 slide 叠在同一位置 */
.lpg-slide {
    width: 100%;
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    will-change: transform, opacity;
}
/* active slide：相对定位撑开容器高度 */
.lpg-slide.active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

/* 动画激活后才加 transition（JS 在 goTo 时加 .lpg-animated） */
.lpg-main-track.lpg-animated .lpg-slide {
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 新图从右进入 */
.lpg-slide.lpg-enter-right { transform: translateX(100%); opacity: 0; }
/* 旧图向左退出 */
.lpg-slide.lpg-leave-left  { transform: translateX(-100%); opacity: 0; position: absolute; }
/* 新图从左进入 */
.lpg-slide.lpg-enter-left  { transform: translateX(-100%); opacity: 0; }
/* 旧图向右退出 */
.lpg-slide.lpg-leave-right { transform: translateX(100%);  opacity: 0; position: absolute; }
/* fade 模式 */
.lpg-slide.lpg-enter-fade  { transform: translateX(0); opacity: 0; }
.lpg-slide.lpg-leave-fade  { transform: translateX(0); opacity: 0; position: absolute; }

.lpg-lightbox-enabled .lpg-img-bg { cursor: zoom-in; }

/* 旧 keyframe 动画（不再使用，保留防冲突） */
@keyframes lpgFadeIn       { from{opacity:0} to{opacity:1} }
@keyframes lpgSlideInLeft  { from{transform:translateX(-100%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes lpgSlideInRight { from{transform:translateX( 100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* 主图背景容器 */
.lpg-img-bg {
    background: var(--lpg-bg);
    padding: var(--lpg-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    transition: background 0.2s;
}
.lpg-img-bg.lpg-no-bg {
    background: transparent !important;
    padding: 0 !important;
}
.lpg-img-bg img.lpg-main-img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}

/* 主图左右导航箭头
   重置所有可能被主题覆盖的状态色 */
.lpg-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    padding: 0; opacity: 0.7;
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
    /* 重置外部样式污染 */
    outline: none !important;
    box-shadow: none !important;
    color: #333 !important;
    text-decoration: none !important;
}
.lpg-main-wrap:hover .lpg-nav { opacity: 1; }
.lpg-nav:hover,
.lpg-nav:focus,
.lpg-nav:active {
    background: #fff !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
    outline: none !important;
    color: #111 !important;
}
.lpg-nav svg   { width: 16px; height: 16px; pointer-events: none; }
.lpg-prev { left: 8px; }
.lpg-next { right: 8px; }
.lpg-zoom-btn { display: none !important; }

/* ════════════════════════════════════════════════════
   缩略图区域
   ════════════════════════════════════════════════════ */
.lpg-thumbs-outer {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
}
.lpg-pos-bottom .lpg-thumbs-outer { width: 100%; }

.lpg-thumbs-track {
    display: flex;
    gap: var(--lpg-thumb-gap);
    overflow: visible;
    scrollbar-width: none;
    /* 平滑过渡由 JS 动态设置 */
    width: 100%;
    box-sizing: border-box;
}
.lpg-pos-left  .lpg-thumbs-track,
.lpg-pos-right .lpg-thumbs-track {
    padding-top: 28px;
    padding-bottom: 28px;
    box-sizing: border-box;
}

/* 缩略图箭头：重置所有主题污染色 */
.lpg-thumb-nav {
    position: absolute;
    left: 0; right: 0;
    height: 28px;
    background: rgba(255,255,255,0.88) !important;
    border: none !important;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; z-index: 5;
    color: #555 !important;
    transition: background 0.2s, color 0.2s;
    backdrop-filter: blur(2px);
    /* 强制重置外部样式 */
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0;
    text-decoration: none !important;
}
.lpg-thumb-nav:hover,
.lpg-thumb-nav:focus,
.lpg-thumb-nav:active {
    background: rgba(255,255,255,0.98) !important;
    color: #111 !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}
.lpg-thumb-nav:disabled {
    opacity: 0.25;
    cursor: default;
}
.lpg-thumb-nav svg { width: 14px; height: 14px; pointer-events: none; }

.lpg-thumb-prev { top: 0;    border-radius: 4px 4px 0 0; }
.lpg-thumb-next { bottom: 0; border-radius: 0 0 4px 4px; }

.lpg-pos-bottom .lpg-thumb-nav {
    position: absolute;
    top: 0; bottom: 0; left: auto; right: auto;
    width: 28px; height: 100%;
    border-radius: 0;
}
.lpg-pos-bottom .lpg-thumb-prev { left: 0;  border-radius: 4px 0 0 4px; }
.lpg-pos-bottom .lpg-thumb-next { right: 0; border-radius: 0 4px 4px 0; }
.lpg-pos-bottom .lpg-thumbs-track {
    padding-top: 0; padding-bottom: 0;
    padding-left: 28px; padding-right: 28px;
}

/* 缩略图按钮：重置外部样式，用低调样式替代蓝色粗边框 */
.lpg-thumb {
    flex-shrink: 0;
    padding: 0;
    background: none !important;
    border: 1px solid transparent !important;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    display: block;
    /* 强制重置主题 hover/focus */
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.18s, opacity 0.18s;
    opacity: 0.65;
}
.lpg-thumb:hover,
.lpg-thumb:focus,
.lpg-thumb:active {
    border-color: rgba(0,0,0,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    opacity: 1;
}
/* 选中态：底部细线条，比整圈边框更轻盈 */
.lpg-thumb.active {
    border-color: transparent !important;
    box-shadow: inset 0 -2px 0 0 #333 !important;
    opacity: 1;
}

.lpg-thumb-bg {
    background: var(--lpg-bg-thumb);
    padding: 4px;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
    transition: background 0.2s;
}
.lpg-thumb-bg.lpg-no-bg { background: transparent !important; padding: 0 !important; }
.lpg-thumb-bg img.lpg-thumb-img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
}

/* ════════════════════════════════════════════════════
   灯箱
   ════════════════════════════════════════════════════ */
.lpg-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.lpg-lightbox.open { opacity: 1; pointer-events: all; }
.lpg-lb-backdrop   { position: absolute; inset: 0; cursor: pointer; }
.lpg-lb-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 16px;
    padding: 0 12px; width: 100%; max-width: 96vw; justify-content: center;
}
.lpg-lb-img-wrap {
    position: relative; display: flex;
    align-items: center; justify-content: center;
    flex: 1; max-width: 84vw; max-height: 88vh;
}
.lpg-lb-img {
    max-width: 84vw; max-height: 88vh;
    object-fit: contain; display: block;
    opacity: 0; transition: opacity 0.18s; border-radius: 2px;
}
.lpg-lb-img.loaded { opacity: 1; }
.lpg-lb-spinner {
    position: absolute; width: 26px; height: 26px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: rgba(255,255,255,0.8);
    border-radius: 50%; animation: lpgSpin 0.65s linear infinite;
    pointer-events: none;
}
.lpg-lb-img.loaded ~ .lpg-lb-spinner { display: none; }
@keyframes lpgSpin { to { transform: rotate(360deg); } }

.lpg-lb-close {
    position: fixed; top: 16px; right: 18px;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; transition: background 0.2s; padding: 0; z-index: 2;
    outline: none !important; box-shadow: none !important;
}
.lpg-lb-close:hover,
.lpg-lb-close:focus {
    background: rgba(255,255,255,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
}
.lpg-lb-close svg { width: 18px; height: 18px; pointer-events: none; }

.lpg-lb-nav {
    width: 46px; height: 46px;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff !important; flex-shrink: 0;
    transition: background 0.2s; padding: 0;
    outline: none !important; box-shadow: none !important;
}
.lpg-lb-nav:hover,
.lpg-lb-nav:focus {
    background: rgba(255,255,255,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: rgba(255,255,255,0.3) !important;
}
.lpg-lb-nav svg     { width: 20px; height: 20px; pointer-events: none; }
.lpg-lb-nav:disabled { opacity: 0.2; cursor: default; }

.lpg-lb-counter {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.6); font-size: 13px; pointer-events: none;
}

/* ════════════════════════════════════════════════════
   移动端
   ════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .leon-gallery-wrap {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .leon-gallery-wrap .lpg-main-wrap { width: 100% !important; flex: none !important; }
    .leon-gallery-wrap .lpg-thumbs-outer {
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
    .leon-gallery-wrap .lpg-thumbs-track {
        flex-direction: row !important;
        padding-top: 0 !important; padding-bottom: 0 !important;
        padding-left: 28px !important; padding-right: 28px !important;
    }
    .leon-gallery-wrap .lpg-thumb,
    .leon-gallery-wrap .lpg-thumb-bg { width: 60px !important; height: 60px !important; }
    .lpg-thumb-nav {
        top: 0 !important; bottom: 0 !important; left: auto !important; right: auto !important;
        width: 28px !important; height: 100% !important;
    }
    .lpg-thumb-prev { left: 0  !important; border-radius: 4px 0 0 4px !important; }
    .lpg-thumb-next { right: 0 !important; border-radius: 0 4px 4px 0 !important; }
    .lpg-lb-inner { gap: 8px; padding: 0 4px; }
    .lpg-lb-nav   { width: 36px; height: 36px; }
}