/** Shopify CDN: Minification failed

Line 108:57 Unexpected ")"

**/
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/templates/page.brands.scss ***!
  \******************************************************************************************************************************************************************************************************/
/**
  * In our theme, we express all font sizes in PX. The reason is that our designer is very picky and want each font size to be exactly as on designed files
  * (which is good :p), but as a consequence, sometimes some font sizes scales across devices (smaller on mobile, bigger on desktop), but sometimes it's the
  * same, which make it super hard to use relative units like REM.
  */
/**
  * Precomputed linear color channel values, for use in contrast calculations.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  *
  * Algorithm, for c in 0 to 255:
  * f(c) {
  *   c = c / 255;
  *   return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  * }
  *
  * This lookup table is needed since there is no `pow` in SASS.
  */
/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
/**
  * Calculate the contrast ratio between two colors.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
/* Mixin to reset all input styles */
/* Scrollbar stuff */
/* Carousel button styles */
/* Modal stuff */
/* Accessibility */
/* ============================================================================
  # UI Library
============================================================================== */
/* Greyscale Colors */
/* Blues */
/* Interactions */
/* Conscious Beauty Pillar Colors */
/* Colors */
/* Typography OLDBRAND */
/* END Typography OLDBRAND */
/* Font stacks */
/* OLDBRAND STUFF STUFF */
/**
 * All the variables that can be used to extract Shopify global settings
 */
/* Colors */
/* Typography */
/* Products */
/* Animation OLDBRAND */
/* Z-Index OLDBRAND */
/* Animation */
/* Z-Index */
/* Modal Variables */
/* Other */
.static-brand-listing .brands-alphabet {
  padding-top: 23px;
  padding-bottom: 16px;
  margin-bottom: 10px;
  display: flex;
  overflow: scroll;
  scrollbar-face-color: #dcdcdc;
  scrollbar-shadow-color: #fff;
  scrollbar-highlight-color: #fff;
  scrollbar-3dlight-color: #fff;
  scrollbar-darkshadow-color: #fff;
  scrollbar-track-color: #fff;
  scrollbar-arrow-color: #fff;
  /* Track */
  /* Handle */
}
@media screen and (min-width: 769px) {
  .static-brand-listing .brands-alphabet {
    padding-top: 40px;
    padding-bottom: 40px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1025px) {
  .static-brand-listing .brands-alphabet {
    justify-content: center;
  }
}
.static-brand-listing .brands-alphabet::-webkit-scrollbar {
  height: 3px;
}
.static-brand-listing .brands-alphabet::-webkit-scrollbar-track {
  background-color: #fff;
}
.static-brand-listing .brands-alphabet::-webkit-scrollbar-thumb {
  background: #dcdcdc;
}
.static-brand-listing .letter-link__wrapper {
  padding-right: 7px;
}
@media screen and (min-width: 769px) {
  .static-brand-listing .letter-link__wrapper {
    padding-right: 14px;
  }
}
.static-brand-listing .letter-link__wrapper:last-of-type() {
  padding-right: 0;
}
.static-brand-listing .letter-link {
  padding-right: 5px;
}
.static-brand-listing .letter-link.disabled {
  cursor: not-allowed;
}
.static-brand-listing .letter-group.hidden {
  display: none;
}
.static-brand-listing .letter-group__header {
  width: 100%;
  padding-bottom: 10.92px;
  border-bottom: 1px solid #dcdcdc;
}
@media screen and (min-width: 769px) {
  .static-brand-listing .letter-group__header {
    padding-bottom: 11.5px;
  }
}
.static-brand-listing .letter-group__items {
  padding-top: 9px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .static-brand-listing .letter-group__items {
    padding-top: 9.5px;
    padding-bottom: 30px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.static-brand-listing .brand-item {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .static-brand-listing .brand-item {
    padding-left: 11px;
    flex: 0 0 25%;
  }
}
@media screen and (min-width: 1025px) {
  .static-brand-listing .brand-item {
    flex: 0 0 20%;
  }
}