Tailwind CSS Product Detail Pages Blocks

All Blocks
Ecommerce
Product Detail Pages

Product Detail Pages

Product detail pages for sticky purchase sidebars, branded layouts, marketplace product views, and gallery-driven purchase flows.

Storefront product detail page combines a gallery grid, accordion content, image-text feature blocks, and a sticky purchase sidebar that repositions on mobile.

<div class="w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="py-5">
                        
                        <ol class=" flex items-center whitespace-nowrap">
                          <li class="flex items-center">
                            
                            <a class="py-0.5 px-1.5 flex items-center gap-x-1 text-sm rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing-grid-with-categories.html">
                              Men
                            </a>
                            <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                          </li>
                          <li class="flex items-center truncate">
                            
                            <a class="py-0.5 px-1.5 flex items-center truncate gap-x-1 text-sm truncate rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing-grid-with-categories.html">
                              <span class="truncate">Slippers</span>
                            </a>
                            <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                          </li>
                          <li class="ps-1.5 flex items-center truncate font-semibold text-foreground text-sm truncate">
                            <span class="truncate">Mahabis Classic</span>
                          </li>
                        </ol>
                        
                      </div>

<div class="grid grid-cols-1 lg:grid-cols-3">
                        <div class="lg:col-span-2">
                          
                          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            
                            <div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
    
                              <div class="sm:hidden absolute top-0 inset-s-0 pt-2 ps-2">
                                <a class="py-1.5 px-2 flex items-center gap-x-1.5 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs" href="#completeTheLook">
                                  <svg class="shrink-0 size-4" 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"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                  Complete the look
                                  <svg class="shrink-0 size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                </a>
                              </div>
                            </div>

<div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
    
                              <div class="hidden sm:block absolute top-0 inset-s-0 pt-2 ps-2">
                                <a class="py-1.5 px-2 flex items-center gap-x-1.5 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs" href="#completeTheLook">
                                  <svg class="shrink-0 size-4" 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"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                  Complete the look
                                  <svg class="shrink-0 size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                </a>
                              </div>
                            </div>

<div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>

<div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>

<div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>

<div class="relative">
                              <img class="w-full rounded-lg" src="https://images.unsplash.com/photo-1598343170675-de52f3251f9c?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                            </div>
                            
                          </div>

<div class="pt-14 pb-10">
                            
                            <div class="hs-accordion" id="hs-pro-shpd-item-description">
                              <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-description">
                                Description
                                <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                              </button>

<div class="border-b border-line-2">
                                <div id="hs-pro-shpd-description" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-description">
                                  <div class="pb-6">
                                    <p class="text-sm text-muted-foreground-1">
                                      Sink into pure, simple comfort the moment you step in the door. mahabis classic has a pared-back design for those who love the beautiful yet understated things in life.
                                    </p>

<ul class="mt-5 ps-3 space-y-1">
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Iconic, understated design.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Premium felt upper.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        100% wool lining.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Machine washable at 30°, remove insoles and wash on a wool/delicates cycle.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Neoprene heel gently secures your foot in place.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Contoured footbed for extra support.
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        Eco-friendly packaging
                                      </li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                        One tree planted for every pair bought
                                      </li>
                                    </ul>
                                    
                                  </div>
                                </div>
                              </div>
                            </div>

<div class="hs-accordion" id="hs-pro-shpd-item-size-and-fit">
                              <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-size-and-fit">
                                Size and Fit
                                <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                              </button>

<div class="border-b border-line-2">
                                <div id="hs-pro-shpd-size-and-fit" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-size-and-fit">
                                  <div class="pb-6">
                                    
                                    <ul class="ps-3 space-y-1">
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">For wider feet, we suggest going up a size</li>
                                      <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">If you're usually a half size, we recommend going for the larger size.</li>
                                    </ul>
                                    
                                  </div>
                                </div>
                              </div>
                            </div>

<div class="hs-accordion" id="hs-pro-shpd-item-shipping-and-returns">
                              <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-shipping-and-returns">
                                Shipping and Returns
                                <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                              </button>

<div class="border-b border-line-2">
                                <div id="hs-pro-shpd-shipping-and-returns" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-shipping-and-returns">
                                  <div class="pb-6">
                                    <p class="text-sm text-muted-foreground-1">
                                      Free standard shipping on orders over $50 and free 30-day returns. <a class="text-sm text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Learn more.</a>
                                    </p>

<p class="mt-3 text-sm text-muted-foreground-1">
                                      Returns must be received within 30 days of shipping confirmation. In order to process your return, items must be unworn and tags must be attached.
                                    </p>
                                  </div>
                                </div>
                              </div>
                            </div>
                            
                          </div>

<div class="py-10 space-y-10">
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                              <div>
                                <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1606846848485-ea9d78f09ebe?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>

<div class="sm:min-h-80 flex flex-col justify-center sm:ps-6 sm:p-10">
                                <h3 class="font-medium text-lg sm:text-xl text-foreground">
                                  Everyday, year round comfort
                                </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                  The temperature regulating lining keeps you warm in the winter, comfortable in the summer, and feeling good year round.
                                </p>
                              </div>
                              
                            </div>
                            
  
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                              <div class="sm:order-2">
                                <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1598342990854-b3f9742c9e49?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>

<div class="order-1 sm:min-h-80 flex flex-col justify-center sm:pe-6 sm:p-10 sm:ps-0">
                                <h3 class="font-medium text-lg sm:text-xl text-foreground">
                                  A slipper that's here to stay
                                </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                  Made with a premium felt upper and a durable "anywhere" sole, they're the slippers you'll be wearing for years to come.
                                </p>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                  What's more, the neoprene heel cradle holds them in place for a secure fit.
                                </p>
                              </div>
                              
                            </div>
                            
  
                            
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-3">
                              <div>
                                <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                              </div>

<div class="sm:min-h-80 flex flex-col justify-center sm:ps-6 sm:p-10">
                                <h3 class="font-medium text-lg sm:text-xl text-foreground">
                                  Slippers with sole
                                </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                  And by that we mean a cleverly designed, versatile, easy to clean TPU sole which takes you indoors to out.
                                </p>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>

<div id="hs-sticky-sidebar-desktop-wrapper" class="lg:col-span-1">
                          <div class="pt-14 lg:pt-0 lg:pb-20 lg:ps-10 lg:sticky lg:top-20" data-hs-switch-place='{
                            "xs": "#hs-sticky-sidebar-mobile-wrapper",
                            "lg": "#hs-sticky-sidebar-desktop-wrapper"
                          }'>
                            
                            <div class="">
                              <p class="mb-1 text-sm text-muted-foreground-1">
                                Men's Slippers
                              </p>

<h1 class="font-semibold text-3xl text-foreground">
                                Mahabis Classic
                              </h1>

<div class="mt-5">
                                
                                <a class="inline-flex items-center gap-x-0.5 underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#reviews">
                                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                  </svg>
                                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                  </svg>
                                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                  </svg>
                                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                  </svg>
                                  <svg class="shrink-0 size-3 text-foreground" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"></path>
                                  </svg>
                                  <span class="ms-1 text-xs text-foreground">
                                    (99)
                                  </span>
                                </a>

<p class="text-xs text-muted-foreground-1">
                                  Includes reviewers who received this item for free
                                </p>
                              </div>

<div class="mt-5">
                                
                                <h2 class="font-medium text-foreground">
                                  Color
                                </h2>

<div class="mt-2 flex flex-wrap gap-3">
                                  
                                  <label for="hs-pro-shgctn1" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                                    <input type="radio" id="hs-pro-shgctn1" class="hidden" value="@@title" name="hs-pro-shgctn" >
                                    <span class="size-7 bg-inverse rounded-md"></span>
                                  </label>

<label for="hs-pro-shgctn2" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                                    <input type="radio" id="hs-pro-shgctn2" class="hidden" value="@@title" name="hs-pro-shgctn" >
                                    <span class="size-7 bg-plain border border-line-2 rounded-md"></span>
                                  </label>
                                  
  
                                  
                                  <label for="hs-pro-shgctn4" class="size-7 rounded-md flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
                                    <input type="radio" id="hs-pro-shgctn4" class="hidden" value="@@title" name="hs-pro-shgctn" checked>
                                    <span class="size-7 bg-surface-2 rounded-md"></span>
                                  </label>
                                  
                                </div>

<p class="mt-2 text-xs text-muted-foreground-1">
                                  Light Grey
                                </p>
                              </div>

<div class="mt-6">
                                
                                <div class="flex flex-wrap justify-between items-center gap-3">
                                  <h2 class="font-medium text-foreground">
                                    Size
                                  </h2>

<button type="button" class="inline-flex items-center gap-x-1.5 text-xs text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shpdsgm">
                                    <svg class="shrink-0 size-4" 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"><path d="M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z"/><path d="m14.5 12.5 2-2"/><path d="m11.5 9.5 2-2"/><path d="m8.5 6.5 2-2"/><path d="m17.5 15.5 2-2"/></svg>
                                    Size guide
                                  </button>
                                </div>

<div class="mt-2 grid grid-cols-4 gap-2">
                                  
                                  <label for="hs-pro-shfdsr-us-6and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-6and5" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      6.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-7" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-7" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      7
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-7and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-7and5" class="hidden" name="hs-pro-shfdsr" disabled>
                                    <span class="block">
                                      7.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-8" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-8" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      8
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-8and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-8and5" class="hidden" name="hs-pro-shfdsr" disabled>
                                    <span class="block">
                                      8.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-9" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-9" class="hidden" name="hs-pro-shfdsr" disabled>
                                    <span class="block">
                                      9
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-9and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-9and5" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      9.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-10" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-10" class="hidden" name="hs-pro-shfdsr" disabled>
                                    <span class="block">
                                      10
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-10and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-10and5" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      10.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-11" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-11" class="hidden" name="hs-pro-shfdsr" disabled>
                                    <span class="block">
                                      11
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-11and5" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-11and5" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      11.5
                                    </span>
                                  </label>

<label for="hs-pro-shfdsr-us-12" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
                                  has-checked:text-primary-checked
                                  has-checked:border-primary-checked
                                  has-checked:ring-1
                                  has-checked:ring-primary-checked
                                  has-disabled:pointer-events-none
                                  has-disabled:opacity-70
                                  has-disabled:text-line-2
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-shfdsr-us-12" class="hidden" name="hs-pro-shfdsr" >
                                    <span class="block">
                                      12
                                    </span>
                                  </label>
                                  
                                </div>
                                
                              </div>

<div class="mt-2">
                                <span class="inline-flex items-center gap-x-1 text-sm text-orange-500">
                                  <svg class="shrink-0 size-3" 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"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                  Low in stock
                                </span>
                              </div>

<div class="mt-7 flex gap-3">
                                <select class="py-3 ps-4 pe-8 inline-block bg-layer border-layer-line rounded-lg text-sm text-layer-foreground cursor-pointer hover:bg-layer-hover focus:border-primary-focus focus:border-primary-focus focus:ring-primary-focus focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none">
                                  <option selected>1</option>
                                  <option>2</option>
                                  <option>3</option>
                                  <option>4</option>
                                  <option>5</option>
                                  <option>6</option>
                                  <option>7</option>
                                  <option>8</option>
                                  <option>9</option>
                                  <option>10</option>
                                </select>

<button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-secondary border border-secondary-line text-secondary-foreground hover:bg-secondary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-secondary-focus">
                                  Add to cart
                                </button>
    
                                <button type="button" class="py-3 px-4 relative inline-flex justify-center items-center gap-x-1.5 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                  <span class="sr-only">Favorite</span>
                                  <svg class="shrink-0 size-4" 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"><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.3 1.5 4.05 3 5.5l7 7Z"/></svg>
                                </button>
                              </div>

<div class="mt-7 text-center">
                                <p class="text-sm text-muted-foreground-1">
                                  4 interest-free payments of $10 with <span class="font-semibold text-foreground">Klarna.</span>
                                </p>
                                <p>
                                  <a class="text-sm text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Learn more</a>
                                </p>
                              </div>

<div class="mt-5">
                                <h2 class="font-medium text-foreground">
                                  Shipping
                                </h2>
    
                                <p class="mt-1 text-sm text-muted-foreground-1">
                                  You'll see our shipping options at checkout.
                                </p>
                              </div>

<div class="mt-7 space-y-3">
                                
                                <div class="flex items-center gap-x-3">
                                  <svg class="shrink-0 size-5 text-foreground" 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"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
                                  <div class="grow">
                                    <p class="text-sm text-foreground">
                                      Secure checkout
                                    </p>
                                  </div>
                                </div>

<div class="flex items-center gap-x-3">
                                  <svg class="shrink-0 size-5 text-foreground" 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"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                                  <div class="grow">
                                    <p class="text-sm text-foreground">
                                      30 days return
                                    </p>
                                  </div>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>
                        </div>
                        
                      </div>
                      
                    </div>

contentToSwitch.forEach((el) => {
                          const options = JSON.parse(el.getAttribute("data-hs-switch-place"));
                          Object.keys(options).forEach((key) => {
                            if (windowWidth >= BREAKPOINTS[key]) currentWrapper = document.querySelector(options[key]);
                          });

if (currentWrapper.contains(el)) return false;

currentWrapper.append(el);
                        });
                      };

window.addEventListener("load", () => {
                        contentToSwitch();
                      });

window.addEventListener("resize", _.debounce(() => {
                        contentToSwitch();
                      }), 100);
                    </script>

Coffee Shop Product Detail Page with Hero Image Pro

Branded product detail page pairs a large hero image with a sticky purchase column and follows it with a full-width featured information section.

<div class="w-full max-w-7xl px-4 sm:px-6 lg:px-8 pb-12 lg:pb-24 mx-auto">
                    
                    <div class="grid grid-cols-1 lg:grid-cols-3">
                      <div class="lg:col-span-2">
                        <div class="relative w-full h-150 lg:h-200">
                          <img class="absolute inset-0 size-full object-cover rounded-xl" src="../../../assets/img/pro/coffee-shop/img6.png" alt="Product Image">
                        </div>
                      </div>

<div class="lg:col-span-1">
                        <div class="pt-6 lg:pt-0 lg:ps-10 lg:sticky lg:top-0">
                          
                          <div class="pt-10">
                            <h1 class="font-medium text-2xl md:text-3xl text-foreground">
                              Beija Flor
                            </h1>

<div class="mt-6">
                              
                              <div class="flex flex-wrap justify-between items-center gap-3">
                                <h2 class="text-sm text-foreground">
                                  Size
                                </h2>
                              </div>

<div class="mt-2 flex flex-wrap gap-2">
                                
                                <label for="hs-pro-chpds250" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                has-checked:text-secondary-foreground
                                has-checked:bg-secondary
                                has-checked:border-secondary-line
                                has-checked:ring-1
                                has-checked:ring-secondary-line
                                has-disabled:pointer-events-none
                                has-disabled:after:rounded-xl
                                has-disabled:text-muted-foreground/30
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="radio" id="hs-pro-chpds250" class="hidden" name="hs-pro-chpds" checked>
                                  <span class="block">
                                    250g
                                  </span>
                                </label>

<label for="hs-pro-chpds500" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                  has-checked:text-secondary-foreground
                                  has-checked:bg-secondary
                                  has-checked:border-secondary-line
                                  has-checked:ring-1
                                  has-checked:ring-secondary-line
                                  has-disabled:pointer-events-none
                                  has-disabled:after:rounded-xl
                                  has-disabled:text-muted-foreground/30
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-chpds500" class="hidden" name="hs-pro-chpds" disabled>
                                    <span class="block">
                                      500g
                                    </span>
                                  </label>

<label for="hs-pro-chpds1000" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                  has-checked:text-secondary-foreground
                                  has-checked:bg-secondary
                                  has-checked:border-secondary-line
                                  has-checked:ring-1
                                  has-checked:ring-secondary-line
                                  has-disabled:pointer-events-none
                                  has-disabled:after:rounded-xl
                                  has-disabled:text-muted-foreground/30
                                  has-disabled:after:absolute
                                  has-disabled:after:inset-0
                                  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                    <input type="radio" id="hs-pro-chpds1000" class="hidden" name="hs-pro-chpds" >
                                    <span class="block">
                                      1kg
                                    </span>
                                  </label>
                                  
                              </div>
                              
                            </div>

<div class="mt-6">
                              
                              <div class="flex flex-wrap justify-between items-center gap-3">
                                <h2 class="text-sm text-foreground">
                                  Grind
                                </h2>
                              </div>

<div class="mt-2 flex flex-wrap gap-2">
                                
                                <label for="hs-pro-chpdgr1" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                has-checked:text-secondary-foreground
                                has-checked:bg-secondary
                                has-checked:border-secondary-line
                                has-checked:ring-1
                                has-checked:ring-secondary-line
                                has-disabled:pointer-events-none
                                has-disabled:after:rounded-xl
                                has-disabled:text-muted-foreground/30
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="radio" id="hs-pro-chpdgr1" class="hidden" name="hs-pro-chpdgr" checked>
                                  <span class="block">
                                    Whole Bean
                                  </span>
                                </label>

<label for="hs-pro-chpdgr2" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                has-checked:text-secondary-foreground
                                has-checked:bg-secondary
                                has-checked:border-secondary-line
                                has-checked:ring-1
                                has-checked:ring-secondary-line
                                has-disabled:pointer-events-none
                                has-disabled:after:rounded-xl
                                has-disabled:text-muted-foreground/30
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="radio" id="hs-pro-chpdgr2" class="hidden" name="hs-pro-chpdgr" disabled>
                                  <span class="block">
                                    Espresso
                                  </span>
                                </label>

<label for="hs-pro-chpdgr3" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                has-checked:text-secondary-foreground
                                has-checked:bg-secondary
                                has-checked:border-secondary-line
                                has-checked:ring-1
                                has-checked:ring-secondary-line
                                has-disabled:pointer-events-none
                                has-disabled:after:rounded-xl
                                has-disabled:text-muted-foreground/30
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="radio" id="hs-pro-chpdgr3" class="hidden" name="hs-pro-chpdgr" >
                                  <span class="block">
                                    Filter
                                  </span>
                                </label>

<label for="hs-pro-chpdgr4" class="py-2 px-3 group relative flex justify-center items-center gap-x-3 text-center text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                has-checked:text-secondary-foreground
                                has-checked:bg-secondary
                                has-checked:border-secondary-line
                                has-checked:ring-1
                                has-checked:ring-secondary-line
                                has-disabled:pointer-events-none
                                has-disabled:after:rounded-xl
                                has-disabled:text-muted-foreground/30
                                has-disabled:after:absolute
                                has-disabled:after:inset-0
                                has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                  <input type="radio" id="hs-pro-chpdgr4" class="hidden" name="hs-pro-chpdgr" >
                                  <span class="block">
                                    Cafetiere
                                  </span>
                                </label>
                                
                              </div>
                              
                            </div>

<div class="mt-10 flex flex-col gap-3">
                              <div class="flex gap-3">
                                
                                <div class="py-1.5 px-2.5 inline-block bg-layer border border-layer-line rounded-xl" data-hs-input-number='{"max":99}'>
                                  <div class="flex items-center gap-x-1">
                                    <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 text-foreground rounded-lg hover:bg-surface-hover focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" tabindex="-1" aria-label="Decrease" data-hs-input-number-decrement="">
                                      <svg class="shrink-0 size-3.5" 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"><path d="M5 12h14"></path></svg>
                                    </button>
                                    <input class="p-0 w-8 bg-transparent border-0 text-foreground text-center focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none" style="-moz-appearance: textfield;" type="number" aria-roledescription="Number field" value="1" data-hs-input-number-input>
                                    <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 text-foreground rounded-lg hover:bg-surface-hover focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" tabindex="-1" aria-label="Increase" data-hs-input-number-increment="">
                                      <svg class="shrink-0 size-3.5" 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"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
                                    </button>
                                  </div>
                                </div>

<p class="mt-10 text-sm text-foreground">
                              Enjoy a medium-dark roast with balanced, rich chocolatey softness and dark berry undertones. One of our most popular single-origin beans.
                            </p>

<div class="mt-6">
                              
                              <div class="hs-accordion" id="hs-pro-chpd-item-description">
                                <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-chpd-description">
                                  Description
                                  <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                  <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                </button>

<div class="border-b border-line-2">
                                  <div id="hs-pro-chpd-description" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-chpd-item-description">
                                    <div class="pb-6">
                                      <p class="text-sm text-muted-foreground-2">
                                        This unique coffee bean is cultivated on the slopes of Lake Atitlán and prized for its larger-than-usual size, delicious depth of flavour, and balanced profile. Enjoy silky smooth coffee offering delicious undertones of chocolate and sweet berries.
                                      </p>

<ul class="mt-5 ps-3 space-y-1">
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Origin:</span> Guatemala
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Roast:</span> Medium-Dark
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Number of servings (using 15g per cup):</span> 125g = 8 cups; 250g = 16 cups; 500g = 33 cups; 1kg = 66 cups
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Ideal for using with:</span> Whittard Brew It Stick, Cafetières, AeroPress Coffee Maker, Nova Double-Walled Mug and Clever Coffee Dripper – but enjoy experimenting to find your unique brewing style
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Serving suggestion:</span> Enjoy hot, iced or cold brewed
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">Cafe-style coffees to try at home:</span> There's no set of rules here, but our personal favourites for this particular coffee is an espresso and americano
                                        </li>
                                        <li class="relative text-sm text-muted-foreground-2 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                          <span class="font-medium text-foreground">A new favourite:</span> If you already enjoy our Whittard House Blend Coffee or San Agustin Colombia Coffee you will likely love our Guatemala Elephant Coffee
                                        </li>
                                      </ul>
                                      
                                    </div>
                                  </div>
                                </div>
                              </div>

<div class="hs-accordion" id="hs-pro-chpd-item-ingridients">
                                <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-chpd-ingridients">
                                  Ingredients
                                  <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                  <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                </button>

<div class="border-b border-line-2">
                                  <div id="hs-pro-chpd-ingridients" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-chpd-item-ingridients">
                                    <div class="pb-6">
                                      <p class="text-sm text-muted-foreground-2">
                                        Arabica Coffee Beans (100%).
                                      </p>

<p class="mt-3 text-sm text-muted-foreground-2">
                                        Suitable for vegetarians and vegans.
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </div>

<div class="hs-accordion" id="hs-pro-chpd-item-shipping-and-returns">
                                <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-chpd-shipping-and-returns">
                                  Shipping and Returns
                                  <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                  <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                </button>

<div class="border-b border-line-2">
                                  <div id="hs-pro-chpd-shipping-and-returns" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-chpd-item-shipping-and-returns">
                                    <div class="pb-6">
                                      <p class="text-sm text-muted-foreground-2">
                                        Free standard shipping on orders over $50 and free 30-day returns. <a class="relative inline-block font-medium text-sm text-foreground before:absolute before:bottom-0.5 before:inset-s-0 before:-z-1 before:w-full before:h-1 before:bg-primary hover:before:bg-primary-hover focus:outline-hidden focus:before:bg-primary-focus" href="#">Learn more.</a>
                                      </p>

<p class="mt-3 text-sm text-muted-foreground-2">
                                        Returns must be received within 30 days of shipping confirmation. In order to process your return, items must be unworn and tags must be attached.
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                      </div>
                      
                    </div>
                    
                  </div>

<div class="bg-primary-100 dark:bg-primary-500/20">
                    <div class="max-w-7xl px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-24 mx-auto">
                      <div class="flex flex-col gap-y-10">
                        
                        <div class="grid grid-cols-1 lg:grid-cols-2 lg:items-center">
                          <div class="relative h-80 lg:h-120 bg-surface rounded-2xl">
                            <img class="absolute inset-0 size-full object-cover rounded-2xl" src="https://images.unsplash.com/photo-1652015496419-58606c1b5d1c?q=80&w=768&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Featured Info Image">
                          </div>
                          
        
                          <div class="pt-5 lg:p-10 lg:pe-0">
                            <h2 class="text-2xl font-medium md:text-3xl md:leading-tight text-foreground">
                              The Story of Beija Flor
                            </h2>
                            <p class="mt-5 text-foreground">
                              Beija Flor coffee is sourced from the lush mountains of Minas Gerais, Brazil. This renowned coffee-growing region is known for its ideal climate and rich volcanic soil.
                            </p>
                            <p class="mt-3 text-foreground">
                              The unique terroir of Minas Gerais, combined with our careful cultivation methods, results in Beija Flor's distinctive flavor profile - a harmonious blend of caramel sweetness, subtle spice notes, and a smooth, wine-like finish.
                            </p>
                          </div>
                          
                        </div>

<div class="grid grid-cols-1 lg:grid-cols-2 lg:items-center">
                          <div class="lg:order-2 relative h-80 lg:h-120 bg-surface rounded-2xl">
                            <img class="absolute inset-0 size-full object-cover rounded-2xl" src="https://images.unsplash.com/photo-1515694590185-73647ba02c10?q=80&w=768&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Featured Info Image">
                          </div>
                          
        
                          <div class="lg:order-1 pt-5 lg:p-10 lg:ps-0">
                            <h2 class="text-2xl font-medium md:text-3xl md:leading-tight text-foreground">
                              Coffee Info
                            </h2>
          
                            
                            <div class="mt-5 flex flex-col">
                              
                              <div class="py-3 border-t border-line-5 first:border-t-0">
                                <div class="grid grid-cols-2 gap-2">
                                  <div>
                                    <span class="font-medium text-foreground">Tasting Notes:</span>
                                  </div>

<div class="text-end">
                                    <span class="text-foreground">Hazelnut, Grape, Milk Chocolate</span>
                                  </div>
                                </div>
                              </div>

<div class="py-3 border-t border-line-5 first:border-t-0">
                                <div class="grid grid-cols-2 gap-2">
                                  <div>
                                    <span class="font-medium text-foreground">Origin:</span>
                                  </div>

<div class="flex justify-end">
                                    <span class="text-foreground">Brazil</span>
                                  </div>
                                </div>
                              </div>

<div class="py-3 border-t border-line-5 first:border-t-0">
                                <div class="grid grid-cols-2 gap-2">
                                  <div>
                                    <span class="font-medium text-foreground">Region:</span>
                                  </div>

<div class="text-end">
                                    <span class="text-foreground">San Paulo</span>
                                  </div>
                                </div>
                              </div>

<div class="py-3 border-t border-line-5 first:border-t-0">
                                <div class="grid grid-cols-2 gap-2">
                                  <div>
                                    <span class="font-medium text-foreground">Processing Method:</span>
                                  </div>

<div class="flex justify-end">
                                    <span class="text-foreground">Natural</span>
                                  </div>
                                </div>
                              </div>

<div class="py-3 border-t border-line-5 first:border-t-0">
                                <div class="grid grid-cols-2 gap-2">
                                  <div>
                                    <span class="font-medium text-foreground">Varietal:</span>
                                  </div>

<div class="flex justify-end">
                                    <span class="text-foreground">Heirloom</span>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>
                  </div>

Marketplace Product Detail Page with Review Section Pro

Long-form marketplace product detail page combines a vertical media gallery, sticky purchase sidebar, review section, descriptive lists, and editorial content blocks.

<div class="w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="pt-6">
                        <div class="-ms-1.5 pb-3">
                          
                          <ol class=" flex items-center whitespace-nowrap">
                            <li class="flex items-center">
                              
                              <a class="py-0.5 px-1.5 flex items-center gap-x-1 text-sm rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing.html">
                                Electronics
                              </a>
                              <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                            </li>
                            <li class="flex items-center truncate">
                              
                              <a class="py-0.5 px-1.5 flex items-center truncate gap-x-1 text-sm truncate rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing.html">
                                <span class="truncate">Tablets, Laptops & Accessories</span>
                              </a>
                              <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                            </li>
                            <li class="ps-1.5 flex items-center truncate font-semibold text-foreground text-sm truncate">
                              <span class="truncate">Apple Pencil</span>
                            </li>
                          </ol>
                          
                        </div>

<div class="grid grid-cols-1 lg:grid-cols-5 gap-y-10">
                          <div class="lg:col-span-3">
                            
                            <div data-hs-carousel='{
                                "loadingClasses": "opacity-0",
                                "isInfiniteLoop": true
                              }' class="relative">
                              <div class="hs-carousel flex flex-col sm:flex-row gap-3 sm:gap-5">
                                
                                <div class="flex-none order-2 sm:order-1">
                                  <div class="hs-carousel-pagination sm:h-175 flex flex-row sm:flex-col gap-3 pb-1.5 sm:pb-0 overflow-x-auto sm:overflow-x-hidden sm:overflow-y-auto sm:[&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1660820936253-f636cfc17b8b?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1660820936280-bd9c483eb54b?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1730364158831-19cc94f00424?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1594200664133-0ee987e1babf?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1547571031-4c1023b95da6?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1551962368-1abc41c65f83?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1551721434-f5a13c7a6d14?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1714859100390-7f3a57e5ae74?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1714859100409-a7d7937c21d3?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-pagination-item relative shrink-0 size-20 rounded-md sm:rounded-lg overflow-hidden cursor-pointer after:absolute after:inset-0 after:size-full after:rounded-md sm:after:rounded-lg border border-line-2 hs-carousel-active:border-line-8 hs-carousel-active:after:bg-inverse/10">
                                      <img class="size-full object-cover rounded-md sm:rounded-lg" src="https://images.unsplash.com/photo-1588876315093-ce09afb34028?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                  </div>
                                </div>

<div class="relative group grow overflow-hidden h-137.5 sm:h-175 order-1 sm:order-2 bg-surface rounded-lg">
                                  <div class="hs-carousel-body absolute inset-y-0 inset-s-0 flex flex-nowrap opacity-0">
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1660820936253-f636cfc17b8b?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1660820936280-bd9c483eb54b?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1730364158831-19cc94f00424?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1594200664133-0ee987e1babf?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1547571031-4c1023b95da6?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1551962368-1abc41c65f83?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1551721434-f5a13c7a6d14?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1714859100390-7f3a57e5ae74?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1714859100409-a7d7937c21d3?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                    <div class="hs-carousel-slide">
                                      <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1588876315093-ce09afb34028?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </div>
                                  </div>

<button type="button" class="hs-carousel-prev group-hover:opacity-100 opacity-0 absolute top-1/2 inset-s-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                                    <span class="text-2xl" aria-hidden="true">
                                      <svg class="shrink-0 size-5" 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"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                    <span class="sr-only">Previous</span>
                                  </button>
                                  <button type="button" class="hs-carousel-next group-hover:opacity-100 opacity-0 absolute top-1/2 inset-e-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                                    <span class="sr-only">Next</span>
                                    <span class="text-2xl" aria-hidden="true">
                                      <svg class="shrink-0 size-5" 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"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                  </button>
                                  
                                </div>
                                
                              </div>
                            </div>

<div class="pt-10">
                              
                              <div id="reviews" class="flex flex-wrap justify-between items-center gap-3">
                                <div class="font-medium text-foreground">
                                  <ul class="flex flex-wrap items-center gap-2">
                                    <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                      
                                      <div class="flex flex-wrap items-center">
                                        <span class="me-1">
                                          4.8
                                        </span>
          
                                        
                                        <div class="inline-flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                          </svg>
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                          </svg>
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                          </svg>
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                          </svg>
                                          <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                            <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"></path>
                                          </svg>
                                        </div>
                                        
                                      </div>
                                      
                                    </li>
                                    <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-1 after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                      112 reviews
                                    </li>
                                  </ul>
                                </div>

<div class="inline-flex items-center gap-x-1">
                                  <svg class="shrink-0 size-4 text-muted-foreground-1" 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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"></path><path d="m9 12 2 2 4-4"></path></svg>
                                  <p class="text-xs text-muted-foreground-1">
                                    All reviews are from verified purchases
                                  </p>
                                </div>
                              </div>

<div id="hs-pro-reviews-tabs-scroll" class="relative py-3 overflow-hidden" data-hs-scroll-nav>
                                
                                <nav id="hs-pro-reviews-tabs" class="hs-scroll-nav-body flex gap-1 snap-x snap-mandatory overflow-x-auto [&::-webkit-scrollbar]:hidden p-0.5 bg-layer border border-layer-line rounded-full" aria-label="Tabs" role="tablist" aria-orientation="horizontal">
                                  <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden active" id="hs-pro-tabs-shpm-item-five-star" aria-selected="true" data-hs-tab="#hs-pro-tabs-shpm-five-star" aria-controls="hs-pro-tabs-shpm-five-star" role="tab" >
                                    5 star (100)
                                  </button>
                                  <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-four-star" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-four-star" aria-controls="hs-pro-tabs-shpm-four-star" role="tab" >
                                    4 star (10)
                                  </button>
                                  <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-three-star" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-three-star" aria-controls="hs-pro-tabs-shpm-three-star" role="tab" >
                                    3 star (2)
                                  </button>
                                  <button type="button" class="hs-tab-active:bg-surface-active snap-start hs-tab-active:bg-muted-hover hs-tab-active:focus:bg-muted-focus hs-tab-active:focus:text-surface-foreground w-full inline-flex justify-center items-center gap-x-2 text-surface-foreground py-2 px-3 text-sm whitespace-nowrap rounded-full disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:text-surface-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden " id="hs-pro-tabs-shpm-item-two-and-below" aria-selected="false" data-hs-tab="#hs-pro-tabs-shpm-two-and-below" aria-controls="hs-pro-tabs-shpm-two-and-below" role="tab" >
                                    2 and below (0)
                                  </button>
                                </nav>
                                
                              </div>

<div id="hs-pro-tabs-shpm-five-star" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-five-star">
                                
                                <div class="grid sm:grid-cols-2 gap-4">
                                  
                                  <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                                    <div class="flex flex-wrap justify-between gap-3">
                                      <div>
                                        <p class="font-semibold text-sm text-foreground">
                                          Christina
                                        </p>

<p class="text-[13px] text-muted-foreground-1">
                                          13 hours ago
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<p class="mt-3 text-sm text-foreground">
                                        I got my iPad back in 2017 and really wanted to love it but it has never been very useful to me. I tried attaching a Bluetooth keyboard. That made it heavy and clunky and I was never able to know how much battery life... <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                                      </p>
                                    </div>
                                  </div>

<div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                                    <div class="flex flex-wrap justify-between gap-3">
                                      <div>
                                        <p class="font-semibold text-sm text-foreground">
                                          Sam
                                        </p>

<p class="mt-3 text-sm text-foreground">
                                        The apple pencil is very easy to pair with your i pad. Not only does it work better than expected while drawing or painting but the battery last much longer than expected. I was fully blown away with the fine tuning ability while drawing and painting.
                                      </p>
                                    </div>
                                  </div>

</div>
                                
                              </div>

<div id="hs-pro-tabs-shpm-four-star" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-four-star">
                                
                                <div class="grid sm:grid-cols-2 gap-4">
  
                                  
                                  <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                                    <div class="flex flex-wrap justify-between gap-3">
                                      <div>
                                        <p class="font-semibold text-sm text-foreground">
                                          Brian
                                        </p>

<p class="text-[13px] text-muted-foreground-1">
                                          December 27, 2024
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<div>

<p class="mt-3 text-sm text-foreground">
                                        I bought this back in April 2024… now it will not charge. I’ve connected to both my iPad and iPhone, I’ve attempted with both adapters that are provided and even changed the tips. It will not charge.
                                      </p>
                                    </div>
                                  </div>

<p class="text-[13px] text-muted-foreground-1">
                                          December 14, 2024
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<div>

<p class="mt-3 text-sm text-foreground">
                                        Okay, it was delayed for like 3 days then it was placed on hold, after that it finally came and I actually love it. The value is actually so good, I got it for 79 dollars, it works really well and fits in my hand perfectly!
                                      </p>
                                    </div>
                                  </div>

</div>
                                
                              </div>

<div id="hs-pro-tabs-shpm-three-star" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-three-star">
                                
                                <div class="grid sm:grid-cols-2 gap-4">
  
                                  
                                  <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                                    <div class="flex flex-wrap justify-between gap-3">
                                      <div>
                                        <p class="font-semibold text-sm text-foreground">
                                          Truong
                                        </p>

<p class="text-[13px] text-muted-foreground-1">
                                          November 26, 2024
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<div>

<p class="mt-3 text-sm text-foreground">
                                        sometime it better to just get the newest model, also this pencil had a lot of problem and defect and connectivity problem
                                      </p>
                                    </div>
                                  </div>

<p class="text-[13px] text-muted-foreground-1">
                                          November 8, 2024
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<div>

<p class="mt-3 text-sm text-foreground">
                                        The tip wore down really fast though. Really easy to use. It sometimes rolls off the table.
                                      </p>
                                    </div>
                                  </div>

</div>
                                
                              </div>

<div id="hs-pro-tabs-shpm-two-and-below" class="hidden" role="tabpanel" aria-labelledby="hs-pro-tabs-shpm-item-two-and-below">
                                
                                <div class="grid sm:grid-cols-2 gap-4">
  
                                  
                                  <div class="p-4 h-full flex flex-col bg-card border border-card-line rounded-xl shadow-2xs">
                                    <div class="flex flex-wrap justify-between gap-3">
                                      <div>
                                        <p class="font-semibold text-sm text-foreground">
                                          Christina
                                        </p>

<p class="text-[13px] text-muted-foreground-1">
                                          13 hours ago
                                        </p>
                                      </div>
    
                                      <div class="mt-1">
                                        
                                        <div class="flex items-center gap-x-0.5">
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                          <svg class="shrink-0 size-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/></svg>
                                        </div>
                                        
                                      </div>
                                    </div>

<p class="mt-3 text-sm text-foreground">
                                        The apple pencil is longer and heavier than the generic version I’ve been using and the result is incredibly uncomfortable. It feels like it’s trying to actively flip over the top of my hand as I write. The weird weight and leverage puts more strain on my wrist and leads to discomfort and worse hand writing. <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                                      </p>
                                    </div>
                                  </div>

<p class="mt-3 text-sm text-foreground">
                                        I used my Apple Pencil with my 10th generation iPad for the first semester of grad school. I did use it pretty heavily. Pretty early on it started to glitch and add straight lines whenever it touched the screen, but that could always be corrected by disconnecting and reconnecting. <a class="text-primary underline-offset-4 hover:underline" href="#">Read more</a>
                                      </p>
                                    </div>
                                  </div>

</div>
                                
                              </div>

<div class="mt-6 w-full max-w-56 mx-auto">
                                <a class="py-3 px-4 w-full flex justify-center items-center font-medium text-sm text-start bg-layer border border-layer-line text-layer-foreground rounded-full hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                                  See all reviews
                                </a>
                              </div>

</div>

<div class="pt-14 pb-10">
                              <div class="mb-5 flex flex-wrap justify-between items-center gap-3">
                                <p class="font-semibold text-foreground">
                                  Description
                                </p>

<div>
                                  <a class="flex items-center gap-x-1 font-medium text-sm underline-offset-4 text-primary hover:underline focus:outline-hidden focus:underline" href="#">
                                    Report this item
                                    <svg class="shrink-0 size-4" 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"><path d="m9 18 6-6-6-6"/></svg>
                                  </a>
                                </div>
                              </div>

<div class="grid grid-cols-2 gap-x-3">
                                <div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                  <span class="relative z-1 pe-2 bg-background">Article code</span>
                                </div>
                                <div class="py-1 text-sm text-foreground">
                                  <span id="hs-pro-shmaccl">143483901</span>
    
                                  <button type="button" class="js-clipboard [--is-toggle-tooltip:false] hs-tooltip size-4 sm:size-6 shrink-0 inline-flex justify-center items-center gap-x-2 rounded-md text-foreground sm:hover:bg-muted-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden sm:focus:bg-muted-focus"
                                    data-clipboard-target="#hs-pro-shmaccl"
                                    data-clipboard-action="copy"
                                    data-clipboard-success-text="Code copied">
                                    <svg class="js-clipboard-default shrink-0 size-3.5" 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"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                                    <svg class="js-clipboard-success hidden size-3.5" 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"><polyline points="20 6 9 17 4 12"></polyline></svg>
                                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity hidden invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-md shadow-2xs" role="tooltip">
                                      <span class="js-clipboard-success-text">Copy link</span>
                                    </span>
                                  </button>
                                </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                  <span class="relative z-1 pe-2 bg-background">Material</span>
                                </div>
                                <div class="py-1 text-sm text-foreground">
                                  Aluminum
                                </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                  <span class="relative z-1 pe-2 bg-background">Number of Batteries</span>
                                </div>
                                <div class="py-1 text-sm text-foreground">
                                  1 Lithium Polymer batteries required.
                                </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                  <span class="relative z-1 pe-2 bg-background">Compatible Devices</span>
                                </div>
                                <div class="py-1 text-sm text-foreground">
                                  iPad
                                </div>
                              </div>

<div id="hs-shmldwhdcid-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-shmldwhdcid" role="region">
                                
                                <div class="grid grid-cols-2 gap-x-2">
                                  <div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                    <span class="relative z-1 pe-2 bg-background">Item dimensions</span>
                                  </div>
                                  <div class="py-1 text-sm text-foreground">
                                    L x W x H 0.07 x 0.35 x 0.07 inches
                                  </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                    <span class="relative z-1 pe-2 bg-background">Are Batteries Included</span>
                                  </div>
                                  <div class="py-1 text-sm text-foreground">
                                    No
                                  </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                    <span class="relative z-1 pe-2 bg-background">Batteries Required?</span>
                                  </div>
                                  <div class="py-1 text-sm text-foreground">
                                    No
                                  </div>

<div class="py-1 relative overflow-hidden text-sm text-muted-foreground-1 text-end sm:text-start after:hidden sm:after:block after:absolute after:top-1/2 after:w-full after:mx-3 after:border-t after:border-dashed after:border-line-2">
                                    <span class="relative z-1 pe-2 bg-background">Global Trade Identification Number</span>
                                  </div>
                                  <div class="py-1 text-sm text-foreground">
                                    30194253687871
                                  </div>
                                </div>
                                
                              </div>

<div>
                                <button type="button" class="hs-collapse-toggle inline-flex items-center gap-x-1 font-medium text-sm text-primary underline-offset-4 hover:underline hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" id="hs-shmldwhdcid" aria-expanded="false" aria-controls="hs-shmldwhdcid-heading" data-hs-collapse="#hs-shmldwhdcid-heading">
                                  <span class="hs-collapse-open:hidden">Show more</span>
                                  <span class="hs-collapse-open:block hidden">Show less</span>
                                  <svg class="hs-collapse-open:rotate-180 shrink-0 size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                </button>
                              </div>

<div class="mt-6 pt-6 border-t border-line-2">
                                <h4 class="mb-5 font-semibold text-foreground">
                                  About this item
                                </h4>

<ul class="ps-1 space-y-2">
                                  <li class="relative text-sm text-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    WHY APPLE PENCIL — With pixel-perfect precision, tilt and pressure sensitivity, and imperceptible lag, Apple Pencil (1st generation) transforms into your paintbrush or your pencil. It makes painting, sketching, doodling, and note-taking better than ever.
                                  </li>
                                  <li class="relative text-sm text-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    COMPATIBILITY — Apple Pencil (1st generation) works with iPad (6th, 7th, 8th, 9th, and 10th* generation); iPad Air (3rd generation); iPad mini (5th generation); iPad Pro 12.9-inch (1st and 2nd generation); iPad Pro 10.5-inch; and iPad Pro 9.7-inch. * iPad (10th generation) requires USB-C to Apple Pencil Adapter.
                                  </li>
                                  <li class="relative text-sm text-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    EASY AND NATURAL — Apple Pencil is sensitive to pressure and tilt so you can easily vary line weight, create subtle shading, and produce a wide range of artistic effects — just like a conventional pencil, but with pixel-perfect precision.
                                  </li>
                                  <li class="relative text-sm text-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    TRANSFORMS IPAD INTO A CANVAS — Draw, sketch, color, take notes, and mark up documents. Apple Pencil does it all with imperceptible lag. Pair and charge your Apple Pencil with the included Lightning adapter.
                                  </li>
                                  <li class="relative text-sm text-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                    WHAT’S IN THE BOX — Apple Pencil, Lightning adapter, extra tip, and USB-C to Apple Pencil Adapter (required to pair and charge with 10th-generation iPad).
                                  </li>
                                </ul>
                                
                              </div>
                              
                            </div>

<div class="py-4 space-y-5 sm:space-y-10">
                              
                              <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-5">
                                <div>
                                  <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1588876315093-ce09afb34028?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                </div>

<div class="sm:min-h-80 flex flex-col justify-center sm:p-8">
                                  <h3 class="font-medium text-lg sm:text-xl text-foreground">
                                    Dream it up. Jot it down.
                                  </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                    Apple Pencil sets the standard for how drawing, note‑taking, and marking up documents should feel — intuitive, precise, and magical.
                                  </p>
                                </div>
                                
                              </div>
                              
          
                              
                              <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-5">
                                <div class="sm:order-2">
                                  <img class="size-full object-cover rounded-xl" src="https://images.unsplash.com/photo-1714859100394-7bc88804b0b3?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                </div>

<div class="sm:order-1 sm:min-h-80 flex flex-col justify-center sm:p-8 sm:ps-0">
                                  <h3 class="font-medium text-lg sm:text-xl text-foreground">
                                    Squeeze. Haptic feedback.
                                  </h3>

<p class="mt-3 sm:mt-5 text-sm sm:text-base text-muted-foreground-1">
                                    With pixel‑perfect precision, low latency, tilt sensitivity, and support for palm rejection, Apple Pencil is incredibly easy to use and ready when inspiration strikes.
                                  </p>
                                </div>
                                
                              </div>
                              
                            </div>
                            
                          </div>

<div id="hs-sticky-sidebar-desktop-wrapper" class="lg:col-span-2">
                            <div class="pt-8 lg:pt-0 h-full" data-hs-switch-place='{
                              "xs": "#hs-sticky-sidebar-mobile-wrapper",
                              "lg": "#hs-sticky-sidebar-desktop-wrapper"
                            }'>
                              
                              <div class="lg:ps-12 h-full flex flex-col">
                                <h1 class="font-medium text-lg text-foreground">
                                  Apple Pencil (1st Generation): Pixel-Perfect Precision and Industry-Leading Low Latency, Perfect for Note-Taking, Drawing, and Signing documents.
                                </h1>

<div class="mt-2 flex flex-wrap items-center gap-2">
                                  <span class="py-0.5 px-1.5 text-xs uppercase bg-orange-600 text-foreground-inverse rounded-md dark:bg-orange-500">
                                    #1 Best seller
                                  </span>
                                  <a class="flex items-center gap-x-1 text-sm text-foreground underline-offset-4 hover:underline focus:outline-hidden focus:underline" href="#">
                                    in Tablets, Laptops & Accessories
                                    <svg class="shrink-0 size-3.5" 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"><path d="m9 18 6-6-6-6"/></svg>
                                  </a>
                                </div>

<div class="mt-3">
                                  
                                  <a class="inline-block font-medium text-foreground hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#reviews">
                                    <ul class="flex flex-wrap items-center gap-2">
                                      <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        
                                        <div class="flex flex-wrap items-center">
                                          <span class="me-1">
                                            4.8
                                          </span>
            
                                          
                                          <div class="inline-flex items-center gap-x-0.5">
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                              <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                            </svg>
                                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                              <path d="M5.354 5.119 7.538.792A.52.52 0 0 1 8 .5c.183 0 .366.097.465.292l2.184 4.327 4.898.696A.54.54 0 0 1 16 6.32a.55.55 0 0 1-.17.445l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256a.5.5 0 0 1-.146.05c-.342.06-.668-.254-.6-.642l.83-4.73L.173 6.765a.55.55 0 0 1-.172-.403.6.6 0 0 1 .085-.302.51.51 0 0 1 .37-.245zM8 12.027a.5.5 0 0 1 .232.056l3.686 1.894-.694-3.957a.56.56 0 0 1 .162-.505l2.907-2.77-4.052-.576a.53.53 0 0 1-.393-.288L8.001 2.223 8 2.226z"></path>
                                            </svg>
                                          </div>
                                          
                                        </div>
                                        
                                      </li>
                                      <li class="inline-flex items-center relative pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:size-[3px] after:bg-surface-3 after:rounded-full after:-translate-y-1/2">
                                        112 reviews
                                      </li>
                                    </ul>
                                  </a>
                                  
                                </div>

<div class="mt-5">
                                  <span class="mb-2 block font-medium text-sm text-foreground">
                                    Model:
                                  </span>

<div class="grid grid-cols-2 gap-2">
                                    
                                    <label for="hs-pro-shmfdsr-pro" class="group relative overflow-hidden flex items-center gap-2 p-2 text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                    has-checked:text-primary-checked
                                    has-checked:border-primary-checked
                                    has-checked:ring-1
                                    has-checked:ring-primary-checked
                                    has-disabled:pointer-events-none
                                    has-disabled:text-layer-line
                                    has-disabled:after:absolute
                                    has-disabled:after:inset-0
                                    has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                      <input type="radio" id="hs-pro-shmfdsr-pro" class="hidden" name="hs-pro-shmfdsr" >
                                      <img class="shrink-0 size-16 rounded-md" src="https://images.unsplash.com/photo-1660820936253-f636cfc17b8b?q=80&w=60&h=60&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      <span class="grow truncate">
                                        <span class="block font-semibold truncate">
                                          Apple Pencil Pro
                                        </span>
                                        <span class="block">
                                          $89
                                        </span>
                                      </span>
                                    </label>

<label for="hs-pro-shmfdsr-usb" class="group relative overflow-hidden flex items-center gap-2 p-2 text-sm bg-layer border border-layer-line text-layer-foreground cursor-pointer rounded-xl
                                    has-checked:text-primary-checked
                                    has-checked:border-primary-checked
                                    has-checked:ring-1
                                    has-checked:ring-primary-checked
                                    has-disabled:pointer-events-none
                                    has-disabled:text-layer-line
                                    has-disabled:after:absolute
                                    has-disabled:after:inset-0
                                    has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
                                      <input type="radio" id="hs-pro-shmfdsr-usb" class="hidden" name="hs-pro-shmfdsr" >
                                      <img class="shrink-0 size-16 rounded-md" src="https://images.unsplash.com/photo-1602144124318-f448134df981?q=80&w=60&h=60&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      <span class="grow truncate">
                                        <span class="block font-semibold truncate">
                                          Apple Pencil (USB-C)
                                        </span>
                                        <span class="block">
                                          $79
                                        </span>
                                      </span>
                                    </label>
                                    
                                  </div>
                                  
                                </div>
                                
  
                                <div class="mt-5 h-full">
                                  <div class="lg:sticky lg:top-4 space-y-5">
                                    <div class="bg-layer border border-layer-line rounded-2xl">
                                      <div class="p-5">
                                        
                                        <div class="flex flex-wrap justify-between items-center gap-1">
                                          <div class="grow">
                                            <span class="font-semibold text-3xl text-foreground">
                                              $89 <span class="text-xl">USD</span>
                                            </span>
                                            <span class="text-muted-foreground-1">
                                              <s>$109</s>
                                            </span>
                                          </div>

<div>
                                            <button type="button" class="flex shrink-0 justify-center items-center size-10 text-sm font-medium rounded-full bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                                              <span class="sr-only">Favorite</span>
                                              <svg class="shrink-0 size-4" 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"><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.3 1.5 4.05 3 5.5l7 7Z"/></svg>
                                            </button>
                                          </div>
                                        </div>

<div class="mt-2 flex flex-wrap items-center gap-1">
                                          <span class="py-0.5 px-1.5 text-[11px] border border-orange-500 text-orange-500 rounded-md">
                                            -25% Limited time
                                          </span>
                                        </div>

<div class="mt-5 grid grid-cols-2 items-center gap-2">
                                          <div>
                                            <span class="block font-medium text-lg text-orange-500">
                                              Low in stock
                                            </span>

<div class="mt-5 flex flex-col gap-3">
                                          <button type="button" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-1 text-sm font-medium rounded-full bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-primary-focus">
                                            Add to cart
                                          </button>

<div class="p-5 divide-y divide-line-2">
                                        
                                        <div class="py-4 first:pt-0 last:pb-0 flex gap-x-3">
                                          <svg class="shrink-0 size-5 text-foreground" 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"><path d="M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"/><path d="M15 18H9"/><path d="M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"/><circle cx="17" cy="18" r="2"/><circle cx="7" cy="18" r="2"/></svg>
    
                                          <div class="grow">
                                            <h2 class="font-medium text-sm text-foreground">
                                              Free shipping on all orders
                                            </h2>

