@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);
}





.cookie_msg {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 500px;
  background: #fff;
  color: #222;
  padding: 15px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  animation: slideUp 0.4s ease;
  z-index: 9999;

}

.cookie_msg h2 {
  font-size: 1rem;
  margin: 0 0 5px;
  font-weight: 500;
}

.cookie_msg p {
  font-size: 0.9rem;
  color: #444;
  margin: 0;
}

.cookie_msg .close {
  position: absolute;
  top: 8px;
  right: 15px;
  font-size: 23px;
  color: #777;
  cursor: pointer;
  transition: 0.2s;
  font-weight: bold;
}
.cookie_msg .close:hover {
  color: #000;
}

/* Animation */
@keyframes slideUp {
  from {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

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;
                    }



    .paymentbar{
    
      background: #001f3edc;
        height: 100%;
        align-items: center;
        z-index: 1890;
        width: 100%;
       justify-content: center;
        position: fixed;
        box-shadow: 0 0 3px rgb(0, 0, 0, 0.4);
    }
                    
    .overlay{
      display: none;
    }


  .popup {
         background: #001f3edc;
    width: 100%;
         height: 78%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                background-color: #d6ac02;
                height: 2rem;
                width: 2rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.5rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 5.4rem;
           width: 7rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 12px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 11px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


       #a_div{
        display: flex;
        align-items: center;
        
       }




       
        .container{
            padding-top: 6rem;
               width: 100%;
               
        }


          .features{
            padding-left: 0.9rem;
          }
        .features h2{
            font-size: 15px;
            position: relative;
            top: 2rem;
            font-weight: 500;
              font-size: 15px;
        }


           .features b{
            color: #ffcb05;
           }

       .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        background-color: #ffcd0510;
        font-size: 14px;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

       .cate h3{
font-weight: 500;
              font-size: 15px;
       }
     

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 27px;
 font-weight: 400;
    }


      .div_class_img{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
           border-radius: 11px;
           padding-top: 1rem;
      }

        .div_class_img img {
           
            height: 125px;
              width: 95%;
        height:180px;
            object-fit:fill;
              border-radius: 11px;
            
        }

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


         .div_title h4{
            font-size: 12px;
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 13px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 12.8px;
           
               
        }
        .old-price {
            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;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 13px;
        }
        .stars {
            color: orange;
            font-size: 14px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }



  @media (min-width: 375px) {




    .category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 27px;
 font-weight: 400;
    }


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

        .div_class_img img {
             width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 13.7px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 13.8px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 13.8px;
           
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 13.8px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
            padding-left: 0.5rem;
            justify-content: start;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 13px;
        }
        .stars {
            color: orange;
            font-size: 14px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }
    
  }


  @media (min-width: 390px) {

    

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: 1.1rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }





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








                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height: 82%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                background-color: #d6ac02;
                height: 2rem;
                width: 2rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.5rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 5.9rem;
           width: 7.7rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 12.5px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 12.5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }





                    
          .features{
            padding-left: 0.9rem;
          }
        .features h2{
            font-size: 15px;
            position: relative;
            top: 2rem;
            font-weight: 500;
              font-size: 15px;
        }


           .features b{
            color: #ffcb05;
           }

       .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        background-color: #ffcd0510;
        font-size: 15px;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

       .cate h3{
font-weight: 500;
              font-size: 15px;
       }

























       
.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 27px;
 font-weight: 400;
    }


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

        .div_class_img img {
          width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 13.7px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 13.8px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 13.8px;
           
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 13.8px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
             padding-left: 0.5rem;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 13px;
        }
        .stars {
            color: orange;
            font-size: 14px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }


                    

  }


  @media (min-width: 412px) {
    
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: 1.1rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }





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





    
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height: 84%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                background-color: #d6ac02;
                height: 2rem;
                width: 2rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.5rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 6rem;
           width: 8rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 13.5px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 13.5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }











                    
       
