.menu-item-239 .mfn-menu-item-megamenu {
left: auto !important;
right: 0 !important;
}
That right-anchors the 720 px panel so it opens leftward, fully inside the viewport. It covers both the normal and
sticky headers (they share the same item). If you want a belt-and-braces version that also stops it ever exceeding the
screen on very narrow widths, add:
@media (max-width: 1300px){
.menu-item-239 .mfn-menu-item-megamenu{ max-width: 95vw !important; }
} .woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important;
margin: 0 0 24px !important;
} .woocommerce ul.products li.product,
.woocommerce ul.products li.product-category {
width: auto !important; margin: 0 !important;
float: none !important;
clear: none !important;
box-sizing: border-box;
border: 1px solid #e2e5e8; border-radius: 3px;
padding: 14px;
transition: border-color .2s ease, box-shadow .2s ease;
} .woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product-category:hover {
border-color: #0097B2;
box-shadow: 0 4px 14px rgba(0,0,0,.06);
} @media (max-width: 1100px){
.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(3,1fr)!important;}
}
@media (max-width: 760px){
.woocommerce ul.products,.woocommerce-page
ul.products{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;}
} .woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }