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

# Conflicts:
#	frontend/src/app/features/shop/components/product-card/product-card.component.scss
#	frontend/src/app/features/shop/product-detail.component.scss
#	frontend/src/app/features/shop/shop-page.component.html
#	frontend/src/app/features/shop/shop-page.component.scss
#	frontend/src/app/features/shop/shop-page.component.ts

.gitignore

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

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

@@ -12,8 +12,20 @@ public class AdminShopProductDto {
     private String categorySlug;
     private String slug;
     private String name;
+    private String nameIt;
+    private String nameEn;
+    private String nameDe;
+    private String nameFr;
     private String excerpt;
+    private String excerptIt;
+    private String excerptEn;
+    private String excerptDe;
+    private String excerptFr;
     private String description;
+    private String descriptionIt;
+    private String descriptionEn;
+    private String descriptionDe;
+    private String descriptionFr;
     private String seoTitle;
     private String seoDescription;
     private String ogTitle;
@@ -83,6 +95,38 @@ public class AdminShopProductDto {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -91,6 +135,38 @@ public class AdminShopProductDto {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -99,6 +175,38 @@ public class AdminShopProductDto {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }

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

@@ -7,8 +7,20 @@ public class AdminUpsertShopProductRequest {
     private UUID categoryId;
     private String slug;
     private String name;
+    private String nameIt;
+    private String nameEn;
+    private String nameDe;
+    private String nameFr;
     private String excerpt;
+    private String excerptIt;
+    private String excerptEn;
+    private String excerptDe;
+    private String excerptFr;
     private String description;
+    private String descriptionIt;
+    private String descriptionEn;
+    private String descriptionDe;
+    private String descriptionFr;
     private String seoTitle;
     private String seoDescription;
     private String ogTitle;
@@ -43,6 +55,38 @@ public class AdminUpsertShopProductRequest {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -51,6 +95,38 @@ public class AdminUpsertShopProductRequest {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -59,6 +135,38 @@ public class AdminUpsertShopProductRequest {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }

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

@@ -15,6 +15,7 @@ import jakarta.persistence.Table;
 import org.hibernate.annotations.ColumnDefault;
 
 import java.time.OffsetDateTime;
+import java.util.List;
 import java.util.UUID;
 
 @Entity
@@ -23,6 +24,8 @@ import java.util.UUID;
         @Index(name = "ix_shop_product_featured_sort", columnList = "is_featured, is_active, sort_order")
 })
 public class ShopProduct {
+    public static final List<String> SUPPORTED_LANGUAGES = List.of("it", "en", "de", "fr");
+
     @Id
     @GeneratedValue(strategy = GenerationType.AUTO)
     @Column(name = "shop_product_id", nullable = false)
@@ -38,12 +41,48 @@ public class ShopProduct {
     @Column(name = "name", nullable = false, length = Integer.MAX_VALUE)
     private String name;
 
+    @Column(name = "name_it", length = Integer.MAX_VALUE)
+    private String nameIt;
+
+    @Column(name = "name_en", length = Integer.MAX_VALUE)
+    private String nameEn;
+
+    @Column(name = "name_de", length = Integer.MAX_VALUE)
+    private String nameDe;
+
+    @Column(name = "name_fr", length = Integer.MAX_VALUE)
+    private String nameFr;
+
     @Column(name = "excerpt", length = Integer.MAX_VALUE)
     private String excerpt;
 
+    @Column(name = "excerpt_it", length = Integer.MAX_VALUE)
+    private String excerptIt;
+
+    @Column(name = "excerpt_en", length = Integer.MAX_VALUE)
+    private String excerptEn;
+
+    @Column(name = "excerpt_de", length = Integer.MAX_VALUE)
+    private String excerptDe;
+
+    @Column(name = "excerpt_fr", length = Integer.MAX_VALUE)
+    private String excerptFr;
+
     @Column(name = "description", length = Integer.MAX_VALUE)
     private String description;
 
+    @Column(name = "description_it", length = Integer.MAX_VALUE)
+    private String descriptionIt;
+
+    @Column(name = "description_en", length = Integer.MAX_VALUE)
+    private String descriptionEn;
+
+    @Column(name = "description_de", length = Integer.MAX_VALUE)
+    private String descriptionDe;
+
+    @Column(name = "description_fr", length = Integer.MAX_VALUE)
+    private String descriptionFr;
+
     @Column(name = "seo_title", length = Integer.MAX_VALUE)
     private String seoTitle;
 
@@ -152,6 +191,38 @@ public class ShopProduct {
         this.name = name;
     }
 
+    public String getNameIt() {
+        return nameIt;
+    }
+
+    public void setNameIt(String nameIt) {
+        this.nameIt = nameIt;
+    }
+
+    public String getNameEn() {
+        return nameEn;
+    }
+
+    public void setNameEn(String nameEn) {
+        this.nameEn = nameEn;
+    }
+
+    public String getNameDe() {
+        return nameDe;
+    }
+
+    public void setNameDe(String nameDe) {
+        this.nameDe = nameDe;
+    }
+
+    public String getNameFr() {
+        return nameFr;
+    }
+
+    public void setNameFr(String nameFr) {
+        this.nameFr = nameFr;
+    }
+
     public String getExcerpt() {
         return excerpt;
     }
@@ -160,6 +231,38 @@ public class ShopProduct {
         this.excerpt = excerpt;
     }
 
+    public String getExcerptIt() {
+        return excerptIt;
+    }
+
+    public void setExcerptIt(String excerptIt) {
+        this.excerptIt = excerptIt;
+    }
+
+    public String getExcerptEn() {
+        return excerptEn;
+    }
+
+    public void setExcerptEn(String excerptEn) {
+        this.excerptEn = excerptEn;
+    }
+
+    public String getExcerptDe() {
+        return excerptDe;
+    }
+
+    public void setExcerptDe(String excerptDe) {
+        this.excerptDe = excerptDe;
+    }
+
+    public String getExcerptFr() {
+        return excerptFr;
+    }
+
+    public void setExcerptFr(String excerptFr) {
+        this.excerptFr = excerptFr;
+    }
+
     public String getDescription() {
         return description;
     }
@@ -168,6 +271,38 @@ public class ShopProduct {
         this.description = description;
     }
 
+    public String getDescriptionIt() {
+        return descriptionIt;
+    }
+
+    public void setDescriptionIt(String descriptionIt) {
+        this.descriptionIt = descriptionIt;
+    }
+
+    public String getDescriptionEn() {
+        return descriptionEn;
+    }
+
+    public void setDescriptionEn(String descriptionEn) {
+        this.descriptionEn = descriptionEn;
+    }
+
+    public String getDescriptionDe() {
+        return descriptionDe;
+    }
+
+    public void setDescriptionDe(String descriptionDe) {
+        this.descriptionDe = descriptionDe;
+    }
+
+    public String getDescriptionFr() {
+        return descriptionFr;
+    }
+
+    public void setDescriptionFr(String descriptionFr) {
+        this.descriptionFr = descriptionFr;
+    }
+
     public String getSeoTitle() {
         return seoTitle;
     }
@@ -247,4 +382,94 @@ public class ShopProduct {
     public void setUpdatedAt(OffsetDateTime updatedAt) {
         this.updatedAt = updatedAt;
     }
+
+    public String getNameForLanguage(String language) {
+        return resolveLocalizedValue(language, name, nameIt, nameEn, nameDe, nameFr);
+    }
+
+    public void setNameForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> nameIt = value;
+            case "en" -> nameEn = value;
+            case "de" -> nameDe = value;
+            case "fr" -> nameFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getExcerptForLanguage(String language) {
+        return resolveLocalizedValue(language, excerpt, excerptIt, excerptEn, excerptDe, excerptFr);
+    }
+
+    public void setExcerptForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> excerptIt = value;
+            case "en" -> excerptEn = value;
+            case "de" -> excerptDe = value;
+            case "fr" -> excerptFr = value;
+            default -> {
+            }
+        }
+    }
+
+    public String getDescriptionForLanguage(String language) {
+        return resolveLocalizedValue(language, description, descriptionIt, descriptionEn, descriptionDe, descriptionFr);
+    }
+
+    public void setDescriptionForLanguage(String language, String value) {
+        switch (normalizeLanguage(language)) {
+            case "it" -> descriptionIt = value;
+            case "en" -> descriptionEn = value;
+            case "de" -> descriptionDe = value;
+            case "fr" -> descriptionFr = value;
+            default -> {
+            }
+        }
+    }
+
+    private String resolveLocalizedValue(String language,
+                                         String fallback,
+                                         String valueIt,
+                                         String valueEn,
+                                         String valueDe,
+                                         String valueFr) {
+        String normalizedLanguage = normalizeLanguage(language);
+        String preferred = switch (normalizedLanguage) {
+            case "it" -> valueIt;
+            case "en" -> valueEn;
+            case "de" -> valueDe;
+            case "fr" -> valueFr;
+            default -> null;
+        };
+        String resolved = firstNonBlank(preferred, fallback);
+        if (resolved != null) {
+            return resolved;
+        }
+        return firstNonBlank(valueIt, valueEn, valueDe, valueFr);
+    }
+
+    private String normalizeLanguage(String language) {
+        if (language == null) {
+            return "";
+        }
+        String normalized = language.trim().toLowerCase();
+        int separatorIndex = normalized.indexOf('-');
+        if (separatorIndex > 0) {
+            normalized = normalized.substring(0, separatorIndex);
+        }
+        return normalized;
+    }
+
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
 }

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

@@ -22,6 +22,7 @@ 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.springframework.beans.factory.annotation.Value;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -75,6 +76,7 @@ public class AdminShopProductControllerService {
     private final ShopStorageService shopStorageService;
     private final SlicerService slicerService;
     private final ClamAVService clamAVService;
+    private final long maxModelFileSizeBytes;
 
     public AdminShopProductControllerService(ShopProductRepository shopProductRepository,
                                              ShopCategoryRepository shopCategoryRepository,
@@ -86,7 +88,8 @@ public class AdminShopProductControllerService {
                                              AdminMediaControllerService adminMediaControllerService,
                                              ShopStorageService shopStorageService,
                                              SlicerService slicerService,
-                                             ClamAVService clamAVService) {
+                                             ClamAVService clamAVService,
+                                             @Value("${shop.model.max-file-size-bytes:104857600}") long maxModelFileSizeBytes) {
         this.shopProductRepository = shopProductRepository;
         this.shopCategoryRepository = shopCategoryRepository;
         this.shopProductVariantRepository = shopProductVariantRepository;
@@ -98,6 +101,7 @@ public class AdminShopProductControllerService {
         this.shopStorageService = shopStorageService;
         this.slicerService = slicerService;
         this.clamAVService = clamAVService;
+        this.maxModelFileSizeBytes = maxModelFileSizeBytes;
     }
 
     public List<AdminShopProductDto> getProducts() {
@@ -113,13 +117,13 @@ public class AdminShopProductControllerService {
     @Transactional
     public AdminShopProductDto createProduct(AdminUpsertShopProductRequest payload) {
         ensurePayload(payload);
-        String normalizedName = normalizeRequired(payload.getName(), "Product name is required");
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
         ensureSlugAvailable(normalizedSlug, null);
 
         ShopProduct product = new ShopProduct();
         product.setCreatedAt(OffsetDateTime.now());
-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
         ShopProduct saved = shopProductRepository.save(product);
         syncVariants(saved, payload.getVariants());
         return getProduct(saved.getId());
@@ -131,11 +135,11 @@ public class AdminShopProductControllerService {
         ShopProduct product = shopProductRepository.findById(productId)
                 .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Shop product not found"));
 
-        String normalizedName = normalizeRequired(payload.getName(), "Product name is required");
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
         ensureSlugAvailable(normalizedSlug, productId);
 
-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
         ShopProduct saved = shopProductRepository.save(product);
         syncVariants(saved, payload.getVariants());
         return getProduct(saved.getId());
@@ -291,14 +295,26 @@ public class AdminShopProductControllerService {
 
     private void applyProductPayload(ShopProduct product,
                                      AdminUpsertShopProductRequest payload,
-                                     String normalizedName,
+                                     LocalizedProductContent localizedContent,
                                      String normalizedSlug,
                                      ShopCategory category) {
         product.setCategory(category);
         product.setSlug(normalizedSlug);
-        product.setName(normalizedName);
+        product.setName(localizedContent.defaultName());
-        product.setExcerpt(normalizeOptional(payload.getExcerpt()));
+        product.setNameIt(localizedContent.names().get("it"));
-        product.setDescription(normalizeOptional(payload.getDescription()));
+        product.setNameEn(localizedContent.names().get("en"));
+        product.setNameDe(localizedContent.names().get("de"));
+        product.setNameFr(localizedContent.names().get("fr"));
+        product.setExcerpt(localizedContent.defaultExcerpt());
+        product.setExcerptIt(localizedContent.excerpts().get("it"));
+        product.setExcerptEn(localizedContent.excerpts().get("en"));
+        product.setExcerptDe(localizedContent.excerpts().get("de"));
+        product.setExcerptFr(localizedContent.excerpts().get("fr"));
+        product.setDescription(localizedContent.defaultDescription());
+        product.setDescriptionIt(localizedContent.descriptions().get("it"));
+        product.setDescriptionEn(localizedContent.descriptions().get("en"));
+        product.setDescriptionDe(localizedContent.descriptions().get("de"));
+        product.setDescriptionFr(localizedContent.descriptions().get("fr"));
         product.setSeoTitle(normalizeOptional(payload.getSeoTitle()));
         product.setSeoDescription(normalizeOptional(payload.getSeoDescription()));
         product.setOgTitle(normalizeOptional(payload.getOgTitle()));
@@ -436,8 +452,20 @@ public class AdminShopProductControllerService {
         dto.setCategorySlug(product.getCategory() != null ? product.getCategory().getSlug() : null);
         dto.setSlug(product.getSlug());
         dto.setName(product.getName());
+        dto.setNameIt(product.getNameIt());
+        dto.setNameEn(product.getNameEn());
+        dto.setNameDe(product.getNameDe());
+        dto.setNameFr(product.getNameFr());
         dto.setExcerpt(product.getExcerpt());
+        dto.setExcerptIt(product.getExcerptIt());
+        dto.setExcerptEn(product.getExcerptEn());
+        dto.setExcerptDe(product.getExcerptDe());
+        dto.setExcerptFr(product.getExcerptFr());
         dto.setDescription(product.getDescription());
+        dto.setDescriptionIt(product.getDescriptionIt());
+        dto.setDescriptionEn(product.getDescriptionEn());
+        dto.setDescriptionDe(product.getDescriptionDe());
+        dto.setDescriptionFr(product.getDescriptionFr());
         dto.setSeoTitle(product.getSeoTitle());
         dto.setSeoDescription(product.getSeoDescription());
         dto.setOgTitle(product.getOgTitle());
@@ -523,6 +551,61 @@ public class AdminShopProductControllerService {
         }
     }
 
+    private LocalizedProductContent normalizeLocalizedProductContent(AdminUpsertShopProductRequest payload) {
+        String legacyName = normalizeOptional(payload.getName());
+        String fallbackName = firstNonBlank(
+                legacyName,
+                normalizeOptional(payload.getNameIt()),
+                normalizeOptional(payload.getNameEn()),
+                normalizeOptional(payload.getNameDe()),
+                normalizeOptional(payload.getNameFr())
+        );
+        if (fallbackName == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Product name is required");
+        }
+
+        Map<String, String> names = new LinkedHashMap<>();
+        names.put("it", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameIt()), fallbackName), "Italian product name is required"));
+        names.put("en", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameEn()), fallbackName), "English product name is required"));
+        names.put("de", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameDe()), fallbackName), "German product name is required"));
+        names.put("fr", normalizeRequired(firstNonBlank(normalizeOptional(payload.getNameFr()), fallbackName), "French product name is required"));
+
+        String fallbackExcerpt = firstNonBlank(
+                normalizeOptional(payload.getExcerpt()),
+                normalizeOptional(payload.getExcerptIt()),
+                normalizeOptional(payload.getExcerptEn()),
+                normalizeOptional(payload.getExcerptDe()),
+                normalizeOptional(payload.getExcerptFr())
+        );
+        Map<String, String> excerpts = new LinkedHashMap<>();
+        excerpts.put("it", firstNonBlank(normalizeOptional(payload.getExcerptIt()), fallbackExcerpt));
+        excerpts.put("en", firstNonBlank(normalizeOptional(payload.getExcerptEn()), fallbackExcerpt));
+        excerpts.put("de", firstNonBlank(normalizeOptional(payload.getExcerptDe()), fallbackExcerpt));
+        excerpts.put("fr", firstNonBlank(normalizeOptional(payload.getExcerptFr()), fallbackExcerpt));
+
+        String fallbackDescription = firstNonBlank(
+                normalizeOptional(payload.getDescription()),
+                normalizeOptional(payload.getDescriptionIt()),
+                normalizeOptional(payload.getDescriptionEn()),
+                normalizeOptional(payload.getDescriptionDe()),
+                normalizeOptional(payload.getDescriptionFr())
+        );
+        Map<String, String> descriptions = new LinkedHashMap<>();
+        descriptions.put("it", firstNonBlank(normalizeOptional(payload.getDescriptionIt()), fallbackDescription));
+        descriptions.put("en", firstNonBlank(normalizeOptional(payload.getDescriptionEn()), fallbackDescription));
+        descriptions.put("de", firstNonBlank(normalizeOptional(payload.getDescriptionDe()), fallbackDescription));
+        descriptions.put("fr", firstNonBlank(normalizeOptional(payload.getDescriptionFr()), fallbackDescription));
+
+        return new LocalizedProductContent(
+                names.get("it"),
+                firstNonBlank(excerpts.get("it"), fallbackExcerpt),
+                firstNonBlank(descriptions.get("it"), fallbackDescription),
+                names,
+                excerpts,
+                descriptions
+        );
+    }
+
     private void ensureSlugAvailable(String slug, UUID currentProductId) {
         shopProductRepository.findBySlugIgnoreCase(slug).ifPresent(existing -> {
             if (currentProductId == null || !existing.getId().equals(currentProductId)) {
@@ -547,6 +630,18 @@ public class AdminShopProductControllerService {
         return normalized.isBlank() ? null : normalized;
     }
 
+    private String firstNonBlank(String... values) {
+        if (values == null) {
+            return null;
+        }
+        for (String value : values) {
+            if (value != null && !value.isBlank()) {
+                return value;
+            }
+        }
+        return null;
+    }
+
     private String normalizeAndValidateSlug(String slug, String fallbackName) {
         String source = normalizeOptional(slug);
         if (source == null) {
@@ -579,6 +674,9 @@ public class AdminShopProductControllerService {
         if (file == null || file.isEmpty()) {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "3D model file is required");
         }
+        if (maxModelFileSizeBytes > 0 && file.getSize() > maxModelFileSizeBytes) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "3D model file exceeds size limit");
+        }
         String extension = resolveExtension(sanitizeOriginalFilename(file.getOriginalFilename()));
         if (!SUPPORTED_MODEL_EXTENSIONS.contains(extension)) {
             throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Unsupported 3D model type. Allowed: stl, 3mf");
@@ -683,4 +781,14 @@ public class AdminShopProductControllerService {
 
     public record ProductModelDownload(Path path, String filename, String mimeType) {
     }
+
+    private record LocalizedProductContent(
+            String defaultName,
+            String defaultExcerpt,
+            String defaultDescription,
+            Map<String, String> names,
+            Map<String, String> excerpts,
+            Map<String, String> descriptions
+    ) {
+    }
 }

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

@@ -99,7 +99,7 @@ public class PublicShopCatalogService {
         List<ShopProductSummaryDto> products = productContext.entries().stream()
                 .filter(entry -> allowedCategoryIds.contains(entry.product().getCategory().getId()))
                 .filter(entry -> !Boolean.TRUE.equals(featuredOnly) || Boolean.TRUE.equals(entry.product().getIsFeatured()))
-                .map(entry -> toProductSummaryDto(entry, productContext.productMediaBySlug()))
+                .map(entry -> toProductSummaryDto(entry, productContext.productMediaBySlug(), language))
                 .toList();
 
         ShopCategoryDetailDto selectedCategoryDetail = selectedCategory != null
@@ -128,7 +128,7 @@ public class PublicShopCatalogService {
             throw new ResponseStatusException(HttpStatus.NOT_FOUND, "Product not found");
         }
 
-        return toProductDetailDto(entry, productContext.productMediaBySlug());
+        return toProductDetailDto(entry, productContext.productMediaBySlug(), language);
     }
 
     public ProductModelDownload getProductModelDownload(String slug) {
@@ -348,13 +348,14 @@ public class PublicShopCatalogService {
     }
 
     private ShopProductSummaryDto toProductSummaryDto(ProductEntry entry,
-                                                      Map<String, List<PublicMediaUsageDto>> productMediaBySlug) {
+                                                      Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+                                                      String language) {
         List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
         return new ShopProductSummaryDto(
                 entry.product().getId(),
                 entry.product().getSlug(),
-                entry.product().getName(),
+                entry.product().getNameForLanguage(language),
-                entry.product().getExcerpt(),
+                entry.product().getExcerptForLanguage(language),
                 entry.product().getIsFeatured(),
                 entry.product().getSortOrder(),
                 new ShopCategoryRefDto(
@@ -371,14 +372,15 @@ public class PublicShopCatalogService {
     }
 
     private ShopProductDetailDto toProductDetailDto(ProductEntry entry,
-                                                    Map<String, List<PublicMediaUsageDto>> productMediaBySlug) {
+                                                    Map<String, List<PublicMediaUsageDto>> productMediaBySlug,
+                                                    String language) {
         List<PublicMediaUsageDto> images = productMediaBySlug.getOrDefault(productMediaUsageKey(entry.product()), List.of());
         return new ShopProductDetailDto(
                 entry.product().getId(),
                 entry.product().getSlug(),
-                entry.product().getName(),
+                entry.product().getNameForLanguage(language),
-                entry.product().getExcerpt(),
+                entry.product().getExcerptForLanguage(language),
-                entry.product().getDescription(),
+                entry.product().getDescriptionForLanguage(language),
                 entry.product().getSeoTitle(),
                 entry.product().getSeoDescription(),
                 entry.product().getOgTitle(),

backend/src/main/resources/application.properties

@@ -31,6 +31,7 @@ media.storage.root=${MEDIA_STORAGE_ROOT:storage_media}
 media.public.base-url=${MEDIA_PUBLIC_BASE_URL:http://localhost:8080/media}
 media.ffmpeg.path=${MEDIA_FFMPEG_PATH:ffmpeg}
 media.upload.max-file-size-bytes=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:26214400}
+shop.model.max-file-size-bytes=${SHOP_MODEL_MAX_FILE_SIZE_BYTES:104857600}
 shop.storage.root=${SHOP_STORAGE_ROOT:storage_shop}
 shop.cart.cookie.ttl-days=${SHOP_CART_COOKIE_TTL_DAYS:30}
 shop.cart.cookie.secure=${SHOP_CART_COOKIE_SECURE:false}

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

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

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

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

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

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

db.sql

@@ -1040,8 +1040,20 @@ CREATE TABLE IF NOT EXISTS shop_product
     shop_category_id    uuid        NOT NULL REFERENCES shop_category (shop_category_id),
     slug                text        NOT NULL UNIQUE,
     name                text        NOT NULL,
+    name_it             text,
+    name_en             text,
+    name_de             text,
+    name_fr             text,
     excerpt             text,
+    excerpt_it          text,
+    excerpt_en          text,
+    excerpt_de          text,
+    excerpt_fr          text,
     description         text,
+    description_it      text,
+    description_en      text,
+    description_de      text,
+    description_fr      text,
     seo_title           text,
     seo_description     text,
     og_title            text,
@@ -1060,6 +1072,74 @@ CREATE INDEX IF NOT EXISTS ix_shop_product_category_active_sort
 CREATE INDEX IF NOT EXISTS ix_shop_product_featured_sort
     ON shop_product (is_featured, is_active, sort_order, created_at DESC);
 
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS name_fr text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS excerpt_fr text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_it text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_en text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_de text;
+
+ALTER TABLE shop_product
+    ADD COLUMN IF NOT EXISTS description_fr text;
+
+UPDATE shop_product
+SET
+    name_it = COALESCE(NULLIF(btrim(name_it), ''), name),
+    name_en = COALESCE(NULLIF(btrim(name_en), ''), name),
+    name_de = COALESCE(NULLIF(btrim(name_de), ''), name),
+    name_fr = COALESCE(NULLIF(btrim(name_fr), ''), name),
+    excerpt_it = COALESCE(NULLIF(btrim(excerpt_it), ''), excerpt),
+    excerpt_en = COALESCE(NULLIF(btrim(excerpt_en), ''), excerpt),
+    excerpt_de = COALESCE(NULLIF(btrim(excerpt_de), ''), excerpt),
+    excerpt_fr = COALESCE(NULLIF(btrim(excerpt_fr), ''), excerpt),
+    description_it = COALESCE(NULLIF(btrim(description_it), ''), description),
+    description_en = COALESCE(NULLIF(btrim(description_en), ''), description),
+    description_de = COALESCE(NULLIF(btrim(description_de), ''), description),
+    description_fr = COALESCE(NULLIF(btrim(description_fr), ''), description)
+WHERE
+    NULLIF(btrim(name_it), '') IS NULL
+    OR NULLIF(btrim(name_en), '') IS NULL
+    OR NULLIF(btrim(name_de), '') IS NULL
+    OR NULLIF(btrim(name_fr), '') IS NULL
+    OR (excerpt IS NOT NULL AND (
+        NULLIF(btrim(excerpt_it), '') IS NULL
+        OR NULLIF(btrim(excerpt_en), '') IS NULL
+        OR NULLIF(btrim(excerpt_de), '') IS NULL
+        OR NULLIF(btrim(excerpt_fr), '') IS NULL
+    ))
+    OR (description IS NOT NULL AND (
+        NULLIF(btrim(description_it), '') IS NULL
+        OR NULLIF(btrim(description_en), '') IS NULL
+        OR NULLIF(btrim(description_de), '') IS NULL
+        OR NULLIF(btrim(description_fr), '') IS NULL
+    ));
+
 CREATE TABLE IF NOT EXISTS shop_product_variant
 (
     shop_product_variant_id uuid PRIMARY KEY     DEFAULT gen_random_uuid(),

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,8 @@
-<section class="admin-dashboard ui-section-card">
+<section class="admin-dashboard section-card">
-  <header class="dashboard-header ui-section-header">
+  <header class="dashboard-header section-header">
-    <div class="ui-section-header__copy">
+    <div>
-      <h1 class="ui-section-header__title">Ordini</h1>
+      <h1>Ordini</h1>
-      <p class="ui-section-header__description">
+      <p>
         Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.
       </p>
     </div>

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

@@ -4,6 +4,22 @@
   gap: var(--space-5);
 }
 
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.dashboard-header h1 {
+  margin: 0;
+}
+
+.dashboard-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
 .header-actions {
   display: flex;
   gap: var(--space-2);
@@ -308,6 +324,11 @@ h4 {
     gap: var(--space-4);
   }
 
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .list-toolbar {
     grid-template-columns: 1fr;
   }

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

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

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

@@ -1,8 +1,8 @@
-<section class="section-card ui-section-card ui-stack ui-stack--roomy">
+<section class="section-card ui-stack ui-stack--roomy">
-  <header class="section-header ui-section-header">
+  <header class="section-header">
-    <div class="header-copy ui-section-header__copy">
+    <div class="header-copy">
       <p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
-      <h2 class="ui-section-header__title">Media home</h2>
+      <h2>Media home</h2>
     </div>
     <div class="header-side ui-stack ui-stack--dense">
       <div class="header-stats ui-inline-actions">

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

@@ -1,3 +1,25 @@
+.section-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+
+.header-copy {
+  display: grid;
+  gap: var(--space-1);
+}
+
 .form-field--wide {
   grid-column: 1 / -1;
 }
@@ -100,6 +122,11 @@
 }
 
 @media (max-width: 720px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
   .media-panel-meta {
     justify-content: flex-start;
   }

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

@@ -33,13 +33,16 @@ form {
 }
 
 label {
+  font-size: 0.9rem;
   font-weight: 600;
+  color: var(--color-text-muted);
 }
 
 input {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: var(--space-3);
+  padding: var(--space-2);
+  font: inherit;
   font-size: 1rem;
 }
 
@@ -48,8 +51,10 @@ button {
   border-radius: var(--radius-md);
   background: var(--color-brand);
   color: var(--color-neutral-900);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  font: inherit;
   font-weight: 600;
+  line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.2s ease;
 }

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

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

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

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

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

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

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

@@ -97,6 +97,56 @@
   min-width: 0;
 }
 
+:host ::ng-deep .content .ui-form-control {
+  padding: var(--space-2);
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content select.ui-form-control {
+  background-position: right 0.75rem center;
+  padding-right: 2.35rem;
+}
+
+:host ::ng-deep .content .ui-form-caption {
+  font-size: 0.9rem;
+}
+
+:host ::ng-deep .content .ui-button {
+  padding: var(--space-2) var(--space-4);
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+:host ::ng-deep .content .ui-checkbox {
+  gap: 0.85rem;
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-checkbox__mark {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:host ::ng-deep .content .ui-file-picker__button,
+:host ::ng-deep .content .ui-file-picker__name {
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar {
+  padding: var(--space-2);
+}
+
+:host ::ng-deep .content .ui-language-toolbar__copy span,
+:host ::ng-deep .content .ui-language-toolbar__copy p,
+:host ::ng-deep .content .ui-language-toolbar__button {
+  font-size: 0.9rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar__button {
+  min-width: 2.8rem;
+  padding: 0.4rem 0.6rem;
+}
+
 @media (max-width: 1240px) {
   .admin-shell {
     grid-template-columns: 220px minmax(0, 1fr);

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

@@ -0,0 +1,437 @@
+.admin-shop {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.shop-header {
+  align-items: flex-start;
+}
+
+.shop-header h1 {
+  margin: 0;
+}
+
+.shop-header p {
+  margin: var(--space-2) 0 0;
+  color: var(--color-text-muted);
+}
+
+.header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
+.workspace {
+  align-items: start;
+}
+
+.resizable-workspace {
+  display: flex;
+  align-items: flex-start;
+  gap: 0;
+}
+
+.resizable-workspace .list-panel {
+  flex: 0 0 var(--shop-list-panel-width, 53%);
+  width: var(--shop-list-panel-width, 53%);
+}
+
+.resizable-workspace .detail-panel {
+  flex: 1 1 auto;
+}
+
+.list-panel,
+.detail-panel {
+  min-width: 0;
+}
+
+.panel-block,
+.list-panel,
+.detail-panel,
+.category-manager,
+.category-editor,
+.detail-stack,
+.form-section,
+.variant-stack,
+.image-stack,
+.media-grid,
+.model-summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.panel-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.panel-heading h2,
+.panel-heading h3,
+.panel-heading h4,
+.detail-header h2 {
+  margin: 0;
+}
+
+.panel-heading p,
+.detail-header p {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.list-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr);
+  gap: var(--space-2);
+}
+
+.list-toolbar > * {
+  min-width: 0;
+}
+
+.category-manager {
+  gap: var(--space-2);
+}
+
+.category-manager__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+  align-items: flex-start;
+}
+
+.category-manager__header h3 {
+  margin: 0;
+}
+
+.category-manager__header p {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.category-manager__body {
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.category-list {
+  display: grid;
+  gap: var(--space-2);
+  max-height: 560px;
+  overflow: auto;
+}
+
+.category-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-card);
+  padding: var(--space-2);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.category-item.active {
+  border-color: var(--color-brand);
+  background: #fff9de;
+}
+
+.category-item__main {
+  width: 100%;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  padding: 0;
+  cursor: pointer;
+  display: grid;
+  gap: 4px;
+}
+
+.category-item__main strong,
+.product-cell strong,
+.image-item__header strong {
+  overflow-wrap: anywhere;
+}
+
+.category-item__main span,
+.product-cell span {
+  font-size: 0.84rem;
+  color: var(--color-text-muted);
+}
+
+.category-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.category-editor {
+  gap: var(--space-3);
+}
+
+.textarea-control {
+  resize: vertical;
+  min-height: 82px;
+}
+
+.textarea-control--large {
+  min-height: 136px;
+}
+
+.toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.toggle-row--compact {
+  align-items: flex-start;
+}
+
+.form-field--wide {
+  grid-column: 1 / -1;
+}
+
+.input-with-action {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-2);
+}
+
+.product-cell {
+  display: grid;
+  gap: 4px;
+}
+
+tbody tr {
+  cursor: pointer;
+}
+
+tbody tr.selected {
+  background: #fff4c0;
+}
+
+.detail-panel {
+  gap: var(--space-4);
+}
+
+.detail-panel .ui-meta-item {
+  padding: var(--space-2);
+}
+
+.panel-resizer {
+  position: relative;
+  flex: 0 0 16px;
+  align-self: stretch;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  background: transparent;
+}
+
+.panel-resizer::before {
+  content: "";
+  position: absolute;
+  top: 22px;
+  bottom: 22px;
+  left: 50%;
+  width: 1px;
+  transform: translateX(-50%);
+  background: var(--color-border);
+}
+
+.panel-resizer__grip {
+  position: absolute;
+  top: 70px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 8px;
+  height: 64px;
+  border-radius: 999px;
+  background:
+    radial-gradient(circle, #b9b2a1 1.2px, transparent 1.2px) center / 8px 10px
+      repeat-y,
+    #fffdfa;
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-3);
+}
+
+.detail-stack {
+  gap: var(--space-4);
+}
+
+.variant-card,
+.image-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: linear-gradient(180deg, #fcfcfb 0%, #ffffff 100%);
+  padding: var(--space-3);
+}
+
+.variant-card {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.variant-card__header,
+.image-item__header,
+.image-item__controls {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-2);
+  align-items: flex-start;
+}
+
+.variant-card__header p,
+.image-meta {
+  margin: var(--space-1) 0 0;
+  color: var(--color-text-muted);
+}
+
+.variant-card__actions,
+.image-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  justify-content: flex-end;
+}
+
+.locked-panel,
+.loading-state,
+.image-fallback {
+  padding: var(--space-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background: #fbfaf6;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.preview-card,
+.image-item__preview {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-bg-card);
+}
+
+.preview-card {
+  aspect-ratio: 16 / 10;
+}
+
+.preview-card img,
+.image-item__preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.image-item {
+  display: grid;
+  grid-template-columns: 148px minmax(0, 1fr);
+  gap: var(--space-3);
+}
+
+.image-item__preview {
+  aspect-ratio: 1;
+}
+
+.image-item__content {
+  display: grid;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.link-button {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.detail-loading {
+  margin: 0;
+  color: var(--color-text-muted);
+}
+
+@media (max-width: 1480px) {
+  .category-manager__body {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1180px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .list-toolbar,
+  .ui-form-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .image-item {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1060px) {
+  .resizable-workspace {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-4);
+  }
+
+  .panel-resizer {
+    display: none;
+  }
+}
+
+@media (max-width: 900px) {
+  .detail-header,
+  .panel-heading,
+  .category-manager__header,
+  .variant-card__header,
+  .image-item__header,
+  .image-item__controls {
+    flex-direction: column;
+  }
+
+  .input-with-action {
+    grid-template-columns: 1fr;
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -13,11 +13,6 @@
     }
 
     <div class="card-badges">
-      @if (product().isFeatured) {
-        <span class="badge badge-featured">{{
-          "SHOP.FEATURED_BADGE" | translate
-        }}</span>
-      }
       @if (cartQuantity() > 0) {
         <span class="badge badge-cart">
           {{ "SHOP.IN_CART_SHORT" | translate: { count: cartQuantity() } }}

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

@@ -4,21 +4,17 @@
   border: 1px solid rgba(16, 24, 32, 0.08);
   border-radius: 1.1rem;
   overflow: hidden;
-  background: linear-gradient(
+  background: #fff;
-    180deg,
+  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.04);
-    rgba(255, 255, 255, 0.98),
-    rgba(248, 246, 241, 1)
-  );
-  box-shadow: 0 18px 40px rgba(16, 24, 32, 0.08);
   transition:
     transform 0.2s ease,
     box-shadow 0.2s ease,
     border-color 0.2s ease;
 
   &:hover {
-    transform: translateY(-4px);
+    transform: translateY(-2px);
-    box-shadow: 0 22px 48px rgba(16, 24, 32, 0.14);
+    box-shadow: 0 16px 30px rgba(16, 24, 32, 0.08);
-    border-color: rgba(250, 207, 10, 0.42);
+    border-color: rgba(16, 24, 32, 0.14);
   }
 }
 
@@ -26,13 +22,7 @@
   position: relative;
   display: block;
   min-height: 244px;
-  background:
+  background: #f2eee5;
-    radial-gradient(
-      circle at top right,
-      rgba(250, 207, 10, 0.28),
-      transparent 42%
-    ),
-    linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
 }
 
 .media img {
@@ -49,6 +39,9 @@
   display: flex;
   align-items: flex-end;
   padding: var(--space-5);
+  background:
+    radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 36%),
+    linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
 }
 
 .image-fallback span {
@@ -85,11 +78,6 @@
   text-transform: uppercase;
 }
 
-.badge-featured {
-  background: rgba(250, 207, 10, 0.92);
-  color: var(--color-neutral-900);
-}
-
 .badge-cart {
   background: rgba(16, 24, 32, 0.82);
   color: #fff;

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

@@ -109,11 +109,6 @@
               <div class="title-block">
                 <div class="title-meta">
                   <span class="category">{{ p.category.name }}</span>
-                  @if (p.isFeatured) {
-                    <span class="featured-pill">{{
-                      "SHOP.FEATURED_BADGE" | translate
-                    }}</span>
-                  }
                 </div>
                 <h1>{{ p.name }}</h1>
                 <p class="excerpt">

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

@@ -1,12 +1,6 @@
 .product-page {
   padding: var(--space-8) 0 var(--space-12);
-  background:
+  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 15rem);
-    radial-gradient(
-      circle at top left,
-      rgba(250, 207, 10, 0.18),
-      transparent 20%
-    ),
-    linear-gradient(180deg, #faf7ee 0%, var(--color-bg) 25%);
 }
 
 .wrapper {
@@ -43,14 +37,8 @@
   overflow: hidden;
   border-radius: 1.25rem;
   border: 1px solid rgba(16, 24, 32, 0.08);
-  background:
+  background: #f2eee5;
-    radial-gradient(
+  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.05);
-      circle at top right,
-      rgba(250, 207, 10, 0.3),
-      transparent 30%
-    ),
-    linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
-  box-shadow: 0 18px 42px rgba(16, 24, 32, 0.08);
 }
 
 .hero-image {
@@ -67,6 +55,9 @@
   display: flex;
   align-items: flex-end;
   padding: var(--space-6);
+  background:
+    radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 34%),
+    linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
 }
 
 .image-fallback span {
@@ -164,8 +155,7 @@
   gap: 0.7rem;
 }
 
-.category,
+.category {
-.featured-pill {
   text-transform: uppercase;
   font-size: 0.76rem;
   letter-spacing: 0.08em;
@@ -176,15 +166,6 @@
   font-weight: 700;
 }
 
-.featured-pill {
-  display: inline-flex;
-  padding: 0.25rem 0.65rem;
-  border-radius: 999px;
-  background: rgba(250, 207, 10, 0.92);
-  color: var(--color-neutral-900);
-  font-weight: 700;
-}
-
 h1 {
   font-size: clamp(2rem, 2vw + 1.2rem, 3.2rem);
 }
@@ -333,12 +314,13 @@ h1 {
 }
 
 .skeleton-block {
-  background: linear-gradient(
+  background:
-    110deg,
+    linear-gradient(
-    rgba(255, 255, 255, 0.7) 8%,
+      110deg,
-    rgba(238, 235, 226, 0.95) 18%,
+      rgba(255, 255, 255, 0.7) 8%,
-    rgba(255, 255, 255, 0.7) 33%
+      rgba(238, 235, 226, 0.95) 18%,
-  );
+      rgba(255, 255, 255, 0.7) 33%
+    );
   background-size: 220% 100%;
   animation: skeleton 1.35s linear infinite;
 }

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

@@ -20,7 +20,7 @@ describe('ShopService', () => {
       {
         id: 'line-1',
         lineItemType: 'SHOP_PRODUCT',
-        originalFilename: 'desk-cable-clip-demo.stl',
+        originalFilename: 'desk-cable-clip.stl',
         displayName: 'Desk Cable Clip',
         quantity: 2,
         printTimeSeconds: null,
@@ -42,13 +42,13 @@ describe('ShopService', () => {
         infillPattern: null,
         supportsEnabled: false,
         status: 'READY',
-        convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
+        convertedStoredPath: '/storage/items/desk-cable-clip.stl',
         unitPriceChf: 11.4,
       },
       {
         id: 'line-2',
         lineItemType: 'SHOP_PRODUCT',
-        originalFilename: 'desk-cable-clip-demo.stl',
+        originalFilename: 'desk-cable-clip.stl',
         displayName: 'Desk Cable Clip',
         quantity: 1,
         printTimeSeconds: null,
@@ -70,7 +70,7 @@ describe('ShopService', () => {
         infillPattern: null,
         supportsEnabled: false,
         status: 'READY',
-        convertedStoredPath: '/storage/items/desk-cable-clip-demo.stl',
+        convertedStoredPath: '/storage/items/desk-cable-clip.stl',
         unitPriceChf: 12.0,
       },
     ],

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

@@ -1,79 +1,26 @@
 <section class="shop-page">
-  <section class="shop-hero">
+  <div class="container ui-simple-hero shop-hero">
-    <div class="container shop-hero-grid">
+    <h1 class="ui-simple-hero__title">{{ "NAV.SHOP" | translate }}</h1>
-      <div class="hero-copy">
+    <p class="ui-simple-hero__subtitle">
-        <p class="ui-eyebrow">{{ "SHOP.HERO_EYEBROW" | translate }}</p>
+      {{
-        <h1 class="ui-hero-display">
+        selectedCategory()
-          {{ selectedCategory()?.name || ("SHOP.TITLE" | translate) }}
+          ? (selectedCategory()?.description || ("SHOP.CATEGORY_META" | translate: { count: selectedCategory()?.productCount || 0 }))
-        </h1>
+          : ("SHOP.CUSTOM_PART_CTA" | translate)
-        <p class="ui-copy-lead">
+      }}
-          {{ selectedCategory()?.description || ("SHOP.SUBTITLE" | translate) }}
+    </p>
-        </p>
+    <div class="ui-simple-hero__actions hero-actions ui-inline-actions">
-        <p class="ui-copy-subtitle">
+      <app-button variant="outline" routerLink="/contact">
-          {{
+        {{ "NAV.CONTACT" | translate }}
-            selectedCategory()
+      </app-button>
-              ? ("SHOP.CATEGORY_META"
-                | translate: { count: selectedCategory()?.productCount || 0 })
-              : ("SHOP.CATALOG_META_DESCRIPTION" | translate)
-          }}
-        </p>
-
-        <div class="hero-actions ui-inline-actions">
-          @if (cartHasItems()) {
-            <app-button
-              variant="primary"
-              [disabled]="cartMutating()"
-              (click)="goToCheckout()"
-            >
-              {{ "SHOP.GO_TO_CHECKOUT" | translate }}
-            </app-button>
-          } @else {
-            <app-button variant="outline" routerLink="/calculator/basic">
-              {{ "SHOP.WIP_CTA_CALC" | translate }}
-            </app-button>
-          }
-
-          @if (selectedCategory()) {
-            <app-button variant="text" (click)="navigateToCategory()">
-              {{ "SHOP.VIEW_ALL" | translate }}
-            </app-button>
-          }
-        </div>
-      </div>
-
-      <div class="hero-highlights">
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_PRODUCTS" | translate
-          }}</span>
-          <strong>{{
-            selectedCategory()?.productCount ?? products().length
-          }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_CART" | translate
-          }}</span>
-          <strong>{{ cartItemCount() }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_READY" | translate
-          }}</span>
-          <strong>{{ "SHOP.MODEL_3D" | translate }}</strong>
-        </div>
-      </div>
     </div>
-  </section>
+  </div>
 
   <div class="container shop-layout">
     <aside class="shop-sidebar">
       <app-card>
         <div class="panel-head">
           <div>
-            <p class="panel-kicker">
+            <p class="panel-kicker">{{ "SHOP.CATEGORY_PANEL_KICKER" | translate }}</p>
-              {{ "SHOP.CATEGORY_PANEL_KICKER" | translate }}
-            </p>
             <h2 class="panel-title">
               {{ "SHOP.CATEGORY_PANEL_TITLE" | translate }}
             </h2>
@@ -153,9 +100,7 @@
                   <div class="qty-control">
                     <button
                       type="button"
-                      [disabled]="
+                      [disabled]="cartMutating() && busyLineItemId() === item.id"
-                        cartMutating() && busyLineItemId() === item.id
-                      "
                       (click)="decreaseQuantity(item)"
                     >
                       -
@@ -163,9 +108,7 @@
                     <span>{{ item.quantity }}</span>
                     <button
                       type="button"
-                      [disabled]="
+                      [disabled]="cartMutating() && busyLineItemId() === item.id"
-                        cartMutating() && busyLineItemId() === item.id
-                      "
                       (click)="increaseQuantity(item)"
                     >
                       +
@@ -191,9 +134,7 @@
           <div class="cart-totals">
             <div class="cart-total-row">
               <span>{{ "SHOP.CART_SUBTOTAL" | translate }}</span>
-              <strong>{{
+              <strong>{{ cart()?.itemsTotalChf || 0 | currency: "CHF" }}</strong>
-                cart()?.itemsTotalChf || 0 | currency: "CHF"
-              }}</strong>
             </div>
             <div class="cart-total-row">
               <span>{{ "SHOP.CART_SHIPPING" | translate }}</span>
@@ -227,33 +168,6 @@
           {{ error() | translate }}
         </div>
       } @else {
-        @if (featuredProducts().length > 0 && !selectedCategory()) {
-          <section class="featured-strip">
-            <div class="section-head">
-              <div>
-                <p class="ui-eyebrow ui-eyebrow--compact">
-                  {{ "SHOP.FEATURED_KICKER" | translate }}
-                </p>
-                <h2 class="section-title">
-                  {{ "SHOP.FEATURED_TITLE" | translate }}
-                </h2>
-              </div>
-            </div>
-
-            <div class="featured-grid">
-              @for (
-                product of featuredProducts();
-                track trackByProduct($index, product)
-              ) {
-                <app-product-card
-                  [product]="product"
-                  [cartQuantity]="productCartQuantity(product.id)"
-                ></app-product-card>
-              }
-            </div>
-          </section>
-        }
-
         <section class="catalog-panel">
           <div class="section-head catalog-head">
             <div>
@@ -288,10 +202,7 @@
             </div>
           } @else {
             <div class="product-grid">
-              @for (
+              @for (product of products(); track trackByProduct($index, product)) {
-                product of products();
-                track trackByProduct($index, product)
-              ) {
                 <app-product-card
                   [product]="product"
                   [cartQuantity]="productCartQuantity(product.id)"

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

@@ -1,60 +1,14 @@
 .shop-page {
-  --shop-hero-bg: #f8f3e5;
+  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 13rem);
-  background:
-    radial-gradient(
-      circle at top right,
-      rgba(250, 207, 10, 0.24),
-      transparent 22%
-    ),
-    linear-gradient(180deg, #faf7ef 0%, #f6f2e8 24%, var(--color-bg) 24%);
 }
 
-.shop-hero {
+.shop-hero .ui-simple-hero__subtitle {
-  position: relative;
+  max-width: 52rem;
-  overflow: hidden;
+  line-height: 1.5;
-  padding: 4.75rem 0 3.5rem;
-  background: transparent;
 }
 
-.shop-hero-grid {
+.hero-actions {
-  display: grid;
+  gap: var(--space-3);
-  gap: var(--space-8);
-  align-items: end;
-  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
-}
-
-.hero-copy {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.hero-highlights {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.highlight-card {
-  display: grid;
-  gap: 0.2rem;
-  padding: 1.15rem 1.2rem;
-  border-radius: 1rem;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
-  backdrop-filter: blur(8px);
-}
-
-.highlight-card strong {
-  font-size: 1.35rem;
-  line-height: 1.1;
-}
-
-.highlight-label {
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.72rem;
-  font-weight: 700;
 }
 
 .shop-layout {
@@ -63,6 +17,7 @@
   align-items: start;
   grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
   padding-bottom: var(--space-12);
+  padding-top: var(--space-6);
 }
 
 .shop-sidebar {
@@ -120,8 +75,8 @@
 
 .category-link:hover,
 .category-link.active {
-  background: rgba(250, 207, 10, 0.14);
+  background: rgba(250, 207, 10, 0.12);
-  border-color: rgba(250, 207, 10, 0.34);
+  border-color: rgba(16, 24, 32, 0.12);
   transform: translateX(1px);
 }
 
@@ -217,7 +172,7 @@
   padding: 0.2rem;
   border-radius: 999px;
   border: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.68);
+  background: #fff;
 }
 
 .qty-control button {
@@ -266,7 +221,6 @@
   gap: var(--space-6);
 }
 
-.featured-strip,
 .catalog-panel {
   display: grid;
   gap: var(--space-5);
@@ -290,7 +244,6 @@
   white-space: nowrap;
 }
 
-.featured-grid,
 .product-grid {
   display: grid;
   gap: var(--space-5);
@@ -300,12 +253,13 @@
 .skeleton-card {
   min-height: 400px;
   border-radius: 1.1rem;
-  background: linear-gradient(
+  background:
-    110deg,
+    linear-gradient(
-    rgba(255, 255, 255, 0.7) 8%,
+      110deg,
-    rgba(238, 235, 226, 0.95) 18%,
+      rgba(255, 255, 255, 0.7) 8%,
-    rgba(255, 255, 255, 0.7) 33%
+      rgba(238, 235, 226, 0.95) 18%,
-  );
+      rgba(255, 255, 255, 0.7) 33%
+    );
   background-size: 220% 100%;
   animation: skeleton 1.35s linear infinite;
 }
@@ -317,7 +271,6 @@
 }
 
 @media (max-width: 1080px) {
-  .shop-hero-grid,
   .shop-layout {
     grid-template-columns: 1fr;
   }
@@ -328,7 +281,6 @@
 }
 
 @media (max-width: 760px) {
-  .featured-grid,
   .product-grid {
     grid-template-columns: 1fr;
   }

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

@@ -11,16 +11,7 @@ import {
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { Router, RouterLink } from '@angular/router';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import {
+import { catchError, combineLatest, finalize, forkJoin, of, switchMap, tap } from 'rxjs';
-  catchError,
-  combineLatest,
-  finalize,
-  forkJoin,
-  map,
-  of,
-  switchMap,
-  tap,
-} from 'rxjs';
 import { SeoService } from '../../core/services/seo.service';
 import { LanguageService } from '../../core/services/language.service';
 import { AppButtonComponent } from '../../shared/components/app-button/app-button.component';
@@ -66,7 +57,6 @@ export class ShopPageComponent {
   readonly categoryNodes = signal<ShopCategoryNavNode[]>([]);
   readonly selectedCategory = signal<ShopCategoryDetail | null>(null);
   readonly products = signal<ShopProductSummary[]>([]);
-  readonly featuredProducts = signal<ShopProductSummary[]>([]);
 
   readonly cartMutating = signal(false);
   readonly busyLineItemId = signal<string | null>(null);
@@ -78,9 +68,7 @@ export class ShopPageComponent {
     () => this.selectedCategory()?.slug ?? this.categorySlug() ?? null,
   );
   readonly cartItems = computed(() =>
-    (this.cart()?.items ?? []).filter(
+    (this.cart()?.items ?? []).filter((item) => item.lineItemType === 'SHOP_PRODUCT'),
-      (item) => item.lineItemType === 'SHOP_PRODUCT',
-    ),
   );
   readonly cartHasItems = computed(() => this.cartItems().length > 0);
 
@@ -98,9 +86,7 @@ export class ShopPageComponent {
 
     combineLatest([
       toObservable(this.categorySlug, { injector: this.injector }),
-      toObservable(this.languageService.currentLang, {
+      toObservable(this.languageService.currentLang, { injector: this.injector }),
-        injector: this.injector,
-      }),
     ])
       .pipe(
         tap(() => {
@@ -111,18 +97,12 @@ export class ShopPageComponent {
           forkJoin({
             categories: this.shopService.getCategories(),
             catalog: this.shopService.getProductCatalog(categorySlug ?? null),
-            featuredProducts: categorySlug
-              ? of<ShopProductSummary[]>([])
-              : this.shopService
-                  .getProductCatalog(null, true)
-                  .pipe(map((response) => response.products)),
           }).pipe(
             catchError((error) => {
               this.categories.set([]);
               this.categoryNodes.set([]);
               this.selectedCategory.set(null);
               this.products.set([]);
-              this.featuredProducts.set([]);
               this.error.set(
                 error?.status === 404 ? 'SHOP.NOT_FOUND' : 'SHOP.LOAD_ERROR',
               );
@@ -148,7 +128,6 @@ export class ShopPageComponent {
         );
         this.selectedCategory.set(result.catalog.category ?? null);
         this.products.set(result.catalog.products);
-        this.featuredProducts.set(result.featuredProducts);
         this.applySeo(result.catalog.category ?? null);
       });
   }
@@ -158,9 +137,7 @@ export class ShopPageComponent {
   }
 
   cartItemName(item: ShopCartItem): string {
-    return (
+    return item.displayName || item.shopProductName || item.originalFilename || '-';
-      item.displayName || item.shopProductName || item.originalFilename || '-'
-    );
   }
 
   cartItemVariant(item: ShopCartItem): string | null {
@@ -276,14 +253,12 @@ export class ShopPageComponent {
     }
 
     const title =
-      category.seoTitle ||
+      category.seoTitle || `${category.name} | ${this.translate.instant('SHOP.TITLE')} | 3D fab`;
-      `${category.name} | ${this.translate.instant('SHOP.TITLE')} | 3D fab`;
     const description =
       category.seoDescription ||
       category.description ||
       this.translate.instant('SHOP.CATALOG_META_DESCRIPTION');
-    const robots =
+    const robots = category.indexable === false ? 'noindex, nofollow' : 'index, follow';
-      category.indexable === false ? 'noindex, nofollow' : 'index, follow';
 
     this.seoService.applyPageSeo({
       title,

frontend/src/assets/i18n/it.json

@@ -177,6 +177,7 @@
     "CATALOG_LABEL": "Catalogo",
     "CATALOG_TITLE": "Tutti i prodotti",
     "CATALOG_META_DESCRIPTION": "Scopri prodotti stampati in 3D, accessori tecnici e soluzioni pronte all uso con lo stesso checkout del calcolatore.",
+    "CUSTOM_PART_CTA": "Non trovi quello che cerchi? Richiedi un pezzo personalizzato.",
     "CATEGORY_META": "{{count}} prodotti disponibili in questa categoria",
     "CATEGORY_PANEL_KICKER": "Navigazione",
     "CATEGORY_PANEL_TITLE": "Categorie",
@@ -206,7 +207,7 @@
     "CART_TITLE": "Carrello",
     "CART_SUMMARY_TITLE": "Riepilogo attuale",
     "CART_LOADING": "Caricamento carrello in corso.",
-    "CART_EMPTY": "Il carrello è vuoto. Aggiungi un prodotto per ritrovarlo subito anche al prossimo accesso.",
+    "CART_EMPTY": "Il carrello è vuoto. Aggiungi un prodotto.",
     "CART_SUBTOTAL": "Subtotale prodotti",
     "CART_SHIPPING": "Spedizione",
     "CART_TOTAL": "Totale stimato",

frontend/src/styles/_ui.scss

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