.products{
    width: 100%;
    margin-inline: auto;
    @include Flex; flex-direction: column;
    padding-block: 30px 100px;
    .product_container{
        display: flex; justify-content: space-between; 
        flex-wrap: wrap;
        gap: 10px;
        
    }
}



.products {
    display: flex;
    flex-direction: column;
    
    .header_link{
      width: 90%;
    }
    > main {
      padding-block: 0px;
      display: flex;
  
      gap: 3%;
      width: 90%;
      margin-inline: auto;
    }
    .products_left {
      width: 25%;
      display: flex;
      flex-direction: column;
      background: var(--bg);
      padding: 10px 10px 10px 0;
      > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // padding-inline: 16px;
        border-bottom: 1px solid var(--gray);
        .InputAutoComplete {
            width: 100% !important;
            box-shadow: 0px 0 0 0  !important ;

        }
        h4 {
          font-size: 1.4vw;
          font-weight: 500;
          color: var(--text);
        }
        h6 {
          font-size: 1.1vw;
          color: var(--primary);
          cursor: pointer;
        }
      }
      .filter_collapse {
         .ant-collapse-content>.ant-collapse-content-box{
            padding: 0px 16px 15px 16px !important;
        }
        .ant-checkbox .ant-checkbox-input{
            color: var(--primary);
            opacity: 1;
        }
        .ant-collapse-header-text{
            font-size: 16px;
            font-weight: bold !important;
        }
        .ant-collapse-header {
          border-bottom: 1px solid #b4b4b4;
        }
        .ant-collapse-item-active{
          transition: .4s ease-in-out;
          .ant-collapse-header {
            border-bottom: none;
          }
          border-bottom: 1px solid #b4b4b4;
  
        }
  
        .ant-collapse-item{
          font-weight: 500 !important;
        }
      }
    }
    .products_Right {
      display: flex;
      flex-direction: column;
      gap: 30px;
      width: 90%;
      > header {
        display: flex;
        justify-content: space-between;
        width: 95%;
        .filtered_items {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
          width: 80%;
        }
        .filtered_item {
          @include Shadow;
          border: 1px solid #191919;
          color: #191919;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 6px 10px;
          min-width: 140px;
          border-radius: 5px;
          gap: 10px;
          svg {
            font-size: 20px;
            border-radius: 20px;
          }
        }
        .FillterSelect{
          .ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{
              border: none;
              color: black !important;
            
          }
          .ant-select-single.ant-select-lg.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-lg.ant-select-show-arrow .ant-select-selection-placeholder{
            color: black !important;
          }
          .ant-select-arrow{
            color: black;
          }
        }
      }
      > main {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
      }
      .Pagination {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
    }
  
    .CheckboxFilter {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .ant-pagination .ant-pagination-item a{
      color: var(--text) !important;
    }

  }
  .show_on_responsive {
    display: none;
  }
  .ant-collapse-header-text{
    font-weight: 500 !important;
  }
  

  .ant-pagination .ant-pagination-item a{
    color: var(--white);
  }
  .swiper{
    direction: ltr !important;
  }


  @media screen and (max-width: 1000px) {
    .show_on_responsive {
      display: inline;
    }
    .products {
      display: flex;
      flex-direction: column;
      .product_container{
        @include Flex;
        gap: 10px 40px;
      }
      > main {
        padding-block: 30px;
        display: flex;
  
        gap: 2%;
        width: 90%;
        margin-inline: auto;
      }
  
      .products_left {
        width: 30%;
        display: flex;
        flex-direction: column;
        background: var(--bg);
        gap: 20px;
        display: none;
  
        > header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 40px;
          h4 {
            font-size: 1.7vw;
            font-weight: 500;
            color: var(--text);
          }
          h6 {
            font-size: 1.5vw;
            color: var(--primary);
            cursor: pointer;
          }
        }
      }
      .products_Right {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        > header {
          display: flex;
          justify-content: space-between;
          height: 40px;
          align-items: center;
          .filtered_items {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            width: 70%;
          }
          .filtered_item {
            @include Shadow;
            border: 1px solid #191919;
            color: #191919;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 10px;
            width: 150px;
            border-radius: 5px;
            svg {
              font-size: 20px;
            }
          }
        }
        > main {
          display: flex;
          flex-wrap: wrap;
          gap: 40px;
          justify-content: center;
        }
        .Pagination {
          width: 100%;
          display: flex;
          justify-content: center;
        }
      }
  
      .CheckboxFilter {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }
    .remove_on_responsive {
      display: none !important;
    }
    .filtered_item {
      @include Shadow;
      border: 1px solid #191919;
      color: #191919;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      width: 150px;
      border-radius: 5px;
      svg {
        font-size: 20px;
      }
    }
  
    .CheckboxFilter {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .filter_collapse {
      .ant-collapse-header {
        border-bottom: 1px solid #b4b4b4;
        
      }
    }
  }
  
  
  .ant-checkbox .ant-checkbox-inner{
  
    border: 2px solid #A7A7A7;
  
  
    }
    .ant-checkbox-checked .ant-checkbox-inner{
      background-color: red;
      color: red !important;
      border: 2px solid red !important;
  
    }
  
    
  
    .category_page{
      @include Flex; flex-direction: column;
      h1{
        font-weight: bold;
      }
    }
  
    .productsSlider{
      margin-block: 50px !important;
    }