/** Shopify CDN: Minification failed

Line 16:0 Comments in CSS use "/* ... */" instead of "//"
Line 16:4 Expected identifier but found "%"
Line 18:0 Comments in CSS use "/* ... */" instead of "//"
Line 18:4 Expected identifier but found "%"
Line 19:0 Comments in CSS use "/* ... */" instead of "//"
Line 19:6 Expected identifier but found "%"
Line 20:0 Comments in CSS use "/* ... */" instead of "//"
Line 20:4 Expected identifier but found "%"
Line 22:0 Comments in CSS use "/* ... */" instead of "//"
Line 22:4 Expected identifier but found "%"
... and 1577 more hidden warnings

**/
// {% assign font_settings = 'type_body:bolder|type_heading:bolder,lighter|type_button|type_menu|type_section:bold|type_product_card_title|type_product_price|type_product_vendor|type_footer_heading|type_highlights_bar|type_signpost' %}

// {% if settings.type_body_custom == blank and settings.type_body_enable_bold %}
//   {% assign font_settings = font_settings | append: '|type_body_bold'  %}
// {% endif %}

// {% assign font_display_value = settings.font_display %}
// {% assign font_family_override = false %}
// {% if settings.font_family_override %}
//  {% assign font_family_override = 'inherit' %}
// {% endif %}

{% assign font_settings = font_settings | split: '|' %}
{% assign font_font_display = font_display_value | default: 'auto' %}
{% assign font_font_family_override = font_family_override | default: false %}

{% assign font_scss_variables = '' %}

{% for font_setting in font_settings %}
  {% assign font_info = font_setting | split: ':' %}

  {% comment %}Get setting name{% endcomment %}
  {% assign font_setting_name = font_info[0] %}
  {% assign font_setting_name_custom = font_info[0] | append: '_custom' %}

  {% comment %}Get additional weights{% endcomment %}
  {% assign font_additional_weights = font_info[1] | split: ',' | uniq %}

  {% comment %}Create variables for use in SCSS{% endcomment %}
  {% assign font_scss_base = font_setting_name | replace: '_', '-' | prepend: '$' %}
  {% assign font_scss_reference = font_scss_base %}
  {% assign font_scss_family = font_scss_base | append: '-family' %}
  {% assign font_scss_weights = font_scss_base | append: '-weights' %}
  {% assign font_scss_named_weights = font_scss_base | append: '-named-weights' %}
  {% assign font_scss_styles = font_scss_base | append: '-styles' %}
  {% assign font_scss_named_styles = font_scss_base | append: '-named-styles' %}

  {% comment %}Add the current setting to a list of reference variables{% endcomment %}
  {% assign font_scss_variables = font_scss_variables | append: '|' | append: font_scss_reference %}

  {% assign use_custom_font = false %}
  {% if settings[font_setting_name_custom] != blank %}
    {% assign use_custom_font = true %}
  {% endif %}

  {% if use_custom_font %}
    {% comment %}
  Gets the font family name, the weights and styles, and outputs the font faces
  of the custom font setting textarea.

  Will fallback on the native font setting if a normal font setting isnt supplied

  @param font_setting_name_custom [string]

  @renders [text]
    Each font face found in the custom font setting textarea

  @returns font_named_styles [string]
  @returns font_named_styles_bolder [string]
  @returns font_named_weights [string]
  @returns font_styles [string]
  @returns font_weights [string]
  @returns use_custom_font [boolean]
{% endcomment %}
{% assign font_family = font_setting_name_custom %}

{% assign font_textarea = settings[font_setting_name_custom] %}
{% assign font_textarea_split = font_textarea | newline_to_br | split: '<br />' %}
 
{% assign font_faces = '@pxu@' | split: '@pxu@' %}
{% assign font_weight_normal = blank %}
{% assign font_weight_lighter = blank %}
{% assign font_weight_bolder = blank %}
{% assign font_styles_normal = '@pxu@' | split: '@pxu@' %}
{% assign font_styles_lighter = '@pxu@' | split: '@pxu@' %}
{% assign font_styles_bolder = '@pxu@' | split: '@pxu@' %}
{% assign font_named_styles_normal = '@pxu@' | split: '@pxu@' %}
{% assign font_named_styles_lighter = '@pxu@' | split: '@pxu@' %}
{% assign font_named_styles_bolder = '@pxu@' | split: '@pxu@' %}

{% for font in font_textarea_split %}
  {% assign font_split = font | split: ':' %}
  {% assign font_weight = 400 %}
  {% assign font_weight_name = 'initial' %}
  {% assign font_style = 'normal' %}
  {% assign font_style_name = 'initial' %}

  {% if font_split.size == 1 %}
    {% assign font_file = font_split[0] | strip %}
  {% else %}
    {% assign font_weight_style_space_to_hyphen = font_split[0] | replace: ' ', '-' %}
    {% assign font_weight_style = font_weight_style_space_to_hyphen | split: '-' %}

    {% if font_weight_style.size == 1 %}
      {% assign font_weight_style = font_weight_style[0] | strip | downcase %}

      {% if font_weight_style == 'italic' %}
        {% assign font_style_name = font_weight_style %}
      {% else %}
        {% assign font_weight_name = font_weight_style %}
      {% endif %}
    {% else %}
      {% assign font_weight_name = font_weight_style[0] | strip | downcase %}
      {% assign font_style_name = font_weight_style[1] | strip | downcase %}
    {% endif %}

    {% comment %}
      At this point we should have valid a valid weight and style variables,
      we can continue onto the new iteration if it isnt valid.
    {% endcomment %}
    {% if font_weight_name contains 'initial' != true and font_weight_name contains 'lighter' != true and font_weight_name contains 'bolder' != true %}
      {% continue %}
    {% endif %}
    {% if font_style_name != 'initial' and font_style_name != 'italic' %}
      {% continue %}
    {% endif %}

    {% if font_weight_name contains 'initial' %}
      {% if font_weight_name == 'initial' %}
        {% assign font_weight = 400 %}
      {% else %}
        {% assign font_weight_json = font_weight_name | split: 'initial' | last | plus: 0 | json %}
        {% assign font_weight_name = font_weight_name | split: font_weight_json | first %}
        {% if font_weight_json contains '"' %}
          {% assign font_weight = 400 %}
        {% else %}
          {% assign font_weight = font_weight_json %}
        {% endif %}
      {% endif %}
    {% elsif font_weight_name contains 'lighter' %}
      {% if font_weight_name == 'lighter' %}
        {% assign font_weight = 300 %}
      {% else %}
        {% assign font_weight_json = font_weight_name | split: 'lighter' | last | plus: 0 | json %}
        {% assign font_weight_name = font_weight_name | split: font_weight_json | first %}
        {% if font_weight_json contains '"' %}
          {% assign font_weight = 300 %}
        {% else %}
          {% assign font_weight = font_weight_json %}
        {% endif %}
      {% endif %}
    {% elsif font_weight_name contains 'bolder' %}
      {% if font_weight_name == 'bolder' %}
        {% assign font_weight = 700 %}
      {% else %}
        {% assign font_weight_json = font_weight_name | split: 'bolder' | last | plus: 0 | json %}
        {% assign font_weight_name = font_weight_name | split: font_weight_json | first %}
        {% if font_weight_json contains '"' %}
          {% assign font_weight = 700 %}
        {% else %}
          {% assign font_weight = font_weight_json %}
        {% endif %}
      {% endif %}
    {% endif %}

    {% if font_style_name == 'italic' %}
      {% assign font_style = 'italic' %}
    {% endif %}

    {% assign font_file = font_split[1] | strip %}
  {% endif %}

  {% unless font_weight_name == 'initial' %}
    {% unless font_additional_weights contains font_weight_name %}
      {% continue %}
    {% endunless %}
  {% endunless %}

  {% assign font_file_split = font_file | split: '.' %}

  {% comment %}
    If the assumed file component has a format associated with it,
    treat it as a file otherwise treat it as a family name and dont output a font face.
  {% endcomment %}
  {% if font_file_split.size > 1 %}
    {% assign font_file_format_index = font_file_split | size | minus: 1 %}
    {% assign font_format = font_file_split[font_file_format_index] | strip %}

    {% comment %}
      By checking if a font_file contains a forward slash we can
      determine whether we should treat the file as absolute URL
      or a file that must be sent through the file_url filter.

      This allows externally hosted files to be used as custom fonts.
    {% endcomment %}
    {% capture font_face %}
    @font-face {
      font-family: "{{ font_family }}";
      font-weight: {{ font_weight }};
      font-style: {{ font_style }};
      src:
        url("{% if font_file contains '/' %}{{ font_file }}{% else %}{{ font_file | file_url }}{% endif %}")
        format("{{ font_format }}");
      font-display:swap;
    }
    {% endcapture %}
    {% assign font_face = font_face | append: '@pxu@' | split: '@pxu@' %}
    {% assign font_faces = font_faces | concat: font_face %}
  {% else %}
    {% assign font_family = font_file %}
  {% endif %}

  {% assign font_style_concat = font_style_name | append: '@pxu@' | split: '@pxu@' %}

  {% if font_weight_name == 'initial' %}
    {% assign font_weight_normal = font_weight %}
    {% assign font_styles_normal = font_styles_normal | concat: font_style_concat %}
    {% assign font_named_styles_normal = font_named_styles_normal | concat: font_style_concat %}
  {% elsif font_weight_name == 'lighter' %}
    {% assign font_weight_lighter = font_weight %}
    {% assign font_styles_lighter = font_styles_lighter | concat: font_style_concat %}
    {% assign font_named_styles_lighter = font_named_styles_lighter | concat: font_style_concat %}
  {% elsif font_weight_name == 'bolder' %}
    {% assign font_weight_bolder = font_weight %}
    {% assign font_styles_bolder = font_styles_bolder | concat: font_style_concat %}
    {% assign font_named_styles_bolder = font_named_styles_bolder | concat: font_style_concat %}
  {% endif %}
{% endfor %}

{% comment %}
  If we dont have a normal font, well want to use the native Shopify font picker
  as we assume that a normal font exists.
{% endcomment %}
{% if font_styles_normal.size > 0 %}
  {% assign font_styles_normal = font_styles_normal | join: ',' | prepend: '(' | append: ')' %}
  {% assign font_named_styles_normal = font_named_styles_normal | join: ',' | prepend: '(' | append: ')' %}

  {% assign font_weights = font_weight_normal %}
  {% assign font_named_weights = 'initial' %}
  {% assign font_styles = font_styles_normal %}
  {% assign font_named_styles = font_named_styles_normal %}

  {% if font_styles_lighter.size > 0 %}
    {% assign font_weights = font_weights | append: '|' | append: font_weight_lighter %}
    {% assign font_named_weights = font_named_weights | append: '|' | append: 'lighter' %}
    {% assign font_styles_lighter = font_styles_lighter | join: ',' | prepend: '(' | append: ')' %}
    {% assign font_named_styles_lighter = font_named_styles_lighter | join: ',' | prepend: '(' | append: ')' %}
    {% assign font_styles = font_styles | append: '|' | append: font_styles_lighter %}
    {% assign font_named_styles = font_named_styles | append: '|' | append: font_named_styles_lighter %}
  {% endif %}

  {% if font_styles_bolder.size > 0 %}
    {% assign font_weights = font_weights | append: '|' | append: font_weight_bolder %}
    {% assign font_named_weights = font_named_weights | append: '|' | append: 'bolder' %}
    {% assign font_styles_bolder = font_styles_bolder | join: ',' | prepend: '(' | append: ')' %}
    {% assign font_named_styles_bolder = font_named_styles_bolder | join: ',' | prepend: '(' | append: ')' %}
    {% assign font_styles = font_styles | append: '|' | append: font_styles_bolder %}
    {% assign font_named_styles = font_named_styles | append: '|' | append: font_named_styles_bolder %}
  {% endif %}

  {% comment %}
    If only one weight, add an empty list to styles
    `length()` reports length of nested list if list only has 1 index
  {% endcomment %}
  {% assign font_weights_size = font_weights | split: '|' %}
  {% if font_weights_size.size == 1 %}
    {% assign font_styles = font_styles | append: '|()' %}
    {% assign font_named_styles = font_named_styles | append: '|()' %}
  {% endif %}

  {% comment %}
    Render the font faces
  {% endcomment %}
  {% for font_face in font_faces %}
    {{ font_face }}
  {% endfor %}
{% else %}
  {% assign font_family = blank %}
  {% assign font_named_styles = blank %}
  {% assign font_named_weights = blank %}
  {% assign font_styles = blank %}
  {% assign font_weights = blank %}
  {% assign use_custom_font = false %}
{% endif %}

{% comment %}
  Ensure that all local variables are reset before exiting snippet
{% endcomment %}
{% assign font_face = blank %}
{% assign font_faces = blank %}
{% assign font_file = blank %}
{% assign font_file_format_index = blank %}
{% assign font_file_split = blank %}
{% assign font_format = blank %}
{% assign font_named_styles_bolder = blank %}
{% assign font_named_styles_lighter = blank %}
{% assign font_named_styles_normal = blank %}
{% assign font_split = blank %}
{% assign font_style = blank %}
{% assign font_style_concat = blank %}
{% assign font_style_name = blank %}
{% assign font_styles_bolder = blank %}
{% assign font_styles_lighter = blank %}
{% assign font_styles_normal = blank %}
{% assign font_textarea = blank %}
{% assign font_textarea_split = blank %}
{% assign font_weight = blank %}
{% assign font_weight_bolder = blank %}
{% assign font_weight_json = blank %}
{% assign font_weight_lighter = blank %}
{% assign font_weight_name = blank %}
{% assign font_weight_normal = blank %}
{% assign font_weight_split = blank %}
{% assign font_weight_style = blank %}
{% assign font_weight_style_space_to_hyphen = blank %}
{% assign font_weights_size = blank %}

  {% endif %}

  {% unless use_custom_font %}
    {% comment %}Get the initial FontDrop, and an italic style FontDrop{% endcomment %}
{% assign font_initial = settings[font_setting_name] %}
{% assign font_initial_weight = font_initial.weight | times: 1 %}
{% assign font_italic = font_initial | font_modify: 'style', 'italic' %}
{% assign font_family = font_initial.family | append: ',' | append: font_initial.fallback_families %}
{% assign font_styles = '(' | append: font_initial.style %}
{% assign font_named_styles = '(initial' %}
{% assign font_weights = font_initial_weight %}
{% assign font_named_weights = 'initial' %}

{% unless font_font_family_override %}
  {{ font_initial | font_face: font_display: font_font_display }}
  {{ font_italic | font_face: font_display: font_font_display }}
{% endunless %}

{% comment %}Use the font face italic style if possible, otherwise use something browser friendly{% endcomment %}
{% assign font_initial_italic_style = font_italic.style | default: 'italic' %}
{% assign font_styles = font_styles | append: ', ' | append: font_initial_italic_style %}
{% assign font_named_styles = font_named_styles | append: ', italic' %}

{% assign font_styles = font_styles | append: ')' %}
{% assign font_named_styles = font_named_styles | append: ')' %}

{% comment %}Iterate over each additional weight to load font face, and weights{% endcomment %}
{% for font_adjustment in font_additional_weights %}
  {% assign font_weighted = font_initial | font_modify: 'weight', font_adjustment %}
  {% assign font_styled = font_weighted | font_modify: 'style', 'italic' %}

  {% comment %}If additional weight exists, generate font face{% endcomment %}
  {% unless font_font_family_override %}
    {{ font_weighted | font_face: font_display: font_font_display }}
  {% endunless %}

  {% comment %}Create a default value of the weight adjustment is not possible{% endcomment %}
  {% assign font_adjustment_default = '' %}
  {% case font_adjustment %}
    {% when 'lighter' %}
      {% comment %}Shopify requirement: If lighter variant is not found, use default value of 300{% endcomment %}
      {% assign font_adjustment_default = 300 %}
      {% if font_initial_weight < 300 %}
        {% assign font_adjustment_default = font_initial_weight %}
      {% endif %}
    {% when 'bolder' %}
      {% comment %}Shopify requirement: If bolder variant is not found, use default value of 700{% endcomment %}
      {% assign font_adjustment_default = 700 %}
      {% if font_initial_weight > 700 %}
        {% assign font_adjustment_default = font_initial_weight %}
      {% endif %}
    {% else %}
      {% assign font_adjustment_default = font_adjustment %}
  {% endcase %}
  {% assign font_weighted_value = font_weighted.weight | default: font_adjustment_default %}
  {% assign font_weighted_style = font_weighted.style | default: 'normal' %}

  {% assign font_weights = font_weights | append: '|' | append: font_weighted_value %}
  {% assign font_named_weights = font_named_weights | append: '|' | append: font_adjustment %}
  {% assign font_weighted_styles = font_weighted_styles | append: font_weighted_style %}
  {% assign font_weighted_named_styles = font_weighted_named_styles | append: 'initial' %}

  {% comment %}If italic exists for weight, generate font face{% endcomment %}
  {% unless font_font_family_override %}
    {{ font_styled | font_face: font_display: font_font_display }}
  {% endunless %}
  {% assign font_weighted_italic_style = font_styled.style | default: 'italic' %}
  {% assign font_weighted_styles = font_weighted_styles | append: '|' | append: font_weighted_italic_style %}
  {% assign font_weighted_named_styles = font_weighted_named_styles | append: '|italic' %}

  {% if font_weighted_styles != blank %}
    {% assign font_weighted_styles = font_weighted_styles | split: '|' | join: ', ' %}
    {% assign font_weighted_named_styles = font_weighted_named_styles | split: '|' | join: ', ' %}

    {% assign font_styles = font_styles | append: '|(' | append: font_weighted_styles | append: ')'%}
    {% assign font_named_styles = font_named_styles | append: '|(' | append: font_weighted_named_styles | append: ')'%}
  {% endif %}

  {% assign font_weighted = blank %}
  {% assign font_styled = blank %}
  {% assign font_weighted_styles = blank %}
  {% assign font_weighted_named_styles = blank %}
  {% assign font_adjustment_default = blank %}
  {% assign font_weighted_value = blank %}
  {% assign font_weighted_style = blank %}
  {% assign font_weighted_italic_style = blank %}
{% endfor %}

{% comment %}If only one weight, add an empty list to styles{% endcomment %}
{% comment %}`length()` reports length of nested list if list only has 1 index{% endcomment %}
{% assign font_weights_size = font_weights | split: '|' %}
{% if font_weights_size.size == 1 %}
  {% assign font_styles = font_styles | append: '|()' %}
  {% assign font_named_styles = font_named_styles | append: '|()' %}
{% endif %}

{% comment %}Blank used variables to prevent bleeding{% endcomment %}
{% assign font_italic = blank %}
{% assign font_initial_italic_style = blank %}

  {% endunless %}

  {% comment %}Output variables for setting to SCSS{% endcomment %}
  {{ font_scss_reference }}: {{ font_setting_name }};
  {{ font_scss_family }}: {{ font_family }};
  {{ font_scss_styles }}: ({{ font_styles | split: '|' | join: ', ' }});
  {{ font_scss_named_styles }}: ({{ font_named_styles | split: '|' | join: ', ' }});
  {{ font_scss_weights }}: ({{ font_weights | split: '|' | join: ', ' }});
  {{ font_scss_named_weights }}: ({{ font_named_weights | split: '|' | join: ', ' }});

  {% comment %}Blank used variables to prevent bleeding{% endcomment %}
  {% assign font_info = blank %}
  {% assign font_setting_name = blank %}
  {% assign font_additional_weights = blank %}
  {% assign font_scss_base = blank %}
  {% assign font_scss_reference = blank %}
  {% assign font_scss_family = blank %}
  {% assign font_scss_styles = blank %}
  {% assign font_scss_named_styles = blank %}
  {% assign font_scss_weights = blank %}
  {% assign font_scss_named_weights = blank %}
  {% assign font_family = blank %}
  {% assign font_weights = blank %}
  {% assign font_named_weights = blank %}
  {% assign font_styles = blank %}
  {% assign font_named_styles = blank %}
{% endfor %}

{% assign font_scss_variables = font_scss_variables | remove_first: '|' | split: '|' %}

{% comment %}Build SCSS friendly lists of weights{% endcomment %}
{% assign font_variable_families = '' %}
{% assign font_variable_weights = '' %}
{% assign font_variable_named_weights = '' %}
{% assign font_variable_styles = '' %}
{% assign font_variable_named_styles = '' %}

{% for variable in font_scss_variables %}
  {% assign font_variable_families = font_variable_families | append: ' ' | append: variable | append: '-family' %}
  {% assign font_variable_weights = font_variable_weights | append: ' ' | append: variable | append: '-weights' %}
  {% assign font_variable_named_weights = font_variable_named_weights | append: ' ' | append: variable | append: '-named-weights' %}
  {% assign font_variable_styles = font_variable_styles | append: ' ' | append: variable | append: '-styles' %}
  {% assign font_variable_named_styles = font_variable_named_styles | append: ' ' | append: variable | append: '-named-styles' %}
{% endfor %}

{% comment %}Create SCSS lists of variables, which are used as references in functions{% endcomment %}
$font-variables: ({{ font_scss_variables | join: ' ' }});
$font-variables-families: ({{ font_variable_families | strip }});
$font-variables-weights: ({{ font_variable_weights | strip }});
$font-variables-named-weights: ({{ font_variable_named_weights | strip }});
$font-variables-styles: ({{ font_variable_styles | strip }});
$font-variables-named-styles: ({{ font_variable_named_styles | strip }});

// Find the index of the font setting for cross referencing
@function font-setting-index($font-type) {
  @return index($font-variables, $font-type);
}

