Please view the image in link: https://i.ibb.co/YTbzLWbb/image.png
With the following code, I found that the seller information (left container in PC/Tablet) are not sticky on screen and not with suitable width
<style>
#pills-description > div > p{
    width: 100% !important;
}
</style>
<?php $total_images = 0;?>
<?php

$hasMultipleVariants = (count($product['product'][0]['variants']) > 1);

$variant_price = ($product['product'][0]['variants'][0]['special_price'] > 0 && $product['product'][0]['variants'][0]['special_price'] != '') ? $product['product'][0]['variants'][0]['special_price'] : $product['product'][0]['variants'][0]['price'];
$data_min = (isset($product['product'][0]['minimum_order_quantity']) && !empty($product['product'][0]['minimum_order_quantity'])) ? $product['product'][0]['minimum_order_quantity'] : 1;
$data_step = (isset($product['product'][0]['minimum_order_quantity']) && !empty($product['product'][0]['quantity_step_size'])) ? $product['product'][0]['quantity_step_size'] : 1;
$data_max = (isset($product['product'][0]['total_allowed_quantity']) && !empty($product['product'][0]['total_allowed_quantity'])) ? $product['product'][0]['total_allowed_quantity'] : 0;
$sh_desc = strip_tags($product['product'][0]['short_description'] ?? "");

$variant_images_md = array_column($product['product'][0]['variants'], 'images_md');
$variant_images_array = array();

array_push($variant_images_array, $product['product'][0]['image']);
if (!empty($variant_images_md)) {
    foreach ($variant_images_md as $variant_images) {
        if (!empty($variant_images)) {
            foreach ($variant_images as $image) {
                array_push($variant_images_array, $image);


?>
                
<?php }
        }
    }
} $variant_images_array = array_unique($variant_images_array);?>

<?php if (!empty($product['product'][0]['other_images']) && isset($product['product'][0]['other_images'])) {
    foreach ($product['product'][0]['other_images'] as $other_image) {
        array_push($variant_images_array, $other_image);
        $total_images++;
?>

<?php  } ?>
<?php  } ?>

<?php 
global $hkdNBF;
// Your full products array:
$all_products = $seller_products['product']; 

// Chunk size (number of products per batch):
$batch_size = 6;

// Chunk products into batches:
$product_batches = array_chunk($all_products, $batch_size);

// Encode batches as JSON for JS:
$product_batches_json = json_encode($product_batches);



