/* Zip Zap Chargers — Custom Branding mobile layer
 * ===========================================================================
 * Loads after mobile.css. Every rule sits inside a max-width query, so the
 * approved desktop rendering is untouched, and every selector matches inline
 * style text already in the markup.
 * ===========================================================================
 */

@media (max-width: 767.98px) {

  /* --- 1. The "Any logo / design / colour / size / font" rotator --------- */
  /* The type is clamp(76px, 12vw, 168px): on a phone 12vw resolves to ~47px,
     so the 76px floor wins and every phrase runs off both edges (the words are
     nowrap by design, and two of them carry a 1.34–1.5em inner scale). Scaled
     to the viewport instead, with the taller line box the big inner words need
     so the widest phrase — "Any size." — still fits inside the column. */
  div[style*="clamp(76px, 12vw, 168px)"] {
    font-size: clamp(34px, 15.2vw, 62px) !important;
    height: 2.4em !important;
    letter-spacing: -.03em !important;
  }

  /* --- 2. The branded-units banner, bigger ------------------------------- */
  /* 16/9 inside a 22px-padded column left the shot about 195px tall on a
     390px screen. It widens past the section padding and takes a 4/3 box, so
     the units read at roughly 1.4x — cover trims a little off the sides, which
     is the tiling pattern, not any single product. */
  div[style*="aspect-ratio: 16 / 9"]:has(> img[alt*="branded for a range"]) {
    aspect-ratio: 4 / 3 !important;
    width: calc(100% + 28px) !important;
    margin: 30px -14px 0 !important;
    border-radius: 20px !important;
  }

  /* --- 3. Testimonial dots stay circles -------------------------------- */
  /* mobile.css gives every button a 44px min-height for touch, which stretched
     the 9px slideshow dots into ovals. The touch target is restored as an
     invisible pseudo-element instead. */
  button[style*="width: 9px"][style*="border-radius: 50%"] {
    min-height: 0 !important;
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
    position: relative !important;
  }
  button[style*="width: 9px"][style*="border-radius: 50%"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  div:has(> button[style*="width: 9px"][style*="border-radius: 50%"]) {
    gap: 16px !important;
  }

  /* 9.5px is a desktop footnote size; on a phone it is below the readable
     floor the rest of the site holds to. */
  p[style*="font-size: 9.5px"] {
    font-size: 11px !important;
    line-height: 1.55 !important;
    margin-top: 22px !important;
  }
}