/* DEMI DEVILLE — minimal, page-scoped fixes: responsive LOGIN artwork,
   separated navigation, and desktop HOME hero filling the viewport. */
@media (min-width: 901px) {
  html body .home#homePage {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }
  html body .home#homePage .hero-image {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    transform-origin: center !important;
    background: #000 !important;
  }
}

/* Desktop navigation must take up its own row. The legacy fixed header
   otherwise leaves the registration title directly beneath the wordmark. */
@media (min-width: 901px) {
  html body.login-page #loginCanvas #desktopHeader.site-header {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 86px !important;
    min-height: 86px !important;
    flex: 0 0 86px !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 100 !important;
  }
}

/* Login forms are always in flow, below site navigation (never under logo). */
html body.login-page #loginCanvas.login-canvas {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}
html body.login-page #loginCanvas .login-wrap {
  flex: 1 0 auto !important;
  position: relative !important;
  width: 100% !important;
  max-width: 1100px !important;
  height: auto !important;
  min-height: calc(100dvh - 86px) !important;
  margin: 0 auto !important;
  padding: 54px 20px 105px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  transform: none !important;
}
html body.login-page #loginCanvas .auth-stack {
  flex: none !important;
  margin: 0 auto !important;
}
html body.login-page #loginCanvas .login-art:not([hidden]) {
  position: absolute !important;
  top: 16px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  height: calc(100% - 32px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateX(-50%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* The art is allowed to be wider than the mobile viewport; only horizontal
   overflow is clipped. Its full bottom remains present down the scrollable page. */
html body.login-page {overflow-x: clip !important; overflow-y: auto !important;}
html body.login-page #loginCanvas .auth-stack .auth-title {
  position: relative !important;
  line-height: 1.25 !important;
}
@media (max-width: 900px) {
  html body.login-page #loginCanvas #mobileHeader {
    flex: 0 0 auto !important;
    position: relative !important;
    min-height: 64px !important;
    z-index: 100 !important;
  }
  html body.login-page #loginCanvas .login-wrap {
    min-height: max(calc(100dvh - 64px), 840px) !important;
    padding: 55px 18px 118px !important;
  }
  html body.login-page #loginCanvas .login-art:not([hidden]) {
    top: 34px !important;
    height: calc(100% - 50px) !important;
  }
  html body.login-page #loginCanvas .auth-stack {width: min(360px,100%) !important;}
}
@media (max-width: 430px) {
  html body.login-page #loginCanvas .login-wrap {padding-top: 55px !important;padding-bottom: 126px !important;}
}
/* Existing desktop navigation is fixed by the global chrome runtime, so
   reserve its actual height explicitly, even when the runtime wins a header rule. */
@media (min-width: 901px) {
  html body.login-page #loginCanvas .login-wrap {
    margin: 86px auto 0 !important;
    min-height: calc(100dvh - 86px) !important;
  }
}

/* Registration / login: always provide at least 40px of real page scrolling, even when the form fits. */
html body.login-page #loginCanvas.login-canvas::after {
  content: "";
  display: block !important;
  flex: 0 0 40px !important;
  width: 100%;
  height: 40px !important;
  min-height: 40px !important;
  pointer-events: none;
}

html body.login-page #loginCanvas.login-canvas {
  min-height: calc(100dvh + 40px) !important;
}

/* LOGIN / REGISTER only: the global desktop chrome sets html overflow:hidden.
   Make the REAL document scrollbar visible, including when forms fit inside viewport. */
html:has(body.login-page) {
  overflow-y: scroll !important;
  overflow-x: clip !important;
  scrollbar-gutter: stable !important;
}
html:has(body.login-page)::-webkit-scrollbar { width: 10px; }
html:has(body.login-page)::-webkit-scrollbar-track { background: #f0f0f0; }
html:has(body.login-page)::-webkit-scrollbar-thumb { background: #888; border-radius: 8px; border: 2px solid #f0f0f0; }
html:has(body.login-page)::-webkit-scrollbar-thumb:hover { background: #555; }
html body.login-page {
  min-height: calc(100dvh + 40px) !important;
}