/*============================================================================
  District Theme
  Copyright 2020 Style Hatch Inc.

  Some things to know about this file:
    - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
    - The output CSS is compressed and comments are removed
    - You cannot use @imports in this file
        * Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import
==============================================================================*/

/*============================================================================
  Table of Contents

  #General Variables
  #Typography Variables
  #Grid
  #Mixins
  #Bourbon - Partial Library Mixins
  #Normalize
  #Lists
  #Typography
  #Icons
  // Modules
  #Basic
  #Header Util
  #Header - Site Header
  #Hero Content
  #Featured Text
  #Featured Grid
  #Collections
  #Products
  #Cart
  #Instagram Collection
  #Page
  #Blog
  #RTE (rich text editor)
  #Social Share
  #Content Util / Breadcrumbs
  #Forms
  #Site Footer
  #Conditional Old IE Fixes
  // Vendors
  #Big Slide
  #Flickity
  #Magnific

==============================================================================*/

/*============================================================================
  #General Variables
==============================================================================*/
// Primary colors
$primaryTextColor: #4f4f4f;
$primaryTitleColor: #000000;

$primaryTitleTextTransform: none;
$primaryTitleTextWeight: 400;

$primaryBackgroundColor: #ffffff;
$primaryAccentColor: #87b04a;

// Dynamically detect the accent color's lightness
// set the value to black or white for text on top
@function set-text-on-accent-color($color) {
  @if (lightness($color) > 60) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

$primaryTextOnAccentColor: set-text-on-accent-color($primaryAccentColor);
$primaryHoverColor: darken($primaryAccentColor, 5%);

$primaryImageLabelColor: $primaryBackgroundColor;
$primaryImageLabelAccentColor: $primaryAccentColor;
$primaryImageLabelTextColor: $primaryTextColor;

$contentBoxBackgroundColor: #f3f3f3;

// Outer border & util nav
$siteBorderColor: #e9e9e9;
$siteBorderTextColor: #505050;
$siteBorderAll: false;

// Site header & nav
// Default colors overwritten by section
$siteHeaderTitleTextColor: #000000;
$siteHeaderNavTextColor: #000000;
$siteHeaderBackgroundColor: #ffffff;
$siteHeaderAccentColor: #87b04a;
$siteHeaderTitleTextWeight: 600;
$siteHeaderTitleTextTransform: none;
$siteHeaderNavTextWeight: 600;
$siteHeaderNavTextTransform: uppercase;
$siteHeaderFullWidth: false;

// Home Hero
$homeHeroBackgroundColor: $contentBoxBackgroundColor;

// Home Featured Text
$homeFeaturedTextColor: $primaryTextColor;
$homeFeaturedTitleColor: $primaryTitleColor;
$homeFeaturedBackgroundColor: $primaryBackgroundColor;
$homeFeaturedFullWidth: false;

// Home Featured Collections
$homeFeaturedCollectionsFadeLabel: true;
$homeFeaturedCollectionsFullWidth: false;

$productCollectionBackgroundColor: $primaryBackgroundColor;
$productCollectionFullWidth: false;

$productBackgroundColor: $primaryBackgroundColor;
$productFullWidth: false;

$genericFullWidth: true;

$blogAsideAlign: right;
$blogFullWidth: false;
$blogBackgroundColor: $primaryBackgroundColor;
$blogTitleTextWeight: 600;

// Product Page
$productPhotoAlign: left;

$footerFullWidth: false;
$footerBackgroundColor: #e9e9e9;
$footerTitleTextColor: #606060;
$footerNavTextColor: #565656;
$footerTextColor: mix($footerTitleTextColor, $footerBackgroundColor, 80%);
$footerTextAlignment: left;

$verticalContainerPadding: 40px;

$productImageRatioPercentage: 100%;
$productImageAutoCrop: false;


// ==================================================
// Media Queries
// ==================================================

// // Supports
// @media min-width
// @media max-width
// @media min-width and max-width

$viewport-increment: 0.1px; // customize to suite

// Desktop
$desktop: 1000px; // customize to suite
$pre-desktop: $desktop - $viewport-increment;

// Tablet
$tablet: 800px; // customize to suite
$pre-tablet: $tablet - $viewport-increment;

// Palm
$largeMobile: 700px; // customize to suite
$pre-largeMobile: $largeMobile - $viewport-increment;

// Palm
$mobile: 600px; // customize to suite
$pre-mobile: $mobile - $viewport-increment;

// Palm
$smallMobile: 440px; // customize to suite
$post-smallMobile: $smallMobile + $viewport-increment;

// Constraints
$min: min-width;
$max: max-width;

/*============================================================================
  #Typography 
  - New Monotype selector
==============================================================================*/





// Font Weights
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-headings-bold: 700;

// Headings fonts
$font-stack-headings: "Archivo Narrow", sans-serif;
$font-weight-headings: 400;
$font-style-headings: normal;


  $headerFontBoldWeight: false;



// Body fonts
$font-stack-body: "IBM Plex Sans", sans-serif;
$font-weight-body: 400;
$font-style-body: normal;

// Navigation fonts
$font-stack-navigation: "IBM Plex Sans", sans-serif;
$font-weight-navigation: 400;
$font-style-navigation: normal;

$headerFontStack: $font-stack-headings;
$headerFontWeight: 400;
$navFontStack: $font-stack-navigation;
$bodyFontStack: $font-stack-body;
$logoFontStack: $headerFontStack;

$baseFontSize: 16px; // Henseforth known as 1em
$baseFontSizeModify: 0.875;
$baseFontWeight: 400;
$baseFontWeightBold: 700;
$baseFontStyle: normal;
$headerFontSizeModify: 1;

/*============================================================================
  Convert pixels to ems
  eg. for a relational value of 12px write em(12) when the parent is 16px
  if the parent is another value say 24px write em(12, 24)
  Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
@function em($pxval, $base: $baseFontSize) {
  @if not unitless($pxval) {
    $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
    $base: strip-units($base);
  }
  @return ($pxval / $base) * 1em;
}



/*============================================================================
  Strips the unit from a number.
  @param {Number (With Unit)} $value
  @example scss - Usage
    $dimension: strip-units(10em);
  @example css - CSS Output
    $dimension: 10;
  @return {Number (Unitless)}
  based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss
==============================================================================*/
@function strip-units($value) {
  @return ($value / ($value * 0 + 1));
}

@function emModify($value, $modify: $baseFontSizeModify) {
  @return ($value * $modify);
}

@function emHeading($pxval, $base: $baseFontSize, $modify: $headerFontSizeModify) {
  @if not unitless($pxval) {
    $pxval: strip-units($pxval);
  }
  @if not unitless($base) {
    $base: strip-units($base);
  }
  @return (($pxval * $modify) / $base) * 1em;
}


/*============================================================================
  #Grid
    - Simple grid mixins
    - grid() on parent container with options to display gutterless or in reverse
    - grid-item() span 1-12 ($gridColumns)
==============================================================================*/
$gridGutter: 30px;
$gridColumns: 12;
$maxWidth: 100%;

// Sizing variables
$siteWidth: 1180px;
$gutter: em(30px);

/*================ Outer Container ================*/
@mixin outer-container($width: $maxWidth) {
  @include clearfix;
  max-width: $width;
  margin: {
    left: auto;
    right: auto;
  }
}

@mixin grid($gutterless: false, $reverse: false) {
  @include clearfix();
  margin: 0;
  padding: 0;
  font-size: 0;

  @if $gutterless == false {
    margin-left: -$gridGutter;
    &>* {
      padding-left: $gridGutter;
    }
  }

  @if $reverse == true {
    direction: rtl;
    // text-align: left;
    &>* {
      direction: ltr;
      text-align: left;
      display: inline-block;
    }
  } @else {
    direction: ltr;
    &>* {
      display: inline-block;
    }
  }
  link {
    display: none;
  }
}

@mixin grid-item($columns: $gridColumns) {
  @include box-sizing(border-box);
  font-size: emModify($baseFontSize);
  min-height: 1px;
  vertical-align: top;
  width: ($columns / $gridColumns) * 100%;
}

/*============================================================================
  #Mixins
==============================================================================*/



// ==================================================
// $Media Query @Mixin
// http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
// ==================================================
@mixin mediaQuery($constraint, $viewport1, $viewport2: null) {
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

@mixin buttonOutline(){
  padding: 2px 12px;
  border: 2px solid $primaryTextColor;
  color: $primaryTextColor;
  text-transform: $siteHeaderNavTextTransform;
  font-weight: $siteHeaderNavTextWeight;
  font-family: $navFontStack;
  font-size: em(11px);
  text-decoration: none;
  @include transition(all 0.1s ease-in-out);
  outline: none;
  &:hover,
  &:focus {
    color: $primaryAccentColor;
    border-color: $primaryAccentColor;
  }
}

// The clearfix mixin provides an easy way to contain floats
@mixin clearfix {
  &:after {
    clear: both;
    content: "";
    display: table;
  }
  *zoom: 1;
}
.clearfix {
  &:after {
    clear: both;
    content: "";
    display: table;
  }
  *zoom: 1;
}

/*============================================================================
  #Bourbon - Partial Library Mixins
==============================================================================*/
@mixin appearance ($value) {
  @include prefixer(appearance, $value, webkit, moz, ms, o);
}
@mixin box-sizing ($box) {
//  content-box | border-box | inherit
  @include prefixer(box-sizing, $box);
}
@mixin linear-gradient($angle, $color-stops...) {
  $_angle-with-vendor-prefix: "";
  $_angle: "";
  @if $angle == "to top" or $angle == "bottom" {
    $_angle-with-vendor-prefix: bottom;
    $_angle: to top;
  } @else if $angle == "to right" or $angle == "left" {
    $_angle-with-vendor-prefix: left;
    $_angle: to right;
  } @else if $angle == "to bottom" or $angle == "top" {
    $_angle-with-vendor-prefix: top;
    $_angle: to bottom;
  } @else if $angle == "to left" or $angle == "right" {
    $_angle-with-vendor-prefix: right;
    $_angle: to left;
  } @else if $angle == "to top right" or $angle == "bottom left" {
    $_angle-with-vendor-prefix: bottom left;
    $_angle: to top right;
  } @else if $angle == "to bottom right" or $angle == "top left" {
    $_angle-with-vendor-prefix: top left;
    $_angle: to bottom right;
  } @else if $angle == "to bottom left" or $angle == "top right" {
    $_angle-with-vendor-prefix: top right;
    $_angle: to bottom left;
  } @else if $angle == "to top left" or $angle == "bottom right" {
    $_angle-with-vendor-prefix: bottom right;
    $_angle: to top left;
  } @else {
    $_angle-with-vendor-prefix: $angle % 360;
    $_angle: (90 - $angle) % 360;
  }
  background: -webkit-linear-gradient($_angle-with-vendor-prefix, $color-stops);
  background: -moz-linear-gradient($_angle-with-vendor-prefix, $color-stops);
  background: -o-linear-gradient($_angle-with-vendor-prefix, $color-stops);
  background: linear-gradient($_angle, $color-stops);
}
@mixin transform($property: none) {
//  none | <transform-function>
  @include prefixer(transform, $property, webkit, moz, ms, o);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit, moz, ms, o);
}
@mixin transition ($properties...) {
  // Fix for vendor-prefix transform property
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  // Create lists for vendor-prefixed transform
  @each $list in $properties {
    @if nth($list, 1) == "transform" {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != "transform" {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
         $moz: append($moz,    $list2);
        $spec: append($spec,   $list3);
    }

    // Create lists for non-prefixed transition properties
    @else {
      $webkit:  append($webkit, $list, comma);
      $moz:     append($moz,    $list, comma);
      $spec:    append($spec,   $list, comma);
    }
  }

  @if $needs-prefixes {
    -webkit-transition: $webkit;
       -moz-transition: $moz;
            transition: $spec;
  }
  @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    }

    @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}
@mixin transition-property ($properties...) {
   -webkit-transition-property: transition-property-names($properties, 'webkit');
      -moz-transition-property: transition-property-names($properties, 'moz');
           transition-property: transition-property-names($properties, false);
}
@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}
@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}
@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}
@mixin user-select($arg: none) {
  @include prefixer(user-select, $arg, webkit, moz, ms);
}


// Addons & other mixins
@mixin hide-text {
  background-color: transparent;
  border:           0;
  color:            transparent;
  font:             0/0 a;
  text-shadow:      none;
}
@mixin visually-hidden() {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
@mixin kellum() {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

@mixin placeholder {
  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
  @each $placeholder in $placeholders {
    &:#{$placeholder}-placeholder {
      @content;
    }
  }
}

@mixin word-wrap() {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

@mixin no-word-wrap() {
  word-break:     normal;
  -webkit-hyphens: none;
  -moz-hyphens:    none;
  hyphens:         none;
}

//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
// http://diveintohtml5.org/forms.html
//************************************************************************//
$inputs-list: 'input[type="email"]',
              'input[type="number"]',
              'input[type="password"]',
              'input[type="search"]',
              'input[type="tel"]',
              'input[type="text"]',
              'input[type="url"]',

              // Webkit & Gecko may change the display of these in the future
              'input[type="color"]',
              'input[type="date"]',
              'input[type="datetime"]',
              'input[type="datetime-local"]',
              'input[type="month"]',
              'input[type="time"]',
              'input[type="week"]';

$unquoted-inputs-list: ();

@each $input-type in $inputs-list {
  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}

$all-text-inputs: $unquoted-inputs-list;

// You must use interpolation on the variable:
// #{$all-text-inputs}
//************************************************************************//
//   #{$all-text-inputs}, textarea {
//     border: 1px solid red;
//   }
@mixin position ($position: relative, $coordinates: 0 0 0 0) {

  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  position: $position;

  @if $top == auto {
    top: $top;
  }
  @else if not(unitless($top)) {
    top: $top;
  }

  @if $right == auto {
    right: $right;
  }
  @else if not(unitless($right)) {
    right: $right;
  }

  @if $bottom == auto {
    bottom: $bottom;
  }
  @else if not(unitless($bottom)) {
    bottom: $bottom;
  }

  @if $left == auto {
    left: $left;
  }
  @else if not(unitless($left)) {
    left: $left;
  }
}
//************************************************************************//
// Default: Webkit, moz, spec
// Example: @include prefixer(border-radius, $radii, $o: true);
//************************************************************************//
@mixin prefixer ($property, $value,
                 $webkit: true,
                    $moz: true,
                     $ms: false,
                      $o: false,
                   $spec: true) {
  @if $webkit { -webkit-#{$property}: $value; }
  @if $moz    {    -moz-#{$property}: $value; }
  @if $ms     {     -ms-#{$property}: $value; }
  @if $o      {      -o-#{$property}: $value; }
  @if $spec   {         #{$property}: $value; }
}
// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html

// EASE IN
$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);

// EASE OUT
$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);

// EASE IN OUT
$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);

/*============================================================================
  Flexbox prefix mixins from Bourbon
    https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
@mixin display-flexbox() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; // necessary for ie10
}

@mixin flex-wrap($value: nowrap) {
  @include prefixer(flex-wrap, $value, webkit moz ms spec);
}

@mixin flex-direction($value) {
  @include prefixer(flex-direction, $value, webkit moz ms spec);
}

@mixin align-items($value: stretch) {
  $alt-value: $value;

  @if $value == 'flex-start' {
    $alt-value: start;
  } @else if $value == 'flex-end' {
    $alt-value: end;
  }

  // sass-lint:disable no-misspelled-properties
  -ms-flex-align: $alt-value;
  @include prefixer(align-items, $value, webkit moz ms o spec);
}

@mixin flex($value) {
  @include prefixer(flex, $value, webkit moz ms spec);
}

@mixin flex-basis($width: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-preferred-size: $width;
  @include prefixer(flex-basis, $width, webkit moz spec);
}

@mixin align-self($align: auto) {
  // sass-lint:disable no-misspelled-properties
  -ms-flex-item-align: $align;
  @include prefixer(align-self, $align, webkit spec);
}

@mixin justify-content($justify: flex-start) {
  @include prefixer(justify-content, $justify, webkit ms spec);
}


/*============================================================================
  #Normalize
==============================================================================*/

// =============================================================================
// Normalize.scss based on Nicolas Gallagher and Jonathan Neal's
// normalize.css v2.1.3 | MIT License | git.io/normalize
// =============================================================================

// =============================================================================
// Normalize.scss settings
// =============================================================================


// Set to true if you want to add support for IE6 and IE7
// Notice: setting to true might render some elements
// slightly differently than when set to false
$legacy_support_for_ie: false !default; // Used also in Compass


// Set the default font family here so you don't have to override it later
$normalized_font_family: sans-serif !default;

$normalize_headings: true !default;

$h1_font_size: 2em !default;
$h2_font_size: 1.5em !default;
$h3_font_size: 1.17em !default;
$h4_font_size: 1em !default;
$h5_font_size: 0.83em !default;
$h6_font_size: 0.75em !default;

$h1_margin: 0.67em 0 !default;
$h2_margin: 0.83em 0 !default;
$h3_margin: 1em 0 !default;
$h4_margin: 1.33em 0 !default;
$h5_margin: 1.67em 0 !default;
$h6_margin: 2.33em 0 !default;

$background: #fff !default;
$color: #000 !default;

/*============================================================================
  Grid Columns
    - Create width classes, prepended by the breakpoint name.
==============================================================================*/
.contain-site-width {
  @include outer-container($siteWidth);
  padding: $verticalContainerPadding 0;
}
.contain-full-width {
  @include outer-container();
  padding: $verticalContainerPadding 0;
}
.contain-full-width.no-padding,
.contain-site-width.no-padding {
  padding-top: 0;
  padding-bottom: 0;
}

.grid {
  @include grid();
}
.grid-gutterless {
  @include grid(true);
  .grid__item {
    margin-bottom: 0px;
  }
}
.grid__item {
  @include grid-item(12);
  margin-bottom: $gutter;
  .inner {
    padding: 20px;
    background: rgba(red, 0.1);
    border: 4px solid rgba(red, 0.2);
  }
  &.no-bottom-margin {
    margin-bottom: 0;
  }
}

/*================ Media Query Mixin ================*/
@mixin media-query($media-query) {
  $breakpoint-found: false;

  @each $breakpoint in $grid-breakpoints {
    $name: nth($breakpoint, 1);
    $declaration: nth($breakpoint, 2);

    @if $media-query == $name and $declaration {
      $breakpoint-found: true;

      @media only screen and #{$declaration} {
        @content;
      }
    }
  }

  @if $breakpoint-found == false {
    @warn 'Breakpoint "#{$media-query}" does not exist';
  }
}
/*================ Responsive Show/Hide Helper ================*/
@mixin responsive-display-helper($grid-breakpoint-type: '') {
  // sass-lint:disable no-important
  .#{$grid-breakpoint-type}show {
    display: block !important;
  }

  .#{$grid-breakpoint-type}hide {
    display: none !important;
  }
}
/*================ Responsive Text Alignment Helper ================*/
@mixin responsive-text-align-helper($grid-breakpoint-type: '') {
  // sass-lint:disable no-important
  .#{$grid-breakpoint-type}text-left {
    text-align: left !important;
  }

  .#{$grid-breakpoint-type}text-right {
    text-align: right !important;
  }

  .#{$grid-breakpoint-type}text-center {
    text-align: center !important;
  }
}
// sass-lint:disable brace-style empty-line-between-blocks
@mixin grid-column-generator($grid-breakpoint-type: '') {
  /* Whole */
  .#{$grid-breakpoint-type}one-whole { width: 100%; }

  /* Halves */
  .#{$grid-breakpoint-type}one-half { width: percentage(1 / 2); }

  /* Thirds */
  .#{$grid-breakpoint-type}one-third { width: percentage(1 / 3); }
  .#{$grid-breakpoint-type}two-thirds { width: percentage(2 / 3); }

  /* Quarters */
  .#{$grid-breakpoint-type}one-quarter { width: percentage(1 / 4); }
  .#{$grid-breakpoint-type}two-quarters { width: percentage(2 / 4); }
  .#{$grid-breakpoint-type}three-quarters { width: percentage(3 / 4); }
  /* Quarters */
  .#{$grid-breakpoint-type}one-fourth { width: percentage(1 / 4); }
  .#{$grid-breakpoint-type}two-fourths { width: percentage(2 / 4); }
  .#{$grid-breakpoint-type}three-fourths { width: percentage(3 / 4); }

  /* Fifths */
  .#{$grid-breakpoint-type}one-fifth { width: percentage(1 / 5); }
  .#{$grid-breakpoint-type}two-fifths { width: percentage(2 / 5); }
  .#{$grid-breakpoint-type}three-fifths { width: percentage(3 / 5); }
  .#{$grid-breakpoint-type}four-fifths { width: percentage(4 / 5); }

  /* Sixths */
  .#{$grid-breakpoint-type}one-sixth { width: percentage(1 / 6); }
  .#{$grid-breakpoint-type}two-sixths { width: percentage(2 / 6); }
  .#{$grid-breakpoint-type}three-sixths { width: percentage(3 / 6); }
  .#{$grid-breakpoint-type}four-sixths { width: percentage(4 / 6); }
  .#{$grid-breakpoint-type}five-sixths { width: percentage(5 / 6); }

  /* Eighths */
  .#{$grid-breakpoint-type}one-eighth { width: percentage(1 / 8); }
  .#{$grid-breakpoint-type}two-eighths { width: percentage(2 / 8); }
  .#{$grid-breakpoint-type}three-eighths { width: percentage(3 / 8); }
  .#{$grid-breakpoint-type}four-eighths { width: percentage(4 / 8); }
  .#{$grid-breakpoint-type}five-eighths { width: percentage(5 / 8); }
  .#{$grid-breakpoint-type}six-eighths { width: percentage(6 / 8); }
  .#{$grid-breakpoint-type}seven-eighths { width: percentage(7 / 8); }

  /* Tenths */
  .#{$grid-breakpoint-type}one-tenth { width: percentage(1 / 10); }
  .#{$grid-breakpoint-type}two-tenths { width: percentage(2 / 10); }
  .#{$grid-breakpoint-type}three-tenths { width: percentage(3 / 10); }
  .#{$grid-breakpoint-type}four-tenths { width: percentage(4 / 10); }
  .#{$grid-breakpoint-type}five-tenths { width: percentage(5 / 10); }
  .#{$grid-breakpoint-type}six-tenths { width: percentage(6 / 10); }
  .#{$grid-breakpoint-type}seven-tenths { width: percentage(7 / 10); }
  .#{$grid-breakpoint-type}eight-tenths { width: percentage(8 / 10); }
  .#{$grid-breakpoint-type}nine-tenths { width: percentage(9 / 10); }

  /* Twelfths */
  .#{$grid-breakpoint-type}one-twelfth { width: percentage(1 / 12); }
  .#{$grid-breakpoint-type}two-twelfths { width: percentage(2 / 12); }
  .#{$grid-breakpoint-type}three-twelfths { width: percentage(3 / 12); }
  .#{$grid-breakpoint-type}four-twelfths { width: percentage(4 / 12); }
  .#{$grid-breakpoint-type}five-twelfths { width: percentage(5 / 12); }
  .#{$grid-breakpoint-type}six-twelfths { width: percentage(6 / 12); }
  .#{$grid-breakpoint-type}seven-twelfths { width: percentage(7 / 12); }
  .#{$grid-breakpoint-type}eight-twelfths { width: percentage(8 / 12); }
  .#{$grid-breakpoint-type}nine-twelfths { width: percentage(9 / 12); }
  .#{$grid-breakpoint-type}ten-twelfths { width: percentage(10 / 12); }
  .#{$grid-breakpoint-type}eleven-twelfths { width: percentage(11 / 12); }
}
@include grid-column-generator();
@include responsive-display-helper();
@include responsive-text-align-helper();

/*============================================================================
  Generate breakpoint-specific column widths and push classes
==============================================================================*/
$grid-small: $mobile;
$grid-medium: $largeMobile;
$grid-large: $tablet;
$grid-widescreen: $desktop;
$grid-gutter: 30px;
$grid-gutter-mobile: 22px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

// The `$breakpoints` list is used to build our media queries.
// You can use these in the media-query mixin.
// Small - below largeMobile (mobile)
// Medium - largeMobile TO one under desktop
// Medium Down - below desktop
// Medium Up - tablet and above
// Large - desktop to
$grid-breakpoints: (
  $small '(max-width: #{$grid-small})',
  $medium '(min-width: #{$grid-small + 1}) and (max-width: #{$grid-medium})',
  $medium-down '(max-width: #{$grid-medium})',
  $large '(min-width: #{$grid-medium + 1}) and (max-width: #{$grid-large})',
  $large-down '(max-width: #{$grid-large})'
  //$large-down '(max-width: #{$grid-widescreen - 1})',
  //$large-up '(min-width: #{$grid-large})',
  //$widescreen '(min-width: #{$grid-widescreen})'
);

$grid-breakpoint-has-widths: ($small, $medium, $medium-down, $large, $large-down);
/*================ Build Responsive Grid Classes ================*/
@each $breakpoint in $grid-breakpoint-has-widths {
  @include media-query($breakpoint) {
    @include grid-column-generator('#{$breakpoint}--');
    @include responsive-display-helper('#{$breakpoint}--');
    @include responsive-text-align-helper('#{$breakpoint}--');
  }
}

/*============================================================================
  Feature Row
==============================================================================*/
.feature-row {
  //display:-ms-flexbox;
  @include display-flexbox();
  //-ms-justify-content:space-between;
  @include justify-content(space-between);
  //-ms-flex-align:center;
  //-ms-align-items:center;
  @include align-items(center);

  @include mediaQuery($max, $largeMobile) {
    -ms-flex-direction: column;
    @include flex-direction(column);
  }
}

.feature-row__item {
  -ms-flex: 0 1 50%;
  @include flex(0 1 50%);



  @include mediaQuery($max, $largeMobile) {
    -ms-flex:1 1 auto;
    @include flex(1 1 auto);

    max-width: 100%;
  }
}

.feature-row__image {

  display: block;
  margin: 0 auto;

  @include mediaQuery($max, $largeMobile) {
    order: 1;
    width: 100%;
  }
}

.feature-row__text {
  padding-top: $gutter*0.5;
  padding-bottom: $gutter*0.5;
  h4 {
    font-size: emHeading(28px);
    text-transform: $primaryTitleTextTransform;
    font-weight: $primaryTitleTextWeight;
  }

  @include mediaQuery($max, $largeMobile) {
    p{
      font-size: emHeading(14px);
    }
  }

  @include mediaQuery($max, $largeMobile) {
    order: 2;
    padding-bottom: 0; // always last element on mobile
  }
}
.feature-row__text--align__center {
  text-align: center;
}
.feature-row__text--align__right {
  text-align: right;
}
@include mediaQuery($min, $largeMobile) {
  .feature-row__text--left {
    padding-left: $gutter;
  }

  .feature-row__text--right {
    padding-right: $gutter;
  }
}




// =============================================================================
// HTML5 display definitions
// =============================================================================

// Corrects block display not defined in IE6/7/8/9 & FF3

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

// Corrects inline-block display not defined in IE6/7/8/9 & FF3

audio,
canvas,
video {
    display: inline-block;
    @if $legacy_support_for_ie {
        *display: inline;
        *zoom: 1;
    }
}

// 1. Prevents modern browsers from displaying 'audio' without controls
// 2. Remove excess height in iOS5 devices
audio:not([controls]) {
    display: none; // 1
    height: 0; // 2
}
//
// Address `[hidden]` styling not present in IE 8/9.
// Hide the `template` element in IE, Safari, and Firefox < 22.
//
[hidden], template {
    display: none;
}

// =============================================================================
// Base
// =============================================================================

// 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
//    http://clagnut.com/blog/348/#c790
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
//    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/

html {
    @if $legacy_support_for_ie {
        font-size: 100%; // 1
    }
    background: $background;
    color: $color;
    -webkit-text-size-adjust: 100%; // 2
    -ms-text-size-adjust: 100%; // 2
}

// Addresses font-family inconsistency between 'textarea' and other form elements.

html,
button,
input,
select,
textarea {
    font-family: $normalized_font_family;
}

// Addresses margins handled incorrectly in IE6/7

body {
    margin: 0;
}

// =============================================================================
// Links
// =============================================================================

// 1. Remove the gray background color from active links in IE 10.
// 2. Addresses outline displayed oddly in Chrome
// 3. Improves readability when focused and also mouse hovered in all browsers
//    people.opera.com/patrickl/experiments/keyboard/test

a,
button,
input {
    // 1
    background: transparent;

    // 3
    &:focus,
    &:focus:hover {
      outline-color: $primaryAccentColor;
      outline-style: auto;
      outline-width: 5px;
    }

    &:hover,
    &:active {
        outline: 0;
    }
}
div:focus {
  outline-color: $primaryAccentColor;
}

// =============================================================================
// Typography
// =============================================================================

// Addresses font sizes and margins set differently in IE6/7
// Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5

@if $normalize_headings == true {
    h1 {
        font-size: $h1_font_size;
        margin: $h1_margin;
    }

    h2 {
        font-size: $h2_font_size;
        margin: $h2_margin;
    }

    h3 {
        font-size: $h3_font_size;
        margin: $h3_margin;
    }

    h4 {
        font-size: $h4_font_size;
        margin: $h4_margin;
    }

    h5 {
        font-size: $h5_font_size;
        margin: $h5_margin;
    }

    h6 {
        font-size: $h6_font_size;
        margin: $h6_margin;
    }
}

// Addresses styling not present in IE 8/9, S5, Chrome

abbr[title] {
    border-bottom: 1px dotted;
}

// Addresses style set to 'bolder' in FF3+, S4/5, Chrome

b,
strong {
    font-weight: $baseFontWeightBold;
}

@if $legacy_support_for_ie {
    blockquote {
        margin: 1em 40px;
    }
}

// Addresses styling not present in S5, Chrome

dfn {
    font-style: italic;
}

// Addresses styling not present in IE6/7/8/9

mark {
    background: #ff0;
    color: #000;
}

// Addresses margins set differently in IE6/7
@if $legacy_support_for_ie {
    p,
    pre {
        margin: 1em 0;
    }
}

