/* Keep exactly one vertical scroll owner. `overflow-x: hidden` on body makes
   its computed overflow-y become auto, which creates a second scrollbar after
   an SPA route transition. Clip horizontal paint without turning body into a
   scroll container; the document element alone owns vertical scrolling. */
html { overflow-x: hidden; overflow-y: auto; }
/* Route styles must never promote body to a second scroll container. The
   important declarations intentionally override older page-specific rules. */
html > body { overflow-x: clip !important; overflow-y: visible !important; }
body.products-page { height: auto; overflow-x: clip; overflow-y: visible !important; }
body.products-page #spa-root { height: auto; overflow: visible !important; }
html.spa-lock, html.spa-lock > body { overflow: hidden !important; }
#spa-root { min-height: 100vh; }
#spa-root.spa-entering { animation: spaEnter .52s cubic-bezier(.22,1,.36,1) both; }
#spa-root.spa-leaving { animation: spaLeave .22s cubic-bezier(.4,0,1,1) both; pointer-events:none; }
@keyframes spaEnter { from { opacity:0; } to { opacity:1; } }
@keyframes spaLeave { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { #spa-root.spa-entering, #spa-root.spa-leaving { animation:none; } }

/* Contextual Back control for second- and third-level SPA routes. */
.spa-context-back {
  position: fixed;
  z-index: 7600;
  top: 94px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 40px;
  padding: 0 19px;
  border: 1px solid rgba(33, 51, 69, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 5px 18px rgba(33, 51, 69, .07);
  color: #213345;
  font: 500 15px/1 Arial, Helvetica, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  opacity: .82;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.22,1,.36,1), box-shadow 180ms ease, background-color 180ms ease;
}
.spa-context-back:hover,
.spa-context-back:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 22px rgba(33, 51, 69, .11);
  outline: none;
}
.spa-context-back:active { transform: translateY(0); }
body.nav-is-condensed .spa-context-back { top: 92px; }
@media (max-width: 760px) {
  .spa-context-back { top: 86px; left: 12px; height: 38px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .spa-context-back { transition-duration: 1ms; }
}