/* =========================================================
   THINK ABOUT BOOKS
   GLOBAL BOOK THUMBNAIL SYSTEM

   Desktop stage: 300 x 300
   Mobile/tablet: responsive square, max 300
   Covers never stretched.
   ========================================================= */


/* =========================================================
   1. XSTORE / WOOCOMMERCE PRODUCT GRIDS
   Shop, categories, search, archives, recommendations
   ========================================================= */

.woocommerce ul.products li.product .product-image-wrapper,
.products-grid .product-image-wrapper,
.products-loop .product-image-wrapper {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    background:#f7f9fa !important;
}


.woocommerce ul.products li.product a.product-content-image,
.products-grid a.product-content-image,
.products-loop a.product-content-image {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    margin:0 auto !important;
}


.woocommerce ul.products li.product
img.attachment-woocommerce_thumbnail,

.products-grid
img.attachment-woocommerce_thumbnail,

.products-loop
img.attachment-woocommerce_thumbnail {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    margin:0 auto !important;

    display:block !important;

    object-fit:contain !important;
    object-position:center !important;
}


/* =========================================================
   2. TAB HOMEPAGE / CUSTOM BOOK CARDS
   ========================================================= */

.tab-product-card__image {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    aspect-ratio:1 / 1 !important;

    margin-left:auto !important;
    margin-right:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;

    box-sizing:border-box !important;

    background:#f7f9fa !important;
}


.tab-product-card__image img {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    display:block !important;

    margin:0 auto !important;

    object-fit:contain !important;
    object-position:center !important;
}


/* =========================================================
   3. XSTORE CAROUSEL BOOK CARDS
   ========================================================= */

.products-slider
.product-image-wrapper,

.swiper-entry.related-products
.product-image-wrapper {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    margin-left:auto !important;
    margin-right:auto !important;

    overflow:hidden !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background:#f7f9fa !important;
}


.products-slider
.product-content-image,

.swiper-entry.related-products
.product-content-image {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
}


.products-slider
img.attachment-woocommerce_thumbnail,

.swiper-entry.related-products
img.attachment-woocommerce_thumbnail {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    display:block !important;

    object-fit:contain !important;
    object-position:center !important;
}


/* =========================================================
   4. GENERIC TAB BOOK RESULTS
   Only WooCommerce thumbnail images.
   ========================================================= */

.tab-book-grid
img.attachment-woocommerce_thumbnail,

.tab-books-grid
img.attachment-woocommerce_thumbnail,

.tab-book-results
img.attachment-woocommerce_thumbnail {
    width:300px !important;
    height:300px !important;

    max-width:100% !important;

    display:block !important;

    margin-left:auto !important;
    margin-right:auto !important;

    object-fit:contain !important;
    object-position:center !important;
}


/* =========================================================
   5. RESPONSIVE SAFETY

   Below 300px available width:
   remain square but shrink responsively.
   ========================================================= */

@media(max-width:767px) {

    .woocommerce ul.products li.product .product-image-wrapper,
    .woocommerce ul.products li.product a.product-content-image,

    .products-grid .product-image-wrapper,
    .products-grid a.product-content-image,

    .products-loop .product-image-wrapper,
    .products-loop a.product-content-image,

    .tab-product-card__image,

    .products-slider .product-image-wrapper,
    .products-slider .product-content-image,

    .swiper-entry.related-products .product-image-wrapper,
    .swiper-entry.related-products .product-content-image {
        width:100% !important;

        max-width:300px !important;

        height:auto !important;

        aspect-ratio:1 / 1 !important;
    }


    .woocommerce ul.products li.product
    img.attachment-woocommerce_thumbnail,

    .products-grid
    img.attachment-woocommerce_thumbnail,

    .products-loop
    img.attachment-woocommerce_thumbnail,

    .tab-product-card__image img,

    .products-slider
    img.attachment-woocommerce_thumbnail,

    .swiper-entry.related-products
    img.attachment-woocommerce_thumbnail {
        width:100% !important;
        height:100% !important;

        max-width:300px !important;

        object-fit:contain !important;
    }

}