/* 产品画廊样式优化 */

/* 1. 产品导航隐藏 - 客户要求 2025.10 */
/* 恢复显示：删除此段CSS */
.product-navigation-wrapper {
    display: none !important;

}


.my-thumb-carousel {
    order: 2 !important; /* 缩略图在后 */
    margin-top: 15px !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 40px !important; /* 为按钮留出空间 */
}


.my-thumb-carousel .flex-direction-nav {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    pointer-events: none !important; /* 避免遮挡点击 */
}

.my-thumb-carousel .flex-direction-nav a {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    pointer-events: all !important; /* 恢复按钮点击 */
    z-index: 10 !important;
}

.my-thumb-carousel .flex-direction-nav a:hover {
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    border-color: #999 !important;
}

/* 箭头图标 */
.my-thumb-carousel .flex-direction-nav a:before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 8px !important;
    height: 8px !important;
    border: solid #333 !important;
    border-width: 2px 2px 0 0 !important;
    transform: translate(-50%, -50%) !important;
}

.my-thumb-carousel .flex-direction-nav .flex-prev {
    left: 0 !important;
    right: auto !important;
}

.my-thumb-carousel .flex-direction-nav .flex-prev:before {
    transform: translate(-50%, -50%) rotate(-135deg) !important;
}

.my-thumb-carousel .flex-direction-nav .flex-next {
    right: 0 !important;
    left: auto !important;
}

.my-thumb-carousel .flex-direction-nav .flex-next:before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* 确保缩略图内容区域正常 */
.my-thumb-carousel .flex-viewport {
    margin: 0 !important;
    padding: 0 !important;
}

.my-thumb-carousel .slides {
    margin: 0 !important;
    padding: 0 !important;
}


/* 确保缩略图在正确位置 */
.woocommerce-product-gallery {
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce-product-gallery .flex-viewport {
    order: 1 !important; /* 主幻灯片在前 */
}

/* 清除可能的浮动影响 */
.woocommerce-product-gallery::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* 统一缩略图尺寸 */
.my-thumb-carousel .thumb-slide img {
    width: calc(100vh * 0.173 * 1.7) !important; /* 244.8px */
    height: calc(100vh * 0.173) !important;      /* 144px */
    object-fit: fill !important;                 /* 保持拉伸填充 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .my-thumb-carousel .thumb-slide img {
        width: calc(100vh * 0.15 * 1.7) !important;
        height: calc(100vh * 0.15) !important;
    }
}

/* 只选择作为 .woocommerce-product-gallery 直接子元素的 flex-viewport */
.woocommerce-product-gallery > .flex-viewport {
    width: 600px !important;
    height: 600px !important;
}

/* 只选择主图区域的图片 */
.woocommerce-product-gallery > .flex-viewport .woocommerce-product-gallery__image,
.woocommerce-product-gallery > .flex-viewport .woocommerce-product-gallery__image img {
    width: 600px !important;
    height: 600px !important;
    max-width: none !important;
}

/* 确保主图的 Zoom 容器匹配 */
.woocommerce-product-gallery .zoomContainer {
    width: 600px !important;
    height: 600px !important;
}

.woocommerce-product-gallery .zoomContainer .zoomWindow {
    width: 600px !important;
    height: 600px !important;
}