/*
 * Overrides of main.package.min.css (its source is not in the repo — owner 2026-10-25: "posunutá bílá pozadí, to se mi nelíbí").
 * Product photos come from ASPIRE on a pure white square; the page is #f3f2f5, so every card showed a white box.
 * Same idea as Decor Boutique (_product.scss, 2026-10-04), but `darken` instead of `multiply`: Vans photos already sit
 * on the page grey and multiply would darken them to a visible rectangle (Codex review 2026-10-25); darken turns white
 * into the page colour and leaves the same grey alone. `.product` and `.product-image` carry a transform (stacking
 * context), so the blending backdrop must be set on the photo box itself, otherwise darken meets transparency and the
 * white stays. The loading spinner of `.product-image` would show through the blend, so it goes once the photo loaded.
 */
.product__thumb,
.product-image {
    background-color: #f3f2f5;
}
.product-image:has(.lazyloaded) {
    background-image: none;
}
.product__thumb-image,
.product-image__image {
    mix-blend-mode: darken;
}
/* list card (ProductCardImage, 4:3 like the box): the product already sits at one size on one baseline, so no crop or shift */
.product__thumb-image--card {
    top: 0;
    height: 100%;
    object-fit: contain;
    -webkit-transform: none;
    transform: none;
}
/* the detail photo was a square cut to 90 % height and shifted; show the whole photo instead */
.product-image__image {
    top: 0;
    height: 100%;
    object-fit: contain;
    -webkit-transform: none;
    transform: none;
}