From 3f82e759cb332588cbaee7bf089e14d034cab115 Mon Sep 17 00:00:00 2001
From: belviskhoremk <belviskhoremk@gmail.com>
Date: Mon, 3 Aug 2026 23:07:06 +0000
Subject: [PATCH] fix: make Shop's sliding filter pill respect
 prefers-reduced-motion

---
 src/pages/Shop.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Shop.tsx b/src/pages/Shop.tsx
index 5f02a83..a67e3b6 100644
--- a/src/pages/Shop.tsx
+++ b/src/pages/Shop.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { motion } from 'framer-motion'
+import { motion, useReducedMotion } from 'framer-motion'
 import ProductCard from '../components/ProductCard'
 import InquiryModal from '../components/InquiryModal'
 import { getProductsByCategory, type Product } from '../data/products'
@@ -10,6 +10,7 @@ const CATEGORIES: (Product['category'] | 'all')[] = ['all', 'hair-care', 'extens
 function Shop() {
   const [category, setCategory] = useState<Product['category'] | 'all'>('all')
   const [inquiring, setInquiring] = useState<Product | null>(null)
+  const prefersReducedMotion = useReducedMotion()
 
   return (
     <div className={styles.page}>
@@ -26,7 +27,7 @@ function Shop() {
               <motion.span
                 layoutId="active-filter-pill"
                 className={styles.activePill}
-                transition={{ type: 'spring', stiffness: 350, damping: 30 }}
+                transition={prefersReducedMotion ? { duration: 0 } : { type: 'spring', stiffness: 350, damping: 30 }}
               />
             )}
             <span className={styles.filterLabel}>{c.replace('-', ' ')}</span>