// Corrects font family set oddly in IE6, S4/5, Chrome
// en.wikipedia.org/wiki/User:Davidgothberg/Test59

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    @if $legacy_support_for_ie {
        _font-family: 'courier new', monospace;
    }
    font-size: 1em;
}

// Improves readability of pre-formatted text in all browsers

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

// Set consistent quote types.

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

// 1. Addresses CSS quotes not supported in IE6/7
// 2. Addresses quote property not supported in S4

// 1
@if $legacy_support_for_ie {
    q {
        quotes: none;
    }
}

// 2
q {
    &:before,
    &:after {
        content: '';
        content: none;
    }
}

// Address inconsistent and variable font size in all browsers.

small {
    font-size: 80%;
}

// Prevents sub and sup affecting line-height in all browsers
// gist.github.com/413930

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

// =============================================================================
// Lists
// =============================================================================

// Addresses margins set differently in IE6/7
@if $legacy_support_for_ie {
    dl,
    menu,
    ol,
    ul {
        margin: 1em 0;
    }
}

@if $legacy_support_for_ie {
    dd {
        margin: 0 0 0 40px;
    }
}

// Addresses paddings set differently in IE6/7
@if $legacy_support_for_ie {
    menu,
    ol,
    ul {
        padding: 0 0 0 40px;
    }
}

// Corrects list images handled incorrectly in IE7

nav {
    ul,
    ol {
        @if $legacy_support_for_ie {
            list-style-image: none;
        }
    }
}

// =============================================================================
// Embedded content
// =============================================================================

// 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
// 2. Improves image quality when scaled in IE7
//    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/

img {
  max-width: 100%;
  height: auto;
    border: 0; // 1
    @if $legacy_support_for_ie {
        -ms-interpolation-mode: bicubic; // 2
    }
}

// Corrects overflow displayed oddly in IE9

svg:not(:root) {
    overflow: hidden;
}

svg.placeholder-svg {
  display: block;
  fill: rgba($primaryTextColor, 0.35);
  background-color: rgba($primaryTextColor, 0.1);
  border: 1px solid rgba($primaryTextColor, 0.2);
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.flickity-enabled.is-fullscreen {
  .card__image-container {
    margin: 0 auto;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 100% !important;
      width: 100% !important;
      object-fit: contain;
    }
  }
  svg.placeholder-svg {
    max-width: 80%;
    fill: mix($primaryTextColor, $primaryBackgroundColor, 35%);
    background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%);
    border-color: mix($primaryTextColor, $primaryBackgroundColor, 20%);
    margin: 0 auto;
  }
  .product-single__media {
    width: 90%;
    height: 90%;
  }
}
.article-image {
  svg.placeholder-svg {
    max-height: 200px;
  }
}

// =============================================================================
// Figures
// =============================================================================

// Addresses margin not present in IE6/7/8/9, S5, O11

figure {
    margin: 0;
}

// =============================================================================
// Forms
// =============================================================================

// Corrects margin displayed oddly in IE6/7
@if $legacy_support_for_ie {
    form {
        margin: 0;
    }
}

// Define consistent border, margin, and padding

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

// 1. Corrects color not being inherited in IE6/7/8/9
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
// 3. Corrects text not wrapping in FF3
// 4. Corrects alignment displayed oddly in IE6/7

legend {
    border: 0; // 1
    padding: 0; // 2
    white-space: normal; // 3
    @if $legacy_support_for_ie {
        *margin-left: -7px; // 4
    }
}

// 1. Correct font family not being inherited in all browsers.
// 2. Corrects font size not being inherited in all browsers
// 3. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
// 4. Improves appearance and consistency in all browsers

button,
input,
select,
textarea {
    font-family: inherit; // 1
    font-size: 100%; // 2
    margin: 0; // 3
    vertical-align: baseline; // 4
    @if $legacy_support_for_ie {
        *vertical-align: middle; // 4
    }
}

// Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet

button, input {
    line-height: normal;
}

// Address inconsistent `text-transform` inheritance for `button` and `select`.
// All other form control elements do not inherit `text-transform` values.
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
// Correct `select` style inheritance in Firefox 4+ and Opera.

button,
select {
    text-transform: none;
}

// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
//    and `video` controls
// 2. Corrects inability to style clickable 'input' types in iOS
// 3. Improves usability and consistency of cursor style between image-type
//    'input' and others
// 4. Removes inner spacing in IE7 without affecting normal text inputs
//    Known issue: inner spacing remains in IE6

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; // 2
    cursor: pointer; // 3
    @if $legacy_support_for_ie {
        *overflow: visible;  // 4
    }
}

// Re-set default cursor for disabled elements

button[disabled],
input[disabled] {
    cursor: default;
}

// Removes inner padding and border in FF3+
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/

button, input {
    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
}
button,
input {
  border-radius: 0px;
}

select::-ms-expand {
    display: none;
}

// 1. Removes default vertical scrollbar in IE6/7/8/9
// 2. Improves readability and alignment in all browsers

textarea {
    overflow: auto; // 1
    vertical-align: top; // 2
}

// =============================================================================
// Tables
// =============================================================================

// Remove most spacing between table cells

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input {
    // 1. Addresses appearance set to searchfield in S5, Chrome
    // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
    &[type="search"] {
        -webkit-appearance: textfield; // 1
        // -moz-box-sizing: content-box;
        // -webkit-box-sizing: content-box; // 2
        // box-sizing: content-box;
        @include box-sizing(border-box);

      // Remove inner padding and search cancel button in Safari 5 and Chrome
        // on OS X.
        &::-webkit-search-cancel-button,
        &::-webkit-search-decoration {
            -webkit-appearance: none;
        }
        border-radius: 0px;
        -webkit-appearance: none;
    }

    // 1. Address box sizing set to `content-box` in IE 8/9/10.
    // 2. Remove excess padding in IE 8/9/10.
    // 3. Removes excess padding in IE7
    //    Known issue: excess padding remains in IE6
    &[type="checkbox"],
    &[type="radio"] {
      // box-sizing: border-box; // 1
      @include box-sizing(border-box);
      padding: 0; // 2
      @if $legacy_support_for_ie {
          *height: 13px; // 3
          *width: 13px; // 3
      }
    }

    // -webkit-appearance: none;
    // -webkit-border-radius:0;
    // border-radius:0;
}

/*============================================================================
  #Lists
==============================================================================*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none;

  &%default-ul {
    list-style-type: disc;
    margin-bottom: $gutter / 2;
    padding-left: $gutter;
  }

  &%default-ol {
    list-style-type: decimal;
    margin-bottom: $gutter / 2;
    padding-left: $gutter;
  }
}

dl {
  margin-bottom: $gutter / 2;

  dt {
    font-weight: $baseFontWeightBold;
    margin-top: $gutter / 2;
  }

  dd {
    margin: 0;
  }
}

/*============================================================================
  #Typography
==============================================================================*/
body,
input,
textarea,
button,
select {
  font-size: emModify($baseFontSize);
  line-height: 1.6;
  font-family: $bodyFontStack;
  color: $primaryTextColor;
  font-weight: $baseFontWeight;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-style: $baseFontStyle;
}
select {
  @include appearance(none);
  background-color: $primaryBackgroundColor;
  background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-select.svg?v=29043846256671868191627377078');
  background-position: right 10px center;
  background-repeat: no-repeat;
  padding: 0 28px 0 10px;
}
@include mediaQuery($max, $mobile) {
  input,
  textarea,
  select,
  button {
    font-size: 16px !important;
  }
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-family: $headerFontStack;
  margin: 0 0 0.5em;
  line-height: 1.4;
  color: $primaryTitleColor;
  text-transform: $primaryTitleTextTransform;

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}
h1:not(.site-logo) {
  @if $headerFontBoldWeight {
    font-weight: $headerFontBoldWeight;
  } @else {
    font-weight: $headerFontWeight;
  }
}
h2, h3, h4, h5, h6 {
  font-weight: $headerFontWeight;
}
* {
  @include word-wrap();
}

/*================ Use em() Sass function to declare font-size ================*/
h1 {
  font-size: emHeading(36px);
}

h2 {
  font-size: emHeading(28px);
}

h3 {
  font-size: emHeading(22px);
}

h4 {
  font-size: emHeading(20px);
}

h5 {
  font-size: emHeading(16px);
}

h6 {
  font-size: emHeading(14px);
}


.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }

p {
  margin: 0 0 ($gutter / 2) 0;

  img {
    margin: 0;
  }
}

a {
  color: $primaryAccentColor;
  &:hover,
  &:focus {
    color: $primaryHoverColor;
  }
}

em {
  font-style: italic;
}

b, strong {
  font-weight: $baseFontWeightBold;
}

small {
  font-size: 0.9em;
}

sup, sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}

sub {
  bottom: -0.5em;
}

/*=============== Image Transitions ===================*/
.blur-up {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  @include transition(filter 0.4s ease-in-out);
  @include transform(scale(1));
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-out;

  &.lazyloaded {
    opacity: 1;
  }
}

$max-height-disclosure: 300px;
$min-height-disclosure: 92px;

.disclosure {
  position: relative;
}

.disclosure__toggle {
  @extend select;
  white-space: nowrap;
}

.disclosure-list {
  background-color: $primaryBackgroundColor;
  border: 1px solid $siteBorderColor;
  bottom: 115%;
  padding: 11px 0px;
  position: absolute;
  display: none;
  min-height: $min-height-disclosure;
  max-height: $max-height-disclosure;
  overflow-y: auto;
  z-index: 10;
}

.disclosure-list--visible {
  display: block;
}

.disclosure-list__item {
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  padding: 5px 45px 4px 15px;
  text-align: left;

  &:active {
    background-color: transparentize($primaryAccentColor, 0.8);
  }
}

.disclosure-list__option {
  color: $primaryTextColor;

  &:focus,
  &:hover {
    color: $primaryTextColor;
    border-bottom: 1px solid $primaryTextColor;
  }
}

.disclosure-list__item--current .disclosure-list__option {
  border-bottom: 1px solid $primaryTextColor;
}

/*============================================================================
  #Icons
==============================================================================*/

/*================ ICONS ================*/
span.icon-fallback-text,
button.icon-fallback-text,
span.icon-text,
button.icon-text, {
  span.icon {
    position: relative;
    top: 3px;
    display: inline-block;
  }
  span.fallback-text {
    display: none;
  }
}
.icon {
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
span.icon {
  svg {
    height: 16px;
    width: 16px;
    path {
      fill: $primaryTextColor;
    }
  }
}


/*============================================================================
  // Modules
==============================================================================*/

/*============================================================================
  #Basic
==============================================================================*/
html {
  background-color: $footerBackgroundColor;
}
body {
  background-color: $primaryBackgroundColor;
  @if $siteBorderAll {
    border-left: 10px solid $siteBorderColor;
    border-right: 10px solid $siteBorderColor;
    border-bottom: 10px solid $siteBorderColor;
  }

  @include mediaQuery($max, $mobile) {
    border: 0px;
  }
}
main {
  > .shopify-section:last-of-type {
    padding-bottom: 0px;
    border-bottom: 0px;
    .section-standard {
      border-bottom: 0px;
    }
  }
}
body:not(.template-index) main.main-content {
  margin-top: 20px;

  &.main-content--breadcrumb-desktop {
    @include mediaQuery($max, $mobile) {
      margin-top: 0px;
      header.content-util {
        display: none;
      }
    }
  }
  &.main-content--breadcrumb-hidden {
    margin-top: 0px;
    header.content-util {
      display: none;
    }
  }
}


* {
  @include box-sizing(border-box);
}
.visibility-hidden,
.visually-hidden {
  @include visually-hidden();
}

// basic button styles
.button.outline {
  @include buttonOutline;
  &.large {
    padding: 6px 24px;
    font-size: em(14px);
  }
}
.button.simple {
  color: $primaryTextColor;
  text-transform: $siteHeaderNavTextTransform;
  font-weight: $siteHeaderNavTextWeight;
  font-family: $navFontStack;
  font-size: em(11px);
  text-decoration: none;
  &:hover,
  &:focus {
    color: $primaryAccentColor;
  }
}
.button.solid {
  padding: 4px 14px;
  background: $primaryAccentColor;
  color: $primaryTextOnAccentColor;
  text-transform: $siteHeaderNavTextTransform;
  font-weight: $siteHeaderNavTextWeight;
  font-family: $navFontStack;
  font-size: em(11px);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: 0;
  &:hover,
  &:focus {
    background: $primaryHoverColor;
  }
  &:focus {
    outline: none;
  }
  &.large {
    padding: 6px 24px;
    font-size: em(14px);
  }
}
p.buttons.outline > a {
  @extend .button.outline;
}
p.buttons.solid > a {
  @extend .button.solid;
}
a {
  @include transition(color 0.1s ease-in-out);
}

// Pagination
.pagination-container {
  text-align: center;
}
.pagination {
  margin: 40px auto 0;
  text-align: center;
  @include clearfix();
  display: inline-block;
  li {
    float: left;
    a,
    span {
      display: block;
      border-top: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
      border-bottom: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
      border-right: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
      padding: 4px 10px;
      text-decoration: none;
      text-transform: $siteHeaderNavTextTransform;
      font-weight: $siteHeaderNavTextWeight;
      font-size: em(12px);
      color: mix($primaryTextColor, $primaryBackgroundColor, 80%);
    }
    a:hover,
    a:focus {
      background: $primaryAccentColor;
      color: $primaryBackgroundColor;
    }
    &:first-child {
      a,
      span {
        border-left: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
      }
    }
    &.disabled,
    &.active {
      a,
      span {
        cursor: default;
      }
    }
    &.active {
      a,
      span {
        background: $primaryBackgroundColor;
        color: $primaryAccentColor;
      }
    }
    &.disabled {
      a,
      span {
        color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
        background: transparent;
      }
    }
  }
}

// Product card images
.product_card,
.product_card__image-wrapper {
  display: block;
  width: 100%;
}
.product_card__image-wrapper {
  position: relative;
  &:before {
    content: '';
    display: block;
    @if $productImageRatioPercentage == 'auto' {
      padding-bottom: 100%;
    } @else if $productImageRatioPercentage == false {
      padding-bottom: 100%;
    } @else {
      padding-bottom: $productImageRatioPercentage;
    }
  }

  &.ie-fallback {
    @if $productImageAutoCrop == false {
      background-size: contain;
    } @else {
      background-size: cover;
    }
    background-position: center center;
    background-repeat: no-repeat;
    img {
      opacity: 0;
    }
  }
}
.product_card__image {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  @if $productImageAutoCrop == false {
    object-fit: contain;
  } @else {
    object-fit: cover;
  }
  &.alt {
    opacity: 0;
  }
  @include transition(opacity 0.1s ease-out);
}

// Card images
.card__image-wrapper,
.card__image {
  display: block;
  width: 100%;
}
.card__image-wrapper {
  position: relative;
  overflow: hidden;
}
.card__image {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Social icons
ul.social-icons {
  margin: 0;
  padding: 0;
  li {
    display: inline-block;
    margin-right: 12px;
    a {
      display: block;
      position: relative;
      width: 18px;
      height: 18px;
      
      svg {
        height: 100%;
        width: 100%;
        path {
          fill: $primaryTextColor;
        }
      }

      &:hover,
      &:focus {
        svg {
          path {
            fill: $primaryAccentColor;
          }
        }
      }
    }
    &:last-child {
      margin-right: 0;
    }
  }
}
// Fallback for editor
a.twitter-share-button {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 61px;
  height: 20px;
  background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/share-sprite.png?v=31532003811804777161627377063');
  background-repeat: no-repeat;
  background-position: 0px 0px;
}
div.g-plusone {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 32px;
  height: 20px;
  background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/share-sprite.png?v=31532003811804777161627377063');
  background-repeat: no-repeat;
  background-position: -61px 0px;
}
#___plusone_0{
  width: 60px !important;
}


header.promo-bar {
  left: 0;
  right: 0;
  top: 0;
  z-index: 990;
  @include clearfix();
  font-size: em(13px);
  font-family: $navFontStack;
  text-align: center;

  &[data-show-for="desktop"]{
    @include mediaQuery($max, $pre-largeMobile) {
      display: none;
    }
  }
  &[data-show-for="mobile"]{
    @include mediaQuery($min, $largeMobile) {
      display: none;
    }
  }

  > a {
    display: block;
    text-decoration: none;
    @include transition(all 0.4s ease-in-out);
    &:focus {
      text-decoration: underline;
    }
  }

  span.promo-bar-text {
    display: block;
    padding: 9px $gutter;
  }
  &.size-large {
    font-size: em(15px);
    span.promo-bar-text {
      padding: 16px $gutter;
    }
  }

  &.placement-bottom {
    position: fixed;
    top: auto;
    bottom: 0px;
    @include transform(translateZ(0));
  }

  span.signup-bar-text {
    display: inline-block;
    vertical-align: middle;
    padding: 6px 0;
    p {
      margin: 0;
    }
  }
  &.signup-bar {
    display: none;
    padding: 6px $gutter;
    position: relative;
    &.visible {
      display: block;
      &.force {
        display: block !important;
      }

      &[data-show-for="desktop"]{
        @include mediaQuery($max, $pre-largeMobile) {
          display: none;
        }
      }
      &[data-show-for="mobile"]{
        @include mediaQuery($min, $largeMobile) {
          display: none;
        }
      }
    }
    .popup-email {
      margin: 0 6px;
      padding: 6px 0;
      max-width: 240px;
      .errors {
        display: none;
      }
      p {
        margin-bottom: 0;
        font-size: em(13px);
        line-height: 38px;
      }
    }
    .popup-close {
      span.icon-text {
        top: 50%;
        right: 0px;
        padding: $gutter*0.5;
        @include transform(translateY(-50%));
        span.icon {
          top: 0;
        }
      }
    }
    .errors {
      padding: 10px 0;
      margin-bottom: 8px;
      border-bottom: 1px solid $primaryTextColor;
      font-style: italic;
    }
  }
}
.promo-bar-container.bottom {
  z-index: 991;
  position: fixed;
  top: auto;
  bottom: 0px;
  left: 0px;
  right: 0px;
  @include transform(translateZ(0));

  header.promo-bar.placement-bottom {
    position: static;
    top: auto;
    bottom: auto;
  }
}

/*============================================================================
  Global Section patterns
==============================================================================*/
.section-standard {
  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  
  padding-left: 20px;
  padding-right: 20px;
  header {
    text-align: center;
    margin-bottom: 20px;
    h4 {
      @extend .h2;
      margin-bottom: 0;
    }
  }
}
.section-standard.no-border {
  border-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}
.section-standard.featured-row.no-border {
  padding-left: 20px;
  padding-right: 20px;
}

/*============================================================================
  #Header Util
==============================================================================*/
header.util {
  width: 100%;
  @include clearfix();
  background: $siteBorderColor;
  color: $siteBorderTextColor;
  font-size: em(12px);
  font-family: $navFontStack;
  svg {
    height: 14px;
    width: 14px;
    path {
      fill: $siteBorderTextColor;
    }
  }

  a {
    color: $siteBorderTextColor;
    text-decoration: none;
    &:hover,
    &:focus {
      opacity: 0.8;
    }
    &:focus {
      outline-color: $siteBorderTextColor;
    }
  }

  .wrapper {
    padding: 0 20px;
    @include outer-container($siteWidth + 40);
    position: relative;
  }
  &.full-width {
    .wrapper {
      padding: 0;
      @include outer-container;
    }
  }

  // General element layout
  .left-wrapper {
    margin: 6px 0;
    float: left;
  }
  .right-wrapper {
    margin: 6px 0;
    float: right;
  }
  &.full-width {
    .left-wrapper,
    .right-wrapper {
      margin: 6px 10px;
    }
  }

  &.full-width {
    .search-wrapper {
      margin: 0 10px;
    }
  }

  .search-wrapper {
    display: none;
    margin: 0;
    padding: 20px 10px 20px;
    background: $contentBoxBackgroundColor;

    form {
      margin: 0;
      padding: 0;
      @include outer-container;
      @include grid();
    }

    .icon-wrapper {
      @include grid-item(1);
    }
    .input-wrapper {
      @include grid-item(10);
    }
    .button-wrapper {
      @include grid-item(1);
    }

    span.icon {
      svg {
        height: 20px;
        width: 20px;
        path {
          fill: $siteBorderTextColor;
        }
      }
    }
    span.icon-fallback-text {
      display: block;
      height: 60px;
      width: 100%;
      text-align: right;
      line-height: 60px;
    }
    input {
      height: 60px;
      width: 100%;
      padding: 0 16px;
      border: 0px;
      border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 20%);
      background-color: transparent;
      font-size: em(36px);
      color: $primaryTextColor;

      &:focus {
        outline: 0;
        background-color: $primaryBackgroundColor;
        border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 60%);
      }
    }
    span.input-group-btn {
      height: 60px;
      button {
        width: 100%;
        height: 60px;
        text-align: left;
        padding: 0px;
        border: 0px;
        background-color: transparent;
      }
    }
  }

  // Currency picker
  .currency-picker-contain {

    display: none;
    vertical-align: middle;
    padding-left: 12px;
    margin-left: -6px;
    border-left: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%);
    @include mediaQuery($max, $largeMobile) {
      border-left: 0px;
    }
    select {
      position: relative;
      line-height: 1;
      border: solid 2px $siteBorderColor;
      font-size: 1em;
      font-family: $navFontStack;
      border-radius: 0px;
      padding: 2px 18px 2px 4px;
      background-position: right 4px center;
      cursor: pointer;
      color: $siteBorderTextColor;
      background-color: $siteBorderColor;
      background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-select-util.svg?v=100913167938336013611627377078');
      &:focus,
      &:hover {
        outline: 0px;
        border: solid 2px mix($siteBorderTextColor, $siteBorderColor, 20%);
      }
    }
    @include mediaQuery($max, $mobile) {
      border-left: 0px;
      padding-left: 6px;
      label {
        display: none;
      }
    }
  }

  .selectors-form {
    display: inline-block;
    border-left: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%);
    padding-left: 6px;
  }
  .selectors-form__item {
    display: inline-block;
  }
  .disclosure-list {
    display: none;
    top: 100%;
    bottom: auto;
    left: -6px;
    border-left: 1px solid mix($siteBorderTextColor, $siteBorderColor, 10%);
    border-right: 1px solid mix($siteBorderTextColor, $siteBorderColor, 10%);
    border-bottom: 1px solid mix($siteBorderTextColor, $siteBorderColor, 10%);
    background: $siteBorderColor;
    color: $siteBorderTextColor;
  }
  .disclosure-list--visible {
    display: block;
  }
  .disclosure-list__item {
    display: block;
    margin: 0;
    padding: 5px 45px 4px 15px;
    border-right: 0px;
  }
  .disclosure-list__item--current .disclosure-list__option {
    border-bottom-color: $siteBorderTextColor;
  }
  .disclosure__toggle {
    font-size: 1em !important;
    background-color: $siteBorderColor;
    border: 2px solid $siteBorderColor;
    padding: 0 20px 0 6px;
    background-position: right 5px center;
    background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-select-util.svg?v=100913167938336013611627377078');
    color: $siteBorderTextColor;
    &:focus,
    &:hover {
      outline: 0px;
      border: solid 2px mix($siteBorderTextColor, $siteBorderColor, 20%);
    }
    @include mediaQuery($max, $largeMobile) {
      padding-left: 6px;
    }
  }
  a.disclosure-list__option {
    padding: 0px;
    display: inline;
    &:hover,
    &:focus {
      border-bottom-color: $siteBorderTextColor;
      color: $siteBorderTextColor;
    }
  }


  // Align everything
  ul,
  a,
  li,
  .left-wrapper,
  .right-wrapper {
    display: inline-block;
  }

  span.icon {
    font-size: em(20px);
    margin-right: 2px;
  }

  li {
    margin-right: 4px;
    padding-right: 6px;
    border-right: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%);

    a {
      display: inline-block;
      padding: 4px 6px;
    }
    &:last-child {
      border-right: 0px;
    }

    &.mobile-menu {
      display: none;
      a.toggle-menu {
        span.icon {
          position: relative;
          top: 2px;
        }
      }
    }
  }

  a#CartButton {
    padding: 2px 12px;
    border: 2px solid $siteBorderTextColor;
    &:hover,
    &:focus {
      opacity: 1;
      background-color: $siteBorderTextColor;
      color: $siteBorderColor;
      svg path {
        fill: $siteBorderColor;
      }
    }
  }

  @include mediaQuery($max, $largeMobile) {
    .left-wrapper {
      ul.text-links li {
        display: none;
        &.mobile-menu {
          display: inline-block;
          border-right: 0px;
          padding-right: 0px;
        }
      }
    }
    .right-wrapper {
      ul.text-links li {
        display: none;
      }
    }
  }

  @include mediaQuery($max, $mobile) {
    .left-wrapper {
      margin-left: 10px !important;
      margin-right: 0px !important;
    }
    .right-wrapper {
      margin-left: 0px !important;
      margin-right: 10px !important;
    }
  }

  &.full-width {
    .cart-preview {
      right: -10px;
    }
  }

}

// Cart Preview
.cart-preview {
  display: none;
  position: absolute;
  top: 33px;
  right: 0;
  @if $siteBorderAll {
    right: 10px;
  }

  padding: 20px;
  width: 300px;
  background: $contentBoxBackgroundColor;
  border-left: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
  border-right: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
  border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
  color: $primaryTextColor;
  text-transform: none;
  z-index: 200;

  @include mediaQuery($max, $mobile) {
    top: 37px;
    left: 0;
    right: 0;
    padding: 20px;
    width: auto;
  }

  .cart-preview-title {
    font-size: em(20px);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);

  }

  .box.product {
    padding-bottom: 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);

    a {
      color: $primaryTextColor;
      &:hover,
      &:focus {
        opacity: 1;
      }
    }


    figure {
      display: flex;
      .product-image {
        max-width: 50px;
        margin-right: 10px;
      }
      figcaption {
        flex: 1 1 auto;
      }

      figcaption {
        a {
          display: block;
          font-size: em(20px);
        }
        .product-details {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
        }
        ul.options {
          li {
            margin: 0;
            padding: 0;
            color: mix($primaryTextColor, $contentBoxBackgroundColor, 70%);
            border-right: none;
            &:after {
              content: ',\00a0';
            }
            &:last-child:after {
                content: '';
              }
          }
        }
        ul.product-options {
          li {
            margin: 0;
            padding: 0;
            color: mix($primaryTextColor, $contentBoxBackgroundColor, 70%);
            border-right: none;
            &:after {
              content: ',\00a0';
            }
            &:last-child:after {
              content: '';
            }
          }
        }
        ul.product-options:empty {
          display: none;
        }
        .product-selling-plan {
          color: mix($primaryTextColor, $contentBoxBackgroundColor, 70%);
        }
        span.price {
          display: block;
        }
      }
    }
  }

  .cart-preview-total {
    margin-bottom: 10px;
    @include clearfix();
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
    @include grid-item(12);
    .count {
      font-style: italic;
      font-size: em(13px);
      margin-bottom: 4px;
      span {
        color: $primaryAccentColor;
      }
    }
    ul.cart-preview--discounts {
      display: block;
      font-size: em(12px);
      color: $primaryTextColor;
      text-transform: $siteHeaderNavTextTransform;
      font-weight: $siteHeaderNavTextWeight;
      li {
        span.cart-discount--amount {
          white-space: nowrap;
          color: $primaryAccentColor;
        }
      }
    }
    .label {
      margin-top: 3px;
      float: left;
      font-size: em(11px);
      text-transform: $siteHeaderTitleTextTransform;
      font-weight: $siteHeaderNavTextWeight;
    }
    .total {
      display: inline-block;
      font-weight: bold;
      font-size: em(15px);
      float: right;
    }
  }
  .cart-preview-buttons {
    @include grid-item(12);
  }

  a.button {
    width: 100%;
    text-align: center;
    font-size: em(12px);
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    &.outline {
      margin-top: 8px;
      padding-top: 6px;
      padding-bottom: 6px;
    }
  }
}

.search-wrapper {
  margin: 10px;
  padding: 20px 10px 20px;
  background: $contentBoxBackgroundColor;
  

  form {
    margin: 0;
    padding: 0;
    @include outer-container;
    @include grid();
  }

  .icon-wrapper {
    @include grid-item(1);
  }
  .input-wrapper {
    @include grid-item(10);
  }
  .button-wrapper {
    @include grid-item(1);
  }

  span.icon {
    svg {
      height: 20px;
      width: 20px;
      path {
        fill: $primaryAccentColor;
      }
    }
  }
  span.icon-fallback-text {
    display: block;
    height: 60px;
    width: 100%;
    text-align: right;
    line-height: 60px;
  }
  input {
    height: 60px;
    width: 100%;
    padding: 0 16px;
    border: 0px;
    border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 20%);
    background-color: transparent;
    font-size: em(36px);
    color: $primaryTextColor;
    @include box-sizing(border-box);

    &:focus {
      outline: 0;
      background-color: $primaryBackgroundColor;
      border-bottom: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 60%);
    }
  }
  span.input-group-btn {
    height: 60px;
    button {
      width: 100%;
      height: 60px;
      text-align: left;
      padding: 0px;
      border: 0px;
      background-color: transparent;
    }
  }
}

