.prsContainer{
    display:                grid;
    grid-template-columns:  50px 50px 50px 40px;
    grid-template-rows:     max-content 40px max-content max-content max-content;
    column-gap:             5px;
    grid-template-areas:    
        "vanvoor vanvoor vanvoor"
        "price price price"
        "staffelkorting staffelkorting staffelkorting"
        "promotekst promotekst promotekst"
        "promofooter promofooter promofooter";
}

    .prsContainer.prsBuy{
        grid-template-areas:    
            "vanvoor vanvoor vanvoor vanvoor"
            "price price price wishlist"
            "promotekst promotekst promotekst ."
            "promofooter promofooter promofooter ."
            "staffelkorting staffelkorting staffelkorting staffelkorting";
    }
        .prsContainer.prsBuy:not(:has(.prsWishlist)), 
        .prdContainer.grid .prsContainer.prsBuy {
            grid-template-areas:    
                "vanvoor vanvoor vanvoor vanvoor"
                "price price price price"
                "promotekst promotekst promotekst promotekst"
                "promofooter promofooter promofooter promofooter"
                "staffelkorting staffelkorting staffelkorting staffelkorting";
        }


    .prsContainer.prsTeaser{
        grid-template-columns:  160px;
        grid-template-rows:     max-content 40px max-content max-content;
        column-gap:             0px;
        grid-template-areas:    
            "vanvoor"
            "price"
            "promotekst"
            "promofooter";
    }

.prsContainer.prsHorizontal{
    grid-template-columns:  40px 40px 40px 40px 40px 40px;
    grid-template-rows:     40px max-content max-content max-content;
    grid-template-areas:    
        "vanvoor vanvoor price price price"
        ". . staffelkorting staffelkorting staffelkorting"
        ". . promotekst promotekst promotekst"
        ". . promofooter promofooter promofooter";
}

    .prsContainer.prsHorizontal.prsBuy{
        grid-template-areas:    
            "vanvoor vanvoor price price price wishlist"
            ". . staffelkorting staffelkorting staffelkorting staffelkorting"
            ". . promotekst promotekst promotekst ."
            ". . promofooter promofooter promofooter .";
    }
        .prsContainer.prsHorizontal.prsBuy:not(:has(.prsWishlist)),
        .prdContainer.grid .prsContainer.prsHorizontal.prsBuy {
            grid-template-areas:    
                "vanvoor vanvoor price price price price"
                ". . staffelkorting staffelkorting staffelkorting staffelkorting"
                ". . promotekst promotekst promotekst ."
                ". . promofooter promofooter promofooter .";
        }

    .prsContainer.prsHorizontal.prsTeaser{
        grid-template-columns:  40px 40px 40px 40px 40px 40px;
        grid-template-rows:     max-content 40px max-content;
        column-gap:             5px;
        grid-template-areas:    
            "vanvoor vanvoor vanvoor . . ."
            "price price price promotekst promotekst promotekst"
            "promofooter promofooter promofooter promofooter promofooter promofooter";
    }

    .prsContainer .prsVanvoor{
        grid-area:          vanvoor;
        display:            block;
        min-width:          80px;
        padding:            3px;
        line-height:        14px;
        position:           relative;
        font-size:          12px;
        color:              var(--colorBlack);
        text-align:         left;
        margin-bottom:      5px;
        font-family:        arial, verdana, sans-serif;
    }
        .prsContainer .prsVanvoor .s{
            font-size:      11px;
            color:          var(--colorDarkGray);
        }
        .prsContainer .prsVanvoor .l{
            font-size:      15px;
            font-weight:    600;
            color:          var(--colorDarkGray);
        }

        .prsContainer.prsBuy.prsHorizontal .prsVanvoor{
            margin:             9px 0px 9px 0px;
            width:              100%;
            padding:            0;
        }
        .prsContainer .prsVanvoor .PriceLine{
            display:            block;
            width:              100%;
            height:             100%;
            position:           absolute;
            top:                10px;
            left:               2px;
            border-bottom:      1px solid var(--colorDarkGray);
            -webkit-transform:  rotate(170deg);
            transform:          rotate(170deg);
        }

    .prsContainer .prsPrice{
        grid-area:      price;
		display:        block;
        position:       relative;
		text-align:     center;
		background:     linear-gradient(135deg, var(--colorDarkGreen) 0%, var(--colorDarkGreen) 89%, var(--colorGreen) 89%, var(--colorGreen) 100%);
		font-family:    'Roboto', sans-serif;
		font-weight:    500;
		color:          var(--colorWhite);
        white-space:    nowrap;
    }
        .prsContainer .prsPrice .prsEuro{
            display:        inline-block;
            font-size:      32px;
            white-space:    nowrap;
        }
        .prsContainer .prsPrice .prsCent{
            display:        inline-block;
            position:       relative;
            top:            -10px;
            left:           -3px;
            font-size:      18px;
            white-space:    nowrap;
        }
        .prsContainer .prsPrice .prsTeaser{
            font-size:      15px;
            line-height:    15px;
            padding:        6px 0px 0px 0px;
            font-family:    'Roboto', sans-serif;
            font-weight:    500;
        }

    .prsContainer .prsWishlist{
        grid-area:          wishlist;
        background-color:   var(--colorBlue);
        background-image:   url('/templates/basic/images/icoon_winkelwagen.png');
        background-position:center center;
        background-repeat:  no-repeat;
    }
        .prsContainer .prsWishlist.prsUitverkocht{
            background-color: var(--colorDarkGray);
        }

    .prsContainer .prsPromo{
        grid-area:          promofooter;
        background-color:   var(--colorRed);
        color:              var(--colorWhite);
        font-family:        'Roboto', sans-serif;
        text-align:         center;
        padding:            0px 3px 0px 3px;
        line-height:        20px;
        font-size:          11px;
    }
    .prsContainer>.prsTeaser{
        grid-area:          promotekst;
        background-color:   var(--colorBlue);
        color:              var(--colorWhite);
        font-family:        'Roboto', sans-serif;
        text-align:         center;
        text-transform:     uppercase;
        padding:            6px 5px 6px 5px;
        font-size:          15px;
        font-weight:        500;
        line-height:        15px;
        min-width:          max-content;
    }

    .prsContainer .prsStaffel{
        grid-area:              staffelkorting;
        margin-top:             5px;
        display:                grid;
        grid-template-columns:  auto auto;
        column-gap:             5px;
        height:                 20px;
        border:                 1px solid var(--colorBlack);
        cursor:                 pointer;
    }
        .prsContainer .prsStaffel>div:nth-child(1){
            text-align:         right;
            font-size:          14px;
            line-height:        20px;
            color:              var(--colorGreen);
            font-weight:        bolder;
        }
        .prsContainer .prsStaffel>div:nth-child(2){
            text-align:         left;
            font-size:          10px;
            line-height:        20px;
            padding:            0px 3px 0px 0px;
            white-space:        nowrap;
            font-family:        'Roboto', sans-serif;
            text-transform:     uppercase;
            font-weight:        bolder;
        }