?>
    <!-- ========================= Breadcrumb Start =============================== -->
    <div class="breadcrumb mb-0 py-26 bg-color-one">
    <div class="container container-lg">
        <div class="breadcrumb-wrapper flex-between flex-wrap gap-16">
            <h6 class="mb-0">產品詳情</h6>
            <ul class="flex-align gap-8 flex-wrap">
                <li class="text-sm">
                    <a href="<?= base_url() ?>" class="text-main-600 flex-align gap-8">
                        <i class="ph ph-house"></i>
                        主頁
                    </a>
                </li>
                <li class="flex-align text-gray-500">
                    <i class="ph ph-caret-right"></i>
                </li>
                <!--
                <li class="text-sm">
                    <a href="shop.html" class="text-main-600 flex-align gap-8">
                        Shop
                    </a>
                </li>
                <li class="flex-align text-gray-500">
                    <i class="ph ph-caret-right"></i>
                </li>
                <li class="text-sm">
                    <a href="<?= base_url() ?>" class="text-main-600 flex-align gap-8">
                        Shop Grid
                    </a>
                </li>
                -->
                <li class="text-sm text-neutral-600">
                    <?= $product['product'][0]['name'] ?>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- ========================= Breadcrumb End =============================== -->

    <section class="product-details">
    <div class="container container-lg">
        <div class="row gy-4">
            <div class="">
                <div class="row gy-4">
                    <div class="col-xl-6">
                        <div class="product-details__left">
                            
                            <div class="product-details__thumb-slider rounded-16">
                                <?php foreach ($variant_images_array as $image) {?>
                                    <div class="">
                                        <div class="product-details__thumb flex-center h-100">
                                            <img style="border-radius: 8px;" src="<?=$image?>" alt="">
                                        </div>
                                    </div>
                                <?php }?>
                            </div>

                            <div class="mt-24">
                                <div class="product-details__images-slider">
                                    <?php foreach ($variant_images_array as $image) {?>
                                        <div>
                                            <div class="max-w-120 max-h-120 h-100 flex-center border border-gray-100 rounded-16 p-8">
                                                <img src="<?= $image?>" alt="">
                                            </div>
                                        </div>
                                    <?php }?>
                                    
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="product-details__content">
                            <h5 class="mb-12"><?=$product['product'][0]['name']?></h5>
                            <!--
                            <div class="flex-align flex-wrap gap-12">
                                <div class="flex-align gap-12 flex-wrap">
                                    <div class="flex-align gap-8">
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    </div>
                                    <span class="text-sm fw-medium text-neutral-600">4.7 Star Rating</span>
                                    <span class="text-sm fw-medium text-gray-500">(21,671)</span>
                                </div>
                                <span class="text-sm fw-medium text-gray-500">|</span>
                                <span class="text-gray-900"> <span class="text-gray-400">SKU:</span>EB4DRP </span>
                            </div>
                            -->
                            <div class="p-6">
                                <div class="flex-between bg-main-600 rounded-pill p-8">
                                    <div class="flex-align gap-8">
                                        <span class="w-44 h-44 bg-white rounded-circle flex-center text-2xl"><i class="ph ph-storefront"></i></span>
                                        <span class="text-white">此產品由<?=$product['product'][0]['store_name']?>提供</span>
                                    </div>
                                    <a href="<?=base_url('sellers/seller_details/') . $product['product'][0]['seller_slug']?>" class="btn btn-white rounded-pill text-uppercase">瀏覽商家</a>
                                </div>
                            </div>
                            <span class="mt-32 pt-32 text-gray-700 border-top border-gray-100 d-block"></span>
                            <p class="text-gray-700"><?=output_escaping(str_replace('\r\n', '&#13;&#10;', $product['product'][0]['short_description'] ?? ""))?></p>
                            <div class="mt-32 flex-align flex-wrap gap-32">
                                
                                
                                <div class="flex-align gap-8">
                                    <h4 class="mb-0">
                                    <?php $price = get_price_range_of_product($product['product'][0]['id']);

                                        echo "HK".$price['range'];
                                        ?></h4>
                                </div>
                                
                                <!--<a href="#" class="btn btn-main rounded-pill">Order on What'sApp</a>-->
                            </div>
                            <span class="mt-32 pt-32 text-gray-700 border-top border-gray-100 d-block"></span>
                            
                            <!--
                            <div class="flex-align flex-wrap gap-16 bg-color-one rounded-8 py-16 px-24">
                                <div class="flex-align gap-16">
                                    <span class="text-main-600 text-sm">Special Offer:</span>
                                </div>
                                <div class="countdown" id="countdown11">
                                    <ul class="countdown-list flex-align flex-wrap">
                                        <li class="countdown-list__item text-heading flex-align gap-4 text-xs fw-medium w-28 h-28 rounded-4 border border-main-600 p-0 flex-center"><span class="days"></span></li>
                                        <li class="countdown-list__item text-heading flex-align gap-4 text-xs fw-medium w-28 h-28 rounded-4 border border-main-600 p-0 flex-center"><span class="hours"></span></li>
                                        <li class="countdown-list__item text-heading flex-align gap-4 text-xs fw-medium w-28 h-28 rounded-4 border border-main-600 p-0 flex-center"><span class="minutes"></span></li>
                                        <li class="countdown-list__item text-heading flex-align gap-4 text-xs fw-medium w-28 h-28 rounded-4 border border-main-600 p-0 flex-center"><span class="seconds"></span></li>
                                    </ul>
                                </div>
                                <span class="text-gray-900 text-xs">Remains untill the end of the offer</span>
                            </div>
                            -->

                            <!--
                            <div class="mb-24">
                                <div class="mt-32 flex-align gap-12 mb-16">
                                    <span class="w-32 h-32 bg-white flex-center rounded-circle text-main-600 box-shadow-xl"><i class="ph-fill ph-lightning"></i></span>
                                    <h6 class="text-md mb-0 fw-bold text-gray-900">Products are almost sold out</h6>
                                </div>
                                <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="32" aria-valuemin="0" aria-valuemax="100">
                                    <div class="progress-bar bg-main-two-600 rounded-pill" style="width: 32%"></div>
                                </div>
                                <span class="text-sm text-gray-700 mt-8">Available only:45</span>
                            </div>
                            -->

                            <div class="flex-between gap-16 flex-wrap">
                                <div class="flex-align flex-wrap gap-16" style="flex: 1;">
                                    <?php if ($this->ion_auth->logged_in()) { ?>
                                    <a href="#" style="flex:1.5;flex-direction: unset !important;border-radius: 5px;margin-right:5px;padding: 13px 24px;;" class="bottom-nav-item btn btn-main flex-align d-inline-flex gap-8 px-12 add_to_cart" 
                                        data-product-id="<?= $product['product'][0]['id'] ?>"
                                        data-product-title="<?= htmlspecialchars($product['product'][0]['name'], ENT_QUOTES) ?>"
                                        data-product-price="<?= $variant_price ?>"
                                        data-product-image="<?= htmlspecialchars($product['product'][0]['image'], ENT_QUOTES) ?>"
                                        data-min="<?= $data_min ?>"
                                        data-step="<?= $data_step ?>"
                                        data-max="<?= $data_max ?>"
                                        data-product-description="<?= htmlspecialchars(short_description_word_limit($sh_desc), ENT_QUOTES) ?>"
                                        data-variants='<?= htmlspecialchars(json_encode($product['product'][0]['variants']), ENT_QUOTES) ?>'
                                        data-has-multiple-variants="<?= $hasMultipleVariants ? '1' : '0' ?>"
                                    ><i class="ph ph-shopping-cart"></i>加至購物車</a>
                                    <?php } else { ?>
                                        <a href="#" data-izimodal-open=".auth-modal" data-value="login" data-izimodal-transitionin="fadeInDown" class="auth_model bottom-nav-item btn btn-main flex-align d-inline-flex gap-8 px-12" style="flex:1.5;flex-direction: unset !important;border-radius: 5px;margin-right:5px;padding: 13px 24px;;">
                                            <i class="ph ph-shopping-cart-simple"></i>請先登入
                                        </a>
                                    <?php } ?>
                                </div>
                                
                                <div class="flex-align gap-12">
                                    <a href="#" class="add_to_favorite_btn w-52 h-52 bg-main-50 text-main-600 text-xl hover-bg-main-600 hover-text-white flex-center rounded-circle" data-product-id="<?= $product['product'][0]['id'] ?>">
                                        <i class="ph ph-heart"></i>
                                    </a>
                                    <!--
                                    <a href="#" class="w-52 h-52 bg-main-50 text-main-600 text-xl hover-bg-main-600 hover-text-white flex-center rounded-circle">
                                        <i class="ph ph-shuffle"></i>
                                    </a>
                                    -->
                                    <a href="#" class="w-52 h-52 bg-main-50 text-main-600 text-xl hover-bg-main-600 hover-text-white flex-center rounded-circle">
                                        <i class="ph ph-share-network"></i>
                                    </a>
                                </div>
                            </div>
                            
                            <span class="mt-32 pt-32 text-gray-700 border-top border-gray-100 d-block"></span>
                            <!--
                            <div class="flex-between gap-16 p-12 border border-main-two-600 border-dashed rounded-8 mb-16">
                                <div class="flex-align gap-12">
                                    <button type="button" class="w-18 h-18 flex-center border border-gray-900 text-xs rounded-circle hover-bg-gray-100">
                                        <i class="ph ph-plus"></i>
                                    </button>
                                    <span class="text-gray-900 fw-medium text-xs">Mfr. coupon. $3.00 off 5</span>
                                </div>
                                <a href="cart.html" class="text-xs fw-semibold text-main-two-600 text-decoration-underline hover-text-main-two-700">View Details</a>
                            </div>
                            <ul class="list-inside ms-12">
                                <li class="text-gray-900 text-sm mb-8">Buy 1, Get 1 FREE</li>
                                <li class="text-gray-900 text-sm mb-0">Buy 1, Get 1 FREE</li>
                            </ul>
                            -->
                            
                        </div>
                    </div>
                </div>
            </div>
            <!--
            <div class="col-lg-3">
                <div class="product-details__sidebar border border-gray-100 rounded-16 overflow-hidden">
                    <div class="p-24">
                        <div class="flex-between bg-main-600 rounded-pill p-8">
                            <div class="flex-align gap-8">
                                <span class="w-44 h-44 bg-white rounded-circle flex-center text-2xl"><i class="ph ph-storefront"></i></span>
                                <span class="text-white">此產品由<?=$product['product'][0]['store_name']?>提供</span>
                            </div>
                            <a href="<?=base_url('sellers/seller_details/') . $product['product'][0]['seller_slug']?>" class="btn btn-white rounded-pill text-uppercase">瀏覽商家</a>
                        </div>
                    </div>
                    
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-truck"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Fast Delivery</h6>
                            <p class="text-gray-700">Lightning-fast shipping, guaranteed.</p>
                        </div>
                    </div>
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-arrow-u-up-left"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Free 90-day returns</h6>
                            <p class="text-gray-700">Shop risk-free with easy returns.</p>
                        </div>
                    </div>
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-check-circle"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Pickup available at Shop location</h6>
                            <p class="text-gray-700">Usually ready in 24 hours</p>
                        </div>
                    </div>
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-credit-card"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Payment</h6>
                            <p class="text-gray-700">Payment upon receipt of goods, Payment by card in the department, Google Pay, Online card.</p>
                        </div>
                    </div>
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-check-circle"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Warranty</h6>
                            <p class="text-gray-700">The Consumer Protection Act does not provide for the return of this product of proper quality.</p>
                        </div>
                    </div>
                    <div class="p-24 bg-color-one d-flex align-items-start gap-24 border-bottom border-gray-100">
                        <span class="w-44 h-44 bg-white text-main-600 rounded-circle flex-center text-2xl flex-shrink-0">
                            <i class="ph-fill ph-package"></i>
                        </span>
                        <div class="">
                            <h6 class="text-sm mb-8">Packaging</h6>
                            <p class="text-gray-700">Research & development value proposition graphical user interface investor.</p>
                        </div>
                    </div>
                
                </div>
            </div>
            -->
        </div>

        <div class="pt-40">
            <div class="product-dContent border rounded-24">
                <div class="border-bottom border-gray-100 flex-between flex-wrap gap-16">
                    <ul class="nav common-tab nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <button style="border-radius: 8px;" class="nav-link active" id="pills-description-tab" data-bs-toggle="pill" data-bs-target="#pills-description" type="button" role="tab" aria-controls="pills-description" aria-selected="true">產品詳情</button>
                        </li>
                        <!--
                        <li class="nav-item" role="presentation">
                          <button class="nav-link" id="pills-reviews-tab" data-bs-toggle="pill" data-bs-target="#pills-reviews" type="button" role="tab" aria-controls="pills-reviews" aria-selected="false">評價</button>
                        </li>
                        -->
                    </ul>
                    <!--
                    <a href="#" class="btn bg-color-one rounded-16 flex-align gap-8 text-main-600 hover-bg-main-600 hover-text-white">
                        <img src="<?= THEME_ASSETS_URL . 'images/marketpro/icon/satisfaction-icon.png'?>" alt="">
                        100% Satisfaction Guaranteed
                    </a>
                    -->
                </div>
                <div class="product-dContent__box">
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-description" role="tabpanel" aria-labelledby="pills-description-tab" tabindex="0">
                            <div class="mb-0" style="padding-bottom: 15px;">
                                <h6 style="padding-top: 15px;margin-left: 10px;margin-right: 10px;">產品詳情</h6>
                                <?=(isset($product['product'][0]['description']) && !empty($product['product'][0]['description'])) ? $product['product'][0]['description'] : ""?>
                            </div>
                        </div>
                        <!--
                        <div class="tab-pane fade" id="pills-reviews" role="tabpanel" aria-labelledby="pills-reviews-tab" tabindex="0">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h6 class="mb-24">Product Description</h6>
                                    <div class="d-flex align-items-start gap-24 pb-44 border-bottom border-gray-100 mb-44">
                                        <img src="<?= THEME_ASSETS_URL . 'images/marketpro/thumbs/comment-img1.png'?>" alt="" class="w-52 h-52 object-fit-cover rounded-circle flex-shrink-0">
                                        <div class="flex-grow-1">
                                            <div class="flex-between align-items-start gap-8 ">
                                                <div class="">
                                                    <h6 class="mb-12 text-md">Nicolas cage</h6>
                                                    <div class="flex-align gap-8">
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                </div>
                                                <span class="text-gray-800 text-xs">3 Days ago</span>
                                            </div>
                                            <h6 class="mb-14 text-md mt-24">Greate Product</h6>
                                            <p class="text-gray-700">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</p>

                                            <div class="flex-align gap-20 mt-44">
                                                <button class="flex-align gap-12 text-gray-700 hover-text-main-600">
                                                    <i class="ph-bold ph-thumbs-up"></i>
                                                    Like
                                                </button>
                                                <a href="#comment-form" class="flex-align gap-12 text-gray-700 hover-text-main-600">
                                                    <i class="ph-bold ph-arrow-bend-up-left"></i>
                                                    Replay
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-start gap-24">
                                        <img src="<?= THEME_ASSETS_URL . 'images/marketpro/thumbs/comment-img1.png'?>" alt="" class="w-52 h-52 object-fit-cover rounded-circle flex-shrink-0">
                                        <div class="flex-grow-1">
                                            <div class="flex-between align-items-start gap-8 ">
                                                <div class="">
                                                    <h6 class="mb-12 text-md">Nicolas cage</h6>
                                                    <div class="flex-align gap-8">
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                </div>
                                                <span class="text-gray-800 text-xs">3 Days ago</span>
                                            </div>
                                            <h6 class="mb-14 text-md mt-24">Greate Product</h6>
                                            <p class="text-gray-700">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour</p>

                                            <div class="flex-align gap-20 mt-44">
                                                <button class="flex-align gap-12 text-gray-700 hover-text-main-600">
                                                    <i class="ph-bold ph-thumbs-up"></i>
                                                    Like
                                                </button>
                                                <a href="#comment-form" class="flex-align gap-12 text-gray-700 hover-text-main-600">
                                                    <i class="ph-bold ph-arrow-bend-up-left"></i>
                                                    Replay
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-56">
                                        <div class="">
                                            <h6 class="mb-24">Write a Review</h6>
                                            <span class="text-heading mb-8">What is it like to Product?</span>
                                            <div class="flex-align gap-8">
                                                <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                            </div>
                                        </div>
                                        <div class="mt-32">
                                            <form action="#">   
                                                <div class="mb-32">
                                                    <label for="title" class="text-neutral-600 mb-8">Review Title</label>
                                                    <input type="text" class="common-input rounded-8" id="title" placeholder="Great Products">
                                                </div>
                                                <div class="mb-32">
                                                    <label for="desc" class="text-neutral-600 mb-8">Review Content</label>
                                                    <textarea class="common-input rounded-8" id="desc">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</textarea>
                                                </div>
                                                <button type="submit" class="btn btn-main rounded-pill mt-48">Submit Review</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="ms-xxl-5">
                                        <h6 class="mb-24">Customers Feedback</h6>
                                        <div class="d-flex flex-wrap gap-44">
                                            <div class="border border-gray-100 rounded-8 px-40 py-52 flex-center flex-column flex-shrink-0 text-center">
                                                <h2 class="mb-6 text-main-600">4.8</h2>
                                                <div class="flex-center gap-8">
                                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                </div>
                                                <span class="mt-16 text-gray-500">Average Product Rating</span>
                                            </div>
                                            <div class="border border-gray-100 rounded-8 px-24 py-40 flex-grow-1">
                                                <div class="flex-align gap-8 mb-20">
                                                    <span class="text-gray-900 flex-shrink-0">5</span>
                                                    <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar bg-main-600 rounded-pill" style="width: 70%"></div>
                                                    </div>
                                                    <div class="flex-align gap-4">
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                    <span class="text-gray-900 flex-shrink-0">124</span>
                                                </div>
                                                <div class="flex-align gap-8 mb-20">
                                                    <span class="text-gray-900 flex-shrink-0">4</span>
                                                    <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar bg-main-600 rounded-pill" style="width: 50%"></div>
                                                    </div>
                                                    <div class="flex-align gap-4">
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                    <span class="text-gray-900 flex-shrink-0">52</span>
                                                </div>
                                                <div class="flex-align gap-8 mb-20">
                                                    <span class="text-gray-900 flex-shrink-0">3</span>
                                                    <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar bg-main-600 rounded-pill" style="width: 35%"></div>
                                                    </div>
                                                    <div class="flex-align gap-4">
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                    <span class="text-gray-900 flex-shrink-0">12</span>
                                                </div>
                                                <div class="flex-align gap-8 mb-20">
                                                    <span class="text-gray-900 flex-shrink-0">2</span>
                                                    <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar bg-main-600 rounded-pill" style="width: 20%"></div>
                                                    </div>
                                                    <div class="flex-align gap-4">
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                    <span class="text-gray-900 flex-shrink-0">5</span>
                                                </div>
                                                <div class="flex-align gap-8 mb-0">
                                                    <span class="text-gray-900 flex-shrink-0">1</span>
                                                    <div class="progress w-100 bg-gray-100 rounded-pill h-8" role="progressbar" aria-label="Basic example" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar bg-main-600 rounded-pill" style="width: 5%"></div>
                                                    </div>
                                                    <div class="flex-align gap-4">
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                        <span class="text-xs fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                                    </div>
                                                    <span class="text-gray-900 flex-shrink-0">2</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </div>  
                            </div>
                        </div>  
                        -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ========================== Same Category Product Start ============================= -->
