changes

components/kalkulator/KalkulatorClient.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { ArrowRight, ArrowLeft, Check, Home, Zap, ShoppingCart, Phone } from 'lucide-react';
 import { Product } from '@/content/products';
 import { companyDetails } from '@/content/company';
+import { Button, buttonClasses } from '@/components/ui/Button';
 
 
 interface Props {
@@ -574,9 +575,9 @@ export function KalkulatorClient({ products }: Props) {
                 </p>
                 <div className="flex flex-col sm:flex-row gap-2">
                   <a href={`tel:${companyDetails.phoneRaw}`}>
-                    <button className="flex items-center gap-2 px-4 py-2 bg-accent text-white rounded-xl text-xs font-bold hover:bg-accent/90 transition-colors">
+                    <Button variant="primary" size="sm" className="w-full sm:w-auto">
                       <Phone className="size-3.5" /> Bezpłatna wycena
-                    </button>
+                    </Button>
                   </a>
                   <Link href="/kontakt" className="flex items-center gap-2 px-4 py-2 bg-amber-100 text-amber-800 rounded-xl text-xs font-bold hover:bg-amber-200 transition-colors border border-amber-300">
 
@@ -589,19 +590,25 @@ export function KalkulatorClient({ products }: Props) {
           )}
           <div className="flex justify-between mt-8 pt-6 border-t border-border">
             {step > 0 ? (
-              <button onClick={() => setStep(s => s - 1)}
-                className="flex items-center gap-2 px-4 py-2.5 border border-border rounded-xl text-sm font-semibold text-primary hover:border-accent transition-colors">
+              <Button 
+                onClick={() => setStep(s => s - 1)}
+                variant="outline"
+                size="md"
+              >
                 <ArrowLeft className="size-4" /> Wstecz
-              </button>
+              </Button>
             ) : <div />}
 
             {step < STEPS.length - 1 ? (
-                <button onClick={handleNext}
-                  className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors">
+                <Button 
+                  onClick={handleNext}
+                  variant="primary"
+                  size="md"
+                >
                   Dalej <ArrowRight className="size-4" />
-                </button>
+                </Button>
             ) : (
-              <Link href={getShopUrl()} className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl text-sm font-bold hover:bg-accent/90 transition-colors">
+              <Link href={getShopUrl()} className={buttonClasses({ variant: "primary", size: "md" })}>
 
                   Przejdź do sklepu <ArrowRight className="size-4" />