/* MOBILE */
@media only screen and (max-width: 800px) {
    .prsContainer.prsHorizontal{
        grid-template-columns:  40px 40px 40px 40px;
        grid-template-rows:     max-content 40px max-content max-content;
        grid-template-areas:    
            "vanvoor vanvoor ."
            "price price price"
            "staffelkorting staffelkorting staffelkorting"
            "promotekst promotekst promotekst"
            "promofooter promofooter promofooter";
    }
    
        .prsContainer.prsHorizontal.prsBuy{
            grid-template-areas:
                "vanvoor vanvoor . ."
                "price price price wishlist"
                "staffelkorting staffelkorting staffelkorting staffelkorting"
                "promotekst promotekst promotekst ."
                "promofooter promofooter promofooter .";
        }
            .prsContainer.prsHorizontal.prsBuy:not(:has(.prsWishlist)),
            .prdContainer.grid .prsContainer.prsHorizontal.prsBuy {
                grid-template-areas:
                    "vanvoor vanvoor . ."
                    "price price price price"
                    "staffelkorting staffelkorting staffelkorting staffelkorting"
                    "promotekst promotekst promotekst ."
                    "promofooter promofooter promofooter .";
            }

    
        .prsContainer.prsHorizontal.prsTeaser{
            grid-template-columns:  40px 40px 40px 40px 40px 40px;;
            grid-template-rows:     max-content 40px;
            column-gap:             5px;
            grid-template-areas:    
                "vanvoor vanvoor vanvoor . . ."
                "price price price promotekst promotekst promotekst"
                "promofooter promofooter promofooter promofooter promofooter promofooter";
        }

    .prsContainer.prsBuy.prsHorizontal .prsVanvoor{
        margin:             0px 0px 0px 0px;
        padding:            0;
    }
}