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

feat(front-end): ssr implementation
style: apply prettier formatting
2026-03-11 16:57:07 +01:00 · 2026-03-11 16:57:03 +01:00 · 2026-03-11 15:37:29 +00:00 · 2026-03-11 16:37:08 +01:00 · 2026-03-11 15:30:21 +01:00 · 2026-03-11 15:28:40 +01:00
51 changed files with 2957 additions and 1079 deletions
--- a/.gitea/workflows/deploy.yaml
+++ b/.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
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ Configura il percorso di OrcaSlicer in `backend/src/main/resources/application.p

 - `MEDIA_STORAGE_ROOT` per la root `storage_media` usata dal backend (`original/`, `public/`, `private/`)
 - `SHOP_STORAGE_ROOT` per la root `storage_shop` usata dal backend per i modelli dei prodotti shop
- `MEDIA_FFMPEG_PATH` per il binario `ffmpeg`
+- `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
@@ -107,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 `APP_FRONTEND_BASE_URL` punti al dominio corretto, che `location /media/` sia 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.
--- a/backend/Dockerfile
+++ b/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
--- a/backend/build.gradle
+++ b/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'
--- a/backend/entrypoint.sh
+++ b/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
--- a/backend/src/main/java/com/printcalculator/controller/SitemapController.java
+++ b/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());
+    }
+}
--- a/backend/src/main/java/com/printcalculator/service/admin/AdminMediaControllerService.java
+++ b/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)
            );
--- a/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
+++ b/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
@@ -22,6 +22,9 @@ 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;
@@ -64,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;
@@ -613,17 +620,17 @@ public class AdminShopProductControllerService {
        excerpts.put("fr", firstNonBlank(normalizeOptional(payload.getExcerptFr()), fallbackExcerpt));

        String fallbackDescription = firstNonBlank(
-                normalizeOptional(payload.getDescription()),
-                normalizeOptional(payload.getDescriptionIt()),
-                normalizeOptional(payload.getDescriptionEn()),
-                normalizeOptional(payload.getDescriptionDe()),
-                normalizeOptional(payload.getDescriptionFr())
+                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(normalizeOptional(payload.getDescriptionIt()), fallbackDescription));
-        descriptions.put("en", firstNonBlank(normalizeOptional(payload.getDescriptionEn()), fallbackDescription));
-        descriptions.put("de", firstNonBlank(normalizeOptional(payload.getDescriptionDe()), fallbackDescription));
-        descriptions.put("fr", firstNonBlank(normalizeOptional(payload.getDescriptionFr()), fallbackDescription));
+        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()),
@@ -689,6 +696,27 @@ 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;
--- a/backend/src/main/java/com/printcalculator/service/media/MediaFfmpegService.java
+++ b/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 "";
--- a/backend/src/main/java/com/printcalculator/service/shop/PublicShopCatalogService.java
+++ b/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(), language))
+                .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(), language);
+        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) {
@@ -349,6 +386,7 @@ public class PublicShopCatalogService {

    private ShopProductSummaryDto toProductSummaryDto(ProductEntry entry,
                                                      Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+                                                      Map<String, String> variantColorHexByMaterialAndColor,
                                                      String language) {
        List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
        return new ShopProductSummaryDto(
@@ -365,7 +403,7 @@ public class PublicShopCatalogService {
                ),
                resolvePriceFrom(entry.variants()),
                resolvePriceTo(entry.variants()),
-                toVariantDto(entry.defaultVariant(), entry.defaultVariant()),
+                toVariantDto(entry.defaultVariant(), entry.defaultVariant(), variantColorHexByMaterialAndColor),
                selectPrimaryMedia(images),
                toProductModelDto(entry)
        );
@@ -373,6 +411,7 @@ public class PublicShopCatalogService {

    private ShopProductDetailDto toProductDetailDto(ProductEntry entry,
                                                    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);
@@ -398,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,
@@ -408,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;
@@ -494,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
    ) {
    }

--- a/backend/src/main/java/com/printcalculator/service/shop/ShopSitemapService.java
+++ b/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) {
+    }
+}
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -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}
--- a/backend/src/test/java/com/printcalculator/service/media/MediaFfmpegServiceTest.java
+++ b/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"));
+    }
 }
--- a/backend/src/test/java/com/printcalculator/service/shop/ShopSitemapServiceTest.java
+++ b/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();
+    }
+}
--- a/docker-compose.deploy.yml
+++ b/docker-compose.deploy.yml
@@ -33,7 +33,7 @@ services:
      - PROFILES_DIR=/app/profiles
      - MEDIA_STORAGE_ROOT=${MEDIA_STORAGE_ROOT:-/app/storage_media}
      - SHOP_STORAGE_ROOT=${SHOP_STORAGE_ROOT:-/app/storage_shop}
-      - MEDIA_FFMPEG_PATH=${MEDIA_FFMPEG_PATH:-ffmpeg}
+      - 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:
--- a/frontend/Dockerfile
+++ b/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"]
--- a/frontend/Dockerfile.dev
+++ b/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"]
--- a/frontend/angular.json
+++ b/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": {
@@ -61,8 +66,8 @@
                },
                {
                  "type": "anyComponentStyle",
-                  "maximumWarning": "10kB",
-                  "maximumError": "14kB"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                }
              ]
            },
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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",
--- a/frontend/public/robots.txt
+++ b/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
--- a/frontend/public/sitemap-static.xml
+++ b/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>
--- a/frontend/public/sitemap.xml
+++ b/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>
--- a/frontend/src/app/app.config.server.ts
+++ b/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);
--- a/frontend/src/app/app.config.ts
+++ b/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()),
  ],
 };
--- a/frontend/src/app/app.routes.ts
+++ b/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,
--- a/frontend/src/app/features/admin/pages/admin-cad-invoices.component.ts
+++ b/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)
--- a/frontend/src/app/features/admin/pages/admin-contact-requests.component.ts
+++ b/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;
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.ts
+++ b/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;
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.html
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.html
@@ -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)"
                    >
