Product overlay issue!

Site URL: https://www.fidemfishers.com/all-clothing

Hello all,

I cant figure out how to match the font of "sold out" on top of products to the squarespace Acumin font of product name.

There should also be a white bar going across the middle of the product to highlight "sold out", its showing up on my css but not when I view the page by going to the site.

Thank you for any help!

/* Sold Out overlay */
.post-type-store-item.sold-out .grid-image:before {
  content: 'SOLD OUT';
  font-family: ;;;;;
  font-weight: thin;
  color: #000;
  font-size: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.post-type-store-item.sold-out .grid-image:after {
  content: '';
  width: 100%;
  height: 10%;
  position: absolute;
  top: 45%;
  left: ;
  background: #ffff;
  opacity: 0.4

}
.post-type-store-item.sold-out .product-mark.sold-out {
  display: none;
}

Use this code

.post-type-store-item.sold-out .grid-image:before {
    font-family: acumin-pro !important;
}

Thank you!😇