<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" href="{{ asset('public/assets/diamond.css') }}">

<link rel="stylesheet" href="{{ asset('public/assets/ring_builder.css') }}">

<link href="https://cdn.datatables.net/v/bs-3.3.7/jszip-3.10.1/dt-1.13.6/af-2.6.0/b-2.4.2/b-colvis-2.4.2/b-html5-2.4.2/b-print-2.4.2/cr-1.7.0/date-1.5.1/fc-4.3.0/fh-3.4.0/kt-2.10.0/r-2.5.0/rg-1.4.0/sc-2.2.0/sb-1.5.0/sp-2.2.0/sl-1.7.0/sr-1.3.0/datatables.min.css" rel="stylesheet">

<script src="https://kit.fontawesome.com/d5b36ed05d.js" defer="defer" crossorigin="anonymous"></script>

<link rel="stylesheet" href="{{ asset('public/assets/style.css') }}">

<link rel="stylesheet" href="{{ asset('public/assets/ion.rangeSlider.css') }}">

<link rel="stylesheet" href="{{ asset('public/assets/ion.rangeSlider.skinNice.css') }}">

<script src="{{ asset('public/assets/ion.rangeSlider.js') }}" defer="defer"></script>

<script src="{{ asset('public/assets/jquery.dataTables.min.js') }}" defer="defer"></script>

<script src="{{ asset('public/assets/manage_diamond.js') }}" defer="defer"></script>

<script src="{{ asset('public/assets/manage_diamond_ajax.js') }}" defer="defer"></script>

<script src="{{ asset('public/assets/diamond_page.js') }}" defer="defer"></script>



<script>

    document.addEventListener("DOMContentLoaded", function() {

        const headings = document.querySelectorAll("h1");

        headings.forEach((heading) => {

            if (heading.textContent.trim() === "Diamond Product") {

                heading.style.display = "none";

            }

        });

    });

</script>



<div id="page-loader" class="loader-overlay">

    <div class="loader"></div>

</div>

<style>

    #carat_from,

#carat_to{

    width:100px;

    height:32px;

    border:1px solid #ccc;

    border-radius:4px;

    padding:5px 8px;

    background:#fff;

    text-align:left;

}

input#carat_from, input#carat_to {

    border: 1px solid #000;

    padding: 5px;

    font-size: 14px;

    width: 100px;

}

.slider-input{

    display:flex;

    justify-content:space-between;

    margin-top:10px;

}



#AlphabetShapes {

    display: none;

}



.boxShapeType {

    display: flex;

    gap: 10px;

    margin: 20px 0;

    flex-wrap: wrap;

}



/* Hide default radio */

.boxShapeType input[type="radio"] {

    display: none;

}



/* Label styling */

.shape-btn {

    padding: 12px 10px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 16px !IMPORTANT;

    transition: 0.3s ease;

    background: #fff;

    user-select: none;

    margin: 0;

    letter-spacing: normal;

    font-family: 'Inter';

    font-weight: 400 !IMPORTANT;

    width: fit-content

}



/* Hover effect */

.shape-btn:hover {

    border-color: #333;

}



/* Selected state */

/* .boxShapeType input[type="radio"]:checked+label { color: #000; border-color: #000; } */

.box-tab h2 {

    font-family: Cormorant !important;

    text-align: left;

    color: #000;

    font-size: 20px !important;

    border-bottom: 1px solid #000;

    width: fit-content;

    padding: 0px !important;

    letter-spacing: 1.05px;

    text-transform: uppercase;

    margin: 0px;

}



/* MOBILE FILTER STYLE */

@media(max-width:991px) {

    .shape-btn {

        padding: 12px 8px !important;

        font-size: 14px !important;

    }



    .box-tab {

        padding: 15px;

        padding-top: 0;

    }



    #search_div {

        z-index: 999999;

    }



    .filter-sidebar {

        position: fixed;

        top: 0;

        left: -420px;

        max-width: 400px;

        width: 100%;

        height: 100vh;

        overflow: auto;

        z-index: 1050;

        border-radius: 0;

        background: #fff;

    }



    .filter-sidebar.active {

        left: 0;

    }

}



/* OVERLAY */

.filter-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.5);

    z-index: 1040;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s;

}



.filter-overlay.active {

    opacity: 1;

    visibility: visible;

}



/* STICKY BUTTON */

.mobile-filter-sticky {

    position: fixed;

    left: 50%;

    transform: translateX(-50%);

    bottom: 20px;

    z-index: 1030;

    display: none;

}



.mobile-filter-btn {

    border: none;

    background: #000;

    color: #fff;

    padding: 14px 26px;

    border-radius: 50px;

    font-size: 16px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 10px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);

}



.close-filter {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background: #000;

    color: #fff;

    margin-bottom: 20px;

    position: relative;

    left: 88%;

    top: 10px;

}



/* MOBILE */

@media(max-width:991px) {

    .mobile-filter-sticky {

        display: block;

    }

}



</style>



