{{-- resources/views/zapatera/admin/products/partials/lightbox.blade.php --}}
{{-- Lightbox + estilos (reutilizable) --}}
<div id="nlx-lightbox" class="nlx-lightbox hidden">
    <div class="nlx-lightbox-backdrop"></div>
    <div class="nlx-lightbox-body">
      <button type="button" class="nlx-lightbox-close" aria-label="Cerrar">×</button>
      <img id="nlx-lightbox-img" alt="vista ampliada" />
    </div>
  </div>

  @push('styles')
  <style>
    .nlx-lightbox { position: fixed; inset: 0; z-index: 50; }
    .nlx-lightbox.hidden { display: none; }
    .nlx-lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(1px); }
    .nlx-lightbox-body { position: absolute; inset: 0; display:flex; align-items:center; justify-content:center; padding: 16px; }
    .nlx-lightbox-body img { max-width: min(96vw, 1100px); max-height: 90vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; }
    .nlx-lightbox-close { position: absolute; top: 12px; right: 16px; border: 0; background: #fff; color:#000; font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.3); }
  </style>
  @endpush