/*============================================================================
  #Header - Site Header
==============================================================================*/
header.site-header {
  background-color: $siteHeaderBackgroundColor;
  padding: 20px 20px;

  @include mediaQuery($max, $largeMobile) {
    padding: 10px 20px 0;
  }

  .wrapper {
    @include outer-container($siteWidth);
  }
  &.full-width {
    .wrapper {
      @include outer-container;
    }
  }
  &.minimal {
    padding: 0 20px;
    .wrapper {
      padding-bottom: 0px;
    }
    .layout-horizontal {
      ul.site-nav {
        position: relative;
      }
    }
  }

  h1.site-logo {
    margin: 0;
    padding: 20px 8px 20px 0;
    font-family: $logoFontStack;
    font-size: emHeading(36px);
    line-height: 1;
    font-weight: $headerFontWeight;
    text-transform: $siteHeaderTitleTextTransform;
    a {
      color: $siteHeaderTitleTextColor;
      display: inline-block;
    }
    &.has-image {
      padding: 20px 0;
      margin: 0 auto;
      line-height: 1;
      vertical-align: middle;
      a {
        display: block;
      }
    }
  }
  div.site-logo {
    @extend h1;
    @extend h1.site-logo;
  }
  h1.site-logo,
  div.site-logo {
    @include mediaQuery($max, $tablet) {
      font-size: emHeading(32px);
    }
    @include mediaQuery($max, $largeMobile) {

    }
    @include mediaQuery($max, $mobile) {
      font-size: emHeading(28px);
    }
  }
  &.minimal {
    .logo-contain {
      padding-top: 20px;
      margin-bottom: 12px;
    }
    h1.site-logo,
    .site-logo {
      padding: 0;
    }
    @include mediaQuery($max, $largeMobile) {
      .logo-contain {
        padding-top: 12px;
      }
    }
  }

  nav.nav-bar {
    font-family: $navFontStack;
    font-size: em(14px);
    margin-bottom: 20px;
    position: relative;
    z-index: 100;

    ul.site-nav {
      li {
        display: inline-block;
        padding: 0;
        &:last-child {
          margin-right: 0px;
        }

        &.has-dropdown {
          // position: relative;
          > a:after {
            content: '';
            margin-left: 6px;
            opacity: 0.4;
            display: inline-block;
            height: 5px;
            width: 8px;
            position: relative;
            top: -1px;

            background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');
            background-position: center;
            background-repeat: no-repeat;
          }
          > a:hover:after {
            opacity: 1;
          }
          > a {
            //border-bottom-color: $siteHeaderBackgroundColor;
            padding-right: 10px;
            &:hover,
            &:focus {
              border-bottom-color: $siteHeaderBackgroundColor;
            }
          }
        }

        &.has-sub-dropdown {
          position: relative;
          a {
            position: relative;
            padding-right: 24px;
          }
          > a:after {
            content: '';
            opacity: 0.2;
            height: 5px;
            width: 8px;
            position: absolute;
            top: 50%;
            right: 6px;
            margin-top: -4px;
            @include transform(rotate(-90deg));

            background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');
            background-position: center;
            background-repeat: no-repeat;
          }

          &:hover,
          &.sub-dropdown-hover {
            ul.sub-dropdown {
              display: block;
            }
            > a {
              color: $siteHeaderAccentColor;
            }
            > a:after {
              opacity: 0.8;
            }
          }
          ul.sub-dropdown {
            display: none;
            position: absolute;
            top: 0px;
            left: 100%;
            right: auto;
            margin: 0;
            background: $siteHeaderBackgroundColor;
            z-index: 1001;
            border: 0px;
            outline: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 5%);
            min-width: 180px;
            li.sub-dropdown-item {
              &:first-child {
                padding-top: 0px;
                border-top: 0px;
              }
            }
          }
          &.alternate-align {
            ul.sub-dropdown {
              left: auto;
              right: 100%;
              margin: 0;
            }
          }
        }

        a {
          display: block;
          border: 1px solid transparent;
          font-weight: $siteHeaderNavTextWeight;
          text-transform: $siteHeaderNavTextTransform;
          text-decoration: none;
          color: $siteHeaderNavTextColor;
          background: transparent;
          padding: 6px;
          &:hover,
          &:focus {
            color: $siteHeaderAccentColor;
            background: $siteHeaderBackgroundColor;
          }
        }
      }
    }

    li.has-dropdown {
      position: relative;
    }
    li.has-dropdown--mega-menu {
      position: static;
    }
    ul.dropdown {
      display: none;
      position: absolute;
      padding: 0;
      background: $siteHeaderBackgroundColor;
      z-index: 1000;
      text-align: left;
      min-width: 180px;

      border-left: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 5%);
      border-right: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 5%);
      border-bottom: 1px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 5%);

      li {
        display: block;
        margin: 0;
        padding: 0;
        &:first-child {
          padding-top: 6px;
          border-top: 4px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%);
          ul.sub-dropdown {
            top: -4px;
            padding-top: 6px;
            border-top: 4px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%);
          }
        }
        &:last-child {
          padding-bottom: 6px;
        }
        a {
          @include box-sizing(border-box);
          border: none;
          display: block;
          margin: 0;
          font-size: em(12px);
          font-weight: $siteHeaderNavTextWeight;
          text-transform: $siteHeaderNavTextTransform;
          text-decoration: none;
          letter-spacing: 1px;
          color: mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 70%);
          // white-space: nowrap;
          padding: 10px 18px;
          max-width: 240px;
          &:hover,
          &:focus {
            border: none;
          }
        }
      }
    }
    li.dropdown-hover {
      > a {
        background-color: $siteHeaderBackgroundColor !important;
        color: $siteHeaderAccentColor !important;
      }
      > a:after {
        opacity: 1 !important;
      }
      ul.dropdown {
        display: block;
      }
      ul.dropdown.dropdown--mega-menu {
        display: flex; 
      }
    }
    @include mediaQuery($max, $largeMobile) {
      display: none;
    }
  }
  &.minimal {
    nav.nav-bar {
      margin: 12px;
      ul.site-nav > li > a {
        padding: 6px;
      }
    }
  }

  // Grid Layout & Direction
  text-align: center;

  // Horizontal Layout
  .layout-horizontal {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;

    .logo-contain {
      flex: 0 1 auto;
      text-align: left;
      @include mediaQuery($max, $largeMobile) {
        flex: 1 1 auto;
      }
    }
    nav.nav-bar {
      flex: 1 1 auto;
      text-align: right;
      position: static;
      @include mediaQuery($max, $largeMobile) {
        display: none;
      }
    }

    h1.site-logo,
    div.site-logo {
      padding: 20px 0;
      margin: 0;
      @include mediaQuery($max, $largeMobile) {
        margin: 0 auto;
        text-align: center;
      }
    }

    nav.nav-bar {
      padding: 0;
      margin: 0;
    }
  }
  &.minimal {
    .layout-horizontal {
      .logo-contain {
        padding: 12px 0;
        margin: 0;
      }
      h1.site-logo,
      div.site-logo {
        padding: 0;
      }
    }
  }
}

// Mega Menu
header.site-header nav.nav-bar {
  ul.dropdown--mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border-top: 4px solid mix($siteHeaderTitleTextColor, $siteHeaderBackgroundColor, 20%);
    padding: 8px 0;
    box-shadow: 0px 1px 1px 0px rgba($siteHeaderTitleTextColor, 0.2);
    > li {
      flex: 0 0 200px;
    }
    li:first-child {
      padding-top: 0px;
      border-top: 0px;
      ul.sub-dropdown {
        padding-top: unset;
        border-top: unset;
      }
    }
    li:last-child {
      padding-bottom: 0px;
    }
    // Top level links
    > li > a {
      padding: 8px 18px;
      font-size: 0.9em;
      border-bottom: unset;
      margin-bottom: unset;
    }
    li a {
      font-size: 0.825em;
      &:hover {
        color: $siteHeaderAccentColor !important;
      }
    }

    
    li.has-sub-dropdown {
      ul.sub-dropdown {
        display: block;
        outline: 0px;
        position: unset;
        top: unset;
        left: unset;
        right: unset;
        margin: unset;
        z-index: unset;
        border: unset;
      }
      a {
        position: unset;
        padding-right: unset;
        &:after {
          display: none;
        }
      }
      &:hover > a {
        color: $siteHeaderNavTextColor;
      }
    }
    // Sub dropdown links
    li.sub-dropdown-item a {
      text-transform: none;
      letter-spacing: 0;
      font-size: 1em;
      font-weight: $font-weight-navigation;
      color: $siteHeaderNavTextColor;
      padding: 6px 18px;
    }
  }
}

/*
  Nested menu
*/
ul.nested-menu {
  li.has-dropdown,
  li.has-sub-dropdown {
    position: relative;
    > a:after {
      content: '';
      margin-left: 6px;
      opacity: 0.4;
      display: inline-block;
      height: 5px;
      width: 8px;
      position: relative;
      top: -1px;

      background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');
      background-position: center;
      background-repeat: no-repeat;
    }
    > a:hover:after {
      opacity: 1;
    }

    &.expanded {
      > a:after {
        @include transform(scaleY(-1));
      }
      > ul {
        //display: block;
      }
    }
  }
  ul.dropdown {
    display: none;
    font-size: em(15px);
    padding: 2px 0;
    a {
      padding-left: 12px;
    }
  }
  ul.sub-dropdown {
    display: none;
    font-size: em(14px);
    padding: 2px 0;
    a {
      padding-left: 24px;
    }
  }
}


.promo-popup {
  display: none;
  background-color: $primaryBackgroundColor;
  color: $primaryTextColor;
  line-height: 1.2;
  padding: 0 20px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 400px;

  .wrapper {
    @include outer-container($siteWidth);
    padding: 20px 0;
  }

  .popup-container {
    @include grid();
    text-align: left;
    margin: 0;
  }

  .popup-image {
    display: block;
    margin-left: -20px;
    margin-right: -20px;
    img {
      width: 100%;
      max-width: 100%;
      display: block;
    }
  }
  .popup-image__wrapper {
    position: relative;
    display: block;
    width: 100%;
    &:before {
      content: '';
      display: block;
      padding-bottom: 100%;
    }
  }
  .popup-image__image {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .popup-message {
    @include grid-item(12);
    text-align: left;
    width: 100%;
    padding: 0;
    text-align: center;

    h4 {
      margin: 0px;
      font-size: emHeading(22px);
      text-transform: $primaryTitleTextTransform;
    }
    p {
      margin: 0px;
      font-size: em(14px);
    }
  }
  .popup-email {
    @include grid-item(12);

    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
    text-align: center;
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);

    form {
      padding-right: 24px;
      display: table;
      border-collapse: collapse;
      width: 100%;
      height: 44px;
      max-width: 400px;
      margin: 0 auto;
      float: right;

      @include mediaQuery($max, $largeMobile) {
        float: none;
        max-width: 400px;
        margin: 0 auto;
        button {
          margin-right: 0;
        }
      }
    }
  }
  button.mfp-close {
    display: none;
  }
}
.popup-email,
.section-email {
  display: inline-block;
  font-size: $baseFontSize;
  vertical-align: middle;
  min-width: 240px;
  &.section-email {
    display: block;
    margin: $gutter*.5 auto 0;
    max-width: 600px;

    @include grid-item(12);
  }

  form {
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: 44px;
    max-width: 400px;
    margin: 0 auto;

    @include mediaQuery($max, $largeMobile) {
      max-width: 400px;
      margin: 0 auto;
      button {
        margin-right: 0;
      }
    }
  }

  .input-wrapper {
    display: table-cell;
    width: 100%;
  }
  .button-wrapper {
    display: table-cell;
    width: 1%;
    vertical-align: middle;
  }

  input {
    border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 50%);

    padding: 7px 8px 9px;
    font-size: em(11px);
    color: $primaryTextColor;
    background-color: transparent;
    margin-right: 2.4%;
    width: 100%;
    outline: 0;
    height: 44px;

    &:focus {
      border-color: $primaryTextColor;
    }

    &.error {
      border-color: $primaryAccentColor;
    }

    @include placeholder {
      color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
    }

  }
  button {
    padding: 10px;
    background-color: $primaryAccentColor;
    color: $primaryTextOnAccentColor;
    font-size: em(11px);
    text-transform: $siteHeaderNavTextTransform;
    font-family: $navFontStack;
    border: 0;
    height: 44px;
    margin: 0 0 0 6px;

    @include no-word-wrap();
  }
  div.errors {
    font-size: em(14px);
    margin-bottom: 10px;
    color: $primaryAccentColor;
    font-style: italic;
  }
}