<section class="Diamond_Page_Content bridia-view" id="" style="">

    <div class="container-fluid p-0">

        <div class="row custom-row">

            <div class="col-12 col-sm-12 col-md-12 col-lg-3 col-xl-3 col-xxl-3 diamond-filters-col" id="search_div" style="">

                <div class="filter-sidebar" id="filterSidebar">



                    <!-- MOBILE CLOSE -->

                    <div class="d-lg-none">

                        <button class="close-filter" id="closeFilter">

                            <i class="fa-solid fa-xmark"></i>

                        </button>

                    </div>

                    <div class="custom-container">

                        {{-- <span id="close" class="close-btn">&times;</span> <!-- Close Button --> --}}

                        <div class=" ">

                            <div class="left_diamond_container cus_filter_block">

                                <form action="javascript:void(0)" method="post" id="form">

                                    <div class="box-tab">

                                        <h2>Shape Type</h2>

                                        <div class="boxShapeType">

                                            <input type="radio" id="standard" name="stonetype" value="standard" checked>

                                            <label for="standard" class="shape-btn">Regular Shape</label>

                                            <input type="radio" id="exotic" name="stonetype" value="exotic">

                                            <label for="exotic" class="shape-btn">Exotic Shape</label>

                                            <input type="radio" id="MatchingPair" name="stonetype" value="MatchingPair">

                                            <label for="MatchingPair" class="shape-btn">Matching Pair</label>

                                        </div>

                                    </div>

                                    <div class="filter">

                                        <input type="hidden" name="is_fancy" id="is_fancy" value="0">

                                        <input type="hidden" name="sortBy" id="sortBy" value="">

                                        <input type="hidden" name="order" id="order" value="">

                                        <input type="hidden" name="perPage" id="perPage" value="">





                                        <!-- --------------DIAMOND SHAPE START----------------- -->

                                        <div class="diamond_shape cus_com_filter_block" id="standardshape">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Diamond Shape</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="tps_inputrange_shape">

                                                    <ul class="tps_diamond_shapes shapes-display" id="tps_diamond_shapes">

                                                        <li class="idshaperound ">

                                                            <label for="idshaperound">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperound" value="Round">

                                                                <div class="img_shape round">

                                                                    <img src="{{ asset('public/assets/round.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Round</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeprinces">

                                                            <label for="idshapeprinces">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeprinces" value="PRINCESS">

                                                                <div class="img_shape princess">

                                                                    <img src="{{ asset('public/assets/princess.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Princess</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecushion">

                                                            <label for="idshapecushion">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecushion" value="CUSHION">

                                                                <div class="img_shape cushion">

                                                                    <img src="{{ asset('public/assets/cushion.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Cushion</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeemerald">

                                                            <label for="idshapeemerald">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeemerald" value="EMERALD">

                                                                <div class="img_shape emerald">

                                                                    <img src="{{ asset('public/assets/emerald.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Emerald</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeoval">

                                                            <label for="idshapeoval">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeoval" value="OVAL">

                                                                <div class="img_shape oval">

                                                                    <img src="{{ asset('public/assets/oval.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Oval</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperadiant">

                                                            <label for="idshaperadiant">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperadiant" value="RADIANT">

                                                                <div class="img_shape radiant">

                                                                    <img src="{{ asset('public/assets/radiant.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape text-shape-2">Radiant</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeasscher">

                                                            <label for="idshapeasscher">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeasscher" value="ASSCHER">

                                                                <div class="img_shape asscher">

                                                                    <img src="{{ asset('public/assets/asscher.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape text-shape-2">Asscher</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapemarquise">

                                                            <label for="idshapemarquise">

                                                                <input type="checkbox" name="checkbox[]" id="idshapemarquise" value="MARQUISE">

                                                                <div class="img_shape marquies">

                                                                    <img src="{{ asset('public/assets/marquise.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape text-shape-2">Marquise</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeheart">

                                                            <label for="idshapeheart">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeheart" value="HEART">

                                                                <div class="img_shape heart">

                                                                    <img src="{{ asset('public/assets/heart.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape text-shape-2">Heart</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapepear">

                                                            <label for="idshapepear">

                                                                <input type="checkbox" name="checkbox[]" id="idshapepear" value="PEAR">

                                                                <div class="img_shape pear">

                                                                    <img src="{{ asset('public/assets/pear.png') }}" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape text-shape-2">Pear</div>

                                                            </label>

                                                        </li>

                                                    </ul>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------DIAMOND SHAPE END----------------- -->

                                        <!-- --------------ExoticDIAMOND SHAPE START----------------- -->

                                        <div class="diamond_shape cus_com_filter_block" id="exoticshape">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Diamond Shapes</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="tps_inputrange_shape">

                                                    <ul class="tps_diamond_shapes shapes-display" id="tps_diamond_shapes">

                                                        <li class="idshapealphabet">

                                                            <label for="idshapealphabet">

                                                                <input type="checkbox" name="checkbox[]" id="idshapealphabet" value="Alphabet">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/alphabet.png?v=1777628344" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Alphabet</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeangel">

                                                            <label for="idshapeangel">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeangel" value="Angel">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/angel.png?v=1777628357" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Angel</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebat">

                                                            <label for="idshapebat">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebat" value="Bat">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/bat.png?v=1777628360" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Bat</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebone">

                                                            <label for="idshapebone">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebone" value="Bone">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/bone.png?v=1777628364" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Bone</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebull">

                                                            <label for="idshapebull">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebull" value="Bull">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/bull.png?v=1777628368" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Bull</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebutterfly">

                                                            <label for="idshapebutterfly">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebutterfly" value="Butterfly">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/butterfly.png?v=1777628371" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Butterfly</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecat">

                                                            <label for="idshapecat">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecat" value="Cat">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/cat.png?v=1777628374" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Cat</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapechristmas">

                                                            <label for="idshapechristmas">

                                                                <input type="checkbox" name="checkbox[]" id="idshapechristmas" value="Christmas Tree">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/christmas_tree.png?v=1777628378" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Christmas Tree</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecross">

                                                            <label for="idshapecross">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecross" value="Cross">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/cross.png?v=1777628381" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Cross</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapedog">

                                                            <label for="idshapedog">

                                                                <input type="checkbox" name="checkbox[]" id="idshapedog" value="Dog">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/dog.png?v=1777628383" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Dog</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeduck">

                                                            <label for="idshapeduck">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeduck" value="Duck">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/duck.png?v=1777628386" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Duck</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeeuro">

                                                            <label for="idshapeeuro">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeeuro" value="Euro">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/euro_cut.png?v=1777631038" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Euro Cut</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapefire">

                                                            <label for="idshapefire">

                                                                <input type="checkbox" name="checkbox[]" id="idshapefire" value="Fire">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/fire.png?v=1777628391" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Fire</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapegun">

                                                            <label for="idshapegun">

                                                                <input type="checkbox" name="checkbox[]" id="idshapegun" value="Gun">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/gun.png?v=1777628395" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Gun</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapehorse">

                                                            <label for="idshapehorse">

                                                                <input type="checkbox" name="checkbox[]" id="idshapehorse" value="Horse">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/horse.png?v=1777628397" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Horse</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapelike">

                                                            <label for="idshapelike">

                                                                <input type="checkbox" name="checkbox[]" id="idshapelike" value="Like">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/like.png?v=1777628400" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Like</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapelips">

                                                            <label for="idshapelips">

                                                                <input type="checkbox" name="checkbox[]" id="idshapelips" value="Lips">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/lips.png?v=1777628403" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Lips</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapemickey">

                                                            <label for="idshapemickey">

                                                                <input type="checkbox" name="checkbox[]" id="idshapemickey" value="Mickey">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/mickey.png?v=1777628407" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Mickey</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapenumber">

                                                            <label for="idshapenumber">

                                                                <input type="checkbox" name="checkbox[]" id="idshapenumber" value="Number">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/number.png?v=1777628409" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Number</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperabbit">

                                                            <label for="idshaperabbit">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperabbit" value="Rabbit">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/rabbit.png?v=1777628413" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Rabbit</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeteddy">

                                                            <label for="idshapeteddy">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeteddy" value="Teddy">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/teddy_bear.png?v=1777628415" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Teddy Bear</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapetrump">

                                                            <label for="idshapetrump">

                                                                <input type="checkbox" name="checkbox[]" id="idshapetrump" value="Trump">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/trump.png?v=1777628418" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Trump</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebird">

                                                            <label for="idshapebird">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebird" value="Bird">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/bird.png?v=1777628422" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Bird</div>

                                                            </label>

                                                        </li>



                                                        <li class="idshapeother">

                                                            <label for="idshapeother">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeother" value="OTHER">

                                                                <div class="img_shape princess">

                                                                    <img src="{{ asset('public/assets/other.png') }}" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Other</div>

                                                            </label>

                                                        </li>

                                                    </ul>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------ExoticDIAMOND SHAPE END----------------- -->

                                        <!-- --------------ExoticDIAMOND SHAPE START----------------- -->

                                        <div class="diamond_shape cus_com_filter_block" id="matchingshape" style="display:none;">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Diamond Shapes</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="tps_inputrange_shape">

                                                    <ul class="tps_diamond_shapes shapes-display" id="tps_diamond_shapes">

                                                        <li class="idshapebullet">

                                                            <label for="idshapebullet">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebullet" value="Bullet">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/bullet.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Bullet</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapebutterfly">

                                                            <label for="idshapebutterfly">

                                                                <input type="checkbox" name="checkbox[]" id="idshapebutterfly" value="Butterfly">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/butterfly_5754d68f-2808-4c2a-aaab-95a1e728821e.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Butterfly</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecadillac">

                                                            <label for="idshapecadillac">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecadillac" value="Cadillac">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/cadillacmp.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Cadillac</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecalf">

                                                            <label for="idshapecalf">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecalf" value="CALFS">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/calfs.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Calf Head</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecolorround">

                                                            <label for="idshapecolorround">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecolorround" value="Color-Round">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/round2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Color Round</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecushionlong">

                                                            <label for="idshapecushionlong">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecushionlong" value="Cushion-Long">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/cushion2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Cushion Long</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapecushionsq">

                                                            <label for="idshapecushionsq">

                                                                <input type="checkbox" name="checkbox[]" id="idshapecushionsq" value="Cushion-Sq">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/cushion2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Cushion Square</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapedutchmarquise">

                                                            <label for="idshapedutchmarquise">

                                                                <input type="checkbox" name="checkbox[]" id="idshapedutchmarquise" value="Dutch">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/marquise2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Dutch Marquise</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeemerald">

                                                            <label for="idshapeemerald">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeemerald" value="Emerald">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/emerald2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Emerald</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeflower">

                                                            <label for="idshapeflower">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeflower" value="Flower">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/flower.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Flower</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapefrenchbaguette">

                                                            <label for="idshapefrenchbaguette">

                                                                <input type="checkbox" name="checkbox[]" id="idshapefrenchbaguette" value="French Baguette">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/straight.bag.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">French Baguette</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapefrenchtrapezoid">

                                                            <label for="idshapefrenchtrapezoid">

                                                                <input type="checkbox" name="checkbox[]" id="idshapefrenchtrapezoid" value="French Trapezoid">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/trapezoid_brilliant_cut.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">French Trapezoid</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapehalfmoon">

                                                            <label for="idshapehalfmoon">

                                                                <input type="checkbox" name="checkbox[]" id="idshapehalfmoon" value="Half Moon">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/Half-Moon-Brilliant-Cut.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Half Moon</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapehalfmoonstep">

                                                            <label for="idshapehalfmoonstep">

                                                                <input type="checkbox" name="checkbox[]" id="idshapehalfmoonstep" value="Half Moon Step">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/half_moon_step_cut.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Half Moon Step</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeheart">

                                                            <label for="idshapeheart">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeheart" value="Heart">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/heart2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Heart</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapehexagonal">

                                                            <label for="idshapehexagonal">

                                                                <input type="checkbox" name="checkbox[]" id="idshapehexagonal" value="Hexagonal">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/hexagon.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Hexagonal</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapekite">

                                                            <label for="idshapekite">

                                                                <input type="checkbox" name="checkbox[]" id="idshapekite" value="Kite">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/kite.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Kite</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapekitestep">

                                                            <label for="idshapekitestep">

                                                                <input type="checkbox" name="checkbox[]" id="idshapekitestep" value="Kite Step">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/kite.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Kite Step</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapelily">

                                                            <label for="idshapelily">

                                                                <input type="checkbox" name="checkbox[]" id="idshapelily" value="Lily">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/lilly.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Lily</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapemarquise">

                                                            <label for="idshapemarquise">

                                                                <input type="checkbox" name="checkbox[]" id="idshapemarquise" value="Marquise">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/marquise2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Marquise</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeoval">

                                                            <label for="idshapeoval">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeoval" value="Oval">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/oval2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Oval</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeovalstep">

                                                            <label for="idshapeovalstep">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeovalstep" value="Oval Step">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/oval-step.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Oval Step</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapepear">

                                                            <label for="idshapepear">

                                                                <input type="checkbox" name="checkbox[]" id="idshapepear" value="Pear">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/pear2.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Pear</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeportuguesecut">

                                                            <label for="idshapeportuguesecut">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeportuguesecut" value="Portuguese Cut">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/old-european.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Portuguese Cut</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeprincess">

                                                            <label for="idshapeprincess">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeprincess" value="Princess">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/princess2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Princess</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperadiant">

                                                            <label for="idshaperadiant">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperadiant" value="Radiant">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/radiant2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Radiant</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperadiantlong">

                                                            <label for="idshaperadiantlong">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperadiantlong" value="Radiant Long">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/radiant2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Radiant Long</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound">

                                                            <label for="idshaperound">

                                                                <input type="checkbox" name="checkbox[]" id="idshaperound" value="Round">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/round2.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Round</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapeshield">

                                                            <label for="idshapeshield">

                                                                <input type="checkbox" name="checkbox[]" id="idshapeshield" value="Shield">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/shield.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Shield</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapestar">

                                                            <label for="idshapestar">

                                                                <input type="checkbox" name="checkbox[]" id="idshapestar" value="Star">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/star.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Star</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapetrapezoid">

                                                            <label for="idshapetrapezoid">

                                                                <input type="checkbox" name="checkbox[]" id="idshapetrapezoid" value="Trapezoid">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/trapezoid_brilliant_cut.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Trapezoid</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapetrapezoidstep">

                                                            <label for="idshapetrapezoidstep">

                                                                <input type="checkbox" name="checkbox[]" id="idshapetrapezoidstep" value="Trapezoid Step">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/trapezoid_brilliant_cut.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Trapezoid Step</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapetriangle">

                                                            <label for="idshapetriangle">

                                                                <input type="checkbox" name="checkbox[]" id="idshapetriangle" value="Triangle">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/triangle.png?v=1778061668" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Triangle</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshapetrillion">

                                                            <label for="idshapetrillion">

                                                                <input type="checkbox" name="checkbox[]" id="idshapetrillion" value="Trillion">

                                                                <div class="img_shape round">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/trillion.png?v=1778061667" class="whit-img img-fluid width_new" alt="img">

                                                                </div>

                                                                <div class="text_shape">Trillion</div>

                                                            </label>

                                                        </li>

                                                    </ul>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------ExoticDIAMOND SHAPE END----------------- -->

                                          <!-- --------------------COLOR  START-------------------------- -->

                                        <div class="color_range cus_com_filter_block">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Color</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="d-center-clarity">

                                                    <div class="clarity_new_design">

                                                        <div class="all_product_iscertified" style="display: none;">

                                                            <ul class="color-list list-style-none" id="carat_name">

                                                                <li class="border-box color_17">

                                                                    <input type="checkbox" name="color[]" id="col_white" value="White">

                                                                    <label for="col_white">White</label>

                                                                </li>

                                                                <li class="border-box color_18">

                                                                    <input type="checkbox" name="color[]" id="col_white_face" value="White Face Up">

                                                                    <label for="col_white_face">White Face Up</label>

                                                                </li>

                                                                <li class="border-box color_19">

                                                                    <input type="checkbox" name="color[]" id="col_v_color_l" value="Light Color">

                                                                    <label for="col_v_color_l">Light Color</label>

                                                                </li>

                                                                <li class="border-box color_20">

                                                                    <input type="checkbox" name="color[]" id="col_yellow" value="Yellow">

                                                                    <label for="col_yellow">Yellow</label>

                                                                </li>

                                                                <li class="border-box color_21">

                                                                    <input type="checkbox" name="color[]" id="col_brown" value="Brown">

                                                                    <label for="col_brown">Brown</label>

                                                                </li>

                                                                <li class="border-box color_22">

                                                                    <input type="checkbox" name="color[]" id="col_chocolate" value="Chocolate">

                                                                    <label for="col_chocolate">Chocolate/Cognac</label>

                                                                </li>

                                                                <li class="border-box color_23">

                                                                    <input type="checkbox" name="color[]" id="col_black" value="Black">

                                                                    <label for="col_black">Black</label>

                                                                </li>

                                                                <li class="border-box color_24">

                                                                    <input type="checkbox" name="color[]" id="col_blue" value="Blue">

                                                                    <label for="col_blue">Blue/Green</label>

                                                                </li>

                                                                <li class="border-box color_25">

                                                                    <input type="checkbox" name="color[]" id="col_pink" value="Pink">

                                                                    <label for="col_pink">Pink</label>

                                                                </li>

                                                            </ul>

                                                        </div>

                                                    </div>

                                                    <div class="clarity_new_design">

                                                        <div class="iscertified_color" style="display: block;">

                                                            <ul class="color-list list-style-none" id="colors" style="">

                                                                <li class="border-box color_0">

                                                                    <input type="checkbox" name="color[]" id="col_d" value="D">D

                                                                </li>

                                                                <li class="border-box color_1">

                                                                    <input type="checkbox" name="color[]" id="col_e" value="E">E

                                                                </li>

                                                                <li class="border-box color_2">

                                                                    <input type="checkbox" name="color[]" id="col_f" value="F">F

                                                                </li>

                                                                <li class="border-box color_3">

                                                                    <input type="checkbox" name="color[]" id="col_g" value="G">G

                                                                </li>

                                                                <li class="border-box color_4">

                                                                    <input type="checkbox" name="color[]" id="col_h" value="H">H

                                                                </li>

                                                            </ul>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------------COLOR  END-------------------------- -->

                                          <!-- --------------------CLARITY  START-------------------------- -->

                                        <div class="clarity_range cus_com_filter_block">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Clarity</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="d-center-clarity">

                                                    <div class="clarity_new_design">

                                                        <ul class="clarity-list list-style-none" id="carat_name">

                                                            <li class="border-box clarity_0">

                                                                <input type="checkbox" id="IF" name="clarity[]" value="IF" onchange="submitForm()">

                                                                <label for="IF">IF+</label>

                                                            </li>

                                                            <li class="border-box clarity_1">

                                                                <input type="checkbox" id="VVS1" name="clarity[]" value="VVS1" onchange="submitForm()">

                                                                <label for="VVS1">VVS1</label>

                                                            </li>

                                                            <li class="border-box clarity_2">

                                                                <input type="checkbox" id="VVS2" name="clarity[]" value="VVS2" onchange="submitForm()">

                                                                <label for="VVS2">VVS2</label>

                                                            </li>

                                                            <li class="border-box clarity_3">

                                                                <input type="checkbox" id="VS1" name="clarity[]" value="VS1" onchange="submitForm()">

                                                                <label for="VS1">VS1</label>

                                                            </li>

                                                            <li class="border-box clarity_4">

                                                                <input type="checkbox" id="VS2" name="clarity[]" value="VS2" onchange="submitForm()">

                                                                <label for="VS2">VS2</label>

                                                            </li>

                                                            <li class="border-box clarity_5">

                                                                <input type="checkbox" id="SI1" name="clarity[]" value="SI1" onchange="submitForm()">

                                                                <label for="SI1">SI1</label>

                                                            </li>

                                                            <li class="border-box clarity_6">

                                                                <input type="checkbox" id="SI2" name="clarity[]" value="SI2" onchange="submitForm()">

                                                                <label for="SI2">SI2</label>

                                                            </li>

                                                        </ul>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------DIAMOND SHAPE START----------------- -->

                                        <div class="diamond_shape cus_com_filter_block" id="FancyColor">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Fancy Color</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="tps_inputrange_shape">

                                                    <ul class="tps_diamond_shapes shapes-display" id="tps_diamond_shapes">

                                                          <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_Black" value="BLACK">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/black.png?v=1782899783" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Black</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_BLUE" value="BLUE">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0713/3708/3131/files/blue-dia.png?v=1729599577" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Blue</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_YELLOW" value="YELLOW">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0713/3708/3131/files/yellow-dia.png?v=1729599577" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Yellow</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_PINK" value="PINK">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0713/3708/3131/files/pink-dia.png?v=1729599577" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Pink</div>

                                                            </label>

                                                        </li>

                                                         <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_purple" value="PURPLE">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/purple.png?v=1782899815" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Purple</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_BROWN" value="BROWN">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0713/3708/3131/files/brown-dia.png?v=1729599577" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Brown</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_Champagne" value="CHAMPAGNE">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/champagne.png?v=1782899830" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Champagne</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_ORANGE" value="ORANGE">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0713/3708/3131/files/orange-dia.png?v=1729599577" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Orange</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_GREEN" value="GREEN">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/green-dia.png?v=1777464604" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Green</div>

                                                            </label>

                                                        </li>

                                                        <li class="idshaperound1">

                                                            <label for="idshaperound1">

                                                                <input type="checkbox" name="color[]" id="col_OTHER" value="OTHER">

                                                                <div class="img_shape round1">

                                                                    <img src="https://cdn.shopify.com/s/files/1/0665/9060/5610/files/other_e25ee314-7f3f-4e35-86b1-39be79194dea.png?v=1782899849" class="whit-img img-fluid width_new" alt="Affordable Lab-Grown Diamonds - Ethical & Beautiful">

                                                                </div>

                                                                <div class="text_shape">Other</div>

                                                            </label>

                                                        </li>

                                                    </ul>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- --------------DIAMOND SHAPE END----------------- -->

                                    

                                        <!-- --------------Exotic shape START----------------- -->

                                        <div class="exotic-shape carat cus_com_filter_block" id="AlphabetShapes">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Exotic Shapes</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="d-center-clarity">

                                                    <div class="clarity_new_design">

                                                        <ul class="cut-list list-style-none" id="carat_name">

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-a" value="ALPHABET A">

                                                                <label for="alphabet-a">A</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-b" value="ALPHABET B">

                                                                <label for="alphabet-b">B</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-c" value="ALPHABET C">

                                                                <label for="alphabet-c">C</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-d" value="ALPHABET D">

                                                                <label for="alphabet-d">D</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-e" value="ALPHABET E">

                                                                <label for="alphabet-e">E</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-f" value="ALPHABET F">

                                                                <label for="alphabet-f">F</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-g" value="ALPHABET G">

                                                                <label for="alphabet-g">G</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-h" value="ALPHABET H">

                                                                <label for="alphabet-h">H</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-i" value="ALPHABET I">

                                                                <label for="alphabet-i">I</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-j" value="ALPHABET J">

                                                                <label for="alphabet-j">J</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-k" value="ALPHABET K">

                                                                <label for="alphabet-k">K</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-l" value="ALPHABET L">

                                                                <label for="alphabet-l">L</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-m" value="ALPHABET M">

                                                                <label for="alphabet-m">M</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-n" value="ALPHABET N">

                                                                <label for="alphabet-n">N</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-o" value="ALPHABET O">

                                                                <label for="alphabet-o">O</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-p" value="ALPHABET P">

                                                                <label for="alphabet-p">P</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-q" value="ALPHABET Q">

                                                                <label for="alphabet-q">Q</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-r" value="ALPHABET R">

                                                                <label for="alphabet-r">R</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-s" value="ALPHABET S">

                                                                <label for="alphabet-s">S</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-t" value="ALPHABET T">

                                                                <label for="alphabet-t">T</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-u" value="ALPHABET U">

                                                                <label for="alphabet-u">U</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-v" value="ALPHABET V">

                                                                <label for="alphabet-v">V</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-w" value="ALPHABET W">

                                                                <label for="alphabet-w">W</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-x" value="ALPHABET X">

                                                                <label for="alphabet-x">X</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-y" value="ALPHABET Y">

                                                                <label for="alphabet-y">Y</label>

                                                            </li>

                                                            <li class="border-box">

                                                                <input type="checkbox" name="checkbox[]" id="alphabet-z" value="ALPHABET Z">

                                                                <label for="alphabet-z">Z</label>

                                                            </li>

                                                        </ul>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                        <!-- -------------Exotic shape END----------------- -->

                                         <!-- --------CARAT RANGE START-------- -->

