hey-pharmacist-ecommerce 1.1.42 → 1.1.43

package/src/screens/CartScreen.tsx

@@ -109,14 +109,14 @@ export function CartScreen() {
 
   return (
     <div className="min-h-screen bg-white">
-      <div className="max-w-[1400px] mx-auto px-8 md:px-12">
-        <div className="container mx-auto px-4 py-8">
+      <div className="max-w-[1400px] mx-auto px-4 md:px-12">
+        <div className="py-8">
           {/* Header */}
-          <div className="mb-12">
-            <h1 className="font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-2px] mb-2 text-4xl">
+          <div className="mb-8 md:mb-12">
+            <h1 className="font-semibold text-hsecondary tracking-[-1px] md:tracking-[-2px] mb-2 text-3xl md:text-4xl">
               Shopping Cart
             </h1>
-            <p className="font-['Poppins',sans-serif] text-[16px] text-hmuted">
+            <p className="text-[14px] md:text-[16px] text-hmuted">
               {itemCount} {itemCount === 1 ? 'item' : 'items'} in your cart
             </p>
           </div>
@@ -148,15 +148,15 @@ export function CartScreen() {
               initial={{ opacity: 0, y: 24 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ delay: 0.1 }}
-              className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
+              className="lg:sticky lg:top-24 h-fit lg:col-span-1"
             >
-              <div className="bg-linear-to-br from-hsecondary/10 to-hsecondary/10 rounded-[24px] p-8 border-2 border-hsecondary/20 sticky top-24">
-                <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6">Order Summary</h2>
+              <div className="bg-hsecondary/[0.03] md:bg-linear-to-br md:from-hsecondary/10 md:to-hsecondary/10 rounded-[24px] p-6 md:p-8 border-2 border-hsecondary/10 md:border-hsecondary/20 lg:sticky lg:top-24">
+                <h2 className="font-semibold text-hsecondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
                   <div className="flex items-center justify-between">
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-hmuted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary">{formatPrice(subtotal)}</span>
+                    <span className="text-[14px] text-hmuted">Subtotal ({itemCount} {itemCount === 1 ? 'item' : 'items'})</span>
+                    <span className="font-semibold text-[14px] text-hsecondary">{formatPrice(subtotal)}</span>
                   </div>
                   <div className="flex items-center justify-between text-sm">
                     <span className="text-gray-600">Shipping</span>

package/src/screens/CheckoutScreen.tsx

@@ -557,10 +557,10 @@ export function CheckoutScreen() {
           >
             {/* Header */}
             <div className="mb-12">
-              <h1 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-3xl">
+              <h1 className="font-semibold text-[#2B4B7C] mb-2 text-3xl">
                 Checkout
               </h1>
-              <p className="font-['Poppins',sans-serif] text-[14px] text-[#676c80] text-md leading-relaxed">
+              <p className="text-[14px] text-[#676c80] text-md leading-relaxed">
                 Complete your order information below
               </p>
             </div>
@@ -694,7 +694,7 @@ export function CheckoutScreen() {
               <section className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
                 <div className="flex flex-wrap items-center justify-between gap-4">
                   <div>
-                    <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-2 text-2xl">
+                    <h2 className="font-semibold text-[#2B4B7C] mb-2 text-2xl">
                       {isDelivery ? 'Delivery Address' : 'Contact Information'}
                     </h2>
                     <p className="text-sm text-slate-500">
@@ -828,7 +828,7 @@ export function CheckoutScreen() {
               <div className="bg-white border-2 border-gray-100 rounded-[24px] p-8 text-[#2B4B7C]">
                 <div className="flex items-center gap-3 text-xl font-semibold text-gray-900 pb-4 mb-8 border-b">
                   <Truck className="w-8 h-8 flex items-center justify-center text-[#2B4B7C]" />
-                  <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] text-2xl">Shipping Options</h2>
+                  <h2 className="font-semibold text-[#2B4B7C] text-2xl">Shipping Options</h2>
                 </div>
 
                 {shippingRatesLoading ? (
@@ -980,7 +980,7 @@ export function CheckoutScreen() {
           >
             {/* Order Summary */}
             <div className="bg-linear-to-br from-hsecondary/10 to-hsecondary/10 rounded-[24px] p-8 border-2 border-hsecondary/20 sticky top-24">
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6 text-2xl">Order Summary</h2>
+              <h2 className="font-semibold text-hsecondary mb-6 text-2xl">Order Summary</h2>
 
 
               {/* Cart Summary */}
@@ -992,13 +992,13 @@ export function CheckoutScreen() {
                         <Image src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
+                        <p className="font-medium text-[12px] text-[#2B4B7C] mb-1">
                           {item?.productVariantData?.name}
                         </p>
-                        <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
+                        <p className="text-[11px] text-[#676c80]">
                           {item?.productVariantData?.brand} • Qty: {item.quantity}
                         </p>
-                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mt-1">
+                        <p className="font-semibold text-[12px] text-hsecondary mt-1">
                           {formatPrice(item.productVariantData.finalPrice * item.quantity)}
                         </p>
                       </div>
@@ -1045,8 +1045,8 @@ export function CheckoutScreen() {
                   <div className="h-px bg-hsecondary/20 mt-6" />
 
                   <div className="flex items-center justify-between mb-6">
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-hsecondary">Total</span>
-                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-hsecondary">{formatPrice(total)}</span>
+                    <span className="font-semibold text-[16px] text-hsecondary">Total</span>
+                    <span className="font-bold text-[24px] text-hsecondary">{formatPrice(total)}</span>
                   </div>
                   {/* <p className="mt-1 text-xs text-slate-500">
                       Tax is estimated. Final amount confirmed after payment.
@@ -1054,7 +1054,7 @@ export function CheckoutScreen() {
                 </div>
 
                 <div className="bg-white/80 rounded-xl p-4">
-                  <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
+                  <p className="text-[11px] text-[#676c80] leading-[1.6]">
                     <strong className="text-hsecondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
                   </p>
                 </div>
@@ -1093,7 +1093,7 @@ export function CheckoutScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-hsecondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-hsecondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}

package/src/screens/ProductDetailScreen.tsx

@@ -361,7 +361,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
         <div className="max-w-[1400px] mx-auto px-8 md:px-12">
           <button
             onClick={() => router.push(buildPath('/shop'))}
-            className="flex items-center gap-2 font-['Poppins',sans-serif] text-[13px] text-hmuted hover:text-hprimary transition-colors"
+            className="flex items-center gap-2 text-[13px] text-hmuted hover:text-hprimary transition-colors"
           >
             <ChevronLeft className="size-4" />
             Back to Shop
@@ -405,22 +405,22 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                       <div className="absolute top-6 left-6 flex flex-col gap-3">
                         {discount > 0 && (
-                          <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
+                          <div className="bg-hsecondary text-white rounded-full px-4 py-2">
+                            <span className="font-bold text-[12px] uppercase tracking-wide">
                               Save {discount}%
                             </span>
                           </div>
                         )}
                         {/* {product.bestseller && (
                           <div className="bg-hsecondary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               Bestseller
                             </span>
                           </div>
                         )}
                         {product.newArrival && (
                           <div className="bg-hprimary text-white rounded-full px-4 py-2">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[11px] uppercase tracking-wide">
+                            <span className="font-semibold text-[11px] uppercase tracking-wide">
                               New Arrival
                             </span>
                           </div>
@@ -461,10 +461,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <aside className="space-y-6 lg:sticky lg:top-24">
                 {/* Category Path */}
                 <div className="mb-4">
-                  <p className="font-['Poppins',sans-serif] text-[12px] text-hprimary uppercase tracking-wide font-medium mb-2">
+                  <p className="text-[12px] text-hprimary uppercase tracking-wide font-medium mb-2">
                     {product.brand} • {product.categoryIds?.[0]?.name || 'Uncategorized'}
                   </p>
-                  <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-hsecondary tracking-[-1.5px] mb-3">
+                  <h1 className="text-3xl font-semibold text-hsecondary tracking-[-1.5px] mb-3">
                     {selectedVariant?.name || product.name}
                   </h1>
                   {/* Rating */}
@@ -480,22 +480,22 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         />
                       ))}
                     </div>
-                    <span className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                    <span className="text-[14px] text-hmuted">
                       {reviewStats.averageRating} ({reviewStats.reviewCount} {reviewStats.reviewCount === 1 ? 'review' : 'reviews'})
                     </span>
                   </div>
                   {selectedVariant && (
                     <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
-                      <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
+                      <span className="font-bold text-[40px] text-hsecondary">
                         ${variantPrice.toFixed(2)}
                       </span>
                       {variantComparePrice && variantComparePrice > variantPrice && (
                         <>
-                          <span className="font-['Poppins',sans-serif] text-[24px] text-hmuted line-through">
+                          <span className="text-[24px] text-hmuted line-through">
                             ${variantComparePrice.toFixed(2)}
                           </span>
-                          <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
-                            <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
+                          <div className="px-3 py-1 rounded-full bg-hsecondary/10">
+                            <span className="font-semibold text-[13px] text-hsecondary">
                               Save ${formatPrice(variantComparePrice - variantPrice)}
                             </span>
                           </div>
@@ -510,28 +510,28 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                         {selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK ? (
                           <>
                             <div className="size-3 rounded-full bg-red-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-red-600 font-medium">
+                            <span className="text-[13px] text-red-600 font-medium">
                               Out of Stock
                             </span>
                           </>
                         ) : selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.LOWSTOCK || selectedVariant.inventoryCount <= 10 ? (
                           <>
                             <div className="size-3 rounded-full bg-hprimary animate-pulse" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-hprimary font-medium">
+                            <span className="text-[13px] text-hprimary font-medium">
                               Only {selectedVariant.inventoryCount} left in stock - Order soon!
                             </span>
                           </>
                         ) : (
                           <>
                             <div className="size-3 rounded-full bg-green-500" />
-                            <span className="font-['Poppins',sans-serif] text-[13px] text-green-600 font-medium">
+                            <span className="text-[13px] text-green-600 font-medium">
                               In Stock
                             </span>
                           </>
                         )}
 
                       </div>
-                      <p className="font-['Poppins',sans-serif] text-[12px] text-hmuted">
+                      <p className="text-[12px] text-hmuted">
                         SKU: {selectedVariant?.sku || product?.sku}
                       </p>
                     </div>
@@ -540,7 +540,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Description */}
                   {product.description && (
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.7] mb-8 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
                   )}
@@ -548,7 +548,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Variant Selector with Images */}
                   {product?.variants && product.variants.length > 0 && (
                     <div className="mb-6">
-                      <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary mb-3">
+                      <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                         Select Variant
                       </h3>
                       <div className="flex flex-wrap gap-3">
@@ -598,7 +598,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   {/* Quantity Selector */}
                   <div className="mb-8">
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-[14px] text-hsecondary mb-3">
+                    <h3 className="font-semibold text-[14px] text-hsecondary mb-3">
                       Quantity
                     </h3>
                     <div className="flex items-center gap-3">
@@ -608,18 +608,18 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           type="button"
                           onClick={() => setQuantity((current) => Math.max(1, current - 1))}
 
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors"
                           aria-label="Increase quantity"
                         >
                           -
                         </button>
-                        <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-hsecondary min-w-[30px] text-center">
+                        <span className="font-semibold text-[16px] text-hsecondary min-w-[30px] text-center">
                           {quantity}
                         </span>
                         <button
                           onClick={() => setQuantity(Math.min(selectedVariant?.inventoryCount || product.inventoryCount || 999, quantity + 1))}
                           disabled={quantity >= (selectedVariant?.inventoryCount || product.inventoryCount || 0)}
-                          className="font-['Poppins',sans-serif] font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
+                          className="font-bold text-[18px] text-hsecondary hover:text-hprimary transition-colors disabled:opacity-50"
                         >
                           +
                         </button>
@@ -635,7 +635,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   {/* Action Buttons */}
                   <div className="flex flex-col sm:flex-row gap-3 mb-8">
                     <button
-                      className="flex-1 font-['Poppins',sans-serif] font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-[#E67E50] text-white hover:bg-[#d66f45] hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="flex-1 font-medium text-[14px] px-8 py-4 rounded-full transition-all duration-300 flex items-center justify-center gap-3 bg-hsecondary text-white hover:bg-hsecondary/80 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={handleAddToCart}
                       disabled={!selectedVariant || selectedVariant.inventoryStatus === ProductVariantInventoryStatusEnum.OUTOFSTOCK || isAddingToCart}
                     >
@@ -675,10 +675,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Truck className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Free Shipping
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         On all orders
                       </p>
                     </div>
@@ -688,10 +688,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <RotateCcw className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Easy Returns
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         30-day return policy
                       </p>
                     </div>
@@ -701,10 +701,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Shield className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Secure Checkout
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         Safe & protected
                       </p>
                     </div>
@@ -714,10 +714,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       <Package className="size-5 text-hprimary" />
                     </div>
                     <div>
-                      <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-hsecondary mb-1">
+                      <p className="font-semibold text-[12px] text-hsecondary mb-1">
                         Quality Guaranteed
                       </p>
-                      <p className="font-['Poppins',sans-serif] text-[11px] text-hmuted">
+                      <p className="text-[11px] text-hmuted">
                         Premium materials
                       </p>
                     </div>
@@ -734,7 +734,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
-                    className={`font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
+                    className={`font-medium text-[14px] px-6 py-4 transition-all ${activeTab === tab
                       ? 'text-hprimary border-b-2 border-hprimary -mb-0.5'
                       : 'text-hmuted hover:text-hprimary'
                       }`}
@@ -747,29 +747,29 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
               <div className="bg-white rounded-[24px] p-8 border-2 border-gray-100">
                 {activeTab === 'description' && (
                   <div>
-                    <h3 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-4">
+                    <h3 className="font-semibold text-hsecondary mb-4">
                       Product Description
                     </h3>
                     <div
-                      className="font-['Poppins',sans-serif] text-[14px] text-hmuted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
+                      className="text-[14px] text-hmuted leading-[1.8] mb-4 max-w-full overflow-hidden break-words"
                       dangerouslySetInnerHTML={{ __html: product.description }}
                     />
 
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Last updated:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                      <p className="text-[14px] text-hmuted">
                         {lastUpdatedLabel}
                       </p>
                     </div>
 
                     {/* shipped from */}
                     <div className="mt-6">
-                      <h4 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-hsecondary mb-3">
+                      <h4 className="font-semibold text-[13px] text-hsecondary mb-3">
                         Shipped from:
                       </h4>
-                      <p className="font-['Poppins',sans-serif] text-[14px] text-hmuted">
+                      <p className="text-[14px] text-hmuted">
                         Local pharmacy distribution center
                       </p>
                     </div>
@@ -786,7 +786,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
             {/* Related Products */}
             {relatedProducts.length > 0 && (
               <div>
-                <h2 className="font-['Poppins',sans-serif] font-semibold text-hsecondary mb-8 text-2xl">
+                <h2 className="font-semibold text-hsecondary mb-8 text-2xl">
                   You May Also Like
                 </h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

package/src/screens/ShopScreen.tsx

@@ -664,12 +664,12 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
 
         <div className={`lg:w-72 ${showFilters ? 'block rounded-full' : 'hidden lg:block'}`}>
           <div className="bg-white rounded-[24px] p-6 border-2 border-gray-100 sticky top-24">
-            <h3 className="font-['Poppins',sans-serif] font-semibold text-hsecondary">
+            <h3 className="font-semibold text-hsecondary">
               Filters
             </h3>
             {/* Search */}
             <div className="mb-6">
-              <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted mb-2 block font-medium">
+              <label className="text-[12px] text-hmuted mb-2 block font-medium">
                 Search Products
               </label>
               <div className="relative">
@@ -679,7 +679,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   placeholder="Search..."
                   value={searchQuery}
                   onChange={handleInputChange}
-                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                  className="w-full pl-10 pr-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                 />
               </div>
             </div>
@@ -690,7 +690,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('category')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Category
                 </label>
                 {expandedFilterSections.category ? (
@@ -713,7 +713,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           if (!isExpanded) toggleCategoryExpand(categoryId);
                           handleCategoryChange(categoryId);
                         }}
-                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all flex items-center gap-3 ${isCategoryActive
                           ? 'bg-hprimary text-white shadow-lg'
                           : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
@@ -733,7 +733,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('brand')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Brand
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.brand ? 'rotate-180' : ''}`} />
@@ -748,7 +748,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       <button
                         key={brand}
                         onClick={() => handleBrandChange(brand)}
-                        className={`w-full text-left px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all ${isSelected
+                        className={`w-full text-left px-4 py-3 rounded-xl text-[13px] transition-all ${isSelected
                           ? 'bg-hprimary text-white shadow-lg'
                           : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                           }`}
@@ -769,7 +769,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('availability')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Availability
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.availability ? 'rotate-180' : ''}`} />
@@ -778,7 +778,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 <div className="space-y-2">
                   <button
                     onClick={handleToggleStock}
-                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${inStockOnly
+                    className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${inStockOnly
                       ? 'bg-hprimary text-white shadow-lg'
                       : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                       }`}
@@ -794,7 +794,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                 onClick={() => toggleFilterSection('price')}
                 className="w-full flex items-center justify-between mb-3"
               >
-                <label className="font-['Poppins',sans-serif] text-[12px] text-hmuted font-medium cursor-pointer">
+                <label className="text-[12px] text-hmuted font-medium cursor-pointer">
                   Price Range
                 </label>
                 <ChevronDown className={`size-4 text-hmuted transition-transform ${expandedFilterSections.price ? 'rotate-180' : ''}`} />
@@ -809,7 +809,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                           type="button"
                           key={range.value}
                           onClick={() => handlePriceRangeSelect(range.value)}
-                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl font-['Poppins',sans-serif] text-[13px] transition-all border-2 ${isActive
+                          className={`w-full flex items-center justify-between px-4 py-3 rounded-xl text-[13px] transition-all border-2 ${isActive
                             ? 'bg-hprimary text-white shadow-lg'
                             : 'text-hsecondary hover:bg-gray-50 border-2 border-gray-100'
                             }`}
@@ -828,7 +828,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, min: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                     <Input
                       type="number"
@@ -838,7 +838,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       onChange={(event) =>
                         setCustomPrice((current) => ({ ...current, max: event.target.value }))
                       }
-                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden font-['Poppins',sans-serif] text-[13px] text-hsecondary"
+                      className="w-1/2 px-4 py-2.5 rounded-xl border-2 border-gray-200 focus:border-hprimary focus:outline-hidden text-[13px] text-hsecondary"
                     />
                   </div>
                   <button
@@ -926,9 +926,9 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
       </section>
 
       {/* Shop by Category Section */}
-      <section className="py-8 bg-white">
+      <section className="py-8 bg-white/50">
         <div className="container mx-auto px-4">
-          <h2 className="text-2xl md:text-3xl font-['Poppins',sans-serif] font-semibold text-hsecondary mb-6">
+          <h2 className="text-2xl md:text-3xl font-semibold text-hsecondary mb-6">
             Shop by Category
           </h2>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
@@ -948,11 +948,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                   <Package className={`size-6 ${!categoryFilter ? 'text-white' : 'text-hprimary'
                     }`} />
                 </div>
-                <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
+                <h3 className={`font-semibold text-[14px] mb-1.5 ${!categoryFilter ? 'text-white' : 'text-hsecondary'
                   }`}>
                   All Products
                 </h3>
-                <p className={`font-['Poppins',sans-serif] text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
+                <p className={`text-[11px] ${!categoryFilter ? 'text-white/80' : 'text-hmuted'
                   }`}>
                   Browse Everything
                 </p>
@@ -983,11 +983,11 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                       <Icon className={`size-6 ${isSelected ? 'text-white' : 'text-hprimary'
                         }`} />
                     </div>
-                    <h3 className={`font-['Poppins',sans-serif] font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
+                    <h3 className={`font-semibold text-[14px] mb-1.5 ${isSelected ? 'text-white' : 'text-hsecondary'
                       }`}>
                       {category.name}
                     </h3>
-                    <p className={`font-['Poppins',sans-serif] text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
+                    <p className={`text-[11px] ${isSelected ? 'text-white/80' : 'text-hmuted'
                       }`}>
                       {category.description}
                     </p>
@@ -1177,7 +1177,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                                     event.stopPropagation();
                                     router.push(buildPath(`/products/${product._id}`));
                                   }}
-                                  className="w-full font-['Poppins',sans-serif] font-medium text-sm px-3 py-2 rounded-xl bg-hsecondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
+                                  className="w-full font-medium text-sm px-3 py-2 rounded-xl bg-hsecondary text-white hover:opacity-80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed"
                                 >
                                   View product
                                 </button>