/* 产品相册整体容器样式 */
.product-gallery-container {
    padding: 30px;
    margin: 0 auto;
    max-width: 1200px;
}

/* 主轮播图容器 */
.product-gallery-main {
    margin: 0 auto;
    max-width: 800px; /* 控制最大宽度 */
    border-radius: 5px;
    overflow: hidden;
    background-color: #ffffff;
    padding: 15px;
    position: relative; /* 确保箭头定位正确 */
}

/* 支持宽高比的主图容器 */
.product-gallery-main[data-aspect-ratio]:not([data-aspect-ratio=""]) {
    width: auto !important;
    height: auto !important;
}

/* 宽高比容器 - 使用现代CSS aspect-ratio属性 */
.product-gallery-main[style*="aspect-ratio"] {
    width: 100% !important;
    max-width: 800px;
    height: auto !important;
}

/* 为不支持aspect-ratio的浏览器提供回退 */
@supports not (aspect-ratio: 1 / 1) {
    .product-gallery-main[data-aspect-ratio="1:1"] {
        padding-bottom: 100%;
    }
    .product-gallery-main[data-aspect-ratio="5:4"] {
        padding-bottom: 80%;
    }
    .product-gallery-main[data-aspect-ratio="4:5"] {
        padding-bottom: 125%;
    }
    .product-gallery-main[data-aspect-ratio="4:3"] {
        padding-bottom: 75%;
    }
    .product-gallery-main[data-aspect-ratio="3:4"] {
        padding-bottom: 133.33%;
    }
    .product-gallery-main[data-aspect-ratio="3:2"] {
        padding-bottom: 66.67%;
    }
    .product-gallery-main[data-aspect-ratio="2:3"] {
        padding-bottom: 150%;
    }
    .product-gallery-main[data-aspect-ratio="16:9"] {
        padding-bottom: 56.25%;
    }
    .product-gallery-main[data-aspect-ratio="9:16"] {
        padding-bottom: 177.78%;
    }
    .product-gallery-main[data-aspect-ratio="2:1"] {
        padding-bottom: 50%;
    }
    .product-gallery-main[data-aspect-ratio="1:2"] {
        padding-bottom: 200%;
    }
}

/* 修复主轮播箭头样式 */
.product-gallery-main .swiper-button-next,
.product-gallery-main .swiper-button-prev {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.product-gallery-main .swiper-button-next {
    right: 10px;
}

.product-gallery-main .swiper-button-prev {
    left: 10px;
}

.product-gallery-main .swiper-button-next:after,
.product-gallery-main .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

/* 轮播图内的图片容器 */
.zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
}

/* 主图片样式 */
.main-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* 图片标题容器 - 修复显示问题 */
.image-title-container {
    background-color: #ffffff;
    padding: 10px 15px;
    margin: 10px auto 20px;  /* 增加上下边距 */
    max-width: 800px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: block !important;  /* 强制显示 */
    position: relative;  /* 确保定位正确 */
    z-index: 5;  /* 确保可见 */
}

/* 确保swiper-slide中的标题显示 */
.swiper-slide .image-title-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 10px;
}

/* 将标题容器移出轮播结构 */
.product-gallery-container > .image-title-container {
    margin-top: -10px;
    margin-bottom: 20px;
}

/* 图片标题样式 */
.image-title h5 {
    margin: 0;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.image-title p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #666;
}

/* 缩略图容器 */
.product-gallery-thumbs {
    margin: 10px auto 20px;  /* 减少与标题的间距 */
    max-width: 800px;
    background-color: #ffffff;
    padding: 15px;
     position: relative; /* 确保箭头定位正确 */
}

/* 修复缩略图箭头样式 - 基础样式 */
.product-gallery-thumbs .swiper-button-next,
.product-gallery-thumbs .swiper-button-prev {
    background-color: rgba(66, 133, 244, 0.7);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    z-index: 10;
    margin-top: 0; /* 重置 Swiper 默认的 margin */
}

/* 底部和顶部缩略图的按钮 - 水平排列，按钮在左右，垂直居中 */
.bottom-thumbs .swiper-button-next,
.bottom-thumbs .swiper-button-prev,
.top-thumbs .swiper-button-next,
.top-thumbs .swiper-button-prev {
    top: calc(50% - 7.5px); /* 垂直居中，补偿 padding */
    transform: translateY(-50%);
}