<div class="carat_range cus_com_filter_block">

    <button class="accordion">

        <div class="label_div">

            <label class="tx-center">Carat</label>

        </div>

    </button>



    <div class="panel">

        <div class="d-center">

            <div class="range_group diamond-range-slider">



                <input type="text" id="carat_slider" name="carat">



                <div class="slider-input d-flex">



                    <input type="text"

                           id="carat_from"

                           name="carat_from"

                           value="{{ request('carat_from') }}"

                           class="pull-left text-design">



                    <input type="text"

                           id="carat_to"

                           name="carat_to"

                           value="{{ request('carat_to') }}"

                           class="pull-right text-design">



                </div>



            </div>

        </div>

    </div>

</div>



                                         

                                        <!-- --------PRICE- START------------------------ -->

                                        <div class="price_range cus_com_filter_block">

                                            <button class="accordion">

                                                <div class="label_div">

                                                    <label class="tx-center">Price</label>

                                                </div>

                                            </button>

                                            <div class="panel">

                                                <div class="d-center">

                                                    <div class="range_group diamond-range-slider">

                                                        <input type="text" id="price_slider" value="" name="price">

                                                        <div class="slider-input d-flex">

                                                            <input type="text"

                                                                id="price_from"

                                                                name="price_from"

                                                                value="{{ request('price_from') }}"

                                                                onkeyup="setSliderFromTo()"

                                                                class="pull-left text-design">



                                                            <input type="text"

                                                                id="price_to"

                                                                name="price_to"

                                                                value="{{ request('price_to') }}"

                                                                onkeyup="setSliderFromTo()"

                                                                class="pull-right text-design">

                                                               </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>                                      

                                    </div>

                                </div>

                            </form>

                        </div>

                    </div>

                </div>



                <button class="btn btn-info-reset" type="button" onclick="resetPage()">

                    <i class="fa fa-undo"></i>

                    Reset

                </button>



                <script>

                function resetPage() {

                    window.location.href = window.location.origin + window.location.pathname;

                }

                </script>

            </div>

            <div class="col-12 col-sm-12 col-md-12 col-lg-9 col-xl-9 col-xxl-9">

                <div class="right_diamond_container cus_data_block">

                    <div class="">

                        <div class="d-flex justify-content-center align-items-center quantity-search mb-15">

                            <div class="stock_search d-flex justify-content-center align-items-center">

                                <label for="stock">Stock#/Cert#</label>

                                <input placeholder="Search here" type="text" id="stock" class="form-control" value="" name="stock" onkeyup="submitForm()">

                            </div>

                            <div class="sort-wrapper">

                                <label for="sort">Sort By</label>

                                <div class="custom-select-sort">

                                    <select id="sortBySelect">

                                        <option value="">Select Option</option>

                                        <option value="carat-low-high" selected>Carat: Low to High</option>

                                        <option value="carat-high-low">Carat: High to Low</option>

                                        <option value="price-low-high">Price: Low to High</option>

                                        <option value="price-high-low">Price: High to Low</option>

                                    </select>

                                </div>

                            </div>

                            <div class="sort-wrapper">

                                <label for="sort">Show Quantity</label>

                                <div class="custom-select-sort">

                                    <select id="perPageSelect">

                                        <option value="">Select Option</option>

                                        <option value="12">12</option>

                                        <option value="24">24</option>

                                        <option value="48">48</option>

                                        <option value="96">96</option>

                                    </select>

                                </div>

                            </div>

                            <p><strong id="stone_found"></strong> Stones Found</p>

                            <div class="grid-list">

                                <i class="fa fa-list active" title="List View" data-toggle="tooltip" id="view_as_list_icon">

                                    <input type="checkbox" name="view_as[]" class="view_as" value="list" id="view_as_list">

                                </i>

                                <i class="fa fa-th" title="Image View" data-toggle="tooltip" id="view_as_grid_icon">

                                    <input type="checkbox" name="view_as[]" class="view_as" value="grid" id="view_as_grid">

                                </i>

                            </div>

                        </div>

                    </div>

                    <div class="table-responsive">

                        <div id="list_diamond">

                            <div class="table-responsive">

                                <table id="example" class=" table-bordered table-responsive table-hover table-condensed js-basic-example1 dataTable" style="width:100%;">

                                    <thead class="">

                                        <tr class="bg_color" style="color:#000; background:#1c4362;">

                                            <th id="" class="">View</th>

                                            <th id="shape" class="sorting">Shapes</th>

                                            <th id="weight" class="sorting">Cts</th>

                                            <th id="color" class="sorting">Color</th>

                                            <th id="clarity" class="sorting">Clarity</th>

                                            {{-- <th id="cut" class="sorting">Cut</th> --}}

                                            <th id="cash_price" class="sorting">Amount</th>

                                            <!-- <th id="lab" class="sorting">Lab</th> -->

                                            <th id="" class="">Action</th>

                                            <th id="" class="">Cart</th>

                                        </tr>

                                    </thead>

                                    <tbody id="add_data" style=""></tbody>

                                </table>
                                 <div id="data-message" style="display:none;"></div>       
                            </div>

                        </div>

                        <div id="grid_diamond" class="d-flex"> </div>

                        <nav aria-label="Page navigation" id="pagination" class="pagination_links">

                            <ul class="pagination" id="pagination_links"> </ul>

                        </nav>

                        {{-- <div id="footer-container">

                            <div id="Popup">

                                <div class="Container" id="filter_div">

                                    <div id="tmp">

                                        <span id="close">X</span>

                                    </div>

                                </div>

                            </div>

                            <div id="footer">

                                <span id="FooterLink">Filters</span>

                            </div>

                        </div> --}}

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>



