bundle page: split desktop layout (wide image left, copy right)

Reverts the full-bleed background-banner desktop hero. Desktop uses
a 1.4fr / 1fr grid: image column gets the heavier ratio so the 16:9
landscape source has room for its full composition; copy + items +
purchase cluster sits in the right column. Back button stays in its
own row above the hero on every viewport — no overlay.

BundleCard now uses RouterLink for internal hrefs (was rendering a
plain <a>, which triggered a hard navigation and lost vue-router's
saved scroll position when the user hit back from a bundle page).

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

dist/assets/BundleCard-D1vhTteW.js

@@ -1 +0,0 @@
-import{C as e,G as t,O as n,T as r,c as i,ft as a,j as o,l as s,m as c,o as l,p as u,r as d,s as f,u as p,ut as m}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as h}from"./Icon-BCo6-bGH.js";import{t as g}from"./i18n-yr4x-3Jp.js";import{t as _}from"./Badge-DiccZCC_.js";import{t as v}from"./Button-D1Rp2Xe1.js";var y=[`src`,`alt`],b={class:`flex flex-col gap-1.5`},x={key:0,class:`text-xs font-semibold tracking-label text-muted uppercase`},S={class:`flex flex-col gap-1.5`},C={key:0,class:`text-sm text-muted tracking-label`},w={class:`flex flex-col gap-0.5`},T={class:`text-xs tracking-label text-muted uppercase`},E={class:`font-display text-2xl font-normal text-brand leading-none`},D={key:0,class:`text-xs text-muted mt-1`},O={key:1,class:`text-xs font-semibold tracking-label uppercase text-danger mt-1`},k=3,A={__name:`BundleCard`,props:{name:{type:String,required:!0},items:{type:Array,required:!0},price:{type:Number,required:!0},memberPrice:{type:Number,default:null},usage:{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`].includes(e)},layout:{type:String,default:`vertical`,validator:e=>[`vertical`,`horizontal`].includes(e)},inStock:{type:Boolean,default:!0},currency:{type:String,default:`€`},href:{type:String,default:``},imageFit:{type:String,default:`cover`,validator:e=>[`contain`,`cover`].includes(e)}},emits:[`add`],setup(A){let j=A,{t:M}=g(),N={paper:{surface:`bg-paper`,media:`bg-cream`,border:`border-line`},cream:{surface:`bg-cream`,media:`bg-paper`,border:`border-line`}},P=l(()=>N[j.tone]);function F(e){return`${j.currency} ${e.toFixed(2).replace(`.`,`,`)}`}let I=l(()=>F(j.price)),L=l(()=>j.memberPrice==null?``:F(j.memberPrice)),R=l(()=>j.items.slice(0,k)),z=l(()=>Math.max(0,j.items.length-k));return(l,g)=>(e(),p(`article`,{class:m([`group flex overflow-hidden rounded-md border transition-all duration-base ease-out`,A.layout===`horizontal`?`flex-col md:flex-row`:`flex-col`,P.value.surface,P.value.border,`hover:-translate-y-1 hover:shadow-md hover:border-brand-soft`])},[(e(),i(n(A.href?`a`:`div`),{href:A.href||null,class:m([`relative block overflow-hidden`,A.layout===`horizontal`?`aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]`:`aspect-[4/3]`,P.value.media])},{default:o(()=>[A.badge?(e(),i(_,{key:0,variant:A.badgeVariant,class:`absolute top-4 left-4 z-[1]`},{default:o(()=>[u(a(A.badge),1)]),_:1},8,[`variant`])):s(``,!0),f(`img`,{src:A.image,alt:A.imageAlt||A.name,loading:`lazy`,decoding:`async`,class:m([`absolute inset-0 w-full h-full transition-transform duration-slow ease-out group-hover:scale-105`,A.imageFit===`cover`?`object-cover`:`object-contain `+(A.layout===`horizontal`?`p-6 md:p-5`:`p-8`)])},null,10,y)]),_:1},8,[`href`,`class`])),f(`div`,{class:m([`flex flex-col gap-4 p-6`,A.layout===`horizontal`?`md:p-6 md:flex-1`:``])},[f(`div`,b,[A.usage?(e(),p(`span`,x,a(A.usage),1)):s(``,!0),(e(),i(n(A.href?`a`:`h3`),{href:A.href||null,class:m([`font-display text-xl font-normal leading-tight text-ink`,A.href?`hover:text-brand transition-colors duration-base`:``])},{default:o(()=>[u(a(A.name),1)]),_:1},8,[`href`,`class`]))]),f(`ul`,S,[(e(!0),p(d,null,r(R.value,t=>(e(),p(`li`,{key:t,class:`text-sm text-ink/80 leading-relaxed`},a(t),1))),128)),z.value>0?(e(),p(`li`,C,`+ `+a(z.value)+` `+a(t(M)(`bundles.card.moreItems`)),1)):s(``,!0)]),f(`div`,{class:m([`mt-auto pt-4 border-t border-line flex gap-3`,A.layout===`horizontal`?`flex-col sm:flex-row sm:items-end sm:justify-between`:`flex-col`])},[f(`div`,w,[f(`span`,T,a(t(M)(`bundles.card.priceLabel`)),1),f(`span`,E,a(I.value),1),L.value?(e(),p(`span`,D,a(t(M)(`bundles.card.memberPrefix`))+` `+a(L.value),1)):s(``,!0),A.inStock?s(``,!0):(e(),p(`span`,O,a(t(M)(`ds.product.outOfStock`)),1))]),c(v,{variant:`primary`,size:`md`,block:A.layout===`vertical`,disabled:!A.inStock,onClick:g[0]||=e=>l.$emit(`add`)},{before:o(()=>[c(h,{name:`plus`,size:16})]),default:o(()=>[u(` `+a(t(M)(`ds.buttons.addToCart`)),1)]),_:1},8,[`block`,`disabled`])],2)],2)],2))}};export{A as t};

dist/assets/BundleCardSection-Bj-tv8Vn.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,y as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./i18n-yr4x-3Jp.js";import{t as p}from"./BundleCard-D1vhTteW.js";import{t as m}from"./SectionShell-CyPmh1h8.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,h,i(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(i(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,i(E.value),1)])):o(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,i(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,i(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
+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,y as d}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{t as f}from"./i18n-yr4x-3Jp.js";import{t as p}from"./BundleCard-DAFU1tCy.js";import{t as m}from"./SectionShell-CyPmh1h8.js";var h={class:`eyebrow mb-5`},g={class:`grid sm:grid-cols-2 lg:grid-cols-3 gap-6`},_={key:0,class:`mt-5 text-sm text-muted`},v={class:`font-mono text-[12px]`},y={class:`grid gap-6`},b={class:`eyebrow mb-5`},x={class:`grid sm:grid-cols-2 gap-6`},S={class:`eyebrow mb-5`},C=`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,w={__name:`BundleCardSection`,setup(w){let{t:T}=f(),E=e(``);function D(e){E.value=e,setTimeout(()=>{E.value===e&&(E.value=``)},2e3)}let O={name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:C,imageAlt:`Haushalts-Bundle`},k={...O,items:[...O.items,`1× Holste Wasch-Soda 500 g`,`1× Allzweckreiniger 750 ml`]};return(e,f)=>(t(),r(m,{eyebrow:n(T)(`ds.eyebrow.components`),title:n(T)(`ds.bundleCard.title`),description:n(T)(`ds.bundleCard.description`)},{default:a(()=>[l(`section`,null,[l(`h2`,h,i(n(T)(`ds.heading.default`)),1),l(`div`,g,[s(p,d(O,{onAdd:f[0]||=e=>D(`default`)}),null,16),s(p,d(O,{badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[1]||=e=>D(`bestseller`)}),null,16),s(p,d(O,{tone:`cream`,onAdd:f[2]||=e=>D(`cream`)}),null,16)]),E.value?(t(),u(`p`,_,[c(i(n(T)(`ds.product.added`))+`: `,1),l(`code`,v,i(E.value),1)])):o(``,!0)]),l(`section`,null,[f[5]||=l(`h2`,{class:`eyebrow mb-5`},`Horizontal layout`,-1),f[6]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},[c(` Passed as `),l(`code`,{class:`font-mono text-[12px]`},`layout="horizontal"`),c(`. From `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` up the media takes ~38% of the row and the body fills the rest, with the CTA inlined next to the price block. Below `),l(`code`,{class:`font-mono text-[12px]`},`md`),c(` it collapses back to vertical. `)],-1),l(`div`,y,[s(p,d(O,{layout:`horizontal`,badge:`Bestseller`,"badge-variant":`accent`,onAdd:f[3]||=e=>D(`horizontal`)}),null,16)])]),l(`section`,null,[l(`h2`,b,i(n(T)(`ds.heading.states`)),1),f[7]||=l(`p`,{class:`text-sm text-muted mb-5 max-w-2xl`},` Same bundle across both cards — only the state being demonstrated changes. `,-1),l(`div`,x,[s(p,d(O,{"in-stock":!1}),null,16),s(p,d(k,{onAdd:f[4]||=e=>D(`overflow`)}),null,16)]),f[8]||=l(`p`,{class:`mt-3 text-sm text-muted max-w-2xl`},[c(` More than three items collapse the tail into a `),l(`code`,{class:`font-mono text-[12px]`},`+ N weitere`),c(` line so the card stays scannable. `)],-1)]),l(`section`,null,[l(`h2`,S,i(n(T)(`ds.heading.usage`)),1),f[9]||=l(`div`,{class:`rounded-md border border-line bg-paper p-6 font-mono text-[12px] text-ink`},[l(`pre`,{class:`whitespace-pre-wrap`},`<BundleCard
   name="Haushalts-Bundle"
   usage="2–3× pro Quartal empfohlen"
   :items="[

dist/assets/BundlesPreview-CkVzcOH5.js

@@ -1 +1 @@
-import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-yr4x-3Jp.js";import{t as s}from"./Bundles-BkWBjhBU.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};
+import{C as e,G as t,m as n,o as r,u as i}from"./runtime-core.esm-bundler-DTXUv7Wx.js";import{a}from"./vue-router-Cyqru1db.js";import{t as o}from"./i18n-yr4x-3Jp.js";import{t as s}from"./Bundles-vXh1yjVW.js";var c={class:`min-h-screen bg-surface`},l={__name:`BundlesPreview`,setup(l){let{t:u}=o(),d=a(),f=r(()=>d.query.layout===`stacked`?`stacked`:`sidebar`),p=[{id:`haushalt`,name:`Haushalts-Bundle`,usage:`2–3× pro Quartal empfohlen`,items:[`1× Kaiser-Natron Pulver 250 g`,`1× Allzweck-Spray 500 ml`,`1× Spülmittel 500 ml`],price:24.9,memberPrice:21.17,image:`/products/kaiser-natron-pulver-250-g-grosspackung.webp`,imageAlt:`Haushalts-Bundle mit Kaiser-Natron`,badge:`Bestseller`,badgeVariant:`accent`},{id:`waesche`,name:`Wäsche & Pflege`,usage:`1–2× pro Quartal`,items:[`1× Holste Wasch-Soda 500 g`,`1× Gazelle Wäschestärke 1 l`,`1× Linda Fleckenweg 200 ml`],price:22.9,memberPrice:19.47,image:`/products/holste-wasch-soda-500-g-beutel.webp`,imageAlt:`Wäsche & Pflege Bundle`},{id:`wohlfuehl`,name:`Wohlfühl-Bundle`,usage:`1× pro Quartal`,items:[`1× Kaiser-Natron Tabletten 100 g`,`1× Kaiser-Natron Bad 500 g`,`1× Kaiser-Natron Fußbad 500 g`],price:29.9,memberPrice:25.42,image:`/products/kaiser-natron-bad-500-g.webp`,imageAlt:`Wohlfühl-Bundle`}],m=r(()=>[u(`bundles.benefit.1.title`),u(`bundles.benefit.2.title`),u(`bundles.benefit.3.title`)]);return(r,a)=>(e(),i(`div`,c,[n(s,{layout:f.value,bundles:p,headline:t(u)(`bundles.headline.a`),"headline-em":t(u)(`bundles.headline.em`),sub:t(u)(`bundles.sub`),benefits:m.value,"join-cta":t(u)(`bundles.joinCta`)},null,8,[`layout`,`headline`,`headline-em`,`sub`,`benefits`,`join-cta`])]))}};export{l as default};

dist/index.html

@@ -12,13 +12,13 @@
       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-B6uVUjfo.js"></script>
+    <script type="module" crossorigin src="/assets/index-DsKQSjeC.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">
     <link rel="modulepreload" crossorigin href="/assets/pinia-D94NEbtV.js">
     <link rel="modulepreload" crossorigin href="/assets/vue-router-Cyqru1db.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CnQ8PUQ-.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-CrZZ2yxG.css">
   </head>
   <body>
     <div id="app"></div>

src/design-system/components/BundleCard.vue

@@ -1,10 +1,19 @@
 <script setup>
 import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
 import Button from './Button.vue'
 import Badge from './Badge.vue'
 import Icon from './Icon.vue'
 import { useI18n } from '@/i18n/index.js'
 
+// Internal SPA paths render as <RouterLink> so vue-router's saved
+// scroll position is restored when the user hits back from the
+// detail page. External / hash / mailto links keep the plain <a>
+// behaviour. Mirrors the ProductCard pattern.
+function isInternalPath(href) {
+  return typeof href === 'string' && href.startsWith('/') && !href.startsWith('//')
+}
+
 const props = defineProps({
   name: { type: String, required: true },
   // Each item is a short label like "1× Kaiser-Natron Pulver 250g".
@@ -89,8 +98,39 @@ const extraCount = computed(() => Math.max(0, props.items.length - MAX_ITEMS))
   >
     <!-- Media. In horizontal mode the media column is a tighter ~38% of the
          row from md up and drops its mobile aspect ratio so flex-stretch
-         can match the body height. -->
+         can match the body height. Internal SPA paths use RouterLink
+         so back-navigation restores the home grid's scroll position. -->
+    <RouterLink
+      v-if="href && isInternalPath(href)"
+      :to="href"
+      :class="[
+        'relative block overflow-hidden',
+        layout === 'horizontal'
+          ? 'aspect-[4/3] md:aspect-auto md:w-[38%] md:shrink-0 md:min-h-[300px]'
+          : 'aspect-[4/3]',
+        tone.media,
+      ]"
+    >
+      <Badge
+        v-if="badge"
+        :variant="badgeVariant"
+        class="absolute top-4 left-4 z-[1]"
+      >{{ badge }}</Badge>
+      <img
+        :src="image"
+        :alt="imageAlt || name"
+        loading="lazy"
+        decoding="async"
+        :class="[
+          'absolute inset-0 w-full h-full transition-transform duration-slow ease-out group-hover:scale-105',
+          imageFit === 'cover'
+            ? 'object-cover'
+            : 'object-contain ' + (layout === 'horizontal' ? 'p-6 md:p-5' : 'p-8'),
+        ]"
+      />
+    </RouterLink>
     <component
+      v-else
       :is="href ? 'a' : 'div'"
       :href="href || null"
       :class="[
@@ -132,7 +172,13 @@ const extraCount = computed(() => Math.max(0, props.items.length - MAX_ITEMS))
           v-if="usage"
           class="text-xs font-semibold tracking-label text-muted uppercase"
         >{{ usage }}</span>
+        <RouterLink
+          v-if="href && isInternalPath(href)"
+          :to="href"
+          class="font-display text-xl font-normal leading-tight text-ink hover:text-brand transition-colors duration-base"
+        >{{ name }}</RouterLink>
         <component
+          v-else
           :is="href ? 'a' : 'h3'"
           :href="href || null"
           :class="[

src/pages/BundlePage.vue

@@ -182,10 +182,8 @@ onBeforeUnmount(() => {
   </main>
 
   <main v-else class="bg-brand text-cream">
-    <!-- Mobile-only back button row. On desktop the back button is
-         absolutely positioned over the hero image (see below) so the
-         layout doesn't waste a row of brand-green above the artwork. -->
-    <div class="lg:hidden mx-auto w-full max-w-7xl px-6 md:px-10 pt-6">
+    <!-- Back button row — sits above the hero on every viewport. -->
+    <div class="mx-auto w-full max-w-7xl px-6 md:px-10 lg:px-16 pt-6">
       <button
         type="button"
         class="inline-flex items-center gap-2 text-sm tracking-label uppercase text-cream/75 hover:text-cream transition-colors"
@@ -197,11 +195,11 @@ onBeforeUnmount(() => {
     </div>
 
     <!-- =========================================================
-         DESKTOP (lg+) — bundle image as a full-bleed hero background;
-         all copy + purchase actions overlay on the right side. The
-         landscape source art (≈ 16:9) drives the fold; a left → right
-         brand-green gradient softens the right edge so the cream copy
-         stays legible regardless of what the image carries underneath.
+         DESKTOP (lg+) — bundle image as a full-bleed hero background
+         filling the fold. Heavy left → right brand-green gradient
+         keeps the cream copy on the right legible without painting
+         an opaque sidebar over the artwork. Back button overlays the
+         top-left corner so we don't waste a row of green above.
          ========================================================= -->
     <section
       class="hidden lg:block relative overflow-hidden min-h-[calc(100svh-var(--nav-h))]"
@@ -213,15 +211,13 @@ onBeforeUnmount(() => {
         decoding="async"
         class="absolute inset-0 w-full h-full object-cover"
       />
-      <!-- Legibility gradient — heavy on the right so the cream
-           copy reads cleanly regardless of the underlying photo.
-           Stops: image fully visible until 25 %, ramps to opaque
-           brand-green by 70 %, solid green from there to the right
-           edge. Adjust the second / third stops to soften or
-           sharpen the transition. -->
+      <!-- Severe legibility gradient — image stays clean for the
+           first ~20%, then ramps fast to opaque brand-green by the
+           midpoint, with the right half fully solid so the copy
+           reads as if it were on the brand surface. -->
       <div
         aria-hidden="true"
-        class="absolute inset-0 bg-gradient-to-r from-brand/0 from-25% via-brand/90 via-65% to-brand to-80%"
+        class="absolute inset-0 bg-gradient-to-r from-brand/0 from-20% via-brand via-50% to-brand"
       />
 
       <Badge
@@ -230,9 +226,8 @@ onBeforeUnmount(() => {
         class="absolute top-6 left-6 z-[1] shadow-sm"
       >{{ bundle.badge }}</Badge>
 
-      <!-- Back button overlaid on the hero (top-left corner of the
-           contained max-width column so it lines up with the rest
-           of the desktop chrome). -->
+      <!-- Back button overlaid on the hero, lined up with the
+           contained max-width column. -->
       <div class="absolute top-6 left-0 right-0 z-10 mx-auto w-full max-w-7xl px-10 lg:px-16">
         <button
           type="button"
@@ -244,12 +239,12 @@ onBeforeUnmount(() => {
         </button>
       </div>
 
-      <!-- Foreground copy + purchase cluster, pinned to the right
-           half of the section and vertically centred in the fold. -->
+      <!-- Foreground copy + purchase cluster on the right, vertically
+           centred in the fold. -->
       <div class="relative z-10 mx-auto w-full max-w-7xl h-full px-10 lg:px-16">
         <div class="flex h-full min-h-[calc(100svh-var(--nav-h))] items-center justify-end">
           <div class="w-full max-w-md xl:max-w-lg flex flex-col gap-6 text-cream">
-            <p v-if="bundle.usage" class="text-xs tracking-label uppercase text-cream/80">{{ bundle.usage }}</p>
+            <p v-if="bundle.usage" class="text-xs tracking-label uppercase text-cream/85">{{ bundle.usage }}</p>
             <h1 class="font-display font-normal leading-[1.05] tracking-tight text-cream text-[2.5rem] xl:text-[3rem] 2xl:text-[3.5rem]">
               {{ bundle.name }}
             </h1>
@@ -258,7 +253,7 @@ onBeforeUnmount(() => {
             </p>
 
             <div class="flex flex-col gap-2">
-              <p class="text-xs tracking-label uppercase text-cream/80">{{ t('bundle.items') }}</p>
+              <p class="text-xs tracking-label uppercase text-cream/85">{{ t('bundle.items') }}</p>
               <ul class="flex flex-col gap-1.5">
                 <li
                   v-for="(item, i) in resolvedItems"
@@ -278,7 +273,7 @@ onBeforeUnmount(() => {
 
             <div class="flex flex-col gap-1">
               <span class="font-display text-3xl xl:text-4xl text-cream">{{ priceLabel }}</span>
-              <span v-if="memberPriceLabel" class="text-sm text-cream/80">
+              <span v-if="memberPriceLabel" class="text-sm text-cream/85">
                 {{ t('bundle.memberPrice') }}
                 <span class="text-accent font-medium">{{ memberPriceLabel }}</span>
               </span>