<?php if(!empty($related_products['product'])){ ?>
<section class="new-arrival">
    <div class="container container-lg">
        <div class="section-heading">
            <div class="flex-between flex-wrap gap-8">
                <h5 class="mb-0">同類產品</h5>
                <div class="flex-align gap-8">
                    <a href="<?=base_url("products/category/" . $category_data[0]['slug'])?>" class="text-sm fw-medium text-gray-700 hover-text-main-600 hover-text-decoration-underline">所有<?=$category_data[0]['name']?>產品</a>
                    <button type="button" id="topBrand-prev" class="slick-prev slick-arrow flex-center rounded-circle border border-gray-100 hover-border-main-two-600 text-xl hover-bg-main-two-600 hover-text-white transition-1">
                        <i class="ph ph-caret-left"></i>
                    </button>
                    <button type="button" id="topBrand-next" class="slick-next slick-arrow flex-center rounded-circle border border-gray-100 hover-border-main-two-600 text-xl hover-bg-main-two-600 hover-text-white transition-1">
                        <i class="ph ph-caret-right"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="product__slider">
            <?php foreach($related_products['product'] as $product_row) {
                    
                    $variant_price = ($product_row['variants'][0]['special_price'] > 0 && $product_row['variants'][0]['special_price'] != '') ? $product_row['variants'][0]['special_price'] : $product_row['variants'][0]['price'];
                    $data_min = (isset($product_row['minimum_order_quantity']) && !empty($product_row['minimum_order_quantity'])) ? $product_row['minimum_order_quantity'] : 1;
                    $data_step = (isset($product_row['minimum_order_quantity']) && !empty($product_row['quantity_step_size'])) ? $product_row['quantity_step_size'] : 1;
                    $data_max = (isset($product_row['total_allowed_quantity']) && !empty($product_row['total_allowed_quantity'])) ? $product_row['total_allowed_quantity'] : 0;
                    $sh_desc = strip_tags($product_row['short_description'] ?? "")
                ?>
                <div class="col-xl-3 col-lg-4 col-sm-6" data-aos="fade-up" data-aos-duration="200">
                    <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding: 1px !important;">
                        <div class="product-card__thumb rounded-8 position-relative">
                            <!-- "<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" -->
                            <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="w-100 h-100 flex-center"> 
                                <img src="<?= $product_row['image_sm'] ?>" alt="" class="w-auto rounded-8">
                            </a>
                            <!--
                            <div class="position-absolute inset-block-start-0 inset-inline-start-0 mt-16 ms-16 z-1 d-flex flex-column gap-8">
                                <span class="text-main-two-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">-29%</span>
                                <span class="text-neutral-600 w-40 h-40 d-flex justify-content-center align-items-center bg-white rounded-circle shadow-sm text-xs fw-semibold">HOT</span>
                            </div>
                            -->

                            <div class="expand-btn-container bg-white p-2 rounded-pill z-1 position-absolute inset-inline-end-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                                <button type="button" class="expand-btn w-40 h-40 text-md d-flex justify-content-center align-items-center rounded-circle hover-bg-main-two-600 hover-text-white">
                                    <i class="ph ph-plus"></i>
                                </button>
                                <div class="expand-icons gap-20 my-20">
                                    <button type="button" class="add_to_favorite_btn text-neutral-600 text-xl flex-center hover-text-main-two-600 wishlist-btn" data-product-id="<?= $product['product'][0]['id'] ?>">
                                        <i class="ph ph-heart"></i>
                                    </button>
                                    <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                        <i class="ph ph-eye"></i>
                                    </button>
                                    <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                        <i class="ph ph-shuffle"></i>
                                    </button>
                                </div>
                            </div>
                            <!--
                            <div class="countdown position-absolute start-50 inset-block-end-0 mb-20 translate-middle-x w-100" id="countdown12">
                                <ul class="countdown-list style-four flex-center flex-wrap gap-8">
                                    <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                        <span class="days text-2xl text-main-two-600 fw-medium"></span>Days
                                    </li>
                                    <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                        <span class="hours text-2xl text-main-two-600 fw-medium"></span>Hour
                                    </li>
                                    <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                        <span class="minutes text-2xl text-main-two-600 fw-medium"></span>Min
                                    </li>
                                    <li class="countdown-list__item flex-align flex-column text-sm fw-medium text-white rounded-lg bg-neutral-600">
                                        <span class="seconds text-2xl text-main-two-600 fw-medium"></span>Sec
                                    </li>
                                </ul>
                            </div>
                            -->
                        </div>
                        <div class="product-card__content w-100">
                            <div class="product-card-tags">
                                <?php foreach($product_row['tags'] as $tag){?>
                                    <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50"><a href="<?=base_url("products/tags/".$tag)?>"><?=$tag?></a></span>
                                <?php } ?>
                            </div>
                            <h6 class="title text-lg fw-semibold" style="margin-bottom: 0px !important;">
                                <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="link text-line-2" tabindex="0"><?= short_description_word_limit(output_escaping(str_replace('\r\n', '&#13;&#10;', strip_tags($product_row['name'])))) ?></a>
                            </h6>
                            <!--
                            <div class="flex-align gap-6">
                                <div class="flex-align gap-8">
                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                    <span class="text-15 fw-medium text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
                                </div>
                                <span class="text-xs fw-medium text-gray-500">4.8</span>
                                <span class="text-xs fw-medium text-gray-500">(12K)</span>
                            </div>
                            -->

                            <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="<?=base_url("products/category/".$product_row['category_name'])?>"><?=$product_row['category_name']?></a></span>
                            <!--
                            <?php foreach($product_row['sub_categories'] as $cat){?>
                                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-16"><a href="<?=base_url("products/category/".$cat)?>"><?=$cat?></a></span>
                            <?php } ?>
                            -->

                            <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="<?=base_url('sellers/seller_details/'.$product_row['seller_slug'])?>"><?='由'.$product_row['store_name'].'提供'?></a></span>

                            <div class="product-card__price mt-4 mb-4">
                                <?php global $hkdNBF; if($variant_price != $product_row['variants'][0]['price']) { ?>
                                    <span class="text-gray-400 text-md fw-semibold text-decoration-line-through"><?=$hkdNBF->formatCurrency($product_row['variants'][0]['price'], "HKD")?></span>
                                <?php } ?>
                                <span class="text-heading text-md fw-semibold "><?=$hkdNBF->formatCurrency($variant_price,"HKD")?> <span class="text-gray-500 fw-normal"></span></span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            <?php } ?>
        </div>
    </div>
</section>
<?php } ?>
<!-- ========================== Same Category Product End ============================= -->

