/* GoJD mobile SPA product navigation — keeps the existing React app mounted. */
@media (max-width:768px){
  .page-transition.fadeIn{
    animation-duration:140ms!important;
    animation-timing-function:cubic-bezier(.22,1,.36,1)!important;
  }
  .page-transition.fadeOut{
    animation-duration:80ms!important;
    animation-timing-function:ease-out!important;
  }
  .page-transition.fadeIn>.product-page{
    animation:gojdSpaProductEnter 220ms cubic-bezier(.22,1,.36,1) both;
    transform-origin:center right;
  }
  .page-transition.fadeIn>.catalog-page{
    animation:gojdSpaCatalogEnter 160ms ease-out both;
  }
  @keyframes gojdSpaProductEnter{
    from{opacity:.82;transform:translate3d(12px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }
  @keyframes gojdSpaCatalogEnter{
    from{opacity:.9;transform:translate3d(-4px,0,0)}
    to{opacity:1;transform:translate3d(0,0,0)}
  }
  body:has(.product-page),
  html:has(.product-page){
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  .product-page{
    min-height:100dvh;
  }
  .product-page .gallery-main img{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .product-skeleton-layout{
    min-height:calc(100dvh - 64px);
  }
}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .page-transition.fadeIn,.page-transition.fadeOut,
  .page-transition.fadeIn>.product-page,.page-transition.fadeIn>.catalog-page{
    animation-duration:1ms!important;
    transform:none!important;
  }
}