<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" defer=""></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" defer=""></script>
<link href="https://www.amipi.com/css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://amipi.com/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://amipi.com/slick/slick-theme.css">
<script src="<?php echo e(asset('public/assets/manage_jewelry_ajax.js')); ?>" defer="defer"></script>
<script src="<?php echo e(asset('assets/manage_diamond.js')); ?>" defer="defer"></script>


<style>
   
/*  .page-width.page-width--narrow {*/
/*    background: var(--button_background_pr) !important;*/
/*}*/
/* Adjust scrollbar height for horizontal scrollbars */
::-webkit-scrollbar {
  height: 5px; /* Adjust height of horizontal scrollbar */
  width: 8px; /* Adjust width of vertical scrollbar */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.container{max-width:1600px;margin:auto;width:100%}
.slider_shape {
    display: flex;
    overflow-y: auto;
    overflow-x: visible !important;
    height: 53px;
}
.slider_shape li {
    display: flex !important;
    flex: 0 0 23%;
    margin-right: 8px;
    /* padding: 16px; */
}
.quality.shape-caros.m-20 li p.tool-hover {
    display: block;
    position: absolute;
    background: #f1f1f1;
    left: 0;
    bottom: -10px;
    font-size: 11px;
    padding: 4px 7px !important;
    color: #2c3b5b;
    border-radius: 5px;
    right: 0;
}
.main {
  font-family:Arial;
  width:500px;
  display:block;
  margin:0 auto;
}

.action{
  display:block;
  margin:100px auto;
  width:100%;
  text-align:center;
}
.action a {
  display:inline-block;
  padding:5px 10px; 
  background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
  text-decoration:none;
  border-radius:5px;
}
.action a:hover{
  background:#000;
}
div#grid_diamond {
    display: flex;
    flex-wrap: wrap;
}