.bottom-thumbs .swiper-button-next,
.top-thumbs .swiper-button-next {
    right: 5px;
    left: auto;
}

.bottom-thumbs .swiper-button-prev,
.top-thumbs .swiper-button-prev {
    left: 5px;
    right: auto;
}

/* 左侧和右侧缩略图的按钮 - 垂直排列，按钮在上下，水平居中 */
.left-thumbs .swiper-button-next,
.left-thumbs .swiper-button-prev,
.right-thumbs .swiper-button-next,
.right-thumbs .swiper-button-prev {
    left: 50%; /* 水平居中 */
    right: auto;
    transform: translateX(-50%); /* 水平居中偏移 */
}

.left-thumbs .swiper-button-next,
.right-thumbs .swiper-button-next {
    bottom: 5px; /* 下箭头在底部 */
    top: auto;
}

.left-thumbs .swiper-button-prev,
.right-thumbs .swiper-button-prev {
    top: 5px; /* 上箭头在顶部 */
    bottom: auto;
}

/* 左侧和右侧按钮的箭头方向调整 */
.left-thumbs .swiper-button-next:after,
.right-thumbs .swiper-button-next:after {
    content: '▼'; /* 向下箭头 */
    font-size: 12px;
}

.left-thumbs .swiper-button-prev:after,
.right-thumbs .swiper-button-prev:after {
    content: '▲'; /* 向上箭头 */
    font-size: 12px;
}

.product-gallery-thumbs .swiper-button-next:after,
.product-gallery-thumbs .swiper-button-prev:after {
    font-size: 14px;
    font-weight: bold;
}

/* 缩略图滑块样式 */
.product-gallery-thumbs .swiper-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 缩略图样式 */
.product-gallery-thumbs .swiper-slide {
    opacity: 0.6;
    transition: opacity 0.3s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
    text-align: center;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid #4285f4;
}

/* 缩略图容器 - 修复居中问题 */
.thumb-container {
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
}

/* 支持宽高比的缩略图容器 */
.product-gallery-thumbs[data-thumb-aspect-ratio]:not([data-thumb-aspect-ratio=""]) .thumb-container {
    aspect-ratio: var(--thumb-aspect-ratio, 1 / 1);
}

/* 缩略图图片 - 修复居中问题 */
.thumb-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* 使用cover确保填充整个容器 */
    margin: 0 auto;
}

/* 宽高比缩略图样式 */
.product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container {
    width: 100%;
    height: 0;
    position: relative;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio="1:1"] .thumb-container {
    padding-bottom: 100%;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio="5:4"] .thumb-container {
    padding-bottom: 80%;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio="4:5"] .thumb-container {
    padding-bottom: 125%;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio="4:3"] .thumb-container {
    padding-bottom: 75%;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio="3:4"] .thumb-container {
    padding-bottom: 133.33%;
}

.product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 产品相册包装器 - 用于 left/right 布局 */
.product-gallery-wrapper.position-left,
.product-gallery-wrapper.position-right {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.product-gallery-wrapper.position-left {
    flex-direction: row; /* HTML: 缩略图 | 主图 → 缩略图在左，主图在右 */
}

.product-gallery-wrapper.position-right {
    flex-direction: row; /* HTML: 主图 | 缩略图 → 主图在左，缩略图在右 */
}

/* 左侧和右侧布局中的主图 */
.product-gallery-wrapper.position-left .product-gallery-main,
.product-gallery-wrapper.position-right .product-gallery-main {
    flex: 1; /* 主图占据剩余空间 */
    min-width: 0; /* 防止 flex 溢出 */
}

/* 左侧缩略图 */
.left-thumbs {
    height: 400px;
    background-color: #f0f0f0;
    padding: 10px; /* 上下左右都有 padding */
    position: relative;
    flex-shrink: 0; /* 防止缩略图被压缩 */
}

.left-thumbs .swiper-slide {
    margin: 5px 0;
}

/* 右侧缩略图 */
.right-thumbs {
    height: 400px;
    background-color: #f0f0f0;
    padding: 10px; /* 上下左右都有 padding */
    position: relative;
    flex-shrink: 0; /* 防止缩略图被压缩 */
}

.right-thumbs .swiper-slide {
    margin: 5px 0;
}

/* 顶部和底部缩略图 */
.top-thumbs,
.bottom-thumbs {
    padding: 15px 40px; /* 增加左右边距给箭头留空间 */
    position: relative;
    margin-bottom: 20px; /* 与主图的间距 */
}

.top-thumbs {
    margin-bottom: 20px; /* 顶部缩略图在主图上方，需要下边距 */
}

.bottom-thumbs {
    margin-top: 20px; /* 底部缩略图在主图下方，需要上边距 */
    margin-bottom: 0;
}

.top-thumbs .swiper-slide,
.bottom-thumbs .swiper-slide {
    margin: 0 5px;
    height: 80px; /* 固定高度确保一致性 */
    width: auto !important; /* Swiper 自动计算宽度 */
    flex-shrink: 0; /* 防止收缩 */
}

/* 分页指示器样式 */
.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #4285f4;
    opacity: 1;
}

