@fayz-ai/storefront 0.6.0 → 0.8.0

package/src/components/StorefrontHeader.tsx

@@ -99,24 +99,48 @@ function UtilityBar() {
   )
 }
 
-function SearchInput({ className }: { className?: string }) {
+function SearchInput({ className, iconOnly = false }: { className?: string; iconOnly?: boolean }) {
   const config = useStorefrontConfig()
   const search = useCatalogStore((s) => s.search)
   const setSearch = useCatalogStore((s) => s.setSearch)
   const path = useHashPath()
+  const [open, setOpen] = useState(false)
+
+  // Icon-only: a compact search button that expands into the input on click and
+  // collapses again on Escape / blur-when-empty.
+  if (iconOnly && !open) {
+    return (
+      <button
+        type="button"
+        aria-label="Buscar produtos"
+        data-testid={TID.headerSearchToggle}
+        onClick={() => setOpen(true)}
+        className="rounded-full p-2.5 transition-opacity hover:opacity-70"
+      >
+        <Search className="h-5 w-5" />
+      </button>
+    )
+  }
 
   return (
-    <div className={`relative ${className ?? ''}`}>
+    <div className={`relative ${iconOnly ? 'w-full max-w-xs' : (className ?? '')}`}>
       <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-60" />
       <input
         data-testid={TID.headerSearch}
         type="search"
         placeholder="Buscar produtos..."
         value={search}
+        autoFocus={iconOnly}
         onChange={(e) => {
           setSearch(e.target.value)
           if (path !== config.catalogPath) navigateTo(config.catalogPath)
         }}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape' && iconOnly) setOpen(false)
+        }}
+        onBlur={() => {
+          if (iconOnly && !search) setOpen(false)
+        }}
         className="w-full border bg-white/10 py-2 pl-9 pr-4 text-sm outline-none transition-colors placeholder:opacity-60 focus:border-primary focus:bg-white focus:text-gray-900"
         style={{
           borderRadius: 'var(--sf-radius-input)',
@@ -206,25 +230,27 @@ function HeaderActions() {
           )}
         </div>
       )}
-      <button
-        type="button"
-        data-testid={TID.cartButton}
-        aria-label="Carrinho"
-        onClick={openDrawer}
-        className="relative rounded-full p-2.5 transition-opacity hover:opacity-70"
-      >
-        <ShoppingBag className="h-5 w-5" />
-        {count > 0 && (
-          <span
-            data-testid={TID.cartCount}
-            className={`absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold text-primary-foreground ${
-              pop ? 'animate-badge-pop' : ''
-            }`}
-          >
-            {count}
-          </span>
-        )}
-      </button>
+      {config.features.cart && (
+        <button
+          type="button"
+          data-testid={TID.cartButton}
+          aria-label="Carrinho"
+          onClick={openDrawer}
+          className="relative rounded-full p-2.5 transition-opacity hover:opacity-70"
+        >
+          <ShoppingBag className="h-5 w-5" />
+          {count > 0 && (
+            <span
+              data-testid={TID.cartCount}
+              className={`absolute -right-0.5 -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-semibold text-primary-foreground ${
+                pop ? 'animate-badge-pop' : ''
+              }`}
+            >
+              {count}
+            </span>
+          )}
+        </button>
+      )}
     </nav>
   )
 }
