main .products .product {
    position: relative;
    border: 1px solid #CCC;
    background-color: #FFF; /* TODO: REMOVE */
    margin: 10px;
    box-sizing: border-box;
}

main .products .product:hover { box-shadow: 0 0 15px -5px #CCC; }

main .products .product .mgBlockLink:hover { cursor: pointer; }

.product .promo,
.product .icons { position: absolute; }

.product .promo .action,
.product .promo .discount {
    min-width: 80px;
    padding: 5px;
    font-size: 14px;
    line-height: 18px;
    color: #FFF;
    text-align: center;
    margin-bottom: 5px;
}

.product .promo .action { background-color: #0b4887; }

.product .promo .discount { background-color: #ed1c24; }

.product .icons > div {
    border: 1px solid #CCC;;
    border-radius: 50%;
    background-color: #FFF;
    padding: 10px;
    margin-bottom: 5px;
}

main .products .product picture {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
}

main .products .product picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product img.brand { max-height: 40px; }

main .products .product a.title {
    display: block;
    padding: 5px 0;
    text-decoration: none;
    color: #2457AA;
    font-weight: 700;
    line-height: 23px;
}

.product em {
    color:#777;
    display: block;
}

.product .values {
    padding: 5px 20px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    font-size: 12px;
}

.product .values strong {
    text-transform: uppercase;
    display: inline-block;
    width: 22px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
}

.product .values b { line-height: 20px; }

.product .values strong.fuelA { background-color: #00a651; }
.product .values strong.fuelB { background-color: #9aca3c; }
.product .values strong.fuelC { background-color: #fff200; }
.product .values strong.fuelD { background-color: #fdb913; }
.product .values strong.fuelE { background-color: #ed1c24; }

.product .values strong.wetA { background-color: #0066b3; }
.product .values strong.wetB { background-color: #0080c6; }
.product .values strong.wetC { background-color: #4ba6dd; }
.product .values strong.wetD { background-color: #75bee9; }
.product .values strong.wetE { background-color: #abe1fa; }

.product .values strong.orange { background-color: #FCB814; }

.product .values strong.yellow { background-color: #FFF101; }

.product .values strong.green { background-color: #99CA3B; }

.product .price { /* INFO: podravnqvane na elemetnite bottom */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/*.product .price > div:first-child { float: left; }*/

main .products .product .price > div:first-child { padding: 10px 20px; }

/*.product .price > div:last-child { float: right; }*/

/*main .products .product .price > div:last-child { margin-top: 20px; }*/

/* IFNO: https://stackoverflow.com/questions/14593415/how-to-strike-through-obliquely-with-css */
.product .price del {
    position: relative;
    text-decoration: none;
}

.product .price del::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: red;
    transform: rotate(-7deg);
}
/* <-- */

.product .price strong.price {
    display: block;
    font-size: 24px;
    letter-spacing: 0;
    color: #2457AA;
    margin: 0;
    font-weight: 700;
}

.product a.buy {
    display: inline-block;
    transition: .2s ease-in-out background-color;
    cursor: pointer;
}

.product a.buy span {
    vertical-align: top;
    display: inline-block;
    padding: 16px 20px 0 20px;
    font-weight: bold;
    font-size: 16px;
    transition: .2s ease-in-out color;
}

.product a.buy img {
    vertical-align: top;
    display: inline-block;
    background-color: #ed1c24;
    width: 32px;
    line-height: 32px;
    padding: 10px;
    transition: .2s ease-in-out background-color;
}

.product a.buy:hover,
.product a.buy:hover img { background-color: #2457AA; }

.product a.buy:hover span { color: #FFF; }

/* INFO: ITEM */
section.product { margin-bottom: 30px; }

section.product .border {
    position: relative;
    padding: 20px;
    border: 1px solid #CCC;
}

section.product picture {
    display: block;
    max-width: 80%;
    width: 650px;
    margin: 0 auto;
}

section.product picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

section.product img.brand { max-height: 40px; }

section.product .eulabel img {
    border: 1px solid #CCC;
    width: 100%;
    background-color: #FFF;
    max-width: 400px;
}

section.product em {
    color: #777;
    display: block;
    margin: 0 0 10px 0;
}

section.product h4 { margin: 20px 0 10px 0; }

section.product .params > div {
    padding: 7px 0;
    overflow: auto; /* INFO: clear fix */
    /* font-size: 16px; */
    color: #767676;
}

section.product .params > div:not(:last-child) { border-bottom: 1px solid #CCC; }

section.product .params .paramvalue {
    float: right;
    text-align: right;
    max-width: 70%;
}
/* <-- */

/* Mobile */
@media (max-width: 640px) {
    section.content article,
    section.products {
        background-color: #F9F9F9;
        overflow: auto;
    }

    .products .product .mgBlockLink { padding: 10px; }

    .product .promo {
        top: 10px;
        left: 10px;
    }

    .product .icons {
        top: 10px;
        right: 10px;
    }

    .product .values { padding: 5px 10px; }

    .products .product .price > div:first-child { padding: 10px; }

    h1 { margin: 30px 10px 10px 10px; }

    h3 {
        margin: 10px 0 0 0;
        padding: 20px 10px 10px 10px;
        background-color: #F9F9F9;
        border-top: 1px solid #CCC;
    }

    section.product .border {
        border-top: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
    }

    section.product .c-3,
    section.product .eulabel { padding: 10px; }
    section.product .info { padding: 10px 20px; }
}

@media (min-width: 641px) and (max-width: 1440px) {
    article,
    section.products { padding: 10px; }
}

/* Tablet & desktop */
@media (min-width: 641px) {
    .products .product .mgBlockLink { padding: 20px 20px 10px 20px; }

    .product .promo {
        top: 20px;
        left: 20px;
    }

    .product .icons {
        top: 20px;
        right: 20px;
    }

    .product .values { padding: 5px 20px; }

    .products .product .price > div:first-child { padding: 10px 20px; }

    h1,
    h3 { margin: 30px 20px 10px 20px; }

    section.product .border { border: 1px solid #CCC; }
}

/* Tablet & Mobile */
@media (max-width: 900px) {
    section.product .price {
        z-index: 1;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px;

        background-color: #FFF;
        border-top: 1px solid #CCC;
    }

    section.product img.brand { margin: 0 0 10px 0; }
}

@media (min-width: 641px) and (max-width: 900px) {

    section.product .c-3 { padding: 20px; }

    section.product .info,
    section.product .eulabel {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        vertical-align: top;
        padding: 20px;
    }
}

@media (min-width: 901px) {
    section.product img.brand { margin: 20px 0 10px 0; }

    section.product .eulabel img { margin-top: 20px; }
}

@media (min-width: 901px) and (max-width: 1440px) {
    section.product > div { padding: 20px; }
}

@media (min-width: 1441px) {
    section.products { padding: 10px 0; }

    section.product > div { padding: 10px; }

    section.product div.c3 { padding-left: 30px; }
}

/* ((())) */
/* INFO: GRID */
@media (min-width: 641px) {
    article .products,
    section.products {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    article .products .product,
    section.products .product {
        display: flex;
        flex-direction: column;
    }

    article .products .product .bottom,
    section.products .product .bottom { margin-top: auto; }
}

@media (min-width: 641px) and (max-width: 1200px) {
    article .products .product { width: calc(50% - 20px); }
}

@media (min-width: 641px) and (max-width: 900px) {
    section.products .product { width: calc(50% - 20px); }
}

@media (min-width: 901px) and (max-width: 1200px) {
    section.products .product { width: calc(33.333333333% - 20px); }
}

@media (min-width: 1201px){
    article .products .product { width: calc(33.333333333% - 20px); }

    section.products .product { width: calc(25% - 20px); }
}