/*============================================================================
  _Font_face
==============================================================================*//*============================================================================
  _Functions
==============================================================================*/

/*================ _Control_color ================*/
@function color-control($color) {
  @if (lightness( $color ) > 50) {
    @return #000;
  }
  @else {
    @return #fff;
  }
}

@function color-control-reverse($color) {
  @if (lightness( $color ) > 50) {
    @return #fff;
  }
  @else {
    @return #000;
  }
}

/*================ _Adaptive_color ================*/
@function adaptive-color($color, $percentage) {
  @if (lightness($color) > 50) {
    @return darken($color, $percentage);
  }
  @else {
    @return lighten($color, $percentage);
  }
}

/*============================================================================
  _Variables
==============================================================================*/

/*================ _Master_variables ================*/

// Base font size
$baseFontSize: 14px;
$baseFontSize-sm: floor($baseFontSize * .8);
$baseFontSize-lg: floor($baseFontSize * 1.2);

// Spacer
$spacer: $baseFontSize;
$spacer-xs: floor($spacer * .25);
$spacer-sm: floor($spacer * .5);
$spacer-lg: floor($spacer * 1.5);

// Grid
$gutter: 30px;
$gutter-sm: 16px;
$gutter-xs: ($gutter-sm / 2);
$gutter-lg: ($gutter * 2);

// Body
$colorBody: #FFFFFF;
$colorBodyText: #444444;
$baseLineHeight: 1.5;
$scrollbarWidth: 16.5px;

// Default color
$colorDefault: #FFFFFF;

// Border
$borderWidth: 1px;
$colorBorder: #E5E5E5;
$borderStyle: solid;
$borders: ($borderWidth) ($borderStyle) ($colorBorder);

/*================ _All_variables ================*/
// Colors
$colorPrimary: #212529;
$colorSecondary: #e12222;
$colorButtonText: #FFFFFF;
$colorInput: #e5e5e5;
$colorSalesPrice: #e12222;

// Button size
$paddingButtonY: 16px;
$paddingButtonX: 24px;
$paddingButtonSmallY: 6px;
$paddingButtonSmallX: 10px;
$paddingButtonXsmallY: 4px;
$paddingButtonXsmallX: 8px;

// Input size
$heightInputBorder: $borderWidth * 2;
$heightInputInner: floor(($baseFontSize * $baseLineHeight) + ($paddingButtonY * 2));
$heightInput: $heightInputInner + $heightInputBorder;
$heightInputInnerSmall: floor(($baseFontSize * $baseLineHeight) + ($paddingButtonSmallY * 2));
$heightInputSmall: $heightInputInnerSmall + $heightInputBorder;
$heightInputInnerXsmall: floor(($baseFontSize-sm * $baseLineHeight) + ($paddingButtonXsmallY * 2));
$heightInputXsmall: $heightInputInnerXsmall + $heightInputBorder;

// Social medias
$colorFacebook: #3b5998;
$colorTwitter: #1da1f2;
$colorPinterest: #bd081c;
$colorInstagram: #e1306c;
$colorSnapchat: #fffc00;
$colorGoogle: #dd4b39;
$colorTumblr: #35465c;
$colorYoutube: #ff0000;
$colorVimeo: #1ab7ea;
$colorWhatsapp: #25d366;
$colorLinkedin: #0e76a8;
$colorReddit: #FF4500;
$colorMessenger: #0078FF;

// Dropdown
$paddingDropdown: $gutter-xs;
$maxWidthDropdown: 250px;
$minWidthDropdown: 175px;

// Border radius
$circle: 50%;
$borderRadius: 6px;
$borderRadius-sm: 3px;

// Shadows
$shadowColor: color-control($colorBody);
$shadowOpacity: 0.07;
$shadow: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadow-sm: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowTop: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowBottom: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowLeft: 0px 0px 40px rgba($shadowColor, $shadowOpacity);
$shadowRight: 0px 0px 40px rgba($shadowColor, $shadowOpacity);

// Opacity
$opacity: 0.6;

// Overlay
$colorOverlay: #161616;
$opacityOverlay: 65 / 100;

// Header
$heightHeader: 60px;
$heightHeaderMobile: 68px;

// Navigation
$colorNav: #060606;
$colorNavText: #E5E5E5;
$colorHeroHeader: #FFFFFF;
$colorTransparentNavText: $colorHeroHeader;
$colorNavBorder: #212529;

// Footer
$colorFooter: #202020;
$colorFooterText: #ffffff;
$colorFooterDefault: #161616;
$colorFooterBorder: #515151;
$colorFooterPrimary: #e12222;
$colorFooterSecondary: #2DFFB3;
$colorFooterButtonText: #ffffff;
$colorFooterInput: #515151;
$colorFooterSalesPrice: #FF0000;

// Currency Selector
$colorFooterCurrencyButton: #5600E3;
$colorFooterCurrencyButtonText: #FFFFFF;
$colorFooterCurrencyLabel: #212529;
$colorFooterCurrencyFormElements: #F2ECFF;
$colorFooterCurrencyBorder: #E5E5E5;
$colorFooterCurrencyButtonHover: #4800bd !important;
$borderCurrencySelectorButtonHover: #4300b0 !important;
$shadowCurrencySelectorButtonHover: 0 0 0 0.2rem #8f4aff !important;

// Announcement
$colorAnnouncement: #ffbb30;
$colorAnnouncementText: #5e5555;

// Transitions
$transitionTiming: ease;
$transitionDurationFast: 0.3s;
$transitionDuration: 0.6s;
$transitionDurationSlow: 1s;
$transitions: all $transitionDurationFast $transitionTiming;
$transitionHover: opacity $transitionDurationFast $transitionTiming, background $transitionDurationFast $transitionTiming, border $transitionDurationFast $transitionTiming, box-shadow $transitionDurationFast $transitionTiming;
$transitionDrawers: all $transitionDuration $transitionTiming;

// Animations
$animationDuration: $transitionDuration;
$animationOffset: $spacer;

// Scale
$scale: 1.3;

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

// Helper colors
$colorError: $colorSecondary;
$colorSuccess: $colorPrimary;

// Drawer sizes and colors
$drawerNavWidth: 300px;
$drawerNavWidthMobile: 300px;
$drawerCartWidth: 400px;
$drawerCartWidthMobile: 400px;
$drawerHeaderHeight: $heightHeader;
$colorDrawer: #ffffff;
$colorDrawerText: #202020;
$colorDrawerDefault: #E5E5E5;
$colorDrawerBorder: #FFFFFF;
$colorDrawerPrimary: #e12222;
$colorDrawerSecondary: #e12222;
$colorDrawerSalesPrice: #FF0000;
$colorDrawerButtonText: #e5e5e5;
$colorDrawerInput: #e5e5e5;
$colorDrawerErrorText: #2DFFB3;
$colorDrawerOverlay: #202020;
$colorDrawerOverlayOpacity: 58 / 100;

// Hero
$heroHeightXsmall: 300px;
$heroHeightSmall: 400px;
$heroHeightMedium: 500px;
$heroHeightLarge: 600px;

