
/* Mojolnir V27: fix Explore product-page background scene paths and fine-tune hero treatment */
body.product-page,
body.m30-page,
body.stage-page{
  --hero-scene-overlay: linear-gradient(90deg,rgba(7,8,12,.965) 0%,rgba(7,8,12,.84) 36%,rgba(7,8,12,.52) 70%,rgba(7,8,12,.34) 100%);
}
body.m30-page{ --product-hero-scene:url(../explore-m30-hero-scene.png); }
body.stage-page{ --product-hero-scene:url(../explore-stage-hero-scene.png); }
body.m30-page .hero,
body.stage-page .hero{
  min-height: 780px!important;
  overflow: hidden!important;
  isolation: isolate!important;
}
body.m30-page .hero::before,
body.stage-page .hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-28px!important;
  background-image: var(--product-hero-scene)!important;
  background-size: cover!important;
  background-position: center center!important;
  background-repeat:no-repeat!important;
  filter: blur(16px)!important;
  transform: scale(1.10)!important;
  opacity: .78!important;
  z-index: 0!important;
  pointer-events:none!important;
}
body.m30-page .hero::after,
body.stage-page .hero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 14% 22%,rgba(111,66,245,.20),transparent 34%),
    radial-gradient(circle at 86% 18%,rgba(249,115,22,.13),transparent 32%),
    linear-gradient(180deg,rgba(4,4,7,.16),rgba(4,4,7,.24)),
    var(--hero-scene-overlay)!important;
}
body.m30-page .hero-grid,
body.stage-page .hero-grid{
  position:relative!important;
  z-index:2!important;
  grid-template-columns: .88fr 1.12fr!important;
  gap: 56px!important;
  align-items: center!important;
}
body.m30-page .hero-grid > div:first-child,
body.stage-page .hero-grid > div:first-child{
  max-width: 620px!important;
  width: 100%!important;
}
body.m30-page .hero p,
body.stage-page .hero p{
  max-width: 590px!important;
  color: rgba(255,255,255,.84)!important;
}
body.m30-page .price,
body.stage-page .price{
  margin: 26px 0 12px!important;
}
body.m30-page .color-row,
body.stage-page .color-row{
  margin: 14px 0 20px!important;
}
body.m30-page .actions,
body.stage-page .actions{
  display:flex!important;
  gap: 14px 16px!important;
  flex-wrap: wrap!important;
  align-items:center!important;
  max-width: 660px!important;
  margin-top: 10px!important;
}
body.m30-page .actions .btn,
body.stage-page .actions .btn{
  min-height: 56px!important;
  padding: 15px 28px!important;
}
body.m30-page .actions a[href="/"],
body.stage-page .actions a[href="/"]{
  margin-top: 2px!important;
}
body.m30-page .hero-card,
body.stage-page .hero-card{
  background:#f2f2f2!important;
  border-radius:38px!important;
  padding:20px!important;
}
@media (max-width: 900px){
  body.m30-page .hero,
  body.stage-page .hero{min-height:auto!important;}
  body.m30-page .hero-grid,
  body.stage-page .hero-grid{
    grid-template-columns:1fr!important;
    gap: 26px!important;
  }
  body.m30-page .hero-grid > div:first-child,
  body.stage-page .hero-grid > div:first-child{
    max-width: 100%!important;
  }
  body.m30-page .hero p,
  body.stage-page .hero p{
    max-width: 100%!important;
  }
  body.m30-page .actions,
  body.stage-page .actions{
    gap: 12px!important;
    max-width:100%!important;
  }
}
