/* V45.22.13 — emergency customer dock geometry lock.
   Loaded after the legacy stylesheet so old responsive rules cannot stretch it. */

html, body { background:#fff; }

/* Non-home customer pages: nav itself owns the 4-column grid. */
body:not([data-page="admin"]):not([data-page="home"]) > nav.bottom-nav.bottom-nav-4 {
  position: fixed !important;
  top: auto !important;
  bottom: 4px !important;
  left: 50% !important;
  right: auto !important;
  width: calc(100vw - 32px) !important;
  max-width: 1376px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 62px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0 !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(78,59,88,.11) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(37,23,45,.10) !important;
  z-index: 200 !important;
  contain: layout paint !important;
}

/* Home has one extra wrapper. */
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 {
  position: fixed !important;
  top: auto !important;
  bottom: 4px !important;
  left: 50% !important;
  right: auto !important;
  width: calc(100vw - 32px) !important;
  max-width: 1376px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(78,59,88,.11) !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: 0 8px 22px rgba(37,23,45,.10) !important;
  z-index: 200 !important;
  contain: layout paint !important;
}
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 > .home-bottom-nav-inner {
  width: 100% !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 62px !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

/* Exact 25% hit areas, never allowed to size the parent. */
body:not([data-page="admin"]) > nav.bottom-nav.bottom-nav-4 .nav-item,
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 .nav-item {
  position: relative !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  flex: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  border: 0 !important;
  border-right: 1px solid rgba(78,59,88,.065) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body:not([data-page="admin"]) > nav.bottom-nav.bottom-nav-4 .nav-item:last-child,
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 .nav-item:last-child {
  border-right: 0 !important;
}
body:not([data-page="admin"]) > nav.bottom-nav.bottom-nav-4 .icon-wrap,
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 .icon-wrap {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  display: grid !important;
  place-items: center !important;
}
body:not([data-page="admin"]) > nav.bottom-nav.bottom-nav-4 .nav-svg,
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 .nav-svg {
  width: 21px !important;
  height: 21px !important;
}
body:not([data-page="admin"]) > nav.bottom-nav.bottom-nav-4 .label,
body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 .label {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 680 !important;
  white-space: nowrap !important;
}

@media (min-width: 768px) {
  body:not([data-page="admin"]):not([data-page="home"]) > nav.bottom-nav.bottom-nav-4,
  body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 {
    width: calc(100vw - 64px) !important;
  }
}

@media (max-width: 767px) {
  body:not([data-page="admin"]):not([data-page="home"]) > nav.bottom-nav.bottom-nav-4,
  body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 {
    bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 32px) !important;
  }
}

/* V45.22.14 — iOS/Safari bottom browser chrome backdrop.
   Safari's translucent bottom toolbar must see white, not catalog content.
   The white layer ends exactly at the top edge of the floating dock. */
@media (max-width: 767px) {
  html,
  body:not([data-page="admin"]) {
    background-color: #fff !important;
  }

  body:not([data-page="admin"])::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 100 !important;
  }

  body:not([data-page="admin"]):not([data-page="home"]) > nav.bottom-nav.bottom-nav-4,
  body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 200 !important;
  }
}

/* V45.22.15 — Safari white is ONLY below the customer dock.
   Content may remain visible around the floating dock itself. */
@media (max-width: 767px) {
  body:not([data-page="admin"])::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: max(6px, env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    z-index: 199 !important;
  }

  body:not([data-page="admin"]):not([data-page="home"]) > nav.bottom-nav.bottom-nav-4,
  body[data-page="home"] > nav.home-bottom-nav.bottom-nav-4 {
    bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  }
}