fix(back-end) url construction for media

style: apply prettier formatting
Merge remote-tracking branch 'origin/feat/shop' into feat/shop
2026-03-10 12:42:26 +01:00 · 2026-03-10 10:15:56 +00:00 · 2026-03-10 11:15:32 +01:00 · 2026-03-10 11:15:25 +01:00 · 2026-03-10 09:54:16 +00:00 · 2026-03-10 10:53:42 +01:00
63 changed files with 5428 additions and 404 deletions
--- a/.gitignore
+++ b/.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/
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ Crea un database PostgreSQL chiamato `printcalc`. Lo schema viene gestito dal pr
 Configura il percorso di OrcaSlicer in `backend/src/main/resources/application.properties` o tramite la variabile d'ambiente `SLICER_PATH`. Per il media service pubblico puoi configurare anche:

 - `MEDIA_STORAGE_ROOT` per la root `storage_media` usata dal backend (`original/`, `public/`, `private/`)
- `MEDIA_PUBLIC_BASE_URL` per gli URL assoluti restituiti dalle API admin, ad esempio `https://example.com/media`
+- `SHOP_STORAGE_ROOT` per la root `storage_shop` usata dal backend per i modelli dei prodotti shop
 - `MEDIA_FFMPEG_PATH` per il binario `ffmpeg`
 - `MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES` per il limite per asset immagine

@@ -64,12 +64,13 @@ I prezzi non sono più gestiti tramite variabili d'ambiente fisse ma tramite tab
 *   `/frontend`: Applicazione Angular.
 *   `/backend/profiles`: Contiene i file di configurazione per OrcaSlicer.
 *   `/storage_media`: Originali e varianti media pubbliche/private su filesystem.
+*   `/storage_shop`: Modelli e file prodotti dello shop.

 ## Media pubblici

 Il backend salva sempre l'originale in `storage_media/original/` e precomputa le varianti pubbliche in `storage_media/public/`. La cartella `storage_media/private/` è predisposta per asset non pubblici.

-Nel deploy Docker il volume media atteso è `/mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media`.
+Nel deploy Docker i volumi attesi sono `/mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media` e `/mnt/cache/appdata/print-calculator/${ENV}/storage_shop:/app/storage_shop`.

 Nginx non deve passare dal backend per i file pubblici. Configurazione attesa:

@@ -106,7 +107,7 @@ Operativamente:
 Assicurati che `slicer.path` punti al binario corretto. Su macOS è solitamente `/Applications/OrcaSlicer.app/Contents/MacOS/OrcaSlicer`. Su Linux è il percorso all'AppImage (estratta o meno).

 ### FFmpeg e media pubblici
-Verifica che `MEDIA_FFMPEG_PATH` punti a un `ffmpeg` con supporto JPEG, WebP e AVIF. Se gli URL media restituiti dalle API admin non sono raggiungibili, controlla che `MEDIA_PUBLIC_BASE_URL` corrisponda al `location /media/` esposto da Nginx e che il volume `storage_media` sia montato correttamente.
+Verifica che `MEDIA_FFMPEG_PATH` punti a un `ffmpeg` con supporto JPEG, WebP e AVIF. Se gli URL media restituiti dalle API admin non sono raggiungibili, controlla che `APP_FRONTEND_BASE_URL` punti al dominio corretto, che `location /media/` sia esposto da Nginx e che il volume `storage_media` sia montato correttamente.

 ### Database connection
 Verifica le credenziali in `application.properties`. Se usi Docker, puoi passare `DB_URL`, `DB_USERNAME` e `DB_PASSWORD` come variabili d'ambiente.
--- a/backend/src/main/java/com/printcalculator/dto/AdminShopProductDto.java
+++ b/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;
    }
--- a/backend/src/main/java/com/printcalculator/dto/AdminUpsertShopProductRequest.java
+++ b/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;
    }
--- a/backend/src/main/java/com/printcalculator/entity/ShopProduct.java
+++ b/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;
+    }
 }
--- a/backend/src/main/java/com/printcalculator/service/admin/AdminMediaControllerService.java
+++ b/backend/src/main/java/com/printcalculator/service/admin/AdminMediaControllerService.java
@@ -362,7 +362,27 @@ public class AdminMediaControllerService {
                }
                String extension = GENERATED_FORMAT_EXTENSIONS.get(format);
                Path outputFile = generatedDirectory.resolve(preset.name() + "." + extension);
-                mediaFfmpegService.generateVariant(sourceFile, outputFile, dimensions.widthPx(), dimensions.heightPx(), format);
+                try {
+                    mediaFfmpegService.generateVariant(
+                            sourceFile,
+                            outputFile,
+                            dimensions.widthPx(),
+                            dimensions.heightPx(),
+                            format
+                    );
+                } catch (IOException e) {
+                    if (FORMAT_AVIF.equals(format)) {
+                        skippedFormats.add(format);
+                        logger.warn(
+                                "Skipping AVIF variant generation for asset {} preset '{}' because FFmpeg AVIF generation failed: {}",
+                                asset.getId(),
+                                preset.name(),
+                                e.getMessage()
+                        );
+                        continue;
+                    }
+                    throw e;
+                }

                MediaVariant variant = new MediaVariant();
                variant.setMediaAsset(asset);
--- a/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
+++ b/backend/src/main/java/com/printcalculator/service/admin/AdminShopProductControllerService.java
@@ -22,6 +22,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");
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
        ensureSlugAvailable(normalizedSlug, null);

        ShopProduct product = new ShopProduct();
        product.setCreatedAt(OffsetDateTime.now());
-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
        ShopProduct saved = shopProductRepository.save(product);
        syncVariants(saved, payload.getVariants());
        return getProduct(saved.getId());
@@ -131,11 +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");
-        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), normalizedName);
+        LocalizedProductContent localizedContent = normalizeLocalizedProductContent(payload);
+        String normalizedSlug = normalizeAndValidateSlug(payload.getSlug(), localizedContent.defaultName());
        ensureSlugAvailable(normalizedSlug, productId);

-        applyProductPayload(product, payload, normalizedName, normalizedSlug, resolveCategory(payload.getCategoryId()));
+        applyProductPayload(product, payload, localizedContent, normalizedSlug, resolveCategory(payload.getCategoryId()));
        ShopProduct saved = shopProductRepository.save(product);
        syncVariants(saved, payload.getVariants());
        return getProduct(saved.getId());
@@ -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.setExcerpt(normalizeOptional(payload.getExcerpt()));
-        product.setDescription(normalizeOptional(payload.getDescription()));
+        product.setName(localizedContent.defaultName());
+        product.setNameIt(localizedContent.names().get("it"));
+        product.setNameEn(localizedContent.names().get("en"));
+        product.setNameDe(localizedContent.names().get("de"));
+        product.setNameFr(localizedContent.names().get("fr"));
+        product.setExcerpt(localizedContent.defaultExcerpt());
+        product.setExcerptIt(localizedContent.excerpts().get("it"));
+        product.setExcerptEn(localizedContent.excerpts().get("en"));
+        product.setExcerptDe(localizedContent.excerpts().get("de"));
+        product.setExcerptFr(localizedContent.excerpts().get("fr"));
+        product.setDescription(localizedContent.defaultDescription());
+        product.setDescriptionIt(localizedContent.descriptions().get("it"));
+        product.setDescriptionEn(localizedContent.descriptions().get("en"));
+        product.setDescriptionDe(localizedContent.descriptions().get("de"));
+        product.setDescriptionFr(localizedContent.descriptions().get("fr"));
        product.setSeoTitle(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
+    ) {
+    }
 }
