/**
 * Product and category image ratio lock
 *
 * Image Handler preserves each source image's own aspect ratio - it does not pad
 * to a fixed box. Every image grid in this theme was constrained by `max-width`
 * only, so height ran free: a 4:3 photo rendered 225x169 in a listing while a
 * square one rendered 225x225, and that 56px difference pushed the name, price
 * and button of the odd tile out of line with the rest of its row.
 *
 * Giving each image a fixed 4:3 box and sitting the picture inside it with
 * `object-fit: contain` makes every tile the same height whatever the source
 * ratio, so images no longer have to be cropped or padded by hand to match the
 * house ratio. The white background matches the tile, so the letterboxing does
 * not read as a border. Same approach as `.brandCell img` in stylesheet.css:512.
 *
 * 4:3 is the house ratio - 1,123 of the 1,137 catalogue images already are.
 * Each box below is the max-width already set in stylesheet.css:515-522 with the
 * matching 4:3 height, so nothing changes size; only height behaviour changes.
 *
 * WHY FIXED PIXELS, NOT PERCENTAGES. Every one of these tiles shrink-wraps its
 * image: `.categoryListBoxContents` computes to `width: 0`, and the wrappers on
 * the specials and listing grids size themselves from the image they contain.
 * A percentage width is therefore circular and collapses the image - measured at
 * 2x2 on category tiles and 0x0 on specials. `max-width: none` is required for
 * the same reason: the global `img{max-width:100%}` in responsive.css:13
 * re-introduces the circularity. Fixed boxes do not depend on the parent at all.
 * They do not shrink on small screens, but they do not need to - verified no
 * horizontal overflow at 375px, where a 225px tile sits inside the column.
 *
 * VERIFIED LIVE, by injecting these rules on the running site:
 *   Proxxon Drill/Grinder listing (mixes 4:3 and 1:1) - image heights
 *     168/169/225 became a uniform 169; tile titles 618/619/675 became 619.
 *   Power Carving category tiles - 189/189/183/189 became a uniform 190.
 *   Special Offers - unchanged at 200x150, no collapse.
 *   All three at 375px - no horizontal overflow.
 *
 *   Abrasives category tiles on test (a 340x340 square among 450x337) - uniform
 *     252x190, labels on two rows only.
 *   Featured Products page on test (two 302x302 squares among 400x299) - uniform
 *     225x169. That page renders through the standard listing path, so
 *     `listingProductImage` already covered it.
 *
 * CROSS-SELL needs no rule of its own: xsell2_products.php emits its tiles with
 * `class="centerBoxContentsAlsoPurch xsell-centerbox"`, so the also-purchased
 * selector covers it. Confirmed on the live Peter Child Pyrography Machine page
 * by swapping a 1200x1200 square into a cross-sell tile: it jumped to 200x200
 * beside its 200x150 neighbours, and the rule below returned all six to 200x150,
 * also fixing a pre-existing 200x147 outlier.
 *
 * THE FEATURED BOX on the home page is different from the Featured Products
 * page: it has no max-width anywhere in the theme and was rendering four
 * different sizes in one row - 135x135, 179x135, 180x134, 180x123. It is given
 * the 200x150 box that the New Products and Specials boxes already use on that
 * same page. 180x135 would preserve the old scale exactly if that is preferred.
 *
 * PRODUCT MAIN IMAGE is capped in height rather than boxed. With max-width alone
 * a square photo rendered 400x400 against a 4:3 photo's 400x300, making the page
 * a third taller for no gain. Capping height to 300 renders a square at 300x300
 * and leaves 4:3 at 400x300, so no product page stands taller than another. A
 * fixed 400x300 box with object-fit was the alternative, but it would reserve
 * 400px of width to show a 300px-wide picture, and the main image has no
 * neighbours to align with. Measured on the ProNet Mixed Pack, now 1200x1200:
 * wrapper height 404px -> 304px.
 *
 * THE CART needed the config raising as well as a box here. Its thumbnails were
 * small for every product because IMAGE_SHOPPING_CART_WIDTH/HEIGHT sat at about
 * 50x40 - a database setting, not CSS. But raising the config alone leaves the
 * shapes uneven, because Image Handler fits each image inside the configured
 * budget keeping its own ratio: at 80x60 a 4:3 photo came back 80x59 and a
 * square one 60x60. With no rule on `.cartImage img` the browser then drew each
 * at its own size, so square products genuinely looked square in the cart while
 * the same image on a listing sat on a white 4:3 backdrop. The box below gives
 * the cart that backdrop. Measured: row heights 94/93/93 before and after, so it
 * costs no vertical space - the text cells already set the row height.
 *
 * SHARPNESS: the box below is the DISPLAY size, and the Image Handler setting
 * should be roughly twice it, not equal to it. Every other surface here is
 * already oversampled - the category listing serves a 400x300 file into a
 * 225x169 box, 1.78x - which is what keeps it sharp on a 2x display. Setting
 * IMAGE_SHOPPING_CART_WIDTH/HEIGHT to 80x60 to match this box gave a 1.00x
 * ratio and visibly soft thumbnails. They should be 160x120, i.e. 2x the box.
 * Raising them does not move the layout: with the box fixed here, a 1200x1200
 * source still renders in exactly 80x60 (verified on staging).
 *
 * So the two settings are related but not equal - if the display size below
 * changes, set the admin values to about double the new figure.
 *
 * ADDITIONAL-IMAGE THUMBNAILS turned out to be affected after all, though not by
 * height running free - by the opposite, the grid cropping them. Freeing the
 * height fixed the cropping but let each cell take its own image's ratio, which
 * then misaligned any product whose extras mix ratios; they are now boxed to the
 * same 4:3 as everything else here. See the note above their rule at the foot of
 * this file. The 1000x1000 copies of those images that measure 0x0 are the
 * hidden `div.imgmodal` lightbox duplicates, not a fault.
 *
 * NOT COVERED: review thumbnails - no max-width in the theme, and not yet seen
 * carrying a square image.
 *
 * Named 'zz' so it loads after every other stylesheet_* file in this folder.
 */

