feat(layout): enhance layout structure by adding padding and container classes

src/app/core/layout/store-layout/store-layout.component.html

@@ -28,7 +28,11 @@
   }
 
   <main class="flex-grow-1 d-block">
-    <router-outlet />
+    <section class="py-5">
+      <div class="container-xl px-3 px-md-4">
+        <router-outlet />
+      </div>
+    </section>
   </main>
 
   <app-store-footer

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

@@ -1,4 +1,4 @@
-<div class="container-xl px-3 px-md-4 py-4">
+
   <div class="checkout-page">
     <div class="checkout-page__stepper-col ">
       <app-stepper #stepper>
@@ -37,4 +37,3 @@
       />
     </div>
   </div>
-</div>

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

@@ -3,7 +3,6 @@
   grid-template-columns: minmax(0, 1fr) 420px;
   gap: 4rem;
   align-items: start;
-  padding: 2rem 0;
 
   @media (max-width: 900px) {
     grid-template-columns: 1fr;

src/app/features/store/pages/product-detail-page/product-detail-page.component.html

@@ -1,5 +1,4 @@
-<section class="product-detail py-5">
+<section class="product-detail">
-  <div class="container-xl px-3 px-md-4">
     @if (loading()) {
       <div class="text-center py-5">
         <div class="spinner-border text-primary" role="status">
@@ -116,5 +115,4 @@
         No se encontró el producto especificado.
       </div>
     }
-  </div>
 </section>

src/app/features/store/pages/store-home-page/store-home-page.component.html

@@ -1,5 +1,4 @@
-<section class="py-5">
+
-  <div class="container-xl px-3 px-md-4">
     <app-store-section title="Productos">
       <div class="d-grid gap-4">
         @if (error()) {
@@ -41,5 +40,3 @@
         }
       </div>
     </app-store-section>
-  </div>
-</section>