.popup-close {
  span.icon-text {
    position: absolute;
    top: -26px;
    right: 0;
    margin-top: 0;
    opacity: 0.6;
    cursor: pointer;
    z-index: 100;
    color: #fff;
    &:hover,
    &:focus {
      opacity: 1;
    }
    svg path {
      fill: #fff;
    }

    @include mediaQuery($max, $largeMobile) {
      top: -18px;
      right: -18px;
      margin-top: 0;
    }
  }
  span.text {
    display: none;
  }
}
.mfp-content {
  .promo-popup {
    display: block;
  }
}
.mock-popup-container {
  position: fixed;
  z-index: 1040;
  background-color: rgba(#000, 0.9);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

// GDPR
.input-row.gdpr {
  @include display-flexbox();
  @include flex-wrap(nowrap);
  @include flex-direction(row);
  @include align-items(baseline);
  margin-top: $gutter / 2;
  input[type="checkbox"],
  label {
    display: inline-block;
    width: auto;
    height: auto;
    font-size: 16px;
    text-align: left;
  }
  input[type="checkbox"] {
    margin-right: 6px;
  }
  p {
    font-size: 0.75em;
  }
}



/*============================================================================
  #Hero Content
==============================================================================*/
.hero,
.newsletter {
  .featured-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    &.background-alignment-top {
      background-position: top center;
    }
    &.background-alignment-bottom {
      background-position: bottom center;
    }

    display: table;
    position: relative;
    .content-box {
      z-index: 2;
      display: table-cell;
      position: relative;
      vertical-align: middle;
      padding: $gutter * 0.5;
      text-align: center;
    }

    width: 100%;
    height: 400px;

    &.size-x-small {
      height: 200px;
    }
    &.size-small {
      height: 300px;
    }
    &.size-medium {
      height: 400px;
    }
    &.size-large {
      height: 500px;
    }
    &.size-x-large {
      height: 600px;
    }
    @include mediaQuery($max, $tablet) {
      &.size-x-small {
        height: 150px;
      }
      &.size-small {
        height: 225px;
      }
      &.size-medium {
        height: 300px;
      }
      &.size-large {
        height: 375px;
      }
      &.size-x-large {
        height: 450px;
      }
    }
  }

  .placeholder-background {
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  h2 {
    font-size: emHeading(34px);
    margin-bottom: 0;
    text-transform: $primaryTitleTextTransform;
    line-height: 1.2;
  }
  a.button {
    @extend .button.outline;
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 24px;
    font-size: em(12px);
  }

  @include mediaQuery($max, $tablet) {
    h2 {
      font-size: emHeading(24px);
    }
    p {
      font-size: em(15px);
    }
    a.button {
      margin: 0.5em 0;
      padding: 2px 6px;
      font-size: em(11px);
    }
  }
}
.hero-video {
  .wrapper {
    background:transparent;
    position:relative;
    z-index: 1;
    overflow: hidden;
    .ytplayer-player-inline {
      opacity: 0;
    }
    &.loaded {
      .placeholder-background{
        display: none;
      }
      .featured-hero {
        background: transparent !important;
        z-index: 3;
      }
      .ytplayer-player-inline {
        opacity: 1;
        z-index: -1;
      }
      .ytplayer-shield {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
      }
      .ytplayer-container {
        display: block;
      }
    }
  }
}
.ytplayer-container{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

/*============================================================================
  #Slideshow
==============================================================================*/
.slideshow {

}
.slide__item {
  width: 100%;
  position: relative;

  img {
    width: 100%;
    display: block;
  }
  svg.placeholder-svg {
    //fill: rgba($primaryTextColor, 0.1);
    width: 100vw;
    height: 40vw;
    border: 0px;
  }
}
.slide__item-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 2;

  &.justify-start {
     .inner-wrapper {
      text-align: left;
      .content-contain {
        max-width: 40%;
        margin-left: 0;
        margin-right: auto;
        @include mediaQuery($max, $tablet) {
          max-width: 80%;
        }
        @include mediaQuery($max, $mobile) {
          max-width: none;
        }
      }
     }
  }
  &.justify-center {
    .inner-wrapper {
      text-align: center;
      .content-contain {
        max-width: 40%;
        margin-left: auto;
        margin-right: auto;
        @include mediaQuery($max, $tablet) {
          max-width: 80%;
        }
        @include mediaQuery($max, $mobile) {
          max-width: none;
        }
      }
    }
  }
  &.justify-end {
    .inner-wrapper {
      text-align: right;
      .content-contain {
        max-width: 40%;
        margin-left: auto;
        margin-right: 0;
        @include mediaQuery($max, $tablet) {
          max-width: 80%;
        }
        @include mediaQuery($max, $mobile) {
          max-width: none;
        }
      }
    }
  }
  &.align-start {
    .inner-wrapper {
      vertical-align: top;
    }
  }
  &.align-center {
    .inner-wrapper {
      vertical-align: middle;
    }
  }
  &.align-end {
    .inner-wrapper {
      vertical-align: bottom;
    }
  }

  .content-box {
    padding: 40px;
    width: 100%;
    height: 100%;
    @include mediaQuery($max, $tablet) {
      padding: 20px;
      font-size: em(14px);
    }
    @include mediaQuery($max, $mobile) {
      padding: 10px;
      font-size: em(12px);
    }
  }
  .outer-wrapper {
    display: table;
    width: 100%;
    height: 100%;
  }
  .inner-wrapper {
    display: table-cell;
    width: 100%;
  }
  h2 {
    font-size: emHeading(34px);
    margin-bottom: 0;
    text-transform: $primaryTitleTextTransform;
    line-height: 1.2;
  }
  p {
    font-size: em(16px);
    margin-bottom: 10px;
    &:last-of-type {
      margin-bottom: 0px;
    }
  }
  a {
    pointer-events: auto;
  }
  a.button {
    @extend .button.outline;
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 24px;
    font-size: em(12px);
  }

  @include mediaQuery($max, $tablet) {
    h2 {
      font-size: emHeading(24px);
    }
    p {
      font-size: em(15px);
      margin-bottom: 0;
    }
    a.button {
      margin: 0.5em 0;
      padding: 2px 6px;
      font-size: em(11px);
    }
  }
}
.slide__item-image {
  display: block;
  background:transparent;
  position:relative;
  z-index: 1;
  overflow: hidden;
  .ytplayer-player-inline {
    opacity: 0;
  }
  &.loaded {
    svg,
    img {
      display: block !important;
      opacity: 0 !important;
    }
    .ytplayer-player-inline {
      opacity: 1;
      z-index: -1;
    }
    .ytplayer-container {
      display: block;
    }
    .ytplayer-shield {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 2;
    } 
  }
}
.slideshow-carousel {
  //opacity: 0;
  .slide__item {
    display: none;
    &:first-of-type {
      display: block;
    }
  }
  &.flickity-enabled {
    opacity: 1;
    .slide__item {
      display: block;
    }
  }
}

/*============================================================================
  #Custom Content
==============================================================================*/
.custom-content.section-standard {
  padding-left: 0;
  padding-right: 0;

  .video-section & {
    .contain-full-width {
      padding-bottom: 0px;
    }
  }
}
.custom-content-container {
  &.align-left {
    text-align: left;
  }
  &.align-center {
    text-align: center;
  }
  &.align-right {
    text-align: right;
  }
}
.custom__item {
  @include outer-container($siteWidth);
  padding-bottom: 20px;
  &.custom__item-full_width {
    @include outer-container();
  }
  &:last-of-type {
    padding-bottom: 0px;
  }
  .content p:last-of-type {
    margin-bottom: 0px;
  }
}
.custom__item-image {
  &.custom__item-full_width {
    img {
      width: 100%;
    }
  }
}
.custom__item-richtext {
  .content {
    max-width: 80%;
    margin: 0 auto;
  }
}

.video__container {
  position: relative;
}
.video__container--default-ratio {
  padding-bottom: 56.25%;
  height: 0;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/*============================================================================
  #Featured Text
==============================================================================*/
div.featured-text {

  .wrapper {
    @include outer-container($siteWidth);
  }

  @include mediaQuery($max, $mobile) {
    font-size: em(14px);
  }
  background-color: $homeFeaturedBackgroundColor;

  h2 {
    margin-bottom: em(4px);
    text-transform: $primaryTitleTextTransform;
    font-weight: $primaryTitleTextWeight;
    font-size: emHeading(28px);
  }
  .content {
    max-width: 80%;
    margin: 0 auto;

    @include mediaQuery($max, $tablet) {
      font-size: em(16px);
      max-width: none;
    }
  }
  .content-page {
    padding-top: 20px;
  }
  .align-left {
    text-align: left;
  }
  .align-center {
    text-align: center;
  }
  .align-right {
    text-align: right;
  }
}

/*============================================================================
  #Lookbook Preview
==============================================================================*/
.lookbook-container {
  text-align: center;
}
.lookbook__link {
  display: block;
  img,
  svg {
    display: block;
    margin: 0 auto;
  }
}
.lookbook__item {
  margin-bottom: 20px;

  &.lookbook__item-image {
    margin-left: auto;
    margin-right: auto;
    max-width: $siteWidth;
    svg.placeholder-svg {
      width: 100vw;
      height: 25vw;
    }
  }
  &.lookbook__item-full_width {
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
    img,
    svg {
      width: 100%;
    }
    svg.placeholder-svg {
      //height: 220px;
    }
  }
  &.lookbook__item-icon_image {
    margin-left: auto;
    margin-right: auto;
    img {
      margin: 0 auto;
      max-width: 240px;
    }
    svg {
      margin: 0 auto;
      max-width: 160px;
    }

  }
}
.lookbook-preview {
  footer {
    margin-top: 20px;
    text-align: center;
  }
}

/*============================================================================
  #Logo List
==============================================================================*/
.logo-bar {
  @include display-flexbox();
  @include justify-content(center);
  @include flex-wrap(wrap);
  @include align-items(center);
}
.logo-bar__item {
  text-align: center;
  width: 160px;
  margin: 12px;
}

/*============================================================================
  #Map
==============================================================================*/
.map-section {

}
.map-section__content-wrapper {
  position: relative;
  height: 100%;
  flex-shrink: 0;
  flex-grow: 1;
  @include flex-basis(100%);
  @include display-flexbox();
  @include flex-wrap(wrap);
  @include flex-direction(row);
  @include align-items(center);
  padding: 120px;
  background-size: cover;
  background-position: bottom center;
  overflow: hidden;
  @include mediaQuery($max, $desktop) {
    padding: 60px;
  }
  @include mediaQuery($max, $largeMobile) {
    padding: $gutter $gutter 66%;
  }
}

.map-section__content {
  background: $primaryBackgroundColor;
  padding: $gutter;
  position: relative;
  z-index: 3;
  text-align: center;
  min-width: 300px;
  max-width: 600px;
  @include flex(0 1 33%);
  @include mediaQuery($max, $desktop) {
    @include flex(0 1 50%);
  }
  @include mediaQuery($max, $largeMobile) {
    max-width: none;
    min-width: 0;
    @include flex(0 1 100%);
  }

  a.button {
    display: inline-block;
    margin-top: 12px;
  }
}
.map-section__container {
  position: absolute;
  top: 0;
  left: 0;
  right: -30%;
  bottom: 0;
  z-index: 1;
  @include mediaQuery($max, $desktop) {
    right: -50%;
  }
  @include mediaQuery($max, $largeMobile) {
    right: 0;
    bottom: -40%;
  }

}
.map-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.map-section__errors {
  flex: 1 1 auto;
  background: $primaryBackgroundColor;
  margin: 0 20px;
  padding: 20px;
}
.background-alignment__top-left {
  background-position: 0% 0%;
}
.background-alignment__top-center {
  background-position: 50% 0%;
}
.background-alignment__top-right {
  background-position: 100% 0%;
}
.background-alignment__center-left {
  background-position: 0% 50%;
}
.background-alignment__center-center {
  background-position: 50% 50%;
}
.background-alignment__center-right {
  background-position: 100% 50%;
}
.background-alignment__bottom-left {
  background-position: 0% 100%;
}
.background-alignment__bottom-center {
  background-position: 50% 100%;
}
.background-alignment__bottom-right {
  background-position: 100% 100%;
}


/*============================================================================
  #Featured Product
==============================================================================*/

.index-section--featured-product {
  .single-product {
    padding: 40px 20px;
  }
}



/*============================================================================
  #Featured Grid
==============================================================================*/
div.featured-grid {
  padding: $verticalContainerPadding 20px;
  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  
  .wrapper {
    @if $homeFeaturedCollectionsFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }
}
div.featured-grid,
div.collection-list,
div.gallery {
  .no-padding {
    header {
      margin-top: 40px;
    }
  }
  h3 {
    margin-bottom: 20px;
/*     text-align: center; */
    font-size: emHeading(24px);
    text-transform: $primaryTitleTextTransform;
    font-weight: $primaryTitleTextWeight;
  }

  .row {
    @include grid();
    margin-bottom: $gridGutter;

    &.row-2 {
      .box {
        @include grid-item(6);
      }
    }

    &.row-3 {
      .box {
        @include grid-item(4);
      }
    }

    &:last-of-type {
      margin-bottom: 0px;
    }

    @include mediaQuery($max, $largeMobile) {
      margin-bottom: 0;
      &.row-2,
      &.row-3 {
        .box {
          @include grid-item();
          margin-bottom: 20px;
        }
      }
    }
  }

  .box {

    a,
    div.hover-wrapper {
      display: block;
      background-size: contain;
      background-position: center center;
    }
    figure {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0 auto;
      background-position: center center;
      background-size: contain;

      img,
      svg {
        @include transition(all 2.0s ease-out);
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
        border: 0px;
      }
      &.full-width {
        img,
        svg {
          width: 100%;
          height: auto;
        }
      }

      &:after {
        @include transition(background-color 0.5s ease-out);
        content: '';
        background: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;
      }

      figcaption {
        position: absolute;
        top: 50%;
        @include transform(translateY(-50%));
        width: 100%;
        text-align: center;
        z-index: 20;

        h4 {
          margin: 0 auto;
          display: inline-block;
          color: $primaryTextOnAccentColor;
          border: 2px solid $primaryTextOnAccentColor;

          text-transform: $primaryTitleTextTransform;
          font-weight: bold;
          padding: 6px 16px;
          font-size: emHeading(24px);
          width: auto;
          max-width: 90%;

          @include transition(all 0.5s ease-in-out);
        }
      }
    }

    a.text-overlay:hover,
    a.text-overlay:focus,
    div.hover-wrapper.text-overlay:hover,
    div.hover-wrapper.text-overlay:focus {
      figure {
        &:after {
          background: rgba($primaryAccentColor, 0.4);
        }
      }
      figcaption {
        h4 {
          border-width: 2px;
          padding: 8px 20px;
          background-color: transparent;
          @include transform(scale(1.1));
        }
      }
      &.rollover {
        img {
          opacity: 0;
        }
      }
    }

    a.zoom:hover,
    a.zoom:focus,
    div.hover-wrapper.zoom:hover,
    div.hover-wrapper.zoom:focus {
      figure {
        img,
        svg {
          @include transform(scale(1.05));
        }
      }
      figcaption {
        h4 {
          @include transform(scale(1.1));
        }
      }
    }
    a.rollover,
    div.rollover {
      figure {
        background-position: center center;
        background-size: cover;
        img {
          @include transition(none);
        }
      }
      &.zoom {
        overflow: hidden;
        figure {
          @include transition(all 2.0s ease-out);
        }
      }

      // Hover states
      &:hover,
      &:focus {
        figure {
          &:after {
            display: none;
          }
          img {
            @include transition(none);
            opacity: 0;
          }
        }
      }
      &.zoom:hover,
      &.zoom:focus {
        overflow: hidden;
        figure {
          @include transform(scale(1.05));
          @include transition(all 2.0s ease-out);
        }
      }

    }


    figcaption.below {
      text-align: center;
      h3 {
        margin: 0;
      }
      a {
        padding: 6px 4px 0 0;
        display: block;
        color: $primaryTitleColor;
        text-transform: $primaryTitleTextTransform;
        font-weight: $primaryTitleTextWeight;
      }
    }
  }
}

/*============================================================================
  #Collections
==============================================================================*/
// Combined structures
.collection,
.featured-collection,
.simple-collection {
  padding: 0 20px $verticalContainerPadding;
  background: $productCollectionBackgroundColor;
  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  

  @include mediaQuery($max, $tablet) {
    padding: 0 20px 40px 20px;
  }

  .wrapper {
    @if $productCollectionFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  .collection-container {
    padding: 12px 0 40px 0;
  }

  &.blog {
    .collection-container {
      padding: 6px 0 40px 0;
    }
    padding-bottom: 0px;

    header.collection-header {
      margin-top: 6px;
    }
  }
}

body.template-index {
  .collection,
  .featured-collection,
  .simple-collection {
    padding: $verticalContainerPadding 20px;
  }
}

// Homepage Featured Collection
.featured-collection {
  padding: $verticalContainerPadding 20px;
  .grid {
    @include grid();
  }
  .box {
    @include grid-item(3);
    margin-bottom: $gridGutter;

    &.header {
      text-align: center;

      .details {
        width: 100%;
        padding-right: $gridGutter;
      }
      h4 {
        font-size: emHeading(28px);
        text-transform: $primaryTitleTextTransform;
        font-weight: $primaryTitleTextWeight;
      }

      @include mediaQuery($max, $mobile) {
        p{
          font-size: em(14px);
        }
      }
    }

    @include mediaQuery($max, $tablet) {
      @include grid-item(6);
    }
    @include mediaQuery($max, $mobile) {
      

      &.header {
        .details {
          padding-right: 0;
        }
      }
    }


  }

  &.layout-12,
  &.layout-8,
  &.layout-4 {
    .box {
      &.header {
        @include grid-item(12);
        .details {
          padding-right: 0px;
        }
      }
    }
  }

  &.layout-10,
  &.layout-6,
  &.layout-2 {
    .box {
      &.header {
        @include grid-item(6);
        position: relative;

        .image-table {
          height: 240px;
        }

        .details {
          width: 100%;
          position: absolute;
          top: 50%;
          @include transform(translateY(-50%));
        }

        @include mediaQuery($max, $tablet) {
          @include grid-item(12);
          .image-table {
            height: auto !important;
          }

          .details {
            position: static;
            top: auto;
            @include transform(translateY(0));
            margin-left: 0;
          }
        }
      }
    }
  }

  // Include product thumbnail
  @extend %product-thumbnail;
}


// Simple collection with a header
.simple-collection {
  padding: $verticalContainerPadding 20px;
  header {
    @include clearfix();
    position: relative;
    margin-bottom: 20px;
    h4 {
      float: left;
      margin: 0;
      font-size: emHeading(28px);
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
    }
    a.button.outline {
      float: right;
      top: 5px;
      position: relative;
      @include buttonOutline;
    }
    @include mediaQuery($max, $tablet) {
      text-align: center;
      h4 {
        float: none;
      }
      a.button.outline {
        float: none;
        position: static;
        top: auto;
        @include transform(translateY(0));
      }
      padding-bottom: 20px;
    }

    &.centered {
      text-align: center;
      h4,
      a.button.outline {
        float: none;
      }
    }
  }

  .product-container {
    @include grid();
    .box {
      @include grid-item(3);
      margin-bottom: $gridGutter;

      @include mediaQuery($max, $tablet) {
        @include grid-item(6);
      }

      @include mediaQuery($max, $mobile) {
        
      }
    }
  }

  // Include product thumbnail
  @extend %product-thumbnail;
}

.product-recommendations.simple-collection {
  .product--placeholder {
    text-align: center;
    svg.placeholder-svg {
      fill: transparent;
      opacity: 0.8;
    }

    figcaption {
      display: inline-block;
      height: 6px;
      position: relative;
      overflow: hidden;
      > div,
      > span {
        visibility: hidden;
      }
      &:before {
        display: block;
        position: absolute;
        content: '';
        left: -30%;
        width: 30%;
        height: 6px;
        top: 50%;
        background: mix($primaryTitleColor, $primaryBackgroundColor, 20%);
        animation: loaderBarAnimation 1s linear infinite;
      }
    }
  }
  html.no-js & {
    display: none;
  }
}

// Collection (product collection page)
.collection {
  margin-top: 0;
  #shopify-section-list-collections-template & {
    padding-top: 0;
  }

  .grid {
    @include grid(false, true);
    .aside-container {
      @include grid-item(3);
    }
    .collection-container{
      @include grid-item(9);
    }

    &.full-width {
      .collection-container{
        @include grid-item(12);
      }
    }

    @include mediaQuery($max, 950px) {
      .aside-container {
        @include grid-item(4);
      }
      .collection-container{
        @include grid-item(8);
      }
    }

    @include mediaQuery($max, $tablet) {
      .aside-container {
        @include grid-item(12);
      }
      .collection-container{
        @include grid-item(12);
      }
    }
  }

  &.blog {
    .grid{
      @include grid(false, false);
    }
    @include mediaQuery($max, $tablet) {
      .blog-sidebar-image {
        display: none;
      }
      .aside-container {
        display: none;
      }
    }
  }


  aside {
    @include clearfix();
    margin-top: 6px;
    background: $contentBoxBackgroundColor;
    

    .nav-container {
      padding: 14px 20px;
    }

    nav {
      margin-bottom: 20px;
      -ms-word-break: break-all;
           word-break: break-all;

           // Non standard for webkit
           word-break: break-word;

      -webkit-hyphens: auto;
         -moz-hyphens: auto;
              hyphens: auto;
      &:last-of-type {
        margin-bottom: 0px;
      }
      h5 {
        margin-bottom: 6px;
        padding-bottom: 6px;
        font-size: emHeading(20px);
        text-transform: $primaryTitleTextTransform;
        color: $primaryTitleColor;
        font-weight: $primaryTitleTextWeight;
        border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%);
      }
      li.active {
        > a {
          color: $primaryAccentColor;
        }
      }
      span.title {
        display: block;
        font-family: $bodyFontStack;
        margin-bottom: 4px;
        line-height: 1.4;
      }
      time,
      a.util {
        position: relative;
        font-family: $navFontStack;
        //font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        font-size: em(11px);
      }
      a {
        font-size: em(15px);
        text-decoration: none;
        color: $primaryTextColor;
        text-transform: capitalize;
        &:hover,
        &:focus {
          color: $primaryHoverColor;
        }
        &.active {
          color: $primaryAccentColor;
        }
      }

      &.tags {
        ul {
          padding-left: 8px;
        }
        li {
          display: inline-block;
          margin: 0 0 2px 0;
          a {
            @include buttonOutline;
            padding: 4px 2px;
            font-size: 0.625em;
            border: none;
            box-shadow: 6px 0 0 mix($primaryTextColor, $contentBoxBackgroundColor, 10%), -6px 0 0 mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
            background-color: mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
            margin-right: 18px;
            &:hover {
              color: $primaryTextOnAccentColor;
              background-color: $primaryAccentColor;
              border-color: $primaryAccentColor;
              box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
            }
          }
          &.active {
            a {
              color: $primaryTextOnAccentColor; 
              background-color: $primaryAccentColor;
              border-color: $primaryAccentColor;
              box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
            }
            &.close a:after {
              content: "x";
              font-size: em(12px);
              position: relative;
              top: -1px;
              padding-left: 4px;
            }
          }
        }
      }
    }


    @include mediaQuery($max, $tablet) {
      margin: 20px auto 40px;
      .nav-container {
        @include grid();
        padding: 14px 20px;
      }
      nav {
        text-align: center;
        h5 {
          font-size: emHeading(18px);
        }
        @include grid-item(6);
      }
    }
    @include mediaQuery($max, 600px) {
      nav {
        @include grid-item(12);
        text-align: center !important;
        ul.nested-menu ul.dropdown a,
        ul.nested-menu ul.sub-dropdown a {
          padding-left: 0;
        }

        &.recent-posts, {
          li {
            display: block;
            a:after {
              content: '';
            }
          }
        }
      }
    }
  }

  &.blog {
    aside {
      .nav-container {
        padding: 0 20px;
        > nav:first-child {
          padding-top: 14px;
        }
      }
      nav {
        margin: 14px 0;
      }
      .blog-sidebar-image-wrapper {
        display: block;
        margin: 0 -20px;
      }
    }
  }

  .aside-container {
    @include mediaQuery($max, $tablet) {
      display: none;
    }
  }

  // Top tag filter for tablet and below
  .mobile-aside-container {
    display: none;
    margin: 0 0 30px;
    text-align: center;

    @include mediaQuery($max, $tablet) {
      display: block;
    }

    a.button.simple {
      background-color: transparent;
      background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-select.svg?v=29043846256671868191627377078');
      background-position: right 5px center;
      background-repeat: no-repeat;
      padding: 0 20px 0 10px;
    }

    aside {
      margin: 10px 0 0;
      display: none;
    }
  }

  .products {
    padding-bottom: 16px;
    margin-bottom: 16px;
    @include clearfix();
  }

  .products-grid {
    position: relative;
    @include grid();
    .box.product {
      @include grid-item(4);
      margin-bottom: $gutter * 1.25;

      @include mediaQuery($max, 950px) {
        @include grid-item(6);
      }
      @include mediaQuery($max, $mobile) {
        
      }
    }
    &.full-width {
      .box.product {
        @include grid-item(3);

        @include mediaQuery($max, $tablet) {
          @include grid-item(6);
        }
        @include mediaQuery($max, $mobile) {
          
        }
      }
    }
    > p {
      font-size: 1rem;
    }
  }

  .products-list {
    &.full-width {
      margin: 0 auto;
      max-width: 800px;
    }
    .box.product {
      figure {

        @include clearfix();
        margin-bottom: 20px;
        padding-bottom: 20px;

        .product-thumbnail {
          width: 120px;
          margin-right: 12px;
          float: left;
          @include mediaQuery(null, $post-smallMobile, $pre-mobile) {
            width: 80px;
          }
          @include mediaQuery($max, $smallMobile) {
            width: 100%;
            float: none;
            margin-bottom: 12px;
          }
          a {
            display: block;
            background-color: $contentBoxBackgroundColor;
          }
          img {
            margin: 0 auto;
            height: auto;
            display: block;
          }
        }
        figcaption {
          margin-left: 132px;
          margin-top: 0;

          @include mediaQuery(null, $post-smallMobile, $pre-mobile) {
            margin-left: 92px;
          }
          @include mediaQuery($max, $smallMobile) {
            margin-left: 0;
          }

          header {
            display: table;
            width: 100%;
            padding-bottom: 6px;
            margin-bottom: 6px;
            border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
          }
          .product-title {
            font-weight: bold;
            display: table-cell;
            text-align: left;
            a.title {
              display: inline-block;
            }
            span.vendor {
              display: inline-block;
            }
          }
          span.price {
            display: table-cell;
            text-align: right;
            min-width: 100px;
          }
          span.label {
            background-color: $contentBoxBackgroundColor;
            &.sale {
              background-color: $primaryAccentColor;
            }
          }
          @include mediaQuery($max, "400px") {
            .product-title,
            span.price {
              display: block;
              text-align: left;
              min-width: 0;
            }
          }
          p.description {
            margin-bottom: 6px;
          }
        }

        @include mediaQuery($max, $mobile) {
          margin-bottom: 40px;
        }
      }
    }
  }

  // search results
  &.search-results {
    .search-wrapper {
      padding: 20px;
      form {
        margin: 0;
        .icon-wrapper {
          padding: 0;
          margin: 0;
          display: block;
          width: 30px;
          float: left;
        }
        .input-wrapper {
          padding: 0 20px 0 $verticalContainerPadding;
          margin: 0;
          display: block;
          float: none;
          width: 100%;
          padding-left: 60px;
        }
        .button-wrapper {
          display: none;
        }
      }
    }
    .collection-header {
      margin-top: 40px;
    }
    h1 {
      text-align: center;
      float: none;
      text-transform: none;
      font-size: emHeading(36px);
    }
    .search-list {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }

    .simple-collection {
      border-bottom: none;
      padding-bottom: 0;
    }
    @include mediaQuery($max, $mobile) {
      .search-wrapper {
        margin-bottom: 40px;
        form {
          .icon-wrapper {
            width: 20px;
          }
          .input-wrapper {
            padding: 0 20px 0 20px;
            input {
              font-size: em(18px);
            }
          }
        }
        // .icon-fallback-text {
        //   height: 40px;
        //   span.icon {
        //     top: -6px;
        //   }
        // }
        // .input-wrapper {
        //   input {
        //     height: 40px;
        //     font-size: em(22px);
        //   }
        // }
      }
    }
  }

  // Include product thumbnail
  @extend %product-thumbnail;

}
.hero-content.header {
  .collection-image {
    margin: 0 auto;
    padding-bottom: $verticalContainerPadding/2;
  }
  &.above {
    text-align: center;
    margin: 10px auto 0;
    max-width: $siteWidth;
  }
  &.above-full {
    text-align: center;
    margin-top: 10px;
    img {
      width: 100%;
    }
  }
}

// Generic collections header
header.collection-header {
  margin-bottom: 30px;
  > .container {
    @include clearfix();
    padding-bottom: 3px;
    margin-bottom: 16px;
/*     border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%); */

  }
  h1 {
    text-transform: $primaryTitleTextTransform;
    font-size: emHeading(28px);
    margin-bottom: 0px;
    float: left;
  }
  .sort-by {
    float: right;
    padding-top: 4px;
    margin-bottom: 8px;
    label {
      margin-right: 4px;
      font-size: em(11px);
      font-weight: $siteHeaderNavTextWeight;
      font-family: $navFontStack;
      text-transform: $siteHeaderTitleTextTransform;
    }
    select {
      margin: 0;
      border: 0px;
      outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
      outline-offset: 1px;
      font-family: $navFontStack;
      font-size: em(12px);
      text-transform: $siteHeaderNavTextTransform;
      height: 26px;
      &:focus {
        outline: 2px solid $primaryAccentColor;
      }
    }
    .layout-options {
      margin-left: 6px;
      position: relative;
      top: 3px;
      display: inline-block;
    }
    button {
      margin: 0;
      border: none;
      background: transparent;
      padding: 0;
      position: relative;
      top: -2px;
      svg path {
          fill: mix($primaryTextColor, $primaryBackgroundColor, 20%);
        }
      &.active {
        svg path {
          fill: mix($primaryTextColor, $primaryBackgroundColor, 60%);
        }
      }
      &:hover,
      &:focus {
        outline: 0;
        svg path {
          fill: $primaryAccentColor;
        }
      }
    }
  }
  .collection-image {
    margin: 0 0 10px;
    img {
      display: block;
      max-width: 100%;
      width: auto;
      height: auto;
      margin: 0 auto 10px;
    }
  }
  .description {

  }

  @include mediaQuery($max, $tablet) {
    text-align: center;
    margin-bottom: 0px;
    h1 {
      float: none;
    }
    .sort-by {
      float: none;
      margin-bottom: 10px;
    }
  }
  @include mediaQuery($max, $mobile) {
    .sort-by {
      label {
        display: none;
      }
    }
  }
}

footer.collection-footer {
  text-align: center;
}


// Extend Product Thumbnail
%product-thumbnail {
  figure {
    position: relative;
    display: block;
    cursor: pointer;
    &.product-grid-item--center figcaption {
      text-align: center;
    }
    &.product-grid-item--right figcaption {
      text-align: right;
    }

    a.product-image {
      background-color: $contentBoxBackgroundColor;
    }

    a.product-image.view-alt {
      background-position: -1000px -1000px;
      background-repeat: no-repeat;
    }

    &:hover,
    &:focus {
      a.product-image.view-alt {
        background-position: center center;
        background-size: cover;
        img {
          opacity: 0;
        }
      }
      a.product-image {
        
      }

      figcaption {
        a.title {
          color: $primaryAccentColor;
        }
      }
      span.rating {
        opacity: 1;
      }
    }

    a.product-image {
      position: relative;
      display: block;
      background-size: cover;
      background-position: center center;

      img {
        display: block;
        max-width: 100%;
        margin: 0 auto;
        height: auto;
      }
    }
    a.product-image,
    a.product_card {
      span.label {
        position: absolute;
        
        padding: 1px 8px;
        background-color: $primaryImageLabelColor;
        color: $primaryImageLabelAccentColor;
        font-family: $navFontStack;
        font-size: em(11px);
        font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        &.sale {
          background-color: $primaryImageLabelAccentColor;
          color: $primaryImageLabelColor;
        }
        &.label--image {
          background: transparent;
          padding: 0;
          width: 50px;
          img {
            display: block;
            width: 100%;
          }
        }

        &.label--top-left {
          top: 4px;
          left: 4px;
        }
        &.label--top-right {
          top: 4px;
          right: 4px;
        }
        &.label--bottom-left {
          bottom: 4px;
          left: 4px;
        }
        &.label--bottom-right {
          bottom: 4px;
          right: 4px;
        }
      }
      span.rating {
        opacity: 0;
        position: absolute;
        bottom: 4px;
        left: 4px;
        padding: 2px 8px 1px;
        background-color: $primaryImageLabelColor;
        color: $primaryImageLabelAccentColor;
        font-family: $navFontStack;
        font-size: em(11px);
        .icon-star-outline {
          color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
        }
      }

      &:hover,
      &:focus {
        .product_card__image.featured {
          opacity: 0;
        }
        .product_card__image.alt {
          opacity: 1;
        }
      }      
    }

    // Match heights on grid
    .image-table {
      max-width: 100%;
      width: 100%;
      display: table;
      table-layout: auto;
    }
    .image-cell {
      width: 100%;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      a.product-image {
        display: inline-block;
        width: 100%;
        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
  figcaption {
    margin-top: 10px;
    line-height: 1.3;
    .product-title {
      display: block;
      margin-top: 4px;
      color: $primaryTextColor;
      // text-align: center;
      a {
        color: $primaryTextColor;
        text-decoration: none;
        &:hover,
        &:focus {
          color: $primaryAccentColor;
        }
      }
      span.vendor {
        display: block;
        // text-align: center;
        font-family: $navFontStack;
        font-size: em(13px);
        margin-bottom: 2px;
        color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
      }
    }
    span.price {
      display: block;
      font-family: $navFontStack;
      font-size: em(14px);
      // text-align: center;
    }
    span.money:not(.original-price) {
      font-weight: 400;
      font-size: 18px;
    }
    span.original-price {
      font-weight: normal;
      text-decoration: line-through;
      color: mix($primaryTextColor, $primaryBackgroundColor, 60%);
    }
    span.from {
      font-weight: normal;
      text-transform: lowercase;
      color: mix($primaryTextColor, $primaryBackgroundColor, 60%);
    }
    span.label {
      padding: 4px 8px;
      background-color: $primaryImageLabelColor;
      color: $primaryImageLabelAccentColor;
      font-family: $navFontStack;
      font-size: em(11px);
      font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      &.sale {
        background-color: $primaryAccentColor;
        color: $primaryImageLabelColor;
      }
    }
    span.rating {
      color: $primaryImageLabelAccentColor;
      font-family: $navFontStack;
      font-size: em(12px);
      vertical-align: -1px;
      .icon-star-outline {
        color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
      }
    }
  }
}

/*============================================================================
  #Products
==============================================================================*/
// Combined structures
.single-product {
  padding: 0 20px $verticalContainerPadding;
  background: $productCollectionBackgroundColor;
  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  

  .wrapper {
    @if $productCollectionFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  .grid {
    @include grid();

    aside.product-aside {
      @include grid-item(5);
    }
    .product-images {
      @include grid-item(7);
    }

    @include mediaQuery($max, $tablet) {
      aside.product-aside,
      .product-images {
        @include grid-item(12);
        margin: 0 0 10px;
      }
    }
  }

  .product-reviews,
  .additional-description {
    padding: $verticalContainerPadding 0;
    &:empty {
      display: none;
    }
  }
}

header.product-header {
  display: table;
  width: 100%;
  margin-bottom: 30px;
  padding-top: 10px;
  border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);

  .title-container {
    display: table-cell;
    text-align: left;
    vertical-align: bottom;
  }
  .product-jump-container {
    display: table-cell;
    text-align: right;
    vertical-align: bottom;
  }

  h1 {
    font-size: emHeading(36px);
    margin-bottom: 0px;

    @include mediaQuery($min, $pre-tablet) {
      display: none;
    }
  }

  ul.product-jump {
    padding-top: 0px;
    margin-bottom: 8px;
    line-height: 1;
    font-size: em(11px);
    text-transform: uppercase;
    font-weight: $siteHeaderNavTextWeight;
    font-family: $navFontStack;

    @include mediaQuery($max, $mobile) {
      padding-top: 10px;
    }
    li {
      display: inline-block;
      &:after {
        content: ' | ';
      }
      &:last-child {
        a {
          padding-right: 0px;
        }
        &:after {
          content: '';
        }
      }
    }
  }
  a {
    text-decoration: none;
    color: $primaryTextColor;
    padding: 4px 6px;
    &:hover,
    &:focus {
      color: $primaryAccentColor;
    }
    span {
      position: relative;
      top: -1px;
    }
  }

  @include mediaQuery($max, $tablet) {
    text-align: center;
    .title-container {
      display: block;
      text-align: center;
    }
    .product-jump-container {
      display: block;
      text-align: center;
    }
  }
}

aside.product-aside {
  .purchase-box {

    &.padding-box {
      padding: 20px;
      background: $contentBoxBackgroundColor;
      
    }

    padding-bottom: 20px;
    border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%);
    margin-bottom: 20px;
    @include mediaQuery($max, $tablet) {
      max-width: 540px;
      margin: 40px auto;
    }

    @include word-wrap();
  }
  .trust-badge {
    margin-bottom: 20px;
    position: relative;
    display: block;
    width: 100%;
    &:before {
      content: '';
      display: block;
      padding-bottom: 100%;
    }
    img {
      width: 100%;
      position: absolute;
      top: 0;
      height: 100%;
      width: 100%;
    }
  }
  .description {
    h4 {
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
      padding-bottom: 2px;
      padding-top: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%);
      &:first-of-type {
        padding-top: 0px;
      }
    }
  }
}

.price__unit {
  display: none;

  .price--unit-available & {
    display: block;
  }
}

.price dd {
    margin: 0 0.5em 0 0;
    display: inline-block;
}
.price-unit-price {
    font-size: 0.8rem;
}
.cart dd,
.orders dd {
    margin: 0;
}

.product__policies {
  margin: 0.4rem 0;
  font-size: em(14px);
  a {
    color: $primaryTextColor;
  }
}
.product__payment-terms {
  margin: 0.5rem 0;
}

// Product Description Tabs
.tab__title,
h1.tab__title,
h2.tab__title,
h3.tab__title,
h4.tab__title,
h5.tab__title,
h6.tab__title {
  cursor: pointer;
  user-select: none; 
  padding: 8px 0;
  color: $primaryTextColor;
  text-transform: $siteHeaderNavTextTransform;
  font-weight: $siteHeaderNavTextWeight;
  font-family: $navFontStack;
  font-size: em(14px);
  text-decoration: none;
}
.tab__title {
  border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%);
  display: none;
  &:hover,
  &:focus {
    outline: 0;
    color: $primaryAccentColor;
  }
  &:after {
    content: '';
    margin-left: 6px;
    opacity: 0.4;
    display: inline-block;
    height: 5px;
    width: 8px;
    position: relative;
    top: -1px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');

    .tab--active & {
      @include transform(scaleY(-1));
    }
  }
}
.description__tabs {
  .tab:first-of-type {
    .tab__content {
      display: block;
    }
  }
}
.tab__content {
  display: none;
  padding: ($gutter / 2) 0 0;
}


.purchase-box {
  h1 {
    font-size: emHeading(28px);
    margin-bottom: 4px;
  }
  span.vendor {
    font-size: em(15px);
    position: relative;
    top: -6px;
    font-family: $navFontStack;
    a {
      text-decoration: none;
      color: $primaryTextColor;
      &:hover {
        color: $primaryAccentColor;
      }
    }
  }

  .selection-wrapper {
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid mix($primaryTitleColor, $contentBoxBackgroundColor, 10%);

    p {
      text-align: left;
    }

    &.variant {
      margin-bottom: 20px;
      select {
        width: 100%;
        height: 30px;
        margin: 0;
        border: 0px;
        outline: 2px solid mix($primaryTextColor, $contentBoxBackgroundColor, 40%);
        outline-offset: -2px;
        font-family: $navFontStack;
        font-size: em(12px);
        text-transform: $siteHeaderNavTextTransform;
        background-color: inherit;
      }
    }
    .variant-grid {
      @include grid();
      margin-left: -20px;

      .selector-wrapper {
        @include grid-item(6);
        padding-left: 20px;
        padding-top: 4px;
        padding-bottom: 4px;
        @include mediaQuery($max, $smallMobile) {
          @include grid-item(12);
        }
        &.full-width {
          @include grid-item(12);
        }
      }

      > select {
        @include grid-item(12);
        margin-left: 20px;
        width: auto;
        height: 30px;
        border: 0px;
        outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
        outline-offset: -2px;
        font-family: $navFontStack;
        font-size: em(12px);
        text-transform: $siteHeaderNavTextTransform;
        padding-left: 10px;
        background-color: $contentBoxBackgroundColor;
      }
    }
    &.no-js {
      margin-top: 20px;
      display: none;
    }
    &.price {
      padding-bottom: 10px;
      line-height: 1.2em;
      > span {
        font-size: em(18px);
        font-weight: $siteHeaderNavTextWeight;
        font-family: $navFontStack;
        color: $primaryAccentColor;
      }
      select {
        font-size: em(11px);
        color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
        text-transform: $siteHeaderNavTextTransform;
        font-weight: $siteHeaderNavTextWeight;
        background-color: $contentBoxBackgroundColor;
      }
      p {
        display: inline;
        margin: 0;
        line-height: 1.2em; 
        .compareprice__label {
          display: none;
        }
        span.money {
          text-decoration: line-through;
        }
      }

      .savings {
        display: block;
        color: $primaryAccentColor;
        font-weight: normal;
        font-size: em(14px);
        line-height: 1.6;
      }
      .savings--amount {
        &:before {
          content: '('
        }
        &:after {
          content: ')'
        }
      }
    }
    &.cart {
      padding: 0;
      margin: 0;
      border-bottom: 0;
      background-color: transparent;
      width: 100%;
      vertical-align: middle;

      .selector-wrapper.quantity {
        width: 100px;
        display: table-cell;
        vertical-align: bottom;
        padding-right: 20px;
        button,
        input {
          height: 34px;
          padding: 6px 8px;
        }
      }
      .button-wrapper {

      }
    }

    
  }
  .cart-error {
    text-align: center;
    font-size: em(14px);
    padding-bottom: 20px;
  }
}

.selection-wrapper.variant.radio {
  > div {
    margin-bottom: 6px;
    &::last-of-type {
      margin-bottom: 0px;
    }
  }
}
.radio-wrapper:focus-within {
  label {
    color: $primaryTextColor;
  }
}
.single-option-radio {
  border: 0;
  padding: 0;
  position: relative;
  background: transparent;
  &:focus {
    outline: 10px solid red;
  }
  .swatch-container {
    display: inline-block;
    svg {
      display: none;
    }
    &.soldout {
      &[data-variant-swatch-soldout="true"] {
        pointer-events: none;
      }
      label {
        position: relative;
      }
      svg {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        stroke: mix($primaryTextColor, $primaryBackgroundColor, 40%);
        stroke-width: 2px;
      }
    }
    &.color {
      label {
        height: 40px;
        width: 40px;
        padding: 0;
        background: transparent;
        border-color: transparent;
        span.swatch--swatch {
          display: block;
          margin: 2px;
          height: 34px;
          width: 34px;
          background-color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
          border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
        }
        span.swatch--text {
          @include visually-hidden();
        }
      }
      &.circle {
        label {
          border-radius: 50%;
          span.swatch--swatch {
            border-radius: 50%;
          }
        }
      }
    }
  }
  input {
    @include visually-hidden();
    &[type='radio']:checked + label {
      border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 70%);
      background-color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
      color: $primaryBackgroundColor;
    }
    &[type='radio']:not(:checked) + label:hover,
    &[type='radio']:not(:checked) + label:focus {
      border-color :mix($primaryTextColor, $primaryBackgroundColor, 90%);
      color: mix($primaryTextColor, $primaryBackgroundColor, 90%);
      outline: none;
    }
  }
  .swatch-container.color {
    [type='radio']:checked + label {
      border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 90%);
      background-color: transparent;
      outline: none;
    }
    [type='radio']:not(:checked) + label:hover,
    [type='radio']:not(:checked) + label:focus {
      border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 50%);
      background-color: transparent;
      outline: none;
    }
  }
  .selection-wrapper & {
    label {
      cursor: pointer;
      display: inline-block;
      font-family: $navFontStack;
      font-size: em(13px);
      font-weight: initial;
      line-height: 1;
      padding: 8px 12px;
      margin: 4px 8px 4px 0;
      background-color: transparent;
      color: $primaryTextColor;
      border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 50%);
      &.swatch-label--color {
        border-width: 1px;
      }
    }
    .soldout {
      label {
        color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
        border-color: mix($primaryTextColor, $primaryBackgroundColor, 20%);
        cursor: default;
      }
      [type='radio']:checked + label {
        background-color: mix($primaryTextColor, $primaryBackgroundColor, 18%);
        border-color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
        color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
      }
      [type='radio']:not(:checked) + label:hover,
      [type='radio']:not(:checked) + label:focus {
        color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
        border-color: mix($primaryTextColor, $primaryBackgroundColor, 20%);
        outline: none;
      }
    }
  }
}

