/*
 * Desktop shell guard.
 * Windows and MacBook must preserve the same visible width as the upper bar.
 * The display zoom still changes the visual scale, but it no longer squeezes
 * the whole page into a mobile-looking column.
 */
@media (min-width: 761px) {
  body.public-site:is(.public-platform-windows, .public-platform-macbook) > .public-main {
    width: var(--gfn-display-main-width, 100%) !important;
    max-width: none !important;
    overflow-x: clip !important;
  }

  body.public-site:is(.public-platform-windows, .public-platform-macbook) > .public-main .public-main {
    zoom: 1 !important;
  }

  body.public-site:is(.public-platform-windows, .public-platform-macbook) :is(
    .public-header__inner,
    .public-footer__inner
  ) {
    width: min(var(--gfn-display-width, 1320px), calc(100% - 44px)) !important;
    max-width: min(var(--gfn-display-width, 1320px), calc(100% - 44px)) !important;
    margin-inline: auto !important;
  }

  body.public-site:is(.public-platform-windows, .public-platform-macbook) > .public-main .public-container,
  body.public-site:is(.public-platform-windows, .public-platform-macbook) > .public-main .inicio-shell,
  body.public-site:is(.public-platform-windows, .public-platform-macbook) > .public-main .payment-shell {
    width: min(
      var(--gfn-display-width-compensated, 1320px),
      calc(100% - var(--gfn-display-gutter-compensated, 44px))
    ) !important;
    max-width: min(
      var(--gfn-display-width-compensated, 1320px),
      calc(100% - var(--gfn-display-gutter-compensated, 44px))
    ) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* Catalog pages have their own saved width variable. The outer desktop shell wins. */
  body.public-site:is(.public-platform-windows, .public-platform-macbook).page-campanhas
    > .public-main .campaigns-display-scope .public-container,
  body.public-site:is(.public-platform-windows, .public-platform-macbook).page-campanhas
    > .public-main .campaign-lucky-section .public-container,
  body.public-site:is(.public-platform-windows, .public-platform-macbook).page-campaign-detail
    > .public-main .public-container,
  body.public-site:is(.public-platform-windows, .public-platform-macbook).page-ganhadores
    > .public-main .public-container.winners-page__shell {
    width: min(
      var(--gfn-display-width-compensated, 1320px),
      calc(100% - var(--gfn-display-gutter-compensated, 44px))
    ) !important;
    max-width: min(
      var(--gfn-display-width-compensated, 1320px),
      calc(100% - var(--gfn-display-gutter-compensated, 44px))
    ) !important;
    margin-inline: auto !important;
  }
}

/*
 * Mobile width guard.
 * Android e iOS continuam obedecendo ao controle percentual de largura,
 * mas o palco inteiro fica preso dentro da area util da tela. O zoom e
 * compensado no palco externo para que 86-100% continue significando a
 * largura VISIVEL escolhida no editor, sem criar rolagem horizontal.
 */
@media (max-width: 760px) {
  body.public-site.public-platform-android {
    width: 100% !important;
    max-width: 100dvw !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.public-site.public-platform-ios {
    width: 100% !important;
    max-width: 100dvw !important;
    padding-left: max(2px, env(safe-area-inset-left)) !important;
    padding-right: max(2px, env(safe-area-inset-right)) !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.public-site:is(.public-platform-android, .public-platform-ios) > .public-main {
    width: var(--gfn-display-main-width, 100%) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  body.public-site:is(.public-platform-android, .public-platform-ios) > .public-main .public-main {
    zoom: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* O padding de seguranca fica no body para nao ser reduzido/aumentado pelo zoom. */
  body.public-site:is(.public-platform-android, .public-platform-ios) .public-header {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  body.public-site:is(.public-platform-android, .public-platform-ios) :is(
    .public-header__inner,
    .public-footer__inner
  ) {
    width: min(var(--gfn-display-width, 100%), 100%) !important;
    max-width: min(var(--gfn-display-width, 100%), 100%) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  body.public-site:is(.public-platform-android, .public-platform-ios) > .public-main :is(
    .public-container,
    .inicio-shell,
    .payment-shell
  ) {
    width: min(var(--gfn-display-width, 100%), 100%) !important;
    max-width: min(var(--gfn-display-width, 100%), 100%) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* As paginas possuem componentes proprios; nenhum deles pode furar a borda mobile. */
  body.public-site:is(.public-platform-android, .public-platform-ios) > .public-main :where(
    section,
    article,
    div,
    form,
    fieldset,
    nav,
    header,
    footer,
    picture
  ) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.public-site:is(.public-platform-android, .public-platform-ios) > .public-main :where(
    img,
    video,
    iframe,
    canvas,
    picture,
    svg,
    input,
    select,
    textarea,
    table
  ) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}