/*
 * Preserve the direct-body percentage-height contract through Store's two
 * wrappers. Keep overflow visible: long pages must still scroll the document.
 */
html.StoreLayoutHtml {
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

body.StoreLayoutBody.StoreLayoutBody {
  --store-layout-rail: 72px !important;
  --store-layout-item-size: 40px !important;
  --store-layout-icon-size: 22px !important;
  --store-layout-logo-size: 36px !important;
  --store-layout-avatar-size: 30px !important;
  --store-layout-search-size: 32px !important;
  --store-layout-new-dot-top: 5px !important;
  --store-layout-new-dot-right: 11px !important;
  --store-layout-reserve: var(--store-layout-rail) !important;
  --store-layout-visual: var(--store-layout-rail) !important;
  --store-layout-native-safe-top: 0px !important;
  --store-layout-native-safe-bottom: 0px !important;
  --store-layout-mobile-safe-top: 0px !important;
  --store-layout-mobile-header: 0px !important;
  --safe-area-left: var(--store-layout-reserve) !important;
  --safe-area-top: var(--store-layout-native-safe-top) !important;
  --chatium-shell-inline-start: var(--store-layout-reserve) !important;
  --chatium-shell-inline-end: 0px !important;
  --chatium-shell-block-start: var(--store-layout-native-safe-top) !important;
  --chatium-shell-block-end: var(--store-layout-native-safe-bottom) !important;
  box-sizing: border-box !important;
  display: block !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  contain: none !important;
  will-change: auto !important;
}

body.StoreLayoutBody.StoreLayoutBody--native-client {
  --store-layout-native-safe-top: var(--chatium-safe-top, 0px) !important;
  --store-layout-native-safe-bottom: var(--chatium-safe-bottom, 0px) !important;
}

.StoreLayoutSurface--native-client {
  --store-layout-native-safe-top: var(--chatium-safe-top, 0px) !important;
  --store-layout-native-safe-bottom: var(--chatium-safe-bottom, 0px) !important;
}

@media (min-width: 1600px) {
  body.StoreLayoutBody.StoreLayoutBody {
    --store-layout-rail: 80px !important;
    --store-layout-item-size: 44px !important;
    --store-layout-icon-size: 24px !important;
    --store-layout-logo-size: 40px !important;
    --store-layout-avatar-size: 34px !important;
    --store-layout-search-size: 34px !important;
    --store-layout-new-dot-top: 6px !important;
    --store-layout-new-dot-right: 14px !important;
  }
}

@media (min-width: 2400px) {
  body.StoreLayoutBody.StoreLayoutBody {
    --store-layout-rail: 104px !important;
    --store-layout-item-size: 56px !important;
    --store-layout-icon-size: 32px !important;
    --store-layout-logo-size: 52px !important;
    --store-layout-avatar-size: 42px !important;
    --store-layout-search-size: 42px !important;
    --store-layout-new-dot-top: 8px !important;
    --store-layout-new-dot-right: 22px !important;
  }
}

html[data-store-layout-size='compact'] body.StoreLayoutBody.StoreLayoutBody {
  --store-layout-rail: 72px !important;
  --store-layout-item-size: 40px !important;
  --store-layout-icon-size: 22px !important;
  --store-layout-logo-size: 36px !important;
  --store-layout-avatar-size: 30px !important;
  --store-layout-search-size: 32px !important;
  --store-layout-new-dot-top: 5px !important;
  --store-layout-new-dot-right: 11px !important;
}

html[data-store-layout-size='standard'] body.StoreLayoutBody.StoreLayoutBody {
  --store-layout-rail: 80px !important;
  --store-layout-item-size: 44px !important;
  --store-layout-icon-size: 24px !important;
  --store-layout-logo-size: 40px !important;
  --store-layout-avatar-size: 34px !important;
  --store-layout-search-size: 34px !important;
  --store-layout-new-dot-top: 6px !important;
  --store-layout-new-dot-right: 14px !important;
}

html[data-store-layout-size='large'] body.StoreLayoutBody.StoreLayoutBody {
  --store-layout-rail: 104px !important;
  --store-layout-item-size: 56px !important;
  --store-layout-icon-size: 32px !important;
  --store-layout-logo-size: 52px !important;
  --store-layout-avatar-size: 42px !important;
  --store-layout-search-size: 42px !important;
  --store-layout-new-dot-top: 8px !important;
  --store-layout-new-dot-right: 22px !important;
}

body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded {
  --store-layout-reserve: 252px !important;
  --store-layout-visual: 252px !important;
}

body.StoreLayoutBody > .StoreLayoutShell {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: var(--store-layout-reserve) minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: grid-template-columns 0.18s ease;
}

body.StoreLayoutBody.StoreLayoutBody--native-client > .StoreLayoutShell {
  padding-top: var(--store-layout-native-safe-top) !important;
  padding-bottom: var(--store-layout-native-safe-bottom) !important;
}

body.StoreLayoutBody > .StoreLayoutShell > .StoreLayoutApp {
  box-sizing: border-box !important;
  grid-column: 2 !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
}

body.StoreLayoutBody > .StoreLayoutSurface {
  display: contents !important;
}

@media (max-width: 899px) {
  body.StoreLayoutBody.StoreLayoutBody,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded {
    --store-layout-reserve: 0px !important;
    --store-layout-visual: 252px !important;
    --store-layout-mobile-safe-top: env(safe-area-inset-top) !important;
    --store-layout-mobile-header: calc(
      38px + var(--store-layout-mobile-safe-top)
    ) !important;
    --safe-area-left: 0px !important;
    --safe-area-top: var(--store-layout-mobile-header) !important;
    --chatium-shell-inline-start: 0px !important;
    --chatium-shell-block-start: var(--store-layout-mobile-header) !important;
  }

  body.StoreLayoutBody.StoreLayoutBody--native-client,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded.StoreLayoutBody--native-client {
    --store-layout-mobile-safe-top: var(
      --store-layout-native-safe-top
    ) !important;
    --store-layout-mobile-header: calc(
      38px + var(--store-layout-native-safe-top)
    ) !important;
    --chatium-shell-block-end: var(
      --store-layout-native-safe-bottom
    ) !important;
  }

  body.StoreLayoutBody.StoreLayoutBody--native-handheld-client,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded.StoreLayoutBody--native-handheld-client {
    --store-layout-mobile-header: var(
      --store-layout-native-safe-top
    ) !important;
    --safe-area-top: var(--store-layout-native-safe-top) !important;
    --chatium-shell-block-start: var(--store-layout-native-safe-top) !important;
  }

  body.StoreLayoutBody > .StoreLayoutShell,
  body.StoreLayoutBody.StoreLayoutBody--native-client > .StoreLayoutShell {
    padding-top: var(--store-layout-mobile-header) !important;
    transition: padding-top 0.2s ease !important;
  }

  body.StoreLayoutBody.StoreLayoutBody--mobile-drawer-open {
    overflow: hidden !important;
  }

  body.StoreLayoutBody.StoreLayoutBody--mobile-header-compact,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded.StoreLayoutBody--mobile-header-compact {
    --store-layout-mobile-header: calc(
      22px + var(--store-layout-mobile-safe-top)
    ) !important;
  }

  body.StoreLayoutBody.StoreLayoutBody--mobile-header-hidden,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded.StoreLayoutBody--mobile-header-hidden {
    --store-layout-mobile-header: 0px !important;
  }
}

.StoreLayoutNativeSafeArea {
  --safe-area-left: 0px !important;
  --safe-area-top: var(--chatium-safe-top, 0px) !important;
  --chatium-shell-inline-start: 0px !important;
  --chatium-shell-inline-end: 0px !important;
  --chatium-shell-block-start: var(--chatium-safe-top, 0px) !important;
  --chatium-shell-block-end: var(--chatium-safe-bottom, 0px) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-top: var(--chatium-safe-top, 0px) !important;
  padding-bottom: var(--chatium-safe-bottom, 0px) !important;
}

@media print {
  body.StoreLayoutBody.StoreLayoutBody,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded,
  body.StoreLayoutBody.StoreLayoutBody--native-client,
  body.StoreLayoutBody.StoreLayoutBody.StoreLayoutBody--expanded.StoreLayoutBody--native-client {
    --store-layout-reserve: 0px !important;
    --store-layout-visual: 0px !important;
    --store-layout-native-safe-top: 0px !important;
    --store-layout-native-safe-bottom: 0px !important;
    --store-layout-mobile-safe-top: 0px !important;
    --store-layout-mobile-header: 0px !important;
    --safe-area-left: 0px !important;
    --safe-area-top: 0px !important;
    --chatium-shell-inline-start: 0px !important;
    --chatium-shell-block-start: 0px !important;
    --chatium-shell-block-end: 0px !important;
  }

  body.StoreLayoutBody > .StoreLayoutShell,
  body.StoreLayoutBody.StoreLayoutBody--native-client > .StoreLayoutShell {
    padding: 0 !important;
  }

  .StoreLayoutNativeSafeArea {
    --safe-area-top: 0px !important;
    --chatium-shell-block-start: 0px !important;
    --chatium-shell-block-end: 0px !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.StoreLayoutBody > .StoreLayoutShell {
    transition: none;
  }
}