{{-- <div id="footer-container">

    <div id="Popup">

        <div class="Container" id="filter_div">

            <div id="tmp">

                <span id="close">X</span>

            </div>

        </div>

    </div>

    <div id="footer">

        <span id="FooterLink">Filters</span>

    </div>

</div> --}}



<!-- OVERLAY -->

<div class="filter-overlay" id="filterOverlay"></div>



<!-- STICKY MOBILE BUTTON -->

<div class="mobile-filter-sticky">

    <button class="mobile-filter-btn" id="openFilter"> <i class="fa-solid fa-filter"></i> Filters </button>

</div>



<script>

    // Select all checkboxes within the #carat_name list

    const checkboxes = document.querySelectorAll('#carat_name input[type="checkbox"]');



    checkboxes.forEach((checkbox) => {

        checkbox.addEventListener('change', function() {

            // Toggle 'active-label' class on the parent <li> based on checked status

            const parentLi = this.closest('li');

            if (this.checked) {

                parentLi.classList.add('active-label');

            } else {

                parentLi.classList.remove('active-label');

            }

        });

    });

    // Select all radio buttons within the #carat_name list

    const radioButtons = document.querySelectorAll('#carat_name input[type="radio"]');



    radioButtons.forEach((radioButton) => {

        radioButton.addEventListener('change', function() {

            // Remove 'active-label' class from all list items

            const listItems = document.querySelectorAll('#carat_name li');

            listItems.forEach((item) => {

                item.classList.remove('active-label');

            });



            // Add 'active-label' class to the parent <li> of the selected radio button

            if (this.checked) {

                this.closest('li').classList.add('active-label');

            }

        });

    });

