/* 产品相册整体容器样式 */
.product-gallery-container {
    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(0,0,0, 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;
}

/* 缩略图样式 */
.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 #000;
}

/* 缩略图容器 - 修复居中问题 */
.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;
    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: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.video-icon:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 3px;
}

.product-gallery-thumb,
.suopu-gallery-thumb,
.product-gallery-main,
.suopu-gallery-stage,
.suopu-gallery-media {
    position: relative;
}

.product-gallery-thumb .video-icon,
.suopu-gallery-thumb .video-icon,
.suopu-gallery-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    pointer-events: none;
}

.product-gallery-main .video-icon,
.suopu-gallery-main-play-icon,
.suopu-gallery-stage .suopu-gallery-main-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 999px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8;
    pointer-events: none;
}

.video-icon::before,
.suopu-gallery-play-icon::before,
.suopu-gallery-main-play-icon::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
    margin-left: 3px;
}

.suopu-gallery-main-play-icon::before,
.product-gallery-main .video-icon::before {
    border-top-width: 12px;
    border-bottom-width: 12px;
    border-left-width: 18px;
    margin-left: 5px;
}

.video-container .suopu-gallery-main-play-icon,
.video-container .play-button {
    pointer-events: auto;
    cursor: pointer;
}

/* 移动端强制底部缩略图布局 - 最高优先级（覆盖所有其他样式包括 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;
    }
}

/* Final marketplace normalization: keep left/bottom on the shared shell + viewport model. */
.product-gallery-container.gallery-skin-marketplace {
    width: var(--suopu-gallery-width-desktop, auto);
    max-width: none;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-left {
    display: flex;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: var(--suopu-main-height-desktop, 600px);
    aspect-ratio: var(--suopu-main-aspect-ratio, 1 / 1);
    background: var(--suopu-image-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide {
    height: 100% !important;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage,
.product-gallery-container.gallery-skin-marketplace .zoom-container,
.product-gallery-container.gallery-skin-marketplace .video-container {
    width: 100%;
    height: 100%;
    background: var(--suopu-image-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage > a,
.product-gallery-container.gallery-skin-marketplace .zoom-container > a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main img,
.product-gallery-container.gallery-skin-marketplace .main-image,
.product-gallery-container.gallery-skin-marketplace .product-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px);
    height: var(--suopu-main-height-desktop, 600px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: calc(var(--suopu-main-height-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    overflow: hidden;
}

.gallery-skin-marketplace.thumbs-position-left.no-thumb-arrows .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-left.thumbs-no-overflow .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-left .thumbs-no-overflow.product-gallery-thumbs-viewport {
    height: var(--suopu-main-height-desktop, 600px);
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: calc(var(--suopu-thumb-height-desktop, 70px) + 24px);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
    width: calc(var(--suopu-main-width-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    height: var(--suopu-thumb-height-desktop, 70px);
    overflow: hidden;
}

.gallery-skin-marketplace.thumbs-position-bottom.no-thumb-arrows .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-bottom.thumbs-no-overflow .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-bottom .thumbs-no-overflow.product-gallery-thumbs-viewport {
    width: var(--suopu-main-width-desktop, 600px);
}

.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    box-sizing: border-box;
    border: 0 !important;
    background: transparent;
}

.gallery-skin-marketplace .thumb-container,
.gallery-skin-marketplace .suopu-gallery-thumb {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: var(--suopu-thumb-height-desktop, 70px);
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
}

.gallery-skin-marketplace .thumb-container img,
.gallery-skin-marketplace .suopu-gallery-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

.gallery-skin-marketplace .swiper-slide-thumb-active .thumb-container,
.gallery-skin-marketplace .swiper-slide-thumb-active .suopu-gallery-thumb {
    border-color: #ff6a00;
    box-shadow: 0 0 0 1px #ff6a00 inset;
}

.gallery-skin-marketplace .main-button-next,
.gallery-skin-marketplace .main-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    border: 1px solid rgba(0, 0, 0, .08);
    color: #111;
    transition: all .2s ease;
}

.gallery-skin-marketplace .main-button-next:hover,
.gallery-skin-marketplace .main-button-prev:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
}

.gallery-skin-marketplace .thumb-button-prev,
.gallery-skin-marketplace .thumb-button-next {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    border: 1px solid rgba(0, 0, 0, .08);
    color: #111;
    z-index: 20;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev {
    top: 0 !important;
    bottom: auto !important;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    bottom: 0 !important;
    top: auto !important;
    top: auto;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev {
    left: 0 !important;
    right: auto !important;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    right: 0 !important;
    left: auto !important;
}

.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-prev,
.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-next {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-tablet, auto);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-wrapper,
    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-wrapper {
        gap: var(--suopu-gallery-gap-tablet, 12px);
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-tablet, 520px);
        height: var(--suopu-main-height-tablet, 520px);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
        width: calc(var(--suopu-thumb-width-tablet, 64px) + 24px);
        height: var(--suopu-main-height-tablet, 520px);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
        width: var(--suopu-thumb-width-tablet, 64px);
        height: calc(var(--suopu-main-height-tablet, 520px) - var(--suopu-thumb-arrow-space, 68px));
    }

    .gallery-skin-marketplace.thumbs-position-left.no-thumb-arrows .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace.thumbs-position-left.thumbs-no-overflow .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace.thumbs-position-left .thumbs-no-overflow.product-gallery-thumbs-viewport {
        height: var(--suopu-main-height-tablet, 520px);
    }

    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
        width: var(--suopu-main-width-tablet, 520px);
        height: calc(var(--suopu-thumb-height-tablet, 64px) + 24px);
    }

    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
        width: calc(var(--suopu-main-width-tablet, 520px) - var(--suopu-thumb-arrow-space, 68px));
        height: var(--suopu-thumb-height-tablet, 64px);
    }

    .gallery-skin-marketplace.thumbs-position-bottom.no-thumb-arrows .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace.thumbs-position-bottom.thumbs-no-overflow .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace.thumbs-position-bottom .thumbs-no-overflow.product-gallery-thumbs-viewport {
        width: var(--suopu-main-width-tablet, 520px);
    }

    .gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .gallery-skin-marketplace .thumb-container,
    .gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-tablet, 64px) !important;
        height: var(--suopu-thumb-height-tablet, 64px) !important;
        min-width: var(--suopu-thumb-width-tablet, 64px) !important;
        min-height: var(--suopu-thumb-height-tablet, 64px) !important;
        max-width: var(--suopu-thumb-width-tablet, 64px) !important;
        max-height: var(--suopu-thumb-height-tablet, 64px) !important;
    }
}

@media (max-width: 767px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-mobile, auto);
        max-width: 100%;
    }

    .gallery-skin-marketplace .product-gallery-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: var(--suopu-gallery-gap-mobile, 10px) !important;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-mobile, 100%);
        max-width: 100%;
        height: var(--suopu-main-height-mobile, 360px);
    }

    .gallery-skin-marketplace .product-gallery-thumbs-shell {
        width: 100% !important;
        max-width: 100%;
        height: calc(var(--suopu-thumb-height-mobile, 64px) + 24px) !important;
        display: flex;
        align-items: center;
        position: relative;
    }

    .gallery-skin-marketplace .product-gallery-thumbs-viewport {
        width: calc(100% - var(--suopu-thumb-arrow-space, 68px)) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        margin: 0 auto;
        overflow: hidden;
    }

    .gallery-skin-marketplace.no-thumb-arrows .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace.thumbs-no-overflow .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace .thumbs-no-overflow.product-gallery-thumbs-viewport {
        width: 100% !important;
    }

    .gallery-skin-marketplace .thumb-button-prev,
    .gallery-skin-marketplace .thumb-button-next {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .gallery-skin-marketplace .thumb-button-prev {
        left: 0;
    }

    .gallery-skin-marketplace .thumb-button-next {
        right: 0;
    }

    .gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .gallery-skin-marketplace .thumb-container,
    .gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-mobile, 64px) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        min-width: var(--suopu-thumb-width-mobile, 64px) !important;
        min-height: var(--suopu-thumb-height-mobile, 64px) !important;
        max-width: var(--suopu-thumb-width-mobile, 64px) !important;
        max-height: var(--suopu-thumb-height-mobile, 64px) !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;
}

