/* Keep a numeric start width so shrinking animates smoothly and stays centered. */
#spu-18185.h26-connect-popup--ready {
  width: var(--h26-connect-popup-full-width) !important;
  max-width: 100vw !important;
  left: 50% !important;
  margin-left: max(calc(var(--h26-connect-popup-full-width) / -2), calc(0px - 50vw)) !important;
  transition: width 300ms ease, margin-left 300ms ease;
}

/* Keep the compact banner centered as its measured width changes. */
#spu-18185.h26-connect-popup--shrunk {
  width: var(--h26-connect-popup-shrunk-width, 500px) !important;
  max-width: calc(100vw - 24px) !important;
  left: 50% !important;
  margin-left: max(var(--h26-connect-popup-shrink-offset, -250px), calc(12px - 50vw)) !important;
}

#spu-18185.h26-connect-popup--shrunk .spu-container,
#spu-18185.h26-connect-popup--shrunk .spu-content {
  width: 100%;
}

#spu-18185.h26-connect-popup--shrunk img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  #spu-18185.h26-connect-popup--ready {
    transition: none;
  }
}