Advance product details view

<main class="mx-auto max-w-[1600px] px-5 py-10 sm:px-8 lg:px-12">
  <nav aria-label="Breadcrumb" class="sticky my-6 flex">
    <ol role="list" class="flex items-center space-x-2 text-sm text-gray-500">
      <li>
        <div class="flex items-center">
          <a href="#" class="font-medium text-gray-600 hover:text-gray-900">Women</a>
          <svg viewBox="0 0 6 20" aria-hidden="true" class="mx-2 h-5 w-2 text-gray-300">
            <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
          </svg>
        </div>
      </li>

      <li>
        <div class="flex items-center">
          <a href="#" class="font-medium text-gray-600 hover:text-gray-900">Clothing</a>
          <svg viewBox="0 0 6 20" aria-hidden="true" class="mx-2 h-5 w-2 text-gray-300">
            <path d="M4.878 4.34H3.551L.27 16.532h1.327l3.281-12.19z" fill="currentColor" />
          </svg>
        </div>
      </li>

      <li class="font-medium text-gray-900">Basic Tee</li>
    </ol>
  </nav>
  <section>
    <div class="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_420px] lg:gap-20">
      <!-- PRODUCT GALLERY -->
      <div class="relative">
        <div class="flex snap-x snap-mandatory gap-6 overflow-x-auto sm:flex-row lg:grid lg:snap-none lg:grid-cols-1 lg:overflow-visible">
          <!-- MEDIA ITEM -->
          <figure class="shrink-0 snap-start bg-[#f7f7f7] lg:shrink">
            <img src="https://qwstion.com/cdn/shop/files/qwstion-bananatex-coat-black-front_22634fd1-41b4-4db2-8650-5954b918b047.jpg" alt="" class="h-auto w-[85vw] rounded md:w-[70vw] lg:w-full" />
          </figure>

          <!-- VIDEO -->
          <figure class="shrink-0 snap-start bg-[#f7f7f7] lg:shrink">
            <video class="h-auto w-[85vw] rounded md:w-[70vw] lg:w-full" muted loop playsinline controls poster="https://qwstion.com/cdn/shop/files/preview_images/04bd29553e0448f39be772d83be6447c.thumbnail.0000000000.jpg">
              <source src="https://qwstion.com/cdn/shop/videos/c/vp/04bd29553e0448f39be772d83be6447c/04bd29553e0448f39be772d83be6447c.HD-720p-4.5Mbps-26152455.mp4" type="video/mp4" />
            </video>
          </figure>

          <!-- MEDIA ITEM -->
          <figure class="shrink-0 snap-start bg-[#f7f7f7] lg:shrink">
            <img src="https://qwstion.com/cdn/shop/files/qwstion-bananatex-coat-black-side_d9a06df8-787c-4b1a-9cc0-2685bfe7e35c.jpg" alt="" class="h-auto w-[85vw] rounded md:w-[70vw] lg:w-full" />
          </figure>

          <!-- MEDIA ITEM -->
          <figure class="shrink-0 snap-start bg-[#f7f7f7] lg:shrink">
            <img src="https://qwstion.com/cdn/shop/files/qwstion-bananatex-coat-black-back_42d423a5-b047-47cf-ae35-d4a11181635f.jpg" alt="" class="h-auto w-[85vw] rounded md:w-[70vw] lg:w-full" />
          </figure>
        </div>
      </div>

      <!-- == INFO COLUMN == -->
      <aside id="product-info" class="top-24 space-y-6 self-start lg:sticky">
        <!-- Title -->
        <div>
          <h1 class="text-base font-semibold tracking-tight">BANANATEX® All Weather Coat – Black S</h1>
          <p class="mt-2">CHF 525.00</p>
        </div>

        <!-- Size Selector -->
        <div>
          <p class="mb-2 text-xs">Size: S</p>
          <div class="flex gap-2">
            <button class="h-10 w-10 border border-black text-xs">S</button>
            <button class="h-10 w-10 border border-neutral-300 text-xs">M</button>
            <button class="h-10 w-10 border border-neutral-300 text-xs">L</button>
            <button class="h-10 w-10 border border-neutral-300 text-xs">XL</button>
          </div>
        </div>

        <!-- CTA -->
        <div class="space-y-3">
          <button class="w-full border border-black py-3 text-xs">Add to cart</button>
          <button class="w-full bg-black py-3 text-xs text-white">Buy it now</button>
        </div>
        <div class="pb-4 text-sm text-neutral-700"><strong>short description here</strong> Woven from organic banana fibres naturally grown within a regenerative permaculture system, Cradle to Cradle Certified® Bananatex® is fully biodegradable. Timeless in design, the classic-cut coat features a refined sleeve cutthat optimises freedom of movement when cycling – making it the perfect companion toeveryday urban life, just like our bags.</div>
      </aside>
    </div>
  </section>
  <!-- Details section Sections -->
  <section class="flex max-w-7xl flex-col gap-20 lg:flex-row">
    <div class="space-y-2 border-t border-neutral-200 pt-12">
      <!-- Description -->
      <details open class="group border-b border-neutral-200">
        <summary class="flex cursor-pointer items-center justify-between py-4 text-sm font-semibold">
          Description
          <span class="transition-transform group-open:rotate-180">
            <svg width="8" height="6" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="m1 1.5 3 3 3-3"></path>
            </svg>
          </span>
        </summary>
        <div class="pb-4 text-sm text-neutral-700"><strong>product description here</strong>Intended to offer comfort and elemental protection in all seasons… (excerpt) :contentReference[oaicite:1]{index=1} Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, rem pariatur! Necessitatibus blanditiis eaque, porro temporibus adipisci sit rerum soluta similique repellat recusandae doloribus fuga molestias ipsa! Officiis doloremque officia laboriosam excepturi voluptate culpa placeat accusantium perferendis asperiores, quidem cupiditate aliquid maiores doloribus qui deleniti deserunt porro assumenda unde obcaecati.</div>
      </details>

      <!-- Functionality -->
      <details class="group border-b border-neutral-200">
        <summary class="flex cursor-pointer items-center justify-between py-4 text-sm font-semibold">
          Functionality
          <span class="transition-transform group-open:rotate-180">
            <svg width="8" height="6" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="m1 1.5 3 3 3-3"></path>
            </svg>
          </span>
        </summary>
        <ul class="list-disc space-y-1 pb-4 pl-5 text-sm text-neutral-700">
          <li>Bananatex® Lightweight Twill fabric</li>
          <li>water resistant</li>
          <li>PFC-free water-repellent finish</li>
          <li>natural wax coating</li>
          <li>plastic free</li>
          <li>two outer pockets</li>
          <li>chest pocket</li>
          <li>manufactured in Croatia</li>
        </ul>
      </details>

      <!-- Materials -->
      <details class="group border-b border-neutral-200">
        <summary class="flex cursor-pointer items-center justify-between py-4 text-sm font-semibold">
          Materials
          <span class="transition-transform group-open:rotate-180">
            <svg width="8" height="6" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="m1 1.5 3 3 3-3"></path>
            </svg>
          </span>
        </summary>
        <div class="space-y-2 pb-4 text-sm text-neutral-700">
          <p><strong>FABRIC</strong> Cradle to Cradle Certified® Bananatex® – 100% Abacá / Manila Hemp (organically grown banana plant). Finish – PFC-free durable water-repellent finish, natural wax coating. Hydrostatic Head (ISO 811:2018) – 500 mm.</p>
          <p>LINING</p>
          <p>STRAPS</p>
          <p>OTHER plastic free, leather free</p>
        </div>
      </details>
      <!-- care -->
      <details class="group border-b border-neutral-200">
        <summary class="flex cursor-pointer items-center justify-between py-4 text-sm font-semibold">
          Care
          <span class="transition-transform group-open:rotate-180">
            <svg width="8" height="6" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="m1 1.5 3 3 3-3"></path>
            </svg>
          </span>
        </summary>
        <div class="space-y-2 pb-4 text-sm text-neutral-700">
          <p>If needed, hand wash your QWSTION item using a soft cloth and lukewarm water. Air dry thoroughly, leather and metal parts should be washed and dried e×tra carefully. Do not machine wash or tumble dry.</p>
        </div>
      </details>
    </div>

    <div class="w-full">
      <p class="mb-3 text-xs">Buy it with</p>
      <div class="flex items-center justify-between border p-4">
        <div class="flex items-center gap-4">
          <img src="https://qwstion.com/cdn/shop/files/qwstion-bananatex-coat-black-front_22634fd1-41b4-4db2-8650-5954b918b047.jpg" class="h-auto w-12" />
          <div>
            <p class="text-xs">Liner – Black S</p>
            <p class="text-xs">CHF 240.00</p>
          </div>
        </div>
        <button class="border px-4 py-2 text-xs">+ Add</button>
      </div>
    </div>
  </section>
  <section class="flex gap-20">
    <!-- Panels -->
    <div class="my-8">
      <!-- Reviews -->
      <div id="tab-panel-reviews" role="tabpanel" aria-labelledby="tab-reviews" tabindex="0" class="space-y-10">
        <h3 class="text-lg font-semibold text-gray-900">Customer Reviews</h3>

        <!-- Review -->
        <div class="flex space-x-4">
          <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe" alt="" class="h-12 w-12 rounded-full object-cover" />

          <div>
            <h4 class="font-medium text-gray-900">Emily Selman</h4>
            <p class="text-sm text-gray-500">
              <time datetime="2021-07-16">July 16, 2021</time>
            </p>

            <div class="mt-2 flex text-yellow-400">
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
            </div>

            <p class="mt-1 text-sm text-gray-600">5 out of 5 stars</p>

            <p class="mt-3 text-sm text-gray-700">This icon pack is just what I need for my latest project. There's an icon for just about anything I could ever need. Love the playful look!</p>
          </div>
        </div>
        <div class="flex space-x-4">
          <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe" alt="" class="h-12 w-12 rounded-full object-cover" />

          <div>
            <h4 class="font-medium text-gray-900">Emily Selman</h4>
            <p class="text-sm text-gray-500">
              <time datetime="2021-07-16">July 16, 2021</time>
            </p>

            <div class="mt-2 flex text-yellow-400">
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
              <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" /></svg>
            </div>

            <p class="mt-1 text-sm text-gray-600">5 out of 5 stars</p>

            <p class="mt-3 text-sm text-gray-700">This icon pack is just what I need for my latest project. There's an icon for just about anything I could ever need. Love the playful look!</p>
          </div>
        </div>
      </div>

      <!-- FAQ -->
      <div id="tab-panel-faq" role="tabpanel" aria-labelledby="tab-faq" tabindex="0" hidden class="space-y-6">
        <h3 class="text-lg font-semibold text-gray-900">Frequently Asked Questions</h3>

        <dl class="space-y-6">
          <div>
            <dt class="font-medium text-gray-900">What format are these icons?</dt>
            <dd class="mt-2 text-sm text-gray-700">The icons are in SVG format and can be used directly in design tools or code.</dd>
          </div>

          <div>
            <dt class="font-medium text-gray-900">Can I use the icons at different sizes?</dt>
            <dd class="mt-2 text-sm text-gray-700">Yes. They are drawn on a 24×24 grid but scale cleanly to other sizes.</dd>
          </div>

          <div>
            <dt class="font-medium text-gray-900">Do I have to add attribution?</dt>
            <dd class="mt-2 text-sm text-gray-700">No attribution is required for personal or professional use.</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>
</main>