/* 视频相关样式 */
.video-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #000;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}

.play-button:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 5px;
}

.video-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-icon:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 2px;
}

/* 移动端强制底部缩略图布局 - 最高优先级（覆盖所有其他样式包括 Elementor） */

/* 移动端容器本身强制 block 布局 */
.product-gallery-container.is-mobile,
.is-mobile.product-gallery-container,
.elementor-widget-container .product-gallery-container.is-mobile,
.elementor-element .product-gallery-container.is-mobile,
body .product-gallery-container.is-mobile,
html body .product-gallery-container.is-mobile {
    display: block !important;
}

/* 移动端主图和缩略图强制 block 布局 */
.product-gallery-container.is-mobile .product-gallery-main,
.product-gallery-container.is-mobile .product-gallery-thumbs,
.is-mobile.product-gallery-container .product-gallery-main,
.is-mobile.product-gallery-container .product-gallery-thumbs {
    display: block !important;
    width: 100% !important;
}

/* 移动端 wrapper（如果存在）强制垂直布局 */
.product-gallery-container.is-mobile .product-gallery-wrapper.position-left,
.product-gallery-container.is-mobile .product-gallery-wrapper.position-right,
.is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
.is-mobile.product-gallery-container .product-gallery-wrapper.position-right,
.elementor-widget-container .product-gallery-container.is-mobile .product-gallery-wrapper.position-left,
.elementor-widget-container .product-gallery-container.is-mobile .product-gallery-wrapper.position-right,
.elementor-element .product-gallery-container.is-mobile .product-gallery-wrapper.position-left,
.elementor-element .product-gallery-container.is-mobile .product-gallery-wrapper.position-right,
body .product-gallery-container.is-mobile .product-gallery-wrapper.position-left,
body .product-gallery-container.is-mobile .product-gallery-wrapper.position-right {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* 移动端主图容器全宽 */
.product-gallery-container.is-mobile .product-gallery-wrapper.position-left .product-gallery-main,
.product-gallery-container.is-mobile .product-gallery-wrapper.position-right .product-gallery-main,
.is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main,
.elementor-widget-container .product-gallery-container.is-mobile .product-gallery-wrapper .product-gallery-main,
.elementor-element .product-gallery-container.is-mobile .product-gallery-wrapper .product-gallery-main,
body .product-gallery-container.is-mobile .product-gallery-wrapper .product-gallery-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: none !important;
    order: 1 !important;
}

/* 移动端缩略图容器全宽并放在底部 */
.product-gallery-container.is-mobile .left-thumbs,
.product-gallery-container.is-mobile .right-thumbs,
.is-mobile.product-gallery-container .left-thumbs,
.is-mobile.product-gallery-container .right-thumbs,
.elementor-widget-container .product-gallery-container.is-mobile .left-thumbs,
.elementor-widget-container .product-gallery-container.is-mobile .right-thumbs,
.elementor-element .product-gallery-container.is-mobile .left-thumbs,
.elementor-element .product-gallery-container.is-mobile .right-thumbs,
body .product-gallery-container.is-mobile .left-thumbs,
body .product-gallery-container.is-mobile .right-thumbs {
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 0 0 !important;
    padding: 10px 30px !important;
    flex: none !important;
    flex-shrink: 0 !important;
    order: 2 !important;
}