@@ -233,6 +259,7 @@ function NavLinks({ className }: { className?: string }) {
   const config = useStorefrontConfig()
   const { categories } = useCategories()
   const setCategoryId = useCatalogStore((s) => s.setCategoryId)
+  const showCategories = config.theme?.header?.showCategories !== false
 
   const goCategory = (categoryId: string) => {
     useCatalogStore.getState().reset()
@@ -241,7 +268,7 @@ function NavLinks({ className }: { className?: string }) {
   }
 
   return (
-    <nav className={`flex items-center gap-6 ${className ?? ''}`}>
+    <nav className={`flex min-w-max items-center gap-6 ${className ?? ''}`}>
       {config.nav.map((link) => (
         <Link
           key={link.to}
@@ -252,18 +279,19 @@ function NavLinks({ className }: { className?: string }) {
           {link.label}
         </Link>
       ))}
-      {categories.slice(0, 6).map((c) => (
-        <button
-          key={c.id}
-          type="button"
-          data-testid={TID.navCategory(c.slug)}
-          onClick={() => goCategory(c.id)}
-          className="sf-nav-link group relative hidden text-sm font-medium transition-opacity hover:opacity-80 lg:inline"
-        >
-          {c.name}
-          <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full" />
-        </button>
-      ))}
+      {showCategories &&
+        categories.slice(0, 6).map((c) => (
+          <button
+            key={c.id}
+            type="button"
+            data-testid={TID.navCategory(c.slug)}
+            onClick={() => goCategory(c.id)}
+            className="sf-nav-link group relative hidden text-sm font-medium transition-opacity hover:opacity-80 lg:inline"
+          >
+            {c.name}
+            <span className="absolute -bottom-1 left-0 h-0.5 w-0 bg-primary transition-all duration-300 group-hover:w-full" />
+          </button>
+        ))}
     </nav>
   )
 }
@@ -272,6 +300,8 @@ export function StorefrontHeader() {
   const config = useStorefrontConfig()
   const variant = config.theme?.header?.variant ?? 'classic'
   const scrolled = useScrolled()
+  const showSearch = config.theme?.header?.showSearch !== false
+  const iconSearch = config.theme?.header?.searchStyle === 'icon'
   const logo = (
     <Link to="/" className="sf-heading shrink-0 text-xl font-bold tracking-tight">
       {config.logo ?? config.name}
@@ -290,13 +320,13 @@ export function StorefrontHeader() {
         // Rio/Flex pattern: centered logo row, nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6">
-            <SearchInput className="hidden w-full max-w-xs sm:block" />
+            {showSearch ? <SearchInput iconOnly={iconSearch} className="hidden w-full max-w-xs sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
             </div>
           </div>
-          <div className="hidden justify-center border-t py-2.5 sm:flex" style={headerDivider}>
+          <div className="flex overflow-x-auto border-t py-2.5 sm:justify-center" style={headerDivider}>
             <NavLinks />
           </div>
         </>
@@ -304,13 +334,13 @@ export function StorefrontHeader() {
         // Brasília pattern: prominent search left, logo center, actions right; nav row below
         <>
           <div className="mx-auto grid h-16 max-w-7xl grid-cols-[1fr_auto_1fr] items-center gap-6 px-4 sm:px-6">
-            <SearchInput className="hidden w-full max-w-sm sm:block" />
+            {showSearch ? <SearchInput iconOnly={iconSearch} className="hidden w-full max-w-sm sm:block" /> : <div />}
             <div className="text-center">{logo}</div>
             <div className="justify-self-end">
               <HeaderActions />
             </div>
           </div>
-          <div className="hidden border-t sm:block" style={headerDivider}>
+          <div className="overflow-x-auto border-t" style={headerDivider}>
             <div className="mx-auto max-w-7xl px-4 py-2.5 sm:px-6">
               <NavLinks />
             </div>
@@ -324,17 +354,19 @@ export function StorefrontHeader() {
           </div>
           <div className="text-center">{logo}</div>
           <div className="flex items-center justify-end gap-3">
-            <SearchInput className="hidden w-44 lg:block" />
+            {showSearch && <SearchInput iconOnly={iconSearch} className="hidden w-44 lg:block" />}
             <HeaderActions />
           </div>
         </div>
       ) : (
-        // classic: logo left, search center-right, actions right (original layout)
+        // classic: logo left, nav, then a right-aligned search + actions cluster
         <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 sm:px-6">
           {logo}
           <NavLinks className="hidden md:flex" />
-          <SearchInput className="ml-auto hidden w-full max-w-sm sm:block" />
-          <HeaderActions />
+          <div className="ml-auto flex items-center gap-2 sm:gap-3">
+            {showSearch && <SearchInput iconOnly={iconSearch} className={iconSearch ? '' : 'hidden w-full max-w-sm sm:block'} />}
+            <HeaderActions />
+          </div>
         </div>
       )}
     </header>

package/src/components/sections/CategoryShowcase.tsx

@@ -6,6 +6,7 @@ import { bannerPlaceholder } from '../../sections'
 import { Reveal } from '../../motion'
 import { navigateTo } from '../../router'
 import { TID } from '../../testids'
+import { SmoothImage } from '../SmoothImage'
 
 export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles'; title?: string }) {
   const { categories } = useCategories()
@@ -33,7 +34,7 @@ export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles';
             <Reveal key={c.id} delay={i * 80}>
               <button type="button" onClick={() => go(c.id)} className="group flex w-28 flex-col items-center gap-3">
                 <span className="block h-24 w-24 overflow-hidden rounded-full border-2 border-transparent shadow-sm transition-all duration-300 group-hover:scale-105 group-hover:border-primary group-hover:shadow-md">
-                  <img
+                  <SmoothImage
                     src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 200, 200)}
                     alt={c.name}
                     className="h-full w-full object-cover"
@@ -59,7 +60,7 @@ export function CategoryShowcase({ style, title }: { style: 'bubbles' | 'tiles';
         {categories.map((c, i) => (
           <Reveal key={c.id} delay={i * 90}>
             <button type="button" onClick={() => go(c.id)} className="group relative block aspect-[4/5] w-full overflow-hidden" style={{ borderRadius: 'var(--sf-radius-card)' }}>
-              <img
+              <SmoothImage
                 src={c.imageUrl ?? bannerPlaceholder(c.name, 30 + i * 70, 70 + i * 70, 480, 600)}
                 alt={c.name}
                 className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"

package/src/components/sections/HeroSection.tsx

@@ -3,9 +3,11 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'
 import type { HeroSlide } from '../../sections'
 import type { HeroVariant } from '../../theme'
 import { bannerPlaceholder } from '../../sections'
+import { useStorefrontConfig } from '../../config'
 import { prefersReducedMotion } from '../../motion'
 import { Link } from '../../router'
 import { TID } from '../../testids'
+import { SmoothImage } from '../SmoothImage'
 
 function slideImage(slide: HeroSlide, w = 1600, h = 700): string {
   return slide.image ?? bannerPlaceholder(slide.title, slide.hue ?? 200, (slide.hue ?? 200) + 40, w, h)
@@ -56,8 +58,18 @@ export function HeroSection({
   height?: 'tall' | 'medium'
 }) {
   const [index, setIndex] = useState(0)
+  const [loadedSlides, setLoadedSlides] = useState<Record<number, boolean>>({})
+  const config = useStorefrontConfig()
   const interacted = useRef(false)
   const hClass = height === 'tall' ? 'h-[72vh] min-h-[440px]' : 'h-[48vh] min-h-[340px]'
+  const revealImages = config.imageLoading.mode !== 'none'
+  const revealStyle = (loaded: boolean): React.CSSProperties | undefined =>
+    revealImages
+      ? {
+          filter: config.imageLoading.blur && !loaded ? 'blur(10px)' : 'blur(0px)',
+          transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`,
+        }
+      : undefined
 
   // Auto-advance until the visitor takes over; never under reduced motion.
   useEffect(() => {
@@ -84,7 +96,7 @@ export function HeroSection({
             to={slide.href ?? '/catalog'}
             className="group relative block h-[42vh] min-h-[320px] overflow-hidden"
           >
-            <img
+            <SmoothImage
               src={slideImage(slide, 900, 700)}
               alt={slide.title}
               className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
@@ -122,8 +134,12 @@ export function HeroSection({
           src={slideImage(slide)}
           alt={slide.title}
           aria-hidden={i !== index}
+          loading={i === 0 ? 'eager' : 'lazy'}
+          decoding="async"
+          onLoad={() => setLoadedSlides((current) => ({ ...current, [i]: true }))}
+          style={revealStyle(Boolean(loadedSlides[i]))}
           className={`absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ${
-            i === index ? 'animate-kenburns opacity-100' : 'opacity-0'
+            i === index && (!revealImages || loadedSlides[i]) ? 'animate-kenburns opacity-100' : 'opacity-0'
           }`}
         />
       ))}

package/src/components/sections/MediaCarousel.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { Link } from '../../router'
+import { TID } from '../../testids'
+import { prefersReducedMotion } from '../../motion'
+import type { MediaCarouselItem } from '../../sections'
+import { useStorefrontConfig } from '../../config'
+
+export interface MediaCarouselProps {
+  items: MediaCarouselItem[]
+  height?: 'medium' | 'tall' | 'screen'
+  autoplayMs?: number
+  overlay?: 'dark' | 'soft' | 'none'
+  className?: string
+}
+
+const heightClass = {
+  medium: 'h-[58vh] min-h-[420px]',
+  tall: 'h-[74vh] min-h-[520px]',
+  screen: 'min-h-[calc(100vh-64px)]',
+}
+
+const alignClass = {
+  start: 'items-start text-left',
+  center: 'items-center text-center',
+  end: 'items-end text-right',
+}
+
+export function MediaCarousel({
+  items,
+  height = 'tall',
+  autoplayMs = 7000,
+  overlay = 'dark',
+  className = '',
+}: MediaCarouselProps) {
+  const [index, setIndex] = useState(0)
+  const [loadedItems, setLoadedItems] = useState<Record<number, boolean>>({})
+  const config = useStorefrontConfig()
+  const interacted = useRef(false)
+  const revealImages = config.imageLoading.mode !== 'none'
+  const revealStyle = (loaded: boolean): React.CSSProperties | undefined =>
+    revealImages
+      ? {
+          filter: config.imageLoading.blur && !loaded ? 'blur(10px)' : 'blur(0px)',
+          transition: `opacity 700ms ease, filter ${config.imageLoading.durationMs}ms ${config.imageLoading.easing}`,
+        }
+      : undefined
+
+  useEffect(() => {
+    if (items.length < 2 || autoplayMs <= 0 || prefersReducedMotion()) return
+    const timer = setInterval(() => {
+      if (!interacted.current) setIndex((i) => (i + 1) % items.length)
+    }, autoplayMs)
+    return () => clearInterval(timer)
+  }, [autoplayMs, items.length])
+
+  if (items.length === 0) return null
+
+  const active = items[Math.min(index, items.length - 1)]!
+  const goTo = (next: number) => {
+    interacted.current = true
+    setIndex((next + items.length) % items.length)
+  }
+  const overlayClass =
+    overlay === 'dark'
+      ? 'bg-gradient-to-r from-black/70 via-black/25 to-black/25'
+      : overlay === 'soft'
+        ? 'bg-gradient-to-t from-black/45 via-black/10 to-transparent'
+        : ''
+
+  return (
+    <section data-testid={TID.mediaCarousel} className={`relative isolate overflow-hidden ${heightClass[height]} ${className}`}>
+      {items.map((item, i) => (
+        <img
+          key={`${item.title}-${i}`}
+          src={item.image}
+          alt={item.imageAlt ?? item.title}
+          aria-hidden={i !== index}
+          loading={i === 0 ? 'eager' : 'lazy'}
+          decoding="async"
+          onLoad={() => setLoadedItems((current) => ({ ...current, [i]: true }))}
+          style={revealStyle(Boolean(loadedItems[i]))}
+          className={`absolute inset-0 -z-10 h-full w-full object-cover transition-opacity duration-700 ${
+            i === index && (!revealImages || loadedItems[i]) ? 'opacity-100' : 'opacity-0'
+          }`}
+        />
+      ))}
+      <div className={`absolute inset-0 -z-10 ${overlayClass}`} />
+      <div className={`flex h-full px-5 py-16 sm:px-10 lg:px-16 ${alignClass[active.align ?? 'start']}`}>
+        <div className="my-auto max-w-2xl text-white drop-shadow-md">
+          {active.eyebrow && (
+            <p className="mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/80">{active.eyebrow}</p>
+          )}
+          <h1 className="sf-heading text-5xl font-normal leading-[0.95] sm:text-7xl lg:text-8xl">{active.title}</h1>
+          {active.subtitle && <p className="mt-5 max-w-xl text-base leading-8 text-white/88 sm:text-lg">{active.subtitle}</p>}
+          {active.cta && (
+            <Link
+              to={active.href ?? '/catalog'}
+              className="mt-8 inline-flex border border-white/75 px-6 py-3 text-xs font-semibold uppercase tracking-[0.18em] text-white transition hover:bg-white hover:text-black"
+            >
+              {active.cta}
+            </Link>
+          )}
+        </div>
+      </div>
+      {items.length > 1 && (
+        <>
+          <button
+            type="button"
+            aria-label="Previous slide"
+            data-testid={TID.mediaCarouselPrev}
+            onClick={() => goTo(index - 1)}
+            className="absolute left-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next slide"
+            data-testid={TID.mediaCarouselNext}
+            onClick={() => goTo(index + 1)}
+            className="absolute right-4 top-1/2 inline-flex h-10 w-10 -translate-y-1/2 items-center justify-center border border-white/60 bg-black/20 text-white backdrop-blur transition hover:bg-white hover:text-black"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+          <div className="absolute bottom-5 left-1/2 flex -translate-x-1/2 gap-2">
+            {items.map((item, i) => (
+              <button
+                key={`${item.title}-dot-${i}`}
+                type="button"
+                aria-label={`Go to slide ${i + 1}`}
+                onClick={() => goTo(i)}
+                className={`h-2 rounded-full transition-all ${i === index ? 'w-8 bg-white' : 'w-2 bg-white/55 hover:bg-white'}`}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </section>
+  )
+}

package/src/components/sections/MiscSections.tsx

@@ -4,6 +4,7 @@ import { bannerPlaceholder } from '../../sections'
 import { Reveal } from '../../motion'
 import { Link } from '../../router'
 import { TID } from '../../testids'
+import { SmoothImage } from '../SmoothImage'
 
 function Icon({ name, className }: { name: string; className?: string }) {
   const C = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[name]
@@ -49,7 +50,7 @@ export function PromoBanner({
 }) {
   return (
     <section data-testid={TID.promoBanner} className="group relative my-12 overflow-hidden">
-      <img
+      <SmoothImage
         src={image ?? bannerPlaceholder(title, hue, hue + 50, 1600, 420)}
         alt={title}
         className="h-80 w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"

package/src/components/sections/ProductRail.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { useProducts } from '../../hooks/useProducts'
-import { useStorefrontConfig } from '../../config'
+import { getStorefrontComponents, useStorefrontConfig } from '../../config'
+import { useStorefrontActions } from '../../hooks/useStorefront'
 import { ProductCard } from '../ProductCard'
 import { Reveal } from '../../motion'
 import { Link } from '../../router'
@@ -20,7 +21,9 @@ export function ProductRail({
   limit?: number
 }) {
   const config = useStorefrontConfig()
-  const ProductCardComponent = config.slots?.ProductCard ?? ProductCard
+  const actions = useStorefrontActions()
+  const components = getStorefrontComponents(config)
+  const ProductCardComponent = components.ProductCard ?? ProductCard
   const { products, loading } = useProducts(
     filter === 'new'
       ? { status: 'active', orderBy: 'created_at', order: 'desc' }
@@ -54,7 +57,12 @@ export function ProductRail({
         <div className="grid grid-cols-2 gap-5 md:grid-cols-4">
           {visible.map((p, i) => (
             <Reveal key={p.id} delay={i * 90}>
-              <ProductCardComponent product={p} />
+              <ProductCardComponent
+                product={p}
+                config={config}
+                commerceMode={config.commerceMode}
+                actions={actions}
+              />
             </Reveal>
           ))}
         </div>

package/src/components/sections/ProductSlider.tsx

@@ -0,0 +1,119 @@
+import React, { useMemo, useRef } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { getStorefrontComponents, useStorefrontConfig } from '../../config'
+import { useProducts } from '../../hooks/useProducts'
+import { useStorefrontActions } from '../../hooks/useStorefront'
+import { ProductCard } from '../ProductCard'
+import { Link } from '../../router'
+import { TID } from '../../testids'
+
+export interface ProductSliderProps {
+  title: string
+  subtitle?: string
+  eyebrow?: string
+  filter?: 'sale' | 'new' | 'all'
+  categoryName?: string
+  collection?: string
+  limit?: number
+  cta?: string
+  href?: string
+  className?: string
+}
+
+export function ProductSlider({
+  title,
+  subtitle,
+  eyebrow,
+  filter = 'all',
+  categoryName,
+  collection,
+  limit = 10,
+  cta = 'View all',
+  href,
+  className = '',
+}: ProductSliderProps) {
+  const config = useStorefrontConfig()
+  const actions = useStorefrontActions()
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const components = getStorefrontComponents(config)
+  const ProductCardComponent = components.ProductCard ?? ProductCard
+  const { products, loading } = useProducts(
+    filter === 'new'
+      ? { status: 'active', orderBy: 'created_at', order: 'desc' }
+      : { status: 'active' },
+  )
+
+  const visible = useMemo(() => {
+    let list = products
+    if (filter === 'sale') list = list.filter((p) => p.compareAtPrice != null && p.compareAtPrice > p.price)
+    if (categoryName) list = list.filter((p) => p.categoryName === categoryName)
+    if (collection) list = list.filter((p) => p.metadata?.collection === collection)
+    return list.slice(0, limit)
+  }, [categoryName, collection, filter, limit, products])
+
+  const scroll = (direction: -1 | 1) => {
+    viewportRef.current?.scrollBy({ left: direction * Math.max(320, viewportRef.current.clientWidth * 0.75), behavior: 'smooth' })
+  }
+
+  if (!loading && visible.length === 0) return null
+
+  return (
+    <section data-testid={TID.productSlider} className={`mx-auto max-w-7xl px-4 py-14 sm:px-6 ${className}`}>
+      <div className="mb-8 flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
+        <div className="max-w-2xl">
+          {eyebrow && <p className="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary">{eyebrow}</p>}
+          <h2 className="sf-heading text-3xl font-normal leading-tight tracking-normal sm:text-5xl">{title}</h2>
+          {subtitle && <p className="mt-3 leading-7 text-muted-foreground">{subtitle}</p>}
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            type="button"
+            aria-label="Previous products"
+            data-testid={TID.productSliderPrev}
+            onClick={() => scroll(-1)}
+            className="inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next products"
+            data-testid={TID.productSliderNext}
+            onClick={() => scroll(1)}
+            className="inline-flex h-10 w-10 items-center justify-center border border-border bg-background transition hover:bg-foreground hover:text-background"
+          >
+            <ChevronRight className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+      <div
+        ref={viewportRef}
+        data-testid={TID.productSliderViewport}
+        className="flex snap-x gap-5 overflow-x-auto pb-5 [scrollbar-width:thin]"
+      >
+        {loading
+          ? Array.from({ length: Math.min(limit, 6) }, (_, i) => (
+              <div key={i} className="h-[360px] min-w-[260px] snap-start animate-pulse bg-muted" />
+            ))
+          : visible.map((product) => (
+              <div key={product.id} className="min-w-[260px] max-w-[300px] flex-[0_0_72vw] snap-start sm:flex-[0_0_300px]">
+                <ProductCardComponent
+                  product={product}
+                  config={config}
+                  commerceMode={config.commerceMode}
+                  actions={actions}
+                />
+              </div>
+            ))}
+      </div>
+      {cta && (
+        <Link
+          to={href ?? config.catalogPath}
+          className="mt-4 inline-flex border border-foreground/30 px-6 py-3 text-xs font-semibold uppercase tracking-[0.16em] transition hover:bg-foreground hover:text-background"
+        >
+          {cta}
+        </Link>
+      )}
+    </section>
+  )
+}