Merge remote-tracking branch 'origin/feat/ssr' into feat/ssr

Reviewed-on: #39

.gitea/workflows/deploy.yaml

@@ -125,6 +125,18 @@ jobs:
           docker build -t "$FRONTEND_IMAGE" ./frontend
           docker push "$FRONTEND_IMAGE"
 
+      - name: Cleanup Docker on runner (prevent vdisk growth)
+        if: always()
+        shell: bash
+        run: |
+          set +e
+
+          # Keep recent artifacts, drop old local residue from CI builds.
+          docker container prune -f --filter "until=168h" || true
+          docker image prune -a -f --filter "until=168h" || true
+          docker builder prune -a -f --filter "until=168h" || true
+          docker network prune -f --filter "until=168h" || true
+
   deploy:
     needs: build-and-push
     runs-on: ubuntu-latest

.gitignore

@@ -46,10 +46,12 @@ build/
 ./storage_quotes
 ./storage_requests
 ./storage_media
+./storage_shop
 storage_orders
 storage_quotes
 storage_requests
 storage_media
+storage_shop
 
 # Qodana local reports/artifacts
 backend/.qodana/

README.md

@@ -32,8 +32,8 @@ Crea un database PostgreSQL chiamato `printcalc`. Lo schema viene gestito dal pr
 Configura il percorso di OrcaSlicer in `backend/src/main/resources/application.properties` o tramite la variabile d'ambiente `SLICER_PATH`. Per il media service pubblico puoi configurare anche:
 
 - `MEDIA_STORAGE_ROOT` per la root `storage_media` usata dal backend (`original/`, `public/`, `private/`)
