/* Category-local search and structured filters. The generated Figma geometry
   stays untouched; these controls occupy the measured gap before the grid. */
.brave-category-controls {
  box-sizing: border-box;
  color: #fff;
  font-family: 'Polin', sans-serif;
}

.brave-category .brave-category__desktop [data-node-id="19247:4267"] {
  gap: 1.822917vw;
}

.brave-category-controls--desktop {
  position: relative;
  z-index: 5;
  display: flex;
  width: 46.145833vw;
  flex-direction: column;
  align-items: center;
}

.brave-category-controls--mobile {
  display: none;
}

.brave-category-controls__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 28.229167vw;
  height: 2.1875vw;
  padding: .520833vw 1.041667vw .520833vw .364583vw;
  border: .052083vw solid #fff;
  border-radius: 26.041667vw;
  background: transparent;
}

.brave-category-controls__search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: 400 .9375vw/1.3 'Polin', sans-serif;
  letter-spacing: .01875vw;
  opacity: .51;
  text-align: right;
}

.brave-category-controls__search input::placeholder {
  color: rgba(255,255,255,.48);
  opacity: 1;
}

.brave-category-controls__search button {
  position: relative;
  flex: 0 0 1.5625vw;
  width: 1.5625vw;
  height: 1.5625vw;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brave-category-controls__search button img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.brave-category-controls__filters {
  display: flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: .625vw;
}

.brave-category-controls__filter {
  min-width: 7.291667vw;
  height: 1.875vw;
  padding: 0 1.041667vw;
  border: .052083vw solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: #fff;
  font: 700 .9375vw/1 'Polin', sans-serif;
  cursor: pointer;
}

.brave-category-controls__filter.is-active-filter {
  border-color: #fb4b19;
  color: #fb4b19;
}

.brave-category-controls__status {
  position: absolute;
  top: 100%;
  right: 0;
  margin: .416667vw 0 0;
  color: rgba(255,255,255,.62);
  font-size: .729167vw;
}

.brave-category .brave-category__desktop [data-node-id="19247:4273"] {
  top: 29.84375vw;
  z-index: 5;
  justify-content: space-between;
}

.brave-category .brave-category__desktop [data-node-id="19247:4266"] {
  border-bottom-width: 0;
}

.brave-category .brave-category__desktop [data-node-id="19247:4274"] {
  width: 71.510417vw;
}

.brave-category-filter-panel {
  position: relative;
  z-index: 4;
  display: flex;
  box-sizing: border-box;
  width: 15.441799vw;
  flex: 0 0 15.441799vw;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1.510417vw;
  padding: .520833vw;
  color: #fff;
  font-family: 'Polin', sans-serif;
}

.brave-category-filter-panel__title {
  margin: 0;
  font-size: 1.25vw;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.brave-category-filter-panel__group {
  display: flex;
  width: 14.322917vw;
  flex-direction: column;
  align-items: flex-end;
  gap: .78125vw;
}

.brave-category-filter-panel__header {
  display: flex;
  box-sizing: content-box;
  width: 100%;
  height: 1.5625vw;
  align-items: center;
  justify-content: space-between;
  padding: .520833vw 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  direction: ltr;
  font-family: 'Polin', sans-serif;
}

.brave-category-filter-panel__header > span:last-child {
  color: #fff;
  font-size: .9375vw;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .028125vw;
  direction: rtl;
  text-align: right;
  white-space: nowrap;
  transition: color .2s var(--brave-ease);
}

.brave-category-filter-panel__icon {
  position: relative;
  width: 1.5625vw;
  height: 1.5625vw;
  flex: 0 0 1.5625vw;
  transition: transform .2s var(--brave-ease);
}

.brave-category-filter-panel__icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
  transition: filter .2s var(--brave-ease);
}

.brave-category-filter-panel__group.is-filter-open .brave-category-filter-panel__header > span:last-child {
  color: #fb4b19;
}

.brave-category-filter-panel__group.is-filter-open .brave-category-filter-panel__icon {
  transform: rotate(180deg);
}

.brave-category-filter-panel__group.is-filter-open .brave-category-filter-panel__icon img {
  filter: brightness(0) saturate(100%) invert(37%) sepia(96%) saturate(3293%) hue-rotate(353deg) brightness(102%) contrast(97%);
}

.brave-category-filter-panel__options {
  width: 14.322917vw;
}

@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .brave-category .brave-category__mobile [data-node-id="19247:5277"] {
    height: 100%;
  }

  .brave-category .brave-category__mobile [data-node-id="19247:5284"] {
    height: auto;
    padding-bottom: 20.512821vw;
  }

  .brave-category .brave-category__mobile [data-node-id="19247:5294"] {
    position: relative;
    top: auto;
    left: auto;
    width: 89.74359vw;
    margin: 24.871795vw auto 0;
    transform: none;
    gap: 10.25641vw;
  }

  .brave-category-controls--desktop {
    display: none;
  }

  .brave-category-controls--mobile {
    display: flex;
    width: 100vw;
    flex-direction: column;
    align-items: center;
    gap: 7.692308vw;
  }

  .brave-category-controls__search {
    width: 89.74359vw;
    height: 12.820513vw;
    padding: 0 1.282051vw 0 2.051282vw;
    border-width: .25641vw;
  }

  .brave-category-controls__search input {
    font-size: 4.102564vw;
  }

  .brave-category-controls__search button {
    flex-basis: 9.230769vw;
    width: 9.230769vw;
    height: 9.230769vw;
  }

  .brave-category-controls__filters {
    width: 100vw;
    max-width: 100vw;
    padding: 0;
    justify-content: flex-start;
    gap: 4.102564vw;
    overflow-x: auto;
    overflow-y: hidden;
    direction: rtl;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .brave-category-controls__filters::-webkit-scrollbar {
    display: none;
  }

  .brave-category-controls__filter {
    flex: 0 0 auto;
    min-width: 42.051282vw;
    height: 16.410256vw;
    padding: 0 5.128205vw;
    border-width: .25641vw;
    font-size: 5.128205vw;
  }

  .brave-category-controls__filter:first-child {
    margin-right: 0;
  }

  .brave-category-controls__filter:last-child {
    margin-left: 0;
  }

  .brave-category-controls__status {
    position: static;
    align-self: flex-end;
    height: 0;
    margin: -5.128205vw 5.128205vw 0;
    font-size: 3.589744vw;
  }

  .brave-category .brave-category__mobile [data-node-id="19247:5301"] {
    flex-flow: column nowrap;
    width: 100%;
  }

  .brave-category .brave-category__mobile [data-node-id="19247:5301"] > a {
    flex: none;
    width: 90.25641vw;
    height: 45.897436vw;
    border: 0.25641vw solid rgba(255, 255, 255, 0.2);
    border-radius: 10.512821vw;
    background: rgba(255, 255, 255, 0.1);
  }

  .brave-category .brave-category__mobile [data-node-id="19247:5301"] > a[href="#"] {
    display: none;
  }
}