/* V14 — estabilidade direcional da narrativa de sabores no mobile. */

@media (max-width: 820px) {
  /* A esfiha que vem da hero mantém o mesmo enquadramento dos demais sabores. */
  .journey-food {
    width: min(82vw, 490px) !important;
  }

  /* O morango da hero é o único morango visível no primeiro capítulo. */
  .special-product[data-special-product="0"] {
    display: none !important;
  }

  /* Nenhum cartão muda de posição conforme a direção ou a inércia do dedo. */
  .specials-v2 .specials-product-deck,
  .specials-v2 .specials-stage[data-special-state] .specials-product-deck {
    left: 50% !important;
    top: 36% !important;
    width: min(82vw, 490px) !important;
    height: 42vh !important;
    transition: none !important;
  }

  .special-product,
  .special-product.is-active,
  .special-product.is-past,
  .special-finale,
  .special-finale.is-active {
    transform: none !important;
    transition: opacity .14s linear, visibility 0s linear !important;
  }

  .special-product img {
    animation: none !important;
    transform: none !important;
  }

  .specials-v2 .specials-copy,
  .specials-v2 .specials-stage[data-special-state="1"] .specials-copy[data-special-copy="1"],
  .specials-v2 .specials-stage[data-special-state="3"] .specials-copy[data-special-copy="3"],
  .specials-copy--final,
  .specials-v2 .specials-copy.is-active,
  .specials-v2 .specials-stage[data-special-state="1"] .specials-copy[data-special-copy="1"].is-active,
  .specials-v2 .specials-stage[data-special-state="3"] .specials-copy[data-special-copy="3"].is-active,
  .specials-copy--final.is-active {
    transform: none !important;
    transition: opacity .14s linear, visibility 0s linear !important;
  }

  /* A curva e o início da seção seguinte compartilham a mesma cor na emenda. */
  .specials-exit,
  .specials-exit::before,
  .story-section::before {
    background: #c00909 !important;
  }

  .story-opening {
    background:
      radial-gradient(circle at 4% 94%, rgba(255,203,0,.18), transparent 25%),
      linear-gradient(180deg, #c00909 0%, #c00909 18%, #aa070b 72%, #c6090e 100%) !important;
  }

  /* Scroll nativo e previsível em qualquer mudança rápida de direção. */
  html,
  body {
    scroll-behavior: auto !important;
    overscroll-behavior-y: auto;
  }

  .specials-v2,
  .specials-stage {
    touch-action: pan-y;
  }
}

@media (max-width: 390px) {
  .journey-food {
    width: min(79vw, 360px) !important;
  }

  .specials-v2 .specials-product-deck,
  .specials-v2 .specials-stage[data-special-state] .specials-product-deck {
    width: min(79vw, 360px) !important;
  }
}