<!-- ========================== Same Seller Product Start ============================= -->
<?php if(!isset($seller_data) || !empty($seller_data) ) { ?>
    <?php if(!empty($seller_products['product'])){ ?>
    <section class="new-arrival pb-40">
        <div class="container container-lg">
            <div class="section-heading">
                <div class="flex-between flex-wrap gap-8">
                    <h5 class="mb-0">同店產品</h5>
                    <!--
                    <div class="flex-align gap-16">
                        <a href="<?=base_url("sellers/seller_details/" . $seller_data[0]['slug'])?>" class="text-sm fw-medium text-gray-700 hover-text-main-600 hover-text-decoration-underline">所有<?=$seller_data[0]['store_name']?>出售的產品</a>    
                    </div>
    -->
                </div>
            </div>
            <div class="row" id="product-list">
                <!-- Products will be loaded here by JS -->
            </div>

            <div id="loading" class="text-center py-3" style="display:none;">加載更多商品...</div>
            <!--
            <div class="product__slider">
                <?php foreach($seller_products['product'] as $product_row) {
                        $variant_price = ($product_row['variants'][0]['special_price'] > 0 && $product_row['variants'][0]['special_price'] != '') ? $product_row['variants'][0]['special_price'] : $product_row['variants'][0]['price'];
                        $data_min = (isset($product_row['minimum_order_quantity']) && !empty($product_row['minimum_order_quantity'])) ? $product_row['minimum_order_quantity'] : 1;
                        $data_step = (isset($product_row['minimum_order_quantity']) && !empty($product_row['quantity_step_size'])) ? $product_row['quantity_step_size'] : 1;
                        $data_max = (isset($product_row['total_allowed_quantity']) && !empty($product_row['total_allowed_quantity'])) ? $product_row['total_allowed_quantity'] : 0;
                        $sh_desc = strip_tags($product_row['short_description'] ?? "")
                    ?>
                    <div class="col-xl-3 col-lg-4 col-sm-6" data-aos="fade-up" data-aos-duration="200">
                        <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding: 1px !important;">
                            <div class="product-card__thumb rounded-8 position-relative">
                                <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="w-100 h-100 flex-center"> 
                                    <img src="<?= $product_row['image_sm'] ?>" alt="" class="w-auto rounded-8">
                                </a>

                                <div class="expand-btn-container bg-white p-2 rounded-pill z-1 position-absolute inset-inline-end-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                                    <button type="button" class="expand-btn w-40 h-40 text-md d-flex justify-content-center align-items-center rounded-circle hover-bg-main-two-600 hover-text-white">
                                        <i class="ph ph-plus"></i>
                                    </button>
                                    <div class="expand-icons gap-20 my-20">
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600 wishlist-btn">
                                            <i class="ph ph-heart"></i>
                                        </button>
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                            <i class="ph ph-eye"></i>
                                        </button>
                                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                                            <i class="ph ph-shuffle"></i>
                                        </button>
                                    </div>
                                </div>

                            </div>
                            <div class="product-card__content w-100">
                                <div class="product-card-tags">
                                    <?php foreach($product_row['tags'] as $tag){?>
                                        <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50"><a href="<?=base_url("products/tags/".$tag)?>"><?=$tag?></a></span>
                                    <?php } ?>
                                </div>
                                <h6 class="title text-lg fw-semibold" style="margin-bottom: 0px !important;">
                                    <a href="<?=base_url()?><?= 'products/details/' . $product_row['slug'] ?>" class="link text-line-2" tabindex="0"><?= short_description_word_limit(output_escaping(str_replace('\r\n', '&#13;&#10;', strip_tags($product_row['name'])))) ?></a>
                                </h6>

                                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4"><a href="<?=base_url("products/category/".$product_row['category_name'])?>"><?=$product_row['category_name']?></a></span>


                                <div class="product-card__price mt-4 mb-4">
                                    <?php global $hkdNBF; if($variant_price != $product_row['variants'][0]['price']) { ?>
                                        <span class="text-gray-400 text-md fw-semibold text-decoration-line-through"><?=$hkdNBF->formatCurrency($product_row['variants'][0]['price'], "HKD")?></span>
                                    <?php } ?>
                                    <span class="text-heading text-md fw-semibold "><?=$hkdNBF->formatCurrency($variant_price,"HKD")?> <span class="text-gray-500 fw-normal"></span></span>
                                </div>

                            </div>
                        </div>
                    </div>
                <?php } ?>
            </div>
            -->
        </div>
    </section>
    <?php } ?>
<?php } ?>

