2 files changed, 9 insertions, 5 deletions
diff --git a/src/components/products/ProductCard.js b/src/components/products/ProductCard.js
index e32463a7..c79a4900 100644
--- a/src/components/products/ProductCard.js
+++ b/src/components/products/ProductCard.js
@@ -5,7 +5,10 @@ import { ChevronRightIcon } from "@heroicons/react/20/solid";
 import Image from "../elements/Image";
 
 
-export default function ProductCard({ data }) {
+export default function ProductCard({ 
+  data,
+  simpleProductTitleLine = false
+}) {
   let product = data;
   return (
     <div className="product-card">
@@ -26,7 +29,7 @@ export default function ProductCard({ data }) {
           ) : (
             <span className="product-card__brand">-</span>
           )}
-          <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3">
+          <Link href={'/shop/product/' + createSlug(product.name, product.id)} className={`product-card__title ${simpleProductTitleLine ? 'wrap-line-ellipsis-2' : 'wrap-line-ellipsis-3'}`}>
             {product.name}
           </Link>
         </div>
@@ -34,7 +37,7 @@ export default function ProductCard({ data }) {
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center mb-1">
               <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
-              <span className="badge-red">{product.lowest_price.discount_percentage}%</span>
+              <span className="badge-solid-red">{product.lowest_price.discount_percentage}%</span>
             </div>
           ) : ''}
           
@@ -55,7 +58,7 @@ export default function ProductCard({ data }) {
           
           {product.stock_total > 0 ? (
             <div className="flex gap-x-1 mt-2">
-              <div className="badge-green">Ready Stock</div>
+              <div className="badge-solid-red">Ready Stock</div>
               <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
             </div>
           ) : ''}
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index b7c17ecd..6ee31f9b 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -8,6 +8,7 @@ import { useState } from "react";
 
 export default function ProductSlider({ 
   products, 
+  simpleProductTitleLine = false,
   bannerMode = false 
 }) {
   const [ activeIndex, setActiveIndex ] = useState(0);
@@ -28,7 +29,7 @@ export default function ProductSlider({
         ) }
         {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
-            <ProductCard data={product} />
+            <ProductCard data={product} simpleProductTitleLine={simpleProductTitleLine} />
           </SwiperSlide>
         ))}
       </Swiper>