@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
  --swiper-theme-color: #ff4931;
}

/* Mobile-first styles */

* {
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: "Kanit", sans-serif;
  --swiper-theme-color: rgb(211, 145, 3);
}


  nav {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 100;
  }

  .header {
    width: 100%;
    height: 5rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);

    padding-left: 0rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.815);
    backdrop-filter: blur(5px);
  }

  .div_img img {
    width: 50px;
    display: none;
  }

  .a_tag ul {
    display: none;
    align-items: center;
    gap: 3rem;
  }

  .a_tag ul li a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
  }

  .div_search {
    width: 17rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

  .div_search input {
    width: 82%;
    height: 100%;
    background-color: transparent;

    border-radius: 5px;
    padding-left: 1rem;
  }

  .strong {
    background-color: transparent;
    width: 15%;
    border-radius: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffcb05;
  }

  .Items_suggest {
    width: 100%;
    height: auto;
    display: flex;

    justify-content: center;
  }

  #suggestions {
    width: 95%;
    height: 15rem;
    font-size: 13px;
    border: #d6ac02 1.6px solid;
    padding-left: 1rem;
    padding-top: 1rem;
    top: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem; /* ✅ spacing between rows */
    overflow-y: auto;

    padding: 0.5rem 1rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    background: #fff;
    position: absolute;
    display: none;
    z-index: 1000;
  }

  #suggestions div {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
  }
  #suggestions div:hover {
    background: #d6ac0249;
  }

  #suggestions {
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* For IE & Edge (legacy) */
  }

  .help {
    height: 3rem;

    color: #fff;
    border-radius: 5px;
    display: none;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .help i {
    font-size: 24px;
    color: #ffcb05;
  }

  .help h4 {
    font-weight: 500;
  }

  .help a {
    color: #fff;
  }

  .cart a {
    display: none;
  }

  .cart a i {
    color: #ffcb05;
  }

  .cart a h4 {
    color: #fff;
    font-weight: 500;
  }

  .menu i {
    color: #fff;
    font-size: 27px;
  }

  .product-main {
    position: relative;
    top: 7rem;
  }

  .main_info_div {
    display: grid;
    align-items: center;
    gap: 1.5rem;
    background-color: #fffefd;
    padding-left: 0.5rem;
  }
  .image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 21.5rem;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 21rem;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }

  .main-image {
    width: 250px;
    height: 250px;
    /* width: 460px;              
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  object-fit: contain; */
  }

  /* Carousel shell */
  .carousel-container {
    position: relative;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto; /* prev | viewport | next */
    gap: 8px;
    align-items: center;
    height: 7rem;
    margin-top: 1rem;
  }

  /* The visible window */
  .carousel-viewport {
    overflow: hidden;
    width: 100%;
  }

  /* The long row of thumbs */
  .carousel-slide {
    display: flex;
    gap: 10px; /* used by JS to compute step */
    padding: 2px; /* a little breathing room */
  }

  /* Thumbs */
  .carousel-slide .thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }

  .carousel-slide .thumb:hover {
    transform: scale(0.9);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  .carousel-slide .thumb.active {
    outline-color: #d6ac02; /* mark selected */
  }

  /* Nav buttons */
  .nav {
    background: #ffcb05;
    color: #fff;
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
  }

  .nav:hover {
    background: #d6ac02;
  }

  .nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .seller_info {
    width: 21rem;
    height: auto;
    padding-left: 0.3rem;
  }
  .seller_info h2 {
    font-size: 23px;
    font-weight: 500;
  }

  .div_scrool_price {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 100%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 19px;
  }
  .price {
    font-size: 18px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }

  .qunt {
    font-size: 15px;
    font-weight: 300;
    margin-top: 1rem;
  }

  .qunt strong {
    color: #ffcd05b6;
    font-size: 15px;

    font-weight: 500;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 15px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .brand h4 {
    font-weight: 400;
  }

  .div_seller_h4 {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcb05;
    color: #000;
    font-weight: 400;
    border-radius: 5px;
    margin-top: 1rem;
  }

  .div_seller_h4 h4 {
    font-weight: 400;
  }

  .p_identity p {
    margin-top: 0.5rem;
    display: flex;
    grid-row: 2rem;
    gap: 0.5rem;
  }

  .p_identity i {
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #ffcb05 solid 2px;
  }

  .p_identity strong {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
  }

  .div_button_pop {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }

  .div_button_pop button {
    cursor: pointer;
    width: 12rem;
    background-color: #ffcb05;
    height: 3rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .div_button_pop button h3 {
    display: none;
  }

  #not_yet {
    background-color: #000;
    color: #fff;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding-top: 50px;
  }
  .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 330px;
    position: relative;
  }
  .modal-close {
    position: absolute;
   
    right: 10px;
    font-size: 18px;
    cursor: pointer;
  }






    .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding-top: 50px;
  }
  .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 90%;
    position: relative;
    top: 1rem;
    border-radius: 10px;
    height: 35rem;
  }
  .modal-close {
    position: absolute;
  
    right: 10px;
    font-size: 18px;
    cursor: pointer;
  }


  .div_model h3 {
 font-weight: 400;
  }

  .div_add_to_cart {
    display: grid;
    align-items: center;
    gap: 0rem;
    
  }

  .image-div_cart {
    width: 21rem;
    height: 10rem;

    border-radius: 20px;
  }

  .div_cart_imaga_intent {
    width: 21rem;
    height: 10rem;
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
  }

  .div_cart_imaga_intent img {
    width: 130px;
    height: 130px;
  }

  .form_cart {
    width: 100%;
    height: auto;

    border-radius: 20px;
  }

  .form_cart strong{
   width: 100%;
   font-size: 19px;
   color: #3f3f3ff6;
   font-weight: 500;
     white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
  }






  
  .price_cart {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 76%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 14px;
  }
  .price {
    font-size: 14px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }


  .brand_cart{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 18px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
    width: 100%;
  }

  .brand_cart h4 {
    font-weight: 400;
    font-size: 13px;
     
  }


  .brand_cart p{
white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    font-size: 13px;
   
    width: 14rem;

  }

  .div_input_Quantity{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;

 
  }
  .label{
    width: 30%;
    height: 2rem;
     background-color: #ffcb05;
     display: flex;
     align-items: center;
     justify-content: start;
     border-radius: 5px;
     padding-left: 1rem;
     font-size: 12.5px;


  }

  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 3rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 25%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
        justify-content: start;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
          width: 8.5rem;
      padding-left: 1rem;
        height: 2.5rem;
        border-radius: 5px;
             
              border: solid 1.5px rgb(0, 0, 0, 0.4);
     }

      .space_input textarea{
         width: 8.5rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 2.5rem;
        resize: none;
        border-radius: 5px;
              border: solid 1.5px rgb(0, 0, 0, 0.4);
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }






      

      .space_content_contact{
        position: absolute;
         background-color: transparent;
   
    width: 95%;
  
    
    height: 27rem;
      }


      .div_contact_head{
        width: 80%;
        height: 3rem;
    
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding-left: 0rem;
      }


         .div_contact_head h3{
            font-weight: 400;
            font-size: 14px;
            
         }


         .div_contact_head span{
            font-size: 25px;
         }



      .whatsapp{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 6rem;

      }

      .whatsapp i{
        font-size:19rem;
        color: #1b1b1b0a;
        font-weight: 200;
      }





      .div_contact_whatsapp{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
       place-content: center;
       place-items: center;
        align-items: center;
        padding-top: 12rem;
      }



       .div_contact_whatsapp p strong{
       color: #000000ec ;
        text-shadow:  1px 1px #000000a4;
        font-size: 21px;
        font-weight: 200;
       }


              .div_contact_whatsapp p{
                
        text-shadow:  1px 1px #000000a4;
        font-size: 18px;
        font-weight: 200;
              }






              

