.blogger {
    /* Document
   ========================================================================== */

   html {
    font-family: sans-serif; /* 1 */
    line-height: 1.15; /* 2 */
    -ms-text-size-adjust: 100%; /* 3 */
    -webkit-text-size-adjust: 100%; /* 3 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * emove the margin in all browsers (opinionated).
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Add the correct display in IE 9-.
   */
  
  article,
  aside,
  footer,
  header,
  nav,
  section {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * Add the correct display in IE 9-.
   * 1. Add the correct display in IE.
   */
  
  figcaption,
  figure,
  main { /* 1 */
    display: block;
  }
  
  /**
   * Add the correct margin in IE 8.
   */
  
  figure {
    margin: 1em 40px;
  }
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    -webkit-box-sizing: content-box;
            box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * 1. emove the gray background on active links in IE 10.
   * 2. emove gaps in links underline in iOS 8+ and Safari 8+.
   */
  
  a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
  }
  
  /**
   * emove the outline on focused links when they are also active or hovered
   * in all browsers (opinionated).
   */
  
  a:active,
  a:hover {
    outline-width: 0;
  }
  
  /**
   * 1. emove the bottom border in Firefox 39-.
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
  
  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted; /* 2 */
  }
  
  /**
   * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
   */
  
  b,
  strong {
    font-weight: inherit;
  }
  
  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
  
  b,
  strong {
    font-weight: bolder;
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /**
   * Add the correct font style in Android 4.3-.
   */
  
  dfn {
    font-style: italic;
  }
  
  /**
   * Add the correct background and color in IE 9-.
   */
  
  mark {
    background-color: #ff0;
    color: #000;
  }
  
  /**
   * Add the correct font size in all browsers.
   */
  
  small {
    font-size: 80%;
  }
  
  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
  
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  
  sub {
    bottom: -0.25em;
  }
  
  sup {
    top: -0.5em;
  }
  
  /* Embedded content
     ========================================================================== */
  
  /**
   * Add the correct display in IE 9-.
   */
  
  audio,
  video {
    display: inline-block;
  }
  
  /**
   * Add the correct display in iOS 4-7.
   */
  
  audio:not([controls]) {
    display: none;
    height: 0;
  }
  
  /**
   * emove the border on images inside links in IE 10-.
   */
  
  img {
    border-style: none;
  }
  
  /**
   * Hide the overflow in IE.
   */
  
  svg:not(:root) {
    overflow: hidden;
  }
  
  /* Forms
     ========================================================================== */
  
  /**
   * 1. Change the font styles in all browsers (opinionated).
   * 2. emove the margin in Firefox and Safari.
   */
  
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }
  
  /**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
  
  button,
  input { /* 1 */
    overflow: visible;
  }
  
  /**
   * emove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. emove the inheritance of text transform in Firefox.
   */
  
  button,
  select { /* 1 */
    text-transform: none;
  }
  
  /**
   * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
   *    controls in Android 4.
   * 2. Correct the inability to style clickable types in iOS and Safari.
   */
  
  button,
  html [type="button"], /* 1 */
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button; /* 2 */
  }
  
  /**
   * emove the inner border and padding in Firefox.
   */
  
  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }
  
  /**
   * Restore the focus styles unset by the previous rule.
   */
  
  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }
  
  /**
   * Change the border, margin, and padding in all browsers (opinionated).
   */
  
  fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
  }
  
  /**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. emove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
  
  legend {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
  }
  
  /**
   * 1. Add the correct display in IE 9-.
   * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
  
  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }
  
  /**
   * emove the default vertical scrollbar in IE.
   */
  
  textarea {
    overflow: auto;
  }
  
  /**
   * 1. Add the correct box sizing in IE 10-.
   * 2. emove the padding in IE 10-.
   */
  
  [type="checkbox"],
  [type="radio"] {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }
  
  /**
   * Correct the cursor style of incement and decement buttons in Chrome.
   */
  
  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }
  
  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
  
  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }
  
  /**
   * emove the inner padding and cancel buttons in Chrome and Safari on macOS.
   */
  
  [type="search"]::-webkit-search-cancel-button,
  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  
  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
  
  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }
  
  /* Interactive
     ========================================================================== */
  
  /*
   * Add the correct display in IE 9-.
   * 1. Add the correct display in Edge, IE, and Firefox.
   */
  
  details, /* 1 */
  menu {
    display: block;
  }
  
  /*
   * Add the correct display in all browsers.
   */
  
  summary {
    display: list-item;
  }
  
  /* Scripting
     ========================================================================== */
  
  /**
   * Add the correct display in IE 9-.
   */
  
  canvas {
    display: inline-block;
  }
  
  /**
   * Add the correct display in IE.
   */
  
  template {
    display: none;
  }
  
  /* Hidden
     ========================================================================== */
  
  /**
   * Add the correct display in IE 10-.
   */
  
  [hidden] {
    display: none;
  }
  
  
  // Setting abstracted libraries
  @function strip-units($value) {
    @return ($value / ($value * 0 + 1));
  }
  
  @function em($pxval, $em-base: 16px) {
    @return (strip-units($pxval) / strip-units($em-base)) * 1em;
  }
  
  @function em2px($emval, $px-base: 16px) {
    @return (strip-units($px-base) * strip-units($emval)) * 1px;
  }
  
  @function morph($color, $adjustment-value: 2) {
    $lightness: lightness($color);
    $light-color: false;
  
    @if $lightness > 35% { $light-color: true; }
  
    @if $light-color {
      $lightness: ($lightness / 20) * $adjustment-value;
      $color: darken($color, $lightness);
    } @else {
      @if $lightness < 2.5% {
        $lightness: 30%;
      } @else if $lightness < 7.5% {
        $lightness: 15%;
      }
  
      $lightness: ($lightness / 10) * $adjustment-value;
      $color: lighten($color, $lightness);
    }
  
    $saturation: saturation($color);
    $saturated-color: false;
  
    @if $saturation > 0% { $saturated-color: true; }
  
    $saturation: ($saturation / 20);
  
    @if $saturated-color {
      @if $light-color {
        $color: desaturate($color, $saturation);
      } @else {
        $color: saturate($color, $saturation);
      }
    }
  
    @return $color;
  }
  
  // Check to see if a color is black and transparent
  @function color-transparent($color) {
    @if (alpha($color) == 0 and red($color) == 0 and green($color) == 0 and blue($color) == 0) {
      // Color is fully transparent, but black. Return opaque white for further adjustments
      @return rgba(255, 255, 255, 1);
    } @else {
      @return $color;
    }
  }
  
  // If background is dark return appropriate color for mixin
  @function border-mix($local-background, $local-dark, $local-light) {
    @if(lightness($local-background) >= 50%) {
      @return $local-dark;
    } @else {
      @return $local-light;
    }
  }
  
  @function vw($pxval) {
    $vw-context: $max-width / 100;
    @return ($pxval/$vw-context) * 1vw;
  }
  
  
  
  
  
  
  
  // Internal libraries
  // Fonts
  
  $font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  $font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
  // Colors
  
  // Backgrounds
  $color-background: color-transparent(#ffffff);
  
  // Typography
  $color-heading: #484848;
  $color-text: #4d4d4d;
  $color-text-hover: morph($color-text, 5);
  $color-link: #262526;
  $color-link-hover: morph($color-link, 3);
  
  // Buttons
  $color-button-text: #ffffff;
  $color-button-background: #b6b6b6;
  $color-button-background-hover: mix($color-background, $color-button-background, 10%);
  $color-button-background-focus: morph($color-button-background);
  $color-button-disable: desaturate($color-button-background, 100%);
  
  // Header
  $color-header-text: #484848;
  $color-header-background: color-transparent(#ffffff);
  
  // Footer
  $color-footer-text: #686868;
  $color-footer-background: color-transparent(#ffffff);
  $color-footer-link: morph($color-footer-text);
  $color-footer-color-alt: transparentize($color-footer-text, 0.2);
  $color-additional-accent: transparentize($color-footer-text, 0.5);
  
  // General
  $color-black: #000;
  $color-white: #fff;
  $color-border: mix($color-background, border-mix($color-background, $color-black, $color-white));
  $color-border-soft: transparentize(border-mix($color-background, $color-black, $color-white), 0.85);
  $color-overlay-background: transparentize($color-black, 0.25);
  $color-background-light: mix($color-text, $color-background, 5%);
  
  $color-box-shadow-border: transparentize($color-border, 0.84);
  $color-box-shadow-shadow: transparentize($color-border, 0.89);
  
  $color-error: #f05d5d;
  $color-success: #51a551;
  $color-warning: #dfa354;
  $color-highlight: #fffbd9;
  $color-notice: $color-text;
  $color-sale: #de0101;
  $color-star: #f6c347;
  $color-star-empty: mix($color-text, $color-background, 50%);
  
  $color-facebook: #425dab;
  $color-twitter: #1da1f2;
  $color-google: #db4437;
  $color-pinterest: #bd1c1c;
  $color-whatsapp: #00E676;
  
  // Typography font sizes
  $font-body-size: 16px;
  $font-body-size-small: em($font-body-size - 1px);
  $font-body-size-smaller: em($font-body-size - 2px);
  
  $font-heading-large: em(34px);
  $font-heading-medium: em(30px);
  $font-h1-size: em(28px);
  $font-h2-size: em(26px);
  $font-h3-size: em(24px);
  $font-h4-size: em(20px);
  $font-h5-size: em(18px);
  $font-h6-size: em(16px);
  
  // Button font sizes
  $button-x-large-size: em(21px);
  $button-large-size: em(18px);
  $button-medium-size: em(16px);
  $button-small-size: em(14px);
  
  // Checkbox settings
  $checkbox-size: (13px, 13px);
  $checkbox-border: transparentize($color-text, 0.6);
  $checkbox-inactive: $color-background;
  $checkbox-active: $color-link;
  
  // Transitions
  $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  $ease-out-ripple: cubic-bezier(0.330, 0.810, 0.585, 0.990);
  $ease-bubble: cubic-bezier(0.3, 0, 0, 1);
  
  // Vertical spaces
  $space-xxx-small: em($font-body-size * 0.25); // 4px
  $space-xx-small: em($font-body-size * 0.5); // 8px
  $space-x-small: em($font-body-size * 0.75); // 12px
  $space-small: em($font-body-size); // 16px
  $space-medium: em($font-body-size * 1.25); // 20px
  $space-large: em($font-body-size * 1.75); // 28px
  $space-x-large: em($font-body-size * 2); // 36px
  $space-xx-large: em($font-body-size * 3.125); // 50px
  $space-xxx-large: em($font-body-size * 4.25); // 68px
  
  // Layout
  $max-width: 1400px;
  $gutter-outer-small: 10px;
  $gutter-outer-medium: 15px;
  $gutter-outer: 25px;
  $gutter-content: 20px;
  
  // Logo widths
  $header-logo-image-max-width: 100px;
  $header-content-offset-right: 235px; // My account + Logout + Currency switcher
  
  $site-nav-item-space: 8px;
  $site-nav-link-space: 7px;
  $site-nav-link-space-vertical: 12px;
  $site-nav-link-space-horizontal: 15px;
  $site-subnav-space: 15px;
  
   // Header Settings
  $header-content-height: 46px;
  $header-padding-vertical-mobile: 10px;
  $header-padding-vertical: 20px;
  $header-padding-vertical-sticky: 10px;
  $header-line-height: $font-body-size + 2px;
  
  // Product grid settings
  $sidebar-width: 185px;
  
  // Product page settings
  $color-slider-accent: $color-link;
  $color-slider-dot: mix($color-text, $color-background, 23%);
  $quantity-width: em(115px);
  
  // Featured blog post
  $color-featured-post-background: $color-link;
  $color-featured-post-foreground: $color-background;
  
  // Z-Indices
  $index-header: 700;
  $index-header-navmenu: $index-header + 2;
  $index-banner: 600;
  $index-main: 500;
  $index-footer: 500;
  $index-mobile-nav: $index-header + 100;
  $index-modal: $index-mobile-nav + 100;
  
  $index-header-search: 150;
  $index-header-internal-icons: 125;
  $index-header-internal-main: 100;
  $index-header-internal-nav: 50;
  
  // Breakpoints
  $bp-xs: 375px;
  $bp-smaller: 680px;
  $bp-small: 720px;
  $bp-medium: 860px;
  $bp-large: 1024px;
  $bp-large-home: 1080px;
  $bp-xl: 1280px;
  
  // Reusable button style for changing button sizes at different break points
  @mixin button-size($button-size) {
    $padding: false;
    $font-size: false;
  
    @if $button-size == small {
      $padding: (10px, 16px);
      $font-size: $button-small-size;
    } @else if $button-size == medium {
      $padding: (12px, 18px);
      $font-size: $button-medium-size;
    } @else if $button-size == large {
      $padding: (14px, 28px);
      $font-size: $button-large-size;
    } @else if $button-size == x-large {
      $padding: (14px, 28px);
      $font-size: $button-x-large-size;
    }
  
    padding: em(nth($padding, 1)) em(nth($padding, 2));
    font-size: $font-size;
  }
  
  @mixin media($max: false, $min: false) {
    @if $max {
      @if $min {
        @media screen and (max-width: $max - 1) and (min-width: $min) { @content; }
      } @else {
        @media screen and (max-width: $max - 1) { @content; }
      }
    } @else {
      @media screen and (min-width: $min) { @content; }
    }
  }
  
  @mixin header-shadow {
    @if ($color-header-background == $color-background) {
      -webkit-box-shadow: 0 1px 4px transparentize($color-border, 0.75);
              box-shadow: 0 1px 4px transparentize($color-border, 0.75);
    }
  }
  
  @mixin grid-gutter($size) {
    margin-right: -$size;
    margin-left: -$size;
  
    > * {
      margin-right: $size;
      margin-left: $size;
    }
  }
  
  @mixin mobile-scrolling() {
    overflow-x: scroll;
    white-space: nowrap;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  
    &::-webkit-scrollbar {
      display: none;
    }
  }
  
  // Buttons
  
  %button-base {
    @include button-size(small);
    display: inline-block;
    font-family: $font-body;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    -webkit-transition:
      background-color 0.2s ease,
      width 0.2s ease,
      height 0.2s ease;
    transition:
      background-color 0.2s ease,
      width 0.2s ease,
      height 0.2s ease;
  }
  
  %button-disable {
    &,
    &:active,
    &:focus {
      color: $color-button-text;
      cursor: default;
      background-color: $color-button-disable;
      border: 1px solid $color-button-disable;
    }
  }
  
  %button-primary {
    @extend %button-base;
    color: $color-button-text;
    background-color: $color-button-background;
    border: 1px solid $color-button-background;
  
    &:not(.disabled):hover {
      background: $color-button-background-hover;
      border: 1px solid $color-button-background-hover;
    }
  
    &:active,
    &:focus {
      background: $color-button-background-focus;
      border: 1px solid $color-button-background-focus;
    }
  
    &.disabled { @extend %button-disable; }
  }
  
  %button-secondary {
    @extend %button-base;
    color: $color-link;
    background-color: $color-background;
    border: 1px solid transparentize($color-border, 0.7);
  
    &:not(.disabled):hover {
      background: $color-background;
      border: 1px solid transparentize($color-border, 0.5);
    }
  
    &.disabled { @extend %button-disable; }
  }
  
  // Layout
  
  %layout-container {
    max-width: $max-width;
    padding-right: $gutter-outer-small;
    padding-left: $gutter-outer-small;
    margin-right: auto;
    margin-left: auto;
  
    @include media($min: $bp-small) {
      padding-right: $gutter-outer-medium;
      padding-left: $gutter-outer-medium;
    }
  
    @include media($min: $bp-large) {
      padding-right: $gutter-outer;
      padding-left: $gutter-outer;
    }
  }
  
  %layout-container--reset {
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
  
    @include media($min: $bp-large) {
      padding-right: 0;
      padding-left: 0;
    }
  }
  
  %page-content {
    margin-top: $gutter-content * 1.5;
    margin-bottom: $gutter-content * 1.5;
  
    @include media($min: $bp-large) {
      margin-top: $gutter-content * 2.5;
      margin-bottom: $gutter-content * 2.5;
    }
  }
  
  %clearfix {
    &::before,
    &::after {
      display: table;
      content: "";
    }
  
    &::after {
      clear: both;
    }
  }
  
  %link--text {
    color: $color-text;
    text-decoration: none;
    -webkit-transition: color 0.1s ease;
    transition: color 0.1s ease;
  
    &:hover {
      color: $color-link;
    }
  }
  
  %link--default {
    color: $color-link;
    text-decoration: none;
    -webkit-transition: color 0.1s ease;
    transition: color 0.1s ease;
  
    &:hover {
      color: $color-link-hover;
    }
  }
  
  %box-shadow {
    border: 1px solid $color-box-shadow-border;
    -webkit-box-shadow: 0 1px 4px $color-box-shadow-shadow;
            box-shadow: 0 1px 4px $color-box-shadow-shadow;
  }
  
  %inline-chevron {
    display: inline-block;
    margin-left: em(5px);
    vertical-align: middle;
  
    svg {
      display: block;
      margin-top: em(-2px);
      -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
              transform: rotate(-90deg);
      fill: currentColor;
    }
  }
  
  %icon-checkbox {
    display: inline-block;
    width: nth($checkbox-size, 1);
    height: nth($checkbox-size, 2);
    color: $checkbox-inactive;
    vertical-align: middle;
  
    svg {
      display: block;
      width: 100%;
      height: 100%;
      background-color: $checkbox-inactive;
      border: 1px solid $checkbox-border;
      border-radius: 2px;
      fill: currentColor;
    }
  }
  
  %icon-checkbox--active {
    color: $checkbox-active;
  
    svg {
      border: 0;
      border-radius: 0;
      fill: currentColor;
    }
  }
  
  %button-reset {
    padding: 0;
    font-family: $font-body;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: normal;
       -moz-appearance: normal;
            appearance: normal;
  }
  
  %atc-button {
    position: relative;
  
    .atc-button--text {
      opacity: 1;
    }
  
    .atc-button--icon {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -13px;
      margin-left: -13px;
      opacity: 0;
      visibility: hidden;
      -webkit-animation: rotate 0.6s linear infinite;
              animation: rotate 0.6s linear infinite;
      -webkit-transition: opacity 0.1s ease 0.1s;
      transition: opacity 0.1s ease 0.1s;
  
      svg {
        display: block;
        width: 26px;
        height: 26px;
      }
    }
  
    &.processing {
      .atc-button--text {
        opacity: 0;
      }
  
      .atc-button--icon {
        opacity: 1;
        visibility: visible;
      }
    }
  }
  
  %search-button {
    position: relative;
  
    .search-icon--inactive,
    .search-icon--active {
      display: inline-block;
    }
  
    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  
    .search-icon--inactive {
      width: 20px;
      height: 21px;
      opacity: 1;
      -webkit-transition: opacity 0.1s ease;
      transition: opacity 0.1s ease;
    }
  
    .search-icon--active {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 26px;
      height: 26px;
      margin-top: -13px;
      margin-left: -13px;
      opacity: 0;
      visibility: hidden;
      -webkit-animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
              animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
    }
  
    &.search-icon--processing {
      .search-icon--inactive {
        opacity: 0;
        -webkit-transition-delay: 0s;
                transition-delay: 0s;
      }
  
      .search-icon--active {
        opacity: 1;
        visibility: visible;
      }
    }
  }
  
  %message--base {
    font-size: $font-body-size;
    font-weight: bold;
  
    a {
     color: currentColor;
    }
  }
  
  %message--error {
    @extend %message--base;
    color: $color-error;
    background-color: mix($color-error, $color-background, 18%);
  }
  
  %message--success {
    @extend %message--base;
    color: $color-success;
    background-color: mix($color-success, $color-background, 18%);
  }
  
  %sneak-in {
  
    &.animating,
    &.visible:not(.animating) {
      display: block;
    }
  
    &.visible:not(.animating) {
      opacity: 1;
      -webkit-transform: translate(0);
          -ms-transform: translate(0);
              transform: translate(0);
    }
  
    &.animating-in {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
      -webkit-animation-duration: 0.27s;
              animation-duration: 0.27s;
      -webkit-animation-name: sneak-in;
              animation-name: sneak-in;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-direction: normal;
              animation-direction: normal;
    }
  
    &.animating-out {
      opacity: 0;
      -webkit-transform: translateY(-5px);
          -ms-transform: translateY(-5px);
              transform: translateY(-5px);
      -webkit-transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
      transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
    }
  }
  
  %fade-in {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
    -webkit-animation-duration: 0.27s;
            animation-duration: 0.27s;
    -webkit-animation-name: fade-in;
            animation-name: fade-in;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-direction: normal;
            animation-direction: normal;
  }
  
  %no-results--wrapper {
    width: 100%;
    margin-top: $space-xx-large;
    text-align: center;
  
    @include media($min: $bp-small) {
      margin-top: $space-xx-large - $space-large;
    }
  }
  
  %no-results--title {
    margin-top: 0;
    margin-bottom: 0;
    font-family: $font-body;
    font-size: $font-h4-size;
    font-weight: normal;
    color: $color-heading;
  }
  
  %no-results--button {
    @extend %button-primary;
    @include button-size(medium);
    margin-top: $space-medium;
  }
  .button-primary {
    @extend %button-primary;
  }
  
  .button-secondary {
    @extend %button-secondary;
  }
  
  .rte {
    font-size: em($font-body-size);
    line-height: 1.625;
  
    h1 {
      font-size: $font-h1-size;
    }
  
    h2 {
      font-size: $font-h2-size;
    }
  
    h3 {
      font-size: $font-h3-size;
    }
  
    h4 {
      font-size: $font-h4-size;
    }
  
    h5 {
      font-size: $font-h5-size;
    }
  
    h6 {
      font-size: $font-h6-size;
    }
  
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: em($font-body-size * 2);
      margin-bottom: em($font-body-size);
      color: $color-heading;
    }
  
    a {
      @extend %link--default;
    }
  
    blockquote {
      padding-left: em($font-body-size);
      margin-left: 0;
      border-left: 2px solid $color-button-background;
    }
  
    dl,
    ul,
    ol,
    p,
    blockquote,
    img:not([style]) {
      margin-top: em($font-body-size);
      margin-bottom: em($font-body-size);
    }
  
    ul,
    ol {
      padding-left: $gutter-content;
    }
  
    dl {
      dt {
        margin-top: em($font-body-size);
      }
  
      dd {
        margin-left: $gutter-content;
      }
    }
  
    img {
      max-width: 100%;
      margin-top: em($font-body-size);
      margin-bottom: em($font-body-size);
  
      &[style*="left"] {
        margin-top: 0;
        margin-right: em($gutter-content);
      }
  
      &[style*="right"] {
        margin-top: 0;
        margin-left: em($gutter-content);
      }
    }
  
    @include media($max: $bp-small) {
      td {
        display: block;
        width: 100%;
      }
    }
  }
  
  // Form Spacing
  $local-input-padding-horizontal: em(10px);
  $local-input-padding-vertical-base: em(15px);
  $local-input-padding-vertical-bottom: $local-input-padding-vertical-base - em(9px);
  $local-input-padding-vertical-top: $local-input-padding-vertical-base + em(9px);
  
  %form-label {
    font-size: em($font-body-size);
    line-height: 1;
    color: $color-text;
  }
  
  %form-control-no-label {
    padding-top: $local-input-padding-vertical-base;
    padding-bottom: $local-input-padding-vertical-base;
  }
  
  %form-control-base {
    z-index: 1;
    width: 100%;
    padding: $local-input-padding-vertical-top $local-input-padding-horizontal $local-input-padding-vertical-bottom;
    font-family: $font-body;
    font-size: $font-body-size;
    color: $color-text;
    background-color: $color-background;
    border: 1px solid transparentize($color-border, 0.7);
    border-radius: 3px;
  
    &:focus {
      border-color: transparentize($color-border, 0.25);
      outline: 0;
    }
  
    &.form-field-error {
      border-color: $color-error;
    }
  
    .no-label & {
      @extend %form-control-no-label;
    }
  }
  
  %form-control-input {
    width: 100%;
  
    &::-webkit-input-placeholder {
      color: currentColor;
      opacity: 0;
      -webkit-transition: opacity 0.12s $ease-out-quad;
      transition: opacity 0.12s $ease-out-quad;
    }
  
    &:-ms-input-placeholder {
      color: currentColor;
      opacity: 0;
      -webkit-transition: opacity 0.12s $ease-out-quad;
      transition: opacity 0.12s $ease-out-quad;
    }
  
    &::-ms-input-placeholder {
      color: currentColor;
      opacity: 0;
      -webkit-transition: opacity 0.12s $ease-out-quad;
      transition: opacity 0.12s $ease-out-quad;
    }
  
    &::placeholder {
      color: currentColor;
      opacity: 0;
      -webkit-transition: opacity 0.12s $ease-out-quad;
      transition: opacity 0.12s $ease-out-quad;
    }
  
    .no-js &,
    &:focus,
    &.form-field-filled {
      &::-webkit-input-placeholder {
        opacity: 0.6;
        -webkit-transition-delay: 0.12s;
                transition-delay: 0.12s;
      }
      &:-ms-input-placeholder {
        opacity: 0.6;
        transition-delay: 0.12s;
      }
      &::-ms-input-placeholder {
        opacity: 0.6;
        transition-delay: 0.12s;
      }
      &::placeholder {
        opacity: 0.6;
        -webkit-transition-delay: 0.12s;
                transition-delay: 0.12s;
      }
  
      + .form-field-title {
        top: em(8px);
        font-size: em(13px);
        -webkit-transition-delay: 0s;
                transition-delay: 0s;
      }
    }
  
    .no-label & {
      &::-webkit-input-placeholder {
        opacity: 0.4;
      }
      &:-ms-input-placeholder {
        opacity: 0.4;
      }
      &::-ms-input-placeholder {
        opacity: 0.4;
      }
      &::placeholder {
        opacity: 0.4;
      }
    }
  }
  
  // TODO: Find way to prevent content scrolling in paddings
  %form-control-textarea {
    line-height: 1.5;
    max-width: 100%;
    max-height: 500px;
    min-width: 100%;
    min-height: 150px;
  }
  
  // Form layout
  .form-fields-columns {
    @extend %clearfix;
  
    @include media($min: $bp-small) {
      margin-right: -1 * $gutter-content / 2;
      margin-left: -1 * $gutter-content / 2;
  
      .form-field {
        float: left;
        margin-right: $gutter-content / 2;
        margin-left: $gutter-content / 2;
      }
  
      .form-field--half {
        width: calc(50% - #{$gutter-content});
      }
    }
  
    + .form-field {
      clear: left;
    }
  }
  
  .form-action-row {
    margin-top: $space-medium;
  
    .button-primary,
    .button-secondary {
      + .button-primary,
      + .button-secondary {
        margin-left: $gutter-content;
      }
    }
  }
  
  .form-field {
    position: relative;
  }
  
  .form-field-input,
  .form-field-select {
    @extend %form-control-base;
  }
  
  .form-field-input {
    @extend %form-control-input;
  }
  
  .form-field-title {
    @extend %form-label;
    position: absolute;
    top: $local-input-padding-vertical-base + em(2px);
    left: $local-input-padding-horizontal;
    z-index: 2;
    pointer-events: none;
    opacity: 0.6;
    -webkit-transition: 0.12s;
    transition: 0.12s;
    -webkit-transition-delay: 0.12s;
            transition-delay: 0.12s;
    -webkit-transition-timing-function: $ease-out-quad;
            transition-timing-function: $ease-out-quad;
  
    .form-field-textarea + & {
      top: $local-input-padding-vertical-base;
    }
  }
  
  .form-field-title--inline {
    @extend %form-label;
    display: inline-block;
    margin-left: $local-input-padding-horizontal;
    vertical-align: middle;
  }
  
  .form-field-select-wrapper {
    position: relative;
  
    .form-field-select {
      z-index: 2;
      width: 100%; // needed for Firefox
      height: 100%; // needed for IE
      padding-right: ($local-input-padding-horizontal * 2) + em(8px);
      color: $color-text;
      cursor: pointer;
      background-color: transparent;
      -webkit-box-shadow: 0 1px 2px 0 $color-border-soft;
              box-shadow: 0 1px 2px 0 $color-border-soft;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
  
      &::-ms-expand {
        display: none; // emoves default arrow from IE10+
      }
  
      .ie9 & {
        padding-right: $local-input-padding-horizontal;
      }
    }
  
    svg {
      position: absolute;
      top: 50%;
      right: $local-input-padding-horizontal;
      margin-top: -3px;
      pointer-events: none;
  
      .ie9 & {
        display: none;
      }
    }
  }
  
  .form-field-textarea {
    @extend %form-control-textarea;
  }
  
  .form-fields--qty {
    position: relative;
  
    .form-field {
      opacity: 0;
      -webkit-transition: opacity 0.15s ease;
      transition: opacity 0.15s ease;
    }
  
    .hidden {
      z-index: 0;
      opacity: 0;
      visibility: hidden;
    }
  
    .visible {
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }
  
    .form-field--qty-select .form-field-select-wrapper {
      position: absolute;
      width: 100%;
    }
  }
  
  .form-field-checkbox {
    position: relative;
    display: block;
    margin-top: $local-input-padding-vertical-base;
    cursor: pointer;
  
    input {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 100%;
      cursor: pointer;
      opacity: 0;
  
      &:checked ~ .form-icon--checkbox {
        @extend %icon-checkbox--active;
      }
    }
  
    .form-icon--checkbox {
      @extend %icon-checkbox;
      margin-top: -2px;
    }
  }
  
  %form-message,
  .form-message {
    &.message--success {
      @extend %message--success;
      padding: $space-xx-small $space-x-small;
    }
  
    &.message--error {
      @extend %message--error;
      padding: $space-xx-small $space-x-small;
    }
  
    ul,
    p {
      margin-top: 0;
      margin-bottom: 0;
      font-weight: normal;
    }
  
    li:not(:first-child) {
      margin-top: $space-xx-small;
    }
  
    ul {
      padding-left: 0;
      list-style-type: none;
    }
  }
  
  .accordion--icon {
  
    svg {
      display: block;
      fill: currentColor;
    }
  
    .icon-chevron-down-left,
    .icon-chevron-down-right {
      -webkit-transition: fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
      transition: fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
      transition: transform 0.25s $ease-out-quad, fill 0.15s $ease-out-quad;
      transition: transform 0.25s $ease-out-quad, fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
      -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
  
    .icon-chevron-down-left {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
  
    .icon-chevron-down-right {
      -webkit-transform: rotate(0);
          -ms-transform: rotate(0);
              transform: rotate(0);
    }
  
    .accordion--active & {
      .icon-chevron-down-left {
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
      }
  
      .icon-chevron-down-right {
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
      }
    }
  }
  
  .accordion--content {
    //scss-lint:disable SpaceAfterPropertyColon
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition:
      max-height 0.25s ease,
      padding-bottom 0.25s ease,
      opacity 0.15s ease;
    transition:
      max-height 0.25s ease,
      padding-bottom 0.25s ease,
      opacity 0.15s ease;
  
    .accordion--active & {
      max-height: 1000px;
      opacity: 1;
    }
  }
  
  $local-background: mix($color-text, $color-background, 10%);
  $local-fill: mix($color-text, $color-background, 35%);
  
  .placeholder--image {
    display: block;
    background-color: $local-background;
    fill: $local-fill;
  }
  
  .placeholder--content-image {
    fill: $local-background;
  }
  
  .placeholder--content-text {
    background-color: $local-background;
  }
  
  // General styling for Shopify Product Reviews
  .spr-badge {
  
    .spr-badge-starrating {
      margin-right: 0;
  
      .spr-icon {
        font-size: em(12px);
      }
    }
  
    .spr-badge-caption {
      display: inline-block;
      margin-left: $space-xxx-small;
      font-size: em(12px);
      white-space: nowrap;
    }
  }
  
  .spr-starratings,
  .spr-starrating {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
  
    .spr-icon {
      top: auto;
      display: inline-block;
      width: auto;
      height: auto;
      font-size: em(14px);
      vertical-align: middle;
  
      &:before {
        font-size: 100%;
      }
    }
  }
  
  .spr-icon {
    color: $color-star;
  
    &:not(:last-child) {
      margin-right: 0.1em;
    }
  
    &.spr-icon-star-empty {
      color: $color-star-empty;
  
      &.spr-icon-star-hover,
      &.spr-icon-star-hover:hover {
        color: $color-star;
      }
    }
  
    .spr-starrating.spr-form-input-error & {
      color: $color-error;
    }
  }
  
  #shopify-product-reviews {
    @extend %box-shadow;
  }
  
  .flickity-prev-next-button {
    @extend %button-reset;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    padding: 5px;
    outline: 0;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0.6;
    cursor: pointer;
  
    svg {
      top: 5px;
      left: 5px;
      width: 30px;
      height: 30px;
    }
  
    &:hover {
      background-color: transparent;
  
      &:not([disabled]) {
        opacity: 0.8;
      }
    }
  
    &.previous {
      left: em(35px);
    }
  
    &.next {
      right: em(35px);
    }
  }
  
  .flickity-page-dots {
    position: absolute;
    width: 100%;
    padding: 0;
    margin: 0;
    bottom: $gutter-outer;
    list-style: none;
    text-align: center;
    line-height: 1;
  
  
    .dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin: 0 8px;
      background-color: rgba($color-black, 0.3);
      border-radius: 50%;
      opacity: 0.25;
      cursor: pointer;
    }
  
    .dot.is-selected {
      opacity: 1;
    }
  }
  
  
  // Global styles
  html {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    -webkit-box-sizing: inherit;
            box-sizing: inherit;
  }
  
  * {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none; // Prevent webkit from resizing text
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Prevent tap highlight color / shadow
  }
  
  html,
  body {
    background-color: $color-background;
  }
  
  html {
    height: 100%;
  
    &::after {
      display: none;
      content: "XS";
  
      @include media($min: $bp-small) {
        content: "S";
      }
  
      @include media($min: $bp-medium) {
        content: "M";
      }
  
      @include media($min: $bp-large) {
        content: "L";
      }
    }
  }
  
  body {
    width: 100%;
    font-family: $font-body;
    font-size: $font-body-size;
    color: $color-text;
  
    &.scroll-lock {
      height: 100%;
      overflow: hidden;
      -ms-touch-action: manipulation;
          touch-action: manipulation;
    }
  }
  
  // Headings
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: $font-heading;
  }
  
  .show-for-sr {
    //scss-lint:disable ImportantRule
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  
  @-webkit-keyframes fade-in {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fade-in {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes sneak-in {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @keyframes sneak-in {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-10px);
              transform: translateY(-10px);
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  @-webkit-keyframes overlay-fade-in {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes overlay-fade-in {
    0% {
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes overlay-fade-out {
    0% {
      opacity: 1;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 0;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes overlay-fade-out {
    0% {
      opacity: 1;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      opacity: 0;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @-webkit-keyframes sneak-in-mobilenav {
    0% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      left: 0;
      opacity: 1;
    }
  }
  
  @keyframes sneak-in-mobilenav {
    0% {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
      opacity: 0;
      -webkit-animation-timing-function: $ease-bubble;
              animation-timing-function: $ease-bubble;
    }
  
    76.92% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 1;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
    }
  
    to {
      left: 0;
      opacity: 1;
    }
  }
  
  @-webkit-keyframes sneak-out-mobilenav {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 1;
      -webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
              animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
    }
  
    to {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
      opacity: 0;
    }
  }
  
  @keyframes sneak-out-mobilenav {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      opacity: 1;
      -webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
              animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
    }
  
    to {
      -webkit-transform: translateX(-100px);
              transform: translateX(-100px);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @keyframes rotate {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes shimmer {
    from {
      opacity: 0.5;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes shimmer {
    from {
      opacity: 0.5;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @-webkit-keyframes loading-video {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
  
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  @keyframes loading-video {
    0% {
      -webkit-transform: translate(-50%, -50%) rotate(0deg);
              transform: translate(-50%, -50%) rotate(0deg);
    }
  
    100% {
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
              transform: translate(-50%, -50%) rotate(360deg);
    }
  }
  
  
  // Sections
  $local-header-icon-padding: 10px;
  $local-header-icon-width: 48px;
  $local-header-icon-height: $header-content-height;
  $local-header-main-space: (50px, 125px); // Space left, right between logo/search and icons
  
  .site-header-wrapper {
    position: relative;
    top: 0;
    left: 0;
    z-index: $index-header;
    width: 100%;
    color: $color-header-text;
    background-color: $color-header-background;
    -webkit-transition: top 0.15s $ease-bubble;
    transition: top 0.15s $ease-bubble;
  
    .site-header-sticky & {
      position: fixed;
    }
  
    .search-takeover-active & {
      display: none;
    }
  }
  
  .site-header {
    @extend %layout-container, %clearfix;
    position: relative;
    z-index: $index-header-internal-main;
    padding-top: $header-padding-vertical-mobile;
    padding-bottom: $header-padding-vertical-mobile;
    background-color: $color-header-background;
    -webkit-transition: padding 0.15s $ease-bubble;
    transition: padding 0.15s $ease-bubble;
  
    @include media($max: $bp-large) {
      @include header-shadow;
    }
  
    @include media($min: $bp-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      padding-top: $header-padding-vertical;
      padding-bottom: $header-padding-vertical / 2;
  
      .ie9 & {
        display: table;
        width: 100%;
        table-layout: fixed;
      }
  
      .site-header-sticky--scrolled & {
        padding-top: $header-padding-vertical-sticky;
        padding-bottom: $header-padding-vertical-sticky;
      }
    }
  }
  
  .site-header-main {
    margin-right: auto;
    margin-left: auto;
    font-size: 0;
    -webkit-transition: margin 0.15s $ease-bubble;
    transition: margin 0.15s $ease-bubble;
  
    @include media($min: $bp-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-flex-basis: auto;
          -ms-flex-preferred-size: auto;
              flex-basis: auto;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -webkit-flex-shrink: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-right: nth($local-header-main-space, 2);
      margin-left: 0;
  
      .ie9 & {
        display: table-cell;
        width: 100%;
        padding-right: nth($local-header-main-space, 2);
        margin-right: 0;
      }
  
      .site-header-sticky--scrolled & {
        margin-left: nth($local-header-main-space, 1);
  
        .ie9 & {
          padding-left: nth($local-header-main-space, 1);
          margin-left: 0;
        }
      }
    }
  }
  
  .site-header-logo {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    vertical-align: middle;
  
    @include media($min: $bp-xs, $max: $bp-large) {
      max-width: calc(100% - #{$local-header-icon-width * 2});
    }
  
    @include media($max: $bp-large) {
      display: table;
      min-height: $header-content-height;
    }
  
    @include media($min: $bp-large) {
      display: inline-block;
      height: auto;
      margin-right: 25px;
      margin-left: 0;
      text-align: left;
    }
  }
  
  .site-logo {
    display: block;
    color: currentColor;
    text-decoration: none;
  
    @include media($max: $bp-large) {
      display: table-cell;
      vertical-align: middle;
    }
  
    @include media($min: $bp-large) {
      display: inline-block;
      margin-left: 0;
    }
  }
  
  .site-logo-image {
    display: block;
    margin-right: auto;
    margin-left: auto;
  
    @include media($min: $bp-large) {
      display: inline-block;
      margin-left: 0;
    }
  }
  
  .site-logo-text {
    display: block;
    width: 100%;
    font-size: em($font-body-size);
    text-decoration: none;
  }
  
  .site-header-menu-toggle,
  .site-header-cart {
    position: absolute;
    top: 10px;
    bottom: auto;
    z-index: $index-header-internal-icons;
    display: inline-block;
    height: $local-header-icon-height;
  
    @include media($min: $bp-large) {
      top: 50%;
      bottom: ($header-padding-vertical-mobile * 2) + $header-content-height;
      // Bottom padding is shorter, we need to subtract 1/4 of that to balance it
      margin-top: (-1 * $local-header-icon-height / 2) + ($header-padding-vertical / 4);
  
      .site-header-sticky--scrolled & {
        // Top and bottom padding are equal
        margin-top: -1 * $local-header-icon-height / 2;
      }
  
      .ie9 & {
        display: table-cell;
        width: $local-header-icon-width;
      }
    }
  }
  
  .site-header-menu-toggle--button,
  .site-header-cart--button {
    display: inline-block;
    padding: $local-header-icon-padding;
    color: $color-header-text;
  
    svg {
      display: block;
    }
  }
  
  .site-header-menu-toggle {
    left: $gutter-outer-small - $local-header-icon-padding;
  
    @include media($min: $bp-small) {
      left: $gutter-outer-medium - $local-header-icon-padding;
    }
  
    @include media($min: $bp-large) {
      left: -50px;
      width: 0;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.15s $ease-bubble, left 0.15s $ease-bubble, width 0s $ease-out-quad 0.15s;
      transition: opacity 0.15s $ease-bubble, left 0.15s $ease-bubble, width 0s $ease-out-quad 0.15s;
  
      .animating &,
      .visible & {
        width: auto;
        visibility: visible;
      }
  
      .site-header-sticky--scrolled & {
        left: $gutter-outer - $local-header-icon-padding;
        opacity: 1;
      }
    }
  }
  
  .site-header-menu-toggle--button {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: transparent;
  
    &:focus {
      outline: none;
    }
  
    .toggle-icon--bar {
      display: block;
      width: 22px;
      height: 2px;
      background-color: $color-header-text;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s;
      -webkit-transform-origin: 1px;
          -ms-transform-origin: 1px;
              transform-origin: 1px;
  
      + .toggle-icon--bar {
        margin-top: 5px;
      }
  
      &.toggle-icon--bar-middle {
        -webkit-transition: opacity 0.2s;
        transition: opacity 0.2s;
      }
    }
  
    &.active {
      .toggle-icon--bar-top {
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
      }
  
      .toggle-icon--bar:nth-child(2) {
        opacity: 0;
      }
  
      .toggle-icon--bar-bottom {
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
      }
    }
  }
  
  .site-header-cart {
    right: $gutter-outer-small - $local-header-icon-padding;
    -webkit-transition: right 0.15s $ease-bubble, top 0.15s $ease-bubble;
    transition: right 0.15s $ease-bubble, top 0.15s $ease-bubble;
  
    @include media($min: $bp-small) {
      right: $gutter-outer-medium - $local-header-icon-padding;
    }
  
    @include media($min: $bp-large) {
      right: $gutter-outer - $local-header-icon-padding;
    }
  
    svg {
      -webkit-transition: margin 0.15s;
      transition: margin 0.15s;
    }
  }
  
  .site-header-cart--count {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  
    &.visible {
      opacity: 1;
  
      + svg {
        margin-right: 5px;
      }
    }
  
    &:after {
      display: block;
      height: 22px;
      min-width: 22px;
      padding: 3px;
      font-size: em(11px);
      font-weight: bold;
      line-height: 12px;
      color: $color-button-text;
      text-align: center;
      text-decoration: none;
      background-color: $color-button-background;
      border: 2px solid $color-header-background;
      border-radius: 50%;
      content: attr(data-header-cart-count);
    }
  }
  
  .announcement-bar {
    display: block;
    padding: $gutter-outer-medium 0;
    font-size: $font-body-size-smaller;
    font-weight: bold;
    color: $color-header-text;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
  
    &.only-mobile {
      @include media($min: $bp-small) {
        display: none;
      }
    }
  
    p {
      margin: 0;
    }
  
    a {
      color: currentColor;
    }
  
    @include media($min: $bp-small) {
      font-size: $font-body-size-small;
    }
  }
  
  .announcement-bar-text {
    @extend %layout-container;
    display: none;
  
    @include media($min: $bp-small) {
      display: block;
    }
  }
  
  .announcement-bar-text-mobile {
    @extend %layout-container;
  
    @include media($min: $bp-small) {
      display: none;
    }
  }
  
  .small-promo-enabled {
    @include media($min: $bp-large) {
      margin-right: $space-xxx-large;
    }
  }
  
  .small-promo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: $color-header-text;
    font-size: $font-body-size-small;
    text-decoration: none;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  
    @include media($max: $bp-large) {
      padding: $space-x-small;
    }
  
    @include media($min: $bp-large) {
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      margin-left: em(35px);
    }
  
    .ie9 & {
      display: block;
      width: 100%;
  
      @include media($min: $bp-large) {
        margin-left: 0;
      }
    }
  }
  
  .small-promo-icon {
    height: em(16px);
    margin-right: $gutter-outer-small;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  
    &.small-promo-icon--svg {
      @include media($max: $bp-large) {
        width: em(16px);
      }
    }
  
    &.small-promo-icon--custom {
      @include media($max: $bp-large) {
        width: auto;
      }
    }
  
    svg {
      width: 100%;
      height: 100%;
      max-width: em(60px);
      max-height: em(60px);
    }
  
    img {
      height: 100%;
    }
  
    @include media($min: $bp-large) {
      width: auto;
      height: em(28px);
      margin-right: $gutter-outer-medium;
    }
  }
  
  .small-promo-heading {
    display: inline;
    margin: 0;
  
    @include media($min: $bp-large) {
      display: block;
    }
  }
  
  .small-promo-text {
    display: none;
    width: 100%;
    max-width: 200px;
    line-height: 1.3;
  
    p {
      margin: $space-xxx-small 0;
    }
  
    @include media($min: $bp-large) {
      display: block;
    }
  }
  
  .small-promo-text-mobile {
    font-size: $font-body-size-smaller;
    text-align: center;
  
    p {
      display: inline;
    }
  
    @include media($min: $bp-large) {
      display: none;
    }
  }
  
  $local-font-size-small: em(13px);
  
  .site-footer-wrapper {
    z-index: $index-footer;
    padding-top: $space-x-small;
    padding-bottom: $space-large;
    margin-top: $space-xx-large;
    color: $color-footer-text;
    background: $color-footer-background;
  
    a {
      color: currentColor;
      text-decoration: none;
      -webkit-transition: color 0.1s ease;
      transition: color 0.1s ease;
  
      &:hover {
        color: $color-footer-link;
      }
    }
  
    .rte a {
      text-decoration: underline;
    }
  
    @include media($min: $bp-large) {
      padding-top: ($space-xxx-large - $space-small);
      padding-bottom: $space-xx-large;
    }
  }
  
  .site-footer-item {
    @extend %layout-container;
  }
  
  .site-footer-information {
    @extend %clearfix;
    margin-top: $space-xx-large;
  
    a {
      color: $color-footer-color-alt;
  
      &:hover {
        color: $color-footer-link;
      }
    }
  
    @include media($min: $bp-large) {
      margin-top: 70px;
    }
  
    .navmenu {
      padding: 0;
      margin: 0;
      font-size: 0;
      list-style: none;
  
      .navmenu-item {
        display: inline-block;
        margin-bottom: 6px;
        font-size: $local-font-size-small;
  
        &:not(:last-child) {
          padding-right: 11px;
          margin-right: 10px;
          border-right: 1px solid $color-additional-accent;
        }
      }
    }
  }
  
  .site-footer-left,
  .site-footer-right {
    width: 100%;
  
    @include media($min: $bp-large) {
      float: left;
    }
  }
  
  .site-footer-left {
    font-size: $local-font-size-small;
    text-align: left;
  
    &:not(:only-child) {
      @include media($min: $bp-large) {
        width: 60%;
        padding-right: $gutter-outer / 2;
      }
    }
  }
  
  .site-footer-credits {
    margin-bottom: 0;
    color: $color-footer-color-alt;
  
    &:not(:first-child) {
      margin-top: 6px;
    }
  }
  
  .site-footer-right {
    @include media($min: $bp-large) {
      width: 40%;
      padding-left: $gutter-outer / 2;
    }
  }
  
  .payment-icons {
    width: 100%;
    padding-left: 0;
    margin-top: $gutter-content;
    margin-bottom: -1 * ($gutter-content / 2);
    margin-left: 0;
    font-size: 0;
    list-style: none;
  
    @include media($min: $bp-large) {
      margin-top: 0;
      text-align: right;
    }
  }
  
  .payment-icons-item {
    display: inline-block;
    margin-right: $gutter-content / 2;
    margin-bottom: $gutter-content / 2;
    font-size: em($font-body-size);
    vertical-align: top;
  
    @include media($min: $bp-large) {
      margin-right: 0;
      margin-left: $gutter-content / 2;
    }
  }
  
  .fourohfour--container {
    @extend %layout-container;
    margin-top: $space-xx-large * 2;
    margin-bottom: $space-xxx-large * 3;
    text-align: center;
  
    .fourohfour-title h1 {
      margin-top: 0;
      color: $color-heading;
    }
  }
  
  .fourohfour--inner {
  
    p {
      margin-bottom: $space-large;
      color: $color-text;
  
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .button-primary {
      @include button-size(large);
    }
  }
  
  $local-max-width: 700px;
  
  .article-image {
    position: relative;
    width: 100%;
    height: 250px;
    margin: 0;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
  
    @include media($min: $bp-smaller) {
      height: 350px;
    }
  
    @include media($min: $bp-medium) {
      height: 400px;
    }
  
    @include media($min: $bp-large) {
      height: 500px;
    }
  }
  
  .article--container {
    @extend %layout-container;
    position: relative;
    margin-top: $space-x-large;
  
    @include media($max: $bp-large) {
      @extend %layout-container;
      margin-right: auto;
      margin-left: auto;
    }
  
    @include media($min: $bp-smaller, $max: $bp-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  
      .ie9 & {
        font-size: 0;
      }
    }
  
    @include media($min: $bp-large) {
      padding-right: 0;
      padding-left: 0;
    }
  }
  
  .article--sidebar {
    padding-right: $space-medium;
  
    @include media($max: $bp-smaller) {
      display: none;
    }
  
    @include media($min: $bp-smaller, $max: $bp-large) {
      width: 18%;
  
      .ie9 & {
        display: inline-block;
        vertical-align: top;
      }
    }
  
    @include media($min: $bp-large) {
      position: absolute;
      left: $space-large;
    }
  
    .share-buttons {
      margin-top: 0;
  
      .share-buttons--button {
        @include media($min: $bp-smaller, $max: $bp-xl) {
          display: block;
          margin-bottom: $space-xx-small;
          margin-left: 0 !important; //scss-lint:disable ImportantRule
        }
      }
    }
  }
  
  .article--share-buttons {
    margin-top: $space-x-large;
  
    @include media($min: $bp-smaller) {
      display: none;
    }
  }
  
  .article--inner {
    margin-right: auto;
    margin-left: auto;
  
    @include media($max: $bp-smaller) {
      width: 100%;
    }
  
    @include media($min: $bp-smaller, $max: $bp-large) {
      width: 82%;
  
      .ie9 & {
        display: inline-block;
        vertical-align: top;
      }
    }
  
    @include media($min: $bp-large) {
      @extend %layout-container;
      max-width: $local-max-width;
    }
  }
  
  .article--meta {
    font-size: 0;
    color: transparentize($color-text, 0.5);
  }
  
  .article--meta-item {
    display: inline-block;
    font-size: $font-body-size;
  
    @include media($max: $bp-small) {
      font-size: $font-body-size-small;
    }
  
    &:nth-child(2) {
      padding-left: 11px;
      margin-left: 10px;
      border-left: 1px solid transparentize($color-border, 0.65);
  
      @include media($max: $bp-small) {
        padding-left: 6px;
        margin-left: 5px;
      }
    }
  }
  
  .article--title {
    margin-top: 0;
    margin-bottom: $space-x-large;
    font-size: $font-h1-size;
    color: $color-heading;
  
    .article--meta + & {
      margin-top: $space-x-small;
    }
  }
  
  .article--tags {
    margin-top: $space-xx-large;
    font-weight: bold;
    font-size: $font-body-size-smaller;
    color: transparentize($color-text, 0.5);
  
    .article--tags-title {
      color: $color-text;
    }
  
    a {
      @extend %link--default;
      margin-left: $space-xxx-small;
      color: transparentize($color-text, 0.5);
  
      &:hover {
        color: transparentize($color-text, 0.4);
      }
    }
  }
  
  .article--pagination {
    @extend %clearfix;
    width: 100%;
    margin-top: $space-xxx-large;
    font-size: 0;
  
    .article--pagination-item-left,
    .article--pagination-item-right {
      position: relative;
      display: inline-block;
      max-width: 40%;
      width: 100%;
  
      > a {
        @extend %link--default;
      }
    }
  
    .article--pagination-item-right {
      float: right;
      text-align: right;
    }
  
    .article--pagination-chevron-right,
    .article--pagination-chevron-left {
      @extend %inline-chevron;
      margin-top: em(8px);
    }
  
    .article--pagination-chevron-left {
      margin-right: em(5px);
      margin-left: 0;
  
      svg {
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
      }
  
      @include media($min: $bp-smaller) {
        position: absolute;
        left: calc(-8px - #{em(5px)});
      }
    }
  
    .article--pagination-text {
      display: inline-block;
      vertical-align: top;
      width: calc(100% - (8px + #{em(5px)}));
      font-size: $font-body-size;
      font-weight: bold;
    }
  
    .article--pagination-title {
      display: none;
      margin-top: $space-xxx-small;
      font-size: $font-body-size-small;
      font-style: italic;
      font-weight: normal;
      color: $color-text;
      line-height: 1.46;
  
      @include media($min: $bp-smaller) {
        display: block;
      }
    }
  }
  
  .listcollections--container {
    @extend %layout-container;
    margin-top: $space-medium;
  
    @include media($min: $bp-small) {
      margin-top: $space-large;
    }
  }
  
  .listcollections--inner {
    @extend %clearfix;
  }
  
  $local-xs-tween: 480px;
  $local-cart-sidebar-width: 280px;
  
  .cart--section {
    @extend %layout-container;
  }
  
  .cart-title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: $space-large;
    margin-bottom: $space-large;
    color: $color-heading;
  
    .ie9 & {
      @extend %clearfix;
    }
  
    @include media($min: $bp-small) {
      margin-bottom: $space-x-large;
    }
  
    @include media($min: $bp-large) {
      margin-top: $space-xx-large;
      margin-bottom: $space-xx-large;
    }
  
    h1 {
      margin-top: 0;
      margin-bottom: 0;
  
      .ie9 & {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  
  .cart-title-right,
  .cart-title-left {
  
    .ie9 & {
      display: inline-block;
      vertical-align: middle;
    }
  }
  
  .cart-title-right {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
  
    .ie9 & {
      float: right;
      font-size: 0;
      text-align: right;
    }
  }
  
  .cart-title-button {
    @include button-size(small);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  
    @include media($min: $local-xs-tween) {
      @include button-size(medium);
    }
  
    .ie9 & {
      display: inline-block;
      vertical-align: middle;
    }
  
    svg {
      display: block;
      width: 19px;
      height: 18px;
      margin-right: 10px;
  
      .ie9 & {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  
  .cart-title-total {
    margin-top: $space-xxx-small;
    font-size: em(14px);
    color: transparentize($color-text, 0.4);
  
    span {
      display: inline-block;
      margin-left: $space-xxx-small;
      color: $color-heading;
    }
  }
  
  .cart-title-total--small {
    width: 100%;
  }
  
  .cart-title-total--large {
  
    .ie9 & {
      display: inline-block;
      vertical-align: middle;
    }
  
    .cart-title-total {
      margin-top: 0;
      margin-right: $space-medium;
      text-align: right;
    }
  
    span {
      display: block;
      margin-top: $space-xxx-small;
      margin-left: 0;
      font-size: $font-h4-size;
    }
  }
  
  .cartitems--container {
    @include media($min: $bp-medium) {
      &.has-sidebar {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
  
        .ie9 & {
          font-size: 0;
        }
      }
    }
  
    &.has-sidebar .cartitems {
      .ie9 & {
        display: inline-block;
        vertical-align: top;
      }
  
      @include media($min: $bp-medium) {
        width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-medium}));
        margin-right: $space-medium;
  
        .ie9 & {
          display: block;
        }
      }
  
      @include media($min: $bp-large) {
        width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-x-large}));
        margin-right: $space-x-large;
      }
  
      @include media($min: $bp-xl) {
        width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-xx-large}));
        margin-right: $space-xx-large;
      }
    }
  }
  
  .cartitems-empty {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 358px;
    padding: $space-medium;
    font-size: $font-body-size;
    text-align: center;
    border: 1px solid $color-border-soft;
    -webkit-box-shadow: 0 1px 4px 0 rgba($color-black, 0.06);
            box-shadow: 0 1px 4px 0 rgba($color-black, 0.06);
  
    .ie9 & {
      height: auto;
    }
  }
  
  .cartitems-empty--inner {
  
    p {
      margin-top: 0;
      margin-bottom: $space-medium;
    }
  
    .button-primary {
      @include button-size(medium);
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 100%;
  
      svg {
        display: block;
        width: 19px;
        height: 18px;
        margin-right: 6px;
        margin-bottom: 1px;
  
        .ie9 & {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  
  .cart-total {
    margin-top: $space-x-large;
  }
  
  .cart-ordernote {
  
    .form-field {
      max-width: 450px;
    }
  
    textarea {
      min-height: 118px;
    }
  }
  
  .cart-ordernote-heading {
    display: block;
    margin-bottom: $space-x-small;
    color: $color-text;
  }
  
  .cart-subtotal {
    display: table;
    width: 100%;
    padding-top: $space-large;
    margin-top: $space-x-large;
    margin-bottom: $space-small;
    font-size: em(22px);
    color: $color-heading;
    border-top: 1px solid $color-border-soft;
  
    span {
      display: table-cell;
      vertical-align: middle;
    }
  
    .money {
      font-size: em(28px);
      text-align: right;
    }
  }
  
  .cart-shipping {
    margin-bottom: $space-large;
    color: $color-text;
    font-size: $font-body-size;
    line-height: 1.56;
  
    .cart-shipping-toggle {
      @extend %button-reset, %link--default;
      display: block;
      line-height: 1.56;
    }
  }
  
  .cart-shippingcalc--container {
    display: none;
    margin-bottom: $space-xxx-large;
  
    &.open {
      display: block;
    }
  }
  
  .cart-shippingcalc-form {
    margin-top: $space-large;
    margin-bottom: $space-large;
  
    .cart-shippingcalc--inner {
      margin-bottom: $space-small;
  
      .ie9 & {
        font-size: 0;
      }
  
      @include media($min: $local-xs-tween) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
      }
    }
  
    .form-field {
      width: 100%;
  
      .ie9 & {
        margin-bottom: $space-small;
  
        &:last-child {
          margin-bottom: 0;
        }
      }
  
      @include media($max: $local-xs-tween) {
        margin-bottom: $space-small;
  
        &:last-child {
          margin-bottom: 0;
        }
      }
  
      @include media($min: $local-xs-tween) {
        width: calc(#{percentage(1 / 3)} - #{$space-small / 2} - 2px);
        margin-right: $space-small;
  
        &:last-child {
          margin-right: 0;
        }
      }
    }
  
    .button-primary {
      @include button-size(medium);
    }
  }
  
  .cart-shippingcalc-none {
    margin-top: 0;
  }
  
  .cart-shippingcalc-response {
    display: none;
    padding: $space-medium;
    color: $color-text;
    background-color: $color-background-light;
  
    &.visible {
      display: block;
    }
  
    > *:first-child {
      margin-top: 0;
    }
  
    > *:last-child {
      margin-bottom: 0;
    }
  }
  
  .cart-shippingcalc-rates {
    margin-top: $space-medium;
  
    &:empty {
      display: none;
    }
  }
  
  .cart-checkout {
    text-align: center;
  
    .button-primary {
      @include button-size(x-large);
      width: 100%;
  
      svg {
        display: inline-block;
        width: 21px;
        height: 21px;
        margin-right: 5px;
        margin-bottom: 2px;
        vertical-align: top;
  
        .ie9 & {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  
    .cart-continue {
      margin-top: $space-medium;
    }
  }
  
  .cart-checkout-additional {
    margin-top: $space-medium;
    margin-bottom: $space-medium;
    text-align: center;
  }
  
  .cart-continue {
    @extend %link--default;
    display: block;
    font-size: $font-body-size;
  
    svg {
      position: relative;
      top: -1px;
      margin-left: 2px;
      -webkit-transform: rotate(-90deg);
          -ms-transform: rotate(-90deg);
              transform: rotate(-90deg);
  
      .ie9 & {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  
  .cart-sidebar {
    width: 100%;
  
    .ie9 & {
      display: inline-block;
      font-size: 0;
      vertical-align: top;
    }
  
    @include media($max: $local-xs-tween) {
      margin-top: $space-large;
    }
  
    @include media($min: $local-xs-tween, $max: $bp-medium) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-top: $space-xx-large;
    }
  
    @include media($min: $bp-medium) {
      width: $local-cart-sidebar-width;
    }
  }
  
  .cart-sidebar-item {
    margin-bottom: $space-medium;
  
    .ie9 & {
      font-size: $font-body-size;
  
      @include media($min: $local-xs-tween, $max: $bp-medium) {
        display: inline-block;
        width: calc(50% - #{($space-medium / 2) - em(2px)});
        vertical-align: top;
      }
    }
  
    @include media($max: $local-xs-tween) {
      width: 100%;
    }
  
    @include media($min: $local-xs-tween, $max: $bp-medium) {
      width: calc(50% - #{$space-medium / 2});
  
      &:first-child {
        margin-right: $space-medium;
      }
    }
  
    @include media($min: $bp-medium) {
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .cart-sidebar-item-image {
      display: block;
      width: 100%;
      max-width: 100%;
    }
  }
  
  .cart-sidebar-item--text {
    padding: $space-medium;
    background-color: $color-background-light;
  
    > *:first-child {
      margin-top: 0;
    }
    > *:last-child {
      margin-bottom: 0;
    }
  }
  
  .collection--section {
    margin-top: $space-medium;
  
    @include media($min: $bp-small) {
      margin-top: $space-large;
    }
  }
  
  .collection--image {
    margin: 0;
  
    img {
      display: block;
      max-width: 100%;
    }
  }
  
  .collection--information {
    margin-top: $space-large;
  
    &:first-child {
      margin-top: 0;
    }
  }
  
  .collection--title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-heading-large;
    line-height: 1.3;
    color: $color-heading;
  }
  
  .collection--description {
    margin-top: $space-xx-small;
  
    > *:first-child {
      margin-top: 0;
    }
  }
  
  
  /*================ #Giftcard Template ================*/
  
  .giftcard__apple-wallet-image {
    display: block;
    margin: 0 auto;
  }
  
  /*================ Print Giftcard Styles ================*/
  @media print {
    @page {
      margin: 0.5cm;
    }
  
    p {
      orphans: 3;
      widows: 3;
    }
  
    .giftcard__print-link,
    .giftcard__apple-wallet {
      display: none;
    }
  }
  
  /*================ Custom Giftcard Styles ================*/
  
  .giftcard-header {
    padding: $space-small $space-large;
    color: $color-header-text;
    background-color: $color-header-background;
    text-align: center;
  }
  
  .giftcard-header-logo {
    display: inline-block;
    color: currentColor;
    text-decoration: none;
  }
  
  .giftcard-header-logo-text {
    display: block;
    width: 100%;
    font-size: em($font-body-size);
    text-decoration: none;
  }
  
  .giftcard--container {
    @extend %layout-container;
    max-width: 488px;
    margin-bottom: $space-xxx-large;
    text-align: center;
  }
  
  .giftcard-title {
    margin-top: $space-x-large;
    margin-bottom: $space-x-large;
  }
  
  .giftcard-message {
    @extend %message--base;
  
    &.message--error {
      @extend %message--error;
    }
  }
  
  .giftcard-qr {
    width: 120px;
    margin-right: auto;
    margin-left: auto;
  }
  
  .giftcard-actions {
    margin-top: $space-medium;
    font-size: 0;
  
    .button-secondary {
      margin-left: $gutter-content;
    }
  }
  
  /*================ Gift Card image ================*/
  .giftcard-image {
    position: relative;
    text-align: center;
  
    img {
      position: relative;
      display: block;
      max-width: 100%;
      border-radius: 10px;
      z-index: 2;
    }
  
    // White corner caps that overlap gift card image
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 47px; // asset width
      height: 47px; // asset width
      z-index: 3;
    }
  
    &::before {
      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik00NC41ODYsMUwxLDQ0LjU4NlYxMGMwLTQuOTYzLDQuMDM3LTksOS05SDQ0LjU4NiBNNDcsMEgxMEM0LjQ3NywwLDAsNC40NzcsMCwxMHYzN0w0NywwTDQ3LDB6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDQuNTg2LDFMMSw0NC41ODZWMTBjMC00Ljk2Myw0LjAzNy05LDktOUg0NC41ODYiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K') 0 0 no-repeat;
      top: -1px;
      left: -1px;
    }
  
    &::after {
      background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik0yLjQxNCw0Nkw0NiwyLjQxNFYzN2MwLDQuOTYzLTQuMDM3LDktOSw5SDIuNDE0IE0wLDQ3aDM3YzUuNTIzLDAsMTAtNC40NzcsMTAtMTBWMEwwLDQ3TDAsNDd6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMi40MTQsNDZMNDYsMi40MTRWMzdjMCw0Ljk2My00LjAzNyw5LTksOUgyLjQxNCIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=') 0 0 no-repeat;
      bottom: -1px;
      right: -1px;
    }
  }
  
  /*================ Gift card code ================*/
  .giftcard-code {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    z-index: 5;
  }
  
  .giftcard-code--medium {
    font-size: 0.875em;
  }
  
  .giftcard-code--small {
    font-size: 0.75em;
  }
  
  .giftcard-code--inner {
    display: inline-block;
    vertical-align: baseline;
    padding: 0.5em;
    border-radius: 4px;
    max-width: 450px;
  }
  
  .giftcard-code-text {
    font-weight: normal;
    font-size: 1.875em;
    text-transform: uppercase;
    border: 1px dashed $color-border;
    background-color: $color-white;
    padding: 0.4em 0.5em;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1;
  
    &.disabled {
      text-decoration: line-through;
    }
  }
  
  /*================ Gift card amount ================*/
  .giftcard-amount {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2.75em;
    line-height: 1.2;
    padding: 10px;
    z-index: 5;
    color: $color-white;
  
    strong {
      display: block;
    }
  }
  
  /*================ Tooltip ================*/
  .giftcard-tooltip {
    display: block;
    position: absolute;
    top: -50%;
    right: 50%;
    margin-top: 16px;
    z-index: 4;
    text-align: center;
    white-space: nowrap;
  
    &::before {
      content: '';
      display: block;
      position: absolute;
      left: 100%;
      bottom: 0;
      width: 0;
      height: 0;
      margin-left: -5px;
      margin-bottom: -5px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 5px solid $color-white;
    }
  }
  
  .giftcard-tooltip-label {
    display: block;
    position: relative;
    right: -50%;
    border: 0;
    border-radius: 4px;
    background-color: $color-white;
    min-height: 14px;
    font-weight: normal;
    font-size: 12px;
    text-decoration: none;
    line-height: 16px;
    text-shadow: none;
    padding: 0.5em 0.75em;
    margin-left: 0.25em;
  
    small {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.875em;
    }
  }
  
  /*================ Medium-down width ================*/
  @media screen and (max-width: 580px) {
    .print-link {
      display: none;
    }
  }
  
  /*================ Small width ================*/
  @media screen and (max-width: 400px) {
    .giftcard-image::before,
    .giftcard-image::after {
      display: none;
    }
  
    .giftcard-code {
      font-size: 0.75em;
    }
  
    .giftcard-code--medium {
      font-size: 0.65em;
    }
  
    .giftcard-code--small {
      font-size: 0.55em;
    }
  }
  
  
  /*============================================================================
    #Print Styles
  ==============================================================================*/
  
  @media print {
    .giftcard-image::before,
    .giftcard-image::after,
    .giftcard-tooltip {
      display: none;
    }
  
    .giftcard-actions {
      display: none;
    }
  }
  
  $local-max-width: 600px;
  $local-header-height: $header-content-height + ($header-padding-vertical-mobile * 2);
  
  .template-password {
  
    &,
    .site-main,
    .password--section {
      height: 100%;
    }
  }
  
  .password--section {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  
  .password-page-header,
  .password-page-content,
  .password-page-footer {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
  }
  
  .password-mailinglist--container,
  .password-social--container {
    margin-top: $space-x-large;
  
    @include media($min: $bp-small) {
      margin-top: $space-xxx-large;
    }
  }
  
  // Header
  .password-page-header {
    width: 100%;
    height: $local-header-height;
    padding: $header-padding-vertical-mobile $gutter-outer-small;
    font-size: 0;
    color: $color-header-text;
    background-color: $color-header-background;
  
    @include media($min: $bp-small) {
      padding-right: $gutter-outer-medium;
      padding-left: $gutter-outer-medium;
    }
  
    @include media($min: $bp-large) {
      padding-right: $gutter-outer;
      padding-left: $gutter-outer;
    }
  }
  
  .password-header-logo {
    display: inline-block;
    width: 50%;
    max-height: $header-content-height;
    padding-right: $gutter-content / 2;
    line-height: 1.1;
    color: currentColor;
    text-decoration: none;
    vertical-align: middle;
  }
  
  .password-header-logo-image {
    display: block;
    max-width: $header-logo-image-max-width;
    max-height: 100%;
  }
  
  .password-header-logo-text {
    display: block;
    width: 100%;
    font-size: em($font-body-size);
    text-decoration: none;
  }
  
  .password-header-login {
    display: inline-block;
    width: 50%;
    height: $header-content-height;
    padding-left: $gutter-content / 2;
    text-align: right;
    vertical-align: middle;
  }
  
  .password-header-lock {
    display: inline-block;
    padding: 8px 10px;
    margin-top: 4px;
    margin-right: -10px;
    color: currentColor;
    cursor: pointer;
    background-color: transparent;
    border: 0;
  
    svg {
      display: block;
      fill: currentColor;
    }
  }
  
  // Main content
  .password-page-content--inner {
    @extend %layout-container;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-width: $local-max-width;
    padding-top: $space-x-large;
    padding-bottom: $space-x-large;
    text-align: center;
  
    @include media($min: $bp-small) {
      padding-top: $space-xxx-large;
      padding-bottom: $space-xxx-large;
    }
  }
  
  .password-title {
    margin-top: 0;
    margin-bottom: $space-medium;
    color: $color-heading;
  }
  
  .password-message {
    margin-bottom: 0;
    line-height: 1.56;
    color: $color-text;
  }
  
  // Newsleter Signup
  .password-mailinglist--container {
  
    .password-mailinglist-title {
      margin-top: 0;
      margin-bottom: $space-medium;
      font-size: em($font-body-size);
      color: $color-heading;
  
      h1 {
        margin-top: 0;
        margin-bottom: 0;
      }
    }
  
    .form-fields-inline {
      display: table;
      width: 100%;
      max-width: calc(#{$local-max-width} * 2 / 3);
      margin-right: auto;
      margin-left: auto;
    }
  
    .newsletter .newsletter-input {
      display: table-cell;
      width: 100%;
      max-width: none;
      padding-right: $space-x-small;
      vertical-align: middle;
    }
  
    .newsletter .newsletter-submit {
      display: table-cell;
      width: auto;
      margin-left: 0;
      white-space: nowrap;
      vertical-align: middle;
    }
  
    .button-primary {
      @include button-size(large);
      display: block;
      width: 100%;
  
      @include media($max: $bp-small) {
        padding-right: $space-small;
        padding-left: $space-small;
      }
    }
  }
  
  .password-social--title {
    font-size: em($font-body-size);
    font-weight: normal;
  }
  
  // Footer
  .password-page-footer {
    @extend %layout-container;
    padding-top: $space-small;
    padding-bottom: $space-small;
    text-align: center;
  }
  
  .password-page-footer--item {
    display: block;
  
    a {
      @extend %link--default;
    }
  
    &:not(:first-child) {
      margin-top: $space-xx-small;
    }
  
    @include media($min: $bp-smaller) {
      display: inline-block;
      margin-top: 0;
    }
  }
  
  // Password modal
  .passwordentry-container {
    display: none;
  }
  
  .passwordentry-title {
    margin-top: 0;
    margin-bottom: $space-large;
    font-size: $font-h4-size;
    color: $color-heading;
  }
  
  .passwordentry-contents {
  
    .passwordentry-message {
      @extend %form-message;
      margin-bottom: $space-medium;
    }
  
    .form-fields-inline {
      display: table;
      width: 100%;
    }
  
    .passwordentry-input {
      display: table-cell;
      width: 100%;
      padding-right: $space-x-small;
      vertical-align: middle;
    }
  
    .passwordentry-submit {
      display: table-cell;
      vertical-align: middle;
    }
  
    .button-primary {
      @include button-size(large);
      display: block;
      width: 100%;
      white-space: nowrap;
  
      @include media($max: $bp-small) {
        padding-right: $space-small;
        padding-left: $space-small;
      }
    }
  
    a {
      @extend %link--default;
    }
  }
  
  .passwordentry-owner {
    margin-top: $space-large;
    margin-bottom: 0;
    color: $color-text;
  }
  
  .modal--passwordentry {
  
    .modal-inner {
      max-width: 450px;
      padding: $space-large $space-medium;
      text-align: center;
      white-space: normal;
  
      @include media($min: $bp-smaller) {
        padding: $space-xx-large;
      }
    }
  }
  
  .product--container {
    @extend %layout-container;
    margin-top: $space-medium;
  
    @include media($min: $bp-small) {
      margin-top: $space-large;
    }
  
    @include media($max: $bp-small) {
      padding-right: 0;
      padding-left: 0;
    }
  }
  
  .product--outer {
    font-size: 0;
  }
  
  // Column structure
  .product-gallery--slider,
  .product-main {
    @include media($max: $bp-small) {
      padding-right: $gutter-outer-small;
      padding-left: $gutter-outer-small;
    }
  }
  
  .product-gallery,
  .product-form--alt,
  .product-main {
    display: inline-block;
    width: 100%;
    font-size: $font-body-size;
    vertical-align: top;
  }
  
  .product-gallery {
    @include media($min: $bp-small) {
      width: 51.5%;
    }
  
    @include media($min: $bp-large) {
      .layout--three-col & {
        width: 35%;
      }
    }
  }
  
  .product-main {
    @include media($min: $bp-small) {
      width: 46%;
      margin-left: 2.5%;
    }
  
    @include media($min: $bp-large) {
      .layout--three-col & {
        width: 36.5%;
        margin-left: 2.5%;
      }
    }
  }
  
  .product-description {
    margin-top: $space-large;
  }
  
  .product-form--alt {
    width: 23.5%;
    margin-left: 2.5%;
    font-size: $font-body-size;
  
    @include media($min: $bp-xl) {
      width: 22%;
      margin-left: 4%;
    }
  }
  
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  .blog-title {
    margin-top: $space-x-small;
    margin-bottom: $space-small;
    color: $color-heading;
  
    @include media($min: $bp-large) {
      margin-top: $space-large;
      margin-bottom: $space-small;
    }
  
    h1,
    a {
      display: inline-block;
    }
  
    a {
      padding: em(2px) em(10px);
    }
  
    svg {
      display: block;
      fill: $color-link;
    }
  }
  
  .blog--container {
    @extend %layout-container;
  }
  
  .blog--inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-bottom: 0;
  
    .ie9 & {
      font-size: 0;
    }
  
    .article--excerpt-wrapper {
  
      @include media($max: $bp-smaller) {
        width: 100%;
        margin-right: 0;
      }
  
      @include media($min: $bp-smaller) {
        width: calc(#{percentage(1 / 2)} - #{$local-space-small * 1 / 2});
        margin-right: $local-space-small;
      }
  
      @include media($min: $bp-smaller, $max: $bp-medium) {
        &:nth-child(2n) {
          margin-right: 0;
        }
      }
  
      @include media($max: $bp-small) {
        margin-bottom: $space-large;
      }
  
      @include media($min: $bp-small) {
        margin-bottom: $space-xx-large;
      }
  
      @include media($min: $bp-medium) {
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
  
      @include media($min: $bp-medium, $max: $bp-large-home) {
        width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
      }
  
      @include media($min: $bp-large-home) {
        width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
        margin-right: $local-space-large;
      }
  
      .ie9 & {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
  
  .blog--no-results {
    @extend %no-results--wrapper;
  }
  
  .blog--no-results-title {
    @extend %no-results--title;
  }
  
  .search--section {
    margin-top: $space-medium;
  
    @include media($min: $bp-small) {
      margin-top: $space-large;
    }
  }
  .highlights-banners-container {
    @include media($max: $bp-large) {
      overflow-x: hidden;
    }
  }
  
  .highlights-banners {
    @extend %layout-container;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: em(100px);
    outline: 0;
  
    &:before,
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: calc(100% - #{$gutter-content});
      bottom: 0;
      z-index: 2;
    }
  
    &:after {
      left: calc(100% - #{$gutter-content});
      right: 0;
    }
  
    @include media($min: $bp-large) {
      height: auto;
      padding: {
        top: $gutter-content * 1.8;
        bottom: $gutter-content * 1.8;
      };
  
      &:before,
      &:after {
        display: none;
      }
    }
  }
  
  .highlights-banners-block {
    top: em(30px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    color: $color-text;
    text-decoration: none;
  
    .highlight-banners-count-2 & {
      width: em(500px);
  
      @include media($min: $bp-large) {
        width: 33%;
      }
    }
  
    .highlight-banners-count-3 & {
      width: em(333px);
  
      @include media($min: $bp-large) {
        width: 25%;
      }
    }
  
    .highlight-banners-count-4 & {
      width: em(250px);
  
      @include media($min: $bp-large) {
        width: 25%;
      }
    }
  }
  
  .highlights-banners-icon {
    width: em(36px);
    height: em(36px);
    margin-right: $gutter-content;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  
    @include media($min: $bp-smaller) {
      width: em(40px);
      height: em(40px);
    }
  
    @include media($min: $bp-large) {
      width: auto;
      height: em(46px);
    }
  
    svg {
      width: 100%;
      height: 100%;
      max-width: em(46px);
      max-height: em(46px);
    }
  
    .highlights-banners-custom-icon {
      width: auto;
      height: 100%;
    }
  }
  
  .highlights-banners-text {
    width: calc(100% - #{em(30px)});
    min-width: 0;
    padding-right: $gutter-content;
    font-size: $font-body-size-smaller;
    line-height: 1.4;
  
    @include media($min: $bp-medium) {
      width: calc(100% - #{em(50px)});
    }
  
    @include media($min: $bp-large) {
      font-size: $font-body-size;
    }
  }
  
  .highlights-banners-heading {
    margin: 0;
  }
  
  .flickity-viewport,
  .flickity-slider {
    width: 100%;
  }
  
  $local-slideshow-small: 440px;
  $local-slideshow-medium: 500px;
  $local-slideshow-large: 560px;
  
  .slideshow {
    position: relative;
    overflow: hidden;
  
    .flickity-viewport {
      -webkit-transition: height 0.2s linear;
      transition: height 0.2s linear;
    }
  
    .flickity-slider {
      height: 100%;
    }
  
    .flickity-page-dots {
      bottom: $gutter-content;
  
      @include media($max: $bp-small) {
        bottom: auto;
      }
  
      .dot {
        width: 5px;
        height: 5px;
        margin: 0 4px;
        -webkit-transition: background 0.3s;
        transition: background 0.3s;
  
        @include media($min: $bp-small) {
          width: 7px;
          height: 7px;
          margin: 0 7.5px;
        }
      }
    }
  
    .flickity-prev-next-button {
      opacity: 1;
  
      svg {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        -webkit-transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
        transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
        transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s;
        transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
      }
  
      @include media($max: $bp-small) {
        display: none;
      }
  
      &:disabled {
        cursor: default;
        opacity: 0.25;
      }
  
      &:hover {
        &:not([disabled]) {
          opacity: 1;
  
          svg {
            -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                    transform: scale(1.2);
          }
        }
      }
  
      &:active {
        &:not([disabled]) {
          opacity: 0.5;
        }
      }
    }
  
    &.flickity-enabled:focus {
      outline: none;
    }
  }
  
  .slideshow-height-small {
    height: 42vw;
  
    @include media($min: $bp-large) {
      height: $local-slideshow-small;
    }
  }
  
  .slideshow-height-medium {
    height: 48vw;
  
    @include media($min: $bp-large) {
      height: $local-slideshow-medium;
    }
  }
  
  .slideshow-height-large {
    height: 54vw;
  
    @include media($min: $bp-large) {
      height: $local-slideshow-large;
    }
  }
  
  .slideshow-height-fullscreen {
    height: 100vh;
  }
  
  .slideshow-slide:not(.slideshow-height-original) {
    height: auto;
  }
  
  .slideshow-image {
    opacity: 0;
  
    .slideshow-height-original & {
      width: 100%;
    }
  }
  
  .slideshow-slide {
    display: none;
    width: 100%;
  
    .flickity-enabled &,
    &:nth-of-type(1) {
      display: block;
    }
  
    &.slideshow-height-fullscreen {
      height: 100%;
    }
  }
  
  .slideshow-background {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
  
    @include media($max: $bp-small) {
      margin-bottom: #{$gutter-outer * 2};
    }
  }
  
  .slideshow-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  
    @include media($max: $bp-small) {
      .slideshow-height-small &,
      .slideshow-height-medium &,
      .slideshow-height-large & {
        display: none;
      }
    }
  }
  
  .slideshow-slide-content {
    position: relative;
    max-width: 92%;
    margin: 0 auto $gutter-outer * 2;
    text-align: center;
    z-index: 1;
  
    .slideshow-height-fullscreen + & {
      position: absolute;
      width: 100%;
      max-width: 70%;
      margin: 0;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
  
    @include media($min: $bp-small) {
      position: absolute;
      width: 100%;
      max-width: 70%;
      margin: 0;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
  
    @include media($min: $bp-large) {
      max-width: 60%;
    }
  
    @include media($min: $bp-xl) {
      max-width: 48%;
    }
  }
  
  .slideshow-link {
    color: $color-heading;
    text-decoration: none;
  }
  
  .slideshow-slide-heading {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-h1-size;
    line-height: 1.2;
  
    @include media($min: $bp-small) {
      font-size: $font-heading-large;
    }
  }
  
  .slideshow-slide-text {
    margin-top: $space-x-small;
    margin-bottom: 0;
    font-size: $font-h5-size;
    font-weight: normal;
    line-height: 1.4;
  
    @include media($min: $bp-large) {
      font-size: $font-h4-size;
    }
  }
  
  .slideshow-button {
    margin: $space-medium $gutter-outer-small / 2 0;
  
    @include media($min: $bp-small) {
      @include button-size(medium);
    }
  
    @include media($min: $bp-large) {
      margin-top: $font-heading-medium;
      @include button-size(large);
    }
  }
  
  // Layouts 1 through 5 heights (Small, Medium, Large)
  $local-mosaic-heights-layout: (
      (440px, 540px, 640px),
      (440px, 540px, 640px),
      (560px, 660px, 760px),
      (860px, 960px, 1060px),
      (860px, 960px, 1060px)
  );
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  .promo-mosaic--container {
    @extend %layout-container;
  }
  
  .promo-mosaic--inner {
    -webkit-transition: height 0.2s $ease-out-ripple;
    transition: height 0.2s $ease-out-ripple;
  
    .promo-mosaic--height-small & {
      @for $i from 1 through 5 {
        &.promo-mosaic--layout-#{$i} {
          @include media($min: $bp-small) {
            height: (nth(nth($local-mosaic-heights-layout, $i), 1) * 0.85);
          }
  
          @include media($min: $bp-medium) {
            height: nth(nth($local-mosaic-heights-layout, $i), 1);
          }
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, $i), 1));
            }
          }
        }
      }
    }
  
    .promo-mosaic--height-medium & {
      @for $i from 1 through 5 {
        &.promo-mosaic--layout-#{$i} {
          @include media($min: $bp-small) {
            height: (nth(nth($local-mosaic-heights-layout, $i), 2) * 0.85);
          }
  
          @include media($min: $bp-medium) {
            height: nth(nth($local-mosaic-heights-layout, $i), 2);
          }
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, $i), 2));
            }
          }
        }
      }
    }
  
    .promo-mosaic--height-large & {
      @for $i from 1 through 5 {
        &.promo-mosaic--layout-#{$i} {
          @include media($min: $bp-small) {
            height: (nth(nth($local-mosaic-heights-layout, $i), 3) * 0.85);
          }
  
          @include media($min: $bp-medium) {
            height: nth(nth($local-mosaic-heights-layout, $i), 3);
          }
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, $i), 3));
            }
          }
        }
      }
    }
  
    .ie9 & { @extend %clearfix; }
  }
  
  .promo-mosaic--column {
    width: 100%;
  
    @include media($min: $bp-small) {
      &:first-child {
        padding-right: $local-space-small / 2;
      }
  
      &:last-child {
        padding-left: $local-space-small / 2;
      }
  
      &:only-child {
        padding-right: 0;
        padding-left: 0;
      }
    }
  
    @include media($min: $bp-large-home) {
      &:first-child {
        padding-right: $local-space-large / 2;
      }
  
      &:last-child {
        padding-left: $local-space-large / 2;
      }
  
      &:only-child {
        padding-right: 0;
        padding-left: 0;
      }
    }
  
    &.promo-mosaic--column-wide {
      @include media($min: $bp-small) {
        width: percentage(2 / 3);
      }
    }
  
    &.promo-mosaic--column-narrow {
      @include media($min: $bp-small) {
        width: percentage(1 / 3);
      }
    }
  
    .ie9 & {
      float: left;
    }
  }
  
  @include media($min: $bp-small, $max: $bp-large) {
    .promo-mosaic--inner.promo-mosaic--layout-3.promo-mosaic--maintain-aspect-ratio {
      .promo-mosaic--row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
      }
  
      .promo-mosaic--column {
        width: 100%;
        padding: 0;
  
        &.promo-mosaic--column-narrow {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: end;
          -webkit-align-items: flex-end;
              -ms-flex-align: end;
                  align-items: flex-end;
  
          .promo-block:nth-of-type(1) {
            margin-right: $local-space-small;
          }
        }
      }
  
      .promo-mosaic--height-small & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 2);
        }
      }
  
      .promo-mosaic--height-medium & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 2);
        }
      }
  
      .promo-mosaic--height-large & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 2);
        }
      }
    }
  
    .promo-mosaic--inner.promo-mosaic--layout-4.promo-mosaic--maintain-aspect-ratio {
      .promo-mosaic--row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
  
      .promo-mosaic--column {
        width: 100%;
        padding: 0;
  
        &.promo-mosaic--column-narrow {
          width: 50%;
        }
  
        &:nth-of-type(2) {
          width: calc(50% - #{$local-space-small / 2});
        }
      }
  
      .promo-mosaic--height-small & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
        }
      }
  
      .promo-mosaic--height-medium & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
        }
      }
  
      .promo-mosaic--height-large & {
        height: auto;
  
        .promo-mosaic--column-wide .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
        }
  
        .promo-mosaic--column-narrow .promo-block--content {
          height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
        }
      }
    }
  }
  
  .promo-block--content.promo-block--expanded,
  .promo-block--content.animating-in,
  .promo-block--content.promo-block--expanded:not(.animating-out) {
    .promo-mosaic--column-narrow & {
      @include media($max: $bp-small) {
        .promo-mosaic--maintain-aspect-ratio & {
          height: auto;
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-2 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 1))} * 3);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 2))} * 3);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 3))} * 3);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-3 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 2))} * 1.5);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 3))} * 1.5);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-4 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} * 1.5);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} * 1.5);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} * 1);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-5 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 1))} * 1);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 2))} * 1);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 3))} * 1);
          }
        }
      }
    }
  
    .promo-mosaic--column-wide & {
      @include media($max: $bp-small) {
        .promo-mosaic--maintain-aspect-ratio & {
          height: auto;
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-2 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 1))} * 1.5);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 2))} * 1.5);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 3))} * 1.5);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-3 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 2))} * 1.5);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 3))} * 1.5);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-4 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
          }
        }
  
        .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-5 & {
          .promo-mosaic--height-small & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 1))} / 1.33);
          }
  
          .promo-mosaic--height-medium & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 2))} / 1.33);
          }
  
          .promo-mosaic--height-large & {
            min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 3))} / 1.33);
          }
        }
      }
    }
  }
  
  // Layout 1
  .promo-mosaic--layout-1 {
    .promo-block {
      @include media($min: $bp-small) {
        .promo-mosaic--height-small & {
          height: nth(nth($local-mosaic-heights-layout, 1), 1) * 0.85;
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, 1), 1));
            }
          }
        }
  
        .promo-mosaic--height-medium & {
          height: nth(nth($local-mosaic-heights-layout, 1), 2) * 0.85;
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, 1), 2));
            }
          }
        }
  
        .promo-mosaic--height-large & {
          height: nth(nth($local-mosaic-heights-layout, 1), 3) * 0.85;
  
          &.promo-mosaic--maintain-aspect-ratio {
            @include media($min: $bp-small, $max: $max-width) {
              height: vw(nth(nth($local-mosaic-heights-layout, 1), 3));
            }
          }
        }
      }
  
      @include media($min: $bp-medium) {
        .promo-mosaic--height-small & {
          height: nth(nth($local-mosaic-heights-layout, 1), 1);
        }
  
        .promo-mosaic--height-medium & {
          height: nth(nth($local-mosaic-heights-layout, 1), 2);
        }
  
        .promo-mosaic--height-large & {
          height: nth(nth($local-mosaic-heights-layout, 1), 3);
        }
      }
    }
  }
  
  // Layout 2
  .promo-mosaic--layout-2 {
    @include media($min: $bp-small) {
      .promo-mosaic--row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
      }
  
      .promo-block,
      .promo-mosaic--row,
      .promo-mosaic--column {
        height: 100%;
      }
    }
  }
  
  // Layout 3
  .promo-mosaic--layout-3 {
  
    @include media($min: $bp-small) {
      .promo-mosaic--row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        height: 100%;
      }
  
      .promo-mosaic--column,
      .promo-mosaic--column-wide .promo-block {
        height: 100%;
      }
    }
  
    .promo-mosaic--column-narrow {
      .promo-block {
        @include media($min: $bp-small) {
          height: calc(50% - #{$local-space-small / 2});
  
          &:last-child {
            margin-top: $local-space-small;
          }
        }
  
        @include media($min: $bp-large-home) {
          height: calc(50% - #{$local-space-large / 2});
  
          &:last-child {
            margin-top: $local-space-large;
          }
        }
      }
    }
  }
  
  // Layout 4
  .promo-mosaic--layout-4 {
  
    .promo-mosaic--row {
      @include media($min: $bp-small) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        height: calc(50% - #{$local-space-small / 2});
  
        &:last-child {
          margin-top: $local-space-small;
        }
      }
  
      @include media($min: $bp-large-home) {
        height: calc(50% - #{$local-space-large / 2});
  
        &:last-child {
          margin-top: $local-space-large;
        }
      }
    }
  
    .promo-block,
    .promo-mosaic--column {
      @include media($min: $bp-small) {
        height: 100%;
      }
    }
  
    .promo-mosaic--column:nth-of-type(1),
    .promo-mosaic--column:nth-of-type(3) {
      @include media($min: $bp-small) {
        padding-right: $local-space-small;
      }
  
      @include media($min: $bp-large-home) {
        padding-right: $local-space-large;
      }
    }
  
    &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(1),
    &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(3) {
      @include media($min: $bp-large-home) {
        padding-right: $local-space-large;
      }
    }
  
    &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(3) {
      @include media($min: $bp-small, $max: $bp-large) {
        width: calc(50% - #{$local-space-small / 2});
      }
    }
  
    .promo-mosaic--column:nth-of-type(4) {
      padding-left: 0;
    }
  
    .promo-mosaic--column:nth-of-type(1),
    .promo-mosaic--column:nth-of-type(2) {
      margin-bottom: $local-space-small;
  
      @include media($min: $bp-large-home) {
        margin-bottom: $local-space-large;
      }
    }
  }
  
  // Layout 5
  .promo-mosaic--layout-5 {
    .promo-mosaic--row {
      @include media($min: $bp-small) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
      }
    }
  
    .promo-mosaic--row,
    .promo-mosaic--column {
      height: 100%;
    }
  
    .promo-mosaic--column-wide {
      .promo-block {
        @include media($min: $bp-small) {
          height: calc(50% - #{$local-space-small / 2});
  
          &:last-child {
            margin-top: $local-space-small;
          }
        }
  
        @include media($min: $bp-large-home) {
          height: calc(50% - #{$local-space-large / 2});
  
          &:last-child {
            margin-top: $local-space-large;
          }
        }
      }
    }
  
    .promo-mosaic--column-narrow {
      .promo-block {
        @include media($min: $bp-small) {
          height: calc(#{percentage(1 / 3)} - #{$local-space-small * (2 / 3)});
  
          &:not(:first-child) {
            margin-top: $local-space-small;
          }
        }
  
        @include media($min: $bp-large-home) {
          height: calc(#{percentage(1 / 3)} - #{$local-space-large * (2 / 3)});
  
          &:not(:first-child) {
            margin-top: $local-space-large;
          }
        }
      }
    }
  }
  
  // Block heights (Small, Medium, Large)
  $local-grid-block-heights: (300px, 375px, 450px);
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  .promo-grid--container {
    @extend %layout-container;
  }
  
  .promo-grid--inner {
    width: 100%;
  
    .ie9 & { @extend %clearfix; }
  
    @include media($min: $bp-small) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: stretch;
      -webkit-align-items: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
  
    .promo-block {
  
      @include media($min: $bp-small) {
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0;
        margin-top: $local-space-small;
  
        .ie9 & {
          float: left;
        }
  
        &.promo-grid--half-width {
          -webkit-box-flex: 0;
          -webkit-flex-grow: 0;
              -ms-flex-positive: 0;
                  flex-grow: 0;
          width: calc(50% - #{$local-space-small / 2});
  
          &:nth-child(-n + 2) {
            margin-top: 0;
          }
  
          .ie9 & {
            &.promo-block--right {
              margin-left: $local-space-small;
            }
          }
        }
  
        &.promo-grid--full-width {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
              -ms-flex-positive: 1;
                  flex-grow: 1;
          width: 100%;
  
          &:first-child {
            margin-top: 0;
  
            + .promo-grid--half-width {
              margin-top: $local-space-small;
            }
          }
        }
      }
  
      @include media($min: $bp-large-home) {
        margin-top: $local-space-large;
  
        &.promo-grid--half-width {
          width: calc(50% - #{$local-space-large / 2});
  
          &:nth-child(-n + 2) {
            margin-top: 0;
          }
  
          .ie9 & {
            &.promo-block--right {
              margin-left: $local-space-large;
            }
          }
        }
  
        &.promo-grid--full-width {
  
          &:first-child {
            margin-top: 0;
  
            + .promo-grid--half-width {
              margin-top: $local-space-large;
            }
          }
        }
      }
  
      .promo-grid--height-small & {
        @include media($min: $bp-small) {
          height: nth($local-grid-block-heights, 1) * 0.85;
        }
  
        @include media($min: $bp-medium) {
          height: nth($local-grid-block-heights, 1);
        }
  
        &.promo-mosaic--maintain-aspect-ratio {
          @include media($min: $bp-small, $max: $max-width) {
            height: vw(nth($local-grid-block-heights, 1));
          }
  
          .promo-block--content.promo-block--expanded,
          .promo-block--content.animating-in {
            @include media($max: $bp-small) {
              height: calc(#{vw(nth($local-grid-block-heights, 1))} * 2);
            }
          }
        }
      }
  
      .promo-grid--height-medium & {
        @include media($min: $bp-small) {
          height: nth($local-grid-block-heights, 2) * 0.85;
        }
  
        @include media($min: $bp-medium) {
          height: nth($local-grid-block-heights, 2);
        }
  
        &.promo-mosaic--maintain-aspect-ratio {
          @include media($min: $bp-small, $max: $max-width) {
            height: vw(nth($local-grid-block-heights, 2));
          }
  
          .promo-block--content.promo-block--expanded,
          .promo-block--content.animating-in {
            @include media($max: $bp-small) {
              height: calc(#{vw(nth($local-grid-block-heights, 2))} * 2);
            }
          }
        }
      }
  
      .promo-grid--height-large & {
        @include media($min: $bp-small) {
          height: nth($local-grid-block-heights, 3) * 0.85;
        }
  
        @include media($min: $bp-medium) {
          height: nth($local-grid-block-heights, 3);
        }
  
        &.promo-mosaic--maintain-aspect-ratio {
          @include media($min: $bp-small, $max: $max-width) {
            height: vw(nth($local-grid-block-heights, 3));
          }
  
          .promo-block--content.promo-block--expanded,
          .promo-block--content.animating-in {
            @include media($max: $bp-small) {
              height: calc(#{vw(nth($local-grid-block-heights, 3))} * 2);
            }
          }
        }
      }
    }
  }
  
  $local-max-width: em(520px);
  $local-space: em(20px);
  $local-title-spacing: em(24px);
  $local-mobile-image: em(48px);
  $local-chevron-width: em(14px);
  
  .menulist--container {
    @extend %layout-container;
  }
  
  .menulist--inner {
    @extend %box-shadow;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  
    .ie9 & { @extend %clearfix; }
  }
  
  .menulist--item {
    position: relative;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 100%;
    border-bottom: 1px solid $color-border-soft;
  
    &:last-child {
      border-bottom: 0;
    }
  
    .ie9 & {
      float: left;
    }
  
    @include media($min: $bp-small) {
      padding: $space-large $local-space;
    }
  
    @include media($min: $bp-small, $max: $bp-medium) {
      width: 50%;
      font-size: 0;
  
      &:nth-last-child(2):nth-child(odd), // Second to last, only when even blocks
      .menulist--blocks-count-1 &,
      .menulist--blocks-count-2 & {
        border-bottom: 0;
      }
  
      &:nth-child(2n + 1) {
        border-right: 1px solid $color-border-soft;
  
        .ie9 & {
          clear: left;
        }
      }
    }
  
    @include media($min: $bp-medium) {
      width: percentage(1 / 3);
      font-size: 0;
  
      .menulist--blocks-count-1 &,
      .menulist--blocks-count-2 & {
        width: 50%;
      }
  
      .menulist--blocks-count-1 &,
      .menulist--blocks-count-2 &,
      .menulist--blocks-count-3 & {
        border-right: 1px solid $color-border-soft;
        border-bottom: 0;
  
        &:last-child {
          border-right: 0;
        }
      }
  
      .menulist--blocks-count-4 &,
      .menulist--blocks-count-5 & {
        border-right: 1px solid $color-border-soft;
  
        &.menulist--item-4 {
          .ie9 & {
            clear: left;
          }
        }
  
        &.menulist--item-4,
        &.menulist--item-5 {
          width: 50%;
          border-bottom: 0;
        }
  
        &.menulist--item-3,
        &.menulist--item-5 {
          border-right: 0;
        }
      }
  
      .menulist--blocks-count-6 & {
        border-right: 1px solid $color-border-soft;
  
        &:nth-child(3n) {
          border-right: 0;
        }
  
        &:nth-child(n + 4) {
          border-bottom: 0;
        }
      }
    }
  }
  
  .menulist--item--inner {
    @include media($min: $bp-small) {
      width: 100%;
      max-width: $local-max-width;
      margin-right: auto;
      margin-left: auto;
    }
  }
  
  .menulist--image {
  
    @include media($max: $bp-small) {
      position: absolute;
      top: em(10px);
      right: $local-chevron-width + ($local-space * 1.5);
      width: $local-mobile-image;
      height: $local-mobile-image;
    }
  
    @include media($min: $bp-small) {
      display: inline-block;
      width: 35%;
      font-size: em($font-body-size);
      vertical-align: top;
    }
  
    img,
    svg {
      max-width: 100%;
    }
  }
  
  .menulist--content {
  
    @include media($min: $bp-small) {
      display: inline-block;
      width: 55%;
      margin-left: 10%;
      font-size: em($font-body-size);
      vertical-align: top;
    }
  }
  
  .menulist--title {
    position: relative;
    padding: $local-title-spacing $local-space;
    margin: 0;
    font-family: $font-body;
    font-size: $font-h5-size;
    color: $color-heading;
    cursor: pointer;
  
    @include media($max: $bp-small) {
      padding-right: $local-mobile-image + $local-chevron-width + ($local-space * 1.5);
    }
  
    @include media($min: $bp-small) {
      padding: 0;
      cursor: inherit;
    }
  }
  
  .menulist-title-icon {
    position: absolute;
    top: 50%;
    right: $local-space * 0.75;
    display: block;
    width: $local-chevron-width;
    height: 8px;
    margin-top: -4px;
    opacity: 0.5;
  
    @include media($min: $bp-small) {
      display: none;
    }
  
    .icon-chevron-down-left,
    .icon-chevron-down-right {
      -webkit-transition-duration: 0s;
              transition-duration: 0s;
    }
  }
  
  .menulist--menu {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: em($font-body-size - 1);
    line-height: 1.5;
    list-style: none;
  
    .accordion--active & {
      padding-bottom: $local-space + em(10px);
    }
  
    @include media($min: $bp-small) {
      max-height: inherit;
      padding: 0;
      margin-top: em(8px);
      opacity: 1;
    }
  }
  
  .menulist--menu-item {
    padding-right: $local-space;
    padding-left: $local-space;
  
    &:not(:first-child) {
      margin-top: em(2px);
    }
  
    @include media($min: $bp-small) {
      padding-right: 0;
      padding-left: 0;
    }
  
    &.menulist--menu-item-hidden {
      display: none;
    }
  
    &.menulist--menu-item-trigger {
      margin-top: em(8px);
    }
  }
  
  .menulist--menu-link {
    @extend %link--text;
    display: inline-block;
    text-decoration: none;
  
    @include media($max: $bp-small) {
      display: block;
      padding-top: em(4px);
      padding-bottom: em(4px);
    }
  
    .menulist--menu-item-trigger & {
      @extend %link--default;
    }
  }
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  $local-blog-width-xs: 260px;
  $local-blog-width-small: 280px;
  $local-blog-width-medium: 323px;
  
  $local-2-up-max: ($local-blog-width-small * 2) + ($local-space-small * 2);
  
  .blogposts--container {
    @extend %layout-container;
    position: relative;
  
    @include media($max: $bp-large) {
      overflow: hidden;
    }
  }
  
  .blogposts--inner {
    outline: 0;
  
    &:not(.flickity-enabled),
    .flickity-slider {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-transition: width 0.1s ease;
      transition: width 0.1s ease;
    }
  
    &.flickity-enabled {
      display: block;
      width: 100%;
      cursor: -webkit-grab;
      cursor: grab;
    }
  
    &:not(.flickity-enabled) {
      @include media($max: $bp-medium) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
  
        .article--excerpt-wrapper:not(:first-child) {
          @include media($max: $bp-large) {
            margin-top: $space-large;
          }
        }
      }
    }
  
    .article--excerpt-wrapper {
      width: em($local-blog-width-xs);
      min-height: 100%;
      font-size: em($font-body-size);
  
      &:not(:last-child) {
        margin-right: $local-space-small;
      }
  
      .blogposts--count-1 &,
      .blogposts--count-3 & {
        @include media($min: $bp-xs) {
          width: em($local-blog-width-small);
        }
  
        @include media($min: $bp-small, $max: $bp-large) {
          width: em($local-blog-width-medium);
        }
  
        @include media($min: $bp-large) {
          width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
        }
  
        @include media($min: $bp-large-home) {
          width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
        }
      }
  
      .blogposts--count-2 & {
        width: em($local-blog-width-small);
  
        @include media($min: $local-2-up-max) {
          width: calc(50% - #{$local-space-small / 2});
        }
  
        @include media($min: $bp-large-home) {
          width: calc(50% - #{$local-space-large / 2});
        }
      }
    }
  }
  
  .blogposts--footer {
    margin-top: $space-medium;
    text-align: center;
  }
  
  .blogposts--footer-link {
    @extend %link--default;
    line-height: 1;
  }
  
  .blogposts--footer-icon {
    @extend %inline-chevron;
    margin-left: em(1px);
  }
  
  $local-space-small: em(10px);
  $local-space-medium: em(15px);
  $local-space-large: em(20px);
  
  $logo-size-small: 90px;
  $logo-size-medium: 120px;
  $logo-size-large: 160px;
  
  .logolist--container {
    @extend %layout-container;
  }
  
  .logolist--inner {
    @include grid-gutter($local-space-small);
    font-size: 0;
    text-align: center;
  
    @include media($min: $bp-small) {
      @include grid-gutter($local-space-medium);
    }
  
    @include media($min: $bp-xl) {
      @include grid-gutter($local-space-large);
    }
  }
  
  .logolist--item {
    display: inline-block;
    width: $logo-size-small;
    margin-top: $local-space-small * 2;
    margin-right: $local-space-small;
    margin-left: $local-space-small;
    font-size: $font-body-size;
    vertical-align: middle;
    -webkit-transition: width 0.1s ease, margin 0.1s ease;
    transition: width 0.1s ease, margin 0.1s ease;
  
    &:nth-child(-n + 2) {
      @include media($max: 345px) {
        margin-top: 0;
      }
    }
  
    &:nth-child(-n + 3) {
      @include media($min: 345px, $max: 455px) {
        margin-top: 0;
      }
    }
  
    &:nth-child(-n + 4) {
      @media screen and (min-width: 455px) and (max-width: (565px - 1px)),
        screen and (min-width: $bp-small) and (max-width: (755px - 1px)) {
        margin-top: 0;
      }
    }
  
    &:nth-child(-n + 5) {
      @media screen and (min-width: 565px) and (max-width: (675px - 1px)),
        screen and (min-width: 755px) and (max-width: (905px - 1px)),
        screen and (min-width: $bp-large) and (max-width: (1175px - 1px)) {
        margin-top: 0;
      }
    }
  
    &:nth-child(-n + 6) {
      @media screen and (min-width: 675px) and (max-width: ($bp-small - 1px)),
        screen and (min-width: 905px) and (max-width: ($bp-large - 1px)),
        screen and (min-width: 1175px) {
        margin-top: 0;
      }
    }
  
    @include media($min: $bp-small) {
      width: $logo-size-medium;
      margin-top: $local-space-medium * 2;
      margin-right: $local-space-medium;
      margin-left: $local-space-medium;
    }
  
    @include media($min: $bp-large) {
      width: $logo-size-large;
    }
  
    @include media($min: $bp-xl) {
      margin-top: $local-space-large * 2;
      margin-right: $local-space-large;
      margin-left: $local-space-large;
  
      &:nth-child(-n + 6) {
        margin-top: 0;
      }
    }
  }
  
  .logolist--link {
    display: block;
  }
  
  .logolist--image {
    display: block;
    max-width: 100%;
    max-height: $logo-size-small;
    margin: 0 auto;
    
    @include media($min: $bp-small) {
      max-height: $logo-size-medium; 
    }
    @include media($min: $bp-large) {
      max-height: $logo-size-large; 
    }
  }
  
  $local-avatar-size: em(45px);
  $local-tweet-width: 276px;
  
  $local-padding-small: em(20px);
  $local-padding-large: em(25px);
  
  .twitter--container {
    @extend %layout-container;
    position: relative;
    overflow: hidden;
  }
  
  .twitter--inner {
    outline: 0;
  
    &:not(.flickity-enabled),
    .flickity-slider {
      @extend %box-shadow;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-transition: width 0.1s ease;
      transition: width 0.1s ease;
    }
  
    &:not(.flickity-enabled) {
      @include media($max: $bp-medium) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
      }
    }
  
    &.flickity-enabled {
      display: block;
      width: 100%;
      cursor: -webkit-grab;
      cursor: grab;
    }
  
    .flickity-slider {
      @include media($max: $bp-medium) {
        @for $i from 1 through 3 {
          .tweet--count-#{$i} & {
            width: em($local-tweet-width * $i);
          }
        }
      }
    }
  
    .ie9 & {
      @extend %clearfix;
    }
  }
  
  .tweet--wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    min-width: $local-tweet-width;
    min-height: 100%;
    padding: $local-padding-small;
    overflow: hidden;
    white-space: normal;
    border-right: 1px solid $color-border-soft;
    -webkit-transition: width 0.15s ease, padding 0.15s ease;
    transition: width 0.15s ease, padding 0.15s ease;
  
    // Mobile styling before flickity kicks in
    .twitter--inner:not(.flickity-enabled) &{
      @include media($max: $bp-medium) {
        display: block;
        width: 100%;
        border-right: 0;
  
        &:not(:first-child) {
          border-top: 1px solid $color-border-soft;
        }
      }
    }
  
    @include media($min: $bp-large-home) {
      padding: $local-padding-large;
    }
  
    .tweet--count-1 & {
      width: 100%;
    }
  
    .tweet--count-2 & {
      width: 50%;
    }
  
    .tweet--count-3 & {
      width: percentage(1 / 3);
    }
  
    &:last-child {
      border-right: 0;
    }
  
    .ie9 & {
      float: left;
    }
  
    a {
      text-decoration: none;
      word-wrap: break-word;
    }
  }
  
  .tweet--header {
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    font-size: 0;
  }
  
  .tweet--header-image,
  .tweet--header-authorinfo {
    display: inline-block;
    vertical-align: middle;
  }
  
  .tweet--header-image {
    width: $local-avatar-size;
    height: $local-avatar-size;
  
    img,
    svg {
      max-width: 100%;
    }
  }
  
  .tweet--header-authorinfo {
    $local-margin: em(18px);
    max-width: calc(100% - #{$local-avatar-size + $local-margin});
    margin-top: 1px;
    margin-left: $local-margin;
  }
  
  .tweet--header-name {
    display: block;
    font-size: $font-h5-size;
    font-weight: bold;
    color: $color-heading;
    text-decoration: none;
  }
  
  .tweet--header-screenname {
    @extend %link--text;
    display: block;
    font-size: $font-h6-size;
    line-height: 1.5;
    opacity: 0.6;
  }
  
  .tweet--content {
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
    margin-top: $space-large;
  
    a {
      @extend %link--default;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      vertical-align: top;
    }
  
    // offset content vertically by the difference of the line-height minus font size
    .tweet {
      margin-top: -1 * ((1.6 * $font-body-size) - $font-body-size) / 2;
      margin-bottom: 0;
      font-size: $font-body-size;
      line-height: 1.6;
      text-overflow: ellipsis;
      word-wrap: break-word;
  
      img {
        display: inline-block;
        height: em($font-body-size + 6px);
        margin-top: -1 * em(5px);
        vertical-align: baseline;
      }
    }
  
    .media {
      display: inline-block;
      float: left;
      width: 35%;
      max-width: 140px;
      margin-right: em(25px);
      margin-bottom: em(7px);
  
      img {
        display: block;
        max-width: 100%;
      }
    }
  }
  
  .tweet--footer {
    @extend %link--text;
    padding-top: $space-small;
    margin-top: auto;
    clear: left;
    font-size: 0;
  }
  
  .tweet--footer--posted,
  .tweet--footer--icon {
    display: inline-block;
    font-size: $font-body-size-small;
    vertical-align: middle;
  }
  
  .tweet--footer--posted {
    margin-left: em(8px);
    opacity: 0.6;
  }
  
  .tweet--footer--icon {
  
    svg {
      display: block;
      color: $color-twitter;
    }
  }
  
  .twitter--placeholder-posted,
  .twitter--placeholder-name,
  .twitter--placeholder-screenname {
    display: inline-block;
    vertical-align: middle;
  }
  
  .twitter--placeholder-name {
    width: 100px;
    height: $font-h5-size;
  }
  
  .twitter--placeholder-screenname {
    width: 100px;
    height: $font-h6-size;
  }
  
  .twitter--placeholder-tweet {
    width: 100%;
  }
  
  .twitter--placeholder-tweet-line {
    display: block;
    height: 1em;
    max-width: 100%;
    margin-top: 0.44em;
  
    &:nth-child(1) {
      width: 204px;
    }
  
    &:nth-child(2) {
      width: 180px;
    }
  
    &:nth-child(3) {
      width: 160px;
    }
  }
  
  .twitter--placeholder-posted {
    width: 80px;
    height: 1em;
  }
  
  $local-space-small: 5px;
  $local-space-medium: 10px;
  $local-space-large: 20px;
  
  $local-photo-width: 165px;
  
  .instagram--container {
    @extend %layout-container;
    position: relative;
    overflow: hidden;
  }
  
  .instagram--inner {
    margin-right: -1 * ($local-space-small / 2);
    margin-left: -1 * ($local-space-small / 2);
    font-size: 0;
    outline: 0;
  
    @include media($max: $bp-medium) {
      &:not(.flickity-enabled) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        overflow: hidden;
  
        .instagram--photo {
          -webkit-flex-basis: auto;
              -ms-flex-preferred-size: auto;
                  flex-basis: auto;
          -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
                  flex-shrink: 0;
        }
      }
    }
  
    @include media($min: $bp-medium) {
      margin-right: -1 * ($local-space-medium / 2);
      margin-left: -1 * ($local-space-medium / 2);
    }
  
    @include media($min: $bp-large-home) {
      margin-right: -1 * ($local-space-large / 2);
      margin-left: -1 * ($local-space-large / 2);
    }
  
    &.flickity-enabled {
      cursor: -webkit-grab;
      cursor: grab;
    }
  }
  
  .instagram--photo {
    display: inline-block;
    width: $local-photo-width + $local-space-small;
    padding-right: $local-space-small / 2;
    padding-left: $local-space-small / 2;
    margin: 0;
    font-size: $font-body-size-small;
    vertical-align: middle;
  
    @include media($max: $bp-medium) {
      .flickity-enabled & {
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
      }
    }
  
    @include media($min: $bp-medium) {
      width: 20%;
      padding-right: $local-space-medium / 2;
      padding-left: $local-space-medium / 2;
    }
  
    @include media($min: $bp-large-home) {
      padding-right: $local-space-large / 2;
      padding-left: $local-space-large / 2;
    }
  
    a {
      display: block;
    }
  
    svg,
    img {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  }
  
  $local-space-small: 10px;
  $local-space-large: 15px;
  
  .collection-list--container {
    @extend %layout-container;
  }
  
  .collection-list--inner {
    @extend %clearfix;
  }
  
  $local-padding-small: 15px;
  $local-padding-medium: 20px;
  
  .featured-collection--container {
    .home-section--title {
      @include media($max: $bp-small) {
        padding-right: $gutter-outer-small;
        padding-left: $gutter-outer-small;
      }
  
      @include media($min: $bp-small, $max: $bp-large) {
        padding-right: $gutter-outer-medium;
        padding-left: $gutter-outer-medium;
      }
    }
  }
  
  .featured-collection--banner {
    height: auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  
    .ie9 & {
      height: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
      vertical-align: middle;
    }
  }
  
  .featured-collection--banner-outer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 100%;
    height: 100%;
    padding: $local-padding-small;
    color: currentColor;
    text-decoration: none;
  
    @include media($min: $bp-medium) {
      padding: $local-padding-medium;
    }
  
    .ie9 & {
      display: table;
      height: 100%;
    }
  }
  
  .featured-collection--banner-inner {
    -webkit-align-self: center;
        -ms-flex-item-align: center;
            align-self: center;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    width: 100%;
    text-align: center;
    vertical-align: middle;
  
    .ie9 & {
      display: table-cell;
    }
  }
  
  .featured-collection--banner-subtitle {
    font-size: $font-body-size-smaller;
    font-weight: bold;
    line-height: 1.2;
    text-transform: uppercase;
  }
  
  .featured-collection--banner-title {
    margin-top: $space-x-small;
    margin-bottom: 0;
    font-size: $font-h3-size;
    white-space: normal;
  }
  
  .search-section {
    position: relative;
    width: 96%;
    max-width: calc(#{$max-width - $gutter-outer * 2});
    margin: 0 auto;
  }
  
  .search-section-background,
  .search-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  
    &.search-section-position-top-left {
      background-position: left top;
    }
  
    &.search-section-position-top-center {
      background-position: center top;
    }
  
    &.search-section-position-top-right {
      background-position: right top;
    }
  
    &.search-section-position-center-left {
      background-position: left center;
    }
  
    &.search-section-position-center {
      background-position: center;
    }
  
    &.search-section-position-center-right {
      background-position: right center;
    }
  
    &.search-section-position-bottom-left {
      background-position: left bottom;
    }
  
    &.search-section-position-bottom-center {
      background-position: center bottom;
    }
  
    &.search-section-position-bottom-right {
      background-position: right bottom;
    }
  }
  
  .search-section-content {
    position: relative;
    max-width: 85%;
    padding: 50px 0;
    margin: 0 auto;
  
    @include media($min: $bp-large-home) {
      max-width: 65%;
    }
  }
  
  .search-section-header {
    margin: 0 auto;
    text-align: center;
  
    @include media($min: $bp-smaller) {
      max-width: 80%;
    }
  
    p {
      margin-top: 0;
    }
  }
  
  .search-section-heading {
    margin-top: 0;
    margin-bottom: $space-x-small;
    font-size: $font-h3-size;
    color: $color-heading;
  
    p {
      margin-bottom: 0;
    }
  }
  
  .search-section-subheading {
    margin-top: 0;
    margin-bottom: $space-x-large;
    font-size: $font-body-size;
    font-weight: 400;
    line-height: 1.5625;
  }
  
  
  .rich-text--container {
    @extend %layout-container;
    margin-top: $gutter-outer * 2;
  
    @include media($min: $bp-medium) {
      margin-top: $gutter-outer * 3;
    }
  }
  
  .rich-text-regular {
    max-width: em(650px);
  }
  
  .rich-text-wide {
    max-width: em(850px);
  }
  
  .rich-text-block {
    margin-bottom: $gutter-outer * 2;
  
    @include media($min: $bp-medium) {
      margin-bottom: $gutter-outer * 3;
    }
  }
  
  .rich-text-alignment-left {
    text-align: left;
  }
  
  .rich-text-alignment-center {
    text-align: center;
  }
  
  .rich-text-alignment-right {
    text-align: right;
  }
  
  .rich-text-heading {
    margin-bottom: $space-medium;
    font-size: $font-h4-size;
    line-height: 1.5;
    color: $color-heading;
  }
  
  .rich-text-heading-medium {
    font-size: $font-h3-size;
  }
  
  .rich-text-heading-large {
    font-size: $font-h1-size;
  }
  
  .rich-text-content {
    line-height: 1.5;
  
    * {
      max-width: 100%;
    }
  }
  
  
  // Templates
  $local-account-width-small: 500px;
  $local-account-width-medium: 640px;
  
  .account-page,
  .account-page-masthead,
  .account-page-content {
    @extend %page-content;
  }
  
  .account-page-masthead {
    @extend %layout-container;
    text-align: center;
  }
  
  .account-page-content {
    @extend %layout-container;
  
    a {
      @extend %link--default;
    }
  
    .form-field {
      margin-bottom: $space-medium;
    }
  
    .form-fields-columns {
  
      @include media($min: $bp-small) {
        margin-bottom: -1 * $space-medium;
      }
    }
  }
  
  .account-page--two-column {
    @extend %clearfix;
  
    .account-page--column-half {
      margin-top: $space-xx-large;
  
      &:first-child {
        margin-top: 0;
      }
  
      @include media($min: $bp-medium) {
        float: left;
        width: calc(50% - #{$gutter-content});
        margin-top: 0;
  
        &:nth-child(2) {
          margin-left: $gutter-content * 2;
        }
      }
    }
  
    .account-page--column-large {
      @include media($min: $bp-medium) {
        float: left;
        width: calc(70% - #{$gutter-content});
      }
  
      @include media($min: $bp-xl) {
        float: left;
        width: calc(80% - #{$gutter-content});
      }
    }
  
    .account-page--column-small {
      margin-top: $space-x-large;
  
      @include media($min: $bp-medium) {
        float: left;
        width: calc(30% - #{$gutter-content});
        margin-top: 0;
        margin-left: $gutter-content * 2;
      }
  
      @include media($min: $bp-xl) {
        width: calc(20% - #{$gutter-content});
      }
    }
  }
  
  // Account titles
  .account-page-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-h1-size;
    color: $color-heading;
  
    @include media($min: $bp-large) {
      font-size: $font-heading-medium;
    }
  }
  
  .account-page-subtitle {
    margin-top: 0;
    margin-bottom: $space-small;
    font-size: $font-h4-size;
    color: $color-heading;
  
    &:not(:first-child) {
      margin-top: $space-x-large;
    }
  }
  
  // Account messages
  .account-message {
    @extend %form-message;
    margin-bottom: $space-medium;
  }
  
  // Login page
  .account-login,
  .account-recovery {
    display: none;
  
    &.visible {
      display: block;
    }
  }
  
  .account-page-login {
  
    .account-page-content {
      max-width: $local-account-width-small;
    }
  
    .account-register {
      margin-top: $space-large;
    }
  }
  
  .account-page-login,
  .account-page-register {
  
    .form-action--submit {
      vertical-align: middle;
    }
  
    .form-action-row--helper {
      margin-top: $space-small;
  
      @include media($min: $bp-small) {
        display: inline-block;
        margin-top: 0;
        margin-left: $gutter-content;
        vertical-align: middle;
      }
    }
  
    .form-action-row--helper-item {
      display: block;
      font-size: $font-body-size-small;
  
      &:not(:first-child) {
        margin-top: $space-xx-small;
      }
    }
  }
  
  // Account registration
  .account-page-register {
    .account-page-content {
      max-width: $local-account-width-medium;
    }
  }
  
  // Account challenges
  .shopify-challenge__container {
    margin-top: $space-large;
    text-align: center;
  
    .btn {
      @extend %button-primary;
    }
  }
  
  // Account overview
  .account-order-list {
    width: 100%;
    max-width: 600px;
    font-size: $font-body-size-smaller;
    border-collapse: collapse;
    border-spacing: 0 $gutter-content;
    table-layout: fixed;
  
    tr {
      text-align: left;
    }
  
    td:not(:last-child) {
      padding-right: $gutter-content / 2;
    }
  
    tbody td {
      padding-top: $gutter-content / 2;
    }
  }
  
  // Account address
  .account-address-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  
    .ie9 & {
      font-size: 0;
    }
  }
  
  .account-address {
    @extend %box-shadow;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: 100%;
    padding: $space-medium;
    margin-top: $gutter-content;
    font-size: $font-body-size;
  
    &:first-child {
      margin-top: 0;
    }
  
    .ie9 & {
      display: inline-block;
      vertical-align: top;
    }
  
    @include media($min: $bp-smaller) {
      width: calc(#{percentage(1 / 2)} - #{$gutter-content / 2});
      margin-right: $gutter-content;
  
      &:nth-child(2) {
        margin-top: 0;
      }
  
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
  
  .account-info-item,
  .account-address-item {
    margin-top: $space-small;
    margin-bottom: $space-small;
  }
  
  .account-address-item--default {
    font-style: italic;
  }
  
  .account-address-list {
    padding-left: 0;
    margin-top: $space-medium;
    margin-bottom: $space-medium;
    list-style: none;
  
    li {
      margin-top: $space-xx-small;
    }
  }
  
  .account-address-list-footer {
    margin-top: $space-medium / 2;
  
    button {
      margin-top: $space-medium / 2;
  
      &:first-child {
        margin-right: $gutter-content;
  
        @include media($min: $bp-medium, $max: $bp-large) {
          margin-right: $gutter-content / 2;
        }
      }
    }
  }
  
  .account-address-form {
    display: none;
  
    &.visible {
      display: block;
    }
  }
  
  // Account activation + Password reset
  .account-page-activate,
  .account-page-reset-password {
    .account-page-content {
      max-width: $local-account-width-small;
    }
  }
  
  $local-max-width: 680px;
  
  .contact-page-content {
    @extend %layout-container, %page-content;
    max-width: $local-max-width;
  
    .form-field {
      margin-bottom: $space-medium;
    }
  
    .form-fields-columns {
  
      @include media($min: $bp-small) {
        margin-bottom: -1 * $space-medium;
      }
    }
  
    .contact-message {
      @extend %form-message;
      margin-bottom: $space-medium;
    }
  
    .contact-form-button {
      @include button-size(medium);
    }
  }
  
  
  // Components
  $local-footer-accent: rgba($color-footer-text, 0.15);
  
  // Footer blocks
  .site-footer-blocks {
    @include media($min: $bp-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-flex-wrap: nowrap;
          -ms-flex-wrap: nowrap;
              flex-wrap: nowrap;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  }
  
  .site-footer-block-item {
    font-size: em($font-body-size);
    border-bottom: 1px solid $local-footer-accent;
  
    @include media($min: $bp-large) {
      -webkit-flex-basis: auto;
          -ms-flex-preferred-size: auto;
              flex-basis: auto;
      -webkit-box-flex: 0;
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
              flex-shrink: 0;
      width: calc(21% - #{$space-medium * 3 / 4});
      padding-right: $space-medium;
      margin-right: $space-medium;
      border-bottom: 0;
  
      &:last-child {
        padding-right: 0;
        margin-right: 0;
      }
  
      .column-count-5 & {
        width: calc(19% - #{$space-medium * 4 / 5});
      }
  
      &.site-footer-block-newsletter {
        width: calc(24% - #{$space-medium * 4 / 5});
      }
  
      .ie9 & {
        float: left;
        width: calc(19% - #{$space-medium * 4 / 5});
      }
    }
  }
  
  .site-footer-block-title {
    position: relative;
    padding-top: $space-small;
    padding-bottom: $space-small;
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-h5-size;
  
    @include media($max: $bp-large) {
      padding-top: $space-medium;
  
      .site-footer-block-menu & {
        padding-top: $space-small;
      }
    }
  }
  
  .site-footer-block-icon {
    position: absolute;
    top: 50%;
    right: $gutter-content / 2;
    display: block;
    height: 8px;
    margin-top: -4px;
  
    svg {
      display: block;
    }
  
    .icon-chevron-down-left,
    .icon-chevron-down-right {
      -webkit-transition-duration: 0s;
              transition-duration: 0s;
    }
  
    @include media($min: $bp-large) {
      display: none;
    }
  }
  
  .site-footer-block-content {
    padding-bottom: $space-medium;
    font-size: $font-body-size-small;
    line-height: 1.6;
  
    .site-footer-block-newsletter & {
      padding-bottom: 0;
      margin-bottom: $space-medium;
    }
  
    .site-footer-block-newsletter &,
    .site-footer-block-rich-text & {
      > *:first-child {
        margin-top: 0;
      }
  
      > *:last-child {
        margin-bottom: 0;
      }
    }
  
    @include media($min: $bp-large) {
      padding-bottom: 0;
    }
  }
  
  .site-footer-block-menu {
  
    .navmenu {
      padding-bottom: 0;
      padding-left: 0;
      margin: 0;
      list-style: none;
    }
  
    .navmenu-item:not(:first-child) {
      margin-top: em(8px);
  
      @include media($min: $bp-small) {
        margin-top: em(5px);
      }
    }
  
    .site-footer-block-title {
      @include media($max: $bp-large) {
        cursor: pointer;
      }
    }
  
    .site-footer-block-content {
      padding-bottom: 0;
  
      @include media($min: $bp-large) {
        max-height: 1000px;
        opacity: 1;
      }
    }
  
    &.accordion--active {
      .site-footer-block-content {
        padding-bottom: $space-medium;
      }
    }
  }
  
  .site-footer-block-social-accounts {
  
    .social-icons {
      margin-top: -4px;
      margin-right: -4px;
      margin-left: -4px;
      font-size: 0;
    }
  
    .social-link {
      display: inline-block;
      width: 36px;
      height: 36px;
      padding: 4px;
      overflow: hidden;
      font-size: $font-body-size-small;
      line-height: 1.8;
      vertical-align: top;
  
      svg {
        width: 28px;
        height: 28px;
        background-color: $local-footer-accent;
        border-radius: 100%;
        -webkit-transition: background-color 0.4s $ease-out-quad;
        transition: background-color 0.4s $ease-out-quad;
      }
  
      &:hover svg {
        background-color: rgba($color-footer-text, 0.05);
      }
    }
  }
  
  .site-footer-block-newsletter {
  
    .newsletter {
      padding-bottom: $space-medium;
  
      @include media($min: $bp-large) {
        margin-top: $space-medium - $space-small;
      }
  
      .button-primary {
        padding-right: em(15px);
        padding-left: em(15px);
      }
      
      .form-fields-inline {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: calc(100% + #{$gutter-content / 2});
        margin-top: -1 * $space-small;
        margin-right: -1 * $gutter-content / 4;
        margin-left: -1 * $gutter-content / 4;
  
        .ie9 & {
          margin-right: 0;
          margin-left: 0;
        }
      }
  
      .form-field {
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0;
        margin-top: $space-small;
        margin-right: $gutter-content / 4;
        margin-left: $gutter-content / 4;
        white-space: nowrap;
        vertical-align: middle;
  
        .ie9 & {
          width: 100%;
          margin-right: 0;
          margin-left: 0;
        }
      }
  
      .newsletter-input {
        -webkit-flex-basis: calc(67% - #{$gutter-content});
            -ms-flex-preferred-size: calc(67% - #{$gutter-content});
                flex-basis: calc(67% - #{$gutter-content});
        min-width: 190px;
      }
  
      .newsletter-submit {
        -webkit-flex-basis: calc(33% - #{$gutter-content});
            -ms-flex-preferred-size: calc(33% - #{$gutter-content});
                flex-basis: calc(33% - #{$gutter-content});
      }
    }
  }
  
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: none;
    padding: $gutter-outer-small;
    overflow: hidden;
    overflow-y: auto;
    white-space: nowrap;
    background-color: transparentize($color-black, 0.4);
    content: "";
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
    -webkit-overflow-scrolling: touch;
  
    @include media($min: $bp-small) {
      padding: $gutter-outer-medium;
    }
  
    @include media($min: $bp-large) {
      padding: $gutter-outer;
    }
  
    .modal-loaded & {
      display: block;
    }
  
    .modal-loaded.modal-visible & {
      z-index: $index-modal - 1;
      opacity: 1;
      visibility: visible;
    }
  }
  
  .modal-inner {
    position: relative;
    z-index: -1;
    padding: $gutter-outer-medium;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    background-color: $color-background;
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition:
      opacity 0.15s $ease-bubble 0.15s,
      -webkit-transform 0.25s $ease-bubble 0.1s;
    transition:
      opacity 0.15s $ease-bubble 0.15s,
      -webkit-transform 0.25s $ease-bubble 0.1s;
    transition:
      transform 0.25s $ease-bubble 0.1s,
      opacity 0.15s $ease-bubble 0.15s;
    transition:
      transform 0.25s $ease-bubble 0.1s,
      opacity 0.15s $ease-bubble 0.15s,
      -webkit-transform 0.25s $ease-bubble 0.1s;
  
    @include media($min: $bp-small) {
      padding: $gutter-outer-medium;
    }
  
    @include media($min: $bp-large) {
      padding: $gutter-outer;
    }
  
    .modal-visible & {
      z-index: $index-modal;
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  }
  
  .modal-close {
    @extend %button-reset;
    position: absolute;
    top: 0;
    right: 0;
    padding: em(15px);
    color: $color-text;
  
    @include media($min: $bp-large) {
      top: $gutter-outer-small;
      right: $gutter-outer-small;
    }
  
    svg {
      display: block;
      color: currentColor;
    }
  }
  
  .newsletter {
    width: 100%;
    font-size: 0;
  
    .newsletter-success,
    .form-field {
      font-size: em($font-body-size);
    }
  
    .form-field {
      display: inline-block;
      vertical-align: middle;
    }
  
    .newsletter-input {
      width: calc(67% - #{$gutter-content / 2});
      max-width: 245px;
    }
  
    .newsletter-submit {
      width: 33%;
      margin-left: $gutter-content / 2;
    }
  
    .button-primary { @include button-size(large); }
  }
  
  $local-max-width: 680px;
  
  .site-page,
  .page-masthead,
  .page-content {
    @extend %page-content;
  }
  
  .page-masthead {
    @extend %layout-container;
    text-align: center;
  }
  
  .page-content {
    @extend %layout-container;
    max-width: $local-max-width;
  }
  
  .page-title {
    font-size: $font-h1-size;
    color: $color-heading;
  
    @include media($min: $bp-large) {
      font-size: $font-heading-medium;
    }
  }
  
  .site-main {
    position: relative;
    // z-index: $index-main;
  }
  
  $local-button-width: 53px;
  $local-active-background: mix($color-link, $color-background, 8%);
  $local-image-width: em(48px);
  
  .site-header-search {
    position: relative;
    z-index: $index-header-search;
    display: block;
    height: $header-content-height;
    margin-top: 10px;
  
    @include media($min: $bp-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-basis: auto;
          -ms-flex-preferred-size: auto;
              flex-basis: auto;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      -webkit-flex-shrink: 1;
          -ms-flex-negative: 1;
              flex-shrink: 1;
      margin-top: 0;
      vertical-align: middle;
  
      .ie9 & {
        display: inline-block;
        width: calc(100% - 300px); // Max logo width + safety margin
      }
    }
  
    &.site-header-search--takeover {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      margin-top: 0;
      background-color: $color-background;
    }
  }
  
  .site-header-search-form {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    border: 1px solid transparentize($color-border, 0.8);
    border-radius: 3px 4px 4px 3px;
    -webkit-box-shadow: 0 2px 3px transparentize($color-border, 0.89);
            box-shadow: 0 2px 3px transparentize($color-border, 0.89);
    -webkit-transition: border 0.1s ease, -webkit-box-shadow 0.1s ease;
    transition: border 0.1s ease, -webkit-box-shadow 0.1s ease;
    transition: border 0.1s ease, box-shadow 0.1s ease;
    transition: border 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  
    &:hover,
    .site-header-search--focused & {
      border-color: transparentize($color-border, 0.75);
      -webkit-box-shadow: 0 3px 7px transparentize($color-border, 0.84);
              box-shadow: 0 3px 7px transparentize($color-border, 0.84);
    }
  
    .site-header-search--takeover & {
      border-color: transparent;
      border-radius: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
    }
  
    .form-field {
      position: relative;
      z-index: 100;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      height: $header-content-height;
  
      .site-header-search--takeover & {
        height: $header-content-height + 6px;
        border-bottom: 1px solid $color-border-soft;
      }
  
      .ie9 & {
        height: $header-content-height;
        overflow: hidden;
      }
    }
  }
  
  .site-header-search-form-field {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: calc(100% - #{$local-button-width});
    padding-top: em(14px);
    padding-bottom: em(14px);
    font-size: em($font-body-size);
    vertical-align: top;
    border: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  
    .ie9 & {
      display: inline-block;
    }
  
    .site-header-search--active & {
      border-bottom-left-radius: 0;
    }
  
    .site-header-search--takeover & {
      z-index: $index-header-search + 50;
      width: 100%;
      padding-right: 100px;
      border-radius: 0;
    }
  }
  
  
  .site-header-search-button {
    @extend %search-button;
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    width: $local-button-width;
    vertical-align: top;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  
    .site-header-search--active & {
      border-bottom-right-radius: 0;
    }
  
    .site-header-search--takeover & {
      display: none;
      visibility: hidden;
    }
  
    .ie9 & {
      display: inline-block;
      height: $header-content-height;
    }
  
    .search-icon--inactive svg {
      margin-top: 2px;
    }
  }
  
  .site-header-takeover-cancel {
    @extend %button-reset, %link--default;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: $index-header-search + 100;
    display: none;
    padding: em(15px);
    font-size: $font-body-size;
    font-weight: bold;
    visibility: hidden;
  
    .site-header-search--takeover & {
      display: inline-block;
      visibility: visible;
    }
  
    &:focus {
      outline: solid transparentize($color-link, 0.5);
      outline-offset: -3px;
    }
  }
  
  .search-flydown {
    position: relative;
    z-index: 50;
    display: none;
    width: 100%;
    font-size: em($font-body-size);
    background-color: $color-background;
    border-top: 1px solid $color-border-soft;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  
    .site-header-search--active & {
      z-index: 200;
      display: block;
    }
  
    .site-header-search--takeover & {
      height: calc(100vh - #{$header-content-height});
      border-top: 0;
    }
  }
  
  .search-flydown--placeholder,
  .search-flydown--results,
  .search-flydown--quicklinks {
    display: none;
  
    &.visible {
      display: block;
    }
  }
  
  // Quicklinks
  .search-flydown--quicklinks {
    padding-top: 15px;
    padding-bottom: 10px;
  }
  
  .search-flydown--quicklinks-title {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 15px;
    font-size: em(17px);
    font-weight: bold;
    color: $color-heading;
  }
  
  .search-flydown--quicklinks-list {
    padding-left: 0;
    margin-top: $space-xx-small;
    margin-bottom: 0;
    list-style: none;
  }
  
  .search-flydown--quicklinks-item {
    display: block;
  }
  
  .search-flydown--quicklinks-link {
    display: block;
    padding: 7px 15px;
    color: $color-link;
    text-decoration: none;
    background-color: $color-background;
    -webkit-transition: color 0.1s ease, background-color 0.1s ease;
    transition: color 0.1s ease, background-color 0.1s ease;
  
    &:hover,
    &:focus {
      background-color: $local-active-background;
    }
  
    &:focus {
      outline: none;
    }
  }
  
  // Product results
  .search-flydown--product-items--none,
  .search-flydown--product-items {
    display: block;
  
    .search-flydown--results--content-enabled & {
      display: inline-block;
      width: 64%;
      vertical-align: top;
  
      .site-header-search--takeover & {
        display: block;
        width: 100%;
      }
    }
  }
  
  .search-flydown--product {
    display: block;
    padding: 10px 15px;
    font-size: 0;
    color: $color-text;
    text-decoration: none;
    background-color: $color-background;
    -webkit-transition: color 0.1s ease-in, background-color 0.1s ease-in;
    transition: color 0.1s ease-in, background-color 0.1s ease-in;
  
    &:hover,
    &:focus {
      background-color: $local-active-background;
    }
  
    &:focus {
      outline: solid transparentize($color-link, 0.5);
    }
  
    .search-flydown--placeholder & {
      cursor: default;
  
      &:hover,
      &:focus {
        background-color: $color-background;
      }
  
      &:last-child {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
      }
    }
  }
  
  .placeholder--content-text,
  .placeholder--content-image {
    -webkit-animation: shimmer 0.7s ease-in-out infinite;
            animation: shimmer 0.7s ease-in-out infinite;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
  }
  
  .search-flydown--product-text,
  .search-flydown--product-image {
    display: inline-block;
    vertical-align: middle;
  }
  
  .search-flydown--product-image {
    display: inline-block;
    width: $local-image-width;
    height: $local-image-width;
    font-size: $font-body-size;
  
    img,
    svg {
      display: block;
      max-width: 100%;
    }
  
    + .search-flydown--product-text {
      max-width: calc(100% - (#{$local-image-width + $space-small}));
      margin-left: $space-small;
    }
  }
  
  .search-flydown--product-text {
    font-size: $font-body-size;
  
    .placeholder--content-text {
      height: 0.6em;
      max-width: 100%;
    }
  }
  
  .search-flydown--product-title {
    display: block;
    font-size: $font-body-size;
    line-height: 1.3;
  
    &.placeholder--content-text {
      width: 240px; // Opinionated width -- for pleasantries
    }
  
    .highlight {
      background-color: $color-highlight;
    }
  }
  
  .search-flydown--product-price {
    display: block;
    font-size: $font-body-size-small;
    line-height: 1.5;
  
    &.placeholder--content-text {
      width: 70px;
      margin-top: 0.44em; // Estimated space above normally derived from line-height
    }
  }
  
  .search-flydown--product-price--main {
    display: inline-block;
    color: $color-link;
  
    .search-flydown--product-price-has-sale & {
      margin-right: em(7px);
      color: $color-sale;
    }
  }
  
  .search-flydown--product-price--compare-at {
    color: transparentize($color-text, 0.4);
    text-decoration: line-through;
  }
  
  .search-flydown--product-items--none {
    padding: $space-medium 15px $space-large;
    font-size: $font-body-size;
    color: $color-text;
    vertical-align: top;
  
    h5 {
      margin-top: 0;
      margin-bottom: 0;
      font-size: $font-h5-size;
      color: $color-heading;
    }
  
    p {
      margin-top: $space-medium;
      margin-bottom: 0;
    }
  }
  
  .search-flydown--continue {
    @extend %link--default;
  
    &:focus {
      outline: solid transparentize($color-link, 0.5);
      outline-offset: 4px;
    }
  }
  
  .search-flydown--continue-icon {
    @extend %inline-chevron;
    display: inline-block;
    width: 6px;
    margin-left: 0;
    font-size: $font-body-size;
    line-height: 1.56;
  }
  
  // Content results
  .search-flydown--content-items {
    display: inline-block;
    width: 36%;
    padding: $space-medium 25px $space-large;
    vertical-align: top;
  
    .site-header-search--takeover & {
      display: none;
    }
  }
  
  .search-flydown--content-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-body-size-smaller;
    color: transparentize($color-text, 0.4);
  }
  
  .search-flydown--content-items-list {
    padding-left: 0;
    margin-top: $space-x-small;
    font-size: $font-body-size;
    list-style: none;
  }
  
  .search-flydown--content-item {
    margin-top: $space-xx-small;
    font-size: $font-body-size;
    line-height: 1.56;
  
    a {
      @extend %link--default;
  
      &:focus {
        outline: solid transparentize($color-link, 0.5);
        outline-offset: 4px;
      }
    }
  }
  
  .search-flydown--content-items-none {
    margin-top: $space-xx-small;
    margin-bottom: 0;
    font-size: $font-body-size;
    color: $color-text;
  }
  
  .search-flydown--footer {
    display: block;
    width: 100%;
    padding: 10px 15px 15px;
    text-align: center;
  }
  
  .site-navigation-wrapper {
    display: none;
    background-color: $color-header-background;
    -webkit-transition: -webkit-transform 0.2s $ease-bubble;
    transition: -webkit-transform 0.2s $ease-bubble;
    transition: transform 0.2s $ease-bubble;
    transition: transform 0.2s $ease-bubble, -webkit-transform 0.2s $ease-bubble;
  
    @include media($min: $bp-large) {
      @include header-shadow;
      display: block;
    }
  
    .site-header-sticky--scrolled & {
      position: absolute;
      z-index: $index-header-internal-nav;
      width: 100%;
      -webkit-transform: translateY(-100%);
          -ms-transform: translateY(-100%);
              transform: translateY(-100%);
    }
  
    .site-header-sticky--open & {
      -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
              transform: translateY(0);
    }
  }
  
  .site-navigation {
    @extend %layout-container;
    background-color: $color-header-background;
  
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
  
    a {
      position: relative;
      display: inline-block;
      padding: $site-nav-link-space-vertical $site-nav-link-space-horizontal;
      line-height: $header-line-height;
      color: $color-header-text;
      text-decoration: none;
  
      &:focus {
        outline: solid rgba($color-header-text, 0.5);
        outline-offset: -5px;
      }
  
      &.navmenu-item-active:focus {
        outline: 0;
      }
    }
  
    .navmenu-icon {
      position: absolute;
      top: 50%;
      right: $site-subnav-space + 5px;
      display: inline-block;
      height: 6px;
      margin-top: -3px;
  
      &.navmenu-icon-depth-1 {
        position: relative;
        top: -1px;
        right: -5px;
        -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
                transform: rotate(90deg);
      }
  
      svg {
        display: block;
        width: 8px;
        height: 6px;
        -webkit-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
                transform: rotate(-90deg);
        fill: currentColor;
      }
  
      .icon-chevron-down-left,
      .icon-chevron-down-right {
        -webkit-transition: fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
        transition: fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
        transition: transform 0.4s $ease-out-quad, fill 0.4s $ease-out-quad;
        transition: transform 0.4s $ease-out-quad, fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
        -webkit-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
      }
    }
  
    .navmenu {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      padding: 0;
    }
  
    .navmenu-depth-1 {
      display: inline-block;
      height: 100%;
      max-width: 100%;
      margin-left: -1 * $site-nav-link-space-horizontal;
  
      .site-navigation--has-actions & {
        max-width: calc(100% - #{$header-content-offset-right});
      }
  
      > li {
        display: inline-block;
        padding-top: $site-nav-item-space;
        padding-bottom: $site-nav-item-space;
        vertical-align: top;
  
        > a {
          font-weight: bold;
          -webkit-transition: opacity 0.15s ease;
          transition: opacity 0.15s ease;
  
          &.navmenu-item-active,
          &.navmenu-active,
          &:hover,
          &:active,
          &:focus {
            opacity: 0.8;
          }
        }
      }
    }
  
    .navmenu-submenu {
      position: absolute;
      top: 100%;
      z-index: 100;
      display: none;
      width: 240px;
      /*background-color: $color-background;*/
      background-color: #f4f4f4;
      -webkit-box-shadow: 0 3px 4px transparentize($color-border, 0.75);
              box-shadow: 0 3px 4px transparentize($color-border, 0.75);
      -webkit-transition: text-shadow 0.275s linear;
      transition: text-shadow 0.275s linear; // animation duration + delay
  
      &.animating,
      &.visible {
        padding-top: $site-subnav-space;
        padding-bottom: $site-subnav-space;
      }
  
      &.animating,
      &.visible:not(.animating) {
        &,
        & > li {
          display: block;
        }
  
        & .navmenu-meganav-items {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
        }
      }
  
      &.visible:not(.animating) {
        z-index: 100;
  
        &,
        & > li,
        & .navmenu-meganav {
          opacity: 1;
        }
      }
  
      &.animating-in {
        &,
        & > li {
          @extend %fade-in;
        }
  
        > li,
        & .navmenu-meganav-items {
          -webkit-animation-delay: 0.05s;
                  animation-delay: 0.05s;
        }
      }
  
      &.animating-out {
        &,
        & > li,
        & .navmenu-meganav-items {
          opacity: 0;
          -webkit-transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
          transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
        }
      }
  
      &.navmenu-submenu-inline-children {
        overflow-x: hidden;
        overflow-y: auto;
  
        .navmenu-icon svg {
          -webkit-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
                  transform: rotate(0deg);
        }
  
        .navmenu-depth-3 {
          position: relative;
          top: 0;
          left: 0;
          padding-top: 0;
          margin-left: 0;
          -webkit-box-shadow: none;
                  box-shadow: none;
        }
      }
    }
  
    .navmenu-depth-2 {
      margin-left: -1 * em(10px);
  
      .navmenu-link {
        @extend %link--text;
        z-index: 2;
        display: block;
        padding: em($site-nav-link-space) em($gutter-outer + $site-nav-link-space) em($site-nav-link-space) em($gutter-outer);
  
        &:hover,
        &.navmenu-active {
          color: $color-link;
        }
  
        &:focus {
          outline: solid rgba($color-link, 0.5);
          outline-offset: -3px;
        }
      }
  
      // Third level drop downs don't animate
      .navmenu-submenu {
        &,
        & > li {
          -webkit-animation-name: none;
                  animation-name: none;
          -webkit-transition: none;
          transition: none;
        }
      }
    }
  
    .navmenu-depth-3 {
      top: -1 * $site-subnav-space;
      left: 100%;
      min-height: 100%;
      margin-left: -1px;
    }
  
    .navmenu-link-parent,
    .navmenu-item-parent {
      position: relative;
  
    }
  
    .navmenu-meganav-item-parent,
    .navmenu-meganav-item-parent > a {
      position: inherit;
    }
  }
  
  .site-header-actions {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-body-size-small;
    font-weight: bold;
    list-style: none;
  
    li {
      display: inline-block;
  
      a {
        padding-right: $site-nav-link-space-horizontal - 3px;
        padding-left: $site-nav-link-space-horizontal - 3px;
      }
    }
  
    .site-navigation-wrapper & {
      display: inline-block;
      float: right;
      max-width: $header-content-offset-right;
      margin-top: $site-nav-item-space;
      text-align: right;
  
      a {
        opacity: 0.8;
      }
    }
  
    .site-mobile-nav & {
      display: block;
      height: $header-content-height;
      padding-right: $gutter-outer;
      margin: 4px 16px;
      font-size: $font-body-size;
  
      li {
        line-height: $header-content-height;
        opacity: 0.8;
      }
  
      a {
        padding-right: $site-nav-link-space-horizontal - 7px;
        padding-left: $site-nav-link-space-horizontal - 7px;
      }
    }
  
    .site-header-account-link:last-child {
      margin-right: -1 * $site-nav-link-space;
    }
  
    .currency-converter-wrapper {
  
      .site-navigation-wrapper & {
        margin-right: -1 * em(6px);
        opacity: 0.8;
      }
  
      .form-field-select {
        padding-top: $site-nav-item-space;
        padding-right: em(20px);
        padding-bottom: $site-nav-item-space;
        font-size: $font-body-size-small;
        font-weight: bold;
        color: currentColor;
        border: 0;
        -webkit-box-shadow: none;
                box-shadow: none;
  
        &:focus {
          outline: solid rgba($color-header-text, 0.5);
        }
  
        // Some browsers extend <select> color to options
        // Style as consistently legible <option>
        option {
          font-weight: normal;
          color: $color-black;
          background-color: $color-white;
        }
  
        .site-mobile-nav & {
          font-size: $font-body-size;
        }
      }
  
      svg {
        right: $site-nav-link-space-horizontal - 8px;
      }
    }
  }
  
  $local-padding: 2px;
  $local-menu-offset: $local-padding + $gutter-outer;
  $local-fade-width: 30px + $local-padding;
  
  .navmenu-meganav {
    &.navmenu-meganav--desktop {
      position: absolute;
      left: 0;
      float: left;
      width: 100%;
      margin-left: 0;
      overflow: hidden;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
  
      a {
        &:focus {
          outline-offset: -1 * $local-padding;
        }
      }
  
      &.animating,
      &.visible {
        padding-top: 0;
        padding-bottom: 0;
      }
  
      &.animating-in {
        @extend %fade-in;
      }
  
      .ie9 & {
        @extend %clearfix;
      }
  
      .navmenu-meganav-items {
        position: relative;
        z-index: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-box-pack: start;
        -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding-top: $site-subnav-space + 3px; // Thse numbers create better spacing effect
        padding-bottom: $site-subnav-space + 10px;
        margin-right: -1 * $local-menu-offset;
        margin-left: -1 * $local-menu-offset;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
  
      .navmenu-icon {
  
        &.navmenu-icon-depth-2 {
          display: none;
        }
  
        &.navmenu-icon-depth-3 {
          position: relative;
          top: -1px;
          right: -2px;
        }
  
        svg {
          -webkit-transform: rotate(0deg);
              -ms-transform: rotate(0deg);
                  transform: rotate(0deg);
        }
      }
  
      .navmenu-meganav-item {
        -webkit-flex-basis: 225px;
            -ms-flex-preferred-size: 225px;
                flex-basis: 225px;
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
                flex-shrink: 0;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        min-width: 225px;
        padding-right: $local-padding;
        padding-left: $local-padding;
  
        &.navmenu-item-count-1 {
          width: 100%;
        }
  
        &.navmenu-item-count-2 {
          width: 50%;
        }
  
        &.navmenu-item-count-3 {
          width: percentage(1 / 3);
        }
  
        &.navmenu-item-count-4 {
          width: 25%;
        }
  
        &.navmenu-item-count-5-up {
          width: 20%;
        }
  
        .ie9 & {
          float: left;
        }
      }
  
      .navmenu-depth-4,
      .navmenu-depth-3 {
        position: relative;
        top: 0;
        left: auto;
        z-index: 1;
        width: 100%;
        -webkit-transform: translate(0);
            -ms-transform: translate(0);
                transform: translate(0);
        -webkit-box-shadow: none;
                box-shadow: none;
      }
  
      .navmenu-depth-3 {
        display: block;
        height: auto;
        padding: 0;
        margin-top: em(4px);
        margin-left: 0;
        opacity: 1;
      }
  
      .navmenu-depth-3 .navmenu-submenu {
        padding-top: em(2.5px);
        padding-bottom: $site-subnav-space / 2;
        padding-left: 12px;
      }
  
      .navmenu-item-text {
        display: block;
        padding: em($site-nav-link-space) em($gutter-outer);
        font-size: $font-h5-size;
        font-weight: bold;
        color: $color-text;
      }
  
      .navmenu-link {
        padding: em($site-nav-link-space) em($gutter-outer - $local-padding) em($site-nav-link-space) em($gutter-outer);
        white-space: normal;
      }
    }
  }
  
  .navmenu-meganav--scroller {
    @extend %layout-container;
    position: relative;
  
    &.has-meganav-image {
      @extend %layout-container;
      margin: 0 $gutter-content;
    }
  
    .site-mobile-nav & {
      padding-right: 0;
      padding-left: 0;
    }
  
    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      display: block;
      width: $local-fade-width;
      pointer-events: none;
      background-color: transparent;
      content: "";
      opacity: 0;
      -webkit-transition: opacity 0.2s $ease-out-quad;
      transition: opacity 0.2s $ease-out-quad;
    }
  
    &::before {
      left: -1 * $local-padding;
      background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-background, 1)), to(rgba($color-background, 0)));
      background-image: linear-gradient(90deg, rgba($color-background, 1) 0%, rgba($color-background, 0) 100%);
  
      .ie9 & {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-background, 0))}', endColorstr='#{ie-hex-str(rgba($color-background, 1))}', GradientType=1);
      }
    }
  
    &::after {
      right: -1 * $local-padding;
      background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-background, 0)), to(rgba($color-background, 1)));
      background-image: linear-gradient(90deg, rgba($color-background, 0) 0%, rgba($color-background, 1) 100%);
  
      .ie9 & {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-background, 0))}', endColorstr='#{ie-hex-str(rgba($color-background, 1))}', GradientType=1);
      }
    }
  
    .meganav--overflows-right &::after,
    .meganav--overflows-left &::before {
      opacity: 1;
    }
  }
  
  .site-mobile-nav .navmenu-meganav--image {
    width: 100%;
  }
  
  .navmenu-meganav--image-size-small {
    width: 200px;
  }
  
  .navmenu-meganav--image-size-medium {
    width: 300px;
  }
  
  .navmenu-meganav--image-size-large {
    width: 400px;
  }
  
  li.navmenu-meganav--image-container {
    padding: $gutter-content/2 $gutter-outer $gutter-content;
  
    .site-mobile-nav & {
      padding: $gutter-content $gutter-content $gutter-content $gutter-outer;
    }
  }
  
  .navmenu-meganav--image-text {
    margin-top: $space-x-small;
    margin-bottom: 0;
    color: $color-text;
  }
  
  .site-navigation .navmenu-meganav--image-link {
    @extend %link--text;
    padding: 0;
    color: $color-text;
  }
  
  .navmenu-meganav--image-last {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  
  $local-link-space: 13px;
  
  .site-mobile-nav {
    display: none;
    opacity: 0;
  
    &.animating-in {
      -webkit-transition: text-shadow 0.4s linear;
      transition: text-shadow 0.4s linear; // sneak-in-meganav animation duration
    }
  
    &.animating-out {
      -webkit-transition: text-shadow 0.3s linear;
      transition: text-shadow 0.3s linear; // sneak-out-mobilenav animation length
    }
  
    &.animating,
    &.visible {
      display: block;
      opacity: 1;
    }
  }
  
  .mobile-nav-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: $index-mobile-nav + 2;
    display: none;
    width: 100%;
    height: 100%;
    max-width: 325px;
    overflow-x: hidden;
    overflow-y: scroll;
    color: $color-text;
    background-color: $color-background;
    -webkit-transition: -webkit-transform 0.4s $ease-out-quad;
    transition: -webkit-transform 0.4s $ease-out-quad;
    transition: transform 0.4s $ease-out-quad;
    transition: transform 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
    -webkit-overflow-scrolling: touch;
  
    .animating-in &,
    .visible & {
      display: block;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
  
    .animating-in & {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
      -webkit-animation-duration: 0.4s;
              animation-duration: 0.4s;
      -webkit-animation-name: sneak-in-mobilenav;
              animation-name: sneak-in-mobilenav;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-direction: normal;
              animation-direction: normal;
    }
  
    .animating-out & {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
      -webkit-animation-duration: 0.2s;
              animation-duration: 0.2s;
      -webkit-animation-name: sneak-out-mobilenav;
              animation-name: sneak-out-mobilenav;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-direction: normal;
              animation-direction: normal;
    }
  
    a {
      color: currentColor;
      text-decoration: none;
    }
  }
  
  .mobile-nav-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $index-mobile-nav + 1;
    display: block;
    height: 100%;
    background-color: $color-overlay-background;
  
    .animating-out &,
    .visible & {
      display: block;
    }
  
    .animating-in & {
      -webkit-animation-delay: 0s;
              animation-delay: 0s;
      -webkit-animation-duration: 0.4s;
              animation-duration: 0.4s;
      -webkit-animation-name: overlay-fade-in;
              animation-name: overlay-fade-in;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-direction: normal;
              animation-direction: normal;
    }
  
    .animating-out & {
      opacity: 0;
      -webkit-animation-delay: 0.1s;
              animation-delay: 0.1s;
      -webkit-animation-duration: 0.2s;
              animation-duration: 0.2s;
      -webkit-animation-name: overlay-fade-out;
              animation-name: overlay-fade-out;
      -webkit-animation-timing-function: linear;
              animation-timing-function: linear;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-direction: normal;
              animation-direction: normal;
    }
  }
  
  .mobile-nav-close {
    position: absolute;
    top: 10px;
    right: 7px;
    width: 33px;
    height: 33px;
    padding: 10px;
  
    svg {
      display: block;
      width: 13px;
      height: 13px;
      vertical-align: middle;
    }
  }
  
  .mobile-nav-content {
    min-height: 100%;
    padding-top: 20px;
    padding-bottom: 60px;
  
    .site-header-actions ~ & {
      min-height: calc(100% - #{$header-content-height});
    }
  
    .navmenu {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      padding: 0;
      margin: 0;
      list-style: none;
    }
  
    li {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
  
    .navmenu-depth-1 {
      font-size: em($font-body-size + 1);
      font-weight: 700;
    }
  
    .navmenu-depth-2 {
      font-size: em($font-body-size);
      font-weight: 400;
      background-color: mix($color-text, $color-background, 10%);
  
      .navmenu-submenu {
        padding: 0 em(10px);
      }
    }
  
    .navmenu-submenu {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      -webkit-transition: max-height 0.25s ease, opacity 0.15s ease;
      transition: max-height 0.25s ease, opacity 0.15s ease;
  
      &.visible {
        max-height: 1000px;
        opacity: 1;
      }
    }
  
    .navmenu-link,
    .navmenu-item-text {
      position: relative;
      display: block;
      padding: em($local-link-space) em($gutter-outer);
      cursor: pointer;
      -webkit-transition: color 0.1s ease-in;
      transition: color 0.1s ease-in;
  
      &.navmenu-link-parent {
        padding-right: em($local-link-space + 10px);
      }
    }
  
    .navmenu-link {
  
      &:focus {
        outline: solid rgba($color-header-background, 0.5);
        outline-offset: -3px;
      }
    }
  
    .navmenu-icon {
      position: absolute;
      top: 50%;
      right: em(20px);
      display: inline-block;
      margin-top: -3px;
  
      svg {
        display: block;
        width: 8px;
        height: 6px;
        -webkit-transform: scale(1.25);
            -ms-transform: scale(1.25);
                transform: scale(1.25);
        fill: currentColor;
      }
  
      .icon-chevron-down-left,
      .icon-chevron-down-right {
        -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
                transform: rotate(0);
        -webkit-transition: fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
        transition: fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
        transition: transform 0s, fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transition: transform 0s, fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
        -webkit-transform-origin: 50% 50%;
            -ms-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
      }
    }
  
    .navmenu-link-parent-active {
      color: $color-link;
  
      .icon-chevron-down-left {
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
      }
  
      .icon-chevron-down-right {
        -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
      }
    }
  }
  
  .home-section--title {
    margin-top: $space-xx-large;
    margin-bottom: $space-medium;
    font-size: $font-h4-size;
    color: $color-heading;
    text-align: center;
  
    @include media($min: $bp-medium) {
      margin-bottom: $space-large;
    }
  
    @include media($min: $bp-large) {
      margin-top: $space-xxx-large;
    }
  }
  
  .home-section--content {
    margin-top: $space-medium;
  
    @include media($min: $bp-medium) {
      margin-top: $space-large;
    }
  
    .shopify-section:first-child &:first-child {
      margin-top: em($gutter-outer-small);
  
      @include media($min: $bp-small) {
        margin-top: em($gutter-outer-medium);
      }
  
      @include media($min: $bp-large) {
        margin-top: em($gutter-outer);
      }
    }
  }
  
  $local-expander-width: em(70px);
  
  .promo-block {
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  
    @include media($max: $bp-small) {
      border-radius: 4px;
    }
  }
  
  .promo-block--content-wrapper {
    max-width: 60%;
    -webkit-transition: font-size 0.23s $ease-bubble;
    transition: font-size 0.23s $ease-bubble;
  
    @include media($max: $bp-small) {
      max-width: 75%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  
      .promo-block--expanded:not(.animating-out) & {
        white-space: normal;
      }
  
      .promo-block--expanded &,
      .promo-block--expanded:not(.animating-out) & {
        max-width: 85%;
      }
    }
  
    .promo-mosaic--column-narrow & {
      @include media($min: $bp-small) {
        max-width: 70%;
      }
    }
  
    .promo-grid--container & {
      @include media($min: $bp-small, $max: $bp-medium) {
        max-width: 80%;
      }
    }
  }
  
  .promo-block--content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    padding: $space-x-large $space-medium;
    color: currentColor;
    text-decoration: none;
    -webkit-transition: height 0.23s $ease-bubble;
    transition: height 0.23s $ease-bubble;
  
    &.promo-block--content-align-top-center {
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
    }
  
    &.promo-block--content-align-top-right {
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      text-align: right;
    }
  
    &.promo-block--content-align-center-left {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
  
    &.promo-block--content-align-center-center {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
    }
  
    &.promo-block--content-align-center-right {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      text-align: right;
    }
  
    &.promo-block--content-align-bottom-left {
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
  
    &.promo-block--content-align-bottom-center {
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
    }
  
    &.promo-block--content-align-bottom-right {
      -webkit-box-align: end;
      -webkit-align-items: flex-end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-pack: end;
      -webkit-justify-content: flex-end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      text-align: right;
    }
  
    @include media($max: $bp-small) {
      height: 120px;
      padding-right: $local-expander-width + $space-medium;
      margin-top: 10px;
      cursor: pointer;
  
      &.animating,
      &.promo-block--expanded {
        overflow: hidden;
      }
  
      &.animating-in,
      &.promo-block--expanded:not(.animating-out) {
        height: 270px;
      }
  
      &.promo-block--expanded,
      &.promo-block--expanded:not(.animating-out) {
        padding-right: 1.25em;
      }
  
      &.promo-block--expanded.promo-block--unlinked {
        cursor: default;
      }
    }
  
    @include media($min: $bp-large-home) {
      padding: $space-large;
    }
  }
  
  .promo-block--expander {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: $local-expander-width;
    color: $color-white;
    cursor: pointer;
    background-color: transparent;
    background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-black, 0)), to(rgba($color-black, 0.3)));
    background-image: linear-gradient(90deg, rgba($color-black, 0) 0%, rgba($color-black, 0.3) 100%);
    border: 0;
    border-radius: 0 4px 4px 0;
    outline: 0;
    -webkit-transition: opacity 0.23s $ease-bubble;
    transition: opacity 0.23s $ease-bubble;
  
    @include media($min: $bp-small) {
      display: none;
    }
  
    // Button should be hidden when expanded
    .promo-block--expanded & {
      visibility: hidden;
    }
  
    // Button should be visible when expanded, but is collapsing
    .promo-block--expanded.animating-out & {
      visibility: visible;
    }
  
    // Button should be transparent when collapsing, then opaque as expanding
    .animating-in &,
    .promo-block--expanded:not(.animating-out) & {
      opacity: 0;
      -webkit-transition-delay: 0s;
              transition-delay: 0s;
    }
  
    .ie9 & {
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-black, 0))}', endColorstr='#{ie-hex-str(rgba($color-black, 0.3))}', GradientType=1);
    }
  
    svg {
      position: absolute;
      bottom: 50%;
      left: 50%;
      display: block;
      width: 20px;
      height: 12px;
      margin-bottom: -7px;
      margin-left: -10px;
      overflow: visible;
      -webkit-filter: drop-shadow(0 0 4px rgba($color-black, 0.6));
              filter: drop-shadow(0 0 4px rgba($color-black, 0.6));
      -webkit-transform-origin: 50% 50%;
          -ms-transform-origin: 50% 50%;
              transform-origin: 50% 50%;
    }
  }
  
  .promo-block--text,
  .promo-block--header {
    -webkit-transition: font-size 0.23s $ease-bubble;
    transition: font-size 0.23s $ease-bubble;
  
    @include media($max: $bp-small) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  
      .promo-block--expanded:not(.animating-out) & {
        white-space: normal;
      }
    }
  }
  
  .promo-block--header {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-h3-size;
    line-height: 1.2;
  
    .animating-in & {
      font-size: $font-h1-size;
    }
  
    @include media($min: $bp-small) {
      .promo-mosaic--column-full &,
      .promo-mosaic--column-wide & {
        font-size: $font-heading-medium;
      }
  
      .promo-grid--container & {
        font-size: $font-h3-size;
      }
    }
  
    @include media($min: $bp-large) {
      line-height: 1.4;
  
      .promo-mosaic--column-full &,
      .promo-mosaic--column-wide & {
        font-size: $font-heading-large;
      }
  
      .promo-mosaic--column-narrow & {
        font-size: $font-h3-size;
      }
  
      .promo-grid--container & {
        font-size: $font-heading-medium;
      }
    }
  }
  
  .promo-block--text {
    margin-top: $space-xxx-small;
    margin-bottom: 0;
    font-size: $font-body-size-small;
    line-height: 1.4;
  
    .animating-in &,
    .promo-block--expanded & {
      font-size: $font-h5-size;
    }
  
    @include media($min: $bp-small) {
      .promo-mosaic--column-full &,
      .promo-mosaic--column-wide & {
        font-size: $font-h5-size;
      }
    }
  
    @include media($min: $bp-large) {
      .promo-mosaic--column-full &,
      .promo-mosaic--column-wide & {
        font-size: $font-h4-size;
      }
  
      .promo-mosaic--column-narrow &,
      .promo-grid--container & {
        font-size: $font-h5-size;
      }
    }
  }
  
  .promo-block--button {
    display: none;
    margin-top: $space-medium;
    -webkit-transition:
      background-color 0.4s $ease-out-quad,
      font-size 0.15s $ease-out-quad,
      padding 0.15s $ease-out-quad,
      opacity 0.23s $ease-bubble;
    transition:
      background-color 0.4s $ease-out-quad,
      font-size 0.15s $ease-out-quad,
      padding 0.15s $ease-out-quad,
      opacity 0.23s $ease-bubble;
    opacity: 0;
  
    .animating-in &,
    .promo-block--expanded & {
      display: inline-block;
    }
  
    .promo-block--expanded:not(.animating-out) & {
      opacity: 1;
    }
  
    @include media($min: $bp-small) {
      display: inline-block;
      opacity: 1;
  
      .promo-mosaic--column-full,
      .promo-mosaic--column-wide & { @include button-size(medium); }
    }
  
    @include media($min: $bp-large) {
      .promo-mosaic--column-full,
      .promo-mosaic--column-wide & {
        @include button-size(large);
        margin-top: $font-heading-medium;
      }
  
      .promo-mosaic--column-narrow &,
      .promo-grid--container & { @include button-size(medium); }
    }
  }
  
  .rte .tabs,
  .rte .tabs-content {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
  }
  
  .rte .tabs {
    margin-top: $space-large;
  
    li {
      display: inline-block;
      cursor: pointer;
  
      &:not(:first-child) {
        margin-left: $space-large;
      }
  
      &,
      > a {
        @extend %link--text;
      }
  
      &.active,
      &.active a {
        @extend %link--default;
      }
    }
  }
  
  .rte .tabs-content {
    margin-top: $space-medium;
  
    > li {
      display: none;
  
      &.active {
        display: block;
      }
    }
  }
  
  $local-bp-xs-tween: 480px;
  $local-bp-xs-tween-large: 560px;
  $local-padding-small: em(15px);
  $local-padding-large: $space-medium;
  
  $local-cart-image-width-small: 75px;
  $local-cart-image-width-large: 120px;
  
  $local-icon-emove: em(20px);
  $local-quantity-width: $quantity-width + $local-padding-large;
  $local-total-width: em(120px);
  
  .cart-item {
    @extend %box-shadow;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: $local-padding-small;
    margin-bottom: $space-medium;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
  
    @include media($min: $bp-small) {
      padding: $local-padding-large;
    }
  
    @include media($min: $bp-large) {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
  
    &.emoving {
      height: 0 !important;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-top-width: 0;
      border-bottom-width: 0;
    }
  
    .ie9 & {
      font-size: 0;
    }
  }
  
  // Image
  .cart-item--image-wrapper {
    width: $local-cart-image-width-small;
    margin: 0;
  
    @include media($min: $local-bp-xs-tween) {
      width: $local-cart-image-width-large;
    }
  
    .ie9 & {
      display: inline-block;
      vertical-align: top;
    }
  
    svg,
    img {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  }
  
  // Inner (wraps non-image content)
  .cart-item--inner {
    width: calc(100% - #{$local-cart-image-width-small});
  
    .ie9 & {
      display: inline-block;
      font-size: 0;
      vertical-align: top;
    }
  
    @include media($min: $local-bp-xs-tween) {
      width: calc(100% - #{$local-cart-image-width-large});
    }
  
    .cartitems--container:not(.has-sidebar) & {
      @include media($min: $bp-small) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: calc(100% - #{$local-cart-image-width-large});
      }
  
      @include media($max: $local-bp-xs-tween) {
        width: calc(100% - #{$local-cart-image-width-small});
      }
    }
  
    .cartitems--container.has-sidebar & {
      @include media($max: $local-bp-xs-tween) {
        width: calc(100% - #{$local-cart-image-width-small});
      }
  
      @include media($min: $bp-small, $max: $bp-medium) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: calc(100% - #{$local-cart-image-width-large});
      }
  
      @include media($min: $bp-large) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: calc(100% - #{$local-cart-image-width-large});
      }
    }
  }
  
  // Title, Price, Variants
  .cart-item--content {
    padding-left: $local-padding-large;
  
    .cartitems--container.has-sidebar & {
      @include media($min: $bp-medium, $max: $bp-large) {
        margin-bottom: $space-large;
      }
    }
  
    .ie9 & {
      display: block;
  
      @include media($min: $bp-small) {
        display: inline-block;
        width: 30%;
        vertical-align: top;
      }
    }
  }
  
  .cart-item--content-title {
    margin-top: 0;
    margin-bottom: $space-xx-small;
    font-size: $font-h5-size;
    color: $color-heading;
  
    a {
      color: currentColor;
      text-decoration: none;
    }
  }
  
  .cart-item--content-price {
    font-size: $font-body-size-smaller;
    line-height: 1.5;
    color: transparentize($color-text, 0.2);
  }
  
  .cart-item--price-title {
    font-weight: bold;
  }
  
  .cart-item--sale-price {
    color: transparentize($color-text, 0.5);
    text-decoration: line-through;
  }
  
  // Quantity select, line price, emove
  .cart-item--info {
    position: relative;
    padding-right: 0;
    padding-left: $local-padding-large;
    margin-top: $space-large - $space-x-small;
  
    .ie9 & {
      width: 100%;
    }
  
    @include media($min: $local-bp-xs-tween-large) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
  
      .ie9 & {
        display: inline-block;
        text-align: right;
      }
    }
  
    @include media($min: $bp-small) {
      margin-top: 0;
  
      .ie9 & {
        width: 70%;
      }
    }
  }
  
  .cart-item--quantity,
  .cart-item--total,
  .cart-item--emove {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    margin-top: $space-x-small;
  
    .ie9 & {
      @include media($min: $local-bp-xs-tween-large) {
        display: inline-block;
        vertical-align: top;
      }
    }
  }
  
  .cart-item--total,
  .cart-item--emove {
    .ie9 & {
      @include media($min: $local-bp-xs-tween-large, $max: $bp-small) {
        width: calc((100% - #{$local-quantity-width}) / 2);
      }
    }
  }
  
  
  .cart-item--quantity {
    width: 100%;
    max-width: $local-quantity-width;
    min-width: $local-quantity-width;
    padding-right: $local-padding-large;
    padding-left: 0;
  }
  
  .cart-item--total {
    padding-right: $local-padding-large + $local-icon-emove;
    font-size: $font-h5-size;
    color: $color-text;
    text-align: left;
    white-space: nowrap;
  
    @include media($min: $local-bp-xs-tween-large) {
      padding-right: 0;
      text-align: right;
    }
  
    @include media($min: $bp-small) {
      min-width: $local-total-width;
    }
  }
  
  .cart-item--emove {
    position: absolute;
    right: 0;
    bottom: 0;
    width: $local-padding-large;
    text-align: right;
  
    @include media($min: $local-bp-xs-tween-large) {
      position: relative;
      right: auto;
      bottom: auto;
      -webkit-box-flex: 0;
      -webkit-flex-grow: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
      width: ($local-padding-large * 2) + $local-icon-emove;
      max-width: percentage(1 / 3);
      padding-left: $local-padding-large * 2;
    }
  }
  
  .cart-item--emove-link {
    @extend %link--text;
    display: inline-block;
    width: $local-icon-emove;
    height: $local-icon-emove;
    padding: 5px;
    background-color: transparentize($color-text, 0.8);
    border-radius: 100%;
  
    &:hover {
      color: currentColor;
    }
  
    svg {
      display: block;
      fill: currentColor;
    }
  }
  
  
  $local-bp-xs-tween: 640px;
  $local-space-small: 10px;
  $local-space-large: 15px;
  
  .collection--item {
    float: left;
    width: calc(50% - 5px);
    margin-left: $local-space-small;
  
    // 2 cols - 10px gutter
    @include media($max: $local-bp-xs-tween) {
      &:nth-child(n + 3) {
        margin-top: $space-xx-large;
      }
  
      &:nth-child(2n + 1) {
        margin-left: 0;
        clear: left;
      }
    }
  
    // 3 cols
    @include media($min: $local-bp-xs-tween, $max: $bp-medium) {
      &:nth-child(n + 4) {
        margin-top: $space-xx-large;
      }
  
      &:nth-child(3n + 1) {
        margin-left: 0;
        clear: left;
      }
    }
  
    // 3 cols - 10px gutter
    @include media($min: $local-bp-xs-tween, $max: $bp-small) {
      width: calc(#{percentage(1 / 3)} - #{$local-space-small * (2 / 3)});
  
      &:nth-child(3n + 1) {
        margin-left: 0;
        clear: left;
      }
    }
  
    // 15px gutter
    @include media($min: $bp-small, $max: $bp-large) {
      margin-left: $local-space-large;
    }
  
    // 3 cols, 15px gutter
    @include media($min: $bp-small, $max: $bp-medium) {
      width: calc(#{percentage(1 / 3)} - #{$local-space-large * (2 / 3)});
    }
  
    // 4 cols
    @include media($min: $bp-medium) {
      &:nth-child(n + 5) {
        margin-top: $space-xx-large;
      }
  
      &:nth-child(4n + 1) {
        margin-left: 0;
        clear: left;
      }
    }
  
    // 4 cols - 15px gutter
    @include media($min: $bp-medium, $max: $bp-large) {
      width: calc(25% - #{$local-space-large * (3 / 4)});
    }
  
    // 4 cols - 20px gutter
    @include media($min: $bp-large) {
      width: calc(25% - #{20px * (3 / 4)});
      margin-left: 20px;
    }
  }
  
  .collection--item-image {
    height: auto;
    margin: 0;
  
    a {
      display: block;
    }
  
    img,
    svg {
      display: block;
      max-width: 100%;
    }
  }
  
  .collection--item-info {
    margin-top: $space-medium;
    margin-bottom: 0;
    font-size: $font-body-size;
    text-align: center;
  }
  
  .collection--item-title {
    @extend %link--default;
    display: inline-block;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
  }
  
  .article--comments-item {
    margin: 0 0 $space-xx-large;
    line-height: 1.6;
  
    cite {
      font-size: $font-body-size-small;
      font-style: normal;
      color: transparentize($color-text, 0.6);
  
      strong {
        font-size: $font-h5-size;
        color: $color-heading;
      }
    }
  
    .rte {
      margin-top: $space-xx-small;
  
      > *:first-child {
        margin-top: 0;
      }
  
      > *:last-child {
        margin-bottom: 0;
      }
    }
  }
  .article--comments {
    margin-top: $space-xxx-large;
  }
  
  .article--comments-title {
    margin-top: 0;
    margin-bottom: $space-x-large;
    font-size: $font-h3-size;
    color: $color-heading;
  
    .article--comments-form & {
      margin-bottom: $space-medium;
    }
  }
  
  .article--comments-form {
    margin-top: $space-xxx-large;
  
    .form-field--half {
      margin-bottom: $space-medium;
    }
  
    .form-field-textarea {
      display: block;
      min-height: 200px;
    }
  
    .button-primary {
      @include button-size(large);
      margin-top: $space-large;
    }
  }
  
  .article--comments-moderated {
    margin-bottom: $space-x-large;
    font-style: italic;
    line-height: 1.6;
  }
  
  .article--comments-message {
    margin-bottom: $space-medium;
  
    &.message--success {
      @extend %message--success;
      padding: $space-xx-small $space-x-small;
    }
  
    &.message--error {
      @extend %message--error;
      padding: $space-xx-small $space-x-small;
    }
  
    ul {
      padding-left: $space-medium;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: normal;
    }
  
    p {
      @extend %message--base;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: normal;
  
      + .article--comments-error {
        margin-top: 0.67em;
      }
    }
  }
  
  .article--comments-required {
    margin-top: $space-medium;
    margin-bottom: 0;
    font-size: em($font-body-size - 3px);
    color: transparentize($color-text, 0.6);
  }
  
  
  .article--excerpt-wrapper {
    @extend %box-shadow;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    text-align: center;
    -webkit-transition: width 0.1s ease;
    transition: width 0.1s ease;
  
    &.article--excerpt-wrapper--centered {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
  
    .ie9 & {
      display: inline-block;
      font-size: $font-body-size;
      vertical-align: middle;
    }
  }
  
  .article--excerpt-image {
    display: block;
    height: em(200px);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
  
    @include media($min: $bp-small) {
      height: em(250px);
    }
  
    @include media($min: $bp-large) {
      .blogposts--count-2 & {
        height: em(300px);
      }
    }
  
    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      visibility: hidden;
    }
  }
  
  .article--excerpt-content {
    width: 100%;
    padding: $space-medium;
    white-space: normal;
  
    .article--excerpt-wrapper--centered & {
      -webkit-align-self: center;
          -ms-flex-item-align: center;
              align-self: center;
      padding-top: $space-xx-large;
      padding-bottom: $space-xx-large;
  
      @include media($min: $bp-large) {
        padding-top: $space-xxx-large;
        padding-bottom: $space-xxx-large;
      }
    }
  }
  
  .article--excerpt-meta {
    font-size: 0;
    color: transparentize($color-text, 0.5);
  }
  
  .article--excerpt-meta-item {
    display: inline-block;
    font-size: $font-body-size-small;
  
    @include media($max: $bp-small) {
      font-size: $font-body-size-small - em(2px);
    }
  
    &:nth-child(2) {
      padding-left: 11px;
      margin-left: 10px;
      border-left: 1px solid transparentize($color-border, 0.65);
  
      @include media($max: $bp-small) {
        padding-left: 6px;
        margin-left: 5px;
      }
    }
  }
  
  .article--excerpt-title {
    margin-top: $space-xx-small;
    margin-bottom: $space-small;
    font-size: $font-h4-size;
    line-height: 1.3;
    color: $color-heading;
  
    &:first-child {
      margin-top: 0;
    }
  
    a {
      color: currentColor;
      text-decoration: none;
    }
  }
  
  .article--excerpt-text {
    margin-bottom: $space-small;
  }
  
  .article--excerpt-readmore {
    @extend %link--default;
    margin-top: $space-small;
    line-height: 1;
  }
  
  .article--excerpt-readmore--icon {
    @extend %inline-chevron;
    margin-left: em(1px);
  }
  
  
  .article--excerpt-wrapper--featured {
    position: relative;
    width: 100%;
    margin-right: 0;
    margin-bottom: $space-xx-large;
    color: $color-featured-post-foreground;
    background-color: $color-featured-post-background;
    border: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  
    @include media($min: $bp-medium) {
      margin-bottom: $space-xxx-large;
      font-size: 0;
    }
  
    .article--excerpt-image {
      height: em(250px);
  
      @include media($min: $bp-smaller) {
        height: em(360px);
      }
  
      @include media($min: $bp-small) {
        height: em(430px);
      }
  
      @include media($min: $bp-medium) {
        height: em(467px);
      }
  
      @include media($min: $bp-large) {
        height: em(526px);
      }
    }
  
    .article--excerpt-content {
      padding: $space-x-large;
      font-size: $font-body-size;
  
      @include media($min: $bp-large) {
        padding: $space-xx-large;
      }
    }
  
    .article--excerpt-meta {
      color: transparentize($color-featured-post-foreground, 0.4);
    }
  
    .article--excerpt-meta-item {
      font-size: em($font-body-size);
  
      &:nth-child(2) {
        border-left-color: transparentize($color-featured-post-foreground, 0.5);
      }
    }
  
    .article--excerpt-title {
      margin-top: $space-xx-small;
      margin-bottom: $space-medium;
      font-size: $font-h1-size;
      color: currentColor;
  
      &:first-child {
        margin-top: 0;
      }
  
      @include media($min: $bp-smaller) {
        margin-bottom: 0;
      }
    }
  
    .article--excerpt-text {
      margin-top: $space-medium;
      margin-bottom: $space-large;
      line-height: 1.56;
  
      a {
        color: currentColor;
        text-decoration: underline;
  
        &:hover {
          color: currentColor;
        }
      }
    }
  
    .article--excerpt-button {
      @extend %button-secondary;
      border-color: transparent;
  
      &:not(.disabled):hover {
        border-color: transparent;
      }
    }
  
    &.article--excerpt-wrapper--no-image {
  
      .article--excerpt-content {
        @include media($min: $bp-smaller) {
          width: 70%;
          text-align: right;
        }
      }
  
      .article--excerpt-meta,
      .article--excerpt-title,
      .article--excerpt-meta-item,
      .article--excerpt-text {
        max-width: em(700px);
  
        @include media($min: $bp-smaller) {
          text-align: left;
        }
      }
  
      .article--excerpt-text {
        @include media($min: $bp-smaller) {
          margin-bottom: 0;
        }
      }
  
      .article--excerpt-button {
        @include media($min: $bp-smaller) {
          position: absolute;
          right: $space-large;
          bottom: $space-large;
        }
  
        @include media($min: $bp-large) {
          right: $space-xx-large;
          bottom: $space-xx-large;
        }
      }
    }
  
    &.article--excerpt-wrapper--has-image {
  
      .ie9 & {
        @extend %clearfix;
      }
  
      @include media($min: $bp-medium) {
        .article--excerpt-image,
        .article--excerpt-content {
          position: relative;
          display: inline-block;
          width: 50%;
          text-align: left;
          vertical-align: middle;
        }
  
        .article--excerpt-image {
          right: 0;
          left: 50%;
  
          .ie9 & {
            right: 0;
            left: auto;
            float: right;
          }
        }
  
        .article--excerpt-content {
          right: 50%;
          left: auto;
  
          .ie9 & {
            left: 0;
          }
        }
      }
    }
  }
  
  .breadcrumbs-container {
    @extend %layout-container;
    margin-top: $space-medium;
    margin-bottom: $space-medium;
    // font-size: 0;
  
    @include media($min: $bp-small) {
      margin-top: $space-large;
      margin-bottom: $space-large;
    }
  
    a,
    span {
      display: inline-block;
      font-size: $font-body-size;
      vertical-align: middle;
    }
  
    a {
      @extend %link--default;
    }
  
    span {
      color: $color-text;
      opacity: 0.6;
  
      &.breadcrumbs-tag:not(:last-child) {
        margin-right: 2px;
      }
    }
  }
  
  .breadcrumbs-delimiter {
    @extend %inline-chevron;
    margin-right: em(7px);
    margin-left: em(7px);
  
    svg {
      margin-top: 0;
    }
  }
  
  .pagination--container {
    @extend %layout-container;
    margin-top: $space-xx-large;
    margin-bottom: $space-large;
  
    #shopify-section-static-blog & {
      margin-top: 0;
    }
  }
  
  .pagination--inner {
    padding-left: 0;
    margin-right: -1 * em(9px);
    margin-left: -1 * em(9px);
    font-size: 0;
    color: $color-text;
    text-align: center;
  
    li {
      display: inline-block;
      font-size: $font-body-size;
  
      &:not(:last-child) {
        margin-right: em(5px);
      }
    }
  
    a {
      @extend %link--default;
    }
  }
  
  .pagination--item {
    display: inline-block;
    padding: em(9px) em(11px);
  
    .pagination--active & {
      font-weight: bold;
      color: $color-text;
  
      &:hover {
        color: currentColor;
      }
    }
  }
  
  .pagination--chevron-right,
  .pagination--chevron-left {
    @extend %inline-chevron;
  }
  
  .pagination--chevron-left {
    margin-left: 0;
  
    svg {
      -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
              transform: rotate(90deg);
    }
  }
  
  .share-buttons {
    margin-top: $space-large;
  
    @include media($min: $bp-small) {
      margin-top: $space-x-large;
    }
  
    .share-buttons--title {
      margin-top: 0;
      margin-bottom: 0;
      font-size: $font-body-size-smaller;
      color: $color-text;
    }
  
    .share-buttons--list {
      margin-top: $space-small;
      font-size: 0;
  
      @include media($min: $bp-small) {
        margin-top: $space-x-small;
      }
    }
  
    .share-buttons--button {
      display: inline-block;
      width: 30px;
      height: 30px;
      padding: 2px;
      color: $color-white;
      border-radius: 100%;
  
      &:not(:first-child) {
        margin-left: $space-xx-small;
      }
  
      @include media($min: $bp-small) {
        width: 24px;
        height: 24px;
        padding: 1px;
      }
  
      svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: currentColor;
      }
    }
  
    .share-buttons--facebook {
      background-color: $color-facebook;
    }
  
    .share-buttons--twitter {
      background-color: $color-twitter;
    }
  
    .share-buttons--google {
      background-color: $color-google;
    }
  
    .share-buttons--pinterest {
      background-color: $color-pinterest;
    }
  
    .share-buttons--whatsapp {
      background-color: $color-whatsapp;
      display: none !important;
      .has-touch & {
        @include media($max: $bp-smaller) {
          display: flex !important;
        }
      }
    }
  
  }
  
  $local-image-width: em(100px);
  
  // Outer banner styles
  .atc-banner--container {
    @extend %sneak-in;
    position: fixed;
    top: 0;
    z-index: $index-banner;
    display: none;
    width: 100%;
    background-color: $color-background;
    outline: 0;
    -webkit-box-shadow: 0 2px 5px transparentize($color-border, 0.75);
            box-shadow: 0 2px 5px transparentize($color-border, 0.75);
    -webkit-transition: text-shadow 0.275s linear;
    transition: text-shadow 0.275s linear; // animation duration + delay
  }
  
  .atc-banner--outer {
    @extend %layout-container;
    position: relative;
    padding: $space-medium;
  }
  
  .atc-banner--inner {
    width: 100%;
    max-width: 820px;
    padding-top: $space-medium;
    padding-bottom: $space-medium;
    margin-right: auto;
    margin-left: auto;
    table-layout: fixed;
    text-align: center;
  
    @include media($min: $bp-small) {
      display: table;
      text-align: left;
    }
  }
  
  // Banner columns
  .atc-banner--product {
    font-size: $font-body-size;
    vertical-align: middle;
  
    @include media($min: $bp-small) {
      display: table-cell;
      width: 54%;
      padding-right: $space-x-large;
    }
  
    @include media($min: $bp-large) {
      padding-right: $space-x-large;
    }
  }
  
  .atc-banner--cart {
    margin-top: $space-xx-large;
    vertical-align: middle;
  
    @include media($min: $bp-small) {
      display: table-cell;
      width: 46%;
      padding-left: $space-large;
      margin-top: 0;
      border-left: 1px solid $color-border-soft;
    }
  
    @include media($min: $bp-large) {
      padding-left: $space-xx-large;
    }
  }
  
  // Product column
  .atc-banner--product-title {
    margin-top: 0;
    font-size: $font-h4-size;
    color: $color-heading;
  }
  
  .atc-banner--product-title--icon {
    display: inline-block;
    width: 18px;
    height: 13px;
    margin-top: -3px;
    margin-right: 5px;
    vertical-align: middle;
  
    svg {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  
  .atc--product {
    max-width: em(310px);
    margin: $space-x-large auto 0;
    font-size: 0;
    text-align: left;
    vertical-align: middle;
  
    @include media($min: $bp-small) {
      display: block;
      max-width: 100%;
      margin-top: $space-large;
    }
  }
  
  .atc--product-image {
    display: inline-block;
    width: 100px;
    vertical-align: middle;
  
    svg,
    img {
      max-width: 100%;
    }
  }
  
  .atc--product-details {
    display: inline-block;
    width: calc(100% - #{$space-large + $local-image-width});
    margin-left: $space-large;
    font-size: $font-body-size;
    vertical-align: middle;
  }
  
  .atc--product-details--title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-body-size;
    line-height: 1.3125;
  }
  
  .atc--product-details--options {
    display: block;
    margin-top: $space-xxx-small;
    font-size: $font-body-size-smaller;
    line-height: 1.4;
    opacity: 0.6;
  }
  
  .atc--product-details--price {
    display: block;
    margin-top: $space-xxx-small;
    line-height: 1.2;
  }
  
  // Cart column
  .atc-banner--cart-subtotal {
    font-size: $font-h4-size;
  }
  
  .atc-subtotal--label {
    opacity: 0.6;
  }
  
  .atc-subtotal--price {
    display: inline-block;
    margin-left: $space-xx-small;
    color: $color-heading;
  }
  
  .atc-banner--cart-footer {
    margin-top: $space-large;
    font-size: 0;
  }
  
  .atc-button--viewcart,
  .atc-button--checkout {
    @include button-size(medium);
  }
  
  .atc-button--checkout {
    margin-left: $space-xx-small;
  }
  
  // Close button
  .atc-banner--close {
    @extend %button-reset;
    position: absolute;
    top: $gutter-outer-medium;
    right: $gutter-outer-medium;
  
    @include media($min: $bp-large) {
      right: $gutter-outer;
    }
  }
  
  .message-banner--container {
    @extend %sneak-in;
    position: fixed;
    top: 0;
    z-index: $index-banner;
    display: none;
    width: 100%;
    -webkit-transition: text-shadow 0.275s linear;
    transition: text-shadow 0.275s linear; // animation duration + delay
  
    &.message--error {
      @extend %message--error;
    }
  }
  
  .message-banner--outer {
    @extend %layout-container;
    position: relative;
  }
  
  .message-banner--inner {
    width: 100%;
    max-width: 820px;
    padding-top: $space-x-small;
    padding-bottom: $space-x-small;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  
  // Close button
  .message-banner--close {
    @extend %button-reset;
    position: absolute;
    top: 50%;
    right: $gutter-outer-small;
    margin-top: -6.5px;
  
    @include media($min: $bp-small) {
      right: $gutter-outer-medium;
    }
  
    @include media($min: $bp-large) {
      right: $gutter-outer;
    }
  
    .message--error & {
      color: $color-error;
    }
  }
  
  .social-icons {
    margin-top: -4px;
    margin-right: -4px;
    margin-left: -4px;
    font-size: 0;
  }
  
  .social-link {
    display: inline-block;
    width: 36px;
    height: 36px;
    padding: 4px;
    overflow: hidden;
    color: $color-text;
    font-size: $font-body-size-small;
    line-height: 1.8;
    vertical-align: top;
  
    svg {
      width: 28px;
      height: 28px;
      background-color: $local-footer-accent;
      border-radius: 100%;
      -webkit-transition: background-color 0.4s $ease-out-quad;
      transition: background-color 0.4s $ease-out-quad;
    }
  
    &:hover svg {
      background-color: rgba($color-footer-text, 0.05);
    }
  }
  
  $local-link-padding: em(3px);
  
  .productgrid--sidebar {
  
    @include media($max: $bp-medium) {
      display: none;
    }
  
    @include media($min: $bp-medium) {
      float: left;
      width: $sidebar-width;
    }
  }
  
  .productgrid--sidebar-section,
  .productgrid--sidebar-title {
    margin-top: $space-xx-large;
  
    &:first-child {
      margin-top: 0;
    }
  }
  
  .productgrid--sidebar-title {
    margin-bottom: $space-medium;
    font-size: $font-h5-size;
    color: $color-heading;
  }
  
  .productgrid--sidebar-title--small {
    margin-top: $space-large;
    margin-bottom: $space-xxx-small;
    font-family: $font-body;
    font-size: $font-body-size-small;
    color: $color-text;
  }
  
  .productgrid--sidebar-item {
    padding-left: 0;
    margin-top: $space-xx-small;
    margin-left: 0;
    list-style: none;
  
    &:first-child {
      margin-top: 0;
    }
  }
  
  .productgrid--sidebar-filters--current {
    margin-bottom: $space-large;
  
    @include media($min: $bp-medium) {
      display: none;
    }
  }
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  .productitem--listview-price,
  .productitem--listview-badge {
    display: none;
  }
  
  .productgrid--outer {
    @extend %layout-container, %clearfix;
  
    .breadcrumbs-container {
      margin-top: 0;
    }
  
    .pagination--container,
    .breadcrumbs-container {
      @extend %layout-container--reset;
    }
  }
  
  .productgrid--wrapper {
  
    .layout--has-sidebar & {
  
      @include media($min: $bp-medium) {
        float: left;
        width: calc(100% - #{$sidebar-width + $gutter-outer});
        margin-left: $gutter-outer;
      }
    }
  }
  
  .productgrid--filters {
  
    @include media ($max: $bp-medium) {
      display: none;
    }
  
    @include media ($min: $bp-medium) {
      margin-top: $space-large - $space-xx-small;
      margin-bottom: $space-large;
    }
  }
  
  .productgrid--utils {
    display: none;
    width: 100%;
    padding-top: $space-xx-small;
    padding-bottom: $space-xx-small;
    margin-top: $space-large;
    margin-bottom: $space-large;
    background-color: $color-background-light;
    table-layout: fixed;
  
    @include media($max: $bp-medium) {
      &.productgrid--utils--visible-mobile {
        display: table;
      }
    }
  
    @include media($min: $bp-medium) {
      display: table;
  
      &.productgrid--utils--hidden-desktop {
        display: none;
      }
    }
  }
  
  .productgrid--items {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: $space-large;
  
    .search--section & {
      @include media($max: $bp-small) {
        margin-top: $space-medium;
      }
    }
  
    .ie9 & {
      font-size: 0;
    }
  }
  
  .productgrid--item {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
            flex-shrink: 0;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-transition: text-shadow 0.25s linear;
    transition: text-shadow 0.25s linear; // Sets transition speed for revealer
  
    &:focus {
      outline: 0;
    }
  
    @include media($min: $bp-large) {
      &.animating,
      &.visible {
        z-index: 200;
      }
  
      &:hover {
        z-index: 300;
      }
    }
  
    .ie9 & {
      display: inline-block;
      vertical-align: top;
    }
  
    .productgrid--items & {
      @include media($max: $bp-smaller) {
        width: calc(50% - #{$local-space-small / 2});
        margin-top: $local-space-small;
        margin-left: $local-space-small;
  
        .ie9 & {
          width: calc(#{percentage(1 / 2)} - #{($local-space-small / 2) + 1px});
        }
  
        &:nth-child(2n + 1) {
          margin-left: 0;
  
          .ie9 & {
            clear: left;
          }
        }
  
        &:nth-child(-n + 2) {
          margin-top: 0;
        }
      }
  
      @include media($min: $bp-smaller, $max: $bp-medium) {
        width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
        margin-top: $local-space-small;
        margin-left: $local-space-small;
  
        .ie9 & {
          width: calc(#{percentage(1 / 3)} - #{($local-space-small * 2 / 3) + 1px});
        }
  
        &:nth-child(3n + 1) {
          margin-left: 0;
  
          .ie9 & {
            clear: left;
          }
        }
  
        &:nth-child(-n + 3) {
          margin-top: 0;
        }
      }
  
      .layout--has-sidebar & {
        @include media($min: $bp-medium, $max: $bp-large) {
          width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
          margin-top: $local-space-large;
          margin-left: $local-space-large;
  
          .ie9 & {
            width: calc(#{percentage(1 / 3)} - #{($local-space-large * 2 / 3) + 1px});
          }
  
          &:nth-child(3n + 1) {
            margin-left: 0;
  
            .ie9 & {
              clear: left;
            }
          }
  
          &:nth-child(-n + 3) {
            margin-top: 0;
          }
        }
  
        @include media($min: $bp-large) {
          width: calc(25% - #{$local-space-large * 3 / 4});
          margin-top: $local-space-large;
          margin-left: $local-space-large;
  
          .ie9 & {
            width: calc(25% - #{($local-space-large * 3 / 4) + 1px});
          }
  
          &:nth-child(4n + 1) {
            margin-left: 0;
  
            .ie9 & {
              clear: left;
            }
          }
  
          &:nth-child(-n + 4) {
            margin-top: 0;
          }
        }
      }
  
      .layout--no-sidebar & {
        @include media($min: $bp-medium) {
          width: calc(25% - #{$local-space-large * 3 / 4});
          margin-top: $local-space-large;
          margin-left: $local-space-large;
  
          .ie9 & {
            width: calc(25% - #{($local-space-large * 3 / 4) + 1px});
          }
  
          &:nth-child(4n + 1) {
            margin-left: 0;
  
            .ie9 & {
              clear: left;
            }
          }
  
          &:nth-child(-n + 4) {
            margin-top: 0;
          }
        }
      }
    }
  }
  
  .productgrid--no-results {
    @extend %no-results--wrapper;
  }
  
  .productgrid--no-results-title {
    @extend %no-results--title;
  }
  
  .productgrid--no-results-button {
    @extend %no-results--button;
  }
  
  .productgrid--footer {
    @extend %clearfix;
    padding-top: $space-xx-large;
    margin-top: $space-xx-large;
    border-top: 1px solid $color-border-soft;
  }
  
  .productgrid--footer-item {
    @include media($max: $bp-small) {
      &:not(:first-child) {
        margin-top: $space-medium;
      }
    }
  
    @include media($min: $bp-small) {
      float: left;
      width: calc(50% - #{$gutter-content});
  
      &:not(:first-child) {
        margin-left: $gutter-content * 2;
      }
    }
  }
  
  .productgrid--footer-title {
    margin-top: 0;
    margin-bottom: 0;
    font-family: $font-heading;
    font-size: $font-h5-size;
    color: $color-heading;
    text-transform: uppercase;
  }
  
  .productgrid--footer-results-list {
    padding-left: 0;
    margin-top: $space-medium;
    margin-bottom: 0;
    list-style: none;
  
    a {
      @extend %link--default;
    }
  
    li {
      font-size: $font-body-size;
      line-height: 1.56;
      color: $color-text;
  
      &:not(:first-child) {
        margin-top: $space-xx-small;
      }
    }
  }
  
  .productitem--description {
    display: none;
    margin-bottom: $gutter-content;
    line-height: 1.5;
  }
  
  .productgrid-listview {
    .productgrid--items .productgrid--item {
      width: 100%;
  
      &:nth-of-type(n + 1) {
        margin: $gutter-content 0 0;
      }
    }
  
    .productgrid--items {
      display: block;
    }
  
    .productgrid--item {
      width: 100%;
      margin: $gutter-content 0 0;
    }
  
    .productitem--image-link {
      width: percentage(1.5/6);
  
      .productitem--badge {
        display: none;
      }
    }
  
    .no-touch & .productitem--actions,
    .productitem--actions {
      position: static;
      display: none;
      width: percentage(1.5/6);
      max-width: 220px;
      margin: 0;
      opacity: 1;
      visibility: visible;
  
      .productitem--action {
        display: block;
        width: 100%;
  
        &:nth-of-type(2n) {
          -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
              -ms-flex-order: 1;
                  order: 1;
        }
      }
  
      .productitem--listview-price {
        display: block;
        width: 100%;
        margin-bottom: $gutter-content;
        text-align: right;
      }
  
      .productitem--listview-badge {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        width: 100%;
        margin-bottom: em(12px);
  
        .productitem--badge {
          position: relative;
          top: em(-6px);
        }
      }
  
      @include media($min: $bp-medium) {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-content: flex-start;
            -ms-flex-line-pack: start;
                align-content: flex-start;
      }
    }
  
    .productitem {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }
  
    .productitem--info {
      width: percentage(4.5/6);
      margin: 0 0 0 $gutter-outer;
  
      @include media($min: $bp-medium) {
        width: percentage(3/6);
        margin: 0 #{$gutter-outer * 2} 0 $gutter-outer;
      }
  
      .productitem--price {
        @include media($min: $bp-medium) {
          display: none;
        }
  
        @include media($min: $bp-smaller, $max: $bp-medium) {
          margin-top: $space-xx-small;
        }
      }
    }
  
    .productitem--title {
      @include media($min: $bp-medium) {
        font-size: $font-h4-size;
        font-weight: bold;
      }
    }
  
    .price--compare-at.visible {
      display: block;
  
      .price--spacer {
        display: none;
      }
    }
  
    .productitem--description {
      @include media($min: $bp-medium) {
        display: block;
      }
    }
  
    .productitem--link {
      @extend %link--default;
    }
  }
  
  .utils-filter,
  .utils-sortby,
  .utils-view {
    display: table-cell;
    width: 40%;
    padding: $space-xx-small $space-small;
    font-size: $font-body-size-small;
    vertical-align: middle;
  }
  
  .utils-sortby-button,
  .utils-filter-button {
    @extend %button-reset, %link--default;
  }
  
  .utils-filter {
    text-align: left;
  
    @include media($min: $bp-medium) {
      display: none;
    }
  }
  
  .utils-filter-button {
    display: table;
    font-size: 0;
    -webkit-transition: color 0.1s ease;
    transition: color 0.1s ease;
  }
  
  .utils-filter-icon {
    display: table-cell;
    padding-right: 11px;
    vertical-align: middle;
  
    svg {
      display: block;
      width: 19px;
      height: 13px;
      -webkit-transition: fill 0.1s ease;
      transition: fill 0.1s ease;
      fill: currentColor;
    }
  }
  
  .utils-filter-text {
    display: table-cell;
    font-size: $font-body-size-small;
    font-weight: bold;
    vertical-align: middle;
  }
  
  .utils-sortby {
    font-size: 0;
    text-align: right;
  
    @include media($min: $bp-medium) {
      text-align: left;
    }
  }
  
  .utils-sortby-select,
  .utils-sortby-title {
    display: inline-block;
    vertical-align: middle;
  }
  
  .utils-sortby-title {
    font-weight: bold;
    cursor: pointer;
  
    @include media($min: $bp-medium) {
      display: inline-block;
      font-size: $font-body-size-small;
    }
  }
  
  .utils-sortby-button {
    display: inline-block;
    font-size: $font-body-size-small;
    font-weight: bold;
    vertical-align: middle;
  
    @include media($min: $bp-medium) {
      display: none;
    }
  }
  
  .utils-sortby-select {
    display: none;
    width: auto;
    max-width: 100%;
  
    @include media($min: $bp-medium) {
      display: inline-block;
      margin-left: $space-xx-small;
    }
  
    .form-field-select {
      max-width: 100%;
      padding-top: 0;
      padding-bottom: 0;
      font-size: $font-body-size-smaller;
      border: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
    }
  }
  
  .utils-sortby--modal {
    display: none;
  }
  
  .utils-sortby--modal-title {
    display: block;
    margin-bottom: $space-medium;
    font-size: $font-h5-size;
    font-weight: bold;
    color: $color-heading;
  }
  
  .utils-sortby--modal-list {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    list-style: none;
  }
  
  .utils-sortby--modal-item {
    margin-top: $space-x-small;
  
    &:first-child {
      margin-top: 0;
    }
  }
  
  .utils-sortby--modal-button {
    @extend %button-secondary;
    display: block;
    width: 100%;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
  
    &:active,
    &:focus,
    &.utils-sortby--modal-button--active {
      &,
      &:hover {
        color: $color-background;
        background: $color-link;
      }
    }
  }
  
  .utils-showby {
    font-size: 0;
    text-align: right;
  
    @include media($max: $bp-medium) {
      display: none;
    }
  
    li {
      display: inline-block;
      list-style: none;
  
      &:not(:first-child) {
        margin-left: $space-small;
      }
    }
  }
  
  .utils-showby-title {
    font-size: $font-body-size-small;
    font-weight: bold;
  }
  
  .utils-showby-item {
    @extend %link--text;
    font-size: $font-body-size-smaller;
  
    &:hover {
      color: $color-link;
    }
  
    &.utils-showby-item--active {
      @extend %link--default;
    }
  }
  
  // Limit product grid modals to a reasonable width
  .modal--productgrid-sort,
  .modal--productgrid-filters {
    .modal-inner {
      max-width: em(500px);
    }
  }
  
  .productgrid--outer:not(.layout--has-sidebar) .utils-sortby {
    text-align: left;
  }
  
  .utils-view {
    width: em(102px);
  
    @include media($max: $bp-medium) {
      padding: 0  $space-xx-small 0 0;
  
      &.utils-hide {
        display: none;
      }
    }
  
    @include media($min: $bp-medium) {
      width: 60%;
    }
  }
  
  .utils-view-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  .utils-viewtoggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  
    @include media($min: $bp-medium) {
      margin-left: $gutter-content * 2;
    }
  }
  
  .utils-viewtoggle-label {
    display: none;
    margin-right: 10px;
    font-weight: bold;
  
    @include media($min: $bp-medium) {
      display: block;
    }
  }
  
  .utils-viewtoggle-button {
    padding: 5px 13px 2px;
    margin-left: 0;
    color: lighten($color-text, 40%);
    cursor: pointer;
    background: $color-white;
    border: 0;
    border-top: 1px solid lighten($color-text, 40%);
    border-bottom: 1px solid lighten($color-text, 40%);
    outline: 0;
    -webkit-transition: color .1s ease;
    transition: color .1s ease;
    -webkit-appearance: none;
  
  
    &:nth-of-type(1) {
      border-left: 1px solid lighten($color-text, 40%);
      border-radius: 3px 0 0 3px;
  
      &.active {
        border-color: $color-link;
      }
    }
  
    &:nth-of-type(2) {
      border-right: 1px solid lighten($color-text, 40%);
      border-radius: 0 3px 3px 0;
  
      &.active {
        border-color: $color-link;
      }
    }
  
    &:focus {
      -webkit-box-shadow: 0 0 0 2px transparentize($color-text, 0.8);
              box-shadow: 0 0 0 2px transparentize($color-text, 0.8);
  
      &.active {
        border-color: $color-link-hover;
        -webkit-box-shadow: 0 0 0 2px transparentize($color-link, 0.6);
                box-shadow: 0 0 0 2px transparentize($color-link, 0.6);
      }
    }
  
    &:hover {
      color: lighten($color-text, 20%);
    }
  
    &.active {
      color: $color-white;
      background: $color-link;
    }
  
    @include media($min: $bp-medium) {
      height: 20px;
      padding: 0;
      margin-left: 6px;
      background-color: transparent;
  
      &:nth-of-type(1) {
        border: 0;
        border-radius: 2px;
      }
  
      &:nth-of-type(2) {
        border: 0;
        border-radius: 2px;
      }
  
      &.active {
        color: $color-link;
        background-color: transparent;
      }
    }
  }
  
  $local-space-small: 10px;
  $local-space-large: 20px;
  
  $local-padding-small: 15px;
  $local-padding-medium: 20px;
  
  $local-item-width: 220px;
  
  .product-row--container {
    @extend %layout-container;
    position: relative;
  
    @include media($max: $bp-large) {
      // Prevent overflow scrolling for Flickity
      // add spacing for shadow
      // then reduce vertical offset
      padding-bottom: $local-space-small;
      margin-bottom: -1 * $local-space-small;
      overflow: hidden;
    }
  }
  
  .product-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    outline: 0;
  
    &.flickity-enabled {
      cursor: -webkit-grab;
      cursor: grab;
    }
  
    .ie9 & {
      font-size: 0;
  
      @include media($max: $bp-small) {
        margin-right: $gutter-outer-small;
      }
  
      @include media($min: $bp-small, $max: $bp-large) {
        margin-right: $gutter-outer-medium;
      }
    }
  
    .flickity-slider .productgrid--item {
      min-height: 100%;
    }
  
    .productgrid--item {
      width: $local-item-width;
      margin-top: 0;
      margin-right: $local-space-small;
  
      &:last-child {
        margin-right: 0;
      }
  
      .ie9 & {
        vertical-align: top;
      }
  
      @include media($min: $bp-large, $max: $bp-large-home) {
        width: calc(25% - #{$local-space-large * 3 / 4});
        margin-right: $local-space-large;
  
        .ie9 & {
          width: calc(20% - #{($local-space-large * 3 / 4) + 1px});
        }
  
        // Within "Featured collection", hide last product when its the 4th
        .featured-collection--container & {
          &:nth-child(4):nth-last-child(2) {
            display: none;
          }
        }
  
        // Within "Related products", hide last product, when its 5th
        .related-products--container & {
          &:nth-child(5) {
            display: none;
          }
        }
  
        &:last-child {
          margin-right: 0;
        }
      }
  
      @include media($min: $bp-large-home) {
        width: calc(20% - #{$local-space-large * 4 / 5});
        margin-right: $local-space-large;
  
        .ie9 & {
          width: calc(20% - #{($local-space-large * 4 / 5) + 1px});
        }
  
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
  
  $local-link-padding: em(3px);
  
  .productgrid--sidebar-item.filter-group {
    margin-top: $space-xx-small - $local-link-padding;
  }
  
  // Filter
  .filter-item {
    @extend %link--text;
    position: relative;
    margin-top: $space-xxx-small;
    cursor: pointer;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
  
    .modal & {
      margin-top: 0;
      border-top: 1px solid $color-border-soft;
  
      &:first-child {
        margin-top: $space-xx-small;
      }
  
      &:last-child {
        border-bottom: 1px solid $color-border-soft;
      }
  
      &.filter-item--toggle {
        padding-top: $space-xx-small;
        border-bottom: 0;
      }
    }
  
    &.filter-item--hidden {
      display: none;
    }
  
    .filter-icon--checkbox {
      @extend %icon-checkbox;
    }
  
    a {
      position: relative;
      z-index: 100;
      display: block;
      padding: $local-link-padding;
      margin-left: -1 * $local-link-padding;
      font-size: $font-body-size-small;
      line-height: 1.15;
      color: currentColor;
      text-decoration: none;
  
      .modal & {
        padding: ($local-link-padding * 3) $local-link-padding;
      }
  
      &.filter-text--link {
        @extend %link--default;
      }
    }
  
    .filter-text,
    .filter-icon--checkbox {
      display: inline-block;
      vertical-align: middle;
    }
  
    .filter-text {
      max-width: calc(100% - (#{$local-link-padding * 3 + em(nth($checkbox-size, 1))}));
      margin-left: $local-link-padding * 3;
  
     .modal & {
        white-space: normal;
      }
    }
  }
  
  .filter-item--inactive {
    a {
  
      &:hover {
        color: $color-text;
  
        .filter-icon--checkbox {
          border-color: transparentize($color-text, 0.5);
        }
      }
  
      &.filter-link--active,
      &:active,
      &:focus {
        font-weight: bold;
        color: $color-link;
  
        .filter-icon--checkbox {
          @extend %icon-checkbox--active;
        }
      }
    }
  }
  
  .filter-item--active {
    @extend %link--default;
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
  
    a {
      font-weight: bold;
  
      &,
      &:hover {
        color: $color-link;
      }
  
      .filter-icon--checkbox {
        @extend %icon-checkbox--active;
      }
  
      &.filter-link--active,
      &:active,
      &:focus {
        font-weight: normal;
        color: $color-text;
  
        .filter-icon--checkbox {
          @extend %icon-checkbox;
        }
      }
    }
  }
  
  .filter-group--grid {
    padding: 0;
    margin: 0;
    font-size: 0;
    white-space: normal;
  }
  
  .filter-item--grid-simple,
  .filter-item--grid {
    display: inline-block;
    margin-top: $space-xx-small;
    margin-right: $space-xx-small;
    vertical-align: middle;
  }
  
  .filter-item--grid {
  
    a {
      display: block;
      color: $color-background;
      background: $color-link;
    }
  
    .filter-icon--emove,
    .filter-text {
      display: inline-block;
      font-size: $font-body-size-small;
      color: currentColor;
      vertical-align: middle;
    }
  
    .filter-text {
      padding: em(7px) em(10px);
      font-weight: bold;
      border-right: 1px solid currentColor;
    }
  
    .filter-icon--emove {
      padding: em(10px);
  
      svg {
        display: block;
        width: 11px;
        height: 11px;
        fill: currentColor;
      }
    }
  }
  
  .filter-item--grid-simple {
    @include media($max: $bp-medium) {
      display: block;
      margin-top: $space-small;
    }
  
    a {
      @extend %link--default;
      padding: em(5px);
      font-size: $font-body-size-small;
      background-color: transparent;
  
      @include media($max: $bp-medium) {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
  
  $local-indentation: em(13px);
  
  .productgrid--sidebar-menu {
  
    .navmenu-link {
      @extend %link--text;
    }
  
    .navmenu-link--active {
      @extend %link--default;
      font-weight: bold;
    }
  
    .navmenu-item {
      display: block;
      margin-top: em(8px);
      line-height: 1.375;
    }
  
    .navmenu {
      padding-left: 0;
      margin-left: 0;
      list-style: none;
  
      .navmenu {
        padding-left: $local-indentation;
      }
    }
  
    .navmenu-depth-3 {
      border-left: 2px solid $color-border-soft;
  
      .navmenu-item {
        margin-top: em(7px);
        font-size: $font-body-size-smaller;
      }
    }
  }
  
  $local-form-height: em(66px);
  $local-input-padding-small: em(8px);
  $local-input-padding-large: em(16px);
  $local-button-size: em(28px) + (em(2px) * 2); // size + (padding * 2)
  
  .productgrid--search {
    position: relative;
    z-index: 1;
    display: none;
    
    @include media($min: $bp-small) {
      display: block;
    }
  }
  
  .productgrid--search-form-field {
    height: $local-form-height;
    padding: {
      top: $local-input-padding-small;
      right: $local-button-size + $local-input-padding-large;
      bottom: $local-input-padding-small;
      left: $local-input-padding-large;
    };
    font-size: $font-heading-large;
    line-height: 1;
    color: $color-heading;
  
    &::-webkit-input-placeholder {
      color: currentColor;
      opacity: transparentize($color-heading, 0.4);
    }
  
    &:-ms-input-placeholder {
      color: currentColor;
      opacity: transparentize($color-heading, 0.4);
    }
  
    &::-ms-input-placeholder {
      color: currentColor;
      opacity: transparentize($color-heading, 0.4);
    }
  
    &::placeholder {
      color: currentColor;
      opacity: transparentize($color-heading, 0.4);
    }
  }
  
  .productgrid--search-button {
    @extend %button-reset, %search-button;
    position: absolute;
    top: 50%;
    right: $local-input-padding-large;
    width: $local-button-size;
    height: $local-button-size;
    padding: em(2px);
    margin-top: -1 * $local-button-size / 2;
  
    .search-icon--inactive {
      width: 100%;
      height: 100%;
      color: $color-button-background;
    }
  
    .search-icon--active {
      color: transparentize($color-heading, 0.8);
    }
  }
  
  
  $local-padding-small: em(15px);
  $local-padding-medium: em(20px);
  
  // Z-index stack, highest to lowest
  $local-stack: (100, 50);
  
  .productitem {
    @extend %box-shadow;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: 100%;
    min-height: 100%;
    padding: $local-padding-small;
    background: $color-background;
    -webkit-transition: height 0.25s ease;
    transition: height 0.25s ease;
  
    @include media($min: $bp-medium) {
      padding: $local-padding-medium;
    }
  
    @include media($min: $bp-large) {
      .productgrid--item.animating &,
      .productgrid--item.visible & {
        position: absolute;
      }
    }
  }
  
  .productitem--badge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    font-size: em(13px);
  }
  
  .productitem--info {
    position: relative;
    z-index: nth($local-stack, 1);
    background-color: $color-background;
  }
  
  .productitem--price {
  
    &,
    + .productitem--title {
      margin-top: $space-xxx-small;
    }
  
    .price--spacer {
      display: block;
      height: em(13px) * 1.38;
    }
  
    .price--compare-at.visible + .price--main {
      margin-top: em(2px);
    }
  
    .price--main {
      color: $color-link;
  
      .productitem--emphasis & {
        font-size: em(22px);
  
        .price--varies & {
          font-size: em(20px);
        }
  
        .price--label {
          font-size: em(18px);
        }
      }
  
      .productitem--sale & {
        color: $color-sale;
      }
    }
  }
  
  .productitem--title {
    margin: em(10px) 0 0;
    font-family: $font-body;
    font-size: $font-body-size;
    font-weight: normal;
    line-height: 1.3125;
    white-space: normal;
  
    a {
      @extend %link--text;
    }
  }
  
  .productitem--vendor {
    margin: $space-xxx-small 0 0 0;
    font-family: $font-body;
    font-size: em($font-body-size - 3px);
    font-weight: normal;
    line-height: 1.3125;
    color: $color-text;
    white-space: normal;
    opacity: 0.6;
  }
  
  .productitem--ratings {
  
    .spr-badge {
      margin-top: em(6px);
      line-height: 1;
    }
  }
  
  .productitem--actions {
    z-index: nth($local-stack, 2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: $space-xx-small ($local-padding-medium - $space-xxx-small) 0;
    text-align: center;
    -webkit-transition: opacity 0.20s ease 0s;
    transition: opacity 0.20s ease 0s;
  
    .no-touch & {
      position: absolute;
      right: 0;
      bottom: $local-padding-medium;
      left: 0;
      opacity: 0;
      visibility: hidden;
    }
  
    .has-touch & {
      display: none;
      margin-right: -1 * $space-xxx-small;
      margin-left: -1 * $space-xxx-small;
    }
  
    @include media($min: $bp-large) {
  
      .productgrid--item:hover,
      .productgrid--item.animating &,
      .productgrid--item.visible & {
        visibility: visible;
      }
  
      .productgrid--item.animating-in:not(.animating-out) & {
        -webkit-transition: opacity 0.2s ease 0.05s;
        transition: opacity 0.2s ease 0.05s;
      }
  
      .productgrid--item.animating-in:not(.animating-out) &,
      .productgrid--item.visible:not(.animating-out) &,
      .productgrid--item.visible.animating-out:hover & {
        opacity: 1;
      }
  
      // Occurs when user mouses in / out super quick
      .productgrid--item.animating-in.animating-out & {
        opacity: 0;
      }
  
      .has-touch & {
        display: block;
        width: 100%;
      }
    }
  }
  
  .productitem--action {
    display: inline-block;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    min-width: 50%;
    padding-right: $space-xxx-small;
    padding-left: $space-xxx-small;
    margin-top: $space-xx-small;
  
    .ie9 & {
      display: block;
      width: calc(100% - 2px);
    }
  
    .has-touch & {
      min-width: 100%;
    }
  }
  
  .productitem--action-trigger {
    display: block;
    width: 100%;
    padding-right: $space-xxx-small;
    padding-left: $space-xxx-small;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
  
    &.productitem--action-atc {
      @extend %atc-button;
    }
  }
  
  .productitem--image-link {
    display: block;
  }
  
  .productitem--image {
    position: relative;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-size: 0;
  
    .imagestyle--no-image & {
      height: 0;
      padding-bottom: 100%;
    }
  
    img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
    }
  
    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  
    .imagestyle--small &,
    .imagestyle--medium &,
    .imagestyle--large & {
  
      .in-theme-editor & {
        background-color: $color-background-light;
      }
  
      img,
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
      }
    }
  
    .imagestyle--small &,
    .imagestyle--medium &,
    .imagestyle--large &,
    .imagestyle--cropped-small &,
    .imagestyle--cropped-medium &,
    .imagestyle--cropped-large & {
      height: 0;
    }
  
    .imagestyle--small &,
    .imagestyle--cropped-small & {
      padding-bottom: 75%;
    }
  
    .imagestyle--medium &,
    .imagestyle--cropped-medium & {
      padding-bottom: 100%;
    }
  
    .imagestyle--large &,
    .imagestyle--cropped-large & {
      padding-bottom: 150%;
    }
  
    .imagestyle--cropped-small &,
    .imagestyle--cropped-medium &,
    .imagestyle--cropped-large & {
      img,
      svg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        -o-object-fit: cover;
           object-fit: cover;
      }
  
      &.product-item-image-no-objectfit {
        background-position: center;
        background-size: cover;
  
        img {
          display: none;
        }
      }
    }
  }
  
  .productitem-quickshop {
    display: none;
  }
  
  .modal--quickshop-slim,
  .modal--quickshop-full {
    @include media($max: $bp-large) {
      //scss-lint:disable ImportantRule
      display: none !important;
    }
  }
  
  .modal--quickshop-full {
    display: none;
  
    .modal-inner {
      max-width: 840px;
      padding: $space-xx-large;
    }
  
    .product-gallery,
    .product-main {
      white-space: normal;
    }
  
    .product-gallery {
      width: 47%;
    }
  
    .product-main {
      width: 46%;
      margin-left: 7%;
    }
  }
  
  .modal--quickshop-slim {
  
    .product-ratings,
    .product-vendor,
    .product-gallery,
    .product-description,
    .share-buttons {
      display: none;
    }
  
    .modal-inner {
      max-width: 500px;
      padding: $space-xx-large;
    }
  
    .product-main {
      width: 100%;
      margin-left: 0;
      white-space: normal;
    }
  }
  
  .product-details {
    // color: $color-text;
  
    @include media($max: $bp-small) {
      margin-top: $space-large;
      margin-bottom: $space-medium;
    }
  }
  
  .product-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: $font-h3-size;
    // color: $color-heading;
    line-height: 1.2;
  
    @include media($min: $bp-small) {
      font-size: $font-h1-size;
    }
  
    a {
      color: $color-heading;
      text-decoration: none;
    }
  }
  
  .product-vendor {
    margin-top: $space-xxx-small;
    font-size: $font-body-size;
    line-height: 1.6;
    opacity: 0.6;
  }
  
  .product-ratings {
    margin-top: $space-xx-small;
  
    .spr-badge {
  
      .spr-badge-caption {
        margin-left: $space-xx-small;
        font-size: $font-body-size-smaller;
      }
  
      .spr-badge-starrating {
        position: relative;
        top: -1px;
  
        .spr-icon {
          font-size: $font-body-size-smaller;
  
          @include media($min: $bp-small) {
            font-size: em($font-body-size + 1);
          }
        }
      }
    }
  }
  
  .product-pricing {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    margin-top: $space-x-small;
    margin-bottom: -1 * $space-xxx-small;
  
    .ie9 & {
      font-size: 0;
    }
  
    @include media($min: $bp-small) {
      margin-top: $space-small;
    }
  }
  
  .product--badge {
    display: inline-block;
    height: 100%;
    margin-right: $space-small;
    margin-bottom: $space-xxx-small;
    font-size: em(13px);
    white-space: nowrap;
  }
  
  .product--price {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -webkit-flex-shrink: 1;
        -ms-flex-negative: 1;
            flex-shrink: 1;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    vertical-align: middle;
  
    .ie9 & {
      display: inline-block;
      font-size: 0;
    }
  
    .price--compare-at,
    .price--main {
      -webkit-flex-basis: auto;
          -ms-flex-preferred-size: auto;
              flex-basis: auto;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      margin-bottom: $space-xxx-small;
      font-size: em(20px);
      line-height: 1.15;
      white-space: nowrap;
  
      @include media($min: $bp-small) {
        font-size: em(22px);
      }
    }
  
    .price--main {
      display: inline-block;
    }
  
    .price--compare-at {
      margin-right: $space-xx-small;
  
      &.visible + .price--main {
        color: $color-sale;
      }
    }
  }
  
  .product-section--container {
    @extend %layout-container;
    margin-top: $space-xx-large;
  
    @include media($min: $bp-large) {
      margin-top: $space-xxx-large;
    }
  
  }
  
  .product-section--title {
    margin-bottom: $space-medium;
    font-size: $font-h4-size;
    color: $color-heading;
  
    @include media($min: $bp-medium) {
      margin-bottom: $space-large;
    }
  }
  
  // Additional product sections
  .product-section--content {
    margin-top: $space-medium;
  
    @include media($min: $bp-medium) {
      margin-top: $space-large;
    }
  }
  
  .related-products--title {
    @include media($max: $bp-small) {
      padding-right: $gutter-outer-small;
      padding-left: $gutter-outer-small;
    }
  
    @include media($min: $bp-small, $max: $bp-large) {
      padding-right: $gutter-outer-medium;
      padding-left: $gutter-outer-medium;
    }
  }
  
  .product-message--container {
    //scss-lint:disable SpaceAfterPropertyColon
    max-height: 0;
    padding-top: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition:
      max-height 0.25s ease,
      padding-top 0.25s ease,
      opacity 0.15s ease;
    transition:
      max-height 0.25s ease,
      padding-top 0.25s ease,
      opacity 0.15s ease;
  
    &.visible {
      max-height: 200px;
      padding-top: $space-small;
      opacity: 1;
    }
  
    div {
      padding: $space-x-small;
    }
  }
  
  .product-message--error {
    @extend %message--error;
  }
  
  .price--compare-at {
    display: none;
    font-size: em(13px);
    line-height: 1.38;
    text-decoration: line-through;
    opacity: 0.6;
  
    &.visible {
      display: inline-block;
    }
  }
  
  .price--main {
    font-size: $font-body-size;
    line-height: em(23px);
  }
  
  .badge--soldout,
  .badge--sale {
    padding: $space-xxx-small em(5px);
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
  }
  
  .badge--soldout {
    color: $color-background;
    background-color: $color-notice;
  }
  
  .badge--sale {
    color: $color-white;
    background-color: $color-sale;
  }
  
  .product-reviews--content {
  
    .spr-container {
      padding: 0;
      border: 0;
    }
  
    // Header
    .spr-header {
      padding: $space-large $space-medium;
    }
  
    .spr-header-title {
      margin-bottom: 0;
      font-size: $font-h4-size;
      color: $color-heading;
    }
  
    @media only screen and (max-width: 480px) {
      .spr-summary,
      .spr-header-title {
        text-align: left;
      }
    }
  
    // Current rating
    .spr-summary {
      position: relative;
      margin-top: $space-x-small;
      font-size: $font-h3-size;
  
      .spr-starrating {
        display: block;
        margin-right: 0;
  
        @include media($min: $bp-small) {
          display: inline-block;
        }
  
        .spr-icon {
          font-size: $font-h3-size;
        }
      }
    }
  
    .spr-summary-caption {
      display: block;
      margin-top: $space-x-small;
      font-size: $font-body-size;
      line-height: 1.5;
      color: $color-text;
      vertical-align: bottom;
  
      @include media($min: $bp-small) {
        display: inline-block;
        margin-top: ($font-h3-size - em($font-body-size)) / 2;
        margin-left: $space-xx-small;
      }
  
      span.spr-summary-actions-togglereviews {
        opacity: 0.6;
      }
  
      a.spr-summary-actions-togglereviews {
        @extend %link--default;
        opacity: 1;
      }
    }
  
    .spr-summary-actions {
      display: block;
      margin-top: $space-large;
  
      @include media($min: $bp-small) {
        position: absolute;
        right: 0;
        bottom: 0;
        margin-top: 0;
      }
    }
  
    .spr-summary-actions-newreview {
      @extend %button-secondary;
      float: none;
    }
  
    .spr-form-message-error {
      @extend %message--error;
    }
  
    // Review form
    .spr-form {
      padding: $space-large $space-medium;
      margin-top: 0;
      border: 0;
      border-top: 1px solid $color-border-soft;
  
      @include media($min: $bp-small) {
        padding-top: $space-xx-large;
        padding-bottom: $space-xx-large;
      }
  
      .spr-form-title {
        font-size: $font-h4-size;
        color: $color-heading;
      }
  
      form {
        max-width: em(640px);
        margin-right: auto;
        margin-left: auto;
      }
  
      .spr-form-label {
        @extend %form-label;
        display: block;
        margin-top: $space-large;
        font-weight: bold;
      }
  
      .spr-form-contact-name .spr-form-label {
        margin-top: $space-small;
      }
  
      .spr-form-input {
        display: block;
        margin-top: $space-x-small;
      }
  
      .spr-form-input-text,
      .spr-form-input-email,
      .spr-form-input-textarea {
        @extend %form-control-base, %form-control-input;
        padding-top: em(15px);
        padding-bottom: em(15px);
        margin-bottom: 0;
  
        &::-webkit-input-placeholder {
          opacity: 0.6;
        }
  
        &:-ms-input-placeholder {
          opacity: 0.6;
        }
  
        &::-ms-input-placeholder {
          opacity: 0.6;
        }
  
        &::placeholder {
          opacity: 0.6;
        }
  
        &.spr-form-input-error {
          border-color: $color-error;
        }
      }
  
      .spr-form-input-textarea {
        @extend %form-control-textarea;
      }
  
      .spr-form-review-rating {
  
        .spr-icon {
          width: $font-h3-size;
          height: $font-h3-size;
          font-size: $font-h3-size;
          color: $color-star;
        }
      }
  
      .spr-form-actions {
        margin-top: $space-large;
      }
  
      .spr-button-primary {
        float: none;
      }
  
      .spr-form-contact-name,
      .spr-form-contact-email,
      .spr-form-contact-location,
      .spr-form-review-rating,
      .spr-form-review-title,
      .spr-form-review-body {
        margin-bottom: 0;
      }
  
    }
  
    // Review / Pagination container
    .spr-content {
  
      // Review container
      .spr-reviews {
        @extend %clearfix;
        padding: $space-x-large / 2 $space-medium;
        margin-top: 0;
        border: 0;
        border-top: 1px solid $color-border-soft;
      }
  
      // Individual review
      .spr-review {
        padding: $space-x-large / 2 0;
        margin: 0;
        border: 0;
  
        @include media($min: $bp-small) {
          float: left;
          width: calc(50% - #{$space-medium});
  
          &:nth-child(2n + 1) {
            margin-right: $space-medium * 2;
            clear: left;
          }
        }
  
        &:first-child {
          margin-top: 0;
        }
  
        .spr-review-header-starratings {
          margin-bottom: $space-xxx-small;
        }
  
        .spr-review-header-title {
          margin-top: $space-xx-small;
          font-size: $font-h4-size;
          color: $color-heading;
        }
  
        .spr-review-header-byline {
          display: block;
          margin-top: $space-xx-small;
          margin-bottom: 0;
          font-size: $font-body-size-small;
          font-style: normal;
          color: $color-text;
          opacity: 0.6;
  
          strong {
            font-weight: normal;
          }
        }
  
        .spr-review-content {
          margin-top: $space-x-small;
          margin-bottom: 0;
  
          .spr-review-content-body {
            font-size: em($font-body-size);
            line-height: 1.625;
          }
        }
  
        .spr-review-reply {
          padding: $space-small;
          margin-top: $space-medium;
          margin-bottom: 0;
          background-color: $color-background-light;
  
          .spr-review-reply-body {
            font-size: $font-body-size-smaller;
          }
        }
  
        .spr-review-footer {
          margin-top: $space-medium;
  
          a {
            @extend %link--default;
            font-size: em(12px);
          }
        }
      }
  
      // Review pagination
      .spr-pagination {
        padding: $space-large 0 0;
        clear: both;
        border-top: 0;
  
        a {
          @extend %link--default;
          padding: 0 em(9px);
        }
      }
  
      .spr-pagination-page {
        display: inline-block;
        color: $color-text;
  
        &.is-active {
          padding: em(9px);
        }
      }
  
      .spr-pagination-prev,
      .spr-pagination-next {
        position: relative;
        right: auto;
        left: auto;
        display: inline-block;
      }
    }
  }
  .product-recently-viewed--section {
    position: relative;
  
    &.hide {
      display: none;
    }
  
    .flickity-viewport {
      position: relative;
  
      &:before,
      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: -$gutter-content;
        right: 100%;
        bottom: 0;
        background: -webkit-gradient( linear, left top, right top, color-stop(10%, $color-footer-background), to(rgba($color-footer-background, 0)));
        background: linear-gradient( to right, $color-footer-background 10%, rgba($color-footer-background, 0) 100%);
        z-index: 2;
      }
  
      &:after {
        left: 100%;
        right: -$gutter-content;
        background: -webkit-gradient( linear, right top, left top, color-stop(10%, $color-footer-background), to(rgba($color-footer-background, 0)));
        background: linear-gradient( to left, $color-footer-background 10%, rgba($color-footer-background, 0) 100%);
      }
    }
  
    .flickity-prev-next-button {
      opacity: 1;
  
      svg {
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        -webkit-transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
        transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
        transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s;
        transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
        fill: $color-text;
      }
  
      &:disabled {
        cursor: default;
        opacity: 0.15;
      }
  
      &:hover {
        &:not([disabled]) {
          opacity: 1;
  
          svg {
            -webkit-transform: scale(1.2);
                -ms-transform: scale(1.2);
                    transform: scale(1.2);
          }
        }
      }
  
      &:active {
        &:not([disabled]) {
          opacity: 0.5;
        }
      }
  
      @include media($max: $bp-medium) {
        display: none;
      }
  
      &.next {
        @include media($min: $bp-medium, $max: $bp-large) {
          right: em(25px);
        }
      }
  
      &.previous {
        @include media($min: $bp-medium, $max: $bp-large) {
          left: em(25px);
        }
      }
    }
  }
  
  .product-recently-viewed-wrapper {
    padding: $gutter-content $gutter-content $gutter-outer-small;
    background: $color-footer-background;
  }
  
  .product-recently-viewed--content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: calc(100%);
    padding: 0 $gutter-content;
    margin: $space-x-large auto $space-x-large;
    outline: 0;
    overflow: hidden;
  
    @include media($min: $bp-medium ) {
      width: calc(100% - (70px - #{$gutter-content * 2}));
    }
  }
  
  .product-recently-viewed-header {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  
    @include media($min: $bp-medium) {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
  }
  
  .product-recently-viewed-heading {
    margin: 0;
  
    @include media($max: $bp-medium) {
      margin-bottom: $space-xxx-small;
    }
  }
  
  .product-recently-viewed-clear {
    @extend %link--default;
    font-size: $button-small-size;
    cursor: pointer;
  }
  
  .product-recently-viewed-card {
    @extend %box-shadow;
    width: em(175px);
    padding: $gutter-outer-small $gutter-outer-medium $gutter-outer-medium;
    margin-right: $gutter-outer-small;
    font-size: $font-body-size-small;
    background: $color-white;
    -webkit-transition: opacity 0.25s, -webkit-transform 0s;
    transition: opacity 0.25s, -webkit-transform 0s;
    transition: transform 0s, opacity 0.25s;
    transition: transform 0s, opacity 0.25s, -webkit-transform 0s;
  
    &.hide-card {
      opacity: 0;
    }
  
    &.move-card {
      -webkit-transform: translateX(calc(-100% - #{$gutter-outer-small}));
          -ms-transform: translateX(calc(-100% - #{$gutter-outer-small}));
              transform: translateX(calc(-100% - #{$gutter-outer-small}));
      -webkit-transition: opacity 0.25s, -webkit-transform 0.5s;
      transition: opacity 0.25s, -webkit-transform 0.5s;
      transition: transform 0.5s, opacity 0.25s;
      transition: transform 0.5s, opacity 0.25s, -webkit-transform 0.5s;
    }
  
    @include media($min: $bp-medium) {
      width: em(200px);
      padding: $gutter-outer-small $gutter-content $gutter-content;
      margin-right: $gutter-content;
    }
  }
  
  .product-recently-viewed-card-time {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: $space-x-small;
    font-size: $font-body-size - 3px;
    line-height: 1;
    opacity: 0.7;
  
    @include media($min: $bp-medium) {
      font-size: $font-body-size-smaller;
    }
  }
  
  .product-recently-viewed-card-emove {
    padding: 5px;
    cursor: pointer;
    margin-right: -6px;
  
    @include media($min: $bp-medium) {
      margin-right: -10px;
    }
  }
  
  .product-recently-viewed-card-image {
    width: em(140px);
    height: em(140px);
    margin-bottom: $gutter-content;
    background-position: center;
    background-size: cover;
  
    @include media($min: $bp-medium) {
      width: em(180px);
      height: em(180px);
    }
  }
  
  .product-recently-viewed-card-price {
    padding: $gutter-content 0 $gutter-outer-small / 2;
  
    .price--main {
      color: $color-link;
    }
  
    .product--badge {
      font-size: $font-body-size-smaller;
    }
  }
  
  .product-recently-viewed-card-title {
    position: relative;
    display: block;
    height: 45px;
    color: $color-text;
    font-size: $font-body-size-small;
    line-height: 1.5;
    text-decoration: none;
    overflow: hidden;
  
    &:after {
      content: '';
      position: absolute;
      width: 40%;
      height: em(20px);
      right: 0;
      bottom: 0;
      background: -webkit-gradient(linear, left top, right top, from(rgba($color-white, 0)), color-stop(50%, $color-white));
      background: linear-gradient(to right, rgba($color-white, 0), $color-white 50%);
      text-align: right;
    }
  }
  
  $local-thumbnail-space: 3px;
  
  .product-gallery--slider {
    position: relative;
    overflow: hidden;
    outline: none;
  
    .flickity-viewport {
      overflow: hidden;
      -webkit-transition: height 0.3s linear;
      transition: height 0.3s linear;
    }
  
    @include media($max: $bp-small) {
  
      &.flickity-enabled {
        cursor: -webkit-grab;
        cursor: grab;
      }
    }
  
    @include media($min: $bp-small) {
      margin-top: 0;
  
      // Disable Flickity's transformations
      .flickity-slider {
        -webkit-transform: none !important;
            -ms-transform: none !important;
                transform: none !important; //scss-lint:disable ImportantRule
      }
    }
  
    .product-gallery--loader {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 26px;
      height: 26px;
      margin-top: -13px;
      margin-left: -13px;
      color: $color-text;
      opacity: 0;
      visibility: hidden;
      -webkit-animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
              animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
      -webkit-transition: opacity 0.25s ease;
      transition: opacity 0.25s ease;
  
      svg {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  
    &.product-gallery-style-natural:not(.flickity-enabled) {
      min-height: 150px;
    }
  
    &.product-gallery--has-images:not(.flickity-enabled) {
      .product-gallery--image:not(.image--selected) {
        position: absolute;
        opacity: 0;
      }
  
      .image--selected {
        opacity: 0;
      }
  
      .product-gallery--loader {
        opacity: 1;
        visibility: visible;
      }
    }
  }
  
  .product-gallery--slider:not(.product-gallery--style-natural) {
    .fluid-width-video-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 100%;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
  
    .product-galley--image-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      background-position: center;
    }
  }
  
  .product-gallery--style-natural .product-galley--image-background {
    background-size: 0;
  }
  
  .product-galley--image-background .video {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  
  .video-image {
    opacity: 1;
    -webkit-transition: opacity 200ms ease-in-out;
    transition: opacity 200ms ease-in-out;
  
    .video-playing + &,
    .video-transitioning + & {
      opacity: 0;
    }
  }
  
  .product-gallery--style-short,
  .product-gallery--style-square,
  .product-gallery--style-tall {
    &.product-gallery--slider .product-galley--image-background {
      background-size: 0;
    }
  
    .flickity-viewport,
    .product-gallery--image {
      height: 0;
    }
  
    .in-theme-editor & {
      background-color: $color-background-light;
    }
  
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
  }
  
  .product-gallery--style-cropped-short,
  .product-gallery--style-cropped-square,
  .product-gallery--style-cropped-tall {
    img:not(.video-image) {
      display: none;
    }
    img {
      position: absolute;
      min-width: 50%;
      min-height: 50%;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      overflow-x: hidden;
    }
  
    .video {
      iframe {
        opacity: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
      }
  
      .video-cover {
        background-size: 0;
      }
    }
  
    .video-playing iframe {
      opacity: 1;
    }
  }
  
  .product-gallery--style-short,
  .product-gallery--style-cropped-short {
    &:not(.flickity-enabled),
    .flickity-viewport,
    .product-gallery--image {
      padding-bottom: 75%;
    }
  }
  
  .product-gallery--style-square,
  .product-gallery--style-cropped-square {
    &:not(.flickity-enabled),
    .flickity-viewport,
    .product-gallery--image {
      padding-bottom: 100%;
    }
  }
  
  .product-gallery--style-tall,
  .product-gallery--style-cropped-tall {
    &:not(.flickity-enabled),
    .flickity-viewport,
    .product-gallery--image {
      padding-bottom: 150%;
    }
  }
  
  .product-gallery--image {
    width: 100%;
    margin: 0;
    outline: none;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
  
    @include media($max: $bp-small) {
      .flickity-enabled & {
        opacity: 1;
      }
    }
  
    @include media($min: $bp-small) {
      left: 0 !important; //scss-lint:disable ImportantRule
      z-index: -1;
      opacity: 0;
  
      .flickity-enabled & {
        opacity: 0;
        -webkit-transition-duration: 0s;
                transition-duration: 0s;
      }
  
      &.product-gallery--image-placeholder,
      &.image--selected,
      &.is-selected {
        z-index: 0;
        opacity: 1;
      }
    }
  
    .product-gallery--style-natural & img,
    svg {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
  }
  
  .product-gallery--navigation {
    margin-top: $space-small - em($local-thumbnail-space * 2);
    font-size: 0;
    text-align: left;
  
    @include media($min: $bp-small) {
      margin-top: $space-medium - em(6px);
      margin-right: -1 * $local-thumbnail-space;
      margin-left: -1 * $local-thumbnail-space;
    }
  
    @include media($max: $bp-small) {
      padding-bottom: 2px;
      margin-left: $gutter-outer-small - $local-thumbnail-space;
      overflow-x: scroll;
      overflow-y: hidden;
      white-space: nowrap;
  
      .product-gallery--thumbnail-trigger:last-child {
        margin-right: $gutter-outer-small;
      }
  
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
  
  .product-gallery--thumbnail-trigger {
    @extend %button-reset;
    position: relative;
    display: inline-block;
    height: 51px;
    max-width: 51px;
    padding: 2px;
    margin-top: $local-thumbnail-space * 2;
    margin-right: $local-thumbnail-space;
    margin-left: $local-thumbnail-space;
    vertical-align: middle;
    border-radius: 2px;
    -webkit-box-shadow: 0 0 2px transparent;
            box-shadow: 0 0 2px transparent;
    color: $color-white;
    -webkit-transition: -webkit-box-shadow 0.1s linear;
    transition: -webkit-box-shadow 0.1s linear;
    transition: box-shadow 0.1s linear;
    transition: box-shadow 0.1s linear, -webkit-box-shadow 0.1s linear;
  
    &:focus {
      outline: none;
    }
  
    &.thumbnail--selected {
      -webkit-box-shadow: 0 0 0 2px $color-slider-accent;
              box-shadow: 0 0 0 2px $color-slider-accent;
    }
  
    .icon-play {
      position: absolute;
      width: em(20px);
      height: em(20px);
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
  }
  
  .product-gallery--thumbnail {
    display: block;
    max-width: 100%;
  }
  
  .form-options {
  
    .no-js & {
      &.no-js-required {
        display: block;
      }
  
      &.js-required {
        display: none;
      }
    }
  
    .js & {
      &.no-js-required {
        display: none;
      }
  
      &.js-required {
        display: block;
      }
    }
  }
  
  .form-options {
    margin-top: $space-small;
  
    &:first-child {
      margin-top: 0;
    }
  }
  
  .product-form--atc {
    margin-top: $space-small;
    font-size: 0;
  
    // For non variant products when in the alternate column
    .product-form--alt > input[type=hidden] + & {
      margin-top: 0;
    }
  }
  
  .product-form--atc-qty,
  .product-form--atc-button {
    display: inline-block;
    vertical-align: middle;
  }
  
  .product-form--atc-qty {
    width: $quantity-width;
  }
  
  .product-form--atc-button {
    @extend %button-primary, %atc-button;
    @include button-size(large);
    width: calc(100% - #{$space-x-small + $quantity-width});
    padding-right: em(5px);
    padding-left: em(5px);
    margin-left: $space-x-small;
  
    .ie9 & {
      width: calc(100% - #{em2px($space-x-small) + em2px($quantity-width)});
    }
  
    .product-form--alt & {
      @include media($max: $bp-xl) {
        font-size: $button-medium-size;
      }
    }
  }
  
  .option {
    margin-top: $gutter-outer-medium;
  }
  
  .option-name {
    font-weight: bold;
  
    @include media($min: $bp-small) {
      font-size: $font-body-size-smaller;
    }
  }
  
  .option-values {
    margin-top: $gutter-outer-small;
  }
  
  .option-value {
    display: inline-block;
  }
  
  .option-value-input {
    display: none;
  
    & + .option-value-name {
      @extend %form-control-base;
      display: inline-block;
      width: auto;
      padding: $gutter-outer-small * 0.75 $gutter-outer-small;
      margin: 0 $gutter-outer-small / 2 $gutter-outer-small 0;
      cursor: pointer;
      -webkit-transition: 0.2s;
      transition: 0.2s;
  
      @include media($min: $bp-small) {
        font-size: $font-body-size-smaller;
      }
    }
  
    &:checked + .option-value-name {
      color: $color-link;
      background-color: rgba($color-link, 0.1);
      border-color: $color-link;
    }
  
    &:disabled + .option-value-name {
      opacity: 0.5;
      text-decoration: line-through;
      cursor: default;
    }
  }
  
  .account-order {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
  
    tr {
      border-bottom: 1px solid $color-border-soft;
    }
  
    th {
      padding-bottom: $space-small;
      font-family: $font-heading;
      font-size: $font-h6-size;
      color: $color-heading;
    }
  
    td {
      padding-top: $space-small;
      padding-bottom: $space-small;
      padding-left: $gutter-content;
      font-size: $font-body-size-small;
  
      &:first-child {
        padding-left: 0;
      }
    }
  
    .order-footer-value,
    .order-item-price,
    .order-item-quantity,
    .order-item-total {
      width: 20%;
      text-align: right;
  
      @include media($min: $bp-small) {
        width: 16%;
      }
    }
  
    .order-item-placeholder {
      display: block;
    }
  
    .order-item-title {
      width: calc(60% - 64px);
      font-family: $font-heading;
  
      a {
        display: block;
      }
  
      .order-item-options {
        display: block;
        margin-top: $space-xx-small;
        font-size: $font-body-size-smaller;
      }
    }
  
    .order-item-price {
      display: table-cell;
  
      @include media($max: $bp-small) {
        position: absolute;
        visibility: hidden;
      }
    }
  
    .order-item-image {
      width: 50px;
  
      a {
        display: block;
        height: 100%;
      }
  
      img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
      }
    }
  
    .order-footer-item {
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  
  .account-order-attributes {
    padding-left: 0;
    list-style: none;
  
    li:not(:first-child) {
      margin-top: $space-xx-small;
    }
  }
  
  .account-order-attribute-title {
    font-weight: bold;
  }
  .dynamic-video-wrapper {
    @extend %layout-container;
    margin-top: $gutter-outer;
  }
  
  .video {
    position: relative;
    width: 100%;
    padding-bottom: percentage(9/16);
    z-index: 2;
  
    &.video-aspect-ratio-21-9 {
      padding-bottom: percentage(9/21);
    }
  
    iframe {
      position: absolute;
      z-index: 0;
      width: 100%;
      height: 100%;
      background-color: $color-black;
    }
  
    &.video-playing {
      .fluid-width-video-wrapper {
        z-index: 1;
      }
    }
  
    .hide-player {
      opacity: 0;
      -webkit-transition: opacity 200ms ease-in-out;
      transition: opacity 200ms ease-in-out;
    }
  
    &.video-transitioning .hide-player,
    &.video-playing .hide-player {
      opacity: 1;
    }
  }
  
  .video-cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    opacity: 1;
  
    .video-transitioning &,
    .video-playing & {
      opacity: 0;
      -webkit-transition: opacity 200ms ease-in-out;
      transition: opacity 200ms ease-in-out;
    }
  
    .video-playing & {
      z-index: 0;
    }
  }
  
  .video-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
  }
  
  .video-play-button {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: em(77px);
    height: em(77px);
    padding: 0;
    margin: 0;
    color: $color-white;
    background-color: transparent;
    cursor: pointer;
    border: 0;
    border-radius: em(25px);
    outline: none;
    -webkit-transition: -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
    transition: -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
    transition: transform .12s cubic-bezier(.3, 0, 0, 1);
    transition: transform .12s cubic-bezier(.3, 0, 0, 1), -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
  
    &.no-cover {
      opacity: 0;
  
      &:active {
        opacity: 0;
      }
    }
  
    &:hover {
      -webkit-transform: scale(1.08);
          -ms-transform: scale(1.08);
              transform: scale(1.08);
    }
  
    &:active {
      opacity: 0.7;
      -webkit-transform: scale(.96);
          -ms-transform: scale(.96);
              transform: scale(.96);
    }
  }
  
  .icon-play {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: auto;
    opacity: 1;
  
    .video-loading & {
      opacity: 0;
      -webkit-transition: opacity 200ms ease-in-out;
      transition: opacity 200ms ease-in-out;
    }
  }
  
  .icon-loading  {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0;
    -webkit-animation: 0.6s rotate linear infinite both;
            animation: 0.6s rotate linear infinite both;
  
    .video-loading & {
      opacity: 1;
      -webkit-transition: opacity 200ms ease-in-out;
      transition: opacity 200ms ease-in-out;
    }
  }
}