feat: enhance checkout page layout for better responsiveness and adjust cart actions for mobile

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -22,4 +22,5 @@
     flex: 1 1 290px;
     max-width: 290px;
   }
+
 }

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -6,6 +6,15 @@
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;
+
+    .checkout-page__cart-col {
+      order: 1;
+    }
+
+    .checkout-page__stepper-col,
+    .checkout-page__editing-notice {
+      order: 2;
+    }
   }
 
   &__stepper-col {

src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss

@@ -110,6 +110,7 @@
 
 .payment-panel {
   min-width: 0;
+
   &__card {
     width: 100%;
     max-width: 320px;

src/app/shared/components/cart/cart.component.scss

@@ -87,3 +87,13 @@
   display: flex;
   gap: 12px;
 }
+
+@media (max-width: 767.98px) {
+  .cart-actions {
+    flex-direction: column;
+
+    ::ng-deep app-button {
+      width: 100%;
+    }
+  }
+}

src/app/shared/components/product-column-with-image/product-column-with-image.component.scss

@@ -75,3 +75,9 @@
     }
   }
 }
+
+@media (max-width: 767.98px) {
+  .product-column-with-image {
+    border-color: var(--color-primary, var(--tenant-primary, #009933));
+  }
+}