// Swatches on collection pages
.product-swatches {
  margin-top: 10px;
  @include display-flexbox();
  @include align-items(center);
  @include flex-direction(row);
  @include flex-wrap(wrap);
}
.product-grid-item--left .product-swatches {
  @include justify-content(flex-start);
}
.product-grid-item--center .product-swatches {
  @include justify-content(center);
}
.product-grid-item--right .product-swatches {
  @include justify-content(flex-end);
}
.product-swatches__li {
  margin: 0 2px;
}
.product-swatches__link {
  display: block;
  height: 24px;
  width: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  &:hover {
    border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 50%);
  }
}
.product-swatches__link--selected {
  border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 50%);
  background-color: transparent;
  outline: none;
}
.product-swatches__color {
  display: block;
  margin: 1px;
  height: 20px;
  width: 20px;
  background-color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
  border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.product-swatches__label {
  @include visually-hidden();
}
.swatch-label--color {
  height: 40px;
  width: 40px;
  padding: 0;
  background: transparent;
  border-color: transparent;
}
.product-swatches--circle {
  .product-swatches__link,
  .product-swatches__color,
  .swatch-label--color {
    border-radius: 50%;
  }
}
span.swatch--swatch {
  display: block;
  margin: 2px;
  height: 34px;
  width: 34px;
  background-color: mix($primaryTextColor, $primaryBackgroundColor, 40%);
  border: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

}
span.swatch--text {
  // @include visually-hidden();
}

.product-images {
  &.thumbnails-placement-side {
    .images-container {
      @include grid();
    }
  }
  &.thumbnails-placement-side--left {
    .images-container {
      @include grid(false, true);
    }
  }
  &.thumbnails-placement-side,
  &.thumbnails-placement-side--left {
    .featured  {
      @include grid-item(10);
      &.full-width {
        @include grid-item(12);
      }
    }
    .thumbnails {
      @include grid-item(2);
      li {
        margin-bottom: 12px;
         @include mediaQuery($max, $tablet) {
            margin-bottom: 0;
         }
      }
    }
    .product-thumb--slider {
      @include grid-item(12);
      width: calc(100% - 48px);
      display: none;
    }
    @include mediaQuery($max, 1000px) {
      .featured {
        @include grid-item(12);
      }
      .thumbnails {
        &[data-enable-group="true"]{
          display: none;
        }
        @include grid-item(12);
      }
      .thumbnails {
        display: none;
      }
      .product-thumb--slider {
        display: block;
      }
    }
    @include mediaQuery($max, $mobile) {
      .thumbnails {
        margin-bottom: 10px;
      }
    }
  }

  &.thumbnails-placement-below {
    .featured {
      @include grid-item(12);
      @include clearfix();
    }
    .thumbnails {
      @include grid-item(12);
      margin-top: 20px;
      text-align: center;
      li {
        width: 20%;
        margin: 0 6px;
        display: inline-block;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .featured {
    a {
      display: block;
      
    }
    .productimage-limit {
      margin: 0 auto;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 100%;
      height: auto;
    }
  }
  .thumbnails {

    &[data-enable-group="true"] {
      li {
        opacity: 0;
      }
    }
    a {
      display: block;
      border: 2px solid $primaryBackgroundColor;
      position: relative;

      &:hover,
      &:focus {
        img {
          opacity: 0.8;
        }
        
      }
      &.active {
        border: 2px solid $primaryTextColor;
        
        &:focus {
          outline: 0px;
          border: 2px solid $primaryTextColor;
        }
      }
      &:focus {
        outline: 0;
        border: 2px solid $primaryAccentColor;
      }
    }

    img {
      display: block;
      max-width: 100%;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
}
// Hide scrollbar
.product-images .thumbnails::-webkit-scrollbar {
    display: none;
}
.product-images .thumbnails {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.images-container.is-fullscreen:before {
  content: '';
  display: block;
  padding-top: 100%;
}

// Product slider
.product-image--slider {
  &[data-show-arrows="false"]:not(.is-fullscreen) {
    .flickity-prev-next-button {
      display: none !important;
    }
  }
  
  .flickity-viewport {
    background: transparent;
  }
  &.flickity-enabled {
    .product-image--cell {
      display: flex;
      img {
        display: block;
      }
      &[inert] .plyr {
        visibility: hidden;
      }
    }
  }

  &.is-fullscreen .product-image--cell {
    height: 100%;
    .easyzoom-flyout {
      opacity: 0;
    }
  }
  &[data-lightbox="false"][data-slider-enabled="false"] {
    a {
      cursor: default;
    }
  }
  .flickity-page-dots {
    padding: 0;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 48px);
    margin: 0 auto;
    flex-wrap: wrap;
    .dot {
      flex: 8px 0 0;
      width: 8px;
      height: 8px;
      margin: 0 6px;
    }
  }
  &:not(.is-fullscreen) {
    .flickity-prev-next-button {
      height: 44px !important;
      width: 44px !important;
      transform: none;
      top: auto;
      bottom: 0px;
      @include mediaQuery($max, $tablet) {
        display: block;
      }
      &.next {
        right: -20px;
      }
      &.prev {
        left: -20px;
      }
      svg {
        width: 40%;
        left: 28%;
      }
    }
    &[data-show-dots="false"] {
      text-align: center;
      .flickity-viewport {
        text-align: initial;
      }
      .flickity-prev-next-button {
        position: relative;
        left: auto !important;
        right: auto !important;
        display: inline-block;
      }
    }
  }
  
}

.product-image--cell {
  width: 100%;
  margin: 0 1px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  a {
    display: block;
  }
  .plyr:focus:after,
  model-viewer:focus:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-shadow: inset 0 0px 2px 3px rgba($primaryAccentColor, 0.25);
    pointer-events: none;
  }
  display: none;
  img {
    width: 100%;
    display: none;
    margin: 0 auto;
  }
  
  &:after {
    content:'';
    min-height:inherit;
    font-size:0;
  }
  &.is-selected {
    model-viewer {
      visibility: visible;
    }
  }
  &:not(.is-selected) {
    model-viewer {
      visibility: hidden;
    }
  }

  &[data-initial-image] {
    display: flex;
    img {
      display: block;
    }
  }
}
html.touchevents {
  .product-image--cell {
    .plyr:focus:after,
    model-viewer:focus:after {
      display: none;
    }
  }
}
.product-thumb--slider {
  margin: $gutter / 2 auto;
  width: calc(100% - 48px);
  .flickity-viewport {
    background: transparent;
  }

  &[data-slider-enabled="false"]{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  &[data-slider-enabled="true"]{
    height: 100px;
    overflow: hidden;
  }
  &.flickity-enabled[data-slider-enabled="true"] {
    overflow: visible;
  }

  &:not(.flickity-enabled){
    text-align: center;
  }

  .flickity-prev-next-button {
    width: 44px;
    @include mediaQuery($max, $tablet) {
      display: block;
    }
    &.previous {
      left: -44px !important;
    }
    &.next {
      right: -44px !important;
    }
    .flickity-button-icon {
      width: 40%;
      left: 28%;
    }
  }
}
.product-thumb--cell {
  width: 100px;
  height: 100px;
  margin: $gutter*.25;
  display: flex;
  align-items: center;
  position: relative;
  a {
    display: block;
    margin: 0 auto;
    position: relative;
    &:hover,
    &:focus {
      opacity: 0.8;
    }
  }
  img {
    display: block;
    max-height: 100px;
  }
  &:focus {
    outline: 0px;
    a {
      outline-width: 5px;
      outline-style: auto;
    }
  }
  &:active {
    outline: 0px;
    a {
      outline: 0px;
    }
  }
  &.is-nav-selected,
  &[data-initial-image] {
    a:hover,
    a:focus {
      opacity: 1;
    }
    &:focus {
      a {
        outline: 0;
      }
    }
    img,
    svg {
      border: 2px solid $primaryTextColor;
    }
    .product-single__thumbnail-badge {
      svg {
        border: 0px;
      }
    }
  }
}
.fallback-object-fit {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  img {
    opacity: 0;
  }
  border: 2px solid $primaryTextColor;
}

// Product Media
.product-single__media {
  margin: 0 auto;
  min-height: 1px;
  width: 100%;
  height: 100%;
  position: relative;

  iframe,
  model-viewer,
  .shopify-model-viewer-ui,
  img,
  > video,
  .plyr,
  .media-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
  }

  iframe,
  .media-video,
  model-viewer,
  .shopify-model-viewer-ui,
  .media-item,
  .plyr,
  .plyr__video-wrapper {
    height: 100%;
  }
}

.product-single__view-in-space {
  background-color: rgba($primaryTextColor, 0.08);
  border: none;
  width: 100%;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: block;
  font-size: emModify($baseFontSize);
  color: $primaryTextColor;

  &[data-shopify-xr-hidden] {
    display: none;

    @include mediaQuery($min, $tablet) {
      display: none;
    }
  }

  &:hover,
  &:focus {
    .product-single__view-in-space-text {
      border-bottom-color: $primaryTextColor;
    }
  }

  svg.icon {
    height: em(25);
    width: em(25);
    margin-top: -3px;
    margin-right: 2.43px;
    fill: transparent;
    vertical-align: middle;

    .icon-3d-badge-full-color-outline {
      stroke: none;
    }

    .icon-3d-badge-full-color-element {
      fill: $primaryTextColor;
      opacity: 1;
    }
  }
}

.product-single__view-in-space-text {
  border-bottom: 1px solid transparent;
}

.product-single__thumbnail-badge {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 6px;
  top: 6px;
  pointer-events: none;

  @include mediaQuery($min, $tablet) {
    width: 26px;
    height: 26px;
  }

  .icon {
    fill: $primaryBackgroundColor;
    width: 100%;
    height: 100%;
    vertical-align: baseline;
  }
  .icon-3d-badge-full-color-outline,
  .icon-video-badge-full-color-outline {
    stroke: rgba($primaryTextColor, 0.05);
  }

  .icon-3d-badge-full-color-element,
  .icon-video-badge-full-color-element {
    fill: $primaryTextColor;
  }
}

.plyr.plyr--full-ui.plyr--video {
  color: $primaryTextColor;
  background-color: transparent;

  .plyr__video-wrapper {
    background-color: transparent;
  }

  .plyr__poster {
    background-color: $contentBoxBackgroundColor;
  }

  // --------------------------------------------------------------
  // Fullscreen
  // --------------------------------------------------------------

  &:fullscreen .plyr__video-wrapper &:fullscreen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-webkit-full-screen .plyr__video-wrapper,
  &:-webkit-full-screen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-moz-full-screen .plyr__video-wrapper,
  &:-moz-full-screen .plyr__poster {
    background-color: #000;
  }

  /* stylelint-disable-next-line */
  &:-ms-fullscreen .plyr__video-wrapper,
  &:-ms-fullscreen .plyr__poster {
    background-color: #000;
  }

  // Fallback for unsupported browsers
  .plyr--fullscreen-fallback .plyr__video-wrapper,
  .plyr--fullscreen-fallback .plyr__poster {
    background-color: #000;
  }

  .plyr__control.plyr__control--overlaid {
    background-color: $primaryBackgroundColor;
    border-color: rgba($primaryTextColor, 0.05);

    &.plyr__tab-focus,
    &:hover {
      color: rgba($primaryTextColor, 0.55);
    }
  }

  .plyr__controls {
    background-color: $primaryBackgroundColor;
    border-color: rgba($primaryTextColor, 0.05);
  }

  .plyr__progress {
    input[type='range'] {
      &::-moz-range-thumb {
        box-shadow: 2px 0 0 0 $primaryBackgroundColor;
      }

      &::-ms-thumb {
        box-shadow: 2px 0 0 0 $primaryBackgroundColor;
      }

      &::-webkit-slider-thumb {
        box-shadow: 2px 0 0 0 $primaryBackgroundColor;
      }

      &::-webkit-slider-runnable-track {
        background-image: linear-gradient(
          to right,
          currentColor var(--value, 0),
          rgba($primaryTextColor, 0.6) var(--value, 0)
        );
      }

      &::-moz-range-track {
        background-color: rgba($primaryTextColor, 0.6);
      }

      &::-ms-fill-upper {
        background-color: rgba($primaryTextColor, 0.6);
      }

      &.plyr__tab-focus {
        &::-webkit-slider-runnable-track {
          box-shadow: 0 0 0 4px rgba($primaryTextColor, 0.25);
        }

        &::-moz-range-track {
          box-shadow: 0 0 0 4px rgba($primaryTextColor, 0.25);
        }

        &::-ms-track {
          box-shadow: 0 0 0 4px rgba($primaryTextColor, 0.25);
        }
      }

      &:active {
        &::-moz-range-thumb {
          box-shadow: 0 0 0 3px rgba($primaryTextColor, 0.25);
        }

        &::-ms-thumb {
          box-shadow: 0 0 0 3px rgba($primaryTextColor, 0.25);
        }

        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px rgba($primaryTextColor, 0.25);
        }
      }
    }

    .plyr__tooltip {
      background-color: $primaryTextColor;
      color: $primaryBackgroundColor;

      &::before {
        border-top-color: $primaryTextColor;
      }
    }
  }

  &.plyr--loading .plyr__progress__buffer {
    background-image: linear-gradient(
      -45deg,
      rgba($primaryTextColor, 0.6) 25%,
      transparent 25%,
      transparent 50%,
      rgba($primaryTextColor, 0.6) 50%,
      rgba($primaryTextColor, 0.6) 75%,
      transparent 75%,
      transparent
    );
  }

  .plyr__volume {
    input[type='range'] {
      color: $primaryBackgroundColor;

      &::-moz-range-thumb {
        box-shadow: 2px 0 0 0 $primaryTextColor;
      }

      &::-ms-thumb {
        box-shadow: 2px 0 0 0 $primaryTextColor;
      }

      &::-webkit-slider-thumb {
        box-shadow: 2px 0 0 0 $primaryTextColor;
      }

      &::-webkit-slider-runnable-track {
        background-image: linear-gradient(
          to right,
          currentColor var(--value, 0),
          rgba($primaryBackgroundColor, 0.6) var(--value, 0)
        );
      }

      &::-moz-range-track,
      &::-ms-fill-upper {
        background-color: rgba($primaryBackgroundColor, 0.6);
      }

      &.plyr__tab-focus {
        &::-webkit-slider-runnable-track {
          box-shadow: 0 0 0 4px rgba($primaryBackgroundColor, 0.25);
        }

        &::-moz-range-track {
          box-shadow: 0 0 0 4px rgba($primaryBackgroundColor, 0.25);
        }

        &::-ms-track {
          box-shadow: 0 0 0 4px rgba($primaryBackgroundColor, 0.25);
        }
      }

      &:active {
        &::-moz-range-thumb {
          box-shadow: 0 0 0 3px rgba($primaryBackgroundColor, 0.25);
        }

        &::-ms-thumb {
          box-shadow: 0 0 0 3px rgba($primaryBackgroundColor, 0.25);
        }

        &::-webkit-slider-thumb {
          box-shadow: 0 0 0 3px rgba($primaryBackgroundColor, 0.25);
        }
      }
    }
  }
}

.shopify-model-viewer-ui {
  .shopify-model-viewer-ui__controls-area {
    background: $primaryBackgroundColor;
    border-color: rgba($primaryTextColor, 0.05);
  }

  .shopify-model-viewer-ui__button {
    color: $primaryTextColor;
  }

  .shopify-model-viewer-ui__button--control {
    &:hover {
      color: rgba($primaryTextColor, 0.55);
    }

    &:active,
    &.focus-visible:focus {
      color: rgba($primaryTextColor, 0.55);
      background: rgba($primaryTextColor, 0.05);
    }

    &:not(:last-child):after {
      border-color: rgba($primaryTextColor, 0.05);
    }
  }

  .shopify-model-viewer-ui__button--poster {
    background: $primaryBackgroundColor;
    border-color: rgba($primaryTextColor, 0.05);

    &:hover,
    &:focus {
      color: rgba($primaryTextColor, 0.55);
    }
  }
}


/*============================================================================
  #Cart
==============================================================================*/
.cart {
  padding: 0 20px $verticalContainerPadding;
  background: $productCollectionBackgroundColor;
  //border-bottom: 1px solid lighten($primaryTextColor, 50%);

  &.page-top {
    padding-bottom: 20px;
  }

  .wrapper {
    @if $productCollectionFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  header.cart-header {
    margin-bottom: 30px;
    h1 {
      text-align: center;
      padding-bottom: 10px;
      border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
      text-transform: $primaryTitleTextTransform;
    }
  }

  .cart-container {
    margin: 0 auto 20px;
    > p {
      text-align: center;
    }
  }

  .cart-items {
    width: 100%;
    padding: 20px;
    background: $contentBoxBackgroundColor;
    margin-bottom: 30px;
    
  }
  .label-row {
    font-size: em(12px);
    color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
    text-transform: $siteHeaderNavTextTransform;
    font-weight: $siteHeaderNavTextWeight;

    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);

    .td,
    .td.cart-item-product {
      font-size: emModify(12px);
    }

    @include mediaQuery($max, $mobile) {
      display: none;
    }
  }
  .cart-item {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
    &:last-of-type {
      border-bottom: 0;
    }
    @include mediaQuery($max, $mobile) {
      padding-bottom: 0;
    }
    p {
      margin: 0;
    }
  }
  .grid {
    @include grid();
  }
  .td {
    @include grid-item(2);
    font-size: emModify($baseFontSize);
  }
  .td {
    @include grid-item(2);
    text-align: center;
    &.cart-item-product {
      @include grid-item(6);
      text-align: left;
    }
    &.cart-item-total {
      text-align: right;
      .mobile-label {
        display: none;
      }
    }
    @include mediaQuery($max, "900px") {
      @include grid-item(3);
      &.cart-item-product {
        @include grid-item(3);
      }

    }
    @include mediaQuery($max, $mobile) {
      &.cart-item-product {
        @include grid-item(12);
      }
      &.cart-item-price {
        text-align: left;
        @include grid-item(12);
        width: 40%;
        p {
          display: inline-block;
          margin-right: 6px;
        }
      }
      &.cart-item-quantity {
        @include grid-item(12);
        width: 60%;
      }
      &.cart-item-total {
        @include grid-item(12);
        @include clearfix();
        .mobile-label {
          display: inline;
          float: left;
          font-size: em(12px);
          color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
          text-transform: $siteHeaderNavTextTransform;
          font-weight: $siteHeaderNavTextWeight;
        }
        p {
          display: inline-block;
          margin-left: 6px;
        }
      }

      margin-bottom: 16px;
    }
  }

  .cart-item-product {
    @include clearfix();

    @include mediaQuery($max, $mobile) {
      margin-bottom: 10px;
    }

    .cart-item-image {
      float: left;
      width: 160px;
      margin-right: 16px;
      a {
        display: block;
      }
      img {
        max-width: 100%;
        height: auto;
      }
      @include mediaQuery($max, "900px") {
        float: none;
        margin-right: 0;
        width: 60px;
      }
      @include mediaQuery($max, $mobile) {
        float: left;
        margin-right: 16px;
      }
    }
    .cart-item-title {
      a.title {
        display: block;
        color: $primaryTextColor;
        text-decoration: none;
        font-size: emHeading(20px);
      }
      span.vendor {
        font-style: italic;
        display: block;
      }
      span.variant {
        font-size: em(12px);
        color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
        text-transform: $siteHeaderNavTextTransform;
        font-weight: $siteHeaderNavTextWeight;
      }
      @include mediaQuery($max, "900px") {
        a.title {
          font-size: em(16px);
        }
        span.vendor {
          font-size: em(11px);
          display: block;
        }
        span.variant {
          font-size: em(11px);
          display: block;
        }
      }

    }
  }

  .cart-item-quantity {
    .quantity-select {
      max-width: none;
    }
    a.remove {
      display: block;
      font-size: em(12px);
      margin-top: 10px;
      text-decoration: none;
      color: mix($primaryTextColor, $contentBoxBackgroundColor, 40%);
    }
    @include mediaQuery($max, $mobile) {
      text-align: center;
      width: 60%;
      a.remove {
        font-size: em(11px);
        margin-top: 4px;
      }
    }
  }

  .cart-item {
    .cart-item-price {
      span.final-price-discount {
        color: $primaryAccentColor;
      }
      span.original-price {
        text-decoration: line-through;
      }
      ul.cart-item-discounts {
        font-size: em(12px);
        color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
        text-transform: $siteHeaderNavTextTransform;
        font-weight: $siteHeaderNavTextWeight;
        li {
          margin: 6px 0;
          span.cart-item-discount-title {
            color: $primaryAccentColor;
          }
          span.cart-item-discount-amount {
            white-space: nowrap;
          }
        }
      }
    }
    .cart-item-total span {
      font-size: emHeading(18px);
      font-weight: $siteHeaderNavTextWeight;
      font-family: $navFontStack;
      color: $primaryAccentColor;

      &.original-price {
        font-size: emHeading(16px);
        text-decoration: line-through;
        color: $primaryTextColor;
      }

      @include mediaQuery($max, $mobile) {
        font-size: emHeading(16px);
        width: auto !important;
        display: inline-block;
      }
    }
  }

  .cart-notes {
    @include grid-item(6);
    textarea {
      width: 100%;
      margin: 12px 0 0 0;
      padding: 6px;
      border: 0px;
      outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
      outline-offset: -2px;
      font-family: $navFontStack;
      font-size: em(12px);
      min-height: 120px;
      background-color: $contentBoxBackgroundColor;
      &:focus {
        outline-color: $primaryAccentColor;
      }
    }
    @include mediaQuery($max, $tablet) {
      float: none;
      width: 100%;
      display: block;
      max-width: 440px;
      margin: 0 auto;
      margin-bottom: 20px;
    }
  }
  ul.cart-discount {
    font-size: em(14px);
    color: $primaryTextColor;
    text-transform: $siteHeaderNavTextTransform;
    font-weight: $siteHeaderNavTextWeight;
    li {
      span.cart-discount--amount {
        white-space: nowrap;
        color: $primaryAccentColor;
      }
    }
  }
  .cart-checkout {
    text-align: right;
    @include grid-item(6);

    
    .additional-checkout-buttons,
    .checkout-buttons {
      padding: ($gutter / 2) 0;
    }
    
    p.subtotal {
      font-size: em(18px);
      font-weight: $siteHeaderNavTextWeight;
      font-family: $navFontStack;
      span {
        color: $primaryAccentColor;
      }
      .minimal-select {
        font-size: em(12px);
      }
    }
    input {
      font-size: em(14px);
      padding: 14px 48px;

      &.button.outline {
        padding-top: 8px;
        padding-bottom: 8px;
        margin-right: 10px;
      }
    }
    @include mediaQuery($max, $tablet) {
      text-align: center;
      @include grid-item(12);
    }
  }
  @include mediaQuery($max, $mobile) {
    .cart-checkout input.button.outline {
      margin-right: 0;
    }
    input[type="submit"] {
      width: 100%;
      margin-bottom: 10px;
    }
  }

  .simple-collection {
    border-bottom: none;
    padding-bottom: 0;
  }


}
[data-shopify-buttoncontainer] {
   justify-content: flex-end;
} 

.terms-and-conditions {
  input {
    float: none;
    vertical-align: middle;
    padding: 0 !important;
  }
  label {
    display: inline;
    float: none;
    p:first-of-type {
      display: inline-block;
    }
  }
}
html.js .cart[data-ajax-cart='true'] {
  .cart-button--update {
    display: none;
  }
}
.cart-item--pending {
  .cart-item-total span[data-cart-item-line-price] {
    display: inline-block;
    height: 6px;
    position: relative;
    overflow: hidden;
    > span {
      visibility: hidden;
    }
    &:before {
      display: block;
      position: absolute;
      content: '';
      left: -30%;
      width: 30%;
      height: 6px;
      top: 50%;
      background: $primaryAccentColor;
      animation: loaderBarAnimation 1s linear infinite;
    }
  }
}
.cart-checkout--pending {
  p.subtotal span.price {
    display: inline-block;
    height: 6px;
    position: relative;
    overflow: hidden;
    > span {
      visibility: hidden;
    }
    &:before {
      display: block;
      position: absolute;
      content: '';
      left: -30%;
      width: 30%;
      height: 6px;
      top: 50%;
      background: $primaryAccentColor;
      animation: loaderBarAnimation 1s linear infinite;
    }
  }
}
.loader-bar {
  display: inline-block;
  height: 4px;
  width: 40%;
  position: relative;
  overflow: hidden;
  background: mix($primaryTextColor, $primaryBackgroundColor, 5%);
  &:before {
    display: block;
    position: absolute;
    content: '';
    left: -30%;
    width: 30%;
    height: 4px;
    background: mix($primaryTextColor, $primaryBackgroundColor, 20%);
    animation: loaderBarAnimation 1s linear infinite;
  }
}
@keyframes loaderBarAnimation {
  from {
    left: -30%;
    width: 30%;
  }
  50% {
    width: 30%;
  }
  70% {
    width: 60%;
  }
  80% {
    left: 50%;
  }
  100% {
    left: 100%;
  }
}

/*============================================================================
  #Instagram Collection
==============================================================================*/
.looks {
  padding: $verticalContainerPadding 0;

  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  

  &.full-width {
    .wrapper {
      @include outer-container;
    }
  }
  .wrapper {
    @include outer-container($siteWidth);
    padding: 0;
    margin-bottom: $verticalContainerPadding;
  }

  header {
    text-align: center;
    margin-bottom: 20px;
    h4 {
      @extend .h2;
      margin-bottom: 0;
    }
  }
  footer {
    margin-top: 20px;
    text-align: center;
  }
}
.looks__container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  .looks__item {
    flex: 0 1 auto;
  }
  &[data-rows="2"] .looks__item {
    width: percentage(1/2);
  }
  &[data-rows="3"] .looks__item {
    width: percentage(1/3);
  }
  &[data-rows="4"] .looks__item {
    width: percentage(1/4);
  }
  &[data-rows="5"] .looks__item {
    width: percentage(1/5);
  }
  &[data-rows="6"] .looks__item {
    width: percentage(1/6);
  }

  @include mediaQuery($max, $mobile) {
    &[data-rows-mobile="1"] .looks__item {
      width: 100%;
    }
    &[data-rows-mobile="2"] .looks__item {
      width: percentage(1/2);
    }
    &[data-rows-mobile="3"] .looks__item {
      width: percentage(1/3);
    }
    &[data-rows-mobile="4"] .looks__item {
      width: percentage(1/4);
    }
  }
  
  .looks__image-container {
    .looks__item--overlay:hover,
    .looks__item--overlay:focus {
      cursor: pointer;
      &[data-overlay='false'][href='#'] {
        cursor: default !important;
      }
      .card__image {
        @include transform(scale(1.15, 1.15) translateZ(0));
      }
      figcaption {
        opacity: 1;
      }
    }

    figure {
      position: relative;
      overflow: hidden;
      a {
        display: block;
      }
      .card__image-wrapper--manual img {
        object-fit: cover;
      }
      .card__image {
        @include transition(transform 2s ease-in-out);
        @include transform(scale(1.02, 1.02) translateZ(0));
        width: 100%;
        display: block;
        background-size: cover;
        background-position: center;
        &.lazyload {
          opacity: 0;
        }
      }
      svg.placeholder-svg {
        width: 100%;
        height: auto;
        display: block;
        fill: mix($primaryTextColor, $primaryBackgroundColor, 45%);
        border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
        background-color: mix($primaryTextColor, $primaryBackgroundColor, 5%);
      }
    }
    figcaption {
      @include transition(opacity 0.25s ease-in-out);
      opacity: 0;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background-color: $primaryImageLabelAccentColor;
      background-color: rgba($primaryImageLabelAccentColor, .8);
      color: $primaryTextOnAccentColor;
      pointer-events: none;
      padding: 10px;
      overflow: hidden;
      h4 {
        color: inherit;
        margin: 0;
      }
      .looks__caption--text {
        line-height: 1.4;
        font-size: em(14px);
      }
      .looks__products {
        display: none;
      }
    }
  }

  .looks__products,
  .looks__overlay {
    display: none;
  } 
}

.looks__overlay {
  display: flex;
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  background: $primaryBackgroundColor;
  color: $primaryTextColor;
  position: relative;
  align-items: center;
  
  @include mediaQuery($max, $tablet) {
    flex-flow: column-reverse;
    align-items: normal;
  }

  .looks__overlay-image {
    flex: 0 0 60%;
    img {
      object-fit: cover;
    }
  }
  .looks__overlay-content {
      flex: 1 1 auto;
      padding: 20px;
  }
  .looks__caption {
    font-size: 0.9em;
  }
  .looks__overlay-content {
      flex: 1 1 auto;
      padding: 20px;
  }
  figcaption.looks__caption {
      font-size: 0.9em;
  }
  .looks__products {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      border-top: mix($primaryTextColor, $primaryBackgroundColor, 20%);

      .product-title {
        display: block;
        margin-top: 4px;
        color: $primaryTextColor;
        text-align: center;
        a {
          color: $primaryTextColor;
          text-decoration: none;
          &:hover,
          &:focus {
            color: $primaryAccentColor;
          }
        }
        span.vendor {
          display: block;
          text-align: center;
          font-family: $navFontStack;
          font-size: em(13px);
          margin-bottom: 2px;
          color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
        }
      }
      span.price {
        display: block;
        font-family: $navFontStack;
        font-size: em(12px);
        font-weight: $siteHeaderNavTextWeight;
        text-align: center;
      }
      span.original-price {
        font-weight: normal;
        text-decoration: line-through;
        color: mix($primaryTextColor, $primaryBackgroundColor, 60%);
      }
      span.from {
        font-weight: normal;
        text-transform: lowercase;
        color: mix($primaryTextColor, $primaryBackgroundColor, 60%);
      }
      span.label {
        padding: 4px 8px;
        background-color: $primaryImageLabelColor;
        color: $primaryImageLabelAccentColor;
        font-family: $navFontStack;
        font-size: em(11px);
        font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        position: absolute;
        bottom: 4px;
        right: 4px;
        &.sale {
          background-color: $primaryAccentColor;
          color: $primaryImageLabelColor;
        }
      }
      .product-swatches {
        display: none;
      }
  }
  .box.product {
      flex: 0 1 50%;
      padding: 0 10px;
  }
}



/*============================================================================
  #Page
==============================================================================*/
.page,
.popup-page {
  padding: 0px 20px $verticalContainerPadding;
  background: $productCollectionBackgroundColor;
  //border-bottom: 1px solid lighten($primaryTextColor, 50%);

  &.page-top {
    padding-bottom: 20px;
  }

  .wrapper {
    @if $productCollectionFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  header.page-header {
    padding-top: 12px;
    h1 {
      text-align: center;
      padding-bottom: 8px;
      border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
      text-transform: $primaryTitleTextTransform;
    }
  }

  h4 {
    font-size: emHeading(26px);
    margin-bottom: 0.75em;
    time {
      font-size: em(8px);
      font-family: $navFontStack;
      text-transform: $siteHeaderNavTextTransform;
      display: block;
    }
  }
  span.smaller {
    font-size: em(14px);
  }

  .content-container {
    @include clearfix();
    margin: 0 auto 20px;

    &.narrow {
      max-width: 800px;
      &.contact {
        max-width: 600px;
      }
      &.form {
        max-width: 440px;
      }
    }

    .rte {
      blockquote {
        font-style: italic;
        font-size: em(18px);
        padding: 0;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
      }
      ul {
        list-style-type: disc;
        margin-bottom: 1em;
        padding-left: 2em;
      }

    }
  }

  .grid {
    @include grid();
  }
  .orders-container {
    @include grid-item(9);
  }
  .orders {
    padding: 20px;
    background: $contentBoxBackgroundColor;
    

    table {
      border-collapse: collapse;
      margin: 0;
      padding: 0;
      width: 100%;
      table-layout: fixed;
      thead {
        text-align: left;
        font-size: em(12px);
        color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
        text-transform: $siteHeaderNavTextTransform;
        font-weight: $siteHeaderNavTextWeight;

        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
        th {
          padding-bottom: 10px;
          text-align: center;
          &.orders-product {
            text-align: left;
            width: 35%;
          }
          &.orders-price {
            width: 30%;
          }
          &.orders-quantity {
            width: 15%;
          }
          &.orders-total {
            width: 20%;
            text-align: right;
          }
        }
        @include mediaQuery($max, $tablet) {
          border: none;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          width: 1px;
          th {
            &.orders-product,
            &.orders-price,
            &.orders-quantity,
            &.orders-total {
              width: 100%;
            }
          }
        }
      }
      tbody {
        tr {
          border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
          &:last-child {
            border-bottom: 0px;
          }
          td {
            padding: 20px 0;
            text-align: center;
            vertical-align: top;
            &:first-child {
              text-align: left;
              a {
                display: block;
                text-decoration: none;
                font-size: em(18px);
              }
            }
            &:last-child {
              text-align: right;
              font-weight: $siteHeaderNavTextWeight;
              color: $primaryAccentColor;

              span.original-price {
                color: $primaryTextColor;
              }
            }
            @include mediaQuery($max, $tablet) {
              display: block;
              text-align: right !important;
              border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
              &:before {
                content: attr(data-label);
                float: left;
                font-size: em(12px);
                text-transform: $siteHeaderNavTextTransform;
                font-weight: $siteHeaderNavTextWeight;
              }
              &:last-child {
                border-bottom: 0;
              }
            }
          }
          @include mediaQuery($max, $tablet) {
            display: block;
            padding: 20px 0;
            border-bottom: 4px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
          }
        }
      }
      tfoot {
        margin-top: 28px;
        border-top: 4px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
        td {
          padding: 10px 0;
          &:last-child {
            text-align: right;
          }
        }
        tr:first-child {
          td {
            padding-top: 28px;
          }
        }
        tr:last-child {
          font-size: em(18px);
          font-weight: $siteHeaderNavTextWeight;
          font-family: $navFontStack;
          span {
            color: $primaryAccentColor;
          }
        }
        .order_summary.discount {
          span.order-discount--title {
            color: $primaryAccentColor;
            font-size: em(14px);
            text-transform: $siteHeaderNavTextTransform;
            font-weight: $siteHeaderNavTextWeight;
          }
          span.order-discount--amount {
            font-weight: $siteHeaderNavTextWeight;
            white-space: nowrap;
          }
        }
        @include mediaQuery($max, $tablet) {
          tr {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
          td {
            display: inline-block;
          }
        }
      }
      // @include mediaQuery($max, $tablet) {
      //   font-size: em(12px);
      // }
    }
    .address {
      border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
      padding-bottom: 20px;
      margin-bottom: 20px;
      &:last-of-type {
        border-bottom: 0px;
        margin-bottom: 0px;
        padding-bottom: 0px;
      }
    }
    .form-vertical {
      &.top {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
      }
      &.bottom {
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid mix($primaryTextColor, $contentBoxBackgroundColor, 10%);
      }
    }

    a.title {
      display: block;
      color: $primaryTextColor;
      text-decoration: none;
      font-size: emHeading(20px);
    }
    span.vendor {
      font-style: italic;
      display: block;
    }
    span.variant {
      font-size: em(12px);
      color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
      text-transform: $siteHeaderNavTextTransform;
      font-weight: $siteHeaderNavTextWeight;
    }
    p {
      margin: 0;
    }
    span.final-price-discount {
      color: $primaryAccentColor;
    }
    span.original-price {
      text-decoration: line-through;
    }
    ul.cart-item-discounts {
      font-size: em(12px);
      color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
      text-transform: $siteHeaderNavTextTransform;
      font-weight: $siteHeaderNavTextWeight;
      li {
        margin: 6px 0;
        span.cart-item-discount-title {
          color: $primaryAccentColor;
        }
        span.cart-item-discount-amount {
          white-space: nowrap;
        }
      }
    }
  }
  .account {
    @include grid-item(3);
    // padding: 20px 0;
    h5 {
      margin-bottom: 0px;
      font-size: em(26px);
    }
    p {
      line-height: 1.2;
    }
  }


  @include mediaQuery($max, $tablet) {
    .orders-container {
      @include grid-item(12);
    }
    .account {
      @include grid-item(12);
      margin-top: 20px;
      text-align: center;
    }
  }
}

.popup-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}


/*============================================================================
  #Blog
==============================================================================*/
.recent-posts-collection {
  padding: $verticalContainerPadding 20px $verticalContainerPadding*0.5;
  background-color: $blogBackgroundColor;
  
  border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
  

  @include mediaQuery($max, $mobile) {
    padding: 20px;
  }

  .wrapper {
    @if $blogFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
  }

  .wrapper > header {
    @include clearfix();
    position: relative;
    margin-bottom: 20px;
    h4 {
      //float: left;
      margin: 0;
      font-size: emHeading(28px);
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
    }
    a.button.outline {
      position: absolute;
      top: 50%;
      right: 0;
      @include transform(translateY(-50%));
      @include buttonOutline;
    }

    @include mediaQuery($max, $mobile) {
      text-align: center;
      a.button.outline {
        position: relative;
        @include transform(translateY(0));
      }
      padding-bottom: 20px;
    }
  }

  .recent-posts-container {
    @include grid();
  }

  &.layout-2,
  &.layout-4 {
    article {
      @include grid-item(6);

      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
      }
    }

  }
  &.layout-3,
  &.layout-6 {
    article {
      @include grid-item(4);

      @include mediaQuery($max, $tablet) {
        @include grid-item(6);

        &:nth-of-type(3n){
          display: none;
        }
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
        &:nth-of-type(3n){
          display: block;
        }
      }
    }
  }

  article {
    @extend %blog-article;
    margin-bottom: $verticalContainerPadding*0.5;
    &.align-center {
      text-align: center;
    }

    .article-image {
      margin: 0 0 4px 0 !important;
    }

    section {
      font-size: em(15px);
    }

    time {
      position: relative;
      top: -6px;
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }

    @include mediaQuery($max, $mobile) {
      @include grid-item(12);
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);

      &:last-of-type {
        padding-bottom: 0;
        border-bottom: 0;
      }
    }
  }
}

.blog-list,
.blog-permalink {
  article {
    @extend %blog-article;
    margin: 0 0 $verticalContainerPadding;
    max-width: 880px;

    &:last-of-type {
      border-bottom: 0;
      padding-bottom: 0;
    }

    header {
      &.centered {
        text-align: center;
      }
      margin-bottom: 20px;
    }

    a.button.outline {
      display: inline-block;
      @include buttonOutline;
      margin-top: 10px;
    }

    footer {
      .pagination {
        margin-top: 20px;
      }
    }
  }
}
.single-column {
  .blog-list,
  .blog-permalink {
    max-width: 880px;
    margin: 0 auto;
    &.grid-layout {
      padding-right: 30px;
    }
  }
}
.blog-list {
  article {
    padding-bottom: 40px;
    font-size: em(16px); 
  }

  // Two column layout
  &.grid-layout{
    @include grid();

    article {
      @include grid-item(12);

      &.grid-item {
        @include grid-item(6);

        @include mediaQuery($max, $mobile) {
          @include grid-item(12);
        }

        header {
          margin-bottom: 10px;
          h2 {
            font-size: emHeading(22px);
          }
        }
        section {
          font-size: em(16px);
        }
      }
    }
  }
}
 
// Extend Product Thumbnail
%blog-article {
  header {
    h1,
    h2 {
      font-size: emHeading(40px);
      margin-bottom: 0;
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
      a {
        color: $primaryTitleColor;
        &:hover,
        &:focus {
          color: $primaryHoverColor; 
        }
      }
      @include mediaQuery($max, $tablet) {
        font-size: emHeading(28px);
      }
      @include mediaQuery($max, $mobile) {
        font-size: emHeading(24px);
      }

    }
    h5 {
      font-size: emHeading(22px);
      text-transform: $primaryTitleTextTransform;
      font-weight: $primaryTitleTextWeight;
      margin-bottom: 0;
      text-transform: none;
      a {
        color: $primaryTextColor;
        &:hover {
          color: $primaryHoverColor;
        }
      }
    }
    p.byline {
      font-family: $navFontStack;
      //font-weight: $siteHeaderNavTextWeight;
      text-transform: $siteHeaderNavTextTransform;
      font-size: em(11px);
    }
  }

  .article-image {
    margin: 0 0 ($gutter/2) 0;
    img {
      display: block;
      margin: 0 auto;
    }
  }

  section {

    img {
      display: block;
      max-width: 100%;
      margin: 0 auto 26px;
      height: auto;
    }
    p {
      img {
        margin: 0 auto;
      }
    }
    p:last-of-type {
      margin-bottom: em(8px);
    }
    a.button.outline {
      margin-top: 0px;
    }
    .post-meta {
      margin-top: 20px;
      padding-top: 10px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
      display: table;
      width: 100%;

      a.comments {
        color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
        font-family: $navFontStack;
        //font-weight: $siteHeaderNavTextWeight;
        text-transform: $siteHeaderNavTextTransform;
        font-size: em(12px);
        text-decoration: none;
        min-width: 120px;
        display: table-cell;
        &:hover {
          color: $primaryHoverColor;
        }
      }
      ul.tags {
        text-align: right;
        display: table-cell;
        li {
          display: inline-block;
          color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
          font-family: $navFontStack;
          text-transform: $siteHeaderNavTextTransform;
          font-size: em(12px);

          &:last-child {
            a {
              margin-right: 8px;
            }
          }

          a {
            @include buttonOutline;
            padding: 4px 0;
            font-size: 0.875em;
            border: none;
            box-shadow: 8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%);
            background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%);
            margin-right: 8px;
            margin-left: 10px;
            &:hover {
              color: $primaryTextOnAccentColor;
              background-color: $primaryAccentColor;
              border-color: $primaryAccentColor;
              box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
            }
          }

        }
      }
    }
  }

  footer {
    margin-top: 40px;

    .comments-container {
      margin: 40px 0 0;
      padding: 40px;
      border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);

      @include mediaQuery($max, $mobile) {
        padding: 40px 0;
      }
      h3 {
        text-align: center;
        text-transform: $siteHeaderTitleTextTransform;
      }
      p.form-success {
        text-align: center;
        font-size: em(14px);
      }
      .comment {
        padding: 20px;
        background: $contentBoxBackgroundColor;
        
        font-size: em(14px);
        margin-bottom: 20px;

        p.author {
          margin-bottom: .5em;
          font-size: em(15px);
          span {
            font-weight: bold;
          }
          time {
            font-style: italic;
          }
        }
      }
      .pagination {
        margin-top: 0;
      }
    }
    .add-comment {
      padding: 0 40px;
      margin: 20px auto 0;
      max-width: 600px;
      h3 {
        text-align: center;
      }
      @include mediaQuery($max, $mobile) {
        padding: 0;
      }
    }
  }
}