<div class="mt-1.5 flex flex-col gap-y-0.5">
                                              
                                              <div class="flex items-center gap-x-1">
                                                <span class="text-sm text-muted-foreground-1">
                                                  Delivery:
                                                </span>
                                                <div>
                                                  <button type="button" class="flex items-center gap-x-1 text-start font-medium text-sm text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline">
                                                    FREE delivery
                                                  </button>
                                                </div>
                                                <span class="text-sm text-foreground">
                                                  January 4 - 7
                                                </span>
                                              </div>

<div class="flex items-center gap-x-1">
                                                <span class="text-sm text-muted-foreground-1">
                                                  Delivery address:
                                                </span>
                                                <div>
                                                  <button type="button" class="flex items-center gap-x-1 text-start font-medium text-sm text-primary underline-offset-4 hover:underline focus:outline-hidden focus:underline" data-hs-overlay="#hs-pro-shmnlcm">
                                                    Brooklyn 11223
                                                  </button>
                                                </div>
                                              </div>
                                              
                                            </div>
                                            
                                          </div>
                                        </div>

<div class="py-4 first:pt-0 last:pb-0 flex gap-x-3">
                                          <svg class="shrink-0 size-5 text-foreground" 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"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
    
                                          <div class="grow">
                                            <h2 class="font-medium text-sm text-foreground">
                                              30 days return
                                            </h2>

<div class="mt-1.5">
                                              <p class="text-sm text-muted-foreground-1">
                                                Not satisfied? Return any item within 30 days of purchase for a full refund or exchange. <a class="text-sm underline-offset-4 text-primary hover:underline focus:outline-hidden focus:underline" href="#">Learn more</a>
                                              </p>
                                            </div>
                                          </div>
                                        </div>

<div class="py-4 first:pt-0 last:pb-0 flex gap-x-3">
                                          <svg class="shrink-0 size-5 text-foreground" 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"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>
    
                                          <div class="grow">
                                            <h2 class="font-medium text-sm text-foreground">
                                              Secure checkout
                                            </h2>

<p class="text-sm text-muted-foreground-1">
                                                Shop with confidence using our encrypted payment system that protects your sensitive information.
                                              </p>
                                            </div>
                                          </div>
                                        </div>
                                        
                                      </div>
                                      
        
                                      
                                      <div class="p-5 bg-card border-t border-card-line rounded-b-2xl">
                                        <div class="h-full flex items-center gap-x-3">
                                          <img class="shrink-0 size-12 object-cover rounded-lg" src="https://images.unsplash.com/photo-1684846100353-97dd30cef0b4?q=80&w=180&h=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                          <div class="grow h-full flex flex-col">
                                            <div>
                                              <div class="flex flex-wrap items-center gap-1">
                                                <span class="flex items-center gap-1 font-semibold text-lg text-foreground">
                                                  Apple
                                                </span>

<div class="hs-tooltip [--trigger:hover] inline-block">
                                                  <div class="hs-tooltip-toggle block text-center">
                                                    <span class="flex flex-col justify-center items-center size-3.5 bg-primary text-primary-foreground rounded-full">
                                                      <svg class="shrink-0 size-2.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                                                    </span>

<div class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible hidden opacity-0 transition-opacity absolute invisible z-10 w-56 bg-tooltip border border-tooltip-line text-start p-3 rounded-xl" role="tooltip">
                                                      
                                                      <ul class="ps-1 space-y-1">
                                                        <li class="relative text-xs text-tooltip-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-layer/70 after:rounded-full">
                                                          Official Supplier
                                                        </li>
                                                        <li class="relative text-xs text-tooltip-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-layer/70 after:rounded-full">
                                                          The product is certified
                                                        </li>
                                                        <li class="relative text-xs text-tooltip-foreground ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-layer/70 after:rounded-full">
                                                          Official warranty
                                                        </li>
                                                      </ul>
                                                      
                                                    </div>
                                                  </div>
                                                </div>
                                                
                                              </div>

<ul class="flex flex-wrap items-center gap-2">
                                                
                                                <li class="inline-flex items-center relative text-sm text-muted-foreground-1 pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-2.5 after:bg-surface-3 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                                                  <span class="flex items-center gap-1 text-sm text-foreground">
                                                    <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
                                                    </svg>
                                                    <span class="font-medium">4.7</span>
                                                    <span class="text-muted-foreground-1">(12k+ reviews)</span>
                                                  </span>
                                                </li>
                                                
          
                                                
                                                <li class="inline-flex items-center relative text-sm text-muted-foreground-1 pe-2.5 last:pe-0 last:after:hidden after:absolute after:top-1/2 after:inset-e-0 after:inline-block after:w-px after:h-2.5 after:bg-surface-3 after:rounded-full after:-translate-y-1/2 after:rotate-12">
                                                  <span class="font-medium text-sm text-foreground">
                                                    43K+
                                                  </span>
                                                  <span class="ms-1 text-sm text-muted-foreground-1">
                                                    Sold
                                                  </span>
                                                </li>
                                                
                                              </ul>
                                              
                                            </div>
                                          </div>
                                        </div>

<div class="mt-3 flex items-center gap-3">
                                          <a class="py-2 px-3 w-full flex justify-center items-center font-medium text-sm text-start bg-layer border border-layer-line text-layer-foreground rounded-full hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
                                            View profile
                                          </a>
                                          <a class="py-2 px-3 w-full flex justify-center items-center font-medium text-sm text-start bg-surface text-surface-foreground rounded-full hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" href="#">
                                            Shop all items
                                          </a>
                                        </div>
                                      </div>
                                      
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

if (currentWrapper.contains(el)) return false;

currentWrapper.append(el);
                        });
                      };

window.addEventListener("load", () => {
                        contentToSwitch();
                      });

window.addEventListener("resize", _.debounce(() => {
                        contentToSwitch();
                      }), 100);
                    </script>

Storefront Product Detail Page with Gallery Slider Pro

Storefront product detail page pairs a vertical media slider with a purchase sidebar, review block, description sections, and supporting image-text content.

<div class="w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      <div class="pt-4 sm:pt-10 w-full max-w-5xl mx-auto">
                        
                        <div class="grid grid-cols-1 lg:grid-cols-5 gap-y-10">
                          <div class="lg:col-span-3">
                            <div class="-ms-1.5 pb-5">
                              
                              <ol class=" flex items-center whitespace-nowrap">
                                <li class="flex items-center">
                                  
                                  <a class="py-0.5 px-1.5 flex items-center gap-x-1 text-sm rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing-grid-with-categories.html">
                                    Men
                                  </a>
                                  <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                                </li>
                                <li class="flex items-center truncate">
                                  
                                  <a class="py-0.5 px-1.5 flex items-center truncate gap-x-1 text-sm truncate rounded-md text-foreground hover:bg-surface-hover focus:bg-surface-focus focus:outline-hidden" href="listing-grid-with-categories.html">
                                    <span class="truncate">Slippers</span>
                                  </a>
                                  <svg class="shrink-0 overflow-visible size-4  text-muted-foreground" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path></svg>
                                </li>
                                <li class="ps-1.5 flex items-center truncate font-semibold text-foreground text-sm truncate">
                                  <span class="truncate">Mahabis Classic</span>
                                </li>
                              </ol>
                              
                            </div>

<div class="relative grow overflow-hidden h-137.5 sm:h-175 order-1 sm:order-2 bg-surface rounded-lg">
                                      <div class="hs-carousel-body absolute inset-y-0 inset-s-0 flex flex-nowrap opacity-0">
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218196423-da6ee214f4cc?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343175492-9e7dc0e63cc6?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218190297-df1c6af07965?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218162086-fba879e8c17a?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218167744-4b6371f208c2?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1598343165919-ba35c5a7743e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1603218178546-6a870b48be2e?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                        <div class="hs-carousel-slide">
                                          <img class="size-full object-cover rounded-lg" src="https://images.unsplash.com/photo-1606846859455-1af0b84947f3?q=80&w=560&h=720&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                        </div>
                                      </div>

<div class="absolute bottom-0 inset-e-0 pb-4 pe-4">
                                        <div class="flex items-center gap-2">
                                          <button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                                            <span class="text-2xl" aria-hidden="true">
                                              <svg class="shrink-0 size-5" 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"><path d="m15 18-6-6 6-6"/></svg>
                                            </span>
                                            <span class="sr-only">Previous</span>
                                          </button>
                                          <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover focus:outline-hidden">
                                            <span class="sr-only">Next</span>
                                            <span class="text-2xl" aria-hidden="true">
                                              <svg class="shrink-0 size-5" 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"><path d="m9 18 6-6-6-6"/></svg>
                                            </span>
                                          </button>
                                        </div>
                                      </div>
                                      
                                    </div>
                                    
                                  </div>
                                </div>

