product card: restore original cream tone (cream body, paper media)

The cream tone was flipped to paper body / cream media earlier so the
homepage 3-product teaser could share its cream section ground. That
broke the shop catalogue: cards on cream sections lost their image
contrast and blended into the alternating cream / surface bands.

Cream tone now back to its original mapping (cream body, paper media)
— catalogue cards pop on every section. The new `brand` tone (paper
body, brand-green media) stays exclusive to the homepage teaser, which
is the only surface that asked for green-washed media.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dist/assets/ProductCard-DNhhSnRa.js

@@ -1 +1 @@
-import{C as e,G as t,O as n,c as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-BCo6-bGH.js";import{t as h}from"./i18n-XDSWEyNo.js";import{t as g}from"./Badge-DiccZCC_.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v=[`src`,`alt`],y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={class:`text-sm text-muted tracking-label min-h-[1lh]`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``},ctaVariant:{type:String,default:`primary`}},emits:[`add`],setup(E){function D(e){return typeof e==`string`&&e.startsWith(`/`)&&!e.startsWith(`//`)}let O=E,{t:k}=h(),A={paper:{surface:`bg-paper`,media:`bg-paper`,border:`border-line`},cream:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},brand:{surface:`bg-paper`,media:`bg-brand`,border:`border-line`}},j=c(()=>A[O.tone]),M=c(()=>typeof O.price==`number`?`${O.currency} ${O.price.toFixed(2).replace(`.`,`,`)}`:`${O.currency} ${O.price}`);return(c,h)=>(e(),d(`article`,{class:f([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,j.value.surface,j.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,v)]),_:1},8,[`to`,`class`])):(e(),r(n(E.href?`a`:`div`),{key:1,href:E.href||null,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),u(`div`,b,[u(`div`,x,[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,`hover:text-brand transition-colors duration-base`])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`to`])):(e(),r(n(E.href?`a`:`h3`),{key:1,href:E.href||null,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,E.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`href`,`class`])),u(`p`,S,i(E.size||`\xA0`),1)]),u(`div`,C,[u(`span`,w,i(M.value),1),E.inStock?o(``,!0):(e(),d(`span`,T,i(t(k)(`ds.product.outOfStock`)),1))]),s(_,{variant:E.ctaVariant,size:`md`,block:``,disabled:!E.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:a(()=>[s(m,{name:`plus`,size:16})]),default:a(()=>[l(` `+i(t(k)(`ds.buttons.addToCart`)),1)]),_:1},8,[`variant`,`disabled`])])],2))}};export{E as t};
+import{C as e,G as t,O as n,c as r,ft as i,j as a,l as o,m as s,o as c,p as l,s as u,u as d,ut as f}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as p}from"./vue-router-Cyqru1db.js";import{t as m}from"./Icon-BCo6-bGH.js";import{t as h}from"./i18n-XDSWEyNo.js";import{t as g}from"./Badge-DiccZCC_.js";import{t as _}from"./Button-D1Rp2Xe1.js";var v=[`src`,`alt`],y=[`src`,`alt`],b={class:`flex flex-col gap-3 p-6`},x={class:`flex flex-col gap-1`},S={class:`text-sm text-muted tracking-label min-h-[1lh]`},C={class:`mt-auto flex items-center justify-between gap-3 pt-2`},w={class:`font-display text-2xl font-normal text-brand`},T={key:0,class:`text-xs font-semibold tracking-label uppercase text-danger`},E={__name:`ProductCard`,props:{title:{type:String,required:!0},size:{type:String,default:``},price:{type:[String,Number],required:!0},currency:{type:String,default:`€`},image:{type:String,required:!0},imageAlt:{type:String,default:``},badge:{type:String,default:``},badgeVariant:{type:String,default:`accent`,validator:e=>[`neutral`,`brand`,`accent`,`subtle`,`success`,`warning`,`danger`].includes(e)},tone:{type:String,default:`paper`,validator:e=>[`paper`,`cream`,`brand`].includes(e)},inStock:{type:Boolean,default:!0},href:{type:String,default:``},ctaVariant:{type:String,default:`primary`}},emits:[`add`],setup(E){function D(e){return typeof e==`string`&&e.startsWith(`/`)&&!e.startsWith(`//`)}let O=E,{t:k}=h(),A={paper:{surface:`bg-paper`,media:`bg-paper`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`},brand:{surface:`bg-paper`,media:`bg-brand`,border:`border-line`}},j=c(()=>A[O.tone]),M=c(()=>typeof O.price==`number`?`${O.currency} ${O.price.toFixed(2).replace(`.`,`,`)}`:`${O.currency} ${O.price}`);return(c,h)=>(e(),d(`article`,{class:f([`group flex flex-col overflow-hidden rounded-md border transition-all duration-base ease-out`,j.value.surface,j.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,v)]),_:1},8,[`to`,`class`])):(e(),r(n(E.href?`a`:`div`),{key:1,href:E.href||null,class:f([`relative flex items-center justify-center h-40 md:h-48 overflow-hidden`,j.value.media])},{default:a(()=>[E.badge?(e(),r(g,{key:0,variant:E.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:a(()=>[l(i(E.badge),1)]),_:1},8,[`variant`])):o(``,!0),u(`img`,{src:E.image,alt:E.imageAlt||E.title,loading:`lazy`,decoding:`async`,class:`max-w-[55%] max-h-[80%] object-contain transition-transform duration-slow ease-out group-hover:scale-105`},null,8,y)]),_:1},8,[`href`,`class`])),u(`div`,b,[u(`div`,x,[E.href&&D(E.href)?(e(),r(t(p),{key:0,to:E.href,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,`hover:text-brand transition-colors duration-base`])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`to`])):(e(),r(n(E.href?`a`:`h3`),{key:1,href:E.href||null,class:f([`font-display text-xl font-normal leading-tight text-ink min-h-[2lh]`,E.href?`hover:text-brand transition-colors duration-base`:``])},{default:a(()=>[l(i(E.title),1)]),_:1},8,[`href`,`class`])),u(`p`,S,i(E.size||`\xA0`),1)]),u(`div`,C,[u(`span`,w,i(M.value),1),E.inStock?o(``,!0):(e(),d(`span`,T,i(t(k)(`ds.product.outOfStock`)),1))]),s(_,{variant:E.ctaVariant,size:`md`,block:``,disabled:!E.inStock,onClick:h[0]||=e=>c.$emit(`add`)},{before:a(()=>[s(m,{name:`plus`,size:16})]),default:a(()=>[l(` `+i(t(k)(`ds.buttons.addToCart`)),1)]),_:1},8,[`variant`,`disabled`])])],2))}};export{E as t};

dist/assets/ProductsSection-ZFrchYue.js

@@ -1,4 +1,4 @@
-import{B as e,C as t,G as n,c as r,ft as i,j as a,l as o,m as s,p as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-XDSWEyNo.js";import{t as f}from"./ProductCard-DOWZ0r0v.js";import{t as p}from"./SectionShell-CyPmh1h8.js";var m={class:`eyebrow mb-5`},h={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},g={key:0,class:`mt-5 text-sm text-muted`},_={class:`font-mono text-[12px]`},v={class:`eyebrow mb-5`},y={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},b={class:`eyebrow mb-5`},x=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,S={__name:`ProductsSection`,setup(S){let{t:C}=d(),w=e(``);function T(e){w.value=e,setTimeout(()=>{w.value===e&&(w.value=``)},2e3)}return(e,d)=>(t(),r(p,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.product.title`),description:n(C)(`ds.product.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,m,i(n(C)(`ds.heading.default`)),1),l(`div`,h,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:d[0]||=e=>T(`pulver-250`)}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:d[1]||=e=>T(`pulver-250-featured`)},null,8,[`badge`]),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,tone:`cream`,href:`#`,onAdd:d[2]||=e=>T(`pulver-250-cream`)})]),w.value?(t(),u(`p`,g,[c(i(n(C)(`ds.product.added`))+`: `,1),l(`code`,_,i(w.value),1)])):o(``,!0)]),l(`section`,null,[l(`h2`,v,i(n(C)(`ds.heading.states`)),1),l(`div`,y,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"in-stock":!1}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),l(`section`,null,[l(`h2`,b,i(n(C)(`ds.heading.usage`)),1),d[3]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
+import{B as e,C as t,G as n,c as r,ft as i,j as a,l as o,m as s,p as c,s as l,u}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as d}from"./i18n-XDSWEyNo.js";import{t as f}from"./ProductCard-DNhhSnRa.js";import{t as p}from"./SectionShell-CyPmh1h8.js";var m={class:`eyebrow mb-5`},h={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},g={key:0,class:`mt-5 text-sm text-muted`},_={class:`font-mono text-[12px]`},v={class:`eyebrow mb-5`},y={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},b={class:`eyebrow mb-5`},x=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,S={__name:`ProductsSection`,setup(S){let{t:C}=d(),w=e(``);function T(e){w.value=e,setTimeout(()=>{w.value===e&&(w.value=``)},2e3)}return(e,d)=>(t(),r(p,{eyebrow:n(C)(`ds.eyebrow.components`),title:n(C)(`ds.product.title`),description:n(C)(`ds.product.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,m,i(n(C)(`ds.heading.default`)),1),l(`div`,h,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"image-alt":`Kaiser-Natron Pulver 250 g Großpackung`,href:`#`,onAdd:d[0]||=e=>T(`pulver-250`)}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.featured`),"badge-variant":`accent`,href:`#`,onAdd:d[1]||=e=>T(`pulver-250-featured`)},null,8,[`badge`]),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,tone:`cream`,href:`#`,onAdd:d[2]||=e=>T(`pulver-250-cream`)})]),w.value?(t(),u(`p`,g,[c(i(n(C)(`ds.product.added`))+`: `,1),l(`code`,_,i(w.value),1)])):o(``,!0)]),l(`section`,null,[l(`h2`,v,i(n(C)(`ds.heading.states`)),1),l(`div`,y,[s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,"in-stock":!1}),s(f,{title:`Kaiser-Natron® Pulver`,size:`250 g Großpackung`,price:4.49,image:x,badge:n(C)(`ds.badges.newRelease`),"badge-variant":`brand`,href:`#`},null,8,[`badge`])])]),l(`section`,null,[l(`h2`,b,i(n(C)(`ds.heading.usage`)),1),d[3]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<ProductCard
   title="Kaiser-Natron® Pulver"
   size="250 g Großpackung"
   :price="4.49"

dist/index.html

@@ -12,7 +12,7 @@
       href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-DAGMipBS.js"></script>
+    <script type="module" crossorigin src="/assets/index-C2dGxIW9.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
     <link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">

src/design-system/components/ProductCard.vue

@@ -46,16 +46,16 @@ defineEmits(['add'])
 
 const { t } = useI18n()
 
-// Each tone pairs a media wash (the image area at the top of the
-// card) with a body surface (the title / price / CTA cluster
-// underneath).
+// Each tone pairs a body surface (title / price / CTA cluster) with
+// a media wash (the image area on top).
 //   · `paper` — historic all-white card.
-//   · `cream` — cream image wash + white body. Homepage ProductTeaser
-//      uses this so the product silhouettes share the cream surface
-//      of the surrounding section.
-//   · `brand` — brand-green image wash + white body. Shop page uses
-//      this so the products read as the brand stage and the cards
-//      pop off the cream catalogue surface.
+//   · `cream` — cream body + paper (white) media. Catalogue default.
+//      The white image area always pops regardless of section ground,
+//      and the cream body matches sections that share that wash.
+//   · `brand` — paper body + brand-green media. Used by the homepage
+//      3-product teaser so the product silhouettes sit on the brand
+//      stage while the body / price / CTA cluster reads as a clean
+//      paper card. Catalogue product cards stay on `cream`.
 const tones = {
   paper: {
     surface: 'bg-paper',
@@ -63,8 +63,8 @@ const tones = {
     border: 'border-line',
   },
   cream: {
-    surface: 'bg-paper',
-    media: 'bg-cream',
+    surface: 'bg-cream',
+    media: 'bg-paper',
     border: 'border-line',
   },
   brand: {