/* Keep legacy elements in the DOM so their established handlers still work. */
html[data-page-navigation] :is(.back-to-top, #backLink, #labReturnButton, #mobileBackButton, #backButton, .desktop-product-trail, .mobile-trail, .contact-page .back-link) {
  display: none !important;
}

html[data-page-navigation] body {
  padding-bottom: 24px;
}

html[data-page-navigation] .site-page-navigation {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  width: 112px;
  overflow: hidden;
  border: 1px solid #6c8298;
  border-radius: 14px;
  background: #102c47;
  box-shadow: 0 8px 22px #06182740;
}

html[data-page-navigation] .site-page-navigation button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 8px 10px;
  background: transparent;
  color: #fff;
  font: 600 13px/1.2 "Microsoft JhengHei", "Segoe UI", sans-serif;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

html[data-page-navigation] .site-page-navigation button + button { border-top: 1px solid #526d83; }
html[data-page-navigation] .site-page-navigation button:hover:not(:disabled) { background: #1b4765; }
html[data-page-navigation] .site-page-navigation button:focus-visible { outline: 3px solid #6df3e5; outline-offset: -3px; }
html[data-page-navigation] .site-page-navigation button:disabled { color: #b1c1ce; cursor: default; }
html[data-page-navigation] .site-page-navigation svg { display: block; flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

html[data-page-navigation] #discoveryResults { padding-bottom: 118px; scroll-padding-bottom: 110px; }
html[data-page-navigation] dialog[open]:has(> .site-page-navigation) { padding-bottom: 118px; }

@media (max-width: 900px) {
  html[data-page-navigation] body { padding-bottom: 110px; }
  html[data-page-navigation] .site-page-navigation { right: 14px; bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Same actions and location, with a smaller footprint and accessible labels. */
html[data-page-navigation] .site-page-navigation{width:46px;overflow:visible;border-color:#6c829866;border-radius:13px;box-shadow:0 5px 18px #06182726}
html[data-page-navigation] .site-page-navigation button{position:relative;justify-content:center;min-height:46px;padding:10px;gap:0}
html[data-page-navigation] .site-page-navigation button:first-child{border-radius:12px 12px 0 0}
html[data-page-navigation] .site-page-navigation button:last-child{border-radius:0 0 12px 12px}
html[data-page-navigation] .site-page-navigation button svg{width:20px;height:20px;flex-basis:20px}
html[data-page-navigation] .site-page-navigation button>span{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:8px 11px;background:#102c47;color:#fff;border:1px solid #6c829866;border-radius:8px;box-shadow:0 3px 12px #06182720;opacity:0;pointer-events:none;white-space:nowrap;font-size:12px}
html[data-page-navigation] .site-page-navigation button:focus-visible>span{opacity:1}
@media(hover:hover) and (pointer:fine){html[data-page-navigation] .site-page-navigation button:hover>span{opacity:1}}