/* ============================================================================
 * Marketplace / Alibaba-like product gallery skin (rebuilt)
 *
 * Structure: .product-gallery-wrapper(.position-left|.position-bottom)
 *   .product-gallery-thumbs-shell
 *     .thumb-button-prev
 *     .product-gallery-thumbs-viewport.swiper.product-gallery-thumbs (Swiper target)
 *       .swiper-wrapper > .swiper-slide > .thumb-container > img
 *     .thumb-button-next
 *   .product-gallery-main.swiper
 *
 * left and bottom share the same HTML; only flex direction differs.
 * ========================================================================== */
.product-gallery-container.gallery-skin-marketplace {
    max-width: none;
    width: var(--suopu-gallery-width-desktop, auto);
    margin: 0;
    --suopu-thumb-arrow-size: 28px;
}

/* ---- Wrapper layout: left ---- */
.gallery-skin-marketplace.thumbs-position-left .product-gallery-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

/* ---- Wrapper layout: bottom ---- */
.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

/* ---- Main image canvas ---- */
.product-gallery-container.gallery-skin-marketplace .product-gallery-main {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: var(--suopu-main-height-desktop, 600px);
    aspect-ratio: var(--suopu-main-aspect-ratio, 1 / 1);
    background: var(--suopu-image-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide {
    height: 100% !important;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--suopu-image-stage-bg, #f5f5f5);
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage,
.product-gallery-container.gallery-skin-marketplace .zoom-container,
.product-gallery-container.gallery-skin-marketplace .video-container {
    width: 100%;
    height: 100%;
    background: var(--suopu-image-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage > a,
.product-gallery-container.gallery-skin-marketplace .zoom-container > a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main img,
.product-gallery-container.gallery-skin-marketplace .main-image,
.product-gallery-container.gallery-skin-marketplace .product-video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

/* ---- Thumb shell + viewport: left ---- */
.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px);
    height: var(--suopu-main-height-desktop, 600px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: calc(var(--suopu-main-height-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    overflow: hidden;
}

.gallery-skin-marketplace.thumbs-position-left.no-thumb-arrows .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-left .thumbs-no-overflow.product-gallery-thumbs-viewport {
    height: var(--suopu-main-height-desktop, 600px);
}

/* ---- Thumb shell + viewport: bottom ---- */
.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: calc(var(--suopu-thumb-height-desktop, 70px) + 24px);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
    width: calc(var(--suopu-main-width-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    height: var(--suopu-thumb-height-desktop, 70px);
    overflow: hidden;
    margin: 0 auto;
}

.gallery-skin-marketplace.thumbs-position-bottom.no-thumb-arrows .product-gallery-thumbs-viewport,
.gallery-skin-marketplace.thumbs-position-bottom .thumbs-no-overflow.product-gallery-thumbs-viewport {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
}

/* The viewport is the Swiper element; reset legacy thumb chrome. */
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-wrapper {
    align-items: center;
}

/* ---- Fixed-size thumbnail slides (never stretched by Swiper) ---- */
.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    box-sizing: border-box;
    opacity: 1;
}

/* ---- Thumbnail box + image ---- */
.gallery-skin-marketplace .thumb-container,
.gallery-skin-marketplace .suopu-gallery-thumb {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: var(--suopu-thumb-height-desktop, 70px);
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

.gallery-skin-marketplace .thumb-container img,
.gallery-skin-marketplace .suopu-gallery-thumb-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    display: block;
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
}

/* aspect-ratio thumbs in marketplace must stay inside the fixed box, not use padding hacks. */
.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    position: relative !important;
}

.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ---- Active / hover thumbnail state ---- */
.gallery-skin-marketplace .swiper-slide-thumb-active .thumb-container,
.gallery-skin-marketplace .swiper-slide-thumb-active .suopu-gallery-thumb,
.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide:hover .thumb-container {
    border-color: #ff6a00;
    box-shadow: 0 0 0 1px #ff6a00 inset;
}

/* ---- Main image arrows ---- */
.gallery-skin-marketplace .main-button-next,
.gallery-skin-marketplace .main-button-prev,
.gallery-skin-marketplace .product-gallery-main .swiper-button-next,
.gallery-skin-marketplace .product-gallery-main .swiper-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    border: 1px solid rgba(0, 0, 0, .08);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
    transition: all .2s ease;
}

.gallery-skin-marketplace .main-button-next:hover,
.gallery-skin-marketplace .main-button-prev:hover,
.gallery-skin-marketplace .product-gallery-main .swiper-button-next:hover,
.gallery-skin-marketplace .product-gallery-main .swiper-button-prev:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .24);
}

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

/* ---- Thumb arrows (shared base) ---- */
.gallery-skin-marketplace .thumb-button-prev,
.gallery-skin-marketplace .thumb-button-next {
    position: absolute;
    width: var(--suopu-thumb-arrow-size, 28px);
    height: var(--suopu-thumb-arrow-size, 28px);
    margin: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    border: 1px solid rgba(0, 0, 0, .08);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.gallery-skin-marketplace .thumb-button-prev:hover,
.gallery-skin-marketplace .thumb-button-next:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}

.gallery-skin-marketplace .thumb-button-prev:after,
.gallery-skin-marketplace .thumb-button-next:after {
    font-family: swiper-icons;
    font-size: 12px;
    font-weight: 700;
}

.gallery-skin-marketplace .thumb-button-prev:after {
    content: 'prev';
}

.gallery-skin-marketplace .thumb-button-next:after {
    content: 'next';
}

/* ---- Thumb arrows: left (top / bottom, horizontally centered) ---- */
.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev {
    top: 0 !important;
    bottom: auto !important;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    bottom: 0 !important;
    top: auto !important;
    top: auto;
}

/* ---- Thumb arrows: bottom (left / right, vertically centered) ---- */
.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev {
    left: 0 !important;
    right: auto !important;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    right: 0 !important;
    left: auto !important;
}

/* ---- Hide arrows when nothing overflows ---- */
.gallery-skin-marketplace .swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-prev,
.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-next,
.gallery-skin-marketplace .thumbs-no-overflow .thumb-button-prev,
.gallery-skin-marketplace .thumbs-no-overflow .thumb-button-next {
    display: none;
}

/* ---- Play icons ---- */
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-play-icon,
.product-gallery-container.gallery-skin-marketplace .video-icon {
    width: 28px;
    height: 28px;
    background: rgba(17, 24, 39, .72);
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-main-play-icon,
.product-gallery-container.gallery-skin-marketplace .play-button {
    width: 72px;
    height: 72px;
    background: rgba(17, 24, 39, .55);
}

/* ---- Tablet ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-tablet, auto);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-wrapper,
    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-wrapper {
        gap: var(--suopu-gallery-gap-tablet, 12px);
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-tablet, 520px);
        height: var(--suopu-main-height-tablet, 520px);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
        width: calc(var(--suopu-thumb-width-tablet, 64px) + 24px);
        height: var(--suopu-main-height-tablet, 520px);
    }

    .gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
        width: var(--suopu-thumb-width-tablet, 64px);
        height: calc(var(--suopu-main-height-tablet, 520px) - var(--suopu-thumb-arrow-space, 68px));
    }

    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
        width: var(--suopu-main-width-tablet, 520px);
        height: calc(var(--suopu-thumb-height-tablet, 64px) + 24px);
    }

    .gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
        width: calc(var(--suopu-main-width-tablet, 520px) - var(--suopu-thumb-arrow-space, 68px));
        height: var(--suopu-thumb-height-tablet, 64px);
    }

    .gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .gallery-skin-marketplace .thumb-container,
    .gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-tablet, 64px) !important;
        height: var(--suopu-thumb-height-tablet, 64px) !important;
        min-width: var(--suopu-thumb-width-tablet, 64px) !important;
        min-height: var(--suopu-thumb-height-tablet, 64px) !important;
        max-width: var(--suopu-thumb-width-tablet, 64px) !important;
        max-height: var(--suopu-thumb-height-tablet, 64px) !important;
    }
}

/* ---- Mobile (always bottom strip) ---- */
@media (max-width: 767px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-mobile, auto);
        max-width: 100%;
    }

    .gallery-skin-marketplace .product-gallery-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: var(--suopu-gallery-gap-mobile, 10px) !important;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-mobile, 100%);
        max-width: 100%;
        height: var(--suopu-main-height-mobile, 360px);
        order: 1;
    }

    .gallery-skin-marketplace .product-gallery-thumbs-shell {
        order: 2;
        width: 100% !important;
        max-width: 100%;
        height: calc(var(--suopu-thumb-height-mobile, 64px) + 24px) !important;
        display: flex;
        align-items: center;
        position: relative;
    }

    .gallery-skin-marketplace .product-gallery-thumbs-viewport {
        width: calc(100% - var(--suopu-thumb-arrow-space, 68px)) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        margin: 0 auto;
        overflow: hidden;
    }

    .gallery-skin-marketplace.no-thumb-arrows .product-gallery-thumbs-viewport,
    .gallery-skin-marketplace .thumbs-no-overflow.product-gallery-thumbs-viewport {
        width: 100% !important;
    }

    .gallery-skin-marketplace .thumb-button-prev,
    .gallery-skin-marketplace .thumb-button-next {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .gallery-skin-marketplace .thumb-button-prev {
        left: 0;
    }

    .gallery-skin-marketplace .thumb-button-next {
        right: 0;
    }

    .gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .gallery-skin-marketplace .thumb-container,
    .gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-mobile, 64px) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        min-width: var(--suopu-thumb-width-mobile, 64px) !important;
        min-height: var(--suopu-thumb-height-mobile, 64px) !important;
        max-width: var(--suopu-thumb-width-mobile, 64px) !important;
        max-height: var(--suopu-thumb-height-mobile, 64px) !important;
    }
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-left,
.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-right {
    display: flex;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-media,
.product-gallery-container.gallery-skin-marketplace .zoom-container,
.product-gallery-container.gallery-skin-marketplace .video-container {
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main {
    max-width: none;
    width: var(--suopu-main-width-desktop, 600px);
    height: var(--suopu-main-height-desktop, 600px);
    aspect-ratio: var(--suopu-main-aspect-ratio, 1 / 1);
    background: var(--suopu-image-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 var(--suopu-main-width-desktop, 600px);
    min-width: 0;
    overflow: hidden;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide {
    background: var(--suopu-image-stage-bg, #f5f5f5);
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-wrapper {
    height: 100% !important;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage,
.product-gallery-container.gallery-skin-marketplace .zoom-container,
.product-gallery-container.gallery-skin-marketplace .video-container {
    min-height: 0;
    height: 100%;
    width: 100%;
    background: var(--suopu-image-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage > a,
.product-gallery-container.gallery-skin-marketplace .zoom-container > a,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-image a,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-video,
.product-gallery-container.gallery-skin-marketplace .video-container > div[class*="-player"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main img,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage img,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-media img,
.product-gallery-container.gallery-skin-marketplace .main-image,
.product-gallery-container.gallery-skin-marketplace .product-video,
.product-gallery-container.gallery-skin-marketplace .video-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    display: block;
    background: var(--suopu-image-stage-bg, #f5f5f5);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs {
    background: transparent;
    padding: 0;
    margin: 0;
}

.product-gallery-container.gallery-skin-marketplace .left-thumbs,
.product-gallery-container.gallery-skin-marketplace .right-thumbs {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px) !important;
    min-width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px) !important;
    max-width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px) !important;
    height: var(--suopu-thumbs-strip-height, var(--suopu-main-height-desktop, 600px)) !important;
    max-height: var(--suopu-thumbs-strip-height, var(--suopu-main-height-desktop, 600px)) !important;
    padding: var(--suopu-thumbs-arrow-pad, 34px) 6px;
    background: transparent;
    box-sizing: border-box;
    flex: 0 0 calc(var(--suopu-thumb-width-desktop, 70px) + 24px);
    overflow: hidden;
    position: relative;
}

/* No vertical arrows → no need to reserve the top/bottom arrow strip. */
.product-gallery-container.gallery-skin-marketplace.no-thumb-arrows .left-thumbs,
.product-gallery-container.gallery-skin-marketplace.no-thumb-arrows .right-thumbs,
.product-gallery-container.gallery-skin-marketplace .thumbs-no-overflow.left-thumbs,
.product-gallery-container.gallery-skin-marketplace .thumbs-no-overflow.right-thumbs {
    --suopu-thumbs-arrow-pad: 0px;
}

.product-gallery-container.gallery-skin-marketplace .bottom-thumbs,
.product-gallery-container.gallery-skin-marketplace .top-thumbs {
    margin-top: 12px;
    padding: 0 36px;
    max-width: none;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-wrapper {
    align-items: center;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    flex: 0 0 var(--suopu-thumb-width-desktop, 70px) !important;
    opacity: 1;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs .swiper-slide,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .product-gallery-thumbs .swiper-slide,
.product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-slide,
.product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    flex: 0 0 var(--suopu-thumb-height-desktop, 70px) !important;
    flex-basis: var(--suopu-thumb-height-desktop, 70px) !important;
    /* Only the top/side margins are zeroed; Swiper owns margin-bottom (spaceBetween)
       so the vertical track stays in sync with the fixed-height slides (no drift). */
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide-thumb-active,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide:hover {
    border-color: #ff6a00;
    box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.2);
}

.product-gallery-container.gallery-skin-marketplace .swiper-slide-thumb-active .suopu-gallery-thumb,
.product-gallery-container.gallery-skin-marketplace .swiper-slide-thumb-active .thumb-container {
    border-color: #ff6a00;
    box-shadow: 0 0 0 1px #ff6a00 inset;
}

.product-gallery-container.gallery-skin-marketplace .thumb-container,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb {
    width: 100%;
    height: 100%;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .thumb-container img,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    display: block;
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio="1:1"] .thumb-container,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio="5:4"] .thumb-container,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio="4:5"] .thumb-container,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio="4:3"] .thumb-container,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio="3:4"] .thumb-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 4px !important;
    padding-bottom: 4px !important;
    aspect-ratio: auto !important;
    position: relative !important;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio] .thumb-container img,
.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide[data-aspect-ratio] .suopu-gallery-thumb-image {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-play-icon,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-main-play-icon,
.product-gallery-container.gallery-skin-marketplace .video-icon,
.product-gallery-container.gallery-skin-marketplace .play-button {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-play-icon,
.product-gallery-container.gallery-skin-marketplace .video-icon {
    width: 28px;
    height: 28px;
    background: rgba(17, 24, 39, 0.72);
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-play-icon:before,
.product-gallery-container.gallery-skin-marketplace .video-icon:before {
    border-width: 7px 0 7px 11px;
    margin-left: 3px;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-main-play-icon,
.product-gallery-container.gallery-skin-marketplace .play-button {
    width: 72px;
    height: 72px;
    background: rgba(17, 24, 39, 0.55);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-button-next,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-button-prev {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-button-next:hover,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-button-prev:hover {
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
    transform: scale(1.04);
}

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

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-next,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-next {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
    color: #111;
    border: 1px solid rgba(0, 0, 0, 0.08);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0;
    transition: background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev:hover,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-next:hover,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-prev:hover,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-next:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

.product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-button-next,
.product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-button-next {
    bottom: 0;
    top: auto;
}

.product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-button-prev,
.product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-button-prev {
    top: 0;
    bottom: auto;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev:after,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-next:after,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-prev:after,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-right .thumb-button-next:after {
    font-size: 12px;
    font-weight: 700;
}

.product-gallery-container.gallery-skin-marketplace .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-button-disabled,
.product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-button-disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.product-gallery-container.gallery-skin-marketplace .thumbs-no-overflow .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace .thumbs-no-overflow .thumb-button-next {
    display: none;
}

@media (min-width: 1024px) {
    .product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-left .product-gallery-main,
    .product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-right .product-gallery-main {
        min-height: 0;
    }

    .product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-slide,
    .product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-slide {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .product-gallery-container.gallery-skin-marketplace {
        padding: 0;
        max-width: 100%;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-mobile, 100%) !important;
        max-width: 100% !important;
        height: var(--suopu-main-height-mobile, 360px) !important;
        min-height: 0;
        aspect-ratio: var(--suopu-main-aspect-ratio, auto);
    }

    .product-gallery-container.gallery-skin-marketplace .left-thumbs,
    .product-gallery-container.gallery-skin-marketplace .right-thumbs,
    .product-gallery-container.gallery-skin-marketplace .bottom-thumbs {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        padding: 10px 30px !important;
        margin-top: 12px !important;
    }

    .product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-slide,
    .product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-slide,
    .product-gallery-container.gallery-skin-marketplace .bottom-thumbs .swiper-slide {
        width: var(--suopu-thumb-width-mobile, 64px) !important;
        min-width: var(--suopu-thumb-width-mobile, 64px) !important;
        max-width: var(--suopu-thumb-width-mobile, 64px) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        min-height: var(--suopu-thumb-height-mobile, 64px) !important;
        max-height: var(--suopu-thumb-height-mobile, 64px) !important;
        flex-basis: var(--suopu-thumb-width-mobile, 64px) !important;
    }

    .product-gallery-container.gallery-skin-marketplace .left-thumbs .swiper-wrapper,
    .product-gallery-container.gallery-skin-marketplace .right-thumbs .swiper-wrapper,
    .product-gallery-container.gallery-skin-marketplace .bottom-thumbs .swiper-wrapper {
        align-items: center;
    }
}

/* Marketplace final overrides must stay at EOF so legacy marketplace rules above cannot win. */
.product-gallery-container.gallery-skin-marketplace {
    width: var(--suopu-gallery-width-desktop, auto);
    max-width: none;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-left {
    display: flex;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper.position-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--suopu-gallery-gap-desktop, 16px);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: var(--suopu-main-height-desktop, 600px);
    aspect-ratio: var(--suopu-main-aspect-ratio, 1 / 1);
    background: var(--suopu-image-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-wrapper,
.product-gallery-container.gallery-skin-marketplace .product-gallery-main .swiper-slide {
    height: 100% !important;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage,
.product-gallery-container.gallery-skin-marketplace .zoom-container,
.product-gallery-container.gallery-skin-marketplace .video-container {
    width: 100%;
    height: 100%;
    background: var(--suopu-image-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .suopu-gallery-stage > a,
.product-gallery-container.gallery-skin-marketplace .zoom-container > a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-main img,
.product-gallery-container.gallery-skin-marketplace .main-image,
.product-gallery-container.gallery-skin-marketplace .product-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px);
    height: var(--suopu-main-height-desktop, 600px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: calc(var(--suopu-main-height-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    overflow: hidden;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left.no-thumb-arrows .product-gallery-thumbs-viewport,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left.thumbs-no-overflow .product-gallery-thumbs-viewport,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumbs-no-overflow.product-gallery-thumbs-viewport {
    height: var(--suopu-main-height-desktop, 600px);
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
    width: var(--suopu-main-width-desktop, 600px);
    max-width: 100%;
    height: calc(var(--suopu-thumb-height-desktop, 70px) + 24px);
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
    width: calc(var(--suopu-main-width-desktop, 600px) - var(--suopu-thumb-arrow-space, 68px));
    height: var(--suopu-thumb-height-desktop, 70px);
    overflow: hidden;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom.no-thumb-arrows .product-gallery-thumbs-viewport,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom.thumbs-no-overflow .product-gallery-thumbs-viewport,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .thumbs-no-overflow.product-gallery-thumbs-viewport {
    width: var(--suopu-main-width-desktop, 600px);
}

.product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    box-sizing: border-box;
    border: 0 !important;
    background: transparent;
}

.product-gallery-container.gallery-skin-marketplace .thumb-container,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb {
    width: var(--suopu-thumb-width-desktop, 70px);
    height: var(--suopu-thumb-height-desktop, 70px);
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
}

.product-gallery-container.gallery-skin-marketplace .thumb-container img,
.product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
    display: block;
}

.product-gallery-container.gallery-skin-marketplace .swiper-slide-thumb-active .thumb-container,
.product-gallery-container.gallery-skin-marketplace .swiper-slide-thumb-active .suopu-gallery-thumb {
    border-color: #ff6a00;
    box-shadow: 0 0 0 1px #ff6a00 inset;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev {
    top: 0;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    bottom: 0;
    top: auto;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev {
    left: 0;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    right: 0;
}

.product-gallery-container.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-prev,
.product-gallery-container.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-next {
    display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-tablet, auto);
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-tablet, 520px);
        height: var(--suopu-main-height-tablet, 520px);
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .product-gallery-container.gallery-skin-marketplace .thumb-container,
    .product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-tablet, 64px) !important;
        height: var(--suopu-thumb-height-tablet, 64px) !important;
        min-width: var(--suopu-thumb-width-tablet, 64px) !important;
        min-height: var(--suopu-thumb-height-tablet, 64px) !important;
        max-width: var(--suopu-thumb-width-tablet, 64px) !important;
        max-height: var(--suopu-thumb-height-tablet, 64px) !important;
    }
}

@media (max-width: 767px) {
    .product-gallery-container.gallery-skin-marketplace {
        width: var(--suopu-gallery-width-mobile, auto);
        max-width: 100%;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: var(--suopu-gallery-gap-mobile, 10px) !important;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-main {
        width: var(--suopu-main-width-mobile, 100%);
        max-width: 100%;
        height: var(--suopu-main-height-mobile, 360px);
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs-shell {
        width: 100% !important;
        max-width: 100%;
        height: calc(var(--suopu-thumb-height-mobile, 64px) + 24px) !important;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs-viewport {
        width: calc(100% - var(--suopu-thumb-arrow-space, 68px)) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        margin: 0 auto;
    }

    .product-gallery-container.gallery-skin-marketplace.no-thumb-arrows .product-gallery-thumbs-viewport,
    .product-gallery-container.gallery-skin-marketplace.thumbs-no-overflow .product-gallery-thumbs-viewport,
    .product-gallery-container.gallery-skin-marketplace .thumbs-no-overflow.product-gallery-thumbs-viewport {
        width: 100% !important;
    }

    .product-gallery-container.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide,
    .product-gallery-container.gallery-skin-marketplace .thumb-container,
    .product-gallery-container.gallery-skin-marketplace .suopu-gallery-thumb {
        width: var(--suopu-thumb-width-mobile, 64px) !important;
        height: var(--suopu-thumb-height-mobile, 64px) !important;
        min-width: var(--suopu-thumb-width-mobile, 64px) !important;
        min-height: var(--suopu-thumb-height-mobile, 64px) !important;
        max-width: var(--suopu-thumb-width-mobile, 64px) !important;
        max-height: var(--suopu-thumb-height-mobile, 64px) !important;
    }
}

/* Suopu marketplace thumb grid final pass: shell / viewport / arrows / gaps. */
.product-gallery-container.gallery-skin-marketplace {
    --suopu-thumb-arrow-size: 28px;
    --suopu-thumb-arrow-gap: 3px;
    --suopu-thumb-arrow-space: 62px;
    --suopu-thumb-gap-desktop: 8px;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px) !important;
    height: var(--suopu-main-height-desktop, 600px) !important;
    display: grid !important;
    grid-template-rows: var(--suopu-thumb-arrow-size, 28px) 1fr var(--suopu-thumb-arrow-size, 28px);
    row-gap: var(--suopu-thumb-arrow-gap, 3px);
    align-items: center;
    justify-items: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumbs-viewport-height, 538px) !important;
    overflow: hidden;
    align-self: center;
    justify-self: center;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
    width: var(--suopu-main-width-desktop, 600px) !important;
    max-width: 100%;
    height: calc(var(--suopu-thumb-height-desktop, 70px) + 6px) !important;
    display: grid !important;
    grid-template-columns: var(--suopu-thumb-arrow-size, 28px) 1fr var(--suopu-thumb-arrow-size, 28px);
    column-gap: var(--suopu-thumb-arrow-gap, 3px);
    align-items: center;
    justify-items: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
    width: var(--suopu-thumbs-viewport-width, 538px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    overflow: hidden;
    align-self: center;
    justify-self: center;
}

.gallery-skin-marketplace.no-thumb-arrows.thumbs-position-left .product-gallery-thumbs-shell,
.gallery-skin-marketplace.thumbs-no-overflow.thumbs-position-left .product-gallery-thumbs-shell {
    grid-template-rows: 1fr;
}

.gallery-skin-marketplace.no-thumb-arrows.thumbs-position-bottom .product-gallery-thumbs-shell,
.gallery-skin-marketplace.thumbs-no-overflow.thumbs-position-bottom .product-gallery-thumbs-shell {
    grid-template-columns: 1fr;
}

.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    box-sizing: border-box;
}

.gallery-skin-marketplace .thumb-container,
.gallery-skin-marketplace .suopu-gallery-thumb {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    background: var(--suopu-thumb-stage-bg, #f5f5f5);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-skin-marketplace .suopu-gallery-thumb-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center;
}

.gallery-skin-marketplace .product-gallery-thumbs-shell .thumb-button-prev,
.gallery-skin-marketplace .product-gallery-thumbs-shell .thumb-button-next {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
    width: var(--suopu-thumb-arrow-size, 28px);
    height: var(--suopu-thumb-arrow-size, 28px);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    border: 1px solid rgba(0,0,0,.08);
    color: #111;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev::after {
    content: "▲" !important;
    font-size: 12px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-next::after {
    content: "▼" !important;
    font-size: 12px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev::after {
    content: "‹" !important;
    font-size: 24px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next::after {
    content: "›" !important;
    font-size: 24px !important;
    line-height: 1;
}

.gallery-skin-marketplace .thumb-button-prev.swiper-button-disabled,
.gallery-skin-marketplace .thumb-button-next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-prev,
.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-next {
    display: none !important;
}

/* Suopu marketplace thumb floating arrows final pass. */
.product-gallery-container.gallery-skin-marketplace {
    --suopu-thumb-arrow-size: 28px;
    --suopu-thumb-gap-desktop: 8px;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-shell {
    width: calc(var(--suopu-thumb-width-desktop, 70px) + 24px) !important;
    height: var(--suopu-main-height-desktop, 600px) !important;
    display: block !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-left .product-gallery-thumbs-viewport {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-main-height-desktop, 600px) !important;
    overflow: hidden;
    margin: 0 auto;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-shell {
    width: var(--suopu-main-width-desktop, 600px) !important;
    max-width: 100%;
    height: calc(var(--suopu-thumb-height-desktop, 70px) + 12px) !important;
    display: block !important;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-bottom .product-gallery-thumbs-viewport {
    width: var(--suopu-main-width-desktop, 600px) !important;
    max-width: 100%;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    overflow: hidden;
}

.gallery-skin-marketplace .product-gallery-thumbs .swiper-slide {
    width: var(--suopu-thumb-width-desktop, 70px) !important;
    height: var(--suopu-thumb-height-desktop, 70px) !important;
    min-width: var(--suopu-thumb-width-desktop, 70px) !important;
    min-height: var(--suopu-thumb-height-desktop, 70px) !important;
    max-width: var(--suopu-thumb-width-desktop, 70px) !important;
    max-height: var(--suopu-thumb-height-desktop, 70px) !important;
    box-sizing: border-box;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 20;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev {
    top: 0 !important;
    bottom: auto !important;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-next {
    bottom: 0 !important;
    top: auto !important;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev,
.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    z-index: 20;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev {
    left: 0 !important;
    right: auto !important;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next {
    right: 0 !important;
    left: auto !important;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-prev::after {
    content: "▲" !important;
    font-size: 12px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-left .thumb-button-next::after {
    content: "▼" !important;
    font-size: 12px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-prev::after {
    content: "‹" !important;
    font-size: 24px !important;
    line-height: 1;
}

.gallery-skin-marketplace.thumbs-position-bottom .thumb-button-next::after {
    content: "›" !important;
    font-size: 24px !important;
    line-height: 1;
}

.gallery-skin-marketplace .thumb-button-prev.swiper-button-disabled,
.gallery-skin-marketplace .thumb-button-next.swiper-button-disabled {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-prev,
.gallery-skin-marketplace.thumbs-no-overflow .thumb-button-next {
    display: none !important;
    pointer-events: none !important;
}