/*============================================================================
  #RTE (rich text editor)
==============================================================================*/
.rte {
  h2 {
    // Full width images
    img {
      width: 100%;
      height: auto;
    }
  }
  ul {
    list-style-type: disc;
    margin: 0 0 1em 2em;
  }
  ol {
    list-style-type: decimal;
    margin: 0 0 1em 2em;
  }
  blockquote {
    margin: 1em 0 1em 2em;
    padding-left: 1em;
    border-left: 4px solid mix($primaryTitleColor, $primaryBackgroundColor, 50%);
    font-style: italic;
  }
  p.read-more {
    margin-top: 0.9375em;
  }
  &.centered {
    text-align: center;
  }

  @include word-wrap();

  .table-wrapper {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    border-collapse: separate;
    width: 100%;
    border-spacing: 1px;
    position: relative;
    border: 0 none;
    background: mix($primaryTitleColor, $primaryBackgroundColor, 20%);

    @include mediaQuery($max, $mobile) {
      font-size: em(14px);
      td, th {
        padding: 2px 4px;
      }
    }
  }

  .table-wrapper {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  td,
  th {
    border: 0 none;
    text-align: left;
    padding: 10px 14px;
    background: $primaryBackgroundColor;
  }

  th {
    font-weight: bold;
  }
}


/*============================================================================
  #Social Share
==============================================================================*/
ul.social-share {
  margin-top: 20px;
  @include clearfix();
  li {
    float: left;
    display: block;
    text-align: left;
    margin-right: 12px;
    &:last-child {
      margin-right: 0px;
    }
    &.facebook {
      .fb-like > span {
        vertical-align: 0px !important;
      }
    }
    &.pinterest {
      a,
      span {
        vertical-align: top;
      }
    }
  }
}
span[class*="_button_pin"][data-pin-x] {
    margin-right: 44px;
}

/*============================================================================
  #Content Util / Breadcrumbs
==============================================================================*/
// Breadcrumbs & social
header.content-util {
  margin-bottom: 0px;
  @include clearfix();
  nav.breadcrumb {
    float: left;
    font-size: em(11px);
    text-transform: $siteHeaderNavTextTransform;
    font-weight: $siteHeaderNavTextWeight;
    font-family: $navFontStack;
    > * {
      margin-right: 4px;
      line-height: 20px;
      &:last-child {
        margin-right: 0;
      }
    }
    a {
      text-decoration: none;
      color: $primaryTextColor;
      &:hover,
      &:focus {
        color: $primaryAccentColor;
      }
      &.current,
      &.current:hover,
      &.current:focus {
        color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
        cursor: default;
      }
    }
    span {
      color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
      cursor: default;
    }
  }
  ul.social-icons {
    float: right;
  }
  @include mediaQuery($max, $mobile) {
    text-align: center;
    nav.breadcrumb,
    ul.social-icons {
      float: none;
    }
    nav.breadcrumb {
      font-size: em(12px);
    }
    ul.social-icons {
      display: none;
    }

    &.content-util--desktop {
      display: none;
    }
  }


}

/*============================================================================
  #Forms
==============================================================================*/
.purchase-box {
  fieldset {
    legend {
      font-size: em(11px);
      color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
      text-transform: $siteHeaderNavTextTransform;
      font-weight: $siteHeaderNavTextWeight;
      margin-bottom: 4px;
      font-family: $navFontStack;
    }
  }
}

.selection-wrapper {
  label {
    font-size: 14px;
    color: #252222;
    text-transform: $siteHeaderNavTextTransform;
    font-weight: 400;
    margin-bottom: 4px;
    font-family: $navFontStack;

    .label-extra:before {
      content: '|';
      text-decoration: none;
      color: mix($primaryTextColor, $primaryBackgroundColor, 30%);
      margin-right: 4px;
    }
  }

  select {
    &.minimal-select {
      margin: 0;
      padding: 0;
      border: 0px;
      font-family: $navFontStack;
      font-size: em(12px);
      text-transform: $siteHeaderNavTextTransform;
      min-width: 48px;
      margin-left: 4px;
    }
    &.full-select {
      width: 100%;
      height: 30px;
      margin: 0;
      border: 0px;
      outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
      outline-offset: -2px;
      font-family: $navFontStack;
      font-size: em(12px);
      text-transform: $siteHeaderNavTextTransform;
    }
    &:focus {
      outline-color: $primaryAccentColor;
    }
  }

  .input-row {
    margin-bottom: 10px;
    label {
      display: block;
    }
    input,
    textarea {
      width: 100%;
      margin: 0;
      padding: 8px 8px;
      border: 0px;
      outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
      outline-offset: -2px;
      font-family: $navFontStack;
      font-size: em(12px);
      background-color: transparent;
      &:focus {
        outline-color: $primaryAccentColor;
      }
    }
    input {
      //height: 30px;
    }
    textarea {
      min-height: 120px;
    }
  }

  .input-col {
    @include grid-item(6);
  }
  h2 {
    text-align: center;
    margin-bottom: 0;
  }
  div.errors {
    text-align: center;
    font-size: em(14px);
    font-weight: bold;
    margin-bottom: 10px;
    color: red;
    ul {
      list-style-type: none;
    }
  }
  input.required,
  select.required {
    outline: 2px solid red;
  }
  p {
    text-align: center;
    font-size: em(14px);
    margin-top: 10px;
    &.submit {
      margin-top: 24px;

      color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
    }
  }

  button.button,
  input.button {
    width: 100%;
    padding: 8px 8px;
    background: $primaryAccentColor;
    color: $primaryTextOnAccentColor;
    border: 0;
    text-transform: $siteHeaderNavTextTransform;
    font-weight: $siteHeaderNavTextWeight;
    width: 100%;
    &:hover,
    &:focus,
    &.added {
      background: $primaryHoverColor;
    }
    &.disabled {
      background: mix($primaryTextColor, $primaryBackgroundColor, 50%);
    }
  }
  input.cancel {
    border: 0;
    font-size: em(14px);
  }
  input.cancel,
  a.cancel,
  #customer_register_link {
    margin-top: 10px;
    display: inline-block;
    text-decoration: none;
    font-style: italic;
    text-align: center;
    color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
  }

}
select {
  &.minimal-select {
    margin: 0;
    padding: 0;
    border: 0px;
    font-family: $navFontStack;
    font-size: em(12px);
    text-transform: $siteHeaderNavTextTransform;
    min-width: 48px;
    margin-left: 4px;
  }
  &.full-select {
    width: 100%;
    height: 30px;
    margin: 0;
    border: 0px;
    outline: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
    outline-offset: -2px;
    font-family: $navFontStack;
    font-size: em(12px);
    text-transform: $siteHeaderNavTextTransform;
  }
}
.quantity-select {
  position: relative;
  max-width: 140px;
  width: 100%;
  @include display-flexbox();
  @include justify-content(left);
  @include align-items(flex-end);
  @include flex-direction(row);

  .input-wrapper {
    @include flex(1 1 auto);
    @include display-flexbox();
    width: auto;
    @include justify-content(center);
    input {
      width: calc(100% - 16px);
    }
  }
  .button-wrapper {
    @include flex(1 0 30px);
    button {
      width: 100%;
    }
  }

  input {
    text-align: center;
  }
  button,
  input {
    @include box-sizing(border-box);
    height: 30px;
    border: 0px;
    border: 2px solid mix($primaryTextColor, $primaryBackgroundColor, 40%);
    font-family: $navFontStack;
    font-size: em(12px);
    text-transform: $siteHeaderNavTextTransform;
    background: transparent;
    &:focus {
      outline-color: $primaryAccentColor;
    }
  }
}
input {
  background: transparent;
}

/*============================================================================
  #Cart Buttons
==============================================================================*/
.cart-buttons {
  @include display-flexbox();
  @include align-items(stretch);
  @include flex-direction(row);
  @include flex-wrap(wrap);
  @include justify-content(space-between);
  margin-top: 20px;
  width: auto;
  margin-left: -10px;

  @include mediaQuery(null, 801px, 1180px) {
    @include flex-direction(column);
  }
  @include mediaQuery($max, $mobile) {
    @include flex-direction(column);
  }
}
.cart_buttons__margin {
  margin-top: 20px;
}
.default-cart-button,
.payment-button__container {
  @include flex(auto);
  min-width: 222px;
  padding-left: 10px;
}
.payment-button__container {
  display: none;
  .cart-buttons__enabled & {
    display: block;
  }
}
.default-cart-button__button,
.shopify-payment-button__button {
  width: 100%;
  min-height: 46px;
  border-radius: 0;
  font-family: $navFontStack;
  font-size: em(14px);
  text-transform: $siteHeaderNavTextTransform;
  font-weight: $siteHeaderNavTextWeight;
}

html.no-js {
  .default-cart-button {
    @include flex(1 1 auto);
    width: 100%;
  }
  .shopify-payment-button {
    display: none;
  }
}

.default-cart-button__button,
html.no-js .default-cart-button__button {
  background-color: $primaryAccentColor;
  color: $primaryTextOnAccentColor;
  border: 0px;
  margin-bottom: 8px;
  &:hover,
  &:focus,
  &.added {
    background-color: $primaryHoverColor;
    color: $primaryTextOnAccentColor;
  }
  &.disabled {
    background-color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
  }
}
.cart-buttons__enabled {
  .default-cart-button__button {
    background-color: transparent;
    border: 2px solid $primaryAccentColor;
    color: $primaryAccentColor;
    &:hover,
    &:focus,
    &.added {
      background-color: transparent;
      border-color: $primaryHoverColor;
      color: $primaryHoverColor;
    }
    &.disabled {
      border-color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
      color: mix($primaryTextColor, $primaryBackgroundColor, 50%);
    }
  }
}

// Specific buttons
.shopify-payment-button {
  .shopify-payment-button__button--unbranded {
    padding: 0 6px;
    min-height: 46px;
    border-radius: 0;
    font-family: $navFontStack;
    font-size: em(14px);
    text-transform: $siteHeaderNavTextTransform;
    font-weight: $siteHeaderNavTextWeight;
    color: $primaryTextOnAccentColor;
    background-color: $primaryAccentColor;
    &:hover,
    &:hover:not([disabled]) {
      background-color: $primaryHoverColor;
    }
  }
  .shopify-payment-button__more-options {
    margin-top: 16px;
    font-size: em(13px);
    font-family: $navFontStack;
  }
  .shopify-payment-button__more-options[aria-hidden="true"] {
      display: none;
  }
}


/*============================================================================
  #Site Footer
==============================================================================*/
footer.site-footer {
  padding: $verticalContainerPadding 40px;
  color: $footerTextColor;
  background-color: $footerBackgroundColor;
  text-align: $footerTextAlignment;

  @include mediaQuery($max, $tablet) {
    padding: 40px 20px;
  }

  .wrapper {
    @if $footerFullWidth {
      @include outer-container();
    } @else {
      @include outer-container($siteWidth);
    }
    padding-top: 20px;
  }

  .grid {
    @include grid();
    //padding-bottom: 20px;
  }

  .box {
    @include mediaQuery($max, "940px") {
      &.box-first {
        > *:last-child {
          border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%);
          padding-bottom: 20px;
        }
      }
      margin: 10px 0;
    }
    @include mediaQuery($max, $mobile) {
      &.box-last {
        margin-bottom: 0px;
        > *:first-child,
        > *:last-child {
          border-top: 0px;
          border-bottom: 0px;
          padding-top: 0px;
          padding-bottom: 0px;
        }
      }
      > *:last-child {
        border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%);
        padding-bottom: 20px;
      }
    }

    &.layout-1 {
      @include grid-item(12);
      > *:first-child,
      > *:last-child {
        border-top: 0px;
        border-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
      }
    }
    &.layout-2 {
      @include grid-item(6);
      @include mediaQuery($max, "940px") {
        &.box-first {
          > *:last-child {
            border-bottom: 0px;
            padding-bottom: 0px;
          }
        }
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
        &.box-first {
          > *:last-child {
            border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%);
            padding-bottom: 20px;
          }
        }
      }
    }
    &.layout-3 {
      @include grid-item(4);
      @include mediaQuery($max, "940px") {
        &.box-first {
          @include grid-item(12);
        }
        @include grid-item(6);
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
      }
    }
    &.layout-4 {
      @include grid-item(3);
      @include mediaQuery($max, "940px") {
        &.box-first {
          @include grid-item(12);
        }
        &.box-last {
          @include grid-item(12);
          > *:first-child {
            border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%);
            padding-top: 20px;
          }
        }
        @include grid-item(6);
      }
      @include mediaQuery($max, $mobile) {
        @include grid-item(12);
        &.box-last {
          > *:first-child,
          > *:last-child {
            border-top: 0px;
            border-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
          }
        }
      }
    }

    &.payment-types,
    &.localization,
    &.trust-badge {
      @include grid-item(12);
      padding-top: 20px;
      @include mediaQuery($max, "940px"){
        border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 30%);
      }
      p {
        color: $footerTextColor;
        font-family: $navFontStack;
        font-size: em(14px);
        margin-bottom: 6px;
      }
    }
    &.localization {
      padding-top: 40px;
    }
    &.payment-types {
      ul.payment-types__list li {
        display: inline-block;
        padding: 0 2px;
      }
      img {
        max-width: 100%;
        width: 40px;
        height: auto;
        display: block;
      }
      svg {
        width: 38px;
        height: 24px;
        display: block;
      }
    }
  }
  

  h4 {
    font-size: emHeading(20px);
    text-transform: $primaryTitleTextTransform;
    color: $footerTitleTextColor;
    font-weight: $headerFontWeight;
  }
  p {
    font-size: em(14px);
    &.copyright {

      margin-top: em(16px);
      text-align: center;
      a {
        text-decoration: none;
      }
    }
  }
  a {
    color: $footerNavTextColor;
    &:hover,
    &:focus {
      opacity: 0.8;
    }
    &:focus {
      outline-color: $footerNavTextColor;
    }
  }
  input,
  button {
    &:focus {
      outline-color: $footerNavTextColor;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    li {
      line-height: 1.4;
      a {
        color: $footerNavTextColor;
        font-family: $navFontStack;
        text-decoration: none;
        font-size: em(14px);
        &:hover,
        &:focus {
          opacity: 0.8;
        }
      }
    }

    &.social-icons {
      li {
        display: inline-block;
        margin-right: 12px;
        &:last-child {
          margin-right: 0;
        }
        a {
          display: block;
          position: relative;
          width: 24px;
          height: 24px;
          
          svg {
            height: 100%;
            width: 100%;
            path {
              fill: $footerTitleTextColor;
            }
          }

          &:hover,
          &:focus {
            svg {
              path {
                fill: $footerNavTextColor;
              }
            }
          }
        }

      }
    }
  }

  ul.nested-menu {
    li.has-dropdown,
    li.has-sub-dropdown {
      > a:after {
        background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-footer-dropdown.svg?v=93841928507562215471627377078');
      }
    }
  }

  ul.dropdown,
  ul.sub-dropdown {
    a {
      color: $footerTextColor;
      padding: 0;
    }
  }

  .selectors-form__item {
    display: inline-block;
    margin: 0 6px 10px;

    button {
      border: 2px solid mix($footerTitleTextColor, $footerBackgroundColor, 60%);
      font-family: $navFontStack;
      background-color: inherit;
      color: $footerNavTextColor;
      background-color: transparent;
      font-size: 0.85em;
      padding: 2px 30px 2px 10px;
      background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-footer-dropdown.svg?v=93841928507562215471627377078');
      &:hover,
      &:focus {
        border: 2px solid $footerTitleTextColor;
        outline: 0px;
      }
    }
  }
  .disclosure-list {
    bottom: 110%;
    border-left: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 20%);
    border-right: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 20%);
    border-bottom: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 20%);
    border-top: 1px solid mix($footerTitleTextColor, $footerBackgroundColor, 20%);
    background: lighten($footerBackgroundColor, 3%);
    color: $footerTitleTextColor;
  }
  .disclosure-list__item {
    padding-left: 10px;
  }
  .disclosure-list__item--current .disclosure-list__option {
    border-bottom-color: $footerTitleTextColor;
  }
  a.disclosure-list__option {
    &:hover,
    &:focus {
      border-bottom-color: $footerTitleTextColor;
      color: $footerTitleTextColor;
    }
  }

  form.contact-form {
    margin: 0 auto;
    max-width: 400px;
    display: table;
    width: 100%;
    border-collapse: collapse;
    height: 44px;

    .input-row {
      margin-bottom: 6px;
    }

    .input-wrapper {
      display: table-cell;
      width: 100%;
      input {
        width: 100%;
      }
    }
    .button-wrapper {
      display: table-cell;
      width: 1%;
      vertical-align: middle;
    }
    div.errors {
      font-size: em(14px);
      margin-bottom: 10px;
      color: $footerTitleTextColor;
      font-style: italic;
    }

    input {
      border: 2px solid $footerNavTextColor;
      padding: 8px 8px;
      font-size: em(11px);
      color: $footerNavTextColor;
      background-color: transparent;
      height: 44px;
      @include placeholder {
        color: $footerTextColor;
      }
    }
    button {
      padding: 10px;
      background-color: $footerNavTextColor;
      border: 2px solid $footerNavTextColor;
      color: $footerBackgroundColor;
      font-size: em(11px);
      text-transform: $siteHeaderNavTextTransform;
      font-family: $navFontStack;
      border: 0;
      display: inline-block;
      margin-left: 6px;
      height: 44px;
      @include no-word-wrap();
      &:hover,
      &:focus {
        opacity: 0.8;
      }
    }
  }

  
}

/*============================================================================
  #Password Layout
==============================================================================*/
html.template-password {
  position: relative;
  text-align: center;
  height: 100%;

  body {
    border: 0;
    padding: 0;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .password-section,
  section.password,
  .password-contain {
    display: table;
    height: 100%;
    width: 100%;
  }

  header.site-header {
    display: table-row;
    height: 1%;
    padding: 0;
    background-color: transparent;

    .wrapper {
      padding: 0;
    }

    h1.site-logo,
    h1.site-logo.has-image {
      padding: 80px 0 0;
    }
  }

  main.main-content {
    display: table-row;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    .contain {
      display: table-cell;
      vertical-align: middle;
      padding: 20px $gutter/2;
    }

    .coming-soon,
    .subscribe,
    .share {
      margin: $gutter auto;
      max-width: 600px;
    }

    h2 {
      font-size: emHeading(28px);
      margin-bottom: 4px;
      text-transform: $primaryTitleTextTransform;
    }
    p {}

    .subscribe {
      p {
        margin-bottom: 6px;
        &.thanks-message {
          display: none;
        }
      }

    }
    .share {
      padding-top: 10px;
      p {
        margin-bottom: 12px;
        line-height: 1;
        font-size: em(11px);
        text-transform: $siteHeaderTitleTextTransform;
        font-family: $navFontStack;
      }
    }
    ul.social-share {
      margin-top: 8px;
      li,
      li:last-child {
        margin: 0px;
        > * {
          margin: 0 6px;
        }
        #___plusone_0 {
          margin: 0 6px !important;
        }
      }
    }
  }

  ul.social-share {
    text-align: center;
  }
  ul.social-share li {
    float: none;
    display: inline-block;
  }
  ul.social-share li.pinterest span {
    vertical-align: super !important;
  }

  form {
    margin: 0 auto;
    max-width: 400px;
    display: table;
    width: 100%;
    border-collapse: collapse;
    height: 44px;

    .input-wrapper {
      display: table-cell;
      width: 100%;
      input {
        width: 100%;
      }
    }
    .button-wrapper {
      display: table-cell;
      width: 1%;
      vertical-align: middle;
    }
  }

  input,
  button {
    &:focus {
      outline: 0;
    }
  }

  input {
    border-width: 2px;
    border-style: solid;
    padding: 8px 8px;
    font-size: em(11px);
    font-weight: 600;
    height: 44px;
  }
  button,
  input.btn {
    padding: 10px;
    font-size: em(11px);
    text-transform: $siteHeaderNavTextTransform;
    font-family: $navFontStack;
    border: 0;
    display: inline-block;
    margin-left: 6px;
    height: 44px;
    font-weight: 400;
    @include no-word-wrap();
  }

  footer.password-footer {
    display: table-row;
    height: 1%;

    .contain {
      display: table-cell;
      vertical-align: bottom;
      padding: 20px $gutter/2;
    }
    p {
      margin: 0;
      font-size: em(14px);
    }
  }

  section.site-login {
    > a {
      position: absolute;
      top: $gutter/2;
      right: $gutter/2;
    }
    #LoginModal {
      display: none;
    }
  }

  .errors {
    margin-bottom: 12px;
    line-height: 1;
    font-size: em(11px);
    text-transform: $siteHeaderTitleTextTransform;
    font-family: $navFontStack;
  }


  /* overlay at start */
  .mfp-fade.mfp-bg {
    opacity: 0;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
  }
  /* overlay animate in */
  .mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.9;
  }
  /* overlay animate out */
  .mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
  }

  /* content at start */
  .mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
  }
  /* content animate it */
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
  }
  /* content animate out */
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
  }

  /* close button */
  button.mfp-close {
    background-color: transparent;
    font-size: 40px;
    opacity: 1;
    margin: 0;
    padding: 0;
    top: $gutter/2;
    right: $gutter/2;
  }

  .white-popup {
    position: relative;
    padding: 40px 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;

    text-align: center;

    h3 {
      text-transform: $primaryTitleTextTransform;
    }
    p {
      margin: 14px 0 0 0;
      font-size: 14px;
    }
  }


}



