/* =========================================================
   MJ PACKAGING — HERO CONTROLS V114
   Refined editorial navigation — no floating circular buttons.
   ========================================================= */
.mj-hero .hero-arrow{
  position:absolute!important;
  top:auto!important;
  bottom:24px!important;
  z-index:40!important;
  width:52px!important;
  height:44px!important;
  min-width:52px!important;
  min-height:44px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.34)!important;
  border-radius:8px!important;
  background:rgba(12,16,14,.58)!important;
  color:#fff!important;
  box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  font-size:0!important;
  line-height:1!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease!important;
}
.mj-hero .hero-prev{left:auto!important;right:82px!important}
.mj-hero .hero-next{left:auto!important;right:24px!important}
.mj-hero .hero-prev::before,
.mj-hero .hero-next::before{
  display:block;
  font-family:Arial,Helvetica,sans-serif;
  font-size:22px;
  font-weight:300;
  line-height:1;
}
.mj-hero .hero-prev::before{content:'←'}
.mj-hero .hero-next::before{content:'→'}
.mj-hero .hero-arrow:hover{
  background:#fff!important;
  border-color:#fff!important;
  color:#103d30!important;
  transform:translateY(-1px)!important;
}
.mj-hero .hero-arrow:active{transform:translateY(0)!important}
.mj-hero .hero-arrow:focus-visible{
  outline:2px solid rgba(255,255,255,.95)!important;
  outline-offset:3px!important;
}

/* Keep indicators independent from the copy and navigation controls. */
.mj-hero .hero-dots{
  left:50%!important;
  bottom:40px!important;
  transform:translateX(-50%)!important;
  z-index:40!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  height:10px!important;
}
.mj-hero .hero-dot{
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:transparent!important;
  border-radius:50%!important;
  transition:width .22s ease,background .22s ease!important;
}
.mj-hero .hero-dot.active{
  width:22px!important;
  border-radius:99px!important;
  background:#fff!important;
}

@media(max-width:760px){
  .mj-hero .hero-arrow{
    bottom:16px!important;
    width:46px!important;
    height:40px!important;
    min-width:46px!important;
    min-height:40px!important;
    border-radius:7px!important;
  }
  .mj-hero .hero-prev{right:68px!important;left:auto!important}
  .mj-hero .hero-next{right:16px!important;left:auto!important}
  .mj-hero .hero-prev::before,
  .mj-hero .hero-next::before{font-size:20px}
  .mj-hero .hero-dots{bottom:31px!important}
}