/* Final mobile + product-detail QA overrides */

/* Product detail: the thumbnail rail must not be clipped by the old detailImage overflow rule. */
.detailImage:has(.productGallery){
  overflow:visible!important;
}
.productGallery{
  overflow:visible!important;
}
.galleryThumbs{
  padding:16px 5px 5px!important; /* intentionally lowers the left thumbnail rail */
  margin-left:2px!important;
  overflow:visible!important;
}
.galleryThumb{
  border-radius:14px!important;
  overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(7,63,37,.04)!important;
}
.galleryThumb.active{
  border-color:#078f36!important;
  outline:1px solid rgba(7,143,54,.16)!important;
  outline-offset:1px!important;
}
.galleryMain{
  overflow:hidden!important;
}

/* Mobile: main image first, thumbnails below, with safe horizontal scrolling. */
@media(max-width:700px){
  .detailImage:has(.productGallery){overflow:visible!important}
  .productGallery{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  .galleryThumbs{
    order:2!important;
    flex-direction:row!important;
    padding:4px 4px 8px!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    max-width:100%!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .galleryThumb{
    flex:0 0 68px!important;
    width:68px!important;
    height:68px!important;
    scroll-snap-align:start;
  }
  .galleryMain{min-width:0!important;width:100%!important}
  .galleryMain img{max-width:100%!important;height:auto!important}
}

/* Admin mobile: dialogs should always fit the phone viewport and remain scrollable. */
@media(max-width:700px){
  .modalBack,.modalOverlay,[class*="ModalBack"]{
    padding:8px!important;
    align-items:flex-start!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .modal,.modalCard,.modalPanel,[class*="ModalCard"]{
    max-width:100%!important;
    width:100%!important;
    max-height:calc(100dvh - 16px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  input,select,textarea,button{max-width:100%}
  .compactGrid,.formGrid{min-width:0!important}
}