// Font
// --------
// Find the index of a font weight from its relative name
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight-index($font-type, $font-weight: initial) {
  $font-setting-index: font-setting-index($font-type);

  // Look up available weights based on index of font setting
  $named-weights: nth($font-variables-named-weights, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-index: index($named-weights, $font-weight);

  // Return index of named weight, or return initial weight
  @return if($weight-index, $weight-index, 1);
}

// Font
// --------
// Find the font family for a font setting
// - [$font-type]: Variable of font to look up
@function font-family($font-type) {
  {% if font_font_family_override %}
    @return {{ font_font_family_override }};
  {% else %}
    @return nth($font-variables-families, font-setting-index($font-type));
  {% endif %}
}

// Font
// --------
// Find a font style relative to a font weight
// - [$font-type]: Variable of font to look up
// - [$font-style]: initial/italic
// - [$font-weight]: lighter/initial/bolder
@function font-style($font-type, $font-style: initial, $font-weight: initial) {
  $style: null;
  $styles: null;

  // Find index of font setting
  $font-setting-index: font-setting-index($font-type);

  // Get styles based on index of font setting
  $font-styles: nth($font-variables-styles, $font-setting-index);
  $font-named-styles: nth($font-variables-named-styles, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-named-index: font-weight-index($font-type, $font-weight);

  // Get styles available for $font-weight
  $named-weight-style: nth($font-styles, $weight-named-index);
  $named-weight-named-style: nth($font-named-styles, $weight-named-index);

  // Find position of $font-style
  $style-named-index: index($named-weight-named-style, $font-style);

  @if $style-named-index {
    @return nth($named-weight-style, $style-named-index);
  } @else {
    // Return initial font style
    @return nth($named-weight-style, 1);
  }
}

// Font weight
// --------
// Find a font sensitive relative weight
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight($font-type, $font-weight: initial) {
  $weight: null;

  // Find index of font setting
  $font-setting-index: font-setting-index($font-type);

  // Look up available weights based on index of font setting
  $weights: nth($font-variables-weights, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-index: font-weight-index($font-type, $font-weight);

  // Return numerical weight of font
  @return nth($weights, $weight-index);
}

// Font
// --------
// Generate complete font styles for a font setting
// - [$font-type]: Variable of font to look up
// - [$font-family]: true/false
// - [$font-size]: unit/false
// - [$font-style]: initial/italic/false
// - [$font-weight]: lighter/initial/bolder/false
@mixin font(
  $font-type,
  $font-family: true,
  $font-size: false,
  $font-style: initial,
  $font-weight: initial
) {
  @if $font-family { font-family: font-family($font-type); }
  @if $font-size { font-size: $font-size; }
  @if $font-style { font-style: font-style($font-type, $font-style: $font-style, $font-weight: $font-weight ); }
  @if $font-weight { font-weight: font-weight($font-type, $font-weight: $font-weight); }
}

{% assign font_scss_variables = blank %}
{% assign font_font_display = blank %}
{% assign font_font_family_override = blank %}
{% assign font_variable_families = blank %}
{% assign font_variable_weights = blank %}
{% assign font_variable_named_weights = blank %}
{% assign font_variable_styles = blank %}
{% assign font_variable_named_styles = blank %}


// External libraries
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* 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
   ========================================================================== */

/**
 * Remove 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 {
  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. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

a:active,
a:hover {
  outline-width: 0;
}

/**
 * 1. Remove 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;
}

/**
 * Remove 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. Remove 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;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove 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 */
}

/**
 * Remove 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. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  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 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement 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 */
}

/**
 * Remove 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 rem($pxval, $rem-base: 16px) {
  @return (strip-units($pxval) / strip-units($rem-base)) * 1rem;
}

@function rem2px($remval, $px-base: 16px) {
  @return (strip-units($px-base) * strip-units($remval)) * 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
// ! Colors


// Header colors

$color-header-text: {{ settings.color_header_text }};
$color-header-text-hover: {{ settings.color_header_text | color_modify: 'alpha', 0.7 }};
$color-header-text-light: transparentize($color-header-text, 0.8);
$color-header-logo-text: {{ settings.color_header_logo_text }};
$color-header-background: color-transparent({{ settings.color_header_background }});
$color-header-cart-count-badge: {{ settings.color_header_cart_count_background}};
$color-header-cart-count-text: {{ settings.color_header_cart_count_text }};
$color-header-shadow: {{ settings.color_header_shadow }};

// Header search bar

$color-header-search-bar-background: {{ settings.color_header_search_bar_background }};
$color-header-search-bar-border: {{ settings.color_header_search_bar_border }};
$color-header-search-bar-text: {{ settings.color_header_search_bar_text }};
$color-header-search-bar-button-icon: {{ settings.color_header_search_bar_button_icon }};
$color-header-search-bar-button-background: {{ settings.color_header_search_bar_button_background }};

// Header navigation

$color-header-navigation-background: {{ settings.color_header_navigation_background }};
$color-header-navigation-main-menu-text: {{ settings.color_header_navigation_main_menu_text }};
$color-header-navigation-main-menu-text-hover: {{ settings.color_header_navigation_main_menu_text_hover }};
$color-header-navigation-secondary-menu-text: {{ settings.color_header_navigation_secondary_menu_text }};
$color-header-navigation-secondary-menu-text-hover: {{ settings.color_header_navigation_secondary_menu_text_hover }};
$color-header-navigation-dropdown-menu-background: {{ settings.color_header_navigation_dropdown_menu_background }};
$color-header-navigation-dropdown-menu-links: {{ settings.color_header_navigation_dropdown_menu_links }};
$color-header-navigation-dropdown-menu-links-hover: {{ settings.color_header_navigation_dropdown_menu_links_hover }};
$color-header-navigation-meganavigation-promo-text: {{ settings.color_header_navigation_meganavigation_promo_text }};
$color-header-navigation-meganavigation-menu-headings: {{ settings.color_header_navigation_meganavigation_menu_headings }};
$color-header-navigation-mobile-submenu-background: {{ settings.color_header_navigation_mobile_submenu_background }};
$color-header-navigation-sale-link: {{ settings.color_header_navigation_sale_link }};
$color-header-navigation-sale-link-hover: {{ settings.color_header_navigation_sale_link | color_modify: 'alpha', 0.7 }};

// Text

$color-text-headings: {{ settings.color_text_headings }};
$color-text-regular-text: {{ settings.color_text_regular_text }};
$color-text-light-text: {{ settings.color_text_light_text }};
$color-text-links: {{ settings.color_text_links }};
$color-text-links-hover: {{ settings.color_text_links_hover }};
$color-text-regular-text-encoded: "{{ settings.color_text_headings | color_to_hex | replace: '#', '' }}";

// Buttons

$color-buttons-primary-button-background: {{ settings.color_buttons_primary_button_background }};
$color-buttons-primary-button-text: {{ settings.color_buttons_primary_button_text }};
$color-buttons-primary-button-background-hover: {{ settings.color_buttons_primary_button_background_hover }};
$color-buttons-secondary-button-background: {{ settings.color_buttons_secondary_button_background }};
$color-buttons-secondary-button-border: {{ settings.color_buttons_secondary_button_border }};
$color-buttons-secondary-button-text: {{ settings.color_buttons_secondary_button_text }};
$color-buttons-secondary-button-text-hover: {{ settings.color_buttons_secondary_button_text_hover }};
$color-buttons-secondary-button-border-hover: {{ settings.color_buttons_secondary_button_border_hover }};
$color-buttons-secondary-button-background-hover: {{ settings.color_buttons_secondary_button_background_hover }};
$color-buttons-sold-out-button-text: {{ settings.color_buttons_sold_out_button_text }};
$color-buttons-sold-out-button-background: {{ settings.color_buttons_sold_out_button_background }};

$color-buttons-disabled-text: #696969;
$color-buttons-disabled-background: #ebebeb;

// Forms

$color-forms-input-placeholder-text: {{ settings.color_forms_input_placeholder_text }};
$color-forms-input-text: {{ settings.color_forms_input_text }};
$color-forms-input-background: {{ settings.color_forms_input_background }};
$color-forms-input-border: {{ settings.color_forms_input_border }};
$color-forms-selected-input: {{ settings.color_forms_selected_input }};

$color-forms-input-border-hover: morph($color-forms-input-border, 2);

// Products

$color-products-vendor-name: {{ settings.color_products_vendor_name }};
$color-products-regular-price: {{ settings.color_products_regular_price }};
$color-products-compare-at-price: {{ settings.color_products_compare_at_price }};
$color-products-sale-price: {{ settings.color_products_sale_price }};
$color-products-sale-badge-text: {{ settings.color_products_sale_badge_text }};
$color-products-sale-badge: {{ settings.color_products_sale_badge }};
$color-products-sold-out-badge-text: {{ settings.color_products_sold_out_badge_text }};
$color-products-sold-out-badge: {{ settings.color_products_sold_out_badge }};
$color-products-product-gallery-active-thumbnail: {{ settings.color_products_product_gallery_active_thumbnail }};
$color-products-product-image-backgrounds: {{ settings.color_products_product_image_backgrounds }};
$color-products-in-stock: {{ settings.color_products_in_stock }};
$color-products-low-stock: {{ settings.color_products_low_stock }};
$color-products-no-stock: {{ settings.color_products_no_stock }};

// Product cards

$color-product-cards-background: {{ settings.color_product_cards_background }};

// Product reviews

$color-product-reviews-star-rating-border: {{ settings.color_product_reviews_star_rating_border }};
$color-product-reviews-star-rating-active: {{ settings.color_product_reviews_star_rating_active }};

// Layout

$color-layout-site-background: {{ settings.color_layout_site_background }};
$color-layout-secondary-backgrounds: {{ settings.color_layout_secondary_backgrounds }};
$color-layout-dividers: {{ settings.color_layout_dividers }};

// Content containers

$color-content-containers-background: {{ settings.color_content_containers_background }};

// Popups

$color-popups-background: {{ settings.color_popups_background }};

// Site overlays

$color-site-overlays-background: rgba({{ settings.color_site_overlays_overlay }}, {{ settings.color_site_overlays_opacity | divided_by: '100.00' }});

// Footer

$color-footer-background: {{ settings.color_footer_background }};
$color-footer-headings: {{ settings.color_footer_headings }};
$color-footer-text: {{ settings.color_footer_text }};
$color-footer-text-link: {{ settings.color_footer_text_link }};
$color-footer-text-link-hover: {{ settings.color_footer_text_link_hover }};
$color-footer-menu-list-link: {{ settings.color_footer_menu_list_link }};
$color-footer-menu-list-link-hover: {{ settings.color_footer_menu_list_link_hover }};
$color-footer-additional-menu-link: {{ settings.color_footer_additional_menu_link }};
$color-footer-additional-menu-link-hover: {{ settings.color_footer_additional_menu_link_hover }};
$color-footer-copyright-text: {{ settings.color_footer_copyright_text }};

$color-additional-accent: transparentize($color-footer-text, 0.5);

// Social icons

$color-facebook: #4267b1;
$color-twitter: #1da1f2;
$color-pinterest: #cc2129;
$color-instagram: #000;
$color-tumblr: #001935;
$color-vimeo: #1eb8ea;
$color-youtube: #ff0000;
$color-linkedin: #0077b5;

// Placeholders
$color-placeholder-background: mix($color-text-regular-text, $color-layout-site-background, 8%);
$color-placeholder-fill: mix($color-text-regular-text, $color-layout-site-background, 35%);

// General
$color-black: #000;
$color-background-gray: #F5F5F5;
$color-light-gray: #D4D4D4;
$color-mild-gray: #929292;
$color-gray: #444444;
$color-medium-gray: #161616;
$color-dark-gray: #0f0f0f;
$color-white: #fff;
$color-orange: #ed6f27;
$color-border: mix($color-layout-site-background, border-mix($color-layout-site-background, $color-black, $color-white));
$color-border-soft: transparentize(border-mix($color-layout-site-background, $color-black, $color-white), 0.85);

$color-box-shadow-border: transparentize($color-border, 0.84);
$color-box-shadow-shadow: transparentize($color-border, 0.89);
$color-box-shadow-border-focused: transparentize($color-border, 0.5);
$color-box-shadow-shadow-focused: transparentize($color-border, 0.5);

$color-error: #f05d5d;
$color-success: #51a551;
$color-highlight: #fffbd9;


// ! Typography

// Fonts
$font-heading: $type-heading;
$font-body: $type-body;
{% if settings.type_body_custom == blank and settings.type_body_enable_bold %}
  $font-body-bold: $type-body-bold;
  $use-alternate-font-body-bold: true;
{% else %}
  $font-body-bold: $type-body;
  $use-alternate-font-body-bold: false;
{% endif %}
$font-button: $type-button;
$font-menu: $type-menu;
$type-menu-sizing: {{ settings.type_menu_size | divided_by: 100.0 }};
$font-section: $type-section;
$font-product-card-title: $type-product-card-title;
$font-product-price: $type-product-price;
$font-product-vendor: $type-product-vendor;
$font-footer-heading: $type-footer-heading;
$font-highlights-bar: $type-highlights-bar;
$font-signpost: $type-signpost;

// Base Size
$font-size-base: {{ settings.type_size_base }};
$font-size-base-mobile: 15px;
$font-size-base-form: 16px;

// Headings size adjustment
$font-heading-sizing: {{ settings.type_heading_size | divided_by: '100.00' }};
$section-heading-sizing: {{ settings.type_section_heading_size | divided_by: '100.00' }};
$section-subheading-sizing: {{ settings.type_section_subheading_size | divided_by: '100.00' | append: 'em' }};
$font-footer-heading-sizing: {{ settings.type_footer_heading_size | divided_by: 100.0 | append: 'em' }};

// Letter spacing
$font-heading-spacing: {{ settings.type_heading_spacing | divided_by: 100.0 | append: 'em' }};
$font-body-spacing: {{ settings.type_body_spacing | divided_by: 100.0 | append: 'em' }};
$font-menu-spacing: {{ settings.type_menu_spacing | divided_by: 100.0 | append: 'em' }};
$font-button-spacing: {{ settings.type_button_spacing | divided_by: 100.0 | append: 'em' }};
$font-button-sizing: {{ settings.type_button_sizing | divided_by: 100.0 }};
$font-section-spacing: {{ settings.type_section_spacing | divided_by: 100.0 | append: 'em' }};
$font-product-vendor-spacing: {{ settings.type_product_vendor_spacing | divided_by: 100.0 | append: 'em' }};
$font-footer-heading-spacing: {{ settings.type_footer_heading_spacing | divided_by: 100.0 | append: 'em' }};
$font-highlights-spacing: {{ settings.type_highlights_spacing | divided_by: 100.0 | append: 'em' }};

// Capitalization
$font-heading-capitalize: {{ settings.type_heading_capitalize }};
$font-menu-capitalize: {{ settings.type_menu_capitalize }};
$font-button-capitalize: {{ settings.type_button_capitalize }};
$font-section-capitalize: {{ settings.type_section_capitalize }};
$font-product-capitalize: {{ settings.type_product_capitalize }};
$font-footer-heading-capitalize: {{ settings.type_footer_heading_capitalize }};
$font-highlights-capitalize: {{ settings.type_highlights_capitalize }};

// Other
$font-body-underline-links: {{ settings.type_body_underline_links }};

// font sizes should be adjusted by this much if all caps.
$capitalize_adjustment: -1;

// Font sizes
$font-body-size: $font-size-base;
$font-body-size-small: rem($font-size-base - 1px); // 15px
$font-body-size-smaller: rem($font-size-base - 2px); // 14px
$font-body-size-smallest: rem($font-size-base - 3px); // 13px
$font-heading-large: rem($font-size-base * 2.125); // 34px
$font-heading-medium: rem($font-size-base * 1.875); // 32px
$font-h1-size: rem($font-size-base * 1.75); // 28px
$font-h2-size: rem($font-size-base * 1.625); // 26px
$font-h3-size: rem($font-size-base * 1.5); // 24px
$font-h4-size: rem($font-size-base * 1.25); // 20px
$font-h5-size: rem($font-size-base * 1.125); // 18px
$font-h6-size: rem($font-size-base); // 16px
$font-product-card-sizing: {{ settings.type_product_card_size | divided_by: 100.0 }};
$font-highlights-sizing: {{ settings.type_highlights_size | divided_by: 100.0 }};
$font-signpost-sizing: {{ settings.type_signpost_sizing | divided_by: 100.0 }};
// ! Spacing

// Vertical spaces
$space-xxx-small: rem($font-body-size * 0.25); // 4px
$space-xx-small: rem($font-body-size * 0.5); // 8px
$space-x-small: rem($font-body-size * 0.75); // 12px
$space-small: rem($font-body-size); // 16px
$space-medium: rem($font-body-size * 1.25); // 20px
$space-large: rem($font-body-size * 1.75); // 28px
$space-x-large: rem($font-body-size * 2); // 36px
$space-xx-large: rem($font-body-size * 3.125); // 50px
$space-xxx-large: rem($font-body-size * 4.25); // 68px
$space-section-heading: rem(42px);

$space-input-padding-horizontal: rem(14px);
$space-input-padding-vertical-base: rem(15px);
$space-input-padding-vertical-bottom: rem(15px);
$space-input-padding-vertical-top: rem(15px);

// Layout
$max-width: {{ settings.layout_max_width | append: 'px' }};
$page-max-width: {{ settings.page_content_width | append: 'px' }};
$gutter-outer-small: 10px;
$gutter-outer-medium: 15px;
$gutter-outer: 25px;
$gutter-content: 20px;

// ! Z-Indices

$index-header: 700;
$index-header-navmenu: $index-header + 2;
$index-banner: 800;
$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;

// ! Breakpoints

$bp-xxs: 375px;
$bp-xs: 525px;
$bp-smaller: 680px;
$bp-small: 720px;
$bp-medium: 860px;
$bp-large: 1024px;
$bp-larger: 1080px;
$bp-xl: 1280px;

{% if settings.layout_max_width == 1200 %}
  $bp-xxl: 1250px;
{% elsif settings.layout_max_width == 1300 %}
  $bp-xxl: 1350px;
{% elsif settings.layout_max_width == 1400 %}
  $bp-xxl: 1450px;
{% elsif settings.layout_max_width == 1500 %}
  $bp-xxl: 1550px;
{% elsif settings.layout_max_width == 1600 %}
  $bp-xxl: 1660px;
{% endif %}

// ! Components

// Container

$container-border-radius: {{ settings.container_border_radius | append: 'px' }};
$container-border-radius-sm: {{ settings.container_border_radius | divided_by: 2.0 | append: 'px' }};

// Button font sizes
$button-x-large-size: rem($font-size-base * 1.3125); // 21px
$button-large-size: rem($font-size-base * 1.125); // 18px
$button-medium-size: rem($font-size-base); // 16px
$button-small-size: rem($font-size-base * 0.875); // 14px
$button-border-radius: {{ settings.button_border_radius | append: 'px' }};

// Checkbox settings
$checkbox-size: (13px, 13px);
$checkbox-border: $color-forms-input-border;
$checkbox-inactive: $color-forms-input-background;
$checkbox-active: $color-text-links;

// Form input settings
$form-border-radius: {{ settings.form_border_radius | append: 'px' }};
$form-border-radius-sm: {{ settings.form_border_radius | divided_by: 2.0 | append: 'px' }};

// 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);

// Logo widths
$header-logo-image-max-width: 100px;
$header-content-offset-right: 305px; // 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: 8px;
$header-padding-vertical: 4px;
$header-padding-vertical-sticky: 10px;
$header-line-height: $font-body-size + 2px;

// Product grid settings
$grid-column-space-desktop: {{ settings.product_grid_column_space_desktop | append: 'px' }};
$grid-row-space-desktop: {{ settings.product_grid_row_space_desktop | append: 'px' }};
$grid-column-space-mobile: {{ settings.product_grid_column_space_mobile | append: 'px' }};
$grid-row-space-mobile: {{ settings.product_grid_row_space_mobile | append: 'px' }};
$sidebar-width: 185px;
$product-card-border-radius: {{ settings.product_card_border_radius | append: 'px' }};

// Product page settings
$color-slider-accent: $color-text-links;
$color-slider-dot: mix($color-text-regular-text, $color-layout-site-background, 23%);
$quantity-width: rem(115px);

// Featured blog post
$color-featured-post-background: $color-text-links;
$color-featured-post-foreground: $color-layout-site-background;

// Swatch settings
$swatches-size-product-page: {{ settings.swatches_product_page_size }}px;
$swatches-size-product-card: {{ settings.swatches_product_card_size }}px;
$swatches-size-sidebar-filter: {{ settings.swatches_sidebar_filter_size }}px;
$swatches-shape: {{ settings.swatches_shape }};

@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; }
  }
}

// Reusable button style for changing button sizes at different break points
@mixin button-size($button-size) {
  $padding: false;

  @if $button-size == small {
    @include font-size-button-small($font-button-capitalize, -2);
    $padding: (11px, 22px);
  } @else if $button-size == medium {
    @include font-size-button-medium($font-button-capitalize, -2);
    $padding: (14px, 22px);
  } @else if $button-size == large {
    @include font-size-button-large($font-button-capitalize, -2);
    $padding: (14px, 34px);
  } @else if $button-size == x-large {
    @include font-size-button-x-large($font-button-capitalize, -2);
    $padding: (14px, 42px);
  }

  @include capitalize($font-button-capitalize);
  padding: rem(nth($padding, 1)) rem(nth($padding, 2));
  letter-spacing: $font-button-spacing;
}

@mixin header-shadow {
  $color-header-shadow-alpha: {{ settings.color_header_shadow | color_extract: 'alpha' }};

  @if ($color-header-shadow-alpha != 0) {
    box-shadow: 0 1px 4px transparentize($color-header-shadow, 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;
  }
}

// ! Font mixins

@mixin capitalize($capitalize) {
  @if $capitalize == true {
    text-transform: uppercase;
  } @else {
    text-transform: none;
  }
}


@function capitalize_adjustment($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  @if $use_capitalize_adjustment {
    @return $adjustment_amount;
  } @else {
    @return 0;
  }
}

@mixin font-body-bold($font-style: initial) {
  @if $use-alternate-font-body-bold {
    @include font($font-body-bold, $font-weight: initial, $font-style: $font-style);
  } @else {
    @include font($font-body-bold, $font-weight: bolder, $font-style: $font-style);
  }
}

@mixin font-body-underline-links {
  @if $font-body-underline-links {
    text-decoration: underline;
  }
}

@mixin font-size-heading-large($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 2.125 * $heading-size-setting + $adjustment); // 34px

  @include media($bp-small) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 2.125 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-medium($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.875 * $heading-size-setting + $adjustment); // 32px

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.875 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-1($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -3, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.75 * $heading-size-setting + $adjustment); // 28px

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.75 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-2($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.625 * $heading-size-setting + $adjustment); // 26px

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.625 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-3($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: $capitalize_adjustment, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount: -2);

  font-size: rem($font-size-base * 1.5 * $heading-size-setting + $adjustment); // 24px

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.5 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-4($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.25 * $heading-size-setting + $adjustment); // 20px

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.25 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-heading-5($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.125 + $adjustment); // 18px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
  }
}

@mixin font-size-heading-6($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.125 + $adjustment); // 16px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
  }
}

@mixin font-size-section-heading($use_capitalize_adjustment: $font-heading-capitalize, $adjustment_amount: -2, $heading-size-setting: $font-heading-sizing) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.5 * $heading-size-setting + $adjustment);

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($heading-size-setting, 0.4);
    font-size: rem($font-size-base-mobile * 1.5 * $mobile-scale + $adjustment);
  }
}

@mixin font-size-highlight-banner-heading($use_capitalize_adjustment: $font-highlights-capitalize, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.125 * $font-highlights-sizing + $adjustment); // 18px

  @include media($bp-large) {
    $mobile-scale: mobile-font-scaling($font-highlights-sizing, 0.6);
    font-size: rem($font-size-base-mobile * $mobile-scale + $adjustment);
  }
}

@mixin font-size-body-larger($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.375 + $adjustment); // 22px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.375 + $adjustment);
  }
}

@mixin font-size-body-large($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.25 + $adjustment); // 20px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.25 + $adjustment);
  }
}

@mixin font-size-body-medium($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.125 + $adjustment); // 18px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.125 + $adjustment);
  }
}

@mixin font-size-body($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base + $adjustment); // 16px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile + $adjustment);
  }
}

@mixin font-size-form($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base + $adjustment); // 16px

  @include media($bp-medium) {
    font-size: rem($font-size-base-form + $adjustment);
  }
}

@mixin font-size-body-small($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 0.9375 + $adjustment); // 15px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 0.9375 + $adjustment);
  }
}

@mixin font-size-body-smaller($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 0.875 + $adjustment); // 14px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 0.875 + $adjustment);
  }
}

@mixin font-size-body-smallest($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 0.8125 + $adjustment); // 13px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 0.8125 + $adjustment);
  }
}

@mixin font-size-body-tiny($use_capitalize_adjustment: false, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 0.75 + $adjustment); // 12px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 0.75 + $adjustment);
  }
}
@mixin font-size-product-card($base-size: $font-size-base) {

  font-size: rem($base-size * $font-product-card-sizing);

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($font-product-card-sizing);
    font-size: rem($font-size-base-mobile * $mobile-scale);
  }
}

@mixin font-size-button-small($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 0.875 * $font-button-sizing + $adjustment); // 14px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 0.875 * $font-button-sizing);
  }
}

@mixin font-size-button-medium($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * $font-button-sizing + $adjustment); // 16px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * $font-button-sizing  + -1);
  }
}

@mixin font-size-button-large($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.125 * $font-button-sizing + $adjustment); // 18px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.125 * $font-button-sizing + -1);
  }
}

@mixin font-size-button-x-large($use_capitalize_adjustment: $font-button-capitalize, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * 1.3125 * $font-button-sizing + $adjustment); // 21px

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * 1.3125 * $font-button-sizing + -1);
  }
}

@mixin font-size-button-signpost() {
  font-size: rem($font-size-base * $font-signpost-sizing);

  @include media($bp-medium) {
    font-size: rem($font-size-base-mobile * $font-signpost-sizing);
  }
}

@mixin font-size-menu-large($use_capitalize_adjustment: false, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * $type-menu-sizing * 1.0625 + $adjustment);

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($type-menu-sizing, 0.5);
    font-size: rem($font-size-base-mobile * 1.0625 * $mobile-scale + -1);
  }
}

@mixin font-size-menu($use_capitalize_adjustment: $font-menu-capitalize, $adjustment_amount: $capitalize_adjustment) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * $type-menu-sizing + $adjustment);

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($type-menu-sizing, 0.5);
    font-size: rem($font-size-base-mobile * $mobile-scale + $adjustment);
  }
}

@mixin font-size-footer-heading($use_capitalize_adjustment: false, $adjustment_amount: -2) {
  $adjustment: capitalize_adjustment($use_capitalize_adjustment, $adjustment_amount);

  font-size: rem($font-size-base * $font-footer-heading-sizing * 1.125 + $adjustment);

  @include media($bp-medium) {
    $mobile-scale: mobile-font-scaling($font-footer-heading-sizing, 0.4);
    font-size: rem($font-size-base-mobile * $mobile-scale * 1.125 + $adjustment);
  }
}

@mixin font-size-input {
  font-size: rem($font-size-base); // 16px

  @include media($bp-medium) {
    font-size: rem(16px); // Force 16px regardless of base size
  }
}

@function mobile-font-scaling($selected_scale: 1, $font_adjustment: 0.6) {
  @return ($selected_scale - 1) * $font_adjustment + 1;
}

// Typography

%heading {
  @include font($font-heading);
  @include capitalize($font-heading-capitalize);
  letter-spacing: $font-heading-spacing;

  b,
  strong {
    font-weight: font-weight($font-heading, $font-weight: bolder);
  }

  em {
    font-style: font-style($font-heading, $font-style: italic);
  }

  b em,
  strong em,
  em b,
  em strong {
    font-style: font-style($font-heading, $font-weight: bolder, $font-style: italic);
  }
}

%h1 {
  @extend %heading;
  @include font-size-heading-1($font-heading-capitalize, -3);
}

%h2 {
  @extend %heading;
  @include font-size-heading-2($font-heading-capitalize, -2);
}

%h3 {
  @extend %heading;
  @include font-size-heading-3($font-heading-capitalize, -2);
}

%h4 {
  @extend %heading;
  @include font-size-heading-4($font-heading-capitalize, -2);
}

%h5 {
  @extend %heading;
  @include font-size-heading-5($font-heading-capitalize, -2);
}

%h6 {
  @extend %heading;
  @include font-size-heading-6($font-heading-capitalize, -2);
}

%menu {
  @include font($font-menu);
  @include font-size-menu($font-menu-capitalize);
  @include capitalize($font-menu-capitalize);
  letter-spacing: $font-menu-spacing;
}

%button-base {
  @include button-size(small);
  @include font($font-button);
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  border-radius: $button-border-radius;
  transition: (
    border-color 0.2s ease,
    background-color 0.2s ease,
    width 0.2s ease,
    height 0.2s ease
  );
}

%button-disable {
  &,
  &:active,
  &:focus {
    color: $color-buttons-disabled-text;
    cursor: default;
    background-color: $color-buttons-disabled-background;
    border: 1px solid $color-buttons-disabled-background;
  }
}

%button-primary {
  @extend %button-base;
  color: $color-buttons-primary-button-text;
  background-color: $color-buttons-primary-button-background;
  border: 1px solid $color-buttons-primary-button-background;

  &:not(.disabled):hover {
    background: $color-buttons-primary-button-background-hover;
    border: 1px solid $color-buttons-primary-button-background-hover;
  }

  &:active,
  &:focus {
    background: $color-buttons-primary-button-background-hover;
    border: 1px solid $color-buttons-primary-button-background-hover;
  }

  &.disabled { @extend %button-disable; }
}

%button-secondary {
  @extend %button-base;
  color: $color-buttons-secondary-button-text;
  background-color: $color-buttons-secondary-button-background;
  border: 1px solid $color-buttons-secondary-button-border;

  &:not(.disabled):hover {
    color: $color-buttons-secondary-button-text-hover;
    background: $color-buttons-secondary-button-background-hover;
    border: 1px solid $color-buttons-secondary-button-border-hover;
  }

  &:active,
  &:focus {
    background: $color-buttons-secondary-button-background-hover;
    border: 1px solid $color-buttons-secondary-button-border-hover;
  }

  &.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, $max: $bp-larger) {
    padding-right: $space-large;
    padding-left: $space-large;
  }

  @include media($min: $bp-larger) {
    padding-right: $gutter-content * 2;
    padding-left: $gutter-content * 2;
  }
}


%section-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: $space-large;
    padding-left: $space-large;
  }

  @include media($min: $bp-larger) {
    padding-right: calc(#{$gutter-content * 2});
    padding-left: calc(#{$gutter-content * 2});
  }
}

%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-regular-text;
  text-decoration: none;
  transition: color 0.1s ease;

  &:hover {
    color: $color-text-links;
  }
}

%link--default {
  color: $color-text-links;
  text-decoration: none;
  transition: color 0.1s ease;

  &:hover {
    color: $color-text-links-hover;
  }
}

%box-shadow {
  border: 1px solid $color-box-shadow-border;
  box-shadow: 0 1px 4px $color-box-shadow-shadow;
}

%inline-chevron {
  display: inline-block;
  margin-left: rem(5px);
  vertical-align: middle;

  svg {
    display: block;
    margin-top: rem(-2px);
    transform: rotate(-90deg);
  }
}

%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: $form-border-radius-sm;
    fill: currentColor;
  }
}

%icon-checkbox--active {
  color: $checkbox-active;

  svg {
    background-color: transparent;
    border: 0;
    border-radius: $form-border-radius-sm;
    fill: currentColor;
  }
}

%button-reset {
  @include font($font-body, $font-weight: bolder);
  padding: 0;
  letter-spacing: $font-body-spacing;
  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;
    animation: rotate 0.6s linear infinite;
    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;
  padding-left: 15px;
  padding-right: 15px;

  .search-icon--inactive,
  .search-icon--active {
    display: inline-block;
  }

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .search-icon--inactive {
    height: 23px;
    opacity: 1;
    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;
    animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
  }

  &.search-icon--processing {
    .search-icon--inactive {
      opacity: 0;
      transition-delay: 0s;
    }

    .search-icon--active {
      opacity: 1;
      visibility: visible;
    }
  }
}

%message--base {
  @include font($font-body, $font-weight: bolder, $font-family: false);
  @include font-size-body;
  letter-spacing: $font-body-spacing;

  a {
    color: currentColor;
  }
}

%message--error {
  @extend %message--base;
  color: $color-error;
  background-color: mix($color-error, $color-layout-site-background, 18%);
}

%message--success {
  @extend %message--base;
  color: $color-success;
  background-color: mix($color-success, $color-layout-site-background, 18%);
}

%sneak-in {

  &.animating,
  &.visible:not(.animating) {
    display: block;
  }

  &.visible:not(.animating) {
    opacity: 1;
    transform: translate(0);
  }

  &.animating-in {
    animation-delay: 0s;
    animation-duration: 0.27s;
    animation-name: sneak-in;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }

  &.animating-out {
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
  }
}

%fade-in {
  animation-delay: 0s;
  animation-duration: 0.27s;
  animation-name: fade-in;
  animation-timing-function: linear;
  animation-fill-mode: both;
  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 {
  @include font($font-body);
  @include font-size-heading-4;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: $font-body-spacing;
  color: $color-text-headings;
}

%no-results--button {
  @extend %button-primary;
  @include button-size(medium);
  margin-top: $space-medium;
}

// Buttons

.button-primary {
  @extend %button-primary;
}

.button-secondary {
  @extend %button-secondary;
}

.button-icon {
  @extend %inline-chevron;
  margin-left: 3px;

  svg {
    width: rem(14px * $font-button-sizing);
    height: rem(14px * $font-button-sizing);
    margin-top: rem(-3px);
  }
}

.button-signpost {
  @include font($font-signpost);
  @include font-size-button-signpost;
  display: block;
  padding: 0;
  margin-top: $space-medium;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;

  @include media($min: $bp-medium) {
    margin-top: $space-large;
  }

  .signpost-icon {
    @extend %inline-chevron;
    margin-left: 2px;

    svg {
      width: 0.75rem;
      height: 0.75rem;
      margin-top: 0;
    }
  }
}

#messageus_button {
  z-index:9999;
}

%form-control-base {
  @include font($font-body);
  @include font-size-form;
  z-index: 1;
  width: 100%;
  padding: $space-input-padding-vertical-top $space-input-padding-horizontal $space-input-padding-vertical-bottom;
  letter-spacing: $font-body-spacing;
  color: $color-forms-input-text;
  background-color: $color-forms-input-background;
  border: 1px solid $color-forms-input-border;
  border-radius: $form-border-radius;

  &:focus {
    border-color: $color-forms-selected-input;
    outline: 0;
  }

  &.form-field-error {
    border-color: $color-error;
  }

  .no-label & {
    @extend %form-control-no-label;
  }
}

%form-label {
  @include font-size-body;
  line-height: 1;
  color: $color-forms-input-placeholder-text;
}

%form-control-no-label {
  padding-top: $space-input-padding-vertical-base;
  padding-bottom: $space-input-padding-vertical-base;
}

%form-control-input {
  width: 100%;

  &:-ms-input-placeholder {
    color: currentColor;
    opacity: 0;
    -ms-transition: opacity 0.12s $ease-out-quad;
    transition: opacity 0.12s $ease-out-quad;
  }

  &::-ms-input-placeholder {
    color: currentColor;
    opacity: 0;
    -ms-transition: opacity 0.12s $ease-out-quad;
    transition: opacity 0.12s $ease-out-quad;
  }

  &::placeholder {
    color: currentColor;
    opacity: 0;
    transition: opacity 0.12s $ease-out-quad;
  }

  + .form-field-title::before {
    position: absolute;
    top: 50%;
    left: -4px;
    z-index: -1;
    width: calc(100% + 8px);
    height: 1px;
    background-color: $color-forms-input-background;
    content: "";
    // Scaling 10% of height is necessary to avoid sub-pixel rendering issues
    transform: scaleY(1.1);
    transition-delay: 0.12s;
  }

  .no-js &,
  &:focus,
  &.form-field-filled,
  &.form-field-select {
    &:-ms-input-placeholder {
      z-index: 3;
      opacity: 0.6;
      transition-delay: 0.12s;
    }
    &::-ms-input-placeholder {
      z-index: 3;
      opacity: 0.6;
      transition-delay: 0.12s;
    }
    &::placeholder {
      z-index: 3;
      opacity: 0.6;
      transition-delay: 0.12s;
    }

    + .form-field-title {
      top: -0.5em;
      z-index: 3;
      font-size: rem(13px);
      transition-delay: 0.12s;
      transition-property: top, font-size;

      &::before {
        position: absolute;
        top: 0.5em;
        left: -4px;
        z-index: -1;
        width: calc(100% + 8px);
        height: 1px;
        background-color: $color-forms-input-background;
        content: "";
        transition-delay: 0s;
      }
    }
  }

  &:focus {
    + .form-field-title {
      color: $color-forms-selected-input;
    }
  }

  .no-label & {
    &:-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: $space-xx-small;
    }
  }
}

.form-field {
  position: relative;
}

.form-field-input,
.form-field-select {
  @extend %form-control-base;
}

.form-field-input {
  @extend %form-control-input;
}
input[name="address[default]"]:focus ~ .form-icon--checkbox {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

.form-field-title {
  @extend %form-label;
  position: absolute;
  top: $space-input-padding-vertical-base + rem(2px);
  left: $space-input-padding-horizontal;
  z-index: 2;
  pointer-events: none;
  transition: 0.12s;
  transition-delay: 0.12s;
  transition-timing-function: $ease-out-quad;

  .form-field-textarea + & {
    top: $space-input-padding-vertical-base;
  }
}

.form-field-title--inline {
  @extend %form-label;
  display: inline-block;
  margin-left: $space-xxx-small;
  vertical-align: middle;

  .form-field-checkbox & {
    color: $color-forms-input-text;
  }
}

.form-field-select-wrapper {
  position: relative;

  .form-field-select {
    z-index: 2;
    width: 100%; // needed for Firefox
    height: 100%; // needed for IE
    padding-right: ($space-input-padding-horizontal * 2) + rem(8px);
    color: $color-forms-input-text;
    cursor: pointer;
    background-color: $color-forms-input-background;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    &::-ms-expand {
      display: none; // Removes default arrow from IE10+
    }
  }

  svg {
    position: absolute;
    top: 50%;
    right: $space-input-padding-horizontal;
    margin-top: -3px;
    pointer-events: none;
    color: $color-forms-input-text;
  }
}

.form-field-textarea {
  @extend %form-control-textarea;
}

.form-fields--qty {
  position: relative;

  .form-field {
    opacity: 0;
    transition: opacity 0.15s ease;

    .no-js &.form-field--qty-input {
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }

    .js &.form-field--qty-select {
      z-index: 1;
      opacity: 1;
      visibility: visible;
    }
  }

  .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: $space-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 {
    @include font($font-body, $font-family: false);
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: $font-body-spacing;
  }

  li:not(:first-child) {
    margin-top: $space-xx-small;
  }

  ul {
    padding-left: 0;
    list-style-type: none;
  }
}

.rte,
%rte {
  @include font-size-body;
  line-height: 1.625;

  h1 {
    @include font-size-heading-1;
  }

  h2 {
    @include font-size-heading-2;
  }

  h3 {
    @include font-size-heading-3;
  }

  h4 {
    @include font-size-heading-4;
  }

  h5 {
    @include font-size-heading-5;
  }

  h6 {
    @include font-size-heading-6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: rem($font-body-size * 2);
    margin-bottom: rem($font-body-size);
    color: $color-text-headings;
  }

  a {
    @extend %link--default;
    @include font-body-underline-links;
  }

  blockquote {
    padding-left: rem($font-body-size);
    margin-left: 0;
    border-left: 2px solid $color-buttons-primary-button-background;
  }

  dl,
  ul,
  ol,
  p,
  blockquote,
  img:not([style]) {
    margin-top: rem($font-body-size);
    margin-bottom: rem($font-body-size);
  }

  ul,
  ol {
    padding-left: $gutter-content;
  }

  dl {
    dt {
      margin-top: rem($font-body-size);
    }

    dd {
      margin-left: $gutter-content;
    }
  }

  img {
    height: auto;
    max-width: 100%;
    margin-top: rem($font-body-size);
    margin-bottom: rem($font-body-size);

    &[style*="left"] {
      margin-top: 0;
      margin-right: rem($gutter-content);
    }

    &[style*="right"] {
      margin-top: 0;
      margin-left: rem($gutter-content);
    }
  }

  @include media($max: $bp-small) {
    td {
      display: block;
      width: 100%;
    }
  }

  input {
    @extend %form-control-base, %form-control-input;
    padding-top: rem(15px);
    padding-bottom: rem(15px);
    margin-bottom: 0;

    &:-ms-input-placeholder {
      color: $color-forms-input-text;
      opacity: 0.4;
    }

    &::-ms-input-placeholder {
      color: $color-forms-input-text;
      opacity: 0.4;
    }

    &::placeholder {
      color: $color-forms-input-text;
      opacity: 0.4;
    }
  }

  button {
    @extend %button-secondary;
  }

  hr {
    width: 100%;
    height: 1px;
    margin-top: $space-large;
    margin-bottom: $space-large;
    background-color: $color-layout-dividers;
    border: 0;
  }
}

.accordion--icon {

  svg {
    display: block;
    fill: currentColor;
  }

  .icon-chevron-down-left,
  .icon-chevron-down-right {
    transition: transform 0.25s $ease-out-quad, fill 0.15s $ease-out-quad;
    transform-origin: 50% 50%;
  }

  .icon-chevron-down-left {
    transform: rotate(0);
  }

  .icon-chevron-down-right {
    transform: rotate(0);
  }

  .accordion--active & {
    .icon-chevron-down-left {
      transform: rotate(45deg);
    }

    .icon-chevron-down-right {
      transform: rotate(-45deg);
    }
  }
}

.accordion--content {
  //scss-lint:disable SpaceAfterPropertyColon
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.25s ease,
    padding-bottom 0.25s ease,
    opacity 0.15s ease;

  .accordion--active & {
    max-height: 999999px;
    opacity: 1;
  }
}

.placeholder--image {
  display: block;
  background-color: $color-placeholder-background;
  fill: $color-placeholder-fill;
}

.placeholder--content-image {
  fill: $color-placeholder-background;
}

.placeholder--content-text {
  background-color: $color-placeholder-background;
}

// General styling for Shopify Product Reviews
.spr-badge {

  .spr-badge-starrating {
    margin-right: 0;

    .spr-icon {
      @include font-size-body-tiny;
    }
  }

  .spr-badge-caption {
    @include font-size-body-tiny;
    display: inline-block;
    margin-left: $space-xxx-small;
    color: $color-text-light-text;
    white-space: nowrap;
  }
}

.spr-starratings,
.spr-starrating {
  display: inline-block;
  font-size: 0;
  letter-spacing: 0;
  vertical-align: middle;

  .spr-icon {
    top: auto;
    display: inline-block;
    width: auto;
    height: auto;
    font-size: rem(14px);
    vertical-align: middle;

    &:before {
      font-size: 100%;
    }
  }
}

.spr-icon {
  color: $color-product-reviews-star-rating-active;

  &:not(:last-child) {
    margin-right: 0.1em;
  }

  &.spr-icon-star-empty {
    color: $color-product-reviews-star-rating-border;

    &.spr-icon-star-hover,
    &.spr-icon-star-hover:hover {
      color: $color-product-reviews-star-rating-active;
    }
  }

  .spr-starrating.spr-form-input-error & {
    color: $color-error;
  }
}

$swatch-transition-timing: 0.15s;
$swatch-easing: ease;
$swatch-selected-border-width: 1px;

@function swatch-radius($size: 20px, $shape: $swatches-shape) {
  $radius: $form-border-radius;

  @if ($shape == circle) {
    $radius: 50%;
  } @else if ($size < 26px) {
    $radius: $form-border-radius-sm * 0.75;
  } @else if ($size < 46px) {
    $radius: $form-border-radius-sm;
  }

  @return $radius;
}

@mixin swatch-wrapper($size: 20px, $shape: $swatches-shape) {
  position: relative;
  height: $size;
  padding: 0;
  cursor: pointer;
  border: 0;
  box-shadow: 0 0 0 rem($swatch-selected-border-width) rgba($color-forms-selected-input, 0);
  transition: box-shadow $swatch-transition-timing $swatch-easing;
  border-radius: swatch-radius($size, $shape);
}

%swatch-wrapper-disabled {
  cursor: not-allowed;
}

%swatch-wrapper-selected {
  // Outer hover outline
  box-shadow: 0 0 0 rem($swatch-selected-border-width) $color-forms-selected-input;
}

%swatch-wrapper-disabled-selected {
  box-shadow: 0 0 0 rem($swatch-selected-border-width) rgba($color-forms-selected-input, 0.5);
}

@mixin swatch($size: 20px) {
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  transition: transform $swatch-transition-timing $swatch-easing;
  border-radius: swatch-radius($size, $swatches-shape);
}

%swatch-disabled {
  position: relative;

  // Disabled swatch strikethrough
  &::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 150%;
    height: 2.5px;
    background: rgba(0, 0, 0, 0.5);
    content: '';
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

@mixin swatch-selected($swatch-size: 20px) {
  $swatch-default-scale: 0.85;

  @if ($swatch-size < 26px) {
    $swatch-default-scale: 0.8;
  }

  // IE11
  transform: scale($swatch-default-scale);

  // Variable based transform for nicer variant image swatches on modern browsers
  transform: scale(var(--swatch-inner-transform-x, $swatch-default-scale), $swatch-default-scale);
}

%swatch-inner {
  height: 100%;
  pointer-events: none;
  background-position: center;
  background-size: cover;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: inherit;
  background-origin: border-box;
}

%swatch-inner-disabled {
  opacity: 0.6;
}

%swatch-tooltip {
  @include font-body-bold;
  position: absolute;
  bottom: 0;
  left: 50%; //IE11
  left: calc(50% + var(--swatch-tooltip-offset, 0px)); // Modern browsers
  z-index: 1;
  padding: 6px 9px;
  letter-spacing: $font-body-spacing;
  color: $color-text-regular-text;
  white-space: nowrap;
  pointer-events: none;
  background: $color-content-containers-background;
  content: attr(data-swatch-tooltip);
  transform: translateX(-50%) translateY(100%) translateY(7px);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  animation: slide-swatch-tooltip 0.2s;

  @include media($min: $bp-small) {
    @include font-size-body-smaller;
  }
}



// Header
$local-header-icon-padding: 10px;
$local-header-icon-width: 44px;
$local-header-icon-height: $header-content-height;
$local-header-main-space: (50px, 125px); // Space left, right between logo/search and icons

.site-header-wrapper {
  @include header-shadow;
  width: 100%;
  background-color: $color-header-background;
  transition: top 0.15s $ease-bubble;
  z-index: $index-header;

  &.site-header--sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }

  .search-takeover-active & {
    display: none;
  }
}

.site-header-main {
  @extend %layout-container;
  z-index: $index-header + 1;

  &.site-header--full-width  {
    width: 100%;
    max-width: 100%;
  }
}

.site-header-logo {
  display: table;
  height: auto;
}

.site-logo {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  color: currentColor;
  text-decoration: none;
}

.desktop-logo-text,
.mobile-logo-text {
  @include font($font-body, $font-weight: bolder);
  @include font-size-heading-5;
  display: block;
  letter-spacing: $font-body-spacing;
  color: $color-header-logo-text;
  text-decoration: none;
  text-transform: none;

  &:not(.visually-hidden) {
    width: 100%;
  }
}

@include media($max: $bp-large) {
  .desktop-logo-image,
  .desktop-logo-text {
    display: none;
  }
}

@include media($min: $bp-large) {
  .mobile-logo-image,
  .mobile-logo-text {
    display: none;
  }
}

.site-header-button {
  z-index: $index-header-internal-icons;
  display: inline-block;
  height: $local-header-icon-height;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.site-header-icon {
  display: inline-block;
  position: relative;
  padding: $local-header-icon-padding;
  color: $color-header-text;
  outline: none;

  &:hover {
    color: $color-header-text-hover;

    .toggle-icon--bar {
      background-color: $color-header-text-hover;
    }
  }

  svg {
    display: block;
  }
}

.site-header-menu-button {
  left: rem($gutter-outer-small - $local-header-icon-padding);

  @include media($min: $bp-small) {
    left: $space-large - rem($local-header-icon-padding);
  }

  @include media($min: $bp-larger) {
    left: rem($gutter-content * 2 - $local-header-icon-padding);
  }
}

.site-header-menu-icon {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: transparent;
  color: $color-header-text;

  &:focus {
    outline: none;
  }

  path {
    transition: transform 0.2s, opacity 0.2s;
    transition-timing-function: $ease-bubble;

    &:nth-of-type(1) {
      transform-origin: 2.5px 3.5px;
    }

    &:nth-of-type(3) {
      transform-origin: 1px 14px;
    }
  }

  .nav-toggle-ie-11 {
    display: none;
  }

  .site-header-menu-button.active & {
    // animate nav icon between states
    path:nth-of-type(1) {
      transform: rotate(45deg);
    }

    path:nth-of-type(2) {
      opacity: 0;
    }

    path:nth-of-type(3) {
      transform: rotate(-45deg);
    }

    // Just flip to another svg if on IE 11
    @media all and (-ms-high-contrast: none) {
      .icon-menu {
        display: none;
      }

      .nav-toggle-ie-11 {
        display: inline-block;

        .icon-search-close {
          display: inline-block;

          path {
            opacity: 1;
            transform: none;
            transform-origin: 0;
          }
        }
      }
    }
  }
}

.site-header-cart-button {
  right: $gutter-outer-small - $local-header-icon-padding;
  transition: right 0.15s $ease-bubble, top 0.15s $ease-bubble;

  @include media($min: $bp-small) {
    right: $space-large;
  }

  @include media($min: $bp-larger) {
    right: calc(#{$gutter-content * 2});
  }

  &.count-hidden {
    right: calc(#{$gutter-outer-small} - 10px);

    @include media($min: $bp-small) {
      right: calc(#{$space-large} - 10px);
    }

    @include media($min: $bp-larger) {
      right: calc(#{$gutter-content * 2} - 10px);
    }
  }

  svg {
    transition: margin 0.15s;
  }
}

.site-header-cart--count {
  position: absolute;
  top: 2px;
  right: 2px;
  display: block;
  opacity: 0;
  transition: opacity 0.15s linear;

  &.visible {
    opacity: 1;

    + svg {
      margin-right: 5px;
    }
  }

  &:after {
    display: block;
    height: 20px;
    min-width: 20px;
    padding: 3px;
    font-size: rem(11px);
    line-height: 12px;
    color: $color-header-cart-count-text;
    text-align: center;
    text-decoration: none;
    background-color: $color-header-cart-count-badge;
    border: 1px solid $color-header-background;
    border-radius: 50%;
    content: attr(data-header-cart-count);
  }
}

.announcement-bar--link,
.small-promo--link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.announcement-bar-text,
.announcement-bar-text-mobile {
  a {
    position: relative;
    z-index: 1;
  }
}

.site-navigation-wrapper {
  @extend %clearfix;
  display: none;
  position: relative;
  z-index: $index-header;
  width: 100%;
  background-color: $color-header-navigation-background;
  transition: margin-top 0.2s $ease-bubble;

  .site-header-nav--open & {
    @include media($min: $bp-large) {
      display: block;
    }
  }
}

.site-navigation {
  @extend %layout-container;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  a {
    @extend %menu;
    position: relative;
    display: inline-block;
    padding: $site-nav-link-space-vertical $site-nav-link-space-horizontal;
    line-height: $header-line-height;
    color: $color-header-navigation-main-menu-text;
    text-decoration: none;

    &:hover {
      color: $color-header-navigation-main-menu-text-hover;
    }

    &:focus {
      outline: solid rgba($color-header-navigation-main-menu-text, 0.5);
      outline-offset: -5px;
    }

    &.navmenu-item-active:focus {
      outline: 0;
    }
  }

  .navmenu-item-highlighted {
    > a {
      color: $color-header-navigation-sale-link;

      &:hover {
        color: $color-header-navigation-sale-link-hover;
      }
    }
  }

  .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: -3px;
      transform: rotate(90deg);
    }

    svg {
      display: block;
      width: 8px;
      height: 6px;
      transform: rotate(-90deg);
      fill: currentColor;
    }

    .icon-chevron-down-left,
    .icon-chevron-down-right {
      transition: transform 0.4s $ease-out-quad, fill 0.4s $ease-out-quad;
      transform-origin: 50% 50%;
    }
  }

  .navmenu {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .navmenu-depth-1 {
    display: inline-block;
    height: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    margin-left: -1 * $site-nav-link-space-horizontal;

    > li {
      display: inline-block;
      padding-top: $site-nav-item-space;
      padding-bottom: $site-nav-item-space;
      vertical-align: top;

      > a {
        @extend %menu;
      }
    }
  }

  .navmenu-submenu {
    position: absolute;
    top: 100%;
    z-index: 100;
    display: none;
    width: 240px;
    padding-top: $site-subnav-space;
    padding-bottom: $site-subnav-space;
    background-color: $color-header-navigation-dropdown-menu-background;
    box-shadow: 0 3px 4px transparentize($color-border, 0.75);

    &.navmenu-submenu-inline-children {
      overflow-x: hidden;
      overflow-y: auto;

      .navmenu-icon svg {
        transform: rotate(0deg);
      }

      .navmenu-depth-3 {
        position: relative;
        top: 0;
        left: 0;
        padding-top: 0;
        margin-left: 0;
        box-shadow: none;
      }
    }
  }

  .navmenu-depth-2 {
    margin-left: -1 * rem(10px);

    .navmenu-link {
      @include font($font-body);
      @include font-size-body;
      z-index: 2;
      display: block;
      padding: rem($site-nav-link-space) rem($gutter-outer + $site-nav-link-space) rem($site-nav-link-space) rem($gutter-outer);
      letter-spacing: $font-body-spacing;
      color: $color-header-navigation-dropdown-menu-links;
      text-decoration: none;
      text-transform: none;
      transition: color 0.1s ease;

      &:hover,
      &.navmenu-active {
        color: $color-header-navigation-dropdown-menu-links-hover;
      }

      &:focus {
        outline: solid rgba($color-header-navigation-dropdown-menu-links, 0.5);
        outline-offset: -3px;
      }
    }

    // Third level drop downs don't animate
    .navmenu-submenu {
      &,
      & > li {
        animation-name: none;
        transition: none;
      }
    }
  }

  .navmenu-depth-3 {
    top: -1 * $site-subnav-space;
    left: 100%;
    min-height: 100%;
    margin-left: -1px;

    > li a {
      @include font-size-body;
      letter-spacing: 0;
      text-transform: none;
    }
  }

  .navmenu-link-parent,
  .navmenu-item-parent {
    position: relative;
  }

  .navmenu-meganav-item-parent {
    position: relative;
  }

  .navmenu-meganav-item-parent > a {
    position: inherit;
  }

  .navmenu-meganav-item,
  .navmenu-meganav--image-text {
    > a:focus {
      outline: solid rgba($color-text-links, 0.5);
      outline-offset: -2px;
    }
  }

  .site-header--full-width & {
    width: 100%;
    max-width: 100%;
  }
}

@keyframes menu-animation {
  0% {
    z-index: 90000;
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  100% {
    z-index: 90000;
    opacity: 1;
  }
}

.navmenu-submenu {
  .open & {
    opacity: 1;

    & .navmenu-meganav-items {
      display: flex;
    }

    &.animating-in {
      animation: menu-animation 0.15s ease;
      animation-fill-mode: forwards;
    }

    &.animating-out {
      animation: menu-animation 0.15s ease;
      animation-direction: reverse;
      animation-fill-mode: forwards;
    }
  }
}

.navmenu-item-parent {
  .meganav-editing-block,
  &.open > .navmenu-submenu {
    z-index: 1;
    display: block;
  }

  .navmenu-submenu.meganav-editing-block {
    animation: none;
  }

  &.alternate-drop .navmenu {
    left: calc(-100% + 1px);
  }
}

.site-header-actions {
  @extend %menu;
  flex: 1 0 auto;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  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;
    max-width: $header-content-offset-right;
    margin-top: $site-nav-item-space;
    text-align: right;

    a {
      color: $color-header-navigation-secondary-menu-text;
      opacity: 0.8;

      &:hover {
        color: $color-header-navigation-secondary-menu-text-hover;
      }
    }
  }

  .site-mobile-nav & {
    @include font($font-body, $font-weight: lighter);
    display: flex;
    align-items: center;
    align-self: start;
    flex-direction: row;
    height: $header-content-height - 14px;
    margin-top: 12px;
    margin-bottom: 12px;
    margin-left: 24px;
    border-right: 1px solid $color-header-text-light;

    li {
      line-height: $header-content-height;
      opacity: 0.8;
      &:not(.site-header-currency-converter) {
        svg {
          width: 22px;
          height: 22px;
          color: $color-header-text;
          vertical-align: middle;
        }
      }
    }

    a {
      padding-right: $site-nav-link-space-horizontal - 7px;
      padding-left: $site-nav-link-space-horizontal - 7px;
      color: $color-header-navigation-dropdown-menu-links;
    }

    .site-header-account-link {
      margin-left: -6px;
      color: $color-header-navigation-main-menu-text;

      a {
        vertical-align: middle;
        color: $color-white;
      }

      svg {
        margin-right: 4px;
      }
    }
  }

  .site-header--traditional & {
    .site-header-account-link {
      svg {
        width: 17px;
        height: 17px;
        vertical-align: middle;
        transform: translateY(-2px);
      }

      a {
        padding-left: 3px;
      }
    }
  }

  .site-header-account-link:last-child {
    margin-right: -1 * $site-nav-link-space;
  }
}

.currency-converter-wrapper {
  color: $color-header-navigation-dropdown-menu-links;

  .site-navigation-wrapper & {
    padding: rem(4px) 0;
    margin-right: -1 * rem(6px);
    color: $color-header-navigation-secondary-menu-text;
    opacity: 0.8;

    &:hover {
      color: $color-header-navigation-secondary-menu-text-hover;
    }
  }

  .form-field-select {
    @extend %menu;
    padding-top: $site-nav-item-space;
    padding-right: rem(20px);
    padding-bottom: $site-nav-item-space;
    color: currentColor;
    background-color: transparent;
    border: 0;
    box-shadow: none;

    &:focus {
      outline: solid rgba($color-header-navigation-dropdown-menu-links, 0.5);
    }

    // Some browsers extend <select> color to options
    // Style as consistently legible <option>
    option {
      @include font-size-body-small($font-menu-capitalize);
      font-weight: font-weight($font-menu);
      color: $color-black;
      background-color: $color-white;
    }
  }

  svg {
    right: $site-nav-link-space-horizontal - 8px;
    color: currentColor;
  }
}

// {% if settings.header_layout == 'traditional' %}

.site-header-main {
  @extend %layout-container, %clearfix;
  position: relative;
  padding-top: $header-padding-vertical-mobile;
  padding-bottom: $header-padding-vertical-mobile;
  background-color: $color-header-background;
  transition: padding 0.15s $ease-bubble;

  @include media($min: $bp-large) {
    padding-top: $header-padding-vertical;
    padding-bottom: $header-padding-vertical;
  }

  &::before {
    // This masks the menu drawer as it animates open/closed.
    // Otherwise it's visible through the .site-header-main margins
    // on wide screens.
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    display: block;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    background-color: $color-header-background;
    content: "";
    transform: translate(-50%);
  }
}

.site-header-main-content {
  margin-right: auto;
  margin-left: auto;
  font-size: 0;
  letter-spacing: 0;
  
  @include media($min: $bp-large) {
    display: flex;
    align-items: center;
    margin-right: nth($local-header-main-space, 2);
    margin-left: 0;
  }
}

.site-header-button {
  position: absolute;
  top: $header-padding-vertical-mobile;
  bottom: auto;

  @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-menu-button {
  @include media($min: $bp-large) {
    left: -50px;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s $ease-bubble, left 0.15s $ease-bubble;
  }
}

.site-header-logo {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;

  @include media($min: $bp-xxs, $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;
  }
}

.desktop-logo-image,
.mobile-logo-image {
  margin-right: auto;
  margin-left: auto;

  @include media($min: $bp-large) {
    margin-left: 0;
  }
}

.traditional-header--scrolled {
  transform: translateY(-1px);

  @include media($min: $bp-large) {
    .site-header-main {
      padding-top: $header-padding-vertical-sticky;
      padding-bottom: $header-padding-vertical-sticky;
    }

    .site-header-main-content {
      margin-left: nth($local-header-main-space, 1);
    }

    .site-header-button {
      // Top and bottom padding are equal
      margin-top: -1 * $local-header-icon-height / 2;
    }

    .site-header-menu-button {
      visibility: visible;
      left: $space-large - rem($local-header-icon-padding);
      opacity: 1;
    }
  }

  @include media($min: $bp-larger) {
    .site-header-menu-button {
      left: rem($gutter-content * 2 - $local-header-icon-padding);
    }
  }
}

.intersection-target {
  position: absolute;
  top: 30vh;
  pointer-events: none;
}

.small-promo-enabled {
  @include media($min: $bp-large) {
    margin-right: $space-xxx-large;
  }
}

.small-promo {
  @include font-size-body-smaller;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  order: 1;
  text-decoration: none;
  transform: translate3d(0, 0, 0) scale(1);
  color: $color-header-logo-text;

  @include media($max: $bp-large) {
    padding: {
      top: $space-small;
      right: $gutter-outer-small;
      bottom: $space-small - rem($header-padding-vertical-mobile);
      left: $gutter-outer-small;
    }
  }

  @include media($min: $bp-large) {
    align-items: center;
    justify-content: flex-start;
    margin-left: rem(35px);
  }
}

.small-promo-icon {
  flex-shrink: 0;
  height: rem(16px);
  margin-right: $gutter-outer-small;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: $color-header-logo-text;

  svg {
    width: 100%;
    height: 100%;
    max-width: rem(60px);
    max-height: rem(60px);
  }

  img {
    height: 100%;
  }

  @include media($min: $bp-large) {
    width: auto;
    height: rem(28px);
  }
}

.small-promo-icon--svg {
  @include media($max: $bp-large) {
    width: rem(16px);
  }
}

.small-promo-icon--custom {
  @include media($max: $bp-large) {
    width: auto;
  }
}

.small-promo-text-desktop,
.small-promo-text-mobile {
  @include media($max: $bp-large) {
    @include font-size-body-smaller;
    display: inline;

    p {
      display: inline;
    }
  }
}

.small-promo-heading {
  @extend %h5;
  @include font($font-heading);
  display: inline;
  margin: 0;

  @include media($max: $bp-large) {
    @include font-size-body-smaller($font-heading-capitalize, -2);
  }

  @include media($min: $bp-large) {
    @include font-size-body-small($font-heading-capitalize, -2);
    display: block;
  }
}

.small-promo-content {
  line-height: 1.3;
  text-align: center;

  @include media($min: $bp-large) {
    max-width: 200px;
    text-align: left;
  }

  p {
    margin: 0;
  }

  a {
    position: relative;
    z-index: 1;
    font-size: inherit;
    color: inherit;
  }
}

.small-promo-text-desktop {
  display: inline;

  @include media($min: $bp-large) {
    display: block;
  }

  .small-promo-text-mobile + & {
    @include media($max: $bp-large) {
      display: none;
    }
  }
}

.small-promo-text-mobile {
  @include media($min: $bp-large) {
    display: none;
  }
}

// {% endif %}

// {% if settings.header_layout == 'minimal' %}
@keyframes show-search {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.site-header-main {
  position: relative;
  min-height: $header-content-height + $header-padding-vertical-mobile;
  padding-top: $header-padding-vertical-mobile / 2;
  padding-bottom: $header-padding-vertical-mobile / 2;
  background-color: $color-header-background;

  @include media($min: $bp-large) {
    min-height: $header-content-height + $header-padding-vertical;
    padding-top: $header-padding-vertical / 2;
    padding-bottom: $header-padding-vertical / 2;
  }

  &::before {
    // This masks the menu drawer as it animates open/closed.
    // Otherwise it's visible through the .site-header-main margins
    // on wide screens.
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    display: block;
    width: 100vw;
    height: 100%;
    pointer-events: none;
    background-color: $color-header-background;
    content: "";
    transform: translate(-50%);
  }
}

.site-header-main-content {
  display: flex;
  align-items: center;
  margin-right: 0;
  min-height: $header-content-height;
}

.site-header-logo {
  display: table;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: $local-header-icon-width - $local-header-icon-padding * 2;
  padding-left: $local-header-icon-width - $local-header-icon-padding * 2;

  @include media($min: $bp-small) {
    padding-right: 0;
    padding-left: 0;
  }
}

@include media($max: $bp-medium) {
  .desktop-logo-image,
  .desktop-logo-text {
    display: none;
  }
}

@include media($min: $bp-medium) {
  .mobile-logo-image,
  .mobile-logo-text {
    display: none;
  }

  .desktop-logo-image,
  .desktop-logo-text {
    display: block;
  }
}

.site-header-menu-button,
.site-header-search-button {
  position: absolute;
  top: 50%;
  margin-top: (-1 * $header-content-height / 2);
}

.site-header-search-button {
  left: $local-header-icon-width;
  margin-top: (-1 * $header-content-height / 2) + 2px;
  padding: 0;

  @include media($min: $bp-small) {
    left: $space-large + rem($local-header-icon-width - $local-header-icon-padding);
  }

  @include media($min: $bp-larger) {
    left: rem($gutter-content * 2 + $local-header-icon-width - $local-header-icon-padding);
  }
}

.site-header-search-icon {
  .close-icon {
    display: none;

    svg {
      height: 18px;
      width: 18px;
    }
  }
}

.live-search {
  display: none;

  &.animating-in,
  &.animating-out {
    animation-duration: 200ms;
    animation-name: show-search;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }

  &.animating-out {
    animation-direction: reverse;
  }

  .site-header--minimal & {
    @include media($min: $bp-medium) {
      width: 100%;
      margin-top: 0;
      margin-right: rem(180px);
      margin-left: rem(180px);
    }

    @include media($min: $bp-large) {
      max-width: rem(600px);
      margin-right: auto;
      margin-left: auto;
    }
  }
}

.site-header-main--logo-center {
  .live-search {
    display: none;
  }
}

.site-header-main--logo-left {
  .site-header-logo {
    margin-right: $local-header-icon-width;
    margin-left: $local-header-icon-width - ($local-header-icon-padding / 2);
    padding-left: 0;
    text-align: left;

    @include media($min: $bp-small) {
      flex: 0 0 auto;
      margin-left: $local-header-icon-width + ($local-header-icon-padding / 2);
      margin-right: $local-header-icon-padding * 2.5;
    }
  }

  .live-search {
    display: none;

    @include media($min: $bp-small) {
      display: flex;
      flex: 1 1 0;
      width: 100%;
      max-width: 100%;
      margin-top: 0;
      margin-left: 0;
      margin-right: rem(180px);
    }
  }

  .site-header-main-actions .site-header-button {
    position: relative;
  }

  .site-header-search-button {
    left: auto;
    right: $local-header-icon-width;
    margin-top: (-1 * $header-content-height / 2);

    @include media($min: $bp-small) {
      display: none;
    }
  }
}

.site-header-search--open {
  .live-search {
    display: flex;
  }

  .site-header-logo {
    display: none;
  }

  .site-header-search-icon {
    .search-icon {
      display: none;
    }

    .close-icon {
      display: inline-block;
    }
  }

  .live-search-disabled {
    @include media($max: $bp-medium) {
      .live-search {
        width: 100%;
        margin-top: 0;
        margin-right: rem(180px);
        margin-left: rem(180px);
      }
    }

    @include media($max: $bp-small) {
      .site-header-menu-button {
        display: none;
      }

      .site-header-search-button {
        left: 0;
        margin-top: -22px;
        padding-left: 2px;
      }

      .live-search {
        margin-right: 0;
        margin-left: $local-header-icon-width - $local-header-icon-padding;
      }

      .site-header-main-actions {
        display: none;
      }
    }

    &.site-header-main--logo-left {
      .site-header-search-button {
        right: auto;
        left: 0;
        margin-top: -22px;
        padding-left: 2px;
      }

      .live-search {
        margin-left: $local-header-icon-width - $local-header-icon-padding;
      }
    }
  }
}

.site-header-main-actions {
  display: table;
  position: absolute;
  top: 50%;
  right: 0;
  height: 100%;
  transform: translateY(-50%);

  .currency-converter-wrapper,
  .site-header-account-button {
    display: none;
  }

  .site-header-button {
    top: 0;
    margin-top: 0;
  }

  .site-header-cart-button {
    position: relative;
    display: table-cell;
    vertical-align: middle;
  }

  @include media($min: $bp-small) {
    right: $gutter-outer;

    .currency-converter-wrapper {
      display: table-cell;
      position: relative;
      padding-right: 5px;
      vertical-align: middle;
      color: $color-header-text;

      &:hover {
        color: $color-header-text-hover;
      }
    }

    .site-header-button {
      display: table-cell;
      position: relative;
      vertical-align: middle;
    }

    .site-header-cart-button {
      right: 0;
    }
  }
}

.site-header-account-button {
  display: none;

  @include media($min: $bp-small) {
    display: inline-block;
  }
}

// {% endif %}

// {% if settings.header_layout == 'basic' %}

.site-header-main {
  display: flex;
  min-height: rem(72px);
  padding-top: $space-xx-small;
  padding-bottom: $space-xx-small;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  align-items: center;
  box-sizing: border-box;

  &.site-header-stacked {
    @include media($min: $bp-large) {
      padding-top: $space-medium;
    }
  }

  .site-header-accounts-enabled &,
  .site-header-currency-enabled & {
    &.site-header-stacked {
      @include media($min: $bp-large) {
        align-items: baseline;
      }
    }
  }

  .site-header--desktop-logo-center & {
    @include media($min: $bp-small, $max: $bp-larger) {
      padding-right: $space-large;
    }

    @include media($min: $bp-large) {
      padding-right: rem($gutter-content * 2);
    }
  }
}

.site-header-menu-button {
  display: flex;
  padding: 0;
  margin-left: -$gutter-outer-small;

  @include media($min: $bp-large) {
    display: none;
  }

  .site-header--mobile-logo-center & {
    @include media($max: $bp-large) {
      position: absolute;
      margin-left: 0;
    }
  }

  .site-header-menu-icon {
    // correcting the vertical alignment of this button
    padding-top: rem(11px);
    padding-bottom: rem(12px);
  }
}

.site-logo {
  display: flex;
  justify-content: center;
  margin-left: $gutter-outer-small / 2;

  @include media($min: $bp-large) {
    position: absolute;
    height: auto;
    margin-left: 0;
    padding-right: $gutter-outer;
  }

  .site-logo-link {
    display: flex;
    text-decoration: none;
  }

  .site-header--desktop-logo-center & {
    @include media($min: $bp-large) {
      position: static;
      width: 100%;
      margin-left: 0;
      padding: 0;
      text-align: center;
    }

    .desktop-logo-text {
      @include media($min: $bp-large) {
        display: inline-block;
        width: auto;
      }
    }
  }

  .site-header--mobile-logo-center & {
    @include media($max: $bp-large) {
      display: flex;
      justify-content: center;
      flex: 1 0 auto;
      margin-left: 0;
      text-align: center;
    }
  }

  .site-header-stacked & {
    @include media($min: $bp-large) {
      position: static;
      padding-top: $space-xxx-small;
    }
  }

  .mobile-logo-image {
    @include media($max: $bp-small) {
      max-width: rem(200px);
    }

    @include media($min: $bp-small, $max: $bp-large) {
      max-width: rem(400px);
    }
  }
}

.site-navigation {
  display: none;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0;
  margin: 0 auto; // this will center things if wrapping, needs to be removed if on next line
  background: transparent;
  transition: opacity 0.4s;

  .site-header-loading & {
    position: absolute;
    opacity: 0;
  }

  @include media($min: $bp-large) {
    display: block;
  }

  .site-header--full-width & {
    width: auto;
  }

  .site-header-stacked & {
    width: 100%;
    margin: 0 0 0 -#{$site-nav-link-space-horizontal};
    padding-top: $space-xx-small;
  }
}

.site-header--desktop-logo-center {
  .site-navigation {
    position: absolute;
    margin-left: -$site-nav-link-space-horizontal;
  }

  .site-header-stacked .site-navigation {
    position: static;
    margin-left: 0;
    text-align: center;
  }
}

.site-header--basic-navigation-below {
  .site-navigation-wrapper {
    background: $color-header-navigation-background;

    .site-navigation {
      @extend %layout-container;
      position: static;
      margin-left: auto;
      text-align: center;
    }
  }
}

.site-navigation > .navmenu {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  margin: 0;
  text-align: left;
  list-style-type: none;


  > .navmenu-item > .navmenu-submenu {
    margin-top: $space-xx-small;

    .site-header--basic-navigation-below & {
      margin-top: 0;
    }
  }
}

.site-navigation > .navmenu > .navmenu-item {
  display: inline-block;
  margin: 0;

  &:first-child {
    padding-left: 0;
  }
}

.site-header--basic {
  .site-header-search {
    display: block;
  }

  .site-header-search-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-right: $gutter-outer-small + $local-header-icon-width;
    padding-left: $gutter-outer-small;
    opacity: 1;
    z-index: $index-header-search;
    background-color: $color-header-background;
    transition: opacity 0.2s;

    @include media($min: $bp-small) {
      padding-right: ($gutter-outer-small * 2) + $local-header-icon-width;
      padding-left: $gutter-outer-small;
    }
  }

  .live-search {
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin-top: 0;

    @include media($min: $bp-small) {
      position: absolute;
      width: rem(600px);
    }

    &.live-search--takeover {
      transform: none;
    }
  }

  .live-search--hidden {
    .site-header-search {
      visibility: hidden;
    }

    .site-header-search-wrapper {
      opacity: 0;
    }

    .live-search {
      display: none;
    }
  }
}

.site-header-search-close {
  position: absolute;
  top: 50%;
  right: $gutter-outer-small;
  color: $color-header-text;
  transform: translateY(-50%);

  &:hover {
    color: $color-header-text-hover;
  }

  @include media($min: $bp-small) {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin-left: rem(300px) + $space-large;
  }
}

.site-header-main-actions {
  position: absolute;
  display: flex;
  right: 0;
  padding-left: $space-medium;
  justify-content: center;
  transition: opacity 0.4s;

  .site-header-loading & {
    opacity: 0;
  }

  @include media($min: $bp-small) {
    margin-right: $space-small;
  }

  @include media($min: $bp-large) {
    margin-right: $space-large;
  }
}

.site-header-main-actions > * {
  display: flex;
  justify-content: center;
}

.site-header-main-actions {
  .currency-converter-wrapper,
  .currency-divider {
    display: none;
    color: $color-header-text;

    .site-header-currency-enabled & {
      @include media($min: $bp-large) {
        display: flex;
        justify-content: center;
        flex-direction: column;
      }
    }
  }

  .currency-converter-wrapper:hover {
    color: $color-header-text-hover;
  }
}

.currency-divider:after {
  content: " ";
  display: block;
  height: 1.7rem;
  margin-right: 0.5rem;
  padding-right: 0.75rem;
  border-right: 1px solid $color-header-text;
  opacity: 0.2;
}

.site-header-account-button {
  display: none;

  @include media($min: $bp-large) {
    display: inline-block;
  }
}

.site-header-search-button {
  padding: 0 3px;

  .site-header--mobile-logo-center & {
    @include media($max: $bp-small) {
      margin-left: rem(($local-header-icon-width * 2) + ($local-header-icon-padding / 2) + $gutter-outer-small);
    }

    @include media($min: $bp-small, $max: $bp-large) {
      margin-left: rem(($local-header-icon-width * 2) + ($local-header-icon-padding * 2)) + $space-large;
    }

    @include media($max: $bp-large) {
      position: absolute;
      left: -100vw;
    }
  }
}

.site-header--basic-navigation-below {
  &.site-header--desktop-logo-center {
    .site-header-search-button {
      @include media($min: $bp-large) {
        position: absolute;
        left: calc(-100vw + 100% + #{rem($gutter-content * 2)});
      }
    }

    .site-header-main:not(.site-header--full-width) {
      .site-header-search-button {
        @media (min-width: $max-width) {
          left: calc(-#{$max-width} + 100% + #{rem($gutter-content * 2)});
        }
      }
    }
  }
}

// {% endif %}


// 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 {
  @include font-size-heading-1;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-text-headings;

  @include media($min: $bp-large) {
    font-size: $font-heading-medium;
  }
}

.account-page-subtitle {
  @include font-size-heading-4;
  margin-top: 0;
  margin-bottom: $space-small;
  color: $color-text-headings;

  &: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-recovery {
  & .account-recovery--submit,
  & .account-recovery--cancel {
    @include button-size(medium);
  }
}

.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 {
    @include button-size(large);
    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;
    }

    a {
      @include font-body-underline-links;
    }
  }

  .form-action-row--helper-item {
    @include font-size-body-small;
    display: block;

    &: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 {
  @include font-size-body-smaller;
  width: 100%;
  max-width: 600px;
  table-layout: fixed;
  border-spacing: 0 $gutter-content;
  border-collapse: collapse;

  th {
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
  }

  tr {
    text-align: left;
  }

  td:not(:last-child) {
    padding-right: $gutter-content / 2;
  }

  tbody td {
    padding-top: $gutter-content / 2;
  }
}

.account-order-number {
  a {
    @include font-body-underline-links;
  }
}

.account-order-list-reorder {
  .reorder-link {
    @include font-body-underline-links;
    color: $color-orange;
    cursor: pointer;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    &.disabled {
      color: gray;
      pointer-events: none;
    }
  }
}

.account-order-list-reorder__content {
  display: flex;
  align-items: center;
}

.reorder-tooltip {
  position: relative;

  &:hover,
  &:focus {
    .reorder-tooltip__text {
      visibility: visible;
    }
  }

  .reorder-tooltip__trigger {
    color: $color-orange;
    border: 1px solid $color-orange;
    padding: 0 4px;
    font-size: 12px;
    line-height: 10px;
    border-radius: 25px;
    margin-left: 8px;
    cursor: pointer;
  }

  .reorder-tooltip__text {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    visibility: hidden;
    width: 160px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    transform: translateY(-50%) translateX(-110%);

    @include media($min: $bp-xl) {
      right: 0;
      left: unset;
      transform: translateY(-50%) translateX(110%);
    }

    &::after {
      content: " ";
      position: absolute;
      top: 50%;
      left: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent black;

      @include media($min: $bp-xl) {
        right: 100%;
        left: unset;
        border-color: transparent black transparent transparent;
      }
    }
  }
}

.added-to-cart-toast {
  position: fixed;
  bottom: 0;
  opacity: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: {{ '#ed6f27' | color_lighten: 33 }};
  padding: 16px 24px;
  border-radius: 16px;
  text-align: center;
  visibility: hidden;
  pointer-events: none;
  transition: bottom 0.3s ease-in, opacity 0.1s ease-in;
  display: flex;
  align-items: center;

  &.active {
    visibility: visible;
    bottom: 80px;
    opacity: 100%;

    @include media($min: $bp-xl) {
      bottom: 160px;
    }
  }

  &.hiding {
    opacity: 0;
    visibility: visible;
  }

  svg {
    margin-right: 16px;
    width: 24px;
  }
}

// Account address
.account-address-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  list-style-type:none;
  -webkit-margin-before:0;
          margin-block-start:0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
}

.account-address {
  @include font-size-body;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
  padding: $space-medium;
  margin-top: $gutter-outer-small;
  background-color: $color-content-containers-background;
  border-radius: $container-border-radius;

  &:first-child {
    margin-top: 0;
  }

  @include media($min: $bp-smaller) {
    width: calc(#{percentage(1 / 2)} - #{$gutter-content / 2});
    margin-right: $gutter-outer-small;

    &:nth-child(2) {
      margin-top: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  @include media($min: $bp-large) {
    width: calc(#{percentage(1 / 2)} - #{$gutter-content / 2});
    margin-top: $gutter-content;
    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 {
  a {
    @include font-body-underline-links;
  }
}

.account-address-item--default {
  font-style: font-style($font-body, $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: $space-xx-small;

      @include media($min: $bp-medium, $max: $bp-large) {
        margin-right: $space-xx-small / 2;
      }
    }
  }
}

.account-address-form {
  display: none;

  &.visible {
    display: block;
  }

  & .address-form--submit,
  & .address-form--cancel {
    @include button-size(medium);
  }
}

// Account activation + Password reset
.account-page-activate,
.account-page-reset-password {
  .account-page-content {
    max-width: $local-account-width-small;
  }
}

$local-max-width: 680px;

.page-content-contact {
  .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.2);

// Footer blocks
.site-footer-blocks {
  @include media($min: $bp-large) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: $max-width;
    margin-right: auto;
    margin-left: auto;
  }
}

.site-footer-block-item {
  @include font-size-body;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid $local-footer-accent;

  @include media($min: $bp-large) {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(25% - #{$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});
    }
  }
}

.site-footer-block-title {
  @include font($type-footer-heading);
  @include font-size-footer-heading($font-footer-heading-capitalize);
  @include capitalize($font-footer-heading-capitalize);
  position: relative;
  padding-top: $space-small;
  padding-bottom: $space-small;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-footer-headings;
  letter-spacing: $font-footer-heading-spacing;

  @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 {
    transition-duration: 0s;
  }

  @include media($min: $bp-large) {
    display: none;
  }
}

.site-footer-block-content {
  @include font-size-body-small;
  padding-bottom: $space-medium;
  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;
  }

  &.rte a {
    color: $color-footer-text-link;
    text-decoration: underline;

    &:hover {
      color: $color-footer-text-link-hover;
    }
  }

  .navmenu-link {
    color: $color-footer-menu-list-link;

    &:hover {
      color: $color-footer-menu-list-link-hover;
    }
  }
}

.site-footer-block-menu {

  .navmenu {
    padding-bottom: 0;
    padding-left: 0;
    margin: 0;
    list-style: none;
  }

  .navmenu-item:not(:first-child) {
    margin-top: rem(8px);

    @include media($min: $bp-small) {
      margin-top: rem(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: 1500px;
      opacity: 1;
    }
  }

  &.accordion--active {
    .site-footer-block-content {
      padding-bottom: $space-medium;
    }
  }
}

.site-footer-block-social-accounts {
  [data-mobile-alignment="centered"] & {
    @include media($max: $bp-large) {
      align-items: center;
      padding-top: $space-x-small;
      padding-bottom: $space-x-small;
    }
  }

  .social-icons {
    display: flex;
    flex-wrap: wrap;
    margin-top: -4px;
    margin-right: -4px;
    margin-left: -4px;
  }

  .social-link {
    width: 36px;
    height: 36px;
    padding: 4px;
    overflow: hidden;
    line-height: 1.8;
    vertical-align: top;

    svg {
      width: 28px;
      height: 28px;
      border-radius: 100%;
      transition: background-color 0.4s $ease-out-quad;
    }
  }
}

.site-footer-block-newsletter {
  [data-mobile-alignment="centered"] & {
    @include media($max: $bp-large) {
      align-items: center;
      padding-top: $space-x-small;
      padding-bottom: $space-x-small;
    }
  }

  .newsletter {
    padding-bottom: $space-medium;

    @include media($min: $bp-large) {
      margin-top: $space-medium - $space-small;
    }

    .newsletter-input {
      .form-field-input {
        color: $color-footer-text;
        background: none;
        border-color: $color-footer-text;
      }

      .form-field-title {
        color: rgba($color-footer-text, 0.6);

        &::before {
          background: $color-footer-background;
        }
      }
    }
  }
}

.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: $color-site-overlays-background;
  content: "";
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  -webkit-overflow-scrolling: touch;
  outline-style: auto; // This is to fix an issue where tapping on modals on iPhone creates a darker background

  @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-popups-background;
  opacity: 0;
  transform: translateY(-50px);
  transition:
    transform 0.25s $ease-bubble 0.1s,
    opacity 0.15s $ease-bubble 0.15s;

  @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;
    transform: translate3d(0, 0, 0);
  }
}

.modal-close {
  @extend %button-reset;
  position: absolute;
  top: 0;
  right: 0;
  padding: rem(15px);
  color: $color-text-regular-text;

  @include media($min: $bp-large) {
    top: $gutter-outer-small;
    right: $gutter-outer-small;
  }

  svg {
    display: block;
    color: currentColor;
  }
}

.newsletter {
  @include font-size-body;
  display: flex;
  width: 100%;
  max-width: rem(455px);

  @include media($max: $bp-large) {
    max-width: 85%;
  }

  .button-primary,
  .button-secondary {
    @include button-size(large);
    padding-right: $space-small;
    padding-left: $space-small;
  }

  .form-fields-inline {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: -1 * ($gutter-content / 2);
  }

  .form-field {
    display: inline-block;
    margin-bottom: $gutter-content / 2;
    vertical-align: middle;
  }

  .newsletter-input {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: $gutter-content / 2;
  }

  .newsletter-submit {
    flex-grow: 0;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

.site-page,
.page-masthead,
.page-content {
  @extend %page-content;
}

.page-masthead {
  @extend %layout-container;
  text-align: center;
}

.page-content {
  @extend %layout-container;
}

.page-content,
.page-masthead {
  // In order for the max width to match the selection by the user,
  // we need to add the built-in padding to the total
  // Padding settings are in %layout-container located in
  // source/styles/lib/_extends.scss

  max-width: rem($page-max-width) + 2 * rem($gutter-outer-small);

  @include media($min: $bp-small, $max: $bp-larger) {
    max-width: rem($page-max-width) + 2 * $space-large;
  }

  @include media($min: $bp-larger) {
    max-width: rem($page-max-width) + 4 * rem($gutter-content);
  }
}

.page-title {
  @include font-size-heading-1;
  color: $color-text-headings;

  @include media($min: $bp-large) {
    font-size: $font-heading-medium;
  }
}

.site-main {
  position: relative;
  z-index: $index-main;
  outline: none;

  body:not(.template-index) & {
    padding-bottom: $space-x-large;

    @include media($min: $bp-large) {
      padding-bottom: $space-xx-large;
    }
  }

  body.template-product &,
  body.template-compare &,
  body.template-blog &,
  body.template-article &,
  body.template-about &,
  body.template-cart & {
    padding-bottom: 0;
  }
}

$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: 100vw;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;

    a {
      &:focus {
        outline-offset: -1 * $local-padding;
      }
    }

    .navmenu-meganav-items {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-start;
      flex-wrap: nowrap;
      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 {
        transform: rotate(0deg);
      }
    }

    .navmenu-meganav-item {
      flex-basis: 225px;
      flex-grow: 1;
      flex-shrink: 0;
      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%;
      }
    }

    .navmenu-depth-4,
    .navmenu-depth-3 {
      position: relative;
      top: 0;
      left: auto;
      z-index: 1;
      width: 100%;
      transform: translate(0);
      box-shadow: none;
    }

    .navmenu-depth-3 {
      display: block;
      height: auto;
      padding: 0;
      margin-top: rem(4px);
      margin-left: 0;
      opacity: 1;
    }

    .navmenu-depth-3 .navmenu-submenu {
      padding-top: rem(2.5px);
      padding-bottom: $site-subnav-space / 2;
      padding-left: 12px;
    }

    .navmenu-item-text {
      @include font-size-body-medium($font-heading-capitalize, -3.5);
      display: block;
      padding: rem($site-nav-link-space) rem($gutter-outer);
      color: $color-header-navigation-meganavigation-menu-headings;

      &:not(.navmenu-link-parent) {
        @extend %heading;
      }
    }

    .navmenu-link {
      padding: rem($site-nav-link-space) rem($gutter-outer - $local-padding) rem($site-nav-link-space) rem($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;
  }

  .site-header--full-width & {
    width: 100%;
    max-width: 100%;
  }

  &::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;
    transition: opacity 0.2s $ease-out-quad;
  }

  &::before {
    left: -1 * $local-padding;
    background-image: linear-gradient(90deg, rgba($color-layout-site-background, 1) 0%, rgba($color-layout-site-background, 0) 100%);
  }

  &::after {
    right: -1 * $local-padding;
    background-image: linear-gradient(90deg, rgba($color-layout-site-background, 0) 0%, rgba($color-layout-site-background, 1) 100%);
  }

  .meganav--overflows-right &::after,
  .meganav--overflows-left &::before {
    opacity: 1;
  }
}

.site-mobile-nav .navmenu-meganav--image {
  width: 100%;
}

.navmenu-meganav--image-size-small {
  display: block;
  width: 200px;
}

.navmenu-meganav--image-size-medium {
  width: 300px;
}

.navmenu-meganav--image-size-large {
  width: 400px;
}

li.navmenu-meganav--image-container {
  position: relative;
  margin: $gutter-content / 2 $gutter-outer $gutter-content;

  .site-mobile-nav & {
    margin: $gutter-content 0;
    padding: 0 $gutter-content 0 $gutter-outer;
  }
}

.navmenu-meganav--image-text {
  margin-top: $space-x-small;
  margin-bottom: 0;
  color: $color-header-navigation-meganavigation-promo-text;
}

.site-navigation .navmenu-meganav--image-link {
  @extend %link--text;
  @include font($font-body);
  @include font-size-body;
  display: block;
  padding: 0;
  letter-spacing: $font-body-spacing;
  color: $color-header-navigation-meganavigation-promo-text;

  &:hover {
    color: $color-header-navigation-dropdown-menu-links-hover;
  }
}

.navmenu-meganav--image-last {
  order: 1;
}

$local-link-space: 13px;

.site-mobile-nav {
  display: none;
  opacity: 0;

  &.animating-in {
    transition: text-shadow 0.4s linear; // sneak-in-meganav animation duration
  }

  &.animating-out {
    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-header-navigation-dropdown-menu-links;
  background-color: $color-header-navigation-dropdown-menu-background;
  transition: transform 0.4s $ease-out-quad;
  -webkit-overflow-scrolling: touch;

  .animating-in &,
  .visible & {
    display: block;
    transform: translate3d(0, 0, 0);
  }

  .animating-in & {
    animation-delay: 0s;
    animation-duration: 0.4s;
    animation-name: sneak-in-mobilenav;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }

  .animating-out & {
    animation-delay: 0s;
    animation-duration: 0.2s;
    animation-name: sneak-out-mobilenav;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }

  a {
    color: currentColor;
    text-decoration: none;
  }

  .site-header-currency-converter:first-child {
    position: relative;
    left: rem(-5px);
  }

  .header-actions-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: $color-header-background;

    .account-link {
      padding-right: 4px;
      padding-left: 0;
    }

    .mobile-logout {
      padding: 0;
      text-transform: none;
    }

    .mobile-nav-close {
      padding: 14px 16px;
      color: $color-white;

      svg {
        display: block;
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }
    }

    .site-header-currency-converter {
      margin-right: 10px;
      margin-left: auto;
    }

    .currency-converter-wrapper {
      .form-field-select, svg {
        @include font($font-menu);
      }
    }

    a {
      @include font($font-menu);
    }
  }
}

.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-site-overlays-background;

  .animating-out &,
  .visible & {
    display: block;
  }

  .animating-in & {
    animation-delay: 0s;
    animation-duration: 0.4s;
    animation-name: overlay-fade-in;
    animation-timing-function: linear;
    animation-direction: normal;
  }

  .animating-out & {
    opacity: 0;
    animation-delay: 0.1s;
    animation-duration: 0.2s;
    animation-name: overlay-fade-out;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-direction: normal;
  }
}

.mobile-nav-content {
  padding-top: 20px;
  padding-bottom: 60px;

  .site-header-actions ~ & {
    min-height: calc(100% - #{$header-content-height});
  }

  .navmenu {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  li {
    position: relative;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .navmenu-depth-1 {
    @include font($font-body, $font-family: false, $font-weight: bolder);
    @include font-size-body-medium;
    letter-spacing: $font-body-spacing;
  }

  .navmenu-item-highlighted {
    > a {
      color: $color-header-navigation-sale-link;

      &:hover {
        color: $color-header-navigation-sale-link-hover;
      }
    }
  }

  .navmenu-depth-2 {
    @include font($font-body, $font-family: false, $font-weight: initial);
    @include font-size-body;
    letter-spacing: $font-body-spacing;
    background-color: $color-header-navigation-mobile-submenu-background;

    .navmenu-submenu {
      padding: 0 rem(10px);
    }
  }

  .navmenu-depth-1,
  .navmenu-depth-2,
  .navmenu-depth-3 {
    .navmenu-submenu {
      display: none;
    }
  }

  .navmenu-submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.15s ease;

    &.visible {
      max-height: 999999px;
      opacity: 1;
    }
  }

  .navmenu-link,
  .navmenu-item-text {
    position: relative;
    display: block;
    padding: rem($local-link-space) rem($gutter-outer);
    cursor: pointer;
    transition: color 0.1s ease-in;

    &.navmenu-link-parent {
      padding-right: rem($local-link-space + 10px);
    }
  }

  .navmenu-link {
    &:focus {
      outline-offset: -3px;
    }
  }

  .navmenu-hr {
    display: block;
    width: calc(100% - #{rem($gutter-outer) * 2});
    height: 1px;
    margin: $space-large auto;
    background-color: $color-layout-dividers;
    border: 0;
  }

  // Handle specific cases where navmenu-hr needs to account for spacing relative to particular menus
  .navmenu + .navmenu-hr {
    margin-top: #{$space-large - rem($local-link-space)};
  }

  .navmenu-utility-bar + .navmenu-hr {
    margin-top: #{$space-large - $space-x-small};
  }

  .navmenu-hr + .navmenu {
    margin-top: -rem($local-link-space);
  }

  .navmenu-hr + .navmenu-utility-bar {
    margin-top: -$space-x-small;
  }

  .navmenu-utility-bar .navmenu-item > .navmenu-link {
    padding-top: $space-x-small;
    padding-bottom: $space-x-small;
    letter-spacing: initial;
    text-transform: initial;
  }

  .navmenu-depth-1 > .navmenu-item > .navmenu-link {
    @extend %menu;
    @include font-size-menu-large;
  }

  .navmenu-button {
    position: absolute;
    top: rem(4px);
    right: 0;
    width: rem(36px);
    height: rem(36px);
    padding: 0;
    margin-right: rem(6px);
    color: $color-header-navigation-dropdown-menu-links;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 0.2rem;
    transition: color 0.1s ease-in;

    &:focus {
      outline-offset: -3px;
    }
  }

  .navmenu-button-wrapper {
    width: 100%;
    height: 100%;
    outline: none;
  }

  .navmenu-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    margin-top: -3px;
    transform: translateX(-50%);

    svg {
      display: block;
      width: 8px;
      height: 6px;
      transform: scale(1.25);
      fill: currentColor;
    }

    .icon-chevron-down-left,
    .icon-chevron-down-right {
      transform: rotate(0);
      transition: transform 0s, fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      transform-origin: 50% 50%;
    }
  }

  .navmenu-link-parent-active {
    color: $color-header-navigation-dropdown-menu-links-hover;

    ~ .navmenu-button {
      color: $color-header-navigation-dropdown-menu-links-hover;
      background: $color-header-navigation-mobile-submenu-background;

      .navmenu-icon {
        margin-top: rem(2px);
      }

      svg {
        transform: scale(1.75);
      }

      .icon-chevron-down-left,
      .icon-chevron-down-right {
        transform: rotate(-45deg);
        transform-origin: 0 0;
      }
    }
  }

  .navmenu-depth-2 {
    .navmenu-link-parent-active ~ .navmenu-button {
      background: darken($color-header-navigation-mobile-submenu-background, 5%);
    }
  }
}

.home-section--title-container {
  padding: 0 $space-xx-small;
  margin-top: 0;
  margin-bottom: $space-section-heading;
  text-align: center;

  @include media($max: $bp-small) {
    margin-bottom: $space-large;
  }
}

.home-section--title {
  @include font($font-section);
  @include font-size-section-heading($font-section-capitalize, -2, $section-heading-sizing);
  @include capitalize($font-section-capitalize);
  margin-top: 0;
  margin-bottom: $space-medium;
  letter-spacing: $font-section-spacing;
  color: $color-text-headings;
  text-align: center;
}

.home-section--subheading {
  margin: 0 5vw;
  font-size: rem($font-size-base-mobile * $section-subheading-sizing);
  line-height: 1.5;
  text-align: center;

  @include media($min: $bp-medium) {
    margin: 0 15vw;
    font-size: rem($font-size-base * $section-subheading-sizing);
  }

  p {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
  }
}

.rte .tabs,
.rte .tabs-content {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.rte .tabs {
  margin-top: $space-large;
  margin-bottom: 0;

  li {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    color: $color-text-headings;
    margin-top: $space-medium;
    margin-right: $space-large;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, opacity .15s ease;

    &,
    > a {
      @extend %h5;
      opacity: 0.4;
    }

    &:hover {
      opacity: 0.6;
    }

    &.active,
    &.active a {
      opacity: 1;
      border-bottom: 2px solid $color-text-headings;
    }

    span {
      display: inline-block;
      padding-bottom: rem(6px);
      outline: none;
    }
  }
}

.rte .tabs-content {
  margin-top: $space-medium;

  > li {
    display: none;

    &.active {
      display: block;
    }

    :first-child {
      margin-top: 0;
    }

    .grid {
      > div {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            margin-top: 0;
          }
        }
      }
    }
  }
}

$local-bp-xs-tween: 480px;
$local-bp-xs-tween-large: 560px;
$local-padding-small: rem(15px);
$local-padding-large: $space-medium;

$local-cart-image-width-small: 75px;
$local-cart-image-width-large: 120px;

$local-icon-remove: rem(20px);
$local-quantity-width: $quantity-width + $local-padding-large;
$local-total-width: rem(120px);

.template-cart .highlights-banners--section {
  margin-top: 30px;

  @include media($min: $bp-medium) {
    margin-top: 125px;
  }
}

.cart-item {
  position: relative;
  display: flex;
  padding: $local-padding-small;
  margin-bottom: $grid-row-space-mobile;
  overflow: hidden;
  background-color: $color-product-cards-background;
  border: 1px solid $color-light-gray;
  border-radius: $product-card-border-radius;
  transition: all 0.2s ease-out;

  @include media($min: $bp-small) {
    padding: $local-padding-large;
  }

  @include media($min: $bp-large) {
    align-items: center;
  }

  @include media($min: $bp-small, $max: $bp-larger) {
    margin-bottom: $grid-row-space-desktop * 2 / 3;
  }

  @include media($min: $bp-larger) {
    margin-bottom: $grid-row-space-desktop;
  }

  &.removing {
    height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
  }

  .cartitems--no-spacing & {
    padding: 0 $space-x-small $space-large 0;
    margin-bottom: $space-large;
    border-bottom: 1px solid $color-layout-dividers;
    border-radius: 0;
    background-color: transparent;
  }
}

// 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;
  }

  img {
    background-color: $color-products-product-image-backgrounds;
  }

  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});

  @include media($min: $local-bp-xs-tween) {
    width: calc(100% - #{$local-cart-image-width-large});
  }

  .product--stock-level {
    @include font-size-body-smaller;
    margin-top: $space-xx-small;
    margin-bottom: 0;
  }

  .cart:not(.has-sidebar) & {
    @include media($min: $bp-small) {
      display: flex;
      align-items: center;
      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});
    }
  }

  .cart.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: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - #{$local-cart-image-width-large});
    }

    @include media($min: $bp-large) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - #{$local-cart-image-width-large});
    }
  }
}

// Title, Price, Variants
.cart-item--content {
  padding-left: $local-padding-large;

  .cart.has-sidebar & {
    @include media($min: $bp-medium, $max: $bp-large) {
      margin-bottom: $space-large;
    }
  }
}

.cart-item--content-title {
  margin: 0;
  @include font($font-body-bold);
  font-weight: bold;
  font-size: rem(16px);
  line-height: rem(24px);
  color: $color-medium-gray;

  a {
    color: currentColor;
    text-decoration: none;
  }
}

.cart-item--product-options,
.cart-item--content-price {
  @include font-size-body-smaller;
  line-height: 1.5;
  color: transparentize($color-text-regular-text, 0.2);
}

.cart-item--content-price .money {
  @include font($font-body);
  font-size: rem(14px);
  line-height: rem(24px);
  color: #222222;
}

.cart-item--option-name {
  @include font($font-body, $font-weight: bolder, $font-family: false);
  letter-spacing: $font-body-spacing;
}

.cart-item--price-title {
  margin-right: 2px;
  @include font($font-body-bold);
  font-weight: bold;
  font-size: rem(14px);
  line-height: rem(24px);
  color: #222222;
}

.cart-item--sale-price {
  color: $color-text-light-text;
  text-decoration: line-through;
}

// Quantity select, line price, remove
.cart-item--info {
  position: relative;
  padding-right: 0;
  padding-left: $local-padding-large;
  margin-top: $space-large - $space-x-small;

  @include media($min: $local-bp-xs-tween-large) {
    display: flex;
    align-items: center;
  }

  @include media($min: $bp-small) {
    margin-top: 0;
  }
}

.cart-item--sku {
  font-size: rem(13px);
  line-height: 1.5;
  color: $color-text-light-text;
}

.cart-item--sku-empty {
  display: none;
}

.cart-item--quantity,
.cart-item--total,
.cart-item--remove {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: $space-x-small;
}

.cart-item--quantity {
  width: 100%;
  max-width: $local-quantity-width;
  min-width: $local-quantity-width;
  padding-right: $local-padding-large;
  padding-left: 0;

  &.quantity-disabled {
    pointer-events: none;
    opacity: .5;
  }
}

.cart-item--total {
  @include font($font-product-price);
  @include font-size-heading-5;
  padding-right: $local-padding-large + $local-icon-remove;
  color: $color-text-regular-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--remove {
  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;
    flex-grow: 0;
    width: ($local-padding-large * 2) + $local-icon-remove;
    max-width: percentage(1 / 3);
    padding-left: $local-padding-large * 2;
  }
}

.cart-item--remove-link {
  @extend %link--text;
  display: inline-block;
  padding: 5px;

  &:hover {
    color: currentColor;
  }

  svg {
    display: block;
    fill: $color-black;
    width: 13px;
    height: 13px;
  }
}

$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;
  text-align: center;

  // 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 {
  position: relative;
  height: auto;
  margin: 0 auto;
  transition: opacity .25s ease;

  a {
    display: block;
  }

  img,
  svg {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: $container-border-radius;
  }
}

.collection--item-info {
  @include font-size-body;
  margin-top: $space-medium;
  margin-bottom: 0;
  text-align: center;
}

.collection--item-title {
  @extend %link--default;
  font-weight: 700;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
}

.article--comments-item {
  margin: 0 0 $space-xx-large;
  line-height: 1.6;

  cite {
    @include font-size-body-small;
    font-style: font-style($font-body, $font-style: italic);
    color: $color-text-light-text;

    strong {
      @include font-size-heading-5;
      color: $color-text-headings;
    }
  }

  .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 {
  @include font-size-heading-3;
  margin-top: 0;
  margin-bottom: $space-x-large;
  color: $color-text-headings;

  .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;
  }

  .article-comment--submit {
    @include button-size(medium);
    margin-top: $space-large;
  }
}

.article--comments-moderated {
  @include font($font-body, $font-family: false, $font-style: italic);
  margin-bottom: $space-x-large;
  line-height: 1.6;
  letter-spacing: $font-body-spacing;
}

.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 {
    @include font($font-body, $font-family: false);
    padding-left: $space-medium;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: $font-body-spacing;
  }

  p {
    @extend %message--base;
    @include font($font-body, $font-family: false);
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: $font-body-spacing;

    + .article--comments-error {
      margin-top: 0.67em;
    }
  }
}

.article--comments-required {
  @include font-size-body-smallest;
  margin-top: $space-medium;
  margin-bottom: 0;
  color: $color-text-light-text;
}

.article--youtube-subscribe {
  border-top: 1px solid $color-light-gray;
  border-bottom: 1px solid $color-light-gray;
  margin-top: 40px;
  padding-top: 14px;
  padding-bottom: 28px;

  .article--youtube-subscribe__heading {
    margin-top: 0;
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(16px);
    line-height: rem(24px);
    color: $color-gray;
  }

  #___ytsubscribe_0 {
    padding-left: 10px !important;
  }
}

.article--related {
  padding-top: 45px;
  padding-bottom: 20px;

  .article--related__heading {
    margin-top: 0;
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
    text-align: center;

    @include media($min: $bp-medium) {
      margin-bottom: 45px;
    }
  }

  ul {
    @extend %layout-container;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    list-style: none;

    @include media($min: $bp-medium) {
      flex-direction: row;
      justify-content: space-between
    }
  }

  .article--excerpt-wrapper {
    margin-top: 20px;

    @include media($min: $bp-medium) {
      width: calc(33.3% - 10px);
      margin-top: 0;
    }
  }

  @include media($min: $bp-medium) {
    background: $color-background-gray;
    padding-bottom: 40px;
  }
}

.article--excerpt-wrapper {
  flex-grow: 0;
  flex-shrink: 0;
  text-align: center;
  background-color: $color-content-containers-background;
  border-radius: $container-border-radius;
  transition: width 0.1s ease;

  .article-list-item {
    width: 100%;
    word-wrap: break-word;
  }

  &.article--excerpt-wrapper--centered {
    display: flex;
    & .article-list-item {
      display: flex;

      & .article--excerpt-content {
        vertical-align: middle;
      }
    }
  }

}

.article--excerpt-image {
  position: relative;
  display: block;
  height: rem(200px);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: $container-border-radius $container-border-radius 0 0;

  @include media($min: $bp-small) {
    height: rem(250px);
  }

  @include media($min: $bp-large) {
    .blogposts--count-2 & {
      height: rem(300px);
    }
  }
}

.article--excerpt-video-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px !important;
  height: 30px !important;
  visibility: visible !important;
}

.article--excerpt-content {
  width: 100%;
  padding: $space-medium;
  white-space: normal;

  .article--excerpt-wrapper--centered & {
    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 {
  display: flex;
  justify-content: center;
  color: $color-mild-gray;
}

.article--excerpt-meta-item {
  font-size: rem(12px);
  line-height: rem(16px);
  text-decoration: none;
  color: $color-mild-gray;

  @include media($max: $bp-small) {
    @include font-size-body-smallest;
  }

  &:nth-child(2) {
    padding-left: 11px;
    margin-left: 10px;
    border-left: 1px solid $color-mild-gray;

    @include media($max: $bp-small) {
      padding-left: 6px;
      margin-left: 5px;
    }
  }
}

.article--excerpt-title {
  @include font($font-body-bold);
  font-weight: bold;
  font-size: rem(20px);
  line-height: rem(28px);
  margin-top: 16px;
  margin-bottom: 0;
  line-height: 1.3;
  color: $color-dark-gray;

  &:first-child {
    margin-top: 0;
  }

  a {
    color: currentColor;
    text-decoration: none;
  }
}

.article--excerpt-text {
  font-size: rem(14px);
  line-height: rem(24px);
  color: $color-gray;

  p {
    margin: 14px 0;
  }
}

.article--excerpt-readmore {
  @extend %link--default;
  @include font($font-body-bold);
  font-weight: bold;
  margin-top: $space-small;
  line-height: 1;
  color: $color-dark-gray;
  border-bottom: 1px solid $color-dark-gray;
}

.article--excerpt-readmore--icon {
  @extend %inline-chevron;
  margin-left: rem(1px);
}

.blog--upper {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  h1 {
    display: flex;
    align-items: center;
    @include font($font-body);
    font-size: rem(20px);
    line-height: rem(28px);
    color: $color-medium-gray;

    .icon-chevron-down-small {
      margin-left: 8px;

      @include media($min: $bp-medium) {
        display: none;
      }
    }

    @include media($min: $bp-medium) {
      margin-top: 0;
    }
  }

  ul {
    list-style: none;
    padding-left: 0;

    li {
      margin-top: 10px;

      a {
        font-size: rem(14px);
        line-height: rem(24px);
        color: $color-dark-gray;
        text-decoration: none;

        &.active {
          color: $color-orange;
          text-decoration: underline;
        }
      }
    }

    @include media($max: $bp-medium) {
      margin: 0;
      max-height: 0;
      overflow-y: hidden;
      transition: max-height .25s ease;

      &.active {
        max-height: 400px;
      }
    }
  }

  .blog--filters {
    @include media($min: $bp-medium) {
      width: 40%;
    }

    @include media($min: $bp-large) {
      width: 30%;
    }

    @include media($min: $bp-xl) {
      width: 25%;
    }
  }

  @include media($min: $bp-medium) {
    flex-direction: row;
    margin-top: 40px;

    .article--excerpt-image {
      width: 60%;
      margin-left: 30px;
    }

    .article--excerpt-content {
      width: 40%;
    }
  }
}

.article--excerpt-wrapper--featured {
  width: 100%;
  margin-top: 20px;
  margin-right: 0;
  margin-bottom: $space-xx-large;
  border: 0;
  box-shadow: none;

  @include media($min: $bp-medium) {
    display: flex;
    align-items: center;
    flex-direction: row;
    margin-top: 0;
    margin-bottom: 40px;
  }

  .article--excerpt-image {
    height: rem(250px);
    border-radius: 0 $container-border-radius $container-border-radius 0;

    @include media($min: $bp-medium) {
      height: rem(381px);
    }

    .no-js & {
      height: auto;
    }
  }

  .article--excerpt-content {
    @include font-size-body;
    padding: 0 0 0 30px;

    @include media($max: $bp-medium) {
      padding: $space-x-large;
    }
  }

  .article--excerpt-meta {
    color: $color-mild-gray;

    @include media($min: $bp-medium) {
      justify-content: flex-start;
    }
  }

  .article--excerpt-meta-item {
    &:nth-child(2) {
      border-left-color: $color-mild-gray;
    }
  }

  .article--excerpt-title {
    font-size: rem(28px);
    line-height: rem(36px);
    margin-top: 16px;
    margin-bottom: $space-medium;
    color: currentColor;

    &:first-child {
      margin-top: 0;
    }

    @include media($min: $bp-smaller) {
      margin-bottom: 0;
    }
  }

  .article--excerpt-text {
    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: rem(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 {
    @include media($min: $bp-medium) {
      .article--excerpt-image,
      .article--excerpt-content {
        text-align: left;
      }
    }
  }
}

.breadcrumbs-container {
  @extend %layout-container;
  display: flex;
  align-items: center;
  margin-top: $space-medium;
  margin-bottom: $space-medium;

  @include media($min: $bp-small) {
    margin-top: $space-large;
    margin-bottom: $space-large;
  }

  a,
  span {
    @include font-size-body;
    display: inline-block;
    vertical-align: middle;
  }

  a {
    @extend %link--default;
  }

  span {
    color: $color-text-light-text;

    &.breadcrumbs-tag:not(:last-child) {
      margin-right: 2px;
    }
  }
}

.breadcrumbs-delimiter {
  @extend %inline-chevron;
  margin-right: rem(7px);
  margin-left: rem(7px);

  svg {
    margin-top: 0;
  }
}

$loading-icon-size: 60px;

.pagination--container {
  @extend %layout-container;
  margin-top: $space-xx-large;
  margin-bottom: $space-large;

  #shopify-section-static-blog & {
    margin-top: 0;
  }

  .icon-loading {
    opacity: 0;
    color: $color-text-links;
  }

  .processing--pagination & {
    .button-primary {
      display: none;
    }

    .icon-loading {
      height: $loading-icon-size;
      width: $loading-icon-size;
      opacity: 1;
      color: $color-text-links;
      z-index: 11;
      position: relative;
      display: block;
      top: 0;
      left: calc(50% - #{$loading-icon-size }/ 2)
    }
  }
}

.pagination--inner {
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: -1 * rem(9px);
  margin-left: -1 * rem(9px);
  color: $color-text-regular-text;

  li {
    display: block;

    &:not(:last-child) {
      margin-right: rem(5px);
    }
  }

  a {
    @extend %link--default;
  }
}

.pagination--item {
  display: inline-block;
  padding: rem(9px) rem(11px);

  .pagination--active & {
    @include font-body-bold;
    letter-spacing: $font-body-spacing;
    color: $color-orange;
    pointer-events: none;

    &:hover {
      color: currentColor;
    }
  }

  .pagination--previous &,
  .pagination--next & {
    color: $color-orange;

    &:hover {
      color: $color-orange;
      opacity: .75;
    }
  }
}

.pagination--chevron-right,
.pagination--chevron-left {
  @extend %inline-chevron;
  color: $color-black;
}

.pagination--chevron-left {
  margin-left: 0;

  svg {
    transform: rotate(90deg);
  }
}

$local-share-button-darklight-color: $color-text-regular-text;
$local-share-button-darklight-background-color: rgba($color-text-regular-text, 0.15);

$local-share-button-inverted-background-color: $color-text-regular-text;

$local-share-button-colored-color: $color-white;
$local-share-button-colored-background-color: $color-black;

.share-buttons {
  margin-top: $space-large;

  @include media($min: $bp-small) {
    margin-top: $space-x-large;
  }

  .share-buttons--title {
    @include font-body-bold;
    @include font-size-body-smaller;
    margin-top: 0;
    margin-bottom: 0;
    letter-spacing: $font-body-spacing;
    color: $color-text-regular-text;
  }

  .share-buttons--list {
    display: flex;
    margin-top: $space-small;

    .featured-product--container & {
      justify-content: center;
    }

    @include media($min: $bp-small) {
      margin-top: $space-x-small;
    }
  }

  .share-buttons--button {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 2px;
    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-dark-light {
  .share-buttons--button {
    color: $local-share-button-darklight-color;
    background-color: $local-share-button-darklight-background-color;
  }
}

.share-buttons-inverted {
  .share-buttons--button {
    color: $color-layout-site-background;
    background-color: $local-share-button-inverted-background-color;

    .modal--quickshop-slim &,
    .modal--quickshop-full & {
      color: $color-popups-background;
    }

    .featured-product--container & {
      color: $color-content-containers-background;
    }
  }
}

.share-buttons-colored {
  .share-buttons--button {
    color: $local-share-button-colored-color;
    background-color: $local-share-button-colored-background-color;
  }

  .share-buttons--facebook {
    background-color: $color-facebook;
  }

  .share-buttons--twitter {
    background-color: $color-twitter;
  }

  .share-buttons--linkedin {
    background-color: $color-linkedin;
  }

  .share-buttons--pinterest {
    background-color: $color-pinterest;
  }
}

$local-image-width: rem(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-popups-background;
  outline: 0;
  box-shadow: 0 3px 3px transparentize($color-border, 0.85);
  transition: text-shadow 0.275s linear; // animation duration + delay

  .site-header--sticky & {
    position: absolute;
    top: 100%;
  }
}

.atc-banner--outer {
  @extend %layout-container;
  position: relative;
  padding-top: $space-medium;
  padding-bottom: $space-medium;
  @include media($max: $bp-small) {
    padding: $space-medium;
  }
}

.atc-banner--inner {
  width: 100%;
  max-width: 920px;
  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 {
  @include font-size-body;
  vertical-align: middle;

  @include media($min: $bp-small) {
    display: table-cell;
    width: 52%;
    padding-right: $space-x-large;
  }

  @include media($min: $bp-large) {
    padding-right: $space-x-large;
  }
}

.atc-banner--cart {
  margin-top: $space-xx-large;

  @include media($min: $bp-small) {
    display: table-cell;
    width: 48%;
    padding-left: $space-large;
    margin-top: 0;
    border-left: 1px solid $color-layout-dividers;
  }

  @include media($min: $bp-large) {
    padding-left: $space-xx-large;
  }
}

// Product column
.atc-banner--product-title {
  margin-top: 0;
  @include font($font-body);
  font-size: rem(20px);
  line-height: rem(28px);
  color: $color-black;
}

.atc--product {
  display: flex;
  align-items: center;
  max-width: rem(310px);
  margin: $space-x-large auto 0;
  text-align: left;
  vertical-align: middle;

  @include media($min: $bp-small) {
    max-width: 100%;
    margin-top: $space-large;
  }
}

.atc--product-image {
  display: inline-block;
  width: 80px;
  vertical-align: middle;

  svg,
  img {
    max-width: 100%;
  }
}

.atc--product-details {
  @include font-size-body;
  display: inline-block;
  width: calc(100% - #{$space-large + $local-image-width});
  margin-left: $space-large;
  vertical-align: middle;
  color: $color-medium-gray;
}

.atc--product-details--title {
  @include font($font-body);
  font-size: rem(14px);
  line-height: rem(24px);
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: $font-body-spacing;
  text-transform: inherit;
}

.atc--product-details--options {
  display: block;
  margin-top: $space-xxx-small;
}

.atc--product-details--price {
  @include font-size-body-small;
  display: block;
  margin-top: $space-xxx-small;
  line-height: 1.2;
}

// Cart column
.atc-banner--cart-subtotal {
  @include font-size-heading-4;
}

.atc-subtotal--label {
  font-size: rem(20px);
  line-height: rem(28px);
  color: $color-mild-gray;
}

.atc-subtotal--price {
  @include font($font-product-price);
  display: inline-block;
  margin-left: $space-xx-small;
  color: $color-text-headings;
}

.atc-banner--cart-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: $space-large;
  margin-bottom: -#{$space-xx-small};
  margin-left: -#{$space-xx-small};

  @include media($min: $bp-small) {
    justify-content: flex-start;
  }
}

.atc-button--viewcart,
.atc-button--checkout {
  @include button-size(medium);
  margin-bottom: $space-xx-small;
  margin-left: $space-xx-small;
  text-transform: capitalize;
}

.atc-button--viewcart {
  background: $color-white;
  color: $color-gray;
  border: 1px solid $color-light-gray;

  &:hover, &:focus {
    opacity: .75;
    background: $color-white !important;
    color: $color-gray !important;
    border: 1px solid $color-light-gray !important;
  }
}

.atc-button--checkout {
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    margin: -10px 10px -10px 0;
  }
}

// Close button
.atc-banner--close {
  @extend %button-reset;
  position: absolute;
  top: $gutter-outer-medium;
  right: $gutter-outer-medium;
  color: $color-text-regular-text;

  @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%;
  transition: text-shadow 0.275s linear; // animation duration + delay

  &.message--error {
    @extend %message--error;
  }

  .site-header--sticky & {
    position: absolute;
    top: 100%;
  }
}

.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;
  }
}

$local-social-link-darklight-color: $color-footer-text;
$local-social-link-darklight-background-color: rgba($color-footer-text, 0.15);

$local-social-link-inverted-color: $color-footer-background;
$local-social-link-inverted-background-color: $color-footer-text;

$local-social-link-colored-color: $color-white;
$local-social-link-colored-background-color: $color-black;


.social-icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: -4px;
  margin-right: -4px;
  margin-left: -4px;
}

.social-link {
  width: 36px;
  height: 36px;
  padding: 4px;
  overflow: hidden;
  line-height: 1.8;
  vertical-align: top;

  svg {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    transition: background-color 0.4s $ease-out-quad;
  }
}

.social-icons-dark-light {
  .social-link {
    color: $local-social-link-darklight-color;

    svg {
      background-color: $local-social-link-darklight-background-color;
    }
  }
}

.social-icons-inverted {
  .social-link {
    color: $local-social-link-inverted-color;

    svg {
      background-color: $local-social-link-inverted-background-color;
    }
  }
}

.social-icons-colored {
  .social-link {
    color: $color-white;
    transition: opacity .25s ease;

    &:hover {
      opacity: .75;
    }

    &.social-link-email svg {
      transform: translateY(.5px);
    }
  }
}

$local-link-padding: rem(3px);

.productgrid--sidebar {

  @include media($max: $bp-medium) {
    display: none;
  }

  @include media($min: $bp-medium) {
    float: left;
    width: $sidebar-width;
  }

  &.processing--filter {
    .filter-item a {
      cursor: default;
    }
  }
}

.productgrid--sidebar-section,
.productgrid--sidebar-title {
  margin-top: $space-xx-large;

  &:first-child {
    margin-top: 0;
  }
}

.productgrid--sidebar-title {
  @include font-size-heading-5;
  margin-bottom: $space-medium;
  color: $color-text-headings;
}

.productgrid--sidebar-title--small {
  @include font-body-bold;
  @include font-size-body-small;
  font-weight: bold;
  margin-top: $space-large;
  margin-bottom: $space-xxx-small;
  letter-spacing: $font-body-spacing;
  color: $color-gray;
  text-transform: none;
}

.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;

.productgrid--outer {
  @extend %layout-container, %clearfix;


  .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-layout-secondary-backgrounds;
  table-layout: fixed;
  border-radius: $container-border-radius-sm;

  .processing--filter & {
    * {
      cursor: default;
    }
  }

  @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: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: $space-large;
  padding: 0;

  .search--section & {
    @include media($max: $bp-small) {
      margin-top: $space-medium;
    }
  }

  @supports (display: grid) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: $grid-row-space-mobile $grid-column-space-mobile;

    @include media($min: $bp-smaller, $max: $bp-medium) {
      grid-template-columns: repeat(3, 1fr);
    }

    @include media($min: $bp-medium) {
      grid-template-columns: repeat(4, 1fr);
    }

    @include media($min: $bp-small, $max: $bp-larger) {
      grid-gap: $grid-row-space-desktop * 2 / 3 $grid-column-space-desktop * 2 / 3;
    }

    @include media($min: $bp-larger) {
      grid-gap: $grid-row-space-desktop $grid-column-space-desktop;
    }

    .layout--has-sidebar & {
      @include media($min: $bp-medium, $max: $bp-large) {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}

.productgrid--item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: flex-start;
  border-radius: $product-card-border-radius;
  transition: text-shadow 0.25s linear; // Sets transition speed for revealer

  .productgrid--no-spacing & {
    border-radius: 0;

    .productitem--image {
      border-radius: $product-card-border-radius;
    }
  }

  @include media($min: $bp-large) {
    &.animating,
    &.visible {
      z-index: 200;
    }

    &:hover {
      z-index: 300;
    }
  }

  .productgrid--items & {
    @include media($max: $bp-smaller) {
      width: calc(50% - #{$local-space-small / 2});
      margin-top: $local-space-small;
      margin-left: $local-space-small;

      &:nth-child(2n + 1) {
        margin-left: 0;
      }

      &: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;

      &:nth-child(3n + 1) {
        margin-left: 0;
      }

      &: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;

        &:nth-child(3n + 1) {
          margin-left: 0;
        }

        &: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;

        &:nth-child(4n + 1) {
          margin-left: 0;
        }

        &: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;

        &:nth-child(4n + 1) {
          margin-left: 0;
        }

        &:nth-child(-n + 4) {
          margin-top: 0;
        }
      }
    }

    @supports (display: grid) {
      width: auto;
      margin: 0;

      .layout--has-sidebar &,
      .layout--no-sidebar & {
        width: auto;
        margin: 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 {
  @include font-size-heading-5;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-text-headings;
  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 {
    @include font-size-body;
    line-height: 1.56;
    color: $color-text-regular-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;

    @supports (display: grid) {
      display: grid;
      grid-template-columns: 1fr;

      .productgrid--item {
        margin-top: 0;

        &:nth-of-type(n + 1) {
          margin-top: 0;
        }
      }
    }
  }

  .productgrid--item {
    width: 100%;
    margin: $gutter-content 0 0;

    .productitem--gridview-stock-level {
      display: none;
    }

    .productitem--action-qs {
      border-color: $color-buttons-secondary-button-border;

      &:not(.disabled):hover {
        border-color: $color-buttons-secondary-button-border-hover;
      }

      @include media($min: $bp-medium) {
        margin-top: $space-xx-small;
      }
    }
  }

  .productitem--image-link {
    grid-row-end: span 2;

    @include media($min: $bp-medium) {
      width: 25%;
    }

    .productitem--badge {
      display: none;
    }
  }

  .no-touch & .productitem--actions,
  .productitem--actions {
    position: static;
    display: flex;
    flex-wrap: wrap;
    max-width: 300px;
    margin-right: 0;
    margin-top: 0;
    padding-top: 0;
    padding-left: $gutter-outer;
    opacity: 1;
    visibility: visible;

    .productitem--action {
      display: block;
      flex: 1 0 auto;
      min-width: 47%;
      padding: 0;
      margin-top: $space-xx-small;
      margin-right: $space-xx-small;

      .productitem--action-trigger {
        border-radius: $button-border-radius;
      }

      &:nth-of-type(2n) {
        order: 1;
      }

      @include media($max: $bp-large) {
        &.productitem-action--desktop {
          display: none;
        }
      }
    }

    .productitem--listview-price {
      display: none;
      width: 100%;
      margin-bottom: $gutter-content;
      text-align: right;
    }

    .productitem--listview-badge {
      display: none;
      justify-content: flex-end;
      width: 100%;
      margin-bottom: rem(12px);

      .productitem--badge {
        position: relative;
        top: rem(-6px);
      }
    }

    @include media($max: $bp-medium) {
      // This fixes a weird iOS issue where the bottom button will get cut off
      max-height: rem(120px);
    }

    @include media($min: $bp-medium) {
      display: block;
      flex: 0 0 200px;

      .productitem--image-link {
        width: 25%;
      }

      .productitem--listview-price {
        display: block;
      }

      .productitem--listview-badge {
        display: flex;
      }

      .productitem--action {
        width: 100%;
        margin-top: 0.5rem;
        margin-right: 0;
        padding: 0;
      }
    }
  }

  .productitem--swatches {
    position: relative;
    order: 1;
    opacity: 1;
    visibility: visible;
  }

  .productitem--swatches-show-on-hover {
    padding: 0;
  }

  .productitem--description {
    order: 2;
  }

  .productitem {
    display: grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: auto minmax(0, 1fr);

    @include media($min: $bp-medium) {
      display: flex;
      justify-content: space-between;
    }
  }

  .productitem--info,
  .productgrid--no-spacing .productitem--info {
    display: flex;
    flex-direction: column;
    padding: 0;
    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) {
      @include font($font-product-card-title);
      @include font-size-product-card(18px);
      color: $color-text-headings;
    }
  }

  .price--compare-at.visible {
    display: block;

    .price--spacer {
      display: none;
    }
  }

  .productitem--description {
    @include media($min: $bp-medium) {
      display: block;
    }
  }

  .productitem--link {
    @extend %link--default;
  }
}

.shopify-section.collection--section {
  .breadcrumbs-container {
    margin-top: 0;
  }
}

.utils-filter,
.utils-sortby,
.utils-view {
  @include font-size-body-small;
  display: table-cell;
  width: 40%;
  padding: $space-xx-small $space-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;
  transition: color 0.1s ease;
}

.utils-filter-icon {
  display: table-cell;
  padding-right: 11px;
  vertical-align: middle;

  svg {
    display: block;
    width: 19px;
    height: 13px;
    transition: fill 0.1s ease;
  }
}

.utils-filter-text {
  @include font($font-body, $font-family: false, $font-weight: bolder);
  @include font-size-body-small;
  display: table-cell;
  letter-spacing: $font-body-spacing;
  vertical-align: middle;
}

.utils-sortby {
  font-size: 0;
  letter-spacing: 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 {
  @include font-body-bold;
  letter-spacing: $font-body-spacing;
  cursor: pointer;

  @include media($min: $bp-medium) {
    @include font-size-body-small;
    display: inline-block;
  }
}

.utils-sortby-button {
  @include font($font-body, $font-family: false, $font-weight: bolder);
  @include font-size-body-small;
  display: inline-block;
  letter-spacing: $font-body-spacing;
  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 {
    @include font-size-body-smaller;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
    color: $color-text-regular-text;
    border: 0;
    box-shadow: none;
    &:focus {
      outline: 5px auto -webkit-focus-ring-color;
    }
  }

  svg {
    color: $color-text-regular-text;
  }
}

.utils-sortby--modal {
  display: none;
}

.utils-sortby--modal-title {
  @include font($font-body, $font-family: false, $font-weight: bolder);
  @include font-size-heading-5;
  display: block;
  margin-bottom: $space-medium;
  letter-spacing: $font-body-spacing;
  color: $color-text-headings;
}

.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%;
  transition-duration: 0s;

  &:active,
  &:focus,
  &.utils-sortby--modal-button--active {
    &,
    &:hover {
      color: $color-layout-site-background;
      background: $color-text-links;
    }
  }
}

.utils-showby {
  display: flex;
  margin-top: 0;
  margin-bottom: 0;
  text-align: right;

  @include media($max: $bp-medium) {
    display: none;
  }

  li {
    display: block;
    list-style: none;

    &:not(:first-child) {
      margin-left: $space-small;
    }
  }
}

.utils-showby-title {
  @include font-body-bold;
  @include font-size-body-small;
  letter-spacing: $font-body-spacing;
}

.utils-showby-item {
  @extend %link--text;
  @include font-size-body-smaller;

  &:hover {
    color: $color-text-links;
    .processing--filter & {
      color: $color-text-regular-text;
    }
  }

  &.utils-showby-item--active {
    @extend %link--default;

    &:hover {
      .processing--filter & {
        color: $color-text-links;
      }
    }
  }
}

// Limit product grid modals to a reasonable width
.modal--productgrid-sort,
.modal--productgrid-filters {
  .modal-inner {
    max-width: rem(500px);
  }
}

.productgrid--outer:not(.layout--has-sidebar) .utils-sortby {
  text-align: left;
}

.utils-view {
  width: rem(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: flex;
  justify-content: flex-end;
  align-items: center;
}

.utils-viewtoggle {
  display: flex;
  align-items: center;

  @include media($min: $bp-medium) {
    margin-left: $gutter-content * 2;
  }
}

.utils-viewtoggle-label {
  @include font-body-bold;
  display: none;
  margin-right: 10px;
  letter-spacing: $font-body-spacing;

  @include media($min: $bp-medium) {
    display: block;
  }
}

.utils-viewtoggle-button {
  padding: 5px 13px 2px;
  margin-left: 0;
  color: lighten($color-text-regular-text, 40%);
  cursor: pointer;
  background: $color-layout-site-background;
  border: 0;
  border-top: 1px solid lighten($color-text-regular-text, 40%);
  border-bottom: 1px solid lighten($color-text-regular-text, 40%);
  outline: 0;
  transition: color .1s ease;
  -webkit-appearance: none;


  &:nth-of-type(1) {
    border-left: 1px solid lighten($color-text-regular-text, 40%);
    border-radius: 3px 0 0 3px;

    &.active {
      border-color: $color-text-links;
    }
  }

  &:nth-of-type(2) {
    border-right: 1px solid lighten($color-text-regular-text, 40%);
    border-radius: 0 3px 3px 0;

    &.active {
      border-color: $color-text-links;
    }
  }

  &:focus {
    box-shadow: 0 0 0 2px transparentize($color-text-regular-text, 0.8);

    &.active {
      border-color: $color-text-links-hover;
      box-shadow: 0 0 0 2px transparentize($color-text-links, 0.6);
    }
  }

  &:hover {
    &:not(.active) {
      .results--container:not(.processing--filter) & {
        color: lighten($color-text-regular-text, 20%);
      }
    }
  }

  &.active {
    color: $color-layout-site-background;
    background: $color-text-links;
  }

  @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-text-links;
      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
    margin-bottom: -1 * $local-space-small;
    overflow: hidden;
  }
}

.product-row {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 0;
  outline: 0;

  .product-recommendations--container & {
     .stock-level--text {
      @include font-size-body-smaller;
    }

    .product--stock-level {
      margin: $space-xx-small 0 $space-xxx-small;
    }
  }

  .featured-collection--container & {
    -webkit-margin-before: 0;
            margin-block-start: 0;
    -webkit-margin-after: 0;
            margin-block-end: 0;
    margin-bottom: 0;
  }

  &.flickity-enabled {
    cursor: grab;
  }

  .flickity-slider .productgrid--item {
    min-height: 100%;
  }

  .productgrid--item {
    width: $local-item-width;
    margin-top: 0;
    margin-right: $grid-column-space-mobile;

    &:last-child {
      margin-right: 0;
    }

    @include media($min: $bp-small, $max: $bp-larger) {
      margin-right: $grid-column-space-desktop * (2 / 3);

      &:last-child {
        margin-right: 0;
      }
    }

    @include media($min: $bp-large, $max: $bp-larger) {
      width: calc(25% - #{$grid-column-space-desktop * (2 / 3) * (3 / 4)});

      // 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
      .product-recommendations--container & {
        &:nth-child(5) {
          display: none;
        }
      }
    }

    @include media($min: $bp-large) {
      width: calc(25% - #{$grid-column-space-desktop * 3 / 4});
    }

    @include media($min: $bp-larger) {
      width: calc(20% - #{$grid-column-space-desktop * 4 / 5});
      margin-right: $grid-column-space-desktop;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &.product-row--no-spacing {
    .productgrid--item.animating-in .productitem--actions {
      transition: opacity 0.2s ease 0.1s;
    }

    .productgrid--item.animating-out .productitem {
      transition: height 0.2s ease 0.2s, box-shadow 0.25s ease;
    }

    .productgrid--item {
      border-radius: 0;
    }

    .productitem {
      flex-grow: 0;
      min-height: auto;
      padding: 0;
      background-color: transparent;
      overflow: visible;
      border-radius: 0;

      &:hover,
      &:focus {
        box-shadow: none;
      }
    }

    .productitem--image,
    .featured-collection--banner {
      border-radius: $product-card-border-radius;
    }

    .productitem--info,
    .productitem--swatches-container {
      background-color: transparent;
    }
  }

  &:not(.product-row--no-spacing) {
    .productitem--action-trigger {
      .no-touch & {
        @include media($min: $bp-large) {
          border-radius: 0;

          &.productitem--action-qs {
            border-right-color: $color-buttons-secondary-button-background;
            border-bottom-color: $color-buttons-secondary-button-background;
            border-left-color: $color-buttons-secondary-button-background;

            &:not(.disabled):hover {
              border-right-color: $color-buttons-secondary-button-background-hover;
              border-bottom-color: $color-buttons-secondary-button-background-hover;
              border-left-color: $color-buttons-secondary-button-background-hover;
            }
          }
        }
      }
    }
  }
}

$local-link-padding: rem(3px);

.productgrid--sidebar-item.filter-group {
  margin-top: $space-xx-small - $local-link-padding;

  &.productgrid--sidebar-item-swatches-grid,
  &.productgrid--sidebar-item-grid {
    margin: $space-small #{-$space-xx-small} #{-$space-xx-small} 0;

    .modal & {
      margin-top: $space-xx-small;
    }
  }
}

.productgrid--sidebar-item-swatches-grid,
.productgrid--sidebar-item-grid {
  display: flex;
  flex-wrap: wrap;

  .filter-item {
    margin: 0 $space-xx-small $space-xx-small 0;

    .modal & {
      &:first-child {
        margin-top: 0;
      }

      &.filter-item--toggle-more {
        border: 0;
      }
    }
  }

  .filter-item--toggle-more {
    width: 100%;
    margin-top: $space-xxx-small;
  }
}

.productgrid--sidebar-item-swatches-grid {
  line-height: 0;

  .filter-item {
    a {
      padding: 0;
      margin: 0;
    }

    .modal & {
      border-top: 0;

      a {
        padding: 0; // Modal adds padding to standard filter links, so need this here so it gets overridden.
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}

.productgrid--sidebar-item-swatches-list {
  .filter-item a {
    display: flex;
    align-items: center;
  }

  .filter-item--swatch-wrapper {
    margin-left: $local-link-padding * 3;
  }
}

.filter-item--swatch-wrapper {
  @include swatch-wrapper($swatches-size-sidebar-filter, $swatches-shape);

  .productgrid--sidebar-item-swatches-grid .filter-item--active & {
    @extend %swatch-wrapper-selected;
  }

  .productgrid--sidebar-item-swatches-grid &:hover::after {
    @extend %swatch-tooltip;
  }
}

.filter-item--swatch {
  @include swatch($swatches-size-sidebar-filter);

  .productgrid--sidebar-item-swatches-grid .filter-item--active & {
    @include swatch-selected($swatches-size-sidebar-filter);
  }
}

.filter-item--swatch-inner {
  @extend %swatch-inner;
  width: $swatches-size-sidebar-filter;
}

// Filter
.filter-item {
  @extend %link--text;
  position: relative;
  margin-top: $space-xxx-small;
  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 {
    @include font-size-body-small;
    position: relative;
    z-index: 100;
    display: inline-block;
    padding: $local-link-padding;
    margin-left: -1 * $local-link-padding;
    line-height: 1.15;
    color: currentColor;
    text-decoration: none;

    @include media($min: $bp-medium) {
      display: block;
    }

    &:hover {
      z-index: 101;
    }

    .modal & {
      padding: ($local-link-padding * 3) $local-link-padding;
    }

    &.filter-text--link {
      @extend %link--default;
      @include font-body-underline-links;
    }
  }

  .filter-text,
  .filter-icon--checkbox {
    display: inline-block;
    vertical-align: middle;
  }

  .filter-text {
    max-width: calc(100% - (#{$local-link-padding * 3 + rem(nth($checkbox-size, 1))}));
    margin-left: $local-link-padding * 3;

   .modal & {
      white-space: normal;
    }
  }
}

.productgrid--sidebar-item-grid {
  .filter-item:not(.filter-item--toggle-more) {
    @extend %form-control-base;
    width: auto;
    min-width: 40px;
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;

    .filter-text {
      max-width: 100%;
      margin-left: 0;
    }

    a {
      width: 100%;
      padding: $gutter-outer-small * 0.9 $gutter-outer-small;
      margin: 0;
    }

    &.filter-item--active {
      color: $color-text-links;
      background-color: rgba($color-text-links, 0.1);
      border-color: rgba($color-text-links, 0.8);
    }
  }
}

.filter-item--inactive {
  a {

    &:hover {
      color: $color-text-regular-text;
    }
  }
}

.filter-item--active {
  @extend %link--default;
  transition-duration: 0s;

  a {
    @include font-body-bold;
    letter-spacing: $font-body-spacing;

    &,
    &:hover {
      color: $color-text-links;
    }

    .filter-icon--checkbox {
      @extend %icon-checkbox--active;
    }
  }
}

.filter-group--grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  white-space: normal;

  .active-tag-group {
    margin-right: 10px;

    .filter-item--grid {
      margin-right: 1px;
      margin-left: 0;
    }

    .filter-text {
      color: $color-white;
    }
  }
}

.filter-item--grid-simple,
.filter-item--grid {
  display: inline-block;
  margin-top: $space-xx-small;
  margin-right: $space-xx-small;
}

.filter-item--grid {

  a {
    display: block;
    color: $color-layout-site-background;
    background: $color-text-links;
  }

  .filter-icon--remove,
  .filter-text {
    @include font-size-body-small;
    display: inline-block;
    color: currentColor;
    vertical-align: middle;
  }

  .filter-text {
    @include font-body-bold;
    padding: rem(7px) rem(5px) rem(7px) rem(10px);
    letter-spacing: $font-body-spacing;
    color: $color-white;
  }

  .filter-icon--remove {
    padding: rem(10px) rem(10px) rem(10px) $space-xx-small;

    svg {
      display: block;
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
  }
}

.filter-item--grid-simple {
  @include media($max: $bp-medium) {
    width: 100%;
    margin-top: $space-small;
  }

  a {
    @extend %link--default;
    @include font-size-body-small;
    padding: rem(5px);
    background-color: transparent;

    @include media($max: $bp-medium) {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

$local-indentation: rem(13px);

.productgrid--sidebar-menu {

  .navmenu-link {
    @extend %link--text;
  }

  .navmenu-link--active {
    @extend %link--default;
    @include font($font-body, $font-family: false, $font-weight: bolder);
    letter-spacing: $font-body-spacing;
  }

  .navmenu-item {
    display: block;
    margin-top: rem(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 {
      @include font-size-body-smaller;
      margin-top: rem(7px);
    }
  }
}

$local-form-height: rem(66px);
$local-form-height-mobile: rem(50px);
$local-input-padding-small: rem(8px);
$local-input-padding-large: rem(16px);
$local-button-size: rem(28px) + (rem(2px) * 2); // size + (padding * 2)

.productgrid--search {
  position: relative;
  z-index: 1;

  .no-breadcrumbs & {
    margin-top: $gutter-outer-small;
  }
}

.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-text-headings;

  @include media($max: $bp-small) {
    height: $local-form-height-mobile;
    font-size: $font-h4-size;
  }

  &:-ms-input-placeholder {
    color: currentColor;
    opacity: transparentize($color-text-headings, 0.4);
  }

  &::-ms-input-placeholder {
    color: currentColor;
    opacity: transparentize($color-text-headings, 0.4);
  }

  &::placeholder {
    color: currentColor;
    opacity: transparentize($color-text-headings, 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: rem(2px);
  margin-top: -1 * $local-button-size / 2;

  .search-icon--inactive {
    width: 100%;
    height: 100%;
    color: $color-buttons-primary-button-background;
  }

  .search-icon--active {
    color: transparentize($color-text-headings, 0.8);
  }
}

$local-padding-small: rem(15px);

// Z-index stack, highest to lowest
$local-stack: (100, 50);

.productitem {
  position: relative;
  flex-grow: 1;
  width: 100%;
  min-height: 100%;
  padding: $local-padding-small;
  background: $color-product-cards-background;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-radius: $product-card-border-radius;
  transition: height 0.25s ease, box-shadow 0.25s ease;

  .productgrid--no-spacing & {
    flex-grow: 0;
    min-height: auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
  }

  @include media($min: $bp-large) {
    .productgrid--item.animating &,
    .productgrid--item.visible & {
      position: absolute;
    }

    .productgrid--items:not(.productgrid--no-spacing) .productgrid--item.animating & {
      overflow: hidden;
    }
  }

  &:hover,
  &:focus,
  .visible & {
    .no-touch & {
      box-shadow: 0 4px 7px rgba(0, 0, 0, 0.1);
    }

    .productgrid--no-spacing & {
      box-shadow: none;
    }

    .productitem--image-alternate ~ .productitem--image-primary {
      visibility: hidden;
    }

    .productitem--image-alternate {
      visibility: visible;
    }
  }
}

.productitem--badge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  font-size: rem(13px);
}

.productitem--info {
  position: relative;
  z-index: nth($local-stack, 1);
  padding: $space-x-small $local-padding-small 0;
  margin-right: -$local-padding-small;
  margin-left: -$local-padding-small;
  background-color: $color-product-cards-background;

  .productgrid--no-spacing & {
    padding: $space-x-small 0 0;
    margin-right: 0;
    margin-left: 0;
    background-color: transparent;

    .productitem--swatches-container {
      background-color: transparent;
    }
  }

  .productitem--emphasis & {
    padding-top: 0;
  }
}

.productitem--price {
  @include font($font-product-price);
  letter-spacing: 0;

  &,
  + .productitem--title {
    margin-top: $space-xxx-small;
  }

  .price--spacer {
    display: block;
    height: rem(13px) * 1.38;
  }

  .price--main {
    .productitem--emphasis & {
      @include font-size-body-larger; // 22px
      margin-top: $space-xxx-small;

      .price--varies & {
        @include font-size-body-large; // 20px
      }

      .price--label {
        @include font-size-body-medium; // 18px
      }
    }

    .productitem--sale & {
      color: $color-products-sale-price;
    }
  }
}

.productitem--title {
  margin: $space-xxx-small 0 0;
  @include font($font-product-card-title);
  font-size: rem(14px);
  line-height: rem(24px);
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;

  a {
    @extend %link--text;
    color: $color-gray;
  }
}

.productitem--vendor {
  @include font($font-product-vendor);
  @include capitalize($font-product-capitalize);
  @include font-size-body-smallest($font-product-capitalize);
  margin: $space-xxx-small 0 0;
  display: block;
  line-height: 1.3125;
  letter-spacing: $font-product-vendor-spacing;
  color: $color-products-vendor-name;
  white-space: normal;

  .productitem--emphasis & {
    margin-top: $space-xxx-small;
  }
}

.productitem--ratings {
  .spr-badge {
    margin-top: rem(6px);
    margin-bottom: $space-xxx-small;
    line-height: 1;
  }

  .productitem--info & {
    .spr-badge {
      margin-bottom: 0;
    }
  }
}

.productitem--actions {
  display: flex;
  flex-wrap: wrap;
  z-index: nth($local-stack, 2);
  margin: 0 -2.5% 0 0;
  padding-top: $space-x-small;
  text-align: center;
  overflow: hidden;

  .product--stock-level {
    margin: $space-small 0;
  }

  .productitem--listview-price,
  .productitem--listview-stock-level,
  .productitem--listview-badge {
    display: none;
  }

  .no-touch & {
    @include media($min: $bp-large) {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      margin: 0;
      visibility: hidden;
      opacity: 0;
      border-radius: 0 0 $product-card-border-radius $product-card-border-radius;
    }
  }

  .productgrid--no-spacing & {
    background: $color-layout-site-background;
  }

  .product-row--no-spacing &,
  .productgrid--no-spacing & {
    @include media($min: $bp-large) {
      margin-right: -2.5%;
      border-radius: 0;
    }
  }
}

.productitem--actions,
.productitem--swatches-show-on-hover {
  transition: opacity 0.20s ease 0s;

  @include media($min: $bp-large) {
    .productgrid--item:hover,
    .productgrid--item.animating &,
    .productgrid--item.visible & {
      visibility: visible;
    }

    .productgrid--item.animating-in:not(.animating-out) & {
      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;
    }
  }
}

.productitem--action {
  flex: 1 0 auto;
  min-width: 47.5%;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
  overflow: hidden;
  border-radius: $button-border-radius;

  .productgrid--items:not(.productgrid--no-spacing) &,
  .product-row:not(.product-row--no-spacing) & {
    .no-touch & {
      @include media($min: $bp-large) {
        min-width: 50%;
        margin-right: 0;
        margin-bottom: 0;
        overflow: visible;
        border-radius: 0;
      }
    }
  }

  &.productitem-action--desktop {
    @include media($max: $bp-large) {
      display: none;
    }
  }
}

.productitem--action-trigger {
  display: block;
  width: 100%;
  padding-right: $space-xxx-small;
  padding-left: $space-xxx-small;
  text-align: center;
  vertical-align: middle;

  &.productitem--action-atc {
    @extend %atc-button;
  }

  .productgrid-listview & {
    border-radius: $button-border-radius;
  }
}

.productgrid--items.productgrid--no-spacing {
  .productgrid--item.animating-in .productitem--actions {
    transition: opacity 0.2s ease 0.1s;
  }

  .productgrid--item.animating-out .productitem {
    background: transparent;
    transition: background-color 0.2s ease, height 0.2s ease 0.3s, box-shadow 0.25s ease;
  }
}

.productgrid--outer.productgrid-gridview {
  .productitem--gridview-stock-level {
    svg {
      display: none;
    }

    .stock-level--text {
      @include font-size-body-smaller;
    }

    .product--stock-level {
      margin: $space-xx-small 0 $space-xxx-small;
    }
  }

  .productgrid--items:not(.productgrid--no-spacing) {
    .productitem--action-trigger {
      .no-touch & {
        @include media($min: $bp-large) {
          border-radius: 0;

          &.productitem--action-qs {
            border-right-color: $color-buttons-secondary-button-background;
            border-bottom-color: $color-buttons-secondary-button-background;
            border-left-color: $color-buttons-secondary-button-background;

            &:not(.disabled):hover {
              border-right-color: $color-buttons-secondary-button-background-hover;
              border-bottom-color: $color-buttons-secondary-button-background-hover;
              border-left-color: $color-buttons-secondary-button-background-hover;
            }
          }
        }
      }
    }
  }
}

.productgrid--outer.productgrid-listview {
  .productitem--listview-stock-level {
    display: block;
    text-align: left;

    .product--stock-level {
      justify-content: flex-end;
      margin-top: $space-xx-small;
    }

    .stock-level--text {
      @include font-size-body-small;
    }
  }
}

.productitem--action-atc {
  &.disabled {
    color: $color-buttons-sold-out-button-text;
    background-color: $color-buttons-sold-out-button-background;
    border: 1px solid $color-buttons-sold-out-button-background;
  }
}

.productitem--swatches {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: start;
  justify-content: flex-start;
  height: $swatches-size-product-card;
  margin-top: $space-xxx-small;
  margin-bottom: $space-small;
  overflow: hidden;

  .productgrid--outer:not(.productgrid-listview) .productitem--emphasis & {
    margin-top: $space-x-small;
  }

  .productitem--swatches-summary + & {
    margin-top: $space-xx-small;
  }

  &.processed {
    overflow: visible;
  }
}

$swatch-gap: 6px;
.productitem--swatches-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-right: #{$swatches-size-product-card * 1.5};
  margin-bottom: -$swatch-gap;
  background: $color-product-cards-background;

  .productitem--swatches-expanded & {
    padding-bottom: $space-x-small;
  }
}

.productitem--swatches-swatch-wrapper {
  @include swatch-wrapper($swatches-size-product-card);
  margin-right: $swatch-gap;
  margin-bottom: $swatch-gap;
  overflow: hidden;

  &:hover::after {
    @extend %swatch-tooltip;
  }

  .productitem--swatches-input:checked + & {
    @extend %swatch-wrapper-selected;

    .productitem--swatches-swatch {
      @include swatch-selected($swatches-size-product-card);
    }
  }
}

.productitem--swatches-count-button {
  @include font-size-body-smaller;
  @include font($font-body, $font-weight: bolder);
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  min-width: $swatches-size-product-card * 1.5;
  min-height: $swatches-size-product-card;
  color: $color-text-regular-text;
  cursor: pointer;
  background-color: $color-layout-site-background;
  border: 1px solid $color-border-soft;

  @if ($swatches-shape == circle) {
    border-radius: 50%;
  } @else if ($swatches-size-product-card < 26px) {
    border-radius: $form-border-radius-sm * 0.75;
  } @else {
    border-radius: $form-border-radius-sm;
  }
}

.productitem--swatches-count {
  text-align: center;
  outline: none;
}

.productitem--swatches-expanded {
  .productitem--swatches-count-button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 2px;
    background: $color-text-regular-text;
    content: "";
    transform: translate(-50%, -50%);
  }

  .productitem--swatches-count {
    display: none;
  }
}

.productitem--swatches-swatch-hidden {
  display: none;

  .productitem--swatches-expanded & {
    display: block;
  }
}

.user-is-tabbing .productitem--swatches-input:focus ~ .productitem--swatches-swatch-wrapper {
  box-shadow: 0 0 2px 2px $color-forms-selected-input;
}

.productitem--swatches-input {
  position: absolute;
  opacity: 0;
}

.productitem--swatches-swatch {
  @include swatch($swatches-size-product-card);
}

.productitem--swatches-swatch-inner {
  @extend %swatch-inner;
  width: $swatches-size-product-card;
}

.productitem--swatches-input:disabled {
  + .productitem--swatches-swatch-wrapper {
    @extend %swatch-wrapper-disabled;

    .productitem--swatches-swatch {
      @extend %swatch-disabled;
    }

    .productitem--swatches-swatch-inner {
      @extend %swatch-inner-disabled;
    }
  }

  &:checked {
    + .productitem--swatches-swatch-wrapper {
      @extend %swatch-wrapper-disabled-selected;
    }
  }
}

.productitem--swatches-show-on-hover {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0 $local-padding-small;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  overflow: visible;

  .productgrid--no-spacing & {
    padding: 0 0 $space-xx-small;

    &.productitem--swatches {
      background: $color-layout-site-background;
    }
  }

  .productitem--swatches-container {
    width: 100%;
    padding-right: 0;
    padding-bottom: 0;
  }
}

.productitem--swatches-summary {
  @include font-size-body-tiny;
  margin-top: $space-xx-small;
  line-height: 1.3125;
  color: $color-text-light-text;
}

.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: 100%;
    height: auto;
    margin: 0 auto;
    background-color: $color-products-product-image-backgrounds;
    visibility: hidden;
  }

  .productitem--image-alternate,
  .productitem--image-swatch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .productitem--image-primary {
    visibility: visible;
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .imagestyle--small &,
  .imagestyle--medium &,
  .imagestyle--large & {
    .in-theme-editor & {
      background-color: $color-layout-secondary-backgrounds;
    }

    img,
    svg {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 100%;
      transform: translate(-50%, -50%);
      object-fit: contain;
    }

    &.product-item-image-no-objectfit {
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;

      img {
        display: none;
      }

      [data-rimg-canvas] {
        display: none;
      }
    }
  }

  .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%;
      object-fit: cover;
    }

    .productitem--image-alternate,
    .productitem--image-swatch {
      transform: translate(-50%, 0);
    }

    &.product-item-image-no-objectfit {
      background-position: center;
      background-size: cover;

      img {
        display: none;
      }

      [data-rimg-canvas] {
        display: none;
      }
    }
  }
}

.productitem-quickshop {
  display: none;
}

.modal--quickshop-full {
  display: none;
  padding: rem(30px);

  .modal-inner {
    max-width: rem(600px);
    padding: 2.5rem $space-small $space-large;
  }

  .product--outer {
    display: block;

    @include media($min: $bp-large) {
      display: flex;
    }
  }

  .product-gallery,
  .product-main {
    display: block;
    padding: 0;
    white-space: normal;
  }

  .product-gallery--slider {
    position: relative;
    width: 100%;
    padding: 0;
  }

  .product-galley--image-background {
    width: 100%;
    position: relative;
  }

  .product-gallery--navigation {
    margin-left: 0;

    @include media($max: $bp-small) {
      padding-left: 1px; // This is to fix a weird glitch on iOS
    }
  }

  @include media($min: $bp-xxs) {
    .modal-inner {
      padding-left: $space-medium;
      padding-right: $space-medium;
    }
  }

  @include media($min: $bp-smaller) {
    .modal-inner {
      padding: 2.5rem $space-x-large $space-large;
    }

    .product-gallery,
    .product-main {
      display: block;
      width: 100%;
    }

    .product-main {
      margin: $space-large 0 0;
    }
  }

  @include media($min: $bp-large) {
    .modal-inner {
      max-width: rem(840px);
      padding: $space-xx-large;
    }

    &.quickshop-thumbs-left {
      .modal-inner {
        max-width: rem(960px);
      }
    }

    .product-gallery {
      display: inline-block;
      width: 47%;
    }

    .product-main {
      display: inline-block;
      width: 46%;
      margin-top: 0;
      margin-left: 7%;
    }
  }
}

.modal--quickshop-slim {
  padding: rem(30px);

  .product-ratings,
  .product-vendor,
  .product-gallery,
  .product-description,
  .share-buttons {
    display: none;
  }

  .modal-inner {
    max-width: rem(500px);
    padding: $space-large $space-small;
  }

  .product-main {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    white-space: normal;
  }

  .product-details {
    margin-top: 0;
  }

  .product-title {
    padding-right: 1rem;
  }

  @include media($min: $bp-xxs) {
    .modal-inner {
      padding: $space-large $space-medium;
    }
  }

  @include media($min: $bp-smaller) {
    .modal-inner {
      padding: $space-x-large;
    }
  }

  @include media($min: $bp-large) {
    padding: rem(10px);

    .modal-inner {
      padding: $space-xx-large;
    }
  }
}

.product-info {
  padding-bottom: 10px;
}

.product-details {
  color: $color-text-regular-text;

  @include media($max: $bp-small) {
    margin-top: $space-large;
    margin-bottom: $space-medium;
  }
}

.product-title {
  @include font($font-product-price);
  @include font-size-heading-3;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-text-headings;
  line-height: 1.2;

  @include media($min: $bp-small) {
    @include font-size-heading-1;
  }

  a {
    color: $color-text-headings;
    text-decoration: none;
  }
}

.product-vendor {
  @include font($font-product-vendor);
  @include capitalize($font-product-capitalize);
  font-size: rem(12px);
  line-height: rem(16px);
  letter-spacing: $font-product-vendor-spacing;
  margin-top: $space-xxx-small;
  line-height: 1.6;
  color: $color-text-light-text;

  a {
    @extend %link--default;
    color: $color-products-vendor-name;

    &:hover {
      color: morph($color-products-vendor-name);
    }
  }
}

.product-weight {
  font-size: rem(12px);
  line-height: rem(16px);
  color: $color-text-light-text;

  p {
    margin: 0;
  }
}

.product-ratings {
  margin-top: $space-xx-small;

  .spr-badge {

    .spr-badge-caption {
      margin-left: $space-xx-small;
    }

    .spr-badge-starrating {
      position: relative;
      top: -1px;

      .spr-icon {
        font-size: 0;
        letter-spacing: 0;

        &::before {
          @include font-size-body-smaller;

          @include media($min: $bp-small) {
            font-size: rem($font-body-size + 1);
          }
        }
      }
    }
  }
}

.product-pricing {
  @include font($font-product-price);
  display: flex;
  flex-wrap: wrap;
  margin-top: $space-x-small;
  margin-bottom: -1 * $space-xxx-small;
  letter-spacing: 0;

  .product-free-shipping {
    width: 100%;
    font-weight: 600;
    font-size: rem(12px);
    line-height: rem(16px);

    p {
      display: flex;
      align-items: center;
      margin-top: 0;
      margin-bottom: 8px;

      img {
        margin-right: 8px;
        height: 16px;
        width: auto;
      }
    }
  }

  @include media($min: $bp-small) {
    margin-top: $space-small;
  }
}

.product-sku {
  margin: 0;
  font-size: rem(12px);
  line-height: rem(16px);
  color: $color-text-light-text;

  &.product-sku--empty {
    display: none;
  }

  .modal & {
    margin-bottom: $gutter-outer-small;
  }
}

.product--badge {
  display: inline-block;
  height: 100%;
  margin-right: $space-small;
  margin-bottom: $space-xxx-small;
  font-size: rem(13px);
  white-space: nowrap;
}

.product--price {
  display: flex;
  flex-grow: 0;
  flex-shrink: 1;
  flex-wrap: wrap;
  vertical-align: middle;

  .price--compare-at,
  .price--main {
    @include font-size-heading-4;
    flex-basis: auto;
    flex-grow: 1;
    margin-bottom: $space-xxx-small;
    line-height: 1.15;
    white-space: nowrap;

    @include media($min: $bp-small) {
      font-size: rem($font-size-base * 1.25);
    }
  }

  .price--main {
    display: inline-block;
  }

  .price--compare-at {
    margin-right: $space-xx-small;

    &.visible + .price--main {
      color: $color-products-sale-price;
    }
  }
}

.product-section--container {
  @extend %layout-container;
  margin-top: $space-xx-large;

  @include media($min: $bp-large) {
    margin-top: $space-xxx-large;
  }
}

.product-section--title {
  @include font-size-heading-4;
  margin-bottom: $space-medium;
  color: $color-text-headings;

  @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;
  }
}

.product-message--container {
  //scss-lint:disable SpaceAfterPropertyColon
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
  opacity: 0;
  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;
  outline: none;
}

.price--compare-at {
  display: none;
  font-size: rem(13px);
  line-height: 1.38;
  color: $color-products-compare-at-price;
  text-decoration: line-through;

  &.visible {
    display: inline-block;
  }
}

.price--main {
  @include font-size-body;
  line-height: rem(23px);
  color: $color-products-regular-price;
}

.badge--soldout,
.badge--sale {
  @include font-body-bold;
  padding: $space-xxx-small rem(5px);
  letter-spacing: $font-body-spacing;
  text-decoration: none;
  vertical-align: middle;
}

.badge--soldout {
  color: $color-products-sold-out-badge-text;
  background-color: $color-products-sold-out-badge;
  border: 0;
}

.badge--sale {
  color: $color-products-sale-badge-text;
  background-color: $color-products-sale-badge;
}

.product-reviews--content {

  .spr-container {
    padding: 0;
    border: 0;
  }

  // Header
  .spr-header {
    padding: $space-large 0;
  }

  .spr-header-title {
    @include font-size-heading-4;
    margin-bottom: 0;
    color: $color-text-headings;
  }

  @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;

    .spr-starrating {
      display: block;
      margin-right: $space-xxx-small;

      @include media($min: $bp-small) {
        display: inline-block;
      }

      .spr-icon {
        font-size: 0;
        letter-spacing: 0;

        &::before {
          @include font-size-body-medium;
          line-height: 1.333;
        }
      }
    }
  }

  .spr-summary-caption {
    @include font-size-body;
    display: block;
    margin-top: $space-x-small;
    line-height: 1.5;
    color: $color-text-regular-text;
    vertical-align: bottom;

    @include media($min: $bp-small) {
      display: inline-block;
      margin-top: ($font-h3-size - rem($font-body-size)) / 2;
    }

    span.spr-summary-actions-togglereviews {
      color: $color-text-light-text;
    }

    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 0;
    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 {
      @include font-size-heading-4;
      color: $color-text-headings;
    }

    form {
      max-width: rem(640px);
      margin-right: auto;
      margin-left: auto;
    }

    .spr-form-label {
      @extend %form-label;
      @include font($font-body, $font-family: false, $font-weight: false);
      display: block;
      margin-top: $space-large;
      letter-spacing: $font-body-spacing;
      color: $color-text-regular-text;
    }

    .spr-form-contact-name .spr-form-label {
      margin-top: $space-small;
    }

    .spr-form-input {
      display: block;
      margin-top: $space-x-small;
      &:-ms-input-placeholder {
        transform: translateY(0);
      }
      &::-ms-input-placeholder {
        transform: translateY(0);
      }
      &::placeholder {
        transform: translateY(0);
      }
    }

    .spr-form-input-text,
    .spr-form-input-email,
    .spr-form-input-textarea {
      @extend %form-control-base, %form-control-input;
      padding-top: rem(15px);
      padding-bottom: rem(15px);
      margin-bottom: 0;

      &:-ms-input-placeholder {
        color: $color-forms-input-text;
        opacity: 0.4;
      }

      &::-ms-input-placeholder {
        color: $color-forms-input-text;
        opacity: 0.4;
      }

      &::placeholder {
        color: $color-forms-input-text;
        opacity: 0.4;
      }

      &.spr-form-input-error {
        border-color: $color-error;
      }
    }

    .spr-form-input-textarea {
      @extend %form-control-textarea;
    }

    .spr-form-review-rating {
      .spr-icon {
        font-size: 0;
        letter-spacing: 0;

        &::before {
          @include font-size-heading-3;
        }
      }
    }

    .spr-form-actions {
      margin-top: $space-large;
    }

    .spr-button-primary {
      @include button-size(medium);
      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 0;
      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 {
        @include font-size-heading-4;
        margin-top: $space-xx-small;
        color: $color-text-headings;
      }

      .spr-review-header-byline {
        @include font-size-body-small;
        display: block;
        margin-top: $space-xx-small;
        margin-bottom: 0;
        font-style: font-style($font-body);
        color: $color-text-light-text;
        opacity: 1;

        strong {
          @include font($font-body, $font-family: false, $font-weight: initial);
          letter-spacing: $font-body-spacing;
        }
      }

      .spr-review-content {
        margin-top: $space-x-small;
        margin-bottom: 0;

        .spr-review-content-body {
          @include font-size-body;
          line-height: 1.625;
        }
      }

      .spr-review-reply {
        padding: $space-small;
        margin-top: $space-medium;
        margin-bottom: 0;
        background-color: $color-layout-secondary-backgrounds;

        .spr-review-reply-body {
          @include font-size-body-smaller;
        }
      }

      .spr-review-footer {
        margin-top: $space-medium;

        a {
          @extend %link--default;
          font-size: rem(12px);
        }
      }
    }

    // Review pagination
    .spr-pagination {
      padding: $space-large 0 0;
      clear: both;
      border-top: 0;

      a {
        @extend %link--default;
        padding: 0 rem(9px);
      }
    }

    .spr-pagination-page {
      display: inline-block;
      color: $color-text-regular-text;

      &.is-active {
        padding: rem(9px);
      }
    }

    .spr-pagination-prev,
    .spr-pagination-next {
      position: relative;
      right: auto;
      left: auto;
      display: inline-block;
    }
  }
}

$local-outer-padding-medium: 40px;
$local-outer-padding-small: 25px;
$local-flickity-button-size: 36px;

.product-recently-viewed--section {
  position: relative;

  &.hide {
    display: none;
  }

  .flickity-prev-next-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: $local-flickity-button-size;
    height: $local-flickity-button-size;
    background: $color-layout-site-background;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 50%;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1), fill 0.3s;
    background-clip: padding-box;

    @include media($max: $bp-small) {
      display: none;
    }

    svg {
      top: 10px;
      left: 10px;
      display: block;
      width: 16px;
      height: 16px;
      fill: $color-text-regular-text;
    }

    &:disabled {
      display: none;
    }

    &:hover {
      opacity: 1;
      transform: scale(1.2);
    }

    &.next {
      right: #{-$local-flickity-button-size / 2};
    }

    &.previous {
      left: #{-$local-flickity-button-size / 2};
    }
  }
}

.product-recently-viewed-wrapper {
  position: relative;
  padding: $space-large $local-outer-padding-small 0;
  background-color: $color-layout-secondary-backgrounds;
  border-radius: $container-border-radius;

  @include media($min: $bp-medium) {
    padding: $space-x-large $local-outer-padding-medium 0;
  }
}

.product-recently-viewed--content {
  display: flex;
  width: 100%;
  padding: 0;
  // bottom padding is baked into this element so hover shadows are not clipped
  padding-bottom: $space-large;
  margin: $space-x-large auto 0;
  overflow: hidden;
  outline: 0;

  @include media($min: $bp-medium) {
    padding-bottom: $space-x-large;
  }

  @include media($max: $bp-small) {
    width: calc(100% + 2 * #{$local-outer-padding-small});
    margin-right: #{-$local-outer-padding-small};
    margin-left: #{-$local-outer-padding-small};
  }

  &.product-recently-viewed--no-spacing {
    .product-recently-viewed-card {
      background-color: transparent;
    }

    .productitem {
      padding: 0;
      background-color: transparent;

      &:hover,
      &:focus {
        box-shadow: none;
      }
    }

    .productitem--info,
    .productitem--swatches-container {
      background-color: transparent;
    }
  }
}

.product-recently-viewed-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.product-recently-viewed-heading {
  @include font-size-heading-4;
  margin: 0;
  margin-right: #{$gutter-content / 2};
  color: $color-text-headings;

  @include media($max: $bp-medium) {
    margin-bottom: $space-xxx-small;
  }
}

.product-recently-viewed-clear {
  @extend %link--default;
  @include font($font-body);
  @include font-body-underline-links;
  padding: 0;
  font-size: $button-small-size;
  letter-spacing: $font-body-spacing;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.product-recently-viewed-card {
  @include font-size-body-small;
  width: rem(175px);
  padding: 0;
  height: auto;
  margin-right: $grid-column-space-mobile;
  margin-bottom: 4px;
  background: $color-white;
  transition: transform 0s, opacity 0.25s;
  list-style-type: none;

  & .productitem {
    padding-top: 10px;
  }

  &.hide-card {
    opacity: 0;
  }

  &.move-card {
    transform: translateX(calc(-100% - #{$gutter-outer-small}));
    transition: transform 0.5s, opacity 0.25s;
  }

  @include media($max: $bp-small) {
    // We can't use margins here because flickity
    // auto-scrolls to the padding box
    &:first-child {
      width: rem(175px + $local-outer-padding-small);
      padding-left: $local-outer-padding-small;
      background-clip: content-box;
    }

    &:last-child {
      width: rem(175px + $local-outer-padding-small);
      padding-right: $local-outer-padding-small;
      background-clip: content-box;
    }
  }

  @include media($min: $bp-small, $max: $bp-larger) {
    margin-right: $grid-column-space-desktop * 2 / 3;
  }

  @include media($min: $bp-medium) {
    width: rem(200px);
  }

  @include media($min: $bp-larger) {
    margin-right: $grid-column-space-desktop;
  }
}

.product-recently-viewed-card-time {
  @include font-size-body-smallest;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $space-x-small;
  line-height: 1;
  opacity: 0.7;

  @include media($min: $bp-medium) {
    @include font-size-body-smaller;
  }
}

.product-recently-viewed-card-remove {
  padding: 5px;
  margin-right: -5px;
  color: $color-text-regular-text;
  cursor: pointer;
  background-color: transparent;
  border: 0;

  svg {
    display: block;
    fill: currentColor;
  }
}

.product-recently-viewed-card-image {

  &.product-recently-viewed-card-image-placeholder {
    background-color: $color-placeholder-background;
  }
}

.product-recently-viewed-card-price {
  padding: $gutter-content 0 $gutter-outer-small / 2;

  .price--main {
    color: $color-text-links;
  }

  .product--badge {
    @include font-size-body-smaller;
  }
}

.product-recently-viewed-card-title {
  position: relative;
  display: block;
  height: 45px;
  color: $color-text-regular-text;
  @include font-size-body-small;
  line-height: 1.5;
  text-decoration: none;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    width: 40%;
    height: rem(20px);
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba($color-white, 0), $color-white 50%);
    text-align: right;
  }
}

$local-thumbnail-space: rem(3px);
$local-mobile-thumb-space: rem(2px);

.product-gallery {
  position: relative;
}

.product-gallery--viewer {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.2s ease;

  @include media($min: $bp-small) {
    margin-top: 0;
  }

  @include media($min: $bp-large) {
    .hover-zoom-enabled & {
      cursor: crosshair;
    }
  }

  .click-to-zoom-enabled & {
    cursor: pointer;
  }

  &.product-gallery--has-media {
    .product-gallery--media:not([data-gallery-selected="true"]) {
      position: absolute;
      opacity: 0;
    }
  }
}

.product-gallery:not([data-product-gallery-aspect-ratio="natural"]) {
  .product-gallery--image-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-size: cover;
  }
}

[data-product-gallery-aspect-ratio="natural"] {
  .product-gallery--image-background {
    background-size: 0;
  }

  .product-gallery--external_video {
    padding-bottom: 56.25%; // 16:9, most common YT aspect ratio
  }
}

[data-product-gallery-aspect-ratio="short"],
[data-product-gallery-aspect-ratio="square"],
[data-product-gallery-aspect-ratio="tall"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="short"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="square"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="tall"] {
  .product-gallery--media {
    height: 0;
  }
}

[data-product-gallery-aspect-ratio="short"],
[data-product-gallery-aspect-ratio="square"],
[data-product-gallery-aspect-ratio="tall"] {
  .product-gallery--loaded-image {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    transform: translate(-50%, -50%);
  }
}

[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="short"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="square"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="tall"] {
  .product-gallery--media {
    img {
      position: absolute;
      top: 0;
      left: 0;
      overflow-x: hidden;
      transform: none;

      &[data-rimg="noscript"] {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      &[data-rimg="lazy"],
      &[data-rimg="loading"],
      &[data-rimg="loaded"] {
        @extend %show-for-sr;
      }
    }
  }
}

[data-product-gallery-aspect-ratio="short"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="short"] {
  .product-gallery--media {
    padding-bottom: 75%;
  }
}

[data-product-gallery-aspect-ratio="square"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="square"] {
  .product-gallery--loaded-image {
    height: 100%;
  }

  .gallery-image-wide .product-gallery--loaded-image {
    height: auto;
    width: 100%;
  }


  .product-gallery--media {
    padding-bottom: 100%;
  }
}

[data-product-gallery-aspect-ratio="tall"],
[data-product-gallery-image-crop][data-product-gallery-aspect-ratio="tall"] {
  .product-gallery--media {
    padding-bottom: 150%;
  }
}

.product-gallery--media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  outline: none;
  opacity: 0;
  transition: opacity 0.2s ease;

  video,
  .video,
  .shopify-model-viewer-ui {
    display: none;
  }

  &[data-gallery-selected="true"] {
    video,
    .video,
    .shopify-model-viewer-ui {
      display: block;
    }
  }

  @include media($max: $bp-small) {
    .flickity-enabled &,
    &[data-gallery-selected="true"] {
      opacity: 1;
    }
  }

  @include media($min: $bp-small) {
    left: 0 !important; //scss-lint:disable ImportantRule
    z-index: -1;
    opacity: 0;

    &.product-gallery--image-placeholder,
    &[data-gallery-selected="true"],
    &.is-selected {
      z-index: 0;
      opacity: 1;
    }
  }

  img {
    background-color: $color-products-product-image-backgrounds;
  }

  [data-product-gallery-aspect-ratio="natural"] & img,
  svg {
    display: block;
    width: 100%;
    margin: 0 auto;
    transform: none;
  }
}

[data-lazy-loading-disabled] {
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="short"],
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="square"],
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="tall"] {
    .product-gallery--loaded-image {
      opacity: 0;
    }
  }
}

.product-gallery--navigation {
  position: relative;
  width: 100%;
  margin-top: $space-xx-small;
  margin-left: -1 * $local-mobile-thumb-space;
  padding-bottom: $local-mobile-thumb-space;
  font-size: 0;
  text-align: left;
  transition: opacity 0.2s ease;

  &.loading {
    position: absolute;
    opacity: 0;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  @include media($min: $bp-small) {
    margin-top: $space-xx-small;
    margin-right: rem(-5px);
    margin-left: rem(-5px);
  }

  // Cancel styles for quickshop between small and large
  .modal--quickshop-full & {
    @include media($min: $bp-small, $max: $bp-large) {
      margin-top: $space-xx-small;
      margin-right: 0;
      margin-left: 0;
    }
  }
}

.gallery-navigation--scroll-button {
  position: absolute;
  height: 100%;
  width: 2rem;
  display: none;
  background: $color-layout-site-background;
  color: $color-text-headings;
  border-top: none;
  border-bottom: none;
  outline: none;
  z-index: 2;
  transform: translate3d(0, 0, 0); // This fixes an issue with iOS not respecting z-index when scrolling the thumbnails
  cursor: pointer;

  &.visible {
    display: block;
  }

  &.scroll-left {
    left: 0;
    padding-left: 0;
    border-right: 1px solid transparentize($color-border, 0.70);
    border-left: none;

    svg {
      transform: rotate(90deg);
    }
  }

  &.scroll-right {
    right: 0;
    padding-right: 0;
    border-right: none;
    border-left: 1px solid transparentize($color-border, 0.70);

    svg {
      transform: rotate(270deg);
    }
  }

  .modal--quickshop-full & {
    background: $color-popups-background;
  }

  .featured-product--container & {
    background: $color-content-containers-background;
  }
}

.gallery-navigation--scroller {
  padding-top: $space-xxx-small;
  padding-bottom: $space-xxx-small;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;

  .product-gallery--media-thumbnail:last-child {
    margin-right: $gutter-outer-small;
  }

  &::-webkit-scrollbar {
    display: none;
  }

  @include media($min: $bp-small) {
    overflow: visible;
    white-space: normal;

    .product-gallery--media-thumbnail:last-child {
      margin-right: 0;
    }
  }

  // Cancel styles for quickshop between small and large
  .modal--quickshop-full & {
    @include media($min: $bp-small, $max: $bp-large) {
      overflow: scroll;
      white-space: nowrap;

      .product-gallery--media-thumbnail:last-child {
        margin-right: $gutter-outer-small;
      }
    }
  }
}

.product-gallery--media-thumbnail {
  @extend %button-reset;
  position: relative;
  display: inline-block;
  height: rem(64px);
  padding: 2px;
  margin-right: $local-thumbnail-space;
  margin-left: $local-thumbnail-space;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 2px transparent;
  transition: box-shadow 0.1s linear;

  @include media($min: $bp-small) {
    margin-top: $local-thumbnail-space * 2;
  }

  @include media($min: $bp-xl) {
    height: rem(79px);

    .modal--quickshop-full & {
      height: rem(64px);
    }
  }

  // Cancel styles for quickshop between small and large
  .modal--quickshop-full & {
    @include media($min: $bp-small, $max: $bp-large) {
      margin-top: 0;
    }
  }

  .no-js & {
    cursor: default;
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba($color-slider-accent, 0.7);
  }

  &[data-gallery-selected="true"] {
    box-shadow: 0 0 0 2px $color-slider-accent;

    &:focus {
      box-shadow: 0 0 0 2px rgba($color-slider-accent, 0.8), 0 0 10px 0 $color-slider-accent;
    }
  }

  .icon-play-thumb,
  .icon-model-thumb {
    position: absolute;
    top: rem(5px);
    right: rem(5px);
    width: rem(20px);
    height: rem(20px);
    background: $color-layout-site-background;
    color: $color-text-headings;
    z-index: 1;
    border-radius: $button-border-radius / 2;
    box-shadow: 0 0 0 1px rgba($color-text-headings, 0.05);
    pointer-events: none;

    .no-js & {
      display: none;
    }
  }
}

.product-gallery--media-thumbnail-img {
  display: block;
  max-width: 100%;
  height: 100%;
  pointer-events: none;
}

.product-gallery--media-thumbnail:focus,
.product-gallery--media-thumbnail-img-wrapper:focus {
  outline: none;
}

// Thumbnails positioned left
[data-product-gallery-thumbnails="left"] {
  @include media($min: $bp-small) {
    display: flex;

    .product-gallery--navigation {
      flex: 1 0 auto;
      max-width: rem(64px) + ($local-thumbnail-space * 2);
      max-height: rem(550px);
      padding: 0;
      margin-top: 0;
      margin-right: $space-xx-small;

      @include media($min: $bp-small) {
        .layout--two-col-medium &,
        .layout--two-col-large & {
          max-height: rem(480);
          max-width: rem(62px) + ($local-thumbnail-space * 2);
        }
      }

      @include media($min: $bp-medium) {
        .layout--two-col-large & {
          max-height: rem(560);
          max-width: rem(72px) + ($local-thumbnail-space * 2);
        }
      }
    }

    .gallery-navigation--scroller {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: rem(550px);
    }

    .product-gallery--media-thumbnail {
      width: rem(64px);
      height: auto;
      margin-top: -2px;
      margin-bottom: $local-thumbnail-space * 2;

      @include media($min: $bp-small) {
        .layout--two-col-medium &,
        .layout--two-col-large & {
          width: rem(62px) + ($local-thumbnail-space * 2);
        }
      }

      @include media($min: $bp-medium) {
        .layout--two-col-large & {
          width: rem(72px) + ($local-thumbnail-space * 2);
        }
      }
    }

    .product-gallery--media-thumbnail-img-wrapper {
      width: 100%;
      height: auto;
    }

    .product-gallery--media-thumbnail-img {
      width: 100%;
      height: auto;
      max-width: auto;
      max-height: 100%;
    }

    .product-gallery--viewer {
      padding: 0;
    }

    .product-gallery--thumbnail {
      width: 100%;
    }

    .product-gallery--slider {
      padding: 0;
    }
  }

  // Cancel styles for quickshop between small and large
  .modal--quickshop-full & {
    @include media($min: $bp-small, $max: $bp-large) {
      display: block;

      .product-gallery--navigation {
        max-width: none;
        max-height: none;
        margin-top: $space-xx-small;
        margin-right: 0;
      }

      .gallery-navigation--scroller {
        display: block;
        max-height: none;
      }

      .product-gallery--media-thumbnail {
        width: auto;
        height: rem(64px);
        margin-top: 0;
        margin-bottom: 0;
      }

      .product-gallery--media-thumbnail-img-wrapper {
        width: auto;
        height: 100%;
      }

      .product-gallery--media-thumbnail-img {
        height: 100%;
        width: auto;
        max-width: 100%;
        max-height: auto;
      }
    }

    @include media($min: $bp-large) {
      display: flex;
    }
  }
}

.product-gallery--external-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .video {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
  }

  @include media($max: $bp-medium) {
    height: 300px;
  }
}

.product-gallery--video {
  video {
    width: 100%;
  }
}

.product-gallery--model {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.product-gallery--viewinyourspace {
  @include font($font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  color: $color_text_regular_text;
  background-color: rgba($color_text_regular_text, 0.08);
  border: 0;

  &[data-shopify-xr-hidden] {
    visibility: hidden;

    @include media($min: $bp-small) {
      display: none;
    }
  }

  svg {
    width: 44px;
    height: 44px;
  }
}

@keyframes drift-fadeZoomIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes drift-fadeZoomOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes drift-fadeIn {
  0% { transform: scale(1); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes drift-fadeOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes drift-loader-rotate {
  0% { transform: translate(-50%, -50%) rotate(0); }
  50% { transform: translate(-50%, -50%) rotate(180deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.product-gallery--zoomed-image {
  position: -webkit-sticky;
  position: sticky;
  display: block;
  bottom: 100%;
  left: 100%;
  height: 0;
  width: 0;
  z-index: 1;
}

.drift-zoom-pane {
  background: $color-white;
  /* This is required because of a bug that causes border-radius to not
  work with child elements in certain cases. */
  transform: translate3d(0, 0, 0);
  z-index: 3;
  box-shadow: 0 1px 5px rgba(127,127,127,0.02), 0 5px 18px rgba(127,127,127,0.2);

  .product-gallery--zoomed-image & {
    height: rem(550px);
    width: rem(550px);
    left: $gutter-outer;

    .layout--two-col & {
      @include media($max: $bp-xl) {
        height: rem(450px);
        width: rem(450px);
      }
    }

    .layout--two-col-medium & {
      height: rem(400px);
      width: rem(400px);

      @include media($min: $bp-xl) {
        height: rem(500px);
        width: rem(500px);
      }
    }

    .layout--two-col-large & {
      height: rem(350px);
      width: rem(350px);

      @include media($min: $bp-xl) {
        height: rem(450px);
        width: rem(450px);
      }
    }
  }

  img {
    top: 0;
    left: 0;
  }
}

