Why is my CSS style not changing the color of h3 tag in Shopify?

[Cr0dex]

Hey Community, I am new to shopify development and I just created a new product-form file which should display different content based on whether the current product is sold out or not. It contains the following code:

<!-- /snippets/product-not-available.liquid -->

{% comment %}
  Show different product forms based on status of product (out of stock, upcoming product)
{% endcomment %}

{% if product.available == false %}
  <div class="product-not-available">
    <h3>Sold out</h3>
  </div>
  
{% elsif product.tags contains "upcoming" %}

{% endif %}

Now, i want the h3-tag to be displayed in red and added the following lines to my scss file:

.product-not-available h3{
  color: red;
}

The Problem is that the h3 Tag is shown in black instead of my desired color and hex codes don't work either. Do you have any ideas how i can fix this issue?

[marketplace026 · Accepted solution]

<div class="product-not-available">
   <h3 class="sold-out">Sold out</h3>
</div>

.sold-out{
color: red !important;
}