--- a/backend/src/main/java/com/printcalculator/service/media/MediaFfmpegService.java
+++ b/backend/src/main/java/com/printcalculator/service/media/MediaFfmpegService.java
@@ -82,8 +82,6 @@ public class MediaFfmpegService {
            case "AVIF" -> {
                command.add("-c:v");
                command.add(encoder);
-                command.add("-still-picture");
-                command.add("1");
                command.add("-crf");
                command.add("30");
                command.add("-b:v");
--- a/backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java
+++ b/backend/src/main/java/com/printcalculator/service/media/MediaStorageService.java
@@ -18,15 +18,15 @@ public class MediaStorageService {
    private final Path originalRootLocation;
    private final Path publicRootLocation;
    private final Path privateRootLocation;
-    private final String publicBaseUrl;
+    private final String frontendBaseUrl;

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

@@ -73,11 +73,12 @@ public class MediaStorageService {
        if (storageKey == null || storageKey.isBlank()) {
            return null;
        }
+        String mediaBaseUrl = buildMediaBaseUrl();
        String normalizedKey = storageKey.startsWith("/") ? storageKey.substring(1) : storageKey;
-        if (publicBaseUrl.endsWith("/")) {
-            return publicBaseUrl + normalizedKey;
+        if (mediaBaseUrl.endsWith("/")) {
+            return mediaBaseUrl + normalizedKey;
        }
-        return publicBaseUrl + "/" + normalizedKey;
+        return mediaBaseUrl + "/" + normalizedKey;
    }

    private void copy(Path source, Path destination) throws IOException {
@@ -127,4 +128,15 @@ public class MediaStorageService {
        }
        return visibility.trim().toUpperCase(Locale.ROOT);
    }
+
+    private String buildMediaBaseUrl() {
+        String normalized = frontendBaseUrl != null ? frontendBaseUrl.trim() : "";
+        if (normalized.isBlank()) {
+            normalized = "http://localhost:4200";
+        }
+        if (normalized.endsWith("/")) {
+            normalized = normalized.substring(0, normalized.length() - 1);
+        }
+        return normalized + "/media";
+    }
 }
--- a/backend/src/main/java/com/printcalculator/service/shop/PublicShopCatalogService.java
+++ b/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().getExcerpt(),
+                entry.product().getNameForLanguage(language),
+                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().getExcerpt(),
-                entry.product().getDescription(),
+                entry.product().getNameForLanguage(language),
+                entry.product().getExcerptForLanguage(language),
+                entry.product().getDescriptionForLanguage(language),
                entry.product().getSeoTitle(),
                entry.product().getSeoDescription(),
                entry.product().getOgTitle(),
--- a/backend/src/main/resources/application-local.properties
+++ b/backend/src/main/resources/application-local.properties
@@ -9,5 +9,4 @@ admin.session.ttl-minutes=480

 # Local media storage served by a local static server on port 8081.
 media.storage.root=/Users/joe/IdeaProjects/print-calculator/storage_media
-media.public.base-url=http://localhost:8081
 media.ffmpeg.path=ffmpeg
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -28,9 +28,9 @@ clamav.enabled=${CLAMAV_ENABLED:false}

 # Media configuration
 media.storage.root=${MEDIA_STORAGE_ROOT:storage_media}
-media.public.base-url=${MEDIA_PUBLIC_BASE_URL:http://localhost:8080/media}
 media.ffmpeg.path=${MEDIA_FFMPEG_PATH:ffmpeg}
 media.upload.max-file-size-bytes=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:26214400}
+shop.model.max-file-size-bytes=${SHOP_MODEL_MAX_FILE_SIZE_BYTES:104857600}
 shop.storage.root=${SHOP_STORAGE_ROOT:storage_shop}
 shop.cart.cookie.ttl-days=${SHOP_CART_COOKIE_TTL_DAYS:30}
 shop.cart.cookie.secure=${SHOP_CART_COOKIE_SECURE:false}
--- a/backend/src/test/java/com/printcalculator/entity/ShopProductTest.java
+++ b/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"));
+    }
+}
--- a/backend/src/test/java/com/printcalculator/service/OrderServiceTest.java
+++ b/backend/src/test/java/com/printcalculator/service/OrderServiceTest.java
@@ -114,15 +114,15 @@ class OrderServiceTest {

        Path sourceDir = Path.of("storage_quotes").toAbsolutePath().normalize().resolve(sessionId.toString());
        Files.createDirectories(sourceDir);
-        Path sourceFile = sourceDir.resolve("shop-demo.stl");
-        Files.writeString(sourceFile, "solid demo\nendsolid demo\n", StandardCharsets.UTF_8);
+        Path sourceFile = sourceDir.resolve("shop-product.stl");
+        Files.writeString(sourceFile, "solid product\nendsolid product\n", StandardCharsets.UTF_8);

        QuoteLineItem qItem = new QuoteLineItem();
        qItem.setId(UUID.randomUUID());
        qItem.setQuoteSession(session);
        qItem.setStatus("READY");
        qItem.setLineItemType("SHOP_PRODUCT");
-        qItem.setOriginalFilename("shop-demo.stl");
+        qItem.setOriginalFilename("shop-product.stl");
        qItem.setDisplayName("Desk Cable Clip");
        qItem.setQuantity(2);
        qItem.setColorCode("Coral Red");
--- a/backend/src/test/java/com/printcalculator/service/admin/AdminMediaControllerServiceTest.java
+++ b/backend/src/test/java/com/printcalculator/service/admin/AdminMediaControllerServiceTest.java
@@ -51,6 +51,7 @@ import static org.mockito.ArgumentMatchers.anyInt;
 import static org.mockito.ArgumentMatchers.anyString;
 import static org.mockito.ArgumentMatchers.nullable;
 import static org.mockito.Mockito.doAnswer;
+import static org.mockito.Mockito.doThrow;
 import static org.mockito.Mockito.verifyNoInteractions;
 import static org.mockito.Mockito.when;

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

        service = new AdminMediaControllerService(
@@ -275,6 +276,31 @@ class AdminMediaControllerServiceTest {
                .noneMatch(variant -> "WEBP".equals(variant.getFormat()) || "AVIF".equals(variant.getFormat())));
    }

+    @Test
+    void uploadAsset_whenAvifGenerationFails_shouldKeepAssetReadyAndStoreOtherVariants() throws Exception {
+        when(mediaImageInspector.inspect(any(Path.class))).thenReturn(
+                new MediaImageInspector.ImageMetadata("image/png", "png", 1600, 900)
+        );
+        doThrow(new java.io.IOException("FFmpeg failed to generate media variant. Unrecognized option 'still-picture'."))
+                .when(mediaFfmpegService)
+                .generateVariant(any(Path.class), any(Path.class), anyInt(), anyInt(), org.mockito.ArgumentMatchers.eq("AVIF"));
+
+        MockMultipartFile file = new MockMultipartFile(
+                "file",
+                "landing-hero.png",
+                "image/png",
+                "png-image-content".getBytes(StandardCharsets.UTF_8)
+        );
+
+        AdminMediaAssetDto dto = service.uploadAsset(file, " Landing hero ", " Main headline ", null);
+
+        assertEquals("READY", dto.getStatus());
+        assertEquals(7, dto.getVariants().size());
+        assertTrue(dto.getVariants().stream().noneMatch(variant -> "AVIF".equals(variant.getFormat())));
+        assertEquals(3, dto.getVariants().stream().filter(variant -> "JPEG".equals(variant.getFormat())).count());
+        assertEquals(3, dto.getVariants().stream().filter(variant -> "WEBP".equals(variant.getFormat())).count());
+    }
+
    @Test
    void uploadAsset_withOversizedFile_shouldFailValidationBeforePersistence() {
        service = new AdminMediaControllerService(
--- a/backend/src/test/java/com/printcalculator/service/media/MediaFfmpegServiceTest.java
+++ b/backend/src/test/java/com/printcalculator/service/media/MediaFfmpegServiceTest.java
@@ -6,8 +6,11 @@ import org.junit.jupiter.api.io.TempDir;
 import java.io.IOException;
 import java.nio.file.Files;
 import java.nio.file.Path;
+import java.nio.file.attribute.PosixFilePermission;
+import java.util.Set;

 import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertTrue;
 import static org.junit.jupiter.api.Assertions.assertThrows;

 class MediaFfmpegServiceTest {
@@ -61,4 +64,57 @@ class MediaFfmpegServiceTest {

        assertEquals("Media target file name must not start with '-'.", ex.getMessage());
    }
+
+    @Test
+    void generateVariant_avifShouldNotUseStillPictureFlag() throws Exception {
+        Path fakeFfmpeg = tempDir.resolve("fake-ffmpeg.sh");
+        Files.writeString(
+                fakeFfmpeg,
+                """
+                        #!/bin/sh
+                        if [ "$1" = "-hide_banner" ] && [ "$2" = "-encoders" ]; then
+                          cat <<'EOF'
+                         V..... mjpeg
+                         V..... libwebp
+                         V..... libaom-av1
+                        EOF
+                          exit 0
+                        fi
+
+                        for arg in "$@"; do
+                          if [ "$arg" = "-still-picture" ]; then
+                            echo "Unrecognized option 'still-picture'. Error splitting the argument list: Option not found"
+                            exit 1
+                          fi
+                        done
+
+                        last_arg=""
+                        for arg in "$@"; do
+                          last_arg="$arg"
+                        done
+
+                        mkdir -p "$(dirname "$last_arg")"
+                        printf 'ok' > "$last_arg"
+                        exit 0
+                        """
+        );
+        Files.setPosixFilePermissions(
+                fakeFfmpeg,
+                Set.of(
+                        PosixFilePermission.OWNER_READ,
+                        PosixFilePermission.OWNER_WRITE,
+                        PosixFilePermission.OWNER_EXECUTE
+                )
+        );
+
+        MediaFfmpegService service = new MediaFfmpegService(fakeFfmpeg.toString());
+        Path source = tempDir.resolve("input.png");
+        Path target = tempDir.resolve("output.avif");
+        Files.writeString(source, "image");
+
+        service.generateVariant(source, target, 120, 80, "AVIF");
+
+        assertTrue(Files.exists(target));
+        assertEquals("ok", Files.readString(target));
+    }
 }
--- a/backend/src/test/java/com/printcalculator/service/media/PublicMediaQueryServiceTest.java
+++ b/backend/src/test/java/com/printcalculator/service/media/PublicMediaQueryServiceTest.java
@@ -41,7 +41,7 @@ class PublicMediaQueryServiceTest {
    void setUp() {
        MediaStorageService mediaStorageService = new MediaStorageService(
                tempDir.resolve("storage_media").toString(),
-                "https://cdn.example/media"
+                "https://cdn.example"
        );
        service = new PublicMediaQueryService(mediaUsageRepository, mediaVariantRepository, mediaStorageService);
    }
--- a/backend/src/test/java/com/printcalculator/service/payment/InvoicePdfRenderingServiceTest.java
+++ b/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);
--- a/db.sql
+++ b/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(),
--- a/docker-compose.deploy.yml
+++ b/docker-compose.deploy.yml
@@ -32,7 +32,7 @@ services:
      - TEMP_DIR=/app/temp
      - PROFILES_DIR=/app/profiles
      - MEDIA_STORAGE_ROOT=${MEDIA_STORAGE_ROOT:-/app/storage_media}
-      - MEDIA_PUBLIC_BASE_URL=${MEDIA_PUBLIC_BASE_URL:-http://localhost:8080/media}
+      - SHOP_STORAGE_ROOT=${SHOP_STORAGE_ROOT:-/app/storage_shop}
      - MEDIA_FFMPEG_PATH=${MEDIA_FFMPEG_PATH:-ffmpeg}
      - MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES=${MEDIA_UPLOAD_MAX_FILE_SIZE_BYTES:-26214400}
    restart: always
@@ -47,6 +47,7 @@ services:
      - /mnt/cache/appdata/print-calculator/${ENV}/storage_orders:/app/storage_orders
      - /mnt/cache/appdata/print-calculator/${ENV}/storage_requests:/app/storage_requests
      - /mnt/cache/appdata/print-calculator/${ENV}/storage_media:/app/storage_media
+      - /mnt/cache/appdata/print-calculator/${ENV}/storage_shop:/app/storage_shop
    extra_hosts:
      - "host.docker.internal:host-gateway"

--- a/frontend/src/app/core/layout/navbar.component.html
+++ b/frontend/src/app/core/layout/navbar.component.html
@@ -42,6 +42,35 @@
    </nav>

    <div class="actions">
+      <button
+        type="button"
+        class="cart-trigger"
+        [class.has-items]="cartItemCount() > 0"
+        [attr.aria-label]="'SHOP.CART_TITLE' | translate"
+        (click)="toggleCart()"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="8" cy="21" r="1"></circle>
+          <circle cx="19" cy="21" r="1"></circle>
+          <path
+            d="M2.05 2h2l2.4 12.45a2 2 0 0 0 2 1.55h9.7a2 2 0 0 0 1.95-1.57L22 7H6"
+          ></path>
+        </svg>
+        @if (cartItemCount() > 0) {
+          <span class="cart-badge">{{ cartItemCount() }}</span>
+        }
+      </button>
+
      <select
        class="lang-switch"
        [value]="langService.selectedLang()"
@@ -71,4 +100,120 @@
      </div>
    </div>
  </div>
+
+  @if (isCartOpen()) {
+    <div class="cart-overlay" (click)="closeCart()">
+      <aside class="cart-panel" (click)="$event.stopPropagation()">
+        <div class="cart-panel-head">
+          <div>
+            <p class="cart-panel-kicker">{{ "SHOP.CART_TITLE" | translate }}</p>
+            <h2>{{ "SHOP.CART_SUMMARY_TITLE" | translate }}</h2>
+          </div>
+          <button
+            type="button"
+            class="cart-close"
+            [attr.aria-label]="'COMMON.BACK' | translate"
+            (click)="closeCart()"
+          >
+            ×
+          </button>
+        </div>
+
+        @if (cartLoading() && !cart()) {
+          <p class="cart-state">{{ "SHOP.CART_LOADING" | translate }}</p>
+        } @else if (!cartHasItems()) {
+          <p class="cart-state">{{ "SHOP.CART_EMPTY" | translate }}</p>
+        } @else {
+          <div class="cart-lines">
+            @for (item of cartItems(); track trackByCartItem($index, item)) {
+              <article class="cart-line">
+                <div class="cart-line-copy">
+                  <strong>{{ cartItemName(item) }}</strong>
+                  @if (cartItemVariant(item); as variant) {
+                    <span class="cart-line-meta">{{ variant }}</span>
+                  }
+                  @if (cartItemColor(item); as color) {
+                    <span class="cart-line-color">
+                      <span
+                        class="color-dot"
+                        [style.background-color]="cartItemColorHex(item)"
+                      ></span>
+                      <span>{{ color }}</span>
+                    </span>
+                  }
+                </div>
+
+                <div class="cart-line-actions">
+                  <div class="qty-control">
+                    <button
+                      type="button"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
+                      (click)="decreaseQuantity(item)"
+                    >
+                      -
+                    </button>
+                    <span>{{ item.quantity }}</span>
+                    <button
+                      type="button"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
+                      (click)="increaseQuantity(item)"
+                    >
+                      +
+                    </button>
+                  </div>
+
+                  <strong class="line-total">{{
+                    item.unitPriceChf * item.quantity | currency: "CHF"
+                  }}</strong>
+                </div>
+
+                <button
+                  type="button"
+                  class="line-remove"
+                  [disabled]="cartMutating() && busyLineItemId() === item.id"
+                  (click)="removeItem(item)"
+                >
+                  {{ "SHOP.REMOVE" | translate }}
+                </button>
+              </article>
+            }
+          </div>
+
+          <div class="cart-totals">
+            <div class="cart-total-row">
+              <span>{{ "SHOP.CART_SUBTOTAL" | translate }}</span>
+              <strong>{{
+                cart()?.itemsTotalChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+            <div class="cart-total-row">
+              <span>{{ "SHOP.CART_SHIPPING" | translate }}</span>
+              <strong>{{
+                cart()?.shippingCostChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+            <div class="cart-total-row cart-total-row-final">
+              <span>{{ "SHOP.CART_TOTAL" | translate }}</span>
+              <strong>{{
+                cart()?.grandTotalChf || 0 | currency: "CHF"
+              }}</strong>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="checkout-link"
+            [disabled]="cartMutating()"
+            (click)="goToCheckout()"
+          >
+            {{ "SHOP.GO_TO_CHECKOUT" | translate }}
+          </button>
+        }
+      </aside>
+    </div>
+  }
 </header>
--- a/frontend/src/app/core/layout/navbar.component.scss
+++ b/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 {
--- a/frontend/src/app/core/layout/navbar.component.ts
+++ b/frontend/src/app/core/layout/navbar.component.ts
@@ -1,18 +1,48 @@
-import { Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { Component, DestroyRef, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  NavigationStart,
+  Router,
+  RouterLink,
+  RouterLinkActive,
+} from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { LanguageService } from '../services/language.service';
 import { routes } from '../../app.routes';
+import {
+  ShopCartItem,
+  ShopService,
+} from '../../features/shop/services/shop.service';
+import { finalize } from 'rxjs';

@Component({
  selector: 'app-navbar',
  standalone: true,
-  imports: [RouterLink, RouterLinkActive, TranslateModule],
+  imports: [CommonModule, RouterLink, RouterLinkActive, TranslateModule],
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
 })
 export class NavbarComponent {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly router = inject(Router);
+  readonly shopService = inject(ShopService);
+
  isMenuOpen = false;
+  readonly isCartOpen = signal(false);
+  readonly cartMutating = signal(false);
+  readonly busyLineItemId = signal<string | null>(null);
+
+  readonly cart = this.shopService.cart;
+  readonly cartLoading = this.shopService.cartLoading;
+  readonly cartItems = computed(() =>
+    (this.cart()?.items ?? []).filter(
+      (item) => item.lineItemType === 'SHOP_PRODUCT',
+    ),
+  );
+  readonly cartHasItems = computed(() => this.cartItems().length > 0);
+  readonly cartItemCount = this.shopService.cartItemCount;
+
  readonly languageOptions: Array<{
    value: 'it' | 'en' | 'de' | 'fr';
    label: string;
@@ -23,7 +53,27 @@ export class NavbarComponent {
    { value: 'fr', label: 'FR' },
  ];

-  constructor(public langService: LanguageService) {}
+  constructor(public langService: LanguageService) {
+    if (!this.shopService.cartLoaded()) {
+      this.shopService
+        .loadCart()
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          error: () => {
+            this.shopService.cart.set(null);
+          },
+        });
+    }
+
+    this.router.events
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          this.closeMenu();
+          this.closeCart();
+        }
+      });
+  }

  onLanguageChange(event: Event): void {
    const select = event.target as HTMLSelectElement;
@@ -39,5 +89,89 @@ export class NavbarComponent {
    this.isMenuOpen = false;
  }

+  toggleCart(): void {
+    this.closeMenu();
+    this.isCartOpen.update((open) => !open);
+  }
+
+  closeCart(): void {
+    this.isCartOpen.set(false);
+  }
+
+  increaseQuantity(item: ShopCartItem): void {
+    this.updateItemQuantity(item, (item.quantity ?? 0) + 1);
+  }
+
+  decreaseQuantity(item: ShopCartItem): void {
+    const nextQuantity = Math.max(1, (item.quantity ?? 1) - 1);
+    this.updateItemQuantity(item, nextQuantity);
+  }
+
+  removeItem(item: ShopCartItem): void {
+    this.cartMutating.set(true);
+    this.busyLineItemId.set(item.id);
+    this.shopService
+      .removeCartItem(item.id)
+      .pipe(
+        finalize(() => {
+          this.cartMutating.set(false);
+          this.busyLineItemId.set(null);
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
+  }
+
+  goToCheckout(): void {
+    const sessionId = this.shopService.cartSessionId();
+    if (!sessionId) {
+      return;
+    }
+
+    this.closeCart();
+    this.router.navigate(['/checkout'], {
+      queryParams: {
+        session: sessionId,
+      },
+    });
+  }
+
+  cartItemName(item: ShopCartItem): string {
+    return (
+      item.displayName || item.shopProductName || item.originalFilename || '-'
+    );
+  }
+
+  cartItemVariant(item: ShopCartItem): string | null {
+    return item.shopVariantLabel || item.shopVariantColorName || null;
+  }
+
+  cartItemColor(item: ShopCartItem): string | null {
+    return item.shopVariantColorName || item.colorCode || null;
+  }
+
+  cartItemColorHex(item: ShopCartItem): string {
+    return item.shopVariantColorHex || '#c9ced6';
+  }
+
+  trackByCartItem(_index: number, item: ShopCartItem): string {
+    return item.id;
+  }
+
+  private updateItemQuantity(item: ShopCartItem, quantity: number): void {
+    this.cartMutating.set(true);
+    this.busyLineItemId.set(item.id);
+    this.shopService
+      .updateCartItem(item.id, quantity)
+      .pipe(
+        finalize(() => {
+          this.cartMutating.set(false);
+          this.busyLineItemId.set(null);
+        }),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe();
+  }
+
  protected readonly routes = routes;
 }
--- a/frontend/src/app/core/services/seo.service.ts
+++ b/frontend/src/app/core/services/seo.service.ts
@@ -57,7 +57,8 @@ export class SeoService {
      this.asString(mergedData['seoDescription']) ?? this.defaultDescription;
    const robots = this.asString(mergedData['seoRobots']) ?? 'index, follow';
    const ogTitle = this.asString(mergedData['ogTitle']) ?? title;
-    const ogDescription = this.asString(mergedData['ogDescription']) ?? description;
+    const ogDescription =
+      this.asString(mergedData['ogDescription']) ?? description;

    this.applySeoValues(title, description, robots, ogTitle, ogDescription);
  }
--- a/frontend/src/app/features/admin/admin.routes.ts
+++ b/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,
+          ),
+      },
    ],
  },
 ];
--- a/frontend/src/app/features/admin/pages/admin-cad-invoices.component.html
+++ b/frontend/src/app/features/admin/pages/admin-cad-invoices.component.html
@@ -1,5 +1,5 @@
-<section class="cad-page">
-  <header class="page-header">
+<section class="cad-page section-card">
+  <header class="page-header section-header">
    <div>
      <h1>Fatture CAD</h1>
      <p>
--- a/frontend/src/app/features/admin/pages/admin-cad-invoices.component.scss
+++ b/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;
--- a/frontend/src/app/features/admin/pages/admin-contact-requests.component.html
+++ b/frontend/src/app/features/admin/pages/admin-contact-requests.component.html
@@ -1,10 +1,8 @@
-<section class="section-card ui-section-card">
-  <header class="section-header ui-section-header">
-    <div class="header-copy ui-section-header__copy">
-      <h2 class="ui-section-header__title">Richieste di contatto</h2>
-      <p class="ui-section-header__description">
-        Richieste preventivo personalizzato ricevute dal sito.
-      </p>
+<section class="section-card">
+  <header class="section-header">
+    <div class="header-copy">
+      <h2>Richieste di contatto</h2>
+      <p>Richieste preventivo personalizzato ricevute dal sito.</p>
      <span class="total-pill ui-pill">{{ requests.length }} richieste</span>
    </div>
    <button
--- a/frontend/src/app/features/admin/pages/admin-contact-requests.component.scss
+++ b/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;
  }
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.html
+++ b/frontend/src/app/features/admin/pages/admin-dashboard.component.html
@@ -1,10 +1,8 @@
-<section class="admin-dashboard ui-section-card">
-  <header class="dashboard-header ui-section-header">
-    <div class="ui-section-header__copy">
-      <h1 class="ui-section-header__title">Ordini</h1>
-      <p class="ui-section-header__description">
-        Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.
-      </p>
+<section class="admin-dashboard section-card">
+  <header class="dashboard-header section-header">
+    <div>
+      <h1>Ordini</h1>
+      <p>Seleziona un ordine a sinistra e gestiscilo nel dettaglio a destra.</p>
    </div>
    <div class="header-actions">
      <button
@@ -75,7 +73,10 @@
            [ngModel]="orderTypeFilter"
            (ngModelChange)="onOrderTypeFilterChange($event)"
          >
-            <option *ngFor="let option of orderTypeFilterOptions" [ngValue]="option">
+            <option
+              *ngFor="let option of orderTypeFilterOptions"
+              [ngValue]="option"
+            >
              {{ option }}
            </option>
          </select>
@@ -133,7 +134,9 @@
          <span
            class="order-type-badge"
            [class.order-type-badge--shop]="orderKind(selectedOrder) === 'SHOP'"
-            [class.order-type-badge--mixed]="orderKind(selectedOrder) === 'MIXED'"
+            [class.order-type-badge--mixed]="
+              orderKind(selectedOrder) === 'MIXED'
+            "
          >
            {{ orderKindLabel(selectedOrder) }}
          </span>
@@ -162,7 +165,8 @@
          <strong>Stato ordine</strong><span>{{ selectedOrder.status }}</span>
        </div>
        <div class="ui-meta-item">
-          <strong>Tipo ordine</strong><span>{{ orderKindLabel(selectedOrder) }}</span>
+          <strong>Tipo ordine</strong
+          ><span>{{ orderKindLabel(selectedOrder) }}</span>
        </div>
        <div class="ui-meta-item">
          <strong>Totale</strong
@@ -279,7 +283,9 @@
                ></span>
                <span>
                  {{ getItemColorLabel(item) }}
-                  <ng-container *ngIf="getItemColorCodeSuffix(item) as colorCode">
+                  <ng-container
+                    *ngIf="getItemColorCodeSuffix(item) as colorCode"
+                  >
                    ({{ colorCode }})
                  </ng-container>
                </span>
@@ -300,7 +306,12 @@
            <button
              type="button"
              class="ui-button ui-button--ghost"
-              (click)="downloadItemFile(item.id, item.originalFilename || itemDisplayName(item))"
+              (click)="
+                downloadItemFile(
+                  item.id,
+                  item.originalFilename || itemDisplayName(item)
+                )
+              "
            >
              {{ downloadItemLabel(item) }}
            </button>
@@ -373,7 +384,10 @@

    <h4>Parametri per file</h4>
    <div class="file-color-list">
-      <div class="file-color-row" *ngFor="let item of printItems(selectedOrder)">
+      <div
+        class="file-color-row"
+        *ngFor="let item of printItems(selectedOrder)"
+      >
        <span class="filename">{{ item.originalFilename }}</span>
        <span class="file-color">
          {{ getItemMaterialLabel(item) }} | Colore:
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.scss
+++ b/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;
  }
--- a/frontend/src/app/features/admin/pages/admin-dashboard.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-dashboard.component.ts
@@ -131,7 +131,8 @@ export class AdminDashboardComponent implements OnInit {
        this.selectedOrder = order;
        this.selectedStatus = order.status;
        this.selectedPaymentMethod = order.paymentMethod || 'OTHER';
-        this.showPrintDetails = this.showPrintDetails && this.hasPrintItems(order);
+        this.showPrintDetails =
+          this.showPrintDetails && this.hasPrintItems(order);
        this.detailLoading = false;
      },
      error: () => {
@@ -446,7 +447,8 @@ export class AdminDashboardComponent implements OnInit {
    this.selectedStatus = updatedOrder.status;
    this.selectedPaymentMethod =
      updatedOrder.paymentMethod || this.selectedPaymentMethod;
-    this.showPrintDetails = this.showPrintDetails && this.hasPrintItems(updatedOrder);
+    this.showPrintDetails =
+      this.showPrintDetails && this.hasPrintItems(updatedOrder);
  }

  private applyListFiltersAndSelection(): void {
--- a/frontend/src/app/features/admin/pages/admin-filament-stock.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-filament-stock.component.scss
@@ -27,18 +27,18 @@

 .content {
  display: grid;
-  gap: var(--space-4);
+  gap: var(--space-3);
 }

 .panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
-  padding: var(--space-4);
+  padding: var(--space-3);
  background: var(--color-bg-card);
 }

 .panel > h3 {
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-2);
 }

 .panel-header {
@@ -46,7 +46,7 @@
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }

 .panel-header h3 {
@@ -56,25 +56,26 @@
 .create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-3);
+  gap: var(--space-2);
+  align-items: start;
 }

 .subpanel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  padding: var(--space-3);
+  padding: var(--space-2);
  background: var(--color-neutral-100);
 }

 .subpanel h4 {
-  margin: 0 0 var(--space-3);
+  margin: 0 0 var(--space-2);
 }

 .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-2) var(--space-3);
-  margin-bottom: var(--space-3);
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
 }

 .form-field {
@@ -87,7 +88,7 @@
 }

 .form-field > span {
-  font-size: 0.8rem;
+  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 600;
 }
@@ -97,9 +98,10 @@ select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
+  padding: var(--space-2);
  background: var(--color-bg-card);
  font: inherit;
+  font-size: 1rem;
  color: var(--color-text);
 }