.container_about_us_tab{
    width: 100%;
   
    margin-top: 2rem;
}





.h3_about_us h3{
  
    color: #fff;
    background-color: #000;
    width: 100%;
    height: 4rem;
    font-weight: 400;
    padding-left: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 18px;
    
    font-weight: 400;
}
              
    .tabs {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
       border-bottom: 1px solid #929292a6;
       width: 95%;
       gap: 2rem;
       padding-left: 0.5rem;
    }
    
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.5rem;
      width: auto;
      cursor: pointer;
     font-size: 14px;
     
      margin-right: 5px;
    }

    .tab.active {
      border-bottom: #ffcb05 solid 2.5px;
      color: #ffcb05;
    }

    
    .contain {
      display: none;
    
     width: 100%;
   height: auto;
   
     
    }
    
    .contain.active {
      display: block;
    }

    
    .description_h4_tags h4{
       font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-size: 17px;
    font-style: italic;

    padding-left: 1rem;
    
    }

    .text_feature_des{
      width: 100%;
      font-size: 13.5px;
             font-family: "Kanit", sans-serif;
    font-weight: 300;
  
    font-style:normal;
   width: 98%;
    padding-left: 1.1rem;
    }





    .display_flex_review{
        width: 100%;
        display: grid;
        place-content: center;
        place-items: center;

        
    }

    .rate_the_review{
        width: 100%;
        padding-left: 0.5rem;
        height: auto;
     
    }


    .rate_review{
         width: 100%;
        display: grid;
        align-items: center;
        gap: 0rem;
        margin-top: 1rem;
    }





    .customer_reviews h3{
        font-size: 15px;
        font-weight: 400;
    }


    .star_rev{
        display: block;
    }

    .star_rev strong{
        font-size: 16px;
        font-weight: 500;
        margin-top: 2.7rem;
        color: #ffcb05;
    }


      
    .customer_reviews .star_rev article{
        color: #727272cb;
        font-size: 13px;
       }


         .div-grid_review{
            top: 1rem;
            position: relative;
         }

 .div-grid_review h3{
        font-size: 15px;
        font-weight: 400;
    }
  
         .progress_review{
            display: flex;
            align-items: center;
            gap: 1rem;
         }

       .progress_review span{
      font-size: 16px;
      color: #727272d8;
      font-weight: 500;
       }


        .progress_review span b{
            color: #ffcb05;
            font-weight: 400;
        }


        
       progress {
    -webkit-appearance: none;
    appearance: none;
    width: 16rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}

/* Background of progress (track) */
progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 30px;
}

/* Filled part (value) */
progress::-webkit-progress-value {
    background-color: #ffcb05;  /* your yellow */
    border-radius: 30px;
}

progress::-moz-progress-bar {
    background-color: #ffcb05; /* Firefox */
    border-radius: 30px;
}






.comment{
  margin-top: 3rem;
  background-color: transparent;
 
 
}



  

/* ===== WebKit (Chrome, Edge, Safari) ===== */
.comment::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.comment::-webkit-scrollbar-track {
  background: #ffcb05; /* yellow track */
  border-radius: 4px;
}

.comment::-webkit-scrollbar-thumb {
  background: #727272d8; /* yellow thumb */
  border-radius: 4px;
 
  transition: background-color 0.2s ease;
}

.comment::-webkit-scrollbar-thumb:hover {
  background: #e6b800; /* darker yellow on hover */
}

/* ===== Firefox ===== */
.comment {
  scrollbar-width: thin;                                
  scrollbar-color: #ffcb05 transparent; /* thumb | track */
}

/* ===== Optional: hide scrollbar until hover ===== */
.comment.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none;
}

/* WebKit: hide */
.comment.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show on hover (both engines) */
.comment.hide-scrollbar:hover {
  scrollbar-width: thin; /* Firefox shows again */
}

.comment.hide-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}



.comment h3{
  font-weight: 400;
   width: 100%;
   height: 2rem;

    border-bottom: 1px solid #929292a6;
}


.name_sake{
    width: 100%;
   padding-top: 1rem;
    height: auto;

    border-bottom: 1px solid #929292a6;
}






.div_actual_name{
  display: flex;

  align-items: center;
}



.div_actual_name strong{
  font-size: 14px;
  font-weight: 400;
}



.div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 16rem;

}


.div_comment_rev{
  font-size: 13px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13px;
  color: #242424ea;
  font-weight: 400;
}

.div_push{
  height: 1rem;
}

.delete_here{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: start;
}

.delete_here button{
  width: 9rem;
  background-color: #e6b800;
  height: 2rem;
  border-radius: 30px;
 
}





.pagination a{
  color: #000;
}













.leave_review{
position: relative;
top: 2rem;

 

}


.box_drop{
 width: 21rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}


.review_h4{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}