p.product-description__title a{color:var(--heading_color) !important}
.shape-caros h3{color:var(--text_color_pr) !important}
.product-description ul.list-inline.slider_shape li:hover{border-color:var(--border_color_pr) !important}
.quality.shape-caros.m-20 label{color:var(--text_color_pr) !important}
.stud-subtitle{color:var(--text_color_pr) !important}
.studlistscroll p{color:var(--text_color_pr) !important}
.product-description__price p{color:var(--text_color_pr) !important;text-decoration:none}
.product-description__price a{text-decoration:none}
.img-text-earth span{color:var(--text_color_pr) !important}
.product-description__price p{color:var(--text_color_pr) !important}
.product-description-variation-details.d-flex p{color:var(--text_color_pr) !important}

   #ProductListTable .prod-list-block{height:auto !important}
   .prod-list-block.product_card {
    margin: 15px;
}
   .quality.shape-caros.m-20 label{width:auto !important}
   label{color:#000 !important}
   .quality.shape-caros.m-20 li.active p.tool-hover, .metal-type-detail li.slick-current p.tool-hover, .metal-type-detail li:hover p.tool-hover{background:red !important;color:#FFF !important}
   .product-description .list-inline{margin:0 !important;padding:0 !important}
   .col-xs-12.col-sm-12.product-description__price {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding:7px 15px
   }
   .product_col.col-sm-3.studz {
    padding-bottom: 20px;
    margin: auto;
}
.stud-action-filter ul.action.product-d-action .common-btn{padding:0;margin:0}
.product-description{padding: 15px;}
   .img-text-earth svg {
   width: 30px !important;
   margin-right: 8px;
   height: 30px;
   }
   .col-xs-12.col-sm-12.product-description-variation-details.d-flex.justify-space-between.c_stud_product-description-variation-details {
   padding: 7px 15px;
   font-size: 14px;
   }
   .stud-action-filter {
    padding: 7px 15px;
}
p.product-description__title{height:40px}

.prod-img.product_thumb img {
    height: 350px;
    flex: auto;
}
.stud-action-filter ul.action.product-d-action {
    padding: 0 !important;
}
   /* filter */
   .filter-diamond-design {
    margin-bottom: 25px;
}
.top-filter-btn {
    position: relative;
}
.top-filter-btn .btn-group.btn-group-justified {
    width: auto;
}
p.blank-space{margin:0 ;
background: #FFF; }
.top-filter-btn .btn-group {
    border: 1px solid var(--border_color_pr) !important;
    background: #FFF;
}
.top-filter-btn .btn-group label.active {
    background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
}
.top-filter-btn .btn-group label {
    font-size: 15px !important;
    line-height: 35px !important;
    margin-bottom: 0 !important;
    border: 0;
    color: var(--text_color_pr) !important;
    background: transparent !important;
    padding: 2px 10px;
}
/* .top-filter-btn .btn-group label input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
} */
.filter input {
   color: var(--text_color_pr) !important;
    height: 32px;
    border-radius: 0px;
    padding: 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    width: 110px;
    margin-top: 5px;
    text-align: center;
    position: relative;
}
.top-filter-btn .btn-group label.active {
    background: var(--button_background_pr) !important;
    color: var(--button_text_color_pr) !important;
    font-size: 15px !important;
    line-height: 35px !important;
    font-weight: 400;
}
.top-filter-btn .ico svg {
    width: 40px;
    height: 40px;
}
.metal-stud-filter label {
    list-style: none;
    width: 16.66%;
    text-align: center;
    margin: 0 15px 0 0;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    width: 100%;
    padding: 0;
    line-height: 33px;
}
.studs-filter.width-1440 .metal-stud-filter label.active {
    color: #2c3b5b !important;
    font-size: 16px !important;
    box-shadow: 2px 5px 10px rgba(35, 31, 32, 60%);
    font-weight: 400;
    border: 1px solid #2c3b5b !important;
}
.prod-img.product_thumb img{margin:auto !important}

</style>
<form action="javascript:void(0)" method="post" id="form">
<div class="filter-diamond-design">
   <div class="row align-items-center">
      <div class="col-sm-7 col-md-7 col-lg-7 col-xl-7 col-xxl-7">
         <div class="search_filter_cut tps_filter row padding-tb ">
            <div class="col-sm-12 col-md-12 col-lg-6 col-12 custom_colum_width">
               <div class="top-filter-btn">
                  <div class="btn-group btn-group-justified">
                     <label class="btn btn-primary button_background button_text_color active" onclick="DiaSelectedElementChk('dia_type-1');" for="dia_type-1"  id="Label-dia_type-1">
                        <input type="radio" name="dia_type" id="dia_type-1" value="1" onchange="submitForm()"  checked="">
                        <span class="ico">
                           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792" xml:space="preserve">
                              <path d="M301.015 433.458c-11.036-10.17-21.786-20.055-32.525-29.952a86359.413 86359.413 0 0 1-56.255-51.893c-22.742-21.003-45.48-42.012-68.214-63.023a38034.581 38034.581 0 0 0-74.354-68.428c-2.063-1.885-2.074-3.011-.45-5.144a22904.773 22904.773 0 0 0 57.902-76.796c7.444-9.886 14.935-19.748 22.26-29.716a6.767 6.767 0 0 1 6.128-3.141c97.194.079 194.35.079 291.466 0a6.197 6.197 0 0 1 5.583 2.727 39344.45 39344.45 0 0 0 67.812 90.272c4.314 5.737 8.593 11.498 13.038 17.152 1.387 1.766 1.186 2.833-.451 4.326a60653.244 60653.244 0 0 0-90.758 83.517A93369.494 93369.494 0 0 0 337.7 399.95a19116.577 19116.577 0 0 1-34.718 32.002c-.544.452-1.113.855-1.967 1.506zm-.462-33.484h1.185l88.898-173.967H212.473l88.08 173.967zm-32.833-21.988.853-.794c-.616-1.327-1.185-2.678-1.837-3.983-4.741-9.364-9.589-18.716-14.33-28.091a76011.778 76011.778 0 0 1-58.768-116.267 5.264 5.264 0 0 0-5.476-3.295c-26.765.083-53.517 0-80.281.06-1.186 0-2.489.201-4.86.415L267.72 377.986zm66.282-1.055.9.735 164.213-151.482a38.871 38.871 0 0 0-3.864-.498c-27.018 0-54.034-.02-81.052-.059a4.562 4.562 0 0 0-4.574 2.94 23690.354 23690.354 0 0 1-29.633 58.21 25852.235 25852.235 0 0 0-35.429 69.459c-3.58 6.898-7.064 13.821-10.562 20.743v-.048zm45.492-169.629-78.313-79.415-78.526 79.415h156.839zm22.295-6.222 30.582-77.401H325.385l76.404 77.401zm-200.162-1.186 75.587-76.345H176.107l25.52 76.345zm-16.725 7.396-26.8-80.126-60.32 80.126h87.12zm234.051.012h85.46l-56.088-74.484-29.372 74.484z"></path>
                              <path d="M564.733 288.499c7.858 15.999 14.595 32.402 18.896 49.614 3.761 15.089 6.175 30.527 8.981 45.852.505 2.807 0 5.805-.112 8.701-3.154-.674-6.5-.865-9.408-2.111-5.345-2.301-10.352-5.389-15.64-7.859-5.984-2.785-13.147 1.954-13.54 8.499-.326 5.333 1.526 9.903 3.997 14.405 4.21 7.668 4.108 7.858-1.763 14.202-1.74 1.864-3.29 3.896-5.311 6.321-1.348-1.808-2.964-3.256-3.66-5.053-2.471-6.31-7.691-8.824-13.563-10.744-6.736-2.246-16.033 4.289-14.405 11.07 1.785 7.455 5.188 14.595 8.421 21.601a5.613 5.613 0 0 0 8.174 2.448c3.503-2.246 6.073-1.19 9.104.314a46.926 46.926 0 0 0 4.952 1.684c2.48.898 3.985 2.178 2.593 5.198a61.428 61.428 0 0 0-3.368 8.769c-3.121 10.823-10.374 16.841-21.242 18.997a4.98 4.98 0 0 0-2.885 1.976 68.703 68.703 0 0 0-5.165 8.869c-4.76 10.341-8.285 21.029-9.229 32.56a22.28 22.28 0 0 1-3.021 8.746c-2.672 4.749-6.41 8.981-8.757 13.843-4.985 10.441-9.678 21.052-13.934 31.808-8.869 22.454-24.991 37.769-46.031 48.502-6.231 3.177-12.541 6.096-19.648 6.736-3.885.348-8.128-.472-9.588-3.762-2.604-5.86-5.276-12.35-5.378-18.559-.258-16.246.55-32.559 1.505-48.749a292.94 292.94 0 0 1 7.084-49.714 31.05 31.05 0 0 0-2.908-22.23c-2.357-4.491-4.39-9.105-6.894-13.473a217.074 217.074 0 0 0-11.8-19.086 9.687 9.687 0 0 0-7.331-3.503c-8.981.763-17.84 2.515-26.777 3.648-11.822 1.505-23.645 1.932-35.512-.078-3.772-.641-5.21-2.796-6.501-5.839a130.799 130.799 0 0 0-5.827-12.17c-.505-.909-2.638-1.853-3.48-1.493a66.343 66.343 0 0 0-7.713 4.49c2.931 6.209 5.49 12.261 8.578 18.043 3.087 5.782 8.724 6.871 14.596 8.442 11.081 2.964 22.129.932 33.12.854 8.858-.067 17.683-2.616 26.563-3.66a6.13 6.13 0 0 1 4.839 2.604c4.593 8.062 8.701 16.393 13.159 24.532 4.457 8.14 4.311 16.089.83 24.453a37.525 37.525 0 0 0-2.391 9.947c-1 8.544-1.942 17.099-2.426 25.677-1.033 18.469-1.942 36.96-2.537 55.451a48.445 48.445 0 0 0 7.208 26.497c3.548 5.961 13.933 10.362 20.209 9.284a76.221 76.221 0 0 0 27.552-9.857c9.992-6.163 20.209-11.99 28.271-20.838 12.743-14.045 20.063-31.133 27.17-48.355 2.492-6.04 5.165-12.024 8.241-17.784 2.178-4.075 5.423-7.578 7.69-11.62a22.534 22.534 0 0 0 2.684-8.409c1.122-10.554 3.132-20.86 7.96-30.381 1.886-3.717 3.885-7.118 8.757-8.735 9.566-3.188 16.841-9.375 19.828-19.704a74.882 74.882 0 0 1 5.153-12.417c3.693-7.398 3.154-11.07-2.863-16.729-.685-.651-1.572-2.066-1.303-2.594a84.397 84.397 0 0 1 5.737-10.104c2.077-3.031 4.771-5.613 6.95-8.601a7.857 7.857 0 0 0 .572-8.869c-2.245-4.491-4.053-9.341-6.276-14.596.821.18 1.626.432 2.403.752 7.241 4.177 14.685 7.859 23.206 8.556 3.245.28 3.021 2.694 2.92 4.873-.326 7.511-.651 15.021-1.123 22.521-.584 8.981-.438 18.166-2.179 26.945-2.952 14.843-7.027 29.461-10.879 44.112-3.963 15.123-10.688 29.191-17.672 43.057a279.488 279.488 0 0 1-40.822 59.887c-15.942 18.042-33.682 34.198-53.745 47.356a415.46 415.46 0 0 1-42.843 23.971c-10.801 5.366-22.298 9.476-33.683 13.473-7.264 2.503-14.966 3.851-22.533 5.423-10.644 2.245-21.332 5.321-32.042 5.883-13.687.719-27.339 3.11-41.238 1.044-13.338-1.976-26.946-2.369-40.306-3.985a125.21 125.21 0 0 1-19.973-4.3 568.277 568.277 0 0 1-31.65-10.251 178.602 178.602 0 0 1-21.399-8.981c-10.408-5.322-20.591-11.093-30.639-17.066-6.557-3.906-12.766-8.409-18.94-12.911-1.123-.797-2.189-3.581-1.695-4.222 3.492-4.49 7.376-8.701 11.228-12.934 1.987-2.245 4.637-4.02 6.051-6.534 3.042-5.423.337-10.609-1.92-15.516-1.785-3.885-2.807-7.747 0-11.228a37.01 37.01 0 0 1 8.735-7.972c7.534-4.671 15.471-8.689 23.151-13.147 8.061-4.682 8.78-12.147 2.133-18.536a6.523 6.523 0 0 1-1.863-4.232c0-14.663 4.098-28.293 10.958-41.148 4.491-8.397 3.301-17.492-3.907-23.802-8.847-7.758-19.906-10.924-30.785-14.304-4.21-1.302-8.746-1.526-13.113-2.391-2.627-.517-3.671-1.842-2.347-4.693 3.188-6.894 1.459-13.473-2.346-19.457-6.546-10.385-16.078-17.458-26.946-22.746a18.564 18.564 0 0 1-8.982-9.679c-4.378-9.655-9.869-18.502-17.806-25.699-5.288-4.805-12.822-6.736-18.121-3.918-7.376 3.907-12.877 9.61-15.089 17.964-1.123 4.356-1.897 8.858-3.492 13.046-2.156 5.681-5.434 10.969-7.298 16.729-1.796 5.535-3.604 11.52-3.312 17.2a216.061 216.061 0 0 0 4.244 31.279c1.583 7.859 4.816 15.235 12.788 19.087a21.326 21.326 0 0 1 10.352 10.688c1.662 3.581 3.368 7.141 4.715 10.856 1.853 5.243 3.469 10.587 4.929 15.954 2.829 10.464.673 20.983-.202 31.437-.303 3.705-1.976 7.309-3.368 12.024-1.617-2.122-2.335-2.919-2.897-3.817-3.94-6.759-8.106-13.327-12.002-20.063a258.982 258.982 0 0 1-22.915-52.095c-4.289-13.641-8.634-27.35-9.959-41.743-.943-10.194-2.133-20.366-2.953-30.561a6.66 6.66 0 0 1 1.875-4.592c8.375-8.398 16.033-17.346 19.884-28.765 2.357-6.994 3.424-14.258-.146-21.41-4.356-8.724-6.736-17.627-2.111-27.125 1.65-3.436 2.436-7.365 4.491-10.498 1.853-2.84 4.491-5.872 7.511-7.062 3.772-1.493 8.252-1.123 12.417-1.707 9.476-1.257 17.661-5.614 25.082-11.294 6.041-4.66 10.621-10.711 10.565-18.604a17.83 17.83 0 0 1 3.66-11.755c.55-.696 1.123-1.392 1.673-2.077l-8.679-8.027c-.359.505-.73 1.01-1.123 1.527-3.368 5.019-7.051 11.104-7.006 16.684.067 6.86-2.998 10.52-7.388 13.888-7.399 5.681-15.718 9.24-25.306 9.094-9.588-.146-16.527 4.917-21.119 13.147-1.83 3.268-3.368 6.737-4.974 10.105l-1.123-.348a13.236 13.236 0 0 1 .303-3.144c4.098-11.856 7.466-24.06 12.62-35.445 6.568-14.517 14.281-28.551 22.14-42.428 1.65-2.919 3.514-5.715 5.457-8.466l-8.432-7.792-4.57-4.21a293.248 293.248 0 0 0-43.023 91.357c-17.484 63.494-14.91 126.281 7.725 188.36C59.323 631.087 171.72 728.652 324.781 720.49c68.588-3.66 129.462-29.27 181.389-74.369 55.014-47.783 89.133-108.097 101.371-179.896 10.104-59.325 2.986-117.179-20.928-172.586a292.31 292.31 0 0 0-29.191-52.274l-13.079 12.058a287.065 287.065 0 0 1 20.39 35.076zm-26.946 143.664c-.965.214-2.728.27-2.975-.213-1.595-3.121-2.874-6.4-4.491-10.104 4.165.595 8.982 5.669 8.813 8.645a2.244 2.244 0 0 1-1.347 1.672zm-514.49-71.911c.887 2.874 1.953 4.693 1.908 6.478-.146 5.49 2.773 9.88 4.491 14.741.954 2.695.831 5.917.595 8.858-.741 9.072-6.837 15.337-12.271 22.151.977-17.176.258-34.354 5.277-52.228zm99.417 272.823c-.674.831-1.381 1.617-2.246 2.594a277.082 277.082 0 0 1-40.631-41.9 4.87 4.87 0 0 1-.842-5.815c5.996-14.359 8.915-29.606 6.961-44.909s-6.141-30.662-15.359-43.618c-3.121-4.39-7.926-7.78-12.474-10.879a15.043 15.043 0 0 1-6.152-9.274 120.278 120.278 0 0 1-3.761-34.883c.416-10.452 5.423-19.03 10.318-27.742a8.036 8.036 0 0 0 1.313-4.009c-.404-7.186 2.807-12.619 7.859-17.2 2.526-2.245 5.075-1.403 7.444.404 5.917 4.491 9.768 10.621 13.091 17.145 3.862 7.566 7.511 15.179 15.393 19.748a146.416 146.416 0 0 1 17.627 11.778 25.437 25.437 0 0 1 7.073 9.363c1.123 2.414.572 5.838-.056 8.622-1.74 7.612-.865 12.418 6.152 16.65 5.445 3.278 11.228 2.717 16.841 4.165 9.285 2.414 18.143 5.345 25.901 11.127 4.098 3.054 5.063 5.838 2.537 10.205a87.664 87.664 0 0 0-10.104 25.823c-2.01 9.464-4.188 19.086-.943 28.775.674 2.021 1.718 3.918 2.583 5.85-11.227 6.22-23.364 10.8-32.009 20.726-6.837 7.858-7.668 13.473-4.491 22.454.135.382.438.707.595 1.123 3.099 7.241 2.807 6.916-3.065 12.058-3.671 3.29-6.377 7.747-9.543 11.654l-.012-.035z"></path>
                              <path d="M488.646 323.168c.27 1.976-.213 4.064-.303 6.097-.112 2.548-1.123 3.783-3.907 3.222-3.593-.719-7.32-2.01-10.812-1.572a7.073 7.073 0 0 1-7.343-2.953l-1.123-1.415-8.511 7.859c4.346 5.131 8.758 10.318 16.92 7.803.449-.135 1.044.247 1.583.303 4.491.393 9.094 1.291 13.585.999 5.704-.37 8.982-4.435 10.498-9.622a29.988 29.988 0 0 0 .954-8.982c-.247-10.015-3.436-17.38-9.824-21.691l-8.981 8.263c4.389 1.529 6.365 5.11 7.264 11.689z"></path>
                           </svg>
                        </span>
                        Earth Mined
                     </label>
                     <label class="btn btn-primary button_background button_text_color" for="" onclick="DiaSelectedElementChk('dia_type-2');" for="dia_type-2"  id="Label-dia_type-2">
                        <input type="radio" name="dia_type" id="dia_type-2" onchange="submitForm()" value="2">
                        <span class="ico">
                           <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 222 212" style="enable-background:new 0 0 222 212;width:47px" xml:space="preserve">
                              <g>
                                 <path class="st0" d="M162,16.5c8.4,11.2,16.8,22.4,25.2,33.6c2.1,2.8,2.2,2.9-0.3,5.2c-14.1,13-28.2,26-42.3,39 c-9.3,8.6-18.5,17.2-27.8,25.7c-3.2,3-3.2,3-6.5,0c-22.7-20.9-45.4-41.8-68-62.8c-5.5-5.1-5.2-3.3-0.8-9.3 c7.8-10.5,15.7-21,23.6-31.5C97.4,16.5,129.7,16.5,162,16.5z M113.7,55.9c-8.6,0-17.3,0-25.9,0c-2,0-2.1,0.5-1.3,2.2 c8.6,16.9,17.2,33.8,25.8,50.7c0.3,0.7,0.4,1.8,1.4,1.8c0.9,0,1-1.1,1.4-1.8c8.6-16.8,17.2-33.6,25.8-50.4c1.1-2.2,1-2.4-1.4-2.4 C130.8,55.9,122.2,55.9,113.7,55.9z M50.4,55.9c17.3,16,34.2,31.5,51.2,47.3c0.1-1.4-0.5-2.1-0.9-2.8c-3-5.8-6-11.7-8.9-17.5 c-4.2-8.3-8.3-16.6-12.5-24.8c-0.5-1.1-1-2.1-2.5-2.1C68.2,55.9,59.7,55.9,50.4,55.9z M176.8,55.9c-8.8,0-16.9,0.1-25,0 c-2,0-3,0.7-3.9,2.4C141.5,71,135,83.8,128.5,96.5c-1,2-2.1,4.1-3.2,6.1c0.1,0.1,0.3,0.2,0.4,0.3C142.6,87.4,159.4,71.9,176.8,55.9 z M88.4,49.2c16.9,0,33.4,0,50.1,0c-8.1-8.2-16-16.1-23.9-24c-1.1-1.1-1.8-0.5-2.6,0.3c-3.2,3.2-6.3,6.3-9.5,9.5 C98,39.6,93.4,44.3,88.4,49.2z M122,23.1c0.1,0.2,0.1,0.5,0.3,0.6c7.5,7.4,15,14.8,22.5,22.3c1.2,1.2,1.5,0.3,1.9-0.7 c2.6-6.6,5.2-13.2,7.8-19.8c1-2.5,0.9-2.7-1.9-2.7c-9.6,0-19.2,0-28.8,0C123.2,22.8,122.6,22.6,122,23.1z M105.1,22.8 c-9.9,0-19.8,0-29.6,0c-2,0-1.5,1.2-1.1,2.3c2.2,6.5,4.4,13,6.5,19.5c0.5,1.7,1.1,1.9,2.3,0.6c3.3-3.4,6.8-6.7,10.1-10.2 C97.2,31.1,101.1,27,105.1,22.8z M62.1,49.4c3.8,0,7.5,0,11.3,0c1.6,0,2.2-0.4,1.6-2.1c-2.4-7-4.7-13.9-7-20.9 c-0.5-1.5-1.1-1.6-2-0.3c-5.4,7.2-10.8,14.3-16.1,21.5c-0.3,0.4-0.9,0.9-0.5,1.5c0.3,0.6,1,0.4,1.5,0.4 C54.6,49.5,58.4,49.4,62.1,49.4z M165.2,49.4c3.4,0,6.7,0,10.1,0c0.8,0,2,0.4,2.5-0.4c0.5-1-0.7-1.7-1.2-2.4 c-1.1-1.6-2.4-3.2-3.6-4.8c-3.5-4.7-7-9.3-10.5-14c-0.5-0.7-1.2-2.2-2-0.1c-2.6,6.5-5.1,13.1-7.8,19.6c-0.7,1.7-0.2,2.1,1.5,2.1 C157.9,49.4,161.6,49.4,165.2,49.4z"></path>
                                 <path class="st0" d="M19.5,83.2c0.7-2.5,0.3-5.1,0.4-7.6c0.1-2.7,0.2-5.4,0.9-8.1c0.3-1.4,0.9-2.7,2.5-3c1.4-0.3,2.4,0.8,3.2,1.7 c0.4,0.5,0.9,1,1.1,1.5c4.2,9.7,11.9,16.4,19.7,22.9c12.5,10.4,26.6,18,42,23.1c6.9,2.3,13.4,5.3,18.5,10.7 c5.9,6.4,8.6,14.3,10.2,22.6c1.4,7.4,1,14.8-1.1,22.1c-0.1,0.3-0.2,0.6-0.2,0.9c0,0.1,0.1,0.3,0.2,0.6c2.2-0.9,4.1-2.4,6-3.7 c8.2-5.2,16.5-10.2,24.4-15.7c10.9-7.7,19.5-17.7,27.1-28.6c0.9-1.3,1.8-2.6,2.8-3.9c0,0,0.1,0,0.8-0.2 c-4.6,8.5-9.5,16.3-15.1,23.7c-5.5,7.4-11.6,14.4-19.5,20.4c3.7,0.7,6.7-0.2,9.6-0.8c13.9-3.1,23-12.2,30-23.9 c7.2-12.1,10.9-25.3,12.1-39.3c0.4-4.6,0-9.3,0.9-13.9c0.1-0.7,0.4-1.6-0.4-2c-0.8-0.3-1.3,0.5-1.7,1.1c-5,7.8-12.7,12.4-20.4,17.1 c-9.3,5.8-19.1,10.3-29.3,14.1c-9.8,3.6-14.7,11.1-16.6,20.8c-1.3,6.7-1.2,13.5,0.5,20.2c0.3,1.3,1.1,3.5-0.2,3.9 c-1.6,0.5-2.1-1.7-2.6-3.1c-5-13.8-3.5-26.7,5.2-38.6c4.1-5.6,10.5-8,16.8-10.1c15.9-5.2,29.5-14,41.1-26c2.8-2.9,5.3-6.2,6.9-10 c0.3-0.7,0.8-1.4,1.4-1.9c1.7-1.6,3.1-1.3,4.1,0.9c0.3,0.7,0.5,1.5,0.6,2.3c1.1,15.8,1.1,31.7-2.8,47.2 c-3.7,14.8-11.4,27.1-23.9,35.9c-9.2,6.5-19.5,9.8-30.8,9.9c-4,0-7.7,0.4-11.4,2.6c-5,3-10.7,4.9-16.3,7c-3,1.1-6,2.1-9.8,2.7 c11.5,7.5,22.5,14.4,32.9,22.1c-4.3-0.4-8.3-1.8-12.3-3.1c-8.9-3-17.5-6.6-25.6-11.3c-0.8-0.5-1.6-0.8-2.7-0.8 c-26.7,1-48.1-9-63.5-31.2c-8-11.5-12-24.5-14-38.2c-0.9-6.1-1.5-12.2-1.5-18.4c0-0.6-0.2-1.2-0.3-1.9 C19.5,91.8,19.5,87.5,19.5,83.2z M48.4,124c0.2-0.1,0.4-0.2,0.6-0.3c0.3,0.4,0.6,0.8,0.8,1.1c13.8,21.8,31.2,39.8,54,52.4 c0.8,0.4,1.6,1.3,2.4,0.8c2.3-1.4,5.1-2.3,5.8-5.6c1.9-8.5,2.3-17.1,0.5-25.7c-2.5-11.6-8.5-20.6-20.1-25c-3-1.1-6-2.2-8.9-3.6 c-20.1-9.1-40.4-18-54.4-36.3c-0.4-0.5-0.9-1.4-1.7-1.1c-0.8,0.3-0.6,1.3-0.5,1.9c1.1,8,0.8,16.1,1.8,24.1 c2.5,19.6,9.3,37.5,21.4,53.2c7.5,9.7,17,16.6,29.1,19.6c4.4,1.1,8.9,1.8,14,1.8C73.2,165.7,60.5,145.1,48.4,124z"></path>
                              </g>
                           </svg>
                        </span>
                        Lab Grown
                     </label>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-sm-5 col-md-5 col-lg-5 col-xl-5 col-xxl-5">
         <div class="filter-action d-flex search-btn">
            <!-- <div class="btn-group">
               <a href="javascript:void(0)" onclick="resetForm()" class="reset-btn" style="cursor:pointer;"><i class="fa fa-refresh" aria-hidden="true"></i>Reset Filter</a>
               <a class="hide-btn btn btn-primary" role="button" data-toggle="collapse" href="#filter" aria-expanded="false" aria-controls="filter">Hide Filters</a>
               </div> -->
            <button class="btn btn-info-reset" type="button" onclick="location.reload()"> <i class="fa fa-undo" aria-hidden="true"></i> Reset </button>
         </div>
      </div>
   </div>
</div>
<div class="metal-type main_stud_metal_filter mb-0">
   <div class="heading-studs-inner stud_metal_filter_heading">
      <h4>Metal type</h4>
   </div>
   <div class="metal-stud-filter stud_metal_filter_list">
      <div class="metal-style mb-20 c_stud_metal_type">
         <div class="d-flex" data-toggle="buttons">
            <label style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);border:1px solid linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="Label-MetalType active" for="MetalType-10" onclick="DiaSelectedElementChk('MetalType-10');" id="Label-MetalType-10" title="14K White Gold">
               <p style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-10" value="10" checked="checked" onchange="submitForm()" title="14K White Gold">
               14K W           										
            </label>
            <label style="background:linear-gradient(30deg,#e1b94f 0,#faf1d8 55%,#faf1d8 60%,#e1b94f 100%);border:1px solid linear-gradient(30deg,#e1b94f 0,#faf1d8 55%,#faf1d8 60%,#e1b94f 100%);" class="Label-MetalType" for="MetalType-8" onclick="DiaSelectedElementChk('MetalType-8');"   id="Label-MetalType-8" title="14K Yellow Gold">
               <p style="background:linear-gradient(30deg,#e1b94f 0,#faf1d8 55%,#faf1d8 60%,#e1b94f 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-8" value="8" onchange="submitForm()"  title="14K Yellow Gold">
               14K Y           										
            </label>
            <label style="background:linear-gradient(30deg,#ec8a55 0,#fcede2 55%,#fcede2 60%,#ec8a55 100%);border:1px solid linear-gradient(30deg,#ec8a55 0,#fcede2 55%,#fcede2 60%,#ec8a55 100%);" class="Label-MetalType" for="MetalType-13" onclick="DiaSelectedElementChk('MetalType-13');" id="Label-MetalType-13" title="14K Rose Gold">
               <p style="background:linear-gradient(30deg,#ec8a55 0,#fcede2 55%,#fcede2 60%,#ec8a55 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-13" value="13" onchange="submitForm()" title="14K Rose Gold">
               14K R           										
            </label>
            <label style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);border:1px solid linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="Label-MetalType" for="MetalType-12" onclick="DiaSelectedElementChk('MetalType-12');" id="Label-MetalType-12" title="18K White Gold">
               <p style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-12" value="12" onchange="submitForm()"  title="18K White Gold">
               18K W           										
            </label>
            <label style="background:linear-gradient(30deg,#e1b94f 0,#faf1d8 55%,#faf1d8 60%,#e1b94f 100%);border:1px solid linear-gradient(30deg,#e1b94f 0,#faf1d8 55%,#faf1d8 60%,#e1b94f 100%);" class="Label-MetalType" for="MetalType-11" onclick="DiaSelectedElementChk('MetalType-11');" id="Label-MetalType-11" title="18K Yellow Gold">
               <p style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-11" value="11" onchange="submitForm()" title="18K Yellow Gold">
               18K Y           										
            </label>
            <label style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);border:1px solid linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="Label-MetalType" for="MetalType-4" onclick="DiaSelectedElementChk('MetalType-4');" id="Label-MetalType-4" title="Platinum">
               <p style="background:linear-gradient(30deg,#b3b2af 0,#f7f7f7 55%,#f7f7f7 60%,#b3b2af 100%);" class="blank-space"></p>
               <input type="radio" autocomplete="off" name="MetalType[]" id="MetalType-4" value="4" onchange="submitForm()" title="Platinum">
               PLAT           										
            </label>
         </div>
      </div>
   </div>