.drift-zoom-pane.drift-opening {
  animation: drift-fadeZoomIn 200ms cubic-bezier(0.4, 0.0, 0.2, 1);

  // If the zoom is inline, it's inside the image element
  .product-gallery--image & {
    animation: drift-fadeIn 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
  }
}

.drift-zoom-pane.drift-closing {
  animation: drift-fadeZoomOut 150ms cubic-bezier(0.0, 0.0, 0.2, 1);

  // If the zoom is inline, it's inside the image element
  .product-gallery--image & {
    animation: drift-fadeOut 150ms cubic-bezier(0.0, 0.0, 0.2, 1);
  }
}

.drift-zoom-pane.drift-inline {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.drift-zoom-pane-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  animation: drift-loader-rotate 0.6s infinite linear;

  .drift-loading & {
    display: block;
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    font-size: 0;
    content: url('data:image/svg+xml;utf8, <svg width="50" height="50" viewBox="0 0 77 77" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.5 76.5C17.513 76.5 0.5 59.487 0.5 38.5C0.5 17.513 17.513 0.5 38.5 0.5C59.487 0.5 76.5 17.513 76.5 38.5C76.5 59.487 59.487 76.5 38.5 76.5ZM38.5 73.5C57.83 73.5 73.5 57.83 73.5 38.5C73.5 19.17 57.83 3.5 38.5 3.5C19.17 3.5 3.5 19.17 3.5 38.5C3.5 57.83 19.17 73.5 38.5 73.5Z" fill="%23#{$color-text-regular-text-encoded}" fill-opacity="0.16"/><path opacity="0.9" d="M38.5 75C58.658 75 75 58.658 75 38.5" stroke="%23#{$color-text-regular-text-encoded}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: translate(-50%, -50%);
  }
}

.drift-bounding-box {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset;
  z-index: $index-main;
}

$local-thumbnail-space: rem(3px);
// PhotoSwipe css defaults
$pswp__assets-path: '{{ '' | asset_url }}';
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/

// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.

$pswp__show-hide-transition-duration: 333ms !default;
$pswp__controls-transition-duration: 333ms !default;
$pswp__background-color: #000 !default;
$pswp__placeholder-color: #222 !default;
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 1500 !default;
$pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
$pswp__include-minimal-style: true !default;


/* pswp = photoswipe */
.pswp {
	display: none;
	position:absolute;
	width: 100%;
	height: 100%;
	left:0;
	top:0;
	overflow: hidden;
	touch-action: none;
	z-index: $pswp__root-z-index;
	-webkit-text-size-adjust: 100%;
	/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
	-webkit-backface-visibility: hidden;
	outline: none;

	@if $pswp__box-sizing-border-box == true {
		* {
			box-sizing: border-box;
		}
	}

	img {
		max-width: none;
	}
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
	/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
	opacity: 0.001;
	will-change:opacity;
	/* for open/close transition */
	transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
}

.pswp--open {
	display: block;
}

.pswp--zoom-allowed .pswp__img {
	/* autoprefixer: off */
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
	/* autoprefixer: off */
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}

.pswp--dragging  .pswp__img {
	/* autoprefixer: off */
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: $pswp__background-color;
	opacity: 0;
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	will-change:opacity;
}

.pswp__scroll-wrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow:hidden;
}