/* 移动端左右侧缩略图改为水平排列 */
.product-gallery-container.is-mobile .left-thumbs .swiper-wrapper,
.product-gallery-container.is-mobile .right-thumbs .swiper-wrapper {
    flex-direction: row !important;
}

.product-gallery-container.is-mobile .left-thumbs .swiper-slide,
.product-gallery-container.is-mobile .right-thumbs .swiper-slide {
    margin: 0 5px !important;
    height: 60px !important;
}

/* 移动端左右侧按钮改为左右位置 */
.product-gallery-container.is-mobile .left-thumbs .swiper-button-next,
.product-gallery-container.is-mobile .left-thumbs .swiper-button-prev,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-next,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-prev {
    top: 50% !important;
    left: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
}

.product-gallery-container.is-mobile .left-thumbs .swiper-button-next,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-next {
    right: 5px !important;
}

.product-gallery-container.is-mobile .left-thumbs .swiper-button-prev,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-prev {
    left: 5px !important;
}

/* 移动端按钮箭头方向改为左右 */
.product-gallery-container.is-mobile .left-thumbs .swiper-button-next:after,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-next:after,
.product-gallery-container.is-mobile .left-thumbs .swiper-button-prev:after,
.product-gallery-container.is-mobile .right-thumbs .swiper-button-prev:after {
    content: '' !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .product-gallery-container {
        padding: 15px;
    }
    
    .image-title-container {
        padding: 8px;
    }
    
    .image-title h5 {
        font-size: 14px;
    }
    
    .product-gallery-main .swiper-button-next,
    .product-gallery-main .swiper-button-prev {
        width: 30px;
        height: 30px;
    }
    
    .product-gallery-main .swiper-button-next:after,
    .product-gallery-main .swiper-button-prev:after {
        font-size: 14px;
    }
    
    .product-gallery-thumbs .swiper-button-next,
    .product-gallery-thumbs .swiper-button-prev {
        width: 24px;
        height: 24px;
    }

    .product-gallery-thumbs .swiper-button-next:after,
    .product-gallery-thumbs .swiper-button-prev:after {
        font-size: 12px;
    }

    .top-thumbs,
    .bottom-thumbs {
        padding: 10px 30px;
    }

    /* 移动端底部和顶部缩略图按钮居中调整 */
    .bottom-thumbs .swiper-button-next,
    .bottom-thumbs .swiper-button-prev,
    .top-thumbs .swiper-button-next,
    .top-thumbs .swiper-button-prev {
        top: calc(50% - 5px); /* 50% - (padding 10px / 2) */
    }

    .top-thumbs .swiper-slide,
    .bottom-thumbs .swiper-slide {
        height: 60px;
        width: auto !important; /* 强制自动宽度，让 Swiper 计算 */
        min-width: 60px !important; /* 最小宽度 */
    }

    /* 移动端 left/right 布局强制改为垂直堆叠 - 最高优先级（覆盖所有样式） */
    .product-gallery-wrapper.position-left,
    .product-gallery-wrapper.position-right,
    .elementor-widget-container .product-gallery-wrapper.position-left,
    .elementor-widget-container .product-gallery-wrapper.position-right,
    .elementor-element .product-gallery-wrapper.position-left,
    .elementor-element .product-gallery-wrapper.position-right,
    .elementor-widget .product-gallery-wrapper.position-left,
    .elementor-widget .product-gallery-wrapper.position-right,
    body .product-gallery-wrapper.position-left,
    body .product-gallery-wrapper.position-right {
        display: block !important; /* 强制块级布局 */
        flex-direction: column !important; /* 移动端改为垂直布局 */
        gap: 0 !important;
    }

    /* 移动端主图容器 */
    .product-gallery-wrapper.position-left .product-gallery-main,
    .product-gallery-wrapper.position-right .product-gallery-main,
    .elementor-widget-container .product-gallery-wrapper .product-gallery-main,
    .elementor-element .product-gallery-wrapper .product-gallery-main,
    body .product-gallery-wrapper .product-gallery-main {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        order: 1 !important;
    }

    /* 移动端缩略图容器 */
    .left-thumbs,
    .right-thumbs,
    .elementor-widget-container .left-thumbs,
    .elementor-widget-container .right-thumbs,
    .elementor-element .left-thumbs,
    .elementor-element .right-thumbs,
    body .left-thumbs,
    body .right-thumbs {
        width: 100% !important; /* 移动端全宽 */
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 10px 30px !important; /* 与 top/bottom 一致 */
        margin: 20px 0 0 0 !important;
        flex: none !important;
        flex-shrink: 0 !important;
        order: 2 !important;
    }

    /* 移动端 left/right 缩略图改为水平排列 */
    .left-thumbs .swiper-wrapper,
    .right-thumbs .swiper-wrapper {
        flex-direction: row !important; /* 水平排列 */
    }

    .left-thumbs .swiper-slide,
    .right-thumbs .swiper-slide {
        margin: 0 5px !important; /* 水平间距 */
        height: 60px !important; /* 与 top/bottom 一致 */
    }

    /* 移动端 left/right 按钮改为左右位置 */
    .left-thumbs .swiper-button-next,
    .left-thumbs .swiper-button-prev,
    .right-thumbs .swiper-button-next,
    .right-thumbs .swiper-button-prev {
        top: 50% !important; /* 垂直居中 */
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(-50%) !important; /* 改为垂直居中 */
    }

    .left-thumbs .swiper-button-next,
    .right-thumbs .swiper-button-next {
        right: 5px !important;
    }

    .left-thumbs .swiper-button-prev,
    .right-thumbs .swiper-button-prev {
        left: 5px !important;
    }

    /* 移动端 left/right 按钮箭头方向改为左右 */
    .left-thumbs .swiper-button-next:after,
    .right-thumbs .swiper-button-next:after {
        content: '' !important; /* 使用默认的右箭头 */
        font-size: 12px !important;
    }

    .left-thumbs .swiper-button-prev:after,
    .right-thumbs .swiper-button-prev:after {
        content: '' !important; /* 使用默认的左箭头 */
        font-size: 12px !important;
    }
}

