diff --git a/components/configurator/door-3d-enhanced.tsx b/components/configurator/door-3d-enhanced.tsx
index 4e09273..fad1eea 100644
--- a/components/configurator/door-3d-enhanced.tsx
+++ b/components/configurator/door-3d-enhanced.tsx
@@ -54,27 +54,25 @@ function SteelMaterialTextured({ color, finish }: { color: string; finish: strin
       <meshStandardMaterial
         map={texture}
         color={color}
-        roughness={0.6}
-        metalness={0.7}
+        roughness={0.7}
+        metalness={0.6}
         envMapIntensity={1.5}
       />
     );
   } catch (error) {
-    // Fallback to solid color if texture fails
     return <SteelMaterialFallback color={color} />;
   }
 }
 
 /**
  * Fallback Steel Material (Solid Color)
- * Used when textures fail to load or as initial state
  */
 function SteelMaterialFallback({ color }: { color: string }) {
   return (
     <meshStandardMaterial
       color={color}
-      roughness={0.6}
-      metalness={0.7}
+      roughness={0.7}
+      metalness={0.6}
       envMapIntensity={1.5}
     />
   );
@@ -88,12 +86,12 @@ const GlassMaterial = () => (
   <meshPhysicalMaterial
     transmission={0.98}
     roughness={0.05}
-    thickness={0.5}
+    thickness={0.007}
     ior={1.5}
     color="#eff6ff"
     transparent
     opacity={0.98}
-    envMapIntensity={0.8}
+    envMapIntensity={1.0}
   />
 );
 
diff --git a/components/configurator/scene.tsx b/components/configurator/scene.tsx
index 78255ba..add7578 100644
--- a/components/configurator/scene.tsx
+++ b/components/configurator/scene.tsx
@@ -230,16 +230,16 @@ export function Scene3D() {
       {/* Premium Studio Lighting */}
       <Lighting />
 
-      {/* Studio Environment for photorealistic steel reflections */}
-      <Environment preset="studio" environmentIntensity={1.0} />
+      {/* Apartment Environment for warm, realistic steel reflections */}
+      <Environment preset="apartment" blur={0.6} environmentIntensity={1.2} />
 
       {/* High-Resolution Contact Shadows for grounding */}
       <ContactShadows
         position={[0, 0.01, 0]}
         opacity={0.6}
-        scale={15}
-        blur={2}
-        far={2}
+        scale={20}
+        blur={2.5}
+        far={4}
         resolution={2048}
       />
 
diff --git a/components/offerte/step-dimensions.tsx b/components/offerte/step-dimensions.tsx
index 0d3b92f..08e3711 100644
--- a/components/offerte/step-dimensions.tsx
+++ b/components/offerte/step-dimensions.tsx
@@ -150,6 +150,44 @@ export function StepDimensions() {
         />
       </div>
 
+      {/* Height Presets - Dutch Market Standards */}
+      <div>
+        <Label className="text-base font-bold text-[#1A2E2E]">
+          Standaard Hoogtes
+        </Label>
+        <p className="mb-3 text-sm text-gray-600">
+          Kies een standaard hoogte of stel handmatig in.
+        </p>
+        <div className="grid grid-cols-3 gap-2">
+          {[
+            { label: 'Renovatie', value: 2015, desc: '201.5 cm' },
+            { label: 'Nieuwbouw', value: 2315, desc: '231.5 cm' },
+            { label: 'Plafondhoog', value: 2500, desc: '250+ cm' },
+          ].map((preset) => {
+            const isActive = height === preset.value;
+            return (
+              <button
+                key={preset.value}
+                type="button"
+                onClick={() => setHeight(preset.value)}
+                className={`rounded-lg border-2 px-3 py-2.5 text-center transition-all ${
+                  isActive
+                    ? 'border-[#C4D668] bg-[#1A2E2E] text-white shadow-md'
+                    : 'border-gray-200 bg-white text-gray-700 hover:border-[#1A2E2E]/30 hover:shadow-sm'
+                }`}
+              >
+                <span className="block text-xs font-bold uppercase tracking-wide">
+                  {preset.label}
+                </span>
+                <span className={`block font-mono text-sm ${isActive ? 'text-[#C4D668]' : 'text-gray-500'}`}>
+                  {preset.desc}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
       {/* Height Control */}
       <div>
         <div className="mb-4 flex items-end justify-between">
diff --git a/components/offerte/step-product.tsx b/components/offerte/step-product.tsx
index 72929df..68e044f 100644
--- a/components/offerte/step-product.tsx
+++ b/components/offerte/step-product.tsx
@@ -4,6 +4,88 @@ import { useConfiguratorStore, type DoorType } from "@/lib/store";
 import { useFormContext } from "@/components/offerte/form-context";
 import { Check } from "lucide-react";
 
+// Door type visual icons (inline SVGs)
+function TaatsIcon({ selected }: { selected: boolean }) {
+  const stroke = selected ? "#C4D668" : "#1A2E2E";
+  const fill = selected ? "#C4D668" : "none";
+  return (
+    <svg viewBox="0 0 64 80" className="h-20 w-16">
+      {/* Door frame */}
+      <rect x="8" y="4" width="48" height="72" rx="2" fill="none" stroke={stroke} strokeWidth="2" />
+      {/* Glass */}
+      <rect x="14" y="10" width="36" height="60" rx="1" fill={selected ? "#C4D668" : "#e5e7eb"} opacity="0.2" />
+      {/* Pivot point (center) */}
+      <circle cx="32" cy="40" r="3" fill={fill} stroke={stroke} strokeWidth="1.5" />
+      {/* Rotation arrow */}
+      <path d="M 44 20 A 16 16 0 0 1 44 60" fill="none" stroke={stroke} strokeWidth="1.5" strokeDasharray="3 2" />
+      <polygon points="44,58 48,54 40,54" fill={stroke} />
+    </svg>
+  );
+}
+
+function ScharnierIcon({ selected }: { selected: boolean }) {
+  const stroke = selected ? "#C4D668" : "#1A2E2E";
+  const fill = selected ? "#C4D668" : "none";
+  return (
+    <svg viewBox="0 0 64 80" className="h-20 w-16">
+      {/* Door frame */}
+      <rect x="8" y="4" width="48" height="72" rx="2" fill="none" stroke={stroke} strokeWidth="2" />
+      {/* Glass */}
+      <rect x="14" y="10" width="36" height="60" rx="1" fill={selected ? "#C4D668" : "#e5e7eb"} opacity="0.2" />
+      {/* Hinge dots on left side */}
+      <circle cx="10" cy="20" r="2.5" fill={fill} stroke={stroke} strokeWidth="1.5" />
+      <circle cx="10" cy="60" r="2.5" fill={fill} stroke={stroke} strokeWidth="1.5" />
+      {/* Rotation arrow from hinge side */}
+      <path d="M 56 18 A 24 24 0 0 1 56 62" fill="none" stroke={stroke} strokeWidth="1.5" strokeDasharray="3 2" />
+      <polygon points="56,60 60,56 52,56" fill={stroke} />
+    </svg>
+  );
+}
+
+function PaneelIcon({ selected }: { selected: boolean }) {
+  const stroke = selected ? "#C4D668" : "#1A2E2E";
+  return (
+    <svg viewBox="0 0 64 80" className="h-20 w-16">
+      {/* Door frame */}
+      <rect x="8" y="4" width="48" height="72" rx="2" fill="none" stroke={stroke} strokeWidth="2" />
+      {/* Glass */}
+      <rect x="14" y="10" width="36" height="60" rx="1" fill={selected ? "#C4D668" : "#e5e7eb"} opacity="0.2" />
+      {/* Fixed indicator - lock symbol */}
+      <rect x="26" y="34" width="12" height="12" rx="2" fill="none" stroke={stroke} strokeWidth="1.5" />
+      <circle cx="32" cy="34" r="5" fill="none" stroke={stroke} strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+const doorTypeIcons: Record<DoorType, (props: { selected: boolean }) => React.ReactElement> = {
+  taats: TaatsIcon,
+  scharnier: ScharnierIcon,
+  paneel: PaneelIcon,
+};
+
+// Grid type visual illustrations (CSS-based rectangles with dividers)
+function GridIllustration({ dividers, selected }: { dividers: number; selected: boolean }) {
+  const borderColor = selected ? "border-[#C4D668]" : "border-[#1A2E2E]/40";
+  const dividerBg = selected ? "bg-[#C4D668]" : "bg-[#1A2E2E]/30";
+  const glassBg = selected ? "bg-[#C4D668]/10" : "bg-gray-100";
+
+  return (
+    <div className={`flex h-20 w-14 flex-col overflow-hidden rounded border-2 ${borderColor}`}>
+      {dividers === 0 && (
+        <div className={`flex-1 ${glassBg}`} />
+      )}
+      {dividers > 0 &&
+        Array.from({ length: dividers + 1 }).map((_, i) => (
+          <div key={i} className="flex flex-1 flex-col">
+            {i > 0 && <div className={`h-[2px] shrink-0 ${dividerBg}`} />}
+            <div className={`flex-1 ${glassBg}`} />
+          </div>
+        ))
+      }
+    </div>
+  );
+}
+
 const doorTypes: Array<{
   value: DoorType;
   label: string;
@@ -12,17 +94,17 @@ const doorTypes: Array<{
   {
     value: "taats",
     label: "Taatsdeur",
-    description: "Pivoterende deur met verticaal draaimechanisme",
+    description: "Pivoterende deur",
   },
   {
     value: "scharnier",
     label: "Scharnierdeur",
-    description: "Klassieke deur met zijscharnieren",
+    description: "Zijscharnieren",
   },
   {
     value: "paneel",
     label: "Vast Paneel",
-    description: "Vast glaspaneel zonder bewegend mechanisme",
+    description: "Geen beweging",
   },
 ];
 
@@ -30,10 +112,11 @@ const gridTypes: Array<{
   value: "3-vlak" | "4-vlak" | "geen";
   label: string;
   description: string;
+  dividers: number;
 }> = [
-  { value: "geen", label: "Geen verdeling", description: "Volledig vlak" },
-  { value: "3-vlak", label: "3-vlaks", description: "2 horizontale balken" },
-  { value: "4-vlak", label: "4-vlaks", description: "3 horizontale balken" },
+  { value: "geen", label: "Geen", description: "Volledig vlak", dividers: 0 },
+  { value: "3-vlak", label: "3-vlaks", description: "2 balken", dividers: 2 },
+  { value: "4-vlak", label: "4-vlaks", description: "3 balken", dividers: 3 },
 ];
 
 export function StepProduct() {
@@ -41,73 +124,61 @@ export function StepProduct() {
   const { doorType, gridType, setDoorType, setGridType } =
     useConfiguratorStore();
 
-  function handleDoorTypeSelect(type: DoorType) {
-    setDoorType(type);
-  }
-
-  function handleGridTypeSelect(type: "3-vlak" | "4-vlak" | "geen") {
-    setGridType(type);
-  }
-
-  function handleContinue() {
-    nextStep();
-  }
-
   return (
     <div className="space-y-8">
-      {/* Door Type Selection */}
+      {/* Door Type Selection - Visual Tiles */}
       <div>
         <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Kies uw deurtype</h2>
         <p className="mb-4 text-sm text-gray-600">
           Selecteer het type stalen deur dat u wilt configureren.
         </p>
 
-        <div className="grid gap-3">
+        <div className="grid grid-cols-3 gap-3">
           {doorTypes.map((type) => {
             const selected = doorType === type.value;
+            const IconComponent = doorTypeIcons[type.value];
 
             return (
               <button
                 key={type.value}
                 type="button"
-                onClick={() => handleDoorTypeSelect(type.value)}
-                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
+                onClick={() => setDoorType(type.value)}
+                className={`group relative flex flex-col items-center rounded-xl border-2 px-2 py-4 transition-all ${
                   selected
-                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
-                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white ring-2 ring-[#C4D668] shadow-lg shadow-[#C4D668]/20"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/20 hover:shadow-md"
                 }`}
               >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="font-bold">{type.label}</h3>
-                    <p
-                      className={`mt-1 text-sm ${
-                        selected ? "text-white/80" : "text-gray-500"
-                      }`}
-                    >
-                      {type.description}
-                    </p>
-                  </div>
-                  {selected && (
-                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
-                      <Check className="size-4 text-[#1A2E2E]" />
-                    </div>
-                  )}
+                <div className="mb-3">
+                  <IconComponent selected={selected} />
                 </div>
+                <h3 className="text-sm font-bold">{type.label}</h3>
+                <p
+                  className={`mt-1 text-xs ${
+                    selected ? "text-white/70" : "text-gray-500"
+                  }`}
+                >
+                  {type.description}
+                </p>
+                {selected && (
+                  <div className="absolute right-2 top-2 flex size-5 items-center justify-center rounded-full bg-[#C4D668]">
+                    <Check className="size-3 text-[#1A2E2E]" />
+                  </div>
+                )}
               </button>
             );
           })}
         </div>
       </div>
 
-      {/* Grid Type Selection */}
+      {/* Grid Type Selection - Visual Tiles */}
       <div>
         <h2 className="mb-2 text-lg font-bold text-[#1A2E2E]">Verdeling</h2>
         <p className="mb-4 text-sm text-gray-600">
           Kies het aantal horizontale vlakken.
         </p>
 
-        <div className="grid gap-3">
+        <div className="grid grid-cols-3 gap-3">
           {gridTypes.map((type) => {
             const selected = gridType === type.value;
 
@@ -115,30 +186,29 @@ export function StepProduct() {
               <button
                 key={type.value}
                 type="button"
-                onClick={() => handleGridTypeSelect(type.value)}
-                className={`group relative rounded-xl border-2 p-4 text-left transition-all ${
+                onClick={() => setGridType(type.value)}
+                className={`group relative flex flex-col items-center rounded-xl border-2 px-2 py-4 transition-all ${
                   selected
-                    ? "border-[#C4D668] bg-[#1A2E2E] text-white"
-                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/30"
+                    ? "border-[#C4D668] bg-[#1A2E2E] text-white ring-2 ring-[#C4D668] shadow-lg shadow-[#C4D668]/20"
+                    : "border-gray-200 bg-white text-gray-900 hover:border-[#1A2E2E]/20 hover:shadow-md"
                 }`}
               >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <h3 className="font-bold">{type.label}</h3>
-                    <p
-                      className={`mt-1 text-sm ${
-                        selected ? "text-white/80" : "text-gray-500"
-                      }`}
-                    >
-                      {type.description}
-                    </p>
-                  </div>
-                  {selected && (
-                    <div className="flex size-6 items-center justify-center rounded-full bg-[#C4D668]">
-                      <Check className="size-4 text-[#1A2E2E]" />
-                    </div>
-                  )}
+                <div className="mb-3 flex items-center justify-center">
+                  <GridIllustration dividers={type.dividers} selected={selected} />
                 </div>
+                <h3 className="text-sm font-bold">{type.label}</h3>
+                <p
+                  className={`mt-1 text-xs ${
+                    selected ? "text-white/70" : "text-gray-500"
+                  }`}
+                >
+                  {type.description}
+                </p>
+                {selected && (
+                  <div className="absolute right-2 top-2 flex size-5 items-center justify-center rounded-full bg-[#C4D668]">
+                    <Check className="size-3 text-[#1A2E2E]" />
+                  </div>
+                )}
               </button>
             );
           })}
@@ -147,7 +217,7 @@ export function StepProduct() {
 
       {/* Continue Button */}
       <button
-        onClick={handleContinue}
+        onClick={() => nextStep()}
         className="w-full rounded-xl bg-[#C4D668] py-3 font-bold text-[#1A2E2E] transition-all hover:bg-[#b5c75a]"
       >
         Volgende stap
diff --git a/lib/door-models.ts b/lib/door-models.ts
index 8b8002b..87baf23 100644
--- a/lib/door-models.ts
+++ b/lib/door-models.ts
@@ -17,10 +17,16 @@ export const PROFILE_DEPTH = 40; // mm - Tube depth
 export const PROFILE_CORNER_RADIUS = 2; // mm - Rounded corners for welding
 
 /**
- * Glass Specifications
+ * Steel Profile Named Exports (aliases for pricing/manufacturing clarity)
  */
-export const GLASS_THICKNESS = 10; // mm - Standard tempered glass
-export const GLASS_OFFSET = 18; // mm - Center glass in 40mm profile (40-10)/2 - 2mm clearance
+export const STILE_WIDTH = 40; // mm - Vertical profiles (same as PROFILE_WIDTH)
+export const RAIL_WIDTH = 20; // mm - Horizontal slim-line profiles
+
+/**
+ * Glass Specifications - Standard 33.1 laminated safety glass (VSG 33.1)
+ */
+export const GLASS_THICKNESS = 7; // mm - Standard 33.1 Safety Glass
+export const GLASS_OFFSET = 15; // mm - Center glass in 40mm profile: (40-7)/2 - 1.5mm clearance
 
 /**
  * Rail Height Variations
@@ -28,6 +34,11 @@ export const GLASS_OFFSET = 18; // mm - Center glass in 40mm profile (40-10)/2 -
 export const RAIL_HEIGHT_SLIM = 20; // mm - Slim horizontal rails
 export const RAIL_HEIGHT_ROBUST = 40; // mm - Standard robust rails (same as profile)
 
+/**
+ * Taats (Pivot) Door Mechanism
+ */
+export const TAATS_PIVOT_OFFSET = 60; // mm - Pivot axis offset from wall for Taats doors
+
 // ============================================
 // PHYSICAL PART TYPES
 // ============================================
diff --git a/lib/pricing.ts b/lib/pricing.ts
new file mode 100644
index 0000000..956203c
--- /dev/null
+++ b/lib/pricing.ts
@@ -0,0 +1,126 @@
+/**
+ * Pricing Engine for Proinn Configurator
+ * Based on Dutch market standard pricing (Metalworks/Aluwdoors reference)
+ */
+
+import {
+  PROFILE_WIDTH,
+  RAIL_HEIGHT_SLIM,
+  RAIL_HEIGHT_ROBUST,
+  type GridLayout,
+  type DoorModel,
+} from './door-models';
+
+// Pricing constants (EUR)
+const STEEL_PRICE_PER_METER = 45;
+const GLASS_PRICE_PER_SQM = 140;
+const BASE_FEE = 650;
+const SIDE_PANEL_SURCHARGE = 250;
+const DOUBLE_DOOR_SURCHARGE = 350;
+const TAATS_MECHANISM_SURCHARGE = 450;
+const HANDLE_PRICES: Record<string, number> = {
+  'beugelgreep': 85,
+  'hoekgreep': 75,
+  'maangreep': 95,
+  'ovaalgreep': 90,
+  'klink': 65,
+  'u-greep': 55,
+  'geen': 0,
+};
+
+function calculateSteelLength(
+  doorWidth: number,
+  doorHeight: number,
+  gridLayout: GridLayout,
+  hasVerticalDivider: boolean
+): number {
+  const innerWidth = doorWidth - PROFILE_WIDTH * 2;
+  let totalLength = doorHeight * 2 + innerWidth * 2;
+
+  if (gridLayout === '3-vlak') {
+    totalLength += innerWidth * 2;
+  } else if (gridLayout === '4-vlak') {
+    totalLength += innerWidth * 3;
+  }
+
+  if (hasVerticalDivider) {
+    totalLength += doorHeight - RAIL_HEIGHT_ROBUST * 2;
+  }
+
+  return totalLength / 1000;
+}
+
+function calculateGlassArea(
+  doorWidth: number,
+  doorHeight: number,
+  gridLayout: GridLayout
+): number {
+  const glassWidth = doorWidth - PROFILE_WIDTH * 2;
+  const glassHeight = doorHeight - RAIL_HEIGHT_ROBUST * 2;
+
+  let dividerArea = 0;
+  if (gridLayout === '3-vlak') {
+    dividerArea = glassWidth * RAIL_HEIGHT_SLIM * 2;
+  } else if (gridLayout === '4-vlak') {
+    dividerArea = glassWidth * RAIL_HEIGHT_SLIM * 3;
+  }
+
+  return (glassWidth * glassHeight - dividerArea) / 1_000_000;
+}
+
+export interface PriceBreakdown {
+  steelCost: number;
+  glassCost: number;
+  baseFee: number;
+  mechanismSurcharge: number;
+  sidePanelSurcharge: number;
+  handleCost: number;
+  totalPrice: number;
+  steelLengthM: number;
+  glassAreaSqm: number;
+}
+
+export function calculatePrice(
+  doorWidth: number,
+  doorHeight: number,
+  doorType: DoorModel,
+  gridLayout: GridLayout,
+  doorConfig: 'enkele' | 'dubbele',
+  sidePanel: 'geen' | 'links' | 'rechts' | 'beide',
+  handle: string
+): PriceBreakdown {
+  const leafCount = doorConfig === 'dubbele' ? 2 : 1;
+  const hasVerticalDivider = doorType === 'paneel';
+
+  const steelLengthPerLeaf = calculateSteelLength(doorWidth, doorHeight, gridLayout, hasVerticalDivider);
+  const glassAreaPerLeaf = calculateGlassArea(doorWidth, doorHeight, gridLayout);
+
+  const totalSteelLength = steelLengthPerLeaf * leafCount;
+  const totalGlassArea = glassAreaPerLeaf * leafCount;
+
+  const sidePanelCount = sidePanel === 'beide' ? 2 : (sidePanel === 'geen' ? 0 : 1);
+
+  const steelCost = Math.round(totalSteelLength * STEEL_PRICE_PER_METER);
+  const glassCost = Math.round(totalGlassArea * GLASS_PRICE_PER_SQM);
+
+  let mechanismSurcharge = 0;
+  if (doorType === 'taats') mechanismSurcharge += TAATS_MECHANISM_SURCHARGE;
+  if (doorConfig === 'dubbele') mechanismSurcharge += DOUBLE_DOOR_SURCHARGE;
+
+  const handleCost = HANDLE_PRICES[handle] || 0;
+  const sidePanelSurchrg = sidePanelCount * SIDE_PANEL_SURCHARGE;
+
+  const totalPrice = steelCost + glassCost + BASE_FEE + mechanismSurcharge + sidePanelSurchrg + handleCost;
+
+  return {
+    steelCost,
+    glassCost,
+    baseFee: BASE_FEE,
+    mechanismSurcharge,
+    sidePanelSurcharge: sidePanelSurchrg,
+    handleCost,
+    totalPrice,
+    steelLengthM: Math.round(totalSteelLength * 100) / 100,
+    glassAreaSqm: Math.round(totalGlassArea * 100) / 100,
+  };
+}
diff --git a/lib/store.ts b/lib/store.ts
index 2eb603c..1bba3a9 100644
--- a/lib/store.ts
+++ b/lib/store.ts
@@ -9,6 +9,7 @@ import {
   type SidePanel,
 } from './calculations';
 import type { GlassPattern } from './glass-patterns';
+import { calculatePrice, type PriceBreakdown } from './pricing';
 
 export type DoorType = 'taats' | 'scharnier' | 'paneel';
 export type GridType = '3-vlak' | '4-vlak' | 'geen';
@@ -38,6 +39,9 @@ interface ConfiguratorState {
   minWidth: number;
   maxWidth: number;
 
+  // Pricing
+  priceBreakdown: PriceBreakdown;
+
   // Actions
   setDoorType: (type: DoorType) => void;
   setDoorConfig: (config: DoorConfig) => void;
@@ -64,6 +68,13 @@ const recalculate = (get: () => ConfiguratorState, set: (state: Partial<Configur
   });
 };
 
+// Helper function for price recalculation
+const recalculatePrice = (get: () => ConfiguratorState, set: (state: Partial<ConfiguratorState>) => void) => {
+  const { doorLeafWidth, height, doorType, gridType, doorConfig, sidePanel, handle } = get();
+  const priceBreakdown = calculatePrice(doorLeafWidth, height, doorType, gridType, doorConfig, sidePanel, handle);
+  set({ priceBreakdown });
+};
+
 export const useConfiguratorStore = create<ConfiguratorState>((set, get) => ({
   // Initial state
   doorType: 'taats',
@@ -83,27 +94,39 @@ export const useConfiguratorStore = create<ConfiguratorState>((set, get) => ({
   minWidth: 860,
   maxWidth: 1360,
 
+  // Initial price (computed with defaults: taats, 3-vlak, enkele, geen, beugelgreep, 1000x2400)
+  priceBreakdown: calculatePrice(1000, 2400, 'taats', '3-vlak', 'enkele', 'geen', 'beugelgreep'),
+
   // Actions with automatic recalculation
   setDoorType: (doorType) => {
     set({ doorType });
     recalculate(get, set);
+    recalculatePrice(get, set);
   },
 
   setDoorConfig: (doorConfig) => {
     set({ doorConfig });
     recalculate(get, set);
+    recalculatePrice(get, set);
   },
 
   setSidePanel: (sidePanel) => {
     set({ sidePanel });
     recalculate(get, set);
+    recalculatePrice(get, set);
   },
 
-  setGridType: (gridType) => set({ gridType }),
+  setGridType: (gridType) => {
+    set({ gridType });
+    recalculatePrice(get, set);
+  },
 
   setFinish: (finish) => set({ finish }),
 
-  setHandle: (handle) => set({ handle }),
+  setHandle: (handle) => {
+    set({ handle });
+    recalculatePrice(get, set);
+  },
 
   setGlassPattern: (glassPattern) => set({ glassPattern }),
 
@@ -112,16 +135,16 @@ export const useConfiguratorStore = create<ConfiguratorState>((set, get) => ({
     const minWidth = calculateHoleMinWidth(doorConfig, sidePanel);
     const maxWidth = calculateHoleMaxWidth(doorConfig, sidePanel);
 
-    // Clamp width to valid range
     const clampedWidth = Math.max(minWidth, Math.min(maxWidth, width));
     set({ width: clampedWidth });
     recalculate(get, set);
+    recalculatePrice(get, set);
   },
 
   setHeight: (height) => {
-    // Clamp height to valid range
     const clampedHeight = Math.max(1800, Math.min(3000, height));
     set({ height: clampedHeight });
+    recalculatePrice(get, set);
   },
 
   setDimensions: (width, height) => {