/**********************************************
 REDUCE PRODUCT CONTAINER SIZE
**********************************************/

/* Product container on listing pages */
.product-item,
.productbox,
.zc-product-item {
    max-width: 220px !important;   /* shrink width */
    padding: 10px !important;
    margin: 10px auto !important;
}

/* Center everything inside the product container */
.product-item * {
    text-align: center !important;
}


/**********************************************
 REDUCE PRODUCT IMAGE SIZE (Category/Landing)
**********************************************/

.product-item img,
.productbox img,
.product-thumbnail img {
    max-width: 70% !important;   /* reduce image */
    height: auto !important;
    margin: 0 auto !important;
}


/**********************************************
 REDUCE PRODUCT TITLE, PRICE & DESCRIPTION TEXT
**********************************************/

/* Title */
.product-name,
.product-title,
.product-item .name,
.productbox .name {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Price */
.product-price,
.price,
.productbox .price {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Description (if visible on listing page) */
.product-description,
.zc-product-description {
    font-size: 13px !important;
}


/**********************************************
 PRODUCT DETAIL PAGE (Inside product view)
**********************************************/

/* Main image on product page */
.product-images img,
#product-gallery img {
    max-width: 80% !important;
}

/* Product title on details page */
#product-name,
.product-single .product-title {
    font-size: 18px !important;
}

/* Price on product details page */
#product-price,
.product-single .price {
    font-size: 16px !important;
}

/* Description on product details page */
#product-description,
.product-single .description {
    font-size: 14px !important;
}


/**********************************************
 MOBILE RESPONSIVENESS
**********************************************/
@media (max-width: 768px) {

    .product-item {
        max-width: 160px !important;  /* even smaller on mobile */
    }

    .product-item img {
        max-width: 60% !important;
    }

    .product-name,
    .product-title {
        font-size: 14px !important;
    }

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