/* =========================================================
   GOMMA WELL V22 — MOBILE FIRST VIEW REORDER
   MOBILE ONLY. Desktop layout/behaviour is untouched.

   Goal: on phones, the very first thing a visitor sees is the
   three-product image, followed by a compact "why trust us"
   badge row, and only then the existing institutional hero
   copy ("Seu cuidado diário pode ser mais gostoso.").

   Implementation notes:
   - A new <section class="mobile-first-view"> was added at the
     very top of <main>, before the existing hero. It is hidden
     by default (desktop) and only shown under 720px.
   - The original hero section and its content are fully kept
     in the DOM (nothing removed) so no JS (script.js, v10.js)
     breaks. On mobile we simply hide the duplicate product
     visual inside the hero (#heroStage) and let the hero act as
     the institutional block that now sits *after* the new intro.
   - Loaded last on purpose so it wins the existing !important
     cascade from v10–v20 for the properties it touches.
   ========================================================= */

.mobile-first-view{display:none}

@media(max-width:720px){

  /* ---------- NEW: 3-product intro + differentiators ---------- */
  .mobile-first-view{
    display:block;
    padding:22px max(5vw,16px) 8px;
    background:linear-gradient(180deg,#fff6e8 0%,#fffdf8 100%);
  }

  .mfv-products{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.26fr) minmax(0,.86fr);
    column-gap:8px;
    align-items:end;
    padding:6px 6px 2px;
  }
  .mfv-product{margin:0}
  .mfv-product img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 16px 20px rgba(38,0,53,.18));
  }
  .mfv-neuro{transform:rotate(-6deg)}
  .mfv-sleep{transform:none;position:relative;z-index:2}
  .mfv-energy{transform:rotate(6deg)}

  .mfv-tag{
    margin:6px 0 14px;
    text-align:center;
    font-size:11px;
    font-weight:850;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--purple);
  }

  .mfv-badges{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }
  .mfv-badge{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:14px;
    background:var(--paper);
    border:1px solid var(--line);
    font-size:11.5px;
    line-height:1.2;
    font-weight:800;
    color:var(--ink);
  }
  .mfv-badge i{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--lime);
    color:var(--deep);
    font-style:normal;
    font-size:10px;
    font-weight:950;
  }

  .mfv-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    margin-top:16px;
    padding:15px 18px;
    border:0;
    border-radius:99px;
    background:var(--deep);
    color:#fff;
    font-size:13px;
    font-weight:900;
    letter-spacing:.01em;
  }
  .mfv-cta span{font-size:14px}

  /* ---------- Existing hero becomes the institutional block ---------- */
  /* Hide the duplicate product visual: the three products already
     appeared above in .mobile-first-view. */
  #hero .hero-stage{display:none!important}
  #hero .scroll-hint{display:none!important}

  /* The hero no longer needs to fill the first screen — it now reads
     as a normal institutional section under the product intro. */
  .hero{
    grid-template-columns:1fr!important;
    min-height:auto!important;
    padding:40px 20px 46px!important;
  }
  .hero-copy{max-width:none!important}

  /* ---------- Diferenciais (Compra segura / Pix e cartão / Atendimento
     humano) centralizados no mobile, sem duplicar o bloco de badges já
     mostrado acima em .mobile-first-view ---------- */
  .hero-proof{justify-content:center!important;text-align:center!important;width:100%}

  /* A introdução de produtos já cumpre o papel de "primeira dobra"; a tag,
     os selos extras e o botão de "Conhecer as linhas" duplicam o que já
     existe logo abaixo no hero (eyebrow → título → descrição → botões →
     diferenciais), então ficam ocultos aqui para não repetir CTA/selos. */
  .mfv-tag,.mfv-badges,.mfv-cta{display:none!important}
  .mobile-first-view{padding-bottom:4px}
}