/*============================================================================
  #Conditional Old IE Fixes
==============================================================================*/
// Below IE9
html.lt-ie9 {
  // @media \0screen {img { width: auto }}
  .featured-collection .box.header .details {
    position: static;
    top: auto;
    @include transform(translateY(0));
  }
  .featured-collection .box.header {
    height: auto !important;
  }
  .collection aside nav.tags ul {
    padding-left: 0px;
  }
  .collection aside nav.tags li a,
  .blog-list article section .post-meta ul.tags li a,
  .blog-permalink article section .post-meta ul.tags li a {
    padding: 4px 8px;
    margin-right: 0;
  }
  .blog-list article section .post-meta ul.tags li.label,
  .blog-permalink article section .post-meta ul.tags li.label {
    margin-right: 4px;
  }
  footer.site-footer .box.payment-types {
    display: none;
  }
}

// Below IE10
html.lt-ie9,
html.ie9 {
  select {
    background-image: none;
    padding: 0;
  }

  &.template-password {
    height: auto;
    body {
      height: auto;
      text-align: center;

      .password-contain {
        display: block;
        height: auto;
        width: 800px;
        margin: 0 auto !important;
      }

      .input-row {
        display: table;
        .button-wrapper {
          width: 100% !important;
        }
      }
      .share {
        text-align: center !important;
      }
    }
  }
}
// IE10 and below
html.lt-ie9,
html.ie9,
html[data-useragent*='MSIE 10.0'],
html[data-useragent*='Windows 11.0'] {

}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #menu.panel {
    position: absolute !important;
  }
}

// No JS
html.no-js {
  .quantity-select button.adjust {
    display: none;
  }
  .purchase-box .selection-wrapper .variant-grid #productSelect {
    visibility: visible;
  }
  header.util .currency-picker-contain {
    display: none;
  }
  .slideshow-section {
    .cell-content {
      visibility: visible !important;
    }
  }
  .slideshow-carousel,
  .slideshow-section {
    opacity: 1;
  }
  .flickity-page-dots.placeholder {
    display: none;
  }
  ul.site-nav {
    li.has-dropdown:hover {
      ul.dropdown {
        display: block !important;
      }
    }
  }
  .selection-wrapper.no-js {
    display: block !important;
  }
  .selection-wrapper.js {
    display: none !important;
  }
  .lazyload {
    display: none;
  }

  .product-thumb--slider {
    display: none;
  }
  .product-image--cell {
    display: block;
    margin-bottom: 10px;
  }
  .images-container {
    .featured {
      width: 100%;
    }
    .thumbnails {
      display: none;
    }
  }
}

body .helper-section {
  &:hover,
  &:focus {
    .box {
      opacity: 0.5;
    }
  }
}



/*============================================================================
  // Vendors
==============================================================================*/

.scroll-to-sticky {
  position: -webkit-sticky !important;
  position: -moz-sticky !important;
  position: -ms-sticky !important;
  position: -o-sticky !important;
  position: sticky !important;

  &.util-panel-open {
    position: fixed !important;
  }
}


/*============================================================================
  #Panel Menu
==============================================================================*/

#menu.panel {
  display: none;
  position: fixed;
  z-index: 1100;
  left: -240px; /*left or right and the width of your navigation panel*/
  width: 240px; /*should match the above value*/
  padding: 0;
  font-size: em(14px);
  background: $siteBorderColor;
  color: $siteBorderTextColor;
  font-family: $navFontStack;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
  top: 0px;
  bottom: 0px;

  a {
    color: $siteBorderTextColor;
    text-decoration: none;
    &:focus {
      outline-color: $footerNavTextColor;
    }
    &:hover {
      color: $primaryAccentColor;
      background-color: $primaryBackgroundColor;
    }
  }

  ul.site-nav {
    li {
      margin: 0;
      border-bottom: 1px solid mix($siteBorderTextColor, $siteBorderColor, 20%);
      &.has-dropdown {
        > a {
          padding-right: 20px;
          position: relative;
        }
        > a:after {
          content: '';
          opacity: 0.4;
          display: inline-block;
          height: 5px;
          width: 8px;
          position: absolute;
          top: 50%;
          right: 10px;
          margin-top: -2px;

          background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-select-util.svg?v=100913167938336013611627377078');
          background-position: center;
          background-repeat: no-repeat;
          //
        }
        > a:hover:after {
          background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');
        }

        &.expanded {
          > a:after {
            @include transform(scaleY(-1));
          }
        }
      }
      &.has-sub-dropdown {
        > a {
          padding-right: 20px;
          position: relative;
          outline: 0px;
        }
        > a:after {
          content: '';
          opacity: 0.2;
          display: inline-block;
          height: 5px;
          width: 8px;
          position: absolute;
          top: 50%;
          right: 10px;
          margin-top: -2px;

          background-image: url('//prohockeydirect.com/cdn/shop/t/2/assets/ico-dropdown.svg?v=145142949295650484321627377078');
          background-position: center;
          background-repeat: no-repeat;
        }

        &.expanded {
          > a:after {
            @include transform(scaleY(-1));
          }
        }
      }
      a {
        display: block;
        padding: 6px 10px;
      }

      &.active > a {
        font-weight: 600;
      }
    }

    ul.dropdown {
      display: none;
      background-color: $contentBoxBackgroundColor;
      color: $primaryTextColor;
      a {
        color: $primaryTextColor;
        &:focus {
          outline-color: $footerNavTextColor;
        }
        &:hover {
          color: $primaryAccentColor;
          background-color: $primaryBackgroundColor;
        }
      }
      li {
        font-size: em(14px);
        border-bottom: 0px;
        a {
          padding: 6px 10px 6px 24px;
        }
      }
    }
    ul.sub-dropdown {
      display: none;
      background-color: $contentBoxBackgroundColor;
      color: $primaryTextColor;
      a {
        color: $primaryTextColor;
        &:focus {
          outline-color: $footerNavTextColor;
        }
        &:hover {
          color: $primaryAccentColor;
          background-color: $primaryBackgroundColor;
        }
      }
      li {
        a {
          padding: 6px 10px 6px 28px;
        }
      }
    }
  }
  .search {
    padding: 8px 16px 8px 10px;
    background-color: $contentBoxBackgroundColor;

    form {
      display: table;
      width: 100%;
      border-collapse: collapse;
    }
    .icon-wrapper {
      width: 20px;
      display: table-cell;
      padding-right: 6px;
      vertical-align: top;
      color: mix($primaryTextColor, $contentBoxBackgroundColor, 80%);
    }
    .input-wrapper {
      display: table-cell;
      width: 100%;
      input {
        border: 0px;
        width: 100%;
        padding: 0px 4px;
        color: $primaryTextColor;
        font-size: em(15px);
        @include placeholder {
          color: mix($primaryTextColor, $contentBoxBackgroundColor, 50%);
        }
        &:focus {
          border: 0px;
          outline: none;
        }
      }
    }
    .button-wrapper {
      display: none;
    }
  }
  .account {
    padding: 10px 0;
    li {
      display: block;
      margin: 0;
      font-size: em(14px);
      a {
        display: block;
        padding: 6px 10px;
      }
    }
  }
}

// Animation presets
#menu.panel,
#page,
.mobile-menu-overlay,
header.util,
header.promo-bar {
  -webkit-transition: -webkit-transform .4s cubic-bezier(.16, .68, .43, .99);
  -moz-transition: -moz-transform .4s cubic-bezier(.16, .68, .43, .99);
  -o-transition: -o-transform .4s cubic-bezier(.16, .68, .43, .99);
  transition: transform .4s cubic-bezier(.16, .68, .43, .99);
  /* improves performance issues on mobile*/
  //-webkit-backface-visibility: hidden;
  //backface-visibility: hidden;
  //-webkit-perspective: 1000;
}


html.scroll-lock,
body.scroll-lock {
  overflow: hidden;
}
html.panel-open,
body.panel-open {
  height: 100%;
  overflow-x: hidden;

  #page {
    -webkit-transform: translateX(240px);
    -moz-transform: translateX(240px);
    -ms-transform: translateX(240px);
    -o-transform: translateX(240px);
    transform: translateX(240px);

    -webkit-transition: -webkit-transform .4s cubic-bezier(.16, .68, .43, .99);
    -moz-transition: -moz-transform .4s cubic-bezier(.16, .68, .43, .99);
    -o-transition: -o-transform .4s cubic-bezier(.16, .68, .43, .99);
    transition: transform .4s cubic-bezier(.16, .68, .43, .99);
    /* improves performance issues on mobile*/
    //-webkit-backface-visibility: hidden;
    //backface-visibility: hidden;
    //-webkit-perspective: 1000;
  }

  nav#menu {
    display: block;
  }

  .mobile-menu-overlay {
    display: block;
  }
}
html.panel-open-transition,
body.panel-open-transition {
  nav#menu {
    display: block;
  }
}
.mobile-menu-overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  display: none;
  opacity: 0.9;
}


.helper-note {
  z-index: 899 !important;
}

/*================ Modals ================*/
.modal {
  -ms-transform: translateY(-20px);
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  background-color: $primaryBackgroundColor;
  bottom: 0;
  color: $primaryTextColor;
  display: none;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0; }

.modal--is-active {
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  display: block;
  opacity: 1;
  overflow: hidden; }

.modal__inner {
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  height: 100%; }

.modal__centered {
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: relative;
  top: 50%; }

.modal__close {
  border: 0;
  padding: 55px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2; }
  .modal__close .icon {
    font-size: em(20px); }

/*============================================================================
  #Store Availability
==============================================================================*/
.product-single__store-availability-container {
  margin-top: $gutter * 0.5;
}
.store-availability-small-text {
  font-size: em(13px); }

.store-availability-information {
  display: flex;
  margin-left: 5px; }

.store-availability-information-container {
  margin-left: 5px; }

.store-availability-information__title {
  margin-bottom: 0; }

.store-availability-information__stock {
  margin-bottom: 0; }

.store-availability-information__stores {
  margin-top: 8px; }

.store-availability-information__link {
  text-decoration: underline;
  cursor: pointer;
}
.store-availability-information__link:hover, .store-availability-information__link:focus {
  color: $primaryHoverColor;
}

.store-availability-container .icon {
  width: 12px;
  height: 12px; }

.store-availability-container .icon-in-stock {
  path {
    fill: #00730B;
  }
  margin: 4px 0 0 0; }

.store-availability-container .icon-out-of-stock {
  path {
    fill: #DD2200;
  }
  margin: 6px 0 0 0; }

.store-availability-container .store-availability-list__stock .icon-in-stock {
  margin: 0 6px 0 0; }

.store-availability-container .store-availability-list__stock .icon-out-of-stock {
  margin: 0 6px 0 0; }

.store-availability-container .icon-close {
  width: 18px;
  height: 18px; }

.store-availabilities-modal {
  z-index: 1000;
  max-height: 100vh;
  width: 375px;
  left: auto;
  border: 1px solid #EBEBEB;
  box-sizing: border-box;
  box-shadow: -4px 4px 6px rgba(58, 58, 58, 0.04); }
  @media only screen and (max-width: 749px) {
    .store-availabilities-modal {
      width: 100%;
      z-index: 9999; } }

.store-availabilities-modal--active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(0);
  opacity: 1; }
  @media only screen and (max-width: 749px) {
    .store-availabilities-modal--active {
      height: 100%; } }

.store-availabilities-modal__header {
  display: flex;
  justify-content: space-between;
  margin: 20px 0 16px 0;
  padding-left: 20px;
  padding-right: 20px; }

.store-availabilities-modal__product-title {
  font-size: em(24px);
  text-transform: none;
  margin-bottom: 0; }

.store-availabilities-list {
  overflow: auto;
  padding: 0 10px; }

.store-availabilities-modal__close {
  border: none;
  margin-bottom: 13px; }

.store-availability-list__item {
  padding: 0 10px 16px 10px; }
  .store-availability-list__item::before {
    content: "";
    display: block;
    margin: 0 0 16px 0;
    border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 20%);
  }
.store-availability-list__item address {
  font-style: normal;
}

.store-availability-list__item > p {
  font-size: em(13px);
  margin-bottom: 0; }

.store-availability-list__location {
  display: flex;
  justify-content: space-between; }

.store-availability-list__stock {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 16px; }


/*============================================================================
  #Flickity
==============================================================================*/
/*! Flickity v2.1.2
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.flickity-enabled[data-slider-enabled="false"] {
  cursor: default;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: #333;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: calc(50% - 36px);
  width: 24px;
  height: 60px;
  background-color: rgba($primaryBackgroundColor, 0.75);

  /* vertically center */
  transform: translateY(calc(-50% + 36px));
  @include mediaQuery($max, $tablet) {
    display: none;
  }
  &:hover {
    background-color: $primaryBackgroundColor;
  }
}

.flickity-prev-next-button.previous { left: 0; }
.flickity-prev-next-button.next { right: 0; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 0;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 0;
}
.product-template .flickity-prev-next-button {
  z-index: 2;
  height: 100%;
  &.previous { left: -24px; }
  &.next { right: -24px; }
  &:hover {
    svg path {
      fill: $primaryAccentColor;
    }
  }
  &:disabled {
    opacity: 0;
  }
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: relative;
  width: 100%;
  list-style: none;
  text-align: center;
  padding: 10px 0;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 6px;
  background: mix($primaryTextColor, $primaryBackgroundColor, 40%);
  border-radius: 50%;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  background: $primaryAccentColor;
}

/* Flickity fullscreen v1.0.1
------------------------- */

.flickity-enabled.is-fullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: hsla(0, 0%, 0%, 0.9);
  padding-bottom: 35px;
  z-index: 9900;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
  bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
  background: rgba(white, 0.4);
  &.is-selected {
    background: white;
  }
}

/* prevent page scrolling when flickity is fullscreen */
html.is-flickity-fullscreen {
  overflow: hidden;
}

.flickity-enabled.is-fullscreen {
  .flickity-prev-next-button {
    width: 30px;
    background: transparent;
    svg path {
      fill: rgba(white, 0.4);
    }
    &:hover {
      svg path {
        fill: white;
      }
    }
    &.previous { left: 10px; }
    &.next { right: 10px; }
  }
}

/* ---- flickity-fullscreen-button ---- */

.flickity-fullscreen-button {
  display: block;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  opacity: 0.4;
  &:hover {
    opacity: 1;
    background: transparent;
  }
  z-index: 3;
}

/* right-to-left */
.flickity-rtl .flickity-fullscreen-button {
  right: auto;
  left: 10px;
}

.flickity-fullscreen-button-exit { display: none; }

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }
.flickity-enabled .flickity-fullscreen-button-view { display: none; }

.flickity-fullscreen-button .flickity-button-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
  fill: white;
}

/*============================================================================
  #EasyZoom
==============================================================================*/
/**
 * EasyZoom core styles
 */
.featured-zoom {
  position: relative;
  float: left;
  width: 100%;
}

.featured-zoom img {
  display: block;
}

.featured-zoom.is-loading img {
  cursor: progress;
}

.featured-zoom.is-ready img {
  cursor: crosshair;
  cursor: zoom-in;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}

.featured-zoom.is-error  img {
  cursor: not-allowed;
}

.easyzoom-notice {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 150;
  width: 10em;
  margin: -1em 0 0 -5em;
  line-height: 2em;
  text-align: center;
  background: #FFF;
  box-shadow: 0 0 10px #888;
  display: none;
}

.easyzoom-flyout {
  pointer-events:none;
  position:absolute;
  z-index: 100;
  overflow: hidden;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: $primaryBackgroundColor;

  img {
    margin: auto !important;
    max-width: none !important;
    height: auto !important;
    width: auto !important;
  }
  &.hidden {
    opacity: 0;
  }
}


/*============================================================================
  #Magnific
==============================================================================*/
/* Magnific Popup CSS */

////////////////////////
//      Settings      //
////////////////////////

// overlay
$mfp-overlay-color:                   #0b0b0b;                    // Color of overlay screen
$mfp-overlay-opacity:                 0.8;                        // Opacity of overlay screen
$mfp-shadow:                          0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe

// spacing
$mfp-popup-padding-left:              8px;                        // Padding from left and from right side
$mfp-popup-padding-left-mobile:       6px;                        // Same as above, but is applied when width of window is less than 800px

$mfp-z-index-base:                    1040;                        // Base z-index of popup

// controls
$mfp-include-arrows:                  true;                       // Include styles for nav arrows
$mfp-controls-opacity:                0.65;                       // Opacity of controls
$mfp-controls-color:                  #FFF;                       // Color of controls
$mfp-controls-border-color:           #3F3F3F;                    // Border color of controls
$mfp-inner-close-icon-color:          #333;                       // Color of close button when inside
$mfp-controls-text-color:             #CCC;                       // Color of preloader and "1 of X" indicator
$mfp-controls-text-color-hover:       #FFF;                       // Hover color of preloader and "1 of X" indicator
$mfp-IE7support:                      true;                       // Very basic IE7 support

// Iframe-type options
$mfp-include-iframe-type:             true;                       // Enable Iframe-type popups
$mfp-iframe-padding-top:              40px;                       // Iframe padding top
$mfp-iframe-background:               #000;                       // Background color of iframes
$mfp-iframe-max-width:                900px;                      // Maximum width of iframes
$mfp-iframe-ratio:                    9/16;                       // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)

// Image-type options
$mfp-include-image-type:              true;                       // Enable Image-type popups
$mfp-image-background:                #444 !default;
$mfp-image-padding-top:               40px;                       // Image padding top
$mfp-image-padding-bottom:            40px;                       // Image padding bottom
$mfp-include-mobile-layout-for-image: true;                       // Removes paddings from top and bottom

// Image caption options
$mfp-caption-title-color:             #F3F3F3;                    // Caption title color
$mfp-caption-subtitle-color:          #BDBDBD;                    // Caption subtitle color

// A11y
$mfp-use-visuallyhidden:              false;

////////////////////////
//
// Contents:
//
// 1. Default Settings
// 2. General styles
//    - Transluscent overlay
//    - Containers, wrappers
//    - Cursors
//    - Helper classes
// 3. Appearance
//    - Preloader & text that displays error messages
//    - CSS reset for buttons
//    - Close icon
//    - "1 of X" counter
//    - Navigation (left/right) arrows
//    - Iframe content type styles
//    - Image content type styles
//    - Media query where size of arrows is reduced
//    - IE7 support
//
////////////////////////



////////////////////////
// 1. Default Settings
////////////////////////

$mfp-overlay-color:                   #0b0b0b !default;
$mfp-overlay-opacity:                 0.8 !default;
$mfp-shadow:                          0 0 8px rgba(0, 0, 0, 0.6) !default; // shadow on image or iframe
$mfp-popup-padding-left:              8px !default; // Padding from left and from right side
$mfp-popup-padding-left-mobile:       6px !default; // Same as above, but is applied when width of window is less than 800px

$mfp-z-index-base:                    1040 !default; // Base z-index of popup
$mfp-include-arrows:                  true !default; // include styles for nav arrows
$mfp-controls-opacity:                0.65 !default;
$mfp-controls-color:                  #FFF !default;
$mfp-controls-border-color:           #3F3F3F !default;
$mfp-inner-close-icon-color:          #333 !default;
$mfp-controls-text-color:             #CCC !default; // Color of preloader and "1 of X" indicator
$mfp-controls-text-color-hover:       #FFF !default;
$mfp-IE7support:                      true !default; // Very basic IE7 support

// Iframe-type options
$mfp-include-iframe-type:             true !default;
$mfp-iframe-padding-top:              40px !default;
$mfp-iframe-background:               #000 !default;
$mfp-iframe-max-width:                900px !default;
$mfp-iframe-ratio:                    9/16 !default;

// Image-type options
$mfp-include-image-type:              true !default;
$mfp-image-background:                #444 !default;
$mfp-image-padding-top:               40px !default;
$mfp-image-padding-bottom:            40px !default;
$mfp-include-mobile-layout-for-image: true !default; // Removes paddings from top and bottom

// Image caption options
$mfp-caption-title-color:             #F3F3F3 !default;
$mfp-caption-subtitle-color:          #BDBDBD !default;

// A11y
$mfp-use-visuallyhidden:              false !default; // Hide content from browsers, but make it available for screen readers



////////////////////////
// 2. General styles
////////////////////////

// Transluscent overlay
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $mfp-z-index-base + 2;
  overflow: hidden;
  position: fixed;

  background: $mfp-overlay-color;
  opacity: $mfp-overlay-opacity;
  @if $mfp-IE7support {
    filter: unquote("alpha(opacity=#{$mfp-overlay-opacity*100})");
  }
}

// Wrapper for popup
.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $mfp-z-index-base + 3;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
  backface-visibility: hidden;
}

// Root container
.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 $mfp-popup-padding-left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// Vertical centerer helper
.mfp-container {
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

// Remove vertical centering when popup has class `mfp-align-top`
.mfp-align-top {
  .mfp-container {
    &:before {
      display: none;
    }
  }
}

// Popup content holder
.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: $mfp-z-index-base + 5;
}
.mfp-inline-holder,
.mfp-ajax-holder {
  .mfp-content {
    width: 100%;
    cursor: auto;
  }
}

// Cursors
.mfp-ajax-cur {
  cursor: progress;
}
.mfp-zoom-out-cur {
  &, .mfp-image-holder .mfp-close {
    cursor: -moz-zoom-out;
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
  }
}
.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.mfp-auto-cursor {
  .mfp-content {
    cursor: auto;
  }
}

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select:none;
  -moz-user-select: none;
  user-select: none;
}

// Hide the image during the loading
.mfp-loading {
  &.mfp-figure {
    display: none;
  }
}

// Helper class that hides stuff
@if $mfp-use-visuallyhidden {
  // From HTML5 Boilerplate https://github.com/h5bp/html5-boilerplate/blob/v4.2.0/doc/css.md#visuallyhidden
  .mfp-hide {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }
} @else {
  .mfp-hide {
    display: none !important;
  }
}


////////////////////////
// 3. Appearance
////////////////////////

// Preloader and text that displays error messages
.mfp-preloader {
  color: $mfp-controls-text-color;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: $mfp-z-index-base + 4;
  a {
    color: $mfp-controls-text-color;
    &:hover {
      color: $mfp-controls-text-color-hover;
    }
  }
}

// Hide preloader when content successfully loaded
.mfp-s-ready {
  .mfp-preloader {
    display: none;
  }
}

// Hide content when it was not loaded
.mfp-s-error {
  .mfp-content {
    display: none;
  }
}

// CSS-reset for buttons
button {
  &.mfp-close,
  &.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: $mfp-z-index-base + 6;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  &::-moz-focus-inner {
      padding: 0;
      border: 0
  }
}


// Close icon
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;

  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: $mfp-controls-opacity;
  @if $mfp-IE7support {
    filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})");
  }
  padding: 0 0 18px 10px;
  color: $mfp-controls-color;

  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;

  &:hover,
  &:focus {
    opacity: 1;
    @if $mfp-IE7support {
      filter: unquote("alpha(opacity=#{1*100})");
    }
  }
  &:focus {
    outline: 5px auto $primaryAccentColor;      
  }

  &:active {
    top: 1px;
  }
}
.mfp-close-btn-in {
  .mfp-close {
    color: $mfp-inner-close-icon-color;
  }
}
.mfp-image-holder,
.mfp-iframe-holder {
  .mfp-close {
    color: $mfp-controls-color;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
  }
}

// "1 of X" counter
.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: $mfp-controls-text-color;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

// Navigation arrows
@if $mfp-include-arrows {
  .mfp-arrow {
    position: absolute;
    opacity: $mfp-controls-opacity;
    @if $mfp-IE7support {
      filter: unquote("alpha(opacity=#{$mfp-controls-opacity*100})");
    }
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    &:active {
      margin-top: -54px;
    }
    &:hover,
    &:focus {
      opacity: 1;
      @if $mfp-IE7support {
        filter: unquote("alpha(opacity=#{1*100})");
      }
    }
    &:before,
    &:after,
    .mfp-b,
    .mfp-a {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
      margin-top: 35px;
      margin-left: 35px;
      border: medium inset transparent;
    }

    &:after,
    .mfp-a {

      border-top-width: 13px;
      border-bottom-width: 13px;
      top:8px;
    }

    &:before,
    .mfp-b {
      border-top-width: 21px;
      border-bottom-width: 21px;
      opacity: 0.7;
    }

  }

  .mfp-arrow-left {
    left: 0;

    &:after,
    .mfp-a {
      border-right: 17px solid $mfp-controls-color;
      margin-left: 31px;
    }
    &:before,
    .mfp-b {
      margin-left: 25px;
      border-right: 27px solid $mfp-controls-border-color;
    }
  }

  .mfp-arrow-right {
    right: 0;
    &:after,
    .mfp-a {
      border-left: 17px solid $mfp-controls-color;
      margin-left: 39px
    }
    &:before,
    .mfp-b {
      border-left: 27px solid $mfp-controls-border-color;
    }
  }
}



// Iframe content type
@if $mfp-include-iframe-type {
  .mfp-iframe-holder {
    padding-top: $mfp-iframe-padding-top;
    padding-bottom: $mfp-iframe-padding-top;
    .mfp-content {
      line-height: 0;
      width: 100%;
      max-width: $mfp-iframe-max-width;
    }
    .mfp-close {
      top: -40px;
    }
  }
  .mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: $mfp-iframe-ratio * 100%;
    iframe {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: $mfp-shadow;
      background: $mfp-iframe-background;
    }
  }
}



// Image content type
@if $mfp-include-image-type {

  /* Main image in popup */
  img {
    &.mfp-img {
      width: auto;
      max-width: 100%;
      height: auto;
      display: block;
      line-height: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: $mfp-image-padding-top 0 $mfp-image-padding-bottom;
      margin: 0 auto;
    }
  }

  /* The shadow behind the image */
  .mfp-figure {
    line-height: 0;
    &:after {
      content: '';
      position: absolute;
      left: 0;
      top: $mfp-image-padding-top;
      bottom: $mfp-image-padding-bottom;
      display: block;
      right: 0;
      width: auto;
      height: auto;
      z-index: -1;
      box-shadow: $mfp-shadow;
      background: $mfp-image-background;
    }
    small {
      color: $mfp-caption-subtitle-color;
      display: block;
      font-size: 12px;
      line-height: 14px;
    }
    figure {
      margin: 0;
    }
  }
  .mfp-bottom-bar {
    margin-top: -$mfp-image-padding-bottom + 4;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto;
  }
  .mfp-title {
    text-align: left;
    line-height: 18px;
    color: $mfp-caption-title-color;
    word-wrap: break-word;
    padding-right: 36px; // leave some space for counter at right side
  }

  .mfp-image-holder {
    .mfp-content {
      max-width: 100%;
    }
  }

  .mfp-gallery {
    .mfp-image-holder {
      .mfp-figure {
        cursor: pointer;
      }
    }
  }


  @if $mfp-include-mobile-layout-for-image {
    @media screen and (max-width: 800px) and (orientation:landscape), screen and (max-height: 300px) {
      /**
       * Remove all paddings around the image on small screen
       */
      .mfp-img-mobile {
        .mfp-image-holder {
          padding-left: 0;
          padding-right: 0;
        }
        img {
          &.mfp-img {
            padding: 0;
          }
        }
        .mfp-figure {
          // The shadow behind the image
          &:after {
            top: 0;
            bottom: 0;
          }
          small {
            display: inline;
            margin-left: 5px;
          }
        }
        .mfp-bottom-bar {
          background: rgba(0,0,0,0.6);
          bottom: 0;
          margin: 0;
          top: auto;
          padding: 3px 5px;
          position: fixed;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          &:empty {
            padding: 0;
          }
        }
        .mfp-counter {
          right: 5px;
          top: 3px;
        }
        .mfp-close {
          top: 0;
          right: 0;
          width: 35px;
          height: 35px;
          line-height: 35px;
          background: rgba(0, 0, 0, 0.6);
          position: fixed;
          text-align: center;
          padding: 0;
        }
      }
    }
  }
}

/* overlay animate up and in */
.mpf-slideup.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
/* overlay animate in */
.mfp-slideup.mfp-bg.mfp-ready {
  opacity: 0.9;
}
/* overlay animate out */
.mfp-slideup.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-slideup.mfp-wrap .mfp-content {
  @include transform(translate3d(0,40px,0));
  opacity: 0.5;

  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
/* content animate it */
.mfp-slideup.mfp-wrap.mfp-ready .mfp-content {
  @include transform(translate3d(0,0,0));
  opacity: 1;
}
/* content animate out */
.mfp-slideup.mfp-wrap.mfp-removing .mfp-content {
  @include transform(translate3d(0,20px,0));
  opacity: 0;
}



// Scale navigation arrows and reduce padding from sides
@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0;
  }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .mfp-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}



