html,body{
  height: 100%;
}
.page {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: auto;
  padding-bottom: 20px;
  
  .search-area {
    flex: 0 1 auto;
    margin-top: 15px;
    display: flex;
    height: 30px;
    align-items: center;
    padding: 10px;
    position: relative;
    border: 1px solid #ffffff;
    border-radius: 14px;
    margin-bottom: 8px;
    
    
    input[type="text"] {
      background-color: #f0f0f0;
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 2px;
      font-size: 16px;
      text-align: left;
      box-sizing: border-box;
      
      &:focus {
        outline: none;
        transition: border-bottom 0.3s ease;
      }
    }
    
    .search-icon {
      width: auto;
      height: 30px;
      margin-left: 5px;
      transform-origin: center;
      transition: transform 0.3s ease, border-color 0.3s ease;
      cursor: pointer;
      
      &:hover {
        transform: scale(1.1);
        border-color: #00aa86;
      }
    }
  }
  
  .shopping-area {
    flex: 1;
    overflow: auto;
    width:100vw;
height:100vh;
overflow:scroll;
    .filter-tags {
      display: flex;
      flex-wrap: wrap;
      
      .filter-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(33.33% - 10px);
        height: 40px;
        border-radius: 5px;
        margin-right: 10px;
        
        &:last-child {
          margin-right: 0;
        }
        
        button {
          border: none;
          color: rgb(98, 101, 98);
          background: none;
          font-weight: normal;
          font-size: 16px;
          margin-right: 10px;
          cursor: pointer;
          text-decoration: none;
          position: relative;
          transition: all 0.2s ease;
          
          &:after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: green;
            opacity: 0;
            transition: opacity 0.3s ease;
          }
          
          &:hover {
            color: black;
          }
        }
      }
    }
    
    .imageurl{
      width:100vw;
      height:100vh;
      overflow:scroll;
      
      img{
       height: 100%; 
      width: 100%;
      }

      h3{
      padding: 0 0 10px 15px;   
   }
      height:calc( 100vh - 200px )

     }
  }
}


