/* We create an explicit pseudo-element rule that uses the highest specificity possible for Elementor widgets, targeting our custom class */

body .elementor-widget-woocommerce-products .products .product.is-preorder-product-677e29c2 .price::before,
body .elementor-widget-woocommerce-product-price .is-preorder-product-677e29c2 .price::before,
body .elementor-loop-container .is-preorder-product-677e29c2 .price::before,
body ul.products li.is-preorder-product-677e29c2 .price::before,
body .is-preorder-product-677e29c2 .woocommerce-Price-amount::before,
body .is-preorder-product-677e29c2 .price .amount::before {
    background-color: #999999 !important;
}

/* Also hide any default 'in-stock' dot if it's rendered as a separate span or div next to the price */
body .is-preorder-product-677e29c2 .stock-dot-green,
body .is-preorder-product-677e29c2 .in-stock-dot {
    background-color: #999999 !important;
}

/* Add a custom dot just in case the JS hides the original one and needs to replace it */
.custom-grey-dot-677e29c2 {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #999999 !important;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}