</div>
</form>
<div id="ProductListTable">
   <script type="text/javascript">document.getElementById("TotalProductsSpan").innerHTML = 1;</script>
   <!-- <div class="product_row row  responsive  "> -->
   <div class="product_row row ">   		
      <div id="grid_diamond"></div>
   </div>
   <div class="clearfix"></div>
   <form name="stud_product_info_frm" id="stud_product_info_frm" action="https://www.amipi.com/front_cart_programming.php?mode=stud_product_add_to_cart" method="post" enctype="multipart/form-data" onsubmit="return false;" class="cmxform form-horizontal adminex-form" style="min-height:600px; display: none;">
      <div class="row">
         <div class="col-sm-12">
            <div id="StudListDiv">
            </div>
         </div>
         <div class="col-sm-12">
            <div id="ProductData"></div>
         </div>
      </div>
   </form>
   
   <script type="text/javascript">document.getElementById("last_number").value = 1;</script> 
   <script type="text/javascript">document.getElementById("sr_no").value = 1;</script>
   <script src="https://www.amipi.com/js/jquery.min-index.js"></script> 
   <script src='https://amipi.com/studs-page-design/slick/slick.js'></script>
   
   <!-- Include jQuery -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->

<!-- Include Slick CSS (adjust path if needed) -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<!-- Include Slick JS (adjust path if needed) -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

  <!-- Slick Carousel CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">

    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- Slick Carousel JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  <!-- <script type="text/javascript">
  $('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

 $('a[data-slide]').click(function(e) {
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

</script> -->


</div>

<script>
   $(document).ready(function() {
   
   
   // Get the URL of the current page
   const urlParams = new URLSearchParams(window.location.search);
   
   // Get the value of the 'Shape' query parameter
   const shape = urlParams.get('Shape');
   if (shape === 'Round') {
       document.getElementById('idshaperound').checked = true;
       document.querySelector('.idshaperound').classList.add('active');
   }else if (shape === 'Princes') {
       document.getElementById('idshapeprinces').checked = true;
       document.querySelector('.idshapeprinces').classList.add('active');
   }else if (shape === 'Cushion') {
       document.getElementById('idshapecushion').checked = true;
       document.querySelector('.idshapecushion').classList.add('active');
   }else if (shape === 'Emerald') {
       document.getElementById('idshapeemerald').checked = true;
       document.querySelector('.idshapeemerald').classList.add('active');
   }else if (shape === 'Oval') {
       document.getElementById('idshapeoval').checked = true;
       document.querySelector('.idshapeoval').classList.add('active');
   }else if (shape === 'Radiant') {
       document.getElementById('idshaperadiant').checked = true;
       document.querySelector('.idshaperadiant').classList.add('active');
   }else if (shape === 'Marquise') {
       document.getElementById('idshapemarquise').checked = true;
       document.querySelector('.idshapemarquise').classList.add('active');
   }else if (shape === 'Heart') {
       document.getElementById('idshapeheart').checked = true;
       document.querySelector('.idshapeheart').classList.add('active');
   }else if (shape === 'Pear') {
       document.getElementById('idshapepear').checked = true;
       document.querySelector('.idshapepear').classList.add('active');
   }else if (shape === 'Elongated') {
       document.getElementById('idshapeelongated').checked = true;
       document.querySelector('.idshapeelongated').classList.add('active');
   }else if (shape === 'Eminecut') {
       document.getElementById('idshapeminecut').checked = true;
       document.querySelector('.idshapeminecut').classList.add('active');
   }else if (shape === 'Euro') {
       document.getElementById('idshapeeuro').checked = true;
       document.querySelector('.idshapeeuro').classList.add('active');
   }
   
   
   // Get the values of 'carat_from' and 'carat_to'
   const caratFrom = urlParams.get('carat_from');
   const caratTo = urlParams.get('carat_to');
   
   // Set the input fields with the values if they exist
   if (caratFrom !== null && caratTo !== null) {
       document.getElementById('range_56_input_from').value = caratFrom;
       document.getElementById('range_56_input_to').value = caratTo;
   
       // Optionally, update the slider if you are using a range slider library
       $('#range_56').ionRangeSlider({
           min: 0,
           max: 20, // Adjust max range as needed
           from: caratFrom,
           to: caratTo,
           type: 'double',
           step: 0.1
       });
   }
   
    // Get the values of 'carat_from' and 'carat_to'
    const pcaratFrom = urlParams.get('pcarat_from');
   const pcaratTo = urlParams.get('pcarat_to');
   
   // Set the input fields with the values if they exist
   if (pcaratFrom !== null && pcaratTo !== null) {
       document.getElementById('range_89_input_from').value = pcaratFrom;
       document.getElementById('range_89_input_to').value = pcaratTo;
   
       // Optionally, update the slider if you are using a range slider library
       $('#range_59').ionRangeSlider({
           min: 0,
           max: 20, // Adjust max range as needed
           from: pcaratFrom,
           to: pcaratTo,
           type: 'double',
           step: 0.1
       });
   }
   
   
   });
   
   
   
     // ++++++++++++++++++++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>
   // 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';
     }
   });