.pswp__container,
.pswp__zoom-wrap {
	touch-action: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	    user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
}

.pswp__zoom-wrap {
	position: absolute;
	width: 100%;
	transform-origin: left top;
	/* for open/close transition */
	transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
}

.pswp__bg {
	will-change: opacity;
	/* for open/close transition */
	transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4,0,.22,1);
}

.pswp--animated-in {
	.pswp__bg,
	.pswp__zoom-wrap {
		transition: none;
	}
}

.pswp__container,
.pswp__zoom-wrap {
	-webkit-backface-visibility: hidden;
}

.pswp__item {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

.pswp__img {
	position: absolute;
	width: auto;
	height: auto;
	top: 0;
	left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
	-webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
	background: $pswp__placeholder-color;
}

.pswp--ie .pswp__img {
	width: 100% !important;
	height: auto !important;
	left: 0;
	top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	text-align: center;
	font-size: 14px;
	line-height: 16px;
	margin-top: -8px;
	color: $pswp__error-text-color;
}

.pswp__error-msg a {
	color: $pswp__error-text-color;
	text-decoration: underline;
}

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */

/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/

// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.



$pswp__show-hide-transition-duration: 333ms !default;
$pswp__controls-transition-duration: 333ms !default;
$pswp__background-color: #000 !default;
$pswp__placeholder-color: #222 !default;
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
$pswp__root-z-index: 1500 !default;
$pswp__assets-path: '' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
$pswp__include-minimal-style: true !default;


/*

	1. Buttons

 */

/* <button> css reset */
.pswp__button {
	width: 44px;
	height: 44px;
	position: relative;
	background: none;
	cursor: pointer;
	overflow: visible;
	-webkit-appearance: none;
	display: block;
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	opacity: 0.75;
	transition: opacity 0.2s;
	box-shadow: none;

	&:focus,
	&:hover {
		opacity: 1;
	}

	&:active {
		outline: none;
		opacity: 0.9;
	}

	&::-moz-focus-inner {
		padding: 0;
		border: 0
	}
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
	opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	background: url(#{$pswp__assets-path}default-skin.png) 0 0 no-repeat;
	background-size: 264px 88px;
	width: 44px;
	height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1),  (-webkit-min-device-pixel-ratio: 1.09375),  (min-resolution: 105dpi),  (min-resolution: 1.1dppx) {

	/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
	.pswp--svg .pswp__button--arrow--right:before {
        background-image: url(#{$pswp__assets-path}default-skin.svg);
    }

    .pswp--svg .pswp__button--arrow--left,
	.pswp--svg .pswp__button--arrow--right {
		background: none;
	}
}

.pswp__button--close {
	background-position: 0 -44px;
}

.pswp__button--share {
	background-position: -44px -44px;
}

.pswp__button--fs {
	display: none;
}

.pswp--supports-fs .pswp__button--fs {
	display: block;
}

.pswp--fs .pswp__button--fs {
	background-position: -44px 0;
}

.pswp__button--zoom {
	display: none;
	background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
	display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
	background-position: -132px 0;
}

/* no arrows on touch screens */
.pswp--touch {
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		visibility: hidden;
	}
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
	background: none;
	top: 50%;
	margin-top: -50px;
	width: 70px;
	height: 100px;
	position: absolute;
}

.pswp__button--arrow--left {
	left: 0;
}

.pswp__button--arrow--right {
	right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
	content: '';
	top: 35px;
	background-color: rgba(0,0,0,0.3);
	height: 30px;
	width: 32px;
	position: absolute;
}

.pswp__button--arrow--left:before {
	left: 6px;
	background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
	right: 6px;
	background-position: -94px -44px;
}


/*

	2. Share modal/popup and links

 */

.pswp__counter,
.pswp__share-modal {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	    user-select: none;
}

.pswp__share-modal {
	display: block;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 10px;
	position: absolute;
	z-index: $pswp__root-z-index + 100;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	-webkit-backface-visibility: hidden;
	will-change: opacity;
}

.pswp__share-modal--hidden {
	display: none;
}

.pswp__share-tooltip {
	z-index: $pswp__root-z-index + 120;
	position: absolute;
	background: #FFF;
	top: 56px;
	border-radius: 2px;
	display: block;
	width: auto;
	right: 44px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	transform: translateY(6px);
	transition: transform 0.25s;
	-webkit-backface-visibility: hidden;
	will-change: transform;

	a {
		display: block;
		padding: 8px 12px;
		color: #000;
		text-decoration: none;
		font-size: 14px;
		line-height: 18px;

		&:hover {
			text-decoration: none;
			color: #000;
		}


		&:first-child {
			/* round corners on the first/last list item */
			border-radius: 2px 2px 0 0;
		}

		&:last-child {
			border-radius: 0 0 2px 2px;
		}
	}
}

.pswp__share-modal--fade-in {
	opacity: 1;

	.pswp__share-tooltip {
		transform: translateY(0);
	}
}

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
	padding: 16px 12px;
}

a.pswp__share--facebook {
	&:before {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		top: -12px;
		right: 15px;
		border: 6px solid rgba(0, 0, 0, 0);
		border-bottom-color: #FFF;
		-webkit-pointer-events: none;
		-moz-pointer-events: none;
		pointer-events: none;
	}

	&:hover {
		background: #3E5C9A;
		color: #FFF;

		&:before {
			border-bottom-color: #3E5C9A;
		}
	}
}

a.pswp__share--twitter {
	&:hover {
		background: #55ACEE;
		color: #FFF;
	}
}

a.pswp__share--pinterest {
	&:hover {
		background: #CCC;
		color: #CE272D;
	}
}

a.pswp__share--download {
	&:hover {
		background: #DDD;
	}
}


/*

	3. Index indicator ("1 of X" counter)

 */

.pswp__counter {
	position: absolute;
	left: 0;
	top: 0;
	height: 44px;
	font-size: 13px;
	line-height: 44px;
	color: #FFF;
	opacity: 0.75;
	padding: 0 10px;
}


/*

	4. Caption

 */

.pswp__caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	min-height: 44px;

	small {
		font-size: 11px;
		color: #BBB;
	}
}

