/* ==========================================================================
   GTM image system
   Loaded after style.css and responsive.css so these rules win.

   Fixes three faults:
   1. Product images were stretched. .wf-card-img img had width:100% and a
      fixed height:350px with no object-fit, so every picture was squashed
      into that box whatever its real shape. Browsers resolved the unsized
      flex parent differently, which is why it looked right in one browser
      and wrong in another.
   2. No uniform frame. Each card took the shape of its own image, so a
      portrait photo and a landscape photo produced different sized cards.
   3. Images were never deferred. Every picture on a page downloaded at once.
      loading="lazy" in the templates handles that; the aspect-ratio rules
      here reserve the space so nothing jumps while they arrive.

   contain = the whole machine stays visible, never cropped, never distorted.
   cover   = fills the frame and crops evenly. Use for photos, never products.
   ========================================================================== */

/* -- 1. the product card ------------------------------------------------- */
.wf-card-img{
  height:auto;
  aspect-ratio:4 / 3;
  background:#EEF3F7;
  border-bottom:1px solid #E3E8EE;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.wf-card-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:14px;
  box-sizing:border-box;
}

/* -- 2. reusable frames -------------------------------------------------- */
.gtm-img{
  display:block;
  width:100%;
  max-width:100%;
  background:#EEF3F7;
  box-sizing:border-box;
}
.gtm-img--product{ aspect-ratio:4 / 3;  object-fit:contain; padding:14px }
/* 2026-10-18: a logo gets NO plate behind it — it sits straight on whatever
   card or page it is on, like .gtm-brandrow img already did for the
   catalogue rows.

   There were two plates, which is why removing one was not enough. This rule
   carried its own background:#fff, and .gtm-img above it paints #EEF3F7 on
   every image in the system. Dropping the white only uncovered the pale grey
   underneath, so background must be stated here, not just left off.

   The #EEF3F7 on .gtm-img is right for PRODUCT photos — it is the well a
   contained shot sits in, and the glass layer re-tints it per theme. Logos
   are the exception, not the rule, so this overrides rather than changing
   the base. */
.gtm-img--logo   { aspect-ratio:3 / 2;  object-fit:contain; padding:18px;
                   background:transparent }
.gtm-img--photo  { aspect-ratio:16 / 9; object-fit:cover }
.gtm-img--square { aspect-ratio:1 / 1;  object-fit:cover }
.gtm-img--wide   { aspect-ratio:21 / 9; object-fit:cover }

@media (max-width:575px){
  .gtm-img--wide{ aspect-ratio:16 / 9 }
}

/* -- 3. nothing overflows its column ------------------------------------- */
.main img{ max-width:100% }

/* -- 4. testimonial avatars --------------------------------------------- */
/* These had no theme rules at all, so each one took the shape of its own
   upload. Fixed round frame, cropped evenly from the centre. */
.testimonial-thumb img,
.author-img img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:50%;
  background:#EEF3F7;
  box-sizing:border-box;
}