// IE7 support
// Styles that make popup look nicier in old IE
@if $mfp-IE7support {
  .mfp-ie7 {
    .mfp-img {
      padding: 0;
    }
    .mfp-bottom-bar {
      width: 600px;
      left: 50%;
      margin-left: -300px;
      margin-top: 5px;
      padding-bottom: 5px;
    }
    .mfp-container {
      padding: 0;
    }
    .mfp-content {
      padding-top: 44px;
    }
    .mfp-close {
      top: 0;
      right: 0;
      padding-top: 0;
    }
  }
}


/************************* Edited *************************/
a {
    text-decoration: none;
}
a:focus, a:focus:hover, button:focus, button:focus:hover, input:focus, input:focus:hover {
  outline: none;
}
header.collection-header {
  margin-top: 20px;
}
header.collection-header > .container {
  border: 0px solid #000;
}
header.site-header nav.nav-bar ul.site-nav li a {
  font-size: 13px;
  font-weight: 400!important;
}
header.content-util nav.breadcrumb {
  font-size: 13px;
  font-weight: 400;
}
header.content-util nav.breadcrumb span {
    color: #87b04a;
}
/* Collections */
div.featured-grid .box figcaption.below, div.collection-list .box figcaption.below, div.gallery .box figcaption.below,
div.featured-grid h3, div.featured-grid .h3, div.collection-list h3, div.collection-list .h3, div.gallery h3, div.gallery .h3 {
  text-align: left;
}
.shopify-section.section-bar .wrapper {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Navigation */
header.site-header nav.nav-bar ul.dropdown--mega-menu {
  border-top: 4px solid #354990;
	padding: 20px;
}
header.site-header nav.nav-bar > ul.site-nav > li {
  width: 7%;
  text-align: left;
  vertical-align: top;
}
header.site-header nav.nav-bar > ul.site-nav > li:first-child {
  width: 6%; 
}
header.site-header nav.nav-bar > ul.site-nav > li:nth-child(6) {
  width: 9%;
}
header.site-header nav.nav-bar > ul.site-nav > li:nth-child(7) {
  width: 9%;
}
header.site-header nav.nav-bar > ul.site-nav > li:nth-last-child(2) {
  width: 11%;
}
header.site-header nav.nav-bar > ul.site-nav > li:last-child {
  width: 7%; 
}
header.site-header nav.nav-bar ul.site-nav li.active > a {
  color: #87b04a;
}
header.site-header nav.nav-bar ul.dropdown--mega-menu li.sub-dropdown-item a {
  line-height: 1;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown>a {
  padding-right: 4px;
  word-break: break-word;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown > a {
  position: relative;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown > a::after {
  position: absolute;
	top: 12px;
  right: 12px;
}
header.site-header nav.nav-bar ul.dropdown--mega-menu li.has-sub-dropdown > a {
  color: #87b04a;
  letter-spacing: 0;
  font-size: 13px;
 	font-weight: bold!important;
}
header.site-header nav.nav-bar ul.dropdown--mega-menu>li>a {
      font-weight: bold!important;
    color: #87b04a!important;
  font-size: 1em!important;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) .dropdown li:first-child a {
  letter-spacing: 0;
  font-size: 1em;
  font-weight: 600!important;
  color: #87b04a!important;
  padding: 6px 18px;
  text-transform: uppercase;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) .dropdown li a {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1em;
  font-weight: 400;
  color: #000;
  line-height: 1;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) ul.dropdown > li:first-child {
  border-top: 4px solid #354990;
  padding-top: 20px;
}
header.site-header nav.nav-bar ul.site-nav li:last-child > a {
  min-height: 57px;
}
header.site-header nav.nav-bar ul.dropdown--mega-menu {
  padding: 25px 0;
}
header.site-header nav.nav-bar li.has-dropdown{
  position:static;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) .dropdown {
  width: 100%;
  left: 0 !important;
  border-top: 4px solid #354990;
  padding: 30px;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) ul.dropdown>li:first-child {
    border-top: 0;
    padding-top: 0;
}
header.site-header nav.nav-bar ul.site-nav li.has-dropdown:not(.has-dropdown--mega-menu) ul.dropdown li:not(:first-child) {
  width: 25%;
  float: left;
}
/* Contact Page */
.contact-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.contact-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 2;
  width: 50%;
}
.contact.form {
	padding: 50px 30px 30px;
  	background: #f3f3f3;
	margin-right: 30px;
}
.contact-content {
  background: #f3f3f3;
  padding: 50px 30px 30px;
}
.contact-map {
  margin-top: 30px;
}
.contact-map iframe {
  display: block;
  width: 100%;
}
.selection-wrapper .input-row {
  display: flex;
}
.contact.form .input-row input, .contact.form .input-row textarea {
  background: #fff;
  outline: 0px;
}
.contact.form .input-row label, .contact.form .input-row input, .contact.form .input-row textarea {
    font-size: 14px;
    text-transform: none;
    font-weight: normal;
    color: #000;
}
.contact.form .input-row label {
  width: 30%;
}
.contact.form .input-row input, .contact.form .input-row textarea {
  width: 70%;
}
.selection-wrapper p.submit {
  margin-left: 30%;
  text-align: left;
}
.contact.form .selection-wrapper input.button {
  background: #42b614;
  font-size: 14px;
  width: auto;
  padding: 12px 28px;
}
.contact.form .selection-wrapper input.button:hover {
  background: #87b04a;
}

/* Product Sidebar */
.collection aside {
  margin-top: 32px;
}
.collection aside .nav-container {
  padding: 30px 20px;
}
.collection aside nav, .collection aside nav { 
  border-bottom: 1px solid #dadada;
  padding-bottom: 15px;
}
.collection aside nav h5, .collection aside nav .h5 {
  font-family: "IBM Plex Sans", sans-serif;
  background: url(arrow-down.png) no-repeat left 6px;
  padding-left: 20px;
  font-size: 1em;
  border-bottom: 0px solid #dadada;
}
.collection aside nav li {
  margin-left: 20px;
}

/* Product list page */
header.content-util {
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 5px;
}
.featured-collection figure.product-grid-item--center figcaption, .simple-collection figure.product-grid-item--center figcaption, .collection figure.product-grid-item--center figcaption {
  text-align: left;
}
.featured-collection figcaption span.money:not(.original-price), .simple-collection figcaption span.money:not(.original-price), .collection figcaption span.money:not(.original-price) {
	color: #da0000;
  	font-weight: normal;
}
.featured-collection figcaption span.price, .simple-collection figcaption span.price, .collection figcaption span.price {
  font-size: 1.25em;
}

.featured-collection figcaption span.original-price, .simple-collection figcaption span.original-price, .collection figcaption span.original-price {
  font-size: 14px;
}
.featured-collection figcaption .product-title, .simple-collection figcaption .product-title, .collection figcaption .product-title {
	margin-bottom: 10px;
}
.collection figcaption .product-title a, .featured-collection figcaption .product-title a, .simple-collection figcaption .product-title a {
  	font-size: 16px;
	font-weight: bold;
}
.collection figcaption .product-title, .featured-collection figcaption .product-title, .simple-collection figcaption .product-title {
	text-align: left;
}
.collection figcaption span.price, .featured-collection figcaption span.price, .simple-collection figcaption span.price {
  text-align: left;
}
.box.product .default-cart-button__button {
  	background-color: transparent;
    color: #42b614;
  	border: 2px solid #42b614;
  	width: 60%;
    margin-top: 20px;
  	font-weight: normal;
  font-size: 16px;
}
.box.product .default-cart-button__button:hover {
  background-color: #42b614;
}
.box.product .default-cart-button__button.disabled {
	background-color: transparent;
    color: #8f8d8d;
    border-color: #8f8d8d;
}
.box.product .in-stock {
  margin-left: 0;
}
.boost-pfs-filter-product-item-list.boost-pfs-filter-product-item {
  padding-bottom: 0;
  margin-bottom: 0;
}
.boost-pfs-filter-collection-header-wrapper{  
  background-image: none!important;
}


/* Product details page */
.product-code {
  color: #757575;
  font-size: 14px;
  margin-bottom: 10px;
	border-bottom: 1px solid #dadada;
}
.purchase-box .selection-wrapper {
  border-bottom: 0px solid #dadada;
}
.purchase-box .selection-wrapper.variant {
  position: relative;
}
.purchase-box .selection-wrapper.price > span {
  	color: #f31313;
	font-size: 24px;
  font-weight: 500;
}
.purchase-box .selection-wrapper.price p {
  margin-left: 30px;
  font-size: 14px;
}
.purchase-box .selection-wrapper.price .savings {
  display: inline;
  margin-left: 20px;
  font-size: 14px;
  color: #f31313;
  font-weight: 400;
}
.purchase-box .selection-wrapper.price>span {
  color: #f31313;
  font-size: 24px;
  font-weight: 500;
}
.selection-wrapper .product-form__item > label, .selection-wrapper .product-form__item > fieldset {
  display: inline-block;
  font-size: 14px;
  color: #252222;
  font-weight: normal;
  vertical-align: text-bottom;
}
.selection-wrapper .product-form__item>fieldset[name="Size"] {
      width: 45%;
}
.selection-wrapper label {
  display: inline-block;
  width: 25%;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 14px;
}
.quantity.quantity-product-template {
  display: flex;
}
.quantity-select {
  font-size: 14px;
  color: #252222;
  font-weight: normal;
  margin-left: 5px;
}
.selection-wrapper .single-option-radio label {
  width: 100%;
  padding: 7px 10px;
  text-align: center;
  border: 1px solid #8f8d8d;
}
.single-option-radio input[type="radio"]:checked + label {
  	width: 100%;
	text-align: center;
  	padding: 7px 10px;
    border: 2px solid #87b04a;
  	background-color: #87b04a;
}
.single-option-radio .swatch-container {
  margin-right: 10px;
}
.selection-wrapper.variant.radio > div.product-form__item {
  margin-bottom: 25px;
}
.cart-buttons__enabled .default-cart-button__button {
  background-color: #42b614;
  border: 2px solid #42b614;
  color: #fff;
  font-weight: normal;
	font-size: 14px;
}
.cart-buttons__enabled .default-cart-button__button:hover {
  border: 2px solid #42b614;
  color: #42b614;
}
.shopify-payment-button .shopify-payment-button__button--unbranded {
  	font-weight: normal;
	font-size: 14px;
  background-color: #333;
  
}
.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
  background-color: transparent;
  border: 2px solid #87b04a;
}
.shopify-payment-button .shopify-payment-button__button--unbranded:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
	background-color: transparent;
  border: 2px solid #2d407d;
  color: #2d407d;
}
.single-product .grid aside.product-aside {
  position: relative;
}
aside.product-aside .purchase-box {
  border-bottom: 0px solid #dadada;
}
aside.product-aside .purchase-box.padding-box {
  padding-top: 40px;
  margin-top: 60px;
}
.product-info-bar {
  border-bottom: 1px solid #e8e8e8;
  margin-top: 25px;
}
.product-info-bar .banner-bottom-banner {
  border-top: 1px solid var(--border-color);
    margin-left: 0;
}
.product-info-bar strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
	font-weight: normal;
  color: #000;
}
.product-info-bar #return strong {
  font-weight: bold;
}
.product-info-bar img {
  margin: 0;
  text-align: left;
  float: left;
  margin-right: 15px;
  margin-bottom: 25px;
}
.product-info-bar .grid__cell {
  line-height: 1.2;
  padding-top: 30px;
  padding-bottom: 25px;
  padding-left: 0;
  padding-right: 30px;
  font-size: 13px;
	color: #666;
  width: 33.33%;
  vertical-align: top;
}
.description-section .container {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.custom-bat-form {
  margin-left: 25%;
}
.custom-bat-form span {
  background: url(pdf-icon.png) no-repeat;
  padding-left: 20px;
}
.custom-bat-form a {
  text-decoration: none;
  color: #201c1c;
}
.savings--amount {
  display: none;
}
.in-stock {
  margin-left: 5px;
}
.in-stock:before {
  content: '';
  background: #379f0e;
  width: 8px;
  height: 8px;
  display: inline-flex;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: top;
  margin-top: 8px;
}
.single-option-radio__label .label-extra {
  position: absolute;
  right: 0;
  top: 10px;
}
.selection-wrapper label .label-extra::before {
  content: none;
}
.product-size-guide-product-template {
  text-transform: none;
  text-decoration: none;
  font-size: 13px;
  color: #252222;
  background: url(size-guide-1.png) no-repeat;
  padding: 10px 10px 10px 50px;
}
#product-size-guide-content-product-template.popup-page img {
  width: calc(100% - 35px);
}
.product-thumb--cell.is-nav-selected img, .product-thumb--cell.is-nav-selected svg, .product-thumb--cell[data-initial-image] img, .product-thumb--cell[data-initial-image] svg {
  border: 2px solid #87b04a;
}
.selection-wrapper #infiniteoptions-container label {
  width: 100%;
  text-transform: none;
}
#infiniteoptions-container fieldset {
  border: 0px solid #c0c0c0;
  padding-left: 0;
}
#infiniteoptions-container fieldset input[type=checkbox] {
	margin-right: 10px;
}
#infiniteoptions-container .spb-label-tooltip label {
  display: none;
}
#infiniteoptions-container fieldset label span {
  color: #f31313;
  font-weight: bold;
}
.single-product header.product-header {
  border-bottom: 0px solid #000;
}

/* Wishlist */
.swym-button-bar.swym-wishlist-button-bar {
	position: absolute;
	top: 0;
	right: 20px;
   margin: 0;
}

.product-form .swym-btn-container .swym-button.swym-added:after {
  opacity: 1;
}
.product-form button.swym-button.disabled, .product-form button.swym-button:disabled {
	opacity: 1;
}

.swym-btn-container .swym-fave-count {
  border-radius: 50%;
  height: 25px;
  padding: 0px;
  min-width: 25px;
  text-align: center;
  box-shadow: 0px 0px 2px #ddd;
  background: transparent;
  font-size: 14px;
}
.product-form .swym-btn-container .swym-button:after {
  font-size: 25px;
  color: #c42937 !important;
} 

/* Print */
button.print-button {
	background: url(print-icon.png) no-repeat;
    padding-left: 10px;
    border: 0 solid var(--border-color);
    padding-right: 10px;
    margin-right: 0px;
    text-indent: -999999px;
    position: absolute;
    right: 0px;
    top: 14px;
    
}
.print__header {
  display: none;
}
.product-meta button.print-button {
	float: right;
    text-indent: -999999px;
    border-right: 0px solid var(--border-color);
    padding-right: 0px;
    margin-top: 5px;
    margin-right: 15px;
}
.print__footer {
  display: none;
}
.print-item {
  display: none;
}
/* Print */

/* Tabs */
.product-tab {
  overflow: hidden;
}
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	width: 100%;
    text-align: left;
    position: relative;
}

ul.tabs li {
	display: inline-block;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	background: #fff;
  	padding: 0 4px;
    margin-right: 20px;
}
ul.tabs li a {
	text-decoration: none;
	display: block;
	outline: none;
  	color: #999;
    padding: 7px 15px;
    font-size: 18px;
    font-weight: 400;
  	border: 2px solid var(--border-color);
    position: relative;
    margin-bottom: 8px;
}
ul.tabs li a:hover {
}
ul.tabs li.active a, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background-color: transparent;
    color: #2c2c2e;
	border: 2px solid #87b04a;
}

.tab_container {
	overflow: hidden;
	clear: both;
	float: left;
	width: 100%;
	background: #fff;
  	padding: 0 20px;
}

.tab_content {
  margin-bottom: 20px;
}
.tab_content ul {
  margin-left: 1em;
  list-style-type: disc;

}
.tab_content .spr-container {
  border: 0px;
  padding: 0;
}
.tab_content .spr-header-title {
  font-size: 20px;
}
#recentProducts {
  padding-top: 25px;
  overflow: hidden;
}
#recentProducts ul.tabs, #recentProducts ul.tabs li {
  
}
#recentProducts ul.tabs li a {
  	padding: 12px 40px;
	font-size: 15px;
  	outline: none;
  text-transform: uppercase;
}
#recentProducts ul.tabs li:not(.active) a {
  background: #fff;
  color: #87b04a;
}
#recentProducts ul.tabs:before {
  content: none;
}
#recentProducts .tab_container {
  
}
#recently-viewed-products .price {
  overflow: hidden;
  margin-left: 10px;
}
#recently-viewed-products .price .money {
	margin-left: -10px;
}
#recently-viewed-products .price .money:before {
  content: '£';
	position: absolute;
}
#recentProducts ul.tabs li.active a, #recentProducts ul.tabs li.active a:hover {
  color: #fff;
  border: 2px solid #87b04a;
  background: #87b04a;
  text-transform: uppercase;
  font-family: "IBM Plex Sans", sans-serif;
}
#recommendations > #shopify-section-product-recommendations > section,
#recentProducts #shopify-section-static-recently-viewed-products > section {
  margin-top: 40px;
}
#recommendations .simple-collection, #recent .simple-collection {
  border-bottom: 0px solid #000;
}
#recommendations .simple-collection .product-container .box:first-child, #recent .simple-collection .product-container .box:first-child {
/*   padding-left: 0; */
}
footer.site-footer .box.localization, footer.site-footer .box.payment-types, footer.site-footer .box.trust-badge {
  text-align: center;
}
/* Tabs */

/* Cart */
.cart header.cart-header .h1, .cart header.cart-header h1, .cart header.cart-header header.site-header div.site-logo, header.site-header .cart header.cart-header div.site-logo {
	padding-top: 10px;
}

/* Other pages */
.shopify-policy__container {
  max-width: 1180px!important;
}
.privacy-table thead td {
  background: #f2f1f1;
	font-weight: bold;
      padding: 10px;
}

/* Responsive */
@media only screen and (max-width: 1379px) {
  .shopify-section.section-bar .wrapper {
    margin: 0 40px;
  }
}
@media only screen and (max-width: 1199px) {
  /*header.site-header nav.nav-bar ul.site-nav li {
    width: auto;
    text-align: left;
  }
  header.site-header nav.nav-bar ul.site-nav li:first-child {
    width: auto;
  }*/
  header.site-header nav.nav-bar ul.site-nav li a {
    font-size: 12px; 
  }
  header.site-header nav.nav-bar>ul.site-nav>li:nth-child(6) {
      width: 10%;
  }
  header.site-header nav.nav-bar>ul.site-nav>li:nth-child(8) {
      width: 9%;
  }
  header.site-header nav.nav-bar > ul.site-nav > li:nth-last-child(2) {
    width: 10%; 
  }

  header.site-header nav.nav-bar ul.site-nav li.has-dropdown > a:after {
    right: 8px; }
  header.site-header nav.nav-bar {
      margin-bottom: 0;
  }
  .product-size-guide-product-template {
    padding: 7px 10px 10px 30px;
    background-size: 30%;
  }
  .purchase-box .selection-wrapper.price .savings, .purchase-box .selection-wrapper.price p {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 999px) {
  .purchase-box .selection-wrapper.variant .product-form__item>label {
	display: block;
	width: 100%;
  }
  .selection-wrapper .product-form__item>fieldset[name=Size] {
    width: auto;
  }
  .single-option-radio__label .label-extra {
    position: static;
    float: right;
  }
  .selection-wrapper label {
    width: 40%;
  }
  .product-info-bar {
    padding-bottom: 10px;
  }
  .product-info-bar .grid__cell {
    padding-top: 0px;
    padding-right: 0px;
	padding-bottom: 10px;
	width: 100%;
  }
}

@media only screen and (max-width: 940px) {
  footer.site-footer form.contact-form {
    margin: 0;
  }
}

@media only screen and (max-width: 800px) {
  #recommendations .simple-collection .product-container .box:nth-child(odd), 
  #recent .simple-collection .product-container .box:nth-child(odd) {
    padding-left: 5px;
  }
  #recent .simple-collection, #recommendations .simple-collection {
    padding-left: 0;
    padding-right: 0;
  }
  .simple-collection header {
	padding-bottom: 0px;
    margin-bottom: 0;
  }

  header.site-header nav.nav-bar ul.site-nav li {
    width: auto;
    text-align: left;
  }
  header.site-header nav.nav-bar ul.site-nav li:first-child,
  header.site-header nav.nav-bar>ul.site-nav>li:nth-child(6),
  header.site-header nav.nav-bar>ul.site-nav>li:nth-child(7),
  header.site-header nav.nav-bar>ul.site-nav>li:nth-child(8),
  header.site-header nav.nav-bar>ul.site-nav>li:nth-last-child(2),
  header.site-header nav.nav-bar>ul.site-nav>li:last-child{
    width: auto;
  }
  header.site-header nav.nav-bar ul.site-nav li.has-dropdown>a {
      padding-right: 17px;
  }
  header.site-header nav.nav-bar ul.site-nav li:last-child > a {
    min-height: inherit;
  }
}
@media only screen and (max-width: 767px) {
  .boost-pfs-filter-left-col {
    display: none;
  }
  
}
@media only screen and (max-width: 700px) {
  .slideshow .content-box {
    display: none;
  }
  .gallery .box figcaption a {
    text-align: center;
  }
  #recentProducts ul.tabs li a {
    padding: 12px 20px;
  }
  .contact-column {
    display: block;
    flex-direction: column;
    flex-basis: 100%;
    flex: auto;
    width: 100%;
	}
  .contact.form {
	margin-right: 0;
  }
}
@media only screen and (max-width: 600px) {
  .shopify-section.section-bar .wrapper {
    margin: 0 20px;
  }
  .tab_container {
    padding: 0;
  }
  .tab_content {
    margin-left: 5px;
  }
  .tab_content ul {
    margin-left: 20px;
  }
  ul.tabs li {
    margin-bottom: 0;
    margin-right: 0;
  }
  ul.tabs li a {
    font-size: 14px;
    border: 2px solid #ccc;
  }
  .boost-pfs-filter-custom-sorting button>span>span, .boost-pfs-filter-top-sorting-mobile button, .boost-pfs-filter-tree-mobile-button button {
    font-size: 14px;
  }
  footer.site-footer form.contact-form .input-wrapper input {
	font-size: 12px!important;
  }
}
@media only screen and (max-width: 480px) {
  .spr-container .spr-header-title, .spr-container .spr-summary {
    text-align: left;
  }
  .contact.form .selection-wrapper .input-row {
      display: block;
  }
  .contact.form .input-row label, .contact.form .input-row input, .contact.form .input-row textarea {
    width: 100%;
  }
}
/* Size Guide Pages */
.size-guide img{
  margin:0 auto;
  display:block
}
.size-guide header.page-header {
  padding: 0 0 20px 0;
  border-bottom: 1px solid #ededed;
  margin-bottom: 30px;
}
.size-guide .page-header-con {
  display: flex;
  align-items: center;
  justify-content: center;
}
.size-guide .page-header-con h1{
  margin-bottom: 0;
  margin-left: 30px;
  padding-left: 30px;
  text-align:left;
  border-bottom:0!important;
  border-left: 1px solid #ededed;
}
.size-guide .page-header-con img{
  margin:0;
  display:block
}
@media only screen and (max-width: 767px) {
  .size-guide .page-header-con {
      flex-wrap: wrap;
  }
  .size-guide .page-header-con h1{
    margin-bottom: 0;
    margin-left: 0;
    padding-left: 0;
    border-left:0;
    margin-top: 15px;
  }
  .size-guide .table-cont {
    min-width: 400px !important;
  }
  .size-guide .page-header-con h1{
    width: 100%;
  }
}
.size-guide .highlight {
  border: 1px solid #edebeb;;
  background-color: #f4f4f4;
  padding: 30px;
  margin: 0 0 30px 0;
}
.size-guide .grid {
    display: flex;
    flex-wrap: wrap;
}
.size-guide .grid-center {
  align-items: center;
}
.size-guide .table-cont tr:nth-child(2n) td {
  background: #f9f9f9;
}
.size-guide table td, .size-guide table th {
  text-align: center;
}
.size-guide h2, .size-guide h4{
  text-transform:uppercase;
}
.size-guide .orange-text {
  display: block;
  color: #ff4c06;
  font-weight: 600;
  text-transform: uppercase;
}
.size-guide .table-cont thead tr th {
  padding: 7px 6px !important;
}
.size-guide .table-cont td {
  padding: 5px 6px !important;
}
.size-guide .image-center-holder {
    min-height: 96px;
}
.different-panel {
    margin-top: 40px;
}
.size-guide .table-cont.text-left-align th, 
.size-guide .table-cont.text-left-align td {
  text-align: left;
}
.size-guide .table-cont.big-table th, 
.size-guide .table-cont.big-table td {
  padding: 15px 6px !important;
}
/* Grays Size Guide */
.size-guide.grays .table-cont th {
  background-color: #fc5000;
  color: #fff;
  border-color:#fff;
}
.size-guide .table-cont.orange-table tr td, 
.size-guide .table-cont.orange-table tr:nth-child(2n) td{
  background: #eed4b3;
}
/* Adidas Size Guide */
.size-guide.adidas .table-cont th {
  background-color: #565656;
  color: #fff;
  border-color:#fff;
}
.size-guide.adidas .table-cont tr:nth-child(2n) th {
  background: #353535;
}
.size-guide .d-flex-item {
  display: flex;
  align-items: center;
}
.size-guide .d-flex-item div{
   margin-left: 15px;
}
@media only screen and (max-width: 768px) {
  .size-guide .d-flex-item {
    flex-wrap:wrap
  }
}
.size-guide .light-head.table-cont thead tr th {
  color: #000;
  background-color: #ececec;
}
/* Kookaburra Size Guide */
.size-guide.kookaburra .table-cont th {
  background-color: #000;
  color: #fff;
  border-color:#fff;
}
.size-guide .green-text {
  display: block;
  color: #8cc63e;
  font-weight: 600;
  text-transform: uppercase;
}
.size-guide.kookaburra h3 {
  text-transform: uppercase;
  font-weight: 500;
}
/* Mercian Size Guide */
.size-guide.mercian .table-cont th {
  background-color: #614233;
  color: #fff;
  border-color:#fff;
}
.size-guide .border-all {
  border: 1px solid #ebe8e8;
  border-radius: 5px;
  padding: 25px;
}
.size-guide .black-text {
  display: block;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
}
/* Gryphon Size Guide */
.size-guide.gryphon .table-cont th {
  background-color: #000;
  color: #fff;
  border-color:#fff;
}
.size-guide h5{
  font-size: 1.3em;
}
.size-guide .text-capitalize{
  text-transform: capitalize;
}
/* Dita Size Guide */
.size-guide.dita .table-cont th {
  background-color: #e8422d;
  color: #fff;
  border-color:#fff;
}
/* TK Size Guide */
.size-guide.tk .table-cont th {
  background-color: #000;
  color: #fff;
  border-color:#fff;
}
.size-guide .invidual {
  margin-bottom: 25px;
}
/* Asics Size Guide */
.size-guide.asics .table-cont th {
  background-color: #000067;
  color: #fff;
  border-color:#fff;
}
.size-guide.asics .image-area {
  margin-bottom: 25px;
}
.size-guide.asics .image-area img{
  margin:0
}
.size-guide.asics h2 span {
  font-size: 19px;
}
@media only screen and (max-width: 767px){
  .size-guide .table-cont.width-table {
      min-width: 800px !important;
  }
}
/* canterbury Size Guide */
.size-guide.canterbury .table-cont th {
  background-color: #ebebeb;
  border-color:#fff;
}
.size-guide.canterbury table .toprow th {
  text-align: left;
  border-right: 0;
  background: #fff;
}
.size-guide.canterbury .round-line-cont {
  display: flex;
  margin: 0 auto 25px auto;
  align-items: center;
}
.size-guide.canterbury .round-line-contL,
.size-guide.canterbury .round-line-contR{
 	width: 50%;
}
.size-guide.canterbury .round-line-contLC {
  float: right;
  padding-right: 25px;
}
.size-guide.canterbury .round-line-contRC{
 	width: 75%;
   padding-left: 25px;
}
.size-guide.canterbury h3 {
  display: block;
  text-transform: capitalize;
}
.size-guide.canterbury .round-line-contR span {
  display: block;
  font-weight: bold;
}
.size-guide.canterbury .round-line-contR ul{
  counter-reset: css-counter 0;
  list-style-type: none;
  padding:0;
  margin:15px 0 0 0;
}
.size-guide.canterbury .round-line-contR ul li{
  position:relative;
  text-align:left;
  padding-left:25px;
  counter-increment: css-counter 1;
}
.size-guide.canterbury .round-line-contR ul li:before {
    position: absolute;
    width: 15px;
    height: 15px;
    content: counter(css-counter);
    left: 0;
    top: 7px;
    background: #8cc63e;
    color: #fff;
    border-radius: 100%;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
}
@media only screen and (max-width: 767px){
  .size-guide.canterbury .round-line-cont {
    flex-wrap: wrap;
  }
  .size-guide.canterbury .round-line-contL, 
  .size-guide.canterbury .round-line-contR {
    width: 100%;
  }
  .size-guide.canterbury .round-line-contLC {
      float: none;
      padding-right: 0;
    	margin-bottom: 20px;
  }
  .size-guide.canterbury .round-line-contRC {
      width: 100%;
      padding-left: 0;
  }
}
/* Skins Size Guide */
.size-guide .margin-top-15 {
  margin-top: 15px !important;
}
.size-guide.skins .ia-a {
  border: 1px solid #e3e3e3;
}
/* Size Guide Main Page*/
.size-guide-main .size-guide .page-header-con {
    margin-top: 22px;
}
.size-guide-main p {
    text-align: center;
    margin: 0;
}
.size-guide-main h4.discription {
    text-align: center;
    margin-top: 25px;
}
.size-guide-main .grid {
    flex-wrap: wrap;
}
.size-guide-main .grid section {
  border: 1px solid #ddebd0;
  text-align: center;
  padding: 30px 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:8px;
}
.size-guide-main .grid section:hover {
  border: 1px solid #87b14a;
  cursor: pointer;
}
.size-guide-main .grid section img {
  margin: 0 auto 20px;
  display: block;
}
.size-guide-main .grid section:hover img{
  filter: brightness(1.2);
}
.size-guide-main .grid strong{
  	font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
  	color:#000
}
/* H1 Tag to Home Page*/
.h1-home-page{
  display: none;
}