+                      <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>
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.scss
@@ -27,6 +27,62 @@
  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;
 }
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.ts
+++ b/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 {
--- a/frontend/src/app/features/admin/pages/admin-sessions.component.ts
+++ b/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,7 +52,9 @@ export class AdminSessionsComponent implements OnInit {
      return;
    }

-    const confirmed = window.confirm(
+    const confirmed =
+      this.isBrowser &&
+      window.confirm(
        `Vuoi eliminare la sessione ${session.id}? Questa azione non si puo annullare.`,
      );
    if (!confirmed) {
--- a/frontend/src/app/features/admin/pages/admin-shop.component.html
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.html
@@ -8,7 +8,8 @@
      </p>
    </div>

-    <div class="header-actions">
+    <div class="header-side ui-stack ui-stack--dense">
+      <div class="header-stats ui-row ui-row--wrap ui-row--end">
        <article class="ui-stat-chip">
          <strong>{{ products.length }}</strong>
          <span>prodotti</span>
@@ -17,6 +18,8 @@
          <strong>{{ categories.length }}</strong>
          <span>categorie</span>
        </article>
+      </div>
+      <div class="header-actions ui-row ui-row--wrap ui-row--end">
        <button
          type="button"
          class="ui-button ui-button--ghost"
@@ -28,6 +31,7 @@
          Nuovo prodotto
        </button>
      </div>
+    </div>
  </header>

  <p class="ui-banner ui-banner--error" *ngIf="errorMessage">
@@ -635,17 +639,90 @@
              />
            </label>

-            <label class="ui-form-field form-field--wide">
+            <div class="ui-form-field form-field--wide">
              <span class="ui-form-caption">
                Descrizione {{ languageLabels[activeContentLanguage] }}
              </span>
-              <textarea
-                class="ui-form-control textarea-control textarea-control--large"
-                [(ngModel)]="productForm.descriptions[activeContentLanguage]"
-                [name]="'product-description-' + activeContentLanguage"
-                rows="6"
-              ></textarea>
-            </label>
+              <div class="rich-text-field">
+                <div class="rich-text-toolbar" role="toolbar">
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="formatDescription('bold')"
+                    title="Grassetto"
+                    aria-label="Grassetto"
+                  >
+                    <strong>B</strong>
+                  </button>
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="formatDescription('italic')"
+                    title="Corsivo"
+                    aria-label="Corsivo"
+                  >
+                    <em>I</em>
+                  </button>
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="formatDescription('underline')"
+                    title="Sottolineato"
+                    aria-label="Sottolineato"
+                  >
+                    <u>U</u>
+                  </button>
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="formatDescriptionList('unordered')"
+                    title="Lista puntata"
+                    aria-label="Lista puntata"
+                  >
+                    • Lista
+                  </button>
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="formatDescriptionList('ordered')"
+                    title="Lista numerata"
+                    aria-label="Lista numerata"
+                  >
+                    1. Lista
+                  </button>
+                  <button
+                    type="button"
+                    class="rich-text-toolbar__button"
+                    (mousedown)="preventRichTextToolbarMouseDown($event)"
+                    (click)="clearDescriptionFormatting()"
+                    title="Rimuovi formattazione"
+                    aria-label="Rimuovi formattazione"
+                  >
+                    Tx
+                  </button>
+                </div>
+                <div
+                  #descriptionEditorRef
+                  class="ui-form-control textarea-control textarea-control--large rich-text-editor"
+                  contenteditable="true"
+                  role="textbox"
+                  aria-multiline="true"
+                  [attr.aria-label]="
+                    'Descrizione ' + languageLabels[activeContentLanguage]
+                  "
+                  (input)="onDescriptionEditorInput($event)"
+                  (blur)="onDescriptionEditorBlur($event)"
+                ></div>
+              </div>
+              <span class="ui-form-caption">
+                Supporta grassetto, corsivo, liste puntate e numerate.
+              </span>
+            </div>
          </div>
        </section>

@@ -801,6 +878,7 @@
                    class="ui-form-control"
                    [(ngModel)]="material.materialCode"
                    [name]="'material-code-' + index"
+                    (ngModelChange)="onMaterialCodeChange(index, $event)"
                  >
                    <option [ngValue]="''" disabled>Seleziona materiale</option>
                    <option
@@ -838,6 +916,30 @@
                  />
                </label>

+                <label class="ui-form-field" *ngIf="material.isDefault">
+                  <span class="ui-form-caption">Colore default</span>
+                  <select
+                    class="ui-form-control"
+                    [(ngModel)]="material.defaultColorKey"
+                    [name]="'material-default-color-' + index"
+                    [disabled]="materialColorCount(material.materialCode) === 0"
+                  >
+                    <option [ngValue]="''" disabled>
+                      Seleziona colore default
+                    </option>
+                    <option
+                      *ngFor="
+                        let option of materialColorOptions(
+                          material.materialCode
+                        )
+                      "
+                      [ngValue]="option.key"
+                    >
+                      {{ option.label }}
+                    </option>
+                  </select>
+                </label>
+
                <div class="toggle-row toggle-row--compact">
                  <label class="ui-checkbox">
                    <input
--- a/frontend/src/app/features/admin/pages/admin-shop.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.scss
@@ -80,13 +80,6 @@
  color: var(--color-text-muted);
 }

-.header-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--space-2);
-}
-
 .workspace {
  align-items: start;
 }
@@ -252,6 +245,62 @@
  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;
--- a/frontend/src/app/features/admin/pages/admin-shop.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.ts
@@ -1,10 +1,11 @@
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import {
  Component,
  ElementRef,
  HostListener,
  OnDestroy,
  OnInit,
+  PLATFORM_ID,
  ViewChild,
  inject,
 } from '@angular/core';
