.menu-banner-overlay {
  --banner-top: max(24px, var(--gusto-safe-top));
  --banner-bottom: max(24px, var(--gusto-safe-bottom));
  --banner-height: calc(100dvh - var(--banner-top) - var(--banner-bottom));
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(402px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0 auto;
  padding: var(--banner-top) max(26px, var(--gusto-safe-right)) var(--banner-bottom) max(26px, var(--gusto-safe-left));
  border: 0;
  background: rgb(0 0 0 / 10%);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  overscroll-behavior: contain;
}
.menu-banner-overlay[open] { display: flex; align-items: center; justify-content: center; }
.menu-banner-overlay::backdrop { background: transparent; }
.menu-banner-overlay:focus { outline: none; }
.menu-banner-overlay .gusto-banner {
  flex: none;
  width: min(350px, 100%, calc(var(--banner-height) * .56));
  height: auto;
  aspect-ratio: 350 / 625;
  max-height: var(--banner-height);
  border: 0;
  box-shadow: inset 0 0 0 .25px #fff;
}
.menu-banner-overlay .gusto-banner__action:disabled { opacity: 1; }

.menu-banner-overlay--image-only .gusto-banner {
  display: block;
  width: min(350px, 100%);
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  background: #fff;
}
.menu-banner-overlay--image-only .gusto-banner__image {
  position: static;
  display: block;
  height: auto;
  max-height: var(--banner-height);
  object-fit: contain;
  backdrop-filter: none;
}
.menu-banner-overlay--image-only .gusto-banner__top { position: absolute; top: 8px; right: 8px; width: auto; }
.menu-banner-overlay--image-only .gusto-banner__close {
  width: 36px;
  height: 36px;
  padding: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 90%);
}