/* ---- 按钮式属性选择器 ---- */
/* 光加 !important 还不够——如果主题的选择器精确度（specificity）比我们
   高（比如 .woocommerce div.product form.cart button 这种带好几层 class
   的写法），两边都是 !important 时精确度更高的那条还是会赢，导致按钮变成
   主题默认的通栏色块。这里用重复写同一个 class 三遍的办法把精确度拉到
   足够高，不需要猜主题具体写了什么规则 */
.cb-swatch-group.cb-swatch-group.cb-swatch-group{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    margin:4px 0 12px !important;
    width:auto !important;
}
.cb-swatch-group.cb-swatch-group.cb-swatch-group .cb-swatch.cb-swatch.cb-swatch{
    display:inline-flex !important;
    flex:none !important;
    flex-basis:auto !important;
    flex-grow:0 !important;
    flex-shrink:0 !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:none !important;
    min-width:44px !important;
    padding:6px 19px !important;
    margin:0 !important;
    border-radius:999px !important;
    border:1px solid #d8d8d8 !important;
    background:#fff !important;
    color:#1c2024 !important;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1.2 !important;
    text-transform:none !important;
    letter-spacing:normal !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:all .15s ease !important;
    text-align:center !important;
    white-space:nowrap !important;
}
.cb-swatch-group.cb-swatch-group.cb-swatch-group .cb-swatch.cb-swatch.cb-swatch:hover:not(.cb-swatch--disabled){
    border-color:#1c2024 !important;
}
.cb-swatch-group.cb-swatch-group.cb-swatch-group .cb-swatch.cb-swatch.cb-swatch.cb-swatch--active{
    background:#1c2024 !important;
    border-color:#1c2024 !important;
    color:#fff !important;
}
.cb-swatch-group.cb-swatch-group.cb-swatch-group .cb-swatch.cb-swatch.cb-swatch.cb-swatch--disabled{
    color:#c3c7cb !important;
    border-color:#eceeef !important;
    text-decoration:line-through !important;
    cursor:not-allowed !important;
    background:#fafafa !important;
}

/* 原生 select 仍保留在 DOM 中参与表单提交/供 WooCommerce 读取，只是视觉上隐藏 */
.cb-native-hidden{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

/* ---- 变体选择区域的视觉微调 ---- */
/* 从 Elementor 全局 Custom CSS 搬过来的，只跟"变体属性选择区域"本身有关，
   不含价格样式（价格是全站通用的，这个插件只在可变商品页面加载，搬过来
   会导致普通商品的价格样式丢失，所以价格那条留在 Elementor 里没动） */
.woocommerce-variation-add-to-cart-enabled{
    margin-top:16px;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{
    text-align:left;
    /* 原来写的是 font:16px，font 简写属性必须带 font-family 才合法，
       单独写字号会被浏览器整条忽略，这条规则实际从来没生效过，这里改成
       font-size 修正 */
    font-size:16px;
    background:none;
}
.woocommerce div.product form.cart .variations th{
    /* 标签列（Material / Overall Size 这些字）强制不换行、按内容最小宽度
       收缩——这样不管数值列（按钮/下拉框）那边内容怎么变，都不会反过来
       挤压标签列的宽度导致换行。是 HTML 表格自动布局的经典写法 */
    white-space:nowrap;
    width:1%;
}
.woocommerce div.product form.cart .variations select{
    padding:4px;
    font-size:14px;
    color:#969696;
}
.woocommerce div.product form.cart .variations label{
    font-weight:600;
    font-size:14px;
}