feat ui foundation layer for page container sections and grid

src/app/features/website/catalog/components/category-grid/category-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-category-grid">
+<div class="catalog-category-grid grid grid-4">
   @for (category of categories; track trackByCategoryId($index, category)) {
     <button type="button" class="catalog-category-card" (click)="categorySelected.emit(category)">
       <span class="catalog-category-image">

src/app/features/website/catalog/components/category-grid/category-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 24px;
 }
 
 .catalog-category-card {
@@ -100,11 +97,6 @@
 }
 
 @media (max-width: 640px) {
-  .catalog-category-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-
   .catalog-category-content {
     min-height: 84px;
     padding: 10px 12px;

src/app/features/website/catalog/components/product-grid/product-grid.component.html

@@ -1,4 +1,4 @@
-<div class="catalog-product-grid">
+<div class="catalog-product-grid grid grid-4">
   @for (product of products; track trackByItemId($index, product)) {
     <div class="catalog-product-shell">
       <app-product-card

src/app/features/website/catalog/components/product-grid/product-grid.component.scss

@@ -1,7 +1,4 @@
 .catalog-product-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 24px;
   align-items: stretch;
 }
 
@@ -16,10 +13,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (max-width: 640px) {
-  .catalog-product-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 16px;
-  }
-}

src/app/features/website/catalog/containers/catalog-container.component.html

@@ -1,4 +1,4 @@
-<main class="catalog-page">
+<main class="catalog-page page-container">
   <header class="catalog-header">
     <a [routerLink]="'/catalog' | langRoute" class="catalog-root-link">{{ 'catalog.title' | translate }}</a>
 

src/app/layouts/containers/dynamic-page-layout.component.ts

@@ -16,15 +16,19 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
       <main class="dynamic-page-layout" [attr.data-layout]="model.layout">
         @for (section of model.sections; track section.id) {
           <section
-            class="dynamic-section"
+            class="section dynamic-section"
             [attr.data-section-type]="section.type"
             [attr.data-section-layout]="section.layout?.strategy ?? section.type"
-            [style.--section-columns]="section.layout?.columns ?? null"
-            [style.--section-gap]="section.layout?.gap ?? null"
-            [style.--section-align]="section.layout?.align ?? null"
             [class.dynamic-section--desktop-hidden]="section.visibility?.desktop === false"
             [class.dynamic-section--tablet-hidden]="section.visibility?.tablet === false"
             [class.dynamic-section--mobile-hidden]="section.visibility?.mobile === false"
+          >
+            <div class="page-container">
+              <div
+                class="dynamic-section__content"
+                [style.--section-columns]="section.layout?.columns ?? null"
+                [style.--section-gap]="section.layout?.gap ?? null"
+                [style.--section-align]="section.layout?.align ?? null"
               >
                 @for (widget of section.widgets; track widget.id) {
                   <div class="dynamic-widget" [attr.data-widget-type]="widget.type">
@@ -33,6 +37,8 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
                     }
                   </div>
                 }
+              </div>
+            </div>
           </section>
         }
       </main>
@@ -40,18 +46,19 @@ import { WidgetHostService } from '../../dynamic-renderer/widget-host/widget-hos
   `,
   styles: [
     `
-      .dynamic-page-layout { display: grid; gap: 1.5rem; }
+      .dynamic-page-layout { display: block; }
-      .dynamic-section {
+
+      .dynamic-section__content {
         display: grid;
         gap: var(--section-gap, 1rem);
         align-items: var(--section-align, stretch);
       }
 
-      .dynamic-section[data-section-layout='grid'] {
+      .dynamic-section[data-section-layout='grid'] .dynamic-section__content {
         grid-template-columns: repeat(var(--section-columns, 1), minmax(0, 1fr));
       }
 
-      .dynamic-section[data-section-layout='hero'] {
+      .dynamic-section[data-section-layout='hero'] .dynamic-section__content {
         grid-template-columns: minmax(0, 1fr);
       }
 

src/app/pages/home/home.component.html

@@ -1,7 +1,11 @@
 @if (loading()) {
-  <section class="home-loading">Loading homepage...</section>
+  <section class="home-loading section">
+    <div class="page-container">Loading homepage...</div>
+  </section>
 } @else if (pageModel()) {
   <app-dynamic-page-layout [model]="pageModel()" />
 } @else {
-  <section class="home-empty">No page configuration found.</section>
+  <section class="home-empty section">
+    <div class="page-container">No page configuration found.</div>
+  </section>
 }

src/app/pages/public/platform-home.component.ts

@@ -10,11 +10,15 @@ import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.faca
   imports: [DynamicPageLayoutComponent],
   template: `
     @if (loading()) {
-      <section class="platform-loading">Loading platform page...</section>
+      <section class="platform-loading section">
+        <div class="page-container">Loading platform page...</div>
+      </section>
     } @else if (model()) {
       <app-dynamic-page-layout [model]="model()" />
     } @else {
-      <section class="platform-empty">No page configuration found.</section>
+      <section class="platform-empty section">
+        <div class="page-container">No page configuration found.</div>
+      </section>
     }
   `,
   styles: [

src/app/widgets/ui/categories-widget.component.ts

@@ -31,7 +31,7 @@ import { LanguageService } from '../../services/language.service';
   `,
   styles: [
     `
-      .categories-widget { padding: 1rem 0; display: grid; gap: 1rem; }
+      .categories-widget { display: grid; gap: 1rem; }
       .categories-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],

src/app/widgets/ui/product-carousel-widget.component.ts

@@ -23,7 +23,7 @@ import { ProductCollectionWidgetData } from '../contracts/widget-data.contract';
   `,
   styles: [
     `
-      .product-carousel-widget { padding: 1rem; }
+      .product-carousel-widget { display: grid; gap: 1rem; }
       .product-carousel-widget__empty { margin: 0; color: var(--text-secondary, #667a77); }
     `
   ],

src/styles.scss

@@ -49,6 +49,11 @@
   padding: 0;
 }
 
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
@@ -57,7 +62,7 @@ html {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   line-height: 1.6;
   color: var(--text-primary);
   background: #f5f5f5;
@@ -69,6 +74,23 @@ body {
   }
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+p {
+  line-height: 1.5;
+}
+
+img,
+svg,
+video,
+canvas {
+  display: block;
+  max-width: 100%;
+}
+
 /* Smooth Transitions */
 a, button, input, textarea, select {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -109,10 +131,61 @@ a, button, input, textarea, select {
 }
 
 /* Utility Classes */
-.container {
+.page-container {
-  max-width: 1200px;
+  max-width: 1280px;
   margin: 0 auto;
-  padding: 0 20px;
+  padding: 24px 16px;
+  width: 100%;
+}
+
+/* Backward-compatible alias while foundation migration is in progress. */
+.container {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px 16px;
+  width: 100%;
+}
+
+.section {
+  margin: 24px 0;
+}
+
+.grid {
+  display: grid;
+  gap: 16px;
+}
+
+.grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.grid-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+@media (max-width: 1200px) {
+  .grid-4 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr;
+  }
 }
 
 .text-center {