/* Fooppers Recipes — host element only. The app itself lives in a shadow root (recipes.css). */

/* Break out of any centred theme container so the app runs edge to edge. */
.fr-host{
  display:block;position:relative;
  width:100vw;max-width:100vw;
  margin:0 calc(50% - 50vw)!important;padding:0!important;
  background:#F4F6F1;
  min-height:70vh;
}
body.fr-fullpage{overflow-x:clip}
body.fr-fullpage .fr-page{display:block;margin:0;padding:0;max-width:none;width:100%}

/* Standalone app screen */
html:has(body.fr-app-mode){background:#F4F6F1}
body.fr-app-mode{margin:0;background:#F4F6F1;overflow-x:clip}
body.fr-app-mode .fr-host{width:100%;max-width:none;margin:0!important;min-height:100vh;min-height:100dvh}

/* With JS the shadow root renders instead of this light-DOM SEO copy. */
.fr-host.fr-js > .fr-seo{display:none}
.fr-host:not(.fr-js) > .fr-seo{max-width:720px;margin:0 auto;padding:24px 20px;font-family:Poppins,sans-serif}