/* =========================================
   CATS CATEGORY FILTER
   ========================================= */

.cats-category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 20px;
}


.cats-category-filter__item {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 44px;
  padding: 0 16px;

  border: 1px solid rgba(80, 55, 35, 0.12);
  border-radius: 999px;

  background: #f6f2ea;
  color: #5d5347;

  text-decoration: none;

  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 400;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease;
}


.cats-category-filter__item:hover {

  transform: translateY(-1px);

  border-color: #c8b28b;
  background: #faf6ef;
  color: #4b4238;

}


.cats-category-filter__item.is-active {

  border-color: #202020;
  background: #202020;
  color: #ffffff;

  font-weight: 500;

}


.cats-category-filter__count {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 24px;
  height: 24px;
  padding: 0 7px;

  border-radius: 999px;

  background: rgba(80, 55, 35, 0.08);
  color: #7a6d5d;

  font-size: 12px;
  line-height: 1;
  font-weight: 500;

}


.cats-category-filter__item.is-active
.cats-category-filter__count {

  background: rgba(255,255,255,.18);
  color: #fff;

}



/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 640px) {


  .cats-category-filter {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    max-width: none;

    margin-bottom: 14px;

    padding: 0 16px 12px;

  }


  .cats-category-filter__item {

    flex: 0 0 auto;

    min-height: 38px;

    padding: 0 12px;

    font-size: 14px;

    white-space: nowrap;

  }


}



/* =========================================
   CAT CATEGORY LABEL
   ========================================= */


.kgv-cat-category {

  display: inline-flex;
  align-items: center;

  margin: 8px 0 12px;

  padding: 7px 14px;

  border-radius: 999px;

  background: #f3ede4;
  color: #5f554a;

  font-family: inherit;

  font-size: 15px;

  line-height: 1.2;

  font-weight: 400;

}



.kgv-cat-category--detail {

  margin: 12px 0 18px;

  padding: 8px 15px;

  font-size: 16px;

  font-weight: 400;

}

/* =========================================
   CATS SEARCH
   ========================================= */

.kgv-cats-tools {

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  max-width: 1180px;
  margin: 0 auto 18px;
  padding: 0 20px;

}

.kgv-cats-tools .cats-category-filter {

  flex: 0 1 auto;

  margin: 0;
  padding: 0;

}

.kgv-cats-search {

  display: flex;
  align-items: center;

  flex: 0 0 auto;

}

.kgv-cats-search__toggle {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  padding: 0;

  border: 1px solid rgba(80,55,35,.12);
  border-radius: 999px;

  background: #f6f2ea;
  color: #5d5347;

  cursor: pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease;

}

.kgv-cats-search__toggle:hover {

  transform: translateY(-1px);

  border-color: #c8b28b;
  background: #faf6ef;
  color: #4b4238;

}

.kgv-cats-search__toggle svg {

  width: 19px;
  height: 19px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

}

.kgv-cats-search__field {

  width: 0;

  overflow: hidden;

  opacity: 0;

  transition:
    width .22s ease,
    opacity .16s ease,
    margin-left .22s ease;

}

.kgv-cats-search.is-open .kgv-cats-search__field {

  width: 250px;

  margin-left: 10px;

  opacity: 1;

}

.kgv-cats-search__field input {

  width: 100%;
  height: 44px;

  box-sizing: border-box;

  padding: 0 16px;

  border: 1px solid rgba(80,55,35,.12);
  border-radius: 999px;

  background: #fff;

  color: #2d2723;

  font: inherit;
  font-size: 15px;

  outline: none;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;

}

.kgv-cats-search__field input::placeholder {

  color: #93867a;

}

.kgv-cats-search__field input:focus {

  border-color: #b7683f;

  box-shadow:
    0 0 0 4px rgba(183,104,63,.12);

}



/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

  .kgv-cats-tools {

    gap: 10px;

    padding: 0 16px 12px;

  }

  .kgv-cats-search {

    width: auto;

  }

  .kgv-cats-search.is-open {

    width: 100%;

  }

  .kgv-cats-search.is-open .kgv-cats-search__field {

    width: 100%;

  }

}

.kgorod-cats__card[hidden] {
  display: none !important;
}

.kgv-cats-search-empty {
  grid-column: 1 / -1;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 6px;

  padding: 48px 20px;

  border-radius: 20px;

  background: #f6f2ea;
  color: #5d5347;

  text-align: center;
}

.kgv-cats-search-empty[hidden] {
  display: none;
}

.kgv-cats-search-empty strong {
  color: #2d2723;
  font-size: 20px;
}

.kgv-cats-search-empty span {
  font-size: 14px;
}
/* Search and category chips are one semantic toolbar. */
.kgv-cats-tools { flex-wrap: nowrap; min-width: 0; }
.kgv-cats-search { order: -1; }
.kgv-cats-tools .cats-category-filter { flex: 1 1 auto; min-width: 0; width:auto; max-width:none; }
.kgv-cats-search__toggle:focus-visible,
.cats-category-filter__item:focus-visible { outline: 3px solid rgba(183,104,63,.42); outline-offset: 3px; }
.kgv-cats-search__toggle:active { transform: translateY(0); background: #efe7d9; }
@media (max-width:700px) {
  .kgv-cats-tools { display:flex; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; padding:0 16px 12px; }
  .kgv-cats-tools .cats-category-filter { display:flex; flex:0 0 auto; flex-wrap:nowrap; margin:0; padding:0; }
  .kgv-cats-search { flex:0 0 auto; width:auto; }
  .kgv-cats-search.is-open { width:auto; }
  .kgv-cats-search.is-open .kgv-cats-search__field { width:min(250px,65vw); }
}