Tailwind CSS Product Carousels Blocks

All Blocks
Ecommerce
Product Carousels

Product Carousels

Product carousels for marketplace sliders, recommendation rails, and horizontally scrollable ecommerce product discovery sections.

Marketplace Product Card Carousel Pro

Draggable marketplace carousel pairs a section header and arrow controls with product cards that show price pairs in a horizontal rail.

Create a responsive UI block named "Marketplace Product Card Carousel" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/product-carousels/#marketplace-product-card-carousel. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: ecommerce/product-carousels
- Block ID: marketplace-product-card-carousel
- Source description: Draggable marketplace carousel pairs a section header and arrow controls with product cards that show price pairs in a horizontal rail.
- Preview iframe: https://preline.co/blocks/ecommerce/product-carousels/iframes/pro/marketplace-product-card-carousel.html (repo path: blocks/ecommerce/product-carousels/iframes/pro/marketplace-product-card-carousel.html)
- Source markup reference:
  - partials/pro/marketplace/layouts-components/slider-product-listing-with-review-stars-grid-view.html
  - partials/pro/marketplace/sources/product-listing-with-review-stars.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Header row is an `h2` reading `New arrivals` (`font-medium text-lg text-foreground`) with a right-aligned pair of round `size-8` prev/next buttons carrying chevron-left/chevron-right icons and `sr-only` labels `Previous` and `Next`; the buttons dim via a disabled-state opacity class at the rail ends.
  - Exactly 7 slides in this order with these exact titles and prices: `iPhone 14 Case` `$59` (struck-through `$79`), `Charger for Apple Devices` `$45`, `Apple Pencil` `$89` (struck-through `$109`), `iPad Case` `$10`, `Sony WH1000XM5 Headphones` `$199`, `Pixel Tablet` `$279` (struck-through `$399`), `Apple Watch SE` `$249`.
  - Each price line renders the new price in the primary color with a smaller `USD` suffix inside the same span, and the old price (only on the 3 items listed above) as a muted `<s>` strikethrough to its right.
  - Carousel is wired with `data-hs-carousel` (Preline `HSCarousel`) using `slidesQty` `{ "xs": 2, "md": 3, "lg": 4, "xl": 5 }`, `"isDraggable": true`, and `"loadingClasses": "opacity-0"`; the track is `hs-carousel-body flex flex-nowrap gap-3 md:gap-5` with `cursor-grab` switching to `cursor-grabbing` while dragging.
  - Cards are image-first: a `w-full h-48 md:h-64 rounded-xl` link wrapper with an absolutely positioned `object-cover object-center` image that scales to `group-hover:scale-105` over 500ms, then a `pt-3` text block (title, then price row).
  - Only the last two slides (`Pixel Tablet`, `Apple Watch SE`) carry a hover-revealed centered `Quick view` pill with an eye icon and `data-hs-overlay="#hs-pro-shmchpdm"`; the referenced overlay is not part of this block, so wire the trigger without inventing a modal.
  - Negative facts: no favorite/heart buttons, no promo badges, no star ratings or review counts, no "sold" counts, and no "Add to cart" buttons anywhere in this block - the card partial supports all of them but every slide disables them.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "slidesQty": {
                          "xs": 2,
                          "md": 3,
                          "lg": 4,
                          "xl": 5
                        },
                        "isDraggable": true
                      }' class="relative">
                      
                      <div class="mb-2 flex flex-wrap justify-between items-center gap-3">
                        <h2 class="font-medium text-lg text-foreground">
                          New arrivals
                        </h2>

<div class="flex items-center gap-x-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-8 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-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="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-8 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-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>
                            </span>
                          </button>
                        </div>
                        
                      </div>

