Need to create a product page with CSS without affecting other pages

Hi there

I'm very new to CSS, and this forum and has been very helpful to me, in getting close to what I need for my SquareSpace website. But I have a remaining technical issue, and also some problems with matching styles and I wonder if someone could help please.

I wanted to add two things to the product page here: https://www.ultra-magazine.com/shop/ultra-issue-19

I use the site to sell paper magazines, but I have just introduced a digital alternative to the latest issue via issuu.com. Instead of offering two purchase options on the store, I want to combine both paper and digital in one item and offer the customer the chance to either buy a paper copy, or to link to issuu.com to buy the digital one. So my intention was to have two separate sections in each new product page from issue 19 onwards, in order as follows:

• Heading: Issue 19
• Bold text: Buy Print
• Small text: £11.99
• Standard quantity selector: Quantity:
• Small text: description of print product
• <button>PURCHASE
• Bold text: Buy Digital
• Small text: £5.99
• Small text: description of digital product
• <button>PURCHASE
• Normal text: sales text describing my magazine

My first problem is to add the text "Buy Print" after the first heading and before the £11.99 price. I researched and created some custom code to add the text, as follows:

/* Text Before Price */

.product-price:before{

content: "Buy Print\a";

  font-family: 'freight big pro';

  font-size: 30px;

  font-weight: 300;

  font-style: normal;

  line-height: 2;

  display: block;

}

I think Freight Big Pro should be the correct font. The result of this, though, is that this text also appears in the main store page https://www.ultra-magazine.com/shop on every product, and that's not how I want it, as only one specific product has the digital alternative. Is there a way that someone could advise for me to target only the product page, and not the store page with all products on it?

I tried isolating using the item ID as above, which I think is 66945ee35cca6d529bc81788 for the page, but my coding skills are only just starting so I probably am doing something wrong - as it doesn't work!

Also, styles are a problem. The "Buy Print" font doesn't match the "Buy Digital" heading further down, even though I think it should as they both seem to be the same specification. Is there a way of matching this font through CSS tags to the font used by the theme?

I would appreciate anyone's help in trying to sort this out. 🙂

Andy

PS - this thread was helpful, but following it does not give me the results I need: 

Many thanks Lesum. I didn't want the 'Buy' text to be a hyperlink so I removed that <a> tag, but with the formatting I have been able to correctly match the font with the font from the main page, and I have learned something. 🙂 All the best!