/* Category Banner */
#category-banner {
    position: relative;
    }

/*
    @section Category Cards
    
    Used for displaying sub-categories within another category.
*/
.category-card .content {
    padding: 2rem 0;
    }

/*
    @section Product Cards
    
    Used for displaying product information in a card in various locations:
    - Showing products in categories
    - Related products
    - Associated products in articles (e.g. blog posts)
    - Discontinued product alternatives
 */
.product-card {
    background: /*style.body_background_color(*/#fff/*)*/;
    position: relative;
    z-index: 0;
    }
.product-card .offer {
    display: inline-block;
    padding: 3px 10px;
    background: /*style.primary(*/#3e653e/*)*/;
    font-weight: bold;
    color: /*style.text_color_on_primary(*/#FFF/*)*/;
    font-size: .6875em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-transform: uppercase;
    }
.product-card .content {
    padding: .875rem 0;
    }
.product-card-image {
    height: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    }
.product-card-image img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    }
.product-card-content {
    padding: 1rem 0;
    }

/*
    @section Product cards in a carousel
    
    Correctly formatting product-cards when shown inside owl carousel.
*/
.owl-item .product-card {
    height: 100%;
    }

/*
    @section Product Pricing
    
    Pricing is shown on various pages throughout the website.
    So we should have a standard way of displaying product pricing.
 */
.price.is-rrp,
.price.is-standard {
    font-size: 82%;
    opacity: .8;
    }
.price.is-current {
    font-weight: bold;
    }
.price .price-unit {
    font-size: 82%;
    opacity: .8;
    }