/* 1025 is used instead of 1024 because touch devices design is not specified */
/* Mixin to use if touch devices design is specified */
/* Ignore, hover Device with limited pointing accuracy (touch) */
/**
 * Returns a curve from the $transition-curves list
 */
/**
 * Returns a speed from the $transition-times list
 */
/**
 * Returns a transition string
 * used internally by byl-transition and byl-complex-transition mixins
 * @param {string} property - property to be transitioned (i.e. width)
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 */
/*
 * Returns a transition with one or multiple properties and common speed, curve and delay.
 * @param {String,List} string with the property, or each value of the list is a property
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 * Examples of use:
 * @include byl-transition((border-color));
 * @include byl-transition((border-color, height), speed(t2));
 * @include byl-transition((border-color, height), null, curve(ease3));
*/
/*
 * Returns a transition with multiple properties and independent speed, curve and delay.
 * @param {List} each value of the list is in turn a list for each transition properties and values
 * Expected order in each transition will be property, speed, curve and delay
 * Examples of use:
 * @include byl-complex-transition((height, speed(t3)), (opacity, null, curve(ease3)));
*/
/**
 * Map with all possible units to be used by other utilities (i.e. fluid value)
 */
/**
 * Adds unit to a number
 * @param {Number} $value - Value to add unit to
 * @param {String} $unit - String representation of the unit
 * @return {Number} - `$value` expressed in `$unit`
 */
/**
 * Returns a number without units
 */
/**
 * Returns a rem value from a number of pixels.
 * Its uses 16px as root font-size
 */
/**
 * Returns a px value from a number of rems.
 * Its uses 16px as root font-size
 */
/**
 * Returns a rem value from a map
 */
/**
 * Returns a fluid value between two points in the viewport variable dimension.
 * This linear function can be applied to any property (width, font-size, ...).
 * @param {Number} $v1 - Value at init point - Linear function's Y1
 * @param {Number} $v2 - Value at end point - Linear function's Y2
 * @param {Number} $init - Init point in pixels - Linear function's X1
 * @param {Number} $end - End point in pixels - Linear function's X2
 * @param {Number} $var-dim - Variable dimension: 100vw as default, or 100vh, 100%
 * examples:
 * width: byl-linear-fluid-value(70vw, 58vw, 810px, 1024px);
 * padding-bottom: byl-linear-fluid-value(24px, 48px, 1025px, 1920px, 100%);
 * font-size: byl-linear-fluid-value(1rem, 2rem, 320px, 768px),
 * letter-spacing: byl-linear-fluid-value(0, 1px, 768px, 1024px),
 */
/*
 * Colors
 * (Named using "Name that color") - http://chir.ag/projects/name-that-color
 * -------------------------------------------------------------------------- */
/**
 * @tokens Colors Base
 * @presenter Color
 */
/**
 * @tokens Colors Promo
 * @presenter Color
 */
/**
 * @tokens Colors System
 * @presenter Color
 */
/**
 * @tokens Colors Others
 * @presenter Color
 */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/* -------------------------------------------------------------------------- *\
 *  INSETS
 * --------------------------------------------------------------------------
 *  An inset offers indents content on all four sides like the matte of the
 *  framed photo on a wall
 *
 *  $inset-X : a b;
 *  $inset-stack-X : a;
 *  $inset-inline-X : b;
 *
 *  -----------------------
 *  |          a          |
 *  |   ---------------   |
 *  | b |             | b |
 *  |   ---------------   |
 *  |          a          |
 *  -----------------------
 *
\* -------------------------------------------------------------------------- */
/**
 * @tokens Inset Block
 * @presenter Spacing
 */
/**
 * @tokens Inset Inline
 * @presenter Spacing
 */
/**
 * @tokens Insets
 * @presenter Spacing
 */
/* -------------------------------------------------------------------------- *\
 *  Main header
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Footer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Main content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Landing pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Account pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Form Login content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Product Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Cart/Minicart
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Article pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Home Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Customizer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  CTA static buttons
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  IOS navigator bottom spacing
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Rest of variables
 * -------------------------------------------------------------------------- */
.gm-style-iw .store-details {
  margin-left: 0;
  font-weight: normal;
  font-size: 1rem;
  font-family: "FKGrotesk", "Arial", sans-serif;
  line-height: 1.5;
}
.gm-style-iw a {
  color: hsl(245, 100%, 50%);
}

.store-locator-no-apikey {
  display: none;
}

.store-locator-hero {
  margin-bottom: 0.625em;
}
@media (min-width: 575px) {
  .store-locator-hero {
    display: none;
  }
}

.store-locator__landing {
  z-index: 1;
  display: flex;
  flex-direction: row;
}
.store-locator__landing[data-has-results=true] {
  display: none;
}
.store-locator__landing .content-asset {
  display: flex;
}
.store-locator__cities-highlights {
  position: sticky;
  bottom: 16px;
  display: none;
  align-self: flex-end;
  min-width: 294px;
  padding: 0;
}
@media (min-width: 768px) {
  .store-locator__cities-highlights {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(98vh - 40px);
    height: calc(98vh - var(--header-total-height));
    margin: 0 52px 16px 16px;
  }
}
.store-locator__cities-highlights li {
  --uses-typography: "stores-cities-highlights";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 900;
  display: flex;
  flex: 0 1 auto;
  width: 100%;
  margin-bottom: -2px;
  padding-left: 0;
  color: hsl(0, 0%, 0%);
  list-style: none;
}
.store-locator__cities-highlights li:first-child {
  width: 2.25rem;
  margin-bottom: 0.25rem;
}
.store-locator__cities-highlights a {
  --uses-typography: "stores-cities-highlights";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 900;
  width: 100%;
  color: hsl(0, 0%, 0%);
  text-decoration: none;
}
.store-locator__store-images {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.store-locator__store-images picture {
  width: 100%;
  line-height: 0;
}
.store-locator__store-images img {
  width: 100%;
}
.store-locator__store-image {
  width: 100%;
  margin: 0;
  filter: blur(3px);
}
.store-locator__store-image--loaded {
  transition: filter 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
  filter: none;
}
.store-locator__store-image:not([src]):not([srcset]) {
  visibility: hidden;
}
.store-locator__store-address {
  position: fixed;
  bottom: 24px;
  left: 16px;
  margin: 0;
  color: hsl(0, 0%, 100%);
}
@media (min-width: 768px) {
  .store-locator__store-address {
    bottom: 32px;
    left: 48px;
  }
}
.store-locator__store-address h4 {
  --uses-typography: "stores-city";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: calc(0.00625 * 100vw + 16px);
  font-style: normal;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
}
@media (min-width: 1920px) {
  .store-locator__store-address h4 {
    font-size: 1.75rem;
  }
}
.store-locator__store-address p {
  --uses-typography: "stores-address";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: calc(0.00375 * 100vw + 10.8px);
  font-style: normal;
  font-weight: 900;
  margin: 0;
}
@media (min-width: 1920px) {
  .store-locator__store-address p {
    font-size: 1.125rem;
  }
}
.store-locator .form__actions--fluid {
  justify-content: space-between;
  padding-right: 0;
}

@-moz-document url-prefix("") {
  img:-moz-loading {
    visibility: hidden;
  }
}

/*# sourceMappingURL=stores.css.map*/