Fix product image: pass firstImage to Alpine, increase display size to h-96

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

resources/views/shop/products/show.blade.php

@@ -1,12 +1,12 @@
 @extends('layouts.shop')
 @section('title', $product->name)
 @section('content')
-<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12" x-data="productDetail(@json($product->variants))">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12" x-data="productDetail(@json($product->variants), '{{ $product->images->count() ? asset('storage/'.$product->images->first()->path) : '' }}')">
 
     {{-- Bilder --}}
     <div>
         @if($product->images->count())
-        <img :src="mainImage" x-init="mainImage = '{{ asset('storage/'.$product->images->first()->path) }}'" class="w-full rounded-lg mb-3 border">
+        <img :src="mainImage" class="w-full h-96 object-contain rounded-lg mb-3 border bg-gray-50">
         <div class="flex gap-2 flex-wrap">
             @foreach($product->images as $img)
             <img src="{{ asset('storage/'.$img->path) }}" @click="mainImage = '{{ asset('storage/'.$img->path) }}'"
@@ -14,7 +14,7 @@
             @endforeach
         </div>
         @else
-        <div class="w-full h-72 bg-gray-100 rounded-lg flex items-center justify-center text-7xl">📦</div>
+        <div class="w-full h-96 bg-gray-100 rounded-lg flex items-center justify-center text-7xl">📦</div>
         @endif
     </div>
 
@@ -109,12 +109,12 @@
 @endif
 
 <script>
-function productDetail(variants) {
+function productDetail(variants, firstImage) {
     return {
         variants,
         selectedAttrs: {},
         selectedVariant: null,
-        mainImage: '',
+        mainImage: firstImage,
         currentPrice: {{ $product->base_price }},
         selectAttr(name, id) {
             this.selectedAttrs[name] = id;