/* Zip Zap Chargers — SHOP ALL mobile image-fit corrections
 * ===========================================================================
 * Linked from shop-all.html only, after mobile.css. Everything sits inside
 * max-width: 767.98px, so tablet and desktop presentation is untouched.
 * Card sizes, layout, copy, badges, buttons and the image files themselves are
 * not touched — this file only corrects how three images sit inside the frames
 * they already have.
 * ===========================================================================
 */

@media (max-width: 767.98px) {

  /* --- Gen 3 hero card ---------------------------------------------------- */
  /* The Gen 3 shot read noticeably larger than the Zap Pad beside it once the
     two cards stack. Same frame, same object-fit — only the inset grows, which
     scales the product down a touch so the pair reads as a matched set. */
  a[href="/zip-zap-plus-gen-3"] > img[src="uploads/shop-gen3-v2.png"] {
    padding: 19% !important;
  }

  /* --- Bundle cards: contain the whole composition ------------------------ */
  /* Both images are laid out at 140% of their frame, which is a deliberate
     desktop crop but on a phone pushed the outer pieces of the composition past
     the rounded frame. Back to 100% so the complete group fits and centres;
     the parent already has display:flex + centre alignment. */
  a[href="/zip-and-zap-pack"] img[src="uploads/zz-pack-white-green.png"],
  a[href="/ultimate-travel-pack"] img[src="uploads/Ultimate Pack.png"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
  }
}