</script>
<script>
   document.addEventListener('DOMContentLoaded', function() {
   const step_list = document.getElementById('step_list');
    // step_list.classList.add('hidden'); 
   var url = window.location.href;
   const urlObject = new URL(url);
   const pathname = urlObject.pathname.toLowerCase();
   const pathParts = pathname.split('/');
   const collectionIndex = pathParts.indexOf('collections');
   var selected_collection = localStorage.getItem('collectionName');
    
   if (collectionIndex !== -1 && pathParts.length > collectionIndex + 1) {
     const collectionName = pathParts[collectionIndex + 1];
   
     if (collectionName === 'fine-jewelry' || 
         collectionName === 'wedding-bands' || 
         collectionName === 'cart' || 
         collectionName === 'diamond-bands') {
            console.log(selected_collection +'1');
       step_list.classList.add('hidden'); 
     } else if (collectionName == 'engagement-rings' || collectionName == 'bypass' ||
                 collectionName == 'hidden-halo-engaement-rings' ||  collectionName == 'solitaire'   || 
                 collectionName == 'vintage' ||  collectionName == 'pave-engagement-rings' || 
                 collectionName == 'multirow' || collectionName == 'side stone' ||
                 collectionName == 'three-stone-engagement-rings') {
      console.log(selected_collection +'2');
                 step_list.classList.remove('hidden');
                 step_list.classList.add('flex'); 
     }
   }else if (selected_collection == 'engagement-rings' || selected_collection == 'bypass' || 
                 selected_collection == 'hidden-halo-engaement-rings' ||  selected_collection == 'solitaire'   || 
                 selected_collection == 'vintage' ||  selected_collection == 'pave-engagement-rings' || 
                 selected_collection == 'multirow' || selected_collection == 'side stone' || selected_collection == 'engaement-rings' ||
                 selected_collection == 'three-stone-engagement-rings') {
                  console.log(selected_collection +'3');
       
                 step_list.classList.remove('hidden');
                 step_list.classList.add('flex'); 
     }
   });
   
   function gridSort(selObj) 
   {
   //alert(selObj.value);
   var sortby = selObj.value;
   //alert(sortby);
   if(sortby == 'Price'){
   SetMobiSortOrder('price','ASC','th_grid_Price');
   }
   if(sortby == 'Weight'){
   SetMobiSortOrder('carat_weight','ASC','th_grid_Weight');
   }
   if(sortby == 'Color'){
   SetMobiSortOrder('color_short','ASC','th_grid_Color');
   }
   if(sortby == 'Clarity'){
   SetMobiSortOrder('clarity_short','ASC','th_grid_Clarity');
   }
   if(sortby == 'Table'){
   SetMobiSortOrder('table_diamond','ASC','th_grid_Table');
   }
   if(sortby == 'Depth'){
   SetMobiSortOrder('depth','ASC','th_grid_Depth');
   }
   
   if(sortby == 'Ppc'){
   SetMobiSortOrder('price_per_carat','ASC','th_grid_Ppc');
   }
   
   $(".th_grid").hide("slow");
   $("#th_grid_"+sortby).show("slow");
   
   
   }  
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
   $(document).on('change', 'input[name="dia_type"]', function () {
     $('label.btn').removeClass('active'); // Sabhi labels se 'active' class remove karein
     $(this).closest('label').addClass('active'); // Selected radio ke parent label ko 'active' class dein
   });
   
   // Initial setup ke liye
   $('input[name="dia_type"]:checked').closest('label').addClass('active');
