.search-result {
  margin: 50px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  place-items: flex-start;

  .popular_item {
    display: flex;
    flex-direction: column;

    .popular_item__top {
      position: relative;
      background: var(--grey-FA);
      border-radius: 24px;
      overflow: hidden;
      max-height: 295px;

      .popular_item__img {
        object-fit: contain;
        width: 100%;
        max-height: 295px;
        mix-blend-mode: darken;
      }

      .popular_item__discount {
        position: absolute;
        left: 20px;
        bottom: 20px;
        background: var(--blue-F9);
        font-size: 16px;
        color: white;
        font-weight: 500;
        border-radius: 9999px;
        padding: 2px 8px;
      }
    }

    .popular_item__bot {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;

      .popular_item__info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;

        .popular_item__price_box {
          display: flex;
          flex-direction: column;

          .popular_item__price {
            font-size: 24px;
            font-weight: 500;
          }

          .popular_item__old_price {
            font-size: 18px;
            color: var(--grey-AF);
            text-decoration: line-through;
          }
        }

        .item__article {
          font-size: 18px;
          color: var(--grey-AF);
          text-decoration: none;
        }

        .popular_item__grade {
          padding-left: 28px;
          font-size: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
          justify-content: flex-end;
            &:before {
              content: url("data:image/svg+xml,%3Csvg width= '20' height= '21' viewBox= '0 0 20 21' fill= 'none' xmlns= 'http://www.w3.org/2000/svg' %3E%3Cpath d= 'M9.99577 1.54102C10.8702 1.54102 11.5589 2.20146 11.9986 3.09261L13.467 6.05365C13.5115 6.14529 13.6171 6.27433 13.7758 6.39238C13.9343 6.51031 14.0895 6.57536 14.1916 6.59252L16.8496 7.03779C17.8098 7.19912 18.6145 7.66976 18.8758 8.48927C19.1368 9.3081 18.7544 10.159 18.0639 10.8507L18.0632 10.8514L15.9983 12.9334C15.9164 13.0159 15.8248 13.1713 15.7673 13.3738C15.7102 13.575 15.7051 13.7583 15.731 13.8766L15.7314 13.8783L16.3221 16.4538C16.5672 17.5258 16.4859 18.5888 15.7299 19.1445C14.9713 19.7021 13.9346 19.4549 12.9928 18.894L10.5012 17.4068C10.3965 17.3443 10.2169 17.2937 9.99994 17.2937C9.7846 17.2937 9.60119 17.3437 9.48969 17.4085L9.4881 17.4094L7.00142 18.8937C6.06073 19.4566 5.0253 19.6993 4.26661 19.1412C3.5111 18.5854 3.4258 17.5243 3.67161 16.4533L4.26227 13.8783L4.26263 13.8766C4.28853 13.7583 4.28346 13.575 4.22635 13.3738C4.16885 13.1713 4.07718 13.0159 3.99534 12.9334L1.9289 10.8498C1.2429 10.1582 0.861696 9.30802 1.12065 8.49039C1.38035 7.67039 2.18355 7.19918 3.1443 7.03773L5.80012 6.59284L5.80096 6.5927C5.89833 6.57581 6.05127 6.51148 6.20942 6.39325C6.36786 6.2748 6.47368 6.14547 6.51829 6.05365L6.52054 6.04907L7.98704 3.09182L7.98762 3.09066C8.43152 2.20025 9.12236 1.54102 9.99577 1.54102Z' fill= '%23F5AF40' /%3E%3C/svg%3E");
              width: 20px;
              height: 20px;
            }
        }
      }

      .popular_item__title {
        font-size: 16px;
      }
    }
  }
}

div.search-tags-chain a {
  margin: 2px;
}

div.search-tags-chain a.search-tags-link {
  color: #333333;
  font-size: 90%;
  text-decoration: none;
  color: #535353;
}

div.search-tags-cloud a {
  white-space: normal;
}

div.search-advanced {
  overflow: hidden;
  margin: 0.5em 0;
  zoom: 1;
}

div.search-advanced-result {
  float: left;
  width: 70%;
}

div.search-advanced-filter {
  float: right;
}

div.search-advanced-filter a {
  outline: none;
}

div.search-item-meta {
  margin: 1em 0 0 0;
  overflow: hidden;
  zoom: 1;
}

div.search-page input.search-query {
  width: 100%;
  font-size: 16px;
  color: #212121;
}

div.search-page input.search-suggest {
  width: 100%;
  font-size: 16px;
  color: #212121;
}

.search-button {
  height: 63px;
  width: 63px;
  background: #F6F8FA;
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  cursor: pointer;
    &:after{
      content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8242 17.5L22.3242 22' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20.3242 11C20.3242 6.02944 16.2948 2 11.3242 2C6.35366 2 2.32422 6.02944 2.32422 11C2.32422 15.9706 6.35366 20 11.3242 20C16.2948 20 20.3242 15.9706 20.3242 11Z' stroke='%239CA3AF' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
      width: 25px;
      height: 25px;
      display: block;
    }
}

div.search-filter h2 {
  margin: 1em 0 0.5em;
  border: none;
}

table.search-filter {
  width: 100%;
  margin-top: 0.5em;
}

table.search-filter td {
  padding: 1em;
  border-top: 1px solid;
}

td.search-filter-name {
  width: 10%;
  text-align: right;
}

td.search-filter-field {
  width: 50%;
}

table.search-filter input.input-field {
  border: 1px solid;
  font-size: 1.3em;
}

table.search-filter select.select-field {
  border: 1px solid;
  font-size: 1.2em;
}

div.search-sorting {
  margin: 0.5em 0;
}

div.search-sorting b {
  padding: 0.2em 0.3em 0.3em;
  font-weight: normal;
}

div.search-page input.search-query, div.search-page input.search-suggest, table.search-filter input.input-field, table.search-filter select.select-field {
  background: #F6F8FA;
  padding: 21px;
  border: none;
  border-radius: 10px 0 0 10px;
}