.pswp__caption__center {
	text-align: left;
	max-width: 420px;
	margin: 0 auto;
	font-size: 13px;
	padding: 10px;
	line-height: 20px;
	color: #CCC;
}

.pswp__caption--empty {
	display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
	visibility: hidden;
}


/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */

.pswp__preloader {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -22px;
	opacity: 0;
	transition: opacity 0.25s ease-out;
	will-change: opacity;
	direction: ltr;
}

.pswp__preloader__icn {
	width: 20px;
	height: 20px;
	margin: 12px;
}

.pswp__preloader--active {
	opacity: 1;

	.pswp__preloader__icn {
		/* We use .gif in browsers that don't support CSS animation */
		background: url(#{$pswp__assets-path}preloader.gif) 0 0 no-repeat;
	}
}

.pswp--css_animation {
	.pswp__preloader--active {
		opacity: 1;

		.pswp__preloader__icn {
			animation: clockwise 500ms linear infinite;
		}

		.pswp__preloader__donut {
			animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
		}
	}

	.pswp__preloader__icn {
		background: none;
		opacity: 0.75;
		width: 14px;
		height: 14px;
		position: absolute;
		left: 15px;
		top: 15px;
		margin: 0;
	}


	.pswp__preloader__cut {
		/*
			The idea of animating inner circle is based on Polymer ("material") loading indicator
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
		position: relative;
		width: 7px;
		height: 14px;
		overflow: hidden;
	}

	.pswp__preloader__donut {
		box-sizing: border-box;
		width: 14px;
		height: 14px;
		border: 2px solid #FFF;
		border-radius: 50%;
		border-left-color: transparent;
		border-bottom-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
		background: none;
		margin: 0;
	}
}

@media screen and (max-width: 1024px) {
	.pswp__preloader {
		position: relative;
		left: auto;
		top: auto;
		margin: 0;
		float: right;
	}
}

@keyframes clockwise {
  0% { transform: rotate(0deg) }
  100% { transform: rotate(360deg) }
}

@keyframes donut-rotate {
  0% { transform: rotate(0) }
  50% { transform: rotate(-140deg) }
  100% { transform: rotate(0) }
}


/*

	6. Additional styles

 */

/* root element of UI */
.pswp__ui {
	-webkit-font-smoothing: auto;
	visibility: visible;
	opacity: 1;
	z-index: $pswp__root-z-index + 50;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 44px;
	width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
	-webkit-backface-visibility: hidden;
	will-change: opacity;
	transition: opacity $pswp__controls-transition-duration cubic-bezier(.4,0,.22,1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse {
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		visibility: visible;
	}
}

.pswp__top-bar,
.pswp__caption {
	background-color: rgba(0,0,0,0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit {
	.pswp__top-bar,
	.pswp__caption {
		background-color: rgba(0,0,0,0.3);
	}
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */

.pswp__ui--idle {
	.pswp__top-bar {
		opacity: 0;
	}

	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		opacity: 0;
	}
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden {
	.pswp__top-bar,
	.pswp__caption,
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
		/* Force paint & create composition layer for controls. */
		opacity: 0.001;
	}
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide {
	.pswp__button--arrow--left,
	.pswp__button--arrow--right,
	.pswp__counter {
		display: none;
	}
}

.pswp__element--disabled {
	display: none !important;
}

@if $pswp__include-minimal-style == true {
	.pswp--minimal--dark {
		.pswp__top-bar {
			background: none;
		}
	}
}














.product-gallery--expand {
  @include font($font-body);
  @include font-size-body-smaller;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 $space-x-small $space-x-small 0;
  padding: rem(6px) rem(10px) rem(6px) rem(9px);
  background: rgba($color-layout-site-background, 0.9);
  color: $color-text-regular-text;
  border: none;
  border-radius: $button-border-radius;
  font-weight: normal;
  cursor: pointer;
  box-shadow: 0 0 0 1px $color-border-soft;
  z-index: $index-main + 1;

  &.expand--hide-mobile {
    @include media($max: $bp-small) {
      display: none;
    }
  }

  &.expand--hide-desktop {
    @include media($min: $bp-small) {
      display: none;
    }
  }

  @include media($min: $bp-small) {
    margin-right: $space-x-small;
  }

  [data-selected-media-type="video"] & ,
  [data-selected-media-type="external_video"] & ,
  [data-selected-media-type="model"] & {
    display: none;
  }

  span {
    display: flex;
    align-items: center;
    outline: none;

    svg {
      margin-right: rem(5px);
    }
  }

  .tap-text {
    display: none;
  }

  .has-touch & {
    .click-text {
      display: none;
    }

    .tap-text {
      display: flex;
    }
  }
}

// Photoswipe overrides
.pswp {
  .pswp__bg {
    background: $color-layout-site-background;
    transition: opacity 0.2s ease-out;
  }

  .pswp__img--placeholder {
    animation: shimmer-background 1s ease-in-out infinite;
    animation-fill-mode: forwards;
    animation-direction: alternate;
  }

  .pswp__top-bar {
    background: transparent;
    opacity: 1;
  }

  .pswp__button--close {
    width: rem(40px);
    height: rem(40px);
    margin: $gutter-outer-small + 2px;
    color: $color-black;
    background: $color-white;
    border-radius: 100%;
    box-shadow: 0 0 0 1px rgba(127,127,127,0.03), 0 2px 5px rgba(127, 127, 127, 0.3);
    transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
    opacity: 0;

    @include media($min: $bp-small) {
      width: rem(48px);
      height: rem(48px);
      margin: $gutter-outer;
    }

    &:hover {
      box-shadow: 0 0 0 1px rgba(127,127,127,0.04), 0 3px 10px rgba(127, 127, 127, 0.4);
      transform: scale(1.125);

      span {
        opacity: 0.8;
        transition: opacity 0.15s ease;
      }
    }

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      opacity: 0.6;
      outline: none;
    }
  }

  .product-zoom--thumbnails {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: $space-xx-small 0;
    padding: $space-xxx-small $space-xx-small;
    white-space: nowrap;
    overflow: auto;
    opacity: 0;
    background: $color-layout-site-background;
    transition: opacity 0.2s ease-out;
    scroll-behavior: smooth;

    @include media($min: $bp-small) {
      top: 0;
      bottom: auto;
      width: auto;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      max-height: rem(500px);
      margin: $gutter-outer;
      padding: 0 0 $local-thumbnail-space;
      background: transparent;
      overflow: visible;
    }
  }

  .gallery-navigation--scroll-button {
    top: 0;
    padding: 0 $space-xx-small;
  }

  .product-zoom--thumb-scroller {
    padding-top: rem(2px);
    padding-bottom: rem(2px);
    white-space: nowrap;
    overflow: auto;
    scroll-behavior: smooth;

    @include media($min: $bp-small) {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0;
      max-height: rem(500px);
      overflow: visible;
    }
  }

  &.pswp--animated-in {
    .product-zoom--thumbnails,
    .pswp__button--close {
      opacity: 1;
    }
  }

  @include media($max: $bp-small) {
    .product-gallery--media-thumbnail {
      margin-top: 0;
    }
  }

  @include media($min: $bp-small) {
    .product-gallery--media-thumbnail {
      width: 51px;
      height: auto;
    }

    .product-gallery--media-thumbnail-img {
      width: 100%;
    }
  }
}

$local-button-size: 46px;

.shopify-model-viewer-ui {
  // These variables are passed in to the shadow-dom
  #{--progress-bar-color}: $color-text-headings;
  #{--progress-bar-height}: 2px;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &:not(.shopify-model-viewer-ui--fullscreen) {
    .shopify-model-viewer-ui__control-icon.shopify-model-viewer-ui__control-icon--exit-fullscreen {
      display: none;
    }
  }

  &.shopify-model-viewer-ui--fullscreen {
    .shopify-model-viewer-ui__control-icon.shopify-model-viewer-ui__control-icon--enter-fullscreen {
      display: none;
    }
  }

  model-viewer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;

    &.shopify-model-viewer-ui__disabled {
      pointer-events: none;
    }
  }

  .shopify-model-viewer-ui__controls-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
  }

  .shopify-model-viewer-ui__controls-area {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: $local-button-size;
    height: auto;
    opacity: 0;
    border: 1px solid rgba($color-text-headings, 0.05);
    border-radius: $button-border-radius;
    overflow: hidden;
    transition: opacity 0.3s ease-in;

    &:not(.shopify-model-viewer-ui__controls-area--playing) {
      display: none;
    }

    &:focus-within {
      opacity: 1;
    }
  }

  &:hover .shopify-model-viewer-ui__controls-area {
    opacity: 1;
  }

  .shopify-model-viewer-ui__button {
    border-radius: $button-border-radius;

    &:focus {
      z-index: 1;
    }
  }

  .shopify-model-viewer-ui__button--zoom-out,
  .shopify-model-viewer-ui__button--zoom-in,
  .shopify-model-viewer-ui__button--fullscreen {
    cursor: pointer;
  }

  .shopify-model-viewer-ui__button--poster,
  .shopify-model-viewer-ui__button--control {
    width: $local-button-size;
    height: $local-button-size;
    padding: 0;
    color: $color-text-headings;
    background-color: $color-layout-site-background;
    border: 1px solid rgba($color-text-headings, 0.05);
    transition: background-color 0.2s ease-in;

    body:not(.user-is-tabbing) & {
      outline: none;
    }

    svg {
      width: $local-button-size;
      height: $local-button-size;
      opacity: 1;
      transition: opacity 0.2s ease-in;
    }

    &:hover svg {
      opacity: 0.55;
    }

    &:active {
      background-color: mix($color-text-headings, $color-layout-site-background, 5%);
    }
  }

  .shopify-model-viewer-ui__button--poster {
    position: absolute;
    top: calc(50% - #{60px / 2});
    left: calc(50% - #{60px / 2});
    z-index: 1;
    width: 60px;
    height: 60px;
    background-color: $color-layout-site-background;
    border: none;
    box-shadow: 0 0 0 1px rgba($color-text-headings, 0.05);

    &:hover svg {
      opacity: 0.55;
    }

    svg {
      width: 100%;
      height: 100%;
      border: none;
      opacity: 1;
      transition: opacity 0.6s ease-in-out;
    }
  }

  .shopify-model-viewer-ui__button--control {
    border: none;
    border-bottom: 1px solid rgba($color-text-headings, 0.05);
    border-radius: 0;

    &:last-child {
      border-bottom: 0;
    }
  }
}

.plyr.plyr--video {
  color: $color-text-headings;
  background-color: $color-placeholder-background;

  [data-product-gallery-aspect-ratio="short"] &,
  [data-product-gallery-aspect-ratio="square"] &,
  [data-product-gallery-aspect-ratio="tall"] &,
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="short"] &,
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="square"] &,
  [data-product-gallery-image-crop][data-product-gallery-aspect-ratio="tall"] & {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .plyr__video-wrapper {
      height: 100%;
    }

    video {
      height: 100%;
    }
  }

  .plyr__control {
    color: $color-text-headings;
    background: $color-layout-site-background;
    border: none;

    &[data-plyr="play"] {
      border-radius: $button-border-radius 0 0 $button-border-radius;
      overflow: hidden;
    }

    &[data-plyr="fullscreen"] {
      border-radius: 0 $button-border-radius $button-border-radius 0;
      overflow: hidden;
    }
  }

  // This is the main play button shown before play starts
  > .plyr__control[data-plyr="play"] {
    height: rem(60px);
    width: rem(60px);
    padding: 0;
    background: $color-layout-site-background;
    border-radius: $button-border-radius;
    box-shadow: 0 0 0 1px rgba($color-text-headings, 0.05);

    > svg {
      height: 100%;
      width: 100%;
      margin: 0;
      border: none;
      transition: opacity 0.6s ease-in-out;
    }

    &:hover > svg {
      opacity: 0.55;
    }

    &:active {
      opacity: 0.7;
    }
  }

  .plyr__progress__buffer {
    background: rgba($color-text-headings, 0.6);
    opacity: 0.6;
  }

  .plyr__control--overlaid.plyr__tab-focus,
  .plyr__control--overlaid:hover {
    color: $color-text-headings;
  }

  .plyr__video-wrapper,
  .plyr__poster {
    background-color: $color-placeholder-background;
  }

  .plyr__controls {
    background: transparent;
    border: none;
    border-radius: $button-border-radius;
    box-shadow: 0 0 0 1px rgba($color-text-headings, 0.05);
  };

  .plyr__progress__container {
    height: 44px;
    background: $color-layout-site-background;

    .plyr__progress {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .plyr__tooltip {
    color: $color-layout-site-background;
    background: $color-text-headings;

    &:before {
      border-top: 4px solid $color-text-headings;
    }
  }

  // I would have grouped these in a better way in SCSS, but when different selectors
  // are comma separated in Chrome, the webkit definition does not get applied. It's like
  // Chrome just ignores it because there are others it doesn't recognize in the selector.
  &.plyr--full-ui input[type="range"]::-webkit-slider-runnable-track {
    background-image: linear-gradient(to right, $color-text-headings var(--value, 0%), rgba($color-text-headings, 0.6) var(--value, 0%));
  }

  &.plyr--full-ui input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 4px rgba($color-text-headings, 0.25);
  }
  &.plyr--full-ui input[type="range"].plyr__tab-focus::-moz-range-track {
    box-shadow: 0 0 0 4px rgba($color-text-headings, 0.25);
  }
  &.plyr--full-ui input[type="range"].plyr__tab-focus::-ms-track {
    box-shadow: 0 0 0 4px rgba($color-text-headings, 0.25);
  }

  &.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
    box-shadow: 2px 0 0 0 $color-layout-site-background;
  }
  &.plyr--full-ui input[type="range"]::-moz-range-track {
    box-shadow: 2px 0 0 0 $color-layout-site-background;
  }
  &.plyr--full-ui input[type="range"]::-ms-thumb {
    box-shadow: 2px 0 0 0 $color-layout-site-background;
  }

  &.plyr--full-ui input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba($color-text-headings, 0.25);
  }
  &.plyr--full-ui input[type="range"]:active::-moz-range-track {
    box-shadow: 0 0 0 3px rgba($color-text-headings, 0.25);
  }
  &.plyr--full-ui input[type="range"]:active::-ms-thumb {
    box-shadow: 0 0 0 3px rgba($color-text-headings, 0.25);
  }

  // Volume Control
  &.plyr--full-ui .plyr__volume {
    background-color: $color-text-headings;
  }

  &.plyr--full-ui .plyr__volume input[type="range"]::-webkit-slider-runnable-track {
    background-image: linear-gradient(to right, $color-layout-site-background var(--value, 0%), rgba($color-layout-site-background, 0.6) var(--value, 0%));
  }

  &.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 4px rgba($color-layout-site-background, 0.25);
  }
  &.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-moz-range-track {
    box-shadow: 0 0 0 4px rgba($color-layout-site-background, 0.25);
  }
  &.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-ms-track {
    box-shadow: 0 0 0 4px rgba($color-layout-site-background, 0.25);
  }

  &.plyr--full-ui .plyr__volume input[type="range"]::-webkit-slider-thumb {
    color: $color-layout-site-background;
    box-shadow: 2px 0 0 0 $color-text-headings;
  }
  &.plyr--full-ui .plyr__volume input[type="range"]::-moz-range-track {
    color: $color-layout-site-background;
    box-shadow: 2px 0 0 0 $color-text-headings;
  }
  &.plyr--full-ui .plyr__volume input[type="range"]::-ms-thumb {
    color: $color-layout-site-background;
    box-shadow: 2px 0 0 0 $color-text-headings;
  }

  &.plyr--full-ui .plyr__volume input[type="range"]:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba($color-layout-site-background, 0.25);
  }
  &.plyr--full-ui .plyr__volume input[type="range"]:active::-moz-range-track {
    box-shadow: 0 0 0 3px rgba($color-layout-site-background, 0.25);
  }
  &.plyr--full-ui .plyr__volume input[type="range"]:active::-ms-thumb {
    box-shadow: 0 0 0 3px rgba($color-layout-site-background, 0.25);
  }
}

