/* =========================================================
   Checkout screen (#ptf-mysection) - responsive fixes only
   =========================================================
   Everything here is scoped to #ptf-mysection, the full-screen
   checkout overlay opened by the Portfolio page's Checkout
   button. It changes only sizing, visibility of the animation
   layers, and viewport units. No colour, spacing, typography,
   transition, timing or animation style is touched.
   ========================================================= */

/* ---- Viewport height ------------------------------------
   The overlay and its slider were sized from 100% / 100vh.
   On mobile browsers that is the *large* viewport, which
   includes the retractable address bar, so the bottom of the
   slider - the Prev/Next controls and pagination - sat under
   the browser chrome. svh is the small viewport: it always
   fits, and unlike dvh it does not change as the chrome
   shows and hides, so the slider never re-lays-out mid-scroll.
   The plain values stay first as the fallback.            */
#ptf-mysection {
  height: 100vh;
  height: 100svh;
}

#ptf-mysection .tp-portfolio-slicer-area-inner #app,
#ptf-mysection #app {
  height: 100vh;
  height: 100svh;
}

/* ---- Which layer is visible -----------------------------
   The slicer animates *clones* of each slide image; the
   theme's own responsive-image rule
     .swiper-slicer-image.desktop-img { display: block }
   overrode the plugin's `display: none` and left the original
   desktop image painted on top of the clones, so on desktop
   and tablet a static picture covered the animation.

   Originals stay hidden, clones stay visible - regardless of
   which of the two responsive classes they carry. Scoped by
   id so it cannot reach the same classes anywhere else.   */
#ptf-mysection .swiper-slide > .swiper-slicer-image,
#ptf-mysection .swiper-slide > picture > .swiper-slicer-image {
  display: none;
}

#ptf-mysection .swiper-slicer-image-clone > .swiper-slicer-image {
  display: block;
}

/* The clone strips are absolutely positioned and sized by the
   effect in pixels; keep them from being clipped or stretched
   by the responsive width/height rules further up the sheet. */
#ptf-mysection .swiper-slicer-image-clone > .swiper-slicer-image {
  max-width: unset;
  object-fit: cover;
  object-position: center;
}

/* Each slide clips its own strips, so a strip mid-transition
   can never widen the overlay. */
#ptf-mysection .swiper-slicer .swiper-slide,
#ptf-mysection .tp-portfolio-slicer-active .swiper-slide {
  overflow: hidden;
}

#ptf-mysection .tp-portfolio-slicer-active {
  max-width: 100%;
  overflow: hidden;
}