/* 灯箱效果增强 */
.mfp-bg {
    background: #000;
    opacity: 0.9;
}

.mfp-figure:after {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444;
}

.mfp-title {
    color: #f3f3f3;
    font-size: 14px;
    line-height: 18px;
    padding-right: 36px;
    text-align: center;
}

/* ========================================
   Elementor 编辑器和预览模式兼容性修复 - 增强版
   ======================================== */

/*
 * 策略 1: 使用多重选择器覆盖所有可能的 Elementor 容器
 * 包括: body 类、iframe 内、widget 容器、section 容器等
 */

/* 基础 flexbox 布局 - 最高优先级 */
body.elementor-editor-active .product-gallery-wrapper.position-left,
body.elementor-editor-active .product-gallery-wrapper.position-right,
.elementor-editor-active .product-gallery-wrapper.position-left,
.elementor-editor-active .product-gallery-wrapper.position-right,
.elementor-preview .product-gallery-wrapper.position-left,
.elementor-preview .product-gallery-wrapper.position-right,
.elementor-editor-preview .product-gallery-wrapper.position-left,
.elementor-editor-preview .product-gallery-wrapper.position-right,
#elementor-preview-iframe .product-gallery-wrapper.position-left,
#elementor-preview-iframe .product-gallery-wrapper.position-right {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Left 位置 - 缩略图在左 */
body.elementor-editor-active .product-gallery-wrapper.position-left,
.elementor-editor-active .product-gallery-wrapper.position-left,
.elementor-preview .product-gallery-wrapper.position-left,
.elementor-editor-preview .product-gallery-wrapper.position-left,
#elementor-preview-iframe .product-gallery-wrapper.position-left {
    flex-direction: row !important;
}

/* Right 位置 - 缩略图在右 */
body.elementor-editor-active .product-gallery-wrapper.position-right,
.elementor-editor-active .product-gallery-wrapper.position-right,
.elementor-preview .product-gallery-wrapper.position-right,
.elementor-editor-preview .product-gallery-wrapper.position-right,
#elementor-preview-iframe .product-gallery-wrapper.position-right {
    flex-direction: row !important;
}

/*
 * 策略 2: 确保主图正确占据空间
 */
