/* ============================================================
   CURVA — RESPONSIVE: SHOP (shop.html)
   The #productsContainer grid rendered by shop.js.
   Load after responsive-common.css.
   ============================================================ */

   @media (min-width:768px) and (max-width:991.98px){

    #productsContainer{
        --bs-gutter-x: 20px !important;
        --bs-gutter-y: 25px !important;
}

    #productsContainer > *{
        width: 50% !important;
        flex: 0 0 50% !important;
}

    #productsContainer .product-card{
        width: 100% !important;
        max-width: 100% !important;
}

    #productsContainer .product-card img{
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: cover;
}

}

@media (max-width:767.98px){

    #productsContainer{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 18px !important;
}

    #productsContainer > *{
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
}

    #productsContainer .product-card{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
}

    #productsContainer .product-card img{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
}

    #productsContainer .product-card h3{
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin-top: 10px !important;
        overflow-wrap: break-word !important;
}

    #productsContainer .product-card p{
        font-size: 12px !important;
}

    #productsContainer .product-card .price{
        font-size: 16px !important;
}

}

@media (max-width:510px){

    #productsContainer{
        --bs-gutter-y: 18px !important;
}

    #productsContainer > *{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
}

}

@media (max-width:425px){

    #productsContainer{
        --bs-gutter-x: 6px !important;
        --bs-gutter-y: 14px !important;
}

    #productsContainer > *{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
}

    #productsContainer .product-card{
        width: 100% !important;
        border-radius: 10px !important;
}

    #productsContainer .product-card img{
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
}

    #productsContainer .product-card h3{
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin-top: 8px !important;
}

    #productsContainer .product-card p{
        font-size: 11px !important;
}

    #productsContainer .product-card .price{
        font-size: 14px !important;
}

}

@media (max-width:360px){

    #productsContainer{
        --bs-gutter-x: 4px !important;
        --bs-gutter-y: 12px !important;
}

    #productsContainer > *{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
}

    #productsContainer .product-card h3{
        font-size: 13px !important;
}

    #productsContainer .product-card p{
        font-size: 10px !important;
}

    #productsContainer .product-card .price{
        font-size: 13px !important;
}

}