/*============================================================================
  Shopify Timber v2.1.0 | github.com/shopify/timber
  Copyright 2015 Shopify Inc.
  Author Carson Shold @cshold
  Built with Sass - http://sass-lang.com/

  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
    - This file merges your stylesheets into one master at assets/timber.scss.liquid
==============================================================================*/

/*================ Variables, theme settings, and Sass mixins ================*/
/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin clearfix() {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin prefix($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

/*============================================================================
  Prefix mixin for generating vendor prefixes.
  Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
  Usage:
    // Input:
    .element {
      @include prefix(transform, scale(1), ms webkit spec);
    }
    // Output:
    .element {
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
==============================================================================*/
@mixin prefixFlex($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}: $value;
    } @else if $prefix == moz {
      -moz-#{$property}: $value;
    } @else if $prefix == ms {
      -ms-#{$property}: $value;
    } @else if $prefix == o {
      -o-#{$property}: $value;
    } @else if $prefix == spec {
      #{$property}: $value;
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin transition($transition: 0.1s all) {
  @include prefix('transition', #{$transition});
}

@mixin transform($transform: 0.1s all) {
  @include prefix('transform', #{$transform});
}

@mixin animation($animation) {
  -webkit-animation: $animation;
  -moz-animation:    $animation;
  -o-animation:      $animation;
  animation:         $animation;
}

@mixin gradient($from, $to, $fallback) {
  background: $fallback;
  background: -moz-linear-gradient(top, $from 0%, $to 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$from), color-stop(100%,$to));
  background: -webkit-linear-gradient(top, $from 0%, $to 100%);
  background: -o-linear-gradient(top, $from 0%, $to 100%);
  background: -ms-linear-gradient(top, $from 0%, $to 100%);
  background: linear-gradient(top bottom, $from 0%, $to 100%);
}

@mixin backface($visibility: hidden) {
  @include prefix('backface-visibility', #{$visibility});
}

@mixin box-sizing($box-sizing: border-box) {
  -webkit-box-sizing: #{$box-sizing};
  -moz-box-sizing: #{$box-sizing};
  box-sizing: #{$box-sizing};
}

/*================ Functions ================*/
@function em($target, $context: $baseFontSize) {
  @if $target == 0 {
    @return 0;
  }
  @return $target / $context + 0em;
}

@function color-control($color) {
  @if (lightness( $color ) > 40) {
    @return #1c1d1d;
  }
  @else {
    @return #fff;
  }
}

@function adaptive-color($color, $percentage) {
  @if (lightness( $color ) > 40) {
    @return darken($color, $percentage);
  }
  @else {
    @return lighten($color, $percentage);
  }
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

//Font Stack Mixins
@mixin headerFontStack {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
}

@mixin accentFontStack {
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  
    letter-spacing: 0.1em;
  
  
    text-transform: uppercase;
  
}

@mixin bodyFontItalic {
  
}

@mixin visuallyHidden {
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

/*================ Animations and keyframes ================*/
@include keyframes(spin) {
  0% {
    @include transform(rotate(0deg));
  }

  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(fadeIn) {
  0%, 35% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(heroContentIn) {
  0%, 35% {
    opacity: 0;
    @include transform('translateY(8px)');
  }
  60% {
    opacity: 1;
  }
  100% {
    @include transform('translateY(0)');
  }
}

/*============================================================================
  Dependency-free breakpoint mixin
    - http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($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;
    }
  }
}

/*============================================================================
  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 prefixFlex(flex-wrap, $value, webkit moz ms spec);
}

@mixin flex-direction($value) {
  @include prefixFlex(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 prefixFlex(align-items, $value, webkit moz ms o spec);
}

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

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

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

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

$viewportIncrement: 1px;
$siteWidth: 1050px;
$small: 590px;
$medium: 768px;
$large: 769px;
$xlarge: $siteWidth + $viewportIncrement;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/*================ The following are dependencies of csswizardry grid ================*/
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  'large' '(min-width: #{$large})',
  'xlarge' '(min-width: #{$xlarge})'
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large', 'xlarge');
$breakpoint-has-push:  ('medium', 'medium-down', 'large');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large');

/*================ Color variables ================*/
$colorPrimary: #f01130;
$colorSecondary: #000000;

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: lighten($colorBtnPrimary, 12%);
$colorBtnPrimaryActive: adaptive-color($colorPrimary, 24%);
$colorBtnPrimaryText: #ffffff;

$colorBtnSecondary: $colorSecondary;
$colorBtnSecondaryHover: lighten($colorBtnSecondary, 10%);
$colorBtnSecondaryActive: adaptive-color($colorSecondary, 10%);
$colorBtnSecondaryText: #ffffff;

$colorBtnSecondaryAccent: $colorBtnPrimary;
$colorBtnSecondaryAccentHover: lighten($colorBtnSecondaryAccent, 12%);
$colorBtnSecondaryAccentActive: adaptive-color($colorBtnSecondaryAccent, 24%);

// Text link colors
$colorLink: $colorSecondary;
$colorLinkHover: $colorPrimary;

// Text colors
$colorTextBody: #000000;

// Heading colors
$colorHeadings: #000000;

// Backgrounds
$colorBody: #ffffff;
$colorProductBackground: #ffffff;
$colorInputBg: #f6f6f6;
$colorNewsletter: #ffffff;

// Border colors
$colorBorder: #000000;

// Border size
$borderWidthHeader: 1px;

// Sale tag color
$colorSaleTag: #e10202;

// Nav and dropdown link background
$colorNav: $colorBody;
$colorNavText: $colorHeadings;

// Helper colors
$disabledGrey: #f6f6f6;
$disabledBorder: darken($disabledGrey, 25%);
$errorRed: #d02e2e;
$errorRedBg: #fff6f6;
$successGreen: #56ad6a;
$successGreenBg: #ecfef0;

// Drawer sizes and colors
$drawerNavWidth: 300px;
$drawerCartWidth: 300px;
$drawerCartWidthLarge: 400px; // small-up width
$drawerHeaderHeight: 80px;
$drawerCartFooterHeight: 130px; // default, overwritten by JS
$colorDrawers: #000000;
$colorDrawerBorder: #000000;
$colorDrawerText: #ffffff;
$colorDrawerButton: #000000;
$colorDrawerButtonText: #ffffff;
$drawerTransition: 'all 0.35s cubic-bezier(0.46, 0.01 , 0.32, 1)';

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;

// Footer spacing
$footer-spacing-small: $gutter / 2;
$footer-spacing-extra-small: $gutter / 4;

// Z-index
$zindexNavDropdowns: 5;
$zindexDrawer: 10;
$zindexHeroHeader: 2;
$zindexDrawerOverlay: 20;

// Product Collage Grid
$collageImageXLarge: 670px;
$collageImageLarge: 520px;
$collageImageMedium: 310px;
$collageImageSmall: 230px;



// Collection Collage Grid
// These heights are used to determine the row height for the
// collection grid.
$collectionCollageRowHeightFull: 450px;
$collectionCollageRowHeightLarge: 310px;
$collectionCollageRowHeightSmall: 280px;

// Password page
$passwordPageUseBgImage: true;

// Section onboarding
$color-blankstate: rgba($colorTextBody, 0.35);
$color-blankstate-background: rgba($colorTextBody, 0.10);

/*================ Typography ================*/@font-face {
  font-family: Roboto;
  font-weight: 700;
  font-style: normal;
  src: url("//kundebrand.com/cdn/fonts/roboto/roboto_n7.f38007a10afbbde8976c4056bfe890710d51dec2.woff2?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=4f3f17fbb8ffacfe3d79e9aa47d40933c0553726724f36e730e8f32ca4acef78") format("woff2"),
       url("//kundebrand.com/cdn/fonts/roboto/roboto_n7.94bfdd3e80c7be00e128703d245c207769d763f9.woff?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=8e36381c0fd98b6cb9697daba99712c901208b86ff205af1fc38f932d84fda8b") format("woff");
}


@font-face {
  font-family: Quicksand;
  font-weight: 700;
  font-style: normal;
  src: url("//kundebrand.com/cdn/fonts/quicksand/quicksand_n7.d375fe11182475f82f7bb6306a0a0e4018995610.woff2?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=3f65d260dd486134a6d0852598dc9aa466181dd09d97536ecbd89eb559a0df1d") format("woff2"),
       url("//kundebrand.com/cdn/fonts/quicksand/quicksand_n7.8ac2ae2fc4b90ef79aaa7aedb927d39f9f9aa3f4.woff?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=7aea43d964f85557e6d2724eab782d266dd1d82d30b401cc2761873823f1bdda") format("woff");
}




@font-face {
  font-family: Roboto;
  font-weight: 900;
  font-style: normal;
  src: url("//kundebrand.com/cdn/fonts/roboto/roboto_n9.0c184e6fa23f90226ecbf2340f41a7f829851913.woff2?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=9440b3ab741842fb6ca3ce653232252dad5bc36161a6ce2ed8e3cce89c7dc573") format("woff2"),
       url("//kundebrand.com/cdn/fonts/roboto/roboto_n9.7211b7d111ec948ac853161b9ab0c32728753cde.woff?h1=a3VuZGVicmFuZC5jb20&h2=a3VuZGVicmFuZC5uZXQ&h3=a3VuZGVicmFuZC5jYXQ&h4=a3VuZGUtYnJhbmQuYWNjb3VudC5teXNob3BpZnkuY29t&h5=a3VuZGVicmFuZC5mcg&hmac=61d779ed3a2761c7d6756ce9646550decd350db520eaba0c222fd824a3818574") format("woff");
}


// Header Font
$headerFontStack: Quicksand, sans-serif;
$headerFontWeight: 700;
$headerFontStyle: normal;
$headerBaseFontSize: 34px;

// Body Font
$bodyFontStack: Helvetica, Arial, sans-serif;
$bodyFontWeight: 400;
$bodyFontWeightBold: 700;
$bodyFontStyle: normal;
$baseFontSize: 17px; // Henceforth known as 1em

// Accent Font
$accentFontStack: Roboto, sans-serif;
$accentFontWeight: 700;
$accentFontWeightBold: 900;
$accentFontStyle: normal;

@font-face {
  font-family: 'icons';
  src: url('//kundebrand.com/cdn/shop/t/8/assets/icons.eot?v=112981532348062652561634188250');
  src: url('//kundebrand.com/cdn/shop/t/8/assets/icons.eot?v=112981532348062652561634188250#iefix') format("embedded-opentype"),
       url('//kundebrand.com/cdn/shop/t/8/assets/icons.woff?v=24089382976848351381634188253') format("woff"),
       url('//kundebrand.com/cdn/shop/t/8/assets/icons.ttf?v=177851439206450752971634188252') format("truetype"),
       url('//kundebrand.com/cdn/shop/t/8/assets/icons.svg?v=182753167674510223691634188251#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
};

$socialIconFontStack: 'icons';

/*================ Global | Normalize ================*/
*, input, :before, :after {
  @include box-sizing();
}

html, body {
  padding: 0;
  margin: 0;
}

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

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

[hidden] {
  display: none;
}


/*================ Site-wide styles ================*/
/*================ Partials | Layout Styles ================*/
html,
body {
  background-color: $colorBody;
}

.wrapper {
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 0 ($gutter / 2);

  @include at-query ($min, $postSmall) {
    padding: 0 $gutter;
  }
}

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }
}

hr {
  clear: both;
  border-top: solid $colorBorder;
  border-width: 1px 0 0;
  margin: $gutter 0;
  height: 0;

  &.hr--clear {
    border-top-color: transparent;
  }
}

/*================ Partials | Typography styles ================*/
body,
input,
textarea,
button,
select {
  font-size: $baseFontSize;
  line-height: 1.6;
  font-family: $bodyFontStack;
  color: $colorTextBody;
  font-weight: $bodyFontWeight;
  font-style: $bodyFontStyle;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: block;
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  margin: 0 0 0.5em;
  line-height: 1.4;
  text-rendering: optimizeLegibility;

  // Headings in the hero/slideshow use the color set in
  // the Slideshow section settings, not $colorHeadings
  &:not(.hero__title) {
    color: $colorHeadings;
  }

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}

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

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

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

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

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

h6 {
  font-size: em(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;
  text-rendering: optimizeLegibility;

  img {
    margin: 0;
  }
}

em {
  font-style: italic;
}

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

small {
  font-size: 0.9em;
}

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

sub {
  bottom: -0.5em;
}

blockquote {
  font-size: 1.125em;
  line-height: 1.45;
  margin: 0;
  padding: ($gutter / 2) $gutter 40px;

  p {
    margin-bottom: 0;

    & + cite {
      margin-top: $gutter / 2;
    }
  }

  cite {
    display: block;
    font-size: 0.75em;

    &:before {
      content: "\2014 \0020";
    }
  }
}

code,
pre {
  background-color: #faf7f5;
  font-family: Consolas, monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: $gutter / 2;
  margin: 0 0 $gutter;
}

/*================ Partials | Lists ================*/
ul,
ol {
  margin: 0 0 ($gutter / 2) 20px;
  padding: 0;
  text-rendering: optimizeLegibility;
}

ol ol {
  list-style: lower-alpha;
}

ol {
  list-style: decimal;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 4px 0 5px 20px;
}
li {
  margin-bottom: 0.25em;
}

ul.square {
  list-style: square outside;
}
ul.disc {
  list-style: disc outside;
}
ol.alpha {
  list-style: lower-alpha outside;
}

.no-bullets {
  list-style: none outside;
  margin-left: 0;
}

.inline-list {
  margin-left: 0;

  li {
    display: inline-block;
    margin-bottom: 0;
  }
}

/*================ Partials | Tables ================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

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

.table-wrap--order {
  background-color: $colorNewsletter;
  padding: 1rem;
}

th {
  font-weight: $bodyFontWeightBold;
}

th,
td {
  text-align: left;
  padding: $gutter / 2;
  border: 1px solid $colorBorder;
}

/*============================================================================
  #Grid Setup
    - Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes
    - Breakpoints defined above, under #Breakpoint and Grid Variables
    - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
==============================================================================*/
$responsive:         true;
$mobile-first:       true;
$use-silent-classes: false;
$push:               true;
$pull:               false;

/* Force clearfix on grids */
.grid,
.grid-uniform {
  @include clearfix;
}

/* Manual grid__item clearfix */
.grid__item.clear {
  clear: both;
}

$class-type: unquote(".");

@if $use-silent-classes == true {
  $class-type: unquote("%");
}

@mixin grid-media-query($media-query) {
  $breakpoint-found: false;

  @each $breakpoint in $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";
  }
}


/*============================================================================
  Drop relative positioning into silent classes which can't take advantage of
  the `[class*="push--"]` and `[class*="pull--"]` selectors.
==============================================================================*/
@mixin silent-relative() {
  @if $use-silent-classes == true {
    position:relative;
  }
}

/*============================================================================
  Grid Setup
    1. Allow the grid system to be used on lists.
    2. Remove any margins and paddings that might affect the grid system.
    3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
#{$class-type}grid,
#{$class-type}grid-uniform {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -($gridGutter / 2);

  @include at-query($min, $postSmall) {
    margin-left: -$gridGutter;
  }
}

#{$class-type}grid__item {
  @include box-sizing();
  float: left;
  min-height: 1px;
  padding-left: $gridGutter / 2;
  vertical-align: top;

  @if $mobile-first == true {
    width: 100%;
  }

  @include at-query($min, $postSmall) {
    padding-left: $gridGutter;
  }
}

#{$class-type}grid--small {
  margin-left: -10px;

  .grid__item {
    padding-left: 10px;
  }
}

/*============================================================================
  Reversed grids allow you to structure your source in the opposite
  order to how your rendered layout will appear.
==============================================================================*/
#{$class-type}grid--rev {
  @extend #{$class-type}grid;
  direction: rtl;
  text-align: left;

  > #{$class-type}grid__item {
    direction: ltr;
    text-align: left;
    float: right;
  }
}

/* Gutterless grids have all the properties of regular grids, minus any spacing. */
#{$class-type}grid--full {
  @extend #{$class-type}grid;
  margin-left: 0;

  > #{$class-type}grid__item {
    padding-left: 0;
  }
}

/*============================================================================
  WIDTHS
    - Create width classes, prefixed by the specified namespace.
==============================================================================*/
@mixin device-type($namespace:"") {
  /** Whole */
  #{$class-type}#{$namespace}one-whole       { width: 100%; }

  /* Halves */
  #{$class-type}#{$namespace}one-half        { width: 50%; }

  /* Thirds */
  #{$class-type}#{$namespace}one-third       { width: 33.333%; }
  #{$class-type}#{$namespace}two-thirds      { width: 66.666%; }

  /* Quarters */
  #{$class-type}#{$namespace}one-quarter     { width: 25%; }
  #{$class-type}#{$namespace}two-quarters    { width: 50%; }
  #{$class-type}#{$namespace}three-quarters  { width: 75%; }

  /* Fifths */
  #{$class-type}#{$namespace}one-fifth       { width: 20%; }
  #{$class-type}#{$namespace}two-fifths      { width: 40%; }
  #{$class-type}#{$namespace}three-fifths    { width: 60%; }
  #{$class-type}#{$namespace}four-fifths     { width: 80%; }

  /* Sixths */
  #{$class-type}#{$namespace}one-sixth       { width: 16.666%; }
  #{$class-type}#{$namespace}two-sixths      { width: 33.333%; }
  #{$class-type}#{$namespace}three-sixths    { width: 50%; }
  #{$class-type}#{$namespace}four-sixths     { width: 66.666%; }
  #{$class-type}#{$namespace}five-sixths     { width: 83.333%; }

  /* Eighths */
  #{$class-type}#{$namespace}one-eighth      { width: 12.5%; }
  #{$class-type}#{$namespace}two-eighths     { width: 25%; }
  #{$class-type}#{$namespace}three-eighths   { width: 37.5%; }
  #{$class-type}#{$namespace}four-eighths    { width: 50%; }
  #{$class-type}#{$namespace}five-eighths    { width: 62.5%; }
  #{$class-type}#{$namespace}six-eighths     { width: 75%; }
  #{$class-type}#{$namespace}seven-eighths   { width: 87.5%; }

  /* Tenths */
  #{$class-type}#{$namespace}one-tenth       { width: 10%; }
  #{$class-type}#{$namespace}two-tenths      { width: 20%; }
  #{$class-type}#{$namespace}three-tenths    { width: 30%; }
  #{$class-type}#{$namespace}four-tenths     { width: 40%; }
  #{$class-type}#{$namespace}five-tenths     { width: 50%; }
  #{$class-type}#{$namespace}six-tenths      { width: 60%; }
  #{$class-type}#{$namespace}seven-tenths    { width: 70%; }
  #{$class-type}#{$namespace}eight-tenths    { width: 80%; }
  #{$class-type}#{$namespace}nine-tenths     { width: 90%; }

  /* Twelfths */
  #{$class-type}#{$namespace}one-twelfth     { width: 8.333%; }
  #{$class-type}#{$namespace}two-twelfths    { width: 16.666%; }
  #{$class-type}#{$namespace}three-twelfths  { width: 25%; }
  #{$class-type}#{$namespace}four-twelfths   { width: 33.333%; }
  #{$class-type}#{$namespace}five-twelfths   { width: 41.666% }
  #{$class-type}#{$namespace}six-twelfths    { width: 50%; }
  #{$class-type}#{$namespace}seven-twelfths  { width: 58.333%; }
  #{$class-type}#{$namespace}eight-twelfths  { width: 66.666%; }
  #{$class-type}#{$namespace}nine-twelfths   { width: 75%; }
  #{$class-type}#{$namespace}ten-twelfths    { width: 83.333%; }
  #{$class-type}#{$namespace}eleven-twelfths { width: 91.666%; }
}

/*================ Clearfix helper on uniform grids ================*/
@mixin clearfix-helper($namespace:"") {
  .grid-uniform {
    #{$class-type}#{$namespace}one-half:nth-child(2n+1),
    #{$class-type}#{$namespace}one-third:nth-child(3n+1),
    #{$class-type}#{$namespace}one-quarter:nth-child(4n+1),
    #{$class-type}#{$namespace}one-fifth:nth-child(5n+1),
    #{$class-type}#{$namespace}one-sixth:nth-child(6n+1),
    #{$class-type}#{$namespace}two-sixths:nth-child(3n+1),
    #{$class-type}#{$namespace}three-sixths:nth-child(2n+1),
    #{$class-type}#{$namespace}two-eighths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-eighths:nth-child(2n+1),
    #{$class-type}#{$namespace}five-tenths:nth-child(2n+1),
    #{$class-type}#{$namespace}one-twelfth:nth-child(12n+1),
    #{$class-type}#{$namespace}two-twelfths:nth-child(6n+1),
    #{$class-type}#{$namespace}three-twelfths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-twelfths:nth-child(3n+1),
    #{$class-type}#{$namespace}six-twelfths:nth-child(2n+1)    { clear: both; }
  }
}

/*================ Helper show/hide classes around our breakpoints ================*/
@mixin device-helper($namespace:"") {
  #{$class-type}#{$namespace}show        { display: block!important; }
  #{$class-type}#{$namespace}hide        { display: none!important; }

  #{$class-type}#{$namespace}text-left   { text-align: left!important; }
  #{$class-type}#{$namespace}text-right  { text-align: right!important; }
  #{$class-type}#{$namespace}text-center { text-align: center!important; }

  #{$class-type}#{$namespace}left        { float: left!important; }
  #{$class-type}#{$namespace}right       { float: right!important; }
}

/*================ Our regular, non-responsive width and helper classes ================*/
@include device-type();
@include device-helper();

/*================ Our responsive classes, if we have enabled them ================*/
@if $responsive == true {
  @each $name in $breakpoint-has-widths {
    @include grid-media-query($name) {
      @include device-type('#{$name}--');
      @include device-helper('#{$name}--');
      @include clearfix-helper('#{$name}--');
    }
  }
}

/*============================================================================
  PUSH
    - Push classes, to move grid items over to the right by certain amounts
==============================================================================*/
@mixin push-setup($namespace: "") {
  /* Whole */
  #{$class-type}push--#{$namespace}one-whole       { left: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}push--#{$namespace}one-half        { left: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}push--#{$namespace}one-third       { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-thirds      { left: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}push--#{$namespace}one-quarter     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-quarters    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-quarters  { left: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}push--#{$namespace}one-fifth       { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-fifths      { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-fifths    { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-fifths     { left: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}push--#{$namespace}one-sixth       { left: 16.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-sixths      { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-sixths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-sixths     { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-sixths     { left: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}push--#{$namespace}one-eighth      { left: 12.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-eighths     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-eighths   { left: 37.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-eighths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-eighths    { left: 62.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-eighths     { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-eighths   { left: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}push--#{$namespace}one-tenth       { left: 10%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-tenths      { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-tenths    { left: 30%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-tenths     { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-tenths     { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-tenths      { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-tenths    { left: 70%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-tenths    { left: 80%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-tenths     { left: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}push--#{$namespace}one-twelfth     { left: 8.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-twelfths    { left: 16.666%; @include silent-relative();  }
  #{$class-type}push--#{$namespace}three-twelfths  { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-twelfths   { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-twelfths   { left: 41.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-twelfths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-twelfths  { left: 58.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-twelfths  { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-twelfths   { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}ten-twelfths    { left: 83.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eleven-twelfths { left: 91.666%; @include silent-relative(); }
}

@if $push == true {
  [class*="push--"]{ position:relative; }

  @include push-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-push {
      @include grid-media-query($name) {
        @include push-setup('#{$name}--');
      }
    }
  }
}

/*============================================================================
  PULL
    - Pull classes, to move grid items back to the left by certain amounts
==============================================================================*/
@mixin pull-setup($namespace: "") {
  /* Whole */
  #{$class-type}pull--#{$namespace}one-whole       { right: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}pull--#{$namespace}one-half        { right: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}pull--#{$namespace}one-third       { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-thirds      { right: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}pull--#{$namespace}one-quarter     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-quarters    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-quarters  { right: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}pull--#{$namespace}one-fifth       { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-fifths      { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-fifths    { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-fifths     { right: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}pull--#{$namespace}one-sixth       { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-sixths      { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-sixths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-sixths     { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-sixths     { right: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}pull--#{$namespace}one-eighth      { right: 12.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-eighths     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-eighths   { right: 37.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-eighths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-eighths    { right: 62.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-eighths     { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-eighths   { right: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}pull--#{$namespace}one-tenth       { right: 10%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-tenths      { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-tenths    { right: 30%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-tenths     { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-tenths     { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-tenths      { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-tenths    { right: 70%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-tenths    { right: 80%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-tenths     { right: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}pull--#{$namespace}one-twelfth     { right: 8.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-twelfths    { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-twelfths  { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-twelfths   { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-twelfths   { right: 41.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-twelfths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-twelfths  { right: 58.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-twelfths  { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-twelfths   { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}ten-twelfths    { right: 83.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eleven-twelfths { right: 91.666%; @include silent-relative(); }
}

@if $pull == true {
  [class*="pull--"]{ position:relative; }

  @include pull-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-pull {
      @include grid-media-query($name) {
        @include pull-setup('#{$name}--');
      }
    }
  }
}

/*================ Partials | Helper Classes ================*/
.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both; }
  *zoom: 1;
}