<div class="bottom-product-info" style="gap: 5px;">

    <a href="javascript:void(0)" class="bottom-nav-item add_to_favorite_btn <?=$product['product'][0]['is_favorite'] != "0" ? 'remove-fav' : 'add-fav'?>" data-product-id="<?= $product['product'][0]['id'] ?>" style="color: black;flex:0.4;margin-left:5px;">
        <i class="ph ph-heart" style="<?=$product['product'][0]['is_favorite'] != "0" ? "color: cornflowerblue" : "color: black"?>"></i>
        <span><?=$product['product'][0]['is_favorite'] != "0" ? "已收藏" : "收藏"?></span>
    </a>
    
    <a href="<?=base_url("sellers/seller_details/" . $seller_data[0]['slug'])?>" class="bottom-nav-item" style="color: black;flex:0.3;">
        <i class="ph ph-storefront"></i>
        <span>商家</span>
    </a>
    
    <!--
    <a href="#" class="bottom-nav-item category__button">
        <i class="ph ph-list-magnifying-glass"></i>
        <span>分類</span>
    </a>
    -->
    <span class="bottom-nav-item" style="color: black;"><?="HK$".$product['product'][0]['min_max_price']['min_price']?></span>
    <!--
    <div class="border border-gray-100 rounded-pill flex-align">
        <button type="button" class="quantity__minus p-4 text-gray-700 hover-text-main-600 flex-center"><i class="ph ph-minus"></i></button>
        <input type="number" name="qty" class="quantity__input border-0 text-center w-32" value="1">
        <button type="button" class="quantity__plus p-4 text-gray-700 hover-text-main-600 flex-center"><i class="ph ph-plus"></i></button>
    </div>
    -->
    <?php if ($this->ion_auth->logged_in()) { ?>
    <a href="#" style="flex:1.5;flex-direction: unset !important;border-radius: 5px;margin-right:5px;padding: 13px 24px;;" class="bottom-nav-item btn btn-main flex-align d-inline-flex gap-8 px-12 add_to_cart" 
        data-product-id="<?= $product['product'][0]['id'] ?>"
        data-product-title="<?= htmlspecialchars($product['product'][0]['name'], ENT_QUOTES) ?>"
        data-product-price="<?= $variant_price ?>"
        data-product-image="<?= htmlspecialchars($product['product'][0]['image'], ENT_QUOTES) ?>"
        data-min="<?= $data_min ?>"
        data-step="<?= $data_step ?>"
        data-max="<?= $data_max ?>"
        data-product-description="<?= htmlspecialchars(short_description_word_limit($sh_desc), ENT_QUOTES) ?>"
        data-variants='<?= htmlspecialchars(json_encode($product['product'][0]['variants']), ENT_QUOTES) ?>'
        data-has-multiple-variants="<?= $hasMultipleVariants ? '1' : '0' ?>"
    ><i class="ph ph-shopping-cart"></i>加至購物車</a>
    <?php } else { ?>
        <a href="#" data-izimodal-open=".auth-modal" data-value="login" data-izimodal-transitionin="fadeInDown" class="auth_model bottom-nav-item btn btn-main flex-align d-inline-flex gap-8 px-12" style="flex:1.5;flex-direction: unset !important;border-radius: 5px;margin-right:5px;padding: 13px 24px;;">
            <span class="text-2xl text-white d-flex position-relative item-hover__text">
                <i class="ph ph-shopping-cart-simple"></i>
            </span>
            <span class="text-sm text-white item-hover__text d-lg-flex">請先登入</span>
        </a>
    <?php } ?>
