.elementor-273 .elementor-element.elementor-element-8a46145{--display:flex;--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;--padding-top:2%;--padding-bottom:2%;--padding-left:0%;--padding-right:0%;}.elementor-273 .elementor-element.elementor-element-7b47edb .woocommerce-breadcrumb{color:var( --e-global-color-primary );font-size:12px;}.elementor-273 .elementor-element.elementor-element-7b47edb .woocommerce-breadcrumb > a{color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-49a212f{--display:flex;--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 30px;--row-gap:0px;--column-gap:30px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-273 .elementor-element.elementor-element-c33fae6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper,
				.woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .flex-viewport, .woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .flex-control-thumbs img{border-style:none;}.woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .flex-viewport:not(:last-child){margin-bottom:24px;}.woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .flex-control-thumbs li{padding-right:calc(0px / 2);padding-left:calc(0px / 2);padding-bottom:0px;}.woocommerce .elementor-273 .elementor-element.elementor-element-d209ce9 .flex-control-thumbs{margin-right:calc(-0px / 2);margin-left:calc(-0px / 2);}.elementor-273 .elementor-element.elementor-element-6a68ebc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:14px 0px;--row-gap:14px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-273 .elementor-element.elementor-element-21506ff .elementor-heading-title{font-size:19px;color:#283455;}.woocommerce .elementor-273 .elementor-element.elementor-element-8ede02c .star-rating::before{color:#D6D4D1;}.woocommerce .elementor-273 .elementor-element.elementor-element-8ede02c .woocommerce-review-link{color:var( --e-global-color-primary );font-size:11px;}.woocommerce .elementor-273 .elementor-element.elementor-element-8ede02c .star-rating{font-size:0.7em;}.woocommerce:not(.rtl) .elementor-273 .elementor-element.elementor-element-8ede02c .star-rating{margin-right:0em;}.woocommerce.rtl .elementor-273 .elementor-element.elementor-element-8ede02c .star-rating{margin-left:0em;}.elementor-273 .elementor-element.elementor-element-5f91640{font-size:14px;color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-d13f8ab .cart button, .elementor-273 .elementor-element.elementor-element-d13f8ab .cart .button{text-transform:capitalize;padding:0px 50px 0px 50px;color:#283455;transition:all 0.2s;}.elementor-273 .elementor-element.elementor-element-d13f8ab{--view-cart-spacing:0px;--button-spacing:0px;}.elementor-273 .elementor-element.elementor-element-d13f8ab .quantity .qty{padding:2px 2px 2px 2px;transition:all 0.2s;}.elementor-273 .elementor-element.elementor-element-f9c8ffe:not(.elementor-woo-meta--view-inline) .product_meta .detail-container:not(:last-child){padding-bottom:calc(6px/2);}.elementor-273 .elementor-element.elementor-element-f9c8ffe:not(.elementor-woo-meta--view-inline) .product_meta .detail-container:not(:first-child){margin-top:calc(6px/2);}.elementor-273 .elementor-element.elementor-element-f9c8ffe.elementor-woo-meta--view-inline .product_meta .detail-container{margin-right:calc(6px/2);margin-left:calc(6px/2);}.elementor-273 .elementor-element.elementor-element-f9c8ffe.elementor-woo-meta--view-inline .product_meta{margin-right:calc(-6px/2);margin-left:calc(-6px/2);}body:not(.rtl) .elementor-273 .elementor-element.elementor-element-f9c8ffe.elementor-woo-meta--view-inline .detail-container:after{right:calc( (-6px/2) + (-1px/2) );}body:not.rtl .elementor-273 .elementor-element.elementor-element-f9c8ffe.elementor-woo-meta--view-inline .detail-container:after{left:calc( (-6px/2) - (1px/2) );}.elementor-273 .elementor-element.elementor-element-f9c8ffe{font-size:13px;font-weight:400;color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-f9c8ffe a{font-weight:400;color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-29a191fd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:13px 0px 0px 0px;border-style:solid;border-width:0.5px 0px 0px 0px;border-color:#C8D5DC;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title{border-width:0.5px;border-color:#E6E5E4;padding:0px 0px 18px 0px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-content{border-width:0.5px;border-bottom-color:#E6E5E4;color:var( --e-global-color-primary );font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;text-transform:none;font-style:normal;text-decoration:none;line-height:1.5em;letter-spacing:0.2px;padding:0px 50px 10px 0px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-item:not(:last-child){margin-bottom:18px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-title, .elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-icon{color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-icon svg{fill:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title.elementor-active a, .elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title.elementor-active .elementor-toggle-icon{color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-title{font-family:"Poppins", Sans-serif;font-size:14px;font-weight:600;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1em;letter-spacing:0px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title .elementor-toggle-icon i:before{color:#1C244B;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title .elementor-toggle-icon svg{fill:#1C244B;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title.elementor-active .elementor-toggle-icon i:before{color:#1C244B;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-title.elementor-active .elementor-toggle-icon svg{fill:#1C244B;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-icon.elementor-toggle-icon-left{margin-right:0px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-icon.elementor-toggle-icon-right{margin-left:0px;}.elementor-273 .elementor-element.elementor-element-b786e48{margin:12px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-273 .elementor-element.elementor-element-b786e48 .elementor-heading-title{font-size:14px;color:var( --e-global-color-primary );}.elementor-273 .elementor-element.elementor-element-30627e5{--swiper-slides-to-display:1;--swiper-slides-gap:0px;margin:7px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--arrow-size:19px;--arrow-normal-color:var( --e-global-color-primary );--arrow-hover-color:var( --e-global-color-primary );--swiper-pagination-spacing:33px;}.elementor-273 .elementor-element.elementor-element-30627e5 .swiper-slide > .elementor-element{height:100%;}.elementor-273 .elementor-element.elementor-element-30627e5 :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {border-style:none;padding:0px 0px 0px 0px;}.elementor-273 .elementor-element.elementor-element-30627e5 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:6px;--swiper-pagination-bullet-vertical-gap:6px;}.elementor-273 .elementor-element.elementor-element-900dfee{--display:flex;}body.elementor-page-273:not(.elementor-motion-effects-element-type-background), body.elementor-page-273 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FDFAF8;}@media(min-width:768px){.elementor-273 .elementor-element.elementor-element-c33fae6{--width:60%;}.elementor-273 .elementor-element.elementor-element-6a68ebc{--width:40%;}.elementor-273 .elementor-element.elementor-element-900dfee{--content-width:1400px;}}@media(max-width:1024px){.elementor-273 .elementor-element.elementor-element-29a191fd{width:100%;max-width:100%;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-toggle-title{font-size:14px;}.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-content{font-size:14px;}.elementor-273 .elementor-element.elementor-element-30627e5{--swiper-slides-to-display:1;}}@media(max-width:767px){.elementor-273 .elementor-element.elementor-element-29a191fd .elementor-tab-content{padding:0px 0px 30px 0px;}.elementor-273 .elementor-element.elementor-element-30627e5{--swiper-slides-to-display:1;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-d209ce9 *//* --- 修复版：Blocksy / Woo 产品相册垂直缩略图 (Grid 布局法) --- */

@media (min-width: 768px) {
    /* 1. 使用 Grid 布局而不是 Flex，防止 JS 宽度计算崩溃 */
    .woocommerce-product-gallery {
        display: grid !important;
        /* 定义两列：左边 80px 给缩略图，右边 1fr 自动填满主图 */
        grid-template-columns: 80px 1fr !important; 
        gap: 30px !important; /* 间距 */
    }

    /* 2. 缩略图区域：强制放到第 1 列 */
    .woocommerce-product-gallery .flex-control-thumbs {
        grid-column: 1 !important;
        grid-row: 1 !important;
        
        display: flex !important;
        flex-direction: column !important; /* 垂直排列 */
        justify-content: flex-start !important;
        width: 120% !important;
        padding:10 !important;
        
        /* 防止缩略图太多把页面撑太长，超过 500px 出现滚动条 */
        max-height: 400px !important; 
        overflow-y: auto !important; 
    }
    
    /* 隐藏缩略图丑陋的滚动条 */
    .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
        display: none;
    }

    /* 3. 主图区域：强制放到第 2 列 */
    /* 这里的 .flex-viewport 是 Blocksy/Woo 自动生成的包裹层 */
    .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery .flex-viewport {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
    }

    /* 4. 修复单个缩略图样式 */
    .woocommerce-product-gallery .flex-control-thumbs li {
        width: 100% !important;
        float: none !important;
    }

    .woocommerce-product-gallery .flex-control-thumbs li img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        opacity: 0.5;
        transition: opacity 0.3s;
        /* 加上你喜欢的边框风格 */
        border: 1px solid transparent; 
        cursor: pointer;
    }

    /* 选中/悬停状态 */
    .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
    .woocommerce-product-gallery .flex-control-thumbs li img:hover {
        opacity: 1 !important;
        border: 1px solid #333 !important;
    }
}

@media (min-width: 768px) {
    /* 1. 移除缩略图列表项的 padding-top */
    /* 针对 li 元素，覆盖其 padding-top */
    .woocommerce-product-gallery li {
        padding-top: 0 !important; /* 强制移除 padding-top */
    }

    /* 2. 修改缩略图列表项的 margin-bottom */
    .woocommerce-product-gallery .flex-control-thumbs li {
        /* 保持之前设置的 width 和 float: none */
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important; /* *** 将底部外边距改为 15px *** */
    }

    /* 确保最后一个缩略图底部没有间距 */
    .woocommerce-product-gallery .flex-control-thumbs li:last-child {
        margin-bottom: 0 !important;
    }
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-d13f8ab *//* =========================================
   WooCommerce 详情页按钮美化 (基于你的截图)
   ========================================= */

/* 1. 调整父容器布局 - 让元素对齐 */
form.cart {
    display: flex !important;
    flex-wrap: wrap !important; /* 允许换行，适配手机 */
    align-items: center !important;
    gap: 10px !important; /* 统一间距 */
}

/* 2. 数量输入框高度修正 */
/* 确保数量框高度和旁边按钮一致，避免高低不平 */
.quantity input.qty {
    margin-top: 5px;
    min-height: 44px !important; 
    height: 44px !important;
    border-radius: 4px !important;
}

/* 3. [加入购物车] 按钮 - 次要操作 (白底黑字) */
button.single_add_to_cart_button {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 0 25px !important;
    height: 46px !important; /* 强制高度一致 */
    line-height: 46px !important; /* 文字垂直居中 */
    flex: 1; /* 自动撑开宽度 */
    min-width: 140px; /* 防止太窄 */
    transition: all 0.2s ease;
}

button.single_add_to_cart_button:hover {
    background-color: #f5f5f5 !important;
    border-color: #999 !important;
    transform: translateY(-1px);
}

/* 4. [立即购买] 按钮 - 主要操作 (红色大促风) */
a.button.buy-now-button {
    /* 覆盖掉原本的行内样式 margin-left */
    margin-left: 0 !important; 
    
    /* 醒目的红色渐变背景 */
    background: linear-gradient(90deg, #283455 0%, #ea384d 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 0 25px !important;
    height: 46px !important; /* 强制高度一致 */
    
    /* Flex 布局让文字在 a 标签里居中 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    flex: 1; /* 自动撑开宽度 */
    min-width: 140px;
    box-shadow:#283455 !important; /* 加点投影 */
    transition: all 0.2s ease;
}

a.button.buy-now-button:hover {
    background: linear-gradient(90deg, #283455 0%, #d31027 100%) !important;
    transform: translateY(-2px); /* 悬浮上移效果 */
    box-shadow:#283455 !important;
    color: #fff !important;
}

/* 5. 手机端强制调整 (屏幕宽度小于 768px) */
@media (max-width: 768px) {
    /* 在手机上，让数量框自己占一行，或者调整宽度 */
    .quantity {
        margin-right: 10px !important;
    }
    
    /* 让两个按钮在手机上各占 100% 宽度，上下排列，方便手指点击 */
    button.single_add_to_cart_button,
    a.button.buy-now-button {
        flex: 1 0 100% !important; /* 强制换行占满 */
        margin-left: 0 !important;
        margin-bottom: 5px !important;
        width: 100% !important;
    }
}/* End custom CSS */
/* Start custom CSS for loop-carousel, class: .elementor-element-30627e5 *//* --- 主容器定位 --- */
/* Elementor 轮播组件本身通常会有一个包装器 */
.elementor-widget-image-carousel { /* 这是 Elementor 轮播组件的通用包装器类 */
    position: relative; /* 确保子元素的绝对定位是相对于这个组件 */
    /* 根据需要，你可能需要调整这个容器的内边距或外边距 */
}

/* --- 1. 切换箭头放在右上角 --- */
/* 根据你提供的类名精确选择箭头 */
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
    position: absolute;
    /* Elementor 默认的箭头可能已经有 background-color 和一些 padding，
       这里我们进行覆盖以匹配你的需求 */
    width: 30px; /* 箭头图标宽度 */
    height: 30px; /* 箭头图标高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;

    /* 调整箭头位置，确保它位于 "Shop by Category" 标题的右上角区域 */
    /* 你可能需要根据实际页面布局调整这个 top 值 */
    top: -25px !important; /* 假设 "Shop by Category" 标题在这个位置的上方 */
}

.elementor-swiper-button-next {
    right: 0px; /* 右箭头距离右侧0px */
    left: auto !important; /* 覆盖 Elementor 默认的 left 定位 */
}

.elementor-swiper-button-prev {
    right: 40px; /* 左箭头距离右箭头40px（根据需要调整间距） */
    left: auto !important; /* 覆盖 Elementor 默认的 left 定位 */
}
.elementor-swiper-button-next {
    right: 0px !important; /* 右箭头距离右侧0px */
    left: auto !important;
}

.elementor-swiper-button-prev {
    right: 40px; /* 左箭头距离右箭头40px（或更多，根据间距调整） */
    left: auto !important;
}


/* 如果你的轮播标题 "Shop by Category" 是在一个单独的容器中，你可能需要调整箭头的 `top` 值，
   让它们与 "Shop by Category" 标题对齐。
   例如，如果 "Shop by Category" 的容器是 .elementor-heading-title，
   你可以这样调整箭头的 top 值，或者将箭头定位到这个标题容器内部。 */


/* --- 调整：图片底部渐变遮罩 (z-index 调整) --- */
.elementor-image-carousel .swiper-slide::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 0; /* <-- 关键调整：确保它在标题下方 (标题 z-index 为 8)，但仍在上层蒙层上方 (上层蒙层 z-index 为 6) */
    pointer-events: none;
}

/* 标题样式 - **这是你需要提供具体类名的部分** */
/* 我先假设你的标题是 `elementor-image-carousel` 内部的 `figcaption` 标签，
   或者一个带有 `elementor-image-carousel-caption` 类的 `div` 或 `p`。
   请根据你实际的 HTML 结构进行修改。 */
.elementor-image-carousel .swiper-slide .elementor-image-carousel-caption, /* 假设 Elementor 使用此标题类 */
.elementor-image-carousel .swiper-slide figcaption { /* 或者如果是 figcaption 标签 */
    position: absolute;
    bottom: 15px; /* 离图片底部距离 */
    left: 15px; /* 离图片左侧距离 */
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline; /* 下划线 */
    text-underline-offset: 4px; /* 下划线与文字的间距 */
    text-decoration-thickness: 1px; /* 下划线粗细 */
    /* background-color: rgba(0, 0, 0, 0.4); /* 如果文字不够清晰，可以考虑加一个半透明背景 */
    /* padding: 3px 8px; */
    z-index: 5;
    /* 强制标题在 Elementor 编辑器中也显示，以免被隐藏 */
    opacity: 1 !important;
    visibility: visible !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-data-tabs, class: .elementor-element-fa95921 *//* 1. 选项卡容器重置 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #e5e5e5 !important; /* 底部一条淡灰色的线 */
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    display: flex;
    gap: 30px; /* 标签之间的间距 */
}

/* 2. 单个标签样式 (默认状态) */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    color: #888 !important; /* 未选中是灰色 */
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 10px 0 15px 0 !important; /* 上下留白 */
    display: block;
    position: relative;
    transition: all 0.3s ease;
}

/* 去掉 Elementor 可能存在的伪元素干扰 */
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after {
    display: none !important;
}

/* 3. 选中状态 (Active) - 核心样式 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #333 !important; /* 选中变黑 */
    font-weight: 700 !important; /* 加粗 */
}

/* 选中时的底部黑条 */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px; /* 盖住底部的灰线 */
    left: 0;
    width: 100%;
    height: 3px; /* 黑条厚度 */
    background-color: #333; /* Rockwall 深色 */
}

/* 4. 内容区域样式 */
.woocommerce div.product .woocommerce-tabs .panel {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* 去掉多余内边距，让文字对齐 */
    color: #555;
    line-height: 1.8;
}

/* 5. 标题隐藏 (通常Tab里会有个重复的标题，建议隐藏) */
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
    display: none !important;
}

/* --- 强制 Tab 标题栏左对齐 --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;       /* 确保使用 Flex 布局 */
    justify-content: flex-start !important; /* 核心：靠左对齐 */
    text-align: left !important;    /* 兼容部分非 Flex 主题 */
    margin-left: 0 !important;      /* 去掉左边可能存在的自动边距 */
    padding-left: 0 !important;     /* 去掉左边内边距，与下方内容对齐 */
    margin-right: auto !important;  /* 确保右边有空间 */
}

/* (可选) 如果左对齐后，第一个标签离边缘太近，想加一点空隙 */
/*
.woocommerce div.product .woocommerce-tabs ul.tabs li:first-child {
    margin-left: 0 !important;
}
*//* End custom CSS */