/* Keep the Accessories mega-menu on-screen on smaller laptops */
  .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; }
  }

/* Quantum Layer — shop grid: 4 per row + thin bordered cards */
  .woocommerce ul.products,
  .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;   /* 4 in a row */
    gap: 18px !important;
    margin: 0 0 24px !important;
  }

  /* thin border on every category AND product tile */
  .woocommerce ul.products li.product,
  .woocommerce ul.products li.product-category {
    width: auto !important;      /* drop the theme's 3-col widths */
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box;
    border: 1px solid #e2e5e8;   /* the thin border */
    border-radius: 3px;
    padding: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }

  /* optional: subtle teal highlight on hover */
  .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);
  }

  /* stay tidy on smaller screens: 3, then 2 across */
  @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;}
  }

/* remove the empty clearfix cell CSS grid was creating */
  .woocommerce ul.products::before,
  .woocommerce ul.products::after { content: none !important; display: none !important; }