.review_h4 h4{
  font-weight: 300;
  font-size: 15px;
  background-color: #ffcb05;
  color: #fff;

  text-shadow: 1px 1px #ffcb05;
  height: 3rem;
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}


.form_leave_review{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  place-content: center;
  place-items: center;
gap: 1rem;
  margin-top: 1rem;

}


.name{
  width: 90%;
  height: 3.4rem;
  border-radius: 10px;
    border: solid 1.5px rgb(0, 0, 0, 0.4);
}


.name input{
  background-color: transparent;
  padding-left: 1rem;
  padding-top: 0.5rem;

}


.name_Rating{
width: 90%;
  height: 3.4rem;
  border-radius: 10px;
      border: solid 1.5px rgb(0, 0, 0, 0.4);
    padding-left: 1rem;
  padding-top: 0.5rem;
}


.textarea_review{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
}


.textarea_review textarea{
  resize: none;
   border: solid 1.5px rgb(0, 0, 0, 0.4);
 height: 6rem;
 width: 90%;
 background-color: #e7e7e76e;
 border-radius: 30px;
 padding-left: 2rem;
 padding-top: 2rem;

}



.submit_button{
  width: 100%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}



.submit_button button{
  width: 12rem;
  height: 3rem;
  background-color: #ffcb05;
  border-radius: 30px;
}





.related_product{
  width: 100%;
  height: auto;
  margin-top: 1rem;
  
  padding-top: 4rem;
}


.related_product h3{
  font-size: 20px;
    color: #fff;
    background-color: #000;
    width: 100%;
    height: 4rem;
    font-weight: 400;
    padding-left: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
}


.related_product ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
margin-top: 2rem;
        row-gap: 1rem;
        place-content: center;
        place-items: center;

}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 10.5rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 10.5rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


      .div_class_imgg{
         width: 100%;
        height: 14rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

        .div_class_imgg img {
            max-width: 80%;
            height: 150px;
            object-fit: cover;
        }

        .div_titlee{
             width: 100%;
            display: flex;
            align-items: center;
            justify-content:start;
            padding-left: 0.4rem;
        }


         .div_titlee h4{
           font-size: 13px;
            color: #333;
           font-weight: 500;


              
    font-weight: 500;
   
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }





         
         .div_price_tagg{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;
            margin-top: 0.5rem;

         }
        .pricee {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 12.8px;
           
               
        }
        .old-pricee {
            color:#333;
            font-weight: 500;
            font-size: 12.8px;
           
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }



        .div_rating{
          color: #ffcb05;;
          display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;
              margin-top: 0.3rem;
        }

      


@media (min-width: 375px) {


   
 .div_search {
    width: 19rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

.image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22.4rem;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 22.4rem;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }



  .seller_info {
    width: 22rem;
    height: auto;
    padding-left: 0.3rem;
  }


  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 18rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}



.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}



.box_drop{
 width: 23rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 11rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 11rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }



   
  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 3rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 25%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
        justify-content: start;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
          width: 8.5rem;
      padding-left: 1rem;
        height: 2.5rem;
        border-radius: 5px;
             
              border: solid 1.5px rgb(0, 0, 0, 0.4);
     }

      .space_input textarea{
         width: 8.5rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 2.5rem;
        resize: none;
        border-radius: 5px;
              border: solid 1.5px rgb(0, 0, 0, 0.4);
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }

}

