html:has(body.page-salon), body.page-salon {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: #121212;
}
body.page-salon .site-scroll-bg,
body.page-salon .floating-buttons { display: none !important; }
body.page-salon .main-content {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; height: 100dvh !important;
  min-height: 0 !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; z-index: auto !important;
}
.salon-app { display: block; width: 100%; height: 100%; border: 0; background: #121212; }
body.page-salon > .header {
  position: fixed !important; inset: 0 0 auto !important;
  width: 100%; z-index: 5000 !important;
  transition: transform 240ms ease, visibility 240ms;
  will-change: transform;
}
body.page-salon.salon-nav-ready:not(.salon-nav-open) > .header {
  transform: translateY(calc(-100% - 24px)); visibility: hidden;
  pointer-events: none;
}
body.page-salon.salon-nav-open > .header { transform: translateY(0); visibility: visible; }
.salon-nav-reveal {
  display: none; position: fixed; z-index: 5001;
  inset: 0 0 auto; width: 100%; height: 8px;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: #fff; cursor: pointer;
}
.salon-nav-ready > .salon-nav-reveal { display: block; }
.salon-nav-grip {
  display: block; width: 42px; height: 3px; margin: 1px auto 0;
  background: #fff7; border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 2px #0006;
  transition: opacity 160ms;
}
.salon-nav-open .salon-nav-grip { opacity: 0; }
.salon-nav-label { display: none; }
.salon-nav-reveal:focus-visible {
  width: 108px; height: 30px; left: 50%; transform: translateX(-50%);
  border-radius: 0 0 9px 9px; background: #29212f;
  outline: 2px solid #f4bd89; outline-offset: 1px;
}
.salon-nav-reveal:focus-visible .salon-nav-label { display: inline; }
.salon-nav-reveal:focus-visible .salon-nav-grip { display: none; }
.salon-no-script {
  position: fixed; inset: 45% 15% auto; padding: 24px;
  background: #fff; color: #222; border-radius: 12px; text-align: center;
}
@media (max-width: 768px), (hover: none), (pointer: coarse) {
  /* Keep the mobile reveal control clear of the embedded character controls. */
  body.page-salon .main-content {
    inset: 27px 0 0 !important;
    height: calc(100dvh - 27px) !important;
  }
  .salon-nav-reveal {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 90px; height: 27px; padding: 2px 8px 4px;
    border-radius: 0 0 10px 10px; background: #29212fe8;
    box-shadow: 0 2px 6px #0003; font: 12px/1.4 system-ui, sans-serif;
  }
  .salon-nav-label { display: inline; }
  .salon-nav-grip { display: none; }
  body.page-salon > .header { max-height: 100dvh; }
}
@media (max-width: 768px) {
  /* The sliding header establishes a containing block for the fixed menu. */
  body.page-salon > .header,
  body.page-salon .header .nav-container { overflow: visible !important; }
  body.page-salon .header .nav-menu {
    height: 100dvh; max-height: 100dvh; bottom: auto;
    box-sizing: border-box; overscroll-behavior: contain;
  }
  body.page-salon .header.meow-cloud-nav .nav-menu {
    height: calc(100dvh - 66px); max-height: calc(100dvh - 66px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-salon > .header, .salon-nav-grip { transition: none; }
}