/*
Theme Name:   Astra Child Theme
Author:       NetMechanic
Author URI:   http://netmechanic.co.za
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
*/

.product-container{
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.product-container a{
    text-decoration: none !important;
}


.product-container h3{
    color: #F49816;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 16px;
    margin-bottom: 8px;
}

.view-more-btn{
    display: block;
    max-width: 120px;
    margin: auto auto 0;
    background: #F49816;
    border: 3px solid #303030;
    text-align: center;
    color: white;
    padding: 4px 12px;
    transition: 200ms linear;
    text-transform: uppercase;
    font-weight: 600;
}

.view-more-btn:hover{
    background-color: #303030;
    color: white;
}

.product-container img{
    background-color: white;
    height: 200px !important;
    object-fit: contain;
}

.custom-pinterest span:first-of-type{
    max-width: 236px !important;
}

.custom-pinterest iframe{
    background: aquamarine;
}

.product-container.col-3-layout{
    grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.product-container.col-4-layout{
    grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.pinterest-badge,.pinterest-badge-product-page{
    position: absolute;
    top: 12px;
    right: 12px;
    height: 40px;
    color: #fff;
    background: #e60023 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzBweCIgd2lkdGg9IjMwcHgiIHZpZXdCb3g9Ii0xIC0xIDMxIDMxIj48Zz48cGF0aCBkPSJNMjkuNDQ5LDE0LjY2MiBDMjkuNDQ5LDIyLjcyMiAyMi44NjgsMjkuMjU2IDE0Ljc1LDI5LjI1NiBDNi42MzIsMjkuMjU2IDAuMDUxLDIyLjcyMiAwLjA1MSwxNC42NjIgQzAuMDUxLDYuNjAxIDYuNjMyLDAuMDY3IDE0Ljc1LDAuMDY3IEMyMi44NjgsMC4wNjcgMjkuNDQ5LDYuNjAxIDI5LjQ0OSwxNC42NjIiIGZpbGw9IiNmZmYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+PHBhdGggZD0iTTE0LjczMywxLjY4NiBDNy41MTYsMS42ODYgMS42NjUsNy40OTUgMS42NjUsMTQuNjYyIEMxLjY2NSwyMC4xNTkgNS4xMDksMjQuODU0IDkuOTcsMjYuNzQ0IEM5Ljg1NiwyNS43MTggOS43NTMsMjQuMTQzIDEwLjAxNiwyMy4wMjIgQzEwLjI1MywyMi4wMSAxMS41NDgsMTYuNTcyIDExLjU0OCwxNi41NzIgQzExLjU0OCwxNi41NzIgMTEuMTU3LDE1Ljc5NSAxMS4xNTcsMTQuNjQ2IEMxMS4xNTcsMTIuODQyIDEyLjIxMSwxMS40OTUgMTMuNTIyLDExLjQ5NSBDMTQuNjM3LDExLjQ5NSAxNS4xNzUsMTIuMzI2IDE1LjE3NSwxMy4zMjMgQzE1LjE3NSwxNC40MzYgMTQuNDYyLDE2LjEgMTQuMDkzLDE3LjY0MyBDMTMuNzg1LDE4LjkzNSAxNC43NDUsMTkuOTg4IDE2LjAyOCwxOS45ODggQzE4LjM1MSwxOS45ODggMjAuMTM2LDE3LjU1NiAyMC4xMzYsMTQuMDQ2IEMyMC4xMzYsMTAuOTM5IDE3Ljg4OCw4Ljc2NyAxNC42NzgsOC43NjcgQzEwLjk1OSw4Ljc2NyA4Ljc3NywxMS41MzYgOC43NzcsMTQuMzk4IEM4Ljc3NywxNS41MTMgOS4yMSwxNi43MDkgOS43NDksMTcuMzU5IEM5Ljg1NiwxNy40ODggOS44NzIsMTcuNiA5Ljg0LDE3LjczMSBDOS43NDEsMTguMTQxIDkuNTIsMTkuMDIzIDkuNDc3LDE5LjIwMyBDOS40MiwxOS40NCA5LjI4OCwxOS40OTEgOS4wNCwxOS4zNzYgQzcuNDA4LDE4LjYyMiA2LjM4NywxNi4yNTIgNi4zODcsMTQuMzQ5IEM2LjM4NywxMC4yNTYgOS4zODMsNi40OTcgMTUuMDIyLDYuNDk3IEMxOS41NTUsNi40OTcgMjMuMDc4LDkuNzA1IDIzLjA3OCwxMy45OTEgQzIzLjA3OCwxOC40NjMgMjAuMjM5LDIyLjA2MiAxNi4yOTcsMjIuMDYyIEMxNC45NzMsMjIuMDYyIDEzLjcyOCwyMS4zNzkgMTMuMzAyLDIwLjU3MiBDMTMuMzAyLDIwLjU3MiAxMi42NDcsMjMuMDUgMTIuNDg4LDIzLjY1NyBDMTIuMTkzLDI0Ljc4NCAxMS4zOTYsMjYuMTk2IDEwLjg2MywyNy4wNTggQzEyLjA4NiwyNy40MzQgMTMuMzg2LDI3LjYzNyAxNC43MzMsMjcuNjM3IEMyMS45NSwyNy42MzcgMjcuODAxLDIxLjgyOCAyNy44MDEsMTQuNjYyIEMyNy44MDEsNy40OTUgMjEuOTUsMS42ODYgMTQuNzMzLDEuNjg2IiBmaWxsPSIjZTYwMDIzIj48L3BhdGg+PC9nPjwvc3ZnPg==) 10px 50% no-repeat;
    background-size: 18px 18px;
    text-indent: 36px;
    font-size: 14px;
    line-height: 40px;
    font-weight: bold;
    border-radius: 20px;
    padding: 0 12px 0 0;
    width: auto;
    z-index: 2;
}

.pinterest-badge-product-page{
    right: auto;
}

@media screen and (max-width:1024) {
    .product-container{
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
}

@media screen and (max-width:768) {
    .product-container.col-4-layout,.product-container{
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media screen and (max-width:550) {
    .product-container.col-4-layout,.product-container,.product-container.col-3-layout{
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}