@media (min-width: 390px) {

    .header {
    width: 100%;
    height: 5rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);

    padding-left: 0rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.815);
    backdrop-filter: blur(5px);
  }

  .div_img img {
    width: 50px;
    display: none;
  }

  .a_tag ul {
    display: none;
    align-items: center;
    gap: 3rem;
  }

  .a_tag ul li a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
  }

  .div_search {
    width: 19rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

  .div_search input {
    width: 82%;
    height: 100%;
    background-color: transparent;

    border-radius: 5px;
    padding-left: 1rem;
  }

  .strong {
    background-color: transparent;
    width: 15%;
    border-radius: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffcb05;
  }

  .Items_suggest {
    width: 100%;
    height: auto;
    display: flex;

    justify-content: center;
  }

  #suggestions {
    width: 95%;
    height: 15rem;
    font-size: 13px;
    border: #d6ac02 1.6px solid;
    padding-left: 1rem;
    padding-top: 1rem;
    top: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem; /* ✅ spacing between rows */
    overflow-y: auto;

    padding: 0.5rem 1rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

    background: #fff;
    position: absolute;
    display: none;
    z-index: 1000;
  }

  #suggestions div {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
  }
  #suggestions div:hover {
    background: #d6ac0249;
  }

  #suggestions {
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* For IE & Edge (legacy) */
  }

  .help {
    height: 3rem;

    color: #fff;
    border-radius: 5px;
    display: none;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .help i {
    font-size: 24px;
    color: #ffcb05;
  }

  .help h4 {
    font-weight: 500;
  }

  .help a {
    color: #fff;
  }

  .cart a {
    display: none;
  }

  .cart a i {
    color: #ffcb05;
  }

  .cart a h4 {
    color: #fff;
    font-weight: 500;
  }

  .menu i {
    color: #fff;
    font-size: 27px;
  }

  .product-main {
    position: relative;
    top: 7rem;
  }

  .main_info_div {
    display: grid;
    align-items: center;
    gap: 1.5rem;
    background-color: #fffefd;
    padding-left: 0.5rem;
  }
  .image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23.4rem;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 23.4rem;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }

  .main-image {
    width: 250px;
    height: 250px;
    /* width: 460px;              
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  object-fit: contain; */
  }

  /* Carousel shell */
  .carousel-container {
    position: relative;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto; /* prev | viewport | next */
    gap: 8px;
    align-items: center;
    height: 7rem;
    margin-top: 1rem;
  }

  /* The visible window */
  .carousel-viewport {
    overflow: hidden;
    width: 100%;
  }

  /* The long row of thumbs */
  .carousel-slide {
    display: flex;
    gap: 10px; /* used by JS to compute step */
    padding: 2px; /* a little breathing room */
  }

  /* Thumbs */
  .carousel-slide .thumb {
    width: 90px;
    height: 90px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }

  .carousel-slide .thumb:hover {
    transform: scale(0.9);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  .carousel-slide .thumb.active {
    outline-color: #d6ac02; /* mark selected */
  }

  /* Nav buttons */
  .nav {
    background: #ffcb05;
    color: #fff;
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
  }

  .nav:hover {
    background: #d6ac02;
  }

  .nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .seller_info {
    width: 22.6rem;
    height: auto;
    padding-left: 0.3rem;
  }
  .seller_info h2 {
    font-size: 23px;
    font-weight: 500;
  }

  .div_scrool_price {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 100%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 19px;
  }
  .price {
    font-size: 18px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }

  .qunt {
    font-size: 15px;
    font-weight: 300;
    margin-top: 1rem;
  }

  .qunt strong {
    color: #ffcd05b6;
    font-size: 15px;

    font-weight: 500;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 15px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .brand h4 {
    font-weight: 400;
  }

  .div_seller_h4 {
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcb05;
    color: #000;
    font-weight: 400;
    border-radius: 5px;
    margin-top: 1rem;
  }

  .div_seller_h4 h4 {
    font-weight: 400;
  }

  .p_identity p {
    margin-top: 0.5rem;
    display: flex;
    grid-row: 2rem;
    gap: 0.5rem;
  }

  .p_identity i {
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #ffcb05 solid 2px;
  }

  .p_identity strong {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
  }

  .div_button_pop {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }

  .div_button_pop button {
    cursor: pointer;
    width: 12rem;
    background-color: #ffcb05;
    height: 3rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .div_button_pop button h3 {
    display: none;
  }

  #not_yet {
    background-color: #000;
    color: #fff;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding-top: 50px;
  }
  .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 330px;
    position: relative;
  }
  .modal-close {
    position: absolute;
   
    right: 10px;
    font-size: 18px;
    cursor: pointer;
  }






    .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding-top: 50px;
  }
  .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 90%;
    position: relative;
    top: 1rem;
    border-radius: 10px;
    height: 39rem;
  }
  .modal-close {
    position: absolute;
 
    right: 10px;
    font-size: 18px;
    cursor: pointer;
  }

  .div_add_to_cart {
    display: grid;
    align-items: center;
    gap: 0rem;
    
  }

  .image-div_cart {
    width: 21rem;
    height: 10rem;

    border-radius: 20px;
  }

  .div_cart_imaga_intent {
    width: 21rem;
    height: 10rem;
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
  }

  .div_cart_imaga_intent img {
    width: 130px;
    height: 130px;
  }

  .form_cart {
    width: 100%;
    height: auto;

    border-radius: 20px;
  }

  .form_cart strong{
   width: 100%;
   font-size: 19px;
   color: #3f3f3ff6;
   font-weight: 500;
     white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
  }






  
  .price_cart {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 76%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 14px;
  }
  .price {
    font-size: 14px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }


  .brand_cart{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 18px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
    width: 100%;
  }

  .brand_cart h4 {
    font-weight: 400;
    font-size: 13.5px;
     
  }


  .brand_cart p{
white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    font-size: 13.5px;
   
    width: 14rem;

  }

  .div_input_Quantity{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;

 
  }
  .label{
    width: 30%;
    height: 2rem;
     background-color: #ffcb05;
     display: flex;
     align-items: center;
     justify-content: start;
     border-radius: 5px;
     padding-left: 1rem;
     font-size: 12.5px;


  }

  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 4.7rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 23%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
          width: 9.5rem;
      padding-left: 1rem;
        height: 3.5rem;
        border-radius: 5px;
             
     }

      .space_input textarea{
         width: 9.5rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3.5rem;
        resize: none;
        border-radius: 5px;
             
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }






      




              

.container_about_us_tab{
    width: 100%;
   
    margin-top: 2rem;
}





.h3_about_us h3{
  
    color: #fff;
    background-color: #000;
    width: 100%;
    height: 4rem;
    font-weight: 400;
    padding-left: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 18px;
    
    font-weight: 400;
}
              
    .tabs {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
       border-bottom: 1px solid #929292a6;
       width: 95%;
       gap: 2rem;
       padding-left: 0.5rem;
    }
    
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.5rem;
      width: auto;
      cursor: pointer;
     font-size: 14px;
     
      margin-right: 5px;
    }

    .tab.active {
      border-bottom: #ffcb05 solid 2.5px;
      color: #ffcb05;
    }

    
    .contain {
      display: none;
    
     width: 100%;
   height: auto;
   
     
    }
    
    .contain.active {
      display: block;
    }

    
    .description_h4_tags h4{
       font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-size: 17px;
    font-style: italic;

    padding-left: 1rem;
    
    }

    .text_feature_des{
      width: 100%;
      font-size: 13.5px;
             font-family: "Kanit", sans-serif;
    font-weight: 300;
  
    font-style:normal;
   width: 98%;
    padding-left: 1.1rem;
    }





    .display_flex_review{
        width: 100%;
        display: grid;
        place-content: center;
        place-items: center;

        
    }

    .rate_the_review{
        width: 100%;
        padding-left: 0.5rem;
        height: auto;
     
    }


    .rate_review{
         width: 100%;
        display: grid;
        align-items: center;
        gap: 0rem;
        margin-top: 1rem;
    }





    .customer_reviews h3{
        font-size: 15px;
        font-weight: 400;
    }


    .star_rev{
        display: block;
    }

    .star_rev strong{
        font-size: 16px;
        font-weight: 500;
        margin-top: 2.7rem;
        color: #ffcb05;
    }


      
    .customer_reviews .star_rev article{
        color: #727272cb;
        font-size: 13.5px;
       }


         .div-grid_review{
            top: 1rem;
            position: relative;
         }

 .div-grid_review h3{
        font-size: 15px;
        font-weight: 400;
    }
  
         .progress_review{
            display: flex;
            align-items: center;
            gap: 1rem;
         }

       .progress_review span{
      font-size: 16px;
      color: #727272d8;
      font-weight: 500;
       }


        .progress_review span b{
            color: #ffcb05;
            font-weight: 400;
        }


        
       progress {
    -webkit-appearance: none;
    appearance: none;
    width: 19rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}

/* Background of progress (track) */
progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 30px;
}

/* Filled part (value) */
progress::-webkit-progress-value {
    background-color: #ffcb05;  /* your yellow */
    border-radius: 30px;
}

progress::-moz-progress-bar {
    background-color: #ffcb05; /* Firefox */
    border-radius: 30px;
}






.comment{
  margin-top: 3rem;
  background-color: transparent;
  height: auto;
  width: 100%;
 
}



  

