/* THE GREY BEHIND A PRODUCT PHOTOGRAPH.
   
   Thule ships its photographs on a square TRANSPARENT canvas that the product
   does not fill - measured on product 994001: 679x835 of content in a 991x991
   square, and 766x605 of content in another. On a white page each product
   therefore floats in a different amount of white, so a row of tiles looks
   ragged and the products look like different sizes.

   The fix is Thule's own, and it is a background colour rather than a crop.
   Confirmed against thule.com's live stylesheet on 2026-08-30 (styles.css,
   .imageSlider .wrapper .splide .splide__slide img):

       aspect-ratio:1/1; background-color:#f5f5f5; object-fit:cover; width:100%

   #f5f5f5 is rgb(245,245,245) - unchanged from the owner's 2026-08-03 note.

   It is applied to the <img> ITSELF, not to a wrapper: the transparent part of
   the file is what has to show the grey, so anything behind the element rather
   than on it would still be covered by the image's own box on a photo that
   does fill its square.

   Harmless on photographs that have no transparency - an opaque photo simply
   covers it - which is why this is applied to every product image rather than
   to a flagged subset. There is nothing in the data that says which files are
   transparent, and guessing per file is exactly the hand-maintained list this
   project keeps removing.

   ⚠ NOT applied to labels, badges, brand logos or the lazy-load placeholder's
   container - only to the elements that render a product photograph. Each
   selector below is one such surface, and they are listed rather than
   collapsed so it is visible which surfaces are covered.

   See docs/db-changes/2026-08-30-gallery-frame-and-zoom.md. */

/* Product page - the desktop 2-column grid */
.pdp-gallery-cell img,
/* Product page - the mobile carousel, and desktop before the grid takes over */
.swiper.main-image .swiper-slide img,
/* Product page - Journal3's own additional-images thumbnail strip */
.product-image .additional-images img,
/* Product page - the full-screen zoom overlay */
.pdp-zoom-item img,
/* Every listing tile: category, search, catalog, manufacturer, special,
   compare, the side_products carousels and the quickview popup all render
   through journal3/products.twig's .product-img anchor */
.product-thumb .image .product-img img,
/* The cart table and the mini-cart */
.cart-table .td-image img,
#cart .td-image img {
  background-color: #ffffff; /* 273: white - the owner, 10-08 („valge — nagu live"); 08-30's #f5f5f5 superseded */
}
