/* MJ Packaging V112 — final product image, recent-view and maintenance refinements */

/* ---------- HARD NO-WHITE-FLASH PRODUCT HOVER ---------- */
.mj-card-media,
.mj-global-hover-media,
.product-media,
.media,
.pic,
.pp-img,
.pp-card-img,
.product-image,
.image-wrap,
figure{position:relative;overflow:hidden}

.mj-card-media > img,
.mj-global-hover-media > img,
.product-media > img,
.media > img,
.pic > img,
.pp-img > img,
.pp-card-img > img,
.product-image > img,
.image-wrap > img,
figure > img{background:transparent!important}

/* Alternate images are NEVER allowed to replace the primary image before a real load. */
.mj-card-media img.mj-alt,
.mj-card-media img.mj-global-hover-img,
.mj-global-hover-media img.mj-alt,
.mj-global-hover-media img.mj-global-hover-img{
  opacity:0!important;
  visibility:hidden!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  z-index:2!important;
  pointer-events:none!important;
  transition:opacity .22s ease,transform .32s ease!important;
}

.mj-card-media img.mj-global-main-img,
.mj-global-hover-media img.mj-global-main-img,
.mj-card-media > img:first-child:not(.mj-alt):not(.mj-global-hover-img),
.mj-global-hover-media > img:first-child:not(.mj-alt):not(.mj-global-hover-img){
  opacity:1!important;
  visibility:visible!important;
  position:relative;
  z-index:1!important;
}

/* Only a successfully loaded alternate can become visible. */
@media (hover:hover) and (pointer:fine){
  .mj-card-media.mj-alt-ready:hover img.mj-alt,
  .mj-card-media.mj-alt-ready:hover img.mj-global-hover-img,
  .mj-global-hover-media.mj-alt-ready:hover img.mj-alt,
  .mj-global-hover-media.mj-alt-ready:hover img.mj-global-hover-img{
    opacity:1!important;
    visibility:visible!important;
    transform:scale(1.018)!important;
  }
  .mj-card-media.mj-alt-ready:hover > img.mj-global-main-img,
  .mj-card-media.mj-alt-ready:hover > img:first-child:not(.mj-alt):not(.mj-global-hover-img),
  .mj-global-hover-media.mj-alt-ready:hover > img.mj-global-main-img,
  .mj-global-hover-media.mj-alt-ready:hover > img:first-child:not(.mj-alt):not(.mj-global-hover-img){
    opacity:0!important;
  }
}

/* Kill older rules that could reveal an unloaded alternate on any card class. */
.mj-product-card:hover .mj-card-media img.mj-alt,
.mj104-card:hover .mj-card-media img.mj-alt,
.mj100-card:hover .mj-card-media img.mj-alt{opacity:0!important;visibility:hidden!important}
.mj-product-card:hover .mj-card-media.mj-alt-ready img.mj-alt,
.mj104-card:hover .mj-card-media.mj-alt-ready img.mj-alt,
.mj100-card:hover .mj-card-media.mj-alt-ready img.mj-alt{opacity:1!important;visibility:visible!important}
.mj-product-card:hover .mj-card-media:not(.mj-alt-ready) > img:first-child:not(.mj-alt):not(.mj-global-hover-img),
.mj104-card:hover .mj-card-media:not(.mj-alt-ready) > img:first-child:not(.mj-alt):not(.mj-global-hover-img),
.mj100-card:hover .mj-card-media:not(.mj-alt-ready) > img:first-child:not(.mj-alt):not(.mj-global-hover-img){opacity:1!important;visibility:visible!important}

/* ---------- RECENTLY VIEWED: COMPACT, NOT GIANT CARDS ---------- */
.mj98-recent{
  width:min(1296px,calc(100% - 40px))!important;
  margin:34px auto 56px!important;
  padding:0!important;
}
.mj98-recent .mj98-eyebrow{
  margin:0 0 5px!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.mj98-recent h2{
  margin:0 0 16px!important;
  font-size:24px!important;
  line-height:1.1!important;
  letter-spacing:-.025em!important;
}
.mj98-mini-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
}
.mj98-mini{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  align-items:center!important;
  gap:11px!important;
  min-height:92px!important;
  padding:9px!important;
  border:1px solid #e3ddd3!important;
  border-radius:12px!important;
  background:#fff!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.mj98-mini:hover{
  transform:translateY(-2px)!important;
  border-color:#c9c0b3!important;
  box-shadow:0 8px 22px rgba(40,32,23,.07)!important;
}
.mj98-mini img{
  width:72px!important;
  height:72px!important;
  padding:4px!important;
  object-fit:contain!important;
  border-radius:8px!important;
  background:#f7f5f0!important;
}
.mj98-mini span{min-width:0!important}
.mj98-mini b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  font-size:13px!important;
  line-height:1.25!important;
  color:#171714!important;
}
.mj98-mini small{
  display:block!important;
  margin-top:5px!important;
  color:#777166!important;
  font-size:10px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* ---------- BUY-NOW MAINTENANCE: PRODUCT-INQUIRY FEEL ---------- */
.page-buy-maintenance .bm-main{
  min-height:0!important;
  padding:46px 20px 64px!important;
  background:#f5f2eb!important;
}
.page-buy-maintenance .bm-card{
  width:min(1000px,100%)!important;
  padding:38px!important;
  border-radius:22px!important;
}
.page-buy-maintenance .bm-kicker{font-size:10px!important}
.page-buy-maintenance .bm-icon{width:42px!important;height:42px!important;border-radius:12px!important;margin:14px 0!important;font-size:19px!important}
.page-buy-maintenance .bm-card h1{font-size:clamp(31px,3.8vw,46px)!important;max-width:800px!important}
.page-buy-maintenance .bm-lead{max-width:790px!important;font-size:16px!important}
.page-buy-maintenance .bm-product{
  margin:24px 0 18px!important;
  padding:12px!important;
  gap:15px!important;
  border-radius:15px!important;
}
.page-buy-maintenance .bm-product img{
  width:112px!important;height:94px!important;
  border-radius:10px!important;
}
.page-buy-maintenance .bm-product strong{font-size:18px!important}
.page-buy-maintenance .bm-actions{margin-top:8px!important;grid-template-columns:minmax(0,2fr) minmax(160px,1fr) minmax(160px,1fr)!important}
.page-buy-maintenance .bm-btn{min-height:62px!important;border-radius:12px!important}
.page-buy-maintenance .bm-btn-web{box-shadow:0 7px 18px rgba(24,60,43,.13)!important}
.page-buy-maintenance .bm-note{font-size:11px!important}

@media(max-width:900px){
 .mj98-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
 .mj98-recent{width:calc(100% - 24px)!important;margin:28px auto 44px!important}
 .mj98-recent h2{font-size:21px!important}
 .mj98-mini-grid{display:flex!important;overflow-x:auto!important;gap:9px!important;padding-bottom:3px!important;scroll-snap-type:x proximity!important}
 .mj98-mini{flex:0 0 min(245px,78vw)!important;scroll-snap-align:start!important}
 .page-buy-maintenance .bm-main{padding:26px 12px 48px!important}
 .page-buy-maintenance .bm-card{padding:25px 17px!important;border-radius:18px!important}
 .page-buy-maintenance .bm-product img{width:88px!important;height:78px!important}
 .page-buy-maintenance .bm-actions{grid-template-columns:1fr!important}
 .page-buy-maintenance .bm-btn{min-height:58px!important}
}