/* ===== WebKit (Chrome, Edge, Safari) ===== */
.comment::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.comment::-webkit-scrollbar-track {
  background: #ffcb05; /* yellow track */
  border-radius: 4px;
}

.comment::-webkit-scrollbar-thumb {
  background: #727272d8; /* yellow thumb */
  border-radius: 4px;
 
  transition: background-color 0.2s ease;
}

.comment::-webkit-scrollbar-thumb:hover {
  background: #e6b800; /* darker yellow on hover */
}

/* ===== Firefox ===== */
.comment {
  scrollbar-width: thin;                                
  scrollbar-color: #ffcb05 transparent; /* thumb | track */
}

/* ===== Optional: hide scrollbar until hover ===== */
.comment.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none;
}

/* WebKit: hide */
.comment.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show on hover (both engines) */
.comment.hide-scrollbar:hover {
  scrollbar-width: thin; /* Firefox shows again */
}

.comment.hide-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}



.comment h3{
  font-weight: 400;
   width: 100%;
   height: 2rem;

    border-bottom: 1px solid #929292a6;
}


.name_sake{
    width: 100%;
   padding-top: 1rem;
    height: auto;

    border-bottom: 1px solid #929292a6;
}






.div_actual_name{
  display: flex;

  align-items: center;
}



.div_actual_name strong{
  font-size: 14px;
  font-weight: 400;
}



.div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 18rem;

}


.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}

.div_push{
  height: 1rem;
}

.delete_here{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: start;
}

.delete_here button{
  width: 9rem;
  background-color: #e6b800;
  height: 2rem;
  border-radius: 30px;
 
}





.pagination a{
  color: #000;
}













.leave_review{
position: relative;
top: 2rem;

 

}


.box_drop{
 width: 23rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}


.review_h4{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}

.review_h4 h4{
  font-weight: 300;
  font-size: 15px;
  background-color: #ffcb05;
  color: #fff;

  text-shadow: 1px 1px #ffcb05;
  height: 3rem;
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}


.form_leave_review{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  place-content: center;
  place-items: center;
gap: 1rem;
  margin-top: 1rem;

}


.name{
  width: 90%;
  height: 3.4rem;
  border-radius: 10px;
   
}


.name input{
  background-color: transparent;
  padding-left: 1rem;
  padding-top: 0.5rem;


}


.name_Rating{
   width: 90%;
  height: 3.4rem;
  border-radius: 10px;
    
    padding-left: 1rem;
  padding-top: 0.5rem;
}


.textarea_review{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
}


.textarea_review textarea{
  resize: none;
 
 height: 6rem;
 width: 90%;
 background-color: #e7e7e76e;
 border-radius: 30px;
 padding-left: 2rem;
 padding-top: 2rem;

}



.submit_button{
  width: 100%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}



.submit_button button{
  width: 12rem;
  height: 3rem;
  background-color: #ffcb05;
  border-radius: 30px;
}





.related_product{
  width: 100%;
  height: auto;
  margin-top: 1rem;
  
  padding-top: 4rem;
}


.related_product h3{
  font-size: 20px;
    color: #fff;
    background-color: #000;
    width: 100%;
    height: 4rem;
    font-weight: 400;
    padding-left: 0.5rem;
    display: flex;
    justify-content: start;
    align-items: center;
}


.related_product ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
margin-top: 2rem;
        row-gap: 1rem;
        place-content: center;
        place-items: center;

}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 11.5rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 11.5rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


      .div_class_imgg{
         width: 100%;
        height: 14rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

        .div_class_imgg img {
            max-width: 80%;
            height: 150px;
            object-fit: cover;
        }

        .div_titlee{
             width: 100%;
            display: flex;
            align-items: center;
            justify-content:start;
            padding-left: 0.4rem;
        }


         .div_titlee h4{
           font-size: 13.4px;
            color: #333;
           font-weight: 500;


              
    font-weight: 500;
   
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }





         
         .div_price_tagg{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;
            margin-top: 0.5rem;

         }
        .pricee {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 13px;
           
               
        }
        .old-pricee {
            color:#333;
            font-weight: 500;
            font-size: 13px;
           
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }



        .div_rating{
          color: #ffcb05;;
          display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;
              margin-top: 0.3rem;
        }





        
      .whatsapp{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 1rem;

      }

}

@media (min-width: 412px) {

   
 .div_search {
    width: 20rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }
.image-space {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:95%;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
   width:95%;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }



    .carousel-slide .thumb {
    width: 96px;
    height: 96px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }


  .seller_info {
   width: 24.7rem;
    height: auto;
    padding-left: 0.3rem;
  }


  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 20rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}



.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}



.box_drop{
 width: 24rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 11.9rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 11.9rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


    .div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 19rem;

}




 .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 90%;
    position: relative;
    top: 1rem;
    border-radius: 10px;
    height: 39rem;
  }



  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 4.7rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 20%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
          width: 9.7rem;
      padding-left: 1rem;
        height: 3.3rem;
        border-radius: 5px;
             
     }

      .space_input textarea{
         width: 9.7rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3.3rem;
        resize: none;
        border-radius: 5px;
             
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }

}

@media (min-width: 414px) {
}

@media (min-width: 428px) {
     
 .div_search {
    width: 23rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

.image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:97%;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
   width:97%;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }



  .seller_info {
   width: 24.7rem;
    height: auto;
    padding-left: 0.3rem;
  }


  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 20rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}



.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}



.box_drop{
 width: 25rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
        width: 12.5rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 12.5rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


       .div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 20rem;

}
















 .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 90%;
    position: relative;
    top: 1rem;
    border-radius: 10px;
    height: 39rem;
  }



  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 4.7rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 20%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
         width: 9.9rem;
      padding-left: 1rem;
        height: 3.3rem;
        border-radius: 5px;
             
     }

      .space_input textarea{
         width: 9.9rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3.3rem;
        resize: none;
        border-radius: 5px;
             
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }
}

@media (min-width: 430px) {

}

@media (min-width: 500px) {


   .div_search {
    width: 24rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

.image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:99%;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
   width:99%;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }





  
    .carousel-slide .thumb {
    width: 99px;
    height: 99px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }



  .seller_info {
   width: 28.7rem;
    height: auto;
    padding-left: 0.3rem;
  }


  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 25rem;
    height: 16px;
    border-radius: 30px;
    overflow: hidden;
}



