.brands-search {
  margin: 0 0 22px;
}

.brands-search__form {
  position: relative;
  margin: 0;
}

.brands-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brands-search__field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgb(15 23 42 / 6%);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.brands-search__field:focus-within {
  border-color: color-mix(in srgb, var(--primary-color) 42%, #eceef1);
  box-shadow: 0 10px 28px rgb(15 23 42 / 8%);
}

.brands-search__icon {
  position: absolute;
  inset-inline-start: 16px;
  color: var(--secondary-color-alt1, #6b7280);
  pointer-events: none;
}

.brands-search__input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding-block: 0;
  padding-inline: 48px 48px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  color: var(--tp-text-body, #111827);
  font-size: 15px;
  line-height: 1.4;
  outline: none;
  appearance: none;
}

.brands-search__input::placeholder {
  color: var(--secondary-color-alt3, #7a8494);
}

.brands-search__input::-webkit-search-decoration,
.brands-search__input::-webkit-search-cancel-button,
.brands-search__input::-webkit-search-results-button,
.brands-search__input::-webkit-search-results-decoration {
  display: none;
  appearance: none;
}

.brands-search__field.is-loading .brands-search__input {
  padding-inline-end: 78px;
}

.brands-search__spinner {
  display: none;
  position: absolute;
  inset-inline-end: 48px;
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: brands-search-spin .7s linear infinite;
}

.brands-search__field.is-loading .brands-search__spinner {
  display: block;
}

.brands-search__clear {
  position: absolute;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--secondary-color-alt1, #6b7280);
  cursor: pointer;
}

.brands-search__clear:hover,
.brands-search__clear:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, #fff);
  color: var(--primary-color);
}

.brands-search__clear[hidden] {
  display: none !important;
}

.brands-search__meta {
  margin: 10px 4px 0;
  min-height: 1.2em;
  font-size: 13px;
  line-height: 1.5;
  color: var(--secondary-color-alt1, #6b7280);
}

.brands-search__meta[hidden],
.brands-grid[hidden],
.brands-empty[hidden],
#brands-pagination[hidden] {
  display: none !important;
}

.brands-search__mark {
  background: #ffe14a;
  color: #1a1a1a;
  padding: 0 .12em;
  border-radius: 4px;
}

.brands-empty__reset {
  margin-top: 4px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, #eceef1);
  border-radius: 999px;
  background: #fff;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.brands-empty__reset:hover,
.brands-empty__reset:focus-visible {
  background: color-mix(in srgb, var(--primary-color) 8%, #fff);
}

@keyframes brands-search-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 575px) {
  .brands-search {
    margin-bottom: 16px;
  }

  .brands-search__input {
    height: 48px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands-search__spinner {
    animation: none;
  }
}

html[data-theme="dark"] .brands-search__field,
html[data-theme="dark"] .brands-empty__reset {
  background: var(--dm-surface);
  border-color: color-mix(in srgb, var(--dm-text) 16%, var(--dm-bg));
  color: var(--dm-text);
}

html[data-theme="dark"] .brands-search__input {
  color: var(--dm-text);
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .brands-search__input::placeholder,
html[data-theme="dark"] .brands-search__icon,
html[data-theme="dark"] .brands-search__meta,
html[data-theme="dark"] .brands-search__clear {
  color: color-mix(in srgb, var(--dm-text) 68%, transparent);
}

html[data-theme="dark"] .brands-search__clear:hover,
html[data-theme="dark"] .brands-search__clear:focus-visible,
html[data-theme="dark"] .brands-empty__reset:hover,
html[data-theme="dark"] .brands-empty__reset:focus-visible {
  background: color-mix(in srgb, var(--dm-text) 8%, var(--dm-surface));
  color: var(--dm-text);
}

html[data-theme="dark"] .brands-search__spinner {
  border-color: color-mix(in srgb, var(--dm-text) 20%, transparent);
  border-top-color: var(--primary-color);
}

html[data-theme="dark"] .brands-search__mark {
  background: #ffe14a;
  color: #1a1a1a;
}