Mobile Product Detail Page with Add-to-Cart Bar

<article class="relative bg-black rounded-[60px] pt-2 pr-2 pb-2 pl-2" style="width: 393px; height: 854px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.4);">
        <div class="relative h-full w-full rounded-[52px] overflow-hidden bg-white">
          <!-- Dynamic Island -->
          
          
          <!-- Status Bar -->
          <div class="relative z-40 flex pt-4 pr-6 pb-4 pl-6 items-center justify-between">
            <span class="sf-display text-lg font-semibold text-black font-sans">9:41</span>
            <div class="flex items-center gap-1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-4 h-4 text-black"><path d="M2 20h.01" class=""></path><path d="M7 20v-4" class=""></path><path d="M12 20v-8" class=""></path><path d="M17 20V8" class=""></path><path d="M22 4v16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-black"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
              <div class="relative">
                <div class="w-6 h-3 border rounded-sm border-black"></div>
                <div class="absolute top-0.5 left-0.5 w-4 h-2 bg-gray-950 rounded-[1px]"></div>
              </div>
            </div>
          </div>

          <!-- Navigation -->
          <div class="flex items-center justify-between px-6 pb-4">
            <button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-left" class="lucide lucide-arrow-left w-5 h-5 text-gray-700"><path d="m12 19-7-7 7-7" class=""></path><path d="M19 12H5" class=""></path></svg>
            </button>
            <button class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share" class="lucide lucide-share w-5 h-5 text-gray-700"><path d="M12 2v13" class=""></path><path d="m16 6-4-4-4 4" class=""></path><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" class=""></path></svg>
            </button>
          </div>

          <!-- Content -->
          <div class="flex-1 overflow-auto">
            <div class="pr-6 pb-32 pl-6">
  <!-- Product Image -->
  <div class="relative h-80 bg-gradient-mesh rounded-3xl mb-6 overflow-hidden">
    <img src="https://cdn.midjourney.com/4e7d710b-46c9-4e37-85f3-2d87d4bf51f4/0_1.png?w=800&amp;q=80" alt="Ultra-Modern Sculptural Lounge Chair" class="w-full h-full object-cover">
    
    <button class="absolute top-4 right-4 w-10 h-10 rounded-full flex items-center justify-center ios-blur bg-white/90">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="heart" class="lucide lucide-heart w-5 h-5 text-red-500 fill-current"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" class=""></path></svg>
    </button>

    <!-- Color Options -->
    <div class="absolute bottom-4 left-4 flex gap-2">
      <button class="w-6 h-6 rounded-full ring-2 bg-black ring-white"></button>
      <button class="w-6 h-6 rounded-full bg-gray-600"></button>
      <button class="w-6 h-6 rounded-full ring-2 bg-white ring-gray-300"></button>
    </div>
  </div>

  <!-- Product Info -->
  <div class="space-y-6">
    <div class="">
      <div class="flex mb-2 items-start justify-between">
        <div class="">
          <h1 class="sf-display text-2xl text-black tracking-tight font-sans font-semibold">Sculptural Lounge Chair</h1>
          <p class="font-medium text-blue-600 font-sans">ModernForm</p>
        </div>
        <div class="text-right">
          <span class="sf-display text-2xl text-black font-sans font-semibold">$299</span>
          <p class="line-through text-sm text-gray-500 font-sans">$345</p>
        </div>
      </div>
      
      <div class="flex items-center gap-2 mb-4">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="star" class="lucide lucide-star w-4 h-4 fill-yellow-400 text-yellow-400"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" class=""></path></svg>
        </div>
        <span class="font-medium text-black font-sans">4.9</span>
        <span class="text-gray-500 font-sans">(147)</span>
      </div>

      <p class="leading-relaxed text-gray-700 font-sans">Ultra-modern sculptural lounge chair with organic fluid design. Features smooth matte black upholstery, ergonomic flowing curves, and minimalistic wooden base with carved abstract geometry for a futuristic yet natural aesthetic.</p>
    </div>

    <!-- Key Features -->
    <div>
      <h3 class="font-medium mb-3 text-black font-sans">Key Features</h3>
      <div class="grid grid-cols-3 gap-3">
        <div class="text-center p-3">
          <div class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-2 bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="shapes" class="lucide lucide-shapes w-6 h-6 text-purple-600"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect><circle cx="17.5" cy="17.5" r="3.5" class=""></circle></svg>
          </div>
          <p class="text-xs font-medium text-gray-700 font-sans">Organic Design</p>
        </div>
        <div class="text-center p-3">
          <div class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-2 bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-check" class="lucide lucide-user-check w-6 h-6 text-green-600"><path d="m16 11 2 2 4-4" class=""></path><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></path><circle cx="9" cy="7" r="4" class=""></circle></svg>
          </div>
          <p class="text-xs font-medium text-gray-700 font-sans">Ergonomic</p>
        </div>
        <div class="text-center p-3">
          <div class="w-12 h-12 rounded-2xl flex items-center justify-center mx-auto mb-2 bg-blue-100">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="tree-pine" class="lucide lucide-tree-pine w-6 h-6 text-orange-600"><path d="m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z" class=""></path><path d="M12 22v-3" class=""></path></svg>
          </div>
          <p class="text-xs font-medium text-gray-700 font-sans">Wood Base</p>
        </div>
      </div>
    </div>

    <!-- Specifications -->
    <div>
      <h3 class="font-medium mb-3 text-black font-sans">Specifications</h3>
      <div class="space-y-2">
        <div class="flex justify-between py-2">
          <span class="text-gray-600 font-sans">Material</span>
          <span class="font-medium text-black font-sans">Matte Black Fabric</span>
        </div>
        <div class="flex justify-between py-2">
          <span class="text-gray-600 font-sans">Base</span>
          <span class="font-medium text-black font-sans">Carved Wood</span>
        </div>
        <div class="flex justify-between py-2">
          <span class="text-gray-600 font-sans">Dimensions</span>
          <span class="font-medium text-black font-sans">85×90×75cm</span>
        </div>
      </div>
    </div>
  </div>
</div>
          </div>

          <!-- Bottom Action Bar -->
          <div class="absolute bottom-0 left-0 right-0 ios-blur border-t p-4 bg-white/95 border-gray-200">
            <div class="flex items-center gap-4 mb-2">
              <div class="flex items-center rounded-2xl bg-gray-100">
                <button class="w-10 h-10 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="minus" class="lucide lucide-minus w-4 h-4 text-gray-600"><path d="M5 12h14" class=""></path></svg>
                </button>
                <span class="w-10 text-center font-semibold text-black font-sans">1</span>
                <button class="w-10 h-10 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus w-4 h-4 text-gray-600"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
                </button>
              </div>
              <button class="flex-1 font-semibold py-4 rounded-2xl bg-blue-600 text-white font-sans">
                Add to Cart • $299
              </button>
            </div>
            <!-- Home Indicator -->
            <div class="flex justify-center">
              <div class="home-indicator"></div>
            </div>
          </div>
        </div>
      </article>