</script>
<script>
   shopify_theme_changes();
   function shopify_theme_changes(){
      var shop_name = `${Shopify.shop}`;
      var data = { shop_name: shop_name };
      $.ajax({
         // url: '<?php echo e(route('create-page')); ?>',
         url: 'https://diamondapp.mydiamondsearch.com/jewelry_app/shopify-theme-changes',  // Route for the delete-page method
         type: 'POST',
         data: data,
         success: function(response) {
            console.log(response.data);
            var text_color = response.data.text_color;
            var border_color = response.data.border_color;
            var button_background = response.data.button_background;
            var button_text_color = response.data.button_text_color;
            var button_background_hover = response.data.button_background_hover;
            var button_hover_color = response.data.button_hover_color;

            var body_color = response.data.body_color;
            var heading_color = response.data.heading_color;
            var heading_font_size = response.data.heading_font_size;
            var primary_font_size = response.data.primary_font_size;
            var input_bg = response.data.input_bg;
            var filter_font_size = response.data.filter_font_size;
            

   
   
                // Update :root variables with the correct values
               document.documentElement.style.setProperty('--text_color', text_color);
               document.documentElement.style.setProperty('--border_color', border_color);
               document.documentElement.style.setProperty('--button_background', button_background);
               document.documentElement.style.setProperty('--button_text_color', button_text_color);
               document.documentElement.style.setProperty('--button_background_hover', button_background_hover);
               document.documentElement.style.setProperty('--button_hover_color', button_hover_color);

               document.documentElement.style.setProperty('--body_color', body_color);
               document.documentElement.style.setProperty('--heading_color', heading_color);
               document.documentElement.style.setProperty('--heading_font_size', heading_font_size);
               document.documentElement.style.setProperty('--primary_font_size', primary_font_size);
               document.documentElement.style.setProperty('--input_bg', input_bg);
               document.documentElement.style.setProperty('--filter_font_size', filter_font_size);
   
               // document.querySelector('.text_color').style.color = text_color;
               // document.querySelector('.border_color').style.color = border_color;
               // document.querySelector('.button_background').style.color = button_background;
               // document.querySelector('.button_text_color').style.color = button_text_color;
               // document.querySelector('.button_background_hover').style.color = button_background_hover;
               // document.querySelector('.button_hover_color').style.color = button_hover_color;
            // $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
         },
         error: function(xhr) {
            $('#response').html('<pre>' + xhr.responseText + '</pre>');
         }
      });
   }