-- `MEDIA_PUBLIC_BASE_URL` per gli URL assoluti restituiti dalle API admin, ad esempio `https://example.com/media`
-- `MEDIA_FFMPEG_PATH` per il binario `ffmpeg`
+- `SHOP_STORAGE_ROOT` per la root `storage_shop` usata dal backend per i modelli dei prodotti shop
+- `MEDIA_FFMPEG_PATH` per il binario `ffmpeg` (nel deploy Docker default: `/usr/local/bin/ffmpeg-media`)
 - `MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES` per il limite per asset immagine
 
 ```bash
@@ -64,12 +64,13 @@ I prezzi non sono più gestiti tramite variabili d'ambiente fisse ma tramite tab
 *   `/frontend`: Applicazione Angular.
 *   `/backend/profiles`: Contiene i file di configurazione per OrcaSlicer.
 *   `/storage_media`: Originali e varianti media pubbliche/private su filesystem.
+*   `/storage_shop`: Modelli e file prodotti dello shop.
 
 ## Media pubblici
 
 Il backend salva sempre l'originale in `storage_media/original/` e precomputa le varianti pubbliche in `storage_media/public/`. La cartella `storage_media/private/` è predisposta per asset non pubblici.
 
-Nel deploy Docker il volume media atteso è `/mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media`.
+Nel deploy Docker i volumi attesi sono `/mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media` e `/mnt/cache/appdata/print-calculator/${ENV}/storage_shop:/app/storage_shop`.
 
 Nginx non deve passare dal backend per i file pubblici. Configurazione attesa:
 
@@ -106,7 +107,7 @@ Operativamente:
 Assicurati che `slicer.path` punti al binario corretto. Su macOS è solitamente `/Applications/OrcaSlicer.app/Contents/MacOS/OrcaSlicer`. Su Linux è il percorso all'AppImage (estratta o meno).
 
 ### FFmpeg e media pubblici
-Verifica che `MEDIA_FFMPEG_PATH` punti a un `ffmpeg` con supporto JPEG, WebP e AVIF. Se gli URL media restituiti dalle API admin non sono raggiungibili, controlla che `MEDIA_PUBLIC_BASE_URL` corrisponda al `location /media/` esposto da Nginx e che il volume `storage_media` sia montato correttamente.
+Verifica che `MEDIA_FFMPEG_PATH` punti a un `ffmpeg` con supporto JPEG, WebP e AVIF (encoder + muxer AVIF). Nel container backend il default è `/usr/local/bin/ffmpeg-media`: usa `/usr/bin/ffmpeg` se già compatibile, altrimenti installa un fallback statico con supporto AVIF. Se gli URL media restituiti dalle API admin non sono raggiungibili, controlla che `APP_FRONTEND_BASE_URL` punti al dominio corretto, che `location /media/` sia esposto da Nginx e che il volume `storage_media` sia montato correttamente.
 
 ### Database connection
 Verifica le credenziali in `application.properties`. Se usi Docker, puoi passare `DB_URL`, `DB_USERNAME` e `DB_PASSWORD` come variabili d'ambiente.

backend/Dockerfile

@@ -12,25 +12,48 @@ RUN ./gradlew bootJar -x test --no-daemon
 FROM eclipse-temurin:21-jre-jammy
 ARG ORCA_VERSION=2.3.1
 ARG ORCA_DOWNLOAD_URL
+ARG FFMPEG_STATIC_URL=https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-amd64-static.tar.xz
 
 # Install system dependencies for OrcaSlicer and media processing.
-# The build fails fast if the packaged ffmpeg lacks JPEG/WebP/AVIF encoders.
+# Prefer system ffmpeg; if AVIF support is incomplete, install a static ffmpeg fallback.
 RUN set -eux; \
     apt-get update; \
     DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends \
     ffmpeg \
     wget \
+    xz-utils \
+    ca-certificates \
     assimp-utils \
     libgl1 \
     libglib2.0-0 \
     libgtk-3-0 \
     libdbus-1-3 \
     libwebkit2gtk-4.0-37; \
-    ffmpeg -hide_banner -encoders > /tmp/ffmpeg-encoders.txt; \
-    grep -Eq '[[:space:]]mjpeg[[:space:]]' /tmp/ffmpeg-encoders.txt; \
-    grep -Eq '[[:space:]](libwebp|webp)[[:space:]]' /tmp/ffmpeg-encoders.txt; \
-    grep -Eq '[[:space:]](libaom-av1|librav1e|libsvtav1)[[:space:]]' /tmp/ffmpeg-encoders.txt; \
+    check_ffmpeg_support() { \
+      ffmpeg_bin="$1"; \
+      "$ffmpeg_bin" -hide_banner -encoders > /tmp/ffmpeg-encoders.txt 2>&1 || return 1; \
+      "$ffmpeg_bin" -hide_banner -muxers > /tmp/ffmpeg-muxers.txt 2>&1 || return 1; \
+      grep -Eq '[[:space:]]mjpeg[[:space:]]' /tmp/ffmpeg-encoders.txt || return 1; \
+      grep -Eq '[[:space:]](libwebp|webp)[[:space:]]' /tmp/ffmpeg-encoders.txt || return 1; \
+      grep -Eq '[[:space:]](libaom-av1|librav1e|libsvtav1)[[:space:]]' /tmp/ffmpeg-encoders.txt || return 1; \
+      grep -Eq '[[:space:]]avif([[:space:]]|,|$)' /tmp/ffmpeg-muxers.txt || return 1; \
+      return 0; \
+    }; \
+    if check_ffmpeg_support /usr/bin/ffmpeg; then \
+      ln -sf /usr/bin/ffmpeg /usr/local/bin/ffmpeg-media; \
+    else \
+      echo "System ffmpeg lacks AVIF support, installing static fallback from ${FFMPEG_STATIC_URL}"; \
+      wget -q "${FFMPEG_STATIC_URL}" -O /tmp/ffmpeg-static.tar.xz; \
+      tar -xJf /tmp/ffmpeg-static.tar.xz -C /tmp; \
+      FFMPEG_STATIC_BIN="$(find /tmp -maxdepth 2 -type f -name ffmpeg | head -n 1)"; \
+      test -n "${FFMPEG_STATIC_BIN}"; \
+      install -m 0755 "${FFMPEG_STATIC_BIN}" /usr/local/bin/ffmpeg-media; \
+      check_ffmpeg_support /usr/local/bin/ffmpeg-media; \
+    fi; \
+    rm -f /tmp/ffmpeg-muxers.txt; \
     rm -f /tmp/ffmpeg-encoders.txt; \
+    rm -f /tmp/ffmpeg-static.tar.xz; \
+    rm -rf /tmp/ffmpeg-*-amd64-static; \
     rm -rf /var/lib/apt/lists/*
 
 # Install OrcaSlicer
@@ -71,6 +94,8 @@ ENV PATH="/opt/orcaslicer/usr/bin:${PATH}"
 # Set Slicer Path env variable for Java app
 ENV SLICER_PATH="/opt/orcaslicer/AppRun"
 ENV ASSIMP_PATH="assimp"
+# Use ffmpeg selected at image build time (system or static fallback) for media generation.
+ENV MEDIA_FFMPEG_PATH="/usr/local/bin/ffmpeg-media"
 
 WORKDIR /app
 # Copy JAR from build stage

backend/build.gradle

@@ -42,6 +42,7 @@ dependencies {
 	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
 	implementation 'net.codecrete.qrbill:qrbill-generator:3.4.0'
 	implementation 'org.springframework.boot:spring-boot-starter-mail'
+	implementation 'org.jsoup:jsoup:1.18.3'
 	implementation platform('org.lwjgl:lwjgl-bom:3.3.4')
 	implementation 'org.lwjgl:lwjgl'
 	implementation 'org.lwjgl:lwjgl-assimp'

backend/entrypoint.sh

@@ -1,10 +1,61 @@
 #!/bin/sh
+set -e
+
+# In container default to the ffmpeg selected during image build.
+if [ -z "${MEDIA_FFMPEG_PATH:-}" ]; then
+  MEDIA_FFMPEG_PATH="/usr/local/bin/ffmpeg-media"
+fi
+export MEDIA_FFMPEG_PATH
+
+validate_ffmpeg_support() {
+  ffmpeg_bin="$1"
+  if ! command -v "$ffmpeg_bin" >/dev/null 2>&1; then
+    echo "ERROR: FFmpeg executable not found: ${ffmpeg_bin}" >&2
+    exit 11
+  fi
+
+  encoders="$(mktemp)"
+  muxers="$(mktemp)"
+  trap 'rm -f "$encoders" "$muxers"' EXIT
+
+  "$ffmpeg_bin" -hide_banner -encoders > "$encoders" 2>&1 || {
+    echo "ERROR: Unable to inspect FFmpeg encoders from ${ffmpeg_bin}" >&2
+    cat "$encoders" >&2
+    exit 12
+  }
+  "$ffmpeg_bin" -hide_banner -muxers > "$muxers" 2>&1 || {
+    echo "ERROR: Unable to inspect FFmpeg muxers from ${ffmpeg_bin}" >&2
+    cat "$muxers" >&2
+    exit 13
+  }
+
+  grep -Eq '[[:space:]]mjpeg[[:space:]]' "$encoders" || {
+    echo "ERROR: FFmpeg '${ffmpeg_bin}' missing JPEG encoder (mjpeg)." >&2
+    exit 14
+  }
+  grep -Eq '[[:space:]](libwebp|webp)[[:space:]]' "$encoders" || {
+    echo "ERROR: FFmpeg '${ffmpeg_bin}' missing WebP encoder." >&2
+    exit 15
+  }
+  grep -Eq '[[:space:]](libaom-av1|librav1e|libsvtav1)[[:space:]]' "$encoders" || {
+    echo "ERROR: FFmpeg '${ffmpeg_bin}' missing AVIF-capable encoder." >&2
+    exit 16
+  }
+  grep -Eq '[[:space:]]avif([[:space:]]|,|$)' "$muxers" || {
+    echo "ERROR: FFmpeg '${ffmpeg_bin}' missing AVIF muxer." >&2
+    exit 17
+  }
+}
+
+validate_ffmpeg_support "$MEDIA_FFMPEG_PATH"
+
 echo "----------------------------------------------------------------"
 echo "Starting Backend Application"
 echo "DB_URL: $DB_URL"
 echo "DB_USERNAME: $DB_USERNAME"
 echo "SPRING_DATASOURCE_URL: $SPRING_DATASOURCE_URL"
 echo "SLICER_PATH: $SLICER_PATH"
+echo "MEDIA_FFMPEG_PATH: $MEDIA_FFMPEG_PATH"
 echo "----------------------------------------------------------------"
 
 # Determine which environment variables to use for database connection

backend/src/main/java/com/printcalculator/controller/SitemapController.java

@@ -0,0 +1,37 @@
+package com.printcalculator.controller;
+
+import com.printcalculator.service.shop.ShopSitemapService;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.CacheControl;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.time.Duration;
+
+@RestController
+public class SitemapController {
+    private final ShopSitemapService shopSitemapService;
+    private final long cacheSeconds;
+
+    public SitemapController(
+            ShopSitemapService shopSitemapService,
+            @Value("${app.sitemap.shop.cache-seconds:3600}") long cacheSeconds
+    ) {
+        this.shopSitemapService = shopSitemapService;
+        this.cacheSeconds = Math.max(cacheSeconds, 0L);
+    }
+
+    @GetMapping(value = "/api/sitemap-shop.xml", produces = MediaType.APPLICATION_XML_VALUE)
+    public ResponseEntity<String> getShopSitemap() {
+        CacheControl cacheControl = cacheSeconds > 0
+                ? CacheControl.maxAge(Duration.ofSeconds(cacheSeconds)).cachePublic()
+                : CacheControl.noCache();
+
+        return ResponseEntity.ok()
+                .contentType(MediaType.parseMediaType("application/xml;charset=UTF-8"))
+                .cacheControl(cacheControl)
+                .body(shopSitemapService.getShopSitemapXml());
+    }
+}

backend/src/main/java/com/printcalculator/dto/AdminShopProductDto.java

@@ -12,10 +12,30 @@ public class AdminShopProductDto {
     private String categorySlug;
     private String slug;
     private String name;
+    private String nameIt;
+    private String nameEn;
+    private String nameDe;
+    private String nameFr;
     private String excerpt;
+    private String excerptIt;
+    private String excerptEn;
+    private String excerptDe;
+    private String excerptFr;
     private String description;
+    private String descriptionIt;
+    private String descriptionEn;
+    private String descriptionDe;
+    private String descriptionFr;
     private String seoTitle;
+    private String seoTitleIt;
+    private String seoTitleEn;
+    private String seoTitleDe;
+    private String seoTitleFr;
     private String seoDescription;
+    private String seoDescriptionIt;
+    private String seoDescriptionEn;
+    private String seoDescriptionDe;
+    private String seoDescriptionFr;
     private String ogTitle;
     private String ogDescription;
     private Boolean indexable;
@@ -83,6 +103,38 @@ public class AdminShopProductDto {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -91,6 +143,38 @@ public class AdminShopProductDto {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -99,6 +183,38 @@ public class AdminShopProductDto {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }
@@ -107,6 +223,38 @@ public class AdminShopProductDto {
         this.seoTitle = seoTitle;
     }
 
+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
     public String getSeoDescription() {
         return seoDescription;
     }
@@ -115,6 +263,38 @@ public class AdminShopProductDto {
         this.seoDescription = seoDescription;
     }
 
+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
     public String getOgTitle() {
         return ogTitle;
     }

backend/src/main/java/com/printcalculator/dto/AdminUpsertShopProductRequest.java

@@ -7,10 +7,30 @@ public class AdminUpsertShopProductRequest {
     private UUID categoryId;
     private String slug;
     private String name;
+    private String nameIt;
+    private String nameEn;
+    private String nameDe;
+    private String nameFr;
     private String excerpt;
+    private String excerptIt;
+    private String excerptEn;
+    private String excerptDe;
+    private String excerptFr;
     private String description;
+    private String descriptionIt;
+    private String descriptionEn;
+    private String descriptionDe;
+    private String descriptionFr;
     private String seoTitle;
+    private String seoTitleIt;
+    private String seoTitleEn;
+    private String seoTitleDe;
+    private String seoTitleFr;
     private String seoDescription;
+    private String seoDescriptionIt;
+    private String seoDescriptionEn;
+    private String seoDescriptionDe;
+    private String seoDescriptionFr;
     private String ogTitle;
     private String ogDescription;
     private Boolean indexable;
@@ -43,6 +63,38 @@ public class AdminUpsertShopProductRequest {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -51,6 +103,38 @@ public class AdminUpsertShopProductRequest {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -59,6 +143,38 @@ public class AdminUpsertShopProductRequest {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }
@@ -67,6 +183,38 @@ public class AdminUpsertShopProductRequest {
         this.seoTitle = seoTitle;
     }
 
+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
     public String getSeoDescription() {
         return seoDescription;
     }
@@ -75,6 +223,38 @@ public class AdminUpsertShopProductRequest {
         this.seoDescription = seoDescription;
     }
 
+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
     public String getOgTitle() {
         return ogTitle;
     }

backend/src/main/java/com/printcalculator/entity/ShopProduct.java

@@ -15,6 +15,7 @@ import jakarta.persistence.Table;
 import org.hibernate.annotations.ColumnDefault;
 
 import java.time.OffsetDateTime;
+import java.util.List;
 import java.util.UUID;
 
 @Entity
@@ -23,6 +24,8 @@ import java.util.UUID;
         @Index(name = "ix_shop_product_featured_sort", columnList = "is_featured, is_active, sort_order")
 })
 public class ShopProduct {
+    public static final List<String> SUPPORTED_LANGUAGES = List.of("it", "en", "de", "fr");
+
     @Id
     @GeneratedValue(strategy = GenerationType.AUTO)
     @Column(name = "shop_product_id", nullable = false)
@@ -38,18 +41,78 @@ public class ShopProduct {
     @Column(name = "name", nullable = false, length = Integer.MAX_VALUE)
     private String name;
 
+    @Column(name = "name_it", length = Integer.MAX_VALUE)
+    private String nameIt;
+
+    @Column(name = "name_en", length = Integer.MAX_VALUE)
+    private String nameEn;
+
+    @Column(name = "name_de", length = Integer.MAX_VALUE)
+    private String nameDe;
+
+    @Column(name = "name_fr", length = Integer.MAX_VALUE)
+    private String nameFr;
+
     @Column(name = "excerpt", length = Integer.MAX_VALUE)
     private String excerpt;
 
+    @Column(name = "excerpt_it", length = Integer.MAX_VALUE)
+    private String excerptIt;
+
+    @Column(name = "excerpt_en", length = Integer.MAX_VALUE)
+    private String excerptEn;
+
+    @Column(name = "excerpt_de", length = Integer.MAX_VALUE)
+    private String excerptDe;
+
+    @Column(name = "excerpt_fr", length = Integer.MAX_VALUE)
+    private String excerptFr;
+
     @Column(name = "description", length = Integer.MAX_VALUE)
     private String description;
 
+    @Column(name = "description_it", length = Integer.MAX_VALUE)
+    private String descriptionIt;
+
+    @Column(name = "description_en", length = Integer.MAX_VALUE)
+    private String descriptionEn;
+
+    @Column(name = "description_de", length = Integer.MAX_VALUE)
+    private String descriptionDe;
+
+    @Column(name = "description_fr", length = Integer.MAX_VALUE)
+    private String descriptionFr;
+
     @Column(name = "seo_title", length = Integer.MAX_VALUE)
     private String seoTitle;
 
+    @Column(name = "seo_title_it", length = Integer.MAX_VALUE)
+    private String seoTitleIt;
+
+    @Column(name = "seo_title_en", length = Integer.MAX_VALUE)
+    private String seoTitleEn;
+
+    @Column(name = "seo_title_de", length = Integer.MAX_VALUE)
+    private String seoTitleDe;
+
+    @Column(name = "seo_title_fr", length = Integer.MAX_VALUE)
+    private String seoTitleFr;
+
     @Column(name = "seo_description", length = Integer.MAX_VALUE)
     private String seoDescription;
 
+    @Column(name = "seo_description_it", length = Integer.MAX_VALUE)
+    private String seoDescriptionIt;
+
+    @Column(name = "seo_description_en", length = Integer.MAX_VALUE)
+    private String seoDescriptionEn;
+
+    @Column(name = "seo_description_de", length = Integer.MAX_VALUE)
+    private String seoDescriptionDe;
+
+    @Column(name = "seo_description_fr", length = Integer.MAX_VALUE)
+    private String seoDescriptionFr;
+
     @Column(name = "og_title", length = Integer.MAX_VALUE)
     private String ogTitle;
 
@@ -152,6 +215,38 @@ public class ShopProduct {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -160,6 +255,38 @@ public class ShopProduct {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -168,6 +295,38 @@ public class ShopProduct {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }
@@ -184,6 +343,70 @@ public class ShopProduct {
         this.seoDescription = seoDescription;
     }
 
+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
     public String getOgTitle() {
         return ogTitle;
     }
@@ -247,4 +470,124 @@ public class ShopProduct {
     public void setUpdatedAt(OffsetDateTime updatedAt) {
         this.updatedAt = updatedAt;
     }
+
+    public String getNameForLanguage(String language) {
+        return resolveLocalizedValue(language, name, nameIt, nameEn, nameDe, nameFr);
+    }
+
+    public void setNameForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> nameIt = value;
+            case "en" -> nameEn = value;
+            case "de" -> nameDe = value;
+            case "fr" -> nameFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getExcerptForLanguage(String language) {
+        return resolveLocalizedValue(language, excerpt, excerptIt, excerptEn, excerptDe, excerptFr);
+    }
+
+    public void setExcerptForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> excerptIt = value;
+            case "en" -> excerptEn = value;
+            case "de" -> excerptDe = value;
+            case "fr" -> excerptFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getDescriptionForLanguage(String language) {
+        return resolveLocalizedValue(language, description, descriptionIt, descriptionEn, descriptionDe, descriptionFr);
+    }
+
+    public void setDescriptionForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> descriptionIt = value;
+            case "en" -> descriptionEn = value;
+            case "de" -> descriptionDe = value;
+            case "fr" -> descriptionFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getSeoTitleForLanguage(String language) {
+        return resolveLocalizedValue(language, seoTitle, seoTitleIt, seoTitleEn, seoTitleDe, seoTitleFr);
+    }
+
+    public void setSeoTitleForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> seoTitleIt = value;
+            case "en" -> seoTitleEn = value;
+            case "de" -> seoTitleDe = value;
+            case "fr" -> seoTitleFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getSeoDescriptionForLanguage(String language) {
+        return resolveLocalizedValue(language, seoDescription, seoDescriptionIt, seoDescriptionEn, seoDescriptionDe, seoDescriptionFr);
+    }
+
+    public void setSeoDescriptionForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> seoDescriptionIt = value;
+            case "en" -> seoDescriptionEn = value;
+            case "de" -> seoDescriptionDe = value;
+            case "fr" -> seoDescriptionFr = value;
+            default -> {
+            }
+        }
+    }
+
+    private String resolveLocalizedValue(String language,
+                                         String fallback,
+                                         String valueIt,
+                                         String valueEn,
+                                         String valueDe,
+                                         String valueFr) {
+        String normalizedLanguage = normalizeLanguage(language);
+        String preferred = switch (normalizedLanguage) {
+            case "it" -> valueIt;
+            case "en" -> valueEn;
+            case "de" -> valueDe;
+            case "fr" -> valueFr;
+            default -> null;
+        };
+        String resolved = firstNonBlank(preferred, fallback);
+        if (resolved != null) {
+            return resolved;
+        }
+        return firstNonBlank(valueIt, valueEn, valueDe, valueFr);
+    }
+
+    private String normalizeLanguage(String language) {
+        if (language == null) {
+            return "";
+        }
+        String normalized = language.trim().toLowerCase();
+        int separatorIndex = normalized.indexOf('-');
+        if (separatorIndex > 0) {
+            normalized = normalized.substring(0, separatorIndex);
+        }
+        return normalized;
+    }
+
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
 }

backend/src/main/java/com/printcalculator/service/admin/AdminMediaControllerService.java

@@ -402,7 +402,7 @@ public class AdminMediaControllerService {
 
         if (!skippedFormats.isEmpty()) {
             logger.warn(
-                    "Skipping media formats for asset {} because FFmpeg encoders are unavailable: {}",
+                    "Skipping media formats for asset {} because FFmpeg support is unavailable: {}",
                     asset.getId(),
                     String.join(", ", skippedFormats)
             );

backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java

@@ -22,6 +22,10 @@ import com.printcalculator.service.SlicerService;
 import com.printcalculator.service.media.PublicMediaQueryService;
 import com.printcalculator.service.shop.ShopStorageService;
 import com.printcalculator.service.storage.ClamAVService;
+import org.jsoup.Jsoup;
+import org.jsoup.nodes.Document;
+import org.jsoup.safety.Safelist;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -63,6 +67,10 @@ public class AdminShopProductControllerService {
     private static final Pattern DIACRITICS_PATTERN = Pattern.compile("\\p{M}+");
     private static final Pattern NON_ALPHANUMERIC_PATTERN = Pattern.compile("[^a-z0-9]+");
     private static final Pattern EDGE_DASH_PATTERN = Pattern.compile("(^-+|-+$)");
+    private static final Safelist PRODUCT_DESCRIPTION_SAFELIST = Safelist.none()
+            .addTags("p", "div", "br", "strong", "b", "em", "i", "u", "ul", "ol", "li", "a")
+            .addAttributes("a", "href")
+            .addProtocols("a", "href", "http", "https", "mailto", "tel");
 
     private final ShopProductRepository shopProductRepository;
     private final ShopCategoryRepository shopCategoryRepository;
@@ -75,6 +83,7 @@ public class AdminShopProductControllerService {
     private final ShopStorageService shopStorageService;
     private final SlicerService slicerService;
     private final ClamAVService clamAVService;
+    private final long maxModelFileSizeBytes;
 
     public AdminShopProductControllerService(ShopProductRepository shopProductRepository,
                                              ShopCategoryRepository shopCategoryRepository,
@@ -86,7 +95,8 @@ public class AdminShopProductControllerService {
                                              AdminMediaControllerService adminMediaControllerService,
                                              ShopStorageService shopStorageService,
                                              SlicerService slicerService,
-                                             ClamAVService clamAVService) {
+                                             ClamAVService clamAVService,
+                                             @Value("${shop.model.max-file-size-bytes:104857600}") long maxModelFileSizeBytes) {
         this.shopProductRepository = shopProductRepository;
         this.shopCategoryRepository = shopCategoryRepository;
         this.shopProductVariantRepository = shopProductVariantRepository;
@@ -98,6 +108,7 @@ public class AdminShopProductControllerService {
         this.shopStorageService = shopStorageService;
         this.slicerService = slicerService;
         this.clamAVService = clamAVService;
+        this.maxModelFileSizeBytes = maxModelFileSizeBytes;
     }
 
     public List<AdminShopProductDto> getProducts() {
@@ -113,13 +124,13 @@ public class AdminShopProductControllerService {
     @Transactional
     public AdminShopProductDto createProduct(AdminUpsertShopProductRequest payload) {
         ensurePayload(payload);
-        String normalizedName = normalizeRequired(payload.getName(), "Product name is required");
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
         ensureSlugAvailable(normalizedSlug, null);
 
         ShopProduct product = new ShopProduct();
         product.setCreatedAt(OffsetDateTime.now());
-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
         ShopProduct saved = shopProductRepository.save(product);
         syncVariants(saved, payload.getVariants());
         return getProduct(saved.getId());
@@ -131,11 +142,11 @@ public class AdminShopProductControllerService {
         ShopProduct product = shopProductRepository.findById(productId)
                 .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Shop product not found"));
 
-        String normalizedName = normalizeRequired(payload.getName(), "Product name is required");
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
         ensureSlugAvailable(normalizedSlug, productId);
 
-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
         ShopProduct saved = shopProductRepository.save(product);
         syncVariants(saved, payload.getVariants());
         return getProduct(saved.getId());
@@ -159,7 +170,13 @@ public class AdminShopProductControllerService {
             }
         }
 
-        shopProductModelAssetRepository.findByProduct_Id(productId).ifPresent(asset -> deleteExistingModelFile(asset, productId));
+        shopProductModelAssetRepository.findByProduct_Id(productId).ifPresent(asset -> {
+            deleteExistingModelFile(asset, productId);
+            shopProductModelAssetRepository.delete(asset);
+        });
+        if (!variants.isEmpty()) {
+            shopProductVariantRepository.deleteAll(variants);
+        }
         shopProductRepository.delete(product);
     }
 
@@ -291,18 +308,38 @@ public class AdminShopProductControllerService {
 
     private void applyProductPayload(ShopProduct product,
                                      AdminUpsertShopProductRequest payload,
-                                     String normalizedName,
+                                     LocalizedProductContent localizedContent,
                                      String normalizedSlug,
                                      ShopCategory category) {
         product.setCategory(category);
         product.setSlug(normalizedSlug);
-        product.setName(normalizedName);
-        product.setExcerpt(normalizeOptional(payload.getExcerpt()));
-        product.setDescription(normalizeOptional(payload.getDescription()));
-        product.setSeoTitle(normalizeOptional(payload.getSeoTitle()));
-        product.setSeoDescription(normalizeOptional(payload.getSeoDescription()));
-        product.setOgTitle(normalizeOptional(payload.getOgTitle()));
-        product.setOgDescription(normalizeOptional(payload.getOgDescription()));
+        product.setName(localizedContent.defaultName());
+        product.setNameIt(localizedContent.names().get("it"));
+        product.setNameEn(localizedContent.names().get("en"));
+        product.setNameDe(localizedContent.names().get("de"));
+        product.setNameFr(localizedContent.names().get("fr"));
+        product.setExcerpt(localizedContent.defaultExcerpt());
+        product.setExcerptIt(localizedContent.excerpts().get("it"));
+        product.setExcerptEn(localizedContent.excerpts().get("en"));
+        product.setExcerptDe(localizedContent.excerpts().get("de"));
+        product.setExcerptFr(localizedContent.excerpts().get("fr"));
+        product.setDescription(localizedContent.defaultDescription());
+        product.setDescriptionIt(localizedContent.descriptions().get("it"));
+        product.setDescriptionEn(localizedContent.descriptions().get("en"));
+        product.setDescriptionDe(localizedContent.descriptions().get("de"));
+        product.setDescriptionFr(localizedContent.descriptions().get("fr"));
+        product.setSeoTitle(localizedContent.defaultSeoTitle());
+        product.setSeoTitleIt(localizedContent.seoTitles().get("it"));
+        product.setSeoTitleEn(localizedContent.seoTitles().get("en"));
+        product.setSeoTitleDe(localizedContent.seoTitles().get("de"));
+        product.setSeoTitleFr(localizedContent.seoTitles().get("fr"));
+        product.setSeoDescription(localizedContent.defaultSeoDescription());
+        product.setSeoDescriptionIt(localizedContent.seoDescriptions().get("it"));
+        product.setSeoDescriptionEn(localizedContent.seoDescriptions().get("en"));
+        product.setSeoDescriptionDe(localizedContent.seoDescriptions().get("de"));
+        product.setSeoDescriptionFr(localizedContent.seoDescriptions().get("fr"));
+        product.setOgTitle(localizedContent.defaultSeoTitle());
+        product.setOgDescription(localizedContent.defaultSeoDescription());
         product.setIndexable(payload.getIndexable() == null || payload.getIndexable());
         product.setIsFeatured(Boolean.TRUE.equals(payload.getIsFeatured()));
         product.setIsActive(payload.getIsActive() == null || payload.getIsActive());
@@ -358,16 +395,23 @@ public class AdminShopProductControllerService {
         }
 
         List<AdminUpsertShopProductVariantRequest> normalized = new ArrayList<>(payloads);
-        Set<String> colorKeys = new LinkedHashSet<>();
+        Set<String> variantKeys = new LinkedHashSet<>();
         int defaultCount = 0;
         for (AdminUpsertShopProductVariantRequest payload : normalized) {
             if (payload == null) {
                 throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Variant payload is required");
             }
             String colorName = normalizeRequired(payload.getColorName(), "Variant colorName is required");
-            String colorKey = colorName.toLowerCase(Locale.ROOT);
-            if (!colorKeys.add(colorKey)) {
-                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Duplicate variant colorName: " + colorName);
+            String materialCode = normalizeRequired(
+                    payload.getInternalMaterialCode(),
+                    "Variant internalMaterialCode is required"
+            ).toUpperCase(Locale.ROOT);
+            String variantKey = materialCode + "|" + colorName.toLowerCase(Locale.ROOT);
+            if (!variantKeys.add(variantKey)) {
+                throw new ResponseStatusException(
+                        HttpStatus.BAD_REQUEST,
+                        "Duplicate variant combination: " + materialCode + " / " + colorName
+                );
             }
             if (Boolean.TRUE.equals(payload.getIsDefault())) {
                 defaultCount++;
@@ -436,10 +480,30 @@ public class AdminShopProductControllerService {
         dto.setCategorySlug(product.getCategory() != null ? product.getCategory().getSlug() : null);
         dto.setSlug(product.getSlug());
         dto.setName(product.getName());
+        dto.setNameIt(product.getNameIt());
+        dto.setNameEn(product.getNameEn());
+        dto.setNameDe(product.getNameDe());
+        dto.setNameFr(product.getNameFr());
         dto.setExcerpt(product.getExcerpt());
+        dto.setExcerptIt(product.getExcerptIt());
+        dto.setExcerptEn(product.getExcerptEn());
+        dto.setExcerptDe(product.getExcerptDe());
+        dto.setExcerptFr(product.getExcerptFr());
         dto.setDescription(product.getDescription());
+        dto.setDescriptionIt(product.getDescriptionIt());
+        dto.setDescriptionEn(product.getDescriptionEn());
+        dto.setDescriptionDe(product.getDescriptionDe());
+        dto.setDescriptionFr(product.getDescriptionFr());
         dto.setSeoTitle(product.getSeoTitle());
+        dto.setSeoTitleIt(product.getSeoTitleIt());
+        dto.setSeoTitleEn(product.getSeoTitleEn());
+        dto.setSeoTitleDe(product.getSeoTitleDe());
+        dto.setSeoTitleFr(product.getSeoTitleFr());
         dto.setSeoDescription(product.getSeoDescription());
+        dto.setSeoDescriptionIt(product.getSeoDescriptionIt());
+        dto.setSeoDescriptionEn(product.getSeoDescriptionEn());
+        dto.setSeoDescriptionDe(product.getSeoDescriptionDe());
+        dto.setSeoDescriptionFr(product.getSeoDescriptionFr());
         dto.setOgTitle(product.getOgTitle());
         dto.setOgDescription(product.getOgDescription());
         dto.setIndexable(product.getIndexable());
@@ -523,6 +587,91 @@ public class AdminShopProductControllerService {
         }
     }
 
+    private LocalizedProductContent normalizeLocalizedProductContent(AdminUpsertShopProductRequest payload) {
+        String legacyName = normalizeOptional(payload.getName());
+        String fallbackName = firstNonBlank(
+                legacyName,
+                normalizeOptional(payload.getNameIt()),
+                normalizeOptional(payload.getNameEn()),
+                normalizeOptional(payload.getNameDe()),
+                normalizeOptional(payload.getNameFr())
+        );
+        if (fallbackName == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Product name is required");
+        }
+
+        Map<String, String> names = new LinkedHashMap<>();
+        names.put("it", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameIt()), fallbackName), "Italian product name is required"));
+        names.put("en", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameEn()), fallbackName), "English product name is required"));
+        names.put("de", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameDe()), fallbackName), "German product name is required"));
+        names.put("fr", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameFr()), fallbackName), "French product name is required"));
+
+        String fallbackExcerpt = firstNonBlank(
+                normalizeOptional(payload.getExcerpt()),
+                normalizeOptional(payload.getExcerptIt()),
+                normalizeOptional(payload.getExcerptEn()),
+                normalizeOptional(payload.getExcerptDe()),
+                normalizeOptional(payload.getExcerptFr())
+        );
+        Map<String, String> excerpts = new LinkedHashMap<>();
+        excerpts.put("it", firstNonBlank(normalizeOptional(payload.getExcerptIt()), fallbackExcerpt));
+        excerpts.put("en", firstNonBlank(normalizeOptional(payload.getExcerptEn()), fallbackExcerpt));
+        excerpts.put("de", firstNonBlank(normalizeOptional(payload.getExcerptDe()), fallbackExcerpt));
+        excerpts.put("fr", firstNonBlank(normalizeOptional(payload.getExcerptFr()), fallbackExcerpt));
+
+        String fallbackDescription = firstNonBlank(
+                normalizeRichTextOptional(payload.getDescription()),
+                normalizeRichTextOptional(payload.getDescriptionIt()),
+                normalizeRichTextOptional(payload.getDescriptionEn()),
+                normalizeRichTextOptional(payload.getDescriptionDe()),
+                normalizeRichTextOptional(payload.getDescriptionFr())
+        );
+        Map<String, String> descriptions = new LinkedHashMap<>();
+        descriptions.put("it", firstNonBlank(normalizeRichTextOptional(payload.getDescriptionIt()), fallbackDescription));
+        descriptions.put("en", firstNonBlank(normalizeRichTextOptional(payload.getDescriptionEn()), fallbackDescription));
+        descriptions.put("de", firstNonBlank(normalizeRichTextOptional(payload.getDescriptionDe()), fallbackDescription));
+        descriptions.put("fr", firstNonBlank(normalizeRichTextOptional(payload.getDescriptionFr()), fallbackDescription));
+
+        String fallbackSeoTitle = firstNonBlank(
+                normalizeOptional(payload.getSeoTitle()),
+                normalizeOptional(payload.getSeoTitleIt()),
+                normalizeOptional(payload.getSeoTitleEn()),
+                normalizeOptional(payload.getSeoTitleDe()),
+                normalizeOptional(payload.getSeoTitleFr())
+        );
+        Map<String, String> seoTitles = new LinkedHashMap<>();
+        seoTitles.put("it", firstNonBlank(normalizeOptional(payload.getSeoTitleIt()), fallbackSeoTitle));
+        seoTitles.put("en", firstNonBlank(normalizeOptional(payload.getSeoTitleEn()), fallbackSeoTitle));
+        seoTitles.put("de", firstNonBlank(normalizeOptional(payload.getSeoTitleDe()), fallbackSeoTitle));
+        seoTitles.put("fr", firstNonBlank(normalizeOptional(payload.getSeoTitleFr()), fallbackSeoTitle));
+
+        String fallbackSeoDescription = firstNonBlank(
+                normalizeOptional(payload.getSeoDescription()),
+                normalizeOptional(payload.getSeoDescriptionIt()),
+                normalizeOptional(payload.getSeoDescriptionEn()),
+                normalizeOptional(payload.getSeoDescriptionDe()),
+                normalizeOptional(payload.getSeoDescriptionFr())
+        );
+        Map<String, String> seoDescriptions = new LinkedHashMap<>();
+        seoDescriptions.put("it", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionIt()), fallbackSeoDescription), "Italian"));
+        seoDescriptions.put("en", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionEn()), fallbackSeoDescription), "English"));
+        seoDescriptions.put("de", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionDe()), fallbackSeoDescription), "German"));
+        seoDescriptions.put("fr", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionFr()), fallbackSeoDescription), "French"));
+
+        return new LocalizedProductContent(
+                names.get("it"),
+                firstNonBlank(excerpts.get("it"), fallbackExcerpt),
+                firstNonBlank(descriptions.get("it"), fallbackDescription),
+                firstNonBlank(seoTitles.get("it"), fallbackSeoTitle),
+                firstNonBlank(seoDescriptions.get("it"), fallbackSeoDescription),
+                names,
+                excerpts,
+                descriptions,
+                seoTitles,
+                seoDescriptions
+        );
+    }
+
     private void ensureSlugAvailable(String slug, UUID currentProductId) {
         shopProductRepository.findBySlugIgnoreCase(slug).ifPresent(existing -> {
             if (currentProductId == null || !existing.getId().equals(currentProductId)) {
@@ -547,6 +696,39 @@ public class AdminShopProductControllerService {
         return normalized.isBlank() ? null : normalized;
     }
 
+    private String normalizeRichTextOptional(String value) {
+        String normalized = normalizeOptional(value);
+        if (normalized == null) {
+            return null;
+        }
+
+        String sanitized = Jsoup.clean(
+                normalized,
+                "",
+                PRODUCT_DESCRIPTION_SAFELIST,
+                new Document.OutputSettings().prettyPrint(false)
+        ).trim();
+
+        if (sanitized.isBlank()) {
+            return null;
+        }
+
+        String plainText = Jsoup.parse(sanitized).text();
+        return plainText != null && !plainText.trim().isEmpty() ? sanitized : null;
+    }
+
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
+
     private String normalizeAndValidateSlug(String slug, String fallbackName) {
         String source = normalizeOptional(slug);
         if (source == null) {
@@ -575,10 +757,20 @@ public class AdminShopProductControllerService {
         return normalized.toUpperCase(Locale.ROOT);
     }
 
+    private String validateSeoDescriptionLength(String value, String languageLabel) {
+        if (value != null && value.length() > 160) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, languageLabel + " SEO description must be at most 160 characters");
+        }
+        return value;
+    }
+
     private void validateModelUpload(MultipartFile file) {
         if (file == null || file.isEmpty()) {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "3D model file is required");
         }
+        if (maxModelFileSizeBytes > 0 && file.getSize() > maxModelFileSizeBytes) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "3D model file exceeds size limit");
+        }
         String extension = resolveExtension(sanitizeOriginalFilename(file.getOriginalFilename()));
         if (!SUPPORTED_MODEL_EXTENSIONS.contains(extension)) {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Unsupported 3D model type. Allowed: stl, 3mf");
@@ -683,4 +875,18 @@ public class AdminShopProductControllerService {
 
     public record ProductModelDownload(Path path, String filename, String mimeType) {
     }
+
+    private record LocalizedProductContent(
+            String defaultName,
+            String defaultExcerpt,
+            String defaultDescription,
+            String defaultSeoTitle,
+            String defaultSeoDescription,
+            Map<String, String> names,
+            Map<String, String> excerpts,
+            Map<String, String> descriptions,
+            Map<String, String> seoTitles,
+            Map<String, String> seoDescriptions
+    ) {
+    }
 }

backend/src/main/java/com/printcalculator/service/media/MediaFfmpegService.java

@@ -29,13 +29,18 @@ public class MediaFfmpegService {
             "WEBP", List.of("libwebp", "webp"),
             "AVIF", List.of("libaom-av1", "librav1e", "libsvtav1")
     );
+    private static final Map<String, List<String>> REQUIRED_MUXERS = Map.of(
+            "AVIF", List.of("avif")
+    );
 
     private final String ffmpegExecutable;
     private final Set<String> availableEncoders;
+    private final Set<String> availableMuxers;
 
     public MediaFfmpegService(@Value("${media.ffmpeg.path:ffmpeg}") String ffmpegPath) {
         this.ffmpegExecutable = resolveExecutable(ffmpegPath);
         this.availableEncoders = Collections.unmodifiableSet(loadAvailableEncoders());
+        this.availableMuxers = Collections.unmodifiableSet(loadAvailableMuxers());
     }
 
     public void generateVariant(Path source, Path target, int widthPx, int heightPx, String format) throws IOException {
@@ -47,9 +52,13 @@ public class MediaFfmpegService {
         Path targetPath = sanitizeMediaPath(target, "target", false);
         Files.createDirectories(targetPath.getParent());
 
-        String encoder = resolveEncoder(format);
+        String normalizedFormat = normalizeFormat(format);
+        String encoder = resolveEncoder(normalizedFormat);
         if (encoder == null) {
-            throw new IOException("FFmpeg encoder not available for media format " + format + ".");
+            throw new IOException("FFmpeg encoder not available for media format " + normalizedFormat + ".");
+        }
+        if (!hasRequiredMuxer(normalizedFormat)) {
+            throw new IOException("FFmpeg muxer not available for media format " + normalizedFormat + ".");
         }
 
         List<String> command = new ArrayList<>();
@@ -66,7 +75,7 @@ public class MediaFfmpegService {
         command.add("1");
         command.add("-an");
 
-        switch (format) {
+        switch (normalizedFormat) {
             case "JPEG" -> {
                 command.add("-c:v");
                 command.add(encoder);
@@ -86,8 +95,10 @@ public class MediaFfmpegService {
                 command.add("30");
                 command.add("-b:v");
                 command.add("0");
+                command.add("-f");
+                command.add("avif");
             }
-            default -> throw new IllegalArgumentException("Unsupported media format: " + format);
+            default -> throw new IllegalArgumentException("Unsupported media format: " + normalizedFormat);
         }
 
         command.add(targetPath.toString());
@@ -112,14 +123,16 @@ public class MediaFfmpegService {
     }
 
     public boolean canEncode(String format) {
-        return resolveEncoder(format) != null;
+        String normalizedFormat = normalizeFormat(format);
+        return resolveEncoder(normalizedFormat) != null && hasRequiredMuxer(normalizedFormat);
     }
 
     private String resolveEncoder(String format) {
-        if (format == null) {
+        String normalizedFormat = normalizeFormat(format);
+        if (normalizedFormat == null) {
             return null;
         }
-        List<String> candidates = ENCODER_CANDIDATES.get(format.trim().toUpperCase(Locale.ROOT));
+        List<String> candidates = ENCODER_CANDIDATES.get(normalizedFormat);
         if (candidates == null) {
             return null;
         }
@@ -129,6 +142,21 @@ public class MediaFfmpegService {
                 .orElse(null);
     }
 
+    private boolean hasRequiredMuxer(String format) {
+        List<String> requiredMuxers = REQUIRED_MUXERS.get(format);
+        if (requiredMuxers == null || requiredMuxers.isEmpty()) {
+            return true;
+        }
+        return requiredMuxers.stream().anyMatch(availableMuxers::contains);
+    }
+
+    private String normalizeFormat(String format) {
+        if (format == null) {
+            return null;
+        }
+        return format.trim().toUpperCase(Locale.ROOT);
+    }
+
     private Set<String> loadAvailableEncoders() {
         List<String> command = List.of(ffmpegExecutable, "-hide_banner", "-encoders");
         try {
@@ -154,6 +182,31 @@ public class MediaFfmpegService {
         }
     }
 
+    private Set<String> loadAvailableMuxers() {
+        List<String> command = List.of(ffmpegExecutable, "-hide_banner", "-muxers");
+        try {
+            Process process = startValidatedProcess(command);
+            String output;
+            try (InputStream processStream = process.getInputStream()) {
+                output = new String(processStream.readAllBytes(), StandardCharsets.UTF_8);
+            }
+
+            int exitCode = process.waitFor();
+            if (exitCode != 0) {
+                logger.warn("Unable to inspect FFmpeg muxers. Falling back to empty muxer list.");
+                return Set.of();
+            }
+            return parseAvailableMuxers(output);
+        } catch (Exception e) {
+            logger.warn(
+                    "Unable to inspect FFmpeg muxers for executable '{}'. Falling back to empty muxer list. {}",
+                    ffmpegExecutable,
+                    e.getMessage()
+            );
+            return Set.of();
+        }
+    }
+
     private Process startValidatedProcess(List<String> command) throws IOException {
         // nosemgrep: java.lang.security.audit.command-injection-process-builder.command-injection-process-builder
         return new ProcessBuilder(List.copyOf(command))
@@ -264,6 +317,26 @@ public class MediaFfmpegService {
         return encoders;
     }
 
+    private Set<String> parseAvailableMuxers(String output) {
+        if (output == null || output.isBlank()) {
+            return Set.of();
+        }
+
+        Set<String> muxers = new LinkedHashSet<>();
+        for (String line : output.split("\\R")) {
+            String trimmed = line.trim();
+            if (trimmed.isBlank() || trimmed.startsWith("--") || trimmed.startsWith("Muxers:")) {
+                continue;
+            }
+            String[] parts = trimmed.split("\\s+", 3);
+            if (parts.length < 2) {
+                continue;
+            }
+            muxers.add(parts[1]);
+        }
+        return muxers;
+    }
+
     private String truncate(String output) {
         if (output == null || output.isBlank()) {
             return "";

backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java

@@ -18,15 +18,15 @@ public class MediaStorageService {
     private final Path originalRootLocation;
     private final Path publicRootLocation;
     private final Path privateRootLocation;
-    private final String publicBaseUrl;
+    private final String frontendBaseUrl;
 
     public MediaStorageService(@Value("${media.storage.root:storage_media}") String storageRoot,
-                               @Value("${media.public.base-url:http://localhost:8080/media}") String publicBaseUrl) {
+                               @Value("${app.frontend.base-url:${APP_FRONTEND_BASE_URL:http://localhost:8081}}") String frontendBaseUrl) {
         this.normalizedRootLocation = Paths.get(storageRoot).toAbsolutePath().normalize();
         this.originalRootLocation = normalizedRootLocation.resolve("original").normalize();
         this.publicRootLocation = normalizedRootLocation.resolve("public").normalize();
         this.privateRootLocation = normalizedRootLocation.resolve("private").normalize();
-        this.publicBaseUrl = publicBaseUrl;
+        this.frontendBaseUrl = frontendBaseUrl;
         init();
     }
 
@@ -73,11 +73,12 @@ public class MediaStorageService {
         if (storageKey == null || storageKey.isBlank()) {
             return null;
         }
+        String mediaBaseUrl = buildMediaBaseUrl();
         String normalizedKey = storageKey.startsWith("/") ? storageKey.substring(1) : storageKey;
-        if (publicBaseUrl.endsWith("/")) {
-            return publicBaseUrl + normalizedKey;
+        if (mediaBaseUrl.endsWith("/")) {
+            return mediaBaseUrl + normalizedKey;
         }
-        return publicBaseUrl + "/" + normalizedKey;
+        return mediaBaseUrl + "/" + normalizedKey;
     }
 
     private void copy(Path source, Path destination) throws IOException {
@@ -127,4 +128,18 @@ public class MediaStorageService {
         }
         return visibility.trim().toUpperCase(Locale.ROOT);
     }
+
+    private String buildMediaBaseUrl() {
+        String normalized = frontendBaseUrl != null ? frontendBaseUrl.trim() : "";
+        if (normalized.contains("localhost")){
+            return "http://localhost:8081";
+        }
+        if (normalized.isBlank()) {
+            normalized = "http://localhost:8081";
+        }
+        if (normalized.endsWith("/")) {
+            normalized = normalized.substring(0, normalized.length() - 1);
+        }
+        return normalized + "/media";
+    }
 }

backend/src/main/java/com/printcalculator/service/shop/PublicShopCatalogService.java

@@ -9,10 +9,12 @@ import com.printcalculator.dto.ShopProductDetailDto;
 import com.printcalculator.dto.ShopProductModelDto;
 import com.printcalculator.dto.ShopProductSummaryDto;
 import com.printcalculator.dto.ShopProductVariantOptionDto;
+import com.printcalculator.entity.FilamentVariant;
 import com.printcalculator.entity.ShopCategory;
 import com.printcalculator.entity.ShopProduct;
 import com.printcalculator.entity.ShopProductModelAsset;
 import com.printcalculator.entity.ShopProductVariant;
+import com.printcalculator.repository.FilamentVariantRepository;
 import com.printcalculator.repository.ShopCategoryRepository;
 import com.printcalculator.repository.ShopProductModelAssetRepository;
 import com.printcalculator.repository.ShopProductRepository;
@@ -31,6 +33,7 @@ import java.util.Collection;
 import java.util.Comparator;
 import java.util.LinkedHashMap;
 import java.util.List;
+import java.util.Locale;
 import java.util.Map;
 import java.util.Objects;
 import java.util.UUID;
@@ -46,6 +49,7 @@ public class PublicShopCatalogService {
     private final ShopProductRepository shopProductRepository;
     private final ShopProductVariantRepository shopProductVariantRepository;
     private final ShopProductModelAssetRepository shopProductModelAssetRepository;
+    private final FilamentVariantRepository filamentVariantRepository;
     private final PublicMediaQueryService publicMediaQueryService;
     private final ShopStorageService shopStorageService;
 
@@ -53,12 +57,14 @@ public class PublicShopCatalogService {
                                     ShopProductRepository shopProductRepository,
                                     ShopProductVariantRepository shopProductVariantRepository,
                                     ShopProductModelAssetRepository shopProductModelAssetRepository,
+                                    FilamentVariantRepository filamentVariantRepository,
                                     PublicMediaQueryService publicMediaQueryService,
                                     ShopStorageService shopStorageService) {
         this.shopCategoryRepository = shopCategoryRepository;
         this.shopProductRepository = shopProductRepository;
         this.shopProductVariantRepository = shopProductVariantRepository;
         this.shopProductModelAssetRepository = shopProductModelAssetRepository;
+        this.filamentVariantRepository = filamentVariantRepository;
         this.publicMediaQueryService = publicMediaQueryService;
         this.shopStorageService = shopStorageService;
     }
@@ -99,7 +105,12 @@ public class PublicShopCatalogService {
         List<ShopProductSummaryDto> products = productContext.entries().stream()
                 .filter(entry -> allowedCategoryIds.contains(entry.product().getCategory().getId()))
                 .filter(entry -> !Boolean.TRUE.equals(featuredOnly) || Boolean.TRUE.equals(entry.product().getIsFeatured()))
-                .map(entry -> toProductSummaryDto(entry, productContext.productMediaBySlug()))
+                .map(entry -> toProductSummaryDto(
+                        entry,
+                        productContext.productMediaBySlug(),
+                        productContext.variantColorHexByMaterialAndColor(),
+                        language
+                ))
                 .toList();
 
         ShopCategoryDetailDto selectedCategoryDetail = selectedCategory != null
@@ -128,7 +139,12 @@ public class PublicShopCatalogService {
             throw new ResponseStatusException(HttpStatus.NOT_FOUND, "Product not found");
         }
 
-        return toProductDetailDto(entry, productContext.productMediaBySlug());
+        return toProductDetailDto(
+                entry,
+                productContext.productMediaBySlug(),
+                productContext.variantColorHexByMaterialAndColor(),
+                language
+        );
     }
 
     public ProductModelDownload getProductModelDownload(String slug) {
@@ -187,11 +203,32 @@ public class PublicShopCatalogService {
                 entries.stream().map(entry -> productMediaUsageKey(entry.product())).toList(),
                 language
         );
+        Map<String, String> variantColorHexByMaterialAndColor = buildFilamentVariantColorHexMap();
 
         Map<String, ProductEntry> entriesBySlug = entries.stream()
                 .collect(Collectors.toMap(entry -> entry.product().getSlug(), entry -> entry, (left, right) -> left, LinkedHashMap::new));
 
-        return new PublicProductContext(entries, entriesBySlug, productMediaBySlug);
+        return new PublicProductContext(entries, entriesBySlug, productMediaBySlug, variantColorHexByMaterialAndColor);
+    }
+
+    private Map<String, String> buildFilamentVariantColorHexMap() {
+        Map<String, String> colorsByMaterialAndColor = new LinkedHashMap<>();
+        for (FilamentVariant variant : filamentVariantRepository.findByIsActiveTrue()) {
+            String materialCode = variant.getFilamentMaterialType() != null
+                    ? variant.getFilamentMaterialType().getMaterialCode()
+                    : null;
+            String key = toMaterialAndColorKey(materialCode, variant.getColorName());
+            if (key == null) {
+                continue;
+            }
+
+            String colorHex = trimToNull(variant.getColorHex());
+            if (colorHex == null) {
+                continue;
+            }
+            colorsByMaterialAndColor.putIfAbsent(key, colorHex);
+        }
+        return colorsByMaterialAndColor;
     }
 
     private List<ProductEntry> loadPublicProducts(Collection<UUID> activeCategoryIds) {
@@ -348,13 +385,15 @@ public class PublicShopCatalogService {
     }
 
     private ShopProductSummaryDto toProductSummaryDto(ProductEntry entry,
-                                                      Map<String, List<PublicMediaUsageDto>> productMediaBySlug) {
+                                                      Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+                                                      Map<String, String> variantColorHexByMaterialAndColor,
+                                                      String language) {
         List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
         return new ShopProductSummaryDto(
                 entry.product().getId(),
                 entry.product().getSlug(),
-                entry.product().getName(),
-                entry.product().getExcerpt(),
+                entry.product().getNameForLanguage(language),
+                entry.product().getExcerptForLanguage(language),
                 entry.product().getIsFeatured(),
                 entry.product().getSortOrder(),
                 new ShopCategoryRefDto(
@@ -364,25 +403,29 @@ public class PublicShopCatalogService {
                 ),
                 resolvePriceFrom(entry.variants()),
                 resolvePriceTo(entry.variants()),
-                toVariantDto(entry.defaultVariant(), entry.defaultVariant()),
+                toVariantDto(entry.defaultVariant(), entry.defaultVariant(), variantColorHexByMaterialAndColor),
                 selectPrimaryMedia(images),
                 toProductModelDto(entry)
         );
     }
 
     private ShopProductDetailDto toProductDetailDto(ProductEntry entry,
-                                                    Map<String, List<PublicMediaUsageDto>> productMediaBySlug) {
+                                                    Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+                                                    Map<String, String> variantColorHexByMaterialAndColor,
+                                                    String language) {
         List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
+        String localizedSeoTitle = entry.product().getSeoTitleForLanguage(language);
+        String localizedSeoDescription = entry.product().getSeoDescriptionForLanguage(language);
         return new ShopProductDetailDto(
                 entry.product().getId(),
                 entry.product().getSlug(),
-                entry.product().getName(),
-                entry.product().getExcerpt(),
-                entry.product().getDescription(),
-                entry.product().getSeoTitle(),
-                entry.product().getSeoDescription(),
-                entry.product().getOgTitle(),
-                entry.product().getOgDescription(),
+                entry.product().getNameForLanguage(language),
+                entry.product().getExcerptForLanguage(language),
+                entry.product().getDescriptionForLanguage(language),
+                localizedSeoTitle,
+                localizedSeoDescription,
+                localizedSeoTitle,
+                localizedSeoDescription,
                 entry.product().getIndexable(),
                 entry.product().getIsFeatured(),
                 entry.product().getSortOrder(),
@@ -394,9 +437,9 @@ public class PublicShopCatalogService {
                 buildCategoryBreadcrumbs(entry.product().getCategory()),
                 resolvePriceFrom(entry.variants()),
                 resolvePriceTo(entry.variants()),
-                toVariantDto(entry.defaultVariant(), entry.defaultVariant()),
+                toVariantDto(entry.defaultVariant(), entry.defaultVariant(), variantColorHexByMaterialAndColor),
                 entry.variants().stream()
-                        .map(variant -> toVariantDto(variant, entry.defaultVariant()))
+                        .map(variant -> toVariantDto(variant, entry.defaultVariant(), variantColorHexByMaterialAndColor))
                         .toList(),
                 selectPrimaryMedia(images),
                 images,
@@ -404,21 +447,61 @@ public class PublicShopCatalogService {
         );
     }
 
-    private ShopProductVariantOptionDto toVariantDto(ShopProductVariant variant, ShopProductVariant defaultVariant) {
+    private ShopProductVariantOptionDto toVariantDto(ShopProductVariant variant,
+                                                     ShopProductVariant defaultVariant,
+                                                     Map<String, String> variantColorHexByMaterialAndColor) {
         if (variant == null) {
             return null;
         }
+        String colorHex = trimToNull(variant.getColorHex());
+        if (colorHex == null) {
+            String key = toMaterialAndColorKey(variant.getInternalMaterialCode(), variant.getColorName());
+            colorHex = key != null ? variantColorHexByMaterialAndColor.get(key) : null;
+        }
         return new ShopProductVariantOptionDto(
                 variant.getId(),
                 variant.getSku(),
                 variant.getVariantLabel(),
                 variant.getColorName(),
-                variant.getColorHex(),
+                colorHex,
                 variant.getPriceChf(),
                 defaultVariant != null && Objects.equals(defaultVariant.getId(), variant.getId())
         );
     }
 
+    private String toMaterialAndColorKey(String materialCode, String colorName) {
+        String normalizedMaterialCode = normalizeMaterialCode(materialCode);
+        String normalizedColorName = normalizeColorName(colorName);
+        if (normalizedMaterialCode == null || normalizedColorName == null) {
+            return null;
+        }
+        return normalizedMaterialCode + "|" + normalizedColorName;
+    }
+
+    private String normalizeMaterialCode(String materialCode) {
+        String raw = trimToNull(materialCode);
+        if (raw == null) {
+            return null;
+        }
+        return raw.toUpperCase(Locale.ROOT);
+    }
+
+    private String normalizeColorName(String colorName) {
+        String raw = trimToNull(colorName);
+        if (raw == null) {
+            return null;
+        }
+        return raw.toLowerCase(Locale.ROOT);
+    }
+
+    private String trimToNull(String value) {
+        String raw = String.valueOf(value == null ? "" : value).trim();
+        if (raw.isEmpty()) {
+            return null;
+        }
+        return raw;
+    }
+
     private ShopProductModelDto toProductModelDto(ProductEntry entry) {
         if (entry.modelAsset() == null) {
             return null;
@@ -490,7 +573,8 @@ public class PublicShopCatalogService {
     private record PublicProductContext(
             List<ProductEntry> entries,
             Map<String, ProductEntry> entriesBySlug,
-            Map<String, List<PublicMediaUsageDto>> productMediaBySlug
+            Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+            Map<String, String> variantColorHexByMaterialAndColor
     ) {
     }
 

backend/src/main/java/com/printcalculator/service/shop/ShopSitemapService.java

@@ -0,0 +1,244 @@
+package com.printcalculator.service.shop;
+
+import com.printcalculator.entity.ShopCategory;
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.net.URLEncoder;
+import java.nio.charset.StandardCharsets;
+import java.text.Normalizer;
+import java.time.Clock;
+import java.time.Duration;
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.time.format.DateTimeFormatter;
+import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Set;
+import java.util.UUID;
+import java.util.stream.Collectors;
+
+@Service
+@Transactional(readOnly = true)
+public class ShopSitemapService {
+    private static final List<String> SUPPORTED_LANGUAGES = ShopProduct.SUPPORTED_LANGUAGES;
+    private static final String DEFAULT_LANGUAGE = "it";
+    private static final DateTimeFormatter LASTMOD_FORMATTER = DateTimeFormatter.ISO_OFFSET_DATE_TIME;
+
+    private final ShopCategoryRepository shopCategoryRepository;
+    private final ShopProductRepository shopProductRepository;
+    private final String frontendBaseUrl;
+    private final Duration cacheTtl;
+    private final Clock clock;
+
+    private volatile CachedSitemap cachedSitemap;
+
+    @Autowired
+    public ShopSitemapService(ShopCategoryRepository shopCategoryRepository,
+                              ShopProductRepository shopProductRepository,
+                              @Value("${app.frontend.base-url:http://localhost:4200}") String frontendBaseUrl,
+                              @Value("${app.sitemap.shop.cache-seconds:3600}") long cacheSeconds) {
+        this(shopCategoryRepository, shopProductRepository, frontendBaseUrl, cacheSeconds, Clock.systemUTC());
+    }
+
+    ShopSitemapService(ShopCategoryRepository shopCategoryRepository,
+                       ShopProductRepository shopProductRepository,
+                       String frontendBaseUrl,
+                       long cacheSeconds,
+                       Clock clock) {
+        this.shopCategoryRepository = shopCategoryRepository;
+        this.shopProductRepository = shopProductRepository;
+        this.frontendBaseUrl = normalizeBaseUrl(frontendBaseUrl);
+        this.cacheTtl = cacheSeconds > 0 ? Duration.ofSeconds(cacheSeconds) : Duration.ZERO;
+        this.clock = clock;
+    }
+
+    public String getShopSitemapXml() {
+        Instant now = Instant.now(clock);
+        CachedSitemap current = cachedSitemap;
+        if (current != null && now.isBefore(current.expiresAt())) {
+            return current.xml();
+        }
+
+        synchronized (this) {
+            current = cachedSitemap;
+            now = Instant.now(clock);
+            if (current != null && now.isBefore(current.expiresAt())) {
+                return current.xml();
+            }
+
+            String xml = buildSitemapXml();
+            Instant expiresAt = cacheTtl.isZero() ? now : now.plus(cacheTtl);
+            cachedSitemap = new CachedSitemap(xml, expiresAt);
+            return xml;
+        }
+    }
+
+    private String buildSitemapXml() {
+        List<ShopCategory> activeCategories = shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc();
+        Set<UUID> activeCategoryIds = activeCategories.stream()
+                .map(ShopCategory::getId)
+                .collect(Collectors.toSet());
+
+        List<ShopProduct> activeProducts = shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc();
+
+        StringBuilder xml = new StringBuilder(16_384);
+        xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
+        xml.append("<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\" ");
+        xml.append("xmlns:xhtml=\"http://www.w3.org/1999/xhtml\">\n");
+
+        appendCategoryUrls(xml, activeCategories);
+        appendProductUrls(xml, activeProducts, activeCategoryIds);
+
+        xml.append("</urlset>\n");
+        return xml.toString();
+    }
+
+    private void appendCategoryUrls(StringBuilder xml, List<ShopCategory> categories) {
+        for (ShopCategory category : categories) {
+            if (!Boolean.TRUE.equals(category.getIndexable())) {
+                continue;
+            }
+
+            String encodedSlug = pathEncodeSegment(category.getSlug());
+            Map<String, String> hrefByLanguage = new LinkedHashMap<>();
+            for (String language : SUPPORTED_LANGUAGES) {
+                hrefByLanguage.put(language, frontendBaseUrl + "/" + language + "/shop/" + encodedSlug);
+            }
+
+            appendUrlEntry(xml, hrefByLanguage, category.getUpdatedAt());
+        }
+    }
+
+    private void appendProductUrls(StringBuilder xml,
+                                   List<ShopProduct> products,
+                                   Set<UUID> activeCategoryIds) {
+        for (ShopProduct product : products) {
+            if (!Boolean.TRUE.equals(product.getIndexable())) {
+                continue;
+            }
+            if (product.getCategory() == null || !activeCategoryIds.contains(product.getCategory().getId())) {
+                continue;
+            }
+
+            Map<String, String> hrefByLanguage = new LinkedHashMap<>();
+            for (String language : SUPPORTED_LANGUAGES) {
+                String publicSegment = localizedProductPathSegment(product, language);
+                hrefByLanguage.put(language, frontendBaseUrl + "/" + language + "/shop/p/" + pathEncodeSegment(publicSegment));
+            }
+
+            appendUrlEntry(xml, hrefByLanguage, product.getUpdatedAt());
+        }
+    }
+
+    private void appendUrlEntry(StringBuilder xml,
+                                Map<String, String> hrefByLanguage,
+                                OffsetDateTime lastmod) {
+        String defaultHref = hrefByLanguage.get(DEFAULT_LANGUAGE);
+        if (defaultHref == null || defaultHref.isBlank()) {
+            return;
+        }
+
+        xml.append("  <url>\n");
+        xml.append("    <loc>").append(xmlEscape(defaultHref)).append("</loc>\n");
+
+        for (String language : SUPPORTED_LANGUAGES) {
+            String href = hrefByLanguage.get(language);
+            if (href == null || href.isBlank()) {
+                continue;
+            }
+            xml.append("    <xhtml:link rel=\"alternate\" hreflang=\"")
+                    .append(language)
+                    .append("\" href=\"")
+                    .append(xmlEscape(href))
+                    .append("\" />\n");
+        }
+
+        xml.append("    <xhtml:link rel=\"alternate\" hreflang=\"x-default\" href=\"")
+                .append(xmlEscape(defaultHref))
+                .append("\" />\n");
+
+        if (lastmod != null) {
+            xml.append("    <lastmod>").append(LASTMOD_FORMATTER.format(lastmod)).append("</lastmod>\n");
+        }
+
+        xml.append("  </url>\n");
+    }
+
+    private String localizedProductPathSegment(ShopProduct product, String language) {
+        String localizedName = product.getNameForLanguage(language);
+        String idPrefix = productIdPrefix(product.getId());
+        String tail = firstNonBlank(slugify(localizedName), slugify(product.getSlug()), "product");
+        return idPrefix.isBlank() ? tail : idPrefix + "-" + tail;
+    }
+
+    private String productIdPrefix(UUID productId) {
+        if (productId == null) {
+            return "";
+        }
+        String raw = productId.toString().trim().toLowerCase(Locale.ROOT);
+        int dashIndex = raw.indexOf('-');
+        if (dashIndex > 0) {
+            return raw.substring(0, dashIndex);
+        }
+        return raw.length() >= 8 ? raw.substring(0, 8) : raw;
+    }
+
+    static String slugify(String rawValue) {
+        String safeValue = rawValue == null ? "" : rawValue;
+        String normalized = Normalizer.normalize(safeValue, Normalizer.Form.NFD)
+                .replaceAll("\\p{M}+", "")
+                .toLowerCase(Locale.ROOT)
+                .replaceAll("[^a-z0-9]+", "-")
+                .replaceAll("^-+|-+$", "")
+                .replaceAll("-{2,}", "-");
+        return normalized;
+    }
+
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
+
+    private String pathEncodeSegment(String rawSegment) {
+        String safeSegment = rawSegment == null ? "" : rawSegment;
+        return URLEncoder.encode(safeSegment, StandardCharsets.UTF_8).replace("+", "%20");
+    }
+
+    private String xmlEscape(String value) {
+        return String.valueOf(value)
+                .replace("&", "&amp;")
+                .replace("<", "&lt;")
+                .replace(">", "&gt;")
+                .replace("\"", "&quot;")
+                .replace("'", "&apos;");
+    }
+
+    private String normalizeBaseUrl(String baseUrl) {
+        String normalized = (baseUrl == null ? "" : baseUrl).trim();
+        if (normalized.isBlank()) {
+            return "http://localhost:4200";
+        }
+        while (normalized.endsWith("/")) {
+            normalized = normalized.substring(0, normalized.length() - 1);
+        }
+        return normalized;
+    }
+
+    private record CachedSitemap(String xml, Instant expiresAt) {
+    }
+}

backend/src/main/resources/application-local.properties

@@ -9,5 +9,4 @@ admin.session.ttl-minutes=480
 
 # Local media storage served by a local static server on port 8081.
 media.storage.root=/Users/joe/IdeaProjects/print-calculator/storage_media
-media.public.base-url=http://localhost:8081
 media.ffmpeg.path=ffmpeg

backend/src/main/resources/application.properties

@@ -28,9 +28,9 @@ clamav.enabled=${CLAMAV_ENABLED:false}
 
 # Media configuration
 media.storage.root=${MEDIA_STORAGE_ROOT:storage_media}
-media.public.base-url=${MEDIA_PUBLIC_BASE_URL:http://localhost:8080/media}
 media.ffmpeg.path=${MEDIA_FFMPEG_PATH:ffmpeg}
 media.upload.max-file-size-bytes=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:26214400}
+shop.model.max-file-size-bytes=${SHOP_MODEL_MAX_FILE_SIZE_BYTES:104857600}
 shop.storage.root=${SHOP_STORAGE_ROOT:storage_shop}
 shop.cart.cookie.ttl-days=${SHOP_CART_COOKIE_TTL_DAYS:30}
 shop.cart.cookie.secure=${SHOP_CART_COOKIE_SECURE:false}
@@ -56,6 +56,7 @@ app.mail.contact-request.admin.enabled=${APP_MAIL_CONTACT_REQUEST_ADMIN_ENABLED:
 app.mail.contact-request.admin.address=${APP_MAIL_CONTACT_REQUEST_ADMIN_ADDRESS:info@3d-fab.ch}
 app.mail.contact-request.customer.enabled=${APP_MAIL_CONTACT_REQUEST_CUSTOMER_ENABLED:true}
 app.frontend.base-url=${APP_FRONTEND_BASE_URL:http://localhost:4200}
+app.sitemap.shop.cache-seconds=${APP_SITEMAP_SHOP_CACHE_SECONDS:3600}
 
 # Admin back-office authentication
 admin.password=${ADMIN_PASSWORD}

backend/src/test/java/com/printcalculator/entity/ShopProductTest.java

@@ -0,0 +1,48 @@
+package com.printcalculator.entity;
+
+import org.junit.jupiter.api.Test;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+
+class ShopProductTest {
+
+    @Test
+    void localizedAccessorsShouldReturnLanguageSpecificValues() {
+        ShopProduct product = new ShopProduct();
+        product.setName("Desk Cable Clip");
+        product.setNameIt("Fermacavo da scrivania");
+        product.setNameEn("Desk Cable Clip");
+        product.setNameDe("Schreibtisch-Kabelclip");
+        product.setNameFr("Clip de cable de bureau");
+        product.setExcerpt("Legacy excerpt");
+        product.setExcerptIt("Clip compatta per i cavi sulla scrivania.");
+        product.setExcerptEn("Compact clip to keep desk cables in place.");
+        product.setExcerptDe("Kompakter Clip fur ordentliche Kabel auf dem Schreibtisch.");
+        product.setExcerptFr("Clip compact pour garder les cables du bureau en ordre.");
+        product.setDescription("Legacy description");
+        product.setDescriptionIt("Supporto con base stabile e passaggio cavi frontale.");
+        product.setDescriptionEn("Stable desk clip with front cable routing.");
+        product.setDescriptionDe("Stabiler Tischclip mit frontaler Kabelfuhrung.");
+        product.setDescriptionFr("Clip de bureau stable avec passage frontal des cables.");
+
+        assertEquals("Fermacavo da scrivania", product.getNameForLanguage("it"));
+        assertEquals("Desk Cable Clip", product.getNameForLanguage("en"));
+        assertEquals("Schreibtisch-Kabelclip", product.getNameForLanguage("de"));
+        assertEquals("Clip de cable de bureau", product.getNameForLanguage("fr"));
+        assertEquals("Compact clip to keep desk cables in place.", product.getExcerptForLanguage("en"));
+        assertEquals("Clip compact pour garder les cables du bureau en ordre.", product.getExcerptForLanguage("fr"));
+        assertEquals("Stabiler Tischclip mit frontaler Kabelfuhrung.", product.getDescriptionForLanguage("de"));
+    }
+
+    @Test
+    void localizedAccessorsShouldFallbackToLegacyValues() {
+        ShopProduct product = new ShopProduct();
+        product.setName("Desk Cable Clip");
+        product.setExcerpt("Compact desk cable clip.");
+        product.setDescription("Stable clip with front cable channel.");
+
+        assertEquals("Desk Cable Clip", product.getNameForLanguage("it"));
+        assertEquals("Compact desk cable clip.", product.getExcerptForLanguage("de"));
+        assertEquals("Stable clip with front cable channel.", product.getDescriptionForLanguage("fr-CH"));
+    }
+}

backend/src/test/java/com/printcalculator/service/OrderServiceTest.java

@@ -114,15 +114,15 @@ class OrderServiceTest {
 
         Path sourceDir = Path.of("storage_quotes").toAbsolutePath().normalize().resolve(sessionId.toString());
         Files.createDirectories(sourceDir);
-        Path sourceFile = sourceDir.resolve("shop-demo.stl");
-        Files.writeString(sourceFile, "solid demo\nendsolid demo\n", StandardCharsets.UTF_8);
+        Path sourceFile = sourceDir.resolve("shop-product.stl");
+        Files.writeString(sourceFile, "solid product\nendsolid product\n", StandardCharsets.UTF_8);
 
         QuoteLineItem qItem = new QuoteLineItem();
         qItem.setId(UUID.randomUUID());
         qItem.setQuoteSession(session);
         qItem.setStatus("READY");
         qItem.setLineItemType("SHOP_PRODUCT");
-        qItem.setOriginalFilename("shop-demo.stl");
+        qItem.setOriginalFilename("shop-product.stl");
         qItem.setDisplayName("Desk Cable Clip");
         qItem.setQuantity(2);
         qItem.setColorCode("Coral Red");

backend/src/test/java/com/printcalculator/service/admin/AdminMediaControllerServiceTest.java

@@ -87,7 +87,7 @@ class AdminMediaControllerServiceTest {
         storageRoot = tempDir.resolve("storage_media");
         MediaStorageService mediaStorageService = new MediaStorageService(
                 storageRoot.toString(),
-                "https://cdn.example/media"
+                "https://cdn.example"
         );
 
         service = new AdminMediaControllerService(

backend/src/test/java/com/printcalculator/service/admin/AdminShopProductControllerServiceTest.java

@@ -0,0 +1,137 @@
+package com.printcalculator.service.admin;
+
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.entity.ShopProductModelAsset;
+import com.printcalculator.entity.ShopProductVariant;
+import com.printcalculator.repository.OrderItemRepository;
+import com.printcalculator.repository.QuoteLineItemRepository;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductModelAssetRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import com.printcalculator.repository.ShopProductVariantRepository;
+import com.printcalculator.service.SlicerService;
+import com.printcalculator.service.media.PublicMediaQueryService;
+import com.printcalculator.service.shop.ShopStorageService;
+import com.printcalculator.service.storage.ClamAVService;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InOrder;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.nio.file.Path;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.inOrder;
+import static org.mockito.Mockito.never;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+class AdminShopProductControllerServiceTest {
+
+    @Mock
+    private ShopProductRepository shopProductRepository;
+    @Mock
+    private ShopCategoryRepository shopCategoryRepository;
+    @Mock
+    private ShopProductVariantRepository shopProductVariantRepository;
+    @Mock
+    private ShopProductModelAssetRepository shopProductModelAssetRepository;
+    @Mock
+    private QuoteLineItemRepository quoteLineItemRepository;
+    @Mock
+    private OrderItemRepository orderItemRepository;
+    @Mock
+    private PublicMediaQueryService publicMediaQueryService;
+    @Mock
+    private AdminMediaControllerService adminMediaControllerService;
+    @Mock
+    private ShopStorageService shopStorageService;
+    @Mock
+    private SlicerService slicerService;
+    @Mock
+    private ClamAVService clamAVService;
+
+    private AdminShopProductControllerService service;
+
+    @BeforeEach
+    void setUp() {
+        service = new AdminShopProductControllerService(
+                shopProductRepository,
+                shopCategoryRepository,
+                shopProductVariantRepository,
+                shopProductModelAssetRepository,
+                quoteLineItemRepository,
+                orderItemRepository,
+                publicMediaQueryService,
+                adminMediaControllerService,
+                shopStorageService,
+                slicerService,
+                clamAVService,
+                104857600L
+        );
+    }
+
+    @Test
+    void deleteProduct_shouldDeleteManagedDependenciesBeforeDeletingProduct() {
+        UUID productId = UUID.randomUUID();
+        UUID variantId = UUID.randomUUID();
+
+        ShopProduct product = new ShopProduct();
+        product.setId(productId);
+
+        ShopProductVariant variant = new ShopProductVariant();
+        variant.setId(variantId);
+        variant.setProduct(product);
+
+        ShopProductModelAsset asset = new ShopProductModelAsset();
+        asset.setId(UUID.randomUUID());
+        asset.setProduct(product);
+        asset.setStoredRelativePath("products/" + productId + "/model.stl");
+
+        when(shopProductRepository.findById(productId)).thenReturn(Optional.of(product));
+        when(quoteLineItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(shopProductVariantRepository.findByProduct_IdOrderBySortOrderAscColorNameAsc(productId)).thenReturn(List.of(variant));
+        when(quoteLineItemRepository.existsByShopProductVariant_Id(variantId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProductVariant_Id(variantId)).thenReturn(false);
+        when(shopProductModelAssetRepository.findByProduct_Id(productId)).thenReturn(Optional.of(asset));
+        when(shopStorageService.resolveStoredProductPath(asset.getStoredRelativePath(), productId))
+                .thenReturn(Path.of("/tmp/shop-model.stl"));
+
+        service.deleteProduct(productId);
+
+        InOrder inOrder = inOrder(shopProductModelAssetRepository, shopProductVariantRepository, shopProductRepository);
+        inOrder.verify(shopProductModelAssetRepository).delete(asset);
+        inOrder.verify(shopProductVariantRepository).deleteAll(List.of(variant));
+        inOrder.verify(shopProductRepository).delete(product);
+
+        verify(shopStorageService).resolveStoredProductPath(asset.getStoredRelativePath(), productId);
+    }
+
+    @Test
+    void deleteProduct_shouldSkipDependencyDeletesWhenNothingIsAttached() {
+        UUID productId = UUID.randomUUID();
+
+        ShopProduct product = new ShopProduct();
+        product.setId(productId);
+
+        when(shopProductRepository.findById(productId)).thenReturn(Optional.of(product));
+        when(quoteLineItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(shopProductVariantRepository.findByProduct_IdOrderBySortOrderAscColorNameAsc(productId)).thenReturn(List.of());
+        when(shopProductModelAssetRepository.findByProduct_Id(productId)).thenReturn(Optional.empty());
+
+        service.deleteProduct(productId);
+
+        verify(shopProductRepository).delete(product);
+        verify(shopProductVariantRepository, never()).deleteAll(any());
+        verify(shopProductModelAssetRepository, never()).delete(any());
+    }
+}

backend/src/test/java/com/printcalculator/service/media/MediaFfmpegServiceTest.java

@@ -10,6 +10,7 @@ import java.nio.file.attribute.PosixFilePermission;
 import java.util.Set;
 
 import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertFalse;
 import static org.junit.jupiter.api.Assertions.assertTrue;
 import static org.junit.jupiter.api.Assertions.assertThrows;
 
@@ -80,6 +81,12 @@ class MediaFfmpegServiceTest {
                         EOF
                           exit 0
                         fi
+                        if [ "$1" = "-hide_banner" ] && [ "$2" = "-muxers" ]; then
+                          cat <<'EOF'
+                         E avif
+                        EOF
+                          exit 0
+                        fi
 
                         for arg in "$@"; do
                           if [ "$arg" = "-still-picture" ]; then
@@ -117,4 +124,42 @@ class MediaFfmpegServiceTest {
         assertTrue(Files.exists(target));
         assertEquals("ok", Files.readString(target));
     }
+
+    @Test
+    void canEncode_avifShouldRequireMuxerAvailability() throws Exception {
+        Path fakeFfmpeg = tempDir.resolve("fake-ffmpeg-no-avif-muxer.sh");
+        Files.writeString(
+                fakeFfmpeg,
+                """
+                        #!/bin/sh
+                        if [ "$1" = "-hide_banner" ] && [ "$2" = "-encoders" ]; then
+                          cat <<'EOF'
+                         V..... mjpeg
+                         V..... libaom-av1
+                        EOF
+                          exit 0
+                        fi
+                        if [ "$1" = "-hide_banner" ] && [ "$2" = "-muxers" ]; then
+                          cat <<'EOF'
+                         E mp4
+                        EOF
+                          exit 0
+                        fi
+                        exit 0
+                        """
+        );
+        Files.setPosixFilePermissions(
+                fakeFfmpeg,
+                Set.of(
+                        PosixFilePermission.OWNER_READ,
+                        PosixFilePermission.OWNER_WRITE,
+                        PosixFilePermission.OWNER_EXECUTE
+                )
+        );
+
+        MediaFfmpegService service = new MediaFfmpegService(fakeFfmpeg.toString());
+
+        assertTrue(service.canEncode("JPEG"));
+        assertFalse(service.canEncode("AVIF"));
+    }
 }

backend/src/test/java/com/printcalculator/service/media/PublicMediaQueryServiceTest.java

@@ -41,7 +41,7 @@ class PublicMediaQueryServiceTest {
     void setUp() {
         MediaStorageService mediaStorageService = new MediaStorageService(
                 tempDir.resolve("storage_media").toString(),
-                "https://cdn.example/media"
+                "https://cdn.example"
         );
         service = new PublicMediaQueryService(mediaUsageRepository, mediaVariantRepository, mediaStorageService);
     }

backend/src/test/java/com/printcalculator/service/payment/InvoicePdfRenderingServiceTest.java

@@ -45,7 +45,7 @@ class InvoicePdfRenderingServiceTest {
         OrderItem shopItem = new OrderItem();
         shopItem.setItemType("SHOP_PRODUCT");
         shopItem.setDisplayName("Desk Cable Clip");
-        shopItem.setOriginalFilename("desk-cable-clip-demo.stl");
+        shopItem.setOriginalFilename("desk-cable-clip.stl");
         shopItem.setShopProductName("Desk Cable Clip");
         shopItem.setShopVariantLabel("Coral Red");
         shopItem.setQuantity(2);

backend/src/test/java/com/printcalculator/service/shop/ShopSitemapServiceTest.java

@@ -0,0 +1,116 @@
+package com.printcalculator.service.shop;
+
+import com.printcalculator.entity.ShopCategory;
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.time.Clock;
+import java.time.Instant;
+import java.time.OffsetDateTime;
+import java.time.ZoneOffset;
+import java.util.List;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.Mockito.times;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+class ShopSitemapServiceTest {
+
+    @Mock
+    private ShopCategoryRepository shopCategoryRepository;
+    @Mock
+    private ShopProductRepository shopProductRepository;
+
+    private ShopSitemapService service;
+
+    @BeforeEach
+    void setUp() {
+        Clock fixedClock = Clock.fixed(Instant.parse("2026-03-11T10:00:00Z"), ZoneOffset.UTC);
+        service = new ShopSitemapService(
+                shopCategoryRepository,
+                shopProductRepository,
+                "https://3d-fab.ch/",
+                900,
+                fixedClock
+        );
+    }
+
+    @Test
+    void getShopSitemapXml_shouldGenerateLocalizedCategoryAndProductEntries() {
+        ShopCategory visibleCategory = new ShopCategory();
+        visibleCategory.setId(UUID.fromString("21111111-1111-1111-1111-111111111111"));
+        visibleCategory.setSlug("accessori");
+        visibleCategory.setIndexable(true);
+        visibleCategory.setIsActive(true);
+        visibleCategory.setUpdatedAt(OffsetDateTime.parse("2026-03-10T08:00:00Z"));
+
+        ShopCategory hiddenCategory = new ShopCategory();
+        hiddenCategory.setId(UUID.fromString("22222222-2222-2222-2222-222222222222"));
+        hiddenCategory.setSlug("bozza");
+        hiddenCategory.setIndexable(false);
+        hiddenCategory.setIsActive(true);
+        hiddenCategory.setUpdatedAt(OffsetDateTime.parse("2026-03-10T09:00:00Z"));
+
+        ShopProduct indexedProduct = new ShopProduct();
+        indexedProduct.setId(UUID.fromString("123e4567-e89b-12d3-a456-426614174000"));
+        indexedProduct.setCategory(visibleCategory);
+        indexedProduct.setSlug("supporto-bici");
+        indexedProduct.setNameIt("Supporto bici");
+        indexedProduct.setNameEn("Bike Holder");
+        indexedProduct.setNameDe("Fahrrad Halter");
+        indexedProduct.setNameFr("Support velo");
+        indexedProduct.setIndexable(true);
+        indexedProduct.setIsActive(true);
+        indexedProduct.setUpdatedAt(OffsetDateTime.parse("2026-03-11T07:30:00Z"));
+
+        ShopProduct hiddenProduct = new ShopProduct();
+        hiddenProduct.setId(UUID.fromString("33333333-3333-3333-3333-333333333333"));
+        hiddenProduct.setCategory(visibleCategory);
+        hiddenProduct.setSlug("draft");
+        hiddenProduct.setIndexable(false);
+        hiddenProduct.setIsActive(true);
+        hiddenProduct.setUpdatedAt(OffsetDateTime.parse("2026-03-11T08:00:00Z"));
+
+        when(shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc())
+                .thenReturn(List.of(visibleCategory, hiddenCategory));
+        when(shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc())
+                .thenReturn(List.of(indexedProduct, hiddenProduct));
+
+        String xml = service.getShopSitemapXml();
+
+        assertTrue(xml.contains("<loc>https://3d-fab.ch/it/shop/accessori</loc>"));
+        assertTrue(xml.contains("hreflang=\"en\" href=\"https://3d-fab.ch/en/shop/accessori\""));
+        assertFalse(xml.contains("https://3d-fab.ch/it/shop/bozza"));
+
+        assertTrue(xml.contains("<loc>https://3d-fab.ch/it/shop/p/123e4567-supporto-bici</loc>"));
+        assertTrue(xml.contains("hreflang=\"en\" href=\"https://3d-fab.ch/en/shop/p/123e4567-bike-holder\""));
+        assertTrue(xml.contains("hreflang=\"de\" href=\"https://3d-fab.ch/de/shop/p/123e4567-fahrrad-halter\""));
+        assertTrue(xml.contains("hreflang=\"x-default\" href=\"https://3d-fab.ch/it/shop/p/123e4567-supporto-bici\""));
+        assertTrue(xml.contains("<lastmod>2026-03-11T07:30:00Z</lastmod>"));
+        assertFalse(xml.contains("33333333-draft"));
+    }
+
+    @Test
+    void getShopSitemapXml_shouldServeCachedPayloadWithinTtl() {
+        when(shopCategoryRepository.findAllByIsActiveTrueOrderBySortOrderAscNameAsc()).thenReturn(List.of());
+        when(shopProductRepository.findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc()).thenReturn(List.of());
+
+        String firstXml = service.getShopSitemapXml();
+        String secondXml = service.getShopSitemapXml();
+
+        assertTrue(firstXml.contains("<urlset"));
+        assertTrue(secondXml.contains("<urlset"));
+        verify(shopCategoryRepository, times(1)).findAllByIsActiveTrueOrderBySortOrderAscNameAsc();
+        verify(shopProductRepository, times(1)).findAllByIsActiveTrueOrderByIsFeaturedDescSortOrderAscNameAsc();
+    }
+}

db.sql

@@ -1040,10 +1040,30 @@ CREATE TABLE IF NOT EXISTS shop_product
     shop_category_id    uuid        NOT NULL REFERENCES shop_category (shop_category_id),
     slug                text        NOT NULL UNIQUE,
     name                text        NOT NULL,
+    name_it             text,
+    name_en             text,
+    name_de             text,
+    name_fr             text,
     excerpt             text,
+    excerpt_it          text,
+    excerpt_en          text,
+    excerpt_de          text,
+    excerpt_fr          text,
     description         text,
+    description_it      text,
+    description_en      text,
+    description_de      text,
+    description_fr      text,
     seo_title           text,
+    seo_title_it        text,
+    seo_title_en        text,
+    seo_title_de        text,
+    seo_title_fr        text,
     seo_description     text,
+    seo_description_it  text,
+    seo_description_en  text,
+    seo_description_de  text,
+    seo_description_fr  text,
     og_title            text,
     og_description      text,
     indexable           boolean     NOT NULL DEFAULT true,
@@ -1054,12 +1074,90 @@ CREATE TABLE IF NOT EXISTS shop_product
     updated_at          timestamptz NOT NULL DEFAULT now()
 );
 
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS seo_title_it text,
+    ADD COLUMN IF NOT EXISTS seo_title_en text,
+    ADD COLUMN IF NOT EXISTS seo_title_de text,
+    ADD COLUMN IF NOT EXISTS seo_title_fr text,
+    ADD COLUMN IF NOT EXISTS seo_description_it text,
+    ADD COLUMN IF NOT EXISTS seo_description_en text,
+    ADD COLUMN IF NOT EXISTS seo_description_de text,
+    ADD COLUMN IF NOT EXISTS seo_description_fr text;
+
 CREATE INDEX IF NOT EXISTS ix_shop_product_category_active_sort
     ON shop_product (shop_category_id, is_active, sort_order, created_at DESC);
 
 CREATE INDEX IF NOT EXISTS ix_shop_product_featured_sort
     ON shop_product (is_featured, is_active, sort_order, created_at DESC);
 
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_fr text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_fr text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_fr text;
+
+UPDATE shop_product
+SET
+    name_it = COALESCE(NULLIF(btrim(name_it), ''), name),
+    name_en = COALESCE(NULLIF(btrim(name_en), ''), name),
+    name_de = COALESCE(NULLIF(btrim(name_de), ''), name),
+    name_fr = COALESCE(NULLIF(btrim(name_fr), ''), name),
+    excerpt_it = COALESCE(NULLIF(btrim(excerpt_it), ''), excerpt),
+    excerpt_en = COALESCE(NULLIF(btrim(excerpt_en), ''), excerpt),
+    excerpt_de = COALESCE(NULLIF(btrim(excerpt_de), ''), excerpt),
+    excerpt_fr = COALESCE(NULLIF(btrim(excerpt_fr), ''), excerpt),
+    description_it = COALESCE(NULLIF(btrim(description_it), ''), description),
+    description_en = COALESCE(NULLIF(btrim(description_en), ''), description),
+    description_de = COALESCE(NULLIF(btrim(description_de), ''), description),
+    description_fr = COALESCE(NULLIF(btrim(description_fr), ''), description)
+WHERE
+    NULLIF(btrim(name_it), '') IS NULL
+    OR NULLIF(btrim(name_en), '') IS NULL
+    OR NULLIF(btrim(name_de), '') IS NULL
+    OR NULLIF(btrim(name_fr), '') IS NULL
+    OR (excerpt IS NOT NULL AND (
+        NULLIF(btrim(excerpt_it), '') IS NULL
+        OR NULLIF(btrim(excerpt_en), '') IS NULL
+        OR NULLIF(btrim(excerpt_de), '') IS NULL
+        OR NULLIF(btrim(excerpt_fr), '') IS NULL
+    ))
+    OR (description IS NOT NULL AND (
+        NULLIF(btrim(description_it), '') IS NULL
+        OR NULLIF(btrim(description_en), '') IS NULL
+        OR NULLIF(btrim(description_de), '') IS NULL
+        OR NULLIF(btrim(description_fr), '') IS NULL
+    ));
+
 CREATE TABLE IF NOT EXISTS shop_product_variant
 (
     shop_product_variant_id uuid PRIMARY KEY     DEFAULT gen_random_uuid(),

docker-compose.deploy.yml

@@ -32,8 +32,8 @@ services:
       - TEMP_DIR=/app/temp
       - PROFILES_DIR=/app/profiles
       - MEDIA_STORAGE_ROOT=${MEDIA_STORAGE_ROOT:-/app/storage_media}
-      - MEDIA_PUBLIC_BASE_URL=${MEDIA_PUBLIC_BASE_URL:-http://localhost:8080/media}
-      - MEDIA_FFMPEG_PATH=${MEDIA_FFMPEG_PATH:-ffmpeg}
+      - SHOP_STORAGE_ROOT=${SHOP_STORAGE_ROOT:-/app/storage_shop}
+      - MEDIA_FFMPEG_PATH=${MEDIA_FFMPEG_PATH:-/usr/local/bin/ffmpeg-media}
       - MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:-26214400}
     restart: always
     logging:
@@ -47,6 +47,7 @@ services:
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_orders:/app/storage_orders
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_requests:/app/storage_requests
       - /mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media
+      - /mnt/cache/appdata/print-calculator/${ENV}/storage_shop:/app/storage_shop
     extra_hosts:
       - "host.docker.internal:host-gateway"
 

frontend/Dockerfile

@@ -1,14 +1,13 @@
-# Stage 1: Build
-FROM node:20 as build
+FROM node:22-alpine
 
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
+RUN npm ci --legacy-peer-deps
 COPY . .
-RUN npm run build --configuration=production
+RUN npm run build -- --configuration=production
 
-# Stage 2: Serve
-FROM nginx:alpine
-COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+ENV NODE_ENV=production
+ENV PORT=80
 EXPOSE 80
+
+CMD ["node", "dist/frontend/server/server.mjs"]

frontend/Dockerfile.dev

@@ -1,15 +1,15 @@
-# Stage 1: Build
-FROM node:20 as build
+FROM node:22-alpine
 
 WORKDIR /app
 COPY package*.json ./
-RUN npm install
+RUN npm ci --legacy-peer-deps
 COPY . .
+
 # Use development configuration to pick up environment.ts (localhost)
 RUN npm run build -- --configuration=development
 
-# Stage 2: Serve
-FROM nginx:alpine
-COPY --from=build /app/dist/frontend/browser /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+ENV NODE_ENV=development
+ENV PORT=80
 EXPOSE 80
+
+CMD ["node", "dist/frontend/server/server.mjs"]

frontend/angular.json

@@ -36,7 +36,12 @@
               "@angular/material/prebuilt-themes/azure-blue.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "server": "src/main.server.ts",
+            "prerender": false,
+            "ssr": {
+              "entry": "src/server.ts"
+            }
           },
           "configurations": {
             "production": {

frontend/package.json

@@ -6,35 +6,41 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "serve:ssr:frontend": "node dist/frontend/server/server.mjs"
   },
   "private": true,
   "engines": {
     "node": "^22.0.0"
   },
   "dependencies": {
-    "@angular/cdk": "^19.2.19",
-    "@angular/common": "^19.2.18",
-    "@angular/compiler": "^19.2.18",
-    "@angular/core": "^19.2.18",
-    "@angular/forms": "^19.2.18",
-    "@angular/material": "^19.2.19",
-    "@angular/platform-browser": "^19.2.18",
-    "@angular/platform-browser-dynamic": "^19.2.18",
-    "@angular/router": "^19.2.18",
+    "@angular/cdk": "19.2.19",
+    "@angular/common": "19.2.19",
+    "@angular/compiler": "19.2.19",
+    "@angular/core": "19.2.19",
+    "@angular/forms": "19.2.19",
+    "@angular/material": "19.2.19",
+    "@angular/platform-browser": "19.2.19",
+    "@angular/platform-browser-dynamic": "19.2.19",
+    "@angular/platform-server": "19.2.19",
+    "@angular/router": "19.2.19",
+    "@angular/ssr": "19.2.19",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "@types/three": "^0.182.0",
+    "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "three": "^0.182.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.19",
-    "@angular/cli": "^19.2.19",
-    "@angular/compiler-cli": "^19.2.18",
+    "@angular-devkit/build-angular": "19.2.19",
+    "@angular/cli": "19.2.19",
+    "@angular/compiler-cli": "19.2.19",
+    "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
+    "@types/node": "^18.18.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

frontend/public/robots.txt

@@ -5,17 +5,19 @@ Disallow: /admin
 Disallow: /admin/
 Disallow: /*/admin
 Disallow: /*/admin/
+Disallow: /order
 Disallow: /order/
+Disallow: /*/order
 Disallow: /*/order/
+Disallow: /co
 Disallow: /co/
+Disallow: /*/co
 Disallow: /*/co/
 Disallow: /checkout
 Disallow: /checkout/
+Disallow: /checkout/cad
 Disallow: /*/checkout
 Disallow: /*/checkout/
-Disallow: /shop
-Disallow: /shop/
-Disallow: /*/shop
-Disallow: /*/shop/
+Disallow: /*/checkout/cad
 
 Sitemap: https://3d-fab.ch/sitemap.xml

frontend/public/sitemap-static.xml

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+  xmlns:xhtml="http://www.w3.org/1999/xhtml"
+>
+  <url>
+    <loc>https://3d-fab.ch/it</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it" />
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/calculator/basic</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/calculator/basic"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/calculator/basic"
+    />
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/calculator/advanced</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/calculator/advanced"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/calculator/advanced"
+    />
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/shop</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/shop" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/shop" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/shop" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/shop" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/shop" />
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/about</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/about" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/about" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/about" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/about" />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/about"
+    />
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/contact</loc>
+    <xhtml:link
+      rel="alternate"
+      hreflang="it"
+      href="https://3d-fab.ch/it/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="en"
+      href="https://3d-fab.ch/en/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="de"
+      href="https://3d-fab.ch/de/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="fr"
+      href="https://3d-fab.ch/fr/contact"
+    />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/contact"
+    />
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/privacy</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/privacy" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/privacy" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/privacy" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/privacy" />
+    <xhtml:link
+      rel="alternate"
+      hreflang="x-default"
+      href="https://3d-fab.ch/it/privacy"
+    />
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+  <url>
+    <loc>https://3d-fab.ch/it/terms</loc>
+    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/terms" />
+    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/terms" />
+    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/terms" />
+    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/terms" />
+    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/terms" />
+    <changefreq>yearly</changefreq>
+    <priority>0.4</priority>
+  </url>
+</urlset>

frontend/public/sitemap.xml

@@ -1,144 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset
-  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
-  xmlns:xhtml="http://www.w3.org/1999/xhtml"
->
-  <url>
-    <loc>https://3d-fab.ch/it</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr" />
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it" />
-    <changefreq>weekly</changefreq>
-    <priority>1.0</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/calculator/basic</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/calculator/basic"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/calculator/basic"
-    />
-    <changefreq>weekly</changefreq>
-    <priority>0.9</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/calculator/advanced</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/calculator/advanced"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/calculator/advanced"
-    />
-    <changefreq>weekly</changefreq>
-    <priority>0.8</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/about</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/about" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/about" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/about" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/about" />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/about"
-    />
-    <changefreq>monthly</changefreq>
-    <priority>0.7</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/contact</loc>
-    <xhtml:link
-      rel="alternate"
-      hreflang="it"
-      href="https://3d-fab.ch/it/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="en"
-      href="https://3d-fab.ch/en/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="de"
-      href="https://3d-fab.ch/de/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="fr"
-      href="https://3d-fab.ch/fr/contact"
-    />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/contact"
-    />
-    <changefreq>monthly</changefreq>
-    <priority>0.7</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/privacy</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/privacy" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/privacy" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/privacy" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/privacy" />
-    <xhtml:link
-      rel="alternate"
-      hreflang="x-default"
-      href="https://3d-fab.ch/it/privacy"
-    />
-    <changefreq>yearly</changefreq>
-    <priority>0.4</priority>
-  </url>
-  <url>
-    <loc>https://3d-fab.ch/it/terms</loc>
-    <xhtml:link rel="alternate" hreflang="it" href="https://3d-fab.ch/it/terms" />
-    <xhtml:link rel="alternate" hreflang="en" href="https://3d-fab.ch/en/terms" />
-    <xhtml:link rel="alternate" hreflang="de" href="https://3d-fab.ch/de/terms" />
-    <xhtml:link rel="alternate" hreflang="fr" href="https://3d-fab.ch/fr/terms" />
-    <xhtml:link rel="alternate" hreflang="x-default" href="https://3d-fab.ch/it/terms" />
-    <changefreq>yearly</changefreq>
-    <priority>0.4</priority>
-  </url>
-</urlset>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <sitemap>
+    <loc>https://3d-fab.ch/sitemap-static.xml</loc>
+  </sitemap>
+  <sitemap>
+    <loc>https://3d-fab.ch/api/sitemap-shop.xml</loc>
+  </sitemap>
+</sitemapindex>

frontend/src/app/app.config.server.ts

@@ -0,0 +1,9 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering } from '@angular/platform-server';
+import { appConfig } from './app.config';
+
+const serverConfig: ApplicationConfig = {
+  providers: [provideServerRendering()],
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);

frontend/src/app/app.config.ts

@@ -17,6 +17,10 @@ import {
   TranslateHttpLoader,
 } from '@ngx-translate/http-loader';
 import { adminAuthInterceptor } from './core/interceptors/admin-auth.interceptor';
+import {
+  provideClientHydration,
+  withEventReplay,
+} from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -43,5 +47,6 @@ export const appConfig: ApplicationConfig = {
         },
       }),
     ),
+    provideClientHydration(withEventReplay()),
   ],
 };

frontend/src/app/app.routes.ts

@@ -1,4 +1,13 @@
-import { Routes } from '@angular/router';
+import { CanMatchFn, Routes } from '@angular/router';
+
+const SUPPORTED_LANGS = new Set(['it', 'en', 'de', 'fr']);
+
+const langPrefixCanMatch: CanMatchFn = (_route, segments) => {
+  if (segments.length === 0) {
+    return false;
+  }
+  return SUPPORTED_LANGS.has(segments[0].path.toLowerCase());
+};
 
 const appChildRoutes: Routes = [
   {
@@ -116,6 +125,7 @@ const appChildRoutes: Routes = [
 export const routes: Routes = [
   {
     path: ':lang',
+    canMatch: [langPrefixCanMatch],
     loadComponent: () =>
       import('./core/layout/layout.component').then((m) => m.LayoutComponent),
     children: appChildRoutes,

frontend/src/app/core/layout/navbar.component.html

@@ -42,6 +42,35 @@
     </nav>
 
     <div class="actions">
+      <button
+        type="button"
+        class="cart-trigger"
+        [class.has-items]="cartItemCount() > 0"
+        [attr.aria-label]="'SHOP.CART_TITLE' | translate"
+        (click)="toggleCart()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="8" cy="21" r="1"></circle>
+          <circle cx="19" cy="21" r="1"></circle>
+          <path
+            d="M2.05 2h2l2.4 12.45a2 2 0 0 0 2 1.55h9.7a2 2 0 0 0 1.95-1.57L22 7H6"
+          ></path>
+        </svg>
+        @if (cartItemCount() > 0) {
+          <span class="cart-badge">{{ cartItemCount() }}</span>
+        }
+      </button>
+
       <select
         class="lang-switch"
         [value]="langService.selectedLang()"
@@ -71,4 +100,120 @@
       </div>
     </div>
   </div>
+
+  @if (isCartOpen()) {
+    <div class="cart-overlay" (click)="closeCart()">
+      <aside class="cart-panel" (click)="$event.stopPropagation()">
+        <div class="cart-panel-head">
+          <div>
+            <p class="cart-panel-kicker">{{ "SHOP.CART_TITLE" | translate }}</p>
+            <h2>{{ "SHOP.CART_SUMMARY_TITLE" | translate }}</h2>
+          </div>
+          <button
+            type="button"
+            class="cart-close"
+            [attr.aria-label]="'COMMON.BACK' | translate"
+            (click)="closeCart()"
+          >
+            ×
+          </button>
+        </div>
+
+        @if (cartLoading() && !cart()) {
+          <p class="cart-state">{{ "SHOP.CART_LOADING" | translate }}</p>
+        } @else if (!cartHasItems()) {
+          <p class="cart-state">{{ "SHOP.CART_EMPTY" | translate }}</p>
+        } @else {
+          <div class="cart-lines">
+            @for (item of cartItems(); track trackByCartItem($index, item)) {
+              <article class="cart-line">
+                <div class="cart-line-copy">
+                  <strong>{{ cartItemName(item) }}</strong>
+                  @if (cartItemVariant(item); as variant) {
+                    <span class="cart-line-meta">{{ variant }}</span>
+                  }
+                  @if (cartItemColor(item); as color) {
+                    <span class="cart-line-color">
+                      <span
+                        class="color-dot"
+                        [style.background-color]="cartItemColorHex(item)"
+                      ></span>
+                      <span>{{ color }}</span>
+                    </span>
+                  }
+                </div>
+
+                <div class="cart-line-actions">
+                  <div class="qty-control">
+                    <button
+                      type="button"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
+                      (click)="decreaseQuantity(item)"
+                    >
+                      -
+                    </button>
+                    <span>{{ item.quantity }}</span>
+                    <button
+                      type="button"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
+                      (click)="increaseQuantity(item)"
+                    >
+                      +
+                    </button>
+                  </div>
+
+                  <strong class="line-total">{{
+                    item.unitPriceChf * item.quantity | currency: "CHF"
+                  }}</strong>
+                </div>
+
+                <button
+                  type="button"
+                  class="line-remove"
+                  [disabled]="cartMutating() && busyLineItemId() === item.id"
+                  (click)="removeItem(item)"
+                >
+                  {{ "SHOP.REMOVE" | translate }}
+                </button>
+              </article>
+            }
+          </div>
+
+          <div class="cart-totals">
+            <div class="cart-total-row">
+              <span>{{ "SHOP.CART_SUBTOTAL" | translate }}</span>
+              <strong>{{
+                cart()?.itemsTotalChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+            <div class="cart-total-row">
+              <span>{{ "SHOP.CART_SHIPPING" | translate }}</span>
+              <strong>{{
+                cart()?.shippingCostChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+            <div class="cart-total-row cart-total-row-final">
+              <span>{{ "SHOP.CART_TOTAL" | translate }}</span>
+              <strong>{{
+                cart()?.grandTotalChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="checkout-link"
+            [disabled]="cartMutating()"
+            (click)="goToCheckout()"
+          >
+            {{ "SHOP.GO_TO_CHECKOUT" | translate }}
+          </button>
+        }
+      </aside>
+    </div>
+  }
 </header>

frontend/src/app/core/layout/navbar.component.scss

@@ -46,6 +46,46 @@
   gap: var(--space-4);
 }
 
+.cart-trigger {
+  position: relative;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  cursor: pointer;
+  transition:
+    border-color 0.18s ease,
+    background-color 0.18s ease;
+}
+
+.cart-trigger:hover,
+.cart-trigger.has-items {
+  border-color: rgba(16, 24, 32, 0.2);
+  background: #f6f2e8;
+}
+
+.cart-badge {
+  position: absolute;
+  top: -0.15rem;
+  right: -0.2rem;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--color-brand);
+  color: var(--color-neutral-900);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+
 .lang-switch {
   background-color: var(--color-bg-card);
   border: 1px solid var(--color-border);
@@ -88,6 +128,176 @@
   color: var(--color-text-muted);
 }
 
+.cart-overlay {
+  position: fixed;
+  inset: 64px 0 0;
+  background: rgba(16, 24, 32, 0.16);
+  display: flex;
+  justify-content: flex-end;
+  z-index: 120;
+}
+
+.cart-panel {
+  width: min(26rem, 100%);
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  gap: var(--space-5);
+  padding: var(--space-6);
+  border-left: 1px solid var(--color-border);
+  background: #fbfaf6;
+  box-shadow: -18px 0 40px rgba(16, 24, 32, 0.08);
+  overflow-y: auto;
+}
+
+.cart-panel-head {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.cart-panel-head h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
+}
+
+.cart-panel-kicker {
+  margin: 0;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+
+.cart-close,
+.line-remove {
+  border: 0;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font: inherit;
+}
+
+.cart-close {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.cart-state {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 0.9rem;
+  background: rgba(16, 24, 32, 0.04);
+  color: var(--color-text-muted);
+}
+
+.cart-lines {
+  display: grid;
+  align-content: start;
+  gap: var(--space-4);
+}
+
+.cart-line {
+  display: grid;
+  gap: var(--space-3);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.cart-line-copy {
+  display: grid;
+  gap: 0.25rem;
+}
+
+.cart-line-meta,
+.cart-line-color {
+  color: var(--color-text-muted);
+  font-size: 0.86rem;
+}
+
+.cart-line-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.color-dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  border: 1px solid rgba(16, 24, 32, 0.12);
+}
+
+.cart-line-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.qty-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.2rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-border);
+  background: #fff;
+}
+
+.qty-control button {
+  width: 1.9rem;
+  height: 1.9rem;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(16, 24, 32, 0.06);
+  color: var(--color-text);
+  cursor: pointer;
+}
+
+.qty-control span {
+  min-width: 1.4rem;
+  text-align: center;
+  font-weight: 600;
+}
+
+.line-total {
+  white-space: nowrap;
+}
+
+.cart-totals {
+  display: grid;
+  gap: 0.55rem;
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--color-border);
+}
+
+.cart-total-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  color: var(--color-text-muted);
+}
+
+.cart-total-row-final {
+  color: var(--color-text);
+  font-size: 1.02rem;
+}
+
+.checkout-link {
+  min-height: 3rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--color-text);
+  color: #fff;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
 /* Mobile Toggle */
 .mobile-toggle {
   display: none;
@@ -133,6 +343,14 @@
     margin-left: auto; /* Push to right */
   }
 
+  .cart-overlay {
+    inset: 64px 0 0;
+  }
+
+  .cart-panel {
+    width: min(100%, 24rem);
+  }
+
   .nav-links {
     position: absolute;
     top: 64px;
@@ -161,6 +379,11 @@
       }
     }
   }
+
+  .cart-line-actions {
+    align-items: start;
+    flex-direction: column;
+  }
 }
 
 @keyframes slideDown {

frontend/src/app/core/layout/navbar.component.ts

@@ -1,18 +1,48 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Component, DestroyRef, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  NavigationStart,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { LanguageService } from '../services/language.service';
 import { routes } from '../../app.routes';
+import {
+  ShopCartItem,
+  ShopService,
+} from '../../features/shop/services/shop.service';
+import { finalize } from 'rxjs';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [RouterLink, RouterLinkActive, TranslateModule],
+  imports: [CommonModule, RouterLink, RouterLinkActive, TranslateModule],
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly router = inject(Router);
+  readonly shopService = inject(ShopService);
+
   isMenuOpen = false;
+  readonly isCartOpen = signal(false);
+  readonly cartMutating = signal(false);
+  readonly busyLineItemId = signal<string | null>(null);
+
+  readonly cart = this.shopService.cart;
+  readonly cartLoading = this.shopService.cartLoading;
+  readonly cartItems = computed(() =>
+    (this.cart()?.items ?? []).filter(
+      (item) => item.lineItemType === 'SHOP_PRODUCT',
+    ),
+  );
+  readonly cartHasItems = computed(() => this.cartItems().length > 0);
+  readonly cartItemCount = this.shopService.cartItemCount;
+
   readonly languageOptions: Array<{
     value: 'it' | 'en' | 'de' | 'fr';
     label: string;
@@ -23,7 +53,27 @@ export class NavbarComponent {
     { value: 'fr', label: 'FR' },
   ];
 
-  constructor(public langService: LanguageService) {}
+  constructor(public langService: LanguageService) {
+    if (!this.shopService.cartLoaded()) {
+      this.shopService
+        .loadCart()
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          error: () => {
+            this.shopService.cart.set(null);
+          },
+        });
+    }
+
+    this.router.events
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          this.closeMenu();
+          this.closeCart();
+        }
+      });
+  }
 
   onLanguageChange(event: Event): void {
     const select = event.target as HTMLSelectElement;
@@ -39,5 +89,89 @@ export class NavbarComponent {
     this.isMenuOpen = false;
   }
 
+  toggleCart(): void {
+    this.closeMenu();
+    this.isCartOpen.update((open) => !open);
+  }
+
+  closeCart(): void {
+    this.isCartOpen.set(false);
+  }
+
+  increaseQuantity(item: ShopCartItem): void {
+    this.updateItemQuantity(item, (item.quantity ?? 0) + 1);
+  }
+
+  decreaseQuantity(item: ShopCartItem): void {
+    const nextQuantity = Math.max(1, (item.quantity ?? 1) - 1);
+    this.updateItemQuantity(item, nextQuantity);
+  }
+
+  removeItem(item: ShopCartItem): void {
+    this.cartMutating.set(true);
+    this.busyLineItemId.set(item.id);
+    this.shopService
+      .removeCartItem(item.id)
+      .pipe(
+        finalize(() => {
+          this.cartMutating.set(false);
+          this.busyLineItemId.set(null);
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
+  }
+
+  goToCheckout(): void {
+    const sessionId = this.shopService.cartSessionId();
+    if (!sessionId) {
+      return;
+    }
+
+    this.closeCart();
+    this.router.navigate(['/checkout'], {
+      queryParams: {
+        session: sessionId,
+      },
+    });
+  }
+
+  cartItemName(item: ShopCartItem): string {
+    return (
+      item.displayName || item.shopProductName || item.originalFilename || '-'
+    );
+  }
+
+  cartItemVariant(item: ShopCartItem): string | null {
+    return item.shopVariantLabel || item.shopVariantColorName || null;
+  }
+
+  cartItemColor(item: ShopCartItem): string | null {
+    return item.shopVariantColorName || item.colorCode || null;
+  }
+
+  cartItemColorHex(item: ShopCartItem): string {
+    return item.shopVariantColorHex || '#c9ced6';
+  }
+
+  trackByCartItem(_index: number, item: ShopCartItem): string {
+    return item.id;
+  }
+
+  private updateItemQuantity(item: ShopCartItem, quantity: number): void {
+    this.cartMutating.set(true);
+    this.busyLineItemId.set(item.id);
+    this.shopService
+      .updateCartItem(item.id, quantity)
+      .pipe(
+        finalize(() => {
+          this.cartMutating.set(false);
+          this.busyLineItemId.set(null);
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
+  }
+
   protected readonly routes = routes;
 }

frontend/src/app/features/admin/admin.routes.ts

@@ -64,6 +64,13 @@ export const ADMIN_ROUTES: Routes = [
             (m) => m.AdminHomeMediaComponent,
           ),
       },
+      {
+        path: 'shop',
+        loadComponent: () =>
+          import('./pages/admin-shop.component').then(
+            (m) => m.AdminShopComponent,
+          ),
+      },
     ],
   },
 ];

frontend/src/app/features/admin/pages/admin-cad-invoices.component.html

@@ -1,5 +1,5 @@
-<section class="cad-page">
-  <header class="page-header">
+<section class="cad-page section-card">
+  <header class="page-header section-header">
     <div>
       <h1>Fatture CAD</h1>
       <p>

frontend/src/app/features/admin/pages/admin-cad-invoices.component.scss

@@ -4,6 +4,13 @@
   gap: var(--space-5);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;
@@ -131,6 +138,11 @@ td {
 }
 
 @media (max-width: 880px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .page-header {
     flex-direction: column;
     align-items: stretch;

frontend/src/app/features/admin/pages/admin-cad-invoices.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, OnInit, PLATFORM_ID, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminCadInvoice,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-cad-invoices.component.scss',
 })
 export class AdminCadInvoicesComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
   private readonly adminOrdersService = inject(AdminOrdersService);
 
@@ -112,11 +113,17 @@ export class AdminCadInvoicesComponent implements OnInit {
   }
 
   openCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = this.toCheckoutUrl(path);
     window.open(url, '_blank');
   }
 
   copyCheckout(path: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = this.toCheckoutUrl(path);
     navigator.clipboard?.writeText(url);
     this.successMessage = 'Link checkout CAD copiato negli appunti.';
@@ -126,6 +133,9 @@ export class AdminCadInvoicesComponent implements OnInit {
     if (!orderId) return;
     this.adminOrdersService.downloadOrderInvoice(orderId).subscribe({
       next: (blob) => {
+        if (!this.isBrowser) {
+          return;
+        }
         const url = window.URL.createObjectURL(blob);
         const a = document.createElement('a');
         a.href = url;
@@ -142,10 +152,16 @@ export class AdminCadInvoicesComponent implements OnInit {
   private toCheckoutUrl(path: string): string {
     const safePath = path.startsWith('/') ? path : `/${path}`;
     const lang = this.resolveLang();
+    if (!this.isBrowser) {
+      return `/${lang}${safePath}`;
+    }
     return `${window.location.origin}/${lang}${safePath}`;
   }
 
   private resolveLang(): string {
+    if (!this.isBrowser) {
+      return 'it';
+    }
     const firstSegment = window.location.pathname
       .split('/')
       .filter(Boolean)

frontend/src/app/features/admin/pages/admin-contact-requests.component.html

@@ -1,10 +1,8 @@
-<section class="section-card ui-section-card">
-  <header class="section-header ui-section-header">
-    <div class="header-copy ui-section-header__copy">
-      <h2 class="ui-section-header__title">Richieste di contatto</h2>
-      <p class="ui-section-header__description">
-        Richieste preventivo personalizzato ricevute dal sito.
-      </p>
+<section class="section-card">
+  <header class="section-header">
+    <div class="header-copy">
+      <h2>Richieste di contatto</h2>
+      <p>Richieste preventivo personalizzato ricevute dal sito.</p>
       <span class="total-pill ui-pill">{{ requests.length }} richieste</span>
     </div>
     <button

frontend/src/app/features/admin/pages/admin-contact-requests.component.scss

@@ -4,6 +4,22 @@
   gap: var(--space-5);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+
+.section-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
 .header-copy {
   display: grid;
   gap: var(--space-1);
@@ -204,6 +220,11 @@ tbody tr.selected {
 }
 
 @media (max-width: 760px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .detail-header {
     flex-direction: column;
   }

frontend/src/app/features/admin/pages/admin-contact-requests.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminContactRequest,
@@ -17,6 +17,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-contact-requests.component.scss',
 })
 export class AdminContactRequestsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
 
   readonly statusOptions = ['NEW', 'PENDING', 'IN_PROGRESS', 'DONE', 'CLOSED'];
@@ -171,6 +172,9 @@ export class AdminContactRequestsComponent implements OnInit {
   }
 
   private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;

frontend/src/app/features/admin/pages/admin-dashboard.component.html

@@ -1,10 +1,8 @@
-<section class="admin-dashboard ui-section-card">
-  <header class="dashboard-header ui-section-header">
-    <div class="ui-section-header__copy">
-      <h1 class="ui-section-header__title">Ordini</h1>
-      <p class="ui-section-header__description">
-        Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.
-      </p>
+<section class="admin-dashboard section-card">
+  <header class="dashboard-header section-header">
+    <div>
+      <h1>Ordini</h1>
+      <p>Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.</p>
     </div>
     <div class="header-actions">
       <button
@@ -106,7 +104,6 @@
               <td>
                 <span
                   class="order-type-badge"
-                  [class.order-type-badge--shop]="orderKind(order) === 'SHOP'"
                   [class.order-type-badge--mixed]="orderKind(order) === 'MIXED'"
                 >
                   {{ orderKindLabel(order) }}
@@ -135,7 +132,6 @@
           <h2>Dettaglio ordine {{ selectedOrder.orderNumber }}</h2>
           <span
             class="order-type-badge"
-            [class.order-type-badge--shop]="orderKind(selectedOrder) === 'SHOP'"
             [class.order-type-badge--mixed]="
               orderKind(selectedOrder) === 'MIXED'
             "
@@ -261,10 +257,7 @@
               <p class="file-name">
                 <strong>{{ itemDisplayName(item) }}</strong>
               </p>
-              <span
-                class="item-kind-badge"
-                [class.item-kind-badge--shop]="isShopItem(item)"
-              >
+              <span class="item-kind-badge">
                 {{ isShopItem(item) ? "Shop" : "Calcolatore" }}
               </span>
             </div>

frontend/src/app/features/admin/pages/admin-dashboard.component.scss

@@ -4,6 +4,22 @@
   gap: var(--space-5);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.dashboard-header h1 {
+  margin: 0;
+}
+
+.dashboard-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
 .header-actions {
   display: flex;
   gap: var(--space-2);
@@ -208,12 +224,6 @@ tbody tr.no-results:hover {
   white-space: nowrap;
 }
 
-.order-type-badge--shop,
-.item-kind-badge--shop {
-  background: color-mix(in srgb, var(--color-brand) 12%, white);
-  color: var(--color-brand);
-}
-
 .order-type-badge--mixed {
   background: color-mix(in srgb, #f59e0b 16%, white);
   color: #9a5b00;
@@ -308,6 +318,11 @@ h4 {
     gap: var(--space-4);
   }
 
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .list-toolbar {
     grid-template-columns: 1fr;
   }

frontend/src/app/features/admin/pages/admin-dashboard.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import {
   AdminOrder,
@@ -16,6 +16,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-dashboard.component.scss',
 })
 export class AdminDashboardComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOrdersService = inject(AdminOrdersService);
 
   orders: AdminOrder[] = [];
@@ -498,6 +499,9 @@ export class AdminDashboardComponent implements OnInit {
   }
 
   private downloadBlob(blob: Blob, filename: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
     const url = window.URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;

frontend/src/app/features/admin/pages/admin-filament-stock.component.scss

@@ -27,18 +27,18 @@
 
 .content {
   display: grid;
-  gap: var(--space-4);
+  gap: var(--space-3);
 }
 
 .panel {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: var(--space-4);
+  padding: var(--space-3);
   background: var(--color-bg-card);
 }
 
 .panel > h3 {
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-2);
 }
 
 .panel-header {
@@ -46,7 +46,7 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }
 
 .panel-header h3 {
@@ -56,25 +56,26 @@
 .create-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-3);
+  gap: var(--space-2);
+  align-items: start;
 }
 
 .subpanel {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: var(--space-3);
+  padding: var(--space-2);
   background: var(--color-neutral-100);
 }
 
 .subpanel h4 {
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-2);
 }
 
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-2) var(--space-3);
-  margin-bottom: var(--space-3);
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
 }
 
 .form-field {
@@ -87,7 +88,7 @@
 }
 
 .form-field > span {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   color: var(--color-text-muted);
   font-weight: 600;
 }
@@ -97,9 +98,10 @@ select {
   width: 100%;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-2);
   background: var(--color-bg-card);
   font: inherit;
+  font-size: 1rem;
   color: var(--color-text);
 }
 
@@ -111,8 +113,8 @@ select:disabled {
 .toggle-group {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  gap: 0.55rem;
+  margin-bottom: var(--space-2);
 }
 
 .toggle {
@@ -121,7 +123,7 @@ select:disabled {
   gap: 0.4rem;
   border: 1px solid var(--color-border);
   border-radius: 999px;
-  padding: 0.35rem 0.65rem;
+  padding: 0.28rem 0.55rem;
   background: var(--color-bg-card);
 }
 
@@ -132,14 +134,14 @@ select:disabled {
 }
 
 .toggle span {
-  font-size: 0.88rem;
+  font-size: 0.84rem;
   font-weight: 600;
 }
 
 .material-grid,
 .variant-list {
   display: grid;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }
 
 .material-card,
@@ -147,7 +149,7 @@ select:disabled {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-neutral-100);
-  padding: var(--space-3);
+  padding: var(--space-2);
 }
 
 .material-grid {
@@ -162,7 +164,7 @@ select:disabled {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }
 
 .variant-header strong {
@@ -179,9 +181,9 @@ select:disabled {
 .variant-collapsed-summary {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--space-3);
+  gap: var(--space-2);
   color: var(--color-text-muted);
-  font-size: 0.92rem;
+  font-size: 0.88rem;
 }
 
 .color-summary {
@@ -222,8 +224,8 @@ select:disabled {
 }
 
 .variant-meta {
-  margin: 0 0 var(--space-3);
-  font-size: 0.9rem;
+  margin: 0 0 var(--space-2);
+  font-size: 0.88rem;
   color: var(--color-text-muted);
 }
 
@@ -233,7 +235,10 @@ button {
   background: var(--color-brand);
   color: var(--color-neutral-900);
   padding: var(--space-2) var(--space-4);
+  font: inherit;
+  font-size: 1rem;
   font-weight: 600;
+  line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
@@ -326,10 +331,10 @@ button:disabled {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
-  padding: var(--space-4);
+  padding: var(--space-3);
   z-index: 1101;
   display: grid;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }
 
 .confirm-dialog h4 {

frontend/src/app/features/admin/pages/admin-home-media.component.html

@@ -1,8 +1,8 @@
-<section class="section-card ui-section-card ui-stack ui-stack--roomy">
-  <header class="section-header ui-section-header">
-    <div class="header-copy ui-section-header__copy">
+<section class="section-card ui-stack ui-stack--roomy">
+  <header class="section-header">
+    <div class="header-copy">
       <p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
-      <h2 class="ui-section-header__title">Media home</h2>
+      <h2>Media home</h2>
     </div>
     <div class="header-side ui-stack ui-stack--dense">
       <div class="header-stats ui-inline-actions">
@@ -130,7 +130,7 @@
                     <button
                       *ngFor="let language of mediaLanguages"
                       type="button"
-                      class="language-toggle-btn ui-language-toolbar__button"
+                      class="ui-language-toolbar__button image-language-button"
                       [class.active]="
                         getFormState(section.usageKey).activeLanguage ===
                         language
@@ -139,11 +139,28 @@
                         isLanguageComplete(section.usageKey, language)
                       "
                       [class.incomplete]="
-                        !isLanguageComplete(section.usageKey, language)
+                        isLanguageIncomplete(section.usageKey, language)
+                      "
+                      [class.empty]="
+                        !isLanguageStarted(section.usageKey, language)
                       "
                       (click)="setActiveLanguage(section.usageKey, language)"
                     >
-                      {{ mediaLanguageLabels[language] }}
+                      <span class="image-language-button__label">
+                        {{ mediaLanguageLabels[language] }}
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isLanguageComplete(section.usageKey, language)"
+                      >
+                        OK
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isLanguageIncomplete(section.usageKey, language)"
+                      >
+                        ...
+                      </span>
                     </button>
                   </div>
                 </div>

frontend/src/app/features/admin/pages/admin-home-media.component.scss

@@ -1,3 +1,88 @@
+.section-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+.media-panel-header {
+  margin-bottom: var(--space-3);
+}
+
+.group-header {
+  margin-bottom: var(--space-3);
+}
+
+.header-copy {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.image-language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 3.15rem;
+  background: #ffffff;
+  color: var(--color-text-muted);
+}
+
+.image-language-button.empty {
+  opacity: 0.76;
+}
+
+.image-language-button.complete {
+  border-color: #b8ddc2;
+}
+
+.image-language-button.incomplete {
+  border-color: #e8c8c2;
+}
+
+.image-language-button.active {
+  background: #fff5b8;
+  border-color: var(--color-brand);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+.image-language-button__label {
+  line-height: 1;
+}
+
+.image-language-button__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 0.62rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.image-language-button.complete .image-language-button__state {
+  background: #dcefdc;
+  color: #25603b;
+}
+
+.image-language-button.incomplete .image-language-button__state {
+  background: #f7ddd7;
+  color: #944329;
+}
+
 .form-field--wide {
   grid-column: 1 / -1;
 }
@@ -100,6 +185,11 @@
 }
 
 @media (max-width: 720px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .media-panel-meta {
     justify-content: flex-start;
   }

frontend/src/app/features/admin/pages/admin-home-media.component.ts

@@ -1,5 +1,11 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import {
+  Component,
+  PLATFORM_ID,
+  inject,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { of, switchMap } from 'rxjs';
 import {
@@ -17,12 +23,16 @@ type HomeSectionKey =
   | 'capability-prototyping'
   | 'capability-custom-parts'
   | 'capability-small-series'
-  | 'capability-cad';
+  | 'capability-cad'
+  | 'joe'
+  | 'matteo';
+
+type HomeMediaUsageType = 'HOME_SECTION' | 'ABOUT_MEMBER';
 
 interface HomeMediaSectionConfig {
-  usageType: 'HOME_SECTION';
+  usageType: HomeMediaUsageType;
   usageKey: HomeSectionKey;
-  groupId: 'galleries' | 'capabilities';
+  groupId: 'galleries' | 'capabilities' | 'about-members';
   title: string;
   preferredVariantName: 'card' | 'hero';
 }
@@ -81,6 +91,7 @@ const MEDIA_LANGUAGE_LABELS: Readonly<Record<AdminMediaLanguage, string>> = {
   styleUrl: './admin-home-media.component.scss',
 })
 export class AdminHomeMediaComponent implements OnInit, OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminMediaService = inject(AdminMediaService);
   readonly mediaLanguages = SUPPORTED_MEDIA_LANGUAGES;
   readonly mediaLanguageLabels = MEDIA_LANGUAGE_LABELS;
@@ -94,6 +105,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       id: 'capabilities',
       title: 'Cosa puoi ottenere',
     },
+    {
+      id: 'about-members',
+      title: 'Chi siamo',
+    },
   ];
 
   readonly sectionConfigs: readonly HomeMediaSectionConfig[] = [
@@ -139,6 +154,20 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       title: 'Home: consulenza e CAD',
       preferredVariantName: 'card',
     },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'joe',
+      groupId: 'about-members',
+      title: 'Chi siamo: Joe',
+      preferredVariantName: 'card',
+    },
+    {
+      usageType: 'ABOUT_MEMBER',
+      usageKey: 'matteo',
+      groupId: 'about-members',
+      title: 'Chi siamo: Matteo',
+      preferredVariantName: 'card',
+    },
   ];
 
   sections: HomeMediaSectionView[] = [];
@@ -155,6 +184,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
       'capability-custom-parts': this.createEmptyFormState(),
       'capability-small-series': this.createEmptyFormState(),
       'capability-cad': this.createEmptyFormState(),
+      joe: this.createEmptyFormState(),
+      matteo: this.createEmptyFormState(),
     };
 
   get configuredSectionCount(): number {
@@ -219,7 +250,8 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
 
     this.revokePreviewUrl(formState.previewUrl);
     formState.file = file;
-    formState.previewUrl = file ? URL.createObjectURL(file) : null;
+    formState.previewUrl =
+      file && this.isBrowser ? URL.createObjectURL(file) : null;
 
     if (file && this.areAllTitlesBlank(formState.translations)) {
       const nextTitle = this.deriveDefaultTitle(file.name);
@@ -432,6 +464,25 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     );
   }
 
+  isLanguageStarted(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return this.isTranslationStarted(
+      this.getFormState(sectionKey).translations[language],
+    );
+  }
+
+  isLanguageIncomplete(
+    sectionKey: HomeSectionKey,
+    language: AdminMediaLanguage,
+  ): boolean {
+    return (
+      this.isLanguageStarted(sectionKey, language) &&
+      !this.isLanguageComplete(sectionKey, language)
+    );
+  }
+
   getItemTranslation(
     item: HomeMediaItem,
     language: AdminMediaLanguage,
@@ -540,6 +591,9 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
   }
 
   private revokePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
     if (!previewUrl?.startsWith('blob:')) {
       return;
     }
@@ -619,6 +673,10 @@ export class AdminHomeMediaComponent implements OnInit, OnDestroy {
     return !!translation.title.trim() && !!translation.altText.trim();
   }
 
+  private isTranslationStarted(translation: AdminMediaTranslation): boolean {
+    return !!translation.title.trim() || !!translation.altText.trim();
+  }
+
   private validateTranslations(
     translations: Record<AdminMediaLanguage, AdminMediaTranslation>,
   ): string | null {

frontend/src/app/features/admin/pages/admin-login.component.scss

@@ -33,23 +33,36 @@ form {
 }
 
 label {
+  font-size: 0.9rem;
   font-weight: 600;
+  color: var(--color-text-muted);
 }
 
 input {
   border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font: inherit;
   font-size: 1rem;
 }
 
+input:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: var(--focus-ring);
+}
+
 button {
   border: 0;
   border-radius: var(--radius-md);
   background: var(--color-brand);
   color: var(--color-neutral-900);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  font: inherit;
   font-weight: 600;
+  line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }

frontend/src/app/features/admin/pages/admin-sessions.component.html

@@ -1,10 +1,8 @@
-<section class="section-card ui-section-card">
-  <header class="section-header ui-section-header">
-    <div class="ui-section-header__copy">
-      <h2 class="ui-section-header__title">Sessioni quote</h2>
-      <p class="ui-section-header__description">
-        Sessioni create dal configuratore con stato e conversione ordine.
-      </p>
+<section class="section-card">
+  <header class="section-header">
+    <div>
+      <h2>Sessioni quote</h2>
+      <p>Sessioni create dal configuratore con stato e conversione ordine.</p>
     </div>
     <button
       type="button"

frontend/src/app/features/admin/pages/admin-sessions.component.scss

@@ -4,6 +4,22 @@
   gap: var(--space-5);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+
+.section-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
 .error {
   color: var(--color-danger-500);
   margin: 0;
@@ -69,6 +85,11 @@
 }
 
 @media (max-width: 900px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .actions {
     flex-wrap: wrap;
   }

frontend/src/app/features/admin/pages/admin-sessions.component.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, PLATFORM_ID, inject, OnInit } from '@angular/core';
 import {
   AdminOperationsService,
   AdminQuoteSession,
@@ -15,6 +15,7 @@ import { CopyOnClickDirective } from '../../../shared/directives/copy-on-click.d
   styleUrl: './admin-sessions.component.scss',
 })
 export class AdminSessionsComponent implements OnInit {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   private readonly adminOperationsService = inject(AdminOperationsService);
 
   sessions: AdminQuoteSession[] = [];
@@ -51,9 +52,11 @@ export class AdminSessionsComponent implements OnInit {
       return;
     }
 
-    const confirmed = window.confirm(
-      `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
-    );
+    const confirmed =
+      this.isBrowser &&
+      window.confirm(
+        `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
+      );
     if (!confirmed) {
       return;
     }

frontend/src/app/features/admin/pages/admin-shell.component.html

@@ -18,6 +18,7 @@
           <a routerLink="sessions" routerLinkActive="active">Sessioni</a>
           <a routerLink="cad-invoices" routerLinkActive="active">Fatture CAD</a>
           <a routerLink="home-media" routerLinkActive="active">Media home</a>
+          <a routerLink="shop" routerLinkActive="active">Shop</a>
         </nav>
       </div>
 

frontend/src/app/features/admin/pages/admin-shell.component.scss

@@ -97,6 +97,168 @@
   min-width: 0;
 }
 
+:host ::ng-deep .content .ui-form-control,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
+:host ::ng-deep .content select,
+:host ::ng-deep .content textarea {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 1rem;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+:host ::ng-deep .content .ui-form-control:focus,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
+:host ::ng-deep .content select:focus,
+:host ::ng-deep .content textarea:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: var(--focus-ring);
+}
+
+:host ::ng-deep .content .ui-form-control:disabled,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
+:host ::ng-deep .content select:disabled,
+:host ::ng-deep .content textarea:disabled {
+  background: var(--color-surface-muted);
+  cursor: not-allowed;
+}
+
+:host ::ng-deep .content select,
+:host ::ng-deep .content select.ui-form-control {
+  appearance: auto;
+  background-image: none;
+  background-position: initial;
+  background-size: initial;
+  padding-right: var(--space-2);
+}
+
+:host ::ng-deep .content .ui-form-caption,
+:host ::ng-deep .content .form-field > span,
+:host ::ng-deep .content .toolbar-field > span,
+:host ::ng-deep .content .form-grid label > span,
+:host ::ng-deep .content .status-editor label,
+:host ::ng-deep .content .status-editor-field label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+:host ::ng-deep .content button,
+:host ::ng-deep .content .ui-button {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-brand);
+  color: var(--color-neutral-900);
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+:host ::ng-deep .content button:hover:not(:disabled),
+:host ::ng-deep .content .ui-button:hover:not(:disabled) {
+  background: var(--color-brand-hover);
+}
+
+:host ::ng-deep .content button:disabled,
+:host ::ng-deep .content .ui-button:disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+:host ::ng-deep .content .ui-button--ghost,
+:host ::ng-deep .content .ghost,
+:host ::ng-deep .content .btn-secondary,
+:host ::ng-deep .content .panel-toggle {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:host ::ng-deep .content .ui-button--ghost:hover:not(:disabled),
+:host ::ng-deep .content .ghost:hover:not(:disabled),
+:host ::ng-deep .content .btn-secondary:hover:not(:disabled),
+:host ::ng-deep .content .panel-toggle:hover:not(:disabled) {
+  background: var(--color-surface-muted);
+}
+
+:host ::ng-deep .content .ui-button--danger,
+:host ::ng-deep .content .btn-delete {
+  background: var(--color-danger-500);
+  color: #ffffff;
+}
+
+:host ::ng-deep .content .ui-button--danger:hover:not(:disabled),
+:host ::ng-deep .content .btn-delete:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+:host ::ng-deep .content .ui-button--ghost-danger {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:host ::ng-deep .content .ui-button--ghost-danger:hover:not(:disabled) {
+  background: #fff0f0;
+  border-color: #d9534f;
+}
+
+:host ::ng-deep .content .ui-checkbox {
+  gap: 0.85rem;
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-checkbox__mark {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:host ::ng-deep .content .ui-file-picker__button,
+:host ::ng-deep .content .ui-file-picker__name {
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar {
+  padding: var(--space-2);
+}
+
+:host ::ng-deep .content .ui-language-toolbar__copy span,
+:host ::ng-deep .content .ui-language-toolbar__copy p,
+:host ::ng-deep .content .ui-language-toolbar__button {
+  font-size: 0.9rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar__button {
+  min-width: 2.8rem;
+  padding: 0.4rem 0.6rem;
+}
+
 @media (max-width: 1240px) {
   .admin-shell {
     grid-template-columns: 220px minmax(0, 1fr);

frontend/src/app/features/admin/pages/admin-shop.component.scss

@@ -0,0 +1,568 @@
+.admin-shop {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.admin-shop .image-language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 3.15rem;
+  background: #ffffff;
+  color: var(--color-text-muted);
+}
+
+.admin-shop .image-language-button.empty {
+  opacity: 0.76;
+}
+
+.admin-shop .image-language-button.complete {
+  border-color: #b8ddc2;
+}
+
+.admin-shop .image-language-button.incomplete {
+  border-color: #e8c8c2;
+}
+
+.admin-shop .image-language-button.active {
+  background: #fff5b8;
+  border-color: var(--color-brand);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+.image-language-button__label {
+  line-height: 1;
+}
+
+.image-language-button__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 0.62rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.admin-shop .image-language-button.complete .image-language-button__state {
+  background: #dcefdc;
+  color: #25603b;
+}
+
+.admin-shop .image-language-button.incomplete .image-language-button__state {
+  background: #f7ddd7;
+  color: #944329;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.shop-header {
+  align-items: flex-start;
+}
+
+.shop-header h1 {
+  margin: 0;
+}
+
+.shop-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
+.workspace {
+  align-items: start;
+}
+
+.resizable-workspace {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.resizable-workspace .list-panel {
+  flex: 0 0 var(--shop-list-panel-width, 53%);
+  width: var(--shop-list-panel-width, 53%);
+}
+
+.resizable-workspace .detail-panel {
+  flex: 1 1 auto;
+}
+
+.list-panel,
+.detail-panel {
+  min-width: 0;
+}
+
+.panel-block,
+.list-panel,
+.detail-panel,
+.category-manager,
+.category-editor,
+.detail-stack,
+.variant-stack,
+.image-stack,
+.media-grid,
+.model-summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.panel-heading h2,
+.panel-heading h3,
+.panel-heading h4,
+.detail-header h2 {
+  margin: 0;
+}
+
+.panel-heading p,
+.detail-header p {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr);
+  gap: var(--space-2);
+}
+
+.list-toolbar > * {
+  min-width: 0;
+}
+
+.category-manager {
+  gap: var(--space-2);
+}
+
+.category-manager__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  align-items: flex-start;
+}
+
+.category-manager__header h3 {
+  margin: 0;
+}
+
+.category-manager__header p {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.category-manager__body {
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.category-list {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 560px;
+  overflow: auto;
+}
+
+.category-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  padding: var(--space-2);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.category-item.active {
+  border-color: var(--color-brand);
+  background: #fff9de;
+}
+
+.category-item__main {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+  display: grid;
+  gap: 4px;
+}
+
+.category-item__main strong,
+.product-cell strong,
+.image-item__header strong {
+  overflow-wrap: anywhere;
+}
+
+.category-item__main span,
+.product-cell span {
+  font-size: 0.84rem;
+  color: var(--color-text-muted);
+}
+
+.category-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.category-editor {
+  gap: var(--space-3);
+}
+
+.textarea-control {
+  resize: vertical;
+  min-height: 82px;
+}
+
+.textarea-control--large {
+  min-height: 136px;
+}
+
+.rich-text-field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.rich-text-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.admin-shop .rich-text-toolbar__button {
+  border: 1px solid var(--color-border) !important;
+  border-radius: var(--radius-sm) !important;
+  background: #fff !important;
+  color: var(--color-text) !important;
+  min-height: 2rem;
+  padding: 0.28rem 0.56rem !important;
+  font-size: 0.82rem;
+}
+
+.admin-shop .rich-text-toolbar__button:hover:not(:disabled) {
+  border-color: #cbb88a !important;
+  background: #fffdf4 !important;
+}
+
+.rich-text-editor {
+  overflow-y: auto;
+  padding: 0.62rem 0.72rem;
+  line-height: 1.62;
+}
+
+.rich-text-editor:focus-visible {
+  outline: none;
+}
+
+.rich-text-editor:empty::before {
+  content: "Scrivi la descrizione del prodotto...";
+  color: var(--color-text-muted);
+}
+
+.rich-text-editor p,
+.rich-text-editor div {
+  margin: 0 0 0.62rem;
+}
+
+.rich-text-editor ul,
+.rich-text-editor ol {
+  margin: 0 0 0.62rem 1.25rem;
+  padding: 0;
+}
+
+.rich-text-editor li + li {
+  margin-top: 0.22rem;
+}
+
+.toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.toggle-row--compact {
+  align-items: flex-start;
+}
+
+.form-field--wide {
+  grid-column: 1 / -1;
+}
+
+.input-with-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-2);
+}
+
+.seo-counter {
+  justify-self: end;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+}
+
+.seo-counter--danger {
+  color: var(--color-danger-500);
+}
+
+.product-cell {
+  display: grid;
+  gap: 4px;
+}
+
+tbody tr {
+  cursor: pointer;
+}
+
+tbody tr.selected {
+  background: #fff4c0;
+}
+
+.detail-panel .ui-meta-item {
+  padding: var(--space-2);
+}
+
+.panel-resizer {
+  position: relative;
+  flex: 0 0 16px;
+  align-self: stretch;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+}
+
+.panel-resizer::before {
+  content: "";
+  position: absolute;
+  top: 22px;
+  bottom: 22px;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--color-border);
+}
+
+.panel-resizer__grip {
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 64px;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle, #b9b2a1 1.2px, transparent 1.2px) center / 8px 10px
+      repeat-y,
+    #fffdfa;
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.detail-stack {
+  gap: var(--space-3);
+}
+
+.variant-card,
+.image-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  padding: var(--space-3);
+  box-shadow: var(--shadow-sm);
+}
+
+.variant-card {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.variant-card__header,
+.image-item__header,
+.image-item__controls {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  align-items: flex-start;
+}
+
+.variant-card__header p,
+.image-meta {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.variant-card__actions,
+.image-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}
+
+.material-stock-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: baseline;
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+}
+
+.material-stock-summary strong {
+  color: var(--color-text);
+}
+
+.locked-panel,
+.loading-state,
+.image-fallback {
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background: #fbfaf6;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.preview-card,
+.image-item__preview {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-bg-card);
+}
+
+.preview-card {
+  aspect-ratio: 16 / 10;
+}
+
+.preview-card img,
+.image-item__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-item {
+  display: grid;
+  grid-template-columns: 148px minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.image-item__preview {
+  aspect-ratio: 1;
+}
+
+.image-item__content {
+  display: grid;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.link-button {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-loading {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+@media (max-width: 1480px) {
+  .category-manager__body {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1180px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .list-toolbar,
+  .ui-form-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .image-item {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1060px) {
+  .resizable-workspace {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
+
+  .panel-resizer {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .detail-header,
+  .panel-heading,
+  .category-manager__header,
+  .variant-card__header,
+  .image-item__header,
+  .image-item__controls {
+    flex-direction: column;
+  }
+
+  .input-with-action {
+    grid-template-columns: 1fr;
+  }
+}

frontend/src/app/features/admin/services/admin-shop.service.ts

@@ -0,0 +1,363 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../../../environments/environment';
+import {
+  AdminCreateMediaUsagePayload,
+  AdminMediaLanguage,
+  AdminMediaService,
+  AdminMediaTranslation,
+  AdminMediaUsage,
+  AdminMediaUploadPayload,
+  AdminMediaAsset,
+  AdminUpdateMediaUsagePayload,
+} from './admin-media.service';
+
+export interface AdminMediaTextTranslation {
+  title: string;
+  altText: string;
+}
+
+export interface AdminShopCategoryRef {
+  id: string;
+  slug: string;
+  name: string;
+}
+
+export interface AdminShopCategory {
+  id: string;
+  parentCategoryId: string | null;
+  parentCategoryName: string | null;
+  slug: string;
+  name: string;
+  description: string | null;
+  seoTitle: string | null;
+  seoDescription: string | null;
+  ogTitle: string | null;
+  ogDescription: string | null;
+  indexable: boolean;
+  isActive: boolean;
+  sortOrder: number;
+  depth: number;
+  childCount: number;
+  directProductCount: number;
+  descendantProductCount: number;
+  mediaUsageType: string;
+  mediaUsageKey: string;
+  breadcrumbs: AdminShopCategoryRef[];
+  children: AdminShopCategory[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AdminUpsertShopCategoryPayload {
+  parentCategoryId?: string | null;
+  slug: string;
+  name: string;
+  description?: string;
+  seoTitle?: string;
+  seoDescription?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  indexable: boolean;
+  isActive: boolean;
+  sortOrder: number;
+}
+
+export interface AdminShopProductVariant {
+  id: string;
+  sku: string | null;
+  variantLabel: string;
+  colorName: string;
+  colorHex: string | null;
+  internalMaterialCode: string;
+  priceChf: number;
+  isDefault: boolean;
+  isActive: boolean;
+  sortOrder: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AdminShopProductModel {
+  url: string;
+  originalFilename: string;
+  mimeType: string;
+  fileSizeBytes: number;
+  boundingBoxXMm: number | null;
+  boundingBoxYMm: number | null;
+  boundingBoxZMm: number | null;
+}
+
+export interface AdminPublicMediaVariant {
+  url: string;
+  widthPx: number | null;
+  heightPx: number | null;
+  mimeType: string | null;
+}
+
+export interface AdminPublicMediaUsage {
+  mediaAssetId: string;
+  title: string | null;
+  altText: string | null;
+  usageType: string;
+  usageKey: string;
+  sortOrder: number;
+  isPrimary: boolean;
+  thumb: AdminPublicMediaVariant | null;
+  card: AdminPublicMediaVariant | null;
+  hero: AdminPublicMediaVariant | null;
+}
+
+export interface AdminShopProduct {
+  id: string;
+  categoryId: string;
+  categoryName: string;
+  categorySlug: string;
+  slug: string;
+  name: string;
+  nameIt: string;
+  nameEn: string;
+  nameDe: string;
+  nameFr: string;
+  excerpt: string | null;
+  excerptIt: string | null;
+  excerptEn: string | null;
+  excerptDe: string | null;
+  excerptFr: string | null;
+  description: string | null;
+  descriptionIt: string | null;
+  descriptionEn: string | null;
+  descriptionDe: string | null;
+  descriptionFr: string | null;
+  seoTitle: string | null;
+  seoTitleIt: string | null;
+  seoTitleEn: string | null;
+  seoTitleDe: string | null;
+  seoTitleFr: string | null;
+  seoDescription: string | null;
+  seoDescriptionIt: string | null;
+  seoDescriptionEn: string | null;
+  seoDescriptionDe: string | null;
+  seoDescriptionFr: string | null;
+  ogTitle: string | null;
+  ogDescription: string | null;
+  indexable: boolean;
+  isFeatured: boolean;
+  isActive: boolean;
+  sortOrder: number;
+  variantCount: number;
+  activeVariantCount: number;
+  priceFromChf: number;
+  priceToChf: number;
+  mediaUsageType: string;
+  mediaUsageKey: string;
+  mediaUsages: AdminShopMediaUsage[];
+  images: AdminPublicMediaUsage[];
+  model3d: AdminShopProductModel | null;
+  variants: AdminShopProductVariant[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AdminShopMediaUsage
+  extends Omit<AdminMediaUsage, 'translations'> {
+  translations: Record<AdminMediaLanguage, AdminMediaTranslation>;
+}
+
+export interface AdminUpsertShopProductVariantPayload {
+  id?: string;
+  sku?: string;
+  variantLabel?: string;
+  colorName: string;
+  colorHex?: string;
+  internalMaterialCode: string;
+  priceChf: number;
+  isDefault: boolean;
+  isActive: boolean;
+  sortOrder: number;
+}
+
+export interface AdminUpsertShopProductPayload {
+  categoryId: string;
+  slug: string;
+  name: string;
+  nameIt: string;
+  nameEn: string;
+  nameDe: string;
+  nameFr: string;
+  excerpt?: string;
+  excerptIt?: string;
+  excerptEn?: string;
+  excerptDe?: string;
+  excerptFr?: string;
+  description?: string;
+  descriptionIt?: string;
+  descriptionEn?: string;
+  descriptionDe?: string;
+  descriptionFr?: string;
+  seoTitle?: string;
+  seoTitleIt?: string;
+  seoTitleEn?: string;
+  seoTitleDe?: string;
+  seoTitleFr?: string;
+  seoDescription?: string;
+  seoDescriptionIt?: string;
+  seoDescriptionEn?: string;
+  seoDescriptionDe?: string;
+  seoDescriptionFr?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  indexable: boolean;
+  isFeatured: boolean;
+  isActive: boolean;
+  sortOrder: number;
+  variants: AdminUpsertShopProductVariantPayload[];
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AdminShopService {
+  private readonly http = inject(HttpClient);
+  private readonly adminMediaService = inject(AdminMediaService);
+  private readonly productsBaseUrl = `${environment.apiUrl}/api/admin/shop/products`;
+  private readonly categoriesBaseUrl = `${environment.apiUrl}/api/admin/shop/categories`;
+
+  getCategories(): Observable<AdminShopCategory[]> {
+    return this.http.get<AdminShopCategory[]>(this.categoriesBaseUrl, {
+      withCredentials: true,
+    });
+  }
+
+  getCategoryTree(): Observable<AdminShopCategory[]> {
+    return this.http.get<AdminShopCategory[]>(
+      `${this.categoriesBaseUrl}/tree`,
+      {
+        withCredentials: true,
+      },
+    );
+  }
+
+  getCategory(categoryId: string): Observable<AdminShopCategory> {
+    return this.http.get<AdminShopCategory>(
+      `${this.categoriesBaseUrl}/${categoryId}`,
+      { withCredentials: true },
+    );
+  }
+
+  createCategory(
+    payload: AdminUpsertShopCategoryPayload,
+  ): Observable<AdminShopCategory> {
+    return this.http.post<AdminShopCategory>(this.categoriesBaseUrl, payload, {
+      withCredentials: true,
+    });
+  }
+
+  updateCategory(
+    categoryId: string,
+    payload: AdminUpsertShopCategoryPayload,
+  ): Observable<AdminShopCategory> {
+    return this.http.put<AdminShopCategory>(
+      `${this.categoriesBaseUrl}/${categoryId}`,
+      payload,
+      { withCredentials: true },
+    );
+  }
+
+  deleteCategory(categoryId: string): Observable<void> {
+    return this.http.delete<void>(`${this.categoriesBaseUrl}/${categoryId}`, {
+      withCredentials: true,
+    });
+  }
+
+  getProducts(): Observable<AdminShopProduct[]> {
+    return this.http.get<AdminShopProduct[]>(this.productsBaseUrl, {
+      withCredentials: true,
+    });
+  }
+
+  getProduct(productId: string): Observable<AdminShopProduct> {
+    return this.http.get<AdminShopProduct>(
+      `${this.productsBaseUrl}/${productId}`,
+      {
+        withCredentials: true,
+      },
+    );
+  }
+
+  createProduct(
+    payload: AdminUpsertShopProductPayload,
+  ): Observable<AdminShopProduct> {
+    return this.http.post<AdminShopProduct>(this.productsBaseUrl, payload, {
+      withCredentials: true,
+    });
+  }
+
+  updateProduct(
+    productId: string,
+    payload: AdminUpsertShopProductPayload,
+  ): Observable<AdminShopProduct> {
+    return this.http.put<AdminShopProduct>(
+      `${this.productsBaseUrl}/${productId}`,
+      payload,
+      { withCredentials: true },
+    );
+  }
+
+  deleteProduct(productId: string): Observable<void> {
+    return this.http.delete<void>(`${this.productsBaseUrl}/${productId}`, {
+      withCredentials: true,
+    });
+  }
+
+  uploadProductModel(
+    productId: string,
+    file: File,
+  ): Observable<AdminShopProduct> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return this.http.post<AdminShopProduct>(
+      `${this.productsBaseUrl}/${productId}/model`,
+      formData,
+      { withCredentials: true },
+    );
+  }
+
+  deleteProductModel(productId: string): Observable<void> {
+    return this.http.delete<void>(
+      `${this.productsBaseUrl}/${productId}/model`,
+      {
+        withCredentials: true,
+      },
+    );
+  }
+
+  listMediaAssets(): Observable<AdminMediaAsset[]> {
+    return this.adminMediaService.listAssets();
+  }
+
+  uploadMediaAsset(
+    file: File,
+    payload: AdminMediaUploadPayload,
+  ): Observable<AdminMediaAsset> {
+    return this.adminMediaService.uploadAsset(file, payload);
+  }
+
+  createMediaUsage(
+    payload: AdminCreateMediaUsagePayload,
+  ): Observable<AdminMediaUsage> {
+    return this.adminMediaService.createUsage(payload);
+  }
+
+  updateMediaUsage(
+    usageId: string,
+    payload: AdminUpdateMediaUsagePayload,
+  ): Observable<AdminMediaUsage> {
+    return this.adminMediaService.updateUsage(usageId, payload);
+  }
+
+  deleteMediaUsage(usageId: string): Observable<void> {
+    return this.adminMediaService.deleteUsage(usageId);
+  }
+}

frontend/src/app/features/calculator/calculator-page.component.html

@@ -1,6 +1,6 @@
-<div class="container hero">
-  <h1>{{ "CALC.TITLE" | translate }}</h1>
-  <p class="subtitle">{{ "CALC.SUBTITLE" | translate }}</p>
+<div class="container ui-simple-hero">
+  <h1 class="ui-simple-hero__title">{{ "CALC.TITLE" | translate }}</h1>
+  <p class="ui-simple-hero__subtitle">{{ "CALC.SUBTITLE" | translate }}</p>
 
   @if (error()) {
     <app-alert type="error">{{ errorKey() | translate }}</app-alert>
@@ -8,7 +8,7 @@
 </div>
 
 @if (step() === "success") {
-  <div class="container hero">
+  <div class="container ui-simple-hero">
     <app-success-state
       context="calc"
       (action)="onNewQuote()"

frontend/src/app/features/calculator/calculator-page.component.scss

@@ -1,14 +1,3 @@
-.hero {
-  padding: var(--space-12) 0;
-  text-align: center;
-}
-.subtitle {
-  font-size: 1.25rem;
-  color: var(--color-text-muted);
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 .error-action {
   display: flex;
   justify-content: center;

frontend/src/app/features/calculator/calculator-page.component.ts

@@ -4,9 +4,12 @@ import {
   signal,
   ViewChild,
   ElementRef,
+  Inject,
   OnInit,
+  Optional,
+  PLATFORM_ID,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { forkJoin, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -53,6 +56,7 @@ type TrackedPrintSettings = {
   styleUrl: './calculator-page.component.scss',
 })
 export class CalculatorPageComponent implements OnInit {
+  private readonly isBrowser: boolean;
   mode = signal<'easy' | 'advanced'>('easy');
   step = signal<'upload' | 'quote' | 'details' | 'success'>('upload');
 
@@ -85,7 +89,10 @@ export class CalculatorPageComponent implements OnInit {
     private router: Router,
     private route: ActivatedRoute,
     private languageService: LanguageService,
-  ) {}
+    @Optional() @Inject(PLATFORM_ID) platformId?: Object,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId ?? 'browser');
+  }
 
   ngOnInit() {
     this.route.data.subscribe((data) => {
@@ -260,7 +267,7 @@ export class CalculatorPageComponent implements OnInit {
 
     // Auto-scroll on mobile to make analysis visible
     setTimeout(() => {
-      if (this.resultCol && window.innerWidth < 768) {
+      if (this.isBrowser && this.resultCol && window.innerWidth < 768) {
         this.resultCol.nativeElement.scrollIntoView({
           behavior: 'smooth',
           block: 'start',

frontend/src/app/features/contact/components/contact-form/contact-form.component.ts

@@ -1,5 +1,12 @@
-import { Component, signal, effect, inject, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import {
+  Component,
+  signal,
+  effect,
+  inject,
+  OnDestroy,
+  PLATFORM_ID,
+} from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
   ReactiveFormsModule,
   FormBuilder,
@@ -16,6 +23,7 @@ import {
 import { QuoteEstimatorService } from '../../../calculator/services/quote-estimator.service';
 import { QuoteRequestService } from '../../../../core/services/quote-request.service';
 import { LanguageService } from '../../../../core/services/language.service';
+import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';
 
 interface FilePreview {
   file: File;
@@ -23,8 +31,6 @@ interface FilePreview {
   type: 'image' | 'video' | 'pdf' | '3d' | 'document' | 'other';
 }
 
-import { SuccessStateComponent } from '../../../../shared/components/success-state/success-state.component';
-
 @Component({
   selector: 'app-contact-form',
   standalone: true,
@@ -41,6 +47,7 @@ import { SuccessStateComponent } from '../../../../shared/components/success-sta
   styleUrl: './contact-form.component.scss',
 })
 export class ContactFormComponent implements OnDestroy {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   form: FormGroup;
   sent = signal(false);
   files = signal<FilePreview[]>([]);
@@ -127,9 +134,10 @@ export class ContactFormComponent implements OnDestroy {
         return {
           file: f,
           type,
-          url: this.shouldCreatePreview(type)
-            ? URL.createObjectURL(f)
-            : undefined,
+          url:
+            this.isBrowser && this.shouldCreatePreview(type)
+              ? URL.createObjectURL(f)
+              : undefined,
         };
       });
       this.files.set(filePreviews);
@@ -185,9 +193,10 @@ export class ContactFormComponent implements OnDestroy {
       const preview: FilePreview = {
         file,
         type,
-        url: this.shouldCreatePreview(type)
-          ? URL.createObjectURL(file)
-          : undefined,
+        url:
+          this.isBrowser && this.shouldCreatePreview(type)
+            ? URL.createObjectURL(file)
+            : undefined,
       };
       this.files.update((files) => [...files, preview]);
     });
@@ -354,6 +363,9 @@ export class ContactFormComponent implements OnDestroy {
   }
 
   private revokePreviewUrl(file: FilePreview): void {
+    if (!this.isBrowser) {
+      return;
+    }
     if (file.url?.startsWith('blob:')) {
       URL.revokeObjectURL(file.url);
     }

frontend/src/app/features/contact/contact-page.component.html

@@ -1,9 +1,9 @@
-<section class="contact-hero">
-  <div class="container">
-    <h1>{{ "CONTACT.TITLE" | translate }}</h1>
-    <p class="subtitle">{{ "CONTACT.HERO_SUBTITLE" | translate }}</p>
-  </div>
-</section>
+<div class="container ui-simple-hero contact-hero">
+  <h1 class="ui-simple-hero__title">{{ "CONTACT.TITLE" | translate }}</h1>
+  <p class="ui-simple-hero__subtitle">
+    {{ "CONTACT.HERO_SUBTITLE" | translate }}
+  </p>
+</div>
 
 <div class="container content">
   <app-card>

frontend/src/app/features/contact/contact-page.component.scss

@@ -1,13 +1,7 @@
 .contact-hero {
-  padding: 3rem 0 2rem;
   background: var(--color-bg);
-  text-align: center;
-}
-.subtitle {
-  color: var(--color-text-muted);
-  max-width: 640px;
-  margin: var(--space-3) auto 0;
 }
+
 .content {
   padding: 2rem 0 5rem;
   max-width: 800px;

frontend/src/app/features/order/order.component.html

@@ -1,4 +1,4 @@
-<div class="container ui-page-hero ui-page-hero--spacious">
+<div class="container ui-page-hero ui-page-hero--spacious order-hero">
   <h1 class="ui-page-title">
     {{ "TRACKING.TITLE" | translate }}
     <ng-container *ngIf="order()">

frontend/src/app/features/order/order.component.scss

@@ -1,3 +1,7 @@
+.order-hero {
+  padding-top: calc(var(--space-12) + var(--space-5));
+}
+
 .subtitle {
   font-size: 1.125rem;
 }
@@ -244,16 +248,17 @@
 .status-timeline {
   display: flex;
   justify-content: space-between;
-  margin-bottom: var(--space-8);
+  margin-top: var(--space-5);
+  margin-bottom: var(--space-10);
+  padding: 0 var(--space-2);
   position: relative;
-  /* padding: var(--space-6); */ /* Removed if it was here to match non-card layout */
 
   &::before {
     content: "";
     position: absolute;
     top: 15px;
-    left: 12.5%;
-    right: 12.5%;
+    left: calc(12.5% + var(--space-2));
+    right: calc(12.5% + var(--space-2));
     height: 2px;
     background: var(--color-border);
     z-index: 1;
@@ -279,13 +284,14 @@
     align-items: center;
     justify-content: center;
     font-weight: 600;
-    margin-bottom: var(--space-2);
+    margin-bottom: var(--space-3);
     color: var(--color-text-muted);
     transition: all 0.3s ease;
   }
 
   .label {
     font-size: 0.85rem;
+    line-height: 1.2;
     color: var(--color-text-muted);
     font-weight: 500;
   }
@@ -315,7 +321,14 @@
 }
 
 @media (max-width: 600px) {
+  .order-hero {
+    padding-top: calc(var(--space-8) + var(--space-4));
+  }
+
   .status-timeline {
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-8);
+    padding: 0;
     flex-direction: column;
     align-items: flex-start;
     gap: var(--space-4);

frontend/src/app/features/order/order.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, inject, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, OnInit, PLATFORM_ID, inject, signal } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
@@ -75,6 +75,7 @@ export class OrderComponent implements OnInit {
   private router = inject(Router);
   private quoteService = inject(QuoteEstimatorService);
   private translate = inject(TranslateService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 
   orderId: string | null = null;
   selectedPaymentMethod: 'twint' | 'bill' | null = 'twint';
@@ -115,6 +116,9 @@ export class OrderComponent implements OnInit {
   }
 
   downloadQrInvoice() {
+    if (!this.isBrowser) {
+      return;
+    }
     const orderId = this.orderId;
     if (!orderId) return;
     this.quoteService.getOrderConfirmation(orderId).subscribe({
@@ -153,7 +157,7 @@ export class OrderComponent implements OnInit {
 
   openTwintPayment(): void {
     const openUrl = this.twintOpenUrl();
-    if (typeof window !== 'undefined' && openUrl) {
+    if (this.isBrowser && openUrl) {
       window.open(openUrl, '_blank');
     }
   }

frontend/src/app/features/shop/components/product-card/product-card.component.html

@@ -1,5 +1,5 @@
 <article class="product-card">
-  <a class="media" [routerLink]="productLink()">
+  <a class="media" [routerLink]="productLink()" [state]="navigationState()">
     @if (imageUrl(); as imageUrl) {
       <img
         [src]="imageUrl"
@@ -13,10 +13,10 @@
     }
 
     <div class="card-badges">
-      @if (product().isFeatured) {
-        <span class="badge badge-featured">{{
-          "SHOP.FEATURED_BADGE" | translate
-        }}</span>
+      @if (hasModelPreview()) {
+        <span class="badge badge-model">
+          {{ "SHOP.MODEL_3D" | translate }}
+        </span>
       }
       @if (cartQuantity() > 0) {
         <span class="badge badge-cart">
@@ -29,13 +29,12 @@
   <div class="content">
     <div class="meta">
       <span class="category">{{ product().category.name }}</span>
-      @if (product().model3d) {
-        <span class="model-pill">{{ "SHOP.MODEL_3D" | translate }}</span>
-      }
     </div>
 
     <h3 class="name">
-      <a [routerLink]="productLink()">{{ product().name }}</a>
+      <a [routerLink]="productLink()" [state]="navigationState()">{{
+        product().name
+      }}</a>
     </h3>
 
     <p class="excerpt">
@@ -50,9 +49,23 @@
         }
       </div>
 
-      <a [routerLink]="productLink()" class="view-btn">{{
-        "SHOP.DETAILS" | translate
-      }}</a>
+      <div class="footer-actions">
+        <button
+          type="button"
+          class="cart-btn"
+          (click)="addToCart()"
+          [disabled]="!defaultVariantId() || addingToCart()"
+        >
+          {{ (addingToCart() ? "SHOP.ADDING" : "SHOP.ADD_CART") | translate }}
+        </button>
+
+        <a
+          [routerLink]="productLink()"
+          [state]="navigationState()"
+          class="view-btn"
+          >{{ "SHOP.DETAILS" | translate }}</a
+        >
+      </div>
     </div>
   </div>
 </article>

frontend/src/app/features/shop/components/product-card/product-card.component.scss

@@ -4,35 +4,26 @@
   border: 1px solid rgba(16, 24, 32, 0.08);
   border-radius: 1.1rem;
   overflow: hidden;
-  background: linear-gradient(
-    180deg,
-    rgba(255, 255, 255, 0.98),
-    rgba(248, 246, 241, 1)
-  );
-  box-shadow: 0 18px 40px rgba(16, 24, 32, 0.08);
+  background: #fff;
+  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.04);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
     border-color 0.2s ease;
 
   &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 22px 48px rgba(16, 24, 32, 0.14);
-    border-color: rgba(250, 207, 10, 0.42);
+    transform: translateY(-2px);
+    box-shadow: 0 16px 30px rgba(16, 24, 32, 0.08);
+    border-color: rgba(16, 24, 32, 0.14);
   }
 }
 
 .media {
   position: relative;
   display: block;
-  min-height: 244px;
-  background:
-    radial-gradient(
-      circle at top right,
-      rgba(250, 207, 10, 0.28),
-      transparent 42%
-    ),
-    linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
+  aspect-ratio: 1 / 1;
+  background: #f2eee5;
+  overflow: hidden;
 }
 
 .media img {
@@ -45,10 +36,16 @@
 .image-fallback {
   width: 100%;
   height: 100%;
-  min-height: 244px;
   display: flex;
   align-items: flex-end;
   padding: var(--space-5);
+  background:
+    radial-gradient(
+      circle at top right,
+      rgba(250, 207, 10, 0.24),
+      transparent 36%
+    ),
+    linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
 }
 
 .image-fallback span {
@@ -85,16 +82,17 @@
   text-transform: uppercase;
 }
 
-.badge-featured {
-  background: rgba(250, 207, 10, 0.92);
-  color: var(--color-neutral-900);
-}
-
 .badge-cart {
   background: rgba(16, 24, 32, 0.82);
   color: #fff;
 }
 
+.badge-model {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--color-text-muted);
+  border: 1px solid rgba(16, 24, 32, 0.08);
+}
+
 .content {
   display: grid;
   gap: var(--space-4);
@@ -108,8 +106,7 @@
   gap: 0.55rem;
 }
 
-.category,
-.model-pill {
+.category {
   font-size: 0.74rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -120,15 +117,6 @@
   font-weight: 700;
 }
 
-.model-pill {
-  display: inline-flex;
-  padding: 0.18rem 0.55rem;
-  border-radius: 999px;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  color: var(--color-text-muted);
-  background: rgba(255, 255, 255, 0.72);
-}
-
 .name {
   margin: 0;
   font-size: 1.2rem;
@@ -143,7 +131,13 @@
 .excerpt {
   margin: 0;
   color: var(--color-text-muted);
-  line-height: 1.55;
+  line-height: 1.45;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
 }
 
 .footer {
@@ -153,6 +147,12 @@
   gap: var(--space-4);
 }
 
+.footer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .pricing {
   display: grid;
   gap: 0.1rem;
@@ -168,27 +168,49 @@
   color: var(--color-text-muted);
 }
 
+.cart-btn,
 .view-btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   min-height: 2.35rem;
   padding: 0 0.9rem;
   border-radius: 999px;
-  background: rgba(16, 24, 32, 0.06);
-  color: var(--color-neutral-900);
   font-size: 0.9rem;
   font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.cart-btn {
+  background: var(--color-brand);
+  color: var(--color-neutral-900);
+  border-color: color-mix(in srgb, var(--color-brand) 72%, #d5ac00);
+  cursor: pointer;
+}
+
+.cart-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.view-btn {
+  background: rgba(16, 24, 32, 0.06);
+  color: var(--color-neutral-900);
   text-decoration: none;
 }
 
 @media (max-width: 640px) {
-  .media,
-  .image-fallback {
-    min-height: 220px;
-  }
-
   .footer {
     align-items: start;
     flex-direction: column;
   }
+
+  .footer-actions {
+    width: 100%;
+  }
+
+  .cart-btn,
+  .view-btn {
+    flex: 1;
+  }
 }

frontend/src/app/features/shop/components/product-card/product-card.component.ts

@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { finalize } from 'rxjs';
 import { ShopProductSummary, ShopService } from '../../services/shop.service';
+import { ShopRouteService } from '../../services/shop-route.service';
 
 @Component({
   selector: 'app-product-card',
@@ -12,16 +14,17 @@ import { ShopProductSummary, ShopService } from '../../services/shop.service';
   styleUrl: './product-card.component.scss',
 })
 export class ProductCardComponent {
+  private readonly router = inject(Router);
   private readonly shopService = inject(ShopService);
+  private readonly shopRouteService = inject(ShopRouteService);
 
   readonly product = input.required<ShopProductSummary>();
   readonly cartQuantity = input(0);
+  readonly addingToCart = signal(false);
 
-  readonly productLink = computed(() => [
-    '/shop',
-    this.product().category.slug,
-    this.product().slug,
-  ]);
+  readonly productLink = computed(() =>
+    this.shopRouteService.productCommands(this.product()),
+  );
 
   readonly imageUrl = computed(() => {
     const image = this.product().primaryImage;
@@ -32,6 +35,11 @@ export class ProductCardComponent {
     );
   });
 
+  readonly hasModelPreview = computed(() => {
+    const model = this.product().model3d;
+    return !!(model?.url && model.originalFilename);
+  });
+
   priceLabel(): number {
     return this.product().priceFromChf;
   }
@@ -39,4 +47,31 @@ export class ProductCardComponent {
   hasPriceRange(): boolean {
     return this.product().priceFromChf !== this.product().priceToChf;
   }
+
+  defaultVariantId(): string | null {
+    return this.product().defaultVariant?.id ?? null;
+  }
+
+  addToCart(): void {
+    const variantId = this.defaultVariantId();
+    if (!variantId || this.addingToCart()) {
+      return;
+    }
+
+    this.addingToCart.set(true);
+    this.shopService
+      .addToCart(variantId, 1)
+      .pipe(finalize(() => this.addingToCart.set(false)))
+      .subscribe({
+        error: () => {
+          // Keep card UX simple: product detail handles error messaging in depth.
+        },
+      });
+  }
+
+  navigationState(): { shopReturnUrl: string } {
+    return {
+      shopReturnUrl: this.router.url,
+    };
+  }
 }

frontend/src/app/features/shop/product-detail.component.html

@@ -1,8 +1,8 @@
 <section class="product-page">
   <div class="container wrapper">
-    <a [routerLink]="productLinkRoot()" class="back-link">
+    <button type="button" class="back-link" (click)="goBackToShop()">
       ← {{ "SHOP.BACK" | translate }}
-    </a>
+    </button>
 
     @if (loading()) {
       <div class="detail-grid skeleton-grid">
@@ -15,16 +15,37 @@
       } @else {
         @if (product(); as p) {
           <nav class="breadcrumbs">
-            <a routerLink="/shop">{{ "SHOP.BREADCRUMB_ROOT" | translate }}</a>
+            <a [routerLink]="shopRootLink()">{{
+              "SHOP.BREADCRUMB_ROOT" | translate
+            }}</a>
             @for (crumb of p.breadcrumbs; track crumb.id) {
               <span>/</span>
-              <a [routerLink]="['/shop', crumb.slug]">{{ crumb.name }}</a>
+              <a [routerLink]="categoryLink(crumb.slug)">{{ crumb.name }}</a>
             }
           </nav>
 
           <div class="detail-grid">
             <section class="visual-column">
               <div class="hero-media">
+                @if (galleryImages().length > 1) {
+                  <button
+                    type="button"
+                    class="hero-nav hero-nav-prev"
+                    (click)="showPreviousImage()"
+                    [attr.aria-label]="'SHOP.PREVIOUS_IMAGE' | translate"
+                  >
+                    ‹
+                  </button>
+                  <button
+                    type="button"
+                    class="hero-nav hero-nav-next"
+                    (click)="showNextImage()"
+                    [attr.aria-label]="'SHOP.NEXT_IMAGE' | translate"
+                  >
+                    ›
+                  </button>
+                }
+
                 @if (imageUrl(selectedImage()); as imageUrl) {
                   <img
                     [src]="imageUrl"
@@ -39,7 +60,7 @@
               </div>
 
               @if (galleryImages().length > 1) {
-                <div class="thumb-grid">
+                <div class="thumb-strip">
                   @for (image of galleryImages(); track image.mediaAssetId) {
                     <button
                       type="button"
@@ -60,15 +81,12 @@
               }
 
               @if (p.model3d) {
-                <app-card class="viewer-card">
-                  <div class="viewer-head">
-                    <div>
-                      <p class="viewer-kicker">
-                        {{ "SHOP.MODEL_3D" | translate }}
-                      </p>
-                      <h3>{{ "SHOP.MODEL_TITLE" | translate }}</h3>
-                    </div>
-                    <div class="dimensions">
+                <div class="model-launch-row">
+                  <div>
+                    <p class="viewer-kicker">
+                      {{ "SHOP.MODEL_3D" | translate }}
+                    </p>
+                    <div class="dimensions dimensions-inline">
                       <span>
                         X
                         {{ p.model3d.boundingBoxXMm || 0 | number: "1.0-1" }} mm
@@ -83,25 +101,14 @@
                       </span>
                     </div>
                   </div>
-
-                  @if (modelLoading()) {
-                    <div class="viewer-state">
-                      {{ "SHOP.MODEL_LOADING" | translate }}
-                    </div>
-                  } @else if (modelError()) {
-                    <div class="viewer-state viewer-state-error">
-                      {{ "SHOP.MODEL_UNAVAILABLE" | translate }}
-                    </div>
-                  } @else {
-                    @if (modelFile(); as modelPreviewFile) {
-                      <app-stl-viewer
-                        [file]="modelPreviewFile"
-                        [height]="360"
-                        [color]="selectedVariant()?.colorHex || '#facf0a'"
-                      ></app-stl-viewer>
-                    }
-                  }
-                </app-card>
+                  <button
+                    type="button"
+                    class="model-open-btn"
+                    (click)="openModelModal()"
+                  >
+                    {{ "SHOP.MODEL_OPEN" | translate }}
+                  </button>
+                </div>
               }
             </section>
 
@@ -109,28 +116,23 @@
               <div class="title-block">
                 <div class="title-meta">
                   <span class="category">{{ p.category.name }}</span>
-                  @if (p.isFeatured) {
-                    <span class="featured-pill">{{
-                      "SHOP.FEATURED_BADGE" | translate
-                    }}</span>
-                  }
                 </div>
                 <h1>{{ p.name }}</h1>
                 <p class="excerpt">
                   {{
                     p.excerpt ||
-                      p.description ||
+                      descriptionPlainText(p.description) ||
                       ("SHOP.EXCERPT_FALLBACK" | translate)
                   }}
                 </p>
               </div>
 
-              <app-card>
+              <app-card class="purchase-shell">
                 <div class="purchase-card">
                   <div class="price-row">
                     <div>
                       <p class="panel-kicker">
-                        {{ "SHOP.SELECT_COLOR" | translate }}
+                        {{ "SHOP.SELECT_MATERIAL" | translate }}
                       </p>
                       <h3>{{ priceLabel() | currency: "CHF" }}</h3>
                     </div>
@@ -145,29 +147,121 @@
                     }
                   </div>
 
-                  <div class="variant-grid">
-                    @for (variant of p.variants; track variant.id) {
+                  @if (materialOptions().length > 1) {
+                    <div class="material-grid">
+                      @for (material of materialOptions(); track material.key) {
+                        <button
+                          type="button"
+                          class="material-option"
+                          [class.active]="
+                            selectedMaterial()?.key === material.key
+                          "
+                          (click)="selectMaterial(material.key)"
+                        >
+                          <span class="material-copy">
+                            <strong>{{ material.label }}</strong>
+                            <small>
+                              {{
+                                "SHOP.MATERIAL_COLOR_COUNT"
+                                  | translate
+                                    : { count: materialColorCount(material) }
+                              }}
+                            </small>
+                          </span>
+                          <strong>{{
+                            materialPriceLabel(material) | currency: "CHF"
+                          }}</strong>
+                        </button>
+                      }
+                    </div>
+                  }
+
+                  @if (
+                    materialOptions().length > 1 &&
+                    selectedMaterialProperties().length > 0
+                  ) {
+                    <div class="property-grid">
+                      @for (
+                        property of selectedMaterialProperties();
+                        track property.labelKey
+                      ) {
+                        <div
+                          class="property-pill"
+                          [ngClass]="'tone-' + property.tone"
+                        >
+                          <span>{{ property.labelKey | translate }}</span>
+                          <strong>{{ property.valueKey | translate }}</strong>
+                        </div>
+                      }
+                    </div>
+                  }
+
+                  <div class="color-selector-block">
+                    <div class="selector-head">
+                      <p class="panel-kicker">
+                        {{ "SHOP.SELECT_COLOR" | translate }}
+                      </p>
+                    </div>
+
+                    @if (selectedVariant(); as activeVariant) {
                       <button
                         type="button"
-                        class="variant-option"
-                        [class.active]="selectedVariant()?.id === variant.id"
-                        (click)="selectVariant(variant)"
+                        class="color-trigger"
+                        [class.open]="colorPopupOpen()"
+                        (click)="toggleColorPopup()"
                       >
-                        <span
-                          class="variant-swatch"
-                          [style.background-color]="colorHex(variant)"
-                        ></span>
-                        <span class="variant-copy">
-                          <strong>{{ colorLabel(variant) }}</strong>
-                          @if (variant.variantLabel) {
-                            <small>{{ variant.variantLabel }}</small>
-                          }
+                        <span class="color-trigger__ring">
+                          <span
+                            class="color-trigger__swatch"
+                            [style.background-color]="colorHex(activeVariant)"
+                          ></span>
+                        </span>
+
+                        <span class="color-trigger__copy">
+                          <strong>{{ colorLabel(activeVariant) }}</strong>
+                          <small>{{ selectedMaterial()?.label }}</small>
                         </span>
-                        <strong>{{
-                          variant.priceChf | currency: "CHF"
-                        }}</strong>
                       </button>
                     }
+
+                    @if (colorPopupOpen()) {
+                      <button
+                        type="button"
+                        class="color-popup-backdrop"
+                        (click)="closeColorPopup()"
+                      ></button>
+                      <div class="color-popup">
+                        <div class="color-popup__category">
+                          {{ selectedMaterial()?.label || "" | uppercase }}
+                        </div>
+
+                        <div class="color-popup__grid">
+                          @for (variant of colorOptions(); track variant.id) {
+                            <button
+                              type="button"
+                              class="color-popup__item"
+                              (click)="selectVariant(variant)"
+                            >
+                              <span
+                                class="color-popup__ring"
+                                [class.active]="
+                                  selectedVariant()?.id === variant.id
+                                "
+                              >
+                                <span
+                                  class="color-popup__swatch"
+                                  [style.background-color]="colorHex(variant)"
+                                ></span>
+                              </span>
+
+                              <span class="color-popup__name">{{
+                                colorLabel(variant)
+                              }}</span>
+                            </button>
+                          }
+                        </div>
+                      </div>
+                    }
                   </div>
 
                   <div class="quantity-row">
@@ -210,14 +304,62 @@
                 </div>
               </app-card>
 
-              @if (p.description) {
+              @if (descriptionPlainText(p.description)) {
                 <div class="description-block">
                   <h2>{{ "SHOP.DESCRIPTION_TITLE" | translate }}</h2>
-                  <p>{{ p.description }}</p>
+                  <div
+                    class="description-block__content"
+                    [innerHTML]="descriptionRichHtml(p.description)"
+                  ></div>
                 </div>
               }
             </section>
           </div>
+
+          @if (modelModalOpen()) {
+            <button
+              type="button"
+              class="model-modal-backdrop"
+              (click)="closeModelModal()"
+            ></button>
+            <div class="model-modal" role="dialog" aria-modal="true">
+              <div class="model-modal-head">
+                <div>
+                  <p class="viewer-kicker">{{ "SHOP.MODEL_3D" | translate }}</p>
+                  <h3>{{ "SHOP.MODEL_TITLE" | translate }}</h3>
+                </div>
+                <button
+                  type="button"
+                  class="model-close-btn"
+                  (click)="closeModelModal()"
+                  [attr.aria-label]="'SHOP.MODEL_CLOSE' | translate"
+                >
+                  ×
+                </button>
+              </div>
+
+              <div class="model-modal-body">
+                @if (modelLoading()) {
+                  <div class="viewer-state viewer-loading">
+                    <span class="spinner"></span>
+                    <span>{{ "SHOP.MODEL_LOADING" | translate }}</span>
+                  </div>
+                } @else if (modelError()) {
+                  <div class="viewer-state viewer-state-error">
+                    {{ "SHOP.MODEL_UNAVAILABLE" | translate }}
+                  </div>
+                } @else {
+                  @if (modelFile(); as modelPreviewFile) {
+                    <app-stl-viewer
+                      [file]="modelPreviewFile"
+                      [height]="420"
+                      [color]="colorHex(selectedVariant())"
+                    ></app-stl-viewer>
+                  }
+                }
+              </div>
+            </div>
+          }
         }
       }
     }

frontend/src/app/features/shop/product-detail.component.scss

@@ -1,17 +1,11 @@
 .product-page {
-  padding: var(--space-8) 0 var(--space-12);
-  background:
-    radial-gradient(
-      circle at top left,
-      rgba(250, 207, 10, 0.18),
-      transparent 20%
-    ),
-    linear-gradient(180deg, #faf7ee 0%, var(--color-bg) 25%);
+  padding: var(--space-5) 0 var(--space-10);
+  background: var(--color-bg);
 }
 
 .wrapper {
   display: grid;
-  gap: var(--space-6);
+  gap: var(--space-4);
 }
 
 .back-link,
@@ -19,6 +13,15 @@
   color: var(--color-text-muted);
 }
 
+.back-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
 .breadcrumbs {
   display: flex;
   flex-wrap: wrap;
@@ -30,6 +33,7 @@
   display: grid;
   gap: var(--space-8);
   grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+  align-items: start;
 }
 
 .visual-column,
@@ -38,35 +42,49 @@
   gap: var(--space-5);
 }
 
+.visual-column {
+  align-content: start;
+}
+
+.info-column {
+  gap: var(--space-3);
+  align-content: start;
+}
+
 .hero-media {
-  min-height: 480px;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  min-height: 420px;
+  max-height: 620px;
   overflow: hidden;
   border-radius: 1.25rem;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  background:
-    radial-gradient(
-      circle at top right,
-      rgba(250, 207, 10, 0.3),
-      transparent 30%
-    ),
-    linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
-  box-shadow: 0 18px 42px rgba(16, 24, 32, 0.08);
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  background: #f2eee5;
+  box-shadow: 0 6px 14px rgba(16, 24, 32, 0.04);
 }
 
 .hero-image {
   width: 100%;
   height: 100%;
   display: block;
-  object-fit: cover;
+  object-fit: contain;
+  background: #f2eee5;
 }
 
 .image-fallback {
   width: 100%;
   height: 100%;
-  min-height: 480px;
+  min-height: 420px;
   display: flex;
   align-items: flex-end;
   padding: var(--space-6);
+  background:
+    radial-gradient(
+      circle at top right,
+      rgba(250, 207, 10, 0.24),
+      transparent 34%
+    ),
+    linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
 }
 
 .image-fallback span {
@@ -81,24 +99,31 @@
 }
 
 .thumb-grid {
-  display: grid;
-  gap: var(--space-3);
-  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  display: contents;
+}
+
+.thumb-strip {
+  display: flex;
+  gap: 0.65rem;
+  overflow-x: auto;
+  padding: 0.1rem;
+  scrollbar-width: thin;
 }
 
 .thumb {
-  min-height: 92px;
+  flex: 0 0 92px;
+  height: 92px;
   overflow: hidden;
   border-radius: 0.85rem;
-  border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  background: #fff;
   padding: 0;
   cursor: pointer;
 }
 
 .thumb.active {
-  border-color: rgba(250, 207, 10, 0.65);
-  box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.22);
+  border-color: rgba(250, 207, 10, 0.9);
+  box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.2);
 }
 
 .thumb img,
@@ -110,15 +135,33 @@
   object-fit: cover;
 }
 
-.viewer-card {
-  display: block;
-}
-
-.viewer-head {
+.model-launch-row {
   display: flex;
   justify-content: space-between;
-  gap: var(--space-4);
-  margin-bottom: var(--space-4);
+  gap: 0.8rem;
+  align-items: center;
+  width: min(100%, 440px);
+  justify-self: start;
+  padding: 0.72rem 0.82rem;
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  border-radius: 1rem;
+  background: #fff;
+}
+
+.model-open-btn {
+  height: 2.1rem;
+  padding: 0 0.82rem;
+  border-radius: 0.65rem;
+  border: 1px solid rgba(16, 24, 32, 0.18);
+  background: #fff;
+  color: var(--color-text);
+  font-size: 0.86rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.model-open-btn:hover {
+  border-color: rgba(16, 24, 32, 0.3);
 }
 
 .viewer-kicker,
@@ -139,22 +182,16 @@
   text-align: right;
 }
 
-.viewer-state {
-  display: grid;
-  place-items: center;
-  min-height: 220px;
-  border-radius: var(--radius-lg);
-  background: rgba(16, 24, 32, 0.04);
-  color: var(--color-text-muted);
-}
-
-.viewer-state-error {
-  color: var(--color-danger-600);
+.dimensions-inline {
+  display: flex;
+  gap: 0.58rem;
+  text-align: left;
+  font-size: 0.78rem;
 }
 
 .title-block {
   display: grid;
-  gap: var(--space-3);
+  gap: 0.4rem;
 }
 
 .title-meta {
@@ -164,8 +201,7 @@
   gap: 0.7rem;
 }
 
-.category,
-.featured-pill {
+.category {
   text-transform: uppercase;
   font-size: 0.76rem;
   letter-spacing: 0.08em;
@@ -176,29 +212,21 @@
   font-weight: 700;
 }
 
-.featured-pill {
-  display: inline-flex;
-  padding: 0.25rem 0.65rem;
-  border-radius: 999px;
-  background: rgba(250, 207, 10, 0.92);
-  color: var(--color-neutral-900);
-  font-weight: 700;
-}
-
 h1 {
-  font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem);
+  margin: 0;
+  font-size: clamp(1.9rem, 1.45vw + 1.15rem, 2.8rem);
+  line-height: 1.06;
 }
 
-.excerpt,
-.description-block p {
+.excerpt {
   margin: 0;
   color: var(--color-text-muted);
-  line-height: 1.7;
+  line-height: 1.6;
 }
 
 .purchase-card {
   display: grid;
-  gap: var(--space-5);
+  gap: 0.78rem;
 }
 
 .price-row,
@@ -221,52 +249,97 @@ h1 {
   font-weight: 600;
 }
 
-.variant-grid {
+.material-grid {
   display: grid;
-  gap: 0.7rem;
+  gap: 0.55rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
-.variant-option {
+.material-option {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
-  padding: 0.9rem 1rem;
-  border-radius: 1rem;
-  border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.86);
+  padding: 0.68rem 0.8rem;
+  border-radius: 0.85rem;
+  border: 1px solid rgba(16, 24, 32, 0.14);
+  background: #fff;
   cursor: pointer;
   text-align: left;
   transition:
     border-color 0.18s ease,
-    transform 0.18s ease,
+    background 0.18s ease,
     box-shadow 0.18s ease;
 }
 
-.variant-option.active {
-  border-color: rgba(250, 207, 10, 0.6);
-  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.08);
-  transform: translateY(-1px);
+.material-option:hover {
+  border-color: rgba(16, 24, 32, 0.26);
+  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.06);
 }
 
-.variant-swatch {
-  width: 1.2rem;
-  height: 1.2rem;
-  border-radius: 50%;
-  border: 1px solid rgba(16, 24, 32, 0.12);
-  flex: 0 0 auto;
+.material-option.active {
+  border-color: rgba(250, 207, 10, 0.95);
+  background: rgba(250, 207, 10, 0.1);
+  box-shadow: 0 0 0 1px rgba(250, 207, 10, 0.35);
 }
 
-.variant-copy {
+.material-copy {
   display: grid;
-  gap: 0.12rem;
-  flex: 1;
+  gap: 0.14rem;
 }
 
-.variant-copy small {
+.material-copy strong {
+  font-size: 0.95rem;
+}
+
+.material-copy small {
+  font-size: 0.82rem;
   color: var(--color-text-muted);
 }
 
+.material-option > strong {
+  font-size: 1.04rem;
+}
+
+.property-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.property-pill {
+  display: grid;
+  gap: 0.16rem;
+  padding: 0.58rem 0.65rem;
+  border-radius: 0.8rem;
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  background: #fff;
+}
+
+.property-pill span {
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.property-pill strong {
+  font-size: 0.9rem;
+}
+
+.property-pill.tone-strong {
+  border-left: 3px solid rgba(4, 120, 87, 0.7);
+}
+
+.property-pill.tone-neutral {
+  border-left: 3px solid rgba(37, 99, 235, 0.7);
+}
+
+.property-pill.tone-soft {
+  border-left: 3px solid rgba(245, 158, 11, 0.7);
+}
+
 .qty-control {
   display: inline-flex;
   align-items: center;
@@ -307,11 +380,42 @@ h1 {
 
 .description-block {
   display: grid;
-  gap: var(--space-3);
+  gap: 0.55rem;
 }
 
 .description-block h2 {
-  font-size: 1.2rem;
+  margin: 0;
+  font-size: 1.45rem;
+}
+
+.description-block__content {
+  color: var(--color-text-muted);
+  font-size: 1.06rem;
+  line-height: 1.75;
+}
+
+.description-block__content p,
+.description-block__content div {
+  margin: 0 0 0.7rem;
+}
+
+.description-block__content p:last-child,
+.description-block__content div:last-child {
+  margin-bottom: 0;
+}
+
+.description-block__content ul,
+.description-block__content ol {
+  margin: 0 0 0.7rem 1.3rem;
+  padding: 0;
+}
+
+.description-block__content li + li {
+  margin-top: 0.22rem;
+}
+
+:host ::ng-deep app-card.purchase-shell .card-body {
+  padding: 0.95rem 1rem;
 }
 
 .state-card,
@@ -354,10 +458,17 @@ h1 {
   .skeleton-grid {
     grid-template-columns: 1fr;
   }
+
+  .property-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .purchase-card {
+    gap: 0.82rem;
+  }
 }
 
 @media (max-width: 640px) {
-  .viewer-head,
   .price-row,
   .quantity-row {
     flex-direction: column;
@@ -366,6 +477,44 @@ h1 {
 
   .hero-media,
   .image-fallback {
-    min-height: 320px;
+    min-height: 300px;
+  }
+
+  .thumb-strip {
+    gap: 0.5rem;
+  }
+
+  .thumb {
+    flex-basis: 78px;
+    height: 78px;
+  }
+
+  .model-launch-row {
+    width: min(100%, 350px);
+    gap: 0.6rem;
+    padding: 0.58rem 0.65rem;
+  }
+
+  .model-open-btn {
+    height: 1.95rem;
+    padding: 0 0.7rem;
+    font-size: 0.8rem;
+  }
+
+  .dimensions-inline {
+    gap: 0.42rem;
+    font-size: 0.74rem;
+  }
+
+  .property-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .material-grid {
+    grid-template-columns: 1fr;
+  }
+
+  :host ::ng-deep app-card.purchase-shell .card-body {
+    padding: 0.82rem 0.82rem;
   }
 }

frontend/src/app/features/shop/product-detail.component.ts

@@ -1,8 +1,9 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import {
   Component,
   DestroyRef,
   Injector,
+  PLATFORM_ID,
   computed,
   inject,
   input,
@@ -14,6 +15,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { catchError, combineLatest, finalize, of, switchMap, tap } from 'rxjs';
 import { SeoService } from '../../core/services/seo.service';
 import { LanguageService } from '../../core/services/language.service';
+import { getColorHex } from '../../core/constants/colors.const';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
 import { AppCardComponent } from '../../shared/components/app-card/app-card.component';
 import { StlViewerComponent } from '../../shared/components/stl-viewer/stl-viewer.component';
@@ -22,6 +24,20 @@ import {
   ShopProductVariantOption,
   ShopService,
 } from './services/shop.service';
+import { ShopRouteService } from './services/shop-route.service';
+
+interface ShopMaterialOption {
+  key: string;
+  label: string;
+  variants: ShopProductVariantOption[];
+  priceFromChf: number;
+}
+
+interface ShopMaterialProperty {
+  labelKey: string;
+  valueKey: string;
+  tone: 'neutral' | 'strong' | 'soft';
+}
 
 @Component({
   selector: 'app-product-detail',
@@ -38,12 +54,16 @@ import {
   styleUrl: './product-detail.component.scss',
 })
 export class ProductDetailComponent {
+  private static readonly HEX_COLOR_PATTERN =
+    /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
   private readonly destroyRef = inject(DestroyRef);
   private readonly injector = inject(Injector);
   private readonly router = inject(Router);
   private readonly translate = inject(TranslateService);
   private readonly seoService = inject(SeoService);
   private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
   readonly shopService = inject(ShopService);
 
   readonly categorySlug = input<string | undefined>();
@@ -57,6 +77,9 @@ export class ProductDetailComponent {
   readonly quantity = signal(1);
   readonly isAddingToCart = signal(false);
   readonly addSuccess = signal(false);
+  readonly selectedMaterialKey = signal<string | null>(null);
+  readonly colorPopupOpen = signal(false);
+  readonly modelModalOpen = signal(false);
 
   readonly modelLoading = signal(false);
   readonly modelError = signal(false);
@@ -76,6 +99,59 @@ export class ProductDetailComponent {
     );
   });
 
+  readonly materialOptions = computed<ShopMaterialOption[]>(() => {
+    const product = this.product();
+    if (!product) {
+      return [];
+    }
+
+    const groups = new Map<string, ShopMaterialOption>();
+    for (const variant of product.variants) {
+      const label = this.materialLabelForVariant(variant);
+      const key = label.toLowerCase();
+      const group = groups.get(key);
+      if (group) {
+        group.variants.push(variant);
+        group.priceFromChf = Math.min(group.priceFromChf, variant.priceChf);
+        continue;
+      }
+
+      groups.set(key, {
+        key,
+        label,
+        variants: [variant],
+        priceFromChf: variant.priceChf,
+      });
+    }
+
+    return Array.from(groups.values());
+  });
+
+  readonly selectedMaterial = computed<ShopMaterialOption | null>(() => {
+    const selectedKey = this.selectedMaterialKey();
+    const materials = this.materialOptions();
+    if (!materials.length) {
+      return null;
+    }
+    return (
+      materials.find((material) => material.key === selectedKey) ??
+      materials.find((material) =>
+        material.variants.some(
+          (variant) => variant.id === this.selectedVariant()?.id,
+        ),
+      ) ??
+      materials[0]
+    );
+  });
+
+  readonly colorOptions = computed<ShopProductVariantOption[]>(
+    () => this.selectedMaterial()?.variants ?? [],
+  );
+
+  readonly selectedMaterialProperties = computed<ShopMaterialProperty[]>(() =>
+    this.materialPropertiesFor(this.selectedMaterial()?.label),
+  );
+
   readonly galleryImages = computed(() => {
     const product = this.product();
     if (!product) {
@@ -103,6 +179,15 @@ export class ProductDetailComponent {
     );
   });
 
+  readonly selectedImageIndex = computed(() => {
+    const images = this.galleryImages();
+    const selectedAssetId = this.selectedImageAssetId();
+    const index = images.findIndex(
+      (image) => image.mediaAssetId === selectedAssetId,
+    );
+    return index >= 0 ? index : 0;
+  });
+
   readonly selectedVariantCartQuantity = computed(() =>
     this.shopService.quantityForVariant(this.selectedVariant()?.id),
   );
@@ -131,6 +216,8 @@ export class ProductDetailComponent {
           this.error.set(null);
           this.addSuccess.set(false);
           this.modelError.set(false);
+          this.colorPopupOpen.set(false);
+          this.modelModalOpen.set(false);
         }),
         switchMap(([productSlug]) => {
           if (!productSlug) {
@@ -139,7 +226,7 @@ export class ProductDetailComponent {
             return of(null);
           }
 
-          return this.shopService.getProduct(productSlug).pipe(
+          return this.shopService.getProductByPublicPath(productSlug).pipe(
             catchError((error) => {
               this.product.set(null);
               this.selectedVariantId.set(null);
@@ -165,24 +252,22 @@ export class ProductDetailComponent {
         this.selectedVariantId.set(
           product.defaultVariant?.id ?? product.variants[0]?.id ?? null,
         );
+        this.selectedMaterialKey.set(
+          this.materialKeyForVariant(
+            product.defaultVariant ?? product.variants[0] ?? null,
+          ),
+        );
         this.selectedImageAssetId.set(
           product.primaryImage?.mediaAssetId ??
             product.images[0]?.mediaAssetId ??
             null,
         );
         this.quantity.set(1);
+        this.syncPublicUrl(product);
         this.applySeo(product);
-
-        if (product.model3d?.url && product.model3d.originalFilename) {
-          this.loadModelPreview(
-            product.model3d.url,
-            product.model3d.originalFilename,
-          );
-        } else {
-          this.modelFile.set(null);
-          this.modelLoading.set(false);
-          this.modelError.set(false);
-        }
+        this.modelFile.set(null);
+        this.modelLoading.set(false);
+        this.modelError.set(false);
       });
   }
 
@@ -201,8 +286,45 @@ export class ProductDetailComponent {
     this.selectedImageAssetId.set(mediaAssetId);
   }
 
+  showPreviousImage(): void {
+    const images = this.galleryImages();
+    if (images.length < 2) {
+      return;
+    }
+    const nextIndex =
+      (this.selectedImageIndex() - 1 + images.length) % images.length;
+    this.selectedImageAssetId.set(images[nextIndex].mediaAssetId);
+  }
+
+  showNextImage(): void {
+    const images = this.galleryImages();
+    if (images.length < 2) {
+      return;
+    }
+    const nextIndex = (this.selectedImageIndex() + 1) % images.length;
+    this.selectedImageAssetId.set(images[nextIndex].mediaAssetId);
+  }
+
   selectVariant(variant: ShopProductVariantOption): void {
     this.selectedVariantId.set(variant.id);
+    this.selectedMaterialKey.set(this.materialKeyForVariant(variant));
+    this.colorPopupOpen.set(false);
+    this.addSuccess.set(false);
+  }
+
+  selectMaterial(materialKey: string): void {
+    this.selectedMaterialKey.set(materialKey);
+    this.colorPopupOpen.set(false);
+    const material = this.materialOptions().find(
+      (item) => item.key === materialKey,
+    );
+    const nextVariant =
+      material?.variants.find((variant) => variant.isDefault) ??
+      material?.variants[0] ??
+      null;
+    if (nextVariant) {
+      this.selectedVariantId.set(nextVariant.id);
+    }
     this.addSuccess.set(false);
   }
 
@@ -259,13 +381,81 @@ export class ProductDetailComponent {
     return variant.colorName || variant.variantLabel || '-';
   }
 
-  colorHex(variant: ShopProductVariantOption): string {
-    return variant.colorHex || '#d5d8de';
+  colorHex(variant: ShopProductVariantOption | null | undefined): string {
+    const normalizedHex = this.normalizeHexColor(variant?.colorHex);
+    if (normalizedHex) {
+      return normalizedHex;
+    }
+
+    const fallbackByName = this.colorHexFromName(variant?.colorName);
+    if (fallbackByName) {
+      return fallbackByName;
+    }
+
+    return '#d5d8de';
+  }
+
+  materialPriceLabel(material: ShopMaterialOption): number {
+    return material.priceFromChf;
+  }
+
+  materialColorCount(material: ShopMaterialOption): number {
+    return material.variants.length;
+  }
+
+  toggleColorPopup(): void {
+    this.colorPopupOpen.update((open) => !open);
+  }
+
+  closeColorPopup(): void {
+    this.colorPopupOpen.set(false);
+  }
+
+  openModelModal(): void {
+    const model = this.product()?.model3d;
+    if (!model) {
+      return;
+    }
+
+    this.colorPopupOpen.set(false);
+    this.modelModalOpen.set(true);
+
+    if (this.modelFile() || this.modelLoading()) {
+      return;
+    }
+
+    this.loadModelPreview(model.url, model.originalFilename);
+  }
+
+  closeModelModal(): void {
+    this.modelModalOpen.set(false);
+  }
+
+  shopRootLink(): string[] {
+    return this.shopRouteService.shopRootCommands();
+  }
+
+  categoryLink(slug: string | null | undefined): string[] {
+    return this.shopRouteService.shopRootCommands(slug);
   }
 
   productLinkRoot(): string[] {
     const categorySlug = this.product()?.category.slug || this.categorySlug();
-    return categorySlug ? ['/shop', categorySlug] : ['/shop'];
+    return this.shopRouteService.shopRootCommands(categorySlug);
+  }
+
+  goBackToShop(): void {
+    const returnUrl =
+      this.isBrowser && typeof history.state?.shopReturnUrl === 'string'
+        ? history.state.shopReturnUrl
+        : null;
+
+    if (returnUrl && this.shopRouteService.isCatalogUrl(returnUrl)) {
+      void this.router.navigateByUrl(returnUrl);
+      return;
+    }
+
+    void this.router.navigate(this.productLinkRoot());
   }
 
   private loadModelPreview(urlOrPath: string, filename: string): void {
@@ -289,11 +479,40 @@ export class ProductDetailComponent {
       });
   }
 
+  private normalizeHexColor(value: string | null | undefined): string | null {
+    const raw = String(value ?? '').trim();
+    if (!raw) {
+      return null;
+    }
+
+    const withHash = raw.startsWith('#') ? raw : `#${raw}`;
+    if (!ProductDetailComponent.HEX_COLOR_PATTERN.test(withHash)) {
+      return null;
+    }
+
+    return withHash.toUpperCase();
+  }
+
+  private colorHexFromName(value: string | null | undefined): string | null {
+    const colorName = String(value ?? '').trim();
+    if (!colorName) {
+      return null;
+    }
+
+    const fallback = getColorHex(colorName);
+    if (!fallback || fallback === '#facf0a') {
+      return null;
+    }
+
+    return fallback;
+  }
+
   private applySeo(product: ShopProductDetail): void {
     const title = product.seoTitle || `${product.name} | 3D fab`;
     const description =
       product.seoDescription ||
       product.excerpt ||
+      this.extractTextFromRichContent(product.description) ||
       this.translate.instant('SHOP.CATALOG_META_DESCRIPTION');
     const robots =
       product.indexable === false ? 'noindex, nofollow' : 'index, follow';
@@ -318,4 +537,209 @@ export class ProductDetailComponent {
       ogDescription: description,
     });
   }
