/* CSS to handle Product Category Listings Elements */
/* like percentage off | was price | now price on */

main .product-grid__content .product-grid__description .iconsslugs {display: block;}

main .product-grid__content .product-grid__description .newproduct, 
main .product-grid__content .product-grid__description .webexclusive, 
main .product-grid__content .product-grid__description .offerpercentage, 
main .product-grid__content .product-grid__description .offerpricewas, 
main .product-grid__content .product-grid__description .offerpricenow {display: inline-block; margin: 2px;}

main .product-grid__content .product-grid__description .newproduct {background: #252b3f; color: #ffffff; text-transform: uppercase;}
main .product-grid__content .product-grid__description .webexclusive {background: #252b3f; color: #ffffff;}
main .product-grid__content .product-grid__description .offerpercentage {background: #cb0e16; color: #ffffff;}

main .product-grid__content .product-grid__description .offerpricewas {text-decoration: line-through;}
main .product-grid__content .product-grid__description .offerpricenow {font-weight: bold;}

main .product-grid__content .product-grid__description .newproduct,
main .product-grid__content .product-grid__description .webexclusive,
main .product-grid__content .product-grid__description .offerpercentage {
    border-radius: 5px;
    padding: 6px;
    font-weight: 100;
    line-height: 0.9;
}

main .product-grid__content .product-grid__description .offerpricewas:before {content: "was £";}
main .product-grid__content .product-grid__description .offerpricenow:before {content: "now £";}
main .product-grid__content .product-grid__description .offerpercentage:after {content: "% OFF";}

main .product-grid__content .product-grid__description .newproduct:after {content: "New!";}
main .product-grid__content .product-grid__description .webexclusive:after {content: "Web Exclusive";}