style: apply prettier formatting

feat(front-end): shop category ui
2026-03-10 14:23:52 +00:00 · 2026-03-10 15:23:08 +01:00 · 2026-03-10 15:14:10 +01:00 · 2026-03-10 15:04:56 +01:00 · 2026-03-10 15:04:49 +01:00 · 2026-03-10 12:42:42 +01:00
32 changed files with 2772 additions and 458 deletions
--- a/backend/src/main/java/com/printcalculator/dto/AdminShopProductDto.java
+++ b/backend/src/main/java/com/printcalculator/dto/AdminShopProductDto.java
@@ -27,7 +27,15 @@ public class AdminShopProductDto {
    private String descriptionDe;
    private String descriptionFr;
    private String seoTitle;
+    private String seoTitleIt;
+    private String seoTitleEn;
+    private String seoTitleDe;
+    private String seoTitleFr;
    private String seoDescription;
+    private String seoDescriptionIt;
+    private String seoDescriptionEn;
+    private String seoDescriptionDe;
+    private String seoDescriptionFr;
    private String ogTitle;
    private String ogDescription;
    private Boolean indexable;
@@ -215,6 +223,38 @@ public class AdminShopProductDto {
        this.seoTitle = seoTitle;
    }

+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
    public String getSeoDescription() {
        return seoDescription;
    }
@@ -223,6 +263,38 @@ public class AdminShopProductDto {
        this.seoDescription = seoDescription;
    }

+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
    public String getOgTitle() {
        return ogTitle;
    }
--- a/backend/src/main/java/com/printcalculator/dto/AdminUpsertShopProductRequest.java
+++ b/backend/src/main/java/com/printcalculator/dto/AdminUpsertShopProductRequest.java
@@ -22,7 +22,15 @@ public class AdminUpsertShopProductRequest {
    private String descriptionDe;
    private String descriptionFr;
    private String seoTitle;
+    private String seoTitleIt;
+    private String seoTitleEn;
+    private String seoTitleDe;
+    private String seoTitleFr;
    private String seoDescription;
+    private String seoDescriptionIt;
+    private String seoDescriptionEn;
+    private String seoDescriptionDe;
+    private String seoDescriptionFr;
    private String ogTitle;
    private String ogDescription;
    private Boolean indexable;
@@ -175,6 +183,38 @@ public class AdminUpsertShopProductRequest {
        this.seoTitle = seoTitle;
    }

+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
    public String getSeoDescription() {
        return seoDescription;
    }
@@ -183,6 +223,38 @@ public class AdminUpsertShopProductRequest {
        this.seoDescription = seoDescription;
    }

+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
    public String getOgTitle() {
        return ogTitle;
    }
--- a/backend/src/main/java/com/printcalculator/entity/ShopProduct.java
+++ b/backend/src/main/java/com/printcalculator/entity/ShopProduct.java
@@ -86,9 +86,33 @@ public class ShopProduct {
    @Column(name = "seo_title", length = Integer.MAX_VALUE)
    private String seoTitle;

+    @Column(name = "seo_title_it", length = Integer.MAX_VALUE)
+    private String seoTitleIt;
+
+    @Column(name = "seo_title_en", length = Integer.MAX_VALUE)
+    private String seoTitleEn;
+
+    @Column(name = "seo_title_de", length = Integer.MAX_VALUE)
+    private String seoTitleDe;
+
+    @Column(name = "seo_title_fr", length = Integer.MAX_VALUE)
+    private String seoTitleFr;
+
    @Column(name = "seo_description", length = Integer.MAX_VALUE)
    private String seoDescription;

+    @Column(name = "seo_description_it", length = Integer.MAX_VALUE)
+    private String seoDescriptionIt;
+
+    @Column(name = "seo_description_en", length = Integer.MAX_VALUE)
+    private String seoDescriptionEn;
+
+    @Column(name = "seo_description_de", length = Integer.MAX_VALUE)
+    private String seoDescriptionDe;
+
+    @Column(name = "seo_description_fr", length = Integer.MAX_VALUE)
+    private String seoDescriptionFr;
+
    @Column(name = "og_title", length = Integer.MAX_VALUE)
    private String ogTitle;

@@ -319,6 +343,70 @@ public class ShopProduct {
        this.seoDescription = seoDescription;
    }

+    public String getSeoTitleIt() {
+        return seoTitleIt;
+    }
+
+    public void setSeoTitleIt(String seoTitleIt) {
+        this.seoTitleIt = seoTitleIt;
+    }
+
+    public String getSeoTitleEn() {
+        return seoTitleEn;
+    }
+
+    public void setSeoTitleEn(String seoTitleEn) {
+        this.seoTitleEn = seoTitleEn;
+    }
+
+    public String getSeoTitleDe() {
+        return seoTitleDe;
+    }
+
+    public void setSeoTitleDe(String seoTitleDe) {
+        this.seoTitleDe = seoTitleDe;
+    }
+
+    public String getSeoTitleFr() {
+        return seoTitleFr;
+    }
+
+    public void setSeoTitleFr(String seoTitleFr) {
+        this.seoTitleFr = seoTitleFr;
+    }
+
+    public String getSeoDescriptionIt() {
+        return seoDescriptionIt;
+    }
+
+    public void setSeoDescriptionIt(String seoDescriptionIt) {
+        this.seoDescriptionIt = seoDescriptionIt;
+    }
+
+    public String getSeoDescriptionEn() {
+        return seoDescriptionEn;
+    }
+
+    public void setSeoDescriptionEn(String seoDescriptionEn) {
+        this.seoDescriptionEn = seoDescriptionEn;
+    }
+
+    public String getSeoDescriptionDe() {
+        return seoDescriptionDe;
+    }
+
+    public void setSeoDescriptionDe(String seoDescriptionDe) {
+        this.seoDescriptionDe = seoDescriptionDe;
+    }
+
+    public String getSeoDescriptionFr() {
+        return seoDescriptionFr;
+    }
+
+    public void setSeoDescriptionFr(String seoDescriptionFr) {
+        this.seoDescriptionFr = seoDescriptionFr;
+    }
+
    public String getOgTitle() {
        return ogTitle;
    }
@@ -428,6 +516,36 @@ public class ShopProduct {
        }
    }

+    public String getSeoTitleForLanguage(String language) {
+        return resolveLocalizedValue(language, seoTitle, seoTitleIt, seoTitleEn, seoTitleDe, seoTitleFr);
+    }
+
+    public void setSeoTitleForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> seoTitleIt = value;
+            case "en" -> seoTitleEn = value;
+            case "de" -> seoTitleDe = value;
+            case "fr" -> seoTitleFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getSeoDescriptionForLanguage(String language) {
+        return resolveLocalizedValue(language, seoDescription, seoDescriptionIt, seoDescriptionEn, seoDescriptionDe, seoDescriptionFr);
+    }
+
+    public void setSeoDescriptionForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> seoDescriptionIt = value;
+            case "en" -> seoDescriptionEn = value;
+            case "de" -> seoDescriptionDe = value;
+            case "fr" -> seoDescriptionFr = value;
+            default -> {
+            }
+        }
+    }
+
    private String resolveLocalizedValue(String language,
                                         String fallback,
                                         String valueIt,
--- a/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
+++ b/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
@@ -163,7 +163,13 @@ public class AdminShopProductControllerService {
            }
        }

-        shopProductModelAssetRepository.findByProduct_Id(productId).ifPresent(asset -> deleteExistingModelFile(asset, productId));
+        shopProductModelAssetRepository.findByProduct_Id(productId).ifPresent(asset -> {
+            deleteExistingModelFile(asset, productId);
+            shopProductModelAssetRepository.delete(asset);
+        });
+        if (!variants.isEmpty()) {
+            shopProductVariantRepository.deleteAll(variants);
+        }
        shopProductRepository.delete(product);
    }

@@ -315,10 +321,18 @@ public class AdminShopProductControllerService {
        product.setDescriptionEn(localizedContent.descriptions().get("en"));
        product.setDescriptionDe(localizedContent.descriptions().get("de"));
        product.setDescriptionFr(localizedContent.descriptions().get("fr"));
-        product.setSeoTitle(normalizeOptional(payload.getSeoTitle()));
-        product.setSeoDescription(normalizeOptional(payload.getSeoDescription()));
-        product.setOgTitle(normalizeOptional(payload.getOgTitle()));
-        product.setOgDescription(normalizeOptional(payload.getOgDescription()));
+        product.setSeoTitle(localizedContent.defaultSeoTitle());
+        product.setSeoTitleIt(localizedContent.seoTitles().get("it"));
+        product.setSeoTitleEn(localizedContent.seoTitles().get("en"));
+        product.setSeoTitleDe(localizedContent.seoTitles().get("de"));
+        product.setSeoTitleFr(localizedContent.seoTitles().get("fr"));
+        product.setSeoDescription(localizedContent.defaultSeoDescription());
+        product.setSeoDescriptionIt(localizedContent.seoDescriptions().get("it"));
+        product.setSeoDescriptionEn(localizedContent.seoDescriptions().get("en"));
+        product.setSeoDescriptionDe(localizedContent.seoDescriptions().get("de"));
+        product.setSeoDescriptionFr(localizedContent.seoDescriptions().get("fr"));
+        product.setOgTitle(localizedContent.defaultSeoTitle());
+        product.setOgDescription(localizedContent.defaultSeoDescription());
        product.setIndexable(payload.getIndexable() == null || payload.getIndexable());
        product.setIsFeatured(Boolean.TRUE.equals(payload.getIsFeatured()));
        product.setIsActive(payload.getIsActive() == null || payload.getIsActive());
@@ -374,16 +388,23 @@ public class AdminShopProductControllerService {
        }

        List<AdminUpsertShopProductVariantRequest> normalized = new ArrayList<>(payloads);
-        Set<String> colorKeys = new LinkedHashSet<>();
+        Set<String> variantKeys = new LinkedHashSet<>();
        int defaultCount = 0;
        for (AdminUpsertShopProductVariantRequest payload : normalized) {
            if (payload == null) {
                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Variant payload is required");
            }
            String colorName = normalizeRequired(payload.getColorName(), "Variant colorName is required");
-            String colorKey = colorName.toLowerCase(Locale.ROOT);
-            if (!colorKeys.add(colorKey)) {
-                throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Duplicate variant colorName: " + colorName);
+            String materialCode = normalizeRequired(
+                    payload.getInternalMaterialCode(),
+                    "Variant internalMaterialCode is required"
+            ).toUpperCase(Locale.ROOT);
+            String variantKey = materialCode + "|" + colorName.toLowerCase(Locale.ROOT);
+            if (!variantKeys.add(variantKey)) {
+                throw new ResponseStatusException(
+                        HttpStatus.BAD_REQUEST,
+                        "Duplicate variant combination: " + materialCode + " / " + colorName
+                );
            }
            if (Boolean.TRUE.equals(payload.getIsDefault())) {
                defaultCount++;
@@ -467,7 +488,15 @@ public class AdminShopProductControllerService {
        dto.setDescriptionDe(product.getDescriptionDe());
        dto.setDescriptionFr(product.getDescriptionFr());
        dto.setSeoTitle(product.getSeoTitle());
+        dto.setSeoTitleIt(product.getSeoTitleIt());
+        dto.setSeoTitleEn(product.getSeoTitleEn());
+        dto.setSeoTitleDe(product.getSeoTitleDe());
+        dto.setSeoTitleFr(product.getSeoTitleFr());
        dto.setSeoDescription(product.getSeoDescription());
+        dto.setSeoDescriptionIt(product.getSeoDescriptionIt());
+        dto.setSeoDescriptionEn(product.getSeoDescriptionEn());
+        dto.setSeoDescriptionDe(product.getSeoDescriptionDe());
+        dto.setSeoDescriptionFr(product.getSeoDescriptionFr());
        dto.setOgTitle(product.getOgTitle());
        dto.setOgDescription(product.getOgDescription());
        dto.setIndexable(product.getIndexable());
@@ -596,13 +625,43 @@ public class AdminShopProductControllerService {
        descriptions.put("de", firstNonBlank(normalizeOptional(payload.getDescriptionDe()), fallbackDescription));
        descriptions.put("fr", firstNonBlank(normalizeOptional(payload.getDescriptionFr()), fallbackDescription));

+        String fallbackSeoTitle = firstNonBlank(
+                normalizeOptional(payload.getSeoTitle()),
+                normalizeOptional(payload.getSeoTitleIt()),
+                normalizeOptional(payload.getSeoTitleEn()),
+                normalizeOptional(payload.getSeoTitleDe()),
+                normalizeOptional(payload.getSeoTitleFr())
+        );
+        Map<String, String> seoTitles = new LinkedHashMap<>();
+        seoTitles.put("it", firstNonBlank(normalizeOptional(payload.getSeoTitleIt()), fallbackSeoTitle));
+        seoTitles.put("en", firstNonBlank(normalizeOptional(payload.getSeoTitleEn()), fallbackSeoTitle));
+        seoTitles.put("de", firstNonBlank(normalizeOptional(payload.getSeoTitleDe()), fallbackSeoTitle));
+        seoTitles.put("fr", firstNonBlank(normalizeOptional(payload.getSeoTitleFr()), fallbackSeoTitle));
+
+        String fallbackSeoDescription = firstNonBlank(
+                normalizeOptional(payload.getSeoDescription()),
+                normalizeOptional(payload.getSeoDescriptionIt()),
+                normalizeOptional(payload.getSeoDescriptionEn()),
+                normalizeOptional(payload.getSeoDescriptionDe()),
+                normalizeOptional(payload.getSeoDescriptionFr())
+        );
+        Map<String, String> seoDescriptions = new LinkedHashMap<>();
+        seoDescriptions.put("it", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionIt()), fallbackSeoDescription), "Italian"));
+        seoDescriptions.put("en", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionEn()), fallbackSeoDescription), "English"));
+        seoDescriptions.put("de", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionDe()), fallbackSeoDescription), "German"));
+        seoDescriptions.put("fr", validateSeoDescriptionLength(firstNonBlank(normalizeOptional(payload.getSeoDescriptionFr()), fallbackSeoDescription), "French"));
+
        return new LocalizedProductContent(
                names.get("it"),
                firstNonBlank(excerpts.get("it"), fallbackExcerpt),
                firstNonBlank(descriptions.get("it"), fallbackDescription),
+                firstNonBlank(seoTitles.get("it"), fallbackSeoTitle),
+                firstNonBlank(seoDescriptions.get("it"), fallbackSeoDescription),
                names,
                excerpts,
-                descriptions
+                descriptions,
+                seoTitles,
+                seoDescriptions
        );
    }

@@ -670,6 +729,13 @@ public class AdminShopProductControllerService {
        return normalized.toUpperCase(Locale.ROOT);
    }

+    private String validateSeoDescriptionLength(String value, String languageLabel) {
+        if (value != null && value.length() > 160) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, languageLabel + " SEO description must be at most 160 characters");
+        }
+        return value;
+    }
+
    private void validateModelUpload(MultipartFile file) {
        if (file == null || file.isEmpty()) {
            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "3D model file is required");
@@ -786,9 +852,13 @@ public class AdminShopProductControllerService {
            String defaultName,
            String defaultExcerpt,
            String defaultDescription,
+            String defaultSeoTitle,
+            String defaultSeoDescription,
            Map<String, String> names,
            Map<String, String> excerpts,
-            Map<String, String> descriptions
+            Map<String, String> descriptions,
+            Map<String, String> seoTitles,
+            Map<String, String> seoDescriptions
    ) {
    }
 }
