.elementor-109 .elementor-element.elementor-element-1cbd72a{--display:flex;--min-height:40px;--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:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-109 .elementor-element.elementor-element-faf8f65{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-109 .elementor-element.elementor-element-ab10bb0{--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 0px;--row-gap:0px;--column-gap:0px;}.elementor-109 .elementor-element.elementor-element-05281f3{--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;}.elementor-109 .elementor-element.elementor-element-eb393c8{--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:10px 0px;--row-gap:10px;--column-gap:0px;}.elementor-109 .elementor-element.elementor-element-2c9509c .elementor-heading-title{font-size:28px;}.woocommerce .elementor-109 .elementor-element.elementor-element-f274486 .star-rating::before{color:#FFD280;}.woocommerce .elementor-109 .elementor-element.elementor-element-f274486 .woocommerce-review-link{color:#838383;}.woocommerce .elementor-109 .elementor-element.elementor-element-f274486 .star-rating{font-size:0.8em;}.woocommerce .elementor-109 .elementor-element.elementor-element-7218537 .price{color:#8A8A8A;font-size:20px;font-weight:500;}.woocommerce .elementor-109 .elementor-element.elementor-element-7218537 .price ins{color:#353535;font-size:22px;font-weight:800;}body:not(.rtl) .elementor-109 .elementor-element.elementor-element-7218537:not(.elementor-product-price-block-yes) del{margin-right:0px;}body.rtl .elementor-109 .elementor-element.elementor-element-7218537:not(.elementor-product-price-block-yes) del{margin-left:0px;}.elementor-109 .elementor-element.elementor-element-7218537.elementor-product-price-block-yes del{margin-bottom:0px;}.woocommerce .elementor-109 .elementor-element.elementor-element-dfb92d5 .woocommerce-product-details__short-description{color:#494949;font-size:14px;}.elementor-109 .elementor-element.elementor-element-37c625f .cart button, .elementor-109 .elementor-element.elementor-element-37c625f .cart .button{transition:all 0.2s;}.elementor-109 .elementor-element.elementor-element-37c625f{--view-cart-spacing:0px;--button-spacing:16px;}.elementor-109 .elementor-element.elementor-element-37c625f .quantity .qty{border-style:solid;border-width:1px 1px 1px 1px;border-color:#DBDBDB;transition:all 0.2s;}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart .variations{width:100%;margin-bottom:0px;}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations tr th, .woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations tr td{padding-top:calc( 0px/2 );padding-bottom:calc( 0px/2 );}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations label{color:var( --e-global-color-primary );font-weight:700;}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations td.value select{color:var( --e-global-color-text );}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations td.value select, .woocommerce div.product.elementor.elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations td.value:before{font-size:14px;font-weight:500;letter-spacing:0px;word-spacing:0px;}.woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations td.value select, .woocommerce .elementor-109 .elementor-element.elementor-element-37c625f form.cart table.variations td.value:before{border-radius:4px;}.elementor-109 .elementor-element.elementor-element-4aab3e8{margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;font-size:13px;font-weight:400;letter-spacing:0px;word-spacing:16px;color:var( --e-global-color-primary );}.elementor-109 .elementor-element.elementor-element-4aab3e8:not(.elementor-woo-meta--view-inline) .product_meta .detail-container:not(:last-child){padding-bottom:calc(22px/2);}.elementor-109 .elementor-element.elementor-element-4aab3e8:not(.elementor-woo-meta--view-inline) .product_meta .detail-container:not(:first-child){margin-top:calc(22px/2);}.elementor-109 .elementor-element.elementor-element-4aab3e8.elementor-woo-meta--view-inline .product_meta .detail-container{margin-right:calc(22px/2);margin-left:calc(22px/2);}.elementor-109 .elementor-element.elementor-element-4aab3e8.elementor-woo-meta--view-inline .product_meta{margin-right:calc(-22px/2);margin-left:calc(-22px/2);}body:not(.rtl) .elementor-109 .elementor-element.elementor-element-4aab3e8.elementor-woo-meta--view-inline .detail-container:after{right:calc( (-22px/2) + (-1px/2) );}body:not.rtl .elementor-109 .elementor-element.elementor-element-4aab3e8.elementor-woo-meta--view-inline .detail-container:after{left:calc( (-22px/2) - (1px/2) );}.elementor-109 .elementor-element.elementor-element-4aab3e8 .product_meta .detail-container:not(:last-child):after{content:"";border-color:#ddd;}.elementor-109 .elementor-element.elementor-element-4aab3e8:not(.elementor-woo-meta--view-inline) .product_meta .detail-container:not(:last-child):after{border-top-style:solid;border-top-width:1px;margin-bottom:calc(-1px/2);}.elementor-109 .elementor-element.elementor-element-4aab3e8.elementor-woo-meta--view-inline .product_meta .detail-container:not(:last-child):after{border-left-style:solid;border-left-width:1px;}.elementor-109 .elementor-element.elementor-element-4aab3e8 a{font-weight:500;color:var( --e-global-color-text );}.elementor-109 .elementor-element.elementor-element-dd486d3{--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;}@media(min-width:768px){.elementor-109 .elementor-element.elementor-element-ab10bb0{--content-width:1400px;}.elementor-109 .elementor-element.elementor-element-05281f3{--width:65%;}.elementor-109 .elementor-element.elementor-element-eb393c8{--width:35%;}}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-1fcb6eb *//* --- 修复版：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: 10px !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;
        margin: 0 !important;
        padding: 0 !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;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-24f0183 *//* ========================================= */
/* TOP RATED 徽章样式 */
/* ========================================= */
.top-rated-badge {
    display: inline-block; /* 让 div 像 span 一样，只占据内容所需的宽度 */
    padding: 5px 18px; /* 上下左右内边距 */
    background-color: #f7f2ea; /* 背景色：浅米色 */
    color: #333333; /* 文字颜色：深灰色 */
    font-family: 'Arial', sans-serif; /* 字体：可根据网站主字体调整 */
    font-size: 0.7em; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-transform: uppercase; /* 文字大写 */
    letter-spacing: 0.8px; /* 字母间距 */
    border-radius: 2px; /* 轻微圆角 */
    border-bottom: 2px solid #FFBF59; /* 底部强调线：黄色 */
    transition: all 0.3s ease; /* 过渡效果 */
    cursor: default; /* 默认鼠标样式，表示不可点击 */
  
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-price, class: .elementor-element-7218537 */.price {
    margin-bottom: 0 !important; /* 清除外边距 */
    padding-bottom: 0 !important; /* 清除内边距 */
}

/* 1. 让价格容器支持横向排列，垂直居中 */
.product .price {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap; /* 防止手机上换行太难看 */
}

/* 2. 折扣标签样式 */
.rockwall-discount-badge {
    background-color: #FFE600; /* 深色背景，匹配你的边框色 */
    color: #333;            /* 白色文字 */
    font-size: 14px;
    font-weight: 700;
    padding: 3px 8px;       /* 内边距 */
    margin-right: 12px;     /* 标签和价格之间的距离 */
    border-radius: 2px;     /* 微圆角 */
    line-height: 1;
    
    /* 这里加一点点高级感：模拟之前色块的边框风格 */
    border: 1px solid #FFE600;
    position: relative;
}

/* (可选) 如果你想要和色块一模一样的“双层边框”效果，加上下面这段 */
.rockwall-discount-badge::before {
    content: '';
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border: 1px solid #FFE600; /* 外层淡边框 */
    border-radius: 4px;
    z-index: 0;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-add-to-cart, class: .elementor-element-37c625f *//* --- 重置 Blocksy 默认的数量框布局 --- */
.quantity[data-type="type-2"] {
    display: inline-flex !important;
    /* 核心修改：允许换行，这样Quantity文字可以独占一行在上面 */
    flex-wrap: wrap !important; 
    align-items: center;
    gap: 10px; /* 维持间距 */
    border: none !important;
    max-width: none !important;
    padding: 0 !important;
    margin-bottom: 25px;
}

/* --- 新增：在上方插入 "Quantity" 文字 --- */
.quantity[data-type="type-2"]::before {
    content: "Quantity"; /* 这里修改你要显示的文字，比如 "数量" */
    display: block;
    width: 100%; /* 强制占满整行，把下面的按钮挤到第二行 */
    font-weight: 300; /* 加粗，匹配 Rockwall 的标题风格 */
    color: #333;      /* 深灰色 */
    font-size: 14px;  /* 字体大小 */
    line-height: 1.2;
    margin-bottom: -5px; /* 调整文字和下方框框的距离 */
    order: 0; /* 确保文字排在最前面 */
}

/* --- 1. 调整顺序 (让减号在左，数字在中，加号在右) --- */
.quantity[data-type="type-2"] .ct-decrease { order: 1; }
.quantity[data-type="type-2"] .input-text.qty { order: 2; }
.quantity[data-type="type-2"] .ct-increase { order: 3; }

/* --- 2. 中间数字输入框样式 (保持不变) --- */
.quantity[data-type="type-2"] .input-text.qty {
    width: 75px !important;
    height: 45px !important;
    border: 1px solid #ccc !important;
    background: #fff !important;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    padding: 0 !important;
    text-align: center;
    border-radius: 6px !important; 
    margin: 0 !important; 
    transition: all 0.2s ease;
}

/* 数字框：选中/鼠标悬停时的“双层边框”效果 */
.quantity[data-type="type-2"] .input-text.qty:focus,
.quantity[data-type="type-2"] .input-text.qty:hover {
    border: 3px solid #fff !important;
    outline: 2px solid #444 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 3. 加减按钮样式 (保持不变) --- */
.quantity[data-type="type-2"] span.ct-increase,
.quantity[data-type="type-2"] span.ct-decrease {
    position: static !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 22px;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s;
}

/* 加减号里的图标/文字大小 */
.quantity[data-type="type-2"] span svg,
.quantity[data-type="type-2"] span:before {
    font-size: 14px;
    width: 10px; 
    height: 11px;
    fill: #555;
}

/* 加减按钮鼠标悬停 */
.quantity[data-type="type-2"] span.ct-increase:hover,
.quantity[data-type="type-2"] span.ct-decrease:hover {
    background: #444;
    border-color: #444;
}
.quantity[data-type="type-2"] span.ct-increase:hover svg,
.quantity[data-type="type-2"] span.ct-decrease:hover svg {
    fill: #fff;
}

/* 隐藏无用的 Label (保持不变) */
.quantity[data-type="type-2"] .screen-reader-text {
    display: none !important;
}

/* 隐藏浏览器默认的数字小箭头 (保持不变) */
.quantity[data-type="type-2"] input[type=number]::-webkit-inner-spin-button, 
.quantity[data-type="type-2"] input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}



/* --- 修复：强制购物车表单使用 Flex 布局 --- */
form.cart {
    display: flex !important;
    flex-wrap: wrap !important; /* 允许换行 */
    justify-content: space-between !important; /* 左右两端对齐 */
}

/* 1. 强制数量框独占第一行 (100%宽度) */
.quantity[data-type="type-2"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 10 !important; /* 清除默认外边距，交给 gap 控制 */
}

/* 2. 核心修改：针对两个按钮的精确计算 */
button.single_add_to_cart_button,
button.wc-buy-now-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 50px !important;    /* 统一高度 */
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 5px !important;  /* 减小内边距防止文字撑开 */
    margin: 0 !important;       /* 清除所有默认边距，防止错位 */
    float: none !important;     /* 禁用主题可能存在的浮动 */
}

/* --- 桌面端 & iPad (宽度大于 768px) --- */
@media (min-width: 768px) {
    button.single_add_to_cart_button,
    button.wc-buy-now-btn {
        /* 计算逻辑：(100%宽度 - 10px间距) ÷ 2 */
        width: calc(100% - 5px) !important; 
        flex: 0 0 calc(100% - 5px) !important;
        max-width: calc(100% - 5px) !important;
    }
}

/* --- 移动端 (宽度小于 768px) --- */
@media (max-width: 767px) {
    button.single_add_to_cart_button,
    button.wc-buy-now-btn {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* --- 3. 视觉配色 (保持之前的 Rockwall 风格) --- */

/* 加入购物车：白底黑框 */
button.single_add_to_cart_button {
    background-color: #fff !important;
    color: #333 !important;
    border: 2px solid #333 !important;
}
button.single_add_to_cart_button:hover {
    background-color: #f0f0f0 !important;
}

/* Buy Now：黑底白字 */
button.wc-buy-now-btn {
    background-color: #333 !important;
    color: #fff !important;
    border: 2px solid #333 !important;
}
button.wc-buy-now-btn:hover {
    background-color: #555 !important;
    border-color: #555 !important;
}

/* --- 单独给“加入购物车”按钮增加底部间距 --- */
button.single_add_to_cart_button {
    /* 10px 可以根据需要调整，比如 15px 或 20px */
    margin-bottom: 10px !important; 
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-additional-information, class: .elementor-element-9712492 *//* --- 附加信息表格优化 (柔和斑马纹) --- */

table.shop_attributes {
    border: none !important;
    width: 100%;
}

/* 每一行都有圆角，看起来更现代 */
table.shop_attributes tr {
    border: none !important;
}

/* 奇数行添加极淡的灰色背景 */
table.shop_attributes tr:nth-child(odd) th,
table.shop_attributes tr:nth-child(odd) td {
    background: #f9f9f9 !important;
}
/* 偶数行白色背景 */
table.shop_attributes tr:nth-child(even) th,
table.shop_attributes tr:nth-child(even) td {
    background: #fff !important;
}

/* 单元格样式 */
table.shop_attributes th, 
table.shop_attributes td {
    border: none !important; /* 完全不要边框 */
    padding: 10px 15px !important; /* 左右增加内边距 */
    font-size: 14px;
}

/* 左侧标题 */
table.shop_attributes th {
    color: #222;
    font-weight: 700;
    width: 30%; /* 占比 30% */
}

/* 右侧内容 */
table.shop_attributes td {
    color: #222;
    font-style: normal !important;
}/* End custom CSS */
/* Start custom CSS for woocommerce-product-data-tabs, class: .elementor-element-c77dd5c *//* 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 */