diff --git a/e2e/tests/bedside-smoke.spec.js b/e2e/tests/bedside-smoke.spec.js
index 3d20e3a..67604a4 100644
--- a/e2e/tests/bedside-smoke.spec.js
+++ b/e2e/tests/bedside-smoke.spec.js
@@ -129,10 +129,23 @@ test.describe('Bedside — dose calculators fire', () => {
 });
 
 test.describe('Bedside — interactive widgets', () => {
-  test('Lightbox: View pathway image button opens modal', async ({ page }) => {
+  test('Lightbox: seizure pathway image opens and closes', async ({ page }) => {
     await openBedside(page, 'seizure');
     await page.click('button[data-img-src="/img/epilepsy_eiic_pathway.png"]');
     await expect(page.locator('#img-lightbox')).toBeVisible();
+    await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /epilepsy_eiic_pathway/);
+    await page.click('#img-lightbox-close');
+    await expect(page.locator('#img-lightbox')).toBeHidden();
+  });
+
+  test('Lightbox: NRP pathway image opens on neonatal sub-pill', async ({ page }) => {
+    await openBedside(page, 'neonatal');
+    // The "View pathway image" button sits inside a collapsed <details>
+    // titled "NRP Resuscitation Pathway" — expand it first.
+    await page.getByText('NRP Resuscitation Pathway').click();
+    await page.click('button[data-img-src="/img/nrp_pathway.png"]');
+    await expect(page.locator('#img-lightbox')).toBeVisible();
+    await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /nrp_pathway/);
     await page.click('#img-lightbox-close');
     await expect(page.locator('#img-lightbox')).toBeHidden();
   });
diff --git a/public/components/calculators.html b/public/components/calculators.html
index 41f5f15..13b91b9 100644
--- a/public/components/calculators.html
+++ b/public/components/calculators.html
@@ -652,12 +652,7 @@
         </div>
 
 
-        <!-- ═══════════ IMAGE LIGHTBOX (reusable, any section can trigger via [data-img-src]) ═══════════ -->
-        <div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
-          <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
-            <div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
-            <a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;text-decoration:none;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
-            <button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;"><i class="fas fa-xmark"></i> Close</button>
-          </div>
-          <img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;box-shadow:0 4px 30px rgba(0,0,0,0.5);background:white;">
-        </div>
+        <!-- Image lightbox moved to index.html so it exists in the DOM
+             regardless of which tab is loaded (NRP + seizure pathway images
+             on the Bedside tab broke when this markup stayed here). -->
+
diff --git a/public/e2e-harness.html b/public/e2e-harness.html
index fdd695b..6fc88b4 100644
--- a/public/e2e-harness.html
+++ b/public/e2e-harness.html
@@ -25,5 +25,16 @@
   <script defer src="/js/calculators.js"></script>
   <script type="module" src="/js/bedside/index.js"></script>
   <script defer src="/js/e2e-bootstrap.js"></script>
+
+  <!-- Lightbox overlay — global in the real app, mirrored here so the
+       bedside lightbox smoke test can open/close it. -->
+  <div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
+      <div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
+      <a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
+      <button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;">Close</button>
+    </div>
+    <img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;background:white;">
+  </div>
 </body>
 </html>
diff --git a/public/index.html b/public/index.html
index 271e216..9be9c25 100644
--- a/public/index.html
+++ b/public/index.html
@@ -470,5 +470,18 @@
   <script defer src="/js/admin.js"></script>
   <script defer src="/js/adminMilestones.js"></script>
 
+  <!-- ═══════════ IMAGE LIGHTBOX (global overlay — triggered by any
+       [data-img-src] button in any tab; lives here so it exists in the
+       DOM from page load, independent of which tab has been lazy-loaded
+       yet). Styled inline to keep the CSP-compliant "no inline scripts"
+       rule (inline styles are allowed). ═══════════ -->
+  <div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
+      <div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
+      <a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;text-decoration:none;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
+      <button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;"><i class="fas fa-xmark"></i> Close</button>
+    </div>
+    <img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;box-shadow:0 4px 30px rgba(0,0,0,0.5);background:white;">
+  </div>
 </body>
 </html>