fix: update core charge appearance

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

components/product/product-description.tsx

@@ -2,8 +2,9 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
 import { Suspense } from 'react';
-import PriceWithCoreCharge from './price-with-core-charge';
+import CoreCharge from './core-charge';
 import SpecialOffer from './special-offer';
+import VariantPrice from './vairant-price';
 import { VariantSelector } from './variant-selector';
 import Warranty from './warranty';
 
@@ -12,7 +13,7 @@ export function ProductDescription({ product }: { product: Product }) {
     <>
       <div className="mb-5 flex flex-col dark:border-neutral-700">
         <h1 className="mb-3 text-2xl font-bold">{product.title}</h1>
-        <PriceWithCoreCharge
+        <VariantPrice
           variants={product.variants}
           defaultPrice={product.priceRange.minVariantPrice}
         />
@@ -28,6 +29,10 @@ export function ProductDescription({ product }: { product: Product }) {
         />
       ) : null}
 
+      <div className="mb-4 border-t pb-4 pt-6 dark:border-neutral-700">
+        <CoreCharge variants={product.variants} defaultPrice={product.priceRange.minVariantPrice} />
+      </div>
+
       <div className="mb-4 border-t py-6 dark:border-neutral-700">
         <Warranty productType={product.productType} />
       </div>