Product Shop Page Layout displays products randomly

i used this CSS to fix it temporarily, but I am hoping it can be fixed with a settings correction:

/* Safe Desires — fix mobile shop grid offset and force clean columns */

/* 1) Force products list to be a clean CSS grid */
.archive .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(2, minmax(0,1fr)); /* mobile */
gap: 16px;
width: 100% !important;
margin: 0 !important;
transform: none !important; /* kill leftover isotope transforms */
}

/* 2) Remove legacy widths/floats/absolute positioning from product items */
.archive .woocommerce ul.products li.product {
width: auto !important;
float: none !important;
clear: none !important;
position: static !important;
margin: 0 !important;
}

/* 3) Bump columns up on larger screens */
@media (min-width: 769px){
.archive .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px){
.archive .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* 4) Keep titles to two lines so rows stay even */
.archive .woocommerce ul.products li.product .product-title,
.archive .woocommerce ul.products li.product .product_title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}

/* 5) Make sure the closed filter sidebar doesn’t push content */
body:not(.filters-open) .shop-filters,
body:not(.et-filters-open) .shop-filters,
body:not(.offcanvas-open) .shop-filters {
position: fixed; left: -9999px; width: 0; height: 0; /* hide when closed */
}