img.listingProductImage                { width: 225px; height: 169px; }

.centerBoxContentsNew img,
.centerBoxContentsSpecials img,
.centerBoxContentsAlsoPurch img,
.centerBoxContentsFeatured img,
#newProductsDefault img,
#specialsListing img                   { width: 200px; height: 150px; }

.categoryListBoxContents img           { width: 250px; height: 188px; }

/* display size - the admin IMAGE_SHOPPING_CART_* values should be ~2x this */
.cartImage img                         { width: 80px;  height: 60px;  }

img.listingProductImage,
.centerBoxContentsNew img,
.centerBoxContentsSpecials img,
.centerBoxContentsAlsoPurch img,
.centerBoxContentsFeatured img,
#newProductsDefault img,
#specialsListing img,
.categoryListBoxContents img,
.cartImage img {
  max-width: none;
  object-fit: contain;
  background: #fff;
}

/* --- additional-image thumbnails: stop the grid cropping them ------------ */

/* stylesheet_image_modals.css:20 sets `.image-grid img { width:100%; height:100%;
   object-fit:cover }` - deliberately, its own comment says "zoomed and cropped to
   fit the square container". But the cells are not square: the grid column is
   100px while the row comes out taller, so a square thumbnail was being filled
   into a 102x108 cell and losing about 6% off its sides. Measured on the Beber
   BEBCCK page: 260x260 source, 102x108 cell, 6% cropped.

   Letting the height follow the width removes the mismatch - the box then has
   the image's own ratio, so nothing is cropped whatever the source shape.
   Verified live: square extras 102x108 -> 102x102, and a 260x220 extra
   102x93 -> 102x87, both 0% cropped.

   `contain` is belt and braces. With height:auto the box already matches the
   image, so cover and contain are identical today; contain means it stays
   uncropped if anything ever constrains the height again.

   The trade-off predicted here did turn up. With the height following the width,
   every cell takes its own image's ratio, so a product whose extras mix ratios
   shows a ragged grid: on the Ramia Superb 2100 package deal (product 5318,
   eleven extras) the thumbnails measured 127x84 for the 3:2 photos, 127x127 for
   a square one, and 127x91 and 127x79 for two odd ones, leaving gaps down the
   rows. A package deal is exactly the case the earlier note discounted - its
   images come from several products, not one photo set.

   So the box is pinned to the house 4:3 ratio, the same shape every listing,
   category and cart box in this file already uses, and `contain` letterboxes
   anything that is not 4:3 onto white. That is why `contain` was worth keeping
   above even when it was doing nothing.

   `aspect-ratio` rather than a fixed pixel height, and this is the one grid
   where a relative size is correct: the cell width comes from the grid track
   (`repeat(auto-fill, minmax(100px, 1fr))`), not from the image, so there is
   none of the circularity that collapses the listing tiles. The height simply
   follows whatever width the track gives, at every breakpoint, unlike the fixed
   pixel boxes above.

   Scoped to `.back img` - the thumbnail wrapper from tpl_image_additional.php.
   The full-size copies inside `div.imgmodal` are also `.image-grid img`, and
   boxing those would letterbox the lightbox itself. Verified: with this rule
   live, the square extra still opens 634x644 and a 3:2 one 951x644.

   VERIFIED LIVE on product 5318 by injecting this rule: thumbnails
   84/127/84/84/84/84/84/84/84/84/91/79 became a uniform 95, and the grid got
   17px shorter rather than taller. At 409px wide, where the grid drops to three
   columns of 112px, 75/112/75/.../80/70 became a uniform 84 with no horizontal
   overflow.

   Overridden from here rather than by editing stylesheet_image_modals.css: this
   file sorts after it, so the same specificity wins on load order and the stock
   file stays untouched. */

.image-grid img {
    height: auto;
    object-fit: contain;
}

.image-grid .back img {
    aspect-ratio: 4 / 3;
    background: #fff;
}

/* --- product main image: cap the height, do not box it ------------------- */

#productMainImage img {
  max-width: 400px;
  max-height: 300px;
  width: auto;
  height: auto;
}