/* 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) */
/**
 * 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
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Home Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Customizer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  CTA static buttons
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  IOS navigator bottom spacing
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Rest of variables
 * -------------------------------------------------------------------------- */
.error-page__current-search, .error-page__btn {
  display: inline-block;
}
.error-page__current-search::before, .error-page__btn::before {
  float: left;
  content: "<";
}
.error-page__current-search::after, .error-page__btn::after {
  float: right;
  content: ">";
}

.error-page__btn, .error-page__message, .error-page__title {
  --uses-typography: "error-page-text";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1.125rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}
@media (min-width: 575px) {
  .error-page__btn, .error-page__message, .error-page__title {
    font-size: calc(0.0089219331 * 100vw + 12.8698884758px);
  }
}
@media (min-width: 1920px) {
  .error-page__btn, .error-page__message, .error-page__title {
    font-size: 1.875rem;
  }
}

.page--error {
  /* stylelint-disable-next-line selector-max-id */
}
.page--error #vue-app {
  display: none;
}
.page--error .footer {
  margin-top: 0;
}

.main.main--error {
  display: flex;
}
@media (min-width: 575px) {
  .main.main--error {
    min-height: auto;
  }
}

.header.basic-page-error > *:not(.logo) {
  display: none;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media (min-width: 1025px) {
  .error-page {
    justify-content: center;
  }
}
.error-page__container {
  margin: 48px 16px;
}
@media (min-width: 575px) {
  .error-page__container {
    margin-right: 48px;
    margin-left: 48px;
  }
}
@media (min-width: 1025px) {
  .error-page__container {
    max-width: 80%;
    margin: 80px 0 160px;
  }
}
.error-page__title {
  --uses-typography: "error-page-title";
  color: hsl(0, 0%, 66%);
  margin-top: 0;
  margin-bottom: 0;
}
.error-page__message {
  --uses-typography: "error-page-message";
  color: hsl(0, 0%, 0%);
  margin-bottom: 64px;
}
@media (min-width: 1025px) {
  .error-page__message {
    margin-bottom: 80px;
  }
}
.error-page__btn {
  text-decoration: underline;
}
.error-page__banner {
  --uses-typography: "error-page-description";
  color: hsl(0, 0%, 56.5%);
  font-family: "FKGrotesk-Monospaced", sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  position: absolute;
  bottom: 0;
  width: 100vw;
  margin-bottom: 5.875rem;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 575px) {
  .error-page__banner {
    margin-bottom: 24px;
  }
}
@media (min-width: 1025px) {
  .error-page__banner {
    margin-bottom: 32px;
  }
}
.error-grid__item {
  padding-bottom: 32px;
}
@media (min-width: 1025px) {
  .error-grid__item {
    padding: 0 6px 0 0;
  }
}
.error-grid__img {
  padding-bottom: 6px;
  border: 0;
}
@media (min-width: 1025px) {
  .error-grid__img {
    padding-bottom: 16px;
  }
}
.error-grid__text {
  --uses-typography: "error-page-error-grid-text";
  font-family: "FKGrotesk", "Arial", sans-serif;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}
@media (min-width: 1025px) {
  .error-grid__text {
    font-size: 1.125rem;
    line-height: 0;
  }
}

/*# sourceMappingURL=error-page.css.map*/