.brands-list-container {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  background: var(--Tan-surface-low, #F9F5F1);
  gap: var(--General-Settings-container-gap, 16px);
  border-radius: var(--General-Settings-container-radius, 24px);
  font-family: var(--Typography-Family-pc-ref-typeface-family-body, Roboto);
  padding: 32px 0px 32px 8px;
}
@media (min-width: 480px) {
  .brands-list-container {
    padding: 32px;
  }
}
.brands-list-container button {
  background: none !important;
}
.brands-list-container .brands-list-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 8px;
}
@media (min-width: 480px) {
  .brands-list-container .brands-list-header {
    padding-right: 0;
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-header {
    flex-direction: row;
    justify-content: space-between;
  }
}
.brands-list-container .brands-list-header .brands-list-heading {
  display: grid;
  gap: 16px;
}
.brands-list-container .brands-list-header .brands-list-heading .brands-list-title {
  font-family: "TWKLausanne";
  color: var(--Utils-on-surface, #0A0A0A);
  font-variant-numeric: lining-nums proportional-nums;
  font-size: var(--General-Settings-Heading-Heading-M-Size, 20px);
  font-weight: var(--Typography-Weight-pc-ref-typeface-weight-regular, 400);
  line-height: var(--General-Settings-Heading-Heading-M-Line-Height, 28px);
  letter-spacing: -0.2px;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-header .brands-list-heading .brands-list-title {
    font-size: var(--General-Settings-Heading-Heading-M-Size, 22px);
    line-height: var(--General-Settings-Heading-Heading-M-Line-Height, 30px);
    letter-spacing: -0.22px;
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-header .brands-list-heading .brands-list-title {
    font-size: var(--General-Settings-Heading-Heading-M-Size, 32px);
    line-height: var(--General-Settings-Heading-Heading-M-Line-Height, 40px);
    letter-spacing: -0.32px;
  }
}
.brands-list-container .brands-list-header .brands-list-heading .brands-list-count {
  color: var(--Utils-dim-on-surface, rgba(10, 10, 10, 0.6));
  font-size: var(--General-Settings-Body-Body-M-Size, 16px);
  font-weight: var(--Typography-Weight-pc-ref-typeface-weight-regular, 400);
  line-height: var(--General-Settings-Body-Body-M-Line-Height, 22px);
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-header .brands-list-heading .brands-list-count {
    font-size: var(--General-Settings-Body-Body-M-Size, 18px);
    line-height: var(--General-Settings-Body-Body-M-Line-Height, 26px);
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-header .brands-list-heading .brands-list-count {
    font-size: var(--General-Settings-Body-Body-M-Size, 18px);
    line-height: var(--General-Settings-Body-Body-M-Line-Height, 26px);
  }
}
.brands-list-container .brands-list-header .brands-list-search {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}
.brands-list-container .brands-list-header .brands-list-search button {
  background: none;
  position: absolute;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  top: 12px;
  left: 12px;
  cursor: default;
}
.brands-list-container .brands-list-header .brands-list-search .pc-input-form {
  border-radius: var(--General-Settings-input-border-radius, 8px);
  border: var(--General-Settings-input-border-width, 1px) solid var(--Input-colour-border-idle, rgba(10, 10, 10, 0.2));
  background: var(--Input-colour-fill-idle, rgba(10, 10, 10, 0));
  padding: 8px 8px 8px 44px;
  height: 48px;
  font-size: var(--General-Settings-Body-Body-S-Size, 14px) !important;
  line-height: var(--General-Settings-Body-Body-S-Line-Height, 20px);
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-header .brands-list-search .pc-input-form {
    font-size: var(--General-Settings-Body-Body-S-Size, 16px) !important;
    line-height: var(--General-Settings-Body-Body-S-Line-Height, 22px);
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-header .brands-list-search .pc-input-form {
    width: 592px;
  }
}
.brands-list-container .brands-list-header .brands-list-search .icon-search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.brands-list-container .brands-list-content {
  width: 100%;
  display: flex;
  padding: var(--General-Settings-container-padding-vertical, 32px) 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content {
    flex-direction: row;
  }
}
.brands-list-container .brands-list-content .brands-list-filters {
  width: 100%;
  display: grid;
  gap: 8px;
}
.brands-list-container .brands-list-content .brands-list-filters.sticky {
  position: fixed;
  z-index: 20;
  background: var(--Tan-surface-low, #F9F5F1);
  padding-top: 16px;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-filters {
    max-width: 180px;
    min-width: 180px;
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-content .brands-list-filters {
    max-width: 286px;
  }
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-title {
  font-family: "TWKLausanne";
  font-variant-numeric: lining-nums proportional-nums;
  font-size: var(--General-Settings-Heading-Heading-S-Size, 18px);
  line-height: var(--General-Settings-Heading-Heading-S-Line-Height, 26px);
  letter-spacing: -0.18px;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-title {
    font-size: var(--General-Settings-Heading-Heading-S-Size, 20px);
    line-height: var(--General-Settings-Heading-Heading-S-Line-Height, 28px);
    letter-spacing: -0.2px;
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-title {
    font-size: var(--General-Settings-Heading-Heading-S-Size, 22px);
    line-height: var(--General-Settings-Heading-Heading-S-Line-Height, 30px);
    letter-spacing: -0.22px;
  }
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-title.sticky {
  position: fixed;
  height: 41.73px;
  z-index: 20;
  align-content: center;
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-values {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  display: inline-flex;
  gap: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-values {
    flex-direction: column;
    padding: 16px 0px;
    max-width: 180px;
    min-width: 180px;
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-values {
    max-width: 286px;
  }
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filters-values.sticky {
  position: fixed;
  z-index: 20;
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filter {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: var(--General-Settings-action-gap, 8px);
  border-radius: var(--General-Settings-action-style-radius-l, 16px);
  border: var(--Object-Styles-Border-Width-pc-ref-border-width-m, 2px) solid var(--Utils-surface-container, rgba(10, 10, 10, 0.1));
  background: var(--Utils-surface-idle, rgba(10, 10, 10, 0));
  cursor: pointer;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filter {
    justify-content: flex-start;
    border: none;
    white-space: normal;
    padding: 8px 12px;
  }
  .brands-list-container .brands-list-content .brands-list-filters .brands-list-filter:hover {
    background-color: #0A0A0A0D;
    border-radius: 12px;
  }
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filter button {
  padding: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filter.luxury svg {
  fill: none !important;
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filter.pressed {
  background-color: #0A0A0A1A;
  border-radius: 12px;
}
.brands-list-container .brands-list-content .brands-list-filters .brands-list-filter span {
  line-height: 22px;
}
.brands-list-container .brands-list-content .brands-list-results {
  display: grid;
  width: 100%;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-results {
    padding-left: 16px;
  }
}
.brands-list-container .brands-list-content .brands-list-results.sticky {
  padding-top: 72px;
}
.brands-list-container .brands-list-content .brands-list-results .brands-list {
  display: grid;
  gap: 32px;
  margin-left: 12px;
  margin-right: 20px;
}
@media (min-width: 480px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-list {
    margin-right: 12px;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-list .brand-group {
  padding: 8px 0px;
  gap: 8px;
  display: flex;
  flex-direction: column;
}
.brands-list-container .brands-list-content .brands-list-results .brands-list-letters {
  width: 100%;
  white-space: nowrap;
  padding: 16px 0px 0px 0px;
  flex-wrap: nowrap;
  overflow-x: auto;
  display: inline-flex;
  gap: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-bottom: var(--Object-Styles-Border-Width-pc-ref-border-width-s, 1px) solid var(--Utils-surface-overlay, rgba(10, 10, 10, 0.2));
  display: flex;
  cursor: pointer;
  color: var(--Utils-dim-on-surface, rgba(10, 10, 10, 0.6));
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-list-letters {
    padding: 0px;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-list-letters.sticky {
  position: fixed;
  z-index: 20;
  background: var(--Tan-surface-low, #F9F5F1);
  padding-top: 16px;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-list-letters.sticky {
    justify-content: start;
    padding-top: 0px;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-list-letters .brand-letter {
  display: flex;
  width: 32px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  min-width: 32px;
  padding: var(--General-Settings-action-padding-m, 8px);
  justify-content: center;
  align-items: center;
  gap: var(--General-Settings-action-gap, 8px);
}
.brands-list-container .brands-list-content .brands-list-results .brands-list-letters .brand-letter.active {
  color: #0A0A0A;
  border-bottom: 2px solid #0A0A0A;
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-list-letters .brand-letter.active {
    border-bottom: 3px solid #0A0A0A;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-list-letters .brand-letter .brand-letter-letter {
  line-height: 22px;
  font-size: 16px;
}
@media (min-width: 480px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-list-letters .brand-letter .brand-letter-letter {
    line-height: 26px;
    font-size: 18px;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-letter-heading {
  display: flex;
  height: 32px;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  border-bottom: 1px solid var(--Utils-surface-container, rgba(10, 10, 10, 0.1));
  color: var(--Utils-on-surface, #0A0A0A);
}
.brands-list-container .brands-list-content .brands-list-results .brands-letter-heading span {
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 480px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-letter-heading span {
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 480px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-name-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-name-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1280px) {
  .brands-list-container .brands-list-content .brands-list-results .brands-name-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name {
  line-height: 20px;
  font-size: 14px;
  padding: var(--General-Settings-action-padding-m, 8px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name .brand-icons {
  gap: 4px;
  display: flex;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name .brand-icons > *:nth-child(n+5) {
  display: none;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name .brand-icons button {
  padding: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name .brand-icons button svg {
  fill: transparent !important;
}
.brands-list-container .brands-list-content .brands-list-results .brands-name-list .brand-name .brand-icons button svg path {
  stroke: #0A0A0A33;
}
.brands-list-container .brands-list-content .brands-list-results .no-results {
  padding-top: 16px;
}

/*# sourceMappingURL=default\css\search\brands.css.map*/