Product Gallery & Details Section with Variant Selector

<section class="sm:px-6 lg:px-8 max-w-7xl mx-auto px-4 py-12">
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
    <!-- Product Gallery -->
    <div class="fade-in">
      <div class="aspect-square bg-neutral-100 rounded-2xl mb-4 overflow-hidden">
        <img id="mainProductImage" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a0334f32-8e67-444f-bb8c-ef1ebc4a3a8f_1600w.jpg" alt="Nike Air Max 270" class="w-full h-full object-cover product-zoom">
      </div>
      <div class="flex gap-3 overflow-x-auto pb-2">
        <button class="gallery-nav flex-shrink-0 w-20 h-20 bg-neutral-100 rounded-lg overflow-hidden border-2 border-neutral-900">
                <img src="https://cdn.midjourney.com/944ee6b3-3133-4f7f-934b-9dce46faef61/0_0.png?w=800&amp;q=80" alt="View 1" class="w-full h-full object-cover">
              </button>
        <button class="gallery-nav flex-shrink-0 w-20 h-20 bg-neutral-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-neutral-300">
                <img src="https://cdn.midjourney.com/b364832d-777c-48e7-911a-1be3f0ea7f47/0_0.png?w=800&amp;q=80" alt="View 2" class="w-full h-full object-cover">
              </button>
        <button class="gallery-nav flex-shrink-0 w-20 h-20 bg-neutral-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-neutral-300">
                <img src="https://cdn.midjourney.com/2a604624-00fc-4126-9c6c-ab9173bdee29/0_0.png?w=800&amp;q=80" alt="View 3" class="w-full h-full object-cover">
              </button>
        <button class="gallery-nav flex-shrink-0 w-20 h-20 bg-neutral-100 rounded-lg overflow-hidden border-2 border-transparent hover:border-neutral-300">
                <img src="https://cdn.midjourney.com/598f8ab8-2981-4083-813d-d9c6df6c0f8d/0_0.png?w=800&amp;q=80" alt="View 4" class="w-full h-full object-cover">
              </button>
      </div>
    </div>

    <!-- Product Details -->
    <div class="fade-in" style="animation-delay: 0.2s;">
      <div class="flex items-center gap-2 mb-4">
        <span class="inline-flex items-center rounded-md bg-green-100 text-green-800 text-sm px-2.5 py-1 font-medium">In Stock</span>
        <span class="inline-flex items-center rounded-md bg-orange-100 text-orange-800 text-sm px-2.5 py-1 font-medium">Best Seller</span>
      </div>

      <h1 class="text-3xl sm:text-4xl font-bold tracking-tight text-neutral-900 mb-4 font-geist">Nike Air Max 270</h1>

      <div class="flex items-baseline gap-4 mb-6">
        <span class="text-3xl font-bold text-neutral-900 font-geist">$160.00</span>
        <span class="text-lg text-neutral-500 line-through font-geist">$200.00</span>
        <span class="inline-flex items-center rounded-md bg-red-100 text-red-800 text-sm px-2.5 py-1 font-semibold">20% OFF</span>
      </div>

      <div class="space-y-6 mb-8">
        <div>
          <h3 class="text-sm font-semibold text-neutral-900 mb-3 font-geist">Color: Black/White</h3>
          <div class="flex gap-2">
            <button class="size-option w-10 h-10 bg-black rounded-full border-2 border-neutral-900 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M20 6L9 17l-5-5" class=""></path></svg>
                  </button>
            <button class="size-option w-10 h-10 bg-white rounded-full border-2 border-neutral-300 hover:border-neutral-400"></button>
            <button class="size-option w-10 h-10 bg-red-600 rounded-full border-2 border-transparent hover:border-neutral-400"></button>
            <button class="size-option w-10 h-10 bg-blue-600 rounded-full border-2 border-transparent hover:border-neutral-400"></button>
          </div>
        </div>

        <div>
          <h3 class="text-sm font-semibold text-neutral-900 mb-3 font-geist">Size</h3>
          <div class="grid grid-cols-4 sm:grid-cols-6 gap-2">
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 font-geist">US 7</button>
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 font-geist">US 8</button>
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 selected font-geist">US 9</button>
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 font-geist">US 10</button>
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 font-geist">US 11</button>
            <button class="size-option h-12 border border-neutral-300 rounded-md text-sm font-medium hover:border-neutral-900 font-geist">US 12</button>
          </div>
          <button class="text-sm text-neutral-600 hover:text-neutral-900 mt-2 underline font-geist">Size guide</button>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row gap-4 mb-8">
        <button id="addToCartMain" class="flex-1 inline-flex items-center justify-center gap-2 bg-neutral-900 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-neutral-800 transition-all duration-300 hover:scale-105 font-geist" data-product="Nike Air Max 270" data-price="160.00">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><circle cx="8" cy="21" r="1" class=""></circle><circle cx="19" cy="21" r="1" class=""></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" class=""></path></svg>
                Add to Cart
              </button>
        <button class="inline-flex items-center justify-center gap-2 border-2 border-neutral-300 text-neutral-900 px-6 py-4 rounded-lg font-semibold hover:border-neutral-900 transition-all duration-300 hover:scale-105 font-geist">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z" class=""></path></svg>
                Wishlist
              </button>
      </div>

      <div class="border-t border-neutral-200 pt-8">
        <h3 class="text-lg font-semibold mb-4 font-geist">Product Details</h3>
        <div class="space-y-3 text-sm text-neutral-600">
          <p class="font-geist">The Nike Air Max 270 delivers unrivaled all-day comfort with the largest Max Air unit
            yet, offering a super soft ride that feels as impossible as it looks.</p>
          <div class="grid grid-cols-2 gap-4">
            <div>
              <span class="font-medium text-neutral-900 font-geist">Material:</span>
              <p class="font-geist">Mesh and synthetic upper</p>
            </div>
            <div>
              <span class="font-medium text-neutral-900 font-geist">Sole:</span>
              <p class="font-geist">Air Max cushioning</p>
            </div>
            <div>
              <span class="font-medium text-neutral-900 font-geist">Closure:</span>
              <p class="font-geist">Lace-up</p>
            </div>
            <div>
              <span class="font-medium text-neutral-900 font-geist">Origin:</span>
              <p class="font-geist">Made in Vietnam</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>