.is-transitioning {
  display: block !important;
  visibility: visible !important;
}

.visually-hidden {
  @include visuallyHidden();
}

/*============================================================================
  #OOCSS Media Object
    - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
==============================================================================*/
.media,
.media-flex {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.media-img {
  float: left;
  margin-right: $gutter;
}

.media-img-right {
  float: right;
  margin-left: $gutter;
}

.media-img img,
.media-img-right img {
  display: block;
}

/*=============== Image Transitions ===================*/
.fade-in {
  opacity: 0;
  transition: opacity 250ms ease-out;

  &.lazyloaded {
    opacity: 1;
  }

  .no-js & {
    @include visuallyHidden();
  }
}

/*================ Partials | Links and Buttons ================*/
a,
.text-link {
  color: $colorLink;
  text-decoration: none;
  background: transparent;

  &:hover {
    color: $colorLinkHover;
  }
}

a[href^="tel"] {
  color: inherit;
}

button {
  overflow: visible;
}

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

.btn,
.rte .btn {
  display: inline-block;
  padding: 8px 10px;
  margin: 0;
  width: auto;
  line-height: 1.42;
  font-weight: $accentFontWeightBold;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  cursor: pointer;
  border: 1px solid transparent;
  @include prefix("user-select", "none");
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: $radius;

  /*================ Set primary button colors - can override later ================*/
  background-color: $colorBtnPrimary;
  color: $colorBtnPrimaryText;
  @include transition(background-color 0.4s ease-out);

  &:hover {
    @include transition(background-color 0.15s ease-out);
    background-color: $colorBtnPrimaryHover;
    color: $colorBtnPrimaryText;
  }

  &:active {
    @include transition(background-color 0.15s ease-out);
    background-color: $colorBtnPrimaryActive;
    color: $colorBtnPrimaryText;
  }

  &[disabled],
  &.disabled {
    cursor: default;
    color: darken($disabledBorder, 27%);
    background-color: $disabledGrey;
  }
}

.btn--secondary,
.rte .btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;

  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }

  &:active {
    background-color: $colorBtnSecondaryActive;
    color: $colorBtnSecondaryText;
  }
}

