Single Product Page – Sale vs Original Price

This has made it look a lot better then before, however I would like the sale price color to be red, and the original price to be grey. Basically flip-flopped.

Currently the site does not look like that
https://www.6ku.com/product/6ku-coaster-brake-city-bike/?attribute_color=Regular&attribute_size=Harding%20-%20Matte%20Black

Here is the code I am using:

/* Sale Price */
.price del {
    color: #dc1d10;
   /*display: none;*/
}
.product-information .price del {
    /*float: right;
    margin-right: 80%;*/
    margin-top: -10px;
}
.product-information .price del {
   display: block;
}

Also is it possible to hide the original price in woocommerce grid layout (see image below). But I still want to leave the original price on the individual product page.

Thank you,
Michael

Okay so I entered all that into my custom.css file, and for whatever reason, I still do not see the changes on the site. I cleared the cache, refreshed, tried a different browser. Still no luck.

So here is all the code on my custom.css file, perhaps some other code in conflicting or I have it coded incorrectly. I don’t know.

/* Single Product Page */
.price, .amount {
  font-family: "Helvetica", sans-serif;
}
.product-image-wrapper:hover .footer-product{
display:none;
}
.install-menu-info {
   display: none;
}
.jck-wt-wishlist-buttons{
    display:none;
}
.menu-social-icons {
    padding-top: 10px;
}

.product-information .size_guide {
  font-weight: bold;
}
/* --------------------------------- */

/* Sale Price */
.product-information .price del {
    margin-top: -10px;
    display: block;
    color: grey;
}
.product-information .price ins {
    color: #FF0000;
}
.price del {
    display: none !important;
}

/* 2 Products Side-By-Side | Mobile */
@media only screen and (max-width: 480px){
.products-grid .product {
width: 50% !important;
}}

/* Product Grid */
.products-grid .star-rating {
   display: none !important;
}
/* --------------------------------- */

/* Product Title - Breadcrumb */
.page-heading .title {
   display: none;
}

/* Top Bar */
.navbar {
    padding: 15px 0px 15px 0px;
}
/*.header-type-7 .header .tbs span{
display:none;
}*/

/* SVG Logo Container 
.svglogo {
  border: 10px solid #b6bdc3;
  width: 100%;
  background: #fff;
  margin: 0 auto;
}*/

/* Required to make image fluid in IE

img:not(.png) {
  width: 100%;
}*/

/* Hide Mobile Navigation Title 
.mobile-nav-heading.close-mobile-nav {
    display: none !important;
} */

.woocommerce-variation-description,
.product_meta{
display:none;
}

/* Random CSS */
.floatleft {
    float: left;
    margin: 0 0 0px 0px;
}
.largerfont {
    font-size: 18px;
}
.xlargefont {
    font-size: 32px;
}
.h3custom {
    padding-bottom: 14px;
    border-bottom: 12px solid #000;
}
.h2custom {
    padding-bottom: 1px;
    border-bottom: 3px solid #000
}

/* --------------------------------- */

/* Footer */
/* Stay Connected Web Form */
.stayconnected {
    padding: 10px 0px 0px 0px;
}
.rightalignbutton {
    float: right;
}
.footerformtext {
    color: black;
}
.address-company {
    padding-bottom: 10px;
}

Here you go.

Not entirely true, but we are nearly there.

1. I wanted to show the sale price in red (which it is now), but I also wanted to keep the original price above the sale price with a grey colored font. (see comments in orange)

2. In product grid portion of the store, I wanted the sale price to be shown in red, not grey. (see comments in orange)

And that should be it. Sorry for any confusing.

Thank you,
Michael

Thank you, it all worked perfectly!

Thanks again for all your help!
Michael Parra