.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}



.box_drop{
    width: 28.7rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
        width: 14.5rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 14.5rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


       .div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 20rem;

}




 .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 90%;
    position: relative;
    top: 1rem;
    border-radius: 10px;
    height: 39rem;
  }



  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 6.3rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 20%;
        padding-left: 2rem;
        color: #000;
        font-size: 13.5px;
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: flex;
      gap: 1rem;
        flex-wrap: wrap;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
      
        

    }

     .space_input input{
          width: 11.8rem;
      padding-left: 1rem;
        height: 3.3rem;
        border-radius: 5px;
             
     }

      .space_input textarea{
         width: 11.8rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3.3rem;
        resize: none;
        border-radius: 5px;
             
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }
}

@media (min-width: 540px) {


     .div_search {
    width: 24rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

.image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:99%;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
   width:99%;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }





  
    .carousel-slide .thumb {
    width: 99px;
    height: 99px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }



  .seller_info {
   width:31.7rem;
    height: auto;
    padding-left: 0.3rem;
  }


  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 27rem;
    height: 16px;
    border-radius: 30px;
    overflow: hidden;
}



.div_comment_rev{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}


.comment p{
  font-size: 13.5px;
  color: #242424ea;
  font-weight: 400;
}



.box_drop{
    width: 32.7rem;
  height: 36rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;


 
}




      .more_images {
          


           
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
        width: 14.5rem;
          height: 22rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
      position: absolute;
        background-color: transparent;
       width: 16.5rem;
            height: 22rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


       .div_actual_name small{
  font-size: 14px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 20rem;

}





     .space_input input{
          width: 13rem;
      padding-left: 1rem;
        height: 3.3rem;
        border-radius: 5px;
             
     }

      .space_input textarea{
         width: 13rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3.3rem;
        resize: none;
        border-radius: 5px;
             
      }
}


@media (min-width: 640px) {
 html {
    font-size: 14px;
    
  }
  body{
    display: none;
  }
}


@media (min-width: 768px) {
}

@media (min-width: 820px) {
}

@media (min-width: 853px) {
  html {
    font-size: 14px;
  }
}

