Woocommerce Kasse nicht responsiv

Hallo Community,
seit längerem nutze ich in meinem E-Commerce Shop woocommerce. Ich nutze das Theme OceanWP mit Elementor.
Die Darstellung vom Checkout ist auf dem Desktop gut und übersichtlich. Leider ist in der mobilen Version die Tabelle, welche den Bestellinhalt zusammenfast, zu breit. Somit aktiviert sich das unschöne horizontale Scrollen und der Checkout sieht wenig vertrauenserweckend aus. Ich habe ein Bild vom Problem angehangen.

Was ich bis dato gemacht habe:
- alle Plugins deaktiviert -> keine Änderung
- in Woocommerce nach Einstellmöglichkeiten gesucht
- jegliche CSS Codes aus dem WWW probiert, welche die Tabelle "umwandeln" sollen, jedoch leider nicht zu einer passablen Lösung führen

Kennt sich jemand in diesem Fall aus? Am liebsten ist es mir, das Problem zu beheben. Sollte es jedoch einen CSS Snippet geben, der die Tabelle ordentlich darstellt. bin ich auch mehr als zufrieden. :D
Link: https://ultimatesolutions.de/kasse/

viele Grüße und besten Dank für eure Hilfe,
Gustav

Vielen Dank mensmaximus! Problem ist nahezu behoben. :)

Es sind 2 Probleme übrig:

1.:
Das horizontale scrollen ist noch immer aktiv. Scheinbar sind der mobile button zum ausklappen des Menüs sowie der Button unten rechts zum hochsrollen zu breit, bzw die Box nicht auf 100% Bildschirmbreite skaliert. Mit dem zugehörigen Stylesheet habe ich das Problem nicht beheben können.

2.:
Die Tabelle table.shop... ist jetzt zwar auf kompletter breite ohne scrollen sichtbar, jedoch sind die Buchstaben zu klein um lesbar zu sein. Des weiteren ist zum linken Rand der Abstand sehr groß, so das wichtiger Platz verloren geht. Mache ich die Buchstaben größer, ragt die Tabelle über den Bildschirmrand hinaus.

Gibt es hier Lösungen dafür?

viele Grüße
Gustav