change price size and colour on one page

Hello everyone,

Can anyone help me change the size and colour of the prices on these 2 pages separately:

https://caterpillar-antelope-zbjy.squarespace.com/store-2

https://caterpillar-antelope-zbjy.squarespace.com/store-2/7v1gw1mrynm8aojh0otshn3rwbj4yc

password: ptphoto

The problem is whenever I change the price on one page, the other page adopts the same property. 

Please help in giving them individual property if possible.

Thank you in advance!

Add to Home > Design > Custom CSS

/* Shop page */
.view-list {
  .grid-prices {
      color: red !important;
  }
  .grid-prices * {
      font-size: 40px;
  }
}
/* Product Detail Page */
.view-item {
  .grid-prices {
      color: red !important;
  }
  .grid-prices * {
      font-size: 40px;
  }
}

Hi @tuanphan

Thank you once again!

The code for Shop Page is good, but the code for Product Detail Page doesn't work for me. Any idea why? 

This is the page:

https://caterpillar-antelope-zbjy.squarespace.com/store-2/7v1gw1mrynm8aojh0otshn3rwbj4yc

password: ptphoto

Please also include the code for 'from + 'price'' in this page.

Many thanks,
P

Use this

.view-item .product-price {
    color: red !important;
    font-size: 30px !important;
}

@tuanphan Amazing! Thank you once again