@media (min-width: 980px) {
  html {
    font-size: 16px;
  }



}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
     body{
    display: block;
  }
  nav {
    position: fixed;
    width: 100%;
    height: auto;
    z-index: 230;
  }

  .header {
    width: 100%;
    height: 5rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);

    padding-left: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    background: rgba(0, 0, 0, 0.815);
    backdrop-filter: blur(5px);
  }

  .div_img img {
    width: 50px;
    display: block;
  }

  .a_tag ul {
    display: flex;
    align-items: center;
    gap: 3rem;
  }

  .a_tag ul li a {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
  }

  .div_search {
    width: 26rem;
    height: 2.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    background-color: #ffffffce;
  }

  .div_search input {
    width: 82%;
    height: 100%;
    background-color: transparent;

    border-radius: 5px;
    padding-left: 1rem;
  }

  .strong {
    background-color: transparent;
    width: 15%;
    border-radius: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffcb05;
  }

  .Items_suggest {
    width: 100%;
    height: auto;
    display: flex;

    justify-content: center;
  }

  #suggestions {
    width: 43%;
    height: 20rem;
    font-size: 13px;

    padding-left: 1rem;
    padding-top: 1rem;
    top: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem; /* ✅ spacing between rows */
    overflow-y: auto;

    padding: 0.5rem 1rem;
    border-radius: 5px;
    box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
    background: #fff;
    position: absolute;
    display: none;
    z-index: 1000;
  }

  #suggestions div {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
  }
  #suggestions div:hover {
    background: #d6ac0249;
  }

  #suggestions {
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none; /* For IE & Edge (legacy) */
  }

  .help {
    height: 3rem;

    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .help i {
    font-size: 24px;
    color: #ffcb05;
  }

  .help h4 {
    font-weight: 500;
  }

  .help a {
    color: #fff;
  }

  .cart a {
    display: flex;
    gap: 0.5rem;
  }

  .cart a i {
    color: #ffcb05;
  }

  .cart a h4 {
    color: #fff;
    font-weight: 500;
  }

  .menu {
    display: none;
  }

  .product-main {
    position: relative;
    top: 7rem;
  }

  .main_info_div {
    display: flex;
    align-items: center;
    gap: 4rem;
    background-color: #fffefd;
    padding-left: 1rem;
  }
  .image-space {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
  }

  .image_GAP {
    width: 100%;
    height: auto;
    justify-content: center;
    display: flex;
    height: 23rem;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .circle_sphare {
    width: 100%;
    height: 100%;
    background-color: #c0c0c00c;
    border-bottom-right-radius: 100%;
    margin-left: 0rem;
  }

  .post_intent {
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    width: 25rem;
    height: 24rem;
    border-radius: 11px;

    padding-top: 3rem;
  }

  .main-image {
    width: 280px;
    height: 280px;
    /* width: 460px;              
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  object-fit: contain; */
  }

  /* Carousel shell */
  .carousel-container {
    position: relative;
    width: 420px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto; /* prev | viewport | next */
    gap: 8px;
    align-items: center;
    height: 7rem;
    margin-top: 1rem;
  }

  /* The visible window */
  .carousel-viewport {
    overflow: hidden;
    width: 100%;
  }

  /* The long row of thumbs */
  .carousel-slide {
    display: flex;
    gap: 10px; /* used by JS to compute step */
    padding: 2px; /* a little breathing room */
  }

  /* Thumbs */
  .carousel-slide .thumb {
    width: 80px;
    height: 80px;
    flex: 0 0 auto;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease,
      outline-color 0.18s ease;
    outline: 2px solid transparent;
  }

  .carousel-slide .thumb:hover {
    transform: scale(1.06);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  }

  .carousel-slide .thumb.active {
    outline-color: #d6ac02; /* mark selected */
  }

  /* Nav buttons */
  .nav {
    background: #ffcb05;
    color: #fff;
    border: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
  }

  .nav:hover {
    background: #d6ac02;
  }

  .nav:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .seller_info {
    width: 50%;
    height: 32rem;
    padding-left: 0rem;
  }
  .seller_info h2 {
    font-size: 35px;
    font-weight: 500;
  }

  .div_scrool_price {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 100%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 25px;
  }
  .price {
    font-size: 20px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }

  .qunt {
    font-size: 18px;
    font-weight: 300;
    margin-top: 1rem;
  }

  .qunt strong {
    color: #ffcd05b6;
    font-size: 18px;

    font-weight: 500;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 18px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .brand h4 {
    font-weight: 400;
  }

  .div_seller_h4 {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcb05;
    color: #000;
    font-weight: 400;
    border-radius: 5px;
    margin-top: 1rem;
  }

  .div_seller_h4 h4 {
    font-weight: 400;
  }

  .p_identity p {
    margin-top: 0.5rem;
    display: flex;
    grid-row: 2rem;
    gap: 0.5rem;
  }

  .p_identity i {
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #ffcb05 solid 2px;
  }

  .p_identity strong {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
  }

  .div_button_pop {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }

  .div_button_pop button {
    cursor: pointer;
    width: 12rem;
    background-color: #ffcb05;
    height: 3rem;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .div_button_pop button h3 {
    display: block;
    font-weight: 300;
  }

  #not_yet {
    background-color: #000;
    color: #fff;
  }

  #not_yet i {
    display: none;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    padding-top: 50px;
  }
  .modal-content {
    background: #fff;
    margin: auto;
    padding: 20px;
    width: 60%;
    position: relative;
    top: 4rem;
    border-radius: 10px;
    height: 30rem;
  }
  .modal-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 18px;
    cursor: pointer;
  }

  .div_add_to_cart {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-top: 1rem;
  }

  .image-div_cart {
    width: 50%;
    height: 25rem;

    border-radius: 20px;
  }

  .div_cart_imaga_intent {
    width: 26rem;
    height: 30rem;
    position: absolute;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
  }

  .div_cart_imaga_intent img {
    width: 260px;
    height: 260px;
  }

  .form_cart {
    width: 50%;
    height: 25rem;

    border-radius: 20px;
  }

  .form_cart strong{
   width: 100%;
   font-size: 25px;
   color: #3f3f3ff6;
   font-weight: 500;
     white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
  }






  
  .price_cart {
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 3rem;
    width: 100%;
    border-bottom: #63636360 solid 1.5px;
  }

  .old-price {
    color: rgb(31, 31, 31);
    font-size: 25px;
  }
  .price {
    font-size: 20px;
    color: #3f3f3ff6;
    text-decoration: line-through;
  }


  .brand_cart{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 400;
    font-size: 18px;
    margin-top: 0.5rem;
    font-family: "Kanit", sans-serif;
    font-weight: 200;
    font-style: italic;
  }

  .brand_cart h4 {
    font-weight: 400;
     
  }


  .brand_cart p{
white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
  }


    .brand_cart h4 {
    font-weight: 400;
    font-size: 15px;
     
  }


  .brand_cart p{
white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    font-size: 14px;
   
    width: 18rem;

  }

  .div_input_Quantity{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.3rem;
    margin-top: 1rem;

 
  }
  .label{
    width: 30%;
    height: 3rem;
     background-color: #ffcb05;
     display: flex;
     align-items: center;
     justify-content: start;
     border-radius: 5px;
     padding-left: 1rem;
     font-size: 13.5px;


  }

  .quntyy{
    display: flex;
    align-items: center;
      justify-content: start;
    gap: 1rem;
  }

  .quntyy button{

    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
       border-radius: 5px;
       cursor: pointer;
  }

    .quntyy input{
        width: 40%;
        padding-left: 3rem;
        color: #000;
        font-size: 13.5px;
        
    }


    .space_input{
        margin-top: 1rem;
    }



    .input_grid_cart{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        grid-row: 1rem;
        grid-column: 1rem;
        row-gap: 1rem;
        column-gap: 1rem;

    }

     .space_input input{
          width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
     }

      .space_input textarea{
         width: 11.5rem;
             padding-left: 1rem;
             padding-top: 0.5rem;
        height: 3rem;
        resize: none;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }

      .space_input button{
        background-color: #ffcb05;

margin-top: 1rem;
         width: 11.5rem;
      padding-left: 1rem;
        height: 3rem;
        border-radius: 5px;
              box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
      }








      .space_content_contact{
        position: absolute;
         background-color: transparent;
   
    width: 95%;
  
    
    height: 27rem;
      }


      .div_contact_head{
        width: 100%;
        height: 4rem;
        background-color: #ffcb05;
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding-left: 1rem;
      }


         .div_contact_head h3{
            font-weight: 400;
            font-size: 20px;
            
         }


         .div_contact_head span{
            font-size: 25px;
         }



      .whatsapp{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 6rem;

      }

      .whatsapp i{
        font-size:23rem;
        color: #ffcd055d;
      }





      .div_contact_whatsapp{
        width: 100%;
        display: grid;
        place-content: center;
        place-items: center;
        align-items: center;
        padding-top: 10rem;
                padding-left: 0rem;
      }



       .div_contact_whatsapp p strong{
       color: #d6ac02ec ;
        text-shadow:  1px 1px #000000a4;
        font-size: 36px;
        font-weight: 300;
       }


              .div_contact_whatsapp p{
                 color: #d6ac02ec ;
        text-shadow:  1px 1px #000000a4;
        font-size: 28px;
        font-weight: 300;
              }







.container_about_us_tab{
    width: 100%;
    
    margin-top: 3rem;
}


.h3_about_us h3{
   
     font-size: 20px;
    color: #fff;
    font-weight: 400;
    padding-left: 1.4rem;
}
              
    .tabs {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
       border-bottom: 1px solid #929292a6;
       width: 99%;
       gap: 7rem;
       padding-left: 1.4rem;
    }
    
    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3.5rem;
      width: auto;
      cursor: pointer;
    
          font-size: unset;
      margin-right: 5px;
    }

    .tab.active {
      border-bottom: #ffcb05 solid 2.5px;
      color: #ffcb05;
    }

    
    .contain {
      display: none;
   
     width: 100%;
   height: auto;
     
    }
    
    .contain.active {
      display: block;
    }



    .description_h4_tags h4{
       font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-size: 30px;
    font-style: italic;
  
    padding-left: 1.4rem;
    
    }

    .text_feature_des{
      width: 100%;
      font-size: 16px;
             font-family: "Kanit", sans-serif;
    font-weight: 300;
  
    font-style:normal;
   width: 98%;
    padding-left: 1.4rem;
    }



    .display_flex_review{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rate_the_review{
        width: 55%;
        padding-left: 0.3rem;
        height: auto;
        
     
    }

    .leave_review{

 height: auto;
 position: relative;
 top: 0rem;
 width:40%;
}



    .rate_review{
         width: 100%;
        display: flex;
        align-items: center;
        gap: 10rem;
        margin-top: 2rem;
    }





    .customer_reviews h3{
        font-size: 20px;
        font-weight: 400;
    }


    .star_rev{
        display: block;
    }

    .star_rev strong{
        font-size: 34px;
        font-weight: 500;
        margin-top: 2.7rem;
        color: #ffcb05;
    }


      
    .customer_reviews .star_rev article{
        color: #727272cb;
        font-size: 14px;
       }


         .div-grid_review{
            top: 1rem;
            position: relative;
         }

 .div-grid_review h3{
        font-size: 20px;
        font-weight: 400;
    }
  
         .progress_review{
            display: flex;
            align-items: center;
            gap: 1rem;
         }

       .progress_review span{
      font-size: 16px;
      color: #727272d8;
      font-weight: 500;
       }


        .progress_review span b{
            color: #ffcb05;
            font-weight: 400;
        }


        
       progress {
    -webkit-appearance: none;
    appearance: none;
    width: 16rem;
    height: 15px;
    border-radius: 30px;
    overflow: hidden;
}

/* Background of progress (track) */
progress::-webkit-progress-bar {
    background-color: #eee;
    border-radius: 30px;
}

/* Filled part (value) */
progress::-webkit-progress-value {
    background-color: #ffcb05;  /* your yellow */
    border-radius: 30px;
}

progress::-moz-progress-bar {
    background-color: #ffcb05; /* Firefox */
    border-radius: 30px;
}






.comment{
  margin-top: 3rem;
  background-color: transparent;
  height: auto;
  width: 95%;
 
}



  

/* ===== WebKit (Chrome, Edge, Safari) ===== */
.comment::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.comment::-webkit-scrollbar-track {
  background: #ffcb05; /* yellow track */
  border-radius: 4px;
}

.comment::-webkit-scrollbar-thumb {
  background: #727272d8; /* yellow thumb */
  border-radius: 4px;
 
  transition: background-color 0.2s ease;
}

.comment::-webkit-scrollbar-thumb:hover {
  background: #e6b800; /* darker yellow on hover */
}

/* ===== Firefox ===== */
.comment {
  scrollbar-width: thin;                                
  scrollbar-color: #ffcb05 transparent; /* thumb | track */
}

/* ===== Optional: hide scrollbar until hover ===== */
.comment.hide-scrollbar {
  /* Firefox */
  scrollbar-width: none;
}

/* WebKit: hide */
.comment.hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Show on hover (both engines) */
.comment.hide-scrollbar:hover {
  scrollbar-width: thin; /* Firefox shows again */
}

.comment.hide-scrollbar:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}



