.customer-shell-stage {
  display: none;
  background: #f5f5f5;
  min-height: calc(var(--app-viewport-height, 100vh) - 92px);
}

.customer-shell-frames {
  position: relative;
  width: 100%;
  min-height: inherit;
}

.customer-shell-frame {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: calc(var(--app-viewport-height, 100vh) - 92px);
  border: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  vertical-align: top;
}

.customer-shell-frame.active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.customer-shell-frame:not(.active) {
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

body.customer-shell-open > .container#home,
body.customer-shell-open > footer {
  display: none !important;
}

body.customer-shell-open .customer-shell-stage {
  display: block;
}

#customerShellCartLink {
  display: none !important;
}

body[data-customer-shell-page="shop"] #customerShellCartLink {
  display: flex !important;
}

body.dark-mode .customer-shell-stage,
body.dark-mode .customer-shell-frame {
  background: #151515;
}

html.customer-embedded,
html.customer-embedded body {
  height: auto !important;
  min-height: auto;
  overflow: visible !important;
  background: #f5f5f5;
}

html.mobile-view body.customer-shell-open .customer-shell-stage {
  height: calc(var(--app-viewport-height, 100vh) - 66px - var(--mobile-bottom-nav, 76px) - env(safe-area-inset-bottom, 0px));
  min-height: 360px;
  padding-bottom: 0;
  overflow: hidden;
}

html.mobile-view.compact-phone body.customer-shell-open .customer-shell-stage {
  height: calc(var(--app-viewport-height, 100vh) - 62px - var(--mobile-bottom-nav, 76px) - env(safe-area-inset-bottom, 0px));
}

html.mobile-view body.customer-shell-open .customer-shell-frames {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

html.mobile-view body.customer-shell-open .customer-shell-frame.active {
  height: 100% !important;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.mobile-view body.customer-shell-open {
  height: var(--app-viewport-height, 100vh);
  min-height: var(--app-viewport-height, 100vh);
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

html.customer-embedded header,
html.customer-embedded footer,
html.customer-embedded .skip-link,
html.customer-embedded .salon-ai-chat-button,
html.customer-embedded .salon-ai-chat-panel {
  display: none !important;
}

html.customer-embedded body.salon-ai-scroll-locked {
  position: static !important;
  overflow: visible !important;
}

html.customer-embedded .modal-overlay {
  position: absolute !important;
  top: var(--customer-embedded-viewport-top, 0px) !important;
  height: var(--customer-embedded-viewport-height, 100vh) !important;
  min-height: 360px;
}

html.customer-embedded .modal-content {
  max-height: calc(var(--customer-embedded-viewport-height, 100vh) - 32px);
  overflow: auto;
}

html.customer-embedded .container:first-of-type,
html.customer-embedded main.container:first-of-type {
  margin-top: 0;
}

html.customer-embedded body.dark-mode {
  background: #151515;
}

html.mobile-view.customer-embedded body:not(.admin-page) {
  height: auto !important;
  min-height: auto !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

html.mobile-view.customer-embedded.customer-shell-frame-scroll,
html.mobile-view.customer-embedded.customer-shell-frame-scroll body:not(.admin-page) {
  height: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

html.mobile-view.customer-embedded.customer-shell-frame-scroll body:not(.admin-page) {
  padding-bottom: 18px !important;
}

html.mobile-view.customer-embedded body:not(.admin-page)::before {
  display: none !important;
}