Cloudflare Worker Headers breaking Add to Cart Button

Question

After a few hours of digging, I have narrowed down why the "Add to Cart" button for Woocommerce is no longer working; my cloudflare worker! The complete code is below, however the issue is in regards to the header information responsible by:

const response = await fetch(request)

 return new Response(html, {
        headers: response.headers

I have tried to modify the headers instead, but then the international styling does not work at all. Experimentation is here: https://ellasbubbles.com/product/ella-shower-column-kit-for-walk-in-tub-deck-mount-faucets/. If you are inside of U.S/CA you will not see this issue because of the IF statement.

Is there something wrong with the headers? Should I modify them in a different way? Should I insert my css in a different way?

Cloudflare Worker:

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
    const country = request.cf.country
    if (country != 'US' && country !='CA') {
    const response = await fetch(request)
    var html = await response.text()
    
    // Inject scripts
    const customScripts = '<style type="text/css">custom css here</style></body>'
    html = html.replace( /<\/body>/ , customScripts)

    // return modified response
    return new Response(html, {
        headers: response.headers
    }) 
}
}

I have tried running the code like this, and after clicking "Add to Cart" - the entire page goes blank, because there is nothing inside of the after the "add to cart" button is clicked

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
    const country = request.cf.country
    if (country != 'US' && country !='CA') {
    const response = await fetch(request)
    var html = await response.text()
    
    // return modified response
    return new Response(html, {
        headers: response.headers
    }) 
}
}

UPDATED (Solution):

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const country = request.cf.country
    if (country != 'US' && country !='CA') {
    const response = await fetch(request)
    const type = response.headers.get("Content-Type") || "";
    if (!type.startsWith("text/html")) {
     return response;
   }

    var html = await response.text()
    
    // Inject scripts
    const customScripts = 'Styling Here'
    html = html.replace( /<\/body>/ , customScripts)

    // return modified response
    return new Response(html, {
        headers: response.headers
    })
}
}