<div class="hs-carousel w-full overflow-hidden">
                        <div class="hs-carousel w-full">
                          <div class="hs-carousel-body flex flex-nowrap gap-3 md:gap-5 opacity-0 transition-transform duration-700 cursor-grab hs-carousel-dragging:transition-none hs-carousel-dragging:cursor-grabbing">
                            <div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1680268101608-a2edbc3291f8?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      iPhone 14 Case
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $59 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$79</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Charger for Apple Devices
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $45 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Apple Pencil
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $89 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$109</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Sony WH1000XM5 Headphones
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $199 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1652540492984-c347f10fcbaf?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
      
                                    
                                    <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                      <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                        <div class="h-full flex flex-col justify-center items-center">
                                          <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shmchpdm">
                                            <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>
                                            Quick view
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Pixel Tablet
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $279 <span class="text-sm">USD</span>
                                      </span>
                                      <span class="text-sm text-muted-foreground-1">
                                        <s>$399</s>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>

<div class="hs-carousel-slide">
                              
                              <div class="h-full flex flex-col">
                                <div class="group relative">
                                  <div class="relative">
                                    <a class="block shrink-0 relative w-full h-48 md:h-64 overflow-hidden rounded-xl focus:outline-hidden" href="../../../templates/ecommerce/marketplace/product-detail.html">
                                      <img class="size-full absolute inset-0 object-cover object-center group-hover:scale-105 group-focus:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="https://images.unsplash.com/photo-1554116154-e733de92fe4b?q=80&w=480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                    </a>
      
                                    
                                    <div class="absolute top-1/2 inset-s-1/2 z-2 transform -translate-y-1/2 -translate-x-1/2">
                                      <div class="opacity-0 group-hover:opacity-100 group-hover:mb-0 -mb-2 duration-300">
                                        <div class="h-full flex flex-col justify-center items-center">
                                          <button type="button" class="whitespace-nowrap flex items-center gap-x-1.5 py-2 px-3 bg-layer text-layer-foreground text-xs rounded-full hover:text-primary-hover focus:outline-hidden focus:text-primary-focus" data-hs-overlay="#hs-pro-shmchpdm">
                                            <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>
                                            Quick view
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                    
                                  </div>

<div class="pt-3">
                                    <p class="font-medium text-sm text-foreground">
                                      Apple Watch SE
                                    </p>
                                    <div class="mt-1 flex flex-wrap items-center gap-1">
                                      <span class="font-semibold text-primary">
                                        $249 <span class="text-sm">USD</span>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              
                            </div>
                          </div>
                        </div>
                      </div>
                      
                    </div>

Product Recommendation Card Carousel Pro

Snap-based recommendation rail combines a section heading, product cards with star ratings, and overlayed previous and next controls.

Create a responsive UI block named "Product Recommendation Card Carousel" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/ecommerce/product-carousels/#product-recommendation-card-carousel. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Source metadata:
- Catalog family: ecommerce/product-carousels
- Block ID: product-recommendation-card-carousel
- Source description: Snap-based recommendation rail combines a section heading, product cards with star ratings, and overlayed previous and next controls.
- Preview iframe: https://preline.co/blocks/ecommerce/product-carousels/iframes/pro/product-recommendation-card-carousel.html (repo path: blocks/ecommerce/product-carousels/iframes/pro/product-recommendation-card-carousel.html)
- Source markup reference:
  - partials/pro/storefront/layouts-components/you-may-also-like-this.html
  - partials/pro/storefront/sources/shop-card.html

