/* MGPLITKA Solution Marker Behavior 2.3.7 CANONICAL
 * Contract:
 *  - Homepage: numbered markers stay on image; the existing product card opens beside the marker.
 *    The matching product row in the existing right column remains selected as well.
 *  - Detail page: numbered markers stay on image; the original product popover stays beside the point.
 *  - Coordinates, calculator, cart and product bindings remain owned by existing MGPLITKA code.
 */

/* ---------- Homepage Smart Studio ---------- */
/* Re-enable the existing homepage card. The native homepage script already opens it
   beside the point with .is-open; only the closed state should be visually hidden. */
#solutions [data-smart-solution] .mg-hotspot-card{
  display:grid!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#solutions [data-smart-solution] .mg-hotspot-wrap.is-open > .mg-hotspot-card,
#solutions [data-smart-solution] .mg-hotspot-wrap.is-active > .mg-hotspot-card,
#solutions [data-smart-solution] .mg-hotspot-wrap:hover > .mg-hotspot-card,
#solutions [data-smart-solution] .mg-hotspot-wrap:focus-within > .mg-hotspot-card{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(-50%) translateX(0)!important;
  z-index:12!important;
}
/* Remove any experimental panel left in DOM by 2.3.3-2.3.5 until reload completes. */
#solutions .mg-home-marker-panel,
#solutions .mg-home-marker-panel-235,
#solutions [data-mg-home-marker-panel],
#solutions [data-mg-home-marker-panel-235]{display:none!important;}

/* Keep the selected marker and its matching product row in sync. */
#solutions .mg-hotspot-wrap.is-open > .mg-hotspot,
#solutions .mg-hotspot-wrap.is-active > .mg-hotspot{
  background:#d71920!important;
  border-color:#d71920!important;
  color:#fff!important;
}
#solutions .mg-smart-studio__products .mg-smart-item.mg-marker-selected{
  position:relative!important;
  background:#faf7f4!important;
}
#solutions .mg-smart-studio__products .mg-smart-item.mg-marker-selected::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:#d71920;
  pointer-events:none;
}
#solutions .mg-smart-studio__products .mg-smart-item.mg-marker-selected .mg-smart-item__focus{
  background:#d71920!important;
  border-color:#d71920!important;
  color:#fff!important;
}
#solutions .mg-smart-studio__products .mg-smart-item.mg-marker-selected .mg-smart-item__focus span{
  color:#fff!important;
}

/* ---------- Solution detail (.mgsp-*) ---------- */
/* New clean renders contain no baked circles. Existing dynamic hit areas get visible numbers. */
.mgsp-hotspot[data-point-number]{
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  display:block!important;
}
.mgsp-hotspot[data-point-number]::after{
  content:attr(data-point-number);
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid rgba(55,55,55,.28);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  color:#5a5a5a;
  font:600 14px/1 Arial,sans-serif;
  text-align:center;
  pointer-events:none;
}
.mgsp-hotspot[data-point-number]:hover::after,
.mgsp-hotspot[data-point-number]:focus::after,
.mgsp-hotspot[data-point-number].mg-point-selected::after{
  background:#d71920;
  border-color:#d71920;
  color:#fff;
  box-shadow:0 0 0 2px rgba(215,25,32,.12),0 3px 10px rgba(0,0,0,.18);
}

/* Keep the positioned card beside its point and constrain its children.
   The main-image frame has a broad image rule; without these bounds the product
   photo expands to the frame width and pushes the popup far below its marker. */
.mgsp-main-image > .mgsp-product-popover[data-mgsp-popover]{
  position:absolute!important;
  z-index:12!important;
  width:270px!important;
  max-width:calc(100% - 16px)!important;
  min-height:92px!important;
  max-height:180px!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px!important;
  background:#fff!important;
  border:1px solid #e4ded8!important;
  border-radius:9px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.18)!important;
}
.mgsp-main-image > .mgsp-product-popover[data-mgsp-popover] img{
  width:66px!important;
  height:66px!important;
  flex:0 0 66px!important;
  object-fit:contain!important;
  background:#f5f3f0!important;
  border-radius:5px!important;
}
.mgsp-main-image > .mgsp-product-popover[data-mgsp-popover] > div{
  min-width:0!important;
  flex:1 1 auto!important;
}

@media(max-width:760px){
  .mgsp-hotspot[data-point-number]::after{width:32px;height:32px;font-size:13px;}
  .mgsp-main-image > .mgsp-product-popover[data-mgsp-popover]{width:min(250px,calc(100% - 16px))!important;max-height:160px!important;}
}

/* On the homepage, keep the existing marker card anchored to its dot on phones too.
   The old mobile stylesheet pinned these cards to the bottom of the screen. */
@media(max-width:767px){
  #solutions [data-smart-solution] .mg-hotspot-card{
    position:absolute!important;
    inset:auto!important;
    top:50%!important;
    width:min(250px,calc(100vw - 24px))!important;
    max-width:calc(100vw - 24px)!important;
    max-height:180px!important;
    overflow:auto!important;
    transform:translateY(-50%) translateX(8px)!important;
  }
  #solutions [data-smart-solution] .mg-hotspot-wrap:not(.mg-hotspot-wrap--left) > .mg-hotspot-card{
    left:50px!important;
    right:auto!important;
  }
  #solutions [data-smart-solution] .mg-hotspot-wrap--left > .mg-hotspot-card{
    left:auto!important;
    right:50px!important;
    transform:translateY(-50%) translateX(-8px)!important;
  }
  #solutions [data-smart-solution] .mg-hotspot-wrap.is-open > .mg-hotspot-card,
  #solutions [data-smart-solution] .mg-hotspot-wrap.is-active > .mg-hotspot-card,
  #solutions [data-smart-solution] .mg-hotspot-wrap:hover > .mg-hotspot-card,
  #solutions [data-smart-solution] .mg-hotspot-wrap:focus-within > .mg-hotspot-card{
    transform:translateY(-50%) translateX(0)!important;
  }
  #solutions [data-smart-solution] .mg-hotspot-card > img{
    width:68px!important;
    height:82px!important;
  }
  #solutions [data-smart-solution] .mg-hotspot-card__close{display:block!important;}
}