Changing SOLD OUT to EARLY BIRD! in shop

This is the code I used and it works on the shop page, but then it shows up when I click on the actual workshop. Can someone help me figure out what I need to change? Thank you!!

/* Sale out to Early Bird */
.product-mark.sale {
    visibility: hidden;
}
.product-mark.sale:before {
    visibility: visible;
    content: "Early Bird!";
  background-color: #1f1f1f !important;
    position: absolute;
    left: 42%;
  top: 1px;
    transform: translateX(-50%);
      padding: 2px 7px;
}

@MariElisabeth You can remove the code you added previously and add this code: 

#productList .product-mark.sale:before {
    visibility: visible;
    content: "Early Bird!";
    background-color: #1f1f1f !important;
    position: absolute;
    left: 42%;
    top: 1px;
    transform: translatex(-50%);
    padding: 2px 7px;
}

Thank you that worked! 

Then I added this to take the Sale of the page of the page when you click on it too. 

#productDetails .product-mark {
    visibility: hidden;
}