Block-specific fidelity rules:
- Preserve product, payment, authentication, and commerce source assets exactly: images, avatars, payment marks, app/channel icons, store/product media, progress states, and trust/status elements.
- Do not replace branded/source visuals with initials, emojis, generic icons, generated placeholders, or different stock images.
- Source content inventory (from the source markup):
  - Section heading is an `h2` reading `You may also like` (`font-medium text-xl text-foreground`, wrapped in a `mb-3` header div); the whole block sits in a `py-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto` container.
  - Exactly 6 cards in this order - `Nike SB Zoom Blazer Mid Electric` / `Men's Shoes` / `$150`; `Embroidered Hoodie` / `Men's Sweaters` / `$69`; `Mahabis Max Solo` / `Men's Shoes` / `$39`; `Nike Air Dunk Low SE` / `Men's Shoes` / `$40`; `Nike Air Jordan 1 Mid SE` / `Men's Shoes` / struck `$80` then `$65`; `Nike Air Jordan 1 Mid SE` / `Men's Shoes` / struck `$160` then `$140`.
  - Cards 1, 5 and 6 carry a top-left pill badge reading exactly `🔥 Trending` (emoji included, `bg-layer` pill with `shadow-2xs`); cards 2, 3 and 4 have no badge. The two discounted cards render the old price as muted `<s>` and the new price in the destructive/red role, not the plain foreground price style.
  - Every card has a top-right `size-6` round `Add to favorites` heart button with an `sr-only` label; on first load all hearts are outline (`fill="none"`), none are filled.
  - Star rows are 4 always-filled stars plus a 5th conditional star, followed by a parenthesised review count: card 1 half-star `(2)`, card 2 full `(234)`, card 3 full `(6)`, cards 4-6 half-star `(99)`.
  - Carousel is wired with `data-hs-carousel` (Preline `HSCarousel`) using `slidesQty` `{ "xs": 2, "md": 3, "xl": 4 }`, `"isSnap": true`, `"hasSnapSpacers": false`, `"loadingClasses": "opacity-0"`; the rail is a native `snap-x snap-mandatory overflow-x-auto` track with a deliberately visible 2px-high styled horizontal scrollbar and `pb-4 sm:pb-10` clearance below it.
  - Prev/next are `size-10` round buttons absolutely overlaid on the rail at its vertical center (`top-1/2 -translate-y-1/2`, inset 2 from each side, `z-10`) - not a header-aligned control pair - with `sr-only` labels `Previous` and `Next`.
  - Negative facts: no "Quick view" hover button, no "Add to cart" button, and no hover image zoom on these cards.

<div class="py-10 w-full max-w-340 px-4 sm:px-6 lg:px-8 mx-auto">
                      
                      <div class="mb-3">
                        <h2 class="font-medium text-xl text-foreground">
                          You may also like
                        </h2>
                      </div>

<div data-hs-carousel='{
                        "loadingClasses": "opacity-0",
                        "slidesQty": {
                          "xs": 2,
                          "md": 3,
                          "xl": 4
                        },
                        "hasSnapSpacers": false,
                        "isSnap": true
                      }' class="relative">
                        <div class="overflow-x-hidden">
                          <div class="-mx-1 sm:-mx-2.5">
                            <div class="hs-carousel w-full flex snap-x pb-4 sm:pb-10 snap-mandatory overflow-x-auto [&::-webkit-scrollbar-track]:mx-1 md:[&::-webkit-scrollbar-track]:mx-2.5 [&::-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-body flex flex-nowrap opacity-0 transition-transform duration-700">
                                <div class="hs-carousel-slide snap-center px-1 sm:px-2.5">
                                  
                                  <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=480&h=480&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
                                      </a>

<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">
                                        Nike SB Zoom Blazer Mid Electric
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $150
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (2)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Embroidered Hoodie
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Sweaters
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $69
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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="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="ms-1 text-xs text-foreground">
                                          (234)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Mahabis Max Solo
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $39
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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="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="ms-1 text-xs text-foreground">
                                          (6)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Dunk Low SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 font-medium text-sm text-foreground">
                                        $40
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Jordan 1 Mid SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 text-sm">
                                        <span class="text-sm text-muted-foreground-1">
                                          <s>$80</s>
                                        </span>
                                        <span class="text-sm text-destructive">
                                          $65
                                        </span>
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </div>
                                  
                                </div>

<div class="pt-3">
                                      <span class="block text-sm md:text-base text-foreground">
                                        Nike Air Jordan 1 Mid SE
                                      </span>
                                      <p class="mt-2 text-sm text-muted-foreground-1">
                                        Men's Shoes
                                      </p>
    
                                      <p class="mt-1 text-sm">
                                        <span class="text-sm text-muted-foreground-1">
                                          <s>$160</s>
                                        </span>
                                        <span class="text-sm text-destructive">
                                          $140
                                        </span>
                                      </p>

<div class="mt-3 flex items-center gap-x-0.5">
                                        <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"/>
                                        </svg>
                                        <span class="ms-1 text-xs text-foreground">
                                          (99)
                                        </span>
                                      </div>
                                      
                                    </div>
                                  </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 z-10 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 z-10 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>