Limited availability label Image Overlay

Soo im trying to do kinda the same as to the post  ("Sold Out" Image Overlay) but for the Limited availability label

i been able to add the label to the image but can't seem to be able to hide the default label with-out hide the new one 

this is the code I'm using, I think I'm just using the wrong class ids?

any advice would be greatly appreciated

Thanks!

.grid-meta-status .product-scarcity:not([hidden]):before {
  content: 'Just a few spots left!'; /* Update text for limited availability */
  font-weight: bolder;
  color: #fff;
  font-size: 2em;
  width: fit-content; /* Adjust width as needed */
  padding: 5px 10px; /* Adjust padding as needed */
  border-radius: 10px; /* Adjust border-radius for roundness */
  background-color: #000; /* Black background color */
  position: absolute;
  z-index: 999;
  top: 20%;
  left: 25%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-meta-status .product-scarcity:not([hidden]):after {
  content: 'Just a few spots left!'; /* Update text for limited availability */
  font-weight: bolder;
  color: #fff;
  font-size: 2em;
  width: fit-content; /* Adjust width as needed */
  padding: 5px 10px; /* Adjust padding as needed */
  border-radius: 10px; /* Adjust border-radius for roundness */
  background-color: #000; /* Black background color */
  position: absolute;
  z-index: 999;
  top: 20%;
  left: 25%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

Can you share link to site? We can check easier

sure the site is https://www.isleofskating.com/

Did you solve it? I don't see default label

Only just seen your reply,

no i only just disabled the custom code,

but it is now showing now

To remove last spots label, add this code above your CSS code

.product-scarcity {
    color: transparent !important;
    background-color: transparent !important;
}