.btn--secondary-accent {
  background-color: $colorBody;
  border: 1px solid $colorBtnSecondaryAccent;
  color: $colorBtnSecondaryAccent;

  &:hover,
  &:focus {
    background-color: $colorBody;
    border: 1px solid $colorBtnSecondaryAccentHover;
    color: $colorBtnSecondaryAccentHover;
  }

  &:active {
    background-color: $colorBody;
    border: 1px solid $colorBtnSecondaryAccentActive;
    color: $colorBtnSecondaryAccentActive;
  }

  &[disabled],
  &.disabled {
    cursor: default;
    color: darken($disabledBorder, 27%);
    background-color: $disabledGrey;
    border: none;

    &:hover {
      opacity: 1;
    }
  }
}

.btn--small {
  padding: 4px 5px;
  font-size: em(12px);
}

.btn--large {
  padding: 12px 15px;
  font-size: em(16px);
}

.btn--full {
  width: 100%;
}

/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}

/*================ Partials | Images, SVG, and iframes ================*/
img {
  border: 0 none;
}

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

img,
iframe {
  max-width: 100%;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  height: auto;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

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

/*================ Partials | Forms ================*/
form {
  margin: 0;
}

.form-vertical {
  margin-bottom: $gutter / 2;
}

/*================ Prevent zoom on touch devices in active inputs ================*/
@include at-query($max, $medium) {
  input,
  textarea {
    font-size: 16px;
  }
}

button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button {
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer;
}

fieldset {
  border: 1px solid $colorBorder;
  padding: $gutter / 2;
}

legend {
  border: 0;
  padding: 0;
}

button,
input[type="submit"] {
  cursor: pointer;
}

input,
textarea,
select {
  border: 1px solid $colorBorder;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: $radius;

  &[disabled],
  &.disabled {
    cursor: default;
    background-color: $disabledGrey;
    border-color: $disabledBorder;
  }

  &.input-full {
    width: 100%;
  }
}

textarea {
  min-height: 100px;
}

/*================ Input element overrides ================*/
input[type="checkbox"],
input[type="radio"] {
  margin: 0 10px 0 0;
  padding: 0;
  width: auto;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-position: right center;
  background: {
    image: url('//kundebrand.com/cdn/shop/t/8/assets/ico-select.svg?v=80103462439189041331756284357');
    repeat: no-repeat;
    position: right 10px center;
    color: transparent;
  }
  padding-right: 28px;
  text-indent: 0.01px;
  text-overflow: "";
  cursor: pointer;
}

optgroup {
  font-weight: $accentFontWeightBold;
}

// Force option color (affects IE only)
option {
  color: #000;
  background-color: #fff;
}

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

/*================ Form labels ================*/
.hidden-label {
  @include visuallyHidden();
}

label[for] {
  cursor: pointer;
}

/*================ Vertical Form ================*/
.form-vertical {
  input,
  select,
  textarea {
    display: block;
    margin-bottom: 10px;
  }

  input[type="checkbox"],
  input[type="radio"],
  .btn {
    display: inline-block;
  }

  .btn {
    display: inline-block;
  }
}

/*================ Error styles ================*/
input,
textarea {
  &.error {
    border-color: $errorRed;
    background-color: $errorRedBg;
    color: $errorRed;
  }
}

label.error {
  color: $errorRed;
}

/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  .input-group-field:first-child,
  .input-group-btn:first-child,
  .input-group-btn:first-child > .btn,
  input[type="hidden"]:first-child + .input-group-field,
  input[type="hidden"]:first-child + .input-group-btn > .btn {
    border-radius: $radius 0 0 $radius;
  }

  .input-group-field:last-child,
  .input-group-btn:last-child > .btn {
    border-radius: 0 $radius $radius 0;
  }

  input {
    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top: -1px;
      margin-bottom: -1px;
    }
  }
}

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

