/* =========================================================
   GOMMA WELL V19 — MOBILE LAYOUT REBUILT WITH CSS GRID
   No absolute positioning for the three product packs.
   This guarantees three separate lanes and prevents overlap.
   ========================================================= */

@media (max-width: 720px){
  /* HOME HERO: three independent columns */
  .hero-stage{
    display:grid!important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.22fr) minmax(0,.88fr)!important;
    grid-template-rows:1fr!important;
    column-gap:8px!important;
    align-items:end!important;
    justify-items:center!important;
    position:relative!important;
    height:390px!important;
    min-height:390px!important;
    padding:70px 10px 24px!important;
    margin-top:6px!important;
    overflow:visible!important;
  }

  .hero-product{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    align-self:end!important;
    justify-self:stretch!important;
    opacity:1!important;
    animation:none!important;
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))!important;
    transform:none!important;
    z-index:3!important;
  }
  .hero-product::before,
  .hero-product::after{display:none!important}
  .hero-product img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
  }

  .hero-neuro{grid-column:1!important;transform:rotate(-5deg)!important}
  .hero-sleep{grid-column:2!important;transform:none!important;z-index:4!important}
  .hero-energy{grid-column:3!important;transform:rotate(5deg)!important}

  /* keep decorations away from labels */
  .gel-hero-a{left:5%!important;top:15%!important}
  .gel-hero-b{right:4%!important;top:20%!important}
  .gel-hero-c{right:6%!important;bottom:8%!important}

  /* KIT: same three-lane structure */
  .kit-stage{
    display:grid!important;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.22fr) minmax(0,.88fr)!important;
    grid-template-rows:1fr!important;
    column-gap:8px!important;
    align-items:end!important;
    justify-items:center!important;
    position:relative!important;
    height:315px!important;
    min-height:315px!important;
    padding:48px 8px 18px!important;
    overflow:visible!important;
  }

  .kit-product{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    margin:0!important;
    align-self:end!important;
    justify-self:stretch!important;
    opacity:1!important;
    animation:none!important;
    filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))!important;
    transform:none!important;
    z-index:3!important;
  }
  .kit-product::before,
  .kit-product::after{display:none!important}
  .kit-product img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
  }

  .kit-neuro{grid-column:1!important;transform:rotate(-5deg)!important}
  .kit-sleep{grid-column:2!important;transform:none!important;z-index:4!important}
  .kit-energy{grid-column:3!important;transform:rotate(5deg)!important}

  .kit-gel-a{left:4%!important;top:8%!important}
  .kit-gel-b{right:4%!important;top:10%!important}
  .kit-gel-c{right:7%!important;bottom:16%!important}

  /* Dedicated landing pages: true center, no inherited offsets */
  .product-stage{
    display:grid!important;
    place-items:center!important;
    position:relative!important;
    min-height:410px!important;
    width:100%!important;
    overflow:visible!important;
  }
  .product-pack{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-height:340px!important;
    max-width:72vw!important;
    margin:0 auto!important;
    object-fit:contain!important;
    transform:none!important;
    animation:none!important;
  }
}

@media (max-width: 430px){
  .hero-stage{
    height:365px!important;
    min-height:365px!important;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.28fr) minmax(0,.84fr)!important;
    column-gap:6px!important;
    padding-inline:6px!important;
  }
  .kit-stage{
    height:295px!important;
    min-height:295px!important;
    grid-template-columns:minmax(0,.84fr) minmax(0,1.28fr) minmax(0,.84fr)!important;
    column-gap:6px!important;
    padding-inline:4px!important;
  }
  .product-pack{max-width:70vw!important;max-height:325px!important}
}