</script>
<script>
   fetch('https://amipi-diamond-store.myshopify.com/cdn/shop/t/1/assets/base.css')
   .then(response => response.text())  // Fetch the CSS content
   .then(css => {
     // Regex to match CSS rules for .btn or .button classes
     const buttonStyleRegex = /\.(btn|button)[^}]*\{([^}]*)\}/g;
     let match;
     
     // Loop through all matching styles
     while ((match = buttonStyleRegex.exec(css)) !== null) {
       const className = match[1];  // .btn or .button
       const styles = match[2];     // The CSS rules inside the curly braces
   
       // Extract individual properties (e.g., background-color, color, font-size, etc.)
       const styleProps = {
         backgroundColor: /background-color\s*:\s*([^;]*)/.exec(styles),
         color: /color\s*:\s*([^;]*)/.exec(styles),
         fontSize: /font-size\s*:\s*([^;]*)/.exec(styles),
       };
   
       // Log the extracted details for each button class
       // console.log(`Styles for .${className}:`);
       if (styleProps.backgroundColor) {
         console.log(`  Background Color: ${styleProps.backgroundColor[1]}`);
       }
       if (styleProps.color) {
         console.log(`  Text Color: ${styleProps.color[1]}`);
       }
       if (styleProps.fontSize) {
         console.log(`  Font Size: ${styleProps.fontSize[1]}`);
       }
       console.log('---');
     }
   })
   .catch(err => console.error('Error fetching CSS:', err));
   
   
       //   getButtonColor();
   
       //   function rgbToHex(rgb) {
       //       var result = rgb.match(/\d+/g);
       //       return "#" + result.map(function(x) {
       //           return ("0" + parseInt(x).toString(16)).slice(-2);
       //       }).join('');
       //   }
   
       //   function getButtonColor() {
       //       // Select the first <button> element on the page
       //       var button = document.querySelector('button');
   
       //       // Get the computed style of the button
       //       var computedStyle = window.getComputedStyle(button);
   
       //       // Get the background color of the button in rgb format
       //       var buttonColor = computedStyle.backgroundColor;
   
       //       // Convert the rgb color to hex
       //       var hexColor = rgbToHex(buttonColor);
   
       //       // Display the background color code in hex
       //       console.log('Button color is: ' + hexColor);
   
       //       var themeColor = window.getComputedStyle(document.body).getPropertyValue('background-color');
       //       var hexColors = rgbToHex(themeColor);
       //       console.log('Current theme color:', hexColors);
   
       //       // alert('Button color code in hex is: ' + hexColor);
       //   }
   
       
     
