/* V1 · visor de detalle para fotos de diseños en celular. */
.mobile-image-zoom-trigger{display:none}

@media(max-width:767px){
  #productModal .dialog-photo{position:relative}
  #productModal .dialog-photo>#modalImage{cursor:zoom-in;touch-action:manipulation}
  #productModal .mobile-image-zoom-trigger{
    display:grid;
    place-items:center;
    position:absolute;
    top:72px;
    right:20px;
    z-index:5;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(255,255,255,.85);
    border-radius:999px;
    background:rgba(255,253,251,.94);
    color:#25171f;
    box-shadow:0 5px 16px rgba(37,37,33,.18);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #productModal .mobile-image-zoom-trigger:focus-visible{
    outline:3px solid #b84760;
    outline-offset:3px;
  }
  #productModal .mobile-image-zoom-trigger svg{width:20px;height:20px}

  .mobile-image-lightbox{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    width:100vw;
    height:100dvh;
    max-width:none;
    max-height:none;
    margin:0;
    padding:0;
    border:0;
    background:rgba(24,16,21,.97);
    color:#fffdfb;
    overflow:hidden;
  }
  .mobile-image-lightbox[open]{display:block}
  .mobile-image-lightbox::backdrop{background:rgba(24,16,21,.97)}
  .mobile-image-zoom-viewport{
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
    overflow:hidden;
    touch-action:none;
    user-select:none;
  }
  .mobile-image-zoom-image{
    display:block;
    max-width:100%;
    max-height:calc(100dvh - 112px);
    object-fit:contain;
    transform:translate3d(0,0,0) scale(1);
    transform-origin:center;
    will-change:transform;
    user-select:none;
    -webkit-user-drag:none;
  }
  .mobile-image-zoom-close{
    position:absolute;
    top:calc(12px + env(safe-area-inset-top));
    right:16px;
    z-index:3;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(255,253,251,.94);
    color:#25171f;
    font:400 30px/1 system-ui,sans-serif;
    cursor:pointer;
  }
  .mobile-image-zoom-close:focus-visible{outline:3px solid #f0a8b8;outline-offset:3px}
  .mobile-image-zoom-hint{
    position:absolute;
    right:20px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    left:20px;
    z-index:2;
    margin:0;
    color:rgba(255,253,251,.8);
    font:500 11px/1.35 'Plus Jakarta Sans',sans-serif;
    text-align:center;
    pointer-events:none;
  }
}