/* Zip Zap Chargers — product-page mobile layer
 * ===========================================================================
 * Loads AFTER mobile.css, so these rules win ties. Same contract as that file:
 * every rule sits inside a max-width query, so the approved desktop rendering
 * (>1024px) is untouched, and every selector matches the inline style text of
 * the existing markup — no page markup was changed to support this file.
 *
 * Selectors are :has()-scoped wherever a pattern is ambiguous. The product
 * pages reuse the same inline recipes in several places (repeat(3, 1fr) is
 * both the design-detail cards and the pairings cards, for instance), so a
 * bare attribute match would hit the wrong section.
 * ===========================================================================
 */

@media (max-width: 767.98px) {

  /* --- 1. Gallery: one scrolling row, 4 visible of 7 --------------------- */
  /* mobile.css wraps this 7-up thumb grid into two rows of 4. A single
     snap-scrolling row keeps the main image higher up the page and reads as
     part of the slideshow the JS layer wires on top of it. */
  div[style*="repeat(7, 1fr)"][style*="gap: 10px"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
  }
  div[style*="repeat(7, 1fr)"][style*="gap: 10px"]::-webkit-scrollbar { display: none; }
  /* (100% - 3 gaps) / 4 — the 5th thumb sits just off the right edge, which is
     the affordance that says "there is more here". */
  div[style*="repeat(7, 1fr)"][style*="gap: 10px"] > button {
    flex: 0 0 calc((100% - 24px) / 4) !important;
    scroll-snap-align: start !important;
    padding: 4px !important;
    border-radius: 12px !important;
    min-height: 0 !important;
  }
  /* Main image well: a touch taller than square is wasted height on a phone */
  div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"]:has(> img) {
    border-radius: 20px !important;
  }
  /* Main-image scale is per-page and per-shot: the Zap Pad shots fill their
     canvas, so they stay at the authored 92%. The Gen 3 shots sit in a large
     transparent margin (the product is 27–38% of canvas width), so they need
     the box grown past 100% — and mobile.css caps every image at max-width
     100%, which is what was silently limiting it, so that cap is released.

     Oversized images are also taken out of flex flow and centred absolutely.
     Flex centring clamps an item bigger than its container to the START edge,
     so a 190% image overflowed 293px out of the bottom and nothing out of the
     top — the product hung below the frame. The well is already
     position: relative (it holds the badge), so inset centring is symmetric. */
  [data-screen-label*="Gen 3"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img,
  [data-screen-label*="Zap Pad"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[alt="Zap Pad side profile snapped to iPhone"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: none !important;
  }
  [data-screen-label*="Gen 3"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img {
    width: 116% !important;
    height: 116% !important;
  }
  /* Zap Pad's shots otherwise sit at the authored 92%, but the side profile is
     an outlier: the phone-and-pad silhouette is 9% of canvas width and 55% of
     its height, so it read much smaller than the rest of the set. */
  [data-screen-label*="Zap Pad"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[alt="Zap Pad side profile snapped to iPhone"] {
    width: 142% !important;
    height: 142% !important;
  }
  /* The "A closer look" wells on the bundle pages centre their image absolutely
     and size it inline (118% for the loosely-cropped Gen 3 renders). Those need
     the same max-width release as the product-page wells, or mobile.css clamps
     the element to 100% and the product draws smaller on phones than desktop. */
  div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[style*="translate(-50%, -50%)"] {
    max-width: none !important;
  }

  /* The Zip & Zap Pack's two showcase cards use one static shot each, upscaled
     past 100% (the product occupies 65% and 76% of its canvas) and bottom-
     aligned absolutely. Same max-width release as the wells above. */
  img[alt*="docking an iPhone beside a Zap Pad"],
  img[alt*="Travel Pouch and Matcha Green Travel Case"] {
    max-width: none !important;
    height: auto !important;
  }
  /* These two boxes are width-driven (the box aspect matches the PNG), so the
     scale that lands the product at 86% of a ~298px phone well would overshoot
     a 486px desktop well and clip against the card floor. The upscale lives
     here; the markup keeps a desktop-safe percentage. */
  img[alt*="docking an iPhone beside a Zap Pad"] { width: 132% !important; }
  img[alt*="Travel Pouch and Matcha Green Travel Case"] { width: 112% !important; }
  /* 40px of side padding on a ~266px card is a desktop value: the well, and so
     the shot inside it, was a third narrower than it needed to be. */
  div[style*="border-radius: 26px"][style*="padding: 40px 40px 0"] {
    padding: 26px 18px 22px !important;
  }
  /* The case-and-pouch shot is wide and short (product is half its canvas
     height), so its well loses the height the product never fills. */
  div[style*="min-height: 300px"]:has(> img[alt*="Travel Pouch and Matcha Green Travel Case"]) {
    min-height: 210px !important;
  }

  /* Three shots are framed much looser than the rest — measured from the PNGs,
     the product is 63%, 68% and 34% of canvas height. Each is scaled so the
     product lands at roughly 78% of the frame. */
  [data-screen-label*="Gen 3"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[alt="iPhone charging on the Gen 3"] {
    width: 122% !important; height: 122% !important;
  }
  [data-screen-label*="Gen 3"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[alt="Gen 3 clicked onto the back of an iPhone"] {
    width: 113% !important; height: 113% !important;
    /* this one sits 3.9% high in its canvas — the only shot that isn't centred */
    transform: translate(-50%, -50%) translateY(4%) !important;
  }
  [data-screen-label*="Gen 3"] div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[alt="Samsung lithium-ion cell inside"] {
    width: 190% !important; height: 190% !important;
  }
  /* Slideshow dots, injected by mobile-gallery.js */
  .zz-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 2px 0 0;
  }
  .zz-dots > span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #d2d2d7;
    transition: background .25s ease, transform .25s ease;
  }
  .zz-dots > span[data-on] { background: #ffd60a; transform: scale(1.35); }

  /* --- 2. Trust badges on one line -------------------------------------- */
  /* Internationally certified · Airline approved · Award-winning design.
     Three short two-word labels — stacking them wasted a third of a screen. */
  div[style*="1fr 1fr 1fr"]:has(> div > svg) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 20px !important;
    padding-top: 18px !important;
  }
  div[style*="1fr 1fr 1fr"]:has(> div > svg) svg { width: 38px !important; height: 38px !important; }
  /* The Red Dot mark is a raster ball that fills its canvas edge to edge, while
     the two shields are SVGs with ~15% padding inside the viewBox. Matched
     optically rather than by box, or it reads noticeably heavier than the pair. */
  div[style*="1fr 1fr 1fr"]:has(> div > svg) img { width: 34px !important; height: 34px !important; }
  div[style*="1fr 1fr 1fr"]:has(> div > svg) > div { gap: 7px !important; }
  div[style*="1fr 1fr 1fr"]:has(> div > svg) span { font-size: 11.5px !important; line-height: 1.25 !important; }
  /* The buy section's 90px bottom padding is a desktop value mobile.css has no
     mapping for (it matches exact padding strings), so it left ~90px of empty
     white under the badges before the next section. */
  section[style*="padding: 40px 22px 90px"] { padding: 20px 18px 30px !important; }

  /* --- 3. "Why you'll love it": 1 / 2 / 2 ------------------------------- */
  /* The video card leads full width, then the remaining four cards pair off,
     matching the two-up feature rhythm the homepage now uses. */
  div[style*="repeat(6, 1fr)"]:has(video) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    /* stretch, not start: paired cards then share a row height instead of each
       ending wherever its copy runs out */
    align-items: stretch !important;
  }
  /* Cards re-paired by copy length so each row is even: the two long ones
     (magnetic stand, carry-on approved) sit together, then the two short ones
     (capacity, speed). DOM order is stand, video, capacity, speed, travel. */
  div[style*="repeat(6, 1fr)"]:has(video) > div:nth-child(1) { order: 1 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:nth-child(5) { order: 2 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:nth-child(3) { order: 3 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:nth-child(4) { order: 4 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div {
    padding: 18px 16px 18px !important;
    border-radius: 20px !important;
    gap: 7px !important;
  }
  div[style*="repeat(6, 1fr)"]:has(video) > div:has(video) {
    grid-column: 1 / -1 !important;
    order: -1 !important;
    padding-bottom: 16px !important;
  }
  div[style*="repeat(6, 1fr)"]:has(video) h3 { font-size: 19px !important; line-height: 1.14 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:has(video) h3 { font-size: 24px !important; }
  div[style*="repeat(6, 1fr)"]:has(video) p[style*="letter-spacing: .14em"] { font-size: 10.5px !important; letter-spacing: .1em !important; }
  div[style*="repeat(6, 1fr)"]:has(video) p[style*="font-size: 15px"] { font-size: 13px !important; line-height: 1.45 !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:has(video) p[style*="font-size: 15px"] { font-size: 14.5px !important; line-height: 1.5 !important; }
  /* the two decorative meters shrink with their cards */
  div[style*="repeat(6, 1fr)"]:has(video) div[style*="width: 100px"] { width: 74px !important; height: 38px !important; border-width: 4px !important; }

  /* The clip is 1080 × 1350 (portrait 4:5). The authored 16/10 box on
     object-fit: cover was showing barely half of its height — that is the
     "cut off half way". Full width is kept and the box is shortened to a
     square instead, so cover trims only ~10% off the top and bottom, which is
     the dead grey padding around the phone. The product fills the frame. */
  div[style*="aspect-ratio: 16 / 10"]:has(> video) {
    aspect-ratio: 1 / 1 !important;
    margin: 12px 0 4px !important;
    border-radius: 14px !important;
  }
  div[style*="aspect-ratio: 16 / 10"] > video {
    /* mobile.css sets height:auto on every video to stop overflow; this box is
       ratio-locked, so the fill has to be restored here. */
    height: 100% !important;
    object-fit: cover !important;
    /* The phone is not centred in the clip — it sits high, so an even 10/10
       crop left it against the top edge. Biasing the window up the source
       (15% instead of 50%) hides ~17px above the phone and the rest below,
       which lands even space above and below the product in the same box. */
    object-position: center 15% !important;
  }

  /* --- 3b. "Power in style." on one line -------------------------------- */
  /* The authored <br> splits it for the desktop two-column layout; stacked on
     a phone it left a short, weak second line, so the break is suppressed and
     the type grows into the full measure instead. */
  h2[style*="font-size: 64px"][style*="line-height: 1.02"] {
    font-size: clamp(34px, 10.2vw, 44px) !important;
    white-space: nowrap !important;
    letter-spacing: -.03em !important;
  }
  h2[style*="font-size: 64px"][style*="line-height: 1.02"] br { display: none !important; }
  /* the markup is `Power in<br><span>style.</span>` with no space either side of
     the break, so removing it needs the word space put back */
  h2[style*="font-size: 64px"][style*="line-height: 1.02"] span::before { content: " "; }

  /* --- 4. "Considered, down to the millimetre": 3 across ----------------- */
  /* Scoped by the 260px image wells — the pairings grid below uses the same
     repeat(3, 1fr) recipe and must stay stacked. Everything inside steps down
     a size or two to survive a ~105px column. */
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 260px"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 260px"]) > div {
    padding: 11px 9px 13px !important;
    border-radius: 16px !important;
    gap: 8px !important;
  }
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 260px"]) h3 {
    font-size: 13px !important; line-height: 1.2 !important; letter-spacing: -.01em !important;
  }
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 260px"]) p {
    font-size: 12px !important; line-height: 1.4 !important;
  }
  /* the copy is now one short sentence per card, so the wells can breathe */
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 260px"]) div[style*="height: 260px"] {
    height: 104px !important;
  }

  /* --- 5. Travel case / pouch showcase: down a third --------------------- */
  /* The well and its stacked layers are one composition, so every number
     scales by the same 0.57 factor and the product keeps its position in the
     frame. Matches both product pages: Zap Pad drops into a "travel case",
     Gen 3 into a "travel pouch". */
  div[style*="height: 600px"]:has(> img[alt*="travel"]) { height: 342px !important; }
  div[style*="height: 600px"]:has(> img[alt*="travel"]) > img { height: 262px !important; bottom: 30px !important; }
  div[style*="height: 600px"]:has(> img[alt*="travel pouch"]) { height: 330px !important; }
  /* the pouch is shot tighter than the case, so it takes its own pair */
  div[style*="height: 600px"]:has(> img[alt*="travel pouch"]) > img { height: 278px !important; bottom: 20px !important; }
  div[style*="height: 600px"]:has(> img[alt*="travel"]) > img[alt*="dropping"] { height: 228px !important; top: 62px !important; }
  /* The colour name reads as the backdrop, like the homepage: big enough to
     span the well, sitting behind the product (the span precedes the images in
     source, so they paint over it). 17vw keeps the longest name, "Midnight",
     inside the frame at 390–430px. */
  div[style*="height: 600px"]:has(> img[alt*="travel"]) > span {
    top: 56px !important;
    font-size: clamp(52px, 17vw, 72px) !important;
  }

  /* --- 5b. Colour swatches back to circles ------------------------------- */
  /* mobile.css gives every button a 44px min-height for touch. On the swatch
     dots — 26px on Gen 3, 30px on the case and pouch pages, both with a 50%
     radius — that stretched them into ovals. Same for the 36px quantity
     steppers in every buy box. */
  button[style*="border-radius: 50%"][style*="width: 26px"],
  button[style*="border-radius: 50%"][style*="width: 30px"],
  button[style*="border-radius: 50%"][style*="width: 36px"] { min-height: 0 !important; }
  button[style*="border-radius: 50%"][style*="width: 26px"] {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
  }
  button[style*="border-radius: 50%"][style*="width: 30px"] { flex: 0 0 30px !important; padding: 0 !important; }

  /* --- 5c. "All seven, side by side" as one swipeable row ----------------- */
  /* Seven labelled swatch cards wrapped to two ragged rows of 4 + 3. One
     snap-scrolling row keeps the comparison in a single gesture, with 3.4
     cards in view so the next is visibly there. */
  div[style*="repeat(7, 1fr)"][style*="gap: 14px"] {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin-top: 26px !important;
  }
  div[style*="repeat(7, 1fr)"][style*="gap: 14px"]::-webkit-scrollbar { display: none; }
  div[style*="repeat(7, 1fr)"][style*="gap: 14px"] > button {
    flex: 0 0 calc((100% - 30px) / 3.4) !important;
    scroll-snap-align: start !important;
    padding: 12px 8px !important;
    border-radius: 16px !important;
  }

  /* --- 5d. Ultimate Travel Pack swatch rows: seven on one line ----------- */
  /* Each row is a 52px label plus seven 30px dots at gap 12 = 346px, ~12px more
     than the phone column, so the seventh dot dropped to its own line and every
     row cost double the height. Label and gaps tighten, dots go to 28px. */
  div[style*="flex-wrap: wrap"]:has(> span[style*="width: 52px"]) {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  /* The label source now carries a real newline between the word and the
     number; it collapses to a space on desktop and breaks here, so all four
     labels read as two lines instead of only the longer three wrapping. */
  div[style*="flex-wrap: wrap"]:has(> span[style*="width: 52px"]) > span {
    width: 40px !important;
    font-size: 11.5px !important;
    white-space: pre-line !important;
    line-height: 1.2 !important;
  }
  div[style*="flex-wrap: wrap"]:has(> span[style*="width: 52px"]) > button {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    outline-offset: 2px !important;
  }

  /* --- 5e. Bundle spec symbols: 2 x 2 on a phone ------------------------- */
  /* mobile.css stacks every grid to one column, which turned the four spec
     symbols into four full-width rows. They are small, self-contained tiles. */
  div[style*="minmax(150px, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px 14px !important;
  }

  /* --- 6. Pairings wells ------------------------------------------------- */
  /* Stacked full width, a 360px well is more empty box than product. */
  div[style*="repeat(3, 1fr)"]:has(> div > div[style*="height: 360px"]) div[style*="height: 360px"] {
    height: 210px !important;
  }
}

/* ======================= TABLET  ( 768 – 1024px ) ======================== */
@media (min-width: 767.99px) and (max-width: 1024px) {
  /* Same intent as mobile, one step less aggressive: the feature grid pairs
     off with the video leading, and the detail cards stay 3 across. */
  div[style*="repeat(6, 1fr)"]:has(video) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div { grid-column: auto !important; }
  div[style*="repeat(6, 1fr)"]:has(video) > div:has(video) { grid-column: 1 / -1 !important; order: -1 !important; }
  div[style*="aspect-ratio: 16 / 10"]:has(> video) { aspect-ratio: 16 / 9 !important; }
  div[style*="aspect-ratio: 16 / 10"] > video { height: 100% !important; object-fit: contain !important; }
  /* The tablet block of mobile.css carries its own copy of the max-width cap,
     so the closer-look release has to be repeated here or tablet draws the
     Gen 3 renders smaller than both phone and desktop. */
  div[style*="aspect-ratio: 1 / 1"][style*="border-radius: 26px"] > img[style*="translate(-50%, -50%)"] {
    max-width: none !important;
  }

  /* The Zip & Zap Pack's two showcase cards use one static shot each, upscaled
     past 100% (the product occupies 65% and 76% of its canvas) and bottom-
     aligned absolutely. Same max-width release as the wells above. */
  img[alt*="docking an iPhone beside a Zap Pad"],
  img[alt*="Travel Pouch and Matcha Green Travel Case"] {
    max-width: none !important;
    height: auto !important;
  }
  div[style*="min-height: 300px"]:has(> img[alt*="Travel Pouch and Matcha Green Travel Case"]) { min-height: 260px !important; }
  /* Tablet wells (~284px) are narrower than the phone well, so the desktop-safe
     inline scale drew the product smaller here than on a phone. Same upscale as
     the phone block; verified clear of the well at 820px. */
  img[alt*="docking an iPhone beside a Zap Pad"] { width: 132% !important; max-width: none !important; height: auto !important; }
  img[alt*="Travel Pouch and Matcha Green Travel Case"] { width: 112% !important; max-width: none !important; height: auto !important; }

  div[style*="minmax(150px, 1fr)"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  div[style*="height: 600px"]:has(> img[alt*="travel"]) { height: 480px !important; }
  div[style*="height: 600px"]:has(> img[alt*="travel"]) > img { height: 368px !important; bottom: 42px !important; }
  div[style*="height: 600px"]:has(> img[alt*="travel"]) > img[alt*="dropping"] { height: 320px !important; top: 86px !important; }
}