<div class="absolute top-0 inset-e-0 pt-2 pe-2">
                                  <a class="py-1.5 px-2 flex items-center gap-x-1.5 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs" href="#completeTheLook">
                                    <svg class="shrink-0 size-4" 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"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
                                    Complete the look
                                    <svg class="shrink-0 size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                  </a>
                                </div>
                                
                              </div>
                            </div>
                          </div>

<div class="lg:col-span-2">
                            
                            <div class="lg:ps-10">
                              <p class="mb-1 text-sm text-muted-foreground-1">
                                Men's Slippers
                              </p>

<h1 class="font-semibold text-3xl text-foreground">
                                Mahabis Classic
                              </h1>

<div class="mt-5">
                                
                                <div data-hs-carousel='{
                                    "loadingClasses": "opacity-0",
                                    "isAutoHeight": "true",
                                    "isAutoPlay": true
                                  }' class="relative">
                                  <div class="hs-carousel relative overflow-hidden w-full bg-surface rounded-lg">
                                    <div class="hs-carousel-body flex flex-nowrap items-start overflow-hidden transition-[height,transform] duration-700 opacity-0">
                                      <div class="hs-carousel-slide p-3 text-center h-auto">
                                        <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                                          <svg class="shrink-0 size-4" 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"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
                                          Trending item - 71 sold in the last day
                                        </p>
                                      </div>

<div class="hs-carousel-slide p-3 text-center h-auto">
                                        <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                                          <svg class="shrink-0 size-4" 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"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
                                          Popular - 25 people are looking at this now
                                        </p>
                                      </div>
      
                                      <div class="hs-carousel-slide p-3 text-center h-auto">
                                        <p class="flex justify-center items-center gap-x-2 text-xs text-foreground">
                                          <svg class="shrink-0 size-4" 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                                          Model is 6' 0" tall and is wearing size 10.
                                        </p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>

<div class="pt-10">
                                
                                <div class="hs-accordion" id="hs-pro-shpd-item-description">
                                  <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-description">
                                    Description
                                    <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                    <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                  </button>

<div class="border-b border-line-2">
                                    <div id="hs-pro-shpd-description" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-description">
                                      <div class="pb-6">
                                        <p class="text-sm text-muted-foreground-1">
                                          Sink into pure, simple comfort the moment you step in the door. mahabis classic has a pared-back design for those who love the beautiful yet understated things in life.
                                        </p>

<ul class="mt-5 ps-3 space-y-1">
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Iconic, understated design.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Premium felt upper.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            100% wool lining.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Machine washable at 30°, remove insoles and wash on a wool/delicates cycle.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Neoprene heel gently secures your foot in place.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Contoured footbed for extra support.
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            Eco-friendly packaging
                                          </li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">
                                            One tree planted for every pair bought
                                          </li>
                                        </ul>
                                        
                                      </div>
                                    </div>
                                  </div>
                                </div>

<div class="hs-accordion" id="hs-pro-shpd-item-size-and-fit">
                                  <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-size-and-fit">
                                    Size and Fit
                                    <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                    <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                  </button>

<div class="border-b border-line-2">
                                    <div id="hs-pro-shpd-size-and-fit" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-size-and-fit">
                                      <div class="pb-6">
                                        
                                        <ul class="ps-3 space-y-1">
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">For wider feet, we suggest going up a size</li>
                                          <li class="relative text-sm text-muted-foreground-1 ps-3.5 after:absolute after:top-2 after:inset-s-0 after:inline-block after:size-1 after:bg-secondary after:rounded-full">If you're usually a half size, we recommend going for the larger size.</li>
                                        </ul>
                                        
                                      </div>
                                    </div>
                                  </div>
                                </div>

<div class="hs-accordion" id="hs-pro-shpd-item-shipping-and-returns">
                                  <button class="hs-accordion-toggle py-4 inline-flex justify-between items-center gap-x-3 w-full font-medium text-start text-foreground focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none" aria-expanded="false" aria-controls="hs-pro-shpd-shipping-and-returns">
                                    Shipping and Returns
                                    <svg class="hs-accordion-active:hidden block size-4" 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"><path d="m6 9 6 6 6-6"/></svg>
                                    <svg class="hs-accordion-active:block hidden size-4" 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"><path d="m18 15-6-6-6 6"/></svg>
                                  </button>

<div class="border-b border-line-2">
                                    <div id="hs-pro-shpd-shipping-and-returns" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-pro-shpd-item-shipping-and-returns">
                                      <div class="pb-6">
                                        <p class="text-sm text-muted-foreground-1">
                                          Free standard shipping on orders over $50 and free 30-day returns. <a class="text-sm text-muted-foreground-1 underline underline-offset-4 hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" href="#">Learn more.</a>
                                        </p>

<p class="mt-3 text-sm text-muted-foreground-1">
                                          Returns must be received within 30 days of shipping confirmation. In order to process your return, items must be unworn and tags must be attached.
                                        </p>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>

<div data-hs-carousel='{
                                  "loadingClasses": "opacity-0",
                                  "slidesQty": {
                                    "xs": 2
                                  },
                                  "hasSnapSpacers": false
                                }' class="relative">
                                  <div class="overflow-x-hidden">
                                    <div class="hs-carousel w-full flex">
                                      <div class="hs-carousel-body flex flex-nowrap gap-3 opacity-0 transition-transform duration-700">
                                        <div class="hs-carousel-slide">
                                          
                                          <div  class=" group relative">
                                            <div class="relative">
                                              <a class="block rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/storefront/product-detail.html">
                                                <img class="rounded-xl" src="https://images.unsplash.com/photo-1699593022913-7068606059c8?q=80&w=560&h=560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                              </a>

<div class="pt-3">
                                              <span class="block text-sm md:text-base text-foreground">
                                                Nike SB Zoom Blazer Mid Electric
                                              </span>
                                              <p class="mt-2 text-sm text-muted-foreground-1">
                                                Men's Sneakers
                                              </p>
    
                                              <p class="mt-1 font-medium text-sm text-foreground">
                                                $150
                                              </p>
                                            </div>
                                          </div>
                                          
                                        </div>

<div class="pt-3">
                                              <span class="block text-sm md:text-base text-foreground">
                                                Slim Lyocell Trousers
                                              </span>
                                              <p class="mt-2 text-sm text-muted-foreground-1">
                                                Men's Trousers
                                              </p>
    
                                              <p class="mt-1 font-medium text-sm text-foreground">
                                                $50
                                              </p>
                                            </div>
                                          </div>
                                          
                                        </div>

<div class="absolute top-0 inset-e-0 z-10 pt-2 pe-2">
                                                <button type="button" class="size-6 flex justify-center items-center gap-x-1 rounded-full text-xs bg-layer text-layer-foreground disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden" >
                                                  <svg class="shrink-0 size-3.5" 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"><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.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
                                                  <span class="sr-only">Add to favorites</span>
                                                </button>
                                              </div>
                                              
    
                                              
                                              <div class="absolute top-0 inset-s-0 pt-2 ps-2 pointer-events-none">
                                                <div class="flex flex-col gap-y-1">
                                                  <p>
                                                    <span class="py-1 ps-1.5 pe-2 bg-layer font-medium text-xs text-layer-foreground rounded-full shadow-2xs">
                                                      🔥 Trending
                                                    </span>
                                                  </p>
                                                </div>
                                              </div>
                                              
                                            </div>

<div class="pt-3">
                                              <span class="block text-sm md:text-base text-foreground">
                                                Everyday Solid White T-Shirt
                                              </span>
                                              <p class="mt-2 text-sm text-muted-foreground-1">
                                                Men's T-Shirts
                                              </p>
    
                                              <p class="mt-1 font-medium text-sm text-foreground">
                                                $30
                                              </p>
                                            </div>
                                          </div>
                                          
                                        </div>
                                      </div>
                                    </div>
                                  </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                                    <span class="text-2xl" aria-hidden="true">
                                      <svg class="shrink-0 size-5" 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"><path d="m15 18-6-6 6-6"/></svg>
                                    </span>
                                    <span class="sr-only">Previous</span>
                                  </button>
                                  <button type="button" class="hs-carousel-next hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-e-2 inline-flex justify-center items-center size-10 bg-layer border border-layer-line text-layer-foreground rounded-full shadow-2xs hover:bg-layer-hover -translate-y-1/2 focus:outline-hidden">
                                    <span class="sr-only">Next</span>
                                    <span class="text-2xl" aria-hidden="true">
                                      <svg class="shrink-0 size-5" 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"><path d="m9 18 6-6-6-6"/></svg>
                                    </span>
                                  </button>
                                  
                                </div>
                                
                              </div>
                            </div>
                            
                          </div>
                          
                        </div>
                        
                      </div>
                    </div>

Product Detail Pages

Storefront Product Detail Page with Sticky Purchase Sidebar Pro

Coffee Shop Product Detail Page with Hero Image Pro

Marketplace Product Detail Page with Review Section Pro

Storefront Product Detail Page with Gallery Slider Pro