</script>

<script>

    document.addEventListener("DOMContentLoaded", function() {

        // URL parameters

        const urlParams = new URLSearchParams(window.location.search);

        const shapeParam = urlParams.get('Shape'); // Shape query parameter



        // Declare shapes object (used throughout the script)

        const shapes = {

            'Round': {

                id: 'idshaperound',

                class: 'idshaperound'

            },

            'Asscher': {

                id: 'idshapeasscher',

                class: 'idshapeasscher'

            },

            'Princess': {

                id: 'idshapeprinces',

                class: 'idshapeprinces'

            },

            'Cushion': {

                id: 'idshapecushion',

                class: 'idshapecushion'

            },

            'Cushion Square': {

                id: 'idshapecushion',

                class: 'idshapecushion'

            },

            'Emerald': {

                id: 'idshapeemerald',

                class: 'idshapeemerald'

            },

            'Oval': {

                id: 'idshapeoval',

                class: 'idshapeoval'

            },

            'Radiant': {

                id: 'idshaperadiant',

                class: 'idshaperadiant'

            },

            'Marquise': {

                id: 'idshapemarquise',

                class: 'idshapemarquise'

            },

            'Heart': {

                id: 'idshapeheart',

                class: 'idshapeheart'

            },

            'Pear': {

                id: 'idshapepear',

                class: 'idshapepear'

            },

            'Elongated': {

                id: 'idshapeelongated',

                class: 'idshapeelongated'

            },

            'Eminecut': {

                id: 'idshapeminecut',

                class: 'idshapeminecut'

            },

            'Euro': {

                id: 'idshapeeuro',

                class: 'idshapeeuro'

            },

        };



        // Check Shape checkbox based on URL parameter

        if (shapeParam) {

            // Checkbox handling

            const checkbox = document.querySelector(`input[name="Shape"][value="${shapeParam}"]`);

            if (checkbox) {

                checkbox.checked = true;

            }



            // Add 'active' class and check corresponding shape element

            const shapeData = shapes[shapeParam];

            if (shapeData) {

                const shapeElement = document.getElementById(shapeData.id);

                const shapeClassElement = document.querySelector(`.${shapeData.class}`);

                if (shapeElement) {

                    shapeElement.checked = true;

                }

                if (shapeClassElement) {

                    shapeClassElement.classList.add('active');

                }

            } else {

                console.error('Shape data not found for:', shapeParam);

            }



            // Explicitly fetch data after setting the filter

            fetchDataBasedOnFilters();

        }



        // Handle carat range

        const caratFrom = urlParams.get('carat_from');

        const caratTo = urlParams.get('carat_to');



        if (caratFrom && caratTo) {

            const inputFrom = document.getElementById('range_56_input_from');

            const inputTo = document.getElementById('range_56_input_to');

            if (inputFrom && inputTo) {

                inputFrom.value = caratFrom;

                inputTo.value = caratTo;

            }



            // Update or initialize the range slider

            if ($('#range_56').data('ionRangeSlider')) {

                const slider = $('#range_56').data('ionRangeSlider');

                slider.update({

                    from: caratFrom,

                    to: caratTo

                });

            } else {

                $('#range_56').ionRangeSlider({

                    min: 0,

                    max: 20,

                    from: caratFrom,

                    to: caratTo,

                    type: 'double',

                    step: 0.1

                });

            }



            // Explicitly fetch data after range slider initialization

            fetchDataBasedOnFilters();

        }



        // Fetch data based on filters (example implementation)

        function fetchDataBasedOnFilters() {

            // This function should contain the logic to fetch and display data

            console.log("Fetching data based on filters...");



        }

    });