.form-options {
  // Undo default <fieldset> styling
  z-index: 0;
  padding: 0;
  margin-top: $space-small;
  margin-right: 0;
  margin-left: 0;
  border: 0;

  .no-js & {
    &.no-js-required {
      display: block;
      width: 100%;
    }

    &.js-required {
      display: none;
    }
  }

  .js & {
    &.no-js-required {
      display: none;
    }

    &.js-required {
      display: block;
    }
  }
}

.product-form--alt .form-options-first {
  margin-top: 0;
}

.product-form--alt {
  @include media($min: $bp-large) {
    .product--stock-level {
      margin-top: 0;
    }

    .product-options-style-select + .stock-level--wrapper {
      .product--stock-level {
        margin-top: $space-medium;
      }
    }
  }
}

.form-options-swatches {
  z-index: 5;
}

.product-form--atc {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  margin-top: $space-small;

  .product-sold-out & {
    display: none;
  }

  .smart-payment-enabled & {
    align-items: flex-start;
    flex-direction: column;
  }

  // For non variant products when in the alternate column
  .product-form--alt input[type=hidden] + & {
    margin-top: 0;
  }
}

.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: rem(5px);
  padding-left: rem(5px);
  margin-left: $space-x-small;

  &.disabled {
    color: $color-buttons-sold-out-button-text;
    background-color: $color-buttons-sold-out-button-background;
    border: 1px solid $color-buttons-sold-out-button-background;
  }

  .product-form--alt & {
    @include media($max: $bp-xl) {
      font-size: $button-medium-size;
    }
  }
}

