Help with styling the 'edit details' modal lightbox in cart please

Hi! I'm in need of some help styling the modal/lightbox that shows in the cart when the 'Edit details' link is clicked.

Currently mine is showing with the site logo and nav on top of the div:

I've been writing some custom CSS to further style the contents but can't solve:

1. How to fix the layering / z index issue where the logo and nav are overlapping the lightbox

2. How to style the type (size and weight) for the options (16-18 inch, 18-20 inch etc)

If anyone could help that would be awesome!

Here's my CSS for the styling tweaks I've made so far:

.cart-product-form-title {
font-size: 28px !important;
line-height: 34px !important;
color: #E0B6C9 !important;
padding-right: 80px;
margin-top: 0px !important;
margin-bottom: 15px !important;
padding-top: 0px !important;
padding-bottom: 0px;
}

.cart-product-form-field-title {
font-weight: 100 !important;
font-size: 16px !important;
line-height: 20px !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}

Thanks!

Victoria

Can you send the url and I can check?

16 minutes ago, ChrisKo said:

Can you send the url and I can check?

Hi Chris!

It's https://stoneandspectra.com

You'll need to add something to the cart, then go to the cart and click 'Edit details' under the item to see the issue.

Thanks!

Does anyone know if this is potentially a bug? Should I reach out to Squarespace support? Thanks 🙂

Thank you SO much @tuanphan!! This fixed it. I'm so relieved!

Thanks again,

Vic