$heroHeightMobileXsmall: 200px;
$heroHeightMobileSmall: 300px;
$heroHeightMobileMedium: 400px;
$heroHeightMobileLarge: 500px;
$heroHeightMobileXlarge: calc(100vh - #{$heightHeaderMobile});

// Collection Grid
$collectionHeightXsmall: 100px;
$collectionHeightSmall: 200px;
$collectionHeightMedium: 300px;
$collectionHeightLarge: 400px;
$collectionHeightXlarge: 500px;

// Z-index
$zindexIncrement: 3;
$zindexBase: 0;
$zindexOverBody: ($zindexBase + $zindexIncrement);
$zindexHeader: ($zindexOverBody + $zindexIncrement);
$zindexDrawer: 999999999;
$zindexDrawerOverlay: ($zindexDrawer - $zindexIncrement);
$zindexUnderOverlay: ($zindexDrawerOverlay - $zindexIncrement);

// Header Font Stack
$headerFontStack: "ITC Avant Garde Gothic", sans-serif;
$headerFontWeight: 200;
$headerFontStyle: normal;
$headerFontSize: 30px;
$headerTextTransform: initial;
$headerLetterSpacing: 0px;
$headerLineHeight: 1.2;

// Accent Font Stack
$accentFontStack: "DIN Next", sans-serif;
$accentFontWeight: 400;
$accentFontStyle: normal;
$accentTextTransform: uppercase;
$accentLetterSpacing: 0.5px;

// Base Font Stack
$baseFontStack: "DIN Next", sans-serif;
$baseFontWeight: 300;
$baseFontStyle: normal;

// Icon Font Stack
$iconFontStack: Material Icons Outlined;

// Header sizes
$headerSize1: $headerFontSize;
$headerSize2: floor($headerFontSize * 0.80);
$headerSize3: floor($headerFontSize * 0.70);
$headerSize4: floor($headerFontSize * 0.60);
$headerSize5: floor($headerFontSize * 0.50);
$headerSize6: $baseFontSize;

// Page title size
$bigFontSize: 60px;

// Typography utility
$headerMarginBottom: floor($spacer * 0.75);
$colorHeadings: #212529;
$textAlignTitle: center;
$iconLoading: "cached";
$iconFontSize-sm: 18px;
$iconFontSize-md: 24px;
$iconFontSize-lg: 36px;
$iconFontSize-xl: 48px;

// Height
$maxHeight: -webkit-fill-available;

/*============================================================================
  _Mixins
==============================================================================*/

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

@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 transform($transform: 0.1s all) {
  @include prefix("transform", #{$transform});
}

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

/*================ _Animations ================*/
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @-ms-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

@mixin animation($animation) {
  @include prefix("animation", #{$animation});
}

@mixin animated($animation, $duration:$animationDuration, $animation_fill_mode: true){
  @include prefix("animation-duration", #{$duration});
  @include prefix("animation-name", #{$animation});

  @if $animation_fill_mode {
    @include prefix("animation-fill-mode", #{both});
  }
}

@include keyframes(fadeIn) {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@include keyframes(fadeInUp) {
  from {
    opacity: 0;
    @include transform(translate3d(0, $animationOffset, 0));
  }

  to {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(fadeInDown) {
  from {
    opacity: 0;
    @include transform(translate3d(0, -$animationOffset, 0));
  }

  to {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(fadeInLeft) {
  from {
    opacity: 0;
    @include transform(translate3d(-$animationOffset, 0, 0));
  }

  to {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(fadeInRight) {
  from {
    opacity: 0;
    @include transform(translate3d($animationOffset, 0, 0));
  }

  to {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(slideInLeft) {
  from {
    @include transform(translate3d(-100%, 0, 0));
    visibility: visible;
  }

  to {
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(slideInRight) {
  from {
    @include transform(translate3d(100%, 0, 0));
    visibility: visible;
  }

  to {
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(slideInUp) {
  from {
    @include transform(translate3d(0, 100%, 0));
    visibility: visible;
  }

  to {
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(slideInDown) {
  from {
    @include transform(translate3d(0, -100%, 0));
    visibility: visible;
  }

  to {
    @include transform(translate3d(0, 0, 0));
  }
}

@include keyframes(fadeOut) {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@include keyframes(fadeOutUp) {
  from {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  to {
    opacity: 0;
    @include transform(translate3d(0, -$animationOffset, 0));
  }
}

@include keyframes(fadeOutDown) {
  from {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  to {
    opacity: 0;
    @include transform(translate3d(0, $animationOffset, 0));
  }
}

@include keyframes(fadeOutLeft) {
  from {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  to {
    opacity: 0;
    @include transform(translate3d(-$animationOffset, 0, 0));
  }
}

@include keyframes(fadeOutRight) {
  from {
    opacity: 1;
    @include transform(translate3d(0, 0, 0));
  }

  to {
    opacity: 0;
    @include transform(translate3d($animationOffset, 0, 0));
  }
}

@include keyframes(slideOutLeft) {
  from {
    @include transform(translate3d(0, 0, 0));
  }

  to {
    visibility: hidden;
    @include transform(translate3d(-100%, 0, 0));
  }
}

@include keyframes(slideOutRight) {
  from {
    @include transform(translate3d(0, 0, 0));
  }

  to {
    visibility: hidden;
    @include transform(translate3d(100%, 0, 0));
  }
}

@include keyframes(slideOutUp) {
  from {
    @include transform(translate3d(0, 0, 0));
  }

  to {
    visibility: hidden;
    @include transform(translate3d(0, -100%, 0));
  }
}

@include keyframes(slideOutDown) {
  from {
    @include transform(translate3d(0, 0, 0));
  }

  to {
    visibility: hidden;
    @include transform(translate3d(0, 100%, 0));
  }
}

// special
@include keyframes(bounce){
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@include keyframes(flash) {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

@include keyframes(pulse) {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@include keyframes(rubberBand) {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@include keyframes(shakeX) {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@include keyframes(shakeY) {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}

@include keyframes(tada) {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@include keyframes(heartBeat){
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@include keyframes(spin) {
  from {
    @include transform(rotate(0deg));
  }

  to {
    @include transform(rotate(360deg));
  }
}

@include keyframes(progress-bar-stripes) {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 1rem 0;
  }
}

/*==== _Media_query ============================ */

// Width variables
$viewportIncrement: 0.1px;

// Small
$small: 769px;
$postSmall: $small + $viewportIncrement;

// Medium
$medium: 1025px;
$postMedium: $medium + $viewportIncrement;

// Large
$large: $postMedium;

// Site width
$siteWidth: 1180px;

// Boxed
$boxedWidth: 66.666%;

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

// Screen - target only the selected viewport
@mixin screen($viewport) {
  @if $viewport == $small {
    @media screen and ($max: $viewport) {
      @content;
    }
  }

  @else if $viewport == $medium {
    @media screen and ($min: $postSmall) and ($max: $viewport) {
      @content;
    }
  }

  @else if $viewport == $large {
    @media screen and ($min: $viewport) {
      @content;
    }
  }
}

// Screen up
@mixin screenUp($viewport) {
  @media screen and ($min: $viewport) {
    @content;
  }
}

// Screen down
@mixin screenDown($viewport) {
  @media screen and ($max: $viewport) {
    @content;
  }
}

/*==== _Grid_breakpoint ============================ */
$breakpoints: (
  "small" "(max-width: #{$small})",
  "medium" "(min-width: #{$postSmall}) and (max-width: #{$medium})",
  "large" "(min-width: #{$large})"
);

$breakpoint-has-widths: ("small", "medium", "large");
$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";
  }
}

// Width
@mixin device-type($namespace: "") {
  // Whole
  #{$class-type}#{$namespace}one-whole {width: 100%; @include flex(0 0 100%)}

  // Fifths
  #{$class-type}#{$namespace}one-fifth       {width: 20%; @include flex(0 0 20%)}
  #{$class-type}#{$namespace}two-fifths      {width: 40%; @include flex(0 0 40%)}
  #{$class-type}#{$namespace}three-fifths    {width: 60%; @include flex(0 0 60%)}
  #{$class-type}#{$namespace}four-fifths     {width: 80%; @include flex(0 0 80%)}

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

// Push
@mixin push-setup($namespace: "") {
  // Fifths
  #{$class-type}push--#{$namespace}one-fifth       {left: 20%}
  #{$class-type}push--#{$namespace}two-fifths      {left: 40%}
  #{$class-type}push--#{$namespace}three-fifths    {left: 60%}
  #{$class-type}push--#{$namespace}four-fifths     {left: 80%}

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

// Responsive helper classes
@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}full         { width: 100% !important }

  #{$class-type}#{$namespace}sticky       { @include sticky }

  #{$class-type}#{$namespace}overflow-hidden       { overflow:hidden !important }

  #{$class-type}#{$namespace}align-top    { @include align-items(flex-start !important) }
  #{$class-type}#{$namespace}align-center { @include align-items(center !important) }
  #{$class-type}#{$namespace}align-bottom { @include align-items(flex-end !important) }

  #{$class-type}#{$namespace}justify-start  { @include justify-content(flex-start !important) }
  #{$class-type}#{$namespace}justify-center { @include justify-content(center !important) }
  #{$class-type}#{$namespace}justify-end    { @include justify-content(flex-end !important) }

  #{$class-type}#{$namespace}flex-auto    {  width: auto; @include flex(0 0 auto !important)}
  #{$class-type}#{$namespace}flex-fill    {  @include flex(1 1 auto !important)}
  #{$class-type}#{$namespace}flex-wrap    {  @include flex-wrap(wrap !important)}
  #{$class-type}#{$namespace}flex-nowrap  {  @include flex-wrap(nowrap !important)}
}

/*==== _Structure ============================ */

// Box
@mixin makeBox {
  @include transition($transitions);
  padding-top: $gutter;
  padding-bottom: $gutter;

  @include screenUp($postSmall) {padding-top: $gutter-lg;
      padding-bottom: $gutter-lg;}

  .section-full-width > & {
    padding-bottom: 0;
  }

  .section-full-width.section-no-title > & {
    padding-top: 0;
  }
}

// Wrapper
@mixin makeWrapper($widthWrapper) {
  @include transition(padding $transitionDurationFast $transitionTiming, max-width $transitionDurationFast $transitionTiming);
  margin: 0 auto;
  padding-left: $gutter;
  padding-right: $gutter;
  max-width: $widthWrapper;

  @include screen($small) {
    padding-left: $gutter-sm;
    padding-right: $gutter-sm;
  }
}

/*================ _Transitions ================*/
@mixin transition($transitionName...) {
  @include prefix("transition", #{$transitionName});
}

/*================ _Shadows ================*/
@mixin shadow($shadowType...) {
  @include prefix("box-shadow", #{$shadowType});
}

/*================ _Hovers ================*/
@mixin hovers {

  @include transition($transitionHover);


  &:hover {
    opacity: $opacity;
  }

  &:active,&:focus {
    opacity: 1;
  }
}

/*================ _Placeholders ================*/
@mixin placeholder($colorPlaceholder) {
  &::-webkit-input-placeholder {
    color: $colorPlaceholder;
    opacity: 0.7;
  }

  &:-moz-placeholder {
    color: $colorPlaceholder;
    opacity: 0.7;
  }

  &::-moz-placeholder {
    color: $colorPlaceholder;
    opacity: 0.7;
  }

  &:-ms-input-placeholder {
    color: $colorPlaceholder;
    opacity: 0.7;
  }

  &::-ms-input-placeholder {
    color: $colorPlaceholder;
    opacity: 0.7;
  }
}

/*================ _Font_stack ================*/
// Header
@mixin headerFontStack {
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  font-style: $headerFontStyle;
  text-transform: $headerTextTransform;
  letter-spacing: $headerLetterSpacing;
  line-height: $headerLineHeight;
}

// Accent
@mixin accentFontStack {
  font-family: $accentFontStack;
  font-weight: $accentFontWeight;
  font-style: $accentFontStyle;
  text-transform: $accentTextTransform;
  letter-spacing: $accentLetterSpacing;
}

// Base
@mixin baseFontStack {
  font-family: $baseFontStack;
  font-weight: $baseFontWeight;
  font-style: $baseFontStyle;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
  color: $colorBodyText;
}

// lead
@mixin leadFontStack {
  @include screenUp($postSmall) {
    font-size: $baseFontSize-lg;
  }
}

// Page title
@mixin pageTitle {
  @include screenUp($postSmall) {
    font-size: $bigFontSize;
    word-wrap: break-word;
    word-break: break-word;
  }
}

// Sub
@mixin textSub {
  text-transform: uppercase;
  font-size: $baseFontSize-sm;
  font-weight: 700;
}

// Icon
@mixin iconFontStack {
  font-family: $iconFontStack;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: bottom;
  overflow: hidden;
}

@mixin iconSpin {
  &::after {
    @include iconFontStack;
    content: $iconLoading;
    @include animation(spin $transitionDurationSlow infinite cubic-bezier(0.35, 0, 0.25, 1));
  }
}

/*================  _Form_Control ================*/
@mixin formControl {
  border: $borders;
  border-radius: $borderRadius;
  padding: ($paddingButtonY) ($paddingButtonX);
  font-size: $baseFontSize;
  line-height: $baseLineHeight;
  display: inline-block;

  &:focus {
    outline: 0;
  }
}

// Button base
@mixin buttonBase {
  @include formControl;
  @include accentFontStack;
  @include prefix("appearance", "none");
  @include prefix("user-select", "none");
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: normal;

  text-transform: uppercase;

}

// Button color
@mixin button($background, $color, $style: default) {
  @if $style == "default" {
    background-color: $background;
    border-color: $background;
    color: $color;
  }

  @else if $style == "outline" {
    background-color: transparent;
    border-color: $background;
    color: $background;
  }

  @else if $style == "reveal" {

  }

  // Button state
  &:not(.disabled):not([disabled]) {
    &:hover, &:focus {
      opacity: 1;
      color: $color;
      background-color: darken($background, 7.5%);
      border-color: darken($background, 10%);
      @include shadow(0 0 0 0.2rem adaptive-color($background, 20%));
    }

    &:active {
      color: $color;
      background-color: darken($background, 12.5%);
      border-color: darken($background, 15%);
      @include shadow(none);
    }
  }
}

// Button small
@mixin buttonSmall {
  padding: $paddingButtonSmallY $paddingButtonSmallX;
}

// Button xsmall
@mixin buttonXsmall {
  padding: $paddingButtonXsmallY $paddingButtonXsmallX;
  font-size: $baseFontSize-sm;
}

// Button square base
@mixin buttonSquareBase {
  padding: 0;
  letter-spacing: 0;
  @include RadiusCircle;
}

// Button square
@mixin buttonSquare {
  @include buttonSquareBase;
  height: $heightInput;
  width: $heightInput;
  line-height: $heightInputInner;
  font-size: $iconFontSize-md;
}

// Button square small
@mixin buttonSquareSmall {
  @include buttonSquareBase;
  height: $heightInputSmall;
  width: $heightInputSmall;
  line-height: $heightInputInnerSmall;
  font-size: $iconFontSize-sm;
}

// Button square xsmall
@mixin buttonSquareXsmall {
  @include buttonSquareBase;
  height: $heightInputXsmall;
  width: $heightInputXsmall;
  line-height: $heightInputInnerXsmall;
  font-size: $baseFontSize-sm;
}

// Button unselected
@mixin buttonUnselected {
  @include button($colorInput, $colorBodyText);
}

// Button selected
@mixin buttonSelected {
  @include button($colorPrimary, $colorButtonText);
}

// Button loading
@mixin buttonLoading {
  opacity: $opacity;

  .btn__text {
    @include visuallyHidden;
  }

  @include iconSpin;
}

// Input
@mixin input {
  @include formControl;
  @include button($colorInput, $colorBodyText);
  @include placeholder($colorBodyText);
  max-width: 100%;
}

@mixin inputSmall {
  padding: $paddingButtonSmallY $paddingButtonSmallX;
}

// Select
@mixin select {
  @include input;
  cursor: pointer;
  padding-right: $paddingButtonX * 2;
  text-indent: 0.01px;
  text-overflow: "";
  @include prefix("appearance", "none");
  background: {
    image: url("//mixoryshop.myshopify.com/cdn/shop/t/4/assets/icon-select.svg?v=9174258960477553951630478764");
    repeat: no-repeat !important;
    position: right $paddingButtonX center;
    size: auto $baseFontSize;
  }

  // Hide the svg arrow in IE9 and below
  .ie9 &,
  .lt-ie9 & {
    padding-right: $paddingButtonX;
    background-image: none;
  }
}

// Select small
@mixin selectSmall {
  padding: ($paddingButtonSmallY) ($paddingButtonSmallX * 3) ($paddingButtonSmallY) ($paddingButtonSmallX);
  background-position: right $paddingButtonSmallX center;

  .ie9 &,
  .lt-ie9 & {
    padding-right: $paddingButtonSmallX;
  }
}

// Checkbox & radio
@mixin checkboxRadio {
  position: relative;
  min-height: $iconFontSize-md;
  padding-left: $iconFontSize-md + $spacer-xs;
  @include display-flexbox;
  @include align-items(center);

  label {
    margin-bottom: 0;

    &::before,
    &::after {
      @include iconFontStack;
      font-size: $iconFontSize-md;
      line-height: $iconFontSize-md;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    @include visuallyHidden;
    z-index: -1;
    opacity: 0 !important;

    &[disabled],
    &.disabled {
      ~label {
        cursor: default;

        &::before,
        &::after {
          cursor: default;
          opacity: $opacity;
        }
      }
    }

    &:checked {
      ~label {
        &::before,
        &::after {
          color: $colorPrimary;
        }
      }
    }
  }
}

@mixin checkbox {
  @include checkboxRadio;
  input[type="checkbox"] {
    &:checked {
      ~label {
        &::after {
          content: "check_box";
        }
      }
    }
  }

  label {
    &::after {
      content: "check_box_outline_blank";
    }
  }
}

@mixin radio {
  @include checkboxRadio;
  input[type="radio"] {
    &:checked {
      ~label {
        &::after {
          content: "radio_button_checked";
        }
      }
    }
  }

  label {
    &::after {
      content: "radio_button_unchecked";
    }
  }
}

/*================ _Pagination ================*/
// Button pagination
@mixin buttonPagination {
  @include buttonBase;
  @include buttonSquareSmall;
}

/*================ _Flex ================*/
@mixin display-flexbox() {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin display-inline-flexbox() {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

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

  -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) {
  -ms-flex-preferred-size: $width;
  @include prefixFlex(flex-basis, $width, webkit moz spec);
}

@mixin flex-grow($value: auto) {
  @include prefixFlex(flex-grow, $value, webkit moz spec);
}

@mixin flex-shrink($value: auto) {
  @include prefixFlex(flex-shrink, $value, webkit moz spec);
}

@mixin align-self($align: auto) {
  -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);
}

/*================ _Utilities ================*/

// Inline list
@mixin inlineList {
  list-style: none;
  margin-left: 0;
  margin-right: -$spacer-sm;
  margin-bottom: -$spacer-sm;

  > * {
    display: inline-block;
    margin-right: $spacer-sm;
    margin-bottom: $spacer-sm;
    vertical-align: middle;
  }
}

// Hide
@mixin visuallyHidden($imp: "") {
  clip: rect(0 0 0 0) #{$imp};
  clip: rect(0, 0, 0, 0) #{$imp};
  overflow: hidden #{$imp};
  position: absolute #{$imp};
  height: 1px #{$imp};
  width: 1px #{$imp};
}

// Show
@mixin visuallyShown($imp: "") {
  clip: initial #{$imp};
  clip: initial #{$imp};
  overflow: visible #{$imp};
  position: inherit #{$imp};
  height: initial #{$imp};
  width: initial #{$imp};
}

// Sticky
@mixin sticky {
  position: -webkit-sticky;
  position: sticky;
  transform: translate3d(0,0,0);
  z-index: $zindexOverBody;
  top: 0;
}

// Link style
@mixin linkStyle {
  color: $colorSecondary;
  text-decoration: underline;
}

// Auto spacing
@mixin spacerAuto($spacerSize) {
  > * {
    margin-bottom: 0;

    & + * {
      margin-top: $spacerSize;
    }
  }
}

// Remove content
@mixin removeContent {
  font-size: 0;

  &::before, &::after {
    font-size: $baseFontSize;
  }
}

// Round border radius
@mixin RadiusCircle {
  @if $borderRadius == 30px {
    border-radius: $circle;
  }
  @else {
    border-radius: $borderRadius;
  }
}

// Image hover effect
@mixin ellipsis{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

// Color overwrite for drawers
@mixin colorOverwrite($background, $default, $border, $text, $primary, $secondary, $buttonText, $input, $sales) {
  background-color: $background;
  border-color: $border;
  color: $text;

  // Hr
  hr { border-color: $border }

  // Links
  a, button { color: $text }

  // Text link
  .text-link { color: $secondary }

  // Text muted
  .text-muted {
    color: mix($background, $text, $opacity * 100);
  }

  // Select link
  select.select-link {
    &:hover {
      color: $secondary !important;
    }
  }

  // Form elements
  .btn, textarea, select, input {
    @include button($input, $text);
    @include placeholder($text);
  }

  // Slick arrows
  .slick-arrow {
    @include button($background, $text);
  }

  // Cards
  .card {
    background-color: $default;

    .card {
      background-color: $input;
    }

    .card-footer, .card-header {
      border-color: $border;
    }
  }

  // Tabs
  .tab-body {
    border-color: $secondary;
  }

  // Progress
  .progress {
    background-color: $default;
  }

  .progress-bar {
    background-color: $secondary;
  }

  // Background
  .bg-default {
    background-color: $default;
  }

  // Buttons
  .btn--primary { @include button($primary, $buttonText) }
  .btn-outline-primary { @include button($primary, $buttonText, outline) }

  // Badge
  .badge {
    background-color: $text;
    color: $background;
  }

  // Tooltip
  .tooltip {
    background-color: $text;
    color: $background;

    &:after {
      border-top-color: $text;
    }
  }

  // Color swatches
  .swatch {
    label {
      background-color: $default;
    }

    input:checked + .swatch-element {
      border-color: $text;
    }
  }

  .swatch-element {
    border-color: $border;
  }

  // Headers
  h1, h2, h3, h4, h5, h6 { color: $text }

  // Text
  .text-primary { color: $primary }
  .text-secondary { color: $secondary }
  .text-sale { color: $sales }

  // Form feedback
  .form-success {
    color: $primary;
    border-color: $primary;
  }

  // Error message
  .errors {
    color: $secondary;
    border-color: $secondary;
  }

  // Select box
  .select-box {
    border-color: $secondary;
  }

  // Checkbox
  .checkbox {
    input[type="checkbox"]:checked {
      ~label {
        &::before,
        &::after {
          color: $primary;
        }
      }
    }
  }

  // Radio
  .radio {
    input[type="radio"]:checked {
      ~label {
        &::before,
        &::after {
          color: $primary;
        }
      }
    }
  }

  // Tables
  table {
    border-color: $border;

    tbody {
      tr {
        &:nth-of-type(odd) {
          background-color: rgba($default, $opacity);
        }

        &:hover {
          background-color: $default;
        }
      }
    }

    th, td {
      border-color: $border !important;
    }

    th {
      background-color: $text;
      color: $background;
    }
  }

  // Media
  .media-wrapper {
    background-color: $default;
  }

  // placeholder
  .placeholder-svg {
    fill: rgba($text, $opacity);
    background-color: $default;
  }
}

@mixin noFocus {
  &:focus {
    outline: none;
  }
}

/*============================================================================
  _Vendor
==============================================================================*/

/*================ _Slick_slider ================*/
.slick {
  opacity: 0;

  // Show on init
  &.slick-initialized, &.slick-fallback {
    @include animated(fadeIn, $animation_fill_mode: false);
    opacity: 1;
  }
}

// Slider
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

// List
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  min-width: 100%;
  @include transform(translate3d(0, 0, 0));

  // Center mode
  .slick-center-mode & {
    @include screenUp($postSmall) {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  &.dragging {
    cursor: pointer;
    cursor: hand;
  }

  .slick-disabled & {
    cursor: default !important;
  }
}

// Track
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;

  @include transform(translate3d(0, 0, 0));

  &::before,
  &::after {
    content: "";
    display: table;
  }

  &::after {
    clear: both;
  }

  .slick-disabled & {
    @include transform(translate3d(0, 0, 0) !important);
  }
}

// Slide
.slick-slide {
  float: left;
  min-height: 1px;
  @include transition(opacity $transitionDurationFast $transitionTiming, transform $transitionDurationFast $transitionTiming);
  @include noFocus;

  // Hide slide when its slider is not initialized yet
  .slick-slider:not(.slick-initialized) & {
    display: none;
  }

  &.dragging img {
    pointer-events: none;
  }

  [dir="rtl"] & {
    float: right;
  }

  img {
    display: block;
  }
}

// Arrows
.slick-arrow {
  position: absolute;
  top: 50%;
  margin-top: -($heightInputSmall / 2);
  z-index: $zindexBase + 1;
  font-size: $iconFontSize-md;
  opacity: 0;
  @include buttonBase;
  @include button($colorBody, $colorBodyText);
  @include buttonSquareSmall;
  @include removeContent;

  &::before {
    @include iconFontStack;
  }

  // Vertical
  .slick-vertical & {
    right: inherit;
    top: inherit;
    margin-top: inherit;
    left: 50% !important;
    margin-left: -($heightInputSmall / 2) !important;
  }

  // Hide button on first / last slide
  &[aria-disabled="true"] {
    opacity: 0 !important;
    pointer-events: none;
  }

  // With dots
  .slick-dotted & {
    margin-top: -( (($heightInputSmall) + (floor(($baseFontSize * $baseLineHeight))) + $gutter) / 2);
  }

  @include screenUp($postSmall) {
    // Show on hover
    .slick-slider:hover & {
      opacity: 1;
    }
  }
}

// Prev
.slick-prev {
  left: $gutter-sm;

  &::before {
    content: "keyboard_arrow_left";
  }

  // Vertical
  .slick-vertical & {
    top: $gutter-sm;

    &::before {
      content: "keyboard_arrow_up";
    }
  }
}

// Next
.slick-next {
  right: $gutter-sm;

  &::before {
    content: "keyboard_arrow_right";
  }

  // Vertical
  .slick-vertical & {
    bottom: $gutter-sm;

    &::before {
      content: "keyboard_arrow_down";
    }
  }
}

// Custom dot wrapper
.slick__dots-wrapper {
  max-width: 180px;
  padding: 5px 0;
  overflow: hidden;
}

// Dots
.slick-dots {
  list-style: none;
  margin: 0;
  width: 100%;
  margin-top: $gutter;
  @include display-flexbox;
  @include flex-wrap(wrap);
  @include justify-content(center);
  @include align-items(center);

  @include screen($small) {
    margin-top: $gutter-sm;
  }

  // Hero
  .hero-section & {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: $gutter-sm;
  }

  li {
    @include display-inline-flexbox();
    padding: $spacer-sm;
    cursor: pointer;
    line-height: 1;

    &:hover {
      button {
        opacity: 1;
      }
    }

    // Button
    button, a {
      @include removeContent;
      opacity: $opacity;
      line-height: 1;

      &::before {
        @include iconFontStack;
        content: "lens";
        border-radius: $circle;
        background-color: $colorBodyText;
        @include transform(scale(0.5));
        @include transition($transitions);

        .hero-section & {
          color: $colorHeroHeader;
          background-color: $colorHeroHeader;
        }
      }

      &:focus {
        outline: none;
      }
    }

    // Active
    &.slick-active {
      button, a {
        opacity: 1;

        &::before{
          content: "trip_origin";
          background-color: transparent;
          @include transform(scale(1));
        }
      }
    }
  }
}


// Center mode
.slick-center-mode {
  .slick-list {
    @include screenUp($postSmall) {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    @include screen($small) {
      padding-left: ($gutter-sm * 3 - $gutter-xs) !important;
      padding-right: ($gutter-sm * 3 - $gutter-xs) !important;
    }
  }

  .slick-slide, .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] {
    opacity: $opacity;
    @include screenUp($postSmall) {
      @include transform(scale(0.8));
    }
  }

  .slick-center, .slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] {
    opacity: 1;
    @include screenUp($postSmall) {
      @include transform(scale(1));
    }
  }

  // Disable link click of sibling slides
  .slick-slide:not(.slick-current) {
    > * {
      pointer-events: none;
    }
  }
}

/*================ _jQuery_zoom ================*/
.btn-zoom {
  position: absolute;
  bottom: $gutter-sm;
  right: $gutter-sm;
  opacity: $opacity;
  z-index: $zindexOverBody;
  line-height: 1;

  .product-single__media-wrapper:hover & {
    opacity: 1;
  }

  .zoom-icon::after {
    @include iconFontStack;
    content: "zoom_in";
  }

  .zoom-active + & {
    opacity: 1;

    .zoom-icon::after {
      content: "zoom_out";
    }
  }
}

.zoomImg {
  background-color: $colorDefault;
  min-height: 100%;
  min-width: 100%;
  @include animated(fadeIn, $transitionDurationFast);}

/*================ _Lazy_sizes ================*/
.lazyload {
  opacity: 0;
}

.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  @include transition(opacity $animationDuration $transitionTiming);
}

// Bug fix fallback where lazyloaded is never added to cloned slides
.slick-cloned {
  .lazyloading:not(.lazyload) {
    opacity: 1;
    @include transition(opacity $animationDuration $transitionTiming);
  }
}


/*================ Google_recaptcha ================*/
.grecaptcha-badge {
  z-index: $zindexOverBody;
  display: none !important;
}


/*============================================================================
  _Components
==============================================================================*/

/*================ _Normalize ================*/
*,
*::before,
*::after {
  @include box-sizing();
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background-color: $colorBody;
  overflow-x: hidden;

  &.js-drawer-open, &.js-modal-open {
    overflow-y: hidden;

    @include screenUp($postSmall) {
      padding-right: $scrollbarWidth;
    }
  }
}

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

body,
input,
textarea,
button,
select {
  @include baseFontStack;
}

a {
  background-color: transparent;
}

b,
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

small {
  font-size: $baseFontSize-sm;
}

img {
  max-width: 100%;
  border: 0;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

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

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

input {
  &[type="search"],
  &[type="number"],
  &[type="email"],
  &[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

textarea {
  overflow: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
}

[hidden]{
  display: none !important;
}

/*================ _Element_state ================*/
a,
button,
[role="button"],
input,
label,
select,
textarea
{
  touch-action: manipulation; // Enable fast tap
  @include hovers;
}

/*================ _Typography ================*/
p {
  text-rendering: optimizeLegibility;
  margin-top: 0;
  margin-bottom: $spacer;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  margin-top: 0;
  margin-bottom: $headerMarginBottom;
  text-rendering: optimizeLegibility;
  color: $colorHeadings;
  @include headerFontStack;

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

h1 {font-size: $headerSize1}
h2 {font-size: $headerSize2}
h3 {font-size: $headerSize3}
h4 {font-size: $headerSize4}
h5 {font-size: $headerSize5}
h6 {font-size: $headerSize6}

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

/*================ _Links ================*/
a {
  color: $colorBodyText;
  text-decoration: none;

  &:not([href]) {
    cursor:pointer;
    @include noFocus;
  }
}

/*================ _Form ================*/
.form-vertical {
  input,
  select,
  textarea,
  fieldset,
  .checkbox,
  .radio {
    width: 100%;
    margin-bottom: $spacer;
  }

  [type="radio"],
  [type="checkbox"] {
    display: inline-block;
    width: auto;
    margin-right: $spacer-xs;
  }

  input[type="submit"] {
    display: inline-block;
    width: auto;
  }

  textarea {
    min-height: 200px;
  }
}


// Form message
.note,
.errors {
  border-radius: $borderRadius;
  border: $borders;
  padding: $paddingButtonSmallY $paddingButtonSmallX;
  margin-bottom: $spacer;
  text-align: left;

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

  a {
    @include linkStyle;
  }

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

  p {
    margin-bottom: 0;
  }
}

// Success message
.form-success {
  color: $colorSuccess;
  border-color: $colorSuccess;
  text-align: center;

  .newsletter-section & {
    margin-bottom: 0;
  }
}

// Error message
.errors {
  color: $colorError;
  border-color: $colorError;
}

// Input error
.input-error {
  border-color: $colorError !important;
}

/*================ _Label ================*/
label {
  display: block;
  margin-bottom: $spacer-xs;

  [type="radio"] + &,
  [type="checkbox"] + & {
    display: inline-block;
  }

  &[for] {
    cursor: pointer;
  }
}

.inline-label {
  display: inline-block;
  margin-right: $spacer-sm;
}

/*================ _Inputs ================*/
input {
  @include input;

  &[type="submit"] {
    @include buttonBase;
    @include button($colorPrimary,$colorButtonText);
  }

  &[type="checkbox"] {
    height: initial;
  }

  &[type="image"] {
    background-color: transparent;
  }

  &[type="radio"] {
    cursor: pointer;
  }

  &[type="checkbox"],
  &[type="radio"] {
    margin: 0 10px 0 0;
    padding: 0;
    width: auto;

    &:hover, &:focus {
      outline: none;
      box-shadow: none !important;
    }
  }
}

.input--small {
  @include inputSmall;
}

.input-full {
  width: 100%;
}

/*================ _Input_group ================*/
.input-group {
  @include display-flexbox;

  .input-group-field {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0;
    width: 100%;
  }

  .input-group-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    @include flex-shrink(0);
  }
}

/*================ _Textarea ================*/
textarea {
  @include input;
  vertical-align: top;
}

/*================ _Tooltip ================*/
.tooltip {
  z-index: $zindexOverBody;
  background-color: $colorHeadings;
  color: $colorBody;
  border-radius: $borderRadius;
  padding: $paddingButtonSmallY $paddingButtonSmallX;
  bottom: 100%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  font-size: $baseFontSize-sm;
  line-height: $baseLineHeight;
  @include transform(translate(-50%, $animationOffset));
  @include transition($transitions);
  @include display-flexbox();
  @include justify-content(center);
  @include accentFontStack;

  &:after {
    border-left: solid transparent $spacer-sm;
    border-right: solid transparent $spacer-sm;
    border-top: solid $colorHeadings $spacer-sm;
    bottom: -$spacer-sm;
    content: " ";
    height: 0;
    position: absolute;
    width: 0;
  }
}

.tooltip-wrapper {
  position: relative;

  .tooltip {
    left: 50%;
  }
}

.cart__row {
  .tooltip-wrapper {
    display: inline-block !important;
  }
}

/*================ _Fieldset ================*/
fieldset {
  margin: 0;
  padding: 0;
}

/*================ _Select ================*/
select {
  @include select;
}

.select--small {
  @include selectSmall;
}

.select-max {
  @include screenUp($postSmall){
    max-width: 250px;
  }
}

option {
  color: $colorBodyText;
  background-color: $colorBody;
}

select.select-link {
  padding: 0 !important;
  background-color: transparent !important;
  color: $colorSecondary !important;
  border: 0 !important;
  background-image: none !important;
  @include shadow(none !important);
  @include linkStyle;
  @include hovers;

  &:hover {
    color: $colorSecondary !important;
    opacity: $opacity !important;
  }

  &:active, &:focus {
    opacity: 1 !important;
  }
}

/*================ _Checkbox ================*/
.checkbox {
  @include checkbox;
}

/*================ _Radio ================*/
.radio {
  @include radio;
}

/*================ _List ================*/
ul, ol {
  padding: 0;
  text-rendering: optimizeLegibility;
}

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

ol { list-style: decimal; }

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-bottom: 0;
  margin-left: 0;
}

ol,
ul,
dl {
  margin: 0 0 ($spacer) ($spacer);
}


/*================ _Hr ================*/
hr {
  border:0;
  clear: both;
  height: 0;
  margin: 0 auto;
  margin-top: $spacer / 2;
  margin-bottom: $spacer / 2;
}

.hr-divider {
  border-top: $borders;
  margin-top: 0;
  margin-bottom: 0;
}

.hr-rev {
  margin-left: -$gutter;
  margin-right: -$gutter;

  @include screen($small) {
    margin-left: -$gutter-sm;
    margin-right: -$gutter-sm;
  }
}

.hr--xs {
  margin-top: $spacer-xs / 2;
  margin-bottom: $spacer-xs / 2;
}

.hr--sm {
  margin-top: $spacer-sm / 2;
  margin-bottom: $spacer-sm / 2;
}

.hr--lg {
  margin-top: $spacer-lg / 2;
  margin-bottom: $spacer-lg / 2;
}


/*================ _Buttons ================*/
button {
  cursor: pointer;
  background: none;
  border: none;
  display: inline-block;
  padding: 0;
}

// Default
.btn {
  @include buttonBase;
  @include button($colorInput, $colorBodyText);
}

// Colors
.btn--primary {
  @include button($colorPrimary, $colorButtonText);
}

.btn-outline-primary {
  @include button($colorPrimary, $colorButtonText, outline);
}

.btn-reveal-primary {
  @include button($colorPrimary, $colorButtonText, reveal);
}

// Button square
.btn--square {
  @include buttonSquare;
}

.btn-square-small {
  @include buttonSquareSmall;
}

.btn-square-xsmall {
  @include buttonSquareXsmall;
}

// Button sizing
.btn--small {
  @include buttonSmall;
}

.btn--xsmall {
  @include buttonXsmall;
}

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

//Banner
.btn--banner {
  padding-left: $gutter;
  padding-right: $gutter;
  border-left: none;
  border-right: none;
  border-radius: 0;
  display: block;
  width: 100%;

  @include screen($small) {
    padding-left: $gutter-sm;
    padding-right: $gutter-sm;
  }
}

// Captcha button
.shopify-challenge__button {
  @include button($colorPrimary, $colorButtonText);
}

// Social media share
.btn.btn-facebook {
  &:hover {
    @include button($colorFacebook, #fff, reveal);
  }
}

.btn.btn-twitter {
  &:hover {
    @include button($colorTwitter, #fff, reveal);
  }
}

.btn.btn-pinterest {
  &:hover {
    @include button($colorPinterest, #fff, reveal);
  }
}

.btn.btn-whatsapp {
  &:hover {
    @include button($colorWhatsapp, #fff, reveal);
  }
}

.btn.btn-linkedin {
  &:hover {
    @include button($colorLinkedin, #fff, reveal);
  }
}

.btn.btn-reddit {
  &:hover {
    @include button($colorReddit, #fff, reveal);
  }
}

.btn.btn-messenger {
  &:hover {
    @include button($colorMessenger, #fff, reveal);
  }
}

.btn.btn-email {
  &:hover {
    @include button($colorPrimary, $colorButtonText, reveal);
  }
}// Scroll to top button
.btn-top {
  @include button($colorBody, $colorBodyText);
  position: fixed;
  z-index: ($zindexOverBody - 1);
  bottom: $gutter;
  visibility: hidden !important;
  opacity: 0 !important;
  @include transition(opacity $animationDuration $transitionTiming, visibility $animationDuration $transitionTiming, bottom $animationDuration $transitionTiming);

  @include screen($small) {
    bottom: $gutter-sm;
    @include buttonSquareSmall;
  }

  &.btn-top-visible {
    opacity: 1 !important;
    visibility: visible !important;

    .scroll-sticky_addtocart & {
      bottom: $gutter+$heightInput + $gutter-sm;

      @include screen($small) {
        bottom: $gutter-sm + $heightInputSmall + $gutter-sm;
      }
    }
  }

  &.btn-top-left {
    left: $gutter;

    @include screen($small) {
      left: $gutter-sm;
    }
  }

  &.btn-top-right {
    right: $gutter;

    @include screen($small) {
      right: $gutter-sm;
    }
  }

  &.btn-top-center {
    left: 50%;
    margin-left: -($heightInput / 2);

    @include screen($small) {
      margin-left: -($heightInputSmall / 2);
    }
  }
}// Loading
.btn--loading {
  @include buttonLoading;
}

// View all button
.view-all-box {
  text-align: $textAlignTitle;
  margin-top: $gutter;

  @include screen($small) {
    margin-top: $gutter-sm;
  }
}

/*================ _Dynamic_buttons ================*/

/*=== dynamic add-to-cart ===*/

// Buttons wrapper
.shopify-payment-button {
  .variant-unavailable &,
  .variant-soldout & {
    display: none;
  }

  // Dynamic buttons + more payment options wrapper
  & > div > div > div {
    margin-top: $spacer / 2;
    @include display-flexbox;
    @include flex-wrap(wrap);
    @include animated(fadeIn);
  }

  // Dynamic buttons
  .shopify-payment-button__button {
    @include flex(1);
    min-height: $heightInputSmall !important;
    border-radius: $borderRadius !important;
    @include transition($transitions);

    // Unbranded
    &.shopify-payment-button__button--unbranded {
      @include buttonBase;
      @include button($colorPrimary, $colorButtonText, outline);

    
      text-transform: uppercase;
    

    
    }

    // Branded
    &.shopify-payment-button__button--branded .shopify-cleanslate > div[role="button"] {
      border-radius: $borderRadius !important;
      padding: $paddingButtonSmallY $paddingButtonSmallX !important;
      min-height: $heightInputSmall !important;
      max-height: $heightInputSmall !important;

      &[aria-disabled="true"] {
        opacity: $opacity !important;
      }

      // Label
      span[aria-hidden="true"] {
        font-family: $accentFontStack !important;
        font-weight: $accentFontWeight !important;
        font-style: $accentFontStyle !important;
        letter-spacing: $accentLetterSpacing !important;
      
        text-transform: uppercase !important;
      
      }
    }
  }

  // More payment option
  .shopify-payment-button__more-options {
    @include buttonBase;
    @include buttonSmall;
    @include button($colorPrimary, $colorButtonText, outline);
    text-decoration: none !important;
    margin-top: $spacer-sm;
    width: 100%;

    &::before {
      @include iconFontStack;
      content: "credit_card";
      margin-right: $spacer-xs;
    }
  }

  // Paypal button
  .shopify-payment-button__button--branded .shopify-cleanslate iframe {
    max-height: $heightInputSmall !important;
  }

  .zoid-outlet > iframe.zoid-component-frame {
    z-index: inherit !important;
  }

  // Hidden buttons
  .shopify-payment-button__button--hidden {
    display: none !important;
  }
}

/*=== dynamic checkout ===*/
.additional_checkout_buttons {
  .dynamic-checkout__content {
    // Fix visual bug in cart drawer footer
    &:empty {
      display: none;
    }

    @include screenDown($large) {
      padding-top: 0 !important;
    }
  }

  // Button group
  div[data-shopify-buttoncontainer="true"],
  ul[data-shopify-buttoncontainer="true"] {
    margin: 0 (-$spacer-sm/2) !important;
    margin-bottom: 0 !important;
    flex-direction: row !important;
  }

  // Buttons container
  div[data-testid="grid-cell"],
  li[data-testid="grid-cell"] {
    @include flex(1 !important);
    margin-left: $spacer-sm / 2 !important;
    margin-right: $spacer-sm / 2 !important;
    margin-top: $spacer-sm !important;
    margin-bottom: 0 !important;
    height: initial!important;

    // Button
    & > div[role="button"] {
      border-radius: $borderRadius !important;
      min-height: $heightInputSmall !important;
      height: 100%!important;
    }
  }
}

/*================ _Badges ================*/
.badge {
  @include textSub;
  background-color: $colorHeadings;
  color: $colorBody;
  border-radius: $borderRadius;
  padding: 4px 5px;
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1;
  display: inline-block;
  position: relative;

  & > .tooltip-wrapper {
    position: initial;
  }
}

/*================ _Dropdown ================*/
// Dropdown wrapper
.dropdown-wrapper {
  display: inline-block;
  line-height: 1;
  white-space: normal;
  position: relative;
}

// Dropdown toggle
.dropdown-toggle {
  .dropdown-open > & {
    opacity: $opacity;
  }
}

// Dropdown menu
.dropdown-menu {
  left: 0;
  background-color: $colorBody;
  border: $borders;
  display: none;
  line-height: $baseLineHeight;
  margin: 0;
  opacity: 0;
  padding: $paddingDropdown 0;
  position: absolute;
  width: max-content;
  max-width: $maxWidthDropdown;
  min-width: $minWidthDropdown;
  z-index: $zindexOverBody;
  text-align: left;

  // Prevent radius from being larger than dropdown padding
  @if $borderRadius > $paddingDropdown {
    border-radius: $paddingDropdown;
  }
  @else {
    border-radius: $borderRadius;
  }

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

  &.dropdown-menu-up {
    left: 0;
    bottom: 100%;
  }

  &.dropdown-menu-body {
    padding: $gutter-sm;
  }

  // Show dropdown
  &.dropdown-open {
    display: block;
    @include animated(fadeInDown, $transitionDurationFast);
  }

  // Closing
  &.is-closing {
    display: block;
    @include animated(fadeOutUp, $transitionDurationFast);
  }
}

// Menu parent dropdown
.dropdown-menu-parent {
  &.dropdown-list-up {
    bottom: $heightInputSmall;
  }
}

// Grandchild dropdown
.dropdown-menu-grandchild {
  left: 100%;
  top: -$paddingDropdown;
  margin-left: $paddingDropdown / 2;

  &.dropdown-outside {
    left: -100%;
    margin-left: -$paddingDropdown / 2;
  }

  .dropdown-menu-up & {
    top: auto;
    bottom: -$paddingDropdown;
  }
}

// Dropdown item
.dropdown-item {
  position: relative;
  list-style: none;
  padding: 0 $paddingDropdown;

  &.dropdown-item-has-grandchild {
    // Prevent hover cancel
    &::after {
      content: "";
      width: $paddingDropdown / 2;
      display: block;
      position: absolute;
      height: 100%;
      top: 0;
      right: -$paddingDropdown / 2;

      .dropdown-outside & {
        right: auto;
        left: -$paddingDropdown / 2;
      }
    }
  }
}

// Dropdown links
.dropdown-link {
  display: block;
  width: 100%;
  padding: $paddingDropdown;
  background-color: transparent;
  text-align: left;
  border-radius: $borderRadius;
  @include transition($transitions);

  &:hover,
  &:focus,
  .dropdown-open > & {
    background-color: $colorDefault;
    opacity: 1;
  }

  &.dropdown-link-active {
    color: $colorSecondary;
  }

  .dropdown-menu-grandchild & {
    white-space: normal;
  }

  &.dropdown-toggle {
    &::after {
      @include iconFontStack;
      content: "chevron_right";
      float: right;
    }
  }
}

/*================ 	_Localization ================*/
#localization-menu--header,
#localization-menu--footer {
  select {
    display: inline-block;
  }
}

#localization_form--footer {
  color: $colorBodyText;

  .dropdown {
    position: relative;
  }

  select {
    @include select;
    @include selectSmall;
  }
}

/*================ _Cards ================*/
.card {
  background-color: $colorDefault;
  border-radius: $borderRadius;
  @include display-flexbox;
  @include flex-direction(column);
  width: 100%;

  &:empty {
    display: none;
  }

  .section-default & {
    background-color: $colorBody;
  }

  .card {
    background-color: $colorInput;
  }

  & + .modal-footer {
    border-top: 0;
  }
}

.card-full {
  border-radius: 0;
  border-right: 0;
  border-left: 0;
}

.card-group {
  & > .card {
    @include screen($small) {
      border-radius: 0;

      &:first-of-type {
        border-top-left-radius: $borderRadius;
        border-top-right-radius: $borderRadius;
      }

      &:last-of-type {
        border-bottom-left-radius: $borderRadius;
        border-bottom-right-radius: $borderRadius;
      }
    }

    & + .card {
      margin-top: $spacer;

      @include screen($small) {
        border-top: $borders;
        margin-top: 0;

        #CartDrawer & {
          border-top: inherit;
          margin-top: $spacer;
        }
      }
    }
  }
}

.card-header {
  border-bottom: $borders;
  padding: $gutter-sm;
  border-radius: 0;
  width: 100%;
  text-align: left;
  @include display-flexbox;
  @include align-items(center);

  &:empty {
    display: none;
  }
}

.card-header-icon {
  .card-header:not(.active) & {
    color: inherit;
  }
}

.card-image {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;

  img {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

.card-body {
  padding: $gutter-sm;
  @include display-flexbox;
  @include flex-direction(column);
  @include justify-content(center);
  @include flex(auto);

  &.rte {
    margin-bottom: 0;
  }

  @include screen($small) {
    padding: $gutter-sm;
  }

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

.card-body-xs {
  padding: $gutter-xs;
}

.card-body-lg {
  padding: $gutter;
}

.card-footer {
  border-top: $borders;
  padding: $gutter-sm;

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

  &:empty {
    display: none;
  }
}

.card-footer-xs {
  padding: $gutter-xs;
}

/*================ _Progress ================*/
.progress {
  position: relative;
  height: 10px;
  background-color: $colorDefault;
  @include display-flexbox;
  @include align-items(center);

  &.progress-rounded {
    border-radius: $borderRadius;
  }
}

.progress-bar {
  background-color: $colorSecondary;
  height: 100%;
  background-image: linear-gradient(45deg, hsla(0, 0%, 100%, .40) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .40) 0, hsla(0, 0%, 100%, .40) 75%, transparent 0, transparent);
  background-size: 1rem 1rem;
  @include transition($transitions);
  @include animation(progress-bar-stripes 1s linear infinite);

  .progress-rounded & {
    border-radius: $borderRadius;
  }
}

/*================ _Tabs ================*/
.tab-header {
  @include accentFontStack;

  &::after {
    @include iconFontStack;
    content: "add";
    margin-left: $spacer-sm;
  }

  &:not(.active) {
    border-bottom-color: transparent !important;

    & + .tab-body {
      display: none;
    }
  }

  & > :not(:first-child) {
    margin-left: $spacer-sm;
  }

  &.active {
    &::after {
      content: "remove";
    }
  }
}

.tab-header-title {
  margin-right: auto;
}

.tab-body {
  border-left: 4px solid $colorSecondary;
}

.tab-content {
  @include animated(fadeInUp);

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

/*================ _Tables ================*/

// Horizontal scroll table (automatically added to <table> by js)
.table-wrap {
  max-width: 100%;
  overflow: auto;
  border-radius: $borderRadius;
  -webkit-overflow-scrolling: touch;
}

// Table
table {
  width: 100%;
  border-spacing: 0;
  border: $borders;
  border-radius: $borderRadius;
  table-layout: auto;
  overflow: hidden;
  text-align: center;

  .section-default & {
    background-color: $colorBody;
  }

  a {
    @include linkStyle;
  }

  // Thead
  thead {
    tr {
      &:last-child {
        th, td {
          border-bottom: $borders;
        }
      }
    }
  }

  tfoot {
    tr {
      &:first-child {
        th,td {
          border-top: $borders;
        }
      }
    }
  }

  // Tbody
  tbody {
    tr {
      @include transition($transitions);

      &:nth-of-type(odd) {
        background-color: rgba($colorDefault, $opacity);
      }

      &:hover {
        background-color: $colorDefault;
      }
    }
  }

  // Tr
  tr {
    &:last-child {
      th, td {
        border-bottom: 0;
      }
    }
  }

  // Cells
  th, td {
    padding: $gutter-sm;
    border-right: $borders;
    border-bottom: $borders;

    &:last-child {
      border-right: 0;
    }

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

  // Td
  td {
    padding: $gutter-sm;
  }

  // Th
  th{
    padding: $gutter-xs ($gutter-sm);
    background-color: $colorHeadings;
    color: $colorBody;
    @include accentFontStack;

    @include screen($small) {
      font-size: $baseFontSize-sm;
    }
  }
}

.order-notes {
  margin-top: $spacer-sm;
}

/*================ _Medias ================*/
.media-wrapper {
  position: relative;
  border-radius: $borderRadius;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background-color: $colorDefault;

  iframe {
    height: 100%;
  }

  &.video-wrapper {
    padding-bottom: 56.25%;
    height: 0;
    height: auto;
  }

  .section-default & {
    background-color: $colorBody;
  }

  .wrapper-full & {
    border-radius: 0;
  }

  &.product--wrapper{}
}

.media {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .wrapper-full & {
    border-radius: 0;
  }

  &.product--image{}
}

.media-content {
  position: relative;
  width: 100%;
  z-index: ($zindexBase + 1);
}

.product-single__media-wrapper {
  position: relative;

  .slick-initialized & {
    display: block !important; // Overwrite hide class
  }

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

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

/*================ _Images ================*/
img {
  border: 0 none;
  border-radius: $borderRadius;
}

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

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

.image-link {
  display: block;
}

.imgset {
  object-fit: contain;
  vertical-align: middle;
}

.bgset {
  background: {
    size: cover;
    repeat: no-repeat;
    position: center center;
  }
}

.image-gray {
  opacity: $opacity;
  @include prefix("filter", "grayscale(100%)");

  &:hover {
    opacity: 1;
    filter: none;
  }
}

.image-sm { height: $iconFontSize-sm !important; }
.image-md { height: $iconFontSize-md !important; }
.image-lg { height: $iconFontSize-lg !important; }
.image-xl { height: $iconFontSize-xl !important; }

/*================ _Model ================*/
.shopify-model-viewer-ui {
  .shopify-model-viewer-ui__controls-area {
    background: $colorDefault;
    border-color: rgba($colorHeadings, 0.05);
  }

  // Progress bar
  model-viewer {
    color: $colorSecondary;
  }

  // Model button
  .shopify-model-viewer-ui__button--poster {
    @include buttonBase;
    @include buttonSquare;
    @include button($colorPrimary, $colorButtonText);
    @include transition($transitions);
    pointer-events: none;

    // icon
    .shopify-model-viewer-ui__poster-control-icon {
      width: $heightInput;
      height: $heightInput;
    }

    .product-single__media:hover & {
      @include transform(translate(-50%, -50%) scale($scale));
    }
  }

  // Control buttons group
  .shopify-model-viewer-ui__controls-area {
    background-color: transparent;
    border: none;
    bottom: $gutter-sm;
    right: $gutter-sm;
  }

  // Control buttons
  .shopify-model-viewer-ui__button--control {
    width: initial;
    height: initial;
    color: $colorBodyText;
    font-size: $iconFontSize-md;
    background-color: transparent !important;
    line-height: 1;
    margin-top: $spacer-xs;
    @include transition($transitions);

    &:focus {
      outline: auto;
    }

    // Icon
    svg {
      display: none !important;
    }

    &::after {
      display: none;
    }

    // Zoom in button
    &.shopify-model-viewer-ui__button--zoom-in {
      &::before {
        @include iconFontStack;
        content: "zoom_in";
      }
    }

    // Zoom out button
    &.shopify-model-viewer-ui__button--zoom-out {
      &::before {
        @include iconFontStack;
        content: "zoom_out";
      }
    }

    // Fullscreen button
    &.shopify-model-viewer-ui__button--fullscreen {
      &::before {
        @include iconFontStack;
        content: "fullscreen";
      }
    }
  }
}

// Fullscreen
.shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen {
  .shopify-model-viewer-ui__button--control {
    // Fullscreen button
    &.shopify-model-viewer-ui__button--fullscreen {
      &::before {
        content: "fullscreen_exit";
      }
    }
  }
}

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

  &[data-shopify-xr-hidden] {
    @include screenUp($postSmall) {
      display: none;
    }
  }

  .icon {
    vertical-align: middle;
  }
}

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

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


/*================ _Video ================*/
.plyr.plyr--full-ui.plyr--video {
  cursor: pointer;

  // Control bar
  .plyr__controls {
    background-color: $colorHeadings;
    color: $colorBody;
    border: 0;
    margin: 0;
    opacity: 0.8;
  }

  // Control buttons
  .plyr__control {
    @include transition($transitions);
  }

  // Tooltips
  .plyr__volume,.plyr__tooltip {
    background-color: $colorHeadings;
    border-radius: $borderRadius;
    color: currentColor;

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

  // Range
  input[type=range] {
    background-color: transparent;
    color: currentColor;
    @include shadow(none);

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

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

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

    &::-moz-range-track{
      background-image: linear-gradient(to right, currentColor var(--value, 0), rgba($colorBody, $opacity) var(--value, 0));
    }

    &::-ms-fill-lower{
      background-image: linear-gradient(to right, currentColor var(--value, 0), rgba($colorBody, $opacity) var(--value, 0));
    }

    &::-ms-fill-upper{
      background-image: linear-gradient(to right, currentColor var(--value, 0), rgba($colorBody, $opacity) var(--value, 0));
    }

    &:focus::-ms-fill-lower{
      background-image: linear-gradient(to right, currentColor var(--value, 0), rgba($colorBody, $opacity) var(--value, 0));
    }

    &:focus::-ms-fill-upper {
      background-image: linear-gradient(to right, currentColor var(--value, 0), rgba($colorBody, $opacity) var(--value, 0));
    }

    // Thumb
    &::-webkit-slider-thumb {
      @include shadow(none);
    }

    &::-moz-range-thumb {
      @include shadow(none);
    }

    &::-ms-thumb {
      @include shadow(none);
    }

    &:active::-webkit-slider-thumb {
      box-shadow: 0 0 0 3px rgba($colorBody, $opacity / 2);
    }

    &:active::-moz-range-thumb {
      box-shadow: 0 0 0 3px rgba($colorBody, $opacity / 2);
    }

    &:active::-ms-thumb {
      box-shadow: 0 0 0 3px rgba($colorBody, $opacity / 2);
    }
  }

  // Range progress bar
  .plyr__progress__buffer {
    display: none;
  }

  // Play button
  .plyr__control.plyr__control--overlaid {
    @include buttonBase;
    @include buttonSquare;
    @include button($colorPrimary, $colorButtonText);
    pointer-events: none;

    // Icon
    svg{
      width: $heightInput;
      height: $heightInput;
    }

    .product-single__media:hover & {
      @include transform(translate(-50%, -50%) scale($scale));
    }
  }
}


/*================ _RTE ================*/
.rte {
  margin-bottom: $spacer;

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

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

  li {
    margin-bottom: 0;
  }

  img {
    height: auto;
  }

  a {
    color: $colorSecondary;
    word-break: break-word;
  }

  .table-wrap {
    margin-bottom: $spacer;
  }

  blockquote {
    padding: $gutter;
    text-align: center;
    font-size: $baseFontSize-lg;
    margin-bottom: $spacer;

    &::before, &::after {
      @include iconFontStack;
      content: "format_quote";
      color: $colorSecondary;
      display: block;
    }

    &::before {
      text-align: left;
      margin-left: -$gutter-sm;
    }

    &::after {
      text-align: right;
      margin-right: -$gutter-sm;
    }

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

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

/*================ _Blockquote ================*/
blockquote {
  margin: 0;
  display: block;
  width: 100%;
}

cite {
  display: block;
  font-size: $baseFontSize-sm;

  &::before {
    content: "horizontal_rule";
    @include iconFontStack;
  }
}


/*================ _Pagination ================*/
.pagination {
  // Unselected
  a, .page.current {
    @include buttonPagination;
    @include buttonUnselected;
  }

  // Selected
  .page.current {
    @include hovers;
    @include buttonSelected;
  }
}

/*================ _Select_box ================*/
.select-box {
  padding: $spacer;
  border: 2px dashed $colorSecondary;
  width: 100%;
  border-radius: $borderRadius;
  font-size: $baseFontSize-lg;
  font-weight: bold;
  text-align: center;
  -webkit-touch-callout: all; // iOS Safari
  @include prefix("user-select", "all");
}

/*================ _Icons ================*/.material-icons-outlined{
  @include iconFontStack;
}

.icon-image {
  line-height: 1;
}

.icon-svg {
  width: 1em;
  vertical-align: middle;
  margin-top: -0.2em;
}

.icon-middle {
  vertical-align: middle;
}

.icon-width {
  text-align: center;
  width: 1.25em;
  @include flex-shrink(0);
}

.icon-spin {
  @include iconSpin;
}

.icon-sm { font-size: $iconFontSize-sm }
.icon-md { font-size: $iconFontSize-md }
.icon-lg { font-size: $iconFontSize-lg }
.icon-xl { font-size: $iconFontSize-xl }

/*================ _Quantity_selectors ================*/

// Quantity container
.qty-container {
  display: block;
  position: relative;
  max-width: $heightInputSmall * 3;
  width: 100%;
  min-width: $heightInputSmall * 3;

  // Product form
  .product-single__form & {
    max-width: 100%;
  }

  // AJAXcart loading
  .is-loading & {
    opacity: $opacity;
    @include transition(none);
  }
}

// Quantity input
.qty-input {
  width: 100%;

  .qty-container & {
    // Make transparent for cart
    &.cart__product-qty {
      background-color: transparent;
      border-color: transparent;
    }

    text-align: center;

    // Disable arrows of quantity input
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
      display: none;
      -webkit-appearance: none;
      margin: 0;
    }
  }
}

// Quantity buttons
.qty-adjust {
  position: absolute;
  display: none;
  top: 0;
  z-index: 1;
  overflow: hidden;
  @include prefix("user-select", "none");
  @include backface(hidden);

  .qty-container & {
    display: inherit;
  }
}

// Minus button
.qty-minus {
  left: 0;
}

// Plus button
.qty-plus {
  right: 0;
}

// Quantity error
.qty-error {
  margin-top: $spacer-sm;
  text-align: center;
  font-style: italic;

  #CollectionAddtocart & {
    border-radius: 0;
    margin: 0;
  }
}

/*================ _Overlay ================*/
.overlay {
  color: $colorHeroHeader;

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($colorOverlay, $opacityOverlay);
  }

  h1, h2, h3, h4, h5, h6, p, .text-link {
    color: $colorHeroHeader;
  }
}

.overlay-backdrop {
  background-color: rgba($colorDrawerOverlay, $colorDrawerOverlayOpacity);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: $zindexDrawerOverlay;
  @include transition($transitionDrawers);
}

.overlay-content {
  @include colorOverwrite($colorDrawer, $colorDrawerDefault, $colorDrawerBorder, $colorDrawerText, $colorDrawerPrimary, $colorDrawerSecondary, $colorDrawerButtonText, $colorDrawerInput, $colorDrawerSalesPrice);

  // Select
  select {
    background-image: url("//mixoryshop.myshopify.com/cdn/shop/t/4/assets/icon-select-overlay.svg?v=75874386788941677231630478764");
  }
}

/*================ _Modals ================*/
.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: $zindexDrawer + ($zindexIncrement * 2);
  width: 100vw;
  height: 100%;
  outline: 0;
  display: none;
  overflow: hidden;
  @include makeBox;

  @include screen($small) {
    padding-bottom: 0;
  }

  &.js-modal-open,
  &.is-closing {
    display: block;
    overflow-y: auto;
  }

  &.js-modal-open {
    @include screenUp($postSmall) {
      @include animated(fadeInDown);
    }

    @include screen($small) {
      @include animated(fadeInUp);
    }
  }

  &.is-closing {
    @include screenUp($postSmall) {
      @include animated(fadeOutUp);
    }

    @include screen($small) {
      @include animated(fadeOutDown);
    }
  }
}

.modal-dialog {
  min-height: 100%;
  @include makeWrapper($siteWidth);
  @include display-flexbox;
  @include align-items(center);

  @include screen($small) {
    padding-left: 0;
    padding-right: 0;
    @include align-items(flex-end);
  }
}

.modal-content {
  @include noFocus;
  pointer-events: auto;
  border-radius: $borderRadius;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 600px;

  @include screen($small) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100% !important;
  }

  .modal-small & {
    width: 400px;
  }
  .modal-large & {
    width: 800px;
  }
  .modal-xlarge & {
    width: 100%;
  }
}

.modal-header {
  border-bottom: $borders;
  border-color:$colorDrawerBorder;
  padding: $gutter-sm;
  @include display-flexbox;
  @include align-items(center);
  @include justify-content(space-between);
}

.modal-title {
  margin-bottom: 0;
  text-align: left;
  @include ellipsis;
}

.modal-close {
  margin-left: $spacer-sm;
  @include flex-shrink(0);
}

.modal-body {
  padding:$gutter-sm;
}

.modal-footer {
  border-top: $borders;
  border-color:$colorDrawerBorder;
  padding: $gutter-sm;
}

.overlay-modal {
  z-index: $zindexDrawer + ($zindexIncrement * 2) - 1;

  &::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba($colorDrawerOverlay, $opacityOverlay);
  }

  .modal.js-modal-open + & {
    display: block;
    @include animated(fadeIn);
  }

  .modal.is-closing + & {
    display: block;
    @include animated(fadeOut);
  }
}

/*================ _Payment_icons ================*/
.payment-icons {
  li {
    line-height: 0;
  }
}

.payment-icon {
  height: 18px;
  width: auto;
}

.custom-payment-icon {
  border-radius: $borderRadius-sm;
}

/*================ _Onboarding ================*/
.placeholder-svg {
  border-radius: $borderRadius;
  fill: rgba($colorHeadings, $opacity);
  background-color: $colorDefault;
  width: 100%;
  max-width: 100%;
  display: block;

  .section-default & {
    background-color: $colorBody;
  }

  .wrapper-full &, .hero & {
    border-radius: 0;
  }

  .media-wrapper & {
    height: 100%;
  }
}

/*================ _Reviews ================*/
// Review badge
.review-badge {
  & > * {
    @include animated(fadeIn);
  }

  & + .product-single__title {
    margin-top: $headerMarginBottom;
  }

  .product-single__title + & {
    margin-bottom: $headerMarginBottom;
  }
}

/*================ _Toast ================*/
.toasts {
  position: fixed;
  top: 0;
  right: 0;
  z-index: $zindexDrawerOverlay + 1;
  width: 100%;
  height: 100%;
  padding: $spacer;
  opacity: 0;
  visibility: hidden;
  @include display-flexbox();
  @include justify-content(flex-end);
  @include transition($transitions);
}

.overlay-toasts {
  display: block;
  opacity: 0;
  visibility: hidden;

  .toasts.visible + & {
    opacity: 1;
    visibility: visible;
  }
}

.toast {
  max-width: 450px;
  opacity: 0;
  visibility: hidden;
  @include transition($transitions);
}

.toast-image {
  width: 40px;
  margin-right: $spacer;
  @include flex-shrink(0);

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

.toasts-group {
  overflow-y: auto;

  & > .toast + .toast {
    margin-top: $spacer;
  }
}

/*============================================================================
  _Structure
==============================================================================*/

/*================ _Grid ================*/


// Grid
.grid {
  list-style: none;
  margin: 0;
  margin-left: -$gutter;
  @include display-flexbox();
  @include flex-wrap(wrap);

  @include screen($small){
    margin-left: -$gutter-sm;
  }

  // Full
  &.grid-full {
    margin-left: 0;
  }

  // Small
  &.grid-small {
    margin-left: -$gutter-sm;
  }

  // Xsmall
  &.grid-xsmall {
    margin-left: -$gutter-xs;
  }

  // Spacer
  &.grid-spacer {
    margin-bottom: -$gutter;

    @include screen($small) {
      margin-bottom: -$gutter-sm;
    }

    &.grid-small {
      margin-bottom: -$gutter-sm;
    }

    &.grid-xsmall {
      margin-bottom: -$gutter-xs;
    }
  }
}

// Grid item
.grid__item {
  width: 100%;
  max-width: 100%;
  padding-left: $gutter;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;

  @include screen($small) {
    padding-left: $gutter-sm;
    width: 100%;
    @include flex(0 0 100%);
  }

  // Full
  .grid-full > & {
    padding-left:0 !important;
  }

  // Small
  .grid-small > & {
    padding-left: $gutter-sm;
  }

  // Xsmall
  .grid-xsmall > & {
    padding-left: $gutter-xs;
  }

  // Spacer
  .grid-spacer > & {
    margin-bottom: $gutter;

    @include screen($small) {
      margin-bottom: $gutter-sm;
    }
  }

  .grid-spacer.grid-small > & {
    margin-bottom: $gutter-sm;
  }

  .grid-spacer.grid-xsmall > & {
    margin-bottom: $gutter-xs;
  }

  // Push
  &[class*="push--"] {
    position: relative;
  }
}

/*================ _Grid_breakpoint ================*/

// Regular non-responsive width
@include device-type();

// Regular non-responsive push classes
@include push-setup();

// Regular non-responsive helper classes
@include device-helper();

// Responsive classes
@each $name in $breakpoint-has-widths {
  @include grid-media-query($name) {
    @include device-type("#{$name}--");
    @include push-setup("#{$name}--");
    @include device-helper("#{$name}--");
  }
}

/*================ _Section ================ */
.shopify-section {
  position: relative;

  &:empty {
    display: none;
  }
}

.section-default {
  background-color: $colorDefault;
}

.section-border {
  border-top: $borders;
}

.section-full-width.section-no-title {
  background-color: inherit;
}

/*================ _Section_header ================*/
.section-header,
.shopify-policy__title {
  margin-bottom: $gutter;
  text-align: $textAlignTitle;
  position: relative;

  & > *:last-child {
    margin-bottom: 0;
  }

  @include screen($small) {
    padding-bottom: $gutter;

    &::after {
      content: "";
      border-bottom: $borders;
      display: block;
      left: -$gutter-sm;
      right: -$gutter-sm;
      padding-top: $gutter;
      position: absolute;

      .wrapper-full & {
        display: none;
      }
    }

    .wrapper-full & {
      padding-bottom: 0;
    }
  }
}

.page-title,
.shopify-policy__title h1 {
  @include pageTitle;}

.section-header__subtitle {
  @include leadFontStack;
}

/*================ _Main_content ================*/
// Stick footer to bottom when page content is less
#PageContainer {
  @include display-flexbox;
  @include flex-direction(column);
  min-height: 100vh;
}

.main-content {
  display: block;
  position: relative;
  z-index: $zindexBase + 2;
}

/*================ _Box ================*/
.box {
  @include makeBox;
}

.box-small {
  @include screenUp($postSmall) {
    padding-top: $gutter;
    padding-bottom: $gutter;
  }
}

/*================ _Wrapper ================*/
.wrapper {
  @include makeWrapper($siteWidth);
}

.wrapper-fluid {
  @include makeWrapper(100%);
}

.wrapper-full {
  max-width: 100%;
}

/*================ _Breadcrumbs ================*/
.breadcrumbs {
  padding: $paddingButtonSmallY 0;
  background-color: $colorDefault;

  @include screen($small) {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .grid__item:first-of-type {
    @include screenUp($postSmall) {
      @include ellipsis;
    }
  }
}

/*================ _Slick_grid ================ */
.grid.slick-initialized {
  margin-left: 0;

  @include screen($small) {
    margin-left: -$gutter-sm;
    margin-right: -$gutter-sm;
  }

  @include screenUp($postSmall) {
    margin-left: -($gutter / 2);
    margin-right: -($gutter / 2);
    border-radius: $borderRadius;
  }

  // List
  .slick-list {
    @include screen($small) {
      padding-left: $gutter-xs;
      padding-right: $gutter-xs;
    }
  }

  // Track
  .slick-track {
    @include display-flexbox;
    @include flex-wrap(wrap);
  }

  // Slide
  .slick-slide {
    padding-left: 0;
    @include flex(0 0 auto);

    @include screen($small) {
      margin-left: $gutter-xs;
      margin-right: $gutter-xs;
    }

    @include screenUp($postSmall) {
      margin-left: $gutter/2;
      margin-right: $gutter/2;
    }
  }

  // Grid small
  &.grid-small {
    @include screenUp($postSmall) {
      margin-left: -($gutter-xs);
      margin-right: -($gutter-xs);

      .slick-slide {
        margin-left: $gutter-xs;
        margin-right: $gutter-xs;
      }

      // Slick vertical
      &.slick-vertical {
        .slick-list {
          margin-top: -$gutter-xs;
          margin-bottom: -$gutter-xs;
        }

        .slick-slide {
          margin-top: $gutter-xs;
          margin-bottom: $gutter-xs;
        }
      }
    }
  }

  // Grid xsmall
  &.grid-xsmall {
    @include screenUp($postSmall) {
      margin-left: -$gutter-xs / 2;
      margin-right: -$gutter-xs / 2;

      .slick-slide {
        margin-left: $gutter-xs / 2;
        margin-right: $gutter-xs / 2;
      }

      // Slick vertical
      &.slick-vertical {
        .slick-list {
          margin-top: -$gutter-xs / 2;
          margin-bottom: -$gutter-xs / 2;
        }

        .slick-slide {
          margin-top: $gutter-xs / 2;
          margin-bottom: $gutter-xs / 2;
        }
      }
    }
  }

  // Reset grid spacer
  &.grid-spacer {
    margin-bottom: 0;

    .grid__item {
      margin-bottom: 0;
    }
  }

  // Reset grid full
  &.grid-full {
    margin-left: 0;
    margin-right: 0;

    .grid__item {
      margin-left: 0;
      margin-right: 0;
    }
  }
}

/*================ _Product_grid ================*/
.grid-product__wrapper {
  .is-sold-out & {
    opacity: $opacity;
  }
}

.grid-product__image-wrapper {
  position: relative;
  border-top-left-radius: $borderRadius;
  border-top-right-radius: $borderRadius;
}

.grid-product__image-link {
  @include flex(auto);
}

.grid-product__meta {
  &:hover {
    opacity: 1;
  }
}

.cs-active {
  .grid-product--wrapper:not(.product-hover-image) {
    display: block !important;
  }

  .product-hover-image {
    display: none !important;
  }
}

.grid-product--wrapper {
  @include animated(fadeIn);

  &:not(.product-hover-image) {
    .has-hover-image:hover & {
      display: none;
    }
  }
}

// Second image on hover
.product-hover-image {
  display: none;

  .has-hover-image:hover & {
    display: block;
  }
}

// Product badges
.grid-product__badge {
  position: absolute;
  z-index: $zindexBase + 1;

  &.grid-product__badge-top-left {
    top: $gutter-xs;
    left: $gutter-xs;
  }

  &.grid-product__badge-top-right {
    top: $gutter-xs;
    right: $gutter-xs;
  }

  &.grid-product__badge-bottom-right {
    bottom: $gutter-xs;
    right: $gutter-xs;
  }

  &.grid-product__badge-bottom-left {
    bottom: $gutter-xs;
    left: $gutter-xs;
  }
}

.grid-product__price-min {
  position: relative;
}

// Price
.tooltip-wrapper {
  &.tooltip-position-bottom {
    .tooltip {
      bottom: inherit;
      top: 100%;
      margin-bottom: 0;
      margin-top: $spacer;
      @include transform(translate(-50%, -$animationOffset));

      &:after {
        border-top: 0;
        border-bottom: solid $colorHeadings $spacer-sm;
        top: -$spacer-sm;
        bottom: inherit;
      }
    }
  }

  .money {
    &:hover {
      & + .tooltip {
        opacity: 1;
        @include transform(translate(-50%, 0));
      }
    }
  }
}

/*================ _Collection_grid ================*/
.collection_grid-item {
  @include display-flexbox();
  @include align-items(center);
}

.collection_grid-image {
  @include transition($transitions);

  .collection_grid-animation:hover & {
    @include transform(scale($scale));
  }
}

.collection_grid-inner {
  padding: 0 $gutter-sm;
}

.collection_grid-text-wrapper {
  text-align: center;
}

.collection_grid-title {
  margin-bottom: 0;
}

.collection_grid--xsmall {
  min-height: $collectionHeightXsmall;
}

.collection_grid--small {
  min-height: $collectionHeightSmall;
}

.collection_grid--medium {
  min-height: $collectionHeightMedium;
}

.collection_grid--large {
  min-height: $collectionHeightLarge;
}

.collection_grid--xlarge {
  min-height: $collectionHeightXlarge;
}


/*============================================================================
  _Sections
==============================================================================*/

/*================ _Announcement ================*/
.announcement-section {
  z-index: $zindexHeader + 1;

  .sticky-announcement_bar & {
    @include sticky;
    z-index: $zindexHeader + 1;
  }

}

#announcement {
  background-color: $colorAnnouncement;
  color: $colorAnnouncementText;

  a {
    color: $colorAnnouncementText;
  }

  .rte {
    margin-bottom: 0;
  }

  p {
    @include ellipsis;
  }
}

.announcement-grid {
  height: $heightInputSmall;
}

.announcement-left-message {
  .social-medias + & {
    margin-left: $spacer-sm;
  }
}

.announcement-message {
  .slick-track {
    @include display-flexbox;
    @include align-items(center);
  }
}

.announcement-right-message {
  & + ul {
    margin-left: $spacer-sm;
  }
}

/*================ _Header ================*/
.header-section {
  position: relative;
  z-index: $zindexHeader;

  .sticky-header & {
    @include sticky;
    z-index: $zindexHeader;
  }

  // visual fix for 1px spacing above header
  .sticky-header:not(.sticky-announcement_bar) &{
    &::before {
      content: '';
      width: 100%;
      height: 1px;
      background-color: $colorNav;
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
    }
  }

  .sticky-header.sticky-announcement_bar & {
    top: $heightInputSmall;
  }

  .header-container {
    // Overwrite for hero header on mobile
    @include screen($small) {
      position: initial;
    }
  }
}

// Site header
.site-header {
  background-color: $colorNav;
  border-bottom: $borders;
  border-color: transparent;
  height: $heightHeader;
  position: relative;
  @include transition($transitions);

  .site-nav__link, .site-header__logo-link {
    color: $colorNavText;
  }

  // Nav type styles
  @include screenUp($postMedium) {
    .nav-hidden & {
      .large--hide {
        display: block !important;
      }

      .medium--hide.small--hide {
        display: none;
      }
    }
  }
}

// Header-wrapper
.header-wrapper {
  position: relative; // For mega menu
}

// Header grid
.header-grid {
  @include screen($small) {
    &.grid {
      margin-left: -$gutter-xs;
    }

    & > .grid__item {
      padding-left: $gutter-xs;
    }
  }
}

// Nav container left icons
.nav-container-left-icons {
  order: 1;
}

// Nav container logo
.nav-container-logo {
  order: 2;

  // Nav type styles
  @include screenUp($postMedium) {
    .nav-center-logo & {
      order: 3;
    }
  }
}

// Nav container menu
.nav-container-menu {
  order: 3;

  // Nav type styles
  @include screenUp($postMedium) {
    .nav-right & {
      text-align: right;
    }
    .nav-center & {
      text-align: center;
    }
    .nav-center-logo & {
      order: 2;
    }
  }
}

// Nav container right icons
.nav-container-right-icons {
  order: 4;

  .customer-name {
    margin-right: $spacer-sm;
  }
}

// Nav inner-container
.inner-nav-containers {
  margin: 0;
}

// Nav items
.site-nav__item {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: normal;
  margin: 0;
}

// Nav Links
.site-nav__link {
  @include accentFontStack;
  display: inline-block;
  text-decoration: none;
  padding: $gutter-xs;
  white-space: nowrap;

  @include screen($small) {
    padding: $gutter-xs / 2;
  }
}

// Logo wrapper
.site-header__logo {
  @include headerFontStack;
  font-size: $headerSize1;
  margin: 0;

  @include screen($small) {
    font-size: $headerSize6;
  }

  // Hide inverted logo
  .inverted-logo {
    display: none;
  }

  // Hide mobile logo
  .mobile-logo {
    display: none;
    height: 100%;
  }
}

// Icons
.site-nav__link--icon {
  letter-spacing: 0 !important;
  font-size: $iconFontSize-md;
}

// Cart bubble
.cart-link {
  position: relative;
}

.cart-link__bubble {
  display: none;
}

.cart-link__bubble--visible {
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  right: 5px;
  bottom: 5px;
  border: 2px solid $colorNav;
  background-color: $colorSecondary;
  border-radius: $circle;
  @include transition($transitions);

  @include screen($small) {
    width: 12px;
    height: 12px;
    right: 0;
    bottom: 0;
  }
}

.cart-count,
.wl-count {
  .site-nav__link--icon & {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: $baseFontSize-sm;

    @include screen($small) {
      top: -4px;
      right: -2px;
    }
  }
}

// Sticky header
.sticky-header.is-scrolling {
  @include screenUp($postSmall) {
    .site-header {
      background-color: $colorNav;
      border-color: $colorNavBorder;
      width: 100%;

      .site-nav__link, .site-header__logo-link {
        color: $colorNavText;
      }
    }

    // Show default logo - hide inverted logo
    .site-header__logo {
      .default-logo {
        display: block;
      }

      .inverted-logo {
        display: none;
      }
    }

    .cart-link__bubble--visible {
      background-color: $colorSecondary;
      border-color: $colorNav;
    }
  }
}

// Mobile header
@include screen($small) {
  .site-header {
    height: $heightHeaderMobile;
    background-color: $colorNav !important;
    border-color: $colorNavBorder;

    .site-nav__link, .site-header__logo-link {
      color: $colorNavText !important;
    }
  }

  // Hide default and inverted logo - show mobile logo
  .site-header__logo {
    .default-logo {
      display: none;
    }

    .inverted-logo {
      display: none !important;
    }

    .mobile-logo {
      display: block;
    }
  }

  .cart-link__bubble--visible {
    background-color: $colorSecondary !important;
    border-color: $colorNav !important;
  }
}

/*================ _Drawers ================*/
.drawer {
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  z-index: $zindexDrawer;
  display: none;
  @include flex-direction(column);
  @include transition($transitionDrawers);
  @include noFocus;

  &.js-drawer-open {
    @include display-flexbox;
  }

  &.is-closing {
    @include display-flexbox;
  }

  .drawer__header, .drawer__footer, .drawer__inner {
    opacity: 0;
  }
}

// Drawer left
.drawer--left {
  max-width: 100%;
  left: 0;

  // Large
  @include screenUp($postSmall) {
    width: $drawerNavWidth;
  }

  // Mobile
  @include screen($small) {
    width: $drawerNavWidthMobile;
  }

  &.js-drawer-open {
    @include shadow($shadowRight);
    @include animated(slideInLeft);
  }

  &.is-closing {
    @include animated(slideOutLeft);
  }
}

// Drawer right
.drawer--right {
  max-width: 100%;
  right: 0;

  // Large
  @include screenUp($postSmall) {
    width: $drawerCartWidth;
  }

  // Mobile
  @include screen($small) {
    width: $drawerCartWidthMobile;
  }

  &.js-drawer-open {
    @include shadow($shadowLeft);
    @include animated(slideInRight);
  }

  &.is-closing {
    @include animated(slideOutRight);
  }
}

// Drawer top
.drawer--top {
  max-height: 100%;
  width: 100%;
  top: 0;
  height: fit-content;

  &.js-drawer-open {
    @include shadow($shadowBottom);
    @include animated(slideInDown);
  }

  &.is-closing {
    @include animated(slideOutUp);
  }
}

// Drawer top
.drawer--bottom {
  max-height: 100%;
  width: 100%;
  bottom: 0;
  height: fit-content;

  &.js-drawer-open {
    @include shadow($shadowTop);
    @include animated(slideInUp);
  }

  &.is-closing {
    @include animated(slideOutDown);
  }
}

// Overlay drawer
.overlay-drawer {
  .drawer.js-drawer-open + & {
    display: block;
    @include animated(fadeIn);
  }

  .drawer.is-closing + & {
    display: block;
    @include animated(fadeOut);
  }
}

// Drawer header
.drawer__header {
  height: $drawerHeaderHeight;
  width: 100%;
  z-index: 10;
  padding: 0 $gutter-sm;
  border-bottom: $borders;
  border-color: $colorDrawerBorder;
  @include display-flexbox;
  @include align-items(center);
  @include flex-shrink(0);

  @include screen($small) {
    height: $heightHeaderMobile;
  }

  .drawer.js-drawer-open & {
    @include animated(fadeInDown);
  }

  .drawer.is-closing & {
    @include animated(fadeOutUp);
  }
}

.drawer__title {
  padding-right: $spacer;
  font-size: $headerSize4;
  @include headerFontStack;
  line-height: $baseLineHeight;
  @include flex(auto);
  @include ellipsis;
}

// Drawer inner
.drawer__inner {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  @include flex(auto);

  .drawer--top &, .drawer--bottom & {
    overflow: auto;
  }

  .drawer.js-drawer-open & {
    @include animated(fadeIn);
  }

  .drawer.is-closing & {
    @include animated(fadeOut);
  }
}

.drawer__inner-section {
  padding: $gutter;

  @include screen($small) {
    padding: $gutter-sm;
  }

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

  // Hide section if empty
  &:empty {
    display: none;
  }

  & + .drawer__inner-section {
    border-top: $borders;
    border-color: $colorDrawerBorder;
  }

  // Error message
  .errors {
    color: $colorDrawerErrorText;
    border-color: $colorDrawerErrorText;
  }
}

// Drawer footer
.drawer__footer {
  background-color: $colorDrawerDefault;
  padding: $gutter-sm;
  @include flex-shrink(0);

  &:empty {
    display: none;
  }

  .drawer.js-drawer-open & {
    @include animated(fadeInUp);
  }

  .drawer.is-closing & {
    @include animated(fadeOutDown);
  }
}

/*================ _Drawer_menu ================*/
#NavDrawer {
  // Social media
  .social-medias {
    @include display-flexbox();
    @include justify-content(space-around);
    @include flex-wrap(wrap);
  }
}

// Menu
.mobile-nav {
  margin-left: 0;
  margin-bottom: 0;

  @include spacerAuto($gutter);

  @include screen($small) {
    @include spacerAuto($gutter-sm);
  }
}

// Menu item
.mobile-nav__item {
  position: relative;
  display: block;
  margin-bottom: 0;
  list-style: none;

  .mobile-nav > & {
    background-color: $colorDrawer;
  }

  a {
    display: block;
    color: $colorDrawerText;
    text-decoration: none;
  }
}

// Menu with sublinks
.mobile-nav__has-sublist {
  @include display-flexbox;
  @include align-items(center);

  .mobile-nav__link {
    width: 100%;
  }

  &:not(.active) {
    & + .tab-body {
      display: none;
    }
  }
}

// Sublist menu
.mobile-nav__sublist {
  display: none;
  margin-bottom: 0;
  margin-top: $spacer;
  position: relative;
  @include animated(fadeInUp);

  &::before {
    content: "";
    border-left: $borders;
    border-color: $colorDrawerBorder;
    position: absolute;
    margin-left: -$spacer;
    left: 0;
    height: 100%;
  }

  .mobile-nav__item + .mobile-nav__item {
    margin-top: $spacer;
  }
}

// First level links
.mobile-nav__has-sublist a,
.mobile-nav > .mobile-nav__item:not(.mobile-nav__item--secondary) > a {
  @include accentFontStack;
  font-size: $headerSize5;
}

// Second level links
.mobile-nav > .mobile-nav__item > .mobile-nav__sublist > .mobile-nav__item > a,
.mobile-nav > .mobile-nav__item > .mobile-nav__sublist > .mobile-nav__item > .mobile-nav__has-sublist > a {
  @include accentFontStack;
  font-size: $headerSize6;
}

// Open / close menu
.mobile-nav__toggle-open {
  display: block;

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

.mobile-nav__toggle-close {
  display: none;

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


/*================ _Search_drawer ================*/
#SearchDrawer {
  &.drawer {
    bottom: auto;
  }
}

/*================ _Guarantee ================*/
#section-guarantee {
  .grid__item {
    @include screen($small) {
      @include flex(50%);
    }
  }
}

/*================ _Footer ================*/
// Stick footer to bottom when page content is less
.footer-section {
  margin-top: auto;
}

// Footer
.site-footer {
  @include colorOverwrite($colorFooter, $colorFooterDefault, $colorFooterBorder, $colorFooterText, $colorFooterPrimary, $colorFooterSecondary, $colorFooterButtonText, $colorFooterInput, $colorFooterSalesPrice);
  position: relative;
  z-index: $zindexBase;

  // Select
  select {
    background-image: url("//mixoryshop.myshopify.com/cdn/shop/t/4/assets/icon-select-footer.svg?v=67540325146963692051630478764");
  }
}

// Columns
.footer-item {
  @include screen($small) {
    & + .footer-item {
      padding-top: ($gutter - $gutter-sm);

      &::before {
        content: "";
        border-top: $borders;
        border-color: $colorFooterBorder;
        position: relative;
        display: block;
        margin-left: -$gutter-sm;
        margin-right: -$gutter-sm;
        margin-bottom: $gutter;
      }
    }
  }
}

.inline-footer {
  @include screenUp($postSmall) {
    li {
      display: inline-block;
      margin-right: $gutter;
      margin-bottom: 0;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.site-footer__linktitle {
  color: $colorFooterText;
}

.site-footer__linklist {
  a {
    color: $colorFooterText;
    display: inline-block;
    margin-bottom: $spacer-sm;
  }

  & > li:last-child a {
    margin-bottom: 0;
  }
}

// Top footer
.top-footer {
  padding: $gutter 0;
  border-bottom: $borders;
  border-color: $colorFooterBorder;
}

.footer-social-title {
  @include screenUp($postSmall) {
    margin-bottom: 0;
  }
}

// Bottom footer
.bottom-footer {
  padding: $gutter 0;
  border-top: $borders;
  border-color: $colorFooterBorder;

  .bottom-footer__copyright {
    @include screenUp($postSmall) {
      @include display-flexbox();
      @include align-items(center);
    }
  }
}

.credentials {
  @include screenUp($postSmall) {
    margin-bottom: 0;
  }
}

/*================ _Hero ================*/
.hero-container {
  overflow: hidden;
  position: relative;
}

// Hero
.hero {
  width: 100%;
  border-radius: 0;
  @include display-flexbox;

  &.hero-auto {
    height: auto;
  }
}

.slide-link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

// Hero size desktop
.hero--xsmall {
  @include screenUp($postSmall) {
    min-height: $heroHeightXsmall;
  }
}

.hero--small {
  @include screenUp($postSmall) {
    min-height: $heroHeightSmall;
  }
}

.hero--medium {
  @include screenUp($postSmall) {
    min-height: $heroHeightMedium;
  }
}

.hero--large {
  @include screenUp($postSmall) {
    min-height: $heroHeightLarge;
  }
}

.hero--xlarge {
  @include screenUp($postSmall) {
    min-height: 100vh;
  }
}

// Hero size mobile
.hero-mobile-xsmall {
  @include screen($small) {
    min-height: $heroHeightMobileXsmall;
  }
}

.hero-mobile-small {
  @include screen($small) {
    min-height: $heroHeightMobileSmall;
  }
}

.hero-mobile-medium {
  @include screen($small) {
    min-height: $heroHeightMobileMedium;
  }
}

.hero-mobile-large {
  @include screen($small) {
    min-height: $heroHeightMobileLarge;
  }
}

.hero-mobile-xlarge {
  @include screen($small) {
    // min-height: 100vh;
  }
}

// Hero as first section
.index-sections > .shopify-section:first-child,
.hero-first {
  .hero--xlarge {
    @include screenUp($postSmall) {
      min-height: calc(100vh - #{$heightHeader+$heightInputSmall});

      .transparent-header & {
        min-height: calc(100vh - #{$heightInputSmall});
      }
    }
  }

  .hero-mobile-xlarge {
    @include screen($small) {
      min-height: calc(100vh - #{$heightHeaderMobile+$heightInputSmall});
    }
  }

  .hero-content {
    .transparent-header & {
      @include screenUp($postSmall) {
        padding-top: $heightHeader;
      }
    }
  }
}

// Hero video
.hero-video {
  object-fit: cover;
  min-height: 100%; // IE
}

// Hero inner
.hero__inner {
  @include makeBox;
}

// Hero text wrapper
.hero__text-wrapper {
  @include makeWrapper($siteWidth);
}

// Hero-content
.hero-content {
  display: inline-block;
  opacity: 0;

  @include screen($large) {
    width: 66.666%;
  }

  .slick-dotted & {
    padding-bottom: $gutter;
  }

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

  // Animate hero content when it is fully loaded
  .slick-current .lazyloaded + .hero__inner &, // Current slide
  .hero:not(.hero__slide) .lazyloaded + .hero__inner & // Single hero
  {
    @include animated(fadeInUp);
  }
}

// Hero text
.hero__text {
  @include leadFontStack;

  .hero-collection & {
    margin-bottom: 0;
  }
}

/*================ _Hero_slick ================*/
.slick-hero {
  // Slick track
  .slick-track {
    @include display-flexbox();
  }

  .slick-slide {
    @include display-flexbox();
  }
}

/*================ _Featured_row ================*/
.featured-row-right {
  @include screenUp($postSmall) {
    order: 1;
  }
}

/*================ _Featured_image ================*/
.featured-image-section {
  .wrapper-full {
    .image {
      border-radius: 0;
    }
  }
}

/*================ _Gallery ================*/
.image-bar {
  overflow: hidden;

  @include screen($small) {
    max-width: 400px;
    margin: 0 auto;
  }
}

.image-bar__item {
  display: block;
  background: {
    repeat: no-repeat;
    position: 50% 50%;
    size: cover;
  }
}

.image-bar__content, .image-bar__item {
  position: relative;
  width: 100%;

  .image-bar--small & {
    height: 94px;
  }

  .image-bar--medium & {
    height: 357px;
  }

  .image-bar--large & {
    height: 488px;
  }
}

.image-bar__caption {
  position: absolute;
  top: 50%;
  @include transform(translateY(-50%));
  width: 100%;
  text-align: center;
}


/*================ _Quotes ================*/
.quote-icon-wrapper {
  border-radius: $borderRadius;
  background-color: $colorSecondary;
  @include RadiusCircle;
}

.quote-icon {
  color: $colorBody;
}

/*================ _Logo_list ================*/
.logo-list-title {
  @include screenUp($postSmall) {
    font-size: $headerSize4;
    margin-bottom: 0;
  }
}

.logo-bar__item {
  @include screen($small) {
    img {
      display: block;
      margin: 0 auto;
    }
  }
}

/*================ _Map ================*/
.map-container {
  position: relative;
  width: 100%;

  .media {
    @include screen($small) {
      position: relative;
      height: 250px;
    }
  }
}

// Map image
.map-section__image {
  .map-section--display-map & {
    display: none !important;
  }

  .map-section--load-error & {
    display: block !important;
  }
}

// Content
.map-section__content {
  border: none;

  @include screenUp($postSmall) {
    width: 33.333%;
    padding: $gutter;
  }

  @include screen($small) {
    background-color: $colorDefault;
  }
}

// Hide Google maps UI
.gm-style-cc,
.gm-style-cc + div {
  visibility: hidden;
}


/*============================================================================
  _Templates
==============================================================================*/

/*================ _Article ================*/
.featured-blog__author {
  text-transform: capitalize;
}

.comment {
  + .comment {
    margin-top: $spacer;
  }
}

/*================ _Blog ================*/
.rss-link {
  font-size: 0.6em;
}

/*================ _Cart ================*/
.cart__price-wrapper {
  line-height: $headerLineHeight;
}

.cart__price {
  @include animated(fadeIn);

  .cart__product-has-discount & {
    display: block;
  }
}

.cart__subtotal-discounted {
  @include animated(fadeIn);
}

// Product discount
.product-discount {
  margin-top: $spacer-xs;
  margin-bottom: 0;
  color: $colorSecondary;
  @include accentFontStack;
}

// Order discount
.order-discount {
  margin-bottom: $spacer-xs;
  color: $colorSecondary;
  @include accentFontStack;
}

// Cookie message
.cookie-message {
  display: none;

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

/*================ _Cart_ajax ================*/
#CartDrawer {
  @include flex-direction(row);
}

.ajaxcart-loading {
  width: 100%;
  @include display-flexbox();
  @include align-items(center);
  @include justify-content(center);

  .ajaxcart--is-loaded & {
    display: none;
  }
}

#CartContainer {
  .ajaxcart--is-loading & {
    display: none;
  }
}

.ajaxcart_row {
  @include transition($transitions);

  &:not(:last-of-type) {
    border-bottom: none;
  }

  &.is-loading {
    opacity: $opacity !important;
  }
}

.ajaxcart-products {
  padding: 0 !important;
}

/*================ _Collection ================*/
.collection-tags {
  // Unselected
  a {
    @include buttonBase;
    @include buttonSmall;
    @include buttonUnselected;
  }

  // Selected
  .tag--active {
    a {
      @include buttonSelected;
    }

    // Remove icon
    &:not(.tag--all) {
      a {
        &::before {
          @include iconFontStack;
          content: "highlight_off";
          margin-right: $spacer-xs;
        }
      }
    }
  }
}

/*================ _Password ================*/
.password-main {
  min-height: 100vh;
  @include display-flexbox;
  @include flex-direction(column);
}

// Header
.password-page__header {
  padding: $gutter-sm 0;
  border-bottom: $borders;
}

// Content
.password-content {
  @include display-flexbox;
  @include align-items(center);
  @include flex(auto);
}

.password-page__content {
  width: 100%;
}

// Footer
.password-page__footer {
  padding: $gutter;
  background-color: $colorDefault;
}

/*================ _Product ================*/

/*=== product media ===*/
.product-single__media-group {
  &.slick-initialized {
    .slick-track {
      @include align-items(flex-start);
    }
  }
}

.product-single__media-flex-wrapper {
  &:last-of-type {
    margin-bottom: 0 !important;
  }
}

.product-stacked_media_flex {
  @include flex-basis(auto);
}

.product-single__media-flex {
  width: 100%;
}

/*=== product thumbnails ===*/
.product-single__thumbnails {
  margin-top: $gutter-sm;
}

// Thumbnail link
.product-single__thumbnail {
  opacity: $opacity;

  .slick-current & {
    opacity: 1;
  }
}

// Thumbnail img
.product-single__thumb {
  .thumbnail-media-external_video & {
    object-fit: none;
  }
}

// Thumbnail badge
.product-single__thumbnail-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  @include display-flexbox;
  @include justify-content(center);
  @include align-items(center);

  // Icon
  .icon {
    border-radius: $borderRadius;
    fill: $colorPrimary;
    width: $heightInputXsmall;
    height: $heightInputXsmall;
  }

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

.product-single-divider {
  @include screen($small) {
    margin-top: $gutter;
  }
}

/*=== product details ===*/
.product-single__meta--wrapper {
  margin-top: $gutter;
  @include align-self(flex-start);
}

// Title
.product-single__title {
  @include screen($small) {
    font-size: $headerSize3;
  }
}

// Price
.price-container {
  .variant-unavailable & {
    display: none;
  }
}

.product-single__price--compare-at {
  margin-left: $spacer-xs;
}

.product-single__unit {
  display: none;

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

// Variant
.radio-wrapper {
  @include screenUp($postSmall) {
    @include flex(50%);
  }
}

// Product form item
.product-single__form .product-form__item {
  margin-bottom: $spacer;

  & > label {
    display: block;
    margin-bottom: $spacer-xs;
  }

  .product-form__input {
    width: 100%;
    @include selectSmall;
  }
}

// Variant buttons
.single-option-radio {
  border: 0;
  padding-top: 0;
  position: relative;

  input {
    @include visuallyHidden;

    .lt-ie9 & {
      position: relative;
      height: auto;
      width: auto;
      clip: initial;
    }
  }

  // Variant button
  label {
    @include buttonBase;
    @include buttonSmall;
    min-width: $heightInputSmall;

    &.disabled {
      .lt-ie9 & {
        display: none;
      }
    }
  }

  // Unselected
  input[type="radio"]:not(:checked) + label {
    @include buttonUnselected;
  }

  // Selected
  input[type="radio"]:checked + label {
    @include buttonSelected;
  }

  // Unavailable
  .option-radio-disabled + label {
    text-decoration: line-through;
  }
}

.variant-label-option-value {
  @include textSub;
}

// Hide select
.product-single__variants {
  display: none;

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

// Quantity
.product-single__quantity {
  display: inline-block;
  width: 100%;
}

.product-single__quantity {
  .variant-unavailable &,
  .variant-soldout & {
    display: none;
  }
}

// Button wrapper
.product-single__add-to-cart {
  margin-bottom: $spacer;
}

// Add to cart
.btn--add-to-cart {
  width: 100%;
}

// Description
.section-description {
  &.section-blank {
    padding-top: 0;
  }
}

.product-single__description,
.pt-description {
  & > p:first-child:empty,
  & > p:last-child:empty {
    display: none;
  }
}// Back box
.back-box {
  text-align: center;
  position: relative;

  // Remove border top of following section
  & + * {
    border-top: none !important;
  }

  & + .shopify-section > div {
    border-top: none !important;
  }
}/*============================================================================
  _Pages
==============================================================================*/
.page-empty {
  text-align: $textAlignTitle;
}

/*================ _Password_page ================*/
@supports (-webkit-touch-callout: none) {
  #LoginModal .modal-content {
    height: $maxHeight;
  }
}


/*================ _Policies_page ================*/
body {
  .shopify-policy__container {
    max-width: initial;
    margin: initial;
    padding-left: initial;
    padding-right: initial;

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

/*============================================================================
  _Utilities
==============================================================================*/

// Spacer
.spacer-auto {@include spacerAuto($spacer)}
.spacer-auto-lg {@include spacerAuto($spacer-lg)}
.spacer-auto-sm {@include spacerAuto($spacer-sm)}
.spacer-auto-xs {@include spacerAuto($spacer-xs)}
.spacer-top {margin-top: $spacer}
.spacer-top-lg {margin-top: $spacer-lg}
.spacer-top-sm {margin-top: $spacer-sm}
.spacer-top-xs {margin-top: $spacer-xs}
.spacer-top-auto {margin-top: auto}
.spacer-top-none {margin-top: 0}
.spacer-bottom {margin-bottom: $spacer}
.spacer-bottom-lg {margin-bottom: $spacer-lg}
.spacer-bottom-sm {margin-bottom: $spacer-sm}
.spacer-bottom-xs {margin-bottom: $spacer-xs}
.spacer-bottom-auto {margin-bottom: auto}
.spacer-bottom-none {margin-bottom: 0}
.spacer-left-lg {margin-left: $spacer-lg}
.spacer-left-sm {margin-left: $spacer-sm}
.spacer-left-xs {margin-left: $spacer-xs}
.spacer-left-auto {margin-left: auto}
.spacer-right-lg {margin-right: $spacer-lg}
.spacer-right-sm {margin-right: $spacer-sm}
.spacer-right-xs {margin-right: $spacer-xs}
.spacer-right-auto {margin-right: auto}
.spacer-none {margin: 0}
.spacer-reset {margin: initial}
.spacer-x-auto {margin-left: auto; margin-right: auto}

// Flex
.flex {@include display-flexbox}
.inline-flex {@include display-inline-flexbox}
.flex-column {@include flex-direction(column)}
.flex-shrink {@include flex-shrink(0)}
.flex-nowrap {@include flex-wrap(nowrap)}
.flex-0 {@include flex(0)}
.flex-1 {@include flex(1)}
.flex-2 {@include flex(2)}
.flex-3 {@include flex(3)}
.flex-100 {@include flex(100%)}
.justify-between {@include justify-content(space-between)}
.justify-around {@include justify-content(space-around)}
.order-1 {@include screenUp($postSmall){order: 1}}

// Display
.display-none {display:none}
.display-block {display:block}
.display-inline {display:inline}

// Text
.text-ellipsis {@include ellipsis}
.text-primary {color: $colorPrimary}
.text-secondary {color: $colorSecondary}
.text-sale {color: $colorSalesPrice}
.text-small {font-size: $baseFontSize-sm}
.text-large {font-size: $baseFontSize-lg}
.text-link {@include linkStyle}
.text-lead {@include leadFontStack}
.text-accent {@include accentFontStack}
.text-money {@include accentFontStack}
.text-sub {@include textSub}
.text-strike {text-decoration: line-through!important}
.text-capitalize {text-transform: capitalize}
.text-muted {color: mix($colorBody, $colorBodyText, $opacity * 100)}
.text-italic {font-style: italic}

// Borders
.border-top {border-top: $borders}
.border-bottom {border-bottom: $borders}
.border-rounded {border-radius: $borderRadius}
.border-top-none {border-top: 0}
.border-bottom-none {border-bottom: 0}

// Border radius
.radius-none {border-radius: 0}
.radius-circle {@include RadiusCircle}

// Background
.bg-default {
  background-color: $colorDefault;

  .section-default & {
    background-color: $colorBody;
  }
}

// Animation
.fadeIn {@include animated(fadeIn)}
.fadeInUp {@include animated(fadeInUp)}
.fadeInDown {@include animated(fadeInDown)}
.fadeInLeft {@include animated(fadeInLeft)}
.fadeInRight {@include animated(fadeInRight)}
.fadeOut {@include animated(fadeOut)}
.fadeOutUp {@include animated(fadeOutUp)}
.fadeOutDown {@include animated(fadeOutDown)}
.fadeOutLeft {@include animated(fadeOutLeft)}
.fadeOutRight {@include animated(fadeOutRight)}
.slideInLeft {@include animated(slideInLeft)}
.slideInRight {@include animated(slideInRight)}
.slideInUp {@include animated(slideInUp)}
.slideInDown {@include animated(slideInDown)}
.slideOutLeft {@include animated(slideOutLeft)}
.slideOutRight {@include animated(slideOutRight)}
.slideOutUp {@include animated(slideOutUp)}
.slideOutDown {@include animated(slideOutDown)}
.bounce {@include animated(bounce)}
.flash {@include animated(flash)}
.pulse {@include animated(pulse)}
.rubberBand {@include animated(rubberBand)}
.shakeX {@include animated(shakeX)}
.shakeY {@include animated(shakeY)}
.tada {@include animated(tada)}
.heartBeat {@include animated(heartBeat)}
.infinite {@include prefix("animation-iteration-count", "infinite")}
.slow {@include prefix("animation-duration", #{$transitionDurationSlow})}
.fast {@include prefix("animation-duration", #{$transitionDurationFast})}
.spin {@include animation(spin $transitionDurationSlow infinite cubic-bezier(0.35, 0, 0.25, 1));}


// Visibility
.visually-hidden {@include visuallyHidden}
.visually-shown {@include visuallyShown}
.visible {opacity: 1; visibility: visible;}
.hide-empty {
  &:empty {
    display: none;
  }
}

// Other
.inline-list {@include inlineList}
.clearfix {@include clearfix}
.whitespace-nowrap {
  white-space: nowrap;
}

.hover-none {
  &:hover {
    opacity: 1;
  }
}

.prevent-scrollbar-shift {
  body.js-drawer-open &,
  body.js-modal-open & {
    @include screenUp($postSmall) {
      padding-right: $scrollbarWidth;
    }
  }
}

// sticky
.sticky-check-header {
  .sticky-header & {
    top: ($heightHeader + $spacer);

    @include screen($small) {
      top: ($heightHeaderMobile - $borderWidth);
    }
  }
  .sticky-announcement_bar & {
    top: ($heightInputSmall + $spacer);

    @include screen($small) {
      top: ($heightInputSmall - $borderWidth);
    }
  }
  .sticky-header.sticky-announcement_bar & {
    top: ($heightHeader + $heightInputSmall + $spacer);

    @include screen($small) {
      top: ($heightHeaderMobile + $heightInputSmall - $borderWidth);
    }
  }
}

[disabled],
.disabled{
  cursor: default !important;
  opacity: $opacity !important;
}

.draggable {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;

  &:active {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }
}

/*============================================================================
  _App_style
==============================================================================*/

/*================ _Product_review ================*/

// Review badge
.spr-badge {
  font-size: $baseFontSize-sm;
}

// Review widget
#shopify-product-reviews {
  overflow: initial !important;

  // Product tabs
  .dbtfy-product_tabs & {
    padding: 0;

    .spr-container {
      padding: 0;
    }
  }

  // Box
  @include makeBox;
  margin: 0 !important;

  // Wrapper
  .spr-container {
    @include makeWrapper($siteWidth);
    border: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
  }

  // Main title
  .spr-header-title {
    margin-bottom: $headerMarginBottom;
    font-size: $headerSize2;
  }

  // Form container
  .spr-form {
    border-top: 0 !important;
    @include animated(fadeInUp);
  }

  // Write review title
  .spr-form-title {
    margin-bottom: $headerMarginBottom;
    font-size: $headerSize3;
  }

  // Stars
  .spr-icon-star {
    color: $colorSecondary;
  }

  // Write review button
  .spr-summary-actions-newreview {
    @include buttonBase;
    @include button($colorPrimary, $colorButtonText, outline);
    margin-top: $spacer;
  }

  // Send review button
  .spr-button {
    @include buttonBase;
    @include button($colorPrimary, $colorButtonText);
  }

  // Pagination
  .spr-pagination > div {
    @include inlineList;
  }

  .spr-pagination-page {
    @include buttonPagination;

    &:not(.is-active) a {
      @include buttonUnselected;
    }

    &.is-active {
      @include buttonSelected;
    }
  }

  // Other styling
  .new-review-form {
    padding: 0;
    border: none;
  }

  .spr-review, .spr-form, .spr-pagination {
    border-top: $borders;
  }

  .spr-header {
    text-align: center;
  }

  .spr-review-content-body,
  .spr-review-header-byline,
  .spr-form-label {
    font-size: inherit;
    line-height: inherit;
  }

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

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

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

#judgeme_product_reviews {
  text-align: left;
  @include makeWrapper($siteWidth);

  .jdgm-write-rev-link {
    @include buttonBase;
    @include button($colorPrimary, $colorButtonText);
  }

  .jdgm-ask-question-btn {
  	@include buttonBase;
    @include button($colorPrimary, $colorButtonText, outline);
  }

  .jdgm-all-reviews-widget, .jdgm-rev-widg {
    border: none;
  }

  .jdgm-rev-widg {
    padding-left: 0;
    padding-right: 0;
  }

  .jdgm-sort-dropdown {
  	@include selectSmall;
  }
}

#opinew-app-container {
  @include makeWrapper($siteWidth);
  margin-top: $spacer !important;
  margin-bottom: $spacer !important;

  #review-body-wrapper {
    .opw-text-red-dark {
      div {
        &:not(:last-of-type) {
          margin-bottom: $spacer-sm;
        }
      }
    }
  }

  .opw-paginator-li {
    &.opw-paginator-active-class {
      font-weight: bold;
    }
  }

  .question-card-container {
    div:first-of-type {
      margin-bottom: $spacer-sm !important;
    }
  }
}

#opinew-stars-plugin-product {
  margin-bottom: $spacer-xs;

  .grid-product__wrapper & {
    margin-top: $spacer-sm;
    text-align: center;
  }
}

#automizely_reviews_product_detail_title_star_widget {
  #production-starsWrapper {
    .grid-product & {
      @include justify-content(center);
    }
  }
}

#product_page_reviews_carousel {
  margin-top: 0 !important;
}

/*================ _shopify_digital_downloads ================*/
#digital-downloads-proxy {
  .sdd-download {
    padding: 0;
  }

  .sdd-download-product {
    margin-bottom: $headerMarginBottom;
    text-rendering: optimizeLegibility;
    color: $colorHeadings;
    @include headerFontStack;
  }

  .sdd-download-file {
    @include leadFontStack;
  }

  .sdd-download .sdd-download-button {
    @include buttonBase;
    @include button($colorPrimary, $colorButtonText, outline);
    font-size: $baseFontSize;
  }
}


/*============================================================================
  _ADDONS
==============================================================================*/

/* start-dbtfy-addtocart-animation */.btn--addtocart_animation {
  .js-drawer-open &,
  .js-modal-open &,
  &.disabled,
  &[disabled],
  &.btn--loading {
    animation: none !important;
  }
}/* end-dbtfy-addtocart-animation */

/* start-dbtfy-back-in-stock *//* end-dbtfy-back-in-stock */

/* start-dbtfy-cart-goal */.dbtfy-cart_goal {
  .cg-progress-bar {
    position: relative;
  }

  .cg-icon {
    position: absolute;
    right: 0;
    height: $gutter;
    min-width: $gutter;
    background-color: $colorBody;
    border: $borders;
    border-color: $colorSecondary;
    border-radius: $circle;
    transform: translateX(50%) translateY(-10px);
    @include display-flexbox;
    @include align-items(center);
    @include justify-content(center);

    #CartDrawer & {
      background-color: $colorDrawer;
      border-color: $colorDrawerSecondary;
    }
  }
}/* end-dbtfy-cart-goal */

/* dbtfy-cart-upsell */.dbtfy-cart_upsell {
  .cu-product-name {
    margin-bottom: 0;
    margin-left: $spacer-sm;
  }

  .cu-product-wrapper {
    @include display-flexbox();
    line-height: 0;
  }

  .cu-image-wrapper {
    margin-right: $spacer-sm;
    width: $heightInputSmall;
    @include flex-shrink(0);
  }

  .cu-product-select {
    margin-right: $spacer-sm;
    width: 120px;
    @include flex(auto);
  }

  .cu-product-button {
    max-width: 140px;
  }
}/* end-dbtfy-cart-upsell */

/* start-dbtfy-collection-addtocart *//* end-dbtfy-collection-addtocart */

/* start-dbtfy-color-swatches */$swatchWidth: $heightInputXsmall;
$swatchWidthMobile: $swatchWidth / 2;
$swatchRadius: $circle;

body:not(.dbtfy-color_swatches-destroy) {
  .swatch {
    flex-wrap: wrap;
    margin-bottom: $spacer-sm;

    label {
      border-radius: $swatchRadius;
      float: left;
      min-width: $swatchWidth;
      height: $swatchWidth;
      margin: 0;
      background-color: $colorDefault;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      line-height: $swatchWidth;
    }

    input:checked + .swatch-element {
      border-color: $colorHeadings;
    }
  }

  .swatch-element {
    float: left;
    margin: 0 $spacer-sm $spacer-sm 0;
    position: relative;
    padding: $spacer-xs;
    border: $borders;
    border-radius: $swatchRadius;
    text-transform: capitalize;
    @include display-flexbox();
    @include justify-content(center);

    .tooltip {
      left: 50%;
    }

    label:hover + .tooltip {
      opacity: 1;
      @include transform(translate(-50%, 0));
    }

    &.swatch-element--small {
      &:last-of-type {
        margin-right: 0;
      }

      label {
        min-width: $swatchWidthMobile;
        height: $swatchWidthMobile;
        line-height: $swatchWidthMobile;
      }
    }
  }

  .swatch-more-link {
    margin-left: $spacer-sm;
    margin-bottom: $spacer-sm;
  }
}/* end-dbtfy-color-swatches */

/* start-dbtfy-cookie-box */body:not(.dbtfy-cookie_box-destroy) {
  #CookieBox {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    pointer-events: none;
    z-index: $zindexUnderOverlay;
    @include animated(fadeInUp);

    &.is-closing {
      @include animated(fadeOutDown);
    }
  }

  .cb-container {
    border-radius: $borderRadius;
    pointer-events: auto;
    padding: $gutter-sm;
    margin-bottom: $gutter;
    @include shadow($shadow);
    @include transition($transitions);

    &:not(.cb-inverted) {
      background: $colorBody;
    }

    @include screen($small) {
      width: 100%;
      margin-bottom: $gutter-sm;
    }
  }

  &.scroll-sticky_addtocart {
    .cb-container {
      margin-bottom: $gutter + $heightInput + $gutter-sm;

      @include screen($small) {
        margin-bottom: $gutter-sm+$heightInputSmall + $gutter-sm;
      }
    }
  }

  .cb-grid {
    @include screenUp($postSmall) {
      .rte {
        margin-bottom: 0;
      }
    }
  }

  .cb-btn {
    margin-right: $spacer-sm;
  }
}/* end-dbtfy-cookie-box */

/* start-dbtfy-discount-saved *//* end-dbtfy-discount-saved */

/* start-dbtfy-facebook-messenger *//* end-dbtfy-facebook-messenger */

/* start-dbtfy-faq-page *//* end-dbtfy-faq-page */

/* start-dbtfy-instagram-feed *//* end-dbtfy-instagram-feed */

/* start-dbtfy-inventory-quantity *//* end-dbtfy-inventory-quantity */

/* start-dbtfy-mega-menu */body:not(.dbtfy-mega_menu-destroy) {
  .mm-item {
    position: static;
    display: none;

    .dropdown-menu {
      left: $gutter;
      width: 100%;
      max-width: calc(100% - #{$gutter * 2});
      min-width: initial;
    }
  }

  .header-container .mm-item {
    display: inline-block;
  }

  .header-wrapper-mega_menu {
    @include display-flexbox;
    @include align-items(center);
    margin-bottom: $spacer-sm;

    .title-product-mega_menu {
      margin-bottom: 0;
      @include ellipsis;
    }

    .link-mega_menu {
      margin-left: auto;
    }
  }

  .mm-item-inline {
    margin-bottom: 0 !important;

    .mm-menu-list {
      margin-left: 0;
    }
  }

  .mm-menu-list {
    margin-left: - ($paddingDropdown);
  }
}/* end-dbtfy-mega-menu */

/* start-dbtfy-menu-bar *//* end-dbtfy-menu-bar */

/* start-dbtfy-newsletter-popup */body:not(.dbtfy-newsletter_popup-destroy) {
  .image-newsletter_popup {
    height: 100%;
    min-height: 150px;
  }

  .image-newsletter_popup, .image-newsletter_popup .media {
    @include screen($small) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .modal-dialog:not(.modal-small) {
    .image-newsletter_popup, .image-newsletter_popup .media {
      @include screenUp($postSmall) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .modal-small {
    .image-newsletter_popup, .image-newsletter_popup .media {
      @include screenUp($postSmall) {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  .content-newsletter_popup {
    @include makeWrapper(100%);
    @include makeBox;
  }

  .np-floating-bar-wrapper {
    @include display-flexbox();
    @include align-items(center);
    position: fixed;
    pointer-events: none;
    z-index: $zindexOverBody;
    top: 0;
    bottom: 0;
    height: 100vh;
    -webkit-backface-visibility: hidden;

    &.np-position-left {
      left: 0;
    }

    &.np-position-right {
      right: 0;
    }
  }

  .np-floating-bar {
    padding: $paddingButtonSmallX $paddingButtonSmallY;
    pointer-events: auto;
    cursor: pointer;
    border-radius: $borderRadius $borderRadius 0 0;
    line-height: 1;
    text-transform: uppercase;
    @include transition($transitions);
    @include button($colorHeadings, $colorBody);

    @include screen($small) {
      font-size: $baseFontSize-sm;
    }
  }

  .np-position-right .np-floating-bar {
    margin-top: auto;
    margin-bottom: auto;
    @include transform(rotate(-90deg) translateX(50%));
    transform-origin: 100% 100%;
  }
}/* end-dbtfy-newsletter-popup */

/* start-dbtfy-order-feedback *//* end-dbtfy-order-feedback */

/* start-dbtfy-order-tracking */.dbtfy-order_tracking {
  #ot-container {
    overflow: hidden;
    border: 1px solid rgb(224, 224, 224);
    display: none;
    border-radius: $borderRadius;
    margin-top: 20px;

    iframe {
      margin-top: -56px;
      max-height: 560px !important;
      min-height: 560px !important;
      border: 0 none !important;
      margin-bottom: -144px;

      @media screen and (max-width: 846px) {
        margin-bottom: -114px;
      }

      @media screen and (max-width: 518px) {
        margin-bottom: -104px;
      }

      @media screen and (max-width: 370px) {
        margin-bottom: -54px;
      }
    }
  }
}/* end-dbtfy-order-tracking */

/* start-dbtfy-page-transition *//* end-dbtfy-page-transition */

/* start-dbtfy-pricing-table *//* end-dbtfy-pricing-table */

/* start-dbtfy-product-image-crop */$productImageCropRatio: 100%;$productImageCropPosition: center center;

body:not(.dbtfy-product_image_crop-destroy) {
  .product--wrapper {
    padding-top: $productImageCropRatio !important;
  }

  .product--image {
    height: 100%;
    object-fit: cover;
    object-position: $productImageCropPosition;
  }
}/* end-dbtfy-product-image-crop */

/* start-dbtfy-product-bullet-points *//* end-dbtfy-product-bullet-points */

/* start-dbtfy-product-tabs *//* end-dbtfy-product-tabs */

/* start-dbtfy-quantity-breaks */body:not(.dbtfy-quantity_breaks-destroy) {
  .dbtfy-quantity_breaks {
    .qb-label {
      margin-bottom: $spacer-xs;
    }

    .qb-quantity {
      @include display-flexbox;
      @include align-items(center);

      &:not(:last-child) {
        margin-bottom: $spacer-xs;
      }

      label {
        margin-bottom: 0;
      }
    }
  }

  .variant-soldout,
  .variant-unavailable {
    .dbtfy-quantity_breaks {
      display: none;
    }
  }

  .qb-original-price {
    margin-right: $spacer-xs;
  }

  .qb-wrapper {
    display: none;
  }

  .quantity-break-label {
    display: block;
    margin-bottom: $spacer-xs;
  }
}/* end-dbtfy-quantity-breaks */

/* start-dbtfy-quick-view */body:not(.dbtfy-quick_view-destroy) {
  .dbtfy-quick_view {
    .qv-icon {
      opacity: 0;

      &.btn--loading {
        opacity: 1;
      }

      @include screen($small) {
        opacity: 1;
      }
    }

    .review-badge {
      margin-bottom: $spacer;
    }
  }

  .variant-unavailable {
    .qv-price-wrapper {
      display: none;
    }
  }

  .variant-soldout,
  .variant-unavailable {
    .qv-quantity-wrapper {
      display: none;
    }
  }

  .grid-product__wrapper:hover {
    .qv-icon {
      opacity: 1;
    }
  }
}/* end-dbtfy-quick-view */

/* start-dbtfy-recently-viewed */.dbtfy-recently_viewed {
  @include screenUp($postSmall) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: $zindexOverBody;
    overflow-y: auto;
    overflow-x: hidden;
    width: 80px;
    max-height: 100vh;
    pointer-events: none;
    @include display-flexbox;
    @include align-items(center);
    @include flex-wrap(wrap);

    .rv-box {
      padding: $gutter-xs;
      background-color: $colorBody;
      border: $borders;
      border-left: 0;
      border-radius: 0 $borderRadius $borderRadius 0;
      pointer-events: auto;
    }
  }

  @include screen($small) {
    @include makeBox();
    border-top: $borders;
  }

  .rv-wrapper {
    @include screen($small) {
      @include makeWrapper($siteWidth);
    }
  }

  .rv-title {
    margin-bottom: $gutter-xs;
  }

  .rv-thumbnail {
    @include screen($small) {
      @include flex(1);
    }

    &:not(:last-child) {
      margin-bottom: $gutter-xs;
    }
  }
}/* end-dbtfy-recently-viewed */

/* start-dbtfy-sales-pop */body:not(.dbtfy-sales_pop-destroy) {
  #SalesPop {
    position: fixed;
    right: auto;
    bottom: $gutter;
    left: $gutter;
    z-index: $zindexOverBody;
    width: 320px;
    display: none;
    -webkit-backface-visibility: hidden;
    @include transition($transitions);

    @include screen($small) {
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      border-radius: 0;
      border-right: 0;
      border-left: 0;
      border-bottom: 0;
    }

    &.sp-open {
      display: block;
      @include animated(fadeInUp, $transitionDurationFast);
    }

    &.is-closing {
      display: block;
      @include animated(fadeOutDown, $transitionDurationFast);
    }

    &:hover{
      .btn-close-sales_pop {
        opacity: 1;
        @include hovers;
      }
    }
  }

  &.scroll-sticky_addtocart {
    #SalesPop {
      bottom: $gutter + $heightInput + $gutter-sm;

      @include screen($small) {
        bottom: $heightInputSmall + $gutter-sm;
      }
    }
  }

  .sp-card {
    background-color: $colorBody;
    border: $borders;
    border-radius: $borderRadius;
  }

  .sp-card-body {
    padding: $gutter-xs;
  }

  .item-sales_pop {
    &:not(:first-child) {
      display: none;
    }
  }

  .image-link-sales_pop {
    width: $heightInput;
    height: $heightInput;
  }

  .text-wrapper-sales_pop {
    padding-left: $gutter-xs;
  }

  .btn-close-sales_pop {
    opacity: 0;

    @include screen($small) {
      opacity: 1;
    }
  }
}/* end-dbtfy-sales-pop */

/* start-dbtfy-shop-protect */.dbtfy-shop_protect-text {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}/* end-dbtfy-shop-protect */

/* start-dbtfy-smart-search */$smartSearchHeight: $heightInput + $gutter * 2;

.dbtfy-smart_search {
  .ss-section-title {
    border: $borders;
    border-color: $colorDrawerDefault;
    background-color: $colorDrawerDefault;
    padding: $gutter-sm;
    @include accentFontStack;
  }

  .ss-item {
    @include animated(fadeInUp);
    animation-duration: $transitionDuration;

    &:nth-child(2) {
      animation-delay: .1s;
    }

    &:nth-child(3) {
      animation-delay: .2s;
    }

    &:nth-child(4) {
      animation-delay: .3s;
    }

    &:nth-child(5) {
      animation-delay: .4s;
    }

    &:nth-child(6) {
      animation-delay: .5s;
    }

    &:nth-child(7) {
      animation-delay: .6s;
    }

    &:nth-child(8) {
      animation-delay: .7s;
    }

    &:nth-child(9) {
      animation-delay: .8s;
    }

    &:nth-child(10) {
      animation-delay: .9s;
    }

    + .ss-item {
      border-top: $borders;
      border-color: $colorDrawerBorder;
    }

    &.item-selected {
      a {
        opacity: $opacity;

        &:after {
          opacity: 1;
        }
      }
    }

    a {
      padding: $gutter-sm;
      @include display-flexbox();
      @include align-items(center);

      &::after {
        @include iconFontStack;
        content: "search";
        opacity: 0;
        margin-left: auto;
        font-size: $baseFontSize-lg;
        padding-left: $spacer-sm;
        color: $colorDrawerSecondary;
        @include transition($transitions);

        @include screen($small) {
          opacity: 1;
        }
      }

      &:hover, &:focus {
        &::after {
          opacity: 1;
        }
      }
    }
  }

  .ss-thumbnail {
    padding-right: $spacer;

    img, svg {
      height: 60px;
      max-width: 60px;
      width: 60px;
      display: block;
      object-fit: cover;
    }
  }

  .ss-info {
    @include spacerAuto($spacer-xs);

    & > * {
      display: block;
    }

    .ss-price-container {
      @include display-inline-flexbox();
      @include align-items(center);
      line-height: normal !important;

      & > span {
        &:not(:first-child) {
          padding-left: $spacer-xs;
        }
      }
    }

    .ss-price {
      line-height: 1;

      .price-compare {
        padding-right: $spacer-xs;
      }
    }

    .ss-vendor {
      line-height: 1;
    }
  }
}/* end-dbtfy-smart-search */

/* start-dbtfy-social-discount */.dbtfy-social_discount {
  -webkit-touch-callout: text; // iOS Safari
  @include prefix("user-select", "text");

  &:not(.sd-used) + .social-sharing {
    display: none;
  }
}/* end-dbtfy-social-discount */

/* start-dbtfy-sticky-addtocart */body:not(.dbtfy-sticky_addtocart-destroy) {
  .dbtfy-sticky_addtocart {
    #stickyAddToCart {
      position: fixed;
      background-color: $colorBody;
      display: none;
      width: 100%;
      z-index: $zindexOverBody + 1;
      padding-top: $gutter-xs;
      padding-bottom: $gutter-xs;
      left: 0;
      right: 0;

      @include screen($small) {
        & > div {
          padding-left: $gutter-xs;
          padding-right: $gutter-xs;
        }
      }

      &.top-sticky_addtocart {
        top: 0;
        border-bottom: $borders;

        &.sa-visible {
          display: block;
          @include animated(fadeInDown);
        }

        &.is-closing {
          display: block;
          @include animated(fadeOutUp);
        }
      }

      &.bottom-sticky_addtocart {
        bottom: 0;
        border-top: $borders;

        &.sa-visible {
          display: block;
          @include animated(fadeInUp);
        }

        &.is-closing {
          display: block;
          @include animated(fadeOutDown);
        }
      }
    }

    .grid {
      @include screen($small) {
        margin-left: -$gutter-xs;
      }
    }

    .grid__item {
      @include screen($small) {
        padding-left: $gutter-xs;
      }
    }

    .image-sticky_addtocart {
      width: $heightInput;
      height: $heightInput;

      @include screen($small) {
        width: $heightInputSmall;
        height: $heightInputSmall;
      }
    }

    .title-sticky_addtocart {
      margin-bottom: 0;
      width: 100%;
    }

    .select-wrapper-sticky_addtocart {
      select {
        width: 100%;
      }

      @include screen($medium) {
        max-width: 18%;
      }

      @include screen($small) {
        max-width: 100%;
      }
    }

    .text-wrapper-sticky_addtocart {
      max-width: 30%;
    }

    .input-sticky_addtocart {
      background-color: transparent;
      border-color: transparent;
    }

    .dbtfy-sticky-price-box {
      .discount-sticky-price, .total-sticky-compare-price {
        margin-left: $spacer-xs;
      }
    }

    .review-badge {
      white-space: nowrap;
    }

    .btn--sticky_addtocart {
      @include screen($small) {
        @include buttonSmall;
      }
    }
  }

  .announcement-container {
    z-index: $zindexOverBody;
  }

  // sticky header
  &.sticky-header:not(.sticky-announcement_bar) {
    .dbtfy-sticky_addtocart {
      #stickyAddToCart.top-sticky_addtocart {
        @include screenUp($postSmall) {
          top: $heightHeader;
        }

        @include screen($small) {
          top: $heightHeaderMobile;
        }
      }
    }
  }

  // sticky announcement
  &.sticky-announcement_bar:not(.sticky-header) {
    .dbtfy-sticky_addtocart {
      #stickyAddToCart.top-sticky_addtocart {
        top: $heightInputSmall;
      }
    }
  }

  // sticky header + sticky announcement
  &.sticky-header.sticky-announcement_bar {
    .dbtfy-sticky_addtocart {
      #stickyAddToCart.top-sticky_addtocart {
        @include screenUp($postSmall) {
          top: ($heightInputSmall + $heightHeader);
        }

        @include screen($small) {
          top: ($heightInputSmall + $heightHeaderMobile);
        }
      }
    }
  }&.template-product .page-container {
    padding-bottom: $heightInput + $gutter-sm;

    @include screen($small) {
      padding-bottom: $heightInputSmall + $gutter-sm;
    }
  }}/* end-dbtfy-sticky-addtocart */

/* start-dbtfy-trust-badge */.dbtfy-trust_badge {
  .container-trust_badge {
    @include display-flexbox();
    @include flex-direction(column);
  }

  .image-wrapper-trust_badge {
    line-height: 0;
  }

  .text-trust_badge {
    margin-bottom: $spacer-sm;
  }

  .text-under-trust_badge {
    .text-trust_badge {
      order: 1;
      margin-top: $spacer-sm;
      margin-bottom: 0;
    }
  }
}/* end-dbtfy-trust-badge */

/* start-dbtfy-upsell-bundles *//* end-dbtfy-upsell-bundles */

/* start-dbtfy-upsell-popup */body:not(.dbtfy-upsell_popup-destroy) {
  .up-modal {
    z-index: $zindexDrawer + ($zindexIncrement * 2) + 1;

    & + .overlay-modal {
      z-index: $zindexDrawer + ($zindexIncrement * 2);
    }
  }

  .up-offer-accepted {
    .up-progress-bar {
      width: 100% !important;
    }
  }
}/* end-dbtfy-upsell-popup */

/* start-dbtfy-wish-list */body:not(.dbtfy-wish_list-destroy) {
  .grid-product__wrapper {
    &:hover {
      .wl-icon {
        opacity: 1;
      }
    }

    .wl-icon {
      opacity: 0;

      @include screen($small) {
        opacity: 1;
      }
    }
  }

  .wl-active {
    @include button($colorPrimary, $colorButtonText);
    opacity: 1 !important;
  }

  .site-footer {
    .wl-active {
      @include button($colorFooterPrimary, $colorFooterButtonText);
    }
  }

  .wl-item {
    &:not(:last-child) {
      margin-bottom: $gutter;
      padding-bottom: $gutter;

      &::after {
        content: "";
        border-bottom: $borders;
        width: calc(100% - #{$gutter});
        display: block;
        position: absolute;
        bottom: 0;
        left: $gutter;

        @include screen($small) {
          width: calc(100% + #{$gutter-sm});
          left: 0;
        }
      }
    }

    .wl-select {
      background-image: none !important;
      text-align-last: center;

      &.disabled {
        @include button($colorPrimary, $colorButtonText, outline);
      }

      option {
        text-transform: initial;
      }
    }

    @include screen($small) {
      .wl-product-options {
        margin-top: $spacer-sm;
      }
    }
  }

  .wl-name-wrapper {
    @include screen($small) {
      @include display-flexbox;
      @include justify-content(space-between);
    }
  }
}/* end-dbtfy-wish-list */

/* start-dbtfy-collection-filters */
.collection-filters-btn {
  @include screen($small) {
    margin-bottom: $spacer
  }
}

.filter-group-body {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;

    li:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

.dbtfy-filter-list-links {
  li {
    &.active {
      a {
        color: $colorPrimary;
      }
    }
  }
}
/* end-dbtfy-collection-filters */