</script>



<script>

    // ++++++++++++++++++++Advance Search++++++++++++++++++++++++++++++++++++++++++

    function show_search() {

        event.preventDefault();



        // Stop event propagation

        event.stopPropagation();

        $("#more_filter").slideDown("3000");

        $(".hide_show").html(

            '<a href="javascript:void(0)" class=""><span class="" onclick="hide_search()" id="hide_advance"><i class="plus-toggle fa fa-minus"> </i> Hide Advance Filter</span></a>'

        );

    }



    function hide_search() {

        $("#more_filter").slideUp("3000");

        $(".hide_show").html(

            '<a href="javascript:void(0)" class=""><span class="" onclick="show_search()" id="show_advance"><i class="plus-toggle fa fa-plus"> </i> Show Advance Filter</span></a>'

        );

    }





    $(document).ready(function() {

        // Open popup and disable background scroll

        $('#FooterLink').click(function() {

            document.querySelector(".custom-container").classList.add("open");

        });



        // Close popup and enable background scroll

        $('#close').click(function() {

            $('#Popup').css('bottom', '-100%'); // Slide popup down

            document.querySelector(".custom-container").classList.remove("open");

            $("#filter_div").hide(); // Hide filter content

            $('body').removeClass('no-scroll'); // Enable body scroll

        });

    });