.comment h3{
  font-weight: 400;
   width: 90%;
   height: 2rem;

    border-bottom: 1px solid #929292a6;
}


.name_sake{
    width: 90%;
   padding-top: 1rem;
    height: auto;

    border-bottom: 1px solid #929292a6;
}






.div_actual_name{
  display: flex;
  gap: 19rem;
  align-items: center;
}



.div_actual_name strong{
  font-size: 16px;
  font-weight: 400;
}



.div_actual_name small{
  font-size: 20px;
  font-weight: 400;
  color: #727272d8;
  position: absolute;
  left: 35rem;

}


.div_comment_rev{
  font-size: 14px;
  color: #242424ea;
  font-weight: 400;
}

.div_push{
  height: 1rem;
}

.delete_here{
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: start;
}

.delete_here button{
  width: 9rem;
  background-color: #e6b800;
  height: 2rem;
  border-radius: 30px;
 
}





.pagination a{
  color: #000;
}















.box_drop{
 width: 30rem;
  height: 35rem;
  background-color: transparent;border-radius: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
   border: solid 2px #ffcb05;

 
}


.review_h4{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
}

.review_h4 h4{
  font-weight: 300;
  font-size: 18px;
  background-color: #ffcb05;
  color: #fff;

  text-shadow: 1px 1px #ffcb05;
  height: 3rem;
  width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}


.form_leave_review{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  place-content: center;
  place-items: center;
  gap: 1.5rem;
  margin-top: 1rem;

}


.name{
  width: 13rem;
  height: 3.4rem;
  border-radius: 10px;
   
}


.name input{
  background-color: transparent;
  padding-left: 1rem;
  padding-top: 0.5rem;

}


.name_Rating{
  width: 13rem;
  height: 3.4rem;
  border-radius: 10px;
   
    padding-left: 1rem;
  padding-top: 0.5rem;
}


.textarea_review{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
}


.textarea_review textarea{
  resize: none;

 height: 14rem;
 width: 90%;
 background-color: #e7e7e76e;
 border-radius: 30px;
 padding-left: 2rem;
 padding-top: 2rem;

}



.submit_button{
  width: 100%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}



.submit_button button{
  width: 12rem;
  height: 3rem;
  background-color: #ffcb05;
  border-radius: 30px;
}




.related_product{
  width: 100%;
  height: auto;
  margin-top: 0rem;
 
  padding-top: 3.5rem;
}


.related_product h3{
  font-size: 20px;
    color: #fff;
    font-weight: 400;
    padding-left: 1.4rem;
}


.related_product ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
margin-top: 2rem;
        row-gap: 1rem;

}




      .more_images {
          


            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
          width: 18rem;
          height: 23rem;
          border-radius: 11px;
        }

      
        .circle_sphare{
        width: 100%;
        height: 100%;
        background-color: #c0c0c00c;
        border-bottom-right-radius: 100%;
        margin-left: 0rem;
    }




    
    .post_intentt{
        
        position: absolute;
        background-color: transparent;
        width: 18rem;
          height: 23rem;
          border-radius: 11px;
         
          padding-top: 1rem;
          
    }


      .div_class_imgg{
        width: 100%;
        height: 15rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

        .div_class_imgg img {
            max-width: 140%;
            height: 180px;
            object-fit: cover;
        }

        .div_titlee{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }


         .div_titlee h4{
            font-size: 18px;
            color: #333;
           white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;  
            font-weight: 500;
         }



}