#login-section1{
    width: 100%;
    height: 60px;
    /* margin-top: 10px; */
    padding-top: 25px;
    /* margin-top:0px ; */
    background: none;
    font-size: 14px;
    position: relative;
    text-align: left;
    margin-bottom: 0;
    border-radius:0%;
}


#login-section1 a,
#login-section1 span{
    font-weight: bold;
     color: grey;
}

#login-section1 a:hover{
    transition: 0.1s;
    color: #C32929;
    text-decoration: none;
}

#login-section1 a span{
    font-weight: bold;
     color: grey;
}

#login-section1 .login{
    font-weight: bold; 
    color: rgb(68, 68, 68);
}



#left-column{
  display: flex; flex-direction: column; align-content: flex-start; margin-top: 20px; margin-left: 30px;
}
/* Main Code For Filter */

.list{
  display: none;
}

  /* Adjusted styles when filter section is hidden */
.product-list.grid-view.filter-hidden .product-card {
  flex-basis: 24%; /* Example adjustment */
  /* You can adjust margin here as needed */
}
.category-name {
  font-size: 24px;
  line-height: 24px;
  color: #222;
  font-weight: bold;
}

.category-description {
  font-size: 16px;
  /* color: black; */
  font-weight: 500;
  padding: 0px 0px;
}
  
  .filter-section {
    width: 250px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-right: 20px;
    font-family: Arial, sans-serif;
  }
  
  .filter-section h2 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
  }

  .filter-section .filter-group h3{
    font-weight: bold;
  }
  
  .filter-group {
    margin-bottom: 20px;
  }
  
  .filter-group h3 {
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: normal;
  }
  
  .filter-group ul {
    list-style: none;
    padding: 0;
    font-size: 12px;
  }
  
  .filter-group li {
    margin-bottom: 1px;
  }

  /* .filter-group ul li input[type="checkbox"]{
    font-size:-2px ; 
    size: -2px;
  } */
  
  .filter-group label {
    margin-left: 5px;
  }
  
  .price-range {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .price-range input[type="range"] {
    width: 100%;
    margin: 10px 0;
  }
  
  .price-values {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 14px;
  }
  
  .color-options {
    display: flex;
    gap: 10px;
  }
  
  .color-option {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    cursor: pointer;
  }
  
  .product-section {
    flex: 1;
    padding: 20px;
  }
  
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .view-options i {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
  }

  .sort-by{
    font-size: 15px;
  }
  
  .sort-by label {
    margin-right: 10px;
  }
  

  .row {
    margin-right: 0px;
    margin-left: 0px;
}

.faq{
  margin-bottom: 60px; margin-left: 40px;
}

  .product-list {
    display: flex;
    justify-content: unset !important;
    flex-wrap: wrap;
  }
  
  .product-card {
    background-color: #fff;
    /* padding: 10px; */
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    width: 48%;
    height: auto;
    /* margin-bottom: 20px; */
    /* text-align: center; */
    border-radius: 8px;
  }
  
  .product-card img {
    max-width: 100%;
    /* height: auto; */
    height: 73vh;
  }

 .product-list .product-card .vertical p,h3,span{
  font-size: 14px;
  margin-bottom: 10px;
 } 

 .product-list .product-card .vertical h3{
font-size: 13px;
 }

  .product-card .info:hover,
  .product-card button:hover{
    color: white;
    background-color: #000;
  }

  .info{
    font-weight: 600;
  }

  .info:hover button{
    color: white;
    font-weight: 600;
  }

  .info button{
    color: white;
    font-weight: 600;
    border: none !important;
  }


  
  .product-card .category {
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }

  .product-card .category:hover {
    color: #C32929;
    
  }

  
  
  .product-card h3 {
    font-size: 16px;
    margin: 10px 0;
  }

  .product-card h3:hover {
    color: #BBBBBB;
    cursor: pointer;
  }
  
  .sizes span {
    display: inline-block;
    /* margin: 5px; */
    padding: 5px 10px;
    border: 1px solid #ddd;
    cursor: pointer;
  }

  .sizes span:hover {
    color: black;
    background-color: #BBBBBB;
  }

  .product-rating{
    margin-top: 0px;
    margin-left: -10px;
    /* margin-bottom: -100px; */
  }

  .product-rating .rating{
    color: #ffcc00;
    font-size: 18px;
    margin-left: 10px;
}
  
  .product-card .price {
    font-size: 18px;
    color: #333;
    margin-top: 0px;
    cursor: pointer;
    margin-left: 10px;
  }

  .product-card .price:hover{
    color: #C32929;
  }

    /*  */



    /* Vertical */

    /* Default grid view styling */
    .product-list.grid-view .product-card {
      flex-basis: 33%;
      /* margin: 0 1%; */
      /* margin-bottom: 20px; */
  }
  
  .product-list.list-view .product-card {
      flex-basis: 100%;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      /* width: 100%; */
  }
  

  .product-list.list-view .product-card .premium{
    flex-basis: 100%;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    width: 350px;
    height: 55vh;
}


  .product-list.list-view .product-card .vertical {
    /* margin-top: -200px; */
}

.item9{
  border-radius: 0px;
}
  
.item9 .discount{
  top: 0; right: 0; left: unset; position: absolute; background-color: #000; color: white; padding: 4px; font-size: 12px; border-radius: 0px; width: 45px; height:28px ; border: none;
}

.premium{
  background-image: url('../../img/Barble/Barbelbae-Tops/JIT05896-700x1050.jpg');
  height: 73vh;
  width: 100%;
  max-width: 100%;
  /* margin-top: 40px; */
  background-size: cover;
  /* background-position: top; */
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content:center;

  transition: transform 4s ease;
}

.off{
  margin-left: 10px;
}

.section-p2 .center {
  margin-left: 80px;
}

/* Content Section */
.content-section{
  margin: 0 60px 60px 60px;
}


  /* FAQ Section */
  .container h1{
    color: #000;
    text-align: center;
    font-size: 32px;
  }
  
  details{
    /* background-color: #F7F9FB; */
    /* color: #000; */
    font-size: 1.5rem;
    margin-top: 10px;
  }
  
  summary {
    /* padding: .5em 1.3rem; */
    list-style: none;
    display: flex;
    justify-content: space-between;  
    transition: height 1s ease;
    background-color: #F7F9FB;
    color: #000;
    font-size: 17px;
    font-family: sans-serif;
    padding: 10px;
    font-weight: bold;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }
  
  summary:after{
    content: "\002B";
  }
  
  details[open] summary {
      /* border-bottom: 1px solid #aaa; */
      margin-bottom: .5em;
      /* color: RED; */
  }
  
  details[open] summary:after{
    content: "\00D7";
  }
  
  details[open] div p{
    padding: .5em 1em;
    font-size: 17px;
    font-family: Arial, Helvetica, sans-serif;
    color: #777777;
    padding-left: 40px;
    /* color: RED; */
  }
  /*  */

/* Count Timer */
.wrap{
  display: flex;
  flex-direction: row;
  }
  .timer{
  display: flex;
  text-align: center;
  flex-direction: row;
  /* margin-left: 3rem; */
  gap: 5px;
  /* color:red; */
  /* margin-top: -5px; */
  }
  .days{
  background-color: black;
  color: white;
  padding: 2px;
  font-size: 10px;
  }
  .hours{
    background-color: black;
  color: white;
  padding: 2px;
  font-size: 10px;
  }
  .mins{
    background-color: black;
  color: white;
  padding: 1px;
  font-size: 10px;
  }
  .secs{
    background-color: black;
  color: white;
  padding: 1px;
  font-size: 10px;
  }
  /* h3{
  color:lightseagreen;
  } */
  .offer{
  flex-basis: 8rem;
  }
  /* p{
  text-align: left;
  } */
/*  */


.premium .img img{
  height: 55vh;
}

@media (max-width:777px) or (max-width:1024px) {
  .section-p2 .center {
    margin-left: 80px;
}
  .product-list.grid-view .product-card {
    flex-basis: 49%;
    /* margin: 0 1%; */
    margin-bottom: 20px;
  }

  .item9{
    height: 50vh;
  }

  .item9 .discount{
    font-size: 11px; border-radius: 0px; width: 35px; height:30px ; border: none;
  }

  .off{
    margin-left: 0px;
  }

  .shop1{
    height: 50vh;
  }

    /* Footer */
        .col p,h5,a{
          /* font-size: 15px; */
        }
  
}

@media (max-width:477px) or (min-width:333px){

  /* Footer  */
    .col p,h5,a{
      /* font-size: 15px; */
    }


}

@media(max-width:777px){
  .product-list{
    margin-top: 10px;
  }
}


@media(max-width:767px){
.filter-section {
  display: none;
}
  /* Button to show filters on mobile */
  .filter-toggle-btn {
    display: block;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    margin-bottom: 15px;
    text-align: center;
    font-size: 16px;
}

.toolbar{
  /* display: none; */
}
.sort{
  display: none;
}
.relevance{
  width: 80%;
  padding-left: 20px;
  padding-right: 20px;
}

.item9{
  width: 100%;
}

}


/* Show filter section on tablets and larger devices */
@media (min-width: 768px) {
  
.filter-section {
    display: block;
}

.filter-toggle-btn {
    display: none;
}

/* .filter-mobile-btn{
  display: none;
} */

}


@media(max-width:730px){
  .product-list .product-card{
    /* margin-top: 10px; */
    /* width: 100%; */
    height: auto;
  }
  .product-list .item9{
    /* margin-top: 10px; */
    /* width: 100%; */
    height: 40vh;
  }

  .product-list .premium{
    width: 100%;
    /* bottom: 0; */
    height: 40vh;
  }

  .product-list img{
    width: 100%;
    /* height: auto; */

  }

  .info{
    height: 40px;
    font-size: 8px;
    /* padding-bottom: 1px; */
  }
  

  .vertical{
    font-size: 16px;
    /* height: 10px; */
  }
}


@media(max-width:599px){
.faq{
  margin-bottom: 60px; margin-left: 0px;
}

}

@media (max-width:477px) or (max-width:333px){

  #left-column{
    margin-left: 0px;
  }

  /* Footer  */
    .col p,h5,a{
      /* font-size: 15px; */
    }


    .list{
      display: none;
    }
    .sizes{
      display: none;
    }

    .product-card {
      padding: 0px;
      box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
    }

    .product-list.grid-view .product-card {
      flex-basis: 50%;
      /* margin: 0 1%; */
      margin-bottom: 10px;
    }

    .content-section{
      margin: 10px; margin-left: 30px; margin-right: 20px;
    }

    /* .item9 .img{
      height: 20vh;
    }

    .premium{
      height: 20vh;
    } */

    .item9{
      margin: 1px;
    }
    
    .toolbar {
      margin-bottom: 0px;
    }

    .product-section {
      padding: 10px;
    }

    .product-list .item9{
      /* margin-top: 10px; */
      /* width: 100%; */
      height: 33vh;
    }

    .product-list .item9 .img{
      /* margin-top: 10px; */
      /* width: 100%; */
      height: 35vh;
    }
  
    .product-list .premium{
      width: 100%;
      /* bottom: 0; */
      height: 40vh;
      background-size: 100% 100%;
      background-size: cover;
    }
  
    .product-list img{
      width: 100%;
      /* height: 35vh; */
      height: auto;
      object-fit: cover;
      aspect-ratio: 2 / 4;
    }
  
    .info{
      height: 40px;
      font-size: 8px;
      /* padding-bottom: 1px; */
    }
  


}

@media (max-width: 886px) {
  .item9 {
      width: auto;
      height: 300px;
  }
}

@media (max-width: 420px) {
  .product-card {
    padding: 0px;
  }
  .toolbar {
   display: none;
}
}

/* For hide filter by default */

.filter-section {
  display: none;  /* Hidden by default */
  padding: 15px;
  border: 1px solid #ddd;
  margin-top: 10px;
}


        /* For Size Select Popup */
        .close-button,.view-details{background:0 0;cursor:pointer}.close-button{position:absolute;right:16px;top:16px;border:none;font-size:24px}.product-info{display:flex;gap:16px;margin-bottom:24px}.product-image{width:80px;height:80px;object-fit:cover;border-radius:4px}.product-details h3{font-size:18px;margin:0 0 4px}.price1{font-size:18px;margin:4px 0}.view-details{color:#666;text-decoration:underline;border:none;padding:0;font-size:14px}.size-options{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}.size-button{padding:8px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer}.add-to-bag{width:100%;padding:12px;background:#000;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px}.add-to-bag:hover{background:#723a0f}
        .bg-red {
          background-color: #c32929 !important;
          color: #fff !important;
      }