.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 30px;
 font-weight: 400;
    }


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

        .div_class_img img {
             width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 14.9px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
          font-size: 14.5px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
           font-size: 14.5px;
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 14.5px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
             padding-left: 0.5rem;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 14.5px;
        }
        .stars {
            color: orange;
            font-size: 14.5px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }



  }

  @media (min-width: 414px) {


 
  }

  @media (min-width: 428px) {
          
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: 1.3rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }





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







                    
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height: 84%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                background-color: #d6ac02;
                height: 3rem;
                width: 3rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.1rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 7rem;
           width: 8.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 13.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 13.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }









                    .category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 30px;
 font-weight: 400;
    }


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

        .div_class_img img {
            width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 14.9px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
          font-size: 14.5px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
           font-size: 14.5px;
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 14.5px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
             padding-left: 0.5rem;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 14.5px;
        }
        .stars {
            color: orange;
            font-size: 14.5px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }

  }

  @media (min-width: 430px) {
     .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: 1.4rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }
  }


  @media (min-width: 500px) {




         
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height:80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                cursor: pointer;
                background-color: #d6ac02;
                height: 2rem;
                width: 2rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.6rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 5rem;
           width: 9.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 13.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 13.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }





    .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;
            }





                             .category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 30px;
 font-weight: 400;
    }


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

        .div_class_img img {
         width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 14.9px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
          font-size: 14.5px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
           font-size: 14.5px;
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 14.5px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
             padding-left: 0.5rem;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 14.5px;
        }
        .stars {
            color: orange;
            font-size: 14.5px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }
  }

  @media (min-width: 540px) {




    

         

         
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height:80%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 0.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                cursor: pointer;
                background-color: #d6ac02;
                height: 2rem;
                width: 2rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.6rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 5rem;
           width: 10.9rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 13.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 13.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }




        

    .div_search{
           
           width: 25rem;
           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;
            }









                                       .category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(2, 1fr);
        place-content: center;
        place-items: center;
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 96%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;
       

    }

       .product {
          


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

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



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


    .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 30px;
 font-weight: 400;
    }


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

        .div_class_img img {
             width: 95%;
                height:180px;
            object-fit: fill;
            
        }

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


         .div_title h4{
         
            color: #333;
            width: 90%;
            font-weight: 500;

margin-top: 2rem;
              font-size: 14.9px;
    font-weight: 500;
    
    white-space: nowrap;       /* keep in single line */
    overflow: hidden;          /* hide overflow */
    text-overflow: ellipsis;   /* show ... */
    max-width: 90%;   
         }


         


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 0.3rem;
            gap: 1rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
          font-size: 14.5px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
           font-size: 14.5px;
            border-radius: 5px;
             height: 2.4rem;
            width: 5rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
           background:#d6ac02;
            color: white;
          font-size: 14.5px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
             padding-left: 0.5rem;
            justify-content: start;
            gap: 1rem;
            margin-top: 0.4rem;
        }


        .percent_off p{
           color:rgba(37, 37, 37, 0.76); 
           font-weight:500;
           font-size: 14.5px;
        }
        .stars {
            color: orange;
            font-size: 14.5px;
        }


                .pagination{
                    padding-left: 0.5rem;
                }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
            text-decoration: none;
            color: black;
            position: relative;
            top: 3rem;
        }


        .pagination a.active {
            background: #d6ac02;
            color: white;
            font-weight: bold;
        }
  }






  @media (min-width: 640px) {
    html{
        font-size: 10px;
      }


      


          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: 1rem;
                     display: flex;
                     align-items: center;
                     gap: 2rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }



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

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


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




           .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;
            }

               .div_search input{
               width: 82%;
               height: 100%;
               background-color: transparent;
               
               border-radius: 5px;
               padding-left: 1rem;
               
               }


                .div_search input::placeholder{
                    font-size: 12px;
                }

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

               .Items_suggest{
                width: 100%;
                height: auto;
                display: flex;
             
                justify-content: center;
           
               }

               #suggestions{
                width: 70%;
                  height: 20rem; 
                font-size: 12px;
             
                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;
                    display: none;
               }



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


                   .help h4{
                    font-weight: 500;
                   }



                    .help a{
                        color: #fff;
                    }


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

                    .cart a i{
                        color: #ffcb05;
                    }

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


                         .menu{
                            display: block;
                          
                         }


                           .menu i{
  font-size: 15px;
                           }
                         





         
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height:90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 17.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              place-content: center;
              place-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                cursor: pointer;
                background-color: #d6ac02;
                height: 3rem;
                width: 3rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 1.6rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 6rem;
           width: 19.9rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 11.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 11.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }




       #a_div{
        display: flex;
        align-items: center;
       }






       

        .container{
            padding-top: 9rem;
               width: 100%;
               background-color: transparent;
               
        }


            .features{
            padding-left: 1rem;
          }
        .features h2{
            font-size: 12px;
            position: relative;
            top: 2rem;
            font-weight: 500;
        }


           .features b{
            color: #ffcb05;
           }

           .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        color: aliceblue;
        background-color: #0c0c0c;
        font-weight: 500;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center; 
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 85%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;


    }

       .product {
          


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

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




       .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 15px;
 font-weight: 400;
    }


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


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

        .div_class_img img {
             width:80%;
                height:130px;
            object-fit: fill;
        }

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


         .div_title h4{
            font-size: 11px;
            color: #333;
            width: 90%;
            font-weight: 500;
         }


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 1rem;
            gap: 6rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 11px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 11px;
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
            border-radius: 5px;
             height: 2.4rem;
            width: 6rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background:#d6ac02;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6rem;
         
        }
        .stars {
            color: orange;
            font-size: 11px;
        }

        .pagination{
            padding-left: 1rem;
        }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
  
            text-decoration: none;
            color: black;
        }
        .pagination a.active {
            background: #000;
            color: white;
            font-weight: bold;
        }
            



        .wishlist-alert {
  position: fixed;
  top: 20px;
  right: -300px;
  background: linear-gradient(45deg, #28a745, #4caf50);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: bold;
  font-size: 15px;
  z-index: 9999;
  transition: all 0.5s ease;
  opacity: 0;
}

.wishlist-alert.show {
  right: 20px;
  opacity: 1;
}


    }


    @media (min-width: 768px) {






        
          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: 1rem;
                     display: flex;
                     align-items: center;
                     gap: 3rem;
                      background: rgba(0, 0, 0, 0.815);
                      backdrop-filter: blur(5px);
            }



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

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


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




           .div_search{
           
           width: 30rem;
           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;
               
               }


                .div_search input::placeholder{
                    font-size: 12px;
                }

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

               .Items_suggest{
                width: 100%;
                height: auto;
                display: flex;
             
                justify-content: center;
           
               }

               #suggestions{
                width: 70%;
                  height: 20rem; 
                font-size: 12px;
             
                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;
                    display: none;
               }



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


                   .help h4{
                    font-weight: 500;
                   }



                    .help a{
                        color: #fff;
                    }


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

                    .cart a i{
                        color: #ffcb05;
                    }

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


                          .menu{
                            display: block;
                          
                         }


                           .menu i{
  font-size: 15px;
                           }
                         





         
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height:90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 28.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              place-content: center;
              place-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                cursor: pointer;
                background-color: #d6ac02;
                height: 4.7rem;
                width: 4.7rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 2.6rem;
                top: 3rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 8rem;
           width: 22.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 11.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 11.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .a_div{
            display: flex;
            align-items: center;

        }




             
  
        
   

       #a_div{
        display: flex;
        align-items: center;
       }






       

        .container{
            padding-top: 9rem;
               width: 100%;
               background-color: transparent;
               
        }


            .features{
            padding-left: 1rem;
          }
        .features h2{
            font-size: 12px;
            position: relative;
            top: 2rem;
            font-weight: 500;
        }


           .features b{
            color: #ffcb05;
           }

           .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        color: aliceblue;
        background-color: #0c0c0c;
        font-weight: 500;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center; 
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 85%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;


    }

       .product {
          


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

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




       .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 15px;
 font-weight: 400;
    }


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


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

       

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


         .div_title h4{
            font-size: 11px;
            color: #333;
            width: 90%;
            font-weight: 500;
         }


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 1rem;
            gap: 6rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 11px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 11px;
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
            border-radius: 5px;
             height: 2.4rem;
            width: 6rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background:#d6ac02;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 5rem;
            padding-left: 1rem;
         
        }
        .stars {
            color: orange;
            font-size: 11px;
        }

        .pagination{
            padding-left: 1rem;
        }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
  
            text-decoration: none;
            color: black;
        }
        .pagination a.active {
            background: #000;
            color: white;
            font-weight: bold;
        }
            



        .wishlist-alert {
  position: fixed;
  top: 20px;
  right: -300px;
  background: linear-gradient(45deg, #28a745, #4caf50);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: bold;
  font-size: 15px;
  z-index: 9999;
  transition: all 0.5s ease;
  opacity: 0;
}

.wishlist-alert.show {
  right: 20px;
  opacity: 1;
}

    }

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

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

















          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: 1rem;
                     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: 13px;
                 color: #fff;
                font-weight:400;
            }




           .div_search{
           
           width: 15rem;
           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: 70%;
                  height: 20rem; 
                font-size: 12px;
             
                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;
                    display: none;
               }



               .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: block;
                          
                         }


                           .menu i{
  font-size: 15px;
                           }
                         





         
                      .overlay{
      display: none;
    }


  .popup {
     
    width: 100%;
         height:90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  background: rgba(19, 19, 19, 0.336);


  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
 
  pointer-events: none;
  z-index: 1000;
     backdrop-filter: blur(5px);
}

