/*
 * product-list.css — the product card.
 *
 * tasks/PLAN_08_SHOP_CATALOGUE_260919.md step C.
 *
 * SHARED BY THREE TYPES: `product-list` (the fifteen category pages and the
 * search), `product-list-selection` (the two home pages' highlight strips)
 * and the crosslink strip at the foot of every product page. All three
 * render themes/default/partials/product/card.phtml, so they have one
 * stylesheet between them and `product-list-selection` ships none of its own.
 *
 * ===========================================================================
 * IT IS SHORT BECAUSE THE THEME ALREADY DOES ALMOST ALL OF IT, AND THAT WAS
 * MEASURED RATHER THAN ASSUMED
 * ===========================================================================
 *
 * The card's geometry is utility classes in the markup — `width-40`,
 * `float-left`, `bg-light-gray`, `padding-20px-all`, `position-relative` —
 * all of which resolve: `.position-relative` is bootstrap's and
 * `img { max-width: 100%; height: auto; }` is css/plugins/default.css:242, so
 * the thumbnail is already contained. styles-5.css carries `.label-offer`
 * (5634), `.product-list .product-block:hover > img` (5766) and
 * `.product-list .buttons` (5768).
 *
 * What was checked and found ABSENT is below. Nothing here overrides a
 * selector that exists elsewhere, so the cascade order — this file is globbed
 * AFTER custom.min.css, see section.styles.phtml — is not load-bearing for
 * any of it.
 *
 * Linked because the file EXISTS. There is no list to add it to and the
 * partial must not link it: two product lists on one page would link it twice
 * (plan 04 decision 6).
 */

/* styles-5.css:5766 changes the thumbnail's opacity on hover and nothing
   anywhere eases it, so the old site's cards snapped. */
.product-list .product-block > img {
    transition: opacity 0.3s ease-in-out;
}

/* The card body holds two floated halves — .product-block and the text
   column — and the bordered wrapper around them has no clearfix of its own.
   Its height therefore comes from whichever half is taller only by accident
   of the surrounding .row. Making it a block formatting context is the one
   line that guarantees the border encloses the card. */
.product-list .border {
    overflow: hidden;
}

/* A 100-character teaser wraps to two or three lines depending on the title
   above it, which left the "Artikel anzeigen" buttons at different heights
   across a row. A card is two columns wide, so this is visible on every
   category page. */
.product-list h3 {
    line-height: 1.35;
}

/* The price paragraph sits directly on top of the button bar: the markup
   gives .buttons no top margin and the <p> before it no bottom one. */
.product-list .text-left > p:last-of-type {
    margin-bottom: 15px;
}