:root {
  --nm-mobile-nav-bottom-clearance: max(calc(env(safe-area-inset-bottom) + 12px), 44px);
}

@media (max-width: 699px) {
  .product-shell {
    padding-bottom: calc(88px + var(--nm-mobile-nav-bottom-clearance));
  }

  .main-content {
    padding-bottom: calc(96px + var(--nm-mobile-nav-bottom-clearance));
  }

  .bottom-nav {
    left: 12px;
    right: 12px;
    bottom: var(--nm-mobile-nav-bottom-clearance);
    padding: 8px;
    border: 1px solid var(--nm-border-subtle);
    border-radius: 16px;
    box-shadow: var(--nm-shadow-soft);
  }
}