﻿div.title {
    border-radius: 5px;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1px;
}

    div.title > span {
        direction: ltr !important;
        color: #fff !important;
    }
    
.product {
    text-align: right;
    width: 24.9%;
    float: right;
    margin: 1px 2px !important;
    border-radius: 5px !important;
    border: solid 1px #ccc
}

button.button-add-cart, input.button-add-cart {
    width: 92%;
    background-color: #000;
    border: 0px;
    color: #fff;
    font-size: 18px;
    height: 32px;
    float: right;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align:center;
}


button.hidden {
    display: none;
}

.fa-heart {
    font-size: 18px;
}


.fav {
    width: 28px;
    float: left;
    margin-left: -10px !important;
}

div.inner-space {
    padding: 30px;
}

div.products > div.product > div.inner-space > div > img.product-image {
    /* height: 250px;*/
}

div.products > div.product > div.inner-space > img.sticker {
    position: absolute;
    margin-right: 10px;
}

.product:nth-child(1n) {
    margin-right: 0 !important;
}

.product:nth-child(4n) {
    margin-left: 0 !important;
}

.product-price span {
    font-weight: bolder !important;
}


@media only screen and  (orientation: portrait) {
    .product {
        width: 49.65% !important;
    }

    button.button-add-cart, input.button-add-cart {
        width: 79%
    }

    div.title > span {
        font-size: 27px !important;
    }

    div.inner-space {
        padding: 10px;
        background-color: #fff;
    }

    

    .sticker {
        width: 40px;
        margin-right: -9px !important;
        margin-top: -7px !important;
    }

    button.button-add-cart, input.button-add-cart {
        width: 83% !important;
        border-radius: 5px;
    }

    .product-name {
        margin-top: 0 !important;
        display: inline-block;
    }

        .product-name > span {
            font-size: 1.5em !important;
        }

    .product-price span {
        letter-spacing: 0.01em;
        font-weight: bolder !important;
    }

    .product-price {
        margin: 2px !important;
    }

    .fav {
        margin-left: -5px !important;
    }

    .product:nth-last-child(1):nth-child(odd) {
        width: 100% !important;
/*        margin: 0;
*/    }

        .product:nth-last-child(1):nth-child(odd) button.button-add-cart,
        .product:nth-last-child(1):nth-child(odd) input.button-add-cart {
            width: 90% !important;
        }

    .product:nth-child(2n) {
        margin-left: 0 !important;
    }
}
@media only screen and (min-width: 412px) and (orientation: portrait) {
   
}
@media only screen and (min-width: 980px) and (orientation: portrait) {
    .product {
        width: 49.65% !important;
    }
}

@media only screen and (max-width:800px) and (orientation: landscape) {
    .sticker {
        width: 40px !important
    }

    div.inner-space .product-image {
        width: 160px !important;
        margin-right: -15px;
    }
}
@media only screen and (min-width:800px)and (min-device-height: 600px)and (orientation: landscape) {
    /*desktop 1024x768*/
    .product {
        width: 24.8% !important;
    }

    button.button-add-cart, input.button-add-cart {
        width: 85%;
    }

    div.products > div.product > div.inner-space > img.sticker {
        margin-top: -24px !important;
        margin-right: -22px !important;
        width: 45px;
    }
}
@media only screen and (min-width:1024px)and (min-device-height: 768px)and (orientation: landscape) {
    /*desktop 1024x768*/
    .product {
        width: 24.82% !important;
    }

    button.button-add-cart, input.button-add-cart {
        width: 90%;
    }

    div.products > div.product > div.inner-space > img.sticker {
        margin-top: -22px !important;
        margin-right: -20px !important;
        width: 60px;
    }
}
@media only screen and (min-width:1280px)and (min-device-height: 600px) and (orientation: landscape) {
    /*desktop 1280x600*/
    .product {
        width: 24.82% !important;
    }

    div.products > div.product > div.inner-space > img.sticker {
        margin-top: -5px !important;
        margin-right: -5px !important;
        width: auto !important;
    }

    .product-price span {
        letter-spacing: 0.01em;
        font-size: 16px;
    }
}
@media only screen and (min-width:1528px)and (min-device-height: 864px) and (orientation: landscape) {
    .product {
        width: 24.9% !important;
    }

    .product-price span {
        letter-spacing: 0.05em;
        font-size: 24px;
    }
}
@media only screen and (min-width:1912px)and (min-device-height: 1080px) and (orientation: landscape) {
    .product {
        width: 24.92% !important;
    }
    .product-price span {
        letter-spacing: 0.05em;
        font-size: 24px;
    }
}
