Shadow DOM | airship-html-prompt-shadow | I'm not able to get in shadow DOM elements to click on buttons

Question

I'm having trouble finding the correct XPaths to click the "No, Thanks" and "Yes, Subscribe me!" buttons in the provided Airship HTML prompt. I've reviewed the documentation https://docs.airship.com/platform/web/plugins/html-prompt/ and tried using the following code:

<div class="airship-html-prompt-shadow">
#shadow-root (open)
<div class="airship-prompt-container" style="display: block;"><div class="airship-alert airship-position-top" data-airship-prompt="">
    <div class="airship-alert-powered airship-hidden"><a data-airship-trigger-goto-airship="">Airship</a></div>
    <div class="airship-alert-body">
      <div class="airship-alert-logo"><img src="/assets/Web/images/logo-top.svg"></div>
      <div>
        <div class="airship-alert-title">Subscribe to our notifications</div>
        <div class="airship-alert-message">Stay tunned to get our best offers by subscribing to our push notifications</div>
      </div>
    </div>
    <div class="airship-alert-buttons">
      <button class="airship-btn airship-btn-deny" data-airship-trigger-deny="">No thanks</button>
      <button class="airship-btn airship-btn-accept" data-airship-trigger-accept="">Yes, Subscribe me!</button>
    </div>
  </div></div>

</div>

HTML

Code that I'm executing

await landingpage.gotolandingscreen()
await page.waitForLoadState('domcontentloaded');

await page.waitForSelector('div.airship-html-prompt-shadow');
// Get the element containing the shadow DOM
const element = await page.locator('div.airship-html-prompt-shadow');
  
// Use the >> operator to access elements within the shadow DOM
const button = await element >> locator('button.airship-btn.airship-btn-deny');
  
// Click the button
await button.click();