:root {
  --zip24-logo-size: 96px;
  --zip24-header-height: 112px;
  --zip24-header-width: min(1280px, calc(100% - 48px));
  --header-height: var(--zip24-header-height);
}

html {
  background: #090f14;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* One geometry for the legacy landing page and the React catalog. */
body > header,
.site-header {
  box-sizing: border-box;
  height: var(--zip24-header-height);
  background: #000;
  backdrop-filter: none;
  border-bottom: 1px solid rgb(255 255 255 / .09);
  view-transition-name: zip24-header;
}

body > header > div,
.header-inner {
  box-sizing: border-box;
  width: var(--zip24-header-width);
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
}

.brand-button,
body > header img[data-zip24-logo],
.brand-button img,
.zip24-logo {
  flex-shrink: 0;
  width: var(--zip24-logo-size) !important;
  height: var(--zip24-logo-size) !important;
  object-fit: contain;
}

.brand-button picture,
body > header picture { display: block; }

body > main#top > section:first-child { padding-top: var(--zip24-header-height); }
body > main#top > section:first-child > .mx-auto { min-height: calc(100svh - var(--zip24-header-height)); }

/* Only content fades: fixed dialogs and the header stay viewport-bound. */
body > main#top,
.screen-stage { animation: zip24-page-in 450ms cubic-bezier(.22, 1, .36, 1) both; }

.zip24-leaving body > main#top,
.zip24-leaving .screen-stage {
  animation: none;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(.4, 0, 1, 1);
}

@keyframes zip24-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes zip24-out { to { opacity: 0; } }

@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 450ms; }
::view-transition-old(root) { animation: zip24-out 200ms ease both; }
::view-transition-new(root) { animation: zip24-page-in 450ms cubic-bezier(.22, 1, .36, 1) both; }
::view-transition-group(zip24-header) { animation: none; z-index: 1; }
::view-transition-old(zip24-header) { display: none; }
::view-transition-new(zip24-header) { animation: none; mix-blend-mode: normal; }

/* Do not multiply the native and fallback opacity curves. The fallback
   clock still runs, so finishing the native transition cannot restart it. */
:root:not(.zip24-leaving):active-view-transition body > main#top,
:root:not(.zip24-leaving):active-view-transition .screen-stage { opacity: 1 !important; }

.zip24-mobile-catalog { display: none; color: #fff; font-size: .75rem; font-weight: 800; text-decoration: none; }

@media (max-width: 1023px) {
  .zip24-mobile-catalog { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .7rem; border: 1px solid rgb(255 255 255 / .22); border-radius: .5rem; }
}

@media (max-width: 900px) {
  :root { --zip24-header-width: calc(100% - 32px); }
}

@media (max-width: 640px) {
  :root {
    --zip24-logo-size: 72px;
    --zip24-header-height: 88px;
    --zip24-header-width: calc(100% - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}