/* header-wrap-fix-20260911j — mobile: logo row1; actions row2 right; larger labels */
@media (max-width: 900px) {
  html body .site-header > .container.site-header-bar,
  html body .site-header .site-header-bar.container,
  html[lang] body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header > .container.site-header-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.35rem 0.4rem !important;
    height: auto !important;
    min-height: 3.25rem !important;
    overflow: visible !important;
  }

  /* Row 1: logo alone */
  html body .site-header .site-logo,
  html body a.site-logo,
  html[lang] body .site-header .site-logo,
  html.is-app-webview body .site-header .site-logo {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .site-header .site-logo-img,
  html.is-app-webview body .site-header .site-logo-img {
    height: 2.1rem !important;
    max-width: min(200px, 70vw) !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Row 2: login / register / upload / locale — right aligned */
  html body .site-header .site-header-actions,
  html[lang] body .site-header .site-header-actions,
  html.is-app-webview body .site-header .site-header-actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.35rem 0.4rem !important;
    overflow: visible !important;
  }

  /* Hide chips that React/CSS later remove — prevents under-logo flash */
  html body .site-header .site-header-home,
  html body .site-header .site-header-quote,
  html body .site-header .site-header-engineer,
  html body .site-header .site-header-email,
  html body .site-header .site-header-wa,
  html body .site-header-actions .site-header-home,
  html body .site-header-actions .site-header-quote,
  html body .site-header-actions .site-header-engineer,
  html body .site-header-actions .site-header-email,
  html body .site-header-actions .site-header-wa,
  html body .site-header-dashboard.is-guest-login {
    display: none !important;
  }

  html body .site-header .site-header-auth-slot,
  html[lang] body .site-header .site-header-auth-slot,
  html.is-app-webview body .site-header .site-header-auth-slot {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 0.32rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    order: 1 !important;
  }

  html body .site-header-auth-slot .btn-ghost[href*="/login"],
  html body .site-header-auth-slot .btn-ghost[href*="/register"],
  html body .site-header-auth-slot a.site-header-register,
  html body .site-header .site-header-register,
  html body .site-header-actions .site-header-register {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.65rem !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    border-radius: 0.65rem !important;
    width: auto !important;
    max-width: none !important;
  }

  html body .site-header .site-header-upload,
  html body .site-header-actions .site-header-upload {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;
    order: 2 !important;
    min-height: 2.35rem !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
  }

  html body .site-header .site-header-dashboard:not(.is-guest-login),
  html body .site-header-actions .site-header-dashboard:not(.is-guest-login) {
    order: 2 !important;
    min-height: 2.35rem !important;
    font-size: 0.88rem !important;
  }

  html body .site-header .locale-switch,
  html body .site-header .site-header-actions .locale-switch,
  html body .site-header .lang-switch {
    order: 3 !important;
  }

  html body .site-header .account-menu,
  html body .site-header-actions .account-menu {
    order: 4 !important;
  }

  html body .site-header .site-header-actions .btn,
  html body .site-header .site-header-actions a.btn,
  html body .site-header .locale-switch-btn,
  html body .site-header .lang-switch {
    flex: 0 0 auto !important;
    flex-direction: row !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    width: auto !important;
    overflow: visible !important;
    min-height: 2.35rem !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
    padding-inline: 0.65rem !important;
  }

  html body .site-subnav-main,
  html[lang] body .site-subnav-main {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.38rem 0.32rem !important;
    width: 100% !important;
  }
  html body .site-subnav-actions,
  html body .site-subnav-end,
  html[lang] body .site-subnav-actions,
  html[lang] body .site-subnav-end {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }
}

