/* v12.10.314 - final public mobile controls and non-overlapping viewport. */

/* The pager owns a dedicated viewport strip. The catalogue scrolls only in the
   remaining area, so offer actions, merchant logos and favorite controls can
   never pass underneath the fixed navigation. */
html.m2-pager-portaled,
html.m2-pager-portaled body:not(.m2-editor){
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden!important;
}
html.m2-pager-portaled body:not(.m2-editor){
  --m2-pager-clearance:calc(86px + env(safe-area-inset-bottom));
  height:100dvh!important;
  min-height:100svh!important;
  overscroll-behavior:none;
}
html.m2-pager-portaled body:not(.m2-editor) .m2-main{
  box-sizing:border-box!important;
  width:100%!important;
  height:calc(100dvh - var(--m2-pager-clearance))!important;
  min-height:0!important;
  max-height:calc(100dvh - var(--m2-pager-clearance))!important;
  padding-bottom:18px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scroll-padding-bottom:18px;
}

/* Gallery controls stay fully inside the media frame. An older negative inset
   combined with overflow:hidden was the reason only half of each circle was
   visible on iPhone. */
html body:not(.m2-editor) .m2-role-image.has-m2-gallery>.m2-gallery-btn{
  top:50%!important;
  bottom:auto!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  transform:translateY(-50%)!important;
  overflow:hidden!important;
  line-height:1!important;
  font-size:24px!important;
  box-shadow:0 5px 14px rgba(0,0,0,.24)!important;
}
html body:not(.m2-editor) .m2-role-image.has-m2-gallery>.m2-gallery-prev{
  left:8px!important;
  right:auto!important;
}
html body:not(.m2-editor) .m2-role-image.has-m2-gallery>.m2-gallery-next{
  left:auto!important;
  right:8px!important;
}
html body:not(.m2-editor) .m2-role-image.has-m2-gallery>.m2-gallery-count{
  left:auto!important;
  right:8px!important;
  top:auto!important;
  bottom:8px!important;
  transform:none!important;
  margin:0!important;
}
html body:not(.m2-editor) .m2-role-image.has-m2-gallery>.m2-gallery-btn:focus-visible{
  outline:3px solid #1687ff!important;
  outline-offset:-2px!important;
}

/* Both side actions fill their grid tracks. Cover styling previously left the
   next action at intrinsic width, making the two sides visibly asymmetric. */
html body:not(.m2-editor) .m2-float-pager>a{
  width:100%!important;
  justify-self:stretch!important;
}

/* At this breakpoint the legacy rules switched to left/right anchoring but
   forgot to remove translateX(-50%), pushing the whole pager off-canvas. */
@media(max-width:390px){
  html body:not(.m2-editor)> .m2-float-pager,
  html body:not(.m2-editor) .m2-float-pager{
    left:8px!important;
    right:8px!important;
    width:auto!important;
    max-width:none!important;
    transform:none!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html.m2-pager-portaled body:not(.m2-editor) .m2-main{scroll-behavior:auto!important}
}