/*
 * Shared storefront contract for product cards.
 *
 * Product artwork comes in both portrait and landscape proportions.  Every
 * catalog keeps its own media aspect ratio, while the image is fitted inside
 * that stable box.  This keeps neighbouring cards aligned and prevents a
 * landscape mock-up from being cropped or stretching the whole row.
 *
 * The explicit white surface also gives transparent PNG/WebP files a
 * predictable appearance on category sections with tinted backgrounds.
 */

.csm-card,
.smcp-product-card,
.smcp-related-card,
.spv2-related-card,
.cmp-product-card,
.cmpo-related-card,
.ap-product-card,
.audio-product-card,
.art-product-card,
.opg-card {
    background: #fff !important;
}

.csm-img,
.smcp-product-img,
.smcp-related-media,
.spv2-related-img,
.cmp-product-media,
.cmpo-related-media,
.ap-product-image,
.audio-product-image,
.art-product-image,
.opg-img {
    background: #fff !important;
}

.csm-img > img,
.smcp-product-img > img,
.smcp-related-media > img,
.spv2-related-img > img,
.cmp-product-media > img,
.cmpo-related-media > img,
.ap-product-image > img,
.audio-product-image > img,
.art-product-image > img,
.opg-img > img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff;
}

/* Product names are a second, predictable path to the product page. */
.csm-title-link,
.smcp-title-link,
.csm-title-link:hover,
.smcp-title-link:hover,
.csm-title-link:visited,
.smcp-title-link:visited {
    color: inherit;
    text-decoration: none;
}

.csm-title-link:hover,
.smcp-title-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.csm-title-link:focus-visible,
.smcp-title-link:focus-visible {
    border-radius: 4px;
    outline: 3px solid rgba(32, 40, 56, 0.24);
    outline-offset: 3px;
}