body.elementor-editor-active .product-gallery-wrapper.position-left .product-gallery-main,
body.elementor-editor-active .product-gallery-wrapper.position-right .product-gallery-main,
.elementor-editor-active .product-gallery-wrapper.position-left .product-gallery-main,
.elementor-editor-active .product-gallery-wrapper.position-right .product-gallery-main,
.elementor-preview .product-gallery-wrapper.position-left .product-gallery-main,
.elementor-preview .product-gallery-wrapper.position-right .product-gallery-main,
.elementor-editor-preview .product-gallery-wrapper.position-left .product-gallery-main,
.elementor-editor-preview .product-gallery-wrapper.position-right .product-gallery-main,
#elementor-preview-iframe .product-gallery-wrapper.position-left .product-gallery-main,
#elementor-preview-iframe .product-gallery-wrapper.position-right .product-gallery-main {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/*
 * 策略 3: 确保缩略图容器不被压缩，并有正确的尺寸
 */
body.elementor-editor-active .left-thumbs,
body.elementor-editor-active .right-thumbs,
.elementor-editor-active .left-thumbs,
.elementor-editor-active .right-thumbs,
.elementor-preview .left-thumbs,
.elementor-preview .right-thumbs,
.elementor-editor-preview .left-thumbs,
.elementor-editor-preview .right-thumbs,
#elementor-preview-iframe .left-thumbs,
#elementor-preview-iframe .right-thumbs {
    flex-shrink: 0 !important;
    height: 400px !important;
    min-width: 100px !important;
    width: auto !important;
    display: block !important;
    position: relative !important;
}

/*
 * 策略 4: 修复 Elementor Widget 容器可能的冲突
 */
.elementor-widget-container .product-gallery-wrapper.position-left,
.elementor-widget-container .product-gallery-wrapper.position-right,
.elementor-element .product-gallery-wrapper.position-left,
.elementor-element .product-gallery-wrapper.position-right,
.elementor-widget .product-gallery-wrapper.position-left,
.elementor-widget .product-gallery-wrapper.position-right {
    display: flex !important;
}

.elementor-widget-container .product-gallery-container,
.elementor-element .product-gallery-container,
.elementor-widget .product-gallery-container {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * 策略 5: 覆盖 Elementor 的内联样式和默认样式
 */
.elementor-shortcode .product-gallery-wrapper.position-left,
.elementor-shortcode .product-gallery-wrapper.position-right {
    display: flex !important;
}

/* 确保缩略图的 Swiper 容器正确显示 */
body.elementor-editor-active .left-thumbs .swiper,
body.elementor-editor-active .right-thumbs .swiper,
.elementor-editor-active .left-thumbs .swiper,
.elementor-editor-active .right-thumbs .swiper,
.elementor-preview .left-thumbs .swiper,
.elementor-preview .right-thumbs .swiper {
    height: 100% !important;
    width: 100% !important;
}

/*
 * 策略 6: 响应式调整
 */
@media (max-width: 768px) {
    body.elementor-editor-active .product-gallery-wrapper.position-left,
    body.elementor-editor-active .product-gallery-wrapper.position-right,
    .elementor-editor-active .product-gallery-wrapper.position-left,
    .elementor-editor-active .product-gallery-wrapper.position-right,
    .elementor-preview .product-gallery-wrapper.position-left,
    .elementor-preview .product-gallery-wrapper.position-right {
        flex-direction: column !important;
    }

    body.elementor-editor-active .left-thumbs,
    body.elementor-editor-active .right-thumbs,
    .elementor-editor-active .left-thumbs,
    .elementor-editor-active .right-thumbs,
    .elementor-preview .left-thumbs,
    .elementor-preview .right-thumbs {
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
    }
}

/*
 * ============================================================================
 * 移动端强制底部布局 - 终极覆盖规则（必须放在文件最后）
 * ============================================================================
 * 这些规则必须在所有其他规则之后，以确保最高优先级
 * 不依赖 is-mobile 类，完全使用媒体查询
 */

/* 移动端强制垂直布局 - 覆盖所有可能的选择器 - 使用超高优先级 */
@media screen and (max-width: 768px) {
    /* 强制 wrapper 为垂直布局 - 使用多层选择器提高优先级 */
    div.product-gallery-wrapper.position-left,
    div.product-gallery-wrapper.position-right,
    div.product-gallery-container div.product-gallery-wrapper.position-left,
    div.product-gallery-container div.product-gallery-wrapper.position-right,
    .elementor-widget-container div.product-gallery-wrapper.position-left,
    .elementor-widget-container div.product-gallery-wrapper.position-right,
    .elementor-element div.product-gallery-wrapper.position-left,
    .elementor-element div.product-gallery-wrapper.position-right,
    .elementor-widget div.product-gallery-wrapper.position-left,
    .elementor-widget div.product-gallery-wrapper.position-right,
    .elementor-shortcode div.product-gallery-wrapper.position-left,
    .elementor-shortcode div.product-gallery-wrapper.position-right,
    body div.product-gallery-wrapper.position-left,
    body div.product-gallery-wrapper.position-right,
    html body div.product-gallery-wrapper.position-left,
    html body div.product-gallery-wrapper.position-right,
    body .elementor-widget-container div.product-gallery-wrapper.position-left,
    body .elementor-widget-container div.product-gallery-wrapper.position-right {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }

    /* 移动端主图全宽 */
    div.product-gallery-wrapper div.product-gallery-main,
    div.product-gallery-wrapper.position-left div.product-gallery-main,
    div.product-gallery-wrapper.position-right div.product-gallery-main,
    .elementor-widget-container div.product-gallery-wrapper div.product-gallery-main,
    .elementor-element div.product-gallery-wrapper div.product-gallery-main,
    body div.product-gallery-wrapper div.product-gallery-main,
    html body div.product-gallery-wrapper div.product-gallery-main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        order: 1 !important;
    }

    /* 移动端缩略图全宽并放在底部 */
    div.left-thumbs,
    div.right-thumbs,
    div.product-gallery-wrapper div.left-thumbs,
    div.product-gallery-wrapper div.right-thumbs,
    .elementor-widget-container div.left-thumbs,
    .elementor-widget-container div.right-thumbs,
    .elementor-element div.left-thumbs,
    .elementor-element div.right-thumbs,
    body div.left-thumbs,
    body div.right-thumbs,
    html body div.left-thumbs,
    html body div.right-thumbs {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 20px 0 0 0 !important;
        padding: 10px 30px !important;
        flex: none !important;
        order: 2 !important;
    }
}