@@ -53,6 +54,7 @@ interface CategoryFormState {

 interface ProductMaterialFormState {
  materialCode: string;
+  defaultColorKey: string;
  priceChf: string;
  isDefault: boolean;
  isActive: boolean;
@@ -115,6 +117,20 @@ const MAX_MODEL_FILE_SIZE_BYTES = 100 * 1024 * 1024;
 const SHOP_LIST_PANEL_WIDTH_STORAGE_KEY = 'admin-shop-list-panel-width';
 const MIN_LIST_PANEL_WIDTH_PERCENT = 32;
 const MAX_LIST_PANEL_WIDTH_PERCENT = 68;
+const RICH_TEXT_ALLOWED_TAGS = new Set([
+  'P',
+  'DIV',
+  'BR',
+  'STRONG',
+  'B',
+  'EM',
+  'I',
+  'U',
+  'UL',
+  'OL',
+  'LI',
+  'A',
+]);

@Component({
  selector: 'app-admin-shop',
@@ -124,10 +140,19 @@ const MAX_LIST_PANEL_WIDTH_PERCENT = 68;
  styleUrl: './admin-shop.component.scss',
 })
 export class AdminShopComponent implements OnInit, OnDestroy {
+  private readonly platformId = inject(PLATFORM_ID);
+  private readonly isBrowser = isPlatformBrowser(this.platformId);
+  private readonly documentRef = inject(DOCUMENT);
  private readonly adminShopService = inject(AdminShopService);
  private readonly adminOperationsService = inject(AdminOperationsService);
+  private descriptionEditorElement: HTMLDivElement | null = null;
  @ViewChild('workspaceRef')
  private readonly workspaceRef?: ElementRef<HTMLDivElement>;
+  @ViewChild('descriptionEditorRef')
+  set descriptionEditorRef(value: ElementRef<HTMLDivElement> | undefined) {
+    this.descriptionEditorElement = value?.nativeElement ?? null;
+    this.renderActiveDescriptionInEditor();
+  }

  readonly shopLanguages = SHOP_LANGUAGES;
  readonly mediaLanguages = MEDIA_LANGUAGES;
@@ -180,12 +205,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {

  ngOnDestroy(): void {
    this.revokeImagePreviewUrl(this.imageUploadState.previewUrl);
-    document.body.style.removeProperty('cursor');
+    if (this.isBrowser) {
+      this.documentRef.body?.style.removeProperty('cursor');
+    }
  }

  @HostListener('window:pointermove', ['$event'])
  onWindowPointerMove(event: PointerEvent): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
      return;
    }
    this.updateListPanelWidthFromPointer(event.clientX);
@@ -194,11 +221,13 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  @HostListener('window:pointerup')
  @HostListener('window:pointercancel')
  onWindowPointerUp(): void {
-    if (!this.isResizingPanels) {
+    if (!this.isBrowser || !this.isResizingPanels) {
      return;
    }
    this.isResizingPanels = false;
-    document.body.style.cursor = '';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = '';
+    }
    this.persistListPanelWidth();
  }

@@ -302,6 +331,8 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      return;
    }

+    this.syncDescriptionFromEditor(this.descriptionEditorElement, true);
+
    const validationError = this.validateProductForm();
    if (validationError) {
      this.errorMessage = validationError;
@@ -346,7 +377,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    }

    if (
-      !window.confirm(
+      !this.confirmBrowser(
        "Eliminare questo prodotto? L'azione non puo essere annullata.",
      )
    ) {
@@ -390,12 +421,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  startPanelResize(event: PointerEvent): void {
-    if (window.innerWidth <= 1060) {
+    if (!this.isBrowser || window.innerWidth <= 1060) {
      return;
    }
    event.preventDefault();
    this.isResizingPanels = true;
-    document.body.style.cursor = 'col-resize';
+    if (this.documentRef.body) {
+      this.documentRef.body.style.cursor = 'col-resize';
+    }
    this.updateListPanelWidthFromPointer(event.clientX);
  }

@@ -485,7 +518,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    }

    if (
-      !window.confirm(
+      !this.confirmBrowser(
        'Eliminare questa categoria? Fallira se contiene sottocategorie o prodotti.',
      )
    ) {
@@ -525,7 +558,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  setActiveContentLanguage(language: ShopLanguage): void {
+    this.syncDescriptionFromEditor(this.descriptionEditorElement, true);
    this.activeContentLanguage = language;
+    this.renderActiveDescriptionInEditor();
  }

  isContentLanguageComplete(language: ShopLanguage): boolean {
@@ -536,7 +571,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    return (
      !!this.productForm.names[language].trim() ||
      !!this.productForm.excerpts[language].trim() ||
-      !!this.productForm.descriptions[language].trim()
+      this.hasMeaningfulRichText(this.productForm.descriptions[language])
    );
  }

@@ -568,6 +603,34 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    );
  }

+  preventRichTextToolbarMouseDown(event: MouseEvent): void {
+    event.preventDefault();
+  }
+
+  onDescriptionEditorInput(event: Event): void {
+    const editor = event.target as HTMLDivElement | null;
+    this.syncDescriptionFromEditor(editor, false);
+  }
+
+  onDescriptionEditorBlur(event: Event): void {
+    const editor = event.target as HTMLDivElement | null;
+    this.syncDescriptionFromEditor(editor, true);
+  }
+
+  formatDescription(command: 'bold' | 'italic' | 'underline'): void {
+    this.applyDescriptionExecCommand(command);
+  }
+
+  formatDescriptionList(type: 'unordered' | 'ordered'): void {
+    this.applyDescriptionExecCommand(
+      type === 'unordered' ? 'insertUnorderedList' : 'insertOrderedList',
+    );
+  }
+
+  clearDescriptionFormatting(): void {
+    this.applyDescriptionExecCommand('removeFormat');
+  }
+
  addMaterial(): void {
    const nextMaterialCode = this.nextAvailableMaterialCode();
    if (!nextMaterialCode) {
@@ -590,7 +653,14 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      (_, currentIndex) => currentIndex !== index,
    );
    if (!nextMaterials.some((material) => material.isDefault)) {
-      nextMaterials[0].isDefault = true;
+      nextMaterials[0] = {
+        ...nextMaterials[0],
+        isDefault: true,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          nextMaterials[0].materialCode,
+          nextMaterials[0].defaultColorKey,
+        ),
+      };
    }
    this.productForm.materials = nextMaterials;
  }
@@ -600,10 +670,34 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      (material, currentIndex) => ({
        ...material,
        isDefault: currentIndex === index,
+        defaultColorKey: this.resolveMaterialDefaultColorKey(
+          material.materialCode,
+          material.defaultColorKey,
+        ),
      }),
    );
  }

+  onMaterialCodeChange(index: number, nextMaterialCode: string): void {
+    const normalizedMaterialCode = nextMaterialCode.trim().toUpperCase();
+    this.productForm.materials = this.productForm.materials.map(
+      (material, currentIndex) => {
+        if (currentIndex !== index) {
+          return material;
+        }
+
+        return {
+          ...material,
+          materialCode: normalizedMaterialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            normalizedMaterialCode,
+            material.defaultColorKey,
+          ),
+        };
+      },
+    );
+  }
+
  availableMaterialChoices(currentMaterialCode: string): string[] {
    const normalizedCurrentMaterialCode = currentMaterialCode
      .trim()
@@ -641,6 +735,22 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      .slice(0, 6);
  }

+  materialColorOptions(
+    materialCode: string,
+  ): Array<{ key: string; label: string }> {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    return this.stockVariantsForMaterial(normalizedMaterialCode).map(
+      (variant) => ({
+        key: this.variantKey(
+          normalizedMaterialCode,
+          variant.colorName,
+          variant.colorHex,
+        ),
+        label: this.stockVariantLabel(variant),
+      }),
+    );
+  }
+
  onModelFileSelected(event: Event): void {
    const input = event.target as HTMLInputElement | null;
    const file = input?.files?.[0] ?? null;
@@ -708,7 +818,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    }

    if (
-      !window.confirm('Rimuovere il modello 3D associato a questo prodotto?')
+      !this.confirmBrowser(
+        'Rimuovere il modello 3D associato a questo prodotto?',
+      )
    ) {
      return;
    }