/* Hidden state */
.hidden {
  display: none;
}

/* 🎬 Pop-in animation */
@keyframes popIn {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.1); /* wave overshoot */
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* 🎬 Pop-out animation */
@keyframes popOut {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* Add animation classes */
.pop-in {
  animation: popIn 0.6s ease forwards;
  pointer-events: auto;
}

.pop-out {
  animation: popOut 0.4s ease forwards;
}


                    



                    .category-filter{
                    
              background-color: transparent;
                        height: 9rem;
                        padding-top: 28.5rem;
                        width: 100%;
                      


                        margin-bottom: 20px;
          
              display: grid;
              flex-wrap: wrap;
              grid-template-columns: repeat(3, 1fr);
              align-items: center;
          gap: 0.5rem;
              align-items: center;
              place-content: center;
              place-items: center;
              
                   display: none;
                      
                    }



                       #phone_sort{
                        display: grid;
                        background-color: transparent;
                       }


            .popup h2{
                cursor: pointer;
                background-color: #d6ac02;
                height: 4.7rem;
                width: 4.7rem;
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                float: right;
                position: relative;
                right: 2.6rem;
                top: 3rem;
            }


        
        .category-filter a {
     
            text-decoration: none;
           background-color: #ffffff8c;
           height: 8rem;
           width: 19.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
           font-size: 12.9px;
            border-radius: 4px;
            color: #333;
            box-shadow: 0 0 1px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: rgba(211, 145, 3, 0.671);
            color: #fff;
            
            font-weight: 500;
            font-size: 12.9px;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .a_div{
            display: flex;
            align-items: center;

        }






        .a_div{
            display: flex;
            align-items: center;

        }




             
  
        
    

       #a_div{
        display: flex;
        align-items: center;
       }






       

        .container{
            padding-top: 9rem;
               width: 100%;
               background-color: transparent;
               
        }


            .features{
            padding-left: 1rem;
          }
        .features h2{
            font-size: 25px;
            position: relative;
            top: 2rem;
            font-weight: 500;
        }


           .features b{
            color: #ffcb05;
           }

           .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        color: aliceblue;
        background-color: #0c0c0c;
        font-weight: 500;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center; 
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }


       .form_product button{
   width: 2.7rem;
   height: 2.7rem;
 
         box-shadow: 0 0 rgba(0, 0, 0, 0.582) ;
   border-radius: 10px;
 position: relative;
 right: 0.3rem;
 float: right;
 border: #0202022a 1px solid;
 color: rgb(5, 5, 5);
 font-size: 27px;
 font-weight: 400;
    }


    .box_partner{
        width: 85%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;


    }

       .product {
          


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

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



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


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

        .div_class_img img {
            width: 95%;
                height:180px;
            object-fit: fill;
        }

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


         .div_title h4{
            font-size: 15px;
            color: #333;
            width: 90%;
            font-weight: 500;
         }


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 1rem;
            gap: 6rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 15px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 15px;
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
            border-radius: 5px;
             height: 2.4rem;
            width: 6rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background:#d6ac02;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7rem;
            padding-left: 0rem;
        }
        .stars {
            color: orange;
            font-size: 16px;
        }

        .pagination{
            padding-left: 1rem;
        }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
  
            text-decoration: none;
            color: black;
        }
        .pagination a.active {
            background: #000;
            color: white;
            font-weight: bold;
        }
            



        .wishlist-alert {
  position: fixed;
  top: 20px;
  right: -300px;
  background: linear-gradient(45deg, #28a745, #4caf50);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: bold;
  font-size: 15px;
  z-index: 9999;
  transition: all 0.5s ease;
  opacity: 0;
}

.wishlist-alert.show {
  right: 20px;
  opacity: 1;
}

      }
      
      
      @media (min-width: 980px) {
        html{
            font-size: 16px;
          }
        
          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: 1rem;
                     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: 13px;
                 color: #fff;
                font-weight:400;
            }




           .div_search{
           
           width: 15rem;
           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: 70%;
                  height: 20rem; 
                font-size: 12px;
             
                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;
                    display: none;
               }



               .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;
                         }



                    .category-filter{
                        
                 
                       backdrop-filter: blur(0px);
           
                        background-color: #ffcb05;
                        height: 6rem;
                        padding-top: 0.5rem;
                         margin-bottom: 20px;
            padding-left:0rem;
              display: flex;
              flex-wrap: nowrap;
              gap: 0.6rem;
              overflow: hidden;
              align-items: center;
                      
                    }



       
        .category-filter a {
            
            text-decoration: none;
            background-color: transparent;
           font-size: 12px;
            border-radius: 0px;
            color: #333;
            display: flex;
           
        
            
        }
        .category-filter a.active {
            background-color: rgb(20, 20, 20);
            color: #fff;
            font-weight: 500;
            width: auto;
            
        }


        .a_div{
            display: flex;
            align-items: center;

        }




             
  
        
        .category-filter a {
     
           
            width: auto;
            
        
            
            box-shadow: 0 0 0px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: transparent;
            color: #fff;
            height: 1.5rem;
             width: auto;
            font-weight: 500;
            font-size: 12px;
            border-bottom: solid 2px #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }


       #a_div{
        display: flex;
        align-items: center;
       }






       

        .container{
            padding-top: 13rem;
               width: 100%;
               background-color: transparent;
               
        }


            .features{
            padding-left: 1rem;
          }
        .features h2{
            font-size: 25px;
            position: relative;
            top: 2rem;
            font-weight: 500;
        }


           .features b{
            color: #ffcb05;
           }

           .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        color: aliceblue;
        background-color: #0c0c0c;
        font-weight: 500;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        align-items: center; 
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 85%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;


    }

       .product {
          


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

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



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


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

        .div_class_img img {
             width: 95%;
                height:180px;
            object-fit: fill;
        }

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


         .div_title h4{
            font-size: 15px;
            color: #333;
            width: 90%;
            font-weight: 500;
         }


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 1rem;
            gap: 6rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 15px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 15px;
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
            border-radius: 5px;
             height: 2.4rem;
            width: 6rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background:#d6ac02;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7rem;
        }
        .stars {
            color: orange;
            font-size: 16px;
        }

        .pagination{
            padding-left: 1rem;
        }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
  
            text-decoration: none;
            color: black;
        }
        .pagination a.active {
            background: #000;
            color: white;
            font-weight: bold;
        }
            



        .wishlist-alert {
  position: fixed;
  top: 20px;
  right: -300px;
  background: linear-gradient(45deg, #28a745, #4caf50);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: bold;
  font-size: 15px;
  z-index: 9999;
  transition: all 0.5s ease;
  opacity: 0;
}

.wishlist-alert.show {
  right: 20px;
  opacity: 1;
}


        
        
        
        }


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

  

          @media (min-width: 1280px) {
              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;
                         }



                    .category-filter{
                        
                 
                       backdrop-filter: blur(0px);
           
                        background-color: #ffcb05;
                        height: 6rem;
                        padding-top: 0.5rem;
                         margin-bottom: 20px;
            padding-left:0rem;
              display: flex;
              
              gap: 1rem;
              overflow: hidden;
              align-items: center;
                      
                    }



       
        .category-filter a {
            margin-right: 12px;
            text-decoration: none;
            background-color: transparent;
           font-size: 13px;
            border-radius: 0px;
            color: #333;
            display: flex;
           
        
            
        }
        .category-filter a.active {
            background-color: rgb(247, 247, 247);
            color: rgb(247, 247, 247);
            font-weight: 500;
        }


        .a_div{
            display: flex;
            align-items: center;

        }




             
  
        
        .category-filter a {
     
           
            width: auto;
            
        
            
            box-shadow: 0 0 0px rgb(0, 0, 0, 0.4);
            
           
        
            
        }
        .category-filter a.active {
            background-color: transparent;
            color: rgb(247, 247, 247);
            height: 1.5rem;
            width:auto;
            font-weight: 500;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;

            border-bottom: solid 2px #000;
        }


       #a_div{
        display: flex;
        align-items: center;
       }



        .container{
            padding-top: 13rem;
               width: 100%;
               background-color: transparent;
               
        }


            .features{
            padding-left: 1rem;
          }
        .features h2{
            font-size: 25px;
            position: relative;
            top: 2rem;
            font-weight: 500;
        }


           .features b{
            color: #ffcb05;
           }

           .cate{
        padding-left: 1rem;
        width: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        margin-top: 3rem;
        color: aliceblue;
        background-color: #0c0c0c;
        font-weight: 500;
   /* margin:20px 0; border-bottom:1px solid #ccc; padding-bottom:5px; */
       }

