/* =========================================================
   GOMMA WELL V14 — hero spacing + stable scene swapping
   ========================================================= */

/* Desktop / tablet refinements for trio balance */
.hero-neuro{left:7%!important;width:27%!important;bottom:6%!important;z-index:2!important}
.hero-sleep{left:31%!important;width:38%!important;bottom:2%!important;z-index:5!important}
.hero-energy{right:7%!important;width:27%!important;bottom:6%!important;z-index:2!important}

.kit-neuro{left:6%!important;width:28%!important;bottom:5%!important;z-index:2!important}
.kit-sleep{left:31%!important;width:39%!important;bottom:2%!important;z-index:5!important}
.kit-energy{right:6%!important;width:28%!important;bottom:5%!important;z-index:2!important}

/* Scene swap safety: never leave the previous product/copy visibly lingering */
.scene-copy,
.scene-product{
  will-change:opacity,transform;
}
.scene-copy:not(.active):not(.exit),
.scene-product:not(.active):not(.exit){
  pointer-events:none!important;
}
.scene-copy.exit,
.scene-product.exit{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:720px){
  /* 1) Home hero — clear left / center / right composition */
  .hero-stage{
    height:490px!important;
    margin-top:6px!important;
  }
  .hero-neuro{
    width:26%!important;
    left:6%!important;
    bottom:7%!important;
  }
  .hero-sleep{
    width:36%!important;
    left:32%!important;
    bottom:2%!important;
  }
  .hero-energy{
    width:26%!important;
    right:6%!important;
    bottom:7%!important;
  }
  .hero-product::after{
    left:22%!important;
    right:22%!important;
    height:5%!important;
  }

  /* Keep hero decoration away from products */
  .gel-hero-a{left:6%!important;top:14%!important}
  .gel-hero-b{right:4%!important;top:26%!important}
  .gel-hero-c{right:5%!important;bottom:12%!important}
  .twinkle-a{right:9%!important;top:15%!important}
  .twinkle-b{left:6%!important;bottom:23%!important}

  /* 2) Product story — stable content, no ghost transition */
  .scene-copy-wrap{
    top:100px!important;
    height:41%!important;
  }
  .scene-copy{
    opacity:0!important;
    transform:translateY(12px)!important;
    transition:opacity .16s ease,transform .2s ease!important;
  }
  .scene-copy.active{
    opacity:1!important;
    transform:none!important;
    visibility:visible!important;
    z-index:3!important;
  }
  .scene-copy.exit{
    transform:translateY(0)!important;
    transition-duration:.08s!important;
  }

  .scene-stage{
    left:0!important;
    right:0!important;
    width:100%!important;
    height:39%!important;
    bottom:2%!important;
    display:grid!important;
    place-items:end center!important;
    overflow:visible!important;
  }
  .scene-stage::before{
    left:31%!important;
    right:31%!important;
    bottom:40px!important;
    height:7%!important;
  }
  .scene-product{
    left:50%!important;
    right:auto!important;
    bottom:42px!important;
    width:44vw!important;
    max-width:210px!important;
    height:auto!important;
    translate:-50% 8px!important;
    scale:1!important;
    transition:opacity .16s ease,translate .2s ease!important;
  }
  .scene-product.active{
    opacity:1!important;
    translate:-50% 0!important;
    visibility:visible!important;
    z-index:3!important;
  }
  .scene-product.exit{
    translate:-50% 0!important;
    transition-duration:.08s!important;
  }
  .scene-product img{
    width:100%!important;
    height:auto!important;
    margin-inline:auto!important;
  }
  .scene-product[data-product-image="0"]{width:42.5vw!important;max-width:202px!important}
  .scene-product[data-product-image="1"]{width:45vw!important;max-width:214px!important}
  .scene-product[data-product-image="2"]{width:43vw!important;max-width:206px!important}
  .scene-badge{
    right:16px!important;
    bottom:84px!important;
    transform:scale(.79)!important;
    transform-origin:right bottom!important;
  }
  .scene-gel-a{left:8%!important;top:18%!important}
  .scene-gel-b{right:5%!important;bottom:24%!important}
  .scene-gel-c{right:5%!important;top:24%!important}

  /* 3) Kit section mirrors the corrected trio spacing */
  .kit-stage{height:440px!important}
  .kit-neuro{width:29%!important;left:4%!important;bottom:6%!important}
  .kit-sleep{width:40%!important;left:30%!important;bottom:2.2%!important}
  .kit-energy{width:29%!important;right:4%!important;bottom:6%!important}
}