</script>
<script>
   // Check if the current page is the "diamond-product" page
   if (window.location.pathname === '/pages/diamonds') {
       $('body').addClass('am_app');
       $('body').attr('id', 'am_app');
   }
   
</script>
<script>
   shopify_theme_changes();
   function shopify_theme_changes(){
      var shop_name = `${Shopify.shop}`;
      var data = { shop_name: shop_name };
      $.ajax({
         // url: '<?php echo e(route('create-page')); ?>',
         url: 'https://diamondapp.mydiamondsearch.com/jewelry_app/shopify-theme-changes',  // Route for the delete-page method
         type: 'POST',
         data: data,
         success: function(response) {
          // Extract all variables safely from response
         var heading_color = response.data.heading_color || '#000';
         var text_color = response.data.text_color || '#000';
         var border_color = response.data.border_color || '#ccc';
         var button_background = response.data.button_background || '#f00';
         var button_text_color = response.data.button_text_color || '#fff';
         var button_background_hover = response.data.button_background_hover || '#333';
         var button_hover_color = response.data.button_hover_color || '#fff';
         var font_size = response.data.font_size || '16px';
         var input_bg = response.data.input_bg || '#f5f5f5';
         var primary_link_color = response.data.primary_link_color || '#007bff';
         var heading_font_size = response.data.heading_font_size || '18px';
         var primary_font_size = response.data.primary_font_size || '16px';
         var filter_font_size = response.data.filter_font_size || '14px';
         var body_color = response.data.body_color || '#fff';
         var sub_heading_font_size = response.data.sub_heading_font_size || '15px';

         // Set all CSS variables (use hyphens not underscores)
         document.documentElement.style.setProperty('--heading-color', heading_color);
         document.documentElement.style.setProperty('--text-color', text_color);
         document.documentElement.style.setProperty('--border-color', border_color);
         document.documentElement.style.setProperty('--button-background', button_background);
         document.documentElement.style.setProperty('--button-text-color', button_text_color);
         document.documentElement.style.setProperty('--button-background-hover', button_background_hover);
         document.documentElement.style.setProperty('--button-hover-color', button_hover_color);
         document.documentElement.style.setProperty('--input-bg', input_bg);
         document.documentElement.style.setProperty('--primary-link-color', primary_link_color);
         document.documentElement.style.setProperty('--font-size-pr', font_size);
         document.documentElement.style.setProperty('--heading-font-size', heading_font_size);
         document.documentElement.style.setProperty('--primary-font-size', primary_font_size);
         document.documentElement.style.setProperty('--filter-font-size', filter_font_size);
         document.documentElement.style.setProperty('--body-color', body_color);
         document.documentElement.style.setProperty('--sub-heading-font-size', sub_heading_font_size);

               // document.querySelector('.text_color').style.color = text_color;
               // document.querySelector('.border_color').style.color = border_color;
               // document.querySelector('.button_background').style.color = button_background;
               // document.querySelector('.button_text_color').style.color = button_text_color;
               // document.querySelector('.button_background_hover').style.color = button_background_hover;
               // document.querySelector('.button_hover_color').style.color = button_hover_color;
            // $('#response').html('<pre>' + JSON.stringify(response, null, 2) + '</pre>');
         },
         error: function(xhr) {
            $('#response').html('<pre>' + xhr.responseText + '</pre>');
         }
      });
   }