.option-name {
  .product-options-style-select & {
    @include font($font-body);
    letter-spacing: $font-body-spacing;
  }

  .product-options-style-radio & {
    @include font-body-bold;
    letter-spacing: $font-body-spacing;
  }

  @include media($min: $bp-small) {
    @include font-size-body-smaller;
  }
}

.option-swatch-value {
  @include font-body-bold;
  letter-spacing: $font-body-spacing;
}

.option-values {
  margin-top: $gutter-outer-small;
}

.option-value {
  display: inline-block;
}

.option-value-input {
  position: absolute;
  opacity: 0;

  & + .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;

    @include media($min: $bp-small) {
      @include font-size-body-smaller;
    }
  }

  &:focus ~ .option-value-name {
    box-shadow: $color-forms-selected-input 0 0 0 1px;
  }


  &:checked + .option-value-name {
    color: $color-forms-selected-input;
    background-color: rgba($color-forms-selected-input, 0.1);
  }

  &:disabled + .option-value-name {
    text-decoration: line-through;
    cursor: default;
    opacity: 0.5;
  }

  + .option-value-swatch-wrapper {
    @include swatch-wrapper($size: $swatches-size-product-page, $shape: $swatches-shape);

    // Placing this element on page before it's required fixes some weird jitters in Safari
    &::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      pointer-events: none;
      content: "";
      will-change: transform;
    }

    &:hover {
      z-index: 5;

      &::after {
        @extend %swatch-tooltip;
      }
    }

    .swatch {
      @include swatch($swatches-size-product-page);
    }

    .swatch-inner {
      @extend %swatch-inner;
      width: $swatches-size-product-page;
    }
  }

  &:checked + .option-value-swatch-wrapper {
    @extend %swatch-wrapper-selected;
    background-color: transparent;

    .swatch {
      @include swatch-selected($swatches-size-product-page);
    }
  }

  &:disabled:checked + .option-value-swatch-wrapper {
    @extend %swatch-wrapper-disabled-selected;
  }

  &:disabled + .option-value-swatch-wrapper {
    @extend %swatch-wrapper-disabled;
    cursor: not-allowed;
    opacity: 1; //override standard disabled option opacity

    .swatch {
      @extend %swatch-disabled;
    }

    .swatch-inner {
      @extend %swatch-inner-disabled;
    }
  }
}

.user-is-tabbing .option-value-input:focus ~ .option-value-swatch-wrapper {
  box-shadow: 0 0 2px 2px $color-forms-selected-input;
}

.in-stock-notification-form {
  display: none;
  margin-top: $space-medium;
  border-top: 1px solid $color-border-soft;

  .product-sold-out & {
    display: block;
  }

  .form-title {
    @include font-size-heading-4;
    margin: $space-medium 0;
  }

  .layout--three-col &.no-variants {
    margin-top: 0;
    border-top: 0;

    .form-title {
      margin-top: 0;
    }
  }

  p {
    margin: $space-medium 0;
  }

  .success-message {
    color: $color-success;

    svg {
      margin-right: $space-x-small;
    }
  }

  .error-message {
    color: $color-error;
  }

  button {
    @include button-size(large);
    width: 100%;
    margin-top: $space-medium;
  }
}

.product--stock-level {
  display: flex;
  align-items: center;
  margin: $space-medium 0;
  font-size: rem(12px);
  line-height: rem(16px);

  .stock-level--availability {
    @include font-body-bold;
    padding-right: 0.35rem;
    color: $color-gray;
  }


  &.stock-level--in-stock {
    .stock-level--text, svg {
      color: $color-products-in-stock;
    }

    svg {
      margin-right: $space-xxx-small;
      min-width: 13px;
    }
  }

  &.stock-level--low-stock {
    .stock-level--text {
      color: $color-products-low-stock;
    }

    svg {
      display: none;
    }
  }

  &.stock-level--no-stock {
    .stock-level--text {
      color: $color-products-no-stock;
    }

    svg {
      display: none;
    }
  }
}

.smart-payment-enabled {
  .product-form--atc-button {
    @extend %button-secondary, %atc-button;
    @include button-size(large);
    width: 100%;
    margin-top: $space-small;
    margin-left: 0;
  }
}

//scss-lint:disable SelectorFormat
.shopify-payment-button {
  margin-top: $space-small;

  .product-sold-out & {
    display: none;
  }

  .shopify-payment-button__button {
    margin-right: auto;
    margin-left: auto;
  }

  .shopify-payment-button__button--unbranded {
    @extend %button-primary, %atc-button;
    @include button-size(large);
  }

  .shopify-payment-button__button--branded {
    // Make button same height as ATC button
    min-height: 48px;
    overflow: hidden;
    border-radius: 0;
  }

  .shopify-payment-button__more-options {
    @extend %link--default;
    @include font($font-body);
    @include font-size-body-small;
    padding: 0;
    letter-spacing: $font-body-spacing;

    &:hover {
      text-decoration: none;
    }
  }
}

//scss-lint:enable SelectorFormat

.account-order,
.order-footer {
  width: 100%;
  text-align: left;
  border-collapse: collapse;

  tr,
  .order-footer-item {
    border-bottom: 1px solid $color-layout-dividers;
  }

  th {
    @include font($font-heading);
    @include font-size-heading-6;
    padding-bottom: $space-small;
    color: $color-text-headings;
  }

  td,
  .order-footer-value,
  .order-footer-label {
    @include font-size-body-small;
    padding-top: $space-small;
    padding-bottom: $space-small;
    padding-left: $gutter-content;

    &: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 {
    @include font($font-heading);
    display: inline-block;
    width: calc(60% - 64px);
    padding-left: $gutter-content;
    vertical-align: middle;

    a {
      display: inline-block;
    }

    .order-item-options {
      @include font-size-body-smaller;
      display: block;
      margin-top: $space-xx-small;
    }
  }

  .order-item-price {
    display: table-cell;

    @include media($max: $bp-small) {
      position: absolute;
      visibility: hidden;
    }
  }

  .order-item {
    width: 50px;

    a {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }

    img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
    }

    svg {
      display: block;
      width: 50px;
      height: auto;
      max-width: 100%;
    }
  }

}
.order-footer {
  display: table;

  .order-footer-item {
    display: table-row;

    &:last-child {
      border-bottom: 0;
    }

    .order-footer-label {
      display: table-cell;
    }

    .order-footer-value {
      display: table-cell;
    }
  }
}

.account-order-attributes {
  padding-left: 0;
  list-style: none;

  li:not(:first-child) {
    margin-top: $space-xx-small;
  }
}

.account-order-attribute-title {
  @include font($font-body, $font-weight: bolder, $font-family: false);
  letter-spacing: $font-body-spacing;
}

.dynamic-video-wrapper {
  @extend %section-container;
}

.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;
    border-radius: $container-border-radius;
  }

  &.video-playing {
    .fluid-width-video-wrapper {
      z-index: 1;
    }
  }

  .hide-player {
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease-in-out;
  }

  &.video-transitioning .hide-player,
  &.video-playing .hide-player {
    visibility: visible;
    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;
  border-radius: $container-border-radius;
  opacity: 1;

  .video-transitioning &,
  .video-playing & {
    opacity: 0;
    transition: opacity 200ms ease-in-out;
  }

  .video-playing & {
    z-index: 0;
  }
}

.video-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: $container-border-radius;
}

.video-play-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: rem(60px);
  height: rem(60px);
  padding: 0;
  margin: 0;
  color: $color-text-headings;
  background: $color-layout-site-background;
  cursor: pointer;
  border: none;
  border-radius: $button-border-radius;
  box-shadow: 0 0 0 1px rgba($color-text-headings, 0.05);
  transition:
    transform 0.12s cubic-bezier(.3, 0, 0, 1),
    background-color 0.12s cubic-bezier(.3, 0, 0, 1);

  &.no-cover {
    opacity: 0;

    &:active {
      opacity: 0;
    }
  }

  &:hover .icon-play {
    opacity: 0.55;
  }

  &:active {
    opacity: 0.7;
    outline: none;
  }

  .video-loading & {
    background-color: transparent;
    box-shadow: none;
  }

  .video-playing & {
    display: none;
  }
}

.icon-play {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: auto;
  opacity: 1;
  outline: none;
  transition: opacity 200ms ease-in-out;

  .video-loading & {
    opacity: 0;
  }
}

.icon-loading  {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  height: 100%;
  opacity: 0;
  outline: none;
  animation: 0.6s rotate linear infinite both;

  .product-gallery--media & {
    display: none;
  }

  .video-loading & {
    display: block;
    opacity: 1;
    transition: opacity 200ms ease-in-out;
  }
}

$local-button-width: 53px;
$local-active-background: mix($color-text-links, $color-popups-background, 8%);
$local-image-width: rem(48px);
$local-box-shadow: 0 3px 7px rgba(127, 127, 127, 0.25);

.live-search {
  position: relative;
  z-index: $index-header-search;
  display: block;
  height: $header-content-height;
  margin-top: $header-padding-vertical-mobile;

  @include media($min: $bp-large) {
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 0;
    vertical-align: middle;
  }

  &.live-search--takeover {
    position: fixed;
    display: block;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    margin-top: 0;
    background-color: $color-popups-background;
  }
}

.live-search-form {
  position: absolute;
  right: -1px;
  left: -1px;
  border-radius: 0;
  transition: border 0.1s ease, box-shadow 0.1s ease;

  &:hover,
  .live-search--focused & {
    border-color: transparentize($color-border, 0.75);
  }

  .live-search--takeover & {
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .form-field {
    position: relative;
    z-index: 100;
    display: flex;
    height: $header-content-height;

    .live-search--takeover & {
      height: $header-content-height + 6px;
      border: 0;
      border-radius: 0;
    }
  }
}

.form-field .live-search-form-field {
  @include font-size-input;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  width: calc(100% - #{$local-button-width});
  padding-top: rem(14px);
  padding-bottom: rem(14px);
  color: $color-header-search-bar-text;
  vertical-align: top;
  background-color: $color-header-search-bar-background;
  border-color: $color-header-search-bar-border;
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-radius: $form-border-radius 0 0 $form-border-radius;
  transition: border 0.1s ease, box-shadow 0.1s ease;

  @if (alpha($color-header-search-bar-border) == 0) {
    border-width: 0;
  }

  &:-ms-input-placeholder {
    color: rgba($color-header-search-bar-text, 0.6);
    transform: translateY(0);
    opacity: 1;
  }

  &::-ms-input-placeholder {
    color: rgba($color-header-search-bar-text, 0.6);
    transform: translateY(0);
    opacity: 1;
  }

  &::placeholder {
    color: rgba($color-header-search-bar-text, 0.6);
    transform: translateY(0);
    opacity: 1;
  }

  &:focus {
    border-color: $color-header-search-bar-border;
  }

  .live-search--active & {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .live-search--takeover & {
    z-index: $index-header-search + 50;
    width: 100%;
    padding-right: 100px;
    border: none;
    color: $color-forms-input-text;
    background-color: $color-forms-input-background;

    &:-ms-input-placeholder {
      color: $color-forms-input-placeholder-text;
    }

    &::-ms-input-placeholder {
      color: $color-forms-input-placeholder-text;
    }

    &::placeholder {
      color: $color-forms-input-placeholder-text;
    }

    @include media($max: $bp-small) {
      border-bottom: 0;
    }
  }
}


.live-search-button {
  @extend %button-base, %search-button;
  flex-basis: auto;
  flex-grow: 0;
  flex-shrink: 0;
  width: $local-button-width;
  color: $color-header-search-bar-button-icon;
  vertical-align: top;
  background-color: $color-header-search-bar-button-background;
  border-color: $color-header-search-bar-border;
  border-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 0;
  border-radius: 0 $form-border-radius $form-border-radius 0;

  @if (alpha($color-header-search-bar-border) == 0) {
    border-width: 0;
  }

  &:hover {
    background-color: $color-header-search-bar-button-background;
  }

  .live-search--active & {
    border-bottom-right-radius: 0;
  }

  .live-search--takeover & {
    display: none;
    visibility: hidden;
  }
}

.live-search-takeover-cancel {
  @extend %button-reset, %link--default;
  @include font($font-body, $font-family: false, $font-weight: bolder);
  @include font-size-body;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: $index-header-search + 100;
  display: none;
  padding: rem(15px);
  letter-spacing: $font-body-spacing;
  visibility: hidden;

  .live-search--takeover & {
    display: inline-block;
    visibility: visible;
  }

  &:focus {
    outline: solid transparentize($color-text-links, 0.5);
    outline-offset: -3px;
  }
}

.search-flydown {
  @include font-size-body;
  position: relative;
  z-index: 50;
  display: none;
  width: 100%;
  background-color: $color-popups-background;
  box-shadow: $local-box-shadow;
  transition: border 0.1s ease, box-shadow 0.1s ease;

  @include media($max: $bp-small) {
    box-shadow: none;
  }

  .live-search--active & {
    z-index: 200;
    display: block;
  }

  .live-search--takeover & {
    height: calc(100vh - #{$header-content-height});
  }
}

.search-flydown--placeholder,
.search-flydown--results,
.search-flydown--quicklinks {
  display: none;
}

// Quicklinks
.search-flydown--quicklinks {
  padding-top: 15px;
  padding-bottom: 10px;
}

.search-flydown--quicklinks-title {
  @include font($font-body, $font-family: false, $font-weight: bolder);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 15px;
  font-size: rem(17px);
  letter-spacing: $font-body-spacing;
  color: $color-text-headings;
}

.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-text-links;
  text-decoration: none;
  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;

    .live-search--takeover & {
      display: block;
      width: 100%;
    }
  }
}

.search-flydown--product {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: $color-text-regular-text;
  text-decoration: none;
  transition: color 0.1s ease-in, background-color 0.1s ease-in;

  &:hover,
  &:focus {
    background-color: $local-active-background;
  }

  &:focus {
    outline: solid transparentize($color-text-links, 0.5);
  }

  .search-flydown--placeholder & {
    cursor: default;

    &:hover,
    &:focus {
      background-color: inherit;
    }

  }
}

.placeholder--content-text,
.placeholder--content-image {
  animation: shimmer 1s ease-in-out infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.search-flydown--product-text,
.search-flydown--product-image {
  display: inline-block;
  vertical-align: middle;
}

.search-flydown--product-image {
  @include font-size-body;
  display: inline-block;
  width: $local-image-width;
  height: $local-image-width;

  img {
    background-color: $color-products-product-image-backgrounds;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
  }

  + .search-flydown--product-text {
    max-width: calc(100% - (#{$local-image-width + $space-small}));
    margin-left: $space-small;
  }
}

.search-flydown--product-text {
  @include font-size-body;

  .placeholder--content-text {
    height: 0.6em;
    max-width: 100%;
  }
}

.search-flydown--product-title {
  @include font-size-body;
  display: block;
  line-height: 1.3;

  &.placeholder--content-text {
    width: 240px; // Opinionated width -- for pleasantries
  }

  .highlight {
    background-color: $color-highlight;
  }
}

.search-flydown--product-price {
  @include font-size-body-small;
  @include font($font-body, $font-family: false, $font-weight: bolder);
  display: block;
  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-products-regular-price;

  .search-flydown--product-price-has-sale & {
    margin-right: rem(7px);
    color: $color-products-sale-price;
  }
}

.search-flydown--product-price--compare-at {
  color: $color-products-compare-at-price;
  text-decoration: line-through;
}

.search-flydown--swatches {
  @include font-size-body-smallest;
  color: $color-text-light-text;
  line-height: 1.5;
}

.search-flydown--product-items--none {
  @include font-size-body;
  padding: $space-medium 15px $space-large;
  color: $color-text-regular-text;
  vertical-align: top;

  h5 {
    @include font-size-heading-5;
    margin-top: 0;
    margin-bottom: 0;
    color: $color-text-headings;
  }

  p {
    margin-top: $space-medium;
    margin-bottom: 0;
  }
}

.search-flydown--continue {
  @extend %link--default;
  @include font-body-underline-links;

  &:focus {
    outline: solid transparentize($color-text-links, 0.5);
    outline-offset: 4px;
  }
}

// Content results
.search-flydown--content-items {
  display: inline-block;
  width: 36%;
  padding: $space-medium 25px $space-large;
  vertical-align: top;

  .live-search--takeover & {
    display: none;
  }
}

.search-flydown--content-title {
  @include font-size-body-smaller;
  margin-top: 0;
  margin-bottom: 0;
  color: $color-text-light-text;
}

.search-flydown--content-items-list {
  @include font-size-body;
  padding-left: 0;
  margin-top: $space-x-small;
  list-style: none;
}

.search-flydown--content-item {
  @include font-size-body;
  margin-top: $space-xx-small;
  line-height: 1.56;

  a {
    @extend %link--default;

    &:focus {
      outline: solid transparentize($color-text-links, 0.5);
      outline-offset: 4px;
    }
  }
}

.search-flydown--content-items-none {
  @include font-size-body;
  margin-top: $space-xx-small;
  margin-bottom: 0;
  color: $color-text-regular-text;
}

.search-flydown--footer {
  display: block;
  width: 100%;
  padding: 10px 15px 15px;
  text-align: center;
}


product-cta {
  display: none;
}

.product-readmore {
  width: 100%;
  margin: $space-xx-small $gutter-outer-small 0;

  @include media($min: $bp-small) {
    margin: $space-xx-large 0 0;
  }

  @include media($min: $bp-large) {
    margin: $space-xxx-large 0 0;
  }
}

.shortcode--product-cta {
  &:not([hidden]) {
    width: 100%;
    margin-top: $space-small;
    text-align: center;

    &:not([button-style]) {
      @extend %button-secondary;
    }

    &:not([button-size]) {
      @include button-size(medium);
    }

    &[button-style="primary"] {
      @extend %button-primary;
    }

    &[button-style="secondary"] {
      @extend %button-secondary;
    }

    &[button-size="small"] {
      @include button-size(small);
    }

    &[button-size="medium"] {
      @include button-size(medium);
    }

    &[button-size="large"] {
      @include button-size(large);
    }
  }

  .button-icon {
    height: 0.7em;
    width: 0.7em;
    margin-left: 0.25em;

    svg {
      height: 0.7em;
      width: 0.7em;
      margin-top: -0.1em;
      transform: rotate(0);
    }
  }
}

.product-description.rte,
.product-readmore.rte,
.page-content.rte {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: $space-small;
    grid-column-gap: 5%;
    width: 100%;

    div:not(:first-child) {
      margin-top: 0;
    }

    &.mobile-stacked {
      @include media($max: $bp-small) {
        display: block;

        div:not(:first-child) {
          margin-top: $space-small;
        }
      }
    }
  }
}

details {
  margin-top: $space-large;
  border-top: 1px solid $color-layout-dividers;
  border-bottom: 1px solid $color-layout-dividers;

  + details {
    margin-top: 0;
    border-top: none;
  }

  .rte & {
    + p,
    + div {
      margin-top: $space-large;
    }
  }

  &[open] {
    padding-bottom: $space-small;

    @include media($min: $bp-small) {
      padding-bottom: $space-large;
    }

    summary {
      ~ * {
        animation: sneak-in 0.4s ease-in-out;
      }

      &::after {
        transform: translateY(-50%) rotateX(180deg);
      }
    }
  }

  > div {
    > h1, > h2, > h3, > h4, > h5, > h6 {
      &:first-child {
        margin-top: rem($font-body-size);
      }
    }
  }

  .grid {
    width: auto;

    &:not(.mobile-stacked) {
      > div {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            margin-top: 0;
          }
        }
      }

      div:nth-child(1),
      div:nth-child(2) {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            margin-top: rem($font-body-size);
          }
        }
      }
    }

    &.mobile-stacked {
      > div {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            @include media($min: $bp-small) {
              margin-top: 0;
            }
          }
        }
      }

      div:nth-child(1) {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            margin-top: rem($font-body-size);
          }
        }
      }

      div:nth-child(2) {
        h1, h2, h3, h4, h5, h6 {
          &:first-child {
            @include media($min: $bp-small) {
              margin-top: rem($font-body-size);
            }
          }
        }
      }
    }
  }
}

