/* Zip Zap Chargers — HOMEPAGE mobile refinements
 * ===========================================================================
 * Linked from index.html only. Everything sits inside max-width: 767px, so
 * desktop and tablet are untouched. Loaded after mobile.css, so it wins where
 * the two overlap.
 * ===========================================================================
 */

@media (max-width: 767.98px) {

  /* ---------------------------------------------------------------- HERO --- */
  /* Banner scaled down hard: the hero was 84px of top padding and a 520px
     image well, which pushed everything below the fold. */
  header#top [style*="padding: 84px 22px 30px"] {
    padding: 20px 18px 22px !important;
    gap: 16px !important;
    /* Reflow: headline copy → product → connector → buy. `display: contents`
       promotes the text column's children into this flex container so the
       product shot can sit between them, which markup alone couldn't do. */
    display: flex !important;
    flex-direction: column !important;
  }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type { display: contents !important; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(1) { order: 1; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(2) { order: 2; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(3) { order: 3; }
  header#top [style*="min-height: 520px"] { order: 4; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(4) { order: 5; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(5) { order: 6; }
  header#top [style*="padding: 84px 22px 30px"] > div:first-of-type > *:nth-child(6) { order: 7; }

  /* The eyebrow pill on one line */
  header#top [style*="padding: 6px 14px"] {
    padding: 5px 11px !important;
    margin-bottom: 14px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  header#top [style*="padding: 6px 14px"] span:last-child {
    font-size: 9.5px !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
  }
  header#top [style*="padding: 6px 14px"] span:first-child {
    width: 5px !important; height: 5px !important; flex: 0 0 auto;
  }

  header#top h1 { font-size: clamp(37px, 10.4vw, 46px) !important; line-height: 1.02 !important; }
  header#top [style*="max-width: 460px"] { font-size: 14px !important; line-height: 1.45 !important; margin-top: 12px !important; }
  header#top a[href="/zip-zap-plus-gen-3"]:not([data-mobile-only]) { font-size: 14.5px !important; padding: 10px 21px !important; }
  /* MOBILE FIX 1 — "See the difference" points at #compare, which is
     display:none on mobile (see OBVIOUS CHOICE below), so on a phone the link
     went nowhere; the "Make the obvious choice" Gen 3 CTA inside #compare was
     hidden with it. The secondary hero link becomes an internal "Learn more"
     to the Gen 3 product page. Desktop keeps the anchor jump. */
  header#top [data-desktop-only] { display: none !important; }
  header#top [data-mobile-only] { display: inline-flex !important; align-items: center; font-size: 14.5px !important; }
  header#top [style*="font-size: 14px"][style*="#a1a1a6"] { font-size: 12.5px !important; line-height: 1.45 !important; }
  header#top [style*="margin-top: 26px"] { margin-top: 16px !important; }

  /* Product shot: the 520px well collapses and the image is allowed to fill
     the width it actually has. */
  /* Fixed-height well. The two source files have different canvas proportions,
     so their rendered boxes were 265px and 344px tall — that ~79px difference
     is what pushed the page down on toggle. Pinning the height means the
     connector row and buy button never move. Both products are centred in
     their canvases, so only transparent padding is clipped. */
  header#top [style*="min-height: 520px"] {
    min-height: 0 !important;
    height: clamp(150px, 52vw, 230px) !important;
    /* the hero's inline align-items:center makes flex items shrink to content,
       and this well now holds only absolutely-positioned images — so without
       these it collapses to width 0 and the product disappears */
    align-self: stretch !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
  }
  header#top [style*="min-height: 520px"] img {
    /* inset-0 + margin:auto centres exactly on both axes even when the image is
       taller than the well, and unlike translate(-50%,-50%) it leaves
       `transform` free for the zz-float animation. */
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    margin: auto !important;
    height: auto !important;
    display: block !important;
  }
  /* The two connector shots have different canvas padding (the product fills
     62% of the USB-C file but only 48.7% of the Lightning one). Percentages are
     no good here — each image sits in its own <sc-if> wrapper and the two
     resolve different containing blocks — so both are sized against the
     viewport with a fixed 1.273 ratio. The product then renders at the same
     size and doesn't move when you switch connector. */
  header#top [style*="min-height: 520px"] img[alt*="USB-C"] {
    width: clamp(180px, 68vw, 300px) !important; max-width: 300px !important;
    /* the product sits 2.2% above this canvas's centre, unlike the Lightning
       file's 0.3% — nudge the centring box down so the two align */
    top: 11px !important;
  }
  header#top [style*="min-height: 520px"] img[alt*="Lightning"] {
    width: clamp(229px, 86.6vw, 382px) !important; max-width: 382px !important;
  }

  /* Trust strip under the hero */
  header#top [style*="padding: 18px 22px"] {
    padding: 12px 18px !important;
    gap: 6px 14px !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  header#top [style*="padding: 18px 22px"] span { font-size: 10.5px !important; letter-spacing: .05em !important; }

  /* ------------------------------------------------------- SECTION RHYTHM --- */
  /* Every band tightened so the page reads in a few thumb-scrolls. */
  #why, #zappad, #branding, #reviews, #lineup, #cases, #story,
  section:not([id])[style*="padding: 110px 22px"] { padding: 38px 18px !important; }
  #samsung { padding: 34px 18px !important; }

  /* ------------------------------------------- WHY YOU'LL LOVE ZIP ZAP  2×2 --- */
  #why h2 { font-size: 25px !important; margin-bottom: 6px !important; }
  #why > div > p { font-size: 14px !important; margin-bottom: 20px !important; }
  #why [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  #why [style*="repeat(6, 1fr)"] > div {
    padding: 16px 14px 16px !important;
    border-radius: 18px !important;
    gap: 5px !important;
  }
  #why [style*="repeat(6, 1fr)"] > div > p:first-child { font-size: 10.5px !important; letter-spacing: .09em !important; }
  #why [style*="repeat(6, 1fr)"] h3 { font-size: 18px !important; line-height: 1.14 !important; }
  /* Card body copy is dropped on a phone: clamped to three lines it read as
     truncated fragments, and the eyebrow plus the headline already carry the
     point. The full copy is untouched on desktop. */
  #why [style*="repeat(6, 1fr)"] > div > p:nth-of-type(2) { display: none !important; }
  /* Every card ends with its symbol, but the five symbols are different kinds
     of object (a photo, a CSS drawing, three SVGs of different viewBoxes), so
     each one landed at its own size and its own optical centre — and the two
     that bleed outside their box (the gauge's round caps, the battery's nub)
     were clipping against the card edge. One fixed 60px stage per card, all
     symbols fitted inside it and centred. */
  #why [style*="repeat(6, 1fr)"] > div > *:last-child {
    margin: auto auto 0 !important;
    align-self: stretch !important;
    height: 60px !important;
    padding: 4px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
  }
  /* When the symbol IS the last child (the cable-free photo), the stage rule
     above would set its height directly; it keeps its own aspect instead. */
  #why [style*="repeat(6, 1fr)"] > div > img:last-child {
    height: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    align-self: center !important;
    /* the SVG stages sit 8px above the card's own bottom padding; the photo has
       no stage of its own, so the same 8px is added as margin */
    margin: auto auto 8px !important;
    padding: 0 !important;
  }
  #why [style*="repeat(6, 1fr)"] img,
  #why [style*="repeat(6, 1fr)"] svg {
    max-height: 52px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* The battery is a CSS drawing at a fixed 118x58, not an image: it cannot be
     capped like an SVG, so it is scaled to the same 52px optical height and
     kept on one line (the nub is a flex sibling of the cell). */
  #why [style*="repeat(6, 1fr)"] > div > div:last-child:has(> div[style*="border: 5px solid"]) {
    flex-wrap: nowrap !important;
    /* the stage centres cell + gap + nub as a pair, which reads 6px left of the
       other four symbols; the nub's width is given back as left padding */
    padding-left: 12px !important;
  }
  #why [style*="repeat(6, 1fr)"] > div > div > div[style*="border: 5px solid"] {
    box-sizing: border-box !important;
    width: 92px !important;
    height: 46px !important;
    border-width: 4px !important;
    border-radius: 13px !important;
    flex: 0 0 96px !important;
    padding: 4px !important;
  }
  #why [style*="repeat(6, 1fr)"] > div > div > div[style*="border-radius: 0 4px 4px 0"] {
    width: 6px !important;
    height: 17px !important;
  }
  /* five cards: the last one spans the pair so the block ends square, not ragged */
  #why [style*="repeat(6, 1fr)"] > div:nth-child(5) { grid-column: 1 / -1 !important; }
  /* When the symbol IS the last child (the cable-free photo), the stage rule
     above would set its height directly; it keeps its own aspect instead. */
  #why [style*="repeat(6, 1fr)"] > div > img:last-child {
    height: 46px !important;
    max-height: 46px !important;
    object-fit: contain !important;
    align-self: center !important;
    /* the SVG stages sit 8px above the card's own bottom padding; the photo has
       no stage of its own, so the same 8px is added as margin */
    margin: auto auto 8px !important;
    padding: 0 !important;
  }
  #why [style*="repeat(6, 1fr)"] img,
  #why [style*="repeat(6, 1fr)"] svg { max-height: 78px !important; width: auto !important; }

  /* --------------------------------------------------- PATENTED INNOVATION --- */
  section:not([id])[style*="padding: 110px 22px"] h2 { font-size: 25px !important; }
  section:not([id])[style*="padding: 110px 22px"] [style*="letter-spacing: .16em"] { font-size: 10px !important; }
  section:not([id])[style*="padding: 110px 22px"] [style*="font-size: 19px"] { font-size: 14.5px !important; line-height: 1.5 !important; }
  section:not([id])[style*="padding: 110px 22px"] [style*="gap: 56px"] { gap: 20px !important; margin-bottom: 0 !important; }
  /* The hype video is a 4:5 portrait master in a 1:1 box, so `cover` cropped the
     product out of frame for the first half. `contain` on the black card shows
     the full frame — the letterbox is the same black, so nothing reads as a bar. */
  section:not([id])[style*="padding: 110px 22px"] video { object-fit: contain !important; }
  /* Per request: the three detail cards are mobile-only hidden. Desktop keeps them. */
  section:not([id])[style*="padding: 110px 22px"] [style*="repeat(3, 1fr)"] { display: none !important; }

  /* --------------------------------------------------------- OBVIOUS CHOICE --- */
  /* Removed on mobile only. Still present and untouched on tablet and desktop. */
  #compare { display: none !important; }

  /* -------------------------------------------------- SAMSUNG LITHIUM INSIDE --- */
  /* Product enlarged; the dark well still hugs it rather than holding ~480px
     of empty space. */
  #samsung [style*="min-height: 480px"] { min-height: 0 !important; padding: 0 !important; }
  #samsung [style*="min-height: 480px"] img {
    width: 118% !important; max-width: 366px !important; height: auto !important;
  }
  #samsung [style*="letter-spacing: .2em"] { font-size: 10px !important; margin-bottom: 10px !important; }
  #samsung h2 { font-size: 27px !important; line-height: 1.06 !important; }
  #samsung [style*="margin: 18px 0 34px"] { font-size: 14.5px !important; margin: 12px 0 18px !important; }

  /* The three features become rectangular cards instead of hairline rows */
  #samsung [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 16px !important;
    padding: 14px 15px !important;
    gap: 13px !important;
    margin-bottom: 10px !important;
    align-items: center !important;
  }
  #samsung [style*="grid-template-columns: auto 1fr"] > * { grid-column: auto !important; }
  #samsung [style*="height: 1px"] { display: none !important; }
  #samsung [style*="width: 52px"] {
    width: 42px !important; height: 42px !important; border-radius: 12px !important; flex: 0 0 auto;
  }
  #samsung h3 { font-size: 17px !important; }
  #samsung [style*="grid-template-columns: auto 1fr"] p { font-size: 13px !important; line-height: 1.4 !important; }

  /* ------------------------------------------------------------- ZAP PAD --- */
  #zappad [style*="gap: 56px"] { gap: 22px !important; }
  #zappad [style*="letter-spacing: .16em"] { font-size: 10px !important; }
  #zappad h2 { font-size: 25px !important; }
  #zappad [style*="font-size: 20px"] { font-size: 14.5px !important; line-height: 1.45 !important; margin-top: 12px !important; }
  #zappad [style*="repeat(3, 1fr)"] { gap: 10px !important; margin-top: 20px !important; }
  #zappad [style*="repeat(3, 1fr)"] > div { padding-top: 9px !important; }
  #zappad [style*="repeat(3, 1fr)"] > div > p:first-child {
    font-size: 16px !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
  }
  #zappad [style*="repeat(3, 1fr)"] > div > p:last-child { font-size: 12.5px !important; }
  /* Symbols for Magnetic / Wireless / Slim, in the same light-stroke, rounded,
     generously-spaced idiom as the Why-you'll-love icons. Inline SVG, so no
     markup change and nothing extra to load. */
  #zappad [style*="repeat(3, 1fr)"] > div > p:first-child::before {
    content: ""; flex: 0 0 auto; width: 19px; height: 19px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
  }
  #zappad [style*="repeat(3, 1fr)"] > div:nth-of-type(1) > p:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22V13a7 7 0 0114 0v9'/%3E%3Cpath d='M7 22h4.6V13a2.4 2.4 0 014.8 0v9H21'/%3E%3Cpath d='M7 17.6h4.6M16.4 17.6H21' stroke-width='1.3'/%3E%3C/svg%3E");
  }
  #zappad [style*="repeat(3, 1fr)"] > div:nth-of-type(2) > p:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4.6 11.4a13 13 0 0118.8 0'/%3E%3Cpath d='M8.4 15.4a7.8 7.8 0 0111.2 0'/%3E%3Cpath d='M12 19.3a2.9 2.9 0 014 0'/%3E%3Ccircle cx='14' cy='22.6' r='1.15' fill='%231d1d1f' stroke='none'/%3E%3C/svg%3E");
  }
  #zappad [style*="repeat(3, 1fr)"] > div:nth-of-type(3) > p:first-child::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%231d1d1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='3.6' width='6' height='20.8' rx='2.6'/%3E%3Cpath d='M6.2 9.4v9.2M21.8 9.4v9.2' stroke-width='1.3'/%3E%3C/svg%3E");
  }
  /* Mobile-only label: real markup rather than a CSS content swap, so the
     accessibility tree and find-in-page see "Shop Now" too, and the price
     string can't go stale behind a pseudo-element. */
  #zappad a[href="/zap-pad"]:first-of-type { padding: 10px 24px !important; font-size: 15px !important; }
  #zappad [data-desktop-label] { display: none !important; }
  #zappad [data-mobile-only] { display: inline !important; }
  #zappad a[href="/zap-pad"] + a { font-size: 15px !important; }
  #zappad [style*="margin-top: 30px"] { margin-top: 18px !important; gap: 12px !important; }

  /* ------------------------------------------------------ CUSTOM BRANDING --- */
  #branding [style*="letter-spacing: .16em"] { font-size: 10px !important; }
  #branding h2 { font-size: 25px !important; }
  #branding p { font-size: 14px !important; line-height: 1.45 !important; }
  #branding h3 { font-size: 16px !important; }
  /* Both CTAs on one line — primary trimmed to make room. */
  #branding a[href="/custom-branding"] {
    font-size: 13.5px !important; padding: 10px 17px !important; margin-top: 18px !important;
    white-space: nowrap !important;
  }
  #branding [data-mobile-only] {
    display: inline-flex !important; align-items: center; justify-content: center;
    margin: 18px 0 0 8px !important; padding: 10px 15px !important;
    font-size: 13.5px !important; white-space: nowrap !important;
  }

  /* ------------------------------------------------- THE LINEUP — carousel --- */
  /* One card at a time, swipeable, with the next card peeking so it reads as a
     slider rather than a list. Bleeds to the right edge on purpose. */
  #lineup h2 { font-size: 25px !important; margin-bottom: 4px !important; }
  #lineup > div > p { font-size: 14px !important; margin-bottom: 18px !important; }
  #lineup [style*="repeat(4, 1fr)"] {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 76% !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-right: -18px !important;
    padding: 2px 18px 6px 0 !important;
  }
  #lineup [style*="repeat(4, 1fr)"]::-webkit-scrollbar { display: none; }
  #lineup [style*="repeat(4, 1fr)"] > * {
    scroll-snap-align: start !important;
    min-width: 0 !important;
  }
  #lineup [style*="repeat(4, 1fr)"] > div { padding: 18px 16px 20px !important; border-radius: 18px !important; }
  #lineup [style*="height: 220px"] { height: 158px !important; margin-bottom: 12px !important; }
  #lineup h3 { font-size: 17px !important; }
  #lineup [style*="repeat(4, 1fr)"] p[style*="font-size: 15px"] { font-size: 12.5px !important; }
  /* "Buy ›" is the card's action — give it a real tap target without moving it */
  #lineup [style*="repeat(4, 1fr)"] a {
    padding: 13px 0 13px 14px !important; margin: -13px 0 -13px 0 !important;
  }

  /* ------------------------------------------------- CASES — square stage --- */
  /* The stage was a 560px-tall letterbox on a 370px screen. Now a true square. */
  #cases [style*="letter-spacing: .16em"] { font-size: 10px !important; }
  #cases h2 { font-size: 25px !important; }
  #cases [style*="max-width: 560px"] { font-size: 14px !important; margin-top: 10px !important; }
  #cases [style*="margin-bottom: 40px"] { margin-bottom: 18px !important; }
  /* Stage pulled closer to square and the product scaled up. */
  #cases [style*="min-height: 560px"] {
    min-height: 0 !important;
    border-radius: 22px !important;
    padding: 14px 10px 16px !important;
  }
  #cases [style*="height: 580px"] {
    height: auto !important;
    aspect-ratio: 1.3 / 1 !important;
    width: 100% !important;
    flex: 0 0 auto;
  }
  #cases img[alt*="travel case"] { height: 112% !important; width: auto !important; }
  #cases img[alt*="travel pouch"] { height: 90% !important; width: auto !important; }
  #cases [style*="clamp(150px"] { font-size: clamp(58px, 21vw, 92px) !important; top: 42% !important; }
  #cases [style*="margin-top: 30px"] { margin-top: 10px !important; gap: 8px !important; }
  #cases [style*="font-size: 21px"] { font-size: 14px !important; }
  /* Swatches keep their 24px dot but carry a 44px hit area via an invisible
     overlay — seven adjacent targets need the full tap zone. */
  #cases button[aria-label] {
    width: 24px !important; height: 24px !important;
    min-height: 0 !important; position: relative !important;
  }
  #cases button[aria-label]::before {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
  }
  #cases [style*="gap: 14px"] { gap: 7px !important; flex-wrap: nowrap !important; }
  /* Smaller type and tighter padding as asked, but still a 44px tap target.
     Selector is :not([aria-label]) — React doesn't keep an onClick attribute in
     the DOM, so the earlier button[onClick] selector matched nothing. */
  #cases button:not([aria-label]) {
    font-size: 12px !important; padding: 6px 13px !important;
    min-height: 44px !important; box-sizing: border-box !important;
  }
  #cases a[href="/travel-case"] {
    font-size: 13px !important; padding: 8px 17px !important;
    min-height: 44px !important; box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  #cases button[onClick] { font-size: 12.5px !important; padding: 7px 14px !important; min-height: 0 !important; }

  /* ------------------------------------------------------------- STORY --- */
  #story [style*="gap: 56px"] { gap: 18px !important; }
  #story h2 { font-size: 25px !important; }
  /* Photo fills the rounded frame edge to edge. */
  #story [style*="border-radius: 24px"] { aspect-ratio: 1 / 1 !important; }
  #story img {
    height: 100% !important; width: 100% !important;
    object-fit: cover !important; object-position: center 22% !important;
    border-radius: 24px !important;
  }
}