feat: improve responsiveness of checkout payment panel and help sidebar components

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.html

@@ -34,7 +34,7 @@
       </div>
     </section>
 
-    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
+    <section class="payment-panel" aria-live="polite">
       @if (isGeneratingIntent()) {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem">
           <h3 class="payment-panel__title">Cargando información de pago...</h3>

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

@@ -32,6 +32,11 @@
 .payment-methods {
   min-width: 0;
 
+  @media (max-width: 760px) {
+    width: min(100%, 300px);
+    justify-self: center;
+  }
+
   &__title {
     margin: 0 0 1.75rem;
     color: #8a8a8a;
@@ -109,7 +114,22 @@
 }
 
 .payment-panel {
+  display: flex;
+  justify-content: flex-end;
   min-width: 0;
+
+  > app-checkout-payment-qr,
+  > app-checkout-payment-transfer,
+  > app-checkout-payment-telepagos {
+    display: block;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  @media (max-width: 760px) {
+    justify-content: center;
+  }
+
   &__card {
     width: 100%;
     max-width: 320px;

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss

@@ -50,8 +50,13 @@
 }
 
 @media (max-width: 767.98px) {
+  .help-sidebar__title {
+    text-align: center;
+  }
+
   .help-sidebar__nav {
     flex-flow: row wrap;
+    justify-content: center;
     gap: 0.75rem 1.25rem;
   }
 }

src/app/features/store/pages/help-page/pages/contact-page/contact-page.scss

@@ -122,6 +122,30 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .contact-page__details {
+    align-items: center;
+    text-align: center;
+  }
+
+  .contact-page__title {
+    width: 100%;
+  }
+
+  .contact-page__location {
+    width: 100%;
+  }
+
+  .contact-page__location-title {
+    justify-content: center;
+  }
+
+  .contact-page__addresses {
+    padding-left: 0;
+    list-style-position: inside;
+  }
+}
+
 @media (max-width: 575.98px) {
   .contact-page__map::ng-deep .location-map {
     min-height: 16rem;

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -26,3 +26,9 @@
   color: #888888;
   font-size: 0.8125rem;
 }
+
+@media (max-width: 767.98px) {
+  .faq-page__title {
+    text-align: center;
+  }
+}

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));
+  }
+}