/* Phone layout fixes for the static PHAFS mirror (no Shopify JS). */

/* 1. Root cause of sideways scroll: the #zoom-collars transform scales
      .image-block__image, but .image-block (unlike .product-media) did not
      clip, so the full-width "For the love of dogs" banner spilled
      ~140px past the viewport on phones. Clip every zoomed image to its box. */
.image-block {
  overflow: clip;
}

/* 2. That banner has its slogan baked into the picture; zoomed, the words
      are cut off (1.7x on phones, 1.3x on desktop). Show it unzoomed. */
.image-block__image[src*="For_the_love_of_dogs" i],
.image-block__image[src*="For_the_love_of_dogs" i]:not([src*="logo" i]) {
  transform: none;
}

/* 3. Carousels: the theme hides overflow until its JS sets [in-viewport],
      which never happens here, so extra slides (product gallery, collection
      rows) were unreachable. Let them swipe inside their own container. */
slideshow-component:not([disabled="true"]) slideshow-slides {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 4. Safety net only; clip (not hidden) keeps position: sticky working. */
html,
body {
  overflow-x: clip;
}

/* 5. Product cards render a single photo, so their own mini-gallery has
      nothing to scroll. Rule 3 made it a scroll container anyway, and
      overscroll-behavior: contain then trapped horizontal swipes on the
      photo instead of passing them to the collection row. Keep card
      galleries out of the gesture so the row itself swipes. */
.card-gallery slideshow-component slideshow-slides {
  overflow-x: hidden;
  overscroll-behavior-x: auto;
}

/* 6. Swiping should scroll, not start a native image drag or text selection. */
slideshow-slides img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 7. Touch screens report a tapped card as :hover and keep it, so the
      second photo got stuck on phones. Only mouse/trackpad devices get the
      hover photo; elsewhere it is not rendered (and, being lazy, not fetched). */
@media (hover: none), (pointer: coarse) {
  .product-media__hover {
    display: none !important;
  }
}