--- a/backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java
+++ b/backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java
@@ -21,7 +21,7 @@ public class MediaStorageService {
    private final String frontendBaseUrl;

    public MediaStorageService(@Value("${media.storage.root:storage_media}") String storageRoot,
-                               @Value("${app.frontend.base-url:${APP_FRONTEND_BASE_URL:http://localhost:8080}}") String frontendBaseUrl) {
+                               @Value("${app.frontend.base-url:${APP_FRONTEND_BASE_URL:http://localhost:8081}}") String frontendBaseUrl) {
        this.normalizedRootLocation = Paths.get(storageRoot).toAbsolutePath().normalize();
        this.originalRootLocation = normalizedRootLocation.resolve("original").normalize();
        this.publicRootLocation = normalizedRootLocation.resolve("public").normalize();
@@ -131,8 +131,11 @@ public class MediaStorageService {

    private String buildMediaBaseUrl() {
        String normalized = frontendBaseUrl != null ? frontendBaseUrl.trim() : "";
+        if (normalized.contains("localhost")){
+            return "http://localhost:8081";
+        }
        if (normalized.isBlank()) {
-            normalized = "http://localhost:4200";
+            normalized = "http://localhost:8081";
        }
        if (normalized.endsWith("/")) {
            normalized = normalized.substring(0, normalized.length() - 1);
--- a/backend/src/main/java/com/printcalculator/service/shop/PublicShopCatalogService.java
+++ b/backend/src/main/java/com/printcalculator/service/shop/PublicShopCatalogService.java
@@ -375,16 +375,18 @@ public class PublicShopCatalogService {
                                                    Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
                                                    String language) {
        List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
+        String localizedSeoTitle = entry.product().getSeoTitleForLanguage(language);
+        String localizedSeoDescription = entry.product().getSeoDescriptionForLanguage(language);
        return new ShopProductDetailDto(
                entry.product().getId(),
                entry.product().getSlug(),
                entry.product().getNameForLanguage(language),
                entry.product().getExcerptForLanguage(language),
                entry.product().getDescriptionForLanguage(language),
-                entry.product().getSeoTitle(),
-                entry.product().getSeoDescription(),
-                entry.product().getOgTitle(),
-                entry.product().getOgDescription(),
+                localizedSeoTitle,
+                localizedSeoDescription,
+                localizedSeoTitle,
+                localizedSeoDescription,
                entry.product().getIndexable(),
                entry.product().getIsFeatured(),
                entry.product().getSortOrder(),
--- a/backend/src/test/java/com/printcalculator/service/admin/AdminShopProductControllerServiceTest.java
+++ b/backend/src/test/java/com/printcalculator/service/admin/AdminShopProductControllerServiceTest.java
@@ -0,0 +1,137 @@
+package com.printcalculator.service.admin;
+
+import com.printcalculator.entity.ShopProduct;
+import com.printcalculator.entity.ShopProductModelAsset;
+import com.printcalculator.entity.ShopProductVariant;
+import com.printcalculator.repository.OrderItemRepository;
+import com.printcalculator.repository.QuoteLineItemRepository;
+import com.printcalculator.repository.ShopCategoryRepository;
+import com.printcalculator.repository.ShopProductModelAssetRepository;
+import com.printcalculator.repository.ShopProductRepository;
+import com.printcalculator.repository.ShopProductVariantRepository;
+import com.printcalculator.service.SlicerService;
+import com.printcalculator.service.media.PublicMediaQueryService;
+import com.printcalculator.service.shop.ShopStorageService;
+import com.printcalculator.service.storage.ClamAVService;
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.ExtendWith;
+import org.mockito.InOrder;
+import org.mockito.Mock;
+import org.mockito.junit.jupiter.MockitoExtension;
+
+import java.nio.file.Path;
+import java.util.List;
+import java.util.Optional;
+import java.util.UUID;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.ArgumentMatchers.eq;
+import static org.mockito.Mockito.inOrder;
+import static org.mockito.Mockito.never;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
+
+@ExtendWith(MockitoExtension.class)
+class AdminShopProductControllerServiceTest {
+
+    @Mock
+    private ShopProductRepository shopProductRepository;
+    @Mock
+    private ShopCategoryRepository shopCategoryRepository;
+    @Mock
+    private ShopProductVariantRepository shopProductVariantRepository;
+    @Mock
+    private ShopProductModelAssetRepository shopProductModelAssetRepository;
+    @Mock
+    private QuoteLineItemRepository quoteLineItemRepository;
+    @Mock
+    private OrderItemRepository orderItemRepository;
+    @Mock
+    private PublicMediaQueryService publicMediaQueryService;
+    @Mock
+    private AdminMediaControllerService adminMediaControllerService;
+    @Mock
+    private ShopStorageService shopStorageService;
+    @Mock
+    private SlicerService slicerService;
+    @Mock
+    private ClamAVService clamAVService;
+
+    private AdminShopProductControllerService service;
+
+    @BeforeEach
+    void setUp() {
+        service = new AdminShopProductControllerService(
+                shopProductRepository,
+                shopCategoryRepository,
+                shopProductVariantRepository,
+                shopProductModelAssetRepository,
+                quoteLineItemRepository,
+                orderItemRepository,
+                publicMediaQueryService,
+                adminMediaControllerService,
+                shopStorageService,
+                slicerService,
+                clamAVService,
+                104857600L
+        );
+    }
+
+    @Test
+    void deleteProduct_shouldDeleteManagedDependenciesBeforeDeletingProduct() {
+        UUID productId = UUID.randomUUID();
+        UUID variantId = UUID.randomUUID();
+
+        ShopProduct product = new ShopProduct();
+        product.setId(productId);
+
+        ShopProductVariant variant = new ShopProductVariant();
+        variant.setId(variantId);
+        variant.setProduct(product);
+
+        ShopProductModelAsset asset = new ShopProductModelAsset();
+        asset.setId(UUID.randomUUID());
+        asset.setProduct(product);
+        asset.setStoredRelativePath("products/" + productId + "/model.stl");
+
+        when(shopProductRepository.findById(productId)).thenReturn(Optional.of(product));
+        when(quoteLineItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(shopProductVariantRepository.findByProduct_IdOrderBySortOrderAscColorNameAsc(productId)).thenReturn(List.of(variant));
+        when(quoteLineItemRepository.existsByShopProductVariant_Id(variantId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProductVariant_Id(variantId)).thenReturn(false);
+        when(shopProductModelAssetRepository.findByProduct_Id(productId)).thenReturn(Optional.of(asset));
+        when(shopStorageService.resolveStoredProductPath(asset.getStoredRelativePath(), productId))
+                .thenReturn(Path.of("/tmp/shop-model.stl"));
+
+        service.deleteProduct(productId);
+
+        InOrder inOrder = inOrder(shopProductModelAssetRepository, shopProductVariantRepository, shopProductRepository);
+        inOrder.verify(shopProductModelAssetRepository).delete(asset);
+        inOrder.verify(shopProductVariantRepository).deleteAll(List.of(variant));
+        inOrder.verify(shopProductRepository).delete(product);
+
+        verify(shopStorageService).resolveStoredProductPath(asset.getStoredRelativePath(), productId);
+    }
+
+    @Test
+    void deleteProduct_shouldSkipDependencyDeletesWhenNothingIsAttached() {
+        UUID productId = UUID.randomUUID();
+
+        ShopProduct product = new ShopProduct();
+        product.setId(productId);
+
+        when(shopProductRepository.findById(productId)).thenReturn(Optional.of(product));
+        when(quoteLineItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(orderItemRepository.existsByShopProduct_Id(productId)).thenReturn(false);
+        when(shopProductVariantRepository.findByProduct_IdOrderBySortOrderAscColorNameAsc(productId)).thenReturn(List.of());
+        when(shopProductModelAssetRepository.findByProduct_Id(productId)).thenReturn(Optional.empty());
+
+        service.deleteProduct(productId);
+
+        verify(shopProductRepository).delete(product);
+        verify(shopProductVariantRepository, never()).deleteAll(any());
+        verify(shopProductModelAssetRepository, never()).delete(any());
+    }
+}
--- a/db.sql
+++ b/db.sql
@@ -1055,7 +1055,15 @@ CREATE TABLE IF NOT EXISTS shop_product
    description_de      text,
    description_fr      text,
    seo_title           text,
+    seo_title_it        text,
+    seo_title_en        text,
+    seo_title_de        text,
+    seo_title_fr        text,
    seo_description     text,
+    seo_description_it  text,
+    seo_description_en  text,
+    seo_description_de  text,
+    seo_description_fr  text,
    og_title            text,
    og_description      text,
    indexable           boolean     NOT NULL DEFAULT true,
@@ -1066,6 +1074,16 @@ CREATE TABLE IF NOT EXISTS shop_product
    updated_at          timestamptz NOT NULL DEFAULT now()
 );

+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS seo_title_it text,
+    ADD COLUMN IF NOT EXISTS seo_title_en text,
+    ADD COLUMN IF NOT EXISTS seo_title_de text,
+    ADD COLUMN IF NOT EXISTS seo_title_fr text,
+    ADD COLUMN IF NOT EXISTS seo_description_it text,
+    ADD COLUMN IF NOT EXISTS seo_description_en text,
+    ADD COLUMN IF NOT EXISTS seo_description_de text,
+    ADD COLUMN IF NOT EXISTS seo_description_fr text;
+
 CREATE INDEX IF NOT EXISTS ix_shop_product_category_active_sort
    ON shop_product (shop_category_id, is_active, sort_order, created_at DESC);

--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -61,8 +61,8 @@
                },
                {
                  "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "10kB",
+                  "maximumError": "14kB"
                }
              ]
            },
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.html
+++ b/frontend/src/app/features/admin/pages/admin-dashboard.component.html
@@ -104,7 +104,6 @@
              <td>
                <span
                  class="order-type-badge"
-                  [class.order-type-badge--shop]="orderKind(order) === 'SHOP'"
                  [class.order-type-badge--mixed]="orderKind(order) === 'MIXED'"
                >
                  {{ orderKindLabel(order) }}
@@ -133,7 +132,6 @@
          <h2>Dettaglio ordine {{ selectedOrder.orderNumber }}</h2>
          <span
            class="order-type-badge"
-            [class.order-type-badge--shop]="orderKind(selectedOrder) === 'SHOP'"
            [class.order-type-badge--mixed]="
              orderKind(selectedOrder) === 'MIXED'
            "
@@ -259,10 +257,7 @@
              <p class="file-name">
                <strong>{{ itemDisplayName(item) }}</strong>
              </p>
-              <span
-                class="item-kind-badge"
-                [class.item-kind-badge--shop]="isShopItem(item)"
-              >
+              <span class="item-kind-badge">
                {{ isShopItem(item) ? "Shop" : "Calcolatore" }}
              </span>
            </div>
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-dashboard.component.scss
@@ -224,12 +224,6 @@ tbody tr.no-results:hover {
  white-space: nowrap;
 }

-.order-type-badge--shop,
-.item-kind-badge--shop {
-  background: color-mix(in srgb, var(--color-brand) 12%, white);
-  color: var(--color-brand);
-}
-
 .order-type-badge--mixed {
  background: color-mix(in srgb, #f59e0b 16%, white);
  color: #9a5b00;
--- a/frontend/src/app/features/admin/pages/admin-shop.component.html
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.html
@@ -473,7 +473,7 @@
      </div>

      <form class="detail-stack" (submit)="$event.preventDefault()">
-        <section class="form-section">
+        <section class="form-section ui-subpanel">
          <div class="panel-heading">
            <div>
              <h3>Dati base</h3>
@@ -565,7 +565,7 @@
          </div>
        </section>

-        <section class="form-section">
+        <section class="form-section ui-subpanel">
          <div class="panel-heading">
            <div>
              <h3>Contenuti localizzati</h3>
@@ -584,13 +584,28 @@
              <button
                *ngFor="let language of shopLanguages"
                type="button"
-                class="ui-language-toolbar__button"
+                class="ui-language-toolbar__button image-language-button"
                [class.active]="activeContentLanguage === language"
                [class.complete]="isContentLanguageComplete(language)"
-                [class.incomplete]="!isContentLanguageComplete(language)"
+                [class.incomplete]="isContentLanguageIncomplete(language)"
+                [class.empty]="!isContentLanguageStarted(language)"
                (click)="setActiveContentLanguage(language)"
              >
-                {{ languageLabels[language] }}
+                <span class="image-language-button__label">
+                  {{ languageLabels[language] }}
+                </span>
+                <span
+                  class="image-language-button__state"
+                  *ngIf="isContentLanguageComplete(language)"
+                >
+                  OK
+                </span>
+                <span
+                  class="image-language-button__state"
+                  *ngIf="isContentLanguageIncomplete(language)"
+                >
+                  ...
+                </span>
              </button>
            </div>
          </div>
@@ -634,106 +649,145 @@
          </div>
        </section>

-        <section class="form-section">
+        <section class="form-section ui-subpanel">
          <div class="panel-heading">
            <div>
-              <h3>SEO e social</h3>
-              <p>Metadati globali per risultato organico e preview.</p>
+              <h3>SEO localizzata</h3>
+              <p>
+                I campi seguono la lingua attiva. Open Graph usa gli stessi
+                valori della SEO.
+              </p>
+            </div>
+          </div>
+
+          <div class="ui-language-toolbar">
+            <div class="ui-language-toolbar__copy">
+              <span>Lingua SEO</span>
+              <p>Stessa lingua attiva dell'editor contenuti</p>
+            </div>
+            <div class="ui-language-toolbar__toggle">
+              <button
+                *ngFor="let language of shopLanguages"
+                type="button"
+                class="ui-language-toolbar__button image-language-button"
+                [class.active]="activeContentLanguage === language"
+                [class.complete]="isSeoLanguageComplete(language)"
+                [class.incomplete]="isSeoLanguageIncomplete(language)"
+                [class.empty]="!isSeoLanguageStarted(language)"
+                (click)="setActiveContentLanguage(language)"
+              >
+                <span class="image-language-button__label">
+                  {{ languageLabels[language] }}
+                </span>
+                <span
+                  class="image-language-button__state"
+                  *ngIf="isSeoLanguageComplete(language)"
+                >
+                  OK
+                </span>
+                <span
+                  class="image-language-button__state"
+                  *ngIf="isSeoLanguageIncomplete(language)"
+                >
+                  ...
+                </span>
+              </button>
            </div>
          </div>

          <div class="ui-form-grid ui-form-grid--two">
            <label class="ui-form-field">
-              <span class="ui-form-caption">SEO title</span>
+              <span class="ui-form-caption">
+                SEO title {{ languageLabels[activeContentLanguage] }}
+              </span>
              <input
                class="ui-form-control"
                type="text"
-                [(ngModel)]="productForm.seoTitle"
-                name="productSeoTitle"
+                [(ngModel)]="productForm.seoTitles[activeContentLanguage]"
+                [name]="'product-seo-title-' + activeContentLanguage"
              />
            </label>

-            <label class="ui-form-field">
-              <span class="ui-form-caption">SEO description</span>
-              <input
+            <label class="ui-form-field form-field--wide">
+              <span class="ui-form-caption">
+                SEO description {{ languageLabels[activeContentLanguage] }}
+              </span>
+              <textarea
                class="ui-form-control"
-                type="text"
-                [(ngModel)]="productForm.seoDescription"
-                name="productSeoDescription"
-              />
-            </label>
-
-            <label class="ui-form-field">
-              <span class="ui-form-caption">OG title</span>
-              <input
-                class="ui-form-control"
-                type="text"
-                [(ngModel)]="productForm.ogTitle"
-                name="productOgTitle"
-              />
-            </label>
-
-            <label class="ui-form-field">
-              <span class="ui-form-caption">OG description</span>
-              <input
-                class="ui-form-control"
-                type="text"
-                [(ngModel)]="productForm.ogDescription"
-                name="productOgDescription"
-              />
+                [(ngModel)]="productForm.seoDescriptions[activeContentLanguage]"
+                [name]="'product-seo-description-' + activeContentLanguage"
+                rows="3"
+              ></textarea>
+              <span
+                class="seo-counter"
+                [class.seo-counter--danger]="
+                  seoDescriptionLength(activeContentLanguage) > 160
+                "
+              >
+                {{ seoDescriptionLength(activeContentLanguage) }}/160
+              </span>
            </label>
          </div>
        </section>

-        <section class="form-section">
+        <section class="form-section ui-subpanel">
          <div class="panel-heading">
            <div>
-              <h3>Varianti</h3>
-              <p>Colori, materiale interno, SKU e prezzi.</p>
+              <h3>Materiali e prezzi</h3>
+              <p>
+                Scegli i materiali disponibili a stock. I colori vengono presi
+                automaticamente dai filamenti attivi a magazzino.
+              </p>
            </div>
            <button
              type="button"
              class="ui-button ui-button--ghost"
-              (click)="addVariant()"
+              (click)="addMaterial()"
+              [disabled]="
+                productForm.materials.length >= stockMaterialCodes().length
+              "
            >
-              Aggiungi variante
+              Aggiungi materiale
            </button>
          </div>

+          <div class="locked-panel" *ngIf="stockMaterialCodes().length === 0">
+            Nessun materiale attivo con stock disponibile.
+          </div>
+
          <div class="variant-stack">
            <article
              class="variant-card"
              *ngFor="
-                let variant of productForm.variants;
+                let material of productForm.materials;
                let index = index;
-                trackBy: trackVariant
+                trackBy: trackMaterial
              "
            >
              <div class="variant-card__header">
                <div>
                  <h4>
-                    {{
-                      variant.variantLabel ||
-                        variant.colorName ||
-                        "Nuova variante"
-                    }}
+                    {{ material.materialCode || "Nuovo materiale" }}
                  </h4>
-                  <p>Ordine {{ variant.sortOrder }}</p>
+                  <p>
+                    {{ materialColorCount(material.materialCode) }} colori da
+                    stock · ordine {{ material.sortOrder }}
+                  </p>
                </div>
                <div class="variant-card__actions">
                  <button
                    type="button"
                    class="ui-button ui-button--ghost"
-                    (click)="setDefaultVariant(index)"
-                    [disabled]="variant.isDefault"
+                    (click)="setDefaultMaterial(index)"
+                    [disabled]="material.isDefault"
                  >
-                    {{ variant.isDefault ? "Default" : "Rendi default" }}
+                    {{ material.isDefault ? "Default" : "Rendi default" }}
                  </button>
                  <button
                    type="button"
                    class="ui-button ui-button--ghost-danger"
-                    (click)="removeVariant(index)"
-                    [disabled]="productForm.variants.length <= 1"
+                    (click)="removeMaterial(index)"
+                    [disabled]="productForm.materials.length <= 1"
                  >
                    Rimuovi
                  </button>
@@ -742,62 +796,24 @@

              <div class="ui-form-grid ui-form-grid--two">
                <label class="ui-form-field">
-                  <span class="ui-form-caption">Nome variante</span>
-                  <input
+                  <span class="ui-form-caption">Materiale</span>
+                  <select
                    class="ui-form-control"
-                    type="text"
-                    [(ngModel)]="variant.variantLabel"
-                    [name]="'variant-label-' + index"
-                  />
-                </label>
-
-                <label class="ui-form-field">
-                  <span class="ui-form-caption">SKU</span>
-                  <input
-                    class="ui-form-control"
-                    type="text"
-                    [(ngModel)]="variant.sku"
-                    [name]="'variant-sku-' + index"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                  />
-                </label>
-
-                <label class="ui-form-field">
-                  <span class="ui-form-caption">Colore</span>
-                  <input
-                    class="ui-form-control"
-                    type="text"
-                    [(ngModel)]="variant.colorName"
-                    [name]="'variant-color-name-' + index"
-                  />
-                </label>
-
-                <label class="ui-form-field">
-                  <span class="ui-form-caption">HEX colore</span>
-                  <input
-                    class="ui-form-control"
-                    type="text"
-                    [(ngModel)]="variant.colorHex"
-                    [name]="'variant-color-hex-' + index"
-                    placeholder="#1A1A1A"
-                    (blur)="onColorHexBlur(variant)"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                  />
-                </label>
-
-                <label class="ui-form-field">
-                  <span class="ui-form-caption">Materiale interno</span>
-                  <input
-                    class="ui-form-control"
-                    type="text"
-                    [(ngModel)]="variant.internalMaterialCode"
-                    [name]="'variant-material-' + index"
-                    placeholder="PLA, PETG, TPU"
-                  />
+                    [(ngModel)]="material.materialCode"
+                    [name]="'material-code-' + index"
+                  >
+                    <option [ngValue]="''" disabled>Seleziona materiale</option>
+                    <option
+                      *ngFor="
+                        let materialCode of availableMaterialChoices(
+                          material.materialCode
+                        )
+                      "
+                      [ngValue]="materialCode"
+                    >
+                      {{ materialCode }}
+                    </option>
+                  </select>
                </label>

                <label class="ui-form-field">
@@ -807,8 +823,8 @@
                    type="number"
                    min="0"
                    step="0.01"
-                    [(ngModel)]="variant.priceChf"
-                    [name]="'variant-price-' + index"
+                    [(ngModel)]="material.priceChf"
+                    [name]="'material-price-' + index"
                  />
                </label>

@@ -817,8 +833,8 @@
                  <input
                    class="ui-form-control"
                    type="number"
-                    [(ngModel)]="variant.sortOrder"
-                    [name]="'variant-sort-order-' + index"
+                    [(ngModel)]="material.sortOrder"
+                    [name]="'material-sort-order-' + index"
                  />
                </label>

@@ -826,9 +842,9 @@
                  <label class="ui-checkbox">
                    <input
                      type="checkbox"
-                      [(ngModel)]="variant.isDefault"
-                      [name]="'variant-default-' + index"
-                      (ngModelChange)="setDefaultVariant(index)"
+                      [(ngModel)]="material.isDefault"
+                      [name]="'material-default-' + index"
+                      (ngModelChange)="setDefaultMaterial(index)"
                    />
                    <span class="ui-checkbox__mark" aria-hidden="true"></span>
                    <span>Default</span>
@@ -837,19 +853,34 @@
                  <label class="ui-checkbox">
                    <input
                      type="checkbox"
-                      [(ngModel)]="variant.isActive"
-                      [name]="'variant-active-' + index"
+                      [(ngModel)]="material.isActive"
+                      [name]="'material-active-' + index"
                    />
                    <span class="ui-checkbox__mark" aria-hidden="true"></span>
                    <span>Attiva</span>
                  </label>
                </div>
              </div>
+
+              <div class="material-stock-summary" *ngIf="material.materialCode">
+                <strong>Colori disponibili:</strong>
+                <span *ngIf="materialColorCount(material.materialCode) > 0">
+                  {{ materialColorPreview(material.materialCode).join(", ") }}
+                  <ng-container
+                    *ngIf="materialColorCount(material.materialCode) > 6"
+                  >
+                    +{{ materialColorCount(material.materialCode) - 6 }} altri
+                  </ng-container>
+                </span>
+                <span *ngIf="materialColorCount(material.materialCode) === 0">
+                  Nessun colore disponibile attualmente a stock.
+                </span>
+              </div>
            </article>
          </div>
        </section>

-        <section class="form-section">
+        <section class="form-section ui-subpanel">
          <div class="panel-heading">
            <div>
              <h3>Immagini e modello 3D</h3>
@@ -914,15 +945,30 @@
                    <button
                      *ngFor="let language of mediaLanguages"
                      type="button"
-                      class="ui-language-toolbar__button"
+                      class="ui-language-toolbar__button image-language-button"
                      [class.active]="
                        imageUploadState.activeLanguage === language
                      "
                      [class.complete]="isImageLanguageComplete(language)"
-                      [class.incomplete]="!isImageLanguageComplete(language)"
+                      [class.incomplete]="isImageLanguageIncomplete(language)"
+                      [class.empty]="!isImageLanguageStarted(language)"
                      (click)="setActiveImageLanguage(language)"
                    >
-                      {{ languageLabels[language] }}
+                      <span class="image-language-button__label">
+                        {{ languageLabels[language] }}
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isImageLanguageComplete(language)"
+                      >
+                        OK
+                      </span>
+                      <span
+                        class="image-language-button__state"
+                        *ngIf="isImageLanguageIncomplete(language)"
+                      >
+                        ...
+                      </span>
                    </button>
                  </div>
                </div>
--- a/frontend/src/app/features/admin/pages/admin-shop.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.scss
@@ -4,6 +4,62 @@
  gap: var(--space-5);
 }

+.admin-shop .image-language-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-width: 3.15rem;
+  background: #ffffff;
+  color: var(--color-text-muted);
+}
+
+.admin-shop .image-language-button.empty {
+  opacity: 0.76;
+}
+
+.admin-shop .image-language-button.complete {
+  border-color: #b8ddc2;
+}
+
+.admin-shop .image-language-button.incomplete {
+  border-color: #e8c8c2;
+}
+
+.admin-shop .image-language-button.active {
+  background: #fff5b8;
+  border-color: var(--color-brand);
+  color: var(--color-text);
+  opacity: 1;
+}
+
+.image-language-button__label {
+  line-height: 1;
+}
+
+.image-language-button__state {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.2rem;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.08);
+  font-size: 0.62rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.admin-shop .image-language-button.complete .image-language-button__state {
+  background: #dcefdc;
+  color: #25603b;
+}
+
+.admin-shop .image-language-button.incomplete .image-language-button__state {
+  background: #f7ddd7;
+  color: #944329;
+}
+
 .section-header {
  display: flex;
  justify-content: space-between;
@@ -61,7 +117,6 @@
 .category-manager,
 .category-editor,
 .detail-stack,
-.form-section,
 .variant-stack,
 .image-stack,
 .media-grid,
@@ -71,6 +126,12 @@
  gap: var(--space-3);
 }

+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
 .panel-heading {
  display: flex;
  justify-content: space-between;
@@ -211,6 +272,17 @@
  gap: var(--space-2);
 }

+.seo-counter {
+  justify-self: end;
+  font-size: 0.72rem;
+  font-weight: 700;
+  color: var(--color-text-muted);
+}
+
+.seo-counter--danger {
+  color: var(--color-danger-500);
+}
+
 .product-cell {
  display: grid;
  gap: 4px;
@@ -224,10 +296,6 @@ tbody tr.selected {
  background: #fff4c0;
 }

-.detail-panel {
-  gap: var(--space-4);
-}
-
 .detail-panel .ui-meta-item {
  padding: var(--space-2);
 }
@@ -277,15 +345,16 @@ tbody tr.selected {
 }

 .detail-stack {
-  gap: var(--space-4);
+  gap: var(--space-3);
 }

 .variant-card,
 .image-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  background: linear-gradient(180deg, #fcfcfb 0%, #ffffff 100%);
+  background: var(--color-bg-card);
  padding: var(--space-3);
+  box-shadow: var(--shadow-sm);
 }

 .variant-card {
@@ -316,6 +385,19 @@ tbody tr.selected {
  justify-content: flex-end;
 }

+.material-stock-summary {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  align-items: baseline;
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+}
+
+.material-stock-summary strong {
+  color: var(--color-text);
+}
+
 .locked-panel,
 .loading-state,
 .image-fallback {
--- a/frontend/src/app/features/admin/pages/admin-shop.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.ts
@@ -22,6 +22,10 @@ import {
  AdminUpsertShopProductVariantPayload,
  AdminPublicMediaUsage,
 } from '../services/admin-shop.service';
+import {
+  AdminFilamentVariant,
+  AdminOperationsService,
+} from '../services/admin-operations.service';
 import {
  AdminMediaLanguage,
  AdminMediaTranslation,
@@ -47,13 +51,8 @@ interface CategoryFormState {
  sortOrder: number;
 }

-interface ProductVariantFormState {
-  id: string | null;
-  sku: string;
-  variantLabel: string;
-  colorName: string;
-  colorHex: string;
-  internalMaterialCode: string;
+interface ProductMaterialFormState {
+  materialCode: string;
  priceChf: string;
  isDefault: boolean;
  isActive: boolean;
@@ -66,15 +65,13 @@ interface ProductFormState {
  names: Record<ShopLanguage, string>;
  excerpts: Record<ShopLanguage, string>;
  descriptions: Record<ShopLanguage, string>;
-  seoTitle: string;
-  seoDescription: string;
-  ogTitle: string;
-  ogDescription: string;
+  seoTitles: Record<ShopLanguage, string>;
+  seoDescriptions: Record<ShopLanguage, string>;
  indexable: boolean;
  isFeatured: boolean;
  isActive: boolean;
  sortOrder: number;
-  variants: ProductVariantFormState[];
+  materials: ProductMaterialFormState[];
 }

 interface ProductImageItem {
@@ -128,6 +125,7 @@ const MAX_LIST_PANEL_WIDTH_PERCENT = 68;
 })
 export class AdminShopComponent implements OnInit, OnDestroy {
  private readonly adminShopService = inject(AdminShopService);
+  private readonly adminOperationsService = inject(AdminOperationsService);
  @ViewChild('workspaceRef')
  private readonly workspaceRef?: ElementRef<HTMLDivElement>;

@@ -142,6 +140,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
  listPanelWidthPercent = 53;
  categories: AdminShopCategory[] = [];
  products: AdminShopProduct[] = [];
+  stockFilamentVariants: AdminFilamentVariant[] = [];
  filteredProducts: AdminShopProduct[] = [];
  selectedProduct: AdminShopProduct | null = null;
  selectedProductId: string | null = null;
@@ -210,10 +209,13 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    forkJoin({
      categories: this.adminShopService.getCategories(),
      products: this.adminShopService.getProducts(),
+      filamentVariants: this.adminOperationsService.getFilamentVariants(),
    }).subscribe({
-      next: ({ categories, products }) => {
+      next: ({ categories, products, filamentVariants }) => {
        this.categories = categories;
        this.products = products;
+        this.stockFilamentVariants =
+          this.filterStockedFilamentVariants(filamentVariants);
        this.applyProductFilters();
        this.ensureCategoryFilterStillValid();
        this.loading = false;
@@ -233,6 +235,9 @@ export class AdminShopComponent implements OnInit, OnDestroy {
          this.selectedProduct = null;
          this.selectedProductId = null;
          this.productImages = [];
+          if (this.productForm.materials.length === 0) {
+            this.resetProductForm();
+          }
          return;
        }

@@ -527,43 +532,113 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    return !!this.productForm.names[language].trim();
  }

-  addVariant(): void {
-    const sortOrder = (this.productForm.variants.at(-1)?.sortOrder ?? -1) + 1;
-    const firstVariant = this.productForm.variants.length === 0;
-    this.productForm.variants = [
-      ...this.productForm.variants,
-      this.createEmptyVariantForm(sortOrder, firstVariant),
+  isContentLanguageStarted(language: ShopLanguage): boolean {
+    return (
+      !!this.productForm.names[language].trim() ||
+      !!this.productForm.excerpts[language].trim() ||
+      !!this.productForm.descriptions[language].trim()
+    );
+  }
+
+  isContentLanguageIncomplete(language: ShopLanguage): boolean {
+    return (
+      this.isContentLanguageStarted(language) &&
+      !this.isContentLanguageComplete(language)
+    );
+  }
+
+  isSeoLanguageComplete(language: ShopLanguage): boolean {
+    return (
+      !!this.productForm.seoTitles[language].trim() &&
+      !!this.productForm.seoDescriptions[language].trim()
+    );
+  }
+
+  isSeoLanguageStarted(language: ShopLanguage): boolean {
+    return (
+      !!this.productForm.seoTitles[language].trim() ||
+      !!this.productForm.seoDescriptions[language].trim()
+    );
+  }
+
+  isSeoLanguageIncomplete(language: ShopLanguage): boolean {
+    return (
+      this.isSeoLanguageStarted(language) &&
+      !this.isSeoLanguageComplete(language)
+    );
+  }
+
+  addMaterial(): void {
+    const nextMaterialCode = this.nextAvailableMaterialCode();
+    if (!nextMaterialCode) {
+      return;
+    }
+    const sortOrder = (this.productForm.materials.at(-1)?.sortOrder ?? -1) + 1;
+    const firstMaterial = this.productForm.materials.length === 0;
+    this.productForm.materials = [
+      ...this.productForm.materials,
+      this.createEmptyMaterialForm(sortOrder, firstMaterial, nextMaterialCode),
    ];
  }

-  removeVariant(index: number): void {
-    if (this.productForm.variants.length <= 1) {
+  removeMaterial(index: number): void {
+    if (this.productForm.materials.length <= 1) {
      return;
    }

-    const nextVariants = this.productForm.variants.filter(
+    const nextMaterials = this.productForm.materials.filter(
      (_, currentIndex) => currentIndex !== index,
    );
-    if (!nextVariants.some((variant) => variant.isDefault)) {
-      nextVariants[0].isDefault = true;
+    if (!nextMaterials.some((material) => material.isDefault)) {
+      nextMaterials[0].isDefault = true;
    }
-    this.productForm.variants = nextVariants;
+    this.productForm.materials = nextMaterials;
  }

-  setDefaultVariant(index: number): void {
-    this.productForm.variants = this.productForm.variants.map(
-      (variant, currentIndex) => ({
-        ...variant,
+  setDefaultMaterial(index: number): void {
+    this.productForm.materials = this.productForm.materials.map(
+      (material, currentIndex) => ({
+        ...material,
        isDefault: currentIndex === index,
      }),
    );
  }

-  onColorHexBlur(variant: ProductVariantFormState): void {
-    if (!variant.colorHex.trim()) {
-      return;
+  availableMaterialChoices(currentMaterialCode: string): string[] {
+    const normalizedCurrentMaterialCode = currentMaterialCode
+      .trim()
+      .toUpperCase();
+    const selectedCodes = new Set(
+      this.productForm.materials
+        .map((material) => material.materialCode.trim().toUpperCase())
+        .filter(Boolean),
+    );
+
+    const availableCodes = this.stockMaterialCodes().filter(
+      (materialCode) =>
+        materialCode === normalizedCurrentMaterialCode ||
+        !selectedCodes.has(materialCode),
+    );
+
+    if (
+      normalizedCurrentMaterialCode &&
+      !availableCodes.includes(normalizedCurrentMaterialCode)
+    ) {
+      return [normalizedCurrentMaterialCode, ...availableCodes];
    }
-    variant.colorHex = variant.colorHex.trim().toUpperCase();
+
+    return availableCodes;
+  }
+
+  materialColorCount(materialCode: string): number {
+    return this.stockVariantsForMaterial(materialCode).length;
+  }
+
+  materialColorPreview(materialCode: string): string[] {
+    return this.stockVariantsForMaterial(materialCode)
+      .map((variant) => variant.colorName.trim())
+      .filter(Boolean)
+      .slice(0, 6);
  }

  onModelFileSelected(event: Event): void {
@@ -729,6 +804,18 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    );
  }

+  isImageLanguageStarted(language: AdminMediaLanguage): boolean {
+    const translation = this.imageUploadState.translations[language];
+    return !!translation.title.trim() || !!translation.altText.trim();
+  }
+
+  isImageLanguageIncomplete(language: AdminMediaLanguage): boolean {
+    return (
+      this.isImageLanguageStarted(language) &&
+      !this.isImageLanguageComplete(language)
+    );
+  }
+
  uploadProductImage(): void {
    if (
      !this.selectedProduct ||
@@ -907,8 +994,8 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    return product.id;
  }

-  trackVariant(_: number, variant: ProductVariantFormState): string {
-    return variant.id ?? `${variant.colorName}-${variant.sortOrder}`;
+  trackMaterial(_: number, material: ProductMaterialFormState): string {
+    return `${material.materialCode || 'material'}-${material.sortOrder}`;
  }

  trackImage(_: number, image: ProductImageItem): string {
@@ -1087,6 +1174,7 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      this.categoryFilter !== 'ALL'
        ? this.categoryFilter
        : (this.categories[0]?.id ?? '');
+    const defaultMaterialCode = this.stockMaterialCodes()[0] ?? '';
    return {
      categoryId: defaultCategoryId,
      slug: '',
@@ -1108,15 +1196,25 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        de: '',
        fr: '',
      },
-      seoTitle: '',
-      seoDescription: '',
-      ogTitle: '',
-      ogDescription: '',
+      seoTitles: {
+        it: '',
+        en: '',
+        de: '',
+        fr: '',
+      },
+      seoDescriptions: {
+        it: '',
+        en: '',
+        de: '',
+        fr: '',
+      },
      indexable: true,
      isFeatured: false,
      isActive: true,
      sortOrder: 0,
-      variants: [this.createEmptyVariantForm(0, true)],
+      materials: defaultMaterialCode
+        ? [this.createEmptyMaterialForm(0, true, defaultMaterialCode)]
+        : [],
    };
  }

@@ -1124,17 +1222,13 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    Object.assign(this.productForm, this.createEmptyProductForm());
  }

-  private createEmptyVariantForm(
+  private createEmptyMaterialForm(
    sortOrder: number,
    isDefault: boolean,
-  ): ProductVariantFormState {
+    materialCode = '',
+  ): ProductMaterialFormState {
    return {
-      id: null,
-      sku: '',
-      variantLabel: '',
-      colorName: '',
-      colorHex: '',
-      internalMaterialCode: '',
+      materialCode,
      priceChf: '0.00',
      isDefault,
      isActive: true,
@@ -1164,35 +1258,72 @@ export class AdminShopComponent implements OnInit, OnDestroy {
        de: product.descriptionDe ?? '',
        fr: product.descriptionFr ?? '',
      },
-      seoTitle: product.seoTitle ?? '',
-      seoDescription: product.seoDescription ?? '',
-      ogTitle: product.ogTitle ?? '',
-      ogDescription: product.ogDescription ?? '',
+      seoTitles: {
+        it: product.seoTitleIt ?? '',
+        en: product.seoTitleEn ?? '',
+        de: product.seoTitleDe ?? '',
+        fr: product.seoTitleFr ?? '',
+      },
+      seoDescriptions: {
+        it: product.seoDescriptionIt ?? '',
+        en: product.seoDescriptionEn ?? '',
+        de: product.seoDescriptionDe ?? '',
+        fr: product.seoDescriptionFr ?? '',
+      },
      indexable: product.indexable,
      isFeatured: product.isFeatured,
      isActive: product.isActive,
      sortOrder: product.sortOrder ?? 0,
-      variants: product.variants.length
-        ? product.variants.map((variant) => this.toVariantForm(variant))
-        : [this.createEmptyVariantForm(0, true)],
+      materials: this.toMaterialForms(product.variants),
    });
  }

-  private toVariantForm(
-    variant: AdminShopProductVariant,
-  ): ProductVariantFormState {
-    return {
-      id: variant.id,
-      sku: variant.sku ?? '',
-      variantLabel: variant.variantLabel ?? '',
-      colorName: variant.colorName ?? '',
-      colorHex: variant.colorHex ?? '',
-      internalMaterialCode: variant.internalMaterialCode ?? '',
-      priceChf: Number(variant.priceChf ?? 0).toFixed(2),
-      isDefault: variant.isDefault,
-      isActive: variant.isActive,
-      sortOrder: variant.sortOrder ?? 0,
-    };
+  private toMaterialForms(
+    variants: AdminShopProductVariant[],
+  ): ProductMaterialFormState[] {
+    if (!variants.length) {
+      const defaultMaterialCode = this.stockMaterialCodes()[0] ?? '';
+      return defaultMaterialCode
+        ? [this.createEmptyMaterialForm(0, true, defaultMaterialCode)]
+        : [];
+    }
+
+    const groups = new Map<string, AdminShopProductVariant[]>();
+    for (const variant of variants) {
+      const materialCode = (variant.internalMaterialCode ?? '')
+        .trim()
+        .toUpperCase();
+      if (!materialCode) {
+        continue;
+      }
+      const group = groups.get(materialCode) ?? [];
+      group.push(variant);
+      groups.set(materialCode, group);
+    }
+
+    const materials = Array.from(groups.entries())
+      .map(([materialCode, materialVariants]) => {
+        const sortedVariants = [...materialVariants].sort(
+          (left, right) => (left.sortOrder ?? 0) - (right.sortOrder ?? 0),
+        );
+        const firstVariant = sortedVariants[0];
+        return {
+          materialCode,
+          priceChf: Number(firstVariant?.priceChf ?? 0).toFixed(2),
+          isDefault: materialVariants.some((variant) => variant.isDefault),
+          isActive: materialVariants.some((variant) => variant.isActive),
+          sortOrder: Math.min(
+            ...materialVariants.map((variant) => variant.sortOrder ?? 0),
+          ),
+        };
+      })
+      .sort((left, right) => left.sortOrder - right.sortOrder);
+
+    if (!materials.some((material) => material.isDefault) && materials[0]) {
+      materials[0].isDefault = true;
+    }
+
+    return materials;
  }

  private validateProductForm(): string | null {
@@ -1206,60 +1337,49 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      if (!this.productForm.names[language].trim()) {
        return `Il nome prodotto ${this.languageLabels[language]} è obbligatorio.`;
      }
+      if (this.productForm.seoDescriptions[language].trim().length > 160) {
+        return `La SEO description ${this.languageLabels[language]} deve stare sotto i 160 caratteri.`;
+      }
    }
-    if (this.productForm.variants.length === 0) {
-      return 'È richiesta almeno una variante.';
+    if (this.productForm.materials.length === 0) {
+      return 'Seleziona almeno un materiale disponibile a stock.';
    }

-    const colorNames = new Set<string>();
    let defaultCount = 0;
-    for (const variant of this.productForm.variants) {
-      if (!variant.colorName.trim()) {
-        return 'Ogni variante richiede un nome colore.';
+    const materialCodes = new Set<string>();
+    for (const material of this.productForm.materials) {
+      const materialCode = material.materialCode.trim().toUpperCase();
+      if (!materialCode) {
+        return 'Ogni riga materiale richiede un materiale selezionato.';
      }
-      const colorKey = variant.colorName.trim().toLowerCase();
-      if (colorNames.has(colorKey)) {
-        return `Il colore "${variant.colorName.trim()}" è duplicato.`;
+      if (materialCodes.has(materialCode)) {
+        return `Il materiale "${materialCode}" è duplicato.`;
      }
-      colorNames.add(colorKey);
-      if (!variant.internalMaterialCode.trim()) {
-        return `La variante "${variant.colorName.trim()}" richiede un codice materiale interno.`;
+      materialCodes.add(materialCode);
+      if (!this.stockMaterialCodes().includes(materialCode)) {
+        return `Il materiale "${materialCode}" non è disponibile nello stock attivo.`;
      }
-      const price = Number(variant.priceChf);
+      if (this.stockVariantsForMaterial(materialCode).length === 0) {
+        return `Il materiale "${materialCode}" non ha colori disponibili a stock.`;
+      }
+
+      const price = Number(material.priceChf);
      if (!Number.isFinite(price) || price < 0) {
-        return `La variante "${variant.colorName.trim()}" ha un prezzo non valido.`;
+        return `Il materiale "${materialCode}" ha un prezzo non valido.`;
      }
-      if (
-        variant.colorHex.trim() &&
-        !/^#[0-9A-Fa-f]{6}$/.test(variant.colorHex.trim())
-      ) {
-        return `La variante "${variant.colorName.trim()}" ha un colore HEX non valido.`;
-      }
-      if (variant.isDefault) {
+      if (material.isDefault) {
        defaultCount += 1;
      }
    }
    if (defaultCount !== 1) {
-      return 'Devi impostare una sola variante predefinita.';
+      return 'Devi impostare un solo materiale predefinito.';
    }

    return null;
  }

  private buildProductPayload(): AdminUpsertShopProductPayload {
-    const variants: AdminUpsertShopProductVariantPayload[] =
-      this.productForm.variants.map((variant) => ({
-        id: variant.id ?? undefined,
-        sku: this.optionalValue(variant.sku),
-        variantLabel: this.optionalValue(variant.variantLabel),
-        colorName: variant.colorName.trim(),
-        colorHex: this.optionalValue(variant.colorHex)?.toUpperCase(),
-        internalMaterialCode: variant.internalMaterialCode.trim().toUpperCase(),
-        priceChf: Number(variant.priceChf),
-        isDefault: variant.isDefault,
-        isActive: variant.isActive,
-        sortOrder: Number(variant.sortOrder) || 0,
-      }));
+    const variants = this.buildVariantsFromMaterials();

    return {
      categoryId: this.productForm.categoryId,
@@ -1279,10 +1399,28 @@ export class AdminShopComponent implements OnInit, OnDestroy {
      descriptionEn: this.optionalValue(this.productForm.descriptions['en']),
      descriptionDe: this.optionalValue(this.productForm.descriptions['de']),
      descriptionFr: this.optionalValue(this.productForm.descriptions['fr']),
-      seoTitle: this.optionalValue(this.productForm.seoTitle),
-      seoDescription: this.optionalValue(this.productForm.seoDescription),
-      ogTitle: this.optionalValue(this.productForm.ogTitle),
-      ogDescription: this.optionalValue(this.productForm.ogDescription),
+      seoTitle: this.optionalValue(this.productForm.seoTitles['it']),
+      seoTitleIt: this.optionalValue(this.productForm.seoTitles['it']),
+      seoTitleEn: this.optionalValue(this.productForm.seoTitles['en']),
+      seoTitleDe: this.optionalValue(this.productForm.seoTitles['de']),
+      seoTitleFr: this.optionalValue(this.productForm.seoTitles['fr']),
+      seoDescription: this.optionalValue(
+        this.productForm.seoDescriptions['it'],
+      ),
+      seoDescriptionIt: this.optionalValue(
+        this.productForm.seoDescriptions['it'],
+      ),
+      seoDescriptionEn: this.optionalValue(
+        this.productForm.seoDescriptions['en'],
+      ),
+      seoDescriptionDe: this.optionalValue(
+        this.productForm.seoDescriptions['de'],
+      ),
+      seoDescriptionFr: this.optionalValue(
+        this.productForm.seoDescriptions['fr'],
+      ),
+      ogTitle: this.optionalValue(this.productForm.seoTitles['it']),
+      ogDescription: this.optionalValue(this.productForm.seoDescriptions['it']),
      indexable: this.productForm.indexable,
      isFeatured: this.productForm.isFeatured,
      isActive: this.productForm.isActive,
@@ -1291,6 +1429,174 @@ 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(
+          variant.internalMaterialCode,
+          variant.colorName,
+          variant.colorHex,
+        ),
+        variant,
+      ]),
+    );
+    const persistedDefaultKey = persistedDefaultVariant
+      ? this.variantKey(
+          persistedDefaultVariant.internalMaterialCode,
+          persistedDefaultVariant.colorName,
+          persistedDefaultVariant.colorHex,
+        )
+      : null;
+
+    const variants: AdminUpsertShopProductVariantPayload[] = [];
+    let defaultAssigned = false;
+
+    const sortedMaterials = [...this.productForm.materials].sort(
+      (left, right) => left.sortOrder - right.sortOrder,
+    );
+
+    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(
+                materialCode,
+                variant.colorName,
+                variant.colorHex,
+              ),
+            )
+            .find((variantKey) => variantKey === persistedDefaultKey) ?? null;
+      }
+
+      stockVariants.forEach((stockVariant, colorIndex) => {
+        const variantKey = this.variantKey(
+          materialCode,
+          stockVariant.colorName,
+          stockVariant.colorHex,
+        );
+        const existingVariant = existingVariantsByKey.get(variantKey);
+        const isDefault =
+          material.isDefault &&
+          !defaultAssigned &&
+          (defaultVariantKeyForMaterial
+            ? variantKey === defaultVariantKeyForMaterial
+            : colorIndex === 0);
+
+        variants.push({
+          id: existingVariant?.id,
+          sku: this.optionalValue(existingVariant?.sku ?? ''),
+          variantLabel: materialCode,
+          colorName: stockVariant.colorName.trim(),
+          colorHex: this.optionalValue(
+            stockVariant.colorHex ?? '',
+          )?.toUpperCase(),
+          internalMaterialCode: materialCode,
+          priceChf: Number(material.priceChf),
+          isDefault,
+          isActive: material.isActive,
+          sortOrder: material.sortOrder * 100 + colorIndex,
+        });
+
+        if (isDefault) {
+          defaultAssigned = true;
+        }
+      });
+    }
+
+    if (!defaultAssigned && variants[0]) {
+      variants[0].isDefault = true;
+    }
+
+    return variants;
+  }
+
+  stockMaterialCodes(): string[] {
+    return Array.from(
+      new Set(
+        this.stockFilamentVariants.map((variant) =>
+          variant.materialCode.trim().toUpperCase(),
+        ),
+      ),
+    ).sort((left, right) => left.localeCompare(right));
+  }
+
+  private stockVariantsForMaterial(
+    materialCode: string,
+  ): AdminFilamentVariant[] {
+    const targetMaterialCode = materialCode.trim().toUpperCase();
+    const seenKeys = new Set<string>();
+
+    return this.stockFilamentVariants
+      .filter(
+        (variant) =>
+          variant.materialCode.trim().toUpperCase() === targetMaterialCode,
+      )
+      .sort((left, right) => {
+        const leftName = `${left.colorName} ${left.variantDisplayName}`.trim();
+        const rightName =
+          `${right.colorName} ${right.variantDisplayName}`.trim();
+        return leftName.localeCompare(rightName);
+      })
+      .filter((variant) => {
+        const key = this.variantKey(
+          targetMaterialCode,
+          variant.colorName,
+          variant.colorHex,
+        );
+        if (seenKeys.has(key)) {
+          return false;
+        }
+        seenKeys.add(key);
+        return true;
+      });
+  }
+
+  private nextAvailableMaterialCode(): string | null {
+    const selectedCodes = new Set(
+      this.productForm.materials
+        .map((material) => material.materialCode.trim().toUpperCase())
+        .filter(Boolean),
+    );
+
+    return (
+      this.stockMaterialCodes().find(
+        (materialCode) => !selectedCodes.has(materialCode),
+      ) ?? null
+    );
+  }
+
+  private filterStockedFilamentVariants(
+    filamentVariants: AdminFilamentVariant[],
+  ): AdminFilamentVariant[] {
+    return filamentVariants.filter(
+      (variant) =>
+        variant.isActive &&
+        Number(variant.stockFilamentGrams ?? 0) > 0 &&
+        !!variant.materialCode?.trim() &&
+        !!variant.colorName?.trim(),
+    );
+  }
+
+  private variantKey(
+    materialCode: string | null | undefined,
+    colorName: string | null | undefined,
+    colorHex: string | null | undefined,
+  ): string {
+    return [
+      (materialCode ?? '').trim().toUpperCase(),
+      (colorName ?? '').trim().toLowerCase(),
+      (colorHex ?? '').trim().toUpperCase(),
+    ].join('|');
+  }
+
  private updateSelectedProduct(product: AdminShopProduct): void {
    this.selectedProduct = product;
    this.selectedProductId = product.id;
@@ -1454,6 +1760,10 @@ export class AdminShopComponent implements OnInit, OnDestroy {
    return normalized ? normalized : undefined;
  }

+  seoDescriptionLength(language: ShopLanguage): number {
+    return this.productForm.seoDescriptions[language].trim().length;
+  }
+
  private slugify(source: string): string {
    return source
      .normalize('NFD')
--- a/frontend/src/app/features/admin/services/admin-shop.service.ts
+++ b/frontend/src/app/features/admin/services/admin-shop.service.ts
@@ -131,7 +131,15 @@ export interface AdminShopProduct {
  descriptionDe: string | null;
  descriptionFr: string | null;
  seoTitle: string | null;
+  seoTitleIt: string | null;
+  seoTitleEn: string | null;
+  seoTitleDe: string | null;
+  seoTitleFr: string | null;
  seoDescription: string | null;
+  seoDescriptionIt: string | null;
+  seoDescriptionEn: string | null;
+  seoDescriptionDe: string | null;
+  seoDescriptionFr: string | null;
  ogTitle: string | null;
  ogDescription: string | null;
  indexable: boolean;
@@ -189,7 +197,15 @@ export interface AdminUpsertShopProductPayload {
  descriptionDe?: string;
  descriptionFr?: string;
  seoTitle?: string;
+  seoTitleIt?: string;
+  seoTitleEn?: string;
+  seoTitleDe?: string;
+  seoTitleFr?: string;
  seoDescription?: string;
+  seoDescriptionIt?: string;
+  seoDescriptionEn?: string;
+  seoDescriptionDe?: string;
+  seoDescriptionFr?: string;
  ogTitle?: string;
  ogDescription?: string;
  indexable: boolean;
--- a/frontend/src/app/features/shop/components/product-card/product-card.component.html
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.html
@@ -1,5 +1,5 @@
 <article class="product-card">
-  <a class="media" [routerLink]="productLink()">
+  <a class="media" [routerLink]="productLink()" [state]="navigationState()">
    @if (imageUrl(); as imageUrl) {
      <img
        [src]="imageUrl"
@@ -13,6 +13,11 @@
    }

    <div class="card-badges">
+      @if (hasModelPreview()) {
+        <span class="badge badge-model">
+          {{ "SHOP.MODEL_3D" | translate }}
+        </span>
+      }
      @if (cartQuantity() > 0) {
        <span class="badge badge-cart">
          {{ "SHOP.IN_CART_SHORT" | translate: { count: cartQuantity() } }}
@@ -24,13 +29,12 @@
  <div class="content">
    <div class="meta">
      <span class="category">{{ product().category.name }}</span>
-      @if (product().model3d) {
-        <span class="model-pill">{{ "SHOP.MODEL_3D" | translate }}</span>
-      }
    </div>

    <h3 class="name">
-      <a [routerLink]="productLink()">{{ product().name }}</a>
+      <a [routerLink]="productLink()" [state]="navigationState()">{{
+        product().name
+      }}</a>
    </h3>

    <p class="excerpt">
@@ -45,9 +49,23 @@
        }
      </div>

-      <a [routerLink]="productLink()" class="view-btn">{{
-        "SHOP.DETAILS" | translate
-      }}</a>
+      <div class="footer-actions">
+        <button
+          type="button"
+          class="cart-btn"
+          (click)="addToCart()"
+          [disabled]="!defaultVariantId() || addingToCart()"
+        >
+          {{ (addingToCart() ? "SHOP.ADDING" : "SHOP.ADD_CART") | translate }}
+        </button>
+
+        <a
+          [routerLink]="productLink()"
+          [state]="navigationState()"
+          class="view-btn"
+          >{{ "SHOP.DETAILS" | translate }}</a
+        >
+      </div>
    </div>
  </div>
 </article>
--- a/frontend/src/app/features/shop/components/product-card/product-card.component.scss
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.scss
@@ -21,8 +21,9 @@
 .media {
  position: relative;
  display: block;
-  min-height: 244px;
+  aspect-ratio: 1 / 1;
  background: #f2eee5;
+  overflow: hidden;
 }

 .media img {
@@ -35,7 +36,6 @@
 .image-fallback {
  width: 100%;
  height: 100%;
-  min-height: 244px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-5);
@@ -87,6 +87,12 @@
  color: #fff;
 }

+.badge-model {
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--color-text-muted);
+  border: 1px solid rgba(16, 24, 32, 0.08);
+}
+
 .content {
  display: grid;
  gap: var(--space-4);
@@ -100,8 +106,7 @@
  gap: 0.55rem;
 }

-.category,
-.model-pill {
+.category {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
@@ -112,15 +117,6 @@
  font-weight: 700;
 }

-.model-pill {
-  display: inline-flex;
-  padding: 0.18rem 0.55rem;
-  border-radius: 999px;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  color: var(--color-text-muted);
-  background: rgba(255, 255, 255, 0.72);
-}
-
 .name {
  margin: 0;
  font-size: 1.2rem;
@@ -135,7 +131,13 @@
 .excerpt {
  margin: 0;
  color: var(--color-text-muted);
-  line-height: 1.55;
+  line-height: 1.45;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
 }

 .footer {
@@ -145,6 +147,12 @@
  gap: var(--space-4);
 }

+.footer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .pricing {
  display: grid;
  gap: 0.1rem;
@@ -160,27 +168,49 @@
  color: var(--color-text-muted);
 }

+.cart-btn,
 .view-btn {
  display: inline-flex;
  align-items: center;
+  justify-content: center;
  min-height: 2.35rem;
  padding: 0 0.9rem;
  border-radius: 999px;
-  background: rgba(16, 24, 32, 0.06);
-  color: var(--color-neutral-900);
  font-size: 0.9rem;
  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.cart-btn {
+  background: var(--color-brand);
+  color: var(--color-neutral-900);
+  border-color: color-mix(in srgb, var(--color-brand) 72%, #d5ac00);
+  cursor: pointer;
+}
+
+.cart-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.view-btn {
+  background: rgba(16, 24, 32, 0.06);
+  color: var(--color-neutral-900);
  text-decoration: none;
 }

@media (max-width: 640px) {
-  .media,
-  .image-fallback {
-    min-height: 220px;
-  }
-
  .footer {
    align-items: start;
    flex-direction: column;
  }
+
+  .footer-actions {
+    width: 100%;
+  }
+
+  .cart-btn,
+  .view-btn {
+    flex: 1;
+  }
 }
--- a/frontend/src/app/features/shop/components/product-card/product-card.component.ts
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.ts
@@ -1,8 +1,10 @@
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, input } from '@angular/core';
-import { RouterLink } from '@angular/router';
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { Router, RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { finalize } from 'rxjs';
 import { ShopProductSummary, ShopService } from '../../services/shop.service';
+import { ShopRouteService } from '../../services/shop-route.service';

@Component({
  selector: 'app-product-card',
@@ -12,16 +14,17 @@ import { ShopProductSummary, ShopService } from '../../services/shop.service';
  styleUrl: './product-card.component.scss',
 })
 export class ProductCardComponent {
+  private readonly router = inject(Router);
  private readonly shopService = inject(ShopService);
+  private readonly shopRouteService = inject(ShopRouteService);

  readonly product = input.required<ShopProductSummary>();
  readonly cartQuantity = input(0);
+  readonly addingToCart = signal(false);

-  readonly productLink = computed(() => [
-    '/shop',
-    this.product().category.slug,
-    this.product().slug,
-  ]);
+  readonly productLink = computed(() =>
+    this.shopRouteService.productCommands(this.product()),
+  );

  readonly imageUrl = computed(() => {
    const image = this.product().primaryImage;
@@ -32,6 +35,11 @@ export class ProductCardComponent {
    );
  });

+  readonly hasModelPreview = computed(() => {
+    const model = this.product().model3d;
+    return !!(model?.url && model.originalFilename);
+  });
+
  priceLabel(): number {
    return this.product().priceFromChf;
  }
@@ -39,4 +47,31 @@ export class ProductCardComponent {
  hasPriceRange(): boolean {
    return this.product().priceFromChf !== this.product().priceToChf;
  }
+
+  defaultVariantId(): string | null {
+    return this.product().defaultVariant?.id ?? null;
+  }
+
+  addToCart(): void {
+    const variantId = this.defaultVariantId();
+    if (!variantId || this.addingToCart()) {
+      return;
+    }
+
+    this.addingToCart.set(true);
+    this.shopService
+      .addToCart(variantId, 1)
+      .pipe(finalize(() => this.addingToCart.set(false)))
+      .subscribe({
+        error: () => {
+          // Keep card UX simple: product detail handles error messaging in depth.
+        },
+      });
+  }
+
+  navigationState(): { shopReturnUrl: string } {
+    return {
+      shopReturnUrl: this.router.url,
+    };
+  }
 }
--- a/frontend/src/app/features/shop/product-detail.component.html
+++ b/frontend/src/app/features/shop/product-detail.component.html
@@ -1,8 +1,8 @@
 <section class="product-page">
  <div class="container wrapper">
-    <a [routerLink]="productLinkRoot()" class="back-link">
+    <button type="button" class="back-link" (click)="goBackToShop()">
      ← {{ "SHOP.BACK" | translate }}
-    </a>
+    </button>

    @if (loading()) {
      <div class="detail-grid skeleton-grid">
@@ -15,16 +15,37 @@
      } @else {
        @if (product(); as p) {
          <nav class="breadcrumbs">
-            <a routerLink="/shop">{{ "SHOP.BREADCRUMB_ROOT" | translate }}</a>
+            <a [routerLink]="shopRootLink()">{{
+              "SHOP.BREADCRUMB_ROOT" | translate
+            }}</a>
            @for (crumb of p.breadcrumbs; track crumb.id) {
              <span>/</span>
-              <a [routerLink]="['/shop', crumb.slug]">{{ crumb.name }}</a>
+              <a [routerLink]="categoryLink(crumb.slug)">{{ crumb.name }}</a>
            }
          </nav>

          <div class="detail-grid">
            <section class="visual-column">
              <div class="hero-media">
+                @if (galleryImages().length > 1) {
+                  <button
+                    type="button"
+                    class="hero-nav hero-nav-prev"
+                    (click)="showPreviousImage()"
+                    [attr.aria-label]="'SHOP.PREVIOUS_IMAGE' | translate"
+                  >
+                    ‹
+                  </button>
+                  <button
+                    type="button"
+                    class="hero-nav hero-nav-next"
+                    (click)="showNextImage()"
+                    [attr.aria-label]="'SHOP.NEXT_IMAGE' | translate"
+                  >
+                    ›
+                  </button>
+                }
+
                @if (imageUrl(selectedImage()); as imageUrl) {
                  <img
                    [src]="imageUrl"
@@ -39,7 +60,7 @@
              </div>

              @if (galleryImages().length > 1) {
-                <div class="thumb-grid">
+                <div class="thumb-strip">
                  @for (image of galleryImages(); track image.mediaAssetId) {
                    <button
                      type="button"
@@ -60,15 +81,12 @@
              }

              @if (p.model3d) {
-                <app-card class="viewer-card">
-                  <div class="viewer-head">
-                    <div>
-                      <p class="viewer-kicker">
-                        {{ "SHOP.MODEL_3D" | translate }}
-                      </p>
-                      <h3>{{ "SHOP.MODEL_TITLE" | translate }}</h3>
-                    </div>
-                    <div class="dimensions">
+                <div class="model-launch-row">
+                  <div>
+                    <p class="viewer-kicker">
+                      {{ "SHOP.MODEL_3D" | translate }}
+                    </p>
+                    <div class="dimensions dimensions-inline">
                      <span>
                        X
                        {{ p.model3d.boundingBoxXMm || 0 | number: "1.0-1" }} mm
@@ -83,25 +101,14 @@
                      </span>
                    </div>
                  </div>
-
-                  @if (modelLoading()) {
-                    <div class="viewer-state">
-                      {{ "SHOP.MODEL_LOADING" | translate }}
-                    </div>
-                  } @else if (modelError()) {
-                    <div class="viewer-state viewer-state-error">
-                      {{ "SHOP.MODEL_UNAVAILABLE" | translate }}
-                    </div>
-                  } @else {
-                    @if (modelFile(); as modelPreviewFile) {
-                      <app-stl-viewer
-                        [file]="modelPreviewFile"
-                        [height]="360"
-                        [color]="selectedVariant()?.colorHex || '#facf0a'"
-                      ></app-stl-viewer>
-                    }
-                  }
-                </app-card>
+                  <button
+                    type="button"
+                    class="model-open-btn"
+                    (click)="openModelModal()"
+                  >
+                    {{ "SHOP.MODEL_OPEN" | translate }}
+                  </button>
+                </div>
              }
            </section>

@@ -120,12 +127,12 @@
                </p>
              </div>

-              <app-card>
+              <app-card class="purchase-shell">
                <div class="purchase-card">
                  <div class="price-row">
                    <div>
                      <p class="panel-kicker">
-                        {{ "SHOP.SELECT_COLOR" | translate }}
+                        {{ "SHOP.SELECT_MATERIAL" | translate }}
                      </p>
                      <h3>{{ priceLabel() | currency: "CHF" }}</h3>
                    </div>
@@ -140,29 +147,121 @@
                    }
                  </div>

-                  <div class="variant-grid">
-                    @for (variant of p.variants; track variant.id) {
+                  @if (materialOptions().length > 1) {
+                    <div class="material-grid">
+                      @for (material of materialOptions(); track material.key) {
+                        <button
+                          type="button"
+                          class="material-option"
+                          [class.active]="
+                            selectedMaterial()?.key === material.key
+                          "
+                          (click)="selectMaterial(material.key)"
+                        >
+                          <span class="material-copy">
+                            <strong>{{ material.label }}</strong>
+                            <small>
+                              {{
+                                "SHOP.MATERIAL_COLOR_COUNT"
+                                  | translate
+                                    : { count: materialColorCount(material) }
+                              }}
+                            </small>
+                          </span>
+                          <strong>{{
+                            materialPriceLabel(material) | currency: "CHF"
+                          }}</strong>
+                        </button>
+                      }
+                    </div>
+                  }
+
+                  @if (
+                    materialOptions().length > 1 &&
+                    selectedMaterialProperties().length > 0
+                  ) {
+                    <div class="property-grid">
+                      @for (
+                        property of selectedMaterialProperties();
+                        track property.labelKey
+                      ) {
+                        <div
+                          class="property-pill"
+                          [ngClass]="'tone-' + property.tone"
+                        >
+                          <span>{{ property.labelKey | translate }}</span>
+                          <strong>{{ property.valueKey | translate }}</strong>
+                        </div>
+                      }
+                    </div>
+                  }
+
+                  <div class="color-selector-block">
+                    <div class="selector-head">
+                      <p class="panel-kicker">
+                        {{ "SHOP.SELECT_COLOR" | translate }}
+                      </p>
+                    </div>
+
+                    @if (selectedVariant(); as activeVariant) {
                      <button
                        type="button"
-                        class="variant-option"
-                        [class.active]="selectedVariant()?.id === variant.id"
-                        (click)="selectVariant(variant)"
+                        class="color-trigger"
+                        [class.open]="colorPopupOpen()"
+                        (click)="toggleColorPopup()"
                      >
-                        <span
-                          class="variant-swatch"
-                          [style.background-color]="colorHex(variant)"
-                        ></span>
-                        <span class="variant-copy">
-                          <strong>{{ colorLabel(variant) }}</strong>
-                          @if (variant.variantLabel) {
-                            <small>{{ variant.variantLabel }}</small>
-                          }
+                        <span class="color-trigger__ring">
+                          <span
+                            class="color-trigger__swatch"
+                            [style.background-color]="colorHex(activeVariant)"
+                          ></span>
+                        </span>
+
+                        <span class="color-trigger__copy">
+                          <strong>{{ colorLabel(activeVariant) }}</strong>
+                          <small>{{ selectedMaterial()?.label }}</small>
                        </span>
-                        <strong>{{
-                          variant.priceChf | currency: "CHF"
-                        }}</strong>
                      </button>
                    }
+
+                    @if (colorPopupOpen()) {
+                      <button
+                        type="button"
+                        class="color-popup-backdrop"
+                        (click)="closeColorPopup()"
+                      ></button>
+                      <div class="color-popup">
+                        <div class="color-popup__category">
+                          {{ selectedMaterial()?.label || "" | uppercase }}
+                        </div>
+
+                        <div class="color-popup__grid">
+                          @for (variant of colorOptions(); track variant.id) {
+                            <button
+                              type="button"
+                              class="color-popup__item"
+                              (click)="selectVariant(variant)"
+                            >
+                              <span
+                                class="color-popup__ring"
+                                [class.active]="
+                                  selectedVariant()?.id === variant.id
+                                "
+                              >
+                                <span
+                                  class="color-popup__swatch"
+                                  [style.background-color]="colorHex(variant)"
+                                ></span>
+                              </span>
+
+                              <span class="color-popup__name">{{
+                                colorLabel(variant)
+                              }}</span>
+                            </button>
+                          }
+                        </div>
+                      </div>
+                    }
                  </div>

                  <div class="quantity-row">
@@ -213,6 +312,51 @@
              }
            </section>
          </div>
+
+          @if (modelModalOpen()) {
+            <button
+              type="button"
+              class="model-modal-backdrop"
+              (click)="closeModelModal()"
+            ></button>
+            <div class="model-modal" role="dialog" aria-modal="true">
+              <div class="model-modal-head">
+                <div>
+                  <p class="viewer-kicker">{{ "SHOP.MODEL_3D" | translate }}</p>
+                  <h3>{{ "SHOP.MODEL_TITLE" | translate }}</h3>
+                </div>
+                <button
+                  type="button"
+                  class="model-close-btn"
+                  (click)="closeModelModal()"
+                  [attr.aria-label]="'SHOP.MODEL_CLOSE' | translate"
+                >
+                  ×
+                </button>
+              </div>
+
+              <div class="model-modal-body">
+                @if (modelLoading()) {
+                  <div class="viewer-state viewer-loading">
+                    <span class="spinner"></span>
+                    <span>{{ "SHOP.MODEL_LOADING" | translate }}</span>
+                  </div>
+                } @else if (modelError()) {
+                  <div class="viewer-state viewer-state-error">
+                    {{ "SHOP.MODEL_UNAVAILABLE" | translate }}
+                  </div>
+                } @else {
+                  @if (modelFile(); as modelPreviewFile) {
+                    <app-stl-viewer
+                      [file]="modelPreviewFile"
+                      [height]="420"
+                      [color]="selectedVariant()?.colorHex || '#facf0a'"
+                    ></app-stl-viewer>
+                  }
+                }
+              </div>
+            </div>
+          }
        }
      }
    }
--- a/frontend/src/app/features/shop/product-detail.component.scss
+++ b/frontend/src/app/features/shop/product-detail.component.scss
@@ -1,11 +1,11 @@
 .product-page {
-  padding: var(--space-8) 0 var(--space-12);
-  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 15rem);
+  padding: var(--space-5) 0 var(--space-10);
+  background: var(--color-bg);
 }

 .wrapper {
  display: grid;
-  gap: var(--space-6);
+  gap: var(--space-4);
 }

 .back-link,
@@ -13,6 +13,15 @@
  color: var(--color-text-muted);
 }

+.back-link {
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
 .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
@@ -32,26 +41,35 @@
  gap: var(--space-5);
 }

+.info-column {
+  gap: var(--space-3);
+  align-content: start;
+}
+
 .hero-media {
-  min-height: 480px;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  min-height: 420px;
+  max-height: 620px;
  overflow: hidden;
  border-radius: 1.25rem;
-  border: 1px solid rgba(16, 24, 32, 0.08);
+  border: 1px solid rgba(16, 24, 32, 0.12);
  background: #f2eee5;
-  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.05);
+  box-shadow: 0 6px 14px rgba(16, 24, 32, 0.04);
 }

 .hero-image {
  width: 100%;
  height: 100%;
  display: block;
-  object-fit: cover;
+  object-fit: contain;
+  background: #f2eee5;
 }

 .image-fallback {
  width: 100%;
  height: 100%;
-  min-height: 480px;
+  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-6);
@@ -75,25 +93,62 @@
  font-weight: 700;
 }

-.thumb-grid {
+.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;
-  gap: var(--space-3);
-  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  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;
+}
+
+.thumb-strip {
+  display: flex;
+  gap: 0.65rem;
+  overflow-x: auto;
+  padding: 0.1rem;
+  scrollbar-width: thin;
 }

 .thumb {
-  min-height: 92px;
+  flex: 0 0 92px;
+  height: 92px;
  overflow: hidden;
  border-radius: 0.85rem;
-  border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.78);
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  background: #fff;
  padding: 0;
  cursor: pointer;
 }

 .thumb.active {
-  border-color: rgba(250, 207, 10, 0.65);
-  box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.22);
+  border-color: rgba(250, 207, 10, 0.9);
+  box-shadow: 0 0 0 2px rgba(250, 207, 10, 0.2);
 }

 .thumb img,
@@ -105,15 +160,30 @@
  object-fit: cover;
 }

-.viewer-card {
-  display: block;
-}
-
-.viewer-head {
+.model-launch-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
-  margin-bottom: var(--space-4);
+  align-items: center;
+  padding: 0.9rem 1rem;
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  border-radius: 1rem;
+  background: #fff;
+}
+
+.model-open-btn {
+  height: 2.35rem;
+  padding: 0 0.95rem;
+  border-radius: 0.65rem;
+  border: 1px solid rgba(16, 24, 32, 0.18);
+  background: #fff;
+  color: var(--color-text);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.model-open-btn:hover {
+  border-color: rgba(16, 24, 32, 0.3);
 }

 .viewer-kicker,
@@ -134,6 +204,12 @@
  text-align: right;
 }

+.dimensions-inline {
+  display: flex;
+  gap: 0.8rem;
+  text-align: left;
+}
+
 .viewer-state {
  display: grid;
  place-items: center;
@@ -147,9 +223,70 @@
  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;
+}
+
 .title-block {
  display: grid;
-  gap: var(--space-3);
+  gap: 0.4rem;
 }

 .title-meta {
@@ -171,19 +308,21 @@
 }

 h1 {
-  font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem);
+  margin: 0;
+  font-size: clamp(1.9rem, 1.45vw + 1.15rem, 2.8rem);
+  line-height: 1.06;
 }

 .excerpt,
 .description-block p {
  margin: 0;
  color: var(--color-text-muted);
-  line-height: 1.7;
+  line-height: 1.6;
 }

 .purchase-card {
  display: grid;
-  gap: var(--space-5);
+  gap: 0.78rem;
 }

 .price-row,
@@ -206,52 +345,243 @@ h1 {
  font-weight: 600;
 }

-.variant-grid {
+.material-grid {
  display: grid;
-  gap: 0.7rem;
+  gap: 0.55rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }

-.variant-option {
+.material-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
-  padding: 0.9rem 1rem;
-  border-radius: 1rem;
-  border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.86);
+  padding: 0.68rem 0.8rem;
+  border-radius: 0.85rem;
+  border: 1px solid rgba(16, 24, 32, 0.14);
+  background: #fff;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.18s ease,
-    transform 0.18s ease,
+    background 0.18s ease,
    box-shadow 0.18s ease;
 }

-.variant-option.active {
-  border-color: rgba(250, 207, 10, 0.6);
-  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.08);
-  transform: translateY(-1px);
+.material-option:hover {
+  border-color: rgba(16, 24, 32, 0.26);
+  box-shadow: 0 2px 8px rgba(16, 24, 32, 0.06);
 }

-.variant-swatch {
-  width: 1.2rem;
-  height: 1.2rem;
-  border-radius: 50%;
-  border: 1px solid rgba(16, 24, 32, 0.12);
-  flex: 0 0 auto;
+.material-option.active {
+  border-color: rgba(250, 207, 10, 0.95);
+  background: rgba(250, 207, 10, 0.1);
+  box-shadow: 0 0 0 1px rgba(250, 207, 10, 0.35);
 }

-.variant-copy {
+.material-copy {
  display: grid;
-  gap: 0.12rem;
-  flex: 1;
+  gap: 0.14rem;
 }

-.variant-copy small {
+.material-copy strong {
+  font-size: 0.95rem;
+}
+
+.material-copy small {
+  font-size: 0.82rem;
  color: var(--color-text-muted);
 }

+.material-option > strong {
+  font-size: 1.04rem;
+}
+
+.property-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.property-pill {
+  display: grid;
+  gap: 0.16rem;
+  padding: 0.58rem 0.65rem;
+  border-radius: 0.8rem;
+  border: 1px solid rgba(16, 24, 32, 0.12);
+  background: #fff;
+}
+
+.property-pill span {
+  font-size: 0.62rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.property-pill strong {
+  font-size: 0.9rem;
+}
+
+.property-pill.tone-strong {
+  border-left: 3px solid rgba(4, 120, 87, 0.7);
+}
+
+.property-pill.tone-neutral {
+  border-left: 3px solid rgba(37, 99, 235, 0.7);
+}
+
+.property-pill.tone-soft {
+  border-left: 3px solid rgba(245, 158, 11, 0.7);
+}
+
+.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;
@@ -292,11 +622,21 @@ h1 {

 .description-block {
  display: grid;
-  gap: var(--space-3);
+  gap: 0.55rem;
 }

 .description-block h2 {
-  font-size: 1.2rem;
+  margin: 0;
+  font-size: 1.45rem;
+}
+
+.description-block p {
+  font-size: 1.06rem;
+  line-height: 1.75;
+}
+
+:host ::ng-deep app-card.purchase-shell .card-body {
+  padding: 0.95rem 1rem;
 }

 .state-card,
@@ -334,15 +674,28 @@ h1 {
  }
 }

+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
@media (max-width: 960px) {
  .detail-grid,
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
+
+  .property-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .purchase-card {
+    gap: 0.82rem;
+  }
 }

@media (max-width: 640px) {
-  .viewer-head,
  .price-row,
  .quantity-row {
    flex-direction: column;
@@ -351,6 +704,55 @@ h1 {

  .hero-media,
  .image-fallback {
-    min-height: 320px;
+    min-height: 300px;
+  }
+
+  .selector-head {
+    display: block;
+  }
+
+  .property-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .material-grid {
+    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
@@ -22,6 +22,20 @@ import {
  ShopProductVariantOption,
  ShopService,
 } from './services/shop.service';
+import { ShopRouteService } from './services/shop-route.service';
+
+interface ShopMaterialOption {
+  key: string;
+  label: string;
+  variants: ShopProductVariantOption[];
+  priceFromChf: number;
+}
+
+interface ShopMaterialProperty {
+  labelKey: string;
+  valueKey: string;
+  tone: 'neutral' | 'strong' | 'soft';
+}

@Component({
  selector: 'app-product-detail',
@@ -44,6 +58,7 @@ export class ProductDetailComponent {
  private readonly translate = inject(TranslateService);
  private readonly seoService = inject(SeoService);
  private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
  readonly shopService = inject(ShopService);

  readonly categorySlug = input<string | undefined>();
@@ -57,6 +72,9 @@ export class ProductDetailComponent {
  readonly quantity = signal(1);
  readonly isAddingToCart = signal(false);
  readonly addSuccess = signal(false);
+  readonly selectedMaterialKey = signal<string | null>(null);
+  readonly colorPopupOpen = signal(false);
+  readonly modelModalOpen = signal(false);

  readonly modelLoading = signal(false);
  readonly modelError = signal(false);
@@ -76,6 +94,59 @@ export class ProductDetailComponent {
    );
  });

+  readonly materialOptions = computed<ShopMaterialOption[]>(() => {
+    const product = this.product();
+    if (!product) {
+      return [];
+    }
+
+    const groups = new Map<string, ShopMaterialOption>();
+    for (const variant of product.variants) {
+      const label = this.materialLabelForVariant(variant);
+      const key = label.toLowerCase();
+      const group = groups.get(key);
+      if (group) {
+        group.variants.push(variant);
+        group.priceFromChf = Math.min(group.priceFromChf, variant.priceChf);
+        continue;
+      }
+
+      groups.set(key, {
+        key,
+        label,
+        variants: [variant],
+        priceFromChf: variant.priceChf,
+      });
+    }
+
+    return Array.from(groups.values());
+  });
+
+  readonly selectedMaterial = computed<ShopMaterialOption | null>(() => {
+    const selectedKey = this.selectedMaterialKey();
+    const materials = this.materialOptions();
+    if (!materials.length) {
+      return null;
+    }
+    return (
+      materials.find((material) => material.key === selectedKey) ??
+      materials.find((material) =>
+        material.variants.some(
+          (variant) => variant.id === this.selectedVariant()?.id,
+        ),
+      ) ??
+      materials[0]
+    );
+  });
+
+  readonly colorOptions = computed<ShopProductVariantOption[]>(
+    () => this.selectedMaterial()?.variants ?? [],
+  );
+
+  readonly selectedMaterialProperties = computed<ShopMaterialProperty[]>(() =>
+    this.materialPropertiesFor(this.selectedMaterial()?.label),
+  );
+
  readonly galleryImages = computed(() => {
    const product = this.product();
    if (!product) {
@@ -103,6 +174,15 @@ export class ProductDetailComponent {
    );
  });

+  readonly selectedImageIndex = computed(() => {
+    const images = this.galleryImages();
+    const selectedAssetId = this.selectedImageAssetId();
+    const index = images.findIndex(
+      (image) => image.mediaAssetId === selectedAssetId,
+    );
+    return index >= 0 ? index : 0;
+  });
+
  readonly selectedVariantCartQuantity = computed(() =>
    this.shopService.quantityForVariant(this.selectedVariant()?.id),
  );
@@ -131,6 +211,8 @@ export class ProductDetailComponent {
          this.error.set(null);
          this.addSuccess.set(false);
          this.modelError.set(false);
+          this.colorPopupOpen.set(false);
+          this.modelModalOpen.set(false);
        }),
        switchMap(([productSlug]) => {
          if (!productSlug) {
@@ -139,7 +221,7 @@ export class ProductDetailComponent {
            return of(null);
          }

-          return this.shopService.getProduct(productSlug).pipe(
+          return this.shopService.getProductByPublicPath(productSlug).pipe(
            catchError((error) => {
              this.product.set(null);
              this.selectedVariantId.set(null);
@@ -165,24 +247,22 @@ export class ProductDetailComponent {
        this.selectedVariantId.set(
          product.defaultVariant?.id ?? product.variants[0]?.id ?? null,
        );
+        this.selectedMaterialKey.set(
+          this.materialKeyForVariant(
+            product.defaultVariant ?? product.variants[0] ?? null,
+          ),
+        );
        this.selectedImageAssetId.set(
          product.primaryImage?.mediaAssetId ??
            product.images[0]?.mediaAssetId ??
            null,
        );
        this.quantity.set(1);
+        this.syncPublicUrl(product);
        this.applySeo(product);
-
-        if (product.model3d?.url && product.model3d.originalFilename) {
-          this.loadModelPreview(
-            product.model3d.url,
-            product.model3d.originalFilename,
-          );
-        } else {
-          this.modelFile.set(null);
-          this.modelLoading.set(false);
-          this.modelError.set(false);
-        }
+        this.modelFile.set(null);
+        this.modelLoading.set(false);
+        this.modelError.set(false);
      });
  }

@@ -201,8 +281,45 @@ export class ProductDetailComponent {
    this.selectedImageAssetId.set(mediaAssetId);
  }

+  showPreviousImage(): void {
+    const images = this.galleryImages();
+    if (images.length < 2) {
+      return;
+    }
+    const nextIndex =
+      (this.selectedImageIndex() - 1 + images.length) % images.length;
+    this.selectedImageAssetId.set(images[nextIndex].mediaAssetId);
+  }
+
+  showNextImage(): void {
+    const images = this.galleryImages();
+    if (images.length < 2) {
+      return;
+    }
+    const nextIndex = (this.selectedImageIndex() + 1) % images.length;
+    this.selectedImageAssetId.set(images[nextIndex].mediaAssetId);
+  }
+
  selectVariant(variant: ShopProductVariantOption): void {
    this.selectedVariantId.set(variant.id);
+    this.selectedMaterialKey.set(this.materialKeyForVariant(variant));
+    this.colorPopupOpen.set(false);
+    this.addSuccess.set(false);
+  }
+
+  selectMaterial(materialKey: string): void {
+    this.selectedMaterialKey.set(materialKey);
+    this.colorPopupOpen.set(false);
+    const material = this.materialOptions().find(
+      (item) => item.key === materialKey,
+    );
+    const nextVariant =
+      material?.variants.find((variant) => variant.isDefault) ??
+      material?.variants[0] ??
+      null;
+    if (nextVariant) {
+      this.selectedVariantId.set(nextVariant.id);
+    }
    this.addSuccess.set(false);
  }

@@ -263,9 +380,67 @@ export class ProductDetailComponent {
    return variant.colorHex || '#d5d8de';
  }

+  materialPriceLabel(material: ShopMaterialOption): number {
+    return material.priceFromChf;
+  }
+
+  materialColorCount(material: ShopMaterialOption): number {
+    return material.variants.length;
+  }
+
+  toggleColorPopup(): void {
+    this.colorPopupOpen.update((open) => !open);
+  }
+
+  closeColorPopup(): void {
+    this.colorPopupOpen.set(false);
+  }
+
+  openModelModal(): void {
+    const model = this.product()?.model3d;
+    if (!model) {
+      return;
+    }
+
+    this.colorPopupOpen.set(false);
+    this.modelModalOpen.set(true);
+
+    if (this.modelFile() || this.modelLoading()) {
+      return;
+    }
+
+    this.loadModelPreview(model.url, model.originalFilename);
+  }
+
+  closeModelModal(): void {
+    this.modelModalOpen.set(false);
+  }
+
+  shopRootLink(): string[] {
+    return this.shopRouteService.shopRootCommands();
+  }
+
+  categoryLink(slug: string | null | undefined): string[] {
+    return this.shopRouteService.shopRootCommands(slug);
+  }
+
  productLinkRoot(): string[] {
    const categorySlug = this.product()?.category.slug || this.categorySlug();
-    return categorySlug ? ['/shop', categorySlug] : ['/shop'];
+    return this.shopRouteService.shopRootCommands(categorySlug);
+  }
+
+  goBackToShop(): void {
+    const returnUrl =
+      typeof history.state?.shopReturnUrl === 'string'
+        ? history.state.shopReturnUrl
+        : null;
+
+    if (returnUrl && this.shopRouteService.isCatalogUrl(returnUrl)) {
+      void this.router.navigateByUrl(returnUrl);
+      return;
+    }
+
+    void this.router.navigate(this.productLinkRoot());
  }

  private loadModelPreview(urlOrPath: string, filename: string): void {
@@ -318,4 +493,142 @@ export class ProductDetailComponent {
      ogDescription: description,
    });
  }
+
+  private materialLabelForVariant(
+    variant: ShopProductVariantOption | null,
+  ): string {
+    return String(variant?.variantLabel || '').trim() || 'Standard';
+  }
+
+  private materialKeyForVariant(
+    variant: ShopProductVariantOption | null,
+  ): string | null {
+    if (!variant) {
+      return null;
+    }
+    return this.materialLabelForVariant(variant).toLowerCase();
+  }
+
+  private materialPropertiesFor(
+    materialLabel: string | null | undefined,
+  ): ShopMaterialProperty[] {
+    const normalized = String(materialLabel ?? '')
+      .trim()
+      .toUpperCase();
+
+    if (normalized.includes('ASA')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: 'SHOP.PROPERTY_RIGID',
+          tone: 'neutral',
+        },
+      ];
+    }
+
+    if (normalized.includes('PETG') || normalized.includes('PC')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'neutral',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_HIGH',
+          tone: 'strong',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: normalized.includes('PC')
+            ? 'SHOP.PROPERTY_HIGH'
+            : 'SHOP.PROPERTY_RIGID',
+          tone: 'neutral',
+        },
+      ];
+    }
+
+    if (normalized.includes('TPU')) {
+      return [
+        {
+          labelKey: 'SHOP.PROPERTY_UV',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'neutral',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_WEATHER',
+          valueKey: 'SHOP.PROPERTY_MEDIUM',
+          tone: 'soft',
+        },
+        {
+          labelKey: 'SHOP.PROPERTY_RIGIDITY',
+          valueKey: 'SHOP.PROPERTY_FLEXIBLE',
+          tone: 'soft',
+        },
+      ];
+    }
+
+    return [
+      {
+        labelKey: 'SHOP.PROPERTY_UV',
+        valueKey: 'SHOP.PROPERTY_LOW',
+        tone: 'soft',
+      },
+      {
+        labelKey: 'SHOP.PROPERTY_WEATHER',
+        valueKey: 'SHOP.PROPERTY_LOW',
+        tone: 'soft',
+      },
+      {
+        labelKey: 'SHOP.PROPERTY_RIGIDITY',
+        valueKey: 'SHOP.PROPERTY_RIGID',
+        tone: 'neutral',
+      },
+    ];
+  }
+
+  private syncPublicUrl(product: ShopProductDetail): void {
+    const currentProductSlug = this.productSlug()?.trim().toLowerCase() ?? '';
+    const targetProductSlug = this.shopRouteService.productPathSegment(product);
+    if (currentProductSlug === targetProductSlug) {
+      return;
+    }
+
+    const currentTree = this.router.parseUrl(this.router.url);
+    const targetTree = this.router.createUrlTree(
+      [
+        '/',
+        this.languageService.selectedLang(),
+        'shop',
+        'p',
+        targetProductSlug,
+      ],
+      {
+        queryParams: currentTree.queryParams,
+        fragment: currentTree.fragment ?? undefined,
+      },
+    );
+
+    if (
+      this.router.serializeUrl(targetTree) ===
+      this.router.serializeUrl(currentTree)
+    ) {
+      return;
+    }
+
+    void this.router.navigateByUrl(targetTree, {
+      replaceUrl: true,
+      state: history.state,
+    });
+  }
 }
--- a/frontend/src/app/features/shop/services/shop-route.service.ts
+++ b/frontend/src/app/features/shop/services/shop-route.service.ts
@@ -0,0 +1,107 @@
+import { Injectable } from '@angular/core';
+import { LanguageService } from '../../../core/services/language.service';
+
+export interface ShopProductRouteRef {
+  id: string | null | undefined;
+  name: string | null | undefined;
+  slug?: string | null | undefined;
+}
+
+export interface ShopProductLookup {
+  idPrefix: string | null;
+  slugHint: string | null;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShopRouteService {
+  constructor(private readonly languageService: LanguageService) {}
+
+  shopRootCommands(categorySlug?: string | null): string[] {
+    const lang = this.languageService.currentLang();
+    return categorySlug
+      ? ['/', lang, 'shop', categorySlug]
+      : ['/', lang, 'shop'];
+  }
+
+  productCommands(product: ShopProductRouteRef): string[] {
+    const lang = this.languageService.currentLang();
+    return ['/', lang, 'shop', 'p', this.productPathSegment(product)];
+  }
+
+  productPathSegment(product: ShopProductRouteRef): string {
+    const idPrefix = this.productIdPrefix(product.id);
+    const tail =
+      this.slugify(product.name) || this.slugify(product.slug) || 'product';
+
+    return idPrefix ? `${idPrefix}-${tail}` : tail;
+  }
+
+  resolveProductLookup(
+    productPathSegment: string | null | undefined,
+  ): ShopProductLookup {
+    const normalized = String(productPathSegment ?? '')
+      .trim()
+      .toLowerCase();
+    if (!normalized) {
+      return {
+        idPrefix: null,
+        slugHint: null,
+      };
+    }
+
+    const bareUuidMatch = normalized.match(/^([0-9a-f]{8})$/);
+    if (bareUuidMatch) {
+      return {
+        idPrefix: bareUuidMatch[1],
+        slugHint: null,
+      };
+    }
+
+    const publicSlugMatch = normalized.match(/^([0-9a-f]{8})-(.+)$/);
+    if (publicSlugMatch) {
+      return {
+        idPrefix: publicSlugMatch[1],
+        slugHint: this.slugify(publicSlugMatch[2]) || null,
+      };
+    }
+
+    return {
+      idPrefix: null,
+      slugHint: normalized,
+    };
+  }
+
+  isCatalogUrl(url: string | null | undefined): boolean {
+    if (!url) {
+      return false;
+    }
+
+    const normalized = url.split(/[?#]/, 1)[0] || '';
+    return /^\/(?:[a-z]{2}\/)?shop(?:\/[^/]+)?$/i.test(normalized);
+  }
+
+  slugify(value: string | null | undefined): string {
+    return String(value ?? '')
+      .normalize('NFD')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .replace(/-{2,}/g, '-');
+  }
+
+  private productIdPrefix(productId: string | null | undefined): string {
+    const normalized = String(productId ?? '')
+      .trim()
+      .toLowerCase();
+    const canonicalUuidMatch = normalized.match(/^([0-9a-f]{8})-/);
+    if (canonicalUuidMatch) {
+      return canonicalUuidMatch[1];
+    }
+
+    const compactUuidMatch = normalized.match(/^([0-9a-f]{8})/);
+    return compactUuidMatch?.[1] ?? '';
+  }
+}
--- a/frontend/src/app/features/shop/services/shop.service.spec.ts
+++ b/frontend/src/app/features/shop/services/shop.service.spec.ts
@@ -3,7 +3,12 @@ import {
  HttpClientTestingModule,
  HttpTestingController,
 } from '@angular/common/http/testing';
-import { ShopCartResponse, ShopService } from './shop.service';
+import {
+  ShopCartResponse,
+  ShopProductCatalogResponse,
+  ShopProductDetail,
+  ShopService,
+} from './shop.service';
 import { LanguageService } from '../../../core/services/language.service';

 describe('ShopService', () => {
@@ -85,6 +90,60 @@ describe('ShopService', () => {
    grandTotalChf: 36.8,
  });

+  const buildCatalog = (): ShopProductCatalogResponse => ({
+    categorySlug: null,
+    featuredOnly: false,
+    category: null,
+    products: [
+      {
+        id: '12345678-abcd-4abc-9abc-1234567890ab',
+        slug: 'desk-cable-clip',
+        name: 'Supporto cavo scrivania',
+        excerpt: 'Accessorio tecnico',
+        isFeatured: true,
+        sortOrder: 0,
+        category: {
+          id: 'category-1',
+          slug: 'accessori',
+          name: 'Accessori',
+        },
+        priceFromChf: 9.9,
+        priceToChf: 12.5,
+        defaultVariant: null,
+        primaryImage: null,
+        model3d: null,
+      },
+    ],
+  });
+
+  const buildProduct = (): ShopProductDetail => ({
+    id: '12345678-abcd-4abc-9abc-1234567890ab',
+    slug: 'desk-cable-clip',
+    name: 'Supporto cavo scrivania',
+    excerpt: 'Accessorio tecnico',
+    description: 'Descrizione prodotto',
+    seoTitle: null,
+    seoDescription: null,
+    ogTitle: null,
+    ogDescription: null,
+    indexable: true,
+    isFeatured: true,
+    sortOrder: 0,
+    category: {
+      id: 'category-1',
+      slug: 'accessori',
+      name: 'Accessori',
+    },
+    breadcrumbs: [],
+    priceFromChf: 9.9,
+    priceToChf: 12.5,
+    defaultVariant: null,
+    variants: [],
+    primaryImage: null,
+    images: [],
+    model3d: null,
+  });
+
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
@@ -143,4 +202,96 @@ describe('ShopService', () => {
    expect(service.cart()?.session?.id).toBe('session-1');
    expect(service.cartItemCount()).toBe(3);
  });
+
+  it('resolves product detail from the public product slug', () => {
+    let response: ShopProductDetail | undefined;
+
+    service
+      .getProductByPublicPath('12345678-supporto-cavo-scrivania')
+      .subscribe((product) => {
+        response = product;
+      });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+    expect(response?.name).toBe('Supporto cavo scrivania');
+  });
+
+  it('resolves product detail from uuid prefix even when slug tail does not match', () => {
+    let response: ShopProductDetail | undefined;
+
+    service
+      .getProductByPublicPath('12345678-qualunque-nome')
+      .subscribe((product) => {
+        response = product;
+      });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+  });
+
+  it('resolves product detail from bare uuid prefix without slug tail', () => {
+    let response: ShopProductDetail | undefined;
+
+    service.getProductByPublicPath('12345678').subscribe((product) => {
+      response = product;
+    });
+
+    const catalogRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url === 'http://localhost:8000/api/shop/products' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    catalogRequest.flush(buildCatalog());
+
+    const detailRequest = httpMock.expectOne((request) => {
+      return (
+        request.method === 'GET' &&
+        request.url ===
+          'http://localhost:8000/api/shop/products/desk-cable-clip' &&
+        request.params.get('lang') === 'it'
+      );
+    });
+    detailRequest.flush(buildProduct());
+
+    expect(response?.id).toBe('12345678-abcd-4abc-9abc-1234567890ab');
+  });
 });
--- a/frontend/src/app/features/shop/services/shop.service.ts
+++ b/frontend/src/app/features/shop/services/shop.service.ts
@@ -1,12 +1,13 @@
 import { computed, inject, Injectable, signal } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { map, Observable, tap } from 'rxjs';
+import { map, Observable, switchMap, tap, throwError } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import {
  PublicMediaUsageDto,
  PublicMediaVariantDto,
 } from '../../../core/services/public-media.service';
 import { LanguageService } from '../../../core/services/language.service';
+import { ShopRouteService } from './shop-route.service';

 export interface ShopCategoryRef {
  id: string;
@@ -179,6 +180,7 @@ export interface ShopCategoryNavNode {
 export class ShopService {
  private readonly http = inject(HttpClient);
  private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
  private readonly apiUrl = `${environment.apiUrl}/api/shop`;

  readonly cart = signal<ShopCartResponse | null>(null);
@@ -268,6 +270,32 @@ export class ShopService {
    );
  }

+  getProductByPublicPath(
+    productPathSegment: string,
+  ): Observable<ShopProductDetail> {
+    const lookup =
+      this.shopRouteService.resolveProductLookup(productPathSegment);
+    if (!lookup.idPrefix && lookup.slugHint) {
+      return this.getProduct(lookup.slugHint);
+    }
+
+    return this.getProductCatalog().pipe(
+      map((catalog) =>
+        catalog.products.find((product) =>
+          product.id.toLowerCase().startsWith(lookup.idPrefix ?? ''),
+        ),
+      ),
+      switchMap((product) => {
+        if (!product) {
+          return throwError(() => ({
+            status: 404,
+          }));
+        }
+        return this.getProduct(product.slug);
+      }),
+    );
+  }
+
  loadCart(): Observable<ShopCartResponse> {
    this.cartLoading.set(true);
    return this.http
--- a/frontend/src/app/features/shop/shop-page.component.html
+++ b/frontend/src/app/features/shop/shop-page.component.html
@@ -7,19 +7,14 @@
          ? selectedCategory()?.description ||
            ("SHOP.CATEGORY_META"
              | translate: { count: selectedCategory()?.productCount || 0 })
-          : ("SHOP.CUSTOM_PART_CTA" | translate)
+          : ("SHOP.SUBTITLE" | translate)
      }}
    </p>
-    <div class="ui-simple-hero__actions hero-actions ui-inline-actions">
-      <app-button variant="outline" routerLink="/contact">
-        {{ "NAV.CONTACT" | translate }}
-      </app-button>
-    </div>
  </div>

  <div class="container shop-layout">
    <aside class="shop-sidebar">
-      <app-card>
+      <app-card class="category-card">
        <div class="panel-head">
          <div>
            <p class="panel-kicker">
@@ -37,7 +32,9 @@
          [class.active]="!currentCategorySlug()"
          (click)="navigateToCategory()"
        >
-          <span>{{ "SHOP.ALL_CATEGORIES" | translate }}</span>
+          <span class="category-name">{{
+            "SHOP.ALL_CATEGORIES" | translate
+          }}</span>
        </button>

        <div class="category-list">
@@ -49,8 +46,8 @@
              [style.--depth]="node.depth"
              (click)="navigateToCategory(node.slug)"
            >
-              <span>{{ node.name }}</span>
-              <small>{{ node.productCount }}</small>
+              <span class="category-name">{{ node.name }}</span>
+              <small class="category-count">{{ node.productCount }}</small>
            </button>
          }
        </div>
@@ -227,4 +224,23 @@
      }
    </section>
  </div>
+
+  <section class="container shop-custom-cta">
+    <app-card class="shop-custom-cta-card">
+      <div class="shop-custom-cta-inner">
+        <div class="shop-custom-cta-copy">
+          <p class="panel-kicker">
+            {{ "SHOP.CUSTOM_PART_FOOTER_TITLE" | translate }}
+          </p>
+          <h2 class="shop-custom-cta-title">
+            {{ "SHOP.CUSTOM_PART_FOOTER_TEXT" | translate }}
+          </h2>
+        </div>
+
+        <app-button variant="primary" routerLink="/contact">
+          {{ "NAV.CONTACT" | translate }}
+        </app-button>
+      </div>
+    </app-card>
+  </section>
 </section>
--- a/frontend/src/app/features/shop/shop-page.component.scss
+++ b/frontend/src/app/features/shop/shop-page.component.scss
@@ -7,16 +7,12 @@
  line-height: 1.5;
 }

-.hero-actions {
-  gap: var(--space-3);
-}
-
 .shop-layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
-  padding-bottom: var(--space-12);
+  padding-bottom: var(--space-8);
  padding-top: var(--space-6);
 }

@@ -48,40 +44,70 @@
  font-size: 1.1rem;
 }

+.category-card {
+  display: block;
+}
+
 .category-list {
  display: grid;
-  gap: 0.4rem;
+  gap: 0.45rem;
+  margin-top: var(--space-2);
 }

 .category-link {
  --depth: 0;
+  position: relative;
  display: flex;
-  width: 100%;
+  width: calc(100% - (var(--depth) * 0.7rem));
+  margin-left: calc(var(--depth) * 0.7rem);
  align-items: center;
  justify-content: space-between;
-  gap: var(--space-3);
-  padding: 0.8rem 0.95rem 0.8rem calc(0.95rem + (var(--depth) * 0.95rem));
-  border: 1px solid transparent;
-  border-radius: 0.9rem;
-  background: transparent;
+  gap: var(--space-2);
+  min-height: 2.8rem;
+  padding: 0.55rem 0.75rem;
+  border: 1px solid rgba(16, 24, 32, 0.1);
+  border-radius: 0.8rem;
+  background: #fff;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition:
-    background-color 0.18s ease,
-    border-color 0.18s ease,
-    transform 0.18s ease;
+    background-color 0.16s ease,
+    border-color 0.16s ease,
+    box-shadow 0.16s ease;
+}
+
+.category-link:hover {
+  background: rgba(16, 24, 32, 0.03);
+  border-color: rgba(16, 24, 32, 0.14);
 }

-.category-link:hover,
 .category-link.active {
-  background: rgba(250, 207, 10, 0.12);
-  border-color: rgba(16, 24, 32, 0.12);
-  transform: translateX(1px);
+  background: color-mix(in srgb, var(--color-brand) 14%, #fff);
+  border-color: color-mix(in srgb, var(--color-brand) 42%, #d6dbe4);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand) 35%, #fff);
 }

-.category-link small {
+.category-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.97rem;
+  font-weight: 500;
+}
+
+.category-count {
+  display: inline-flex;
+  min-width: 1.6rem;
+  height: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(16, 24, 32, 0.06);
  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
 }

 .cart-card {
@@ -226,6 +252,32 @@
  gap: var(--space-5);
 }

+.shop-custom-cta {
+  padding-bottom: var(--space-12);
+}
+
+.shop-custom-cta-card {
+  display: block;
+}
+
+.shop-custom-cta-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-5);
+}
+
+.shop-custom-cta-copy {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.shop-custom-cta-title {
+  margin: 0;
+  font-size: clamp(1.15rem, 0.45vw + 1.02rem, 1.45rem);
+  line-height: 1.25;
+}
+
 .section-title {
  margin: 0;
  font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem);
@@ -284,6 +336,11 @@
    grid-template-columns: 1fr;
  }

+  .shop-custom-cta-inner {
+    align-items: start;
+    flex-direction: column;
+  }
+
  .catalog-head,
  .cart-line-controls,
  .panel-head {
--- a/frontend/src/app/features/shop/shop-page.component.ts
+++ b/frontend/src/app/features/shop/shop-page.component.ts
@@ -33,6 +33,7 @@ import {
  ShopProductSummary,
  ShopService,
 } from './services/shop.service';
+import { ShopRouteService } from './services/shop-route.service';

@Component({
  selector: 'app-shop-page',
@@ -55,6 +56,7 @@ export class ShopPageComponent {
  private readonly translate = inject(TranslateService);
  private readonly seoService = inject(SeoService);
  private readonly languageService = inject(LanguageService);
+  private readonly shopRouteService = inject(ShopRouteService);
  readonly shopService = inject(ShopService);

  readonly categorySlug = input<string | undefined>();
@@ -167,8 +169,7 @@ export class ShopPageComponent {
  }

  navigateToCategory(slug?: string | null): void {
-    const commands = slug ? ['/shop', slug] : ['/shop'];
-    this.router.navigate(commands);
+    this.router.navigate(this.shopRouteService.shopRootCommands(slug));
  }

  increaseQuantity(item: ShopCartItem): void {
--- a/frontend/src/app/features/shop/shop.routes.ts
+++ b/frontend/src/app/features/shop/shop.routes.ts
@@ -12,6 +12,13 @@ export const SHOP_ROUTES: Routes = [
        'Catalogo prodotti stampati in 3D, accessori tecnici e soluzioni pratiche pronte all uso.',
    },
  },
+  {
+    path: 'p/:productSlug',
+    component: ProductDetailComponent,
+    data: {
+      seoTitle: 'Prodotto | 3D fab',
+    },
+  },
  {
    path: ':categorySlug/:productSlug',
    component: ProductDetailComponent,
--- a/frontend/src/assets/i18n/de.json
+++ b/frontend/src/assets/i18n/de.json
@@ -104,7 +104,10 @@
    "WIP_CTA_CALC": "Zum Rechner",
    "WIP_RETURN_LATER": "Kommen Sie später wieder",
    "WIP_NOTE": "Wir legen Wert darauf, die Dinge richtig zu machen: In der Zwischenzeit können Sie Preis und Lieferzeit einer 3D-Datei sofort mit unserem Rechner berechnen.",
+    "CUSTOM_PART_FOOTER_TITLE": "Nicht das gefunden, was Sie suchen?",
+    "CUSTOM_PART_FOOTER_TEXT": "Kontaktieren Sie uns für individuelle Teile.",
    "ADD_CART": "In den Warenkorb",
+    "ADDING": "Wird hinzugefügt",
    "BACK": "Zurück zum Shop",
    "NOT_FOUND": "Produkt nicht gefunden.",
    "DETAILS": "Details",
@@ -112,6 +115,21 @@
    "SUCCESS_TITLE": "Zum Warenkorb hinzugefügt",
    "SUCCESS_DESC": "Das Produkt wurde erfolgreich zum Warenkorb hinzugefügt.",
    "CONTINUE": "Weiter",
+    "MODEL_OPEN": "3D-Ansicht öffnen",
+    "MODEL_CLOSE": "3D-Ansicht schließen",
+    "PREVIOUS_IMAGE": "Vorheriges Bild",
+    "NEXT_IMAGE": "Nächstes Bild",
+    "SELECT_MATERIAL": "Material",
+    "SELECT_COLOR": "Farbe",
+    "MATERIAL_COLOR_COUNT": "{{count}} Farben verfügbar",
+    "PROPERTY_UV": "UV-Beständigkeit",
+    "PROPERTY_WEATHER": "Außeneinsatz",
+    "PROPERTY_RIGIDITY": "Steifigkeit",
+    "PROPERTY_HIGH": "Hoch",
+    "PROPERTY_MEDIUM": "Mittel",
+    "PROPERTY_LOW": "Niedrig",
+    "PROPERTY_RIGID": "Steif",
+    "PROPERTY_FLEXIBLE": "Flexibel",
    "CATEGORIES": {
      "FILAMENTS": "Filamente",
      "ACCESSORIES": "Zubehör"
--- a/frontend/src/assets/i18n/en.json
+++ b/frontend/src/assets/i18n/en.json
@@ -104,7 +104,10 @@
    "WIP_CTA_CALC": "Check our calculator",
    "WIP_RETURN_LATER": "Come back soon",
    "WIP_NOTE": "We care about doing this right. In the meantime, you can get instant pricing and lead time from our calculator.",
+    "CUSTOM_PART_FOOTER_TITLE": "Can't find what you're looking for?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contact us for custom parts.",
    "ADD_CART": "Add to Cart",
+    "ADDING": "Adding to cart",
    "BACK": "Back to Shop",
    "NOT_FOUND": "Product not found.",
    "DETAILS": "Details",
@@ -112,6 +115,21 @@
    "SUCCESS_TITLE": "Added to cart",
    "SUCCESS_DESC": "The product has been added to the cart.",
    "CONTINUE": "Continue",
+    "MODEL_OPEN": "Open 3D view",
+    "MODEL_CLOSE": "Close 3D view",
+    "PREVIOUS_IMAGE": "Previous image",
+    "NEXT_IMAGE": "Next image",
+    "SELECT_MATERIAL": "Material",
+    "SELECT_COLOR": "Color",
+    "MATERIAL_COLOR_COUNT": "{{count}} colors available",
+    "PROPERTY_UV": "UV resistance",
+    "PROPERTY_WEATHER": "Outdoor use",
+    "PROPERTY_RIGIDITY": "Rigidity",
+    "PROPERTY_HIGH": "High",
+    "PROPERTY_MEDIUM": "Medium",
+    "PROPERTY_LOW": "Low",
+    "PROPERTY_RIGID": "Rigid",
+    "PROPERTY_FLEXIBLE": "Flexible",
    "CATEGORIES": {
      "FILAMENTS": "Filaments",
      "ACCESSORIES": "Accessories"
--- a/frontend/src/assets/i18n/fr.json
+++ b/frontend/src/assets/i18n/fr.json
@@ -161,7 +161,10 @@
    "WIP_CTA_CALC": "Aller au calculateur",
    "WIP_RETURN_LATER": "Revenez dans un moment",
    "WIP_NOTE": "Nous tenons à bien faire les choses : en attendant, vous pouvez calculer immédiatement prix et délais d'un fichier 3D avec notre calculateur.",
+    "CUSTOM_PART_FOOTER_TITLE": "Vous ne trouvez pas ce que vous cherchez ?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contactez-nous pour des pièces personnalisées.",
    "ADD_CART": "Ajouter au panier",
+    "ADDING": "Ajout en cours",
    "BACK": "Retour à la boutique",
    "NOT_FOUND": "Produit introuvable.",
    "DETAILS": "Détails",
@@ -169,6 +172,21 @@
    "SUCCESS_TITLE": "Ajouté au panier",
    "SUCCESS_DESC": "Le produit a été ajouté au panier avec succès.",
    "CONTINUE": "Continuer",
+    "MODEL_OPEN": "Ouvrir la vue 3D",
+    "MODEL_CLOSE": "Fermer la vue 3D",
+    "PREVIOUS_IMAGE": "Image précédente",
+    "NEXT_IMAGE": "Image suivante",
+    "SELECT_MATERIAL": "Matériau",
+    "SELECT_COLOR": "Couleur",
+    "MATERIAL_COLOR_COUNT": "{{count}} couleurs disponibles",
+    "PROPERTY_UV": "Résistance UV",
+    "PROPERTY_WEATHER": "Usage extérieur",
+    "PROPERTY_RIGIDITY": "Rigidité",
+    "PROPERTY_HIGH": "Élevée",
+    "PROPERTY_MEDIUM": "Moyenne",
+    "PROPERTY_LOW": "Faible",
+    "PROPERTY_RIGID": "Rigide",
+    "PROPERTY_FLEXIBLE": "Flexible",
    "CATEGORIES": {
      "FILAMENTS": "Filaments",
      "ACCESSORIES": "Accessoires"
--- a/frontend/src/assets/i18n/it.json
+++ b/frontend/src/assets/i18n/it.json
@@ -178,6 +178,8 @@
    "CATALOG_TITLE": "Tutti i prodotti",
    "CATALOG_META_DESCRIPTION": "Scopri prodotti stampati in 3D, accessori tecnici e soluzioni pronte all uso con lo stesso checkout del calcolatore.",
    "CUSTOM_PART_CTA": "Non trovi quello che cerchi? Richiedi un pezzo personalizzato.",
+    "CUSTOM_PART_FOOTER_TITLE": "Non trovi quello che cerchi?",
+    "CUSTOM_PART_FOOTER_TEXT": "Contattaci per pezzi personalizzati.",
    "CATEGORY_META": "{{count}} prodotti disponibili in questa categoria",
    "CATEGORY_PANEL_KICKER": "Navigazione",
    "CATEGORY_PANEL_TITLE": "Categorie",
@@ -194,11 +196,25 @@
    "EXCERPT_FALLBACK": "Scheda prodotto in preparazione.",
    "MODEL_3D": "3D preview",
    "MODEL_TITLE": "Anteprima del modello",
+    "MODEL_OPEN": "Apri vista 3D",
+    "MODEL_CLOSE": "Chiudi vista 3D",
    "MODEL_LOADING": "Stiamo caricando il modello 3D.",
    "MODEL_UNAVAILABLE": "Preview 3D non disponibile.",
+    "PREVIOUS_IMAGE": "Immagine precedente",
+    "NEXT_IMAGE": "Immagine successiva",
    "BREADCRUMB_ROOT": "Shop",
+    "SELECT_MATERIAL": "Materiale",
    "SELECT_COLOR": "Colore",
+    "MATERIAL_COLOR_COUNT": "{{count}} colori disponibili",
    "VARIANT": "Variante",
+    "PROPERTY_UV": "Resistenza UV",
+    "PROPERTY_WEATHER": "Uso esterno",
+    "PROPERTY_RIGIDITY": "Rigidità",
+    "PROPERTY_HIGH": "Alta",
+    "PROPERTY_MEDIUM": "Media",
+    "PROPERTY_LOW": "Bassa",
+    "PROPERTY_RIGID": "Rigido",
+    "PROPERTY_FLEXIBLE": "Flessibile",
    "QUANTITY": "Quantità",
    "GO_TO_CHECKOUT": "Vai al checkout",
    "IN_CART_SHORT": "Nel carrello x{{count}}",
Author	SHA1	Message	Date
printcalc-ci	52c6239f6d	style: apply prettier formatting	2026-03-10 14:23:52 +00:00
Joe Küng	c007cee093	feat(front-end): shop category ui All checks were successful Build and Deploy / test-backend (push) Successful in 27s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / prettier-autofix (pull_request) Successful in 12s Details PR Checks / security-sast (pull_request) Successful in 31s Details Build and Deploy / build-and-push (push) Successful in 26s Details PR Checks / test-frontend (pull_request) Successful in 1m3s Details Build and Deploy / deploy (push) Successful in 13s Details	2026-03-10 15:23:08 +01:00
Joe Küng	d011268d20	feat(front-end): shop category ui Some checks failed Build and Deploy / test-backend (push) Successful in 28s Details Build and Deploy / test-frontend (push) Successful in 1m4s Details Build and Deploy / build-and-push (push) Failing after 44s Details Build and Deploy / deploy (push) Has been skipped Details	2026-03-10 15:14:10 +01:00
Joe Küng	126d3ef4c4	feat(back-end front-end): shop route	2026-03-10 15:04:56 +01:00
Joe Küng	3f228ef6e2	feat(back-end front-end): shop feature	2026-03-10 15:04:49 +01:00
Joe Küng	8733184dc5	Merge branch 'feat/shop' into dev All checks were successful Build and Deploy / test-backend (push) Successful in 31s Details Build and Deploy / test-frontend (push) Successful in 1m4s Details Build and Deploy / build-and-push (push) Successful in 38s Details Build and Deploy / deploy (push) Successful in 10s Details	2026-03-10 12:42:42 +01:00
Joe Küng	6d491eb694	Merge pull request 'feat/shop' (#36 ) from feat/shop into dev All checks were successful Build and Deploy / test-backend (push) Successful in 27s Details Build and Deploy / test-frontend (push) Successful in 1m3s Details Build and Deploy / build-and-push (push) Successful in 50s Details Build and Deploy / deploy (push) Successful in 11s Details Reviewed-on: #36	2026-03-10 11:16:22 +01:00