/* Mobile fixes: the captured desktop DOM has baked GSAP artifacts (pin-spacers,
   fixed 960px widths, leftover transforms). On mobile, GSAP doesn't run to manage
   them, so we neutralize them and let the pinned/horizontal sections stack cleanly. */

@media screen and (max-width: 767px) {

  /* 1) Neutralize baked GSAP pin-spacers (their desktop pixel heights/padding
        create huge empty gaps + overlap on mobile) */
  .pin-spacer,
  .pin-spacer-pinTrigger,
  .pin-spacer-horizontal-core {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    inset: auto !important;
    position: relative !important;
  }

  /* 2) Products: horizontal card scroller -> clean vertical stack */
  .section_sticky-horizontal,
  .sticky-horizontal_sticky,
  .sticky-horizontal_sticky-track,
  .horizontal-sticky_list-wrap,
  .sticky-horizontal_card-wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
  .sticky-horizontal_card-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .sticky-horizontal_card {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  /* 3) Process: drop the leftover transform + fixed widths so it flows */
  .process_sticky,
  .process_list,
  .process_static-list,
  .process_slide,
  .process_slide-static {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
}

@media screen and (max-width: 767px) {
  /* The process section ships a desktop animated version (.process_slide) AND a
     static stacked version (.process_slide-static). On mobile only the static one
     should show; the captured DOM leaves both visible -> overlap. Hide the animated one. */
  .process_slide { display: none !important; }
  .process_sticky { min-height: 0 !important; }
}

@media screen and (max-width: 767px) {
  /* The static process layout interleaves ~750px decorative graphics between each
     step (6 of them = ~4500px). They bloat the section and overrun the products.
     Hide them on mobile -> compact stacked step list. */
  .process_static-image { display: none !important; }
  .process_static-wrap, .process_content { height: auto !important; }
}

@media screen and (max-width: 767px) {
  /* Root cause of vertical overlap: pinned elements carry a baked inline max-height
     that caps them even when height:auto, so they can't contain stacked content.
     Lift the cap deterministically (no JS race). */
  .section_sticky-horizontal, .sticky-horizontal_sticky, .sticky-horizontal_sticky-track,
  .horizontal-sticky_list-wrap, .sticky-horizontal_card-wrap, .sticky-horizontal_card,
  .process_sticky, .process_content, .process_static-wrap, .pin-spacer {
    max-height: none !important;
    height: auto !important;
  }
}