.input-group .btn,
.input-group .input-group-field {
  height: 37px;
}

.input-group .input-group-field {
  width: 100%;
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

/*================ Selector wrapper ================*/
.selector-wrapper {
  label {
    margin-right: 10px;
  }

  + .selector-wrapper {
    margin-top: $gutter / 2;
  }
}

/*================ Partials | Icons ================*/
@font-face {
  font-family: 'icons';
  src: url('//kundebrand.com/cdn/shop/t/8/assets/icons.eot?v=112981532348062652561634188250');
  src: url('//kundebrand.com/cdn/shop/t/8/assets/icons.eot?v=112981532348062652561634188250#iefix') format('embedded-opentype'),
    url('//kundebrand.com/cdn/shop/t/8/assets/icons.woff?v=24089382976848351381634188253') format('woff'),
    url('//kundebrand.com/cdn/shop/t/8/assets/icons.ttf?v=177851439206450752971634188252') format('truetype'),
    url('//kundebrand.com/cdn/shop/t/8/assets/icons.svg?v=182753167674510223691634188251#timber-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}
$socialIconFontStack: 'icons';

.icon-fallback-text .icon {
  display: none;

  .supports-fontface & {
    display: inline-block;
  }
}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.supports-fontface .icon-fallback-text .fallback-text {
  @include visuallyHidden();
}

.icon:before {
  display: none;
}

.supports-fontface .icon:before {
  display: inline;
  font-family: $socialIconFontStack;
  text-decoration: none;
  speak: none; // future fallback, limited in effect currently
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*================ Icon mapping ================*/
.icon-arrow-down:before { content:'\e607'; }
.icon-arrow-left:before { content:'\e900'; }
.icon-arrow-right:before { content:'\e901'; }
.icon-cart:before { content:'\e600'; }
.icon-customer:before { content:'\e605'; }
.icon-facebook:before { content:'\e609'; }
.icon-fancy:before { content:'\46'; }
.icon-google_plus:before { content:'\e90a'; }
.icon-hamburger:before { content:'\e601'; }
.icon-instagram:before { content:'\e907'; }
.icon-minus:before { content:'\e602'; }
.icon-pause:before { content: "\e902"; }
.icon-pin:before { content:'\e90d'; }
.icon-pinterest:before { content:'\e608'; }
.icon-play:before { content: "\e904"; }
.icon-plus:before { content:'\e603'; }
.icon-rss:before { content:'\72'; }
.icon-saletag:before { content: "\e906"; }
.icon-search:before { content:'\73'; }
.icon-snapchat:before { content:'\e90b'; }
.icon-slide-prev:before { content: "\e903"; }
.icon-slide-next:before { content: "\e905"; }
.icon-tumblr:before { content:'\74'; }
.icon-twitter:before { content:'\54'; }
.icon-vimeo:before { content:'\76'; }
.icon-x:before { content:'\e604'; }
.icon-youtube:before { content:'\79'; }

.payment-icons {
  @include prefix('user-select', 'none');
  cursor: default;
  margin-bottom: 0;

  li {
    margin: 0 0 ($gutter / 4) ($gutter / 4);
    cursor: default;
  }

  .fallback-text {
    text-transform: capitalize;
  }

  .icon {
    width: 38px;
    height: 24px;
  }
}



.social-icons .icon {
  padding-right: 4px;
}

.social-icons .icon-google_plus {
  font-size: 0.8em;
}

/*================ Partials | Drawers ================*/
.js-drawer-open {
  overflow: hidden;
}

.drawer {
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  padding: 0 ($gutter / 2) ($gutter / 2);
  max-width: 95%;
  z-index: $zindexDrawer;
  color: $colorDrawerText;
  background-color: $colorDrawers;
  @include transition($drawerTransition);

  @include at-query($min, $large) {
    padding: 0 $gutter $gutter;
  }

  a {
    color: $colorDrawerText;

    &:hover {
      color: $colorDrawerText;
    }
  }

  input[type='text'],
  input[type='email'],
  input[type='number'],
  textarea {
    border-color: $colorDrawerBorder;
  }

  .btn--secondary {
    background-color: $colorDrawerButton;
    color: $colorDrawerButtonText;
  }
}

.drawer--left {
  width: $drawerNavWidth;
  left: -$drawerNavWidth;

  .js-drawer-open-left & {
    display: block;
    @include transform(translateX($drawerNavWidth));
  }
}

.drawer--right {
  width: $drawerCartWidth;
  right: -$drawerCartWidth;

  @include at-query($min, $postSmall) {
    width: $drawerCartWidthLarge;
    right: -$drawerCartWidthLarge;
  }

  .js-drawer-open-right & {
    display: block;
    @include transform(translateX(-$drawerCartWidth));

    @include at-query($min, $postSmall) {
      @include transform(translateX(-$drawerCartWidthLarge));
    }
  }
}

.page-container,
.drawer__header-container {
  @include transition($drawerTransition);

  .js-drawer-open-left & {
    @include transform(translateX($drawerNavWidth));
  }

  .js-drawer-open-right & {
    @include transform(translateX(-$drawerCartWidth));

    @include at-query($min, $postSmall) {
      @include transform(translateX(-$drawerCartWidthLarge));
    }
  }
}

.drawer__header {
  display: table;
  height: $drawerHeaderHeight;
  width: 100%;
  margin-bottom: $gutter / 2;
  border-bottom: 1px solid $colorDrawerBorder;
}

.drawer__title,
.drawer__close {
  display: table-cell;
  vertical-align: middle;
}

.drawer__title {
  width: 100%;
}

.drawer__close {
  width: 1%;
  text-align: center;
}

// Button sits on right by default
.drawer__close-button {
  position: relative;
  right: -20px;
  height: 100%;
  padding: 0 20px;
  color: inherit;

  &:active {
    background-color: darken($colorDrawers, 5%);
  }
}

// Rare use case left close button
.drawer__close--left {
  text-align: left;

  .drawer__close-button {
    right: auto;
    left: -20px;
  }
}

/*================ Cart-specific styles ================*/
.supports-csstransforms .drawer--is-loading .drawer__cart {
  min-height: 100px;

  &:after {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 50%;
    top: $gutter * 2;
    margin-left: -12px;
    border-radius: 50%;
    border: 3px solid $colorDrawerBorder;
    border-top-color: transparent;
    @include animation(spin 1s infinite linear);
  }
}



/*================ Module-specific styles ================*/
/*================ Module | Footer ================*/
.site-footer {
  padding-bottom: $gutter;

  @include at-query($max, $small) {
    .grid__item {
      padding-bottom: 5px;
    }
  }

  a {
    color: $colorTextBody;

    &:active {
      color: darken($colorTextBody, 20%);
    }

    &:hover {
      color: lighten($colorTextBody, 20%);
    }
  }
}

.site-footer__linklist {
  @include at-query($min, $postSmall) {
    margin-bottom: $footer-spacing-small;
  }
}

.site-footer__payment-icons {
  margin-left: -1 * $footer-spacing-extra-small;
}

/*================ Module | Notes and Form Feedback ================*/
.note,
.errors {
  border-radius: $radius;
  padding: 6px 12px;
  margin-bottom: $gutter / 2;
  border: 1px solid transparent;
  font-size: 0.9em;
  text-align: left;

  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }

  li:last-child {
    margin-bottom: 0;
  }

  p {
    margin-bottom: 0;
  }
}

.note {
  border-color: $colorBorder;
}

.errors {
  ul {
    list-style: disc outside;
    margin-left: 20px;
  }
}

.form-success {
  color: $successGreen;
  background-color: $successGreenBg;
  border-color: $successGreen;

  a {
    color: $successGreen;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

.form-error,
.errors {
  color: $errorRed;
  background-color: $errorRedBg;
  border-color: $errorRed;

  a {
    color: $errorRed;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

/*================ Module | Pagination ================*/
.pagination {
  @include accentFontStack;
  margin: 0;
  padding: ($gutter * 2) 0 0;
  text-align: center;
  font-size: em(14px);

  > span {
    display: inline-block;
    line-height: 1;
  }

  a {
    display: block;
  }

  a,
  .page.current {
    padding: 8px;
  }

  .page.current {
    color: $colorSecondary;
  }

  // Hard code font family for arrows as some fonts don't include them
  .next,
  .prev {
    font-family: arial, helvetica, sans-serif;
  }
}

/*================ Module | Rich Text Editor ================*/
.rte {
  @include clearfix;
  margin-bottom: $gutter / 2;

  p,
  ul,
  ol,
  table {
    margin-bottom: 25px;
  }

  ul {
    ul {
      margin-bottom: 0;
    }
  }

  a {
    text-decoration: none;
  }

  .text-link {
    border-bottom: 1px solid $colorLink;

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

  // Add some top margin to headers from the rich text editor
  h1, h4, h5, h6 {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  h2, h3 {
    margin-top: 2.5em;
    margin-bottom: 2em;
  }

  h1, h2, h3, h4, h5, h6 {
    &:first-child {
      margin-top: 0;
    }

    a {
      text-decoration: none;
    }
  }

  > div {
    margin-bottom: $gutter / 2;
  }

  li {
    margin-bottom: 0;
  }

  > p:last-child {
    margin-bottom: 0;
  }

  table {
    table-layout: fixed;
  }
}

.text-center .rte,
.text-center.rte {
  ul,
  ol {
    list-style-position: inside;
    margin-left: 0;
  }
}

.rte--nomargin {
  margin-bottom: 0;
}

/*================ Indented article/page images and blockquotes ================*/
.rte--indented-images {
  img:not([style]),
  img[style="float: none;"] {
    max-width: 120%;
    margin-left: -10%;

    // Class added if image isn't wider than parent
    &.rte__no-indent {
      margin: 0 auto;
      max-width: 100%;
    }
  }

  img[style="float: right;"] {
    margin: 0 -10% ($gutter / 2) ($gutter / 2);
  }

  img[style="float: left;"] {
    margin: 0 ($gutter / 2) ($gutter / 2) -10%;
  }
}

@include at-query($min, $large) {
  .rte blockquote {
    width: 120%;
    margin-left: -10%;
    padding-left: 0;
    padding-right: 0;

    p {
      margin-bottom: 0;
    }
  }
}

/*================ Module | Site Header ================*/
.site-header {
  background-color: $colorBody;
  padding: 15px 0;

  .grid--table {
    display: table;
    table-layout: fixed;
    width: 100%;

    > .grid__item {
      float: none;
      display: table-cell;
      vertical-align: middle;
    }
  }

  .header-wrapper--transparent & {
    background-color: transparent;
  }
}

.site-header__logo {
  text-align: center;
  margin: 0 auto;
}

.site-header__logo-image {
  display: block;
  margin: 0 auto;

  .header-wrapper--transparent & {
    display: none;
  }
}

.site-header__logo-image--transparent {
  display: none;

  .header-wrapper--transparent & {
    display: block;
  }
}

.site-header__logo-link {
  display: block;
}

.site-header__logo-link,
.site-header__logo-link:hover {
  color: $colorNavText;
  margin: 0 auto;
  text-decoration: none;
}

.announcement-bar {
  display: block;
  text-align: center;
  position: relative;
  text-decoration: none;
}

.announcement-bar__message {
  display: block;
  font-weight: $headerFontWeight;
  padding: 10px $gutter;
  margin: 0;
}

/*================ Module | Search Bar ================*/
.search-bar {
  max-width: 100%;
}

.search-bar--page {
  max-width: 300px;
  margin: 0 auto;
}

.search-bar--modal {
  max-width: 300px;
  margin: 20% auto 0;
}

.search-bar--header {
  max-width: 300px;
  background-color: $colorInputBg;
}

.search-bar--drawer {
  margin-bottom: $gutter / 2;
}

/*================ Module | Section Headers ================*/
.section-header {
  margin-bottom: 30px;

  .section-header__title {
    letter-spacing: 0;
  }

  @include at-query($min, $postSmall) {
    margin-bottom: 50px;
  }
}

.section-header--404 {
  margin-bottom: 0;
  padding: 80px 0;
}

@include at-query ($min, $large) {
  .section-header {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .section-header__title {
    margin-bottom: $gutter / 2.5;
  }

  .section-header__left {
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 0;

    h1, h2, h3, h4,
    .h1, .h2, .h3, .h4 {
      margin-bottom: 0;
    }
  }
}

/*================ Module | Site Nav and Dropdowns ================*/
.site-nav {
  cursor: default;
  margin: 0;
  margin-left: -$gutter / 2;
}

.site-nav__item {
  position: relative;
  display: inline-block;
  margin: 0;

  li {
    display: block;
  }
}

.site-nav--mobile {
  @extend .site-nav;
  margin-left: -10px;

  &.text-right {
    margin: 0 -10px 0 0;
  }
}

.site-nav__link {
  display: inline-block;
  text-decoration: none;
  padding: $gutter / 2;
  white-space: nowrap;
  font-size: em(14px);

  .icon-arrow-down {
    position: relative;
    top: -2px;
    padding-left: $gutter / 4;
    font-size: 10px;
  }
}

.site-nav__dropdown-link {
  .icon-arrow-down {
    position: absolute;
    top: 50%;
    right: $gutter / 2;
    font-size: 10px;
    @include transform("translateY(-50%) rotate(-90deg)");
  }
  .site-nav__dropdown-grandchild & {
    white-space: normal;
  }
}

.site-nav__link--icon {
  padding-left: $gutter / 4;
  padding-right: $gutter / 4;
}

.site-nav--mobile {
  .site-nav__link {
    display: inline-block;
  }

  .icon {
    font-size: em(30px);
  }
}

/*================ Dropdowns ================*/
.site-nav__dropdown {
  opacity: 0;
  display: block;
  position: absolute;
  left: 0;
  margin: 0;
  z-index: $zindexNavDropdowns;
  pointer-events: none;

  a {
    background-color: $colorNav;
    text-align: left;

    &:hover,
    &:active {
      background-color: darken($colorNav, 10%);
    }
  }

  &.nav-outside {
    left: auto;
    right: 0;
  }
}

.site-nav__dropdown-grandchild {
  position: absolute;
  top: -10px; // Match dropdown padding
  left: 100%;
  width: 100%;
  margin: 0;
  z-index: $zindexNavDropdowns;
  opacity: 0;
  pointer-events: none;

  a {
    background-color: $colorNav;

    &:hover,
    &:active {
      background-color: darken($colorNav, 10%);
    }
  }

  ul {
    background-color: $colorNav;
    padding: ($gutter / 3) 0;
    // Grand children dropdown is 2px off parent dropdown
    margin: 0 0 0 2px;
  }

  &.nav-outside {
    left: -100%;
  }
}

/*================ Mobile navigation ================*/
.mobile-nav {
  // Negative of .drawer left/right padding for full-width link tap area
  margin: (-$gutter / 2) (-$gutter / 2) 0 (-$gutter / 2);

  li {
    margin-bottom: 0;
    list-style: none;
  }
}

.mobile-nav__search {
  padding: $gutter / 2;
}

.mobile-nav__item {
  position: relative;
  display: block;

  // Background color on top level items so there is no
  // element overlap on subnav's CSS toggle animation
  .mobile-nav > & {
    background-color: $colorDrawers;
  }

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: $gutter / 2;
    right: $gutter / 2;
    border-bottom: 1px solid $colorDrawerBorder;
  }

  .mobile-nav > &:last-child:after {
    display: none;
  }
}

.mobile-nav__item a {
  display: block;
  font-size: 22px;
  .mobile-nav__subsublist & {
    padding-left: 45px;
    font-size: 16px;
  }
}

.mobile-nav__item a,
.mobile-nav__toggle button {
  color: $colorDrawerText;
  padding: $gutter / 2;
  text-decoration: none;

  &:active,
  &:focus {
    color: darken($colorDrawerText, 15%);
    background-color: darken($colorDrawers, 5%);
  }
}

.mobile-nav__item--secondary {
  a {
    font-size: 16px;
    color: adaptive-color($colorDrawerText, 25%);
    line-height: 1.2;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  &:after {
    display: none;
  }
}

.mobile-nav__spacer {
  height: 0;
  padding: 5px;
}

.mobile-nav__has-sublist {
  display: table;
  width: 100%;

  .mobile-nav__link {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
}

.mobile-nav__toggle {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
}

.mobile-nav__toggle-open {
  display: block;

  .mobile-nav--expanded & {
    display: none;
  }
}

.mobile-nav__toggle-close {
  display: none;

  .mobile-nav--expanded & {
    display: block;
  }
}

.mobile-nav__sublist {
  margin: 0;
  display: none;

  .mobile-nav__item:after {
    top: 0;
    bottom: auto;
  }

  .mobile-nav__link {
    padding-left: $gutter;
    font-weight: $bodyFontWeight;
  }
}

/*================ Cart bubble for items in cart ================*/
@include at-query($min, $large) {
  .site-nav__link--icon .icon {
    font-size: em(22px);
  }
}

.cart-link {
  position: relative;
}

.cart-link__bubble {
  display: none;
}

.cart-link__bubble--visible {
  display: block;
  position: absolute;
  top: 18px;
  right: 4px;
  width: 10px;
  height: 10px;
  background-color: $colorSecondary;
  border-radius: 50%;

  @include at-query($max, $medium) {
    top: 22px;
    right: 12px;
  }
}


/*================ View-specific styles ================*/
/*================ Templates | Cart Page ================*/

.cart__header-labels {
  @include accentFontStack;
}

.cart__row {
  position: relative;
  margin-bottom: $gutter;

  &:first-child {
    border-bottom: 1px solid $colorBorder;
    padding-bottom: $gutter / 2;
  }

  .js-qty {
    margin: 0 auto;
  }

  .btn,
  .btn--secondary {
    margin-bottom: $gutter / 2;
  }
}

@include at-query($min, $postSmall) {
  .update-cart + .cart__checkout {
    margin-left: $gutter / 2;
  }
}

.cart__row--last {
  border-top: 1px solid $colorBorder;
  padding-top: $gutter / 2;
}

.cart__row--table {
  display: table;
  table-layout: fixed;
  width: 100%;

  .grid__item {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}

.cart__row--table-with-discount {

  .grid__item {
    vertical-align: top;
  }
}

@include at-query ($min, $large) {
  .cart__row--table-large {
    display: table;
    table-layout: fixed;
    width: 100%;

    .grid__item {
      display: table-cell;
      vertical-align: middle;
      float: none;
    }
  }
}

.cart__image {
  display: block;

  img {
    width: 100%;
    display: block;
  }
}

.cart__pricing {

  @include at-query($max, $medium) {
    margin-top: $gutter;
  }
}

.cart__product-name {
  margin-bottom: 0;

  @include at-query($min, $medium) {
    width: 90%;
  }
}

.cart__product-qty {
  text-align: center;
  margin: 0 auto;
  max-width: 80px;
}

.cart__note-container {
  vertical-align: top !important;
}

.cart__note {
  margin: 0;

  @include at-query($min, $large) {
    padding-right: $gutter;
  }
}

.cart__subtotal-container {
  margin-top: 25px;

  @include at-query($min, $large) {
    margin: 0;
  }
}

.cart__discounts {
  display: flex;
  justify-content: center;
  margin-bottom: $gutter / 2;

  @include at-query($min, $large) {
    justify-content: flex-end;
  }
}

.cart__product-meta {
  margin-bottom: 0;
}

.additional_checkout_buttons {
  margin-left: -10px;

  & > *:not(script) {
    padding: 15px 0 0 15px;
    vertical-align: top;
    line-height: 1;

    @include at-query($max, $small) {
      padding: 15px 0 0 5px;
    }

    &:first-child,
    &:empty {
      padding-left: 0px;
    }
  }
}

.cart--continue-browsing {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}

/*================ Templates | Product Page ================*/
.product-single {
  text-align: center;
}

.product-single__meta--wrapper {
  padding-left: 45px;
  padding-right: 25px;
}

.product-single__meta {
  padding-top: 36px;
}

.product-single__vendor {
  letter-spacing: 0.2em;
  font-size: em(12px);
}

.product-single__title {
  font-size: em(30px);
  margin-bottom: $gutter / 2;
  word-wrap: break-word;

  @include at-query($min, $postSmall) {
    font-size: em(36px);
  }
}

.product-single__quantity {
  margin-top: 10px;
}

.product-single__add-to-cart {
  margin: 0 0 10px 0;
  display: inline-flex;
  flex-flow: row wrap;
  align-items: flex-start;

  &.default-product {
    margin-top: 20px;
  }
}

.product-single__form--no-variants {
  margin-top: 30px;
}

.product-single__add-to-cart--full-width {
  width: 100%;
}

.btn--add-to-cart {
  margin: 10px 10px 0 0;
  min-width: 155px;
  flex: auto;

  &.btn {
    padding: 12px 30px;
  }

  .product-single__add-to-cart--full-width & {
    flex-basis: 100%;
    margin-right: 0;
  }
}

.product-single__description {
  margin-top: 40px;
  text-align: left;
}

.product-single__full-details {
  cursor: pointer;
  display: inline-block;
  margin: 30px 0;
}

.product-single__variants {
  display: none;

  .no-js & {
    display: block;
  }
}

.product-single__media-flex-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
}

.product-single__media-flex {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-item-align: center;
  -webkit-align-self: center;
  align-self: center;
}

.product-single__media-wrapper {
  margin: 0 auto;
  text-align: left;

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

@include at-query($min, $postSmall) {
  .product-single__media-wrapper--featured-product {
    margin-bottom: 0;
  }

  .product-single__media {
    [data-mfp-src] {
      cursor: zoom-in;
    }
  }

  .product-single__media--wrapper {
    margin-bottom: $gutter / 2;
  }
}

.product-single__media {
  color: $colorHeadings;
  position: relative;
}

.product-single__media-wrapper--featured-product {
  margin: 0 auto;
}

.product-single__media--video {
  background-color: $colorProductBackground;
}

.product-single__media-group-wrapper,
.product-single__thumbnails {
  a,
  img {
    background-color: $colorProductBackground;
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }
}

@include at-query($max, $small) {
  .product-single__meta--wrapper {
    padding-right: $gutter;
    padding-left: $gutter / 2;
    margin: 0 ($gutter / 2);
  }

  .product-single__media-group-wrapper {
    margin-top: -$contentTopMarginSmall;
    margin-left: -($gutter / 2);
    margin-right: -($gutter / 2);
  }

  .product-single__media-group-wrapper--featured {
    margin-bottom: 55px;
  }
}

.product-single__hero {
  .grid__item {
    display: inline-block;
    float: none;
    vertical-align: middle;
  }

  @include at-query($min, $large) {
    .grid__item + .grid__item {
      margin-left: -5px;
    }
  }
}

.product-single__thumbnails {
  margin-left: -$gutter / 2;

  .grid__item {
    padding-left: $gutter / 2;
  }

  li {
    margin-bottom: $gutter / 2;
  }
}

.product-single__thumbnail-badge {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 3px;
  bottom: 3px;
  pointer-events: none;

  @include at-query($min, $xlarge) {
    width: 35px;
    height: 35px;
  }

  .icon {
    fill: $colorBody;
    width: 100%;
    height: 100%;
    vertical-align: baseline;
  }

  .icon-3d-badge-full-color-outline,
  .icon-video-badge-full-color-outline {
    stroke: rgba($colorHeadings, 0.05);
  }

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

.visibility-hidden {
  visibility: hidden;
}

.product-single__prices {
  margin-bottom: $gutter / 2;
}

.product-single__price,
.product-single__price--compare-at {
  @include accentFontStack;
  color: $colorHeadings;
  font-size: em(18px);
  font-weight: $headerFontWeight;

  &.on-sale {
    color: $colorSaleTag;
  }
}

.product-single__price--compare-at {
  padding-right: 5px;
  display: inline-block;
  text-decoration: line-through;
}

.product-single__unit {
  display: none;

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

.product-single__policies {
  margin: 15px 0 25px 0;
}

.product-single__quantity {
  .js-quantity-selector,
  .js-qty {
    display: inline-block;
  }
}

.product-single__quantity-label {
  margin-right: 10px;
}

#shopify-product-reviews {
  .spr-review-content-body,
  .spr-review-header-byline,
  .spr-form-label {
    font-size: $baseFontSize;
    line-height: 1.563;
  }

  .spr-form-label {
    display: block;
    text-align: left;
  }

  .spr-summary-actions-newreview {
    float: none;
  }

  .spr-summary-caption,
  .spr-summary-actions {
    display: block;
  }
}

.product-single__thumbnails {
  img,
  a {
    display: block;
    position: relative;
    background-color: transparent;
  }
}

.product-single__thumbnails {
  img {
    max-height: 135px;
    width: auto;
    overflow: hidden;
  }
}

.slick-initialized {
  .product-single__media-wrapper {
    display: block !important;
  }
}

.product-single__thumbnail {
  display: block;
  border: 2px solid transparent;

  &.active-thumb {
    border-color: $colorHeadings;
  }
}

.product-single__view-in-space {
  background-color: rgba($colorHeadings, 0.08);
  border: none;
  width: 100%;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin: 0;

  font-size: em(16px);
  color: $colorHeadings;

  &:not(.product-single__view-in-space--multi) {
    visibility: hidden;
  }

  &[data-shopify-xr-hidden] {
    @include at-query($min, $small) {
      display: none;
    }
  }

  &:hover,
  &:focus {
    .product-single__view-in-space-text {
      position: relative;

      &::after {
        content: '';
        width: 100%;
        display: block;
        border-bottom: 1px solid currentColor;
        bottom: 3px;
        position: absolute;
      }
    }
  }

  .icon {
    height: 16px;
    width: 14px;
    margin-right: 8px;
    fill: transparent;

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

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

.product-single__view-in-space--disabled {
  display: none;
}

.product-single__media-group.slick-initialized {
  margin-bottom: 0;
}

.product-single__media-group.slick-initialized,
.product-single__media-group--single-xr {
  & ~ .product-single__view-in-space:not([data-shopify-xr-hidden]) {
    visibility: visible;
  }

  .product-single__view-in-space--multi {
    display: none;
  }
}

@include at-query($min, $postSmall) {
  .product-single__media-flex-wrapper {
    margin-bottom: $gutter / 2;
  }

  .product-single__media-group--single-xr {
    .product-single__media-flex-wrapper {
      margin-bottom: 0;
    }

    & ~ .product-single__thumbnails {
      margin-top: $gutter / 2;
    }
  }
}

.shopify-payment-button {
  margin: 10px 10px 0 0;
  min-width: 155px;
  flex: auto;

  .product-single__add-to-cart--full-width & {
    margin-right: 0;
  }

  .shopify-payment-button__button {
    border-radius: $radius;
  }

  .shopify-payment-button__button--unbranded {
    @extend .btn;
    @include accentFontStack;
    margin-right: 0;
    width: 100%;
    min-height: 44px;
    font-size: em(13px);

    &:hover,
    &:focus {
      background-color: $colorBtnSecondaryAccentHover !important;
    }

    &:active {
      background-color: $colorBtnSecondaryAccentActive !important;
    }
  }

  .shopify-payment-button__more-options {
    font-size: em(14px);
    color: $colorNavText;
    white-space: nowrap;
    text-decoration: underline;
    padding: 0 15px;

    &:hover,
    &:focus {
      color: lighten($colorNavText, 12%);
    }

    &:active {
      color: adaptive-color($colorNavText, 24%);
    }
  }
}

.product-unit-price {
  color: $colorTextBody;
  display: block;
  
  
}