/*
 * Layout rule for the server-rendered category-page template listing.
 *
 * The cards reuse the theme's product tile markup (.product-grid > .item-grid > .item-box >
 * .product-item), so the CORE and TUPSS _product-grid.scss styles style them. Only the layout order
 * and the image fit are card-specific.
 */

/* The theme crops the image to fill the square (object-cover). Templates must show the whole design,
   scaled to the largest size that fits the picture rectangle. */
.bas-my-templates .product-grid .item-grid .item-box .product-item .bas-product-link .picture .bas-picture-container img {
    object-fit: contain;
}

.bas-my-templates {
    /* CORE theme's _category-page.scss makes .page-body a flex container and assigns explicit
       order values to its children (.products-container is order 3, the categorydetails_bottom
       widget zone is order 5). Without an explicit order this card sits at the flexbox default of
       0, rendering above everything else regardless of where it falls in the markup. */
    order: 4;
}