/* is-mobile 类强制规则（服务器端检测） */
.product-gallery-container.is-mobile .product-gallery-wrapper.position-left,
.product-gallery-container.is-mobile .product-gallery-wrapper.position-right,
.is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
.is-mobile.product-gallery-container .product-gallery-wrapper.position-right,
.elementor-widget-container .is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
.elementor-widget-container .is-mobile.product-gallery-container .product-gallery-wrapper.position-right,
.elementor-element .is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
.elementor-element .is-mobile.product-gallery-container .product-gallery-wrapper.position-right,
body .is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
body .is-mobile.product-gallery-container .product-gallery-wrapper.position-right,
html body .is-mobile.product-gallery-container .product-gallery-wrapper.position-left,
html body .is-mobile.product-gallery-container .product-gallery-wrapper.position-right {
    display: block !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.product-gallery-container.is-mobile .product-gallery-wrapper .product-gallery-main,
.is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main,
.elementor-widget-container .is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main,
.elementor-element .is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main,
body .is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main,
html body .is-mobile.product-gallery-container .product-gallery-wrapper .product-gallery-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    flex: none !important;
    order: 1 !important;
}

.product-gallery-container.is-mobile .left-thumbs,
.product-gallery-container.is-mobile .right-thumbs,
.is-mobile.product-gallery-container .left-thumbs,
.is-mobile.product-gallery-container .right-thumbs,
.elementor-widget-container .is-mobile.product-gallery-container .left-thumbs,
.elementor-widget-container .is-mobile.product-gallery-container .right-thumbs,
.elementor-element .is-mobile.product-gallery-container .left-thumbs,
.elementor-element .is-mobile.product-gallery-container .right-thumbs,
body .is-mobile.product-gallery-container .left-thumbs,
body .is-mobile.product-gallery-container .right-thumbs,
html body .is-mobile.product-gallery-container .left-thumbs,
html body .is-mobile.product-gallery-container .right-thumbs {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px 0 0 0 !important;
    padding: 10px 30px !important;
    flex: none !important;
    order: 2 !important;
}