/* v53: compact, integrated product HERO shared by the three pillars + Ele-Mic. */
body.productPage .hero{padding:12px 0 24px;}
body.productPage .heroGrid.heroGridWithPhoto{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr)!important;
  gap:0!important;
  align-items:stretch!important;
  min-height:0!important;
  overflow:hidden;
  border:1px solid rgba(15,39,66,.12);
  border-left:4px solid var(--accent);
  border-radius:16px;
  background:linear-gradient(112deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.96) 56%,rgba(238,246,253,.82) 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.055);
}
body.productPage .heroGrid.heroGridWithPhoto .heroText{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:0!important;
  min-height:0!important;
  padding:20px 24px 18px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.productPage .heroGrid.heroGridWithPhoto .heroText h1{
  font-size:30px;
  line-height:1.24;
  margin:8px 0 8px;
  max-width:760px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroText .lead{
  font-size:13.5px;
  line-height:1.72;
  margin:0;
  max-width:760px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroText .badge,
body.productPage .heroGrid.heroGridWithPhoto .heroText h1,
body.productPage .heroGrid.heroGridWithPhoto .heroText .lead,
body.productPage .heroGrid.heroGridWithPhoto .heroText .heroActions{align-self:flex-start!important;}
body.productPage .heroGrid.heroGridWithPhoto .heroText .heroActions{
  display:flex!important;
  gap:9px;
  flex-wrap:wrap;
  margin-top:13px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroText .heroActions .btn{
  width:auto!important;
  padding:9px 14px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroKeywords{
  align-self:stretch!important;
  margin-top:11px!important;
  padding-top:10px!important;
  gap:6px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroKeywords .tag{
  padding:5px 9px;
  font-size:11px;
}
body.productPage .heroGrid.heroGridWithPhoto .heroVisual{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:286px!important;
  height:auto!important;
  padding:16px 18px!important;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 53% 48%,rgba(255,255,255,.96) 0 34%,rgba(245,250,255,.72) 63%,rgba(232,242,251,.38) 100%)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.productPage .heroGrid.heroGridWithPhoto .heroVisual::before{
  content:"";
  position:absolute;
  inset:13% 10%;
  border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(190,215,239,.20),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
body.productPage .heroGrid.heroGridWithPhoto .heroPagePhoto{
  position:relative;
  z-index:1;
  width:auto!important;
  height:auto!important;
  max-width:92%!important;
  max-height:218px!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  box-sizing:border-box;
}
body.productPage .manualHeroVisual .heroPagePhoto,
body.productPage .elemicHeroVisual .heroPagePhoto,
body.productPage .superHeroVisual .heroPagePhoto{
  filter:drop-shadow(0 9px 13px rgba(15,23,42,.12));
}
body.productPage .autoHeroVisual .heroPagePhoto{max-width:94%!important;max-height:210px!important;filter:none;}
body.productPage .superHeroVisual .heroPagePhoto{max-height:218px!important;}
@media(max-width:920px){
  body.productPage .heroGrid.heroGridWithPhoto{grid-template-columns:1fr!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroText{padding:19px 22px 16px!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroVisual{min-height:214px!important;height:214px!important;padding:10px 16px!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroPagePhoto{max-height:178px!important;max-width:90%!important;}
  body.productPage .autoHeroVisual .heroPagePhoto{max-height:172px!important;}
}
@media(max-width:640px){
  body.productPage .hero{padding:8px 0 18px;}
  body.productPage .heroGrid.heroGridWithPhoto .heroText{padding:17px 17px 14px!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroText h1{font-size:25px;line-height:1.25;margin:7px 0;}
  body.productPage .heroGrid.heroGridWithPhoto .heroText .lead{font-size:13px;line-height:1.68;}
  body.productPage .heroGrid.heroGridWithPhoto .heroText .heroActions{margin-top:11px;}
  body.productPage .heroGrid.heroGridWithPhoto .heroKeywords{display:none!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroVisual{min-height:166px!important;height:166px!important;padding:8px 12px!important;}
  body.productPage .heroGrid.heroGridWithPhoto .heroPagePhoto{max-height:140px!important;max-width:91%!important;}
  body.productPage .autoHeroVisual .heroPagePhoto{max-height:136px!important;}
}