/*
 * e-flo responsive layer.
 *
 * The design export ships no media queries and styles everything inline, so the
 * layout is retrofitted here.
 *
 * IMPORTANT — why selectors are doubled up:
 * The pages are pre-rendered, and writing the DOM back out re-serialises every
 * inline style: `height:72px` becomes `height: 72px`, `#0E7A5F` becomes
 * `rgb(14, 122, 95)`. An attribute-substring selector written against the source
 * markup silently matches nothing in the pre-rendered output — which is exactly
 * how the site ended up with no working responsive rules at all. Each rule
 * therefore matches BOTH spellings, and prefers a stable hook where one exists:
 *   [data-i18n="t000"]  the nav link group
 *   #checkout-panel     the ordering panel
 * Those are build-time ids and survive re-serialisation.
 */

/* Nothing may push the page wider than the screen. Without this the browser
   zooms out to fit the widest element and the whole page renders tiny. */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  /* --- containers ------------------------------------------------------ */
  [style*="max-width:1180px"], [style*="max-width: 1180px"],
  [style*="max-width:1120px"], [style*="max-width: 1120px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- grids collapse to one column ------------------------------------ */
  [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:1.05fr"], [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns:1.1fr"], [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns:2fr"], [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- flex rows wrap instead of overflowing ---------------------------
     Two parts, and BOTH are needed. flex-wrap lets a row break onto a second
     line; `min-width: 0` is what actually allows an item to shrink below its
     content width — without it a flex item refuses to get narrower than its
     content and pushes the page sideways. Forcing `flex-basis: 100%` instead
     was tried and produced worse results, because in a column container the
     basis applies to height, not width. */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
  [style*="display:flex"] > *, [style*="display: flex"] > * {
    min-width: 0;
    max-width: 100%;
  }
  /* …but keep genuinely inline pairs together */
  [style*="display:inline-flex"], [style*="display: inline-flex"] { flex-wrap: nowrap; }

  /* --- headline sizes -------------------------------------------------- */
  [style*="font-size:74px"], [style*="font-size: 74px"] { font-size: 36px !important; line-height: 1.06 !important; }
  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 34px !important; line-height: 1.06 !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 32px !important; line-height: 1.07 !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 32px !important; line-height: 1.07 !important; }
  [style*="font-size:54px"], [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size:52px"], [style*="font-size: 52px"] { font-size: 29px !important; }
  [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 26px !important; }
  [style*="font-size:38px"], [style*="font-size: 38px"] { font-size: 25px !important; }
  [style*="font-size:36px"], [style*="font-size: 36px"] { font-size: 25px !important; }
  [style*="font-size:34px"], [style*="font-size: 34px"] { font-size: 24px !important; }

  /* --- section padding ------------------------------------------------- */
  [style*="padding:88px 32px"], [style*="padding: 88px 32px"] { padding: 44px 20px !important; }
  [style*="padding:72px 32px"], [style*="padding: 72px 32px"] { padding: 40px 20px !important; }
  [style*="padding:44px 40px"], [style*="padding: 44px 40px"] { padding: 26px 20px !important; }

  /* --- the nav bar ------------------------------------------------------
     The link group is hidden on small screens; the logo and the order CTA
     remain. [data-i18n="t000"] is the link group on the pre-rendered home
     page and is stable across re-serialisation. */
  /* Hide the secondary nav links but KEEP the last child, which is the
     "Order now" CTA — hiding the whole group removed the primary call to
     action on every phone. */
  [data-i18n="t000"] { flex-wrap: wrap !important; gap: 10px !important; }
  [data-i18n="t000"] > a:not(:last-child) { display: none !important; }
  nav .navlinks { display: none !important; }
  [style*="height:72px"], [style*="height: 72px"] {
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* --- the ordering panel ---------------------------------------------- */
  #checkout-panel [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* --- wide fixed columns stop being fixed ----------------------------- */
  [style*="flex:0 0 300px"], [style*="flex: 0 0 300px"],
  [style*="min-width:280px"], [style*="min-width: 280px"],
  [style*="min-width:260px"], [style*="min-width: 260px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }







  /* --- equal-width card columns get one per row -------------------------
     Cards use `flex: 1 1 0%`, which makes them share the row and shrink to a
     third of the width — three cards became unreadable slivers on a phone.
     Only flex-BASIS is overridden here: setting the whole `flex` shorthand or
     adding min-width:100% adds the row gap on top of a full-width child and
     pushes the page sideways. Basis alone makes each card claim a full line
     and wrap, which is what we want. */
  [style*="display: flex"] > [style*="flex: 1 1 0%"],
  [style*="display:flex"] > [style*="flex:1 1 0%"],
  [style*="display: flex"] > [style*="flex: 1 1 0px"],
  [style*="display: flex"] > [style*="flex: 1 1 auto"] {
    flex-basis: 100% !important;
  }


  /* --- overlays stop covering the photo they sit on ----------------------
     The hero spec strip is `position:absolute; left:24px; bottom:24px` over the
     charger photo. On desktop the photo is tall and the strip is a slim band;
     on a phone the photo is only ~197px tall and the 114px strip swallowed most
     of it. Below 900px the strip leaves the overlay and flows underneath the
     image instead. */
  [style*="position: absolute"][style*="bottom: 24px"],
  [style*="position:absolute"][style*="bottom:24px"] {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 12px !important;
    /* width:100% resolved against the wrong box and ran 16px past the screen;
       auto lets it fill its container naturally. */
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- media columns stack instead of shrinking --------------------------
     In the hero the image sits in a relatively-positioned column with an
     absolutely-positioned spec strip on top. When the flex row wrapped, that
     column collapsed to ~147px and the overlay was clipped at the screen edge.
     Any flex child that holds an image takes the full width instead. */
  [style*="display:flex"] > *:has(img),
  [style*="display: flex"] > *:has(img),
  [style*="display:flex"] > *:has(> div > img),
  [style*="display: flex"] > *:has(> div > img) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  /* the strip itself must never be wider than its column */
  [style*="position:absolute"], [style*="position: absolute"] { max-width: 100%; }

  /* Tables and long code need to scroll inside themselves, not widen the page. */
  table { display: block; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 560px) {
  [style*="font-size:74px"], [style*="font-size: 74px"] { font-size: 30px !important; }
  [style*="font-size:64px"], [style*="font-size: 64px"] { font-size: 29px !important; }
  [style*="font-size:58px"], [style*="font-size: 58px"] { font-size: 28px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 28px !important; }
  /* Buttons go full width so they are reachable with a thumb. */
  button[style*="border-radius:999px"], button[style*="border-radius: 999px"] { width: 100%; }
}