/* =========================================================
   GOMMA WELL V11 — balanced product composition
   Reference: centered hero trio + centered single-product scene
   ========================================================= */

/* Three-bottle compositions: one centered, one on each side */
.hero-stage,
.kit-stage{overflow:visible!important}

.hero-neuro,
.hero-energy,
.hero-sleep,
.kit-neuro,
.kit-energy,
.kit-sleep{
  rotate:0deg!important;
}

.hero-neuro{
  width:30%!important;
  left:2%!important;
  bottom:5%!important;
  z-index:2!important;
  --rot:-1deg;
}
.hero-sleep{
  width:42%!important;
  left:29%!important;
  bottom:2.5%!important;
  z-index:5!important;
  --rot:0deg;
}
.hero-energy{
  width:30%!important;
  right:2%!important;
  bottom:5%!important;
  z-index:2!important;
  --rot:1deg;
}

/* Keep side products readable and avoid excessive overlap */
.hero-neuro img,.hero-energy img{opacity:.98}
.hero-sleep img{opacity:1}

/* Kit follows the same balanced family layout */
.kit-neuro{width:29%!important;left:3%!important;bottom:4%!important;--kitrot:-1deg}
.kit-sleep{width:41%!important;left:29.5%!important;bottom:2%!important;z-index:5!important;--kitrot:0deg}
.kit-energy{width:29%!important;right:3%!important;bottom:4%!important;--kitrot:1deg}

/* Single product scenes: genuinely centered and fully visible */
.scene-stage{
  display:grid!important;
  place-items:end center!important;
  overflow:visible!important;
}
.scene-product{
  left:50%!important;
  right:auto!important;
  width:min(31vw,420px)!important;
  height:auto!important;
  max-height:none!important;
  bottom:2%!important;
  translate:-50% 24px!important;
  scale:.96!important;
}
.scene-product.active{
  translate:-50% 0!important;
  scale:1!important;
}
.scene-product.exit{
  translate:-50% -14px!important;
  scale:.98!important;
}
.scene-product img{
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  margin:0 auto!important;
}
.scene-stage::before{
  left:24%!important;
  right:24%!important;
  bottom:0!important;
}

/* Dedicated pages: preserve perfect visual centering */
.product-stage{
  justify-items:center!important;
  align-items:center!important;
}
.product-pack{
  margin-inline:auto!important;
  transform:none!important;
}

@media(max-width:1100px){
  .hero-neuro{width:27%!important;left:7%!important}
  .hero-sleep{width:38%!important;left:31%!important}
  .hero-energy{width:27%!important;right:7%!important}
  .scene-product{width:min(38vw,390px)!important}
}

@media(max-width:720px){
  /* Hero matching the approved V11 visual reference */
  .hero-stage{
    height:500px!important;
    margin-top:8px!important;
  }
  .hero-stage::before{
    left:5%!important;
    right:5%!important;
    bottom:1%!important;
    height:9%!important;
  }
  .hero-stage::after{
    inset:6% -2% 1%!important;
  }
  .hero-neuro{
    width:31%!important;
    left:1.5%!important;
    bottom:5%!important;
    z-index:2!important;
    --rot:0deg;
  }
  .hero-sleep{
    width:43%!important;
    left:28.5%!important;
    bottom:2.5%!important;
    z-index:5!important;
    --rot:0deg;
  }
  .hero-energy{
    width:31%!important;
    right:1.5%!important;
    bottom:5%!important;
    z-index:2!important;
    --rot:0deg;
  }
  .hero-product::after{
    left:18%!important;
    right:18%!important;
    height:5%!important;
  }
  .gel-hero-a{left:5%!important;top:16%!important}
  .gel-hero-b{right:3%!important;top:24%!important}
  .gel-hero-c{right:4%!important;bottom:9%!important}
  .twinkle-a{right:8%!important;top:13%!important}
  .twinkle-b{left:3%!important;bottom:18%!important}

  /* Product category screen matching the centered Creatina reference */
  .product-sticky{
    min-height:720px!important;
  }
  .scene-copy-wrap{
    height:auto!important;
    top:104px!important;
  }
  .scene-stage{
    left:0!important;
    right:0!important;
    width:100%!important;
    height:43%!important;
    bottom:4%!important;
    place-items:end center!important;
  }
  .scene-product{
    width:52vw!important;
    max-width:235px!important;
    height:auto!important;
    max-height:none!important;
    left:50%!important;
    right:auto!important;
    bottom:68px!important;
    translate:-50% 20px!important;
  }
  .scene-product.active{
    translate:-50% 0!important;
  }
  .scene-product.exit{
    translate:-50% -12px!important;
  }
  .scene-product img{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
  }
  .scene-stage::before{
    left:28%!important;
    right:28%!important;
    bottom:64px!important;
    height:7%!important;
  }
  .scene-badge{
    right:18px!important;
    bottom:72px!important;
    transform:scale(.82)!important;
    transform-origin:right bottom!important;
  }
  .scene-gel-a{left:7%!important;top:14%!important}
  .scene-gel-b{right:6%!important;bottom:27%!important}
  .scene-gel-c{right:6%!important;top:20%!important}

  /* Keep the bottom CTA clear of the product */
  .mobile-buy{
    min-height:64px!important;
    bottom:10px!important;
  }

  /* Kit mirrors the approved hero arrangement */
  .kit-stage{height:410px!important}
  .kit-neuro{width:31%!important;left:2%!important;bottom:4%!important}
  .kit-sleep{width:43%!important;left:28.5%!important;bottom:2%!important}
  .kit-energy{width:31%!important;right:2%!important;bottom:4%!important}

  /* Dedicated product page bottle remains centered */
  .product-stage{
    width:100%!important;
    min-height:430px!important;
  }
  .product-pack{
    height:390px!important;
    max-width:74vw!important;
    margin:0 auto!important;
  }
}