</script>



<script>

    document.addEventListener('DOMContentLoaded', () => {

    // Get the elements

    const popup = document.getElementById('open');

    const openPopupBtn = document.getElementById('FooterLink');

    const closePopupBtn = document.getElementById('close');

    const body = document.body;



    // Stop if required elements don't exist

    if (!popup) {

        console.warn('Popup element (#open) not found.');

        return;

    }



    // Show the popup

    if (openPopupBtn) {

        openPopupBtn.addEventListener('click', (e) => {

            e.preventDefault(); // Prevent link navigation if FooterLink is an <a>

            body.classList.add('filter-overlay');

            popup.style.display = 'block';

        });

    } else {

        console.warn('Open button (#FooterLink) not found.');

    }



    // Hide the popup

    if (closePopupBtn) {

        closePopupBtn.addEventListener('click', () => {

            body.classList.remove('filter-overlay');

            popup.style.display = 'none';

        });

    } else {

        console.warn('Close button (#close) not found.');

    }



    // Close popup when clicking outside it

    body.addEventListener('click', (event) => {

        if (

            popup.style.display === 'block' &&

            event.target === body

        ) {

            body.classList.remove('filter-overlay');

            popup.style.display = 'none';

        }

    });



    // Prevent clicks inside the popup from closing it

    popup.addEventListener('click', (event) => {

        event.stopPropagation();

    });

});

    // // Get the elements

    // const popup = document.getElementById('open');

    // const openPopupBtn = document.getElementById('FooterLink');

    // const closePopupBtn = document.getElementById('close');

    // const body = document.body;



    // // Show the popup and add the overlay class to the body when the button is clicked

    // openPopupBtn.addEventListener('click', () => {

    //     body.classList.add('filter-overlay'); // Add overlay class to the body

    //     popup.style.display = 'block'; // Show the popup

    // });



    // // Hide the popup and remove the overlay class when the close button is clicked

    // closePopupBtn.addEventListener('click', () => {

    //     body.classList.remove('filter-overlay'); // Remove overlay class from the body

    //     popup.style.display = 'none'; // Hide the popup

    // });



    // // Optionally, you could close the popup by clicking anywhere on the overlay (body)

    // body.addEventListener('click', (event) => {

    //     // Close the popup only if the click is on the body and not inside the popup

    //     if (event.target === body && popup.style.display === 'block') {

    //         body.classList.remove('filter-overlay');

    //         popup.style.display = 'none';

    //     }

    // });

    // -------------------accordian script start

    var acc = document.getElementsByClassName("accordion");

    var i;

    var customHeight = "350px"; // Set your custom max height

    var customMinHeight = "80px"; // Set your custom min height



    for (i = 0; i < acc.length; i++) {

        var panel = acc[i].nextElementSibling;



        // Set the default state to open with custom min and max height

        acc[i].classList.add("active_accrodian");

        panel.style.minHeight = customMinHeight;

        panel.style.maxHeight = customHeight;



        acc[i].addEventListener("click", function() {

            this.classList.toggle("active_accrodian");

            var panel = this.nextElementSibling;

            if (panel.style.maxHeight) {

                panel.style.maxHeight = null; // Collapse

                panel.style.minHeight = null; // Reset min-height

            } else {

                panel.style.minHeight = customMinHeight; // Ensure min-height

                panel.style.maxHeight = customHeight; // Expand to custom height

            }

        });

    }



    // -------------------------------accordian script end





    $(document).ready(function() {

        // Initially toggle visibility based on checkbox state

        toggleColorSections();



        // Event handler for checkbox click

        $('#iscertified').on('change', function() {

            toggleColorSections();

        });



        function toggleColorSections() {

            if ($('#iscertified').is(':checked')) {

                $('.iscertified_color').hide();

                $('.all_product_iscertified').show();

            } else {

                $('.iscertified_color').show();

                $('.all_product_iscertified').hide();

            }

        }

    });

</script>





    <script>



        const openFilter = document.getElementById("openFilter");

        const closeFilter = document.getElementById("closeFilter");

        const filterSidebar = document.getElementById("filterSidebar");

        const filterOverlay = document.getElementById("filterOverlay");



        openFilter.addEventListener("click", function () {



            filterSidebar.classList.add("active");

            filterOverlay.classList.add("active");



            document.body.style.overflow = "hidden";



        });



        function closeSidebar() {



            filterSidebar.classList.remove("active");

            filterOverlay.classList.remove("active");



            document.body.style.overflow = "";



        }



        closeFilter.addEventListener("click", closeSidebar);



        filterOverlay.addEventListener("click", closeSidebar);



    </script>