@@ -111,8 +113,8 @@ select:disabled {
 .toggle-group {
  display: flex;
  flex-wrap: wrap;
-  gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  gap: 0.55rem;
+  margin-bottom: var(--space-2);
 }

 .toggle {
@@ -121,7 +123,7 @@ select:disabled {
  gap: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
-  padding: 0.35rem 0.65rem;
+  padding: 0.28rem 0.55rem;
  background: var(--color-bg-card);
 }

@@ -132,14 +134,14 @@ select:disabled {
 }

 .toggle span {
-  font-size: 0.88rem;
+  font-size: 0.84rem;
  font-weight: 600;
 }

 .material-grid,
 .variant-list {
  display: grid;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }

 .material-card,
@@ -147,7 +149,7 @@ select:disabled {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
-  padding: var(--space-3);
+  padding: var(--space-2);
 }

 .material-grid {
@@ -162,7 +164,7 @@ select:disabled {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
-  margin-bottom: var(--space-3);
+  margin-bottom: var(--space-2);
 }

 .variant-header strong {
@@ -179,9 +181,9 @@ select:disabled {
 .variant-collapsed-summary {
  display: flex;
  flex-wrap: wrap;
-  gap: var(--space-3);
+  gap: var(--space-2);
  color: var(--color-text-muted);
-  font-size: 0.92rem;
+  font-size: 0.88rem;
 }

 .color-summary {
@@ -222,8 +224,8 @@ select:disabled {
 }

 .variant-meta {
-  margin: 0 0 var(--space-3);
-  font-size: 0.9rem;
+  margin: 0 0 var(--space-2);
+  font-size: 0.88rem;
  color: var(--color-text-muted);
 }

@@ -233,7 +235,10 @@ button {
  background: var(--color-brand);
  color: var(--color-neutral-900);
  padding: var(--space-2) var(--space-4);
+  font: inherit;
+  font-size: 1rem;
  font-weight: 600;
+  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease;
 }
@@ -326,10 +331,10 @@ button:disabled {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
-  padding: var(--space-4);
+  padding: var(--space-3);
  z-index: 1101;
  display: grid;
-  gap: var(--space-3);
+  gap: var(--space-2);
 }

 .confirm-dialog h4 {
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.html
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.html
@@ -1,8 +1,8 @@
-<section class="section-card ui-section-card ui-stack ui-stack--roomy">
-  <header class="section-header ui-section-header">
-    <div class="header-copy ui-section-header__copy">
+<section class="section-card ui-stack ui-stack--roomy">
+  <header class="section-header">
+    <div class="header-copy">
      <p class="eyebrow ui-eyebrow ui-eyebrow--compact">Back-office media</p>
-      <h2 class="ui-section-header__title">Media home</h2>
+      <h2>Media home</h2>
    </div>
    <div class="header-side ui-stack ui-stack--dense">
      <div class="header-stats ui-inline-actions">
--- a/frontend/src/app/features/admin/pages/admin-home-media.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-home-media.component.scss
@@ -1,3 +1,32 @@
+.section-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-4);
+}
+
+.section-header h2 {
+  margin: 0;
+}
+.media-panel-header {
+  margin-bottom: var(--space-3);
+}
+
+.group-header {
+  margin-bottom: var(--space-3);
+}
+
+.header-copy {
+  display: grid;
+  gap: var(--space-1);
+}
+
 .form-field--wide {
  grid-column: 1 / -1;
 }
@@ -100,6 +129,11 @@
 }

@media (max-width: 720px) {
+  .section-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
  .media-panel-meta {
    justify-content: flex-start;
  }
--- a/frontend/src/app/features/admin/pages/admin-login.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-login.component.scss
@@ -33,23 +33,36 @@ form {
 }

 label {
+  font-size: 0.9rem;
  font-weight: 600;
+  color: var(--color-text-muted);
 }

 input {
  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: var(--space-3);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font: inherit;
  font-size: 1rem;
 }

+input:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: var(--focus-ring);
+}
+
 button {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand);
  color: var(--color-neutral-900);
-  padding: var(--space-3) var(--space-4);
+  padding: var(--space-2) var(--space-4);
+  font: inherit;
  font-weight: 600;
+  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease;
 }
--- a/frontend/src/app/features/admin/pages/admin-sessions.component.html
+++ b/frontend/src/app/features/admin/pages/admin-sessions.component.html
@@ -1,10 +1,8 @@
-<section class="section-card ui-section-card">
-  <header class="section-header ui-section-header">
-    <div class="ui-section-header__copy">
-      <h2 class="ui-section-header__title">Sessioni quote</h2>
-      <p class="ui-section-header__description">
-        Sessioni create dal configuratore con stato e conversione ordine.
-      </p>
+<section class="section-card">
+  <header class="section-header">
+    <div>
+      <h2>Sessioni quote</h2>
+      <p>Sessioni create dal configuratore con stato e conversione ordine.</p>
    </div>
    <button
      type="button"
--- a/frontend/src/app/features/admin/pages/admin-sessions.component.scss
+++ b/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;
  }
--- a/frontend/src/app/features/admin/pages/admin-shell.component.html
+++ b/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>

--- a/frontend/src/app/features/admin/pages/admin-shell.component.scss
+++ b/frontend/src/app/features/admin/pages/admin-shell.component.scss
@@ -97,6 +97,168 @@
  min-width: 0;
 }

+:host ::ng-deep .content .ui-form-control,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
+:host ::ng-deep .content select,
+:host ::ng-deep .content textarea {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2);
+  background: var(--color-bg-card);
+  color: var(--color-text);
+  font: inherit;
+  font-size: 1rem;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
+}
+
+:host ::ng-deep .content .ui-form-control:focus,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
+:host ::ng-deep .content select:focus,
+:host ::ng-deep .content textarea:focus {
+  outline: none;
+  border-color: var(--color-brand);
+  box-shadow: var(--focus-ring);
+}
+
+:host ::ng-deep .content .ui-form-control:disabled,
+:host
+  ::ng-deep
+  .content
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):disabled,
+:host ::ng-deep .content select:disabled,
+:host ::ng-deep .content textarea:disabled {
+  background: var(--color-surface-muted);
+  cursor: not-allowed;
+}
+
+:host ::ng-deep .content select,
+:host ::ng-deep .content select.ui-form-control {
+  appearance: auto;
+  background-image: none;
+  background-position: initial;
+  background-size: initial;
+  padding-right: var(--space-2);
+}
+
+:host ::ng-deep .content .ui-form-caption,
+:host ::ng-deep .content .form-field > span,
+:host ::ng-deep .content .toolbar-field > span,
+:host ::ng-deep .content .form-grid label > span,
+:host ::ng-deep .content .status-editor label,
+:host ::ng-deep .content .status-editor-field label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+:host ::ng-deep .content button,
+:host ::ng-deep .content .ui-button {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-4);
+  background: var(--color-brand);
+  color: var(--color-neutral-900);
+  font: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+:host ::ng-deep .content button:hover:not(:disabled),
+:host ::ng-deep .content .ui-button:hover:not(:disabled) {
+  background: var(--color-brand-hover);
+}
+
+:host ::ng-deep .content button:disabled,
+:host ::ng-deep .content .ui-button:disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+:host ::ng-deep .content .ui-button--ghost,
+:host ::ng-deep .content .ghost,
+:host ::ng-deep .content .btn-secondary,
+:host ::ng-deep .content .panel-toggle {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:host ::ng-deep .content .ui-button--ghost:hover:not(:disabled),
+:host ::ng-deep .content .ghost:hover:not(:disabled),
+:host ::ng-deep .content .btn-secondary:hover:not(:disabled),
+:host ::ng-deep .content .panel-toggle:hover:not(:disabled) {
+  background: var(--color-surface-muted);
+}
+
+:host ::ng-deep .content .ui-button--danger,
+:host ::ng-deep .content .btn-delete {
+  background: var(--color-danger-500);
+  color: #ffffff;
+}
+
+:host ::ng-deep .content .ui-button--danger:hover:not(:disabled),
+:host ::ng-deep .content .btn-delete:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+:host ::ng-deep .content .ui-button--ghost-danger {
+  background: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+:host ::ng-deep .content .ui-button--ghost-danger:hover:not(:disabled) {
+  background: #fff0f0;
+  border-color: #d9534f;
+}
+
+:host ::ng-deep .content .ui-checkbox {
+  gap: 0.85rem;
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-checkbox__mark {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+:host ::ng-deep .content .ui-file-picker__button,
+:host ::ng-deep .content .ui-file-picker__name {
+  font-size: 1rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar {
+  padding: var(--space-2);
+}
+
+:host ::ng-deep .content .ui-language-toolbar__copy span,
+:host ::ng-deep .content .ui-language-toolbar__copy p,
+:host ::ng-deep .content .ui-language-toolbar__button {
+  font-size: 0.9rem;
+}
+
+:host ::ng-deep .content .ui-language-toolbar__button {
+  min-width: 2.8rem;
+  padding: 0.4rem 0.6rem;
+}
+
@media (max-width: 1240px) {
  .admin-shell {
    grid-template-columns: 220px minmax(0, 1fr);
--- a/frontend/src/app/features/admin/pages/admin-shop.component.html
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.html
--- a/frontend/src/app/features/admin/pages/admin-shop.component.scss
+++ b/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;
+  }
+}
--- a/frontend/src/app/features/admin/pages/admin-shop.component.ts
+++ b/frontend/src/app/features/admin/pages/admin-shop.component.ts
--- a/frontend/src/app/features/admin/services/admin-shop.service.ts
+++ b/frontend/src/app/features/admin/services/admin-shop.service.ts
@@ -0,0 +1,347 @@
+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);
+  }
+}
--- a/frontend/src/app/features/calculator/calculator-page.component.html
+++ b/frontend/src/app/features/calculator/calculator-page.component.html
@@ -1,6 +1,6 @@
-<div class="container hero">
-  <h1>{{ "CALC.TITLE" | translate }}</h1>
-  <p class="subtitle">{{ "CALC.SUBTITLE" | translate }}</p>
+<div class="container ui-simple-hero">
+  <h1 class="ui-simple-hero__title">{{ "CALC.TITLE" | translate }}</h1>
+  <p class="ui-simple-hero__subtitle">{{ "CALC.SUBTITLE" | translate }}</p>

  @if (error()) {
    <app-alert type="error">{{ errorKey() | translate }}</app-alert>
@@ -8,7 +8,7 @@
 </div>

@if (step() === "success") {
-  <div class="container hero">
+  <div class="container ui-simple-hero">
    <app-success-state
      context="calc"
      (action)="onNewQuote()"
--- a/frontend/src/app/features/calculator/calculator-page.component.scss
+++ b/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;
--- a/frontend/src/app/features/checkout/checkout.component.ts
+++ b/frontend/src/app/features/checkout/checkout.component.ts
@@ -393,10 +393,7 @@ export class CheckoutComponent implements OnInit {
  }

  private loadStlPreviews(session: any): void {
-    if (
-      !this.sessionId ||
-      !Array.isArray(session?.items)
-    ) {
+    if (!this.sessionId || !Array.isArray(session?.items)) {
      return;
    }

--- a/frontend/src/app/features/contact/contact-page.component.html
+++ b/frontend/src/app/features/contact/contact-page.component.html
@@ -1,9 +1,9 @@
-<section class="contact-hero">
-  <div class="container">
-    <h1>{{ "CONTACT.TITLE" | translate }}</h1>
-    <p class="subtitle">{{ "CONTACT.HERO_SUBTITLE" | translate }}</p>
-  </div>
-</section>
+<div class="container ui-simple-hero contact-hero">
+  <h1 class="ui-simple-hero__title">{{ "CONTACT.TITLE" | translate }}</h1>
+  <p class="ui-simple-hero__subtitle">
+    {{ "CONTACT.HERO_SUBTITLE" | translate }}
+  </p>
+</div>

 <div class="container content">
  <app-card>
--- a/frontend/src/app/features/contact/contact-page.component.scss
+++ b/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;
--- a/frontend/src/app/features/order/order.component.html
+++ b/frontend/src/app/features/order/order.component.html
@@ -161,7 +161,9 @@
            <app-button
              variant="outline"
              (click)="completeOrder()"
-              [disabled]="!selectedPaymentMethod || o.paymentStatus === 'REPORTED'"
+              [disabled]="
+                !selectedPaymentMethod || o.paymentStatus === 'REPORTED'
+              "
              [fullWidth]="true"
            >
              {{
@@ -201,10 +203,14 @@
                </div>

                <div class="order-item-meta">
-                  <span>{{ "CHECKOUT.QTY" | translate }}: {{ item.quantity }}</span>
+                  <span
+                    >{{ "CHECKOUT.QTY" | translate }}: {{ item.quantity }}</span
+                  >
                  <span *ngIf="showItemMaterial(item)">
                    {{ "CHECKOUT.MATERIAL" | translate }}:
-                    {{ item.materialCode || ("ORDER.NOT_AVAILABLE" | translate) }}
+                    {{
+                      item.materialCode || ("ORDER.NOT_AVAILABLE" | translate)
+                    }}
                  </span>
                  <span *ngIf="itemVariantLabel(item) as variantLabel">
                    {{ "SHOP.VARIANT" | translate }}: {{ variantLabel }}
@@ -252,7 +258,9 @@
              <strong>{{ orderKindLabel(o) }}</strong>
            </div>
            <div>
-              <span class="summary-label">{{ "ORDER.ITEM_COUNT" | translate }}</span>
+              <span class="summary-label">{{
+                "ORDER.ITEM_COUNT" | translate
+              }}</span>
              <strong>{{ (o.items || []).length }}</strong>
            </div>
          </div>
--- a/frontend/src/app/features/order/order.component.ts
+++ b/frontend/src/app/features/order/order.component.ts
@@ -263,7 +263,9 @@ export class OrderComponent implements OnInit {
      return shopName;
    }

-    return String(item?.originalFilename ?? this.translate.instant('ORDER.NOT_AVAILABLE'));
+    return String(
+      item?.originalFilename ?? this.translate.instant('ORDER.NOT_AVAILABLE'),
+    );
  }

  itemVariantLabel(item: PublicOrderItem): string | null {
--- a/frontend/src/app/features/shop/components/product-card/product-card.component.html
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.html
@@ -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() } }}
@@ -46,9 +41,7 @@
      <div class="pricing">
        <span class="price">{{ priceLabel() | currency: "CHF" }}</span>
        @if (hasPriceRange()) {
-          <small class="price-note">{{
-            "SHOP.PRICE_FROM" | translate
-          }}</small>
+          <small class="price-note">{{ "SHOP.PRICE_FROM" | translate }}</small>
        }
      </div>

--- a/frontend/src/app/features/shop/components/product-card/product-card.component.scss
+++ b/frontend/src/app/features/shop/components/product-card/product-card.component.scss
@@ -4,18 +4,17 @@
  border: 1px solid rgba(16, 24, 32, 0.08);
  border-radius: 1.1rem;
  overflow: hidden;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 246, 241, 1));
-  box-shadow: 0 18px 40px rgba(16, 24, 32, 0.08);
+  background: #fff;
+  box-shadow: 0 10px 24px rgba(16, 24, 32, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;

  &:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 22px 48px rgba(16, 24, 32, 0.14);
-    border-color: rgba(250, 207, 10, 0.42);
+    transform: translateY(-2px);
+    box-shadow: 0 16px 30px rgba(16, 24, 32, 0.08);
+    border-color: rgba(16, 24, 32, 0.14);
  }
 }

@@ -23,9 +22,7 @@
  position: relative;
  display: block;
  min-height: 244px;
-  background:
-    radial-gradient(circle at top right, rgba(250, 207, 10, 0.28), transparent 42%),
-    linear-gradient(160deg, #f7f4ed 0%, #ece7db 100%);
+  background: #f2eee5;
 }

 .media img {
@@ -42,6 +39,13 @@
  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 {
@@ -78,11 +82,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;
--- a/frontend/src/app/features/shop/product-detail.component.html
+++ b/frontend/src/app/features/shop/product-detail.component.html
@@ -44,7 +44,9 @@
                    <button
                      type="button"
                      class="thumb"
-                      [class.active]="selectedImage().mediaAssetId === image.mediaAssetId"
+                      [class.active]="
+                        selectedImage().mediaAssetId === image.mediaAssetId
+                      "
                      (click)="selectImage(image.mediaAssetId)"
                    >
                      @if (imageUrl(image); as imageUrl) {
@@ -68,13 +70,16 @@
                    </div>
                    <div class="dimensions">
                      <span>
-                        X {{ p.model3d.boundingBoxXMm || 0 | number: "1.0-1" }} mm
+                        X
+                        {{ p.model3d.boundingBoxXMm || 0 | number: "1.0-1" }} mm
                      </span>
                      <span>
-                        Y {{ p.model3d.boundingBoxYMm || 0 | number: "1.0-1" }} mm
+                        Y
+                        {{ p.model3d.boundingBoxYMm || 0 | number: "1.0-1" }} mm
                      </span>
                      <span>
-                        Z {{ p.model3d.boundingBoxZMm || 0 | number: "1.0-1" }} mm
+                        Z
+                        {{ p.model3d.boundingBoxZMm || 0 | number: "1.0-1" }} mm
                      </span>
                    </div>
                  </div>
@@ -104,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">
@@ -133,7 +133,8 @@
                      <span class="cart-pill">
                        {{
                          "SHOP.IN_CART_LONG"
-                            | translate: { count: selectedVariantCartQuantity() }
+                            | translate
+                              : { count: selectedVariantCartQuantity() }
                        }}
                      </span>
                    }
@@ -157,7 +158,9 @@
                            <small>{{ variant.variantLabel }}</small>
                          }
                        </span>
-                        <strong>{{ variant.priceChf | currency: "CHF" }}</strong>
+                        <strong>{{
+                          variant.priceChf | currency: "CHF"
+                        }}</strong>
                      </button>
                    }
                  </div>
@@ -165,9 +168,13 @@
                  <div class="quantity-row">
                    <span>{{ "SHOP.QUANTITY" | translate }}</span>
                    <div class="qty-control">
-                      <button type="button" (click)="decreaseQuantity()">-</button>
+                      <button type="button" (click)="decreaseQuantity()">
+                        -
+                      </button>
                      <span>{{ quantity() }}</span>
-                      <button type="button" (click)="increaseQuantity()">+</button>
+                      <button type="button" (click)="increaseQuantity()">
+                        +
+                      </button>
                    </div>
                  </div>

@@ -178,9 +185,8 @@
                      (click)="addToCart()"
                    >
                      {{
-                        (isAddingToCart()
-                          ? "SHOP.ADDING"
-                          : "SHOP.ADD_CART") | translate
+                        (isAddingToCart() ? "SHOP.ADDING" : "SHOP.ADD_CART")
+                          | translate
                      }}
                    </app-button>

--- a/frontend/src/app/features/shop/product-detail.component.scss
+++ b/frontend/src/app/features/shop/product-detail.component.scss
@@ -1,8 +1,6 @@
 .product-page {
  padding: var(--space-8) 0 var(--space-12);
-  background:
-    radial-gradient(circle at top left, rgba(250, 207, 10, 0.18), transparent 20%),
-    linear-gradient(180deg, #faf7ee 0%, var(--color-bg) 25%);
+  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 15rem);
 }

 .wrapper {
@@ -39,10 +37,8 @@
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(16, 24, 32, 0.08);
-  background:
-    radial-gradient(circle at top right, rgba(250, 207, 10, 0.3), transparent 30%),
-    linear-gradient(160deg, #f8f4ea 0%, #eee8db 100%);
-  box-shadow: 0 18px 42px rgba(16, 24, 32, 0.08);
+  background: #f2eee5;
+  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.05);
 }

 .hero-image {
@@ -59,6 +55,13 @@
  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 {
@@ -156,8 +159,7 @@
  gap: 0.7rem;
 }

-.category,
-.featured-pill {
+.category {
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
@@ -168,15 +170,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);
 }
@@ -325,13 +318,12 @@ h1 {
 }

 .skeleton-block {
-  background:
-    linear-gradient(
-      110deg,
-      rgba(255, 255, 255, 0.7) 8%,
-      rgba(238, 235, 226, 0.95) 18%,
-      rgba(255, 255, 255, 0.7) 33%
-    );
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.7) 8%,
+    rgba(238, 235, 226, 0.95) 18%,
+    rgba(255, 255, 255, 0.7) 33%
+  );
  background-size: 220% 100%;
  animation: skeleton 1.35s linear infinite;
 }
--- a/frontend/src/app/features/shop/product-detail.component.ts
+++ b/frontend/src/app/features/shop/product-detail.component.ts
@@ -121,7 +121,9 @@ export class ProductDetailComponent {

    combineLatest([
      toObservable(this.productSlug, { injector: this.injector }),
-      toObservable(this.languageService.currentLang, { injector: this.injector }),
+      toObservable(this.languageService.currentLang, {
+        injector: this.injector,
+      }),
    ])
      .pipe(
        tap(() => {
@@ -160,13 +162,22 @@ export class ProductDetailComponent {
        }

        this.product.set(product);
-        this.selectedVariantId.set(product.defaultVariant?.id ?? product.variants[0]?.id ?? null);
-        this.selectedImageAssetId.set(product.primaryImage?.mediaAssetId ?? product.images[0]?.mediaAssetId ?? null);
+        this.selectedVariantId.set(
+          product.defaultVariant?.id ?? product.variants[0]?.id ?? null,
+        );
+        this.selectedImageAssetId.set(
+          product.primaryImage?.mediaAssetId ??
+            product.images[0]?.mediaAssetId ??
+            null,
+        );
        this.quantity.set(1);
        this.applySeo(product);

        if (product.model3d?.url && product.model3d.originalFilename) {
-          this.loadModelPreview(product.model3d.url, product.model3d.originalFilename);
+          this.loadModelPreview(
+            product.model3d.url,
+            product.model3d.originalFilename,
+          );
        } else {
          this.modelFile.set(null);
          this.modelLoading.set(false);
@@ -239,7 +250,9 @@ export class ProductDetailComponent {
  }

  priceLabel(): number {
-    return this.selectedVariant()?.priceChf ?? this.product()?.priceFromChf ?? 0;
+    return (
+      this.selectedVariant()?.priceChf ?? this.product()?.priceFromChf ?? 0
+    );
  }

  colorLabel(variant: ShopProductVariantOption): string {
@@ -282,7 +295,8 @@ export class ProductDetailComponent {
      product.seoDescription ||
      product.excerpt ||
      this.translate.instant('SHOP.CATALOG_META_DESCRIPTION');
-    const robots = product.indexable === false ? 'noindex, nofollow' : 'index, follow';
+    const robots =
+      product.indexable === false ? 'noindex, nofollow' : 'index, follow';

    this.seoService.applyPageSeo({
      title,
--- a/frontend/src/app/features/shop/services/shop.service.spec.ts
+++ b/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,
      },
    ],
@@ -129,7 +129,9 @@ describe('ShopService', () => {
  it('posts add-to-cart with credentials and replaces local cart state', () => {
    service.addToCart('variant-red', 2).subscribe();

-    const request = httpMock.expectOne('http://localhost:8000/api/shop/cart/items');
+    const request = httpMock.expectOne(
+      'http://localhost:8000/api/shop/cart/items',
+    );
    expect(request.request.method).toBe('POST');
    expect(request.request.withCredentials).toBeTrue();
    expect(request.request.body).toEqual({
--- a/frontend/src/app/features/shop/services/shop.service.ts
+++ b/frontend/src/app/features/shop/services/shop.service.ts
@@ -251,9 +251,12 @@ export class ShopService {
      params = params.set('featured', String(featured));
    }

-    return this.http.get<ShopProductCatalogResponse>(`${this.apiUrl}/products`, {
-      params,
-    });
+    return this.http.get<ShopProductCatalogResponse>(
+      `${this.apiUrl}/products`,
+      {
+        params,
+      },
+    );
  }

  getProduct(slug: string): Observable<ShopProductDetail> {
@@ -337,10 +340,7 @@ export class ShopService {
      .pipe(tap((cart) => this.setCart(cart)));
  }

-  getProductModelFile(
-    urlOrPath: string,
-    filename: string,
-  ): Observable<File> {
+  getProductModelFile(urlOrPath: string, filename: string): Observable<File> {
    return this.http
      .get(this.resolveApiUrl(urlOrPath), {
        responseType: 'blob',
--- a/frontend/src/app/features/shop/shop-page.component.html
+++ b/frontend/src/app/features/shop/shop-page.component.html
@@ -1,81 +1,30 @@
 <section class="shop-page">
-  <section class="shop-hero">
-    <div class="container shop-hero-grid">
-      <div class="hero-copy">
-        <p class="ui-eyebrow">{{ "SHOP.HERO_EYEBROW" | translate }}</p>
-        <h1 class="ui-hero-display">
-          {{
-            selectedCategory()?.name || ("SHOP.TITLE" | translate)
-          }}
-        </h1>
-        <p class="ui-copy-lead">
-          {{
-            selectedCategory()?.description ||
-              ("SHOP.SUBTITLE" | translate)
-          }}
-        </p>
-        <p class="ui-copy-subtitle">
-          {{
-            selectedCategory()
-              ? ("SHOP.CATEGORY_META" | translate: { count: selectedCategory()?.productCount || 0 })
-              : ("SHOP.CATALOG_META_DESCRIPTION" | translate)
-          }}
-        </p>
-
-        <div class="hero-actions ui-inline-actions">
-          @if (cartHasItems()) {
-            <app-button
-              variant="primary"
-              [disabled]="cartMutating()"
-              (click)="goToCheckout()"
-            >
-              {{ "SHOP.GO_TO_CHECKOUT" | translate }}
-            </app-button>
-          } @else {
-            <app-button variant="outline" routerLink="/calculator/basic">
-              {{ "SHOP.WIP_CTA_CALC" | translate }}
-            </app-button>
-          }
-
-          @if (selectedCategory()) {
-            <app-button variant="text" (click)="navigateToCategory()">
-              {{ "SHOP.VIEW_ALL" | translate }}
-            </app-button>
-          }
-        </div>
-      </div>
-
-      <div class="hero-highlights">
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_PRODUCTS" | translate
-          }}</span>
-          <strong>{{
-            selectedCategory()?.productCount ?? products().length
-          }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_CART" | translate
-          }}</span>
-          <strong>{{ cartItemCount() }}</strong>
-        </div>
-        <div class="highlight-card">
-          <span class="highlight-label">{{
-            "SHOP.HIGHLIGHT_READY" | translate
-          }}</span>
-          <strong>{{ "SHOP.MODEL_3D" | translate }}</strong>
-        </div>
-      </div>
+  <div class="container ui-simple-hero shop-hero">
+    <h1 class="ui-simple-hero__title">{{ "NAV.SHOP" | translate }}</h1>
+    <p class="ui-simple-hero__subtitle">
+      {{
+        selectedCategory()
+          ? selectedCategory()?.description ||
+            ("SHOP.CATEGORY_META"
+              | translate: { count: selectedCategory()?.productCount || 0 })
+          : ("SHOP.CUSTOM_PART_CTA" | translate)
+      }}
+    </p>
+    <div class="ui-simple-hero__actions hero-actions ui-inline-actions">
+      <app-button variant="outline" routerLink="/contact">
+        {{ "NAV.CONTACT" | translate }}
+      </app-button>
    </div>
-  </section>
+  </div>

  <div class="container shop-layout">
    <aside class="shop-sidebar">
      <app-card>
        <div class="panel-head">
          <div>
-            <p class="panel-kicker">{{ "SHOP.CATEGORY_PANEL_KICKER" | translate }}</p>
+            <p class="panel-kicker">
+              {{ "SHOP.CATEGORY_PANEL_KICKER" | translate }}
+            </p>
            <h2 class="panel-title">
              {{ "SHOP.CATEGORY_PANEL_TITLE" | translate }}
            </h2>
@@ -155,7 +104,9 @@
                  <div class="qty-control">
                    <button
                      type="button"
-                      [disabled]="cartMutating() && busyLineItemId() === item.id"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
                      (click)="decreaseQuantity(item)"
                    >
                      -
@@ -163,7 +114,9 @@
                    <span>{{ item.quantity }}</span>
                    <button
                      type="button"
-                      [disabled]="cartMutating() && busyLineItemId() === item.id"
+                      [disabled]="
+                        cartMutating() && busyLineItemId() === item.id
+                      "
                      (click)="increaseQuantity(item)"
                    >
                      +
@@ -189,7 +142,9 @@
          <div class="cart-totals">
            <div class="cart-total-row">
              <span>{{ "SHOP.CART_SUBTOTAL" | translate }}</span>
-              <strong>{{ cart()?.itemsTotalChf || 0 | currency: "CHF" }}</strong>
+              <strong>{{
+                cart()?.itemsTotalChf || 0 | currency: "CHF"
+              }}</strong>
            </div>
            <div class="cart-total-row">
              <span>{{ "SHOP.CART_SHIPPING" | translate }}</span>
@@ -223,33 +178,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>
@@ -284,7 +212,10 @@
            </div>
          } @else {
            <div class="product-grid">
-              @for (product of products(); track trackByProduct($index, product)) {
+              @for (
+                product of products();
+                track trackByProduct($index, product)
+              ) {
                <app-product-card
                  [product]="product"
                  [cartQuantity]="productCartQuantity(product.id)"
--- a/frontend/src/app/features/shop/shop-page.component.scss
+++ b/frontend/src/app/features/shop/shop-page.component.scss
@@ -1,56 +1,14 @@
 .shop-page {
-  --shop-hero-bg: #f8f3e5;
-  background:
-    radial-gradient(circle at top right, rgba(250, 207, 10, 0.24), transparent 22%),
-    linear-gradient(180deg, #faf7ef 0%, #f6f2e8 24%, var(--color-bg) 24%);
+  background: linear-gradient(180deg, #faf7ef 0%, var(--color-bg) 13rem);
 }

-.shop-hero {
-  position: relative;
-  overflow: hidden;
-  padding: 4.75rem 0 3.5rem;
-  background: transparent;
+.shop-hero .ui-simple-hero__subtitle {
+  max-width: 52rem;
+  line-height: 1.5;
 }

-.shop-hero-grid {
-  display: grid;
-  gap: var(--space-8);
-  align-items: end;
-  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
-}
-
-.hero-copy {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.hero-highlights {
-  display: grid;
-  gap: var(--space-4);
-}
-
-.highlight-card {
-  display: grid;
-  gap: 0.2rem;
-  padding: 1.15rem 1.2rem;
-  border-radius: 1rem;
-  border: 1px solid rgba(16, 24, 32, 0.08);
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.08);
-  backdrop-filter: blur(8px);
-}
-
-.highlight-card strong {
-  font-size: 1.35rem;
-  line-height: 1.1;
-}
-
-.highlight-label {
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 0.72rem;
-  font-weight: 700;
+.hero-actions {
+  gap: var(--space-3);
 }

 .shop-layout {
@@ -59,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 {
@@ -116,8 +75,8 @@

 .category-link:hover,
 .category-link.active {
-  background: rgba(250, 207, 10, 0.14);
-  border-color: rgba(250, 207, 10, 0.34);
+  background: rgba(250, 207, 10, 0.12);
+  border-color: rgba(16, 24, 32, 0.12);
  transform: translateX(1px);
 }

@@ -213,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 {
@@ -262,7 +221,6 @@
  gap: var(--space-6);
 }

-.featured-strip,
 .catalog-panel {
  display: grid;
  gap: var(--space-5);
@@ -286,7 +244,6 @@
  white-space: nowrap;
 }

-.featured-grid,
 .product-grid {
  display: grid;
  gap: var(--space-5);
@@ -296,13 +253,12 @@
 .skeleton-card {
  min-height: 400px;
  border-radius: 1.1rem;
-  background:
-    linear-gradient(
-      110deg,
-      rgba(255, 255, 255, 0.7) 8%,
-      rgba(238, 235, 226, 0.95) 18%,
-      rgba(255, 255, 255, 0.7) 33%
-    );
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.7) 8%,
+    rgba(238, 235, 226, 0.95) 18%,
+    rgba(255, 255, 255, 0.7) 33%
+  );
  background-size: 220% 100%;
  animation: skeleton 1.35s linear infinite;
 }
@@ -314,7 +270,6 @@
 }

@media (max-width: 1080px) {
-  .shop-hero-grid,
  .shop-layout {
    grid-template-columns: 1fr;
  }
@@ -325,7 +280,6 @@
 }

@media (max-width: 760px) {
-  .featured-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }
--- a/frontend/src/app/features/shop/shop-page.component.ts
+++ b/frontend/src/app/features/shop/shop-page.component.ts
@@ -11,7 +11,15 @@ import {
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { Router, RouterLink } from '@angular/router';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { catchError, combineLatest, finalize, forkJoin, map, of, switchMap, tap } from 'rxjs';
+import {
+  catchError,
+  combineLatest,
+  finalize,
+  forkJoin,
+  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';
@@ -57,7 +65,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);
@@ -69,7 +76,9 @@ export class ShopPageComponent {
    () => this.selectedCategory()?.slug ?? this.categorySlug() ?? null,
  );
  readonly cartItems = computed(() =>
-    (this.cart()?.items ?? []).filter((item) => item.lineItemType === 'SHOP_PRODUCT'),
+    (this.cart()?.items ?? []).filter(
+      (item) => item.lineItemType === 'SHOP_PRODUCT',
+    ),
  );
  readonly cartHasItems = computed(() => this.cartItems().length > 0);

@@ -87,7 +96,9 @@ export class ShopPageComponent {

    combineLatest([
      toObservable(this.categorySlug, { injector: this.injector }),
-      toObservable(this.languageService.currentLang, { injector: this.injector }),
+      toObservable(this.languageService.currentLang, {
+        injector: this.injector,
+      }),
    ])
      .pipe(
        tap(() => {
@@ -98,18 +109,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',
              );
@@ -135,7 +140,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);
      });
  }
@@ -145,7 +149,9 @@ export class ShopPageComponent {
  }

  cartItemName(item: ShopCartItem): string {
-    return item.displayName || item.shopProductName || item.originalFilename || '-';
+    return (
+      item.displayName || item.shopProductName || item.originalFilename || '-'
+    );
  }

  cartItemVariant(item: ShopCartItem): string | null {
@@ -261,12 +267,14 @@ export class ShopPageComponent {
    }

    const title =
-      category.seoTitle || `${category.name} | ${this.translate.instant('SHOP.TITLE')} | 3D fab`;
+      category.seoTitle ||
+      `${category.name} | ${this.translate.instant('SHOP.TITLE')} | 3D fab`;
    const description =
      category.seoDescription ||
      category.description ||
      this.translate.instant('SHOP.CATALOG_META_DESCRIPTION');
-    const robots = category.indexable === false ? 'noindex, nofollow' : 'index, follow';
+    const robots =
+      category.indexable === false ? 'noindex, nofollow' : 'index, follow';

    this.seoService.applyPageSeo({
      title,
--- a/frontend/src/assets/i18n/it.json
+++ b/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",
--- a/frontend/src/styles/_ui.scss
+++ b/frontend/src/styles/_ui.scss
@@ -19,6 +19,30 @@
  font-size: 1.05rem;
 }

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

 .ui-inline-actions {
Author	SHA1	Message	Date
Joe Küng	5f815d8a54	fix(back-end) url construction for media	2026-03-10 12:42:26 +01:00
printcalc-ci	42e0e75d70	style: apply prettier formatting	2026-03-10 10:15:56 +00:00
Joe Küng	c24e27a9db	Merge remote-tracking branch 'origin/feat/shop' into feat/shop All checks were successful PR Checks / prettier-autofix (pull_request) Successful in 11s Details PR Checks / test-frontend (pull_request) Successful in 1m4s Details PR Checks / security-sast (pull_request) Successful in 29s Details PR Checks / test-backend (pull_request) Successful in 26s Details # Conflicts: # frontend/src/app/features/shop/shop-page.component.scss	2026-03-10 11:15:32 +01:00
Joe Küng	3d12ae4da4	feat(front-end): ui improvements and alligment	2026-03-10 11:15:25 +01:00
printcalc-ci	b9e6916dfe	style: apply prettier formatting	2026-03-10 09:54:16 +00:00
Joe Küng	7cd9ef53b5	Merge remote-tracking branch 'origin/feat/shop' into feat/shop All checks were successful PR Checks / prettier-autofix (pull_request) Successful in 11s Details PR Checks / security-sast (pull_request) Successful in 30s Details PR Checks / test-backend (pull_request) Successful in 26s Details PR Checks / test-frontend (pull_request) Successful in 1m1s Details # 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	2026-03-10 10:53:42 +01:00
Joe Küng	e747a9820e	feat(front-end): back-office desing improvements	2026-03-10 10:53:30 +01:00
Joe Küng	ba6940e64b	Merge branch 'dev' into feat/shop All checks were successful PR Checks / prettier-autofix (pull_request) Successful in 8s Details PR Checks / security-sast (pull_request) Successful in 29s Details PR Checks / test-backend (pull_request) Successful in 27s Details PR Checks / test-frontend (pull_request) Successful in 58s Details	2026-03-10 09:21:28 +01:00
printcalc-ci	4342e9b1b1	style: apply prettier formatting	2026-03-10 07:32:17 +00:00
Joe Küng	77d7bdb265	fix(back-end): img convert All checks were successful Build and Deploy / test-backend (push) Successful in 26s Details Build and Deploy / test-frontend (push) Successful in 1m1s Details Build and Deploy / build-and-push (push) Successful in 39s Details Build and Deploy / deploy (push) Successful in 8s Details	2026-03-09 20:04:21 +01:00
Joe Küng	cd2666d8e2	Merge pull request 'feat/shop' (#35 ) from feat/shop into dev All checks were successful Build and Deploy / test-backend (push) Successful in 25s Details Build and Deploy / test-frontend (push) Successful in 59s Details Build and Deploy / build-and-push (push) Successful in 28s Details Build and Deploy / deploy (push) Successful in 10s Details Reviewed-on: #35	2026-03-09 19:31:12 +01:00