/* One native sticky group keeps the desktop header and navbar together. */
@layer tt-card-layout {
  /* Clip horizontal overflow without creating a body scroll container so the
     native mobile sticky header stays anchored to the viewport. */
  @supports (overflow: clip) {
    html:root, html:root body { overflow-x: clip !important; }
  }
  html body #tt-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050;
    overflow: visible;
  }
  html body #tt-sticky-header :is(#tt-header, #tt-nav) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transition-property: background-color, box-shadow !important;
    transition-duration: .3s !important;
    transition-delay: 0s !important;
  }
  html body #tt-mobile-header {
    position: sticky !important;
    top: 0 !important;
  }
  html body #tt-sticky-spacer { display: none !important; }
}
@media (max-width: 1024px) {
  html body #tt-sticky-header { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  @layer tt-card-layout {
    html body #tt-sticky-header :is(#tt-header, #tt-nav) { transition: none !important; }
  }
  html body #tt-mobile-header { transition: none !important; }
}