@@ -780,7 +892,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    this.imageUploadState = {
      ...this.imageUploadState,
      file,
-      previewUrl: URL.createObjectURL(file),
+      previewUrl: this.isBrowser ? URL.createObjectURL(file) : null,
      translations: nextTranslations,
    };
  }
@@ -956,7 +1068,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      return;
    }

-    if (!window.confirm('Rimuovere questa immagine dal prodotto?')) {
+    if (!this.confirmBrowser('Rimuovere questa immagine dal prodotto?')) {
      return;
    }

@@ -1068,6 +1180,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private restoreListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
    const storedValue = window.localStorage.getItem(
      SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
    );
@@ -1082,6 +1197,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private persistListPanelWidth(): void {
+    if (!this.isBrowser) {
+      return;
+    }
    window.localStorage.setItem(
      SHOP_LIST_PANEL_WIDTH_STORAGE_KEY,
      String(this.listPanelWidthPercent),
@@ -1220,6 +1338,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {

  private resetProductForm(): void {
    Object.assign(this.productForm, this.createEmptyProductForm());
+    this.renderActiveDescriptionInEditor();
  }

  private createEmptyMaterialForm(
@@ -1229,6 +1348,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  ): ProductMaterialFormState {
    return {
      materialCode,
+      defaultColorKey: this.resolveMaterialDefaultColorKey(materialCode),
      priceChf: '0.00',
      isDefault,
      isActive: true,
@@ -1253,10 +1373,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        fr: product.excerptFr ?? '',
      },
      descriptions: {
-        it: product.descriptionIt ?? '',
-        en: product.descriptionEn ?? '',
-        de: product.descriptionDe ?? '',
-        fr: product.descriptionFr ?? '',
+        it: this.normalizeDescriptionForEditor(product.descriptionIt),
+        en: this.normalizeDescriptionForEditor(product.descriptionEn),
+        de: this.normalizeDescriptionForEditor(product.descriptionDe),
+        fr: this.normalizeDescriptionForEditor(product.descriptionFr),
      },
      seoTitles: {
        it: product.seoTitleIt ?? '',
@@ -1276,6 +1396,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      sortOrder: product.sortOrder ?? 0,
      materials: this.toMaterialForms(product.variants),
    });
+    this.renderActiveDescriptionInEditor();
  }

  private toMaterialForms(
@@ -1307,8 +1428,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
          (left, right) => (left.sortOrder ?? 0) - (right.sortOrder ?? 0),
        );
        const firstVariant = sortedVariants[0];
+        const defaultVariantForMaterial =
+          materialVariants.find((variant) => variant.isDefault) ?? null;
+        const persistedDefaultColorKey = defaultVariantForMaterial
+          ? this.variantKey(
+              materialCode,
+              defaultVariantForMaterial.colorName,
+              defaultVariantForMaterial.colorHex,
+            )
+          : null;
        return {
          materialCode,
+          defaultColorKey: this.resolveMaterialDefaultColorKey(
+            materialCode,
+            persistedDefaultColorKey,
+          ),
          priceChf: Number(firstVariant?.priceChf ?? 0).toFixed(2),
          isDefault: materialVariants.some((variant) => variant.isDefault),
          isActive: materialVariants.some((variant) => variant.isActive),
@@ -1394,11 +1528,21 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      excerptEn: this.optionalValue(this.productForm.excerpts['en']),
      excerptDe: this.optionalValue(this.productForm.excerpts['de']),
      excerptFr: this.optionalValue(this.productForm.excerpts['fr']),
-      description: this.optionalValue(this.productForm.descriptions['it']),
-      descriptionIt: this.optionalValue(this.productForm.descriptions['it']),
-      descriptionEn: this.optionalValue(this.productForm.descriptions['en']),
-      descriptionDe: this.optionalValue(this.productForm.descriptions['de']),
-      descriptionFr: this.optionalValue(this.productForm.descriptions['fr']),
+      description: this.optionalRichTextValue(
+        this.productForm.descriptions['it'],
+      ),
+      descriptionIt: this.optionalRichTextValue(
+        this.productForm.descriptions['it'],
+      ),
+      descriptionEn: this.optionalRichTextValue(
+        this.productForm.descriptions['en'],
+      ),
+      descriptionDe: this.optionalRichTextValue(
+        this.productForm.descriptions['de'],
+      ),
+      descriptionFr: this.optionalRichTextValue(
+        this.productForm.descriptions['fr'],
+      ),
      seoTitle: this.optionalValue(this.productForm.seoTitles['it']),
      seoTitleIt: this.optionalValue(this.productForm.seoTitles['it']),
      seoTitleEn: this.optionalValue(this.productForm.seoTitles['en']),
@@ -1430,9 +1574,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private buildVariantsFromMaterials(): AdminUpsertShopProductVariantPayload[] {
-    const persistedDefaultVariant = this.selectedProduct?.variants.find(
-      (variant) => variant.isDefault,
-    );
    const existingVariantsByKey = new Map(
      (this.selectedProduct?.variants ?? []).map((variant) => [
        this.variantKey(
@@ -1443,14 +1584,6 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        variant,
      ]),
    );
-    const persistedDefaultKey = persistedDefaultVariant
-      ? this.variantKey(
-          persistedDefaultVariant.internalMaterialCode,
-          persistedDefaultVariant.colorName,
-          persistedDefaultVariant.colorHex,
-        )
-      : null;
-
    const variants: AdminUpsertShopProductVariantPayload[] = [];
    let defaultAssigned = false;

@@ -1461,20 +1594,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    for (const material of sortedMaterials) {
      const materialCode = material.materialCode.trim().toUpperCase();
      const stockVariants = this.stockVariantsForMaterial(materialCode);
-      let defaultVariantKeyForMaterial: string | null = null;
-
-      if (material.isDefault && persistedDefaultKey) {
-        defaultVariantKeyForMaterial =
-          stockVariants
-            .map((variant) =>
-              this.variantKey(
+      const selectedDefaultColorKey = this.resolveMaterialDefaultColorKey(
        materialCode,
-                variant.colorName,
-                variant.colorHex,
-              ),
-            )
-            .find((variantKey) => variantKey === persistedDefaultKey) ?? null;
-      }
+        material.defaultColorKey,
+      );

      stockVariants.forEach((stockVariant, colorIndex) => {
        const variantKey = this.variantKey(
@@ -1486,9 +1609,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        const isDefault =
          material.isDefault &&
          !defaultAssigned &&
-          (defaultVariantKeyForMaterial
-            ? variantKey === defaultVariantKeyForMaterial
-            : colorIndex === 0);
+          variantKey === selectedDefaultColorKey;

        variants.push({
          id: existingVariant?.id,
@@ -1559,6 +1680,51 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      });
  }

+  private resolveMaterialDefaultColorKey(
+    materialCode: string,
+    preferredKey?: string | null,
+  ): string {
+    const normalizedMaterialCode = materialCode.trim().toUpperCase();
+    const stockVariants = this.stockVariantsForMaterial(normalizedMaterialCode);
+    if (stockVariants.length === 0) {
+      return '';
+    }
+
+    const normalizedPreferredKey = (preferredKey ?? '').trim();
+    if (
+      normalizedPreferredKey &&
+      stockVariants.some(
+        (variant) =>
+          this.variantKey(
+            normalizedMaterialCode,
+            variant.colorName,
+            variant.colorHex,
+          ) === normalizedPreferredKey,
+      )
+    ) {
+      return normalizedPreferredKey;
+    }
+
+    const firstVariant = stockVariants[0];
+    return this.variantKey(
+      normalizedMaterialCode,
+      firstVariant.colorName,
+      firstVariant.colorHex,
+    );
+  }
+
+  private stockVariantLabel(variant: AdminFilamentVariant): string {
+    const colorName = variant.colorName.trim();
+    const variantDisplayName = variant.variantDisplayName.trim();
+    if (
+      variantDisplayName &&
+      variantDisplayName.toLowerCase() !== colorName.toLowerCase()
+    ) {
+      return `${colorName} (${variantDisplayName})`;
+    }
+    return colorName;
+  }
+
  private nextAvailableMaterialCode(): string | null {
    const selectedCodes = new Set(
      this.productForm.materials
@@ -1677,6 +1843,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  }

  private revokeImagePreviewUrl(previewUrl: string | null): void {
+    if (!this.isBrowser) {
+      return;
+    }
    if (previewUrl?.startsWith('blob:')) {
      URL.revokeObjectURL(previewUrl);
    }
@@ -1760,6 +1929,266 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    return normalized ? normalized : undefined;
  }

+  private optionalRichTextValue(value: string): string | undefined {
+    const normalized = this.normalizeRichTextStorageValue(value);
+    return normalized ? normalized : undefined;
+  }
+
+  private syncDescriptionFromEditor(
+    editor: HTMLDivElement | null,
+    sanitize: boolean,
+  ): void {
+    if (!editor) {
+      return;
+    }
+    const currentHtml = this.serializeNodeChildren(editor);
+    const currentLanguage = this.activeContentLanguage;
+    if (sanitize) {
+      const normalized = this.normalizeRichTextStorageValue(currentHtml);
+      const safeHtml = normalized ?? '';
+      this.productForm.descriptions[currentLanguage] = safeHtml;
+      if (currentHtml !== safeHtml) {
+        this.replaceElementContentFromHtml(editor, safeHtml);
+      }
+      return;
+    }
+    this.productForm.descriptions[currentLanguage] = currentHtml;
+  }
+
+  private renderActiveDescriptionInEditor(): void {
+    const editor = this.descriptionEditorElement;
+    if (!editor) {
+      return;
+    }
+    const html =
+      this.productForm.descriptions[this.activeContentLanguage] ?? '';
+    if (this.serializeNodeChildren(editor) !== html) {
+      this.replaceElementContentFromHtml(editor, html);
+    }
+  }
+
+  private applyDescriptionExecCommand(command: string): void {
+    if (!this.isBrowser) {
+      return;
+    }
+    const editor = this.descriptionEditorElement;
+    if (!editor) {
+      return;
+    }
+    editor.focus();
+    this.documentRef.execCommand(command, false);
+    this.syncDescriptionFromEditor(editor, false);
+  }
+
+  private normalizeDescriptionForEditor(
+    value: string | null | undefined,
+  ): string {
+    return this.normalizeRichTextStorageValue(value ?? '') ?? '';
+  }
+
+  private normalizeRichTextStorageValue(value: string): string | null {
+    const normalized = value.trim();
+    if (!normalized) {
+      return null;
+    }
+    const sanitized = this.containsHtmlMarkup(normalized)
+      ? this.sanitizeRichTextHtml(normalized)
+      : this.plainTextToRichTextHtml(normalized);
+    const compact = sanitized.trim();
+    if (!compact || !this.hasMeaningfulRichText(compact)) {
+      return null;
+    }
+    return compact;
+  }
+
+  private containsHtmlMarkup(value: string): boolean {
+    return /<\/?[a-z][\s\S]*>/i.test(value);
+  }
+
+  private plainTextToRichTextHtml(value: string): string {
+    const normalized = value.replace(/\r\n?/g, '\n').trim();
+    if (!normalized) {
+      return '';
+    }
+    return normalized
+      .split(/\n{2,}/)
+      .map(
+        (paragraph) =>
+          `<p>${this.escapeHtml(paragraph).replace(/\n/g, '<br>')}</p>`,
+      )
+      .join('');
+  }
+
+  private sanitizeRichTextHtml(value: string): string {
+    if (!this.isBrowser) {
+      return this.stripPotentiallyUnsafeHtml(value);
+    }
+
+    const parser = new DOMParser();
+    const sourceDocument = parser.parseFromString(
+      `<body>${value}</body>`,
+      'text/html',
+    );
+    const outputDocument = parser.parseFromString('<body></body>', 'text/html');
+    const outputBody = outputDocument.body;
+
+    for (const child of Array.from(sourceDocument.body.childNodes)) {
+      const sanitizedNode = this.sanitizeRichTextNode(child, outputDocument);
+      if (sanitizedNode) {
+        outputBody.appendChild(sanitizedNode);
+      }
+    }
+
+    return this.serializeNodeChildren(outputBody);
+  }
+
+  private sanitizeRichTextNode(
+    node: Node,
+    outputDocument: Document,
+  ): Node | DocumentFragment | null {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return outputDocument.createTextNode(node.textContent ?? '');
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return null;
+    }
+
+    const sourceElement = node as HTMLElement;
+    const tagName = sourceElement.tagName.toUpperCase();
+    const childNodes = Array.from(sourceElement.childNodes)
+      .map((child) => this.sanitizeRichTextNode(child, outputDocument))
+      .filter((child): child is Node | DocumentFragment => child !== null);
+
+    if (!RICH_TEXT_ALLOWED_TAGS.has(tagName)) {
+      const fragment = outputDocument.createDocumentFragment();
+      for (const child of childNodes) {
+        fragment.appendChild(child);
+      }
+      return fragment;
+    }
+
+    const element = outputDocument.createElement(tagName.toLowerCase());
+    if (tagName === 'A') {
+      const href = this.sanitizeRichTextHref(
+        sourceElement.getAttribute('href'),
+      );
+      if (href) {
+        element.setAttribute('href', href);
+        if (href.startsWith('http://') || href.startsWith('https://')) {
+          element.setAttribute('target', '_blank');
+          element.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+    }
+    for (const child of childNodes) {
+      element.appendChild(child);
+    }
+
+    if (tagName === 'A' && !element.textContent?.trim()) {
+      return null;
+    }
+    if (
+      (tagName === 'UL' || tagName === 'OL') &&
+      !element.querySelector('li')
+    ) {
+      return null;
+    }
+    if (tagName === 'LI' && !element.textContent?.trim()) {
+      return null;
+    }
+
+    return element;
+  }
+
+  private sanitizeRichTextHref(rawHref: string | null): string | null {
+    const href = rawHref?.trim();
+    if (!href) {
+      return null;
+    }
+    const lowerHref = href.toLowerCase();
+    if (lowerHref.startsWith('/') || lowerHref.startsWith('#')) {
+      return href;
+    }
+    if (
+      lowerHref.startsWith('http://') ||
+      lowerHref.startsWith('https://') ||
+      lowerHref.startsWith('mailto:') ||
+      lowerHref.startsWith('tel:')
+    ) {
+      return href;
+    }
+    return null;
+  }
+
+  private hasMeaningfulRichText(value: string): boolean {
+    return (
+      this.extractTextFromHtml(value)
+        .replace(/\u00a0/g, ' ')
+        .trim().length > 0
+    );
+  }
+
+  private extractTextFromHtml(value: string): string {
+    if (!this.isBrowser) {
+      return value.replace(/<[^>]+>/g, ' ');
+    }
+    const parser = new DOMParser();
+    const parsed = parser.parseFromString(`<body>${value}</body>`, 'text/html');
+    return parsed.body.textContent ?? '';
+  }
+
+  private serializeNodeChildren(node: Node): string {
+    if (!this.isBrowser) {
+      return node.textContent ?? '';
+    }
+    const serializer = new XMLSerializer();
+    let html = '';
+    for (const child of Array.from(node.childNodes)) {
+      html += serializer.serializeToString(child);
+    }
+    return html;
+  }
+
+  private replaceElementContentFromHtml(
+    element: HTMLElement,
+    html: string,
+  ): void {
+    if (!this.isBrowser) {
+      return;
+    }
+
+    if (!html) {
+      element.replaceChildren();
+      return;
+    }
+
+    const parser = new DOMParser();
+    const parsed = parser.parseFromString(`<body>${html}</body>`, 'text/html');
+    const nodes = Array.from(parsed.body.childNodes).map((child) =>
+      this.documentRef.importNode(child, true),
+    );
+    element.replaceChildren(...nodes);
+  }
+
+  private confirmBrowser(message: string): boolean {
+    return this.isBrowser ? window.confirm(message) : false;
+  }
+
+  private stripPotentiallyUnsafeHtml(value: string): string {
+    return value
+      .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
+      .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '');
+  }
+
+  private escapeHtml(value: string): string {
+    return value
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
  seoDescriptionLength(language: ShopLanguage): number {
    return this.productForm.seoDescriptions[language].trim().length;
  }
--- a/frontend/src/app/features/calculator/calculator-page.component.ts
+++ b/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',
--- a/frontend/src/app/features/contact/components/contact-form/contact-form.component.ts
+++ b/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,7 +134,8 @@ export class ContactFormComponent implements OnDestroy {
        return {
          file: f,
          type,
-          url: this.shouldCreatePreview(type)
+          url:
+            this.isBrowser && this.shouldCreatePreview(type)
              ? URL.createObjectURL(f)
              : undefined,
        };
@@ -185,7 +193,8 @@ export class ContactFormComponent implements OnDestroy {
      const preview: FilePreview = {
        file,
        type,
-        url: this.shouldCreatePreview(type)
+        url:
+          this.isBrowser && this.shouldCreatePreview(type)
            ? URL.createObjectURL(file)
            : undefined,
      };
@@ -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);
    }
--- a/frontend/src/app/features/order/order.component.html
+++ b/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()">
--- a/frontend/src/app/features/order/order.component.scss
+++ b/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);
--- a/frontend/src/app/features/order/order.component.ts
+++ b/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');
    }
  }
--- a/frontend/src/app/features/shop/product-detail.component.html
+++ b/frontend/src/app/features/shop/product-detail.component.html
@@ -121,7 +121,7 @@
                <p class="excerpt">
                  {{
                    p.excerpt ||
-                      p.description ||
+                      descriptionPlainText(p.description) ||
                      ("SHOP.EXCERPT_FALLBACK" | translate)
                  }}
                </p>
@@ -304,10 +304,13 @@
                </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>
@@ -350,7 +353,7 @@
                    <app-stl-viewer
                      [file]="modelPreviewFile"
                      [height]="420"
-                      [color]="selectedVariant()?.colorHex || '#facf0a'"
+                      [color]="colorHex(selectedVariant())"
                    ></app-stl-viewer>
                  }
                }
--- a/frontend/src/app/features/shop/product-detail.component.scss
+++ b/frontend/src/app/features/shop/product-detail.component.scss
@@ -33,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,
@@ -41,6 +42,10 @@
  gap: var(--space-5);
 }

+.visual-column {
+  align-content: start;
+}
+
 .info-column {
  gap: var(--space-3);
  align-content: start;
@@ -93,36 +98,6 @@
  font-weight: 700;
 }

-.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;
-}
-
 .thumb-grid {
  display: contents;
 }
@@ -163,21 +138,24 @@
 .model-launch-row {
  display: flex;
  justify-content: space-between;
-  gap: var(--space-4);
+  gap: 0.8rem;
  align-items: center;
-  padding: 0.9rem 1rem;
+  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.35rem;
-  padding: 0 0.95rem;
+  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;
 }
@@ -206,82 +184,9 @@

 .dimensions-inline {
  display: flex;
-  gap: 0.8rem;
+  gap: 0.58rem;
  text-align: left;
-}
-
-.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: spin 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;
+  font-size: 0.78rem;
 }

 .title-block {
@@ -313,8 +218,7 @@ h1 {
  line-height: 1.06;
 }

-.excerpt,
-.description-block p {
+.excerpt {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
@@ -436,152 +340,6 @@ h1 {
  border-left: 3px solid rgba(245, 158, 11, 0.7);
 }

-.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);
-}
-
 .qty-control {
  display: inline-flex;
  align-items: center;
@@ -630,11 +388,32 @@ h1 {
  font-size: 1.45rem;
 }

-.description-block p {
+.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;
 }
@@ -674,12 +453,6 @@ h1 {
  }
 }

-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
@media (max-width: 960px) {
  .detail-grid,
  .skeleton-grid {
@@ -707,8 +480,30 @@ h1 {
    min-height: 300px;
  }

-  .selector-head {
-    display: block;
+  .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 {
@@ -719,39 +514,6 @@ h1 {
    grid-template-columns: 1fr;
  }

-  .color-trigger {
-    max-width: 100%;
-  }
-
-  .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;
-  }
-
-  .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);
-  }
-
  :host ::ng-deep app-card.purchase-shell .card-body {
    padding: 0.82rem 0.82rem;
  }
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/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';
@@ -52,6 +54,8 @@ interface ShopMaterialProperty {
  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);
@@ -59,6 +63,7 @@ export class ProductDetailComponent {
  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>();
@@ -376,8 +381,18 @@ 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 {
@@ -431,7 +446,7 @@ export class ProductDetailComponent {

  goBackToShop(): void {
    const returnUrl =
-      typeof history.state?.shopReturnUrl === 'string'
+      this.isBrowser && typeof history.state?.shopReturnUrl === 'string'
        ? history.state.shopReturnUrl
        : null;

@@ -464,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';
@@ -500,6 +544,28 @@ export class ProductDetailComponent {
    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 {
@@ -597,7 +663,52 @@ export class ProductDetailComponent {
    ];
  }

+  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) {
--- a/frontend/src/app/shared/components/stl-viewer/stl-viewer.component.ts
+++ b/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 };
--- a/frontend/src/app/shared/directives/copy-on-click.directive.ts
+++ b/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);
--- a/frontend/src/main.server.ts
+++ b/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;
--- a/frontend/src/server.ts
+++ b/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;
--- a/frontend/src/styles.scss
+++ b/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 */
--- a/frontend/src/styles/_shop-product-detail-overrides.scss
+++ b/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);
+    }
+  }
+}
--- a/frontend/tsconfig.app.json
+++ b/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"
Author	SHA1	Message	Date
Joe Küng	379a2161ca	Merge remote-tracking branch 'origin/feat/ssr' into feat/ssr All checks were successful PR Checks / test-backend (pull_request) Successful in 26s Details PR Checks / test-frontend (pull_request) Successful in 59s Details PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 30s Details	2026-03-11 16:57:07 +01:00
Joe Küng	c47a7e28c7	feat(front-end): ssr implementation	2026-03-11 16:57:03 +01:00
printcalc-ci	502126c915	style: apply prettier formatting	2026-03-11 15:37:29 +00:00
Joe Küng	2ace632022	feat(front-end): ssr implementation Some checks failed PR Checks / prettier-autofix (pull_request) Successful in 11s Details PR Checks / test-frontend (pull_request) Failing after 57s Details PR Checks / security-sast (pull_request) Successful in 30s Details PR Checks / test-backend (pull_request) Successful in 27s Details	2026-03-11 16:37:08 +01:00
Joe Küng	b7dfc53bc0	feat(front-end): update header layout All checks were successful PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 28s Details PR Checks / test-backend (pull_request) Successful in 28s Details Build and Deploy / test-backend (push) Successful in 28s Details PR Checks / test-frontend (pull_request) Successful in 1m4s Details Build and Deploy / test-frontend (push) Successful in 1m2s Details Build and Deploy / build-and-push (push) Successful in 48s Details Build and Deploy / deploy (push) Successful in 11s Details	2026-03-11 15:30:21 +01:00
Joe Küng	d77c3c7a5c	feat(front-end): update header layout Some checks failed Build and Deploy / test-frontend (push) Successful in 1m6s Details Build and Deploy / test-backend (push) Successful in 27s Details PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 36s Details Build and Deploy / deploy (push) Has been cancelled Details Build and Deploy / build-and-push (push) Has been cancelled Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / test-frontend (pull_request) Successful in 1m1s Details	2026-03-11 15:28:40 +01:00
printcalc-ci	faaa59ae01	style: apply prettier formatting	2026-03-11 14:18:47 +00:00
Joe Küng	1bde2690b6	Merge branch 'main' into dev Some checks failed PR Checks / prettier-autofix (pull_request) Successful in 11s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details Build and Deploy / test-frontend (push) Successful in 59s Details Build and Deploy / build-and-push (push) Failing after 1m41s Details Build and Deploy / deploy (push) Has been skipped Details PR Checks / security-sast (pull_request) Successful in 29s Details PR Checks / test-backend (pull_request) Successful in 28s Details Build and Deploy / test-backend (push) Successful in 28s Details	2026-03-11 15:17:52 +01:00
Joe Küng	92fddd9e4a	Merge remote-tracking branch 'origin/dev' into dev Some checks failed Build and Deploy / build-and-push (push) Has been cancelled Details Build and Deploy / deploy (push) Has been cancelled Details Build and Deploy / test-backend (push) Has been cancelled Details Build and Deploy / test-frontend (push) Has been cancelled Details PR Checks / prettier-autofix (pull_request) Failing after 11s Details PR Checks / security-sast (pull_request) Successful in 29s Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / test-frontend (pull_request) Successful in 1m4s Details	2026-03-11 15:17:32 +01:00
Joe Küng	f9414b2db7	feat(front-end): sitemap update	2026-03-11 15:17:19 +01:00
Joe Küng	d1e7e7eaca	feat(front-end): sitemap	2026-03-11 15:07:12 +01:00
Joe Küng	75929a15f8	Merge pull request 'fix(front-end): fix security' (#39 ) from dev into main All checks were successful Build and Deploy / test-backend (push) Successful in 26s Details Build and Deploy / test-frontend (push) Successful in 1m5s Details Build and Deploy / build-and-push (push) Successful in 15s Details Build and Deploy / deploy (push) Successful in 7s Details Reviewed-on: #39	2026-03-11 11:42:50 +01:00
Joe Küng	c0585d7107	Merge branch 'main' into dev All checks were successful PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 30s Details PR Checks / test-backend (pull_request) Successful in 31s Details Build and Deploy / test-backend (push) Successful in 26s Details PR Checks / test-frontend (pull_request) Successful in 1m1s Details Build and Deploy / test-frontend (push) Successful in 1m1s Details Build and Deploy / build-and-push (push) Successful in 57s Details Build and Deploy / deploy (push) Successful in 12s Details	2026-03-11 11:39:59 +01:00
Joe Küng	aeeed1c138	fix(front-end): fix security Some checks failed Build and Deploy / build-and-push (push) Has been cancelled Details Build and Deploy / deploy (push) Has been cancelled Details Build and Deploy / test-frontend (push) Has been cancelled Details Build and Deploy / test-backend (push) Has been cancelled Details PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 31s Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details	2026-03-11 11:39:45 +01:00
Joe Küng	10f05fabc9	Merge pull request 'dev' (#38 ) from dev into main All checks were successful Build and Deploy / test-frontend (push) Successful in 1m1s Details Build and Deploy / deploy (push) Successful in 7s Details Build and Deploy / test-backend (push) Successful in 26s Details Build and Deploy / build-and-push (push) Successful in 16s Details Reviewed-on: #38	2026-03-11 11:05:12 +01:00
Joe Küng	78b719d3c2	fix(front-end): fix security All checks were successful Build and Deploy / test-backend (push) Successful in 26s Details PR Checks / prettier-autofix (pull_request) Successful in 8s Details Build and Deploy / test-frontend (push) Successful in 1m5s Details PR Checks / security-sast (pull_request) Successful in 36s Details PR Checks / test-backend (pull_request) Successful in 27s Details Build and Deploy / build-and-push (push) Successful in 23s Details PR Checks / test-frontend (pull_request) Successful in 1m1s Details Build and Deploy / deploy (push) Successful in 9s Details	2026-03-11 11:02:47 +01:00
printcalc-ci	052ade3e91	style: apply prettier formatting	2026-03-11 09:59:12 +00:00
Joe Küng	035851133e	Merge branch 'main' into dev Some checks failed Build and Deploy / test-backend (push) Successful in 30s Details PR Checks / prettier-autofix (pull_request) Successful in 13s Details Build and Deploy / test-frontend (push) Successful in 1m4s Details PR Checks / security-sast (pull_request) Failing after 27s Details PR Checks / test-backend (pull_request) Successful in 27s Details Build and Deploy / build-and-push (push) Successful in 16s Details Build and Deploy / deploy (push) Successful in 11s Details PR Checks / test-frontend (pull_request) Successful in 1m2s Details	2026-03-11 10:57:23 +01:00
Joe Küng	1ff8883d25	fix(back-end): fix hex color Some checks failed Build and Deploy / test-backend (push) Successful in 26s Details Build and Deploy / test-frontend (push) Successful in 1m0s Details Build and Deploy / build-and-push (push) Successful in 23s Details Build and Deploy / deploy (push) Successful in 8s Details PR Checks / prettier-autofix (pull_request) Failing after 11s Details PR Checks / security-sast (pull_request) Failing after 29s Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details	2026-03-11 10:29:29 +01:00
Joe Küng	30ada043ef	fix(back-end): fix hex color All checks were successful Build and Deploy / test-backend (push) Successful in 26s Details Build and Deploy / test-frontend (push) Successful in 1m1s Details Build and Deploy / build-and-push (push) Successful in 34s Details Build and Deploy / deploy (push) Successful in 9s Details	2026-03-11 10:21:15 +01:00
Joe Küng	e0aaa7c92e	fix(back-end): fix hex color All checks were successful Build and Deploy / test-backend (push) Successful in 35s Details Build and Deploy / test-frontend (push) Successful in 1m1s Details Build and Deploy / build-and-push (push) Successful in 1m43s Details Build and Deploy / deploy (push) Successful in 10s Details	2026-03-11 10:14:30 +01:00
Joe Küng	edae13541f	feat(back-end): rich text improvements All checks were successful Build and Deploy / test-backend (push) Successful in 28s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details Build and Deploy / build-and-push (push) Successful in 27s Details Build and Deploy / deploy (push) Successful in 8s Details	2026-03-10 19:01:17 +01:00
Joe Küng	d150c19f9f	feat(back-end): rich text All checks were successful Build and Deploy / test-backend (push) Successful in 53s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details Build and Deploy / build-and-push (push) Successful in 57s Details Build and Deploy / deploy (push) Successful in 8s Details	2026-03-10 18:51:15 +01:00
Joe Küng	71890e4cc2	feat(front-end): rich text All checks were successful Build and Deploy / test-backend (push) Successful in 30s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details Build and Deploy / build-and-push (push) Successful in 25s Details Build and Deploy / deploy (push) Successful in 9s Details	2026-03-10 18:48:27 +01:00
Joe Küng	95494efcae	Merge pull request 'dev' (#37 ) from dev into main All checks were successful Build and Deploy / test-backend (push) Successful in 31s Details Build and Deploy / test-frontend (push) Successful in 1m5s Details Build and Deploy / build-and-push (push) Successful in 18s Details Build and Deploy / deploy (push) Successful in 9s Details Reviewed-on: #37	2026-03-10 17:43:45 +01:00
Joe Küng	8893a80c12	feat(front-end): update media ffmpeg All checks were successful Build and Deploy / test-backend (push) Successful in 29s Details PR Checks / prettier-autofix (pull_request) Successful in 9s Details PR Checks / security-sast (pull_request) Successful in 33s Details Build and Deploy / test-frontend (push) Successful in 1m6s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details PR Checks / test-backend (pull_request) Successful in 28s Details Build and Deploy / build-and-push (push) Successful in 1m40s Details Build and Deploy / deploy (push) Successful in 11s Details	2026-03-10 17:29:38 +01:00
Joe Küng	a4facf74d7	feat(front-end): update media ffmpeg Some checks failed Build and Deploy / test-backend (push) Successful in 29s Details PR Checks / prettier-autofix (pull_request) Successful in 13s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details PR Checks / security-sast (pull_request) Successful in 32s Details PR Checks / test-backend (pull_request) Successful in 29s Details PR Checks / test-frontend (pull_request) Successful in 1m6s Details Build and Deploy / build-and-push (push) Failing after 1m0s Details Build and Deploy / deploy (push) Has been skipped Details	2026-03-10 17:20:45 +01:00
Joe Küng	ed8fd89217	Merge remote-tracking branch 'origin/dev' into dev All checks were successful Build and Deploy / test-backend (push) Successful in 26s Details PR Checks / security-sast (pull_request) Successful in 31s Details Build and Deploy / test-frontend (push) Successful in 1m2s Details PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / test-backend (pull_request) Successful in 30s Details Build and Deploy / build-and-push (push) Successful in 28s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details Build and Deploy / deploy (push) Successful in 9s Details	2026-03-10 15:32:59 +01:00
Joe Küng	58869be9f7	feat(front-end): css allert fix	2026-03-10 15:32:53 +01:00