summary {
  @include font($font-heading);
  @include font-size-heading-4;
  position: relative;
  display: block;
  color: $color-text-headings;
  cursor: pointer;

  .summary-wrapper {
    padding: $space-small $space-large $space-small 0;
    outline: none;

    @include media($min: $bp-small) {
      padding: $space-large $space-large $space-large 0;
    }
  }

  .headline {
    margin: 0;
  }

  .sub-headline {
    @include font($font-body);
    @include font-size-body;
    display: block;
    color: $color-text-light-text;
  }

  &::-webkit-details-marker {
    display: none;
  }

  // The before is added for IE and Edge, but we want our own style (using after)
  &::before {
    display: none;
  }

  &::after {
    content: "";
    background: url('data:image/svg+xml;utf8,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 6.75L12.5 1.25" stroke="%23#{$color-text-regular-text-encoded}" stroke-width="1.75" stroke-linecap="square"/><path d="M7 6.75L1.5 1.25" stroke="%23#{$color-text-regular-text-encoded}" stroke-width="1.75" stroke-linecap="square"/></svg>') no-repeat 50% 50%;
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
    z-index: -1;
  }
}

.product-readmore {
  &.rte {
    .grid {
      width: auto;
    }
  }

  summary {
    @include font-size-heading-3;

    .summary-wrapper {
      @include media($min: $bp-smaller) {
        display: flex;
        align-items: center;
      }

      .headline {
        @include media($min: $bp-smaller) {
          flex: 0 0 rem(150px);
        }

        @include media($min: $bp-small) {
          flex: 0 0 rem(250px);
        }
      }

      .sub-headline {
        @include media($min: $bp-smaller) {
          margin-left: $space-large;
        }
      }
    }
  }

  .indent-content {
    @include media($min: $bp-smaller) {
      margin-left: rem(150px);
      padding-left: $space-large;
    }

    @include media($min: $bp-small) {
      margin-left: rem(250px);
    }
  }
}

@media all and (-ms-high-contrast:none) {
  summary::after {
    content: "\203A";
    height: auto;
    width: auto;
    font-size: 2rem;
    transform: translateY(-50%) rotate(90deg);
  }

  details[open] summary::after {
    transform: translateY(-50%) rotate(-90deg);
  }
}

/* Static Collection Listing (Pointer)
   ========================================================================== */

.collection-listing {
  .collection-listing__hero {
    position: relative;
    display: flex;
    align-items: center;
    height: 216px;

    .collection-listing__hero--title {
      z-index: 10;
      margin: 0;
      width: 100%;
      text-align: center;
      color: $color-white;

      @include media($min: $bp-medium) {
        font-size: rem(40px);
        line-height: rem(48px);
        padding-left: 30px;
        text-align: left;
      }
    }

    .collection-listing__hero--image {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    &::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba($color-black, .3);
    }
  }

  .collection-listing__grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;

    .collection-listing__grid--item {
      margin: 50px 10px 0;
      width: calc(100% - 20px);
      text-align: center;
      text-decoration: none;

      h2 {
        margin-top: 20px;
        margin-bottom: 0;
        @include font-size-body;
        @extend %menu;
        color: $color-dark-gray;
      }

      &:hover .collection-listing__grid--image {
        opacity: .75;
      }

      @include media($min: $bp-small) {
        width: calc(50% - 20px);
      }

      @include media($min: $bp-medium) {
        width: calc(25% - 20px);
      }
    }

    .collection-listing__grid--image {
      max-width: 100%;
      width: 100%;
      height: 184px;
      object-fit: cover;
      transition: opacity .25s ease;
    }
  }
}

/* Product Free Gift (Pointer)
   ========================================================================== */

.product-gift {
  display: flex;
  margin-top: 30px;
  border: 1px solid $color-black;
  padding: 10px 20px;

  img {
    height: 80px;
    width: auto;
    margin-right: 20px;
  }

  p {
    margin: 0;
    font-size: rem(12px);
    line-height: rem(16px);
    color: $color-mild-gray;

    strong {
      @include font($font-body-bold);
      font-weight: bold;
      font-size: rem(14px);
      line-height: rem(20px);
      color: $color-dark-gray;
    }

    &:last-of-type {
      margin-top: 4px;
    }
  }

  a {
    @include font($font-body-bold);
    font-weight: bold;
    color: $color-mild-gray;
  }

  .product-gift__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Product Quick Info (Pointer)
   ========================================================================== */

.product-quick-info {
  .product-quick-info__heading {
    font-size: rem(20px);
    line-height: rem(28px);
    color: $color-medium-gray;
  }

  .product-quick-info__list {
    padding-left: 18px;
    color: $color-gray;

    li {
      margin: 10px 0;
      font-size: rem(14px);
      line-height: rem(24px);
    }
  }
}

/* Product Overview (Pointer)
   ========================================================================== */

.product-overview {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid $color-light-gray;

  h2 {
    margin-top: 0;
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
    color: $color-medium-gray;
  }

  .product-overview__wrapper {
    .product-description p {
      color: $color-gray;
      font-size: rem(14px);
      line-height: rem(24px);
    }

    @include media($min: $bp-medium) {
      width: 50%;
      padding-right: 90px;
    }

    @include media($min: $bp-large) {
      padding-right: 135px;
    }
  }

  .product-overview__frequent--heading {
    margin-top: 40px;

    @include media($min: $bp-medium) {
      margin-top: 0;
      margin-bottom: 30px;
    }
  }

  .product-overview__exclusive {
    background-color: $color-background-gray;
    padding: 10px;

    p, a {
      font-size: rem(14px);
      line-height: rem(24px);
      color: $color-gray;
    }

    p {
      margin: 0;
    }

    a {
      @include font($font-body-bold);
      font-weight: bold;
    }
  }

  @include media($max: $bp-medium) {
    padding-left: 10px;
    padding-right: 10px;
  }

  @include media($min: $bp-medium) {
    flex-direction: row;
    margin-top: 50px;
    padding-top: 50px;
  }
}

/* Product Technical Information (Pointer)
   ========================================================================== */

.product-technical {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid $color-light-gray;

  h2 {
    margin-top: 0;
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
    color: $color-medium-gray;
  }

  h3 {
    margin-top: 0;
    @include font($font-body);
    font-size: rem(20px);
    line-height: rem(28px);
    color: $color-medium-gray;
  }

  .product-technical__wrapper {
    display: flex;
    flex-direction: column;

    @include media($min: $bp-medium) {
      flex-direction: row;
    }
  }

  .product-technical__details {
    .product-technical__details--list {
      margin: 20px 0;
      list-style: none;
      padding-left: 0;

      li {
        display: flex;
        font-size: rem(14px);
        line-height: rem(32px);

        p {
          margin: 0;
          padding-left: 10px;
          width: 50%;

          &:first-of-type {
            @include font($font-body-bold);
            font-weight: bold;
          }
        }

        &:nth-child(odd) {
          background: $color-background-gray;
        }
      }
    }
  }

  .product-technical__included {
    ul {
      margin: 20px 0;
      padding-left: 18px;

      li {
        font-size: rem(14px);
        line-height: rem(24px);
        color: $color-gray;
      }

      p {
        margin: 8px 0;
      }
    }
  }

  .product-technical__info-wrapper {
    @include media($min: $bp-medium) {
      width: 50%;
      padding-right: 90px;
    }

    @include media($min: $bp-large) {
      padding-right: 135px;
    }
  }

  .product-technical__features {
    .product-technical__features--item {
      border-bottom: 1px solid $color-light-gray;

      p {
        margin: 0;
        font-size: rem(14px);
        line-height: rem(24px);
        color: $color-gray;
      }

      .product-technical__features--item-heading {
        @include font($font-body-bold);
        font-weight: bold;
        position: relative;
        padding: 8px 0;
        cursor: pointer;

        .icon-chevron-down-small {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
        }
      }

      .product-technical__features--item-body {
        max-height: 0;
        overflow: hidden;
        transition: all .25s ease;

        &.active {
          max-height: 500px;
          padding-bottom: 8px;
        }
      }
    }

    @include media($min: $bp-medium) {
      width: 50%;
    }
  }

  @include media($max: $bp-medium) {
    margin-top: 25px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 25px;
  }
}

/* Product Imagery (Pointer)
   ========================================================================== */

.product-imagery {
  margin-top: 50px;

  img {
    max-width: 100%;
  }

  h3, h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    @include font($font-body-bold);
    font-weight: bold;
    color: $color-medium-gray;
  }

  h3 {
    font-size: rem(20px);
    line-height: rem(28px);
  }

  h4 {
    font-size: rem(16px);
    line-height: rem(24px);
  }

  p {
    font-size: rem(14px);
    line-height: rem(24px);
    color: $color-gray;
  }

  .product-imagery__full {
    margin-bottom: 40px;

    img {
      width: 100%;
      height: 260px;
      object-fit: cover;

      @include media($min: $bp-medium) {
        height: 415px;
      }
    }

    .product-imagery__full--desktop {
      display: none;

      @include media($min: $bp-medium) {
        display: block;
      }
    }

    .product-imagery__full--mobile {
      display: block;

      @include media($min: $bp-medium) {
        display: none;
      }
    }

    .product-imagery__full--content {
      @include media($min: $bp-medium) {
        margin: 0 auto;
        width: 66%;
        text-align: center;
      }
    }
  }

  .product-imagery__small {
    display: flex;
    flex-direction: column;

    img {
      width: 100%;
      height: 284px;
      object-fit: cover;
    }

    p {
      @include media($min: $bp-medium) {
        padding: 0 20px;
      }
    }

    .product-imagery__small--wrapper {
      margin-bottom: 25px;

      @include media($min: $bp-medium) {
        margin-bottom: 0;
        width: calc(33% - 10px);
      }
    }

    @include media($min: $bp-medium) {
      flex-direction: row;
      justify-content: space-between;
      text-align: center;
    }
  }

  @include media($max: $bp-medium) {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.product-form-promo {
  margin-top: 15px;
  border: 1px solid $color-dark-gray;
  padding: 16px 11px;
  text-align: center;
  font-size: rem(12px);
  line-height: rem(16px);

  p {
    margin: 0;
  }

  strong {
    @include font($font-body-bold);
    font-weight: bold;
  }

  img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 118px;
  }
}

.product-recently-viewed-wrapper {
  padding-left: 0;
  background: none;

  @include media($min: $bp-medium) {
    padding: 0;
  }
}

.product-recommendations--section {
  background: $color-background-gray;
}

.product-recommendations--title, .product-recently-viewed-heading {
  margin-top: 0;
  @include font($font-body);
  font-size: rem(28px);
  line-height: rem(36px);
  color: $color-medium-gray;
}

.product-recommendations--container {
  background: $color-background-gray;
  padding-top: 20px;
  padding-bottom: 20px;

  @include media($min: $bp-medium) {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.product-container-medium {
  @include media($min: $bp-medium) {
    max-width: 1130px;
    margin-left: auto;
    margin-right: auto;
  }
}

.product-form--atc-button  .atc-button--text {
  text-transform: initial;
}

.product-form--alt .shopify-payment-button,
.product-form--regular .shopify-payment-button {
  display: none;
}

.share-buttons--list {
  .share-buttons--facebook {
    background-color: $color-facebook;
  }

  .share-buttons--twitter {
    background-color: $color-twitter;
  }

  .share-buttons--pinterest {
    background-color: $color-pinterest;
  }

  .share-buttons--linkedin {
    background-color: $color-linkedin;
  }
}

.community-photo-gallery--container {
  @extend %section-container;
}

/* Product Shipping Times (Pointer)
   ========================================================================== */

.product-shipping-times {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 15px;
  padding: 25px;
  font-size: rem(12px);
  line-height: rem(16px);
  color: $color-dark-gray;
  background: $color-white;

  p {
    margin: 2px 0;
  }

  .product-shipping-times__heading {
    margin: 0;
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(16px);
    line-height: rem(24px);
  }

  .product-shipping-times__estimate {
    display: flex;
    align-items: center;
    @include font($font-body-bold);
    font-weight: bold;

    img {
      margin-right: 6px;
      height: 16px;
      width: auto;
    }
  }

  .product-shipping-times__disclaimer {
    color: $color-mild-gray;
  }

  .product-shipping-times__close {
    position: absolute;
    top: 0;
    right: 0;

    span:focus {
      outline: none;
    }
  }
}

.product-shipping-modal {
  display: none;

  &.active {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .25);
  }

  @include media($max: $bp-medium) {
    .product-shipping-times {
      width: 90%;
    }
  }
}

.product-shipping-guarantee {
  margin-top: 15px;
  padding: 15px;
  background: $color-background-gray;
  color: $color-dark-gray;
  font-size: rem(12px);
  line-height: rem(16px);

  p {
    margin: 2px 0;
  }

  a {
    @include font($font-body-bold);
    font-weight: bold;
    color: $color-dark-gray;
  }

  .product-shipping-guarantee__heading {
    margin: 0;
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(16px);
    line-height: rem(24px);
  }

  .product-shipping-guarantee__date {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    @include font($font-body-bold);
    font-weight: bold;

    img {
      margin-right: 6px;
      height: 16px;
      width: auto;
    }
  }
}

/* Delivery Timer Styling (Pointer)
   ========================================================================== */

#delivery_timer_wrapper {
  @include font($font-body);
  margin: 4px 0;
  padding: 0 !important;
  font-size: rem(12px);
  line-height: rem(16px);
  color: $color-dark-gray;

  /** .delivery_date {
    display: none;
  } **/
}

/* Product Sticky Add To Cart (Pointer)
   ========================================================================== */

.product-sticky-atc {
  position: fixed;
  left: 0;
  bottom: -100%;
  z-index: 100;
  height: 80px;
  width: 100%;
  background: $color-white;
  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  transition: bottom .5s ease;

  &.active {
    bottom: 0;
  }

  button {
    @extend %button-secondary, %atc-button;
    @include button-size(large);
    height: 50px;
    min-width: fit-content;
    align-self: center;
    text-transform: initial;

    @include media($max: $bp-small) {
      padding: 14px 20px;
      width: 70%;
    }

    @include media($max: $bp-xxs) {
      width: 100%;
    }

    @include media($min: $bp-large) {
      width: 286px;
    }
  }

  .product-sticky-atc__wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
  }

  .product-sticky-atc__product {
    display: flex;
    align-items: center;

    .product-sticky-atc__product--image {
      margin-right: 15px;

      img {
        height: 60px;

        @include media($min: $bp-medium) {
          height: 80px;
        }
      }

      @include media($min: $bp-small) {
        margin-right: 35px;
      }
    }

    .product-sticky-atc__product--info {
      display: none;

      @include media($min: $bp-medium) {
        display: block;
      }
    }

    .product-sticky-atc__product--title {
      margin: 0;
      font-size: rem(16px);
      line-height: rem(24px);
      color: $color-medium-gray;
      padding-right: 15px;

      @include media($min: $bp-large) {
        font-size: rem(20px);
        line-height: rem(28px);
      }
    }

    .product-sticky-atc__product--price {
      margin: 0;
      @include font($font-body-bold);
      font-weight: bold;
      font-size: rem(14px);
      line-height: rem(20px);
      color: #222222;

      @include media($min: $bp-large) {
        font-size: rem(16px);
        line-height: rem(24px);
      }
    }
  }

  .product-sticky-atc__product--form {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .form-field-select-wrapper {
      display: none;
      height: 50px;
      margin-right: 15px;

      @include media($min: $bp-xxs) {
        display: block;
      }

      @include media($min: $bp-large) {
        width: 115px;
      }
    }

    @include media($max: $bp-medium) {
      width: 100%;
    }
  }

  @include media($min: $bp-medium) {
    height: 100px;
  }
}

/* Reviews Custom Styling (yotpo) (Pointer)
   ========================================================================== */

.product-review-stars {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;

  .yotpo-bottomline a {
    font-size: rem(12px) !important;
    line-height: rem(16px) !important;
    color: $color-mild-gray !important;
  }

  .yotpo-icon {
    font-size: rem(16px) !important;
    line-height: rem(16px) !important;
  }

  .yotpo-icon-double-bubble {
    display: none;
  }

  .star-clickable a {
    transform: translateY(.05rem);
    padding-left: 7px;
  }

  .yotpo-icon-star,
  .yotpo-icon-half-star,
  .yotpo-icon-empty-star {
    color: $color-black !important;
  }

  .questions {
    display: flex;
    align-items: center;
    max-height: 15px;
    padding-left: 6px;
    margin-left: 6px !important;
    border-left: 1px solid $color-mild-gray;
    transform: translateY(.06rem);
  }

  .pull-left.text-m.ask-question {
    transform: translateY(.06rem);
    margin-left: 6px;
  }
}

.product-reviews {
  .product-reviews__heading {
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
    color: $color-medium-gray;
  }

  .yotpo-icon-profile,
  .yotpo-helpful,
  .footer-actions .yotpo-icon,
  .yotpo-reviews-filters,
  .yotpo-label-container,
  .bottom-line-items .avg-score,
  .yotpo-reviews-header,
  .promoted-products-box {
    display: none !important;
  }

  .yotpo-user-title {
    font-weight: bold !important;
    font-size: rem(12px) !important;
    line-height: rem(20px) !important;
    color: $color-mild-gray;
    margin: 4px 0;
    display: flex !important;
    align-items: center;

    &:before {
      content: url({{ 'yotpo_checkmark.svg' | asset_url }});
      display: inline-block;
      width: 14px;
      height: 14px;
      margin: 0 8px;
    }
  }

  .new-yotpo-small-box.reviews {
    margin: 0 !important;

    @include media($max: $bp-medium) {
      margin-top: 30px !important;
    }
  }

  .yotpo-review.yotpo-regular-box {
    margin-left: 0 !important;
  }

  .new-yotpo-small-box.reviews:focus, .yotpo-nav-primary:focus {
    outline: none !important;
  }

  .yotpo-main, .yotpo-footer {
    margin-left: 0 !important;
  }

  .yotpo-user-name {
    font-size: rem(20px) !important;
    line-height: rem(28px) !important;
    color: $color-medium-gray !important;
  }

  .yotpo-pager a {
    color: #4A4A4A !important;
  }

  .yotpo-icon-star, .yotpo-icon-empty-star, .yotpo-icon-half-star {
    font-size: rem(16px) !important;
    line-height: rem(16px) !important;
    color: $color-black !important;
  }

  .rating-stars-container {
    height: 16px !important;
    margin-left: 0 !important;
  }

  .reviews-qa-labels-container  {
    margin: 0 !important;

    .reviews-qa-label {
      white-space: nowrap;
    }
  }

  .yotpo-display-wrapper .bottom-line-items-container {
    position: absolute;
    left: 0;
    width: 100%;
    transform: translateY(-50px);
    padding: 0 !important;

    @include media($min: $bp-medium) {
      width: fit-content;
      left: 215px;
      transform: translateY(15px);
    }
  }

  .yotpo-nav-primary {
    @include media($min: $bp-medium) {
      width: 50% !important;
    }
  }

  .yotpo-nav-primary .yotpo-nav-wrapper span {
    text-transform: lowercase;
  }

  .yotpo-nav-primary ul {
    @include media($min: $bp-medium) {
      transform: translateY(20px);
    }
  }

  .yotpo-nav-primary .yotpo-nav-tab {
    span {
      @include font($font-body-bold);
      font-weight: bold;
      font-size: rem(16px) !important;
      line-height: rem(24px) !important;
      color: $color-mild-gray !important;
    }

    &.yotpo-active {
      .yotpo-nav-wrapper {
        border-bottom: none !important;
      }

      span {
        color: $color-gray !important;
        text-decoration: underline !important;
      }
    }
  }

  .write-question-review-buttons-container .yotpo-default-button {
    background: $color-dark-gray !important;
    padding: 15px 32px !important;
    height: auto;

    .yotpo-icon {
      display: none !important;
    }

    span {
      font-size: rem(16px) !important;
      line-height: rem(18px) !important;
      color: $color-white !important;
    }

    &:hover {
      background: $color-medium-gray !important;
    }
  }

  @include media($max: $bp-medium) {
    .write-question-review-buttons-container {
      display: flex;
      flex-direction: column;
      margin-top: 60px;
      float: none !important;
      padding-right: 0 !important;
    }

    .write-question-button {
      margin-left: 0 !important;
    }

    .yotpo-default-button {
      width: 100% !important;
    }
  }

  .write-review .yotpo-default-button.yotpo-submit {
    background: $color-dark-gray !important;
    padding: 15px 32px !important;
    @include font($font-body-bold);
    font-weight: bold !important;
    font-size: rem(16px) !important;
    line-height: rem(24px) !important;
    color: $color-white !important;
  }
}

.productitem--info .product-review-stars {
  margin-bottom: 0;
  pointer-events: none;
}

.bottom-line-items-container {
  @include media($min: $bp-small, $max: $bp-larger) {
    margin: 0 !important;
  }
}

.bottom-line-items {
  @include media($min: $bp-small, $max: $bp-larger) {
    padding-left: $space-large !important;
  }
}

/* Paybright Custom Styling (Pointer)
   ========================================================================== */

#paybright-widget-container {
  p {
    font-family: type_body_custom !important;
    font-size: rem(12px) !important;
    line-height: rem(18px) !important;
  }

  img {
    height: 18px !important;
  }
}

.paybright-class-modal {
  margin-top: 80px !important;
}

/* Product Compare Custom Styling (Pointer)
   ========================================================================== */

.productitem {
  display: flex;
  flex-direction: column;

  .SPCMP_chk_lbl {
    z-index: 1000;
    display: flex;
    align-items: center;
    order: 1;
    margin-top: -12px;
  }

  .SPCMP_Add_span {
    margin-left: 9px;
    @include font($font-body);
    font-size: rem(14px);
    line-height: rem(24px);
  }

  .SPCMP_Add {
    margin: 0;
  }

  .productitem--actions {
    order: 2;
  }
}

.product--container {
  .SPCMP_Add {
    @extend %button-primary, %atc-button;
    @include button-size(large);
    padding: 0.875rem 2.125rem !important;
    font-size: 0.92969rem !important;
    line-height: 1.15 !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-transform: initial !important;
    border: 1px solid $color-orange !important;

    &:hover, &:focus, &:active {
      opacity: .75 !important;
      border: 1px solid $color-orange !important;
    }
  }
}

#sa_ca_wrapper {
  .ca_flap.ca_tab span:not(.SP_triangle),
  .compare-button.com-page-btn {
    @include font($font-body-bold);
    font-weight: bold;
    letter-spacing: .05rem;
  }
}

.product-recently-viewed--section .SPCMP_chk_lbl {
  display: none;
}

#SP_CmpHtml {
  @extend %layout-container;
  min-height: 50vh;
  margin-bottom: 40px;

  // this typo is from the app, wasn't me :D
  .container-fulid {
    padding: 0;
  }

  .SP_CMPNoProduct {
    margin-top: 30px;
  }

  .SA_load_img {
    margin-top: 40px;
  }

  .sa_cmp_title {
    @include font($font-body);
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    font-size: rem(32px) !important;
    line-height: rem(40px) !important;
    color: $color-medium-gray !important;
  }

  .sp_add_to_cart {
    padding: 5px !important;

    .sa_cmp_addcart,
    .sa_cmp_soldout {
      @extend %button-primary, %atc-button;
      @include button-size(large);
      padding: 0.875rem 2.125rem !important;
      font-size: 0.92969rem !important;
      line-height: 1.15 !important;
      width: 100% !important;
      background-color: $color-orange !important;
      border: none !important;
      transition: opacity .25s ease;

      &:hover, &:focus, &:active {
        opacity: .75;
      }
    }
  }

  .sp_product_heading {
    li {
      @include font($font-body-bold);
      font-weight: bold;
      font-size: rem(14px);

      &:not(:last-of-type) {
        border-bottom: none !important;
      }
    }
  }

  .sp_product {
    li, strike, .money, .sa_cmp_discount {
      @include font($font-body);
      font-size: rem(12px);
      line-height: rem(16px);
    }

    .sp_desc {
      max-height: 155px;
      overflow-y: scroll !important;

      h1, h1 span, h2, h2 span {
        margin-bottom: 12px;
        @include font($font-body);
        font-size: rem(14px) !important;
        line-height: rem(20px) !important;
      }

      p {
        @include font($font-body);
        font-size: rem(12px) !important;
        line-height: rem(16px) !important;

        &:not(:last-child) {
          margin-bottom: 12px;
        }
      }

      span, strong {
        font-size: rem(12px) !important;
        line-height: rem(16px) !important;
        color: #333 !important;
      }

      span {
        @include font($font-body);
      }

      strong {
        @include font($font-body-bold);
        font-weight: bold;
      }
    }
  }

  @include media($min: $bp-medium) {
    margin-bottom: 124px;
  }
}

/* About Page Styling (Pointer)
   ========================================================================== */

.about-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500px;
  color: $color-white;
  text-align: center;

  .about-hero__heading {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: rem(40px);
    line-height: rem(48px);
  }

  .about-hero__subheading {
    margin: 0;
    font-size: rem(28px);
    line-height: rem(36px);
  }

  .about-hero__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}

.about-page-content {
  h1, h2 {
    @include font($font-body-bold);
    font-weight: bold;
    color: $color-gray;
  }

  h3, h4, h5 {
    @include font($font-body);
    color: $color-gray;
  }

  h2, h3, h4, h5 {
    font-size: rem(20px);
    line-height: rem(28px);
  }

  p, li {
    font-size: rem(14px);
    line-height: rem(24px);
    color: $color-gray;
  }

  li:not(:last-child) {
    margin-bottom: 4px;
  }

  img {
    margin-top: 30px;
  }

  @include media($min: $bp-medium) {
    margin-top: 40px;
  }
}

.in-the-media {
  background: $color-background-gray;
  margin-top: 70px;
  padding-top: 50px;
  padding-bottom: 60px;
  text-align: center;

  .in-the-media__heading {
    margin-top: 0;
    margin-bottom: 60px;
    padding: 0 15px;
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
    color: $color-gray;
  }

  .in-the-media__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    max-width: 1080px;

    @include media($max: $bp-xl) {
      padding: 0 30px;
    }

    @include media($min: $bp-medium) {
      justify-content: space-between;
    }
  }

  .in-the-media__wrapper {
    color: $color-dark-gray;
  }

  .in-the-media__quote {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    width: 195px;
    height: 195px;
    border-radius: 50%;
    border: 1px solid $color-orange;
    background: $color-white;

    p {
      @include font($font-body-bold);
      font-weight: bold;
      font-size: rem(16px);
      line-height: rem(24px);
    }
  }

  .in-the-media__source {
    margin-bottom: 30px;
  }
}

.about-contact-us {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 0;
  color: $color-gray;

  h2 {
    margin-top: 0;
    margin-bottom: 20px;
    @include font($font-body);
    font-size: rem(28px);
    line-height: rem(36px);
  }

  h4 {
    margin-top: 20px;
    margin-bottom: 0;
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(16px);
    line-height: rem(24px);
  }

  p {
    margin: 0;
    @include font($font-body);
    font-size: rem(14px);
    line-height: rem(24px);
  }

  a {
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(14px);
    line-height: rem(24px);
    color: $color-gray;
  }

  .about-contact-us__phone {
    display: inline-block;
    @include font($font-body);
    text-decoration: none;
  }

  .about-contact-us__phone--label {
    display: inline-block;
  }

  .about-contact-us__info {
    margin-bottom: 30px;
    padding-left: 10px;

    .about-contact-us__subheading {
      max-width: 324px;
      margin-bottom: 0;
      padding-right: 30px;
    }

    @include media($min: $bp-medium) {
      padding-left: 65px;
      width: 40%;
    }

    @include media($min: $bp-large) {
      padding-left: 95px;
    }

    @include media($min: $bp-xl) {
      padding-left: 135px;
    }
  }

  .about-contact-us__map {
    height: 500px;

    .about-contact-us__map--image {
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }

    iframe {
      height: 100%;
      width: 100%;
    }

    @include media($min: $bp-medium) {
      width: 60%;
    }
  }

  @include media($min: $bp-medium) {
    flex-direction: row-reverse;
    padding: 80px 0;
  }
}

/* Product Addons Styling (Pointer)
   ========================================================================== */

#spiceaddonsappid {
  #sg-pro-access-wrapper,
  .sg-pro-access-heading,
  .sg-pro-access-input-felid.spice_select_variant_quantity {
    display: none;
  }

  .sg-pro-access-product-img.sg-sm-img {
    border: none;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: scale-down;
    }
  }

  .sg-pro-access-product {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .sg-checkbox-label {
    position: absolute !important;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .sg-pro-access-product-title {
    @include font($font-body);
    font-size: rem(14px);
    line-height: rem(24px);
    text-decoration: none;
  }

  .sg-pro-access-price,
  .spicegems-main-price {
    @include font($font-body-bold);
    font-weight: bold;
    font-size: rem(14px);
    line-height: rem(24px);
  }

  #sg-checkbox input[type=checkbox]:checked+.sg-label-text:before,
  #sg-checkbox .sg-checkbox-label {
    color: $color-black !important;
  }
}

.spicegems-addon-product {
  border: 1px solid $color-light-gray !important;

  .spicegems-addon-product-title,
  .spicegems-addon-price {
    @include font($font-product-price);
  }

  .spicegems-addon-price {
    @include font-size-heading-5;
  }
}

.spicegems-addon-carousel-heading {
  font-family: type_body_custom !important;
  font-weight: normal !important;
  margin-top: 20px;
}

.spicegems-addon-btn.sg-primary-btn {
  @extend %button-secondary;
  background: $color-black !important;
  border: none !important;
  transition: opacity .25s ease;

  &:hover {
    opacity: .75;
  }
}

.spicegems-carousel-btn {
  background: none !important;
  border: none !important;

  &:hover, &:focus, &:active {
    color: $color-black !important;
  }
}

/* Brands Page Styling (Pointer)
   ========================================================================== */

.brands-page-list {
  list-style: none;

  li {
    padding-bottom: 8px;
  }

  @include media($min: $bp-medium) {
    column-count: 4;
    column-gap: 30px;
  }

  @include media($min: $bp-large) {
    column-gap: 60px;
  }
}

/* Search Results Page Styling (Pointer)
   ========================================================================== */

body.snize-results-page {
  .page-content.rte {
    @extend %layout-container;
  }

  .snize-button {
    border: none !important;
    outline: none !important;
    background-color: $color-orange !important;
  }

  #snize-quick-view-add-to-cart {
    @include font($font-body-bold);
    font-weight: bold;
  }
}

.article--content {
  #yt-subscribe, #___ytsubscribe_0 {
    display: none !important;
  }
}

/* Password Protected Page Styling (Pointer)
   ========================================================================== */

.template-password {
  background-color: $color-dark-gray;
  background-image: url("/cdn/shop/files/consiglios-background.jpg?v=1593533511");
  background-position: 50% 50%;
  background-size: cover;

  .password-page-header {
    justify-content: center;
    padding: 25px;

    @include media($min: $bp-medium) {
      padding: 58px 25px;
    }
  }

  .password-header-login {
    display: none;
  }

  .password-header-logo {
    width: fit-content;
    padding: 0;
  }

  .password-page-content--inner {
    margin-right: 5%;
    text-align: left;

    h1, p {
      color: $color-white;
    }

    @include media($min: $bp-medium) {
      h1 {
        font-size: rem(56px);
        line-height: rem(48px);
      }

      p {
        font-size: rem(24px);
        line-height: rem(28px);
      }
    }
  }

  .password-page-footer {
    color: $color-white;

    p {
      font-size: rem(14px);
      line-height: rem(24px);
    }
  }

  .passwordentry-container {
    display: block;
    margin-top: 72px;

    h4, p, a {
      font-size: rem(14px);
      line-height: rem(24px);
      color: $color-white;
    }

    .passwordentry-title {
      margin-bottom: 16px;
    }

    .passwordentry-owner {
      margin-top: 16px;
    }

    input:focus + label {
      display: none;
    }
  }

  .passwordentry-input input {
    border: none;
  }

  .passwordentry-submit .button-primary {
    height: 47px;
    background: $color-orange;
    border: none;
    text-transform: initial;
  }
}

/* Chat Widget styling / bug fixes (Pointer)
   ========================================================================== */

@include media($max: $bp-medium) {
  /*.template-product #chat-widget-container {
    display: none;
  }*/
}