+
+  private materialLabelForVariant(
+    variant: ShopProductVariantOption | null,
+  ): string {
+    return String(variant?.variantLabel || '').trim() || 'Standard';
+  }
+
+  descriptionPlainText(description: string | null | undefined): string {
+    return this.extractTextFromRichContent(description) ?? '';
+  }
+
+  descriptionRichHtml(description: string | null | undefined): string {
+    const normalized = String(description ?? '').trim();
+    if (!normalized) {
+      return '';
+    }
+    if (this.containsHtmlMarkup(normalized)) {
+      return normalized;
+    }
+    return normalized
+      .replace(/\r\n?/g, '\n')
+      .split(/\n{2,}/)
+      .map(
+        (paragraph) =>
+          `<p>${this.escapeHtml(paragraph).replace(/\n/g, '<br>')}</p>`,
+      )
+      .join('');
+  }
+
+  private materialKeyForVariant(
+    variant: ShopProductVariantOption | null,
+  ): string | null {
+    if (!variant) {
+      return null;
+    }
+    return this.materialLabelForVariant(variant).toLowerCase();
+  }
+
+  private materialPropertiesFor(
+    materialLabel: string | null | undefined,
+  ): ShopMaterialProperty[] {
+    const normalized = String(materialLabel ?? '')
+      .trim()
+      .toUpperCase();
+
+    if (normalized.includes('ASA')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: 'SHOP.PROPERTY_RIGID',
+          tone: 'neutral',
+        },
+      ];
+    }
+
+    if (normalized.includes('PETG') || normalized.includes('PC')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'neutral',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: normalized.includes('PC')
+            ? 'SHOP.PROPERTY_HIGH'
+            : 'SHOP.PROPERTY_RIGID',
+          tone: 'neutral',
+        },
+      ];
+    }
+
+    if (normalized.includes('TPU')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'neutral',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'soft',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: 'SHOP.PROPERTY_FLEXIBLE',
+          tone: 'soft',
+        },
+      ];
+    }
+
+    return [
+      {
+        labelKey: 'SHOP.PROPERTY_UV',
+        valueKey: 'SHOP.PROPERTY_LOW',
+        tone: 'soft',
+      },
+      {
+        labelKey: 'SHOP.PROPERTY_WEATHER',
+        valueKey: 'SHOP.PROPERTY_LOW',
+        tone: 'soft',
+      },
+      {
+        labelKey: 'SHOP.PROPERTY_RIGIDITY',
+        valueKey: 'SHOP.PROPERTY_RIGID',
+        tone: 'neutral',
+      },
+    ];
+  }
+
+  private extractTextFromRichContent(
+    value: string | null | undefined,
+  ): string | null {
+    const normalized = String(value ?? '').trim();
+    if (!normalized) {
+      return null;
+    }
+    if (!this.containsHtmlMarkup(normalized)) {
+      return normalized;
+    }
+
+    if (!this.isBrowser) {
+      const text = normalized
+        .replace(/<[^>]+>/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+      return text || null;
+    }
+
+    const parser = new DOMParser();
+    const parsed = parser.parseFromString(
+      `<body>${normalized}</body>`,
+      'text/html',
+    );
+    const text = (parsed.body.textContent ?? '').replace(/\u00a0/g, ' ').trim();
+    return text || null;
+  }
+
+  private containsHtmlMarkup(value: string): boolean {
+    return /<\/?[a-z][\s\S]*>/i.test(value);
+  }
+
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  private syncPublicUrl(product: ShopProductDetail): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    const currentProductSlug = this.productSlug()?.trim().toLowerCase() ?? '';
+    const targetProductSlug = this.shopRouteService.productPathSegment(product);
+    if (currentProductSlug === targetProductSlug) {
+      return;
+    }
+
+    const currentTree = this.router.parseUrl(this.router.url);
+    const targetTree = this.router.createUrlTree(
+      [
+        '/',
+        this.languageService.selectedLang(),
+        'shop',
+        'p',
+        targetProductSlug,
+      ],
+      {
+        queryParams: currentTree.queryParams,
+        fragment: currentTree.fragment ?? undefined,
+      },
+    );
+
+    if (
+      this.router.serializeUrl(targetTree) ===
+      this.router.serializeUrl(currentTree)
+    ) {
+      return;
+    }
+
+    void this.router.navigateByUrl(targetTree, {
+      replaceUrl: true,
+      state: history.state,
+    });
+  }
 }

