.elementor-33818 .elementor-element.elementor-element-cc643d6{--display:flex;--min-height:502px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33818 .elementor-element.elementor-element-eb25c03{--display:flex;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33818 .elementor-element.elementor-element-bd09cda{--display:flex;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-33818 .elementor-element.elementor-element-b430b07 > .elementor-widget-container{margin:0px 0px 0100px 0px;}.elementor-33818 .elementor-element.elementor-element-b430b07.elementor-element{--align-self:center;}.elementor-33818 .elementor-element.elementor-element-0e784df > .elementor-widget-container{margin:0px 0px 50px 0px;}.elementor-33818 .elementor-element.elementor-element-0e784df.elementor-element{--align-self:center;}.elementor-33818 .elementor-element.elementor-element-3ab54b3 > .elementor-widget-container{margin:100px 0px 100px 0px;}.elementor-33818 .elementor-element.elementor-element-3ab54b3.elementor-element{--align-self:center;}.elementor-33818 .elementor-element.elementor-element-f43475f > .elementor-widget-container{margin:100px 0px 0px 0px;}.elementor-33818 .elementor-element.elementor-element-f43475f.elementor-element{--align-self:center;}.elementor-33818 .elementor-element.elementor-element-f43475f .cart button, .elementor-33818 .elementor-element.elementor-element-f43475f .cart .button{transition:all 0.2s;}.elementor-33818 .elementor-element.elementor-element-f43475f .quantity .qty{transition:all 0.2s;}.elementor-33818 .elementor-element.elementor-element-c5a2823{--display:flex;--background-transition:0.3s;}.elementor-33818 .elementor-element.elementor-element-155f736{--display:flex;--background-transition:0.3s;}@media(min-width:768px){.elementor-33818 .elementor-element.elementor-element-eb25c03{--width:100%;}.elementor-33818 .elementor-element.elementor-element-bd09cda{--width:100%;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-75835f1 */@media(min-width:768px){
#test_gallery{
/*
 * ===================================================================
 * 新增CSS：产品详情页 - 缩略图左侧垂直布局
 * 将此代码块添加到您现有CSS的末尾。
 * ===================================================================
*/

/* 1. 将主画廊容器设置为Flex布局，让主图和缩略图可以并排 */
.woocommerce-product-gallery {
    display: flex;
    flex-direction: row; /* 设置主轴为水平方向 */
}

/* 2. 设置缩略图导航（左侧栏）的样式 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    /* --- 关键布局修改 --- */
    order: 1; /* 设置顺序为1，让它显示在左边 */
    flex-direction: column; /* CRITICAL: 让列表项垂直排列 */
    
    /* --- 尺寸和间距 --- */
    flex-basis: 15%; /* 设置缩略图栏的基础宽度，可根据喜好调整 */
    max-width: 100px; /* 设置一个最大宽度，防止过宽 */
    margin-right: 1em; /* 在缩略图和主图之间创建间距 */
    
    /* --- 覆盖您之前的水平滚动设置 --- */
    overflow-x: hidden !important; /* 禁用水平滚动 */
    overflow-y: auto !important;   /* 启用垂直滚动 */
    
    /* --- 其他样式重置 --- */
    padding: 0;
    list-style: none;
}

/* 3. 设置缩略图列表项 `<li>` 的样式 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
    /* --- 覆盖您之前的网格布局设置 --- */
    flex: 0 0 auto !important; /* 高度自适应，不收缩不拉伸 */
    width: 100% !important; /* 宽度占满缩略图栏 */
    margin-right: 0 !important; /* 移除之前的右边距 */
    margin-bottom: 8px; /* 添加新的下边距作为间隔 */
    
    /* --- 边框和对齐 --- */
    border: 1px solid transparent; /* 默认边框透明 */
    border-right: none !important; /* 移除之前的右边框 */
    box-sizing: border-box;
    transition: border-color 0.2s; /* 添加边框颜色过渡效果 */
}

/* 4. 设置当前激活的缩略图样式 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img.flex-active {
    border: 1px solid #a40201; /* 用您的主题色高亮激活的缩略图 */
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}

/* 5. 确保缩略图图片充满其容器 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px; /* 可选：给缩略图加一点圆角 */
}

/* 6. 设置主图区域（右侧栏） */
.woocommerce-product-gallery .flex-viewport {
    order: 2; /* 设置顺序为2，让它显示在右边 */
    width: 100%; /* 宽度占满剩余空间 */
}



/*
 * ===================================================================
 * 新增CSS：限制左侧缩略图显示数量为5个，并隐藏滚动条
 * ===================================================================
*/

/* --- 选中缩略图导航容器 --- */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {

    /* 1. 设置一个最大高度，使其视觉上大约能容纳5个缩略图。
       这是一个估算值，约等于 5 * (单个缩略图的高度 + 下边距)。
       如果您的缩略图尺寸或间距不同，您可以微调这个像素值，
       直到它看起来正好显示5个。*/
    max-height: 500px; 

    /* --- 2. 隐藏滚动条的核心代码 --- */

    /* a. 适用于 Firefox */
    scrollbar-width: none;

    /* b. 适用于 IE 和 Edge (旧版) */
    -ms-overflow-style: none;
}

/* c. 适用于 Chrome, Safari, Edge (新版) 等 Webkit 内核浏览器 */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}
}}/* End custom CSS */