.category-block{
    width: 100%;
        height: auto;
        display: flex;
         display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        align-items: center; 
}
        
    .partner{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;

    }



    .box_partner{
        width: 85%;
        height: auto;
        
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 0rem;
        row-gap: 0rem;
        margin-top: 1rem;


    }

       .product {
          


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

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



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


      .div_class_img{
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
          border-radius: 11px;
          padding-top: 1rem;
      }

        .div_class_img img {
           width: 90%;
                height:180px;
            object-fit: fill;
        height:180px;
            object-fit:fill;
              border-radius: 11px;
        }

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


         .div_title h4{
            font-size: 15px;
            color: #333;
            width: 90%;
            font-weight: 500;
         }


         .div_price_tag{
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 1rem;
            gap: 6rem;

         }
        .price {
            color: #929292f5;
            font-weight: bold;
            text-decoration: line-through;
            font-weight: 500;
            font-size: 15px;
           
               
        }
        .old-price {
            color:#333;
            font-weight: 500;
            font-size: 15px;
            box-shadow: 0 0 1.5px rgb(0, 0, 0, 0.4);
            border-radius: 5px;
             height: 2.4rem;
            width: 6rem;
            background-color: #ffcb05;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .new-tag {
            position: absolute;
            top: 5px;
            left: 5px;
            background:#d6ac02;
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 3px;
        }


        .percent_off{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7rem;
        }
        .stars {
            color: orange;
            font-size: 16px;
        }

        .pagination{
            padding-left: 1rem;
        }
        .pagination a {
            padding: 5px 10px;
            margin: 0 3px;
  
            text-decoration: none;
            color: black;
        }
        .pagination a.active {
            background: #000;
            color: white;
            font-weight: bold;
        }
            



        .wishlist-alert {
  position: fixed;
  top: 20px;
  right: -300px;
  background: linear-gradient(45deg, #28a745, #4caf50);
  color: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  font-weight: bold;
  font-size: 15px;
  z-index: 9999;
  transition: all 0.5s ease;
  opacity: 0;
}

.wishlist-alert.show {
  right: 20px;
  opacity: 1;
}

          }