frontend/src/app/features/shop/services/shop-route.service.ts

@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+import { LanguageService } from '../../../core/services/language.service';
+
+export interface ShopProductRouteRef {
+  id: string | null | undefined;
+  name: string | null | undefined;
+  slug?: string | null | undefined;
+}
+
+export interface ShopProductLookup {
+  idPrefix: string | null;
+  slugHint: string | null;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShopRouteService {
+  constructor(private readonly languageService: LanguageService) {}
+
+  shopRootCommands(categorySlug?: string | null): string[] {
+    const lang = this.languageService.currentLang();
+    return categorySlug
+      ? ['/', lang, 'shop', categorySlug]
+      : ['/', lang, 'shop'];
+  }
+
+  productCommands(product: ShopProductRouteRef): string[] {
+    const lang = this.languageService.currentLang();
+    return ['/', lang, 'shop', 'p', this.productPathSegment(product)];
+  }
+
+  productPathSegment(product: ShopProductRouteRef): string {
+    const idPrefix = this.productIdPrefix(product.id);
+    const tail =
+      this.slugify(product.name) || this.slugify(product.slug) || 'product';
+
+    return idPrefix ? `${idPrefix}-${tail}` : tail;
+  }
+
+  resolveProductLookup(
+    productPathSegment: string | null | undefined,
+  ): ShopProductLookup {
+    const normalized = String(productPathSegment ?? '')
+      .trim()
+      .toLowerCase();
+    if (!normalized) {
+      return {
+        idPrefix: null,
+        slugHint: null,
+      };
+    }
+
+    const bareUuidMatch = normalized.match(/^([0-9a-f]{8})$/);
+    if (bareUuidMatch) {
+      return {
+        idPrefix: bareUuidMatch[1],
+        slugHint: null,
+      };
+    }
+
+    const publicSlugMatch = normalized.match(/^([0-9a-f]{8})-(.+)$/);
+    if (publicSlugMatch) {
+      return {
+        idPrefix: publicSlugMatch[1],
+        slugHint: this.slugify(publicSlugMatch[2]) || null,
+      };
+    }
+
+    return {
+      idPrefix: null,
+      slugHint: normalized,
+    };
+  }
+
+  isCatalogUrl(url: string | null | undefined): boolean {
+    if (!url) {
+      return false;
+    }
+
+    const normalized = url.split(/[?#]/, 1)[0] || '';
+    return /^\/(?:[a-z]{2}\/)?shop(?:\/[^/]+)?$/i.test(normalized);
+  }
+
+  slugify(value: string | null | undefined): string {
+    return String(value ?? '')
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .replace(/-{2,}/g, '-');
+  }
+
+  private productIdPrefix(productId: string | null | undefined): string {
+    const normalized = String(productId ?? '')
+      .trim()
+      .toLowerCase();
+    const canonicalUuidMatch = normalized.match(/^([0-9a-f]{8})-/);
+    if (canonicalUuidMatch) {
+      return canonicalUuidMatch[1];
+    }
+
+    const compactUuidMatch = normalized.match(/^([0-9a-f]{8})/);
+    return compactUuidMatch?.[1] ?? '';
+  }
+}

frontend/src/app/features/shop/services/shop.service.spec.ts

@@ -3,7 +3,12 @@ import {
   HttpClientTestingModule,
   HttpTestingController,
 } from '@angular/common/http/testing';
-import { ShopCartResponse, ShopService } from './shop.service';
+import {
+  ShopCartResponse,
+  ShopProductCatalogResponse,
+  ShopProductDetail,
+  ShopService,
+} from './shop.service';
 import { LanguageService } from '../../../core/services/language.service';
 
 describe('ShopService', () => {
@@ -20,7 +25,7 @@ describe('ShopService', () => {
       {
         id: 'line-1',
         lineItemType: 'SHOP_PRODUCT',
-        originalFilename: 'desk-cable-clip-demo.stl',
+        originalFilename: 'desk-cable-clip.stl',
         displayName: 'Desk Cable Clip',
         quantity: 2,
         printTimeSeconds: null,
@@ -42,13 +47,13 @@ describe('ShopService', () => {
         infillPattern: null,
         supportsEnabled: false,
         status: 'READY',
-        convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
+        convertedStoredPath: '/storage/items/desk-cable-clip.stl',
         unitPriceChf: 11.4,
       },
       {
         id: 'line-2',
         lineItemType: 'SHOP_PRODUCT',
-        originalFilename: 'desk-cable-clip-demo.stl',
+        originalFilename: 'desk-cable-clip.stl',
         displayName: 'Desk Cable Clip',
         quantity: 1,
         printTimeSeconds: null,
@@ -70,7 +75,7 @@ describe('ShopService', () => {
         infillPattern: null,
         supportsEnabled: false,
         status: 'READY',
-        convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
+        convertedStoredPath: '/storage/items/desk-cable-clip.stl',
         unitPriceChf: 12.0,
       },
     ],
@@ -85,6 +90,60 @@ describe('ShopService', () => {
     grandTotalChf: 36.8,
   });
 
+  const buildCatalog = (): ShopProductCatalogResponse => ({
+    categorySlug: null,
+    featuredOnly: false,
+    category: null,
+    products: [
+      {
+        id: '12345678-abcd-4abc-9abc-1234567890ab',
+        slug: 'desk-cable-clip',
+        name: 'Supporto cavo scrivania',
+        excerpt: 'Accessorio tecnico',
+        isFeatured: true,
+        sortOrder: 0,
+        category: {
+          id: 'category-1',
+          slug: 'accessori',
+          name: 'Accessori',
+        },
+        priceFromChf: 9.9,
+        priceToChf: 12.5,
+        defaultVariant: null,
+        primaryImage: null,
+        model3d: null,
+      },
+    ],
+  });
+
+  const buildProduct = (): ShopProductDetail => ({
+    id: '12345678-abcd-4abc-9abc-1234567890ab',
+    slug: 'desk-cable-clip',
+    name: 'Supporto cavo scrivania',
+    excerpt: 'Accessorio tecnico',
+    description: 'Descrizione prodotto',
+    seoTitle: null,
+    seoDescription: null,
+    ogTitle: null,
+    ogDescription: null,
+    indexable: true,
+    isFeatured: true,
+    sortOrder: 0,
+    category: {
+      id: 'category-1',
+      slug: 'accessori',
+      name: 'Accessori',
+    },
+    breadcrumbs: [],
+    priceFromChf: 9.9,
+    priceToChf: 12.5,
+    defaultVariant: null,
+    variants: [],
+    primaryImage: null,
+    images: [],
+    model3d: null,
+  });
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
@@ -143,4 +202,96 @@ describe('ShopService', () => {
     expect(service.cart()?.session?.id).toBe('session-1');
     expect(service.cartItemCount()).toBe(3);
   });
+
+  it('resolves product detail from the public product slug', () => {
+    let response: ShopProductDetail | undefined;
+
+    service
+      .getProductByPublicPath('12345678-supporto-cavo-scrivania')
+      .subscribe((product) => {
+        response = product;
+      });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+    expect(response?.name).toBe('Supporto cavo scrivania');
+  });
+
+  it('resolves product detail from uuid prefix even when slug tail does not match', () => {
+    let response: ShopProductDetail | undefined;
+
+    service
+      .getProductByPublicPath('12345678-qualunque-nome')
+      .subscribe((product) => {
+        response = product;
+      });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+  });
+
+  it('resolves product detail from bare uuid prefix without slug tail', () => {
+    let response: ShopProductDetail | undefined;
+
+    service.getProductByPublicPath('12345678').subscribe((product) => {
+      response = product;
+    });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+  });
 });

frontend/src/app/features/shop/services/shop.service.ts

@@ -1,12 +1,13 @@
 import { computed, inject, Injectable, signal } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
+import { map, Observable, switchMap, tap, throwError } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import {
   PublicMediaUsageDto,
   PublicMediaVariantDto,
 } from '../../../core/services/public-media.service';
 import { LanguageService } from '../../../core/services/language.service';
+import { ShopRouteService } from './shop-route.service';
 
 export interface ShopCategoryRef {
   id: string;
@@ -179,6 +180,7 @@ export interface ShopCategoryNavNode {
 export class ShopService {
   private readonly http = inject(HttpClient);
   private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
   private readonly apiUrl = `${environment.apiUrl}/api/shop`;
 
   readonly cart = signal<ShopCartResponse | null>(null);
@@ -268,6 +270,32 @@ export class ShopService {
     );
   }
 
+  getProductByPublicPath(
+    productPathSegment: string,
+  ): Observable<ShopProductDetail> {
+    const lookup =
+      this.shopRouteService.resolveProductLookup(productPathSegment);
+    if (!lookup.idPrefix && lookup.slugHint) {
+      return this.getProduct(lookup.slugHint);
+    }
+
+    return this.getProductCatalog().pipe(
+      map((catalog) =>
+        catalog.products.find((product) =>
+          product.id.toLowerCase().startsWith(lookup.idPrefix ?? ''),
+        ),
+      ),
+      switchMap((product) => {
+        if (!product) {
+          return throwError(() => ({
+            status: 404,
+          }));
+        }
+        return this.getProduct(product.slug);
+      }),
+    );
+  }
+
   loadCart(): Observable<ShopCartResponse> {
     this.cartLoading.set(true);
     return this.http

frontend/src/app/features/shop/shop-page.component.html

@@ -1,74 +1,20 @@
 <section class="shop-page">
-  <section class="shop-hero">
-    <div class="container shop-hero-grid">
-      <div class="hero-copy">
-        <p class="ui-eyebrow">{{ "SHOP.HERO_EYEBROW" | translate }}</p>
-        <h1 class="ui-hero-display">
-          {{ selectedCategory()?.name || ("SHOP.TITLE" | translate) }}
-        </h1>
-        <p class="ui-copy-lead">
-          {{ selectedCategory()?.description || ("SHOP.SUBTITLE" | translate) }}
-        </p>
-        <p class="ui-copy-subtitle">
-          {{
-            selectedCategory()
-              ? ("SHOP.CATEGORY_META"
-                | translate: { count: selectedCategory()?.productCount || 0 })
-              : ("SHOP.CATALOG_META_DESCRIPTION" | translate)
-          }}
-        </p>
-
-        <div class="hero-actions ui-inline-actions">
-          @if (cartHasItems()) {
-            <app-button
-              variant="primary"
-              [disabled]="cartMutating()"
-              (click)="goToCheckout()"
-            >
-              {{ "SHOP.GO_TO_CHECKOUT" | translate }}
-            </app-button>
-          } @else {
-            <app-button variant="outline" routerLink="/calculator/basic">
-              {{ "SHOP.WIP_CTA_CALC" | translate }}
-            </app-button>
-          }
-
-          @if (selectedCategory()) {
-            <app-button variant="text" (click)="navigateToCategory()">
-              {{ "SHOP.VIEW_ALL" | translate }}
-            </app-button>
-          }
-        </div>
-      </div>
-
-      <div class="hero-highlights">
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_PRODUCTS" | translate
-          }}</span>
-          <strong>{{
-            selectedCategory()?.productCount ?? products().length
-          }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_CART" | translate
-          }}</span>
-          <strong>{{ cartItemCount() }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_READY" | translate
-          }}</span>
-          <strong>{{ "SHOP.MODEL_3D" | translate }}</strong>
-        </div>
-      </div>
-    </div>
-  </section>
+  <div class="container ui-simple-hero shop-hero">
+    <h1 class="ui-simple-hero__title">{{ "NAV.SHOP" | translate }}</h1>
+    <p class="ui-simple-hero__subtitle">
+      {{
+        selectedCategory()
+          ? selectedCategory()?.description ||
+            ("SHOP.CATEGORY_META"
+              | translate: { count: selectedCategory()?.productCount || 0 })
+          : ("SHOP.SUBTITLE" | translate)
+      }}
+    </p>
+  </div>
 
   <div class="container shop-layout">
     <aside class="shop-sidebar">
-      <app-card>
+      <app-card class="category-card">
         <div class="panel-head">
           <div>
             <p class="panel-kicker">
@@ -86,7 +32,9 @@
           [class.active]="!currentCategorySlug()"
           (click)="navigateToCategory()"
         >
-          <span>{{ "SHOP.ALL_CATEGORIES" | translate }}</span>
+          <span class="category-name">{{
+            "SHOP.ALL_CATEGORIES" | translate
+          }}</span>
         </button>
 
         <div class="category-list">
@@ -98,8 +46,8 @@
               [style.--depth]="node.depth"
               (click)="navigateToCategory(node.slug)"
             >
-              <span>{{ node.name }}</span>
-              <small>{{ node.productCount }}</small>
+              <span class="category-name">{{ node.name }}</span>
+              <small class="category-count">{{ node.productCount }}</small>
             </button>
           }
         </div>
@@ -227,33 +175,6 @@
           {{ error() | translate }}
         </div>
       } @else {
-        @if (featuredProducts().length > 0 && !selectedCategory()) {
-          <section class="featured-strip">
-            <div class="section-head">
-              <div>
-                <p class="ui-eyebrow ui-eyebrow--compact">
-                  {{ "SHOP.FEATURED_KICKER" | translate }}
-                </p>
-                <h2 class="section-title">
-                  {{ "SHOP.FEATURED_TITLE" | translate }}
-                </h2>
-              </div>
-            </div>
-
-            <div class="featured-grid">
-              @for (
-                product of featuredProducts();
-                track trackByProduct($index, product)
-              ) {
-                <app-product-card
-                  [product]="product"
-                  [cartQuantity]="productCartQuantity(product.id)"
-                ></app-product-card>
-              }
-            </div>
-          </section>
-        }
-
         <section class="catalog-panel">
           <div class="section-head catalog-head">
             <div>
@@ -303,4 +224,23 @@
       }
     </section>
   </div>
+
+  <section class="container shop-custom-cta">
+    <app-card class="shop-custom-cta-card">
+      <div class="shop-custom-cta-inner">
+        <div class="shop-custom-cta-copy">
+          <p class="panel-kicker">
+            {{ "SHOP.CUSTOM_PART_FOOTER_TITLE" | translate }}
+          </p>
+          <h2 class="shop-custom-cta-title">
+            {{ "SHOP.CUSTOM_PART_FOOTER_TEXT" | translate }}
+          </h2>
+        </div>
+
+        <app-button variant="primary" routerLink="/contact">
+          {{ "NAV.CONTACT" | translate }}
+        </app-button>
+      </div>
+    </app-card>
+  </section>
 </section>

frontend/src/app/features/shop/shop-page.component.scss

@@ -1,60 +1,10 @@
 .shop-page {
-  --shop-hero-bg: #f8f3e5;
-  background:
-    radial-gradient(
-      circle at top right,
-      rgba(250, 207, 10, 0.24),
-      transparent 22%
-    ),
-    linear-gradient(180deg, #faf7ef 0%, #f6f2e8 24%, var(--color-bg) 24%);
+  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 13rem);
 }
 
-.shop-hero {
-  position: relative;
-  overflow: hidden;
-  padding: 4.75rem 0 3.5rem;
-  background: transparent;
-}
-
-.shop-hero-grid {
-  display: grid;
-  gap: var(--space-8);
-  align-items: end;
-  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
-}
-
-.hero-copy {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.hero-highlights {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.highlight-card {
-  display: grid;
-  gap: 0.2rem;
-  padding: 1.15rem 1.2rem;
-  border-radius: 1rem;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
-  backdrop-filter: blur(8px);
-}
-
-.highlight-card strong {
-  font-size: 1.35rem;
-  line-height: 1.1;
-}
-
-.highlight-label {
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.72rem;
-  font-weight: 700;
+.shop-hero .ui-simple-hero__subtitle {
+  max-width: 52rem;
+  line-height: 1.5;
 }
 
 .shop-layout {
@@ -62,7 +12,8 @@
   gap: var(--space-8);
   align-items: start;
   grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
-  padding-bottom: var(--space-12);
+  padding-bottom: var(--space-8);
+  padding-top: var(--space-6);
 }
 
 .shop-sidebar {
@@ -93,40 +44,70 @@
   font-size: 1.1rem;
 }
 
+.category-card {
+  display: block;
+}
+
 .category-list {
   display: grid;
-  gap: 0.4rem;
+  gap: 0.45rem;
+  margin-top: var(--space-2);
 }
 
 .category-link {
   --depth: 0;
+  position: relative;
   display: flex;
-  width: 100%;
+  width: calc(100% - (var(--depth) * 0.7rem));
+  margin-left: calc(var(--depth) * 0.7rem);
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-3);
-  padding: 0.8rem 0.95rem 0.8rem calc(0.95rem + (var(--depth) * 0.95rem));
-  border: 1px solid transparent;
-  border-radius: 0.9rem;
-  background: transparent;
+  gap: var(--space-2);
+  min-height: 2.8rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid rgba(16, 24, 32, 0.1);
+  border-radius: 0.8rem;
+  background: #fff;
   color: var(--color-text);
   text-align: left;
   cursor: pointer;
   transition:
-    background-color 0.18s ease,
-    border-color 0.18s ease,
-    transform 0.18s ease;
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.category-link:hover {
+  background: rgba(16, 24, 32, 0.03);
+  border-color: rgba(16, 24, 32, 0.14);
 }
 
-.category-link:hover,
 .category-link.active {
-  background: rgba(250, 207, 10, 0.14);
-  border-color: rgba(250, 207, 10, 0.34);
-  transform: translateX(1px);
+  background: color-mix(in srgb, var(--color-brand) 14%, #fff);
+  border-color: color-mix(in srgb, var(--color-brand) 42%, #d6dbe4);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 35%, #fff);
 }
 
-.category-link small {
+.category-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.97rem;
+  font-weight: 500;
+}
+
+.category-count {
+  display: inline-flex;
+  min-width: 1.6rem;
+  height: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(16, 24, 32, 0.06);
   color: var(--color-text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
 }
 
 .cart-card {
@@ -217,7 +198,7 @@
   padding: 0.2rem;
   border-radius: 999px;
   border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.68);
+  background: #fff;
 }
 
 .qty-control button {
@@ -266,12 +247,37 @@
   gap: var(--space-6);
 }
 
-.featured-strip,
 .catalog-panel {
   display: grid;
   gap: var(--space-5);
 }
 
+.shop-custom-cta {
+  padding-bottom: var(--space-12);
+}
+
+.shop-custom-cta-card {
+  display: block;
+}
+
+.shop-custom-cta-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+}
+
+.shop-custom-cta-copy {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.shop-custom-cta-title {
+  margin: 0;
+  font-size: clamp(1.15rem, 0.45vw + 1.02rem, 1.45rem);
+  line-height: 1.25;
+}
+
 .section-title {
   margin: 0;
   font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
@@ -290,7 +296,6 @@
   white-space: nowrap;
 }
 
-.featured-grid,
 .product-grid {
   display: grid;
   gap: var(--space-5);
@@ -317,7 +322,6 @@
 }
 
 @media (max-width: 1080px) {
-  .shop-hero-grid,
   .shop-layout {
     grid-template-columns: 1fr;
   }
@@ -328,11 +332,15 @@
 }
 
 @media (max-width: 760px) {
-  .featured-grid,
   .product-grid {
     grid-template-columns: 1fr;
   }
 
+  .shop-custom-cta-inner {
+    align-items: start;
+    flex-direction: column;
+  }
+
   .catalog-head,
   .cart-line-controls,
   .panel-head {

frontend/src/app/features/shop/shop-page.component.ts

@@ -16,7 +16,6 @@ import {
   combineLatest,
   finalize,
   forkJoin,
-  map,
   of,
   switchMap,
   tap,
@@ -34,6 +33,7 @@ import {
   ShopProductSummary,
   ShopService,
 } from './services/shop.service';
+import { ShopRouteService } from './services/shop-route.service';
 
 @Component({
   selector: 'app-shop-page',
@@ -56,6 +56,7 @@ export class ShopPageComponent {
   private readonly translate = inject(TranslateService);
   private readonly seoService = inject(SeoService);
   private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
   readonly shopService = inject(ShopService);
 
   readonly categorySlug = input<string | undefined>();
@@ -66,7 +67,6 @@ export class ShopPageComponent {
   readonly categoryNodes = signal<ShopCategoryNavNode[]>([]);
   readonly selectedCategory = signal<ShopCategoryDetail | null>(null);
   readonly products = signal<ShopProductSummary[]>([]);
-  readonly featuredProducts = signal<ShopProductSummary[]>([]);
 
   readonly cartMutating = signal(false);
   readonly busyLineItemId = signal<string | null>(null);
@@ -111,18 +111,12 @@ export class ShopPageComponent {
           forkJoin({
             categories: this.shopService.getCategories(),
             catalog: this.shopService.getProductCatalog(categorySlug ?? null),
-            featuredProducts: categorySlug
-              ? of<ShopProductSummary[]>([])
-              : this.shopService
-                  .getProductCatalog(null, true)
-                  .pipe(map((response) => response.products)),
           }).pipe(
             catchError((error) => {
               this.categories.set([]);
               this.categoryNodes.set([]);
               this.selectedCategory.set(null);
               this.products.set([]);
-              this.featuredProducts.set([]);
               this.error.set(
                 error?.status === 404 ? 'SHOP.NOT_FOUND' : 'SHOP.LOAD_ERROR',
               );
@@ -148,7 +142,6 @@ export class ShopPageComponent {
         );
         this.selectedCategory.set(result.catalog.category ?? null);
         this.products.set(result.catalog.products);
-        this.featuredProducts.set(result.featuredProducts);
         this.applySeo(result.catalog.category ?? null);
       });
   }
@@ -176,8 +169,7 @@ export class ShopPageComponent {
   }
 
   navigateToCategory(slug?: string | null): void {
-    const commands = slug ? ['/shop', slug] : ['/shop'];
-    this.router.navigate(commands);
+    this.router.navigate(this.shopRouteService.shopRootCommands(slug));
   }
 
   increaseQuantity(item: ShopCartItem): void {

frontend/src/app/features/shop/shop.routes.ts

@@ -12,6 +12,13 @@ export const SHOP_ROUTES: Routes = [
         'Catalogo prodotti stampati in 3D, accessori tecnici e soluzioni pratiche pronte all uso.',
     },
   },
+  {
+    path: 'p/:productSlug',
+    component: ProductDetailComponent,
+    data: {
+      seoTitle: 'Prodotto | 3D fab',
+    },
+  },
   {
     path: ':categorySlug/:productSlug',
     component: ProductDetailComponent,

frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts

@@ -5,10 +5,12 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
+  PLATFORM_ID,
   ViewChild,
   SimpleChanges,
+  inject,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import * as THREE from 'three';
 // @ts-ignore
@@ -24,6 +26,9 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
   styleUrl: './stl-viewer.component.scss',
 })
 export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+
   @Input() file: File | null = null;
   @Input() color: string = '#facf0a'; // Default Brand Color
   @Input() height = 300;
@@ -39,14 +44,22 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
   private animationId: number | null = null;
   private currentMesh: THREE.Mesh | null = null;
   private autoRotate = true;
+  private resizeObserver: ResizeObserver | null = null;
 
   loading = false;
 
   ngOnInit() {
+    if (!this.isBrowser) {
+      return;
+    }
     this.initThree();
   }
 
   ngOnChanges(changes: SimpleChanges) {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (changes['file'] && this.file) {
       this.loadFile(this.file);
     }
@@ -57,6 +70,9 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnDestroy() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+
     if (this.animationId) cancelAnimationFrame(this.animationId);
     this.clearCurrentMesh();
     if (this.controls) this.controls.dispose();
@@ -121,7 +137,7 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
     this.animate();
 
     // Handle resize
-    const resizeObserver = new ResizeObserver(() => {
+    this.resizeObserver = new ResizeObserver(() => {
       if (!this.rendererContainer) return;
       const w = this.rendererContainer.nativeElement.clientWidth;
       const h = this.rendererContainer.nativeElement.clientHeight;
@@ -129,7 +145,7 @@ export class StlViewerComponent implements OnInit, OnDestroy, OnChanges {
       this.camera.updateProjectionMatrix();
       this.renderer.setSize(w, h);
     });
-    resizeObserver.observe(this.rendererContainer.nativeElement);
+    this.resizeObserver.observe(this.rendererContainer.nativeElement);
   }
 
   dimensions = { x: 0, y: 0, z: 0 };

frontend/src/app/shared/directives/copy-on-click.directive.ts

@@ -1,10 +1,20 @@
-import { Directive, HostBinding, HostListener, Input } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import {
+  Directive,
+  HostBinding,
+  HostListener,
+  Input,
+  PLATFORM_ID,
+  inject,
+} from '@angular/core';
 
 @Directive({
   selector: '[appCopyOnClick]',
   standalone: true,
 })
 export class CopyOnClickDirective {
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
   @Input('appCopyOnClick') value: string | null | undefined;
 
   @HostBinding('style.cursor') readonly cursor = 'pointer';
@@ -21,6 +31,10 @@ export class CopyOnClickDirective {
   }
 
   private async copy(text: string): Promise<void> {
+    if (!this.isBrowser) {
+      return;
+    }
+
     if (navigator.clipboard?.writeText) {
       try {
         await navigator.clipboard.writeText(text);

frontend/src/assets/i18n/de.json

@@ -104,7 +104,10 @@
     "WIP_CTA_CALC": "Zum Rechner",
     "WIP_RETURN_LATER": "Kommen Sie später wieder",
     "WIP_NOTE": "Wir legen Wert darauf, die Dinge richtig zu machen: In der Zwischenzeit können Sie Preis und Lieferzeit einer 3D-Datei sofort mit unserem Rechner berechnen.",
+    "CUSTOM_PART_FOOTER_TITLE": "Nicht das gefunden, was Sie suchen?",
+    "CUSTOM_PART_FOOTER_TEXT": "Kontaktieren Sie uns für individuelle Teile.",
     "ADD_CART": "In den Warenkorb",
+    "ADDING": "Wird hinzugefügt",
     "BACK": "Zurück zum Shop",
     "NOT_FOUND": "Produkt nicht gefunden.",
     "DETAILS": "Details",
@@ -112,6 +115,21 @@
     "SUCCESS_TITLE": "Zum Warenkorb hinzugefügt",
     "SUCCESS_DESC": "Das Produkt wurde erfolgreich zum Warenkorb hinzugefügt.",
     "CONTINUE": "Weiter",
+    "MODEL_OPEN": "3D-Ansicht öffnen",
+    "MODEL_CLOSE": "3D-Ansicht schließen",
+    "PREVIOUS_IMAGE": "Vorheriges Bild",
+    "NEXT_IMAGE": "Nächstes Bild",
+    "SELECT_MATERIAL": "Material",
+    "SELECT_COLOR": "Farbe",
+    "MATERIAL_COLOR_COUNT": "{{count}} Farben verfügbar",
+    "PROPERTY_UV": "UV-Beständigkeit",
+    "PROPERTY_WEATHER": "Außeneinsatz",
+    "PROPERTY_RIGIDITY": "Steifigkeit",
+    "PROPERTY_HIGH": "Hoch",
+    "PROPERTY_MEDIUM": "Mittel",
+    "PROPERTY_LOW": "Niedrig",
+    "PROPERTY_RIGID": "Steif",
+    "PROPERTY_FLEXIBLE": "Flexibel",
     "CATEGORIES": {
       "FILAMENTS": "Filamente",
       "ACCESSORIES": "Zubehör"

frontend/src/assets/i18n/en.json

@@ -104,7 +104,10 @@
     "WIP_CTA_CALC": "Check our calculator",
     "WIP_RETURN_LATER": "Come back soon",
     "WIP_NOTE": "We care about doing this right. In the meantime, you can get instant pricing and lead time from our calculator.",
+    "CUSTOM_PART_FOOTER_TITLE": "Can't find what you're looking for?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contact us for custom parts.",
     "ADD_CART": "Add to Cart",
+    "ADDING": "Adding to cart",
     "BACK": "Back to Shop",
     "NOT_FOUND": "Product not found.",
     "DETAILS": "Details",
@@ -112,6 +115,21 @@
     "SUCCESS_TITLE": "Added to cart",
     "SUCCESS_DESC": "The product has been added to the cart.",
     "CONTINUE": "Continue",
+    "MODEL_OPEN": "Open 3D view",
+    "MODEL_CLOSE": "Close 3D view",
+    "PREVIOUS_IMAGE": "Previous image",
+    "NEXT_IMAGE": "Next image",
+    "SELECT_MATERIAL": "Material",
+    "SELECT_COLOR": "Color",
+    "MATERIAL_COLOR_COUNT": "{{count}} colors available",
+    "PROPERTY_UV": "UV resistance",
+    "PROPERTY_WEATHER": "Outdoor use",
+    "PROPERTY_RIGIDITY": "Rigidity",
+    "PROPERTY_HIGH": "High",
+    "PROPERTY_MEDIUM": "Medium",
+    "PROPERTY_LOW": "Low",
+    "PROPERTY_RIGID": "Rigid",
+    "PROPERTY_FLEXIBLE": "Flexible",
     "CATEGORIES": {
       "FILAMENTS": "Filaments",
       "ACCESSORIES": "Accessories"

frontend/src/assets/i18n/fr.json

@@ -161,7 +161,10 @@
     "WIP_CTA_CALC": "Aller au calculateur",
     "WIP_RETURN_LATER": "Revenez dans un moment",
     "WIP_NOTE": "Nous tenons à bien faire les choses : en attendant, vous pouvez calculer immédiatement prix et délais d'un fichier 3D avec notre calculateur.",
+    "CUSTOM_PART_FOOTER_TITLE": "Vous ne trouvez pas ce que vous cherchez ?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contactez-nous pour des pièces personnalisées.",
     "ADD_CART": "Ajouter au panier",
+    "ADDING": "Ajout en cours",
     "BACK": "Retour à la boutique",
     "NOT_FOUND": "Produit introuvable.",
     "DETAILS": "Détails",
@@ -169,6 +172,21 @@
     "SUCCESS_TITLE": "Ajouté au panier",
     "SUCCESS_DESC": "Le produit a été ajouté au panier avec succès.",
     "CONTINUE": "Continuer",
+    "MODEL_OPEN": "Ouvrir la vue 3D",
+    "MODEL_CLOSE": "Fermer la vue 3D",
+    "PREVIOUS_IMAGE": "Image précédente",
+    "NEXT_IMAGE": "Image suivante",
+    "SELECT_MATERIAL": "Matériau",
+    "SELECT_COLOR": "Couleur",
+    "MATERIAL_COLOR_COUNT": "{{count}} couleurs disponibles",
+    "PROPERTY_UV": "Résistance UV",
+    "PROPERTY_WEATHER": "Usage extérieur",
+    "PROPERTY_RIGIDITY": "Rigidité",
+    "PROPERTY_HIGH": "Élevée",
+    "PROPERTY_MEDIUM": "Moyenne",
+    "PROPERTY_LOW": "Faible",
+    "PROPERTY_RIGID": "Rigide",
+    "PROPERTY_FLEXIBLE": "Flexible",
     "CATEGORIES": {
       "FILAMENTS": "Filaments",
       "ACCESSORIES": "Accessoires"

frontend/src/assets/i18n/it.json

@@ -177,6 +177,9 @@
     "CATALOG_LABEL": "Catalogo",
     "CATALOG_TITLE": "Tutti i prodotti",
     "CATALOG_META_DESCRIPTION": "Scopri prodotti stampati in 3D, accessori tecnici e soluzioni pronte all uso con lo stesso checkout del calcolatore.",
+    "CUSTOM_PART_CTA": "Non trovi quello che cerchi? Richiedi un pezzo personalizzato.",
+    "CUSTOM_PART_FOOTER_TITLE": "Non trovi quello che cerchi?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contattaci per pezzi personalizzati.",
     "CATEGORY_META": "{{count}} prodotti disponibili in questa categoria",
     "CATEGORY_PANEL_KICKER": "Navigazione",
     "CATEGORY_PANEL_TITLE": "Categorie",
@@ -193,11 +196,25 @@
     "EXCERPT_FALLBACK": "Scheda prodotto in preparazione.",
     "MODEL_3D": "3D preview",
     "MODEL_TITLE": "Anteprima del modello",
+    "MODEL_OPEN": "Apri vista 3D",
+    "MODEL_CLOSE": "Chiudi vista 3D",
     "MODEL_LOADING": "Stiamo caricando il modello 3D.",
     "MODEL_UNAVAILABLE": "Preview 3D non disponibile.",
+    "PREVIOUS_IMAGE": "Immagine precedente",
+    "NEXT_IMAGE": "Immagine successiva",
     "BREADCRUMB_ROOT": "Shop",
+    "SELECT_MATERIAL": "Materiale",
     "SELECT_COLOR": "Colore",
+    "MATERIAL_COLOR_COUNT": "{{count}} colori disponibili",
     "VARIANT": "Variante",
+    "PROPERTY_UV": "Resistenza UV",
+    "PROPERTY_WEATHER": "Uso esterno",
+    "PROPERTY_RIGIDITY": "Rigidità",
+    "PROPERTY_HIGH": "Alta",
+    "PROPERTY_MEDIUM": "Media",
+    "PROPERTY_LOW": "Bassa",
+    "PROPERTY_RIGID": "Rigido",
+    "PROPERTY_FLEXIBLE": "Flessibile",
     "QUANTITY": "Quantità",
     "GO_TO_CHECKOUT": "Vai al checkout",
     "IN_CART_SHORT": "Nel carrello x{{count}}",
@@ -206,7 +223,7 @@
     "CART_TITLE": "Carrello",
     "CART_SUMMARY_TITLE": "Riepilogo attuale",
     "CART_LOADING": "Caricamento carrello in corso.",
-    "CART_EMPTY": "Il carrello è vuoto. Aggiungi un prodotto per ritrovarlo subito anche al prossimo accesso.",
+    "CART_EMPTY": "Il carrello è vuoto. Aggiungi un prodotto.",
     "CART_SUBTOTAL": "Subtotale prodotti",
     "CART_SHIPPING": "Spedizione",
     "CART_TOTAL": "Totale stimato",

frontend/src/main.server.ts

@@ -0,0 +1,11 @@
+import {
+  BootstrapContext,
+  bootstrapApplication,
+} from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(AppComponent, config, context);
+
+export default bootstrap;

frontend/src/server.ts

@@ -0,0 +1,67 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { CommonEngine, isMainModule } from '@angular/ssr/node';
+import express from 'express';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import bootstrap from './main.server';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = join(serverDistFolder, 'index.server.html');
+
+const app = express();
+const commonEngine = new CommonEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/**', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.get(
+  '**',
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.get('**', (req, res, next) => {
+  const { protocol, originalUrl, baseUrl, headers } = req;
+
+  commonEngine
+    .render({
+      bootstrap,
+      documentFilePath: indexHtml,
+      url: `${protocol}://${headers.host}${originalUrl}`,
+      publicPath: browserDistFolder,
+      providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
+    })
+    .then((html) => res.send(html))
+    .catch((err) => next(err));
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, () => {
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+export default app;

frontend/src/styles.scss

@@ -1,6 +1,7 @@
 /* src/styles.scss */
 @use "./styles/theme";
 @use "./styles/patterns";
+@use "./styles/shop-product-detail-overrides";
 @use "./styles/ui";
 
 /* Reset / Base */

frontend/src/styles/_shop-product-detail-overrides.scss

@@ -0,0 +1,298 @@
+app-product-detail {
+  .hero-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    width: 2.2rem;
+    height: 2.2rem;
+    border-radius: 999px;
+    border: 1px solid rgba(16, 24, 32, 0.14);
+    background: rgba(255, 255, 255, 0.92);
+    color: var(--color-text);
+    font-size: 1.4rem;
+    line-height: 1;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+  }
+
+  .hero-nav:hover {
+    border-color: rgba(16, 24, 32, 0.28);
+  }
+
+  .hero-nav-prev {
+    left: 0.6rem;
+  }
+
+  .hero-nav-next {
+    right: 0.6rem;
+  }
+
+  .viewer-state {
+    display: grid;
+    place-items: center;
+    min-height: 220px;
+    border-radius: var(--radius-lg);
+    background: rgba(16, 24, 32, 0.04);
+    color: var(--color-text-muted);
+  }
+
+  .viewer-state-error {
+    color: var(--color-danger-600);
+  }
+
+  .viewer-loading {
+    gap: 0.6rem;
+  }
+
+  .spinner {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    border: 2px solid rgba(16, 24, 32, 0.16);
+    border-top-color: var(--color-secondary-600);
+    animation: shopDetailSpin 0.9s linear infinite;
+  }
+
+  .model-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1100;
+    border: 0;
+    background: rgba(16, 24, 32, 0.36);
+  }
+
+  .model-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(940px, calc(100vw - 2rem));
+    max-height: calc(100vh - 2rem);
+    display: grid;
+    grid-template-rows: auto 1fr;
+    gap: 0.9rem;
+    z-index: 1101;
+    padding: 1rem;
+    border-radius: 1rem;
+    border: 1px solid rgba(16, 24, 32, 0.16);
+    background: #fff;
+    box-shadow: 0 22px 40px rgba(16, 24, 32, 0.3);
+  }
+
+  .model-modal-head {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-3);
+    align-items: start;
+  }
+
+  .model-close-btn {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 999px;
+    border: 1px solid rgba(16, 24, 32, 0.16);
+    background: #fff;
+    cursor: pointer;
+  }
+
+  .model-modal-body {
+    min-height: 260px;
+    max-height: calc(100vh - 11rem);
+    overflow: auto;
+  }
+
+  .color-selector-block {
+    position: relative;
+    display: grid;
+    gap: 0.4rem;
+    padding: 0;
+    border-radius: 1rem;
+    border: 0;
+    background: transparent;
+  }
+
+  .selector-head {
+    display: block;
+  }
+
+  .color-trigger {
+    width: 100%;
+    max-width: 230px;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.35rem 0.55rem;
+    border-radius: 0.72rem;
+    border: 1px solid rgba(16, 24, 32, 0.14);
+    background: #fff;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      border-color 0.16s ease,
+      box-shadow 0.16s ease;
+  }
+
+  .color-trigger:hover {
+    border-color: rgba(16, 24, 32, 0.28);
+  }
+
+  .color-trigger.open {
+    border-color: rgba(250, 207, 10, 0.95);
+    box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.28);
+  }
+
+  .color-trigger__ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    border: 2px solid rgba(250, 207, 10, 0.95);
+  }
+
+  .color-trigger__swatch {
+    width: 1.22rem;
+    height: 1.22rem;
+    border-radius: 50%;
+    border: 1px solid rgba(16, 24, 32, 0.16);
+  }
+
+  .color-trigger__copy {
+    display: grid;
+    gap: 0.08rem;
+  }
+
+  .color-trigger__copy strong {
+    font-size: 0.88rem;
+  }
+
+  .color-trigger__copy small {
+    font-size: 0.76rem;
+    color: var(--color-text-muted);
+  }
+
+  .color-popup-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    border: 0;
+    background: transparent;
+  }
+
+  .color-popup {
+    position: absolute;
+    top: calc(100% + 0.45rem);
+    left: 0;
+    z-index: 1000;
+    width: min(340px, 100%);
+    padding: 0.9rem;
+    border-radius: 0.85rem;
+    border: 1px solid rgba(16, 24, 32, 0.12);
+    background: #fff;
+    box-shadow: 0 12px 24px rgba(16, 24, 32, 0.14);
+  }
+
+  .color-popup__category {
+    margin-bottom: 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--color-text-muted);
+  }
+
+  .color-popup__grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.75rem 0.55rem;
+  }
+
+  .color-popup__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    text-align: center;
+    color: inherit;
+  }
+
+  .color-popup__ring {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: 2px solid transparent;
+    transition: border-color 0.15s ease;
+  }
+
+  .color-popup__ring.active {
+    border-color: rgba(250, 207, 10, 0.95);
+  }
+
+  .color-popup__swatch {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 50%;
+    border: 1px solid rgba(16, 24, 32, 0.18);
+  }
+
+  .color-popup__name {
+    font-size: 0.8rem;
+    line-height: 1.2;
+    color: var(--color-text);
+  }
+}
+
+@keyframes shopDetailSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (max-width: 640px) {
+  app-product-detail {
+    .selector-head {
+      display: block;
+    }
+
+    .color-popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: min(340px, calc(100vw - 1.5rem));
+      max-height: min(72vh, 440px);
+      overflow-y: auto;
+    }
+
+    .color-trigger {
+      max-width: 100%;
+    }
+
+    .model-launch-row {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .dimensions-inline {
+      flex-wrap: wrap;
+    }
+
+    .model-modal {
+      width: calc(100vw - 1rem);
+      max-height: calc(100vh - 1rem);
+      padding: 0.8rem;
+    }
+
+    .model-modal-body {
+      max-height: calc(100vh - 9.5rem);
+    }
+  }
+}

frontend/src/styles/_ui.scss

@@ -19,6 +19,30 @@
   font-size: 1.05rem;
 }
 
+.ui-simple-hero {
+  padding: var(--space-12) 0;
+  text-align: center;
+}
+
+.ui-simple-hero__title {
+  margin: 0 0 var(--space-2);
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  margin-top: var(--space-6);
+}
+
+.ui-simple-hero__subtitle {
+  max-width: 600px;
+  margin: var(--space-6) auto;
+  color: var(--color-text-muted);
+  font-size: 1.25rem;
+}
+
+.ui-simple-hero__actions {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--space-6);
+}
+
 .ui-stack {
   display: grid;
   gap: var(--space-4);
@@ -153,6 +177,7 @@
   font-size: 1.1rem;
   line-height: 1.6;
   color: var(--color-text-muted);
+  margin-bottom: var(--space-4);
 }
 
 .ui-inline-actions {

frontend/tsconfig.app.json

@@ -4,10 +4,14 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "files": [
-    "src/main.ts"
+    "src/main.ts",
+    "src/main.server.ts",
+    "src/server.ts"
   ],
   "include": [
     "src/**/*.d.ts"