</div>
<!-- ========================== Same Seller Product End ============================= -->

<script>
const productBatches = <?= $product_batches_json ?>;
const batchSize = <?= $batch_size ?>;
let currentBatchIndex = 0;

const productListElem = document.getElementById('product-list');
const loadingElem = document.getElementById('loading');

function escapeHtml(text) {
    const map = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'};
    return (text || '').toString().replace(/[&<>"']/g, m => map[m]);
}

function formatCurrency(value) {
    // Use your global currency formatter as desired
    // Here simple HKD display as fallback:
    return 'HKD ' + Number(value).toFixed(2);
}

function buildProductHTML(row) {
    if (!row || !row.variants || row.variants.length == 0) return '';

    let variant_price = (row.variants[0].special_price > 0 && row.variants[0].special_price !== '') ? row.variants[0].special_price : row.variants[0].price;
    let original_price = row.variants[0].price;
    let special_price = row.variants[0].special_price;

    let name = escapeHtml(row.name);
    let slug = escapeHtml(row.slug);
    let image_sm = escapeHtml(row.image_sm);
    let category_name = escapeHtml(row.category_name);
    let store_name = escapeHtml(row.store_name);
    let seller_slug = escapeHtml(row.seller_slug);

    // Tags HTML:
    let tags_html = '';
    if (row.tags && Array.isArray(row.tags)) {
        tags_html = row.tags.map(tag => `<span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50"><a href="<?=base_url("products/tags/")?>${encodeURIComponent(tag)}">${escapeHtml(tag)}</a></span>`).join(' ');
    }

    return `
    <div class="col-6 col-md-3 product-grid mb-30">
        <div class="product-card h-100 rounded-16 position-relative transition-2" style="padding:0 !important;">
            <div class="product-card__thumb rounded-8 position-relative">
                <a href="<?=base_url()?>products/details/${slug}" class="w-100 h-100 flex-center">
                    <img src="${image_sm}" alt="${name}" class="w-auto rounded-8">
                </a>
                <div class="expand-btn-container bg-white p-2 rounded-pill z-1 position-absolute inset-inline-end-0 inset-block-start-0 me-16 mt-16 shadow-sm">
                    <button type="button" class="expand-btn w-40 h-40 text-md d-flex justify-content-center align-items-center rounded-circle hover-bg-main-two-600 hover-text-white">
                        <i class="ph ph-plus"></i>
                    </button>
                    <div class="expand-icons gap-20 my-20">
                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600 wishlist-btn">
                            <i class="ph ph-heart"></i>
                        </button>
                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                            <i class="ph ph-eye"></i>
                        </button>
                        <button type="button" class="text-neutral-600 text-xl flex-center hover-text-main-two-600">
                            <i class="ph ph-shuffle"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="product-card__content w-100 pt-3">
                <div class="product-card-tags">
                    ${tags_html}
                </div>
                <h6 class="title text-lg fw-semibold" style="margin-bottom:0;">
                    <a href="<?=base_url()?>products/details/${slug}" class="link text-line-2" tabindex="0">${name}</a>
                </h6>
                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4 d-inline-block">
                    <a href="<?=base_url()?>products/category/${encodeURIComponent(category_name)}">${category_name}</a>
                </span>
                <span class="py-2 px-8 text-xs rounded-pill text-main-two-600 bg-main-two-50 mt-4 d-inline-block">
                    <a href="<?=base_url()?>sellers/seller_details/${seller_slug}">由${store_name}提供</a>
                </span>
                <div class="product-card__price mt-4 mb-4">
                    ${special_price && special_price > 0 && special_price != original_price ? `<span class="text-gray-400 text-md fw-semibold text-decoration-line-through">${formatCurrency(original_price)}</span>` : ''}
                    <span class="text-heading text-md fw-semibold">${formatCurrency(variant_price)}</span>
                </div>
            </div>
        </div>
    </div>
    `;
}

function renderBatch(index) {
    if (index >= productBatches.length) {
        currentBatchIndex = 0; // Loop back to first batch
        index = 0;
    }
    const batch = productBatches[index];
    let html = '';
    batch.forEach(item => {
        html += buildProductHTML(item);
    });
    productListElem.insertAdjacentHTML('beforeend', html);

    // Optional: limit max products chunks to avoid too many nodes for performance
    const maxBatchesInDOM = 5; // e.g. max 5 batches ~ 30 products
    if(productListElem.children.length > maxBatchesInDOM * batchSize) {
        // Remove oldest batch:
        for(let i = 0; i < batchSize; i++) {
            if(productListElem.firstChild) productListElem.removeChild(productListElem.firstChild);
        }
    }
}

function onScroll() {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 400) {
        currentBatchIndex++;
        renderBatch(currentBatchIndex);
    }
}

// Initial load first batch:
renderBatch(currentBatchIndex);

window.addEventListener('scroll', onScroll);
</script>

Please fix the css and related code