Make WooCommerce variation swatches appear grayed out when unavailable or on backorder

/**
2
 * Make Woodmart WooCommerce variation buttons appear with different styles based on stock status
3
 */
4
​
5
add_action('wp_head', 'add_woodmart_size_variation_css');
6
function add_woodmart_size_variation_css() {
7
    ?>
8
    <style>
9
        /* Available in stock - normal state with green border */
10
        .wd-swatch.wd-in-stock,
11
        div[data-id="pa_size"] .wd-swatch.wd-in-stock {
12
            border: 1px solid #294567 !important;
13
            background-color: #f9fff5 !important;
14
        }
15
        
16
        /* Out of stock but available for backorder - orange styling */
17
        .wd-swatch.wd-backorder,
18
        div[data-id="pa_size"] .wd-swatch.wd-backorder {
19
            background-color: #bbbbbb !important;
20
            border: 1px solid #bbbbbb !important;
21
        }
22
        
23
        .wd-swatch.wd-backorder .wd-swatch-text,
24
        div[data-id="pa_size"] .wd-swatch.wd-backorder .wd-swatch-text {
25
            color: #fff !important;
26
        }
27
        
28
        /* Out of stock and not available for backorder - gray styling */
29
        .wd-swatch.wd-disabled,
30
        div[data-id="pa_size"] .wd-swatch.wd-disabled {
31
            opacity: 0.5 !important;
32
            background-color: #f5f5f5 !important;
33
            border: 1px solid #d6d6d6 !important;
34
            cursor: not-allowed;
35
        }