/* Mobile v27 — viewport dock and true document-end repair.
   This file is intentionally loaded after every storefront/docs/reviews layer. */
@media (max-width: 900px) {
  :root {
    --mobile-v27-gutter: clamp(12px, 3.75vw, 18px);
    --mobile-v27-content-max: 760px;
    --mobile-v27-dock-height: 70px;
    --mobile-v27-dock-gap: 8px;
  }

  html {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  html body.store-body {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
    touch-action: pan-y pinch-zoom !important;
  }

  html body.store-body #app,
  html body.store-body #app > .store-layout,
  html body.store-body #app > .store-layout.sidebar-collapsed,
  html body.store-body #app > .store-layout.mobile-layout-v23,
  html body.store-body #app > .store-layout.mobile-layout-v24 {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  html body.store-body #app::after,
  html body.store-body #app > .store-layout::after,
  html body.store-body #app > .store-layout > main.main::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.sidebar-collapsed:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.mobile-layout-v23:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.mobile-layout-v24:not(.auth-layout) > main.main {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: var(--mobile-v27-content-max) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding-right: var(--mobile-v27-gutter) !important;
    padding-bottom: calc(var(--mobile-v27-dock-height) + 28px + env(safe-area-inset-bottom)) !important;
    padding-left: var(--mobile-v27-gutter) !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    contain: none !important;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main > footer.site-footer,
  html body.store-body #app > .store-layout:not(.auth-layout) > main.main > .site-footer,
  html body.store-body footer.site-footer.compact-footer.footer-v398,
  html body.store-body footer.site-footer.compact-footer.footer-v399 {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main > footer.site-footer:last-child,
  html body.store-body #app > .store-layout:not(.auth-layout) > main.main > .site-footer:last-child {
    margin-bottom: 0 !important;
  }

  /* Vue teleports the dock directly under BODY. This prevents iOS Safari from
     treating it as an absolute child of transformed/contained page wrappers. */
  html body.store-body > .mobile-bottom-nav-v18,
  html body.store-body > .mobile-bottom-nav-v23,
  html body.store-body > .mobile-bottom-nav-v27 {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: max(var(--mobile-v27-dock-gap), env(safe-area-inset-bottom)) !important;
    z-index: 2147482000 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 2px !important;
    width: min(calc(100vw - (var(--mobile-v27-gutter) * 2)), calc(var(--mobile-v27-content-max) - (var(--mobile-v27-gutter) * 2))) !important;
    max-width: 724px !important;
    min-width: 0 !important;
    min-height: var(--mobile-v27-dock-height) !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid rgba(122, 148, 181, .34) !important;
    border-radius: 24px !important;
    background: #f8fbff !important;
    box-shadow: 0 16px 46px rgba(25, 51, 86, .19), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    transform: translate3d(-50%, 0, 0) !important;
    filter: none !important;
    perspective: none !important;
    contain: layout paint style !important;
    isolation: isolate !important;
    overflow: hidden !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
  }

  html body.store-body > .mobile-bottom-nav-v18 > button,
  html body.store-body > .mobile-bottom-nav-v23 > button,
  html body.store-body > .mobile-bottom-nav-v27 > button {
    min-width: 0 !important;
    height: 56px !important;
  }

  /* Keep the last real block close to the end of the document. */
  html body.store-body main.main > :last-child:not(.mobile-bottom-nav-v18):not(.mobile-bottom-nav-v23):not(.mobile-bottom-nav-v27) {
    margin-bottom: 0 !important;
  }

  /* Product page cleanup while touching the mobile shell. */
  html body.store-body .product-screen,
  html body.store-body .product-v108-page,
  html body.store-body .product-v412-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body.store-body .product-v108-main,
  html body.store-body .product-v108-aside {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.store-body .product-v108-hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.store-body .product-v108-hero > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-v27-gutter: 12px;
    --mobile-v27-dock-height: 68px;
    --mobile-v27-dock-gap: 6px;
  }

  html body.store-body #app > .store-layout:not(.auth-layout) > main.main,
  html body.store-body #app > .store-layout.sidebar-collapsed:not(.auth-layout) > main.main {
    padding-bottom: calc(var(--mobile-v27-dock-height) + 24px + env(safe-area-inset-bottom)) !important;
  }

  html body.store-body > .mobile-bottom-nav-v18,
  html body.store-body > .mobile-bottom-nav-v23,
  html body.store-body > .mobile-bottom-nav-v27 {
    border-radius: 22px !important;
    padding: 5px !important;
  }
}

@media (min-width: 901px) {
  html body.store-body > .mobile-bottom-nav-v27 {
    display: none !important;
  }
}