/* APP: same two-row header at any width */
html.is-app-webview body .site-header > .container.site-header-bar,
html.is-app-webview body .site-header .site-header-bar.container {
  display: flex !important;
  flex-wrap: wrap !important;
  height: auto !important;
  overflow: visible !important;
}
html.is-app-webview body .site-header .site-logo,
html.is-app-webview body a.site-logo {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}
html.is-app-webview body .site-header .site-header-actions {
  flex: 0 0 100% !important;
  width: 100% !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 0.35rem 0.4rem !important;
}
/* zoryra-pills-20260919a — 4-up row ×1.16 from 12.65/37 (14.67px / 42.92px); reserved 7rem */
@media (max-width: 900px) {
  html body .site-header > .container.site-header-bar,
  html body .site-header .site-header-bar.container,
  html[lang] body .site-header > .container.site-header-bar,
  html[lang] body .site-header .site-header-bar.container,
  html.zoryra-p1-home body .site-header > .container.site-header-bar,
  html.zoryra-p1-quote body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header .site-header-bar.container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    height: 7rem !important;
    min-height: 7rem !important;
    max-height: 7rem !important;
    align-content: flex-start !important;
    padding-bottom: 0.55rem !important;
    overflow: visible !important;
  }
  html body .site-header .site-logo,
  html body a.site-logo,
  html[lang] body .site-header .site-logo,
  html.is-app-webview body .site-header .site-logo {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .site-header .site-header-actions,
  html[lang] body .site-header .site-header-actions,
  html.is-app-webview body .site-header .site-header-actions,
  html body.antialiased .site-header .container.site-header-bar .site-header-actions {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0.14rem 0.18rem !important;
    min-height: 42.92px !important;
    height: 42.92px !important;
    max-height: 42.92px !important;
    overflow: visible !important;
  }
  html body .site-header .site-header-home,
  html body .site-header .site-header-quote,
  html body .site-header .site-header-engineer,
  html body .site-header .site-header-email,
  html body .site-header .site-header-wa {
    display: none !important;
  }
  html body .site-header .site-header-actions .site-header-auth-slot,
  html body .site-header .site-header-actions .locale-switch {
    flex: 0 0 auto !important;
    gap: 0.18rem !important;
  }
  html body .site-header-auth-slot .btn-ghost[href*="/login"],
  html body .site-header-auth-slot .btn-ghost[href*="/register"],
  html body .site-header-auth-slot a.site-header-register,
  html body .site-header .site-header-register,
  html body .site-header a.btn.site-header-upload,
  html body .site-header-actions .site-header-upload,
  html body .site-header .locale-switch-btn,
  html body .site-header .lang-switch,
  html[lang] body .site-header a.btn.site-header-upload,
  html[lang="zh"] body .site-header a.btn.site-header-upload,
  html[lang^="zh"] body .site-header a.btn.site-header-upload,
  html[lang="zh"] body .site-header .locale-switch-btn,
  html[lang^="zh"] body .site-header .locale-switch-btn,
  html body .site-header a.site-header-upload[hidden],
  html body .site-header-actions a.site-header-upload[hidden] {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    font-size: 14.67px !important;
    font-weight: 750 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    min-height: 42.92px !important;
    height: 42.92px !important;
    max-height: 42.92px !important;
    padding: 0.104rem 0.348rem !important;
    padding-inline: 0.348rem !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    opacity: 1 !important;
  }
  html body .site-header .locale-switch-btn > span,
  html body .site-header .lang-switch > span,
  html[lang^="zh"] body .site-header .locale-switch-btn > span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
}

/* zoryra-pills-20260919c — keep +16% pills; extra header reserve + subnav gap (no overlap) */
@media (max-width: 900px) {
  html body .site-header > .container.site-header-bar,
  html body .site-header .site-header-bar.container,
  html[lang] body .site-header > .container.site-header-bar,
  html[lang] body .site-header .site-header-bar.container,
  html.zoryra-p1-home body .site-header > .container.site-header-bar,
  html.zoryra-p1-quote body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header .site-header-bar.container,
  html body.antialiased .site-header .container.site-header-bar {
    height: 7rem !important;
    min-height: 7rem !important;
    max-height: 7rem !important;
    align-content: flex-start !important;
    padding-bottom: 0.55rem !important;
  }
  html body .site-header .site-subnav,
  html[lang] body .site-header .site-subnav,
  html.is-app-webview body .site-header .site-subnav {
    margin-top: 0.5rem !important;
  }
}


/* header-row-visible-20260928
   Phone: the action row was nowrap inside a fixed-height bar, so the right
   side (language, login, register) sat on or past the screen edge.
   Wrap the row and let the bar grow. Quote stays visible. Desktop unchanged. */
@media (max-width: 900px) {
  html body .site-header > .container.site-header-bar,
  html body .site-header .site-header-bar.container,
  html[lang] body .site-header > .container.site-header-bar,
  html[lang] body .site-header .site-header-bar.container,
  html.zoryra-p1-home body .site-header > .container.site-header-bar,
  html.zoryra-p1-quote body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header > .container.site-header-bar,
  html.is-app-webview body .site-header .site-header-bar.container,
  html body.antialiased .site-header > .container.site-header-bar {
    height: auto !important;
    min-height: 6.4rem !important;
    max-height: none !important;
    overflow: visible !important;
    align-content: flex-start !important;
  }
  html body .site-header .container.site-header-bar .site-header-actions,
  html[lang] body .site-header .container.site-header-bar .site-header-actions,
  html.is-app-webview body .site-header .container.site-header-bar .site-header-actions,
  html body.antialiased .site-header .container.site-header-bar .site-header-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    align-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 42.92px !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 0.35rem 0.4rem !important;
    padding-right: max(0.2rem, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }
  html body .site-header .site-header-actions a.site-header-quote,
  html[lang] body .site-header .site-header-actions a.site-header-quote {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .site-header .site-header-actions .site-header-auth-slot,
  html body .site-header .site-header-actions .locale-switch,
  html body .site-header-auth-slot a,
  html body .site-header .locale-switch-btn {
    flex: 0 1 auto !important;
    max-width: 100% !important;
  }
}