</script>
<script>
function DiaSelectedElementChk(id) {
    //alert(id);

    var element = document.getElementById(id);
    var labelElement = document.getElementById("Label-" + id); // Get the corresponding label

    if (!element || !labelElement) {
        console.error("Element with id '" + id + "' or its label not found.");
        return;
    }

    // Add 'active' class to the clicked label
    //labelElement.classList.add("active");

    if (id === 'MatchedSets-ShowAll' || id === 'MatchedSets-Only' || id === 'MatchedSets-Hide') {
        element.checked = true;
        var url = "https://diamondapp.mydiamondsearch.com/jewelry_app/load-more-diamond";
        loadMoreData(url);
    } else if (id === 'dia_type-1' || id === 'dia_type-2') {
      if ($('#' + id).is(':checked')) {
           $('#Label-' + id).addClass("active");
            element.checked = false;
        } else {
            $('#Label-' + id).removeClass("active");
            element.checked = true;
        }

        var url = "https://diamondapp.mydiamondsearch.com/jewelry_app/load-more-diamond";
        loadMoreData(url);
    }else {
        if ($('#' + id).is(':checked')) {
         
            element.checked = false;
        } else {
           
            element.checked = true;
        }

        var url = "https://diamondapp.mydiamondsearch.com/jewelry_app/load-more-diamond";
        loadMoreData(url);
    }
}
 

</script><?php /**PATH /home/amipiinc/diamondapp.mydiamondsearch.com/jewelry_app/resources/views/jewelry-page.blade.php ENDPATH**/ ?>