/* Desktop root header: use the same three-column grid as Recipes. */
@media (min-width: 769px) {
  /* The App hero has its own outer inset. Match the Recipes header surface
     without changing the hero content or the mobile layout. */
  #app .hero-section {
    padding: 2px 8px 10px !important;
  }

  .hero-container > .header {
    width: calc(100% + 220px) !important;
    margin-left: -110px !important;
    padding-top: 11px !important;
    box-sizing: border-box;
  }

  .hero-container > .header .header-container {
    width: calc(100% - 80px) !important;
    max-width: 1536px !important;
    height: 48px;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .hero-container > .header .actions-section {
    height: 48px;
  }
}