SHARE
TWEET

THEME SCSS LIQUID - (search "matt", or "warehouse"

a guest Apr 27th, 2019 128 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*============================================================================
  2.   Debut | Built with Shopify Slate
  3.  
  4.   Some things to know about this file:
  5.     - Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
  6.     - The output CSS is compressed and comments are removed
  7.     - You cannot use native CSS/Sass @imports in this file without a build script
  8. ==============================================================================*/
  9.  
  10. /*================ SASS HELPERS ================*/
  11. /*============================================================================
  12.   Convert pixels to ems
  13.   eg. for a relational value of 12px write em(12) when the parent is 16px
  14.   if the parent is another value say 24px write em(12, 24)
  15.   Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
  16. ==============================================================================*/
  17. @function em($pxval, $base: $font-size-base) {
  18.   @if not unitless($pxval) {
  19.     $pxval: strip-units($pxval);
  20.   }
  21.   @if not unitless($base) {
  22.     $base: strip-units($base);
  23.   }
  24.   @return ($pxval / $base) * 1em;
  25. }
  26.  
  27. /*============================================================================
  28.   Strips the unit from a number.
  29.   @param {Number (With Unit)} $value
  30.   @example scss - Usage
  31.     $dimension: strip-units(10em);
  32.   @example css - CSS Output
  33.     $dimension: 10;
  34.   @return {Number (Unitless)}
  35.   based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss
  36. ==============================================================================*/
  37. @function strip-units($value) {
  38.   @return ($value / ($value * 0 + 1));
  39. }
  40.  
  41. /*============================================================================
  42.   Return a color based on the brightness of an existing color.
  43.   Need to pass in brightness because it is calculated with Liquid.
  44.   @param {Number} $brightness
  45.   @param {String} $color
  46.   @example scss - Usage
  47.     $focusColor: adaptiveColor(#000, 0);
  48.   @example css - CSS Output
  49.     $focusColor: #404040;
  50.   @return {String}
  51. ==============================================================================*/
  52.  
  53. @function adaptiveColor($color, $brightness) {
  54.   @if $brightness <= 26 {
  55.     @return lighten($color, 25%)
  56.   }
  57.   @if $brightness <= 64 {
  58.     @return lighten($color, 15%)
  59.   } @else {
  60.     @return darken($color, 10%)
  61.   }
  62. }
  63.  
  64. /*================ #Mixins ================*/
  65. @mixin clearfix() {
  66.   &::after {
  67.     content: '';
  68.     display: table;
  69.     clear: both;
  70.   }
  71.  
  72.   // sass-lint:disable no-misspelled-properties
  73.   *zoom: 1;
  74. }
  75.  
  76. /*============================================================================
  77.   Prefix mixin for generating vendor prefixes.
  78.   Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
  79.  
  80.   Usage:
  81.     // Input:
  82.     .element {
  83.       @include prefix(transform, scale(1), ms webkit spec);
  84.     }
  85.  
  86.     // Output:
  87.     .element {
  88.       -ms-transform: scale(1);
  89.       -webkit-transform: scale(1);
  90.       transform: scale(1);
  91.     }
  92. ==============================================================================*/
  93. @mixin prefix($property, $value, $prefixes) {
  94.   @each $prefix in $prefixes {
  95.     @if $prefix == webkit {
  96.       -webkit-#{$property}: $value;
  97.     } @else if $prefix == moz {
  98.       -moz-#{$property}: $value;
  99.     } @else if $prefix == ms {
  100.       -ms-#{$property}: $value;
  101.     } @else if $prefix == o {
  102.       -o-#{$property}: $value;
  103.     } @else if $prefix == spec {
  104.       #{$property}: $value;
  105.     } @else  {
  106.       @warn 'Unrecognized prefix: #{$prefix}';
  107.     }
  108.   }
  109. }
  110.  
  111. @mixin user-select($value: none) {
  112.   @include prefix('user-select', #{$value}, moz ms webkit spec);
  113. }
  114.  
  115. /*================ Media Query Mixin ================*/
  116. @mixin media-query($media-query) {
  117.   $breakpoint-found: false;
  118.  
  119.   @each $breakpoint in $grid-breakpoints {
  120.     $name: nth($breakpoint, 1);
  121.     $declaration: nth($breakpoint, 2);
  122.  
  123.     @if $media-query == $name and $declaration {
  124.       $breakpoint-found: true;
  125.  
  126.       @media only screen and #{$declaration} {
  127.         @content;
  128.       }
  129.     }
  130.   }
  131.  
  132.   @if $breakpoint-found == false {
  133.     @warn 'Breakpoint "#{$media-query}" does not exist';
  134.   }
  135. }
  136.  
  137. /*================ Responsive Show/Hide Helper ================*/
  138. @mixin responsive-display-helper($grid-breakpoint-type: '') {
  139.   // sass-lint:disable no-important
  140.   .#{$grid-breakpoint-type}show {
  141.     display: block !important;
  142.   }
  143.  
  144.   .#{$grid-breakpoint-type}hide {
  145.     display: none !important;
  146.   }
  147. }
  148.  
  149.  
  150. /*================ Responsive Text Alignment Helper ================*/
  151. @mixin responsive-text-align-helper($grid-breakpoint-type: '') {
  152.   // sass-lint:disable no-important
  153.   .#{$grid-breakpoint-type}text-left {
  154.     text-align: left !important;
  155.   }
  156.  
  157.   .#{$grid-breakpoint-type}text-right {
  158.     text-align: right !important;
  159.   }
  160.  
  161.   .#{$grid-breakpoint-type}text-center {
  162.     text-align: center !important;
  163.   }
  164. }
  165.  
  166. @mixin placeholder-text($color: $color-text-field-text, $opacity: 0.6) {
  167.   color: $color;
  168.   opacity: $opacity;
  169. }
  170.  
  171. @mixin error-placeholder-text($color: $color-error-input-text, $opacity: 0.5) {
  172.   color: $color;
  173.   opacity: $opacity;
  174. }
  175.  
  176. @mixin transform($transform) {
  177.   @include prefix(transform, $transform, ms webkit spec);
  178. }
  179.  
  180. @mixin transition($transition) {
  181.   @include prefix(transition, $transition, ms webkit spec);
  182. }
  183.  
  184. @mixin gradient($side, $from, $to) {
  185.   background: -ms-linear-gradient($side, $from 0%, $to 100%);
  186.   background: linear-gradient(to $side, $from 0%, $to 100%);
  187. }
  188.  
  189. @mixin spinner($size: 20px, $color: $color-btn-primary-text) {
  190.   content: '';
  191.   display: block;
  192.   width: $size;
  193.   height: $size;
  194.   position: absolute;
  195.   margin-left: - $size / 2;
  196.   margin-top: - $size / 2;
  197.   border-radius: 50%;
  198.   border: 3px solid $color;
  199.   border-top-color: transparent;
  200. }
  201.  
  202. @mixin visually-hidden() {
  203.   // sass-lint:disable no-important
  204.   position: absolute !important;
  205.   overflow: hidden;
  206.   clip: rect(0 0 0 0);
  207.   height: 1px;
  208.   width: 1px;
  209.   margin: -1px;
  210.   padding: 0;
  211.   border: 0;
  212. }
  213.  
  214. @mixin visually-shown() {
  215.   // sass-lint:disable no-important
  216.   position: inherit !important;
  217.   overflow: auto;
  218.   clip: auto;
  219.   width: auto;
  220.   height: auto;
  221.   margin: 0;
  222. }
  223.  
  224. @mixin overlay($z-index: null) {
  225.   &::before {
  226.     content: '';
  227.     position: absolute;
  228.     top: 0;
  229.     right: 0;
  230.     bottom: 0;
  231.     left: 0;
  232.     background-color: $color-image-overlay;
  233.     opacity: $opacity-image-overlay;
  234.  
  235.     @if ($z-index) {
  236.       z-index: $z-index;
  237.     }
  238.   }
  239. }
  240.  
  241. @mixin default-focus-ring() {
  242.   outline: 1px dotted #212121;
  243.   outline: 5px auto -webkit-focus-ring-color;
  244. }
  245.  
  246. /*============================================================================
  247.   Flexbox prefix mixins from Bourbon
  248.     https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
  249. ==============================================================================*/
  250. @mixin display-flexbox() {
  251.   display: -webkit-flex;
  252.   display: -ms-flexbox;
  253.   display: flex;
  254.   width: 100%; // necessary for ie10
  255. }
  256.  
  257. @mixin flex-wrap($value: nowrap) {
  258.   @include prefix(flex-wrap, $value, webkit moz ms spec);
  259. }
  260.  
  261. @mixin flex-direction($value) {
  262.   @include prefix(flex-direction, $value, webkit moz ms spec);
  263. }
  264.  
  265. @mixin align-items($value: stretch) {
  266.   $alt-value: $value;
  267.  
  268.   @if $value == 'flex-start' {
  269.     $alt-value: start;
  270.   } @else if $value == 'flex-end' {
  271.     $alt-value: end;
  272.   }
  273.  
  274.   // sass-lint:disable no-misspelled-properties
  275.   -ms-flex-align: $alt-value;
  276.   @include prefix(align-items, $value, webkit moz ms o spec);
  277. }
  278.  
  279. @mixin flex($value: 0 1 auto) {
  280.   @include prefix(flex, $value, webkit moz ms spec);
  281. }
  282.  
  283. @mixin flex-basis($width: auto) {
  284.   // sass-lint:disable no-misspelled-properties
  285.   -ms-flex-preferred-size: $width;
  286.   @include prefix(flex-basis, $width, webkit moz spec);
  287. }
  288.  
  289. @mixin align-self($align: auto) {
  290.   // sass-lint:disable no-misspelled-properties
  291.   -ms-flex-item-align: $align;
  292.   @include prefix(align-self, $align, webkit spec);
  293. }
  294.  
  295. @mixin align-content($align: center) {
  296.   @include prefix(align-content, $align, webkit ms spec);
  297. }
  298.  
  299. @mixin justify-content($justify: flex-start) {
  300.   @include prefix(justify-content, $justify, webkit ms spec);
  301. }
  302.  
  303.  
  304. /*================ VARIABLES ================*/
  305. /*============================================================================
  306.   Grid Breakpoints and Class Names
  307.     - Do not change the variable names
  308.     - $grid-narrowscreen is based on a Shopify breakpoint for checkout buttons
  309. ==============================================================================*/
  310. $grid-narrowscreen: 500px;
  311. $grid-medium: 750px;
  312. $grid-large: 990px;
  313. $grid-widescreen: 1400px;
  314. $grid-gutter: 30px;
  315. $grid-gutter-mobile: 22px;
  316.  
  317. $narrowscreen: 'narrowscreen';
  318. $small: 'small';
  319. $medium: 'medium';
  320. $medium-down: 'medium-down';
  321. $medium-up: 'medium-up';
  322. $large: 'large';
  323. $large-down: 'large-down';
  324. $large-up: 'large-up';
  325. $widescreen: 'widescreen';
  326.  
  327. /*============================================================================
  328.   Generate breakpoint-specific column widths and push classes
  329.     - Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
  330.     - Default is no push classes
  331. ==============================================================================*/
  332. $grid-breakpoint-has-widths: ($small, $medium-up);
  333. $grid-breakpoint-has-push: ($small, $medium-up);
  334.  
  335. /*================ Color Variables ================*/
  336.  
  337. // Text colors
  338. $color-text: {{ settings.color_text }};
  339. $color-text-shadow: rgba(0,0,0,0.4);
  340. $color-body-text: {{ settings.color_body_text }};
  341. $color-sale-text: {{ settings.color_sale_text }};
  342. $color-small-button-text-border: {{ settings.color_small_button_text_border }};
  343. $color-text-field: {{ settings.color_text_field }};
  344. $color-text-field-text: {{ settings.color_text_field_text }};
  345. $color-navigation-text: {{ settings.color_text }};
  346.  
  347. // Button colors
  348. $color-btn-primary: {{ settings.color_button }};
  349. $color-btn-primary-text: {{ settings.color_button_text }};
  350.  
  351. // Hover and focus states
  352. $color-text-focus: adaptiveColor({{ settings.color_text }}, {{ settings.color_text | color_brightness }});
  353. $color-overlay-text-focus: adaptiveColor({{ settings.color_image_overlay_text }}, {{ settings.color_image_overlay_text | color_brightness }});
  354. $color-btn-primary-focus: adaptiveColor({{ settings.color_button }}, {{ settings.color_button | color_brightness }});
  355. $color-btn-social-focus: adaptiveColor({{ settings.color_borders }}, {{ settings.color_borders | color_brightness }});
  356. $color-small-button-text-border-focus: adaptiveColor({{ settings.color_small_button_text_border }}, {{ settings.color_small_button_text_border | color_brightness }});
  357.  
  358. // Link buttons and secondary cta
  359. $color-link: $color-body-text;
  360. $opacity-link-hover: 0.6;
  361. $transition-link-hover: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  362.  
  363. // Backgrounds
  364. $color-body: {{ settings.color_body_bg }};
  365. $color-bg: {{ settings.color_body_bg }};
  366. $color-drawer-background: rgba(0, 0, 0, 0.6);
  367. $color-bg-alt: {{ settings.color_body_text | color_modify: 'alpha', 0.05 }};
  368.  
  369. // Overlays
  370. $color-overlay-title-text: {{ settings.color_image_overlay_text }};
  371. $color-image-overlay: {{ settings.color_image_overlay }};
  372. $opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};
  373.  
  374. {%- comment -%}
  375.   Based on the image overlay opacity, either lighten or darken the image on hover
  376. {%- endcomment -%}
  377. {% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %};
  378.  
  379. {% if image_overlay_opacity > 0.85 %}
  380.   {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %};
  381. {% else %}
  382.   {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %};
  383. {% endif %}
  384. $hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};
  385.  
  386. // Border colors
  387. $color-border: {{ settings.color_borders }};
  388. $color-border-form: {{ settings.color_text_field_border }};
  389.  
  390. // Helper colors for form error states
  391. $color-disabled: #f4f4f4;
  392. $color-disabled-border: #f4f4f4;
  393. $color-error: #d20000;
  394. $color-error-bg: #fff8f8;
  395. $color-success: #1F873D;
  396. $color-success-bg: #f8fff9;
  397.  
  398. // Forms
  399. $color-form-text: #333;
  400. $color-error-input-text: $color-error;
  401. $input-padding-top-bottom: 10px;
  402. $input-padding-left-right: 18px;
  403. $input-padding-top-bottom-small: 8px;
  404. $input-padding-left-right-small: 15px;
  405. $input-group-height: 46px;
  406. $input-group-height-small: 42px;
  407.  
  408. // Social icons
  409. $color-facebook: #3b5998;
  410. $color-twitter: #00aced;
  411. $color-pinterest: #cb2027;
  412.  
  413. /*================ Sizing Variables ================*/
  414. $width-site: 1200px;
  415. $gutter-site: 55px;
  416. $gutter-site-mobile: 22px;
  417. $section-spacing: 55px;
  418. $section-spacing-small: 35px;
  419. $border-radius: 2px;
  420.  
  421. /*================ Footer Variables ================*/
  422. $footer-spacing-extra-small: 5px;
  423. $footer-spacing-small: 15px;
  424. $footer-wrapper-spacing: 18px;
  425. $footer-hr-bottom-spacing: 20px;
  426. $footer-spacing-medium: 25px;
  427. $footer-spacing-large: 45px;
  428.  
  429. /*================ Z-Index ================*/
  430. $z-index-dropdown : 7;
  431. $z-index-sub-nav: 8;
  432. $z-index-drawer: 9;
  433. $z-index-announcement-bar: 10;
  434. $z-index-skip-to-content: 10000; // really high to be safe of app markup
  435.  
  436. /*================ SVG ================*/
  437. $svg-select-icon: #{'{{ "ico-select.svg" | asset_url }}'};
  438.  
  439. /*================ Drawers ================*/
  440. $transition-drawer: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
  441.  
  442. /*================ Hero Slider ================*/
  443. $color-slideshow-arrows: #000;
  444. $color-slideshow-dots: #fff;
  445.  
  446. /*================ Typography ================*/
  447.  
  448. {% assign header_font = settings.type_header_font %}
  449. {% assign base_font = settings.type_base_font %}
  450.  
  451. {{ header_font | font_face }}
  452. {{ base_font | font_face }}
  453.  
  454. {% if settings.type_bold_product_titles %}
  455.   {%- assign header_font_bold = header_font | font_modify: 'weight', 'bolder' -%}
  456. {% endif %}
  457.  
  458. {%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
  459. {%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
  460. {%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
  461. {%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}
  462.  
  463. {{ header_font_bold | font_face }}
  464. {{ base_font_bold | font_face }}
  465. {{ base_font_bolder | font_face }}
  466. {{ base_font_italic | font_face }}
  467. {{ base_font_bold_italic | font_face }}
  468.  
  469. $font-weight-body--bold: {{ base_font_bold.weight | default: 700 }};
  470. $font-weight-body--bolder: {{ base_font_bolder.weight | default: 700 }};
  471. $font-weight-header--bold: {{ header_font_bold.weight | default: 700 }};
  472.  
  473. $font-stack-header: {{ header_font.family }}, {{ header_font.fallback_families }};
  474. $font-style-header: {{ header_font.style }};
  475. $font-weight-header: {{ header_font.weight }};
  476.  
  477. $font-stack-body: {{ base_font.family }}, {{ base_font.fallback_families }};
  478. $font-style-body: {{ base_font.style }};
  479. $font-weight-body: {{ base_font.weight }};
  480.  
  481. $font-size-header: {{ settings.type_header_base_size }} * 1px;
  482. $font-bold-titles: {{ settings.type_bold_product_titles }};
  483.  
  484. $font-size-base: {{ settings.type_base_size }}px; // Henceforth known as 1em
  485.  
  486. $font-stack-cart-notification: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  487.  
  488. $font-size-mobile-input: 16px; // min 16px to prevent zooming
  489.  
  490. /*================ Gift Cards ================*/
  491. $color-giftcard-tooltip-fallback: #333;
  492. $color-giftcard-light: #fff;
  493. $color-giftcard-tooltip: rgba(0, 0, 0, 0.9);
  494. $color-giftcard-disabled: #999;
  495. $color-giftcard-small-text: #b3b3b3;
  496. $color-giftcard-shadow: rgba(0, 0, 0, 0.1);
  497. $color-giftcard-print-bg: #fff;
  498. $color-giftcard-print: #000;
  499. $color-giftcard-bg: #e95e61;
  500.  
  501. /*================ Z-index ================*/
  502. $z-index-giftcard-image: 2;
  503. $z-index-giftcard-corners: 3;
  504. $z-index-giftcard-tooltip: 4;
  505. $z-index-giftcard-code: 5;
  506.  
  507.  
  508. /*================ VENDOR ================*/
  509. /*============================================================================
  510.   Slick Slider 1.6.0
  511.  
  512.   - If upgrading Slick's styles, use the following variables/functions
  513.     instead of the slick defaults (from slick-theme.scss)
  514.   - This file includes default slick.scss styles (at Slick Slider SCSS)
  515.     and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually.
  516.   - Remove `outline: none` from `.slick-dots li button`
  517. ==============================================================================*/
  518. $slick-font-family: "slick-icons, sans-serif";
  519. $slick-arrow-color: $color-slideshow-arrows;
  520. $slick-dot-color: $color-slideshow-dots;
  521. $slick-dot-color-active: $slick-dot-color !default;
  522. $slick-prev-character: '\2190';
  523. $slick-next-character: '\2192';
  524. $slick-dot-character: '\2022';
  525. $slick-dot-size: 6px;
  526. $slick-opacity-default: 0.75;
  527. $slick-opacity-on-hover: 1;
  528. $slick-opacity-not-active: 0.25;
  529.  
  530. // Only called once so make sure proper file is grabbed
  531. @function slick-image-url($url) {
  532.   @return url({{ "ajax-loader.gif" | asset_url }});
  533. }
  534.  
  535. // Unused intentionally
  536. @function slick-font-url($url) {}
  537.  
  538. /*================ Slick Slider SCSS ================*/
  539. .slick-slider {
  540.   position: relative;
  541.   display: block;
  542.   box-sizing: border-box;
  543.   -webkit-touch-callout: none;
  544.   -webkit-user-select: none;
  545.   -khtml-user-select: none;
  546.   -moz-user-select: none;
  547.   -ms-user-select: none;
  548.   user-select: none;
  549.   -ms-touch-action: pan-y;
  550.   touch-action: pan-y;
  551.   -webkit-tap-highlight-color: transparent;
  552. }
  553. .slick-list {
  554.   position: relative;
  555.   overflow: hidden;
  556.   display: block;
  557.   margin: 0;
  558.   padding: 0;
  559.  
  560.   &:focus {
  561.     outline: none;
  562.   }
  563.  
  564.   &.dragging {
  565.     cursor: pointer;
  566.     cursor: hand;
  567.   }
  568. }
  569. .slick-slider .slick-track,
  570. .slick-slider .slick-list {
  571.   -webkit-transform: translate3d(0, 0, 0);
  572.   -moz-transform: translate3d(0, 0, 0);
  573.   -ms-transform: translate3d(0, 0, 0);
  574.   -o-transform: translate3d(0, 0, 0);
  575.   transform: translate3d(0, 0, 0);
  576. }
  577.  
  578. .slick-track {
  579.   position: relative;
  580.   left: 0;
  581.   top: 0;
  582.   display: block;
  583.  
  584.   &:before,
  585.   &:after {
  586.     content: "";
  587.     display: table;
  588.   }
  589.  
  590.   &:after {
  591.     clear: both;
  592.   }
  593.  
  594.   .slick-loading & {
  595.     visibility: hidden;
  596.   }
  597. }
  598. .slick-slide {
  599.   float: left;
  600.   height: 100%;
  601.   min-height: 1px;
  602.   [dir="rtl"] & {
  603.     float: right;
  604.   }
  605.   img {
  606.     display: block;
  607.   }
  608.   &.slick-loading img {
  609.     display: none;
  610.   }
  611.  
  612.   display: none;
  613.  
  614.   &.dragging img {
  615.     pointer-events: none;
  616.   }
  617.  
  618.   .slick-initialized & {
  619.     display: block;
  620.   }
  621.  
  622.   .slick-loading & {
  623.     visibility: hidden;
  624.   }
  625.  
  626.   .slick-vertical & {
  627.     display: block;
  628.     height: auto;
  629.     border: 1px solid transparent;
  630.   }
  631. }
  632. .slick-arrow.slick-hidden {
  633.   display: none;
  634. }
  635.  
  636. /*================ Slick Slider Theme ================*/
  637. .slick-list {
  638.   .slick-loading & {
  639.     background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
  640.   }
  641. }
  642.  
  643. /* Icons */
  644. @if $slick-font-family == "slick" {
  645.   @font-face {
  646.     font-family: "slick";
  647.     src: slick-font-url("slick.eot");
  648.     src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
  649.     font-weight: normal;
  650.     font-style: normal;
  651.   }
  652. }
  653.  
  654. /* Arrows */
  655.  
  656. .slick-prev,
  657. .slick-next {
  658.   position: absolute;
  659.   display: block;
  660.   height: 20px;
  661.   width: 20px;
  662.   line-height: 0px;
  663.   font-size: 0px;
  664.   cursor: pointer;
  665.   background: transparent;
  666.   color: transparent;
  667.   top: 50%;
  668.   -webkit-transform: translate(0, -50%);
  669.   -ms-transform: translate(0, -50%);
  670.   transform: translate(0, -50%);
  671.   padding: 0;
  672.   border: none;
  673.   &:hover, &:focus {
  674.     background: transparent;
  675.     color: transparent;
  676.     &:before {
  677.       opacity: $slick-opacity-on-hover;
  678.     }
  679.   }
  680.   &.slick-disabled:before {
  681.     opacity: $slick-opacity-not-active;
  682.   }
  683.   &:before {
  684.     font-family: $slick-font-family;
  685.     font-size: 20px;
  686.     line-height: 1;
  687.     color: $slick-arrow-color;
  688.     opacity: $slick-opacity-default;
  689.     -webkit-font-smoothing: antialiased;
  690.     -moz-osx-font-smoothing: grayscale;
  691.   }
  692. }
  693.  
  694. .slick-prev {
  695.   left: -25px;
  696.   [dir="rtl"] & {
  697.     left: auto;
  698.     right: -25px;
  699.   }
  700.   &:before {
  701.     content: $slick-prev-character;
  702.     [dir="rtl"] & {
  703.       content: $slick-next-character;
  704.     }
  705.   }
  706. }
  707.  
  708. .slick-next {
  709.   right: -25px;
  710.   [dir="rtl"] & {
  711.     left: -25px;
  712.     right: auto;
  713.   }
  714.   &:before {
  715.     content: $slick-next-character;
  716.     [dir="rtl"] & {
  717.       content: $slick-prev-character;
  718.     }
  719.   }
  720. }
  721.  
  722. /* Dots */
  723.  
  724. .slick-dotted.slick-slider {
  725.   margin-bottom: 30px;
  726. }
  727.  
  728. .slick-dots {
  729.   list-style: none;
  730.   display: block;
  731.   text-align: center;
  732.   padding: 0;
  733.   margin: 0;
  734.   li {
  735.     position: relative;
  736.     display: inline-block;
  737.     height: 20px;
  738.     width: 20px;
  739.     margin: 0 5px;
  740.     padding: 0;
  741.     cursor: pointer;
  742.     button, a {
  743.       border: 0;
  744.       background: transparent;
  745.       display: block;
  746.       height: 20px;
  747.       width: 20px;
  748.       line-height: 0px;
  749.       font-size: 0px;
  750.       color: transparent;
  751.       padding: 5px;
  752.       cursor: pointer;
  753.       &:hover, &:focus {
  754.         &:before {
  755.           opacity: $slick-opacity-on-hover;
  756.         }
  757.       }
  758.       &:before {
  759.         position: absolute;
  760.         top: 0;
  761.         left: 0;
  762.         content: $slick-dot-character;
  763.         width: 20px;
  764.         height: 20px;
  765.         font-family: $slick-font-family;
  766.         font-size: $slick-dot-size;
  767.         line-height: 20px;
  768.         text-align: center;
  769.         color: $slick-dot-color;
  770.         opacity: $slick-opacity-not-active;
  771.         -webkit-font-smoothing: antialiased;
  772.         -moz-osx-font-smoothing: grayscale;
  773.       }
  774.     }
  775.     &.slick-active button:before {
  776.       color: $slick-dot-color-active;
  777.       opacity: $slick-opacity-default;
  778.     }
  779.   }
  780. }
  781.  
  782.  
  783. /*================ GLOBAL ================*/
  784. /*============================================================================
  785.   #Normalize
  786.   Based on normalize.css v3.0.2 | MIT License | git.io/normalize
  787. ==============================================================================*/
  788. *,
  789. *::before,
  790. *::after {
  791.   box-sizing: border-box;
  792. }
  793.  
  794. body {
  795.   margin: 0;
  796. }
  797.  
  798. article,
  799. aside,
  800. details,
  801. figcaption,
  802. figure,
  803. footer,
  804. header,
  805. hgroup,
  806. main,
  807. menu,
  808. nav,
  809. section,
  810. summary {
  811.   display: block;
  812. }
  813.  
  814. body,
  815. input,
  816. textarea,
  817. button,
  818. select {
  819.   -webkit-font-smoothing: antialiased;
  820.   -webkit-text-size-adjust: 100%;
  821. }
  822.  
  823. a {
  824.   background-color: transparent;
  825. }
  826.  
  827. b,
  828. strong {
  829.   font-weight: $font-weight-body--bolder;
  830. }
  831.  
  832. em {
  833.   font-style: italic;
  834. }
  835.  
  836.  
  837. small {
  838.   font-size: 80%;
  839. }
  840.  
  841. sub,
  842. sup {
  843.   font-size: 75%;
  844.   line-height: 0;
  845.   position: relative;
  846.   vertical-align: baseline;
  847. }
  848.  
  849. sup {
  850.   top: -0.5em;
  851. }
  852.  
  853. sub {
  854.   bottom: -0.25em;
  855. }
  856.  
  857. img {
  858.   max-width: 100%;
  859.   border: 0;
  860. }
  861.  
  862. button,
  863. input,
  864. optgroup,
  865. select,
  866. textarea {
  867.   color: inherit;
  868.   font: inherit;
  869.   margin: 0;
  870. }
  871.  
  872. button,
  873. html input {
  874.   &[disabled] {
  875.     cursor: default;
  876.   }
  877. }
  878.  
  879. button::-moz-focus-inner,
  880. [type="button"]::-moz-focus-inner,
  881. [type="reset"]::-moz-focus-inner,
  882. [type="submit"]::-moz-focus-inner {
  883.   border-style: none;
  884.   padding: 0;
  885. }
  886.  
  887. button:-moz-focusring,
  888. [type="button"]:-moz-focusring,
  889. [type="reset"]:-moz-focusring,
  890. [type="submit"]:-moz-focusring {
  891.   outline: 1px dotted ButtonText;
  892. }
  893.  
  894. input {
  895.   &[type="search"],
  896.   &[type="number"],
  897.   &[type="email"],
  898.   &[type="password"] {
  899.     -webkit-appearance: none;
  900.     -moz-appearance: none;
  901.   }
  902. }
  903.  
  904. table {
  905.   width: 100%;
  906.   border-collapse: collapse;
  907.   border-spacing: 0;
  908. }
  909.  
  910. td,
  911. th {
  912.   padding: 0;
  913. }
  914.  
  915. textarea {
  916.   overflow: auto;
  917.   -webkit-appearance: none;
  918.   -moz-appearance: none;
  919. }
  920.  
  921. /*============================================================================
  922.   Fast Tap
  923.   enables no-delay taps (FastClick-esque) on supporting browsers
  924. ==============================================================================*/
  925. a,
  926. button,
  927. [role="button"],
  928. input,
  929. label,
  930. select,
  931. textarea {
  932.   touch-action: manipulation;
  933. }
  934.  
  935. /*============================================================================
  936.   #Grid
  937. ==============================================================================*/
  938.  
  939. // The `$grid-breakpoints` list is used to build our media queries.
  940. // You can use these in the media-query mixin.
  941. $grid-breakpoints: (
  942.   $narrowscreen '(max-width: #{$grid-narrowscreen})',
  943.   $small '(max-width: #{$grid-medium - 1})',
  944.   $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
  945.   $medium-down '(max-width: #{$grid-large - 1})',
  946.   $medium-up '(min-width: #{$grid-medium})',
  947.   $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
  948.   $large-down '(max-width: #{$grid-widescreen - 1})',
  949.   $large-up '(min-width: #{$grid-large})',
  950.   $widescreen '(min-width: #{$grid-widescreen})'
  951. );
  952.  
  953. /*============================================================================
  954.   Grid Setup
  955.     1. Allow the grid system to be used on lists.
  956.     2. Remove any margins and paddings that might affect the grid system.
  957.     3. Apply a negative `margin-left` to negate the columns' gutters.
  958. ==============================================================================*/
  959. .grid {
  960.   @include clearfix();
  961.   list-style: none;
  962.   margin: 0;
  963.   padding: 0;
  964.   margin-left: -$grid-gutter;
  965.  
  966.   @include media-query($small) {
  967.     margin-left: -$grid-gutter-mobile;
  968.   }
  969. }
  970.  
  971. .grid__item {
  972.   float: left;
  973.   padding-left: $grid-gutter;
  974.   width: 100%;
  975.  
  976.   @include media-query($small) {
  977.     padding-left: $grid-gutter-mobile;
  978.   }
  979.  
  980.   &[class*="--push"] {
  981.     position: relative;
  982.   }
  983. }
  984.  
  985. /*============================================================================
  986.   Reversed grids allow you to structure your source in the opposite
  987.   order to how your rendered layout will appear.
  988. ==============================================================================*/
  989. .grid--rev {
  990.   direction: rtl;
  991.   text-align: left;
  992.  
  993.   > .grid__item {
  994.     direction: ltr;
  995.     text-align: left;
  996.     float: right;
  997.   }
  998. }
  999.  
  1000. /*============================================================================
  1001.   Grid Columns
  1002.     - Create width classes, prepended by the breakpoint name.
  1003. ==============================================================================*/
  1004. // sass-lint:disable brace-style empty-line-between-blocks
  1005. @mixin grid-column-generator($grid-breakpoint-type: '') {
  1006.   /* Whole */
  1007.   .#{$grid-breakpoint-type}one-whole { width: 100%; }
  1008.  
  1009.   /* Halves */
  1010.   .#{$grid-breakpoint-type}one-half { width: percentage(1 / 2); }
  1011.  
  1012.   /* Thirds */
  1013.   .#{$grid-breakpoint-type}one-third { width: percentage(1 / 3); }
  1014.   .#{$grid-breakpoint-type}two-thirds { width: percentage(2 / 3); }
  1015.  
  1016.   /* Quarters */
  1017.   .#{$grid-breakpoint-type}one-quarter { width: percentage(1 / 4); }
  1018.   .#{$grid-breakpoint-type}two-quarters { width: percentage(2 / 4); }
  1019.   .#{$grid-breakpoint-type}three-quarters { width: percentage(3 / 4); }
  1020.  
  1021.   /* Fifths */
  1022.   .#{$grid-breakpoint-type}one-fifth { width: percentage(1 / 5); }
  1023.   .#{$grid-breakpoint-type}two-fifths { width: percentage(2 / 5); }
  1024.   .#{$grid-breakpoint-type}three-fifths { width: percentage(3 / 5); }
  1025.   .#{$grid-breakpoint-type}four-fifths { width: percentage(4 / 5); }
  1026.  
  1027.   /* Sixths */
  1028.   .#{$grid-breakpoint-type}one-sixth { width: percentage(1 / 6); }
  1029.   .#{$grid-breakpoint-type}two-sixths { width: percentage(2 / 6); }
  1030.   .#{$grid-breakpoint-type}three-sixths { width: percentage(3 / 6); }
  1031.   .#{$grid-breakpoint-type}four-sixths { width: percentage(4 / 6); }
  1032.   .#{$grid-breakpoint-type}five-sixths { width: percentage(5 / 6); }
  1033.  
  1034.   /* Eighths */
  1035.   .#{$grid-breakpoint-type}one-eighth { width: percentage(1 / 8); }
  1036.   .#{$grid-breakpoint-type}two-eighths { width: percentage(2 / 8); }
  1037.   .#{$grid-breakpoint-type}three-eighths { width: percentage(3 / 8); }
  1038.   .#{$grid-breakpoint-type}four-eighths { width: percentage(4 / 8); }
  1039.   .#{$grid-breakpoint-type}five-eighths { width: percentage(5 / 8); }
  1040.   .#{$grid-breakpoint-type}six-eighths { width: percentage(6 / 8); }
  1041.   .#{$grid-breakpoint-type}seven-eighths { width: percentage(7 / 8); }
  1042.  
  1043.   /* Tenths */
  1044.   .#{$grid-breakpoint-type}one-tenth { width: percentage(1 / 10); }
  1045.   .#{$grid-breakpoint-type}two-tenths { width: percentage(2 / 10); }
  1046.   .#{$grid-breakpoint-type}three-tenths { width: percentage(3 / 10); }
  1047.   .#{$grid-breakpoint-type}four-tenths { width: percentage(4 / 10); }
  1048.   .#{$grid-breakpoint-type}five-tenths { width: percentage(5 / 10); }
  1049.   .#{$grid-breakpoint-type}six-tenths { width: percentage(6 / 10); }
  1050.   .#{$grid-breakpoint-type}seven-tenths { width: percentage(7 / 10); }
  1051.   .#{$grid-breakpoint-type}eight-tenths { width: percentage(8 / 10); }
  1052.   .#{$grid-breakpoint-type}nine-tenths { width: percentage(9 / 10); }
  1053.  
  1054.   /* Twelfths */
  1055.   .#{$grid-breakpoint-type}one-twelfth { width: percentage(1 / 12); }
  1056.   .#{$grid-breakpoint-type}two-twelfths { width: percentage(2 / 12); }
  1057.   .#{$grid-breakpoint-type}three-twelfths { width: percentage(3 / 12); }
  1058.   .#{$grid-breakpoint-type}four-twelfths { width: percentage(4 / 12); }
  1059.   .#{$grid-breakpoint-type}five-twelfths { width: percentage(5 / 12); }
  1060.   .#{$grid-breakpoint-type}six-twelfths { width: percentage(6 / 12); }
  1061.   .#{$grid-breakpoint-type}seven-twelfths { width: percentage(7 / 12); }
  1062.   .#{$grid-breakpoint-type}eight-twelfths { width: percentage(8 / 12); }
  1063.   .#{$grid-breakpoint-type}nine-twelfths { width: percentage(9 / 12); }
  1064.   .#{$grid-breakpoint-type}ten-twelfths { width: percentage(10 / 12); }
  1065.   .#{$grid-breakpoint-type}eleven-twelfths { width: percentage(11 / 12); }
  1066. }
  1067.  
  1068. /*================ Grid push classes ================*/
  1069. @mixin grid-push-generator($grid-breakpoint-type: '') {
  1070.   /* Halves */
  1071.   .#{$grid-breakpoint-type}push-one-half { left: percentage(1 / 2); }
  1072.  
  1073.   /* Thirds */
  1074.   .#{$grid-breakpoint-type}push-one-third { left: percentage(1 / 3); }
  1075.   .#{$grid-breakpoint-type}push-two-thirds { left: percentage(2 / 3); }
  1076.  
  1077.   /* Quarters */
  1078.   .#{$grid-breakpoint-type}push-one-quarter { left: percentage(1 / 4); }
  1079.   .#{$grid-breakpoint-type}push-two-quarters { left: percentage(2 / 4); }
  1080.   .#{$grid-breakpoint-type}push-three-quarters { left: percentage(3 / 4); }
  1081.  
  1082.   /* Fifths */
  1083.   .#{$grid-breakpoint-type}push-one-fifth { left: percentage(1 / 5); }
  1084.   .#{$grid-breakpoint-type}push-two-fifths { left: percentage(2 / 5); }
  1085.   .#{$grid-breakpoint-type}push-three-fifths { left: percentage(3 / 5); }
  1086.   .#{$grid-breakpoint-type}push-four-fifths { left: percentage(4 / 5); }
  1087.  
  1088.   /* Sixths */
  1089.   .#{$grid-breakpoint-type}push-one-sixth { left: percentage(1 / 6); }
  1090.   .#{$grid-breakpoint-type}push-two-sixths { left: percentage(2 / 6); }
  1091.   .#{$grid-breakpoint-type}push-three-sixths { left: percentage(3 / 6); }
  1092.   .#{$grid-breakpoint-type}push-four-sixths { left: percentage(4 / 6); }
  1093.   .#{$grid-breakpoint-type}push-five-sixths { left: percentage(5 / 6); }
  1094.  
  1095.   /* Eighths */
  1096.   .#{$grid-breakpoint-type}push-one-eighth { left: percentage(1 / 8); }
  1097.   .#{$grid-breakpoint-type}push-two-eighths { left: percentage(2 / 8); }
  1098.   .#{$grid-breakpoint-type}push-three-eighths { left: percentage(3 / 8); }
  1099.   .#{$grid-breakpoint-type}push-four-eighths { left: percentage(4 / 8); }
  1100.   .#{$grid-breakpoint-type}push-five-eighths { left: percentage(5 / 8); }
  1101.   .#{$grid-breakpoint-type}push-six-eighths { left: percentage(6 / 8); }
  1102.   .#{$grid-breakpoint-type}push-seven-eighths { left: percentage(7 / 8); }
  1103.  
  1104.   /* Tenths */
  1105.   .#{$grid-breakpoint-type}push-one-tenth { left: percentage(1 / 10); }
  1106.   .#{$grid-breakpoint-type}push-two-tenths { left: percentage(2 / 10); }
  1107.   .#{$grid-breakpoint-type}push-three-tenths { left: percentage(3 / 10); }
  1108.   .#{$grid-breakpoint-type}push-four-tenths { left: percentage(4 / 10); }
  1109.   .#{$grid-breakpoint-type}push-five-tenths { left: percentage(5 / 10); }
  1110.   .#{$grid-breakpoint-type}push-six-tenths { left: percentage(6 / 10); }
  1111.   .#{$grid-breakpoint-type}push-seven-tenths { left: percentage(7 / 10); }
  1112.   .#{$grid-breakpoint-type}push-eight-tenths { left: percentage(8 / 10); }
  1113.   .#{$grid-breakpoint-type}push-nine-tenths { left: percentage(9 / 10); }
  1114.  
  1115.   /* Twelfths */
  1116.   .#{$grid-breakpoint-type}push-one-twelfth { left: percentage(1 / 12); }
  1117.   .#{$grid-breakpoint-type}push-two-twelfths { left: percentage(2 / 12); }
  1118.   .#{$grid-breakpoint-type}push-three-twelfths { left: percentage(3 / 12); }
  1119.   .#{$grid-breakpoint-type}push-four-twelfths { left: percentage(4 / 12); }
  1120.   .#{$grid-breakpoint-type}push-five-twelfths { left: percentage(5 / 12); }
  1121.   .#{$grid-breakpoint-type}push-six-twelfths { left: percentage(6 / 12); }
  1122.   .#{$grid-breakpoint-type}push-seven-twelfths { left: percentage(7 / 12); }
  1123.   .#{$grid-breakpoint-type}push-eight-twelfths { left: percentage(8 / 12); }
  1124.   .#{$grid-breakpoint-type}push-nine-twelfths { left: percentage(9 / 12); }
  1125.   .#{$grid-breakpoint-type}push-ten-twelfths { left: percentage(10 / 12); }
  1126.   .#{$grid-breakpoint-type}push-eleven-twelfths { left: percentage(11 / 12); }
  1127. }
  1128.  
  1129. /*================ Clearfix helper on uniform grids ================*/
  1130. @mixin grid-uniform-clearfix($grid-breakpoint-type: '') {
  1131.   .grid--uniform {
  1132.     .#{$grid-breakpoint-type}one-half:nth-child(2n+1),
  1133.     .#{$grid-breakpoint-type}one-third:nth-child(3n+1),
  1134.     .#{$grid-breakpoint-type}one-quarter:nth-child(4n+1),
  1135.     .#{$grid-breakpoint-type}one-fifth:nth-child(5n+1),
  1136.     .#{$grid-breakpoint-type}one-sixth:nth-child(6n+1),
  1137.     .#{$grid-breakpoint-type}two-sixths:nth-child(3n+1),
  1138.     .#{$grid-breakpoint-type}three-sixths:nth-child(2n+1),
  1139.     .#{$grid-breakpoint-type}one-eighth:nth-child(8n+1),
  1140.     .#{$grid-breakpoint-type}two-eighths:nth-child(4n+1),
  1141.     .#{$grid-breakpoint-type}four-eighths:nth-child(2n+1),
  1142.     .#{$grid-breakpoint-type}five-tenths:nth-child(2n+1),
  1143.     .#{$grid-breakpoint-type}one-twelfth:nth-child(12n+1),
  1144.     .#{$grid-breakpoint-type}two-twelfths:nth-child(6n+1),
  1145.     .#{$grid-breakpoint-type}three-twelfths:nth-child(4n+1),
  1146.     .#{$grid-breakpoint-type}four-twelfths:nth-child(3n+1),
  1147.     .#{$grid-breakpoint-type}six-twelfths:nth-child(2n+1) { clear: both; }
  1148.   }
  1149. }
  1150.  
  1151. // sass-lint:enable brace-style empty-line-between-blocks
  1152.  
  1153. /*================ Build Base Grid Classes ================*/
  1154. @include grid-column-generator();
  1155. @include responsive-display-helper();
  1156. @include responsive-text-align-helper();
  1157.  
  1158. /*================ Build Responsive Grid Classes ================*/
  1159. @each $breakpoint in $grid-breakpoint-has-widths {
  1160.   @include media-query($breakpoint) {
  1161.     @include grid-column-generator('#{$breakpoint}--');
  1162.     @include grid-uniform-clearfix('#{$breakpoint}--');
  1163.     @include responsive-display-helper('#{$breakpoint}--');
  1164.     @include responsive-text-align-helper('#{$breakpoint}--');
  1165.   }
  1166. }
  1167.  
  1168. /*================ Build Grid Push Classes ================*/
  1169. @each $breakpoint in $grid-breakpoint-has-push {
  1170.   @include media-query($breakpoint) {
  1171.     @include grid-push-generator('#{$breakpoint}--');
  1172.   }
  1173. }
  1174.  
  1175. /*================ #Helper Classes ================*/
  1176. .clearfix {
  1177.   @include clearfix();
  1178. }
  1179.  
  1180. .visually-hidden {
  1181.   @include visually-hidden();
  1182. }
  1183.  
  1184. .visibility-hidden {
  1185.   visibility: hidden;
  1186. }
  1187.  
  1188. .visually-hidden--inline {
  1189.   margin: 0;
  1190.   height: 1em;
  1191. }
  1192.  
  1193. .visually-hidden--static {
  1194.   position: static !important;
  1195. }
  1196.  
  1197. .js-focus-hidden:focus {
  1198.   outline: none;
  1199. }
  1200.  
  1201. // Only show when JS is not supported
  1202. .no-js:not(html) {
  1203.   display: none;
  1204.  
  1205.   .no-js & {
  1206.     display: block;
  1207.   }
  1208. }
  1209.  
  1210. // Only show when JS is supported
  1211. .js {
  1212.   .no-js & {
  1213.     display: none;
  1214.   }
  1215. }
  1216.  
  1217. .hide {
  1218.   display: none !important;
  1219. }
  1220.  
  1221. /*============================================================================
  1222.   Skip to content button
  1223.     - Overrides .visually-hidden when focused
  1224. ==============================================================================*/
  1225. .skip-link:focus {
  1226.   clip: auto;
  1227.   width: auto;
  1228.   height: auto;
  1229.   margin: 0;
  1230.   color: $color-text;
  1231.   background-color: $color-bg;
  1232.   padding: 10px;
  1233.   opacity: 1;
  1234.   z-index: $z-index-skip-to-content;
  1235.   transition: none;
  1236. }
  1237.  
  1238. /*=============== Lazy loading ===================*/
  1239.  
  1240. .box {
  1241.     background: no-repeat;
  1242.     background-color: #f7f7f7;
  1243.     background-size: contain;
  1244. }
  1245. .ratio-container {
  1246.     position: relative;
  1247. }
  1248. .ratio-container:after {
  1249.     content:'';
  1250.     display: block;
  1251.     height: 0;
  1252.     width: 100%;
  1253.     /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
  1254.     padding-bottom: 50%;
  1255.     content:"";
  1256. }
  1257. .ratio-container > * {
  1258.     position: absolute;
  1259.     top: 0;
  1260.     left: 0;
  1261.     width: 100%;
  1262.     height: 100%;
  1263. }
  1264.  
  1265. /*================ #Basic Styles ================*/
  1266. body,
  1267. html {
  1268.   background-color: $color-body;
  1269. }
  1270.  
  1271. .page-width {
  1272.   @include clearfix();
  1273.   max-width: $width-site;
  1274.   margin: 0 auto;
  1275. }
  1276.  
  1277. .main-content {
  1278.   display: block;
  1279.   padding-top: $section-spacing-small;
  1280.  
  1281.   @include media-query($medium-up) {
  1282.     padding-top: $section-spacing;
  1283.   }
  1284. }
  1285.  
  1286. .section-header {
  1287.   margin-bottom: $section-spacing-small;
  1288.  
  1289.   @include media-query($medium-up) {
  1290.     margin-bottom: $section-spacing;
  1291.   }
  1292.  
  1293.   a {
  1294.     border-bottom: 1px solid currentColor;
  1295.   }
  1296. }
  1297.  
  1298. /*================ Typography ================*/
  1299. blockquote {
  1300.   font-size: em(18px);
  1301.   font-style: normal;
  1302.   text-align: center;
  1303.   padding: 0 30px;
  1304.   margin: 0;
  1305.  
  1306.   .rte & {
  1307.     border-color: $color-border;
  1308.     border-width: 1px 0;
  1309.     border-style: solid;
  1310.     padding: 30px 0;
  1311.     margin-bottom: $gutter-site / 2;
  1312.   }
  1313.  
  1314.   p + cite {
  1315.     margin-top: $gutter-site / 2;
  1316.   }
  1317.  
  1318.   cite {
  1319.     display: block;
  1320.     font-size: 0.85em;
  1321.     font-weight: $font-weight-body;
  1322.  
  1323.     &::before {
  1324.       content: '\2014 \0020';
  1325.     }
  1326.   }
  1327. }
  1328.  
  1329. code,
  1330. pre {
  1331.   font-family: Consolas, monospace;
  1332.   font-size: 1em;
  1333. }
  1334.  
  1335. pre {
  1336.   overflow: auto;
  1337. }
  1338.  
  1339. body,
  1340. input,
  1341. textarea,
  1342. button,
  1343. select {
  1344.   font-size: $font-size-base;
  1345.   font-family: $font-stack-body;
  1346.   font-style: $font-style-body;
  1347.   font-weight: $font-weight-body;
  1348.   color: $color-text;
  1349.   line-height: 1.5;
  1350. }
  1351.  
  1352. // Prevent zoom on touch devices in active inputs
  1353. @include media-query($medium-down) {
  1354.   input,
  1355.   textarea,
  1356.   select,
  1357.   button {
  1358.     font-size: $font-size-mobile-input;
  1359.   }
  1360. }
  1361.  
  1362. /*================ Headings ================*/
  1363. h1,
  1364. h2,
  1365. h3,
  1366. h4,
  1367. h5,
  1368. h6 {
  1369.   margin: 0 0 ($section-spacing-small / 2);
  1370.   font-family: $font-stack-header;
  1371.   font-style: $font-style-header;
  1372.   font-weight: $font-weight-header;
  1373.   line-height: 1.2;
  1374.   overflow-wrap: break-word;
  1375.   word-wrap: break-word;
  1376.  
  1377.   a {
  1378.     color: inherit;
  1379.     text-decoration: none;
  1380.     font-weight: inherit;
  1381.   }
  1382. }
  1383.  
  1384. h1 {
  1385.   font-size: em(floor($font-size-header * 1.35));
  1386.   text-transform: none;
  1387.   letter-spacing: 0;
  1388.  
  1389.   @include media-query($small) {
  1390.     font-size: em(floor($font-size-header * 1.25));
  1391.   }
  1392. }
  1393.  
  1394. h2 {
  1395.   font-size: em(floor($font-size-header * 0.78));
  1396.   text-transform: uppercase;
  1397.   letter-spacing: 0.1em;
  1398.  
  1399.   @include media-query($small) {
  1400.     font-size: em(floor(($font-size-header * 0.78) * 0.9));
  1401.   }
  1402. }
  1403.  
  1404. h3 {
  1405.   font-size: em($font-size-header);
  1406.   text-transform: none;
  1407.   letter-spacing: 0;
  1408.  
  1409.   @include media-query($small) {
  1410.     font-size: em(floor($font-size-header * 0.78));
  1411.   }
  1412. }
  1413.  
  1414. h4 {
  1415.   font-size: em(floor($font-size-header * 0.68));
  1416.  
  1417.   @include media-query($small) {
  1418.     font-size: em(floor(($font-size-header * 0.68) * 0.9));
  1419.   }
  1420. }
  1421.  
  1422. h5 {
  1423.   font-size: em(floor($font-size-header * 0.58));
  1424.  
  1425.   @include media-query($small) {
  1426.     font-size: em(floor(($font-size-header * 0.58) * 0.9));
  1427.   }
  1428. }
  1429.  
  1430. h6 {
  1431.   font-size: em(floor($font-size-header * 0.54));
  1432.  
  1433.   @include media-query($small) {
  1434.     font-size: em(floor(($font-size-header * 0.54) * 0.9));
  1435.   }
  1436. }
  1437.  
  1438. .h1 {
  1439.   @extend h1;
  1440. }
  1441.  
  1442. .h2 {
  1443.   @extend h2;
  1444. }
  1445.  
  1446. .h3 {
  1447.   @extend h3;
  1448. }
  1449.  
  1450. .h4 {
  1451.   @extend h4;
  1452. }
  1453.  
  1454. .h5 {
  1455.   @extend h5;
  1456. }
  1457.  
  1458. .h6 {
  1459.   @extend h6;
  1460. }
  1461.  
  1462. /*================ RTE headings ================*/
  1463. .rte {
  1464.   color: $color-body-text;
  1465.   margin-bottom: $section-spacing-small;
  1466.  
  1467.   // If an .rte div is the last element in its parent,
  1468.   // make it flush with the bottom of the container
  1469.   &:last-child {
  1470.     margin-bottom: 0;
  1471.   }
  1472.  
  1473.   h1,
  1474.   h2,
  1475.   h3,
  1476.   h4,
  1477.   h5,
  1478.   h6 {
  1479.     margin-top: $gutter-site;
  1480.     margin-bottom: $gutter-site / 2;
  1481.  
  1482.     &:first-child {
  1483.       margin-top: 0;
  1484.     }
  1485.   }
  1486.  
  1487.   li {
  1488.     margin-bottom: 4px;
  1489.     list-style: inherit;
  1490.  
  1491.     &:last-child {
  1492.       margin-bottom: 0;
  1493.     }
  1494.   }
  1495. }
  1496.  
  1497. // rte setting type to act like a <p> tag
  1498. .rte-setting {
  1499.   margin-bottom: $section-spacing-small / 1.8; // same as p
  1500.  
  1501.   &:last-child {
  1502.     margin-bottom: 0;
  1503.   }
  1504. }
  1505.  
  1506. /*================ Paragraph styles ================*/
  1507. p {
  1508.   color: $color-body-text;
  1509.   margin: 0 0 ($section-spacing-small / 1.8);
  1510.  
  1511.   @include media-query($small) {
  1512.     font-size: em($font-size-base - 1);
  1513.   }
  1514.  
  1515.   &:last-child {
  1516.     margin-bottom: 0;
  1517.   }
  1518. }
  1519.  
  1520. /*================ Lists ================*/
  1521. li {
  1522.   list-style: none;
  1523. }
  1524.  
  1525. /*================ Misc styles ================*/
  1526. .fine-print {
  1527.   font-size: em(14);
  1528.   font-style: italic;
  1529. }
  1530.  
  1531. .txt--minor {
  1532.   font-size: 80%; // match <small>
  1533. }
  1534.  
  1535. .txt--emphasis {
  1536.   font-style: italic;
  1537. }
  1538.  
  1539. .address {
  1540.   margin-bottom: $gutter-site;
  1541. }
  1542.  
  1543. /*================ Hero and slideshow headers ================*/
  1544. .mega-title,
  1545. .mega-subtitle {
  1546.   color: $color-overlay-title-text;
  1547.   .hero & {
  1548.     text-shadow: 0 0 4px $color-text-shadow;
  1549.   }
  1550.   @include media-query($medium-up) {
  1551.     text-shadow: 0 0 4px $color-text-shadow;
  1552.   }
  1553. }
  1554.  
  1555. .mega-title {
  1556.   margin-bottom: 8px;
  1557. }
  1558.  
  1559. .mega-title--large {
  1560.   font-size: em($font-size-header + 8);
  1561.  
  1562.   @include media-query($medium-up) {
  1563.     font-size: em(floor($font-size-header * 2.5));
  1564.   }
  1565. }
  1566.  
  1567. .mega-subtitle {
  1568.   @include media-query($medium-up) {
  1569.     font-size: em($font-size-base + 4);
  1570.     margin: 0 auto;
  1571.  
  1572.     .text-center & {
  1573.       max-width: 75%;
  1574.     }
  1575.   }
  1576.  
  1577.   p {
  1578.     color: $color-overlay-title-text;
  1579.   }
  1580.  
  1581.   a {
  1582.     color: $color-overlay-title-text;
  1583.     border-bottom: 1px solid currentColor;
  1584.  
  1585.     &:hover,
  1586.     &:focus {
  1587.       color: $color-overlay-text-focus;
  1588.     }
  1589.   }
  1590. }
  1591.  
  1592. .mega-subtitle--large {
  1593.   font-size: em($font-size-base + 2);
  1594.   font-weight: $font-weight-header;
  1595.  
  1596.   @include media-query($medium-up) {
  1597.     font-size: em($font-size-base + 8);
  1598.   }
  1599. }
  1600.  
  1601. /*================ #Icons ================*/
  1602. .icon {
  1603.   display: inline-block;
  1604.   width: 20px;
  1605.   height: 20px;
  1606.   vertical-align: middle;
  1607.   fill: currentColor;
  1608.  
  1609.   .no-svg & {
  1610.     display: none;
  1611.   }
  1612. }
  1613.  
  1614. svg,
  1615. symbol {
  1616.   &.icon:not(.icon--full-color) {
  1617.     circle,
  1618.     ellipse,
  1619.     g,
  1620.     line,
  1621.     path,
  1622.     polygon,
  1623.     polyline,
  1624.     rect {
  1625.       fill: inherit;
  1626.       stroke: inherit;
  1627.     }
  1628.   }
  1629. }
  1630.  
  1631. /*============================================================================
  1632.   A generic way to visually hide content while
  1633.   remaining accessible to screen readers (h5bp.com)
  1634. ==============================================================================*/
  1635. .icon__fallback-text {
  1636.   @extend .visually-hidden;
  1637.  
  1638.   .no-svg & {
  1639.     // sass-lint:disable no-important
  1640.     position: static !important;
  1641.     overflow: inherit;
  1642.     clip: none;
  1643.     height: auto;
  1644.     width: auto;
  1645.     margin: 0;
  1646.   }
  1647. }
  1648.  
  1649. /*================ Payment Icons ================*/
  1650. .payment-icons {
  1651.   @include user-select();
  1652.   cursor: default;
  1653.  
  1654.   @include media-query($small) {
  1655.     line-height: 40px;
  1656.   }
  1657.  
  1658.   .icon {
  1659.     width: 38px;
  1660.     height: 24px;
  1661.     fill: inherit;
  1662.   }
  1663. }
  1664.  
  1665. /*================ Social Icons ================*/
  1666. .social-icons .icon {
  1667.   width: 23px;
  1668.   height: 23px;
  1669.  
  1670.   @include media-query($medium-up) {
  1671.     width: 25px;
  1672.     height: 25px;
  1673.   }
  1674.  
  1675.   &.icon--wide {
  1676.     width: 40px;
  1677.   }
  1678. }
  1679.  
  1680. /*================ #Lists ================*/
  1681. ul,
  1682. ol {
  1683.   margin: 0;
  1684.   padding: 0;
  1685. }
  1686.  
  1687. ol {
  1688.   list-style: decimal;
  1689. }
  1690.  
  1691. .list--inline {
  1692.   padding: 0;
  1693.   margin: 0;
  1694.  
  1695.   & > li {
  1696.     display: inline-block;
  1697.     margin-bottom: 0;
  1698.     vertical-align: middle;
  1699.   }
  1700. }
  1701.  
  1702. /*================ #Rich Text Editor ================*/
  1703. .rte {
  1704.   img {
  1705.     height: auto;
  1706.   }
  1707.  
  1708.   table {
  1709.     table-layout: fixed;
  1710.   }
  1711.  
  1712.   ul,
  1713.   ol {
  1714.     margin: 0 0 ($section-spacing-small / 2) $section-spacing-small;
  1715.  
  1716.     &.list--inline {
  1717.       margin-left: 0;
  1718.     }
  1719.   }
  1720.  
  1721.   ul {
  1722.     list-style: disc outside;
  1723.  
  1724.     ul {
  1725.       list-style: circle outside;
  1726.  
  1727.       ul {
  1728.         list-style: square outside;
  1729.       }
  1730.     }
  1731.   }
  1732.  
  1733.   a:not(.btn) {
  1734.     border-bottom: 1px solid currentColor;
  1735.     padding-bottom: 1px;
  1736.   }
  1737. }
  1738.  
  1739. .text-center.rte,
  1740. .text-center .rte {
  1741.   ul,
  1742.   ol {
  1743.     margin-left: 0;
  1744.     list-style-position: inside;
  1745.   }
  1746. }
  1747.  
  1748. // allows tables to scroll when needed since we don't know
  1749. // how many columns they will contain. Class added by JS.
  1750. .scrollable-wrapper {
  1751.   // sass-lint:disable no-misspelled-properties
  1752.   max-width: 100%;
  1753.   overflow: auto;
  1754.   -webkit-overflow-scrolling: touch;
  1755. }
  1756.  
  1757. /*================ #Links and Buttons ================*/
  1758. a {
  1759.   color: #ffff;
  1760.   text-decoration: none;
  1761.  
  1762.   &:not([disabled]):hover,
  1763.   &:focus {
  1764.     color: $color-text-focus;
  1765.    
  1766.   }
  1767.  
  1768.   &.classic-link {
  1769.     text-decoration: underline;
  1770.   }
  1771. }
  1772.  
  1773. a[href^="tel"] {
  1774.   color: inherit;
  1775. }
  1776.  
  1777. /*================ Buttons ================*/
  1778. .btn {
  1779.   @include user-select();
  1780.   @include prefix(appearance, none, webkit moz spec);
  1781.   display: inline-block;
  1782.   width: auto;
  1783.   text-decoration: none;
  1784.   text-align: center;
  1785.   vertical-align: middle;
  1786.   cursor: pointer;
  1787.   border: 1px solid transparent;
  1788.   border-radius: $border-radius;
  1789.   padding: $input-padding-top-bottom-small $input-padding-left-right-small;
  1790.   background-color: $color-btn-primary;
  1791.   color: $color-btn-primary-text;
  1792.   font-family: $font-stack-header;
  1793.   font-style: $font-style-header;
  1794.   font-weight: $font-weight-header;
  1795.   text-transform: uppercase;
  1796.   letter-spacing: 0.08em;
  1797.   white-space: normal;
  1798.   font-size: $font-size-base - 2;
  1799.  
  1800.   @include media-query($medium-up) {
  1801.     padding: $input-padding-top-bottom $input-padding-left-right;
  1802.   }
  1803.  
  1804.   &:not([disabled]):hover,
  1805.   &:focus {
  1806.     color: $color-btn-primary-text;
  1807.     background-color: $color-btn-primary-focus;
  1808.   }
  1809.  
  1810.   .icon-arrow-right,
  1811.   .icon-arrow-left {
  1812.     height: 9px;
  1813.   }
  1814.  
  1815.   &[disabled] {
  1816.     cursor: default;
  1817.     opacity: 0.5;
  1818.   }
  1819. }
  1820.  
  1821. .btn--secondary {
  1822.   background-color: transparent;
  1823.   color: $color-btn-primary;
  1824.   border-color: $color-btn-primary;
  1825.  
  1826.   &:not([disabled]):hover,
  1827.   &:focus {
  1828.     background-color: transparent;
  1829.     color: $color-btn-primary-focus;
  1830.     border-color: $color-btn-primary-focus;
  1831.   }
  1832. }
  1833.  
  1834. .btn--secondary-accent {
  1835.   background-color: $color-body;
  1836.   color: $color-btn-primary;
  1837.   border-color: $color-btn-primary;
  1838.  
  1839.   &:not([disabled]):hover,
  1840.   &:focus {
  1841.     background-color:$color-body;
  1842.     color: $color-btn-primary-focus;
  1843.     border-color: $color-btn-primary-focus;
  1844.   }
  1845. }
  1846.  
  1847. .btn--small {
  1848.   padding: 8px 10px;
  1849.   font-size: em(12);
  1850.   line-height: 1;
  1851. }
  1852.  
  1853. .btn--tertiary {
  1854.   background-color: transparent;
  1855.   color: $color-small-button-text-border;
  1856.   border-color: $color-small-button-text-border;
  1857.  
  1858.   &:not([disabled]):hover,
  1859.   &:focus {
  1860.     background-color: transparent;
  1861.     color: $color-small-button-text-border-focus;
  1862.     border-color: $color-small-button-text-border-focus;
  1863.   }
  1864. }
  1865.  
  1866. /*================ Button variations ================*/
  1867. @include media-query($small) {
  1868.   .btn--small-wide {
  1869.     padding-left: 50px;
  1870.     padding-right: 50px;
  1871.   }
  1872. }
  1873.  
  1874. .btn--link {
  1875.   background-color: transparent;
  1876.   border: 0;
  1877.   margin: 0;
  1878.   color: #ffff;
  1879.   text-align: left;
  1880.  
  1881.   &:not([disabled]):hover,
  1882.   &:focus {
  1883.     color: $color-text-focus;
  1884.     background-color: transparent;
  1885.   }
  1886.  
  1887.   .icon {
  1888.     vertical-align: middle;
  1889.   }
  1890. }
  1891.  
  1892. .btn--narrow {
  1893.   padding-left: 15px;
  1894.   padding-right: 15px;
  1895. }
  1896.  
  1897. .btn--has-icon-after {
  1898.   .icon {
  1899.     margin-left: 10px;
  1900.   }
  1901. }
  1902.  
  1903. .btn--has-icon-before {
  1904.   .icon {
  1905.     margin-right: 10px;
  1906.   }
  1907. }
  1908.  
  1909. /*================ Force an input/button to look like a text link ================*/
  1910. .text-link {
  1911.   display: inline;
  1912.   border: 0 none;
  1913.   background: none;
  1914.   padding: 0;
  1915.   margin: 0;
  1916. }
  1917.  
  1918. .text-link--accent {
  1919.   color: $color-btn-primary;
  1920.   border-bottom: 1px solid currentColor;
  1921.   padding-bottom: 1px;
  1922.  
  1923.   &:not([disabled]):hover,
  1924.   &:focus {
  1925.     color: $color-btn-primary-focus;
  1926.   }
  1927. }
  1928.  
  1929. /*================ Return to collection/blog links ================*/
  1930. .return-link-wrapper {
  1931.   margin-top: ($section-spacing * 1.5);
  1932.   margin-bottom: 0;
  1933.  
  1934.   @include media-query($small) {
  1935.     margin-top: $section-spacing;
  1936.   }
  1937. }
  1938.  
  1939. .full-width-link {
  1940.   position: absolute;
  1941.   top: 0;
  1942.   right: 0;
  1943.   bottom: 0;
  1944.   left: 0;
  1945.   z-index: 2;
  1946. }
  1947.  
  1948. /*================ #Tables ================*/
  1949. table {
  1950.   margin-bottom: $gutter-site / 2;
  1951.  
  1952.   a {
  1953.     border-bottom: 1px solid currentColor;
  1954.   }
  1955. }
  1956.  
  1957. th {
  1958.   font-family: $font-stack-header;
  1959.   font-style: $font-style-header;
  1960.   font-weight: $font-weight-body--bold;
  1961. }
  1962.  
  1963. th,
  1964. td {
  1965.   text-align: left;
  1966.   border: 1px solid $color-border;
  1967.   padding: 10px 14px;
  1968. }
  1969.  
  1970. tbody th,
  1971. tfoot th {
  1972.   font-weight: normal;
  1973. }
  1974.  
  1975.  
  1976. /*============================================================================
  1977.   Responsive tables, defined with .responsive-table on table element.
  1978. ==============================================================================*/
  1979. @include media-query($small) {
  1980.   .responsive-table {
  1981.     thead {
  1982.       display: none;
  1983.     }
  1984.  
  1985.     th,
  1986.     td {
  1987.       float: left;
  1988.       clear: left;
  1989.       width: 100%;
  1990.       text-align: right;
  1991.       padding: $gutter-site / 2;
  1992.       border: 0;
  1993.       margin: 0;
  1994.     }
  1995.  
  1996.     th::before,
  1997.     td::before {
  1998.       content: attr(data-label);
  1999.       float: left;
  2000.       text-align: center;
  2001.       font-size: 12px;
  2002.       padding-right: 10px;
  2003.       font-weight: normal;
  2004.     }
  2005.   }
  2006.  
  2007.   .responsive-table__row + .responsive-table__row,
  2008.   tfoot > .responsive-table__row:first-child {
  2009.     position: relative;
  2010.     margin-top: 10px;
  2011.     padding-top: $gutter-site;
  2012.  
  2013.     &::after {
  2014.       content: '';
  2015.       display: block;
  2016.       position: absolute;
  2017.       top: 0;
  2018.       left: $gutter-site / 2;
  2019.       right: $gutter-site / 2;
  2020.       border-bottom: 1px solid $color-border;
  2021.     }
  2022.   }
  2023. }
  2024.  
  2025. /*================ #Images and Iframes ================*/
  2026. svg:not(:root) {
  2027.   overflow: hidden;
  2028. }
  2029.  
  2030. .video-wrapper {
  2031.   position: relative;
  2032.   overflow: hidden;
  2033.   max-width: 100%;
  2034.   padding-bottom: 56.25%;
  2035.   height: 0;
  2036.   height: auto;
  2037.  
  2038.   iframe {
  2039.     position: absolute;
  2040.     top: 0;
  2041.     left: 0;
  2042.     width: 100%;
  2043.     height: 100%;
  2044.   }
  2045. }
  2046.  
  2047. /*================ Forms ================*/
  2048. form {
  2049.   margin: 0;
  2050. }
  2051.  
  2052. fieldset {
  2053.   border: 1px solid $color-border-form;
  2054.   margin: 0 0 $gutter-site;
  2055.   padding: $gutter-site / 2;
  2056. }
  2057.  
  2058. legend {
  2059.   border: 0;
  2060.   padding: 0;
  2061. }
  2062.  
  2063. button {
  2064.   cursor: pointer;
  2065. }
  2066.  
  2067. input {
  2068.   &[type="submit"] {
  2069.     cursor: pointer;
  2070.   }
  2071. }
  2072.  
  2073. label {
  2074.   display: block;
  2075.   margin-bottom: 5px;
  2076.  
  2077.   @include media-query($small) {
  2078.     font-size: em($font-size-base - 2px);
  2079.   }
  2080.  
  2081.   [type="radio"] + &,
  2082.   [type="checkbox"] + & {
  2083.     display: inline-block;
  2084.     margin-bottom: 0;
  2085.   }
  2086.  
  2087.   &[for] {
  2088.     cursor: pointer;
  2089.   }
  2090. }
  2091.  
  2092. input,
  2093. textarea,
  2094. select {
  2095.   border: 1px solid $color-border-form;
  2096.   background-color: $color-text-field;
  2097.   color: $color-text-field-text;
  2098.   max-width: 100%;
  2099.   line-height: 1.2;
  2100.   border-radius: $border-radius;
  2101.  
  2102.   &:focus {
  2103.     border-color: darken($color-border-form, 10%);
  2104.   }
  2105.  
  2106.   &[disabled] {
  2107.     cursor: default;
  2108.     background-color: $color-disabled;
  2109.     border-color: $color-disabled-border;
  2110.   }
  2111.  
  2112.   &.input--error {
  2113.     &::-webkit-input-placeholder {
  2114.       @include error-placeholder-text();
  2115.     }
  2116.  
  2117.     &::-moz-placeholder {
  2118.       @include error-placeholder-text();
  2119.     }
  2120.  
  2121.     &:-ms-input-placeholder {
  2122.       @include error-placeholder-text();
  2123.     }
  2124.  
  2125.     &::-ms-input-placeholder {
  2126.       @include error-placeholder-text($opacity: 1);
  2127.     }
  2128.   }
  2129.  
  2130.   &.hidden-placeholder {
  2131.     &::-webkit-input-placeholder {
  2132.       color: transparent;
  2133.     }
  2134.  
  2135.     &::-moz-placeholder {
  2136.       color: transparent;
  2137.     }
  2138.  
  2139.     &:-ms-input-placeholder {
  2140.       color: transparent;
  2141.     }
  2142.  
  2143.     &::-ms-input-placeholder {
  2144.       opacity: 1;
  2145.     }
  2146.   }
  2147.  
  2148.   .product-form & {
  2149.     min-height: 44px;
  2150.   }
  2151. }
  2152.  
  2153. textarea {
  2154.   min-height: 100px;
  2155. }
  2156.  
  2157. /*================ Error styles ================*/
  2158. input,
  2159. select,
  2160. textarea {
  2161.   &.input--error {
  2162.     border-color: $color-error;
  2163.     background-color: $color-error-bg;
  2164.     color: $color-error;
  2165.     margin-bottom: ($section-spacing-small / 3);
  2166.   }
  2167. }
  2168.  
  2169. .input-error-message {
  2170.   display: block;
  2171.   width: 100%;
  2172.   color: $color-error;
  2173.   font-size: em($font-size-base - 2px);
  2174.   margin-bottom: ($section-spacing-small / 3);
  2175.  
  2176.   @include media-query($small) {
  2177.     margin-bottom: ($section-spacing-small / 1.8);
  2178.   }
  2179.  
  2180.   .icon {
  2181.     width: 1em;
  2182.     height: 1em;
  2183.     margin-top: -0.3em;
  2184.   }
  2185. }
  2186.  
  2187. select {
  2188.   @include prefix(appearance, none, webkit moz spec);
  2189.   background-position: right center;
  2190.   background: {
  2191.     image: url($svg-select-icon);
  2192.     repeat: no-repeat;
  2193.     position: right 10px center;
  2194.   }
  2195.   line-height: 1.2;
  2196.   padding-right: 28px;
  2197.   text-indent: 0.01px;
  2198.   text-overflow: '';
  2199.   cursor: pointer;
  2200.   padding-top: $input-padding-top-bottom-small;
  2201.   padding-left: $input-padding-left-right-small;
  2202.   padding-bottom: $input-padding-top-bottom-small;
  2203.  
  2204.   @include media-query($medium-up) {
  2205.     padding-top: $input-padding-top-bottom;
  2206.     padding-left: $input-padding-left-right;
  2207.     padding-bottom: $input-padding-top-bottom;
  2208.   }
  2209. }
  2210.  
  2211. .select-group {
  2212.   position: relative;
  2213.   z-index: 2;
  2214.  
  2215.   select {
  2216.     background-image: none;
  2217.     background-color: transparent;
  2218.   }
  2219.  
  2220.   .icon {
  2221.     height: calc(8em / 16);
  2222.     position: absolute;
  2223.     right: 0;
  2224.     top: 50%;
  2225.     transform: translateY(-50%);
  2226.     width: calc(8em / 16);
  2227.     z-index: -1;
  2228.   }
  2229. }
  2230.  
  2231. .select-label {
  2232.   font-size: em(12);
  2233.   text-transform: uppercase;
  2234. }
  2235.  
  2236. optgroup {
  2237.   font-weight: $font-weight-body--bold;
  2238. }
  2239.  
  2240. // Force option color (affects IE only)
  2241. option {
  2242.   color: $color-text;
  2243.   background-color: $color-body;
  2244. }
  2245.  
  2246. select::-ms-expand {
  2247.   display: none;
  2248. }
  2249.  
  2250. /*================ Form labels ================*/
  2251. .label--hidden {
  2252.   position: absolute;
  2253.   height: 0;
  2254.   width: 0;
  2255.   margin-bottom: 0;
  2256.   overflow: hidden;
  2257.   clip: rect(1px, 1px, 1px, 1px);
  2258. }
  2259.  
  2260. ::-webkit-input-placeholder {
  2261.   @include placeholder-text();
  2262. }
  2263.  
  2264. ::-moz-placeholder {
  2265.   @include placeholder-text();
  2266. }
  2267.  
  2268. :-ms-input-placeholder {
  2269.   @include placeholder-text();
  2270. }
  2271.  
  2272. ::-ms-input-placeholder {
  2273.   @include placeholder-text($opacity: 1);
  2274. }
  2275.  
  2276. /*================ Labels ================*/
  2277. .label--error {
  2278.   color: $color-error;
  2279. }
  2280.  
  2281. input,
  2282. textarea {
  2283.   padding: $input-padding-top-bottom-small $input-padding-left-right-small;
  2284.  
  2285.   @include media-query($medium-up) {
  2286.     padding: $input-padding-top-bottom $input-padding-left-right;
  2287.   }
  2288. }
  2289.  
  2290. /*================ Vertical forms ================*/
  2291. .form-vertical {
  2292.   input,
  2293.   select,
  2294.   textarea {
  2295.     display: block;
  2296.     width: 100%;
  2297.     margin-bottom: ($section-spacing-small / 1.8); // same as <p>
  2298.  
  2299.     &.input--error {
  2300.       margin-bottom: ($section-spacing-small / 3);
  2301.     }
  2302.   }
  2303.  
  2304.   [type="radio"],
  2305.   [type="checkbox"] {
  2306.     display: inline-block;
  2307.     width: auto;
  2308.     margin-right: 5px;
  2309.   }
  2310.  
  2311.   [type="submit"],
  2312.   .btn {
  2313.     display: inline-block;
  2314.     width: auto;
  2315.   }
  2316. }
  2317.  
  2318.  
  2319. /*================ Single field forms ================*/
  2320. .form-single-field {
  2321.   margin: 0 auto $gutter-site;
  2322.   max-width: 35rem;
  2323.  
  2324.   .input--error {
  2325.     margin-bottom: 0;
  2326.   }
  2327. }
  2328.  
  2329. /*================ Form feedback messages ================*/
  2330. .note,
  2331. .form-message {
  2332.   padding: $input-padding-top-bottom-small;
  2333.   margin: 0 0 ($gutter-site / 2);
  2334.  
  2335.   @include media-query($medium-up) {
  2336.     padding: $input-padding-top-bottom;
  2337.   }
  2338. }
  2339.  
  2340. .note {
  2341.   border: 1px solid $color-border-form;
  2342. }
  2343.  
  2344. .form-message--success {
  2345.   border: 1px solid $color-success;
  2346.   background-color: $color-success-bg;
  2347.   color: $color-success;
  2348.   display: block;
  2349.   width: 100%;
  2350. }
  2351.  
  2352. .form-message--error {
  2353.   border: 1px solid $color-error;
  2354.   background-color: $color-error-bg;
  2355.   padding: 1rem 1.3rem;
  2356.   text-align: left;
  2357.   width: 100%;
  2358.  
  2359.   li {
  2360.     list-style-type: disc;
  2361.     list-style-position: inside;
  2362.   }
  2363.  
  2364.   .form-message__title {
  2365.     font-size: 1.2em;
  2366.   }
  2367.  
  2368.   .form-message__link {
  2369.     display: inline-block;
  2370.     text-decoration: underline;
  2371.     text-decoration-skip-ink: auto;
  2372.     color: $color-text;
  2373.  
  2374.     &:hover {
  2375.       text-decoration: none;
  2376.       color: $color-text;
  2377.     }
  2378.   }
  2379. }
  2380.  
  2381. /*================ Input Groups ================*/
  2382.  
  2383. .input-group {
  2384.   @include display-flexbox;
  2385.   @include flex-wrap(wrap);
  2386.   @include justify-content(center);
  2387.  
  2388.   .form-vertical & {
  2389.     margin-bottom: $gutter-site;
  2390.   }
  2391. }
  2392.  
  2393. .input-error-message {
  2394.   display: block;
  2395.   width: 100%;
  2396. }
  2397.  
  2398. .input-group--error {
  2399.   margin-bottom: ($section-spacing-small / 3);
  2400. }
  2401.  
  2402. .input-group__field,
  2403. .input-group__field input,
  2404. .input-group__btn .btn {
  2405.   min-height: $input-group-height-small;
  2406.  
  2407.   @include media-query($medium-up) {
  2408.     min-height: $input-group-height;
  2409.   }
  2410. }
  2411.  
  2412. .input-group__field {
  2413.   @include flex-basis(15rem);
  2414.   flex-grow: 9999;
  2415.   margin-bottom: 1rem;
  2416.   border-radius: $border-radius 0 0 $border-radius;
  2417.   text-align: left;
  2418.  
  2419.   input {
  2420.     width: 100%;
  2421.   }
  2422.  
  2423.   .form-vertical & {
  2424.     margin: 0;
  2425.   }
  2426. }
  2427.  
  2428. .input-group__btn {
  2429.   flex-grow: 1;
  2430.  
  2431.   .btn {
  2432.     width: 100%;
  2433.     border-radius: 0 $border-radius $border-radius 0;
  2434.   }
  2435. }
  2436.  
  2437. /*================ #Site Nav and Dropdowns ================*/
  2438. .site-header__logo {
  2439.   img {
  2440.     display: block;
  2441.   }
  2442. }
  2443.  
  2444. .site-nav {
  2445.   position: relative;
  2446.   padding: 0;
  2447.   text-align: center;
  2448.   margin: 25px 0;
  2449.  
  2450.   a {
  2451.     padding: 3px 10px;
  2452.   }
  2453. }
  2454.  
  2455. .site-nav--centered {
  2456.   padding-bottom: $gutter-site-mobile;
  2457. }
  2458.  
  2459. /*================ Site Nav Links ================*/
  2460. .site-nav__link {
  2461.   display: block;
  2462.   white-space: nowrap;
  2463.  
  2464.   .site-nav--centered & {
  2465.     padding-top: 0;
  2466.   }
  2467.  
  2468.   .icon-chevron-down {
  2469.     width: calc(8em / 16);
  2470.     height: calc(8em / 16);
  2471.     margin-left: 0.5rem;
  2472.   }
  2473.  
  2474.   &.site-nav--active-dropdown {
  2475.     border: 1px solid $color-border;
  2476.     border-bottom: 1px solid transparent;
  2477.     z-index: 2;
  2478.  
  2479.   }
  2480.  
  2481.   &:focus,
  2482.   &:not([disabled]):hover {
  2483.     .site-nav__label {
  2484.       border-bottom-color: $color-text;
  2485.     }
  2486.   }
  2487. }
  2488.  
  2489. .site-nav__label {
  2490.   border-bottom: 1px solid transparent;
  2491.  
  2492.   .site-nav__link--active & {
  2493.     border-bottom-color: $color-text;
  2494.   }
  2495. }
  2496.  
  2497. .site-nav__link--button {
  2498.   border: none;
  2499.   background-color: transparent;
  2500.   padding: 3px 10px;
  2501.  
  2502.   @include media-query($medium-down) {
  2503.     font-size: $font-size-base;
  2504.   }
  2505.  
  2506.   &:focus,
  2507.   &:hover {
  2508.     color: $color-text-focus;
  2509.   }
  2510. }
  2511.  
  2512. /*================ Dropdowns ================*/
  2513. .site-nav--has-dropdown {
  2514.   position: relative;
  2515. }
  2516.  
  2517. .site-nav--has-centered-dropdown {
  2518.   position: static;
  2519. }
  2520.  
  2521. .site-nav__dropdown {
  2522.   display: none;
  2523.   position: absolute;
  2524.   padding: 11px 30px 11px 0;
  2525.   margin: 0;
  2526.   z-index: $z-index-dropdown;
  2527.   text-align: left;
  2528.   border: 1px solid $color-border;
  2529.   background: $color-bg;
  2530.   left: -1px;
  2531.   top: 41px;
  2532.  
  2533.  
  2534.   .site-nav__link {
  2535.     padding: 4px 15px 5px;
  2536.   }
  2537.  
  2538.   .site-nav--active-dropdown & {
  2539.     display: block;
  2540.   }
  2541.  
  2542.   li {
  2543.     display: block;
  2544.   }
  2545. }
  2546.  
  2547. .site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
  2548.   right: 0;
  2549.   left: unset;
  2550. }
  2551.  
  2552. .site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
  2553.   left: 0;
  2554. }
  2555.  
  2556. // Centered dropdown
  2557. .site-nav__dropdown--centered {
  2558.   width: 100%;
  2559.   padding: 0;
  2560.   text-align: center;
  2561. }
  2562.  
  2563. /*================ Child list ================*/
  2564. .site-nav__childlist {
  2565.   display: inline-block;
  2566.   background: $color-bg;
  2567.   padding: 11px 17px;
  2568.   text-align: left;
  2569. }
  2570.  
  2571. .site-nav__childlist-grid {
  2572.   @include display-flexbox();
  2573.   @include flex-wrap(wrap);
  2574.   width: auto;
  2575.   margin-bottom: -15px;
  2576. }
  2577.  
  2578. .site-nav__childlist-item {
  2579.   @include flex(0 1 auto);
  2580.   margin-bottom: 15px;
  2581. }
  2582.  
  2583. .site-nav__child-link--parent {
  2584.   font-weight: $font-weight-body--bold;
  2585.   margin: 4px 0;
  2586. }
  2587.  
  2588.  
  2589. .page-width {
  2590.   padding-left: $gutter-site;
  2591.   padding-right: $gutter-site;
  2592.  
  2593.   @include media-query($small) {
  2594.     padding-left: $gutter-site-mobile;
  2595.     padding-right: $gutter-site-mobile;
  2596.   }
  2597. }
  2598.  
  2599. .page-container {
  2600.   transition: $transition-drawer;
  2601.   position: relative;
  2602.   overflow: hidden;
  2603.  
  2604.   @include media-query($medium-up) {
  2605.     // Prevent mobile menu inline styles from overriding desktop styles
  2606.     // sass-lint:disable no-important
  2607.     @include transform(translate3d(0, 0, 0));
  2608.   }
  2609. }
  2610.  
  2611. hr {
  2612.   margin: $gutter-site 0;
  2613.   border: 0;
  2614.   border-bottom: 1px solid $color-border;
  2615. }
  2616.  
  2617. .hr--small {
  2618.   padding: 10px 0;
  2619.   margin: 0;
  2620. }
  2621.  
  2622. .hr--invisible {
  2623.   border-bottom: 0;
  2624. }
  2625.  
  2626. .border-bottom {
  2627.   border-bottom: 1px solid $color-border;
  2628. }
  2629.  
  2630. .border-top {
  2631.   border-top: 1px solid $color-border;
  2632. }
  2633.  
  2634. .empty-page-content {
  2635.   padding: 125px $gutter-site;
  2636.  
  2637.   @include media-query($small) {
  2638.     padding-left: $gutter-site-mobile;
  2639.     padding-right: $gutter-site-mobile;
  2640.   }
  2641. }
  2642.  
  2643. .grid--table {
  2644.   display: table;
  2645.   table-layout: fixed;
  2646.   width: 100%;
  2647.  
  2648.   > .grid__item {
  2649.     float: none;
  2650.     display: table-cell;
  2651.     vertical-align: middle;
  2652.   }
  2653. }
  2654.  
  2655. .grid--no-gutters {
  2656.   margin-left: 0;
  2657.  
  2658.   .grid__item {
  2659.     padding-left: 0;
  2660.   }
  2661. }
  2662.  
  2663. .grid--half-gutters {
  2664.   margin-left: -($grid-gutter / 2);
  2665.  
  2666.   > .grid__item {
  2667.     padding-left: $grid-gutter / 2;
  2668.   }
  2669. }
  2670.  
  2671. .grid--double-gutters {
  2672.   margin-left: -($grid-gutter * 2);
  2673.  
  2674.   > .grid__item {
  2675.     padding-left: $grid-gutter * 2;
  2676.   }
  2677. }
  2678.  
  2679. .grid--flush-bottom {
  2680.   margin-bottom: -$section-spacing;
  2681.   overflow: auto;
  2682.  
  2683.   > .grid__item {
  2684.     margin-bottom: $section-spacing;
  2685.   }
  2686. }
  2687.  
  2688. /*============================================================================
  2689.   Animation Classes and Keyframes
  2690. ==============================================================================*/
  2691. .is-transitioning {
  2692.   // sass-lint:disable no-important
  2693.   display: block !important;
  2694.   visibility: visible !important;
  2695. }
  2696.  
  2697. @mixin animation($animation) {
  2698.   @include prefix(animation, #{$animation}, moz o webkit spec);
  2699. }
  2700.  
  2701. @mixin keyframes($name) {
  2702.   @-webkit-keyframes #{$name} {
  2703.     @content;
  2704.   }
  2705.   @-moz-keyframes #{$name} {
  2706.     @content;
  2707.   }
  2708.   @-ms-keyframes #{$name} {
  2709.     @content;
  2710.   }
  2711.   @keyframes #{$name} {
  2712.     @content;
  2713.   }
  2714. }
  2715.  
  2716. @include keyframes(spin) {
  2717.   0% {
  2718.     @include transform(rotate(0deg));
  2719.   }
  2720.  
  2721.   100% {
  2722.     @include transform(rotate(360deg));
  2723.   }
  2724. }
  2725.  
  2726. .drawer {
  2727.   // sass-lint:disable no-misspelled-properties
  2728.   display: none;
  2729.   position: absolute;
  2730.   overflow: hidden;
  2731.   -webkit-overflow-scrolling: touch;
  2732.   z-index: $z-index-drawer;
  2733.   background-color: $color-bg;
  2734.   transition: $transition-drawer;
  2735.  
  2736.   input[type="text"],
  2737.   textarea {
  2738.     background-color: $color-bg;
  2739.     color: $color-text;
  2740.   }
  2741. }
  2742.  
  2743. .js-drawer-open {
  2744.   overflow: hidden;
  2745. }
  2746.  
  2747. .drawer--top {
  2748.   width: 100%;
  2749.  
  2750.   .js-drawer-open-top & {
  2751.     @include transform(translateY(100%));
  2752.     display: block;
  2753.   }
  2754. }
  2755.  
  2756. .drawer-page-content::after {
  2757.   visibility: hidden;
  2758.   opacity: 0;
  2759.   content: '';
  2760.   display: block;
  2761.   position: fixed;
  2762.   top: 0;
  2763.   left: 0;
  2764.   width: 100%;
  2765.   height: 100%;
  2766.   background-color: $color-drawer-background;
  2767.   z-index: $z-index-drawer - 1;
  2768.   transition: $transition-drawer;
  2769.  
  2770.   .js-drawer-open & {
  2771.     visibility: visible;
  2772.     opacity: 1;
  2773.   }
  2774. }
  2775.  
  2776. .drawer__title,
  2777. .drawer__close {
  2778.   display: table-cell;
  2779.   vertical-align: middle;
  2780. }
  2781.  
  2782. .drawer__close-button {
  2783.   background: none;
  2784.   border: 0 none;
  2785.   position: relative;
  2786.   right: -15px;
  2787.   height: 100%;
  2788.   width: 60px;
  2789.   padding: 0 20px;
  2790.   color: inherit;
  2791.   font-size: em(18);
  2792.  
  2793.   &:active,
  2794.   &:focus {
  2795.     background-color: darken($color-drawer-background, 5%);
  2796.   }
  2797. }
  2798.  
  2799. .grid--view-items {
  2800.   overflow: auto;
  2801.   margin-bottom: -$section-spacing-small;
  2802. }
  2803.  
  2804. .grid-view-item {
  2805.   margin: 0 auto $section-spacing-small;
  2806.   .custom__item & {
  2807.     margin-bottom: 0;
  2808.   }
  2809. }
  2810.  
  2811. .grid-view-item__title {
  2812.   margin-bottom: 0;
  2813.   color: $color-text;
  2814.   @if $font-bold-titles {
  2815.     font-weight: $font-weight-header--bold;
  2816.   }
  2817. }
  2818.  
  2819. .grid-view-item__meta {
  2820.   margin-top: 8px;
  2821. }
  2822.  
  2823. @include media-query($small) {
  2824.   .grid-view-item__title,
  2825.   .grid-view-item__meta {
  2826.     font-size: em($font-size-base - 1px);
  2827.   }
  2828. }
  2829.  
  2830.  
  2831. .grid-view-item__link {
  2832.   display: block;
  2833. }
  2834.  
  2835. .grid-view-item__vendor {
  2836.   margin-top: 4px;
  2837.   color: $color-body-text;
  2838.   font-size: em($font-size-base - 2px);
  2839.   text-transform: uppercase;
  2840.   @include media-query($small) {
  2841.     font-size: em($font-size-base - 3px);
  2842.   }
  2843. }
  2844.  
  2845. .grid-view-item__image-wrapper {
  2846.   margin: 0 auto $grid-gutter / 2;
  2847.   position: relative;
  2848.   width: 100%;
  2849. }
  2850.  
  2851. .grid-view-item__image {
  2852.   display: block;
  2853.   margin: 0 auto;
  2854.   width: 100%;
  2855.   .grid-view-item__image-wrapper & {
  2856.     position: absolute;
  2857.     top: 0;
  2858.   }
  2859.   .grid-view-item--sold-out & {
  2860.     opacity: 0.5;
  2861.   }
  2862.   &.lazyload {
  2863.     opacity: 0;
  2864.   }
  2865. }
  2866.  
  2867. .list-view-item {
  2868.   margin-bottom: $gutter-site-mobile;
  2869.  
  2870.   &:last-child {
  2871.     margin-bottom: 0;
  2872.   }
  2873.  
  2874.   @include media-query($medium-up) {
  2875.     border-bottom: 1px solid $color-border;
  2876.     padding-bottom: $gutter-site-mobile;
  2877.  
  2878.     &:last-child {
  2879.       padding-bottom: 0;
  2880.       border-bottom: 0;
  2881.     }
  2882.   }
  2883. }
  2884.  
  2885. .list-view-item__link {
  2886.   display: table;
  2887.   table-layout: fixed;
  2888.   width: 100%;
  2889. }
  2890.  
  2891. .list-view-item__image {
  2892.   max-height: 95px;
  2893. }
  2894.  
  2895. .list-view-item__image-column {
  2896.   display: table-cell;
  2897.   vertical-align: middle;
  2898.   width: 130px;
  2899.  
  2900.   @include media-query($small) {
  2901.     width: 85px;
  2902.   }
  2903. }
  2904.  
  2905. .list-view-item__image-wrapper {
  2906.   position: relative;
  2907.   margin-right: $section-spacing-small;
  2908.  
  2909.   @include media-query($small) {
  2910.     margin-right: $section-spacing-small / 2;
  2911.   }
  2912. }
  2913.  
  2914. .list-view-item__title-column {
  2915.   display: table-cell;
  2916.   vertical-align: middle;
  2917. }
  2918.  
  2919. .list-view-item__title {
  2920.   color: $color-text;
  2921.   font-size: em($font-size-base + 2px);
  2922.   min-width: 100px;
  2923.  
  2924.   @if $font-bold-titles {
  2925.     font-weight: $font-weight-header--bold;
  2926.   }
  2927.  
  2928.   @include media-query($small) {
  2929.     font-size: em($font-size-base - 1px);
  2930.   }
  2931. }
  2932.  
  2933. .list-view-item__sold-out {
  2934.   font-size: em($font-size-base - 1px);
  2935. }
  2936.  
  2937. .list-view-item__on-sale {
  2938.   color: $color-sale-text;
  2939.   font-size: em($font-size-base - 1px);
  2940.  
  2941.   @include media-query($small) {
  2942.     display: none;
  2943.   }
  2944. }
  2945.  
  2946. .list-view-item__vendor-column {
  2947.   display: table-cell;
  2948.   text-align: center;
  2949.   vertical-align: middle;
  2950.   width: 20%;
  2951. }
  2952.  
  2953. .list-view-item__vendor {
  2954.   font-size: em($font-size-base - 1px);
  2955.   font-style: italic;
  2956.  
  2957.   @include media-query($small) {
  2958.     font-size: em($font-size-base - 2px);
  2959.   }
  2960. }
  2961.  
  2962. .list-view-item__price-column {
  2963.   display: table-cell;
  2964.   text-align: right;
  2965.   vertical-align: middle;
  2966.   width: 20%;
  2967.   font-size: em($font-size-base + 1px);
  2968.  
  2969.   @include media-query($small) {
  2970.     font-size: em($font-size-base - 1px);
  2971.   }
  2972.  
  2973.   .price__vendor,
  2974.   .price-item__label {
  2975.     display: none;
  2976.   }
  2977.  
  2978.   .price__regular,
  2979.   .price__sale {
  2980.     flex-basis: 100%;
  2981.   }
  2982. }
  2983.  
  2984. .list-view-item__price {
  2985.   white-space: nowrap;
  2986.   overflow: hidden;
  2987.   text-overflow: ellipsis;
  2988. }
  2989.  
  2990. .list-view-item__price--reg {
  2991.   color: $color-sale-text;
  2992.  
  2993.   @include media-query($small) {
  2994.     display: block;
  2995.   }
  2996. }
  2997.  
  2998. .list-view-item__price--sale {
  2999.   @include media-query($small) {
  3000.     display: block;
  3001.   }
  3002. }
  3003.  
  3004. /*============================================================================
  3005.   Slick slider overrides
  3006. ==============================================================================*/
  3007. $slick-dot-size: 12px;
  3008. $slick-dot-size-small: 10px;
  3009.  
  3010. .slick-dotted.slick-slider {
  3011.   margin-bottom: 0;
  3012. }
  3013.  
  3014. /*================ Slick dots and prev/next pagination ================*/
  3015. .slideshow__arrows .slick-dots {
  3016.   margin: 0 0.75rem;
  3017.  
  3018.   li {
  3019.     // sass-lint:disable SelectorDepth
  3020.     margin: 0;
  3021.     vertical-align: middle;
  3022.     width: $slick-dot-size-small;
  3023.     height: $slick-dot-size-small;
  3024.     margin-left: 6px;
  3025.  
  3026.     &:first-of-type {
  3027.       margin-left: 0;
  3028.     }
  3029.  
  3030.     @include media-query($medium-up) {
  3031.       width: $slick-dot-size;
  3032.       height: $slick-dot-size;
  3033.       margin-left: 8px;
  3034.     }
  3035.  
  3036.     button, a {
  3037.       position: relative;
  3038.       padding: 0;
  3039.       width: $slick-dot-size-small;
  3040.       height: $slick-dot-size-small;
  3041.  
  3042.       @include media-query($medium-up) {
  3043.         width: $slick-dot-size;
  3044.         height: $slick-dot-size;
  3045.       }
  3046.     }
  3047.  
  3048.     button::before,
  3049.     a::before {
  3050.       text-indent: -9999px;
  3051.       background-color: transparent;
  3052.       border-radius: 100%;
  3053.       background-color: currentColor;
  3054.       width: $slick-dot-size-small;
  3055.       height: $slick-dot-size-small;
  3056.       opacity: 0.4;
  3057.       transition: all 0.2s;
  3058.  
  3059.       @include media-query($medium-up) {
  3060.         width: $slick-dot-size;
  3061.         height: $slick-dot-size;
  3062.       }
  3063.     }
  3064.  
  3065.     &.slick-active button::before,
  3066.     &.slick-active a::before,
  3067.     &.slick-active-mobile button::before,
  3068.     &.slick-active-mobile a::before {
  3069.       opacity: 1;
  3070.     }
  3071.  
  3072.     button:active::before,
  3073.     & .slick-active a::before,
  3074.     & .slick-active-mobile a::before {
  3075.       opacity: 0.7;
  3076.     }
  3077.   }
  3078. }
  3079.  
  3080. /*================ Index sections ================*/
  3081. .index-section {
  3082.   padding-top: $section-spacing-small;
  3083.   padding-bottom: $section-spacing-small;
  3084.  
  3085.   @include media-query($medium-up) {
  3086.     padding-top: $section-spacing;
  3087.     padding-bottom: $section-spacing;
  3088.   }
  3089.  
  3090.   &:first-child {
  3091.     padding-top: 0;
  3092.     border-top: 0;
  3093.   }
  3094.  
  3095.   &:last-child {
  3096.     padding-bottom: 0;
  3097.   }
  3098. }
  3099.  
  3100. .index-section--flush + .index-section--flush {
  3101.   margin-top: -($section-spacing-small * 2);
  3102. }
  3103.  
  3104. [class*="index-section--flush"] + [class*="index-section--flush"] {
  3105.   @include media-query($medium-up) {
  3106.     margin-top: -($section-spacing * 2);
  3107.   }
  3108. }
  3109.  
  3110. // Flush sections should be tight to the nav if they are the first on the page
  3111. .index-section--flush:first-child {
  3112.   margin-top: -$section-spacing-small;
  3113. }
  3114.  
  3115. [class*="index-section--flush"]:first-child {
  3116.   @include media-query($medium-up) {
  3117.     margin-top: -$section-spacing;
  3118.   }
  3119. }
  3120.  
  3121. // Flush sections should be tight to the footer if they are last on the page
  3122. .index-section--flush:last-child {
  3123.   margin-bottom: -$section-spacing-small;
  3124. }
  3125.  
  3126. [class*="index-section--flush"]:last-child {
  3127.   @include media-query($medium-up) {
  3128.     margin-bottom: -$section-spacing;
  3129.   }
  3130. }
  3131.  
  3132. // Visually align featured product section (if first on homepage on mobile)
  3133. .index-section--featured-product:first-child {
  3134.   @include media-query($small) {
  3135.     margin-top: -12px;
  3136.   }
  3137. }
  3138.  
  3139. // Override for slideshow on mobile
  3140. .index-section--slideshow + .index-section--flush {
  3141.   @include media-query($small) {
  3142.     margin-top: 0.4rem;
  3143.   }
  3144. }
  3145.  
  3146. $color-blankstate: rgba($color-body-text, 0.35);
  3147. $color-blankstate-border: rgba($color-body-text, 0.2);
  3148. $color-blankstate-background: rgba($color-body-text, 0.1);
  3149.  
  3150. .placeholder-svg {
  3151.   display: block;
  3152.   fill: $color-blankstate;
  3153.   background-color: $color-blankstate-background;
  3154.   width: 100%;
  3155.   height: 100%;
  3156.   max-width: 100%;
  3157.   max-height: 100%;
  3158.   border: 1px solid $color-blankstate-border;
  3159. }
  3160.  
  3161. .placeholder-noblocks {
  3162.   padding: 40px;
  3163.   text-align: center;
  3164. }
  3165.  
  3166. // Mimic a background image by wrapping the placeholder svg with this class
  3167. .placeholder-background {
  3168.   position: absolute;
  3169.   top: 0;
  3170.   right: 0;
  3171.   bottom: 0;
  3172.   left: 0;
  3173.  
  3174.   .icon {
  3175.     border: 0;
  3176.   }
  3177. }
  3178.  
  3179. // Custom styles for some blank state images
  3180. .image-bar__content .placeholder-svg {
  3181.   position: absolute;
  3182.   top: 0;
  3183.   left: 0;
  3184. }
  3185.  
  3186.  
  3187. /*================ TEMPLATES ================*/
  3188. /*============= Templates | Password =============*/
  3189.  
  3190. .password-page {
  3191.   display: table;
  3192.   height: 100%;
  3193.   width: 100%;
  3194.   color: $color-body-text;
  3195.   background-color: $color-body;
  3196.   background-size: cover;
  3197. }
  3198.  
  3199. .password-form-message {
  3200.   max-width: 500px;
  3201.   margin-left: auto;
  3202.   margin-right: auto;
  3203. }
  3204.  
  3205. .password-header {
  3206.   height: 85px;
  3207.   display: table-row;
  3208. }
  3209.  
  3210. .password-header__inner {
  3211.   display: table-cell;
  3212.   vertical-align: middle;
  3213. }
  3214.  
  3215. .password-login {
  3216.   padding: 0 30px;
  3217.   text-align: right;
  3218. }
  3219.  
  3220. .password-logo {
  3221.   .logo {
  3222.     color: $color-navigation-text;
  3223.     font-weight: $font-weight-header--bold;
  3224.     max-width: 100%;
  3225.   }
  3226. }
  3227.  
  3228. .password-content {
  3229.   text-align: center;
  3230. }
  3231.  
  3232. .password-content--rte {
  3233.   margin-bottom: $section-spacing-small;
  3234. }
  3235.  
  3236. .password-content__title {
  3237.   display: block;
  3238.   margin-bottom: $gutter-site * 1.5;
  3239. }
  3240.  
  3241. .password-main {
  3242.   display: table-row;
  3243.   width: 100%;
  3244.   height: 100%;
  3245.   margin: 0 auto;
  3246. }
  3247.  
  3248. .password-main__inner {
  3249.   display: table-cell;
  3250.   vertical-align: middle;
  3251.   padding: ($gutter-site / 2) $gutter-site;
  3252. }
  3253.  
  3254. .password-message {
  3255.   max-width: 500px;
  3256.   margin: ($gutter-site * 1.5) auto ($gutter-site / 2);
  3257. }
  3258.  
  3259. .password__form-heading {
  3260.   margin-bottom: $gutter-site;
  3261. }
  3262.  
  3263. .password-powered-by {
  3264.   margin-top: $gutter-site * 1.5;
  3265. }
  3266.  
  3267. .password-social-sharing {
  3268.   margin-top: $gutter-site * 1.5;
  3269. }
  3270.  
  3271. .product-single {
  3272.   // prevent scroll anchoring within element
  3273.   overflow-anchor: none;
  3274. }
  3275.  
  3276. .product-single__title {
  3277.   margin-bottom: 0.5rem;
  3278. }
  3279.  
  3280. .product__price,
  3281. .featured-product__price {
  3282.   font-size: 1.25em;
  3283. }
  3284.  
  3285. .product__policies {
  3286.   margin: 0.4rem 0 1rem 0;
  3287.   font-size: em($font-size-base - 1);
  3288. }
  3289.  
  3290. /*================ Add to cart form ================*/
  3291.  
  3292. .product-form {
  3293.   @include display-flexbox();
  3294.   @include flex-wrap(wrap);
  3295.   @include align-items(flex-end);
  3296.   width: auto;
  3297.   padding-top: 2rem;
  3298. }
  3299.  
  3300. .product-form--payment-button-no-variants {
  3301.   max-width: 400px;
  3302. }
  3303.  
  3304. .product-form__item {
  3305.   @include flex(1 1 200px);
  3306.   margin-bottom: 10px;
  3307.   padding: 0 5px;
  3308.  
  3309.   label {
  3310.     display: block;
  3311.  
  3312.     .product-form--hide-variant-labels & {
  3313.       // sass-lint:disable no-important
  3314.       position: absolute !important;
  3315.       overflow: hidden;
  3316.       clip: rect(0 0 0 0);
  3317.       height: 1px;
  3318.       width: 1px;
  3319.       margin: -1px;
  3320.       padding: 0;
  3321.       border: 0;
  3322.     }
  3323.   }
  3324. }
  3325.  
  3326. .product-form__item--submit {
  3327.   @include flex(1 1 300px);
  3328. }
  3329.  
  3330. .product-form__item--no-variants {
  3331.   max-width: 400px;
  3332. }
  3333.  
  3334. .product-form__item--payment-button {
  3335.   @include flex-basis(100%);
  3336.  
  3337.   .product-single--small-image &,
  3338.   .product-single--full-image & {
  3339.     @include media-query($large-up) {
  3340.       display: inline-flex;
  3341.       @include flex-direction(row);
  3342.       @include align-items(flex-start);
  3343.     }
  3344.   }
  3345.   &.product-form__item--no-variants {
  3346.     @include flex-direction(column);
  3347.     @include align-items(stretch);
  3348.   }
  3349. }
  3350.  
  3351. .product-form__variants {
  3352.   display: none;
  3353.  
  3354.   .no-js & {
  3355.     display: block;
  3356.   }
  3357. }
  3358.  
  3359. .product-form__item--quantity {
  3360.   @include flex(0 0 100px);
  3361. }
  3362.  
  3363. .product-form__input {
  3364.   display: block;
  3365.   width: 100%;
  3366. }
  3367.  
  3368. .product-form__cart-submit {
  3369.   display: block;
  3370.   width: 100%;
  3371.   line-height: 1.4;
  3372.   padding-left: 5px;
  3373.   padding-right: 5px;
  3374.   white-space: normal;
  3375.   margin-top: 0;
  3376.   min-height: 44px;
  3377.  
  3378.   .product-single--small-image &,
  3379.   .product-single--full-image & {
  3380.     @include flex(50%);
  3381.     margin-right: 10px;
  3382.   }
  3383.  
  3384.   .product-form__item--payment-button & {
  3385.     margin-top: 10px;
  3386.   }
  3387. }
  3388.  
  3389. .shopify-payment-button {
  3390.   .product-single--small-image &,
  3391.   .product-single--full-image & {
  3392.     @include flex(50%);
  3393.   }
  3394.  
  3395.   .shopify-payment-button__button {
  3396.     margin-top: 10px;
  3397.  
  3398.     .product-single--small-image &,
  3399.     .product-single--full-image & {
  3400.       margin-top: 10px;
  3401.     }
  3402.     @include media-query($medium-up) {
  3403.       margin-top: 20px;
  3404.     }
  3405.   }
  3406.   .shopify-payment-button__button--unbranded {
  3407.     @extend .btn;
  3408.     @extend .product-form__cart-submit;
  3409.     margin-bottom: 10px;
  3410.  
  3411.     &:hover {
  3412.       background-color: $color-btn-primary-focus !important;
  3413.     }
  3414.   }
  3415.   .shopify-payment-button__button--branded {
  3416.     border-radius: $border-radius;
  3417.     overflow: hidden;
  3418.   }
  3419.   .shopify-payment-button__more-options {
  3420.     margin: 16px 0 10px;
  3421.     font-size: em($font-size-base - 2px);
  3422.     text-decoration: underline;
  3423.  
  3424.     &:hover,
  3425.     &:focus {
  3426.       opacity: $opacity-link-hover;
  3427.     }
  3428.   }
  3429. }
  3430.  
  3431. @include media-query($medium-up) {
  3432.   .product-form__cart-submit--small {
  3433.     max-width: 300px;
  3434.   }
  3435. }
  3436.  
  3437. .product-single__description {
  3438.   margin-top: $grid-gutter;
  3439. }
  3440.  
  3441. .product__quantity-error {
  3442.   .icon {
  3443.     margin-right: 1rem;
  3444.   }
  3445. }
  3446.  
  3447. /*================ Product Images ================*/
  3448.  
  3449. .product-single__thumbnail {
  3450.   display: block;
  3451.   margin: -2px 0 8px;
  3452.   min-height: 44px;
  3453.   position: relative;
  3454.  
  3455.   &:not([disabled]):not(.active-thumb):hover {
  3456.     opacity: 0.8;
  3457.   }
  3458. }
  3459.  
  3460. .product-single__thumbnail-image {
  3461.   max-width: 100%;
  3462.   display: block;
  3463.   border: 2px solid transparent;
  3464.   padding: 2px;
  3465.  
  3466.   .active-thumb & {
  3467.     border-color: $color-text;
  3468.   }
  3469. }
  3470.  
  3471. .product-featured-img {
  3472.   display: block;
  3473.   margin: 0 auto;
  3474.   position: absolute;
  3475.   top: 4px;
  3476.   left: 4px;
  3477.   width: calc(100% - 8px);
  3478.  
  3479.   .no-js & {
  3480.     position: relative;
  3481.   }
  3482. }
  3483.  
  3484. // sass-lint:disable class-name-format
  3485. .zoomImg {
  3486.   background-color: $color-body;
  3487. }
  3488.  
  3489. // sass-lint:enable class-name-format
  3490. @include media-query ($medium-up) {
  3491.   .product-single__thumbnails {
  3492.     margin-top: $grid-gutter;
  3493.   }
  3494. }
  3495.  
  3496. @include media-query ($small) {
  3497.   .product-single__photos {
  3498.     margin-bottom: $grid-gutter;
  3499.   }
  3500.   .product-single__photo--has-thumbnails {
  3501.     margin-bottom: $grid-gutter;
  3502.   }
  3503. }
  3504.  
  3505. .product-single__photos--full {
  3506.   margin-bottom: $grid-gutter;
  3507. }
  3508.  
  3509. .product-single__photo-wrapper {
  3510.   margin: 0 auto;
  3511.   width: 100%;
  3512. }
  3513.  
  3514. // Prevent reflow when image loads
  3515. .product-single__photo {
  3516.   margin: 0 auto;
  3517.   min-height: 1px;
  3518.   width: 100%;
  3519.   height: 100%;
  3520.   position: relative;
  3521.   padding-bottom: 4px;
  3522. }
  3523.  
  3524. @include media-query($small) {
  3525.   .template-product .main-content {
  3526.     padding-top: $grid-gutter-mobile;
  3527.   }
  3528.   .thumbnails-slider--active {
  3529.     .product-single__thumbnails {
  3530.       display: none;
  3531.       &.slick-initialized {
  3532.         display: block;
  3533.         margin: 0 auto;
  3534.         max-width: 75%;
  3535.       }
  3536.     }
  3537.   }
  3538.   .product-single__photos {
  3539.     position: relative;
  3540.   }
  3541.   .thumbnails-wrapper {
  3542.     position: relative;
  3543.     top: 30px;
  3544.     text-align: center;
  3545.     margin: 0 2px 30px 2px;
  3546.   }
  3547.   .thumbnails-slider__btn {
  3548.     position: absolute;
  3549.     top: 50%;
  3550.     transform: translateY(-50%);
  3551.   }
  3552.   .thumbnails-slider__prev {
  3553.     left: -20px;
  3554.   }
  3555.   .thumbnails-slider__next {
  3556.     right: -20px;
  3557.   }
  3558.   .product-single__thumbnails-item {
  3559.     display: inline-block;
  3560.     padding-bottom: 10px;
  3561.     width: 72px;
  3562.     float: none;
  3563.     vertical-align: middle;
  3564.  
  3565.     .slick-slider & {
  3566.       float: left;
  3567.     }
  3568.     .thumbnails-slider--active & {
  3569.       padding: 5px 0;
  3570.     }
  3571.   }
  3572.   .product-single__thumbnail {
  3573.     margin: 0 auto;
  3574.     width: 50px;
  3575.   }
  3576. }
  3577.  
  3578. /*================ Template | Collections ================*/
  3579.  
  3580. // Collection Hero
  3581. //----------------------------------------
  3582. .collection-hero {
  3583.   position: relative;
  3584.   overflow: hidden;
  3585.   margin-top: -$gutter-site;
  3586.   margin-bottom: $gutter-site-mobile;
  3587.  
  3588.   @include media-query($medium-up) {
  3589.     margin-bottom: $section-spacing-small;
  3590.   }
  3591. }
  3592.  
  3593. .collection-description {
  3594.   margin-bottom: $gutter-site-mobile;
  3595.   margin-top: $gutter-site-mobile;
  3596.  
  3597.   @include media-query($medium-up) {
  3598.     margin-bottom: $section-spacing-small;
  3599.     margin-top: $section-spacing-small;
  3600.   }
  3601. }
  3602.  
  3603. .collection-hero__image {
  3604.   background-position: 50% 50%;
  3605.   background-repeat: no-repeat;
  3606.   background-size: cover;
  3607.   height: 300px;
  3608.   opacity: 1;
  3609.  
  3610.   @include media-query($small) {
  3611.     height: 180px;
  3612.   }
  3613. }
  3614.  
  3615. .collection-hero__title-wrapper::before {
  3616.   content: '';
  3617.   position: absolute;
  3618.   top: 0;
  3619.   right: 0;
  3620.   bottom: 0;
  3621.   left: 0;
  3622.   background-color: $color-image-overlay;
  3623.   opacity: $opacity-image-overlay;
  3624. }
  3625.  
  3626. .collection-hero__title {
  3627.   position: absolute;
  3628.   color: $color-overlay-title-text;
  3629.   width: 100%;
  3630.   text-align: center;
  3631.   left: 0;
  3632.   right: 0;
  3633.   top: 50%;
  3634.   @include transform(translateY(-50%));
  3635.  
  3636.   @include media-query($medium-up) {
  3637.     font-size: em($font-size-header + 6);
  3638.   }
  3639. }
  3640.  
  3641. .template-blog .social-sharing {
  3642.   margin-bottom: $section-spacing-small / 2;
  3643. }
  3644.  
  3645. .blog-list-view .pagination {
  3646.   padding-top: 0;
  3647. }
  3648.  
  3649. .blog-filter {
  3650.   @include display-flexbox();
  3651.   @include align-items(center);
  3652.   @include justify-content(center);
  3653.  
  3654.   .icon-chevron-down {
  3655.     fill: $color-text-field-text;
  3656.     width: calc(10em / 16);
  3657.     height: calc(10em / 16);
  3658.     right: 1rem;
  3659.   }
  3660. }
  3661.  
  3662. .blog-filter__label {
  3663.   margin: 0 1rem 0 0;
  3664. }
  3665.  
  3666. .cart-header {
  3667.   margin-bottom: 0.7rem;
  3668.   text-align: center;
  3669.  
  3670.   @include media-query($medium-up) {
  3671.     margin-bottom: 1.7rem;
  3672.   }
  3673. }
  3674.  
  3675. .cart-header__title {
  3676.   margin-bottom: 0.5rem;
  3677.  
  3678.   @include media-query($medium-up) {
  3679.     margin-bottom: 1rem;
  3680.   }
  3681. }
  3682.  
  3683. /*================ Cart page ================*/
  3684. .cart {
  3685.   th,
  3686.   td {
  3687.     border: 0;
  3688.   }
  3689.  
  3690.   td {
  3691.     padding: $gutter-site-mobile 0;
  3692.   }
  3693.  
  3694.   th {
  3695.     font-weight: $font-weight-body;
  3696.     padding: ($gutter-site / 2) 0;
  3697.   }
  3698.  
  3699.   .cart__meta {
  3700.     padding-right: 15px;
  3701.   }
  3702. }
  3703.  
  3704. .cart__meta-text {
  3705.   padding: 5px 0 0;
  3706.   font-size: em($font-size-base - 2);
  3707.   font-style: italic;
  3708. }
  3709.  
  3710. .cart__qty-label {
  3711.   @include visually-hidden();
  3712. }
  3713.  
  3714. .cart__qty-input {
  3715.   text-align: center;
  3716.   width: 60px;
  3717.   padding-left: 5px;
  3718.   padding-right: 5px;
  3719.  
  3720.   @include media-query($small) {
  3721.     padding-top: 2px;
  3722.     padding-bottom: 2px;
  3723.   }
  3724. }
  3725.  
  3726. .cart__edit {
  3727.   margin-top: 10px;
  3728. }
  3729.  
  3730. .cart__edit-text--cancel {
  3731.   .cart__edit--active & {
  3732.     display: none;
  3733.   }
  3734. }
  3735.  
  3736. .cart__edit-text--edit {
  3737.   display: none;
  3738.  
  3739.   .cart__edit--active & {
  3740.     display: block;
  3741.   }
  3742. }
  3743.  
  3744. .cart__edit-text--cancel,
  3745. .cart__edit-text--edit {
  3746.   pointer-events: none;
  3747. }
  3748.  
  3749. .cart__row {
  3750.   p {
  3751.     margin-bottom: 0;
  3752.  
  3753.     + p {
  3754.       margin-top: 10px;
  3755.     }
  3756.   }
  3757.  
  3758.   &.cart__update--show {
  3759.     border-bottom: 0;
  3760.   }
  3761. }
  3762.  
  3763. .cart__subtotal-title {
  3764.   font-size: em($font-size-base + 2px);
  3765. }
  3766.  
  3767. .cart__subtotal {
  3768.   padding-left: $gutter-site / 2;
  3769.  
  3770.   @include media-query($medium-up) {
  3771.     padding-left: $gutter-site;
  3772.     min-width: 150px;
  3773.     display: inline-block;
  3774.   }
  3775. }
  3776.  
  3777. .cart__savings {
  3778.   padding-top: 18px;
  3779. }
  3780.  
  3781. .cart__savings-amount {
  3782.   padding-left: $gutter-site / 2;
  3783.  
  3784.   @include media-query($medium-up) {
  3785.     padding-left: $gutter-site;
  3786.     min-width: 150px;
  3787.     display: inline-block;
  3788.   }
  3789. }
  3790.  
  3791. .cart__footer {
  3792.   padding-top: $section-spacing-small / 2;
  3793. }
  3794.  
  3795. .cart__submit-controls {
  3796.   @include display-flexbox();
  3797.   @include flex-wrap(wrap);
  3798.   @include align-items(flex-start);
  3799.   @include justify-content(flex-end);
  3800.  
  3801.   & > .cart__submit-control {
  3802.     margin-left: 10px;
  3803.     margin-bottom: 10px;
  3804.   }
  3805.  
  3806.   @include media-query ($small) {
  3807.     @include justify-content(center);
  3808.  
  3809.     & .cart__submit {
  3810.       margin-left: 0;
  3811.       margin-bottom: 0;
  3812.     }
  3813.   }
  3814. }
  3815.  
  3816. .cart__submit {
  3817.   @include media-query($small) {
  3818.     line-height: 1.4;
  3819.     min-height: 44px;
  3820.     margin-left: 0;
  3821.     margin-bottom: 0;
  3822.   }
  3823.  
  3824.   @include media-query ($narrowscreen) {
  3825.     width: 100%;
  3826.   }
  3827. }
  3828.  
  3829. .cart__shipping {
  3830.   font-size: em($font-size-base - 2);
  3831.   padding: 10px 0 20px;
  3832.   margin-bottom: 25px;
  3833. }
  3834.  
  3835. .cart-note__label,
  3836. .cart-note__input {
  3837.   display: block;
  3838.  
  3839.   @include media-query($small) {
  3840.     margin: 0 auto;
  3841.   }
  3842. }
  3843.  
  3844. .cart-note__label {
  3845.   margin-bottom: 15px;
  3846. }
  3847.  
  3848. .cart-note__input {
  3849.   min-height: 50px;
  3850.   width: 100%;
  3851.  
  3852.   @include media-query($small) {
  3853.     margin-bottom: 40px;
  3854.   }
  3855. }
  3856.  
  3857. .cart__product-title {
  3858.   border-bottom: none;
  3859.  
  3860.   &:hover,
  3861.   &:focus {
  3862.     border-bottom: 1px solid currentColor;
  3863.   }
  3864. }
  3865.  
  3866. .cart__image {
  3867.   max-height: 95px;
  3868. }
  3869.  
  3870. .cart__image-wrapper div {
  3871.   display: block;
  3872.   padding-right: $section-spacing-small / 2;
  3873.  
  3874.   @include media-query($medium-up) {
  3875.     padding-right: $section-spacing-small;
  3876.   }
  3877. }
  3878.  
  3879. @include media-query($medium-up) {
  3880.   .cart__image-wrapper {
  3881.     width: 130px;
  3882.   }
  3883.  
  3884.   .cart__meta {
  3885.     max-width: 300px;
  3886.   }
  3887.  
  3888.   .cart__remove {
  3889.     margin-top: 4px;
  3890.   }
  3891.  
  3892.   .cart__qty {
  3893.     text-align: center;
  3894.   }
  3895. }
  3896.  
  3897. @include media-query($small) {
  3898.  
  3899.   .cart__update-wrapper {
  3900.     display: none;
  3901.     padding-top: 0;
  3902.     padding-bottom: $gutter-site-mobile;
  3903.     border-bottom: 1px solid $color-border;
  3904.   }
  3905.  
  3906.   .cart__update--show {
  3907.     td {
  3908.       padding-bottom: 10px;
  3909.     }
  3910.  
  3911.     & + tr {
  3912.       display: table-row;
  3913.     }
  3914.   }
  3915.  
  3916.   .cart__row-price {
  3917.     text-align: right;
  3918.   }
  3919.  
  3920.   .cart__update-controls {
  3921.     @include display-flexbox();
  3922.     @include flex-wrap(wrap);
  3923.     @include align-items(center);
  3924.     @include justify-content(space-between);
  3925.   }
  3926.  
  3927.   .cart__update-control {
  3928.     margin-bottom: 10px;
  3929.   }
  3930.  
  3931.   .cart__update-control--remove {
  3932.     line-height: 1.2;
  3933.   }
  3934.  
  3935.   .cart-flex {
  3936.     @include display-flexbox();
  3937.     @include flex-wrap(wrap);
  3938.     @include align-items(center);
  3939.   }
  3940.  
  3941.   .cart-flex-item {
  3942.     display: block;
  3943.     min-width: 0;
  3944.     @include flex(1 1 100%);
  3945.   }
  3946.  
  3947.   .cart__image-wrapper {
  3948.     max-width: 85px;
  3949.   }
  3950.  
  3951.   .cart__price-wrapper {
  3952.     width: 24%;
  3953.     text-align: right;
  3954.   }
  3955.  
  3956.   .cart-message {
  3957.     padding-top: 20px;
  3958.   }
  3959.  
  3960.   .cart__qty {
  3961.     padding: 0 10px;
  3962.   }
  3963.  
  3964.   .cart__qty-label {
  3965.     @include visually-shown();
  3966.     display: inline-block;
  3967.     vertical-align: middle;
  3968.     font-size: em(13);
  3969.     margin-right: 5px;
  3970.   }
  3971. }
  3972.  
  3973. .cart__continue-btn {
  3974.   .cart--no-cookies & {
  3975.     display: none;
  3976.   }
  3977. }
  3978.  
  3979. .cart--empty-message {
  3980.   .cart--no-cookies & {
  3981.     display: none;
  3982.   }
  3983. }
  3984.  
  3985. .cookie-message {
  3986.   display: none;
  3987.   padding-bottom: 25px;
  3988.  
  3989.   .cart--no-cookies & {
  3990.     display: block;
  3991.   }
  3992. }
  3993.  
  3994. .additional-checkout-buttons {
  3995.   margin-top: $gutter-site-mobile;
  3996.  
  3997.   // reset for paypal button
  3998.   input[type="image"] {
  3999.     padding: 0;
  4000.     border: 0;
  4001.     background: transparent;
  4002.   }
  4003.  
  4004.   @include media-query ($narrowscreen) {
  4005.     margin-top: 10px;
  4006.   }
  4007. }
  4008.  
  4009. .myaccount {
  4010.   display: flex;
  4011.   flex-wrap: wrap;
  4012. }
  4013.  
  4014. .myaccount__order-history {
  4015.   @include media-query($medium-up) {
  4016.     @include flex(1 0 percentage(2/3));
  4017.   }
  4018. }
  4019.  
  4020. .myaccount__account-details {
  4021.   @include media-query($medium-up) {
  4022.     @include flex(1 0 percentage(1/3));
  4023.   }
  4024. }
  4025.  
  4026.  
  4027. /*================ MODULES ================*/
  4028. .site-header {
  4029.   background-color: $color-body;
  4030.   position: relative;
  4031.   padding: 0 $gutter-site;
  4032.  
  4033.   @include media-query($small) {
  4034.     border-bottom: 1px solid $color-border;
  4035.     padding: 0;
  4036.   }
  4037.  
  4038.   @include media-query($medium-up) {
  4039.     &.logo--center {
  4040.       padding-top: $grid-gutter;
  4041.     }
  4042.   }
  4043. }
  4044.  
  4045. .announcement-bar {
  4046.   text-align: center;
  4047.   position: relative;
  4048.   z-index: $z-index-announcement-bar;
  4049. }
  4050.  
  4051. .announcement-bar--link {
  4052.   display: block;
  4053. }
  4054.  
  4055. .announcement-bar__message {
  4056.   display: block;
  4057.   font-size: em(16);
  4058.   font-weight: $font-weight-header;
  4059.   padding: 10px $gutter-site-mobile;
  4060.  
  4061.   @include media-query($medium-up) {
  4062.     padding: 10px $gutter-site;
  4063.   }
  4064. }
  4065.  
  4066. .site-header__logo {
  4067.   margin: 15px 0;
  4068.  
  4069.   .logo-align--center & {
  4070.     text-align: center;
  4071.     margin: 0 auto;
  4072.  
  4073.     @include media-query($small) {
  4074.       text-align: left;
  4075.       margin: 15px 0;
  4076.     }
  4077.   }
  4078. }
  4079.  
  4080. .site-header__logo-link {
  4081.   display: inline-block;
  4082.   word-break: break-word;
  4083. }
  4084.  
  4085. .site-header__logo-image {
  4086.   display: block;
  4087.  
  4088.   @include media-query($medium-up) {
  4089.     margin: 0 auto;
  4090.   }
  4091. }
  4092.  
  4093. .site-header__logo-image img {
  4094.   width: 100%;
  4095. }
  4096.  
  4097. .site-header__logo-image--centered img {
  4098.   margin: 0 auto;
  4099. }
  4100.  
  4101. @include media-query($medium-up) {
  4102.   .logo-align--center .site-header__logo-link {
  4103.     margin: 0 auto;
  4104.   }
  4105. }
  4106.  
  4107. @include media-query($small) {
  4108.   .site-header__icons {
  4109.     .btn--link,
  4110.     .site-header__cart {
  4111.       font-size: em($font-size-base);
  4112.     }
  4113.   }
  4114. }
  4115.  
  4116. .site-header__icons {
  4117.   position: relative;
  4118.   white-space: nowrap;
  4119.  
  4120.   @include media-query($small) {
  4121.     width: auto;
  4122.   }
  4123. }
  4124.  
  4125. .site-header__icons-wrapper {
  4126.   position: relative;
  4127.   @include display-flexbox();
  4128.   @include align-items(center);
  4129.   @include justify-content(flex-end);
  4130.  
  4131.   @include media-query($small) {
  4132.     @include display-flexbox();
  4133.   }
  4134. }
  4135.  
  4136. .site-header__cart,
  4137. .site-header__search,
  4138. .site-header__account {
  4139.   position: relative;
  4140. }
  4141.  
  4142. .site-header__search {
  4143.   &.site-header__icon {
  4144.     display: none;
  4145.  
  4146.     @include media-query($widescreen) {
  4147.       display: block;
  4148.     }
  4149.   }
  4150. }
  4151.  
  4152. .site-header__search-toggle {
  4153.   display: block;
  4154.  
  4155.   @include media-query($widescreen) {
  4156.     display: none;
  4157.   }
  4158. }
  4159.  
  4160. @include media-query($medium-up) {
  4161.   .site-header__account,
  4162.   .site-header__cart {
  4163.     padding: 10px 11px;
  4164.   }
  4165. }
  4166.  
  4167. .site-header__cart-title,
  4168. .site-header__search-title {
  4169.   display: block;
  4170.   vertical-align: middle;
  4171.  
  4172.   @include visually-hidden();
  4173. }
  4174.  
  4175. .site-header__cart-title {
  4176.   margin-right: 3px;
  4177. }
  4178.  
  4179. .site-header__cart-count {
  4180.   display: flex;
  4181.   align-items: center;
  4182.   justify-content: center;
  4183.   position: absolute;
  4184.   right: 0.4rem;
  4185.   top: 0.2rem;
  4186.   font-weight: bold;
  4187.   background-color: $color-btn-primary;
  4188.   color: $color-btn-primary-text;
  4189.   border-radius: 50%;
  4190.   min-width: 1em;
  4191.   height: 1em;
  4192.  
  4193.   span {
  4194.     font-family: $font-stack-cart-notification;
  4195.     font-size: calc(11em / 16);
  4196.     line-height: 1;
  4197.   }
  4198. }
  4199.  
  4200. @include media-query($small) {
  4201.   .site-header__cart-count {
  4202.     top: calc(7em / 16);
  4203.     right: 0;
  4204.     border-radius: 50%;
  4205.     min-width: calc(19em / 16);
  4206.     height: calc(19em / 16);
  4207.  
  4208.     span {
  4209.       padding: 0.25em calc(6em / 16);
  4210.       font-size: 12px;
  4211.     }
  4212.   }
  4213. }
  4214.  
  4215. .site-header__menu {
  4216.   display: none;
  4217. }
  4218.  
  4219. .site-header__icon svg {
  4220.   height: 23px;
  4221.   width: 22px;
  4222.  
  4223.   @include media-query($medium-up) {
  4224.     margin-right: 3px;
  4225.   }
  4226. }
  4227.  
  4228. @include media-query($small) {
  4229.   .site-header__logo {
  4230.     padding-left: $gutter-site-mobile;
  4231.   }
  4232.  
  4233.   .site-header__icons {
  4234.     padding-right: 13px;
  4235.   }
  4236.  
  4237.   .site-header__icon {
  4238.     display: inline-block;
  4239.     vertical-align: middle;
  4240.     padding: 10px 11px;
  4241.     margin: 0;
  4242.   }
  4243.  
  4244.   .site-header__logo {
  4245.     text-align: left;
  4246.  
  4247.     img {
  4248.       margin: 0;
  4249.     }
  4250.   }
  4251. }
  4252.  
  4253. .article-listing {
  4254.   padding-top: $gutter-site;
  4255.   margin-bottom: $gutter-site;
  4256. }
  4257.  
  4258. .article__title {
  4259.   margin-bottom: $gutter-site-mobile / 2;
  4260. }
  4261.  
  4262. .article__title--has-image {
  4263.   @include media-query($small) {
  4264.     padding-left: $gutter-site-mobile;
  4265.   }
  4266. }
  4267.  
  4268. .article__author {
  4269.   margin-right: 10px;
  4270. }
  4271.  
  4272. .article__author,
  4273. .article__date {
  4274.   display: inline-block;
  4275.   margin-bottom: $gutter-site-mobile;
  4276.  
  4277.   .template-article & {
  4278.     margin-bottom: 0;
  4279.   }
  4280. }
  4281.  
  4282. .article__tags {
  4283.   margin-bottom: $section-spacing / 2;
  4284. }
  4285.  
  4286. .article__tags--list {
  4287.   font-style: italic;
  4288. }
  4289.  
  4290. .article__link {
  4291.   display: block;
  4292.  
  4293.   @include media-query($small) {
  4294.     @include display-flexbox;
  4295.     @include flex-direction(column);
  4296.   }
  4297.  
  4298.   &:not([disabled]):hover,
  4299.   &:focus {
  4300.     .article__grid-image-wrapper {
  4301.       @include overlay(1);
  4302.     }
  4303.   }
  4304. }
  4305.  
  4306. .article__meta-buttons {
  4307.   li + li {
  4308.     margin-left: 1.5rem;
  4309.   }
  4310. }
  4311.  
  4312. .article__comment-count {
  4313.   border-color: transparent;
  4314.   border-bottom-color: currentColor;
  4315.   padding: 0 0 3px 0;
  4316.  
  4317.   &:not([disabled]):hover,
  4318.   &:focus {
  4319.     border-color: transparent;
  4320.     border-bottom-color: currentColor;
  4321.   }
  4322. }
  4323.  
  4324. /*============================================================================
  4325.   Blog article grid
  4326. ==============================================================================*/
  4327. .grid--blog {
  4328.   margin-bottom: -$section-spacing;
  4329.   overflow: auto;
  4330. }
  4331.  
  4332. .article__grid-tag {
  4333.   margin-right: 10px;
  4334. }
  4335.  
  4336. .article__grid-meta {
  4337.   margin-bottom: $section-spacing;
  4338. }
  4339.  
  4340. @include media-query($small) {
  4341.   .article__grid-meta--has-image {
  4342.     float: left;
  4343.     padding-left: $gutter-site-mobile;
  4344.   }
  4345. }
  4346.  
  4347. .article__grid-excerpt {
  4348.   margin-bottom: $section-spacing-small / 2;
  4349. }
  4350.  
  4351. .article__grid-image-wrapper {
  4352.   margin: 0 auto;
  4353.   position: relative;
  4354.   width: 100%;
  4355. }
  4356.  
  4357. .article__grid-image-container {
  4358.   display: block;
  4359.   clear: both;
  4360.   position: relative;
  4361.  
  4362.   margin: 0 auto $section-spacing / 2 0;
  4363.   min-height: 1px;
  4364.   width: 100%;
  4365.   height: 100%;
  4366.  
  4367.   @include media-query($small) {
  4368.     float: left;
  4369.     margin: 0 0 $section-spacing 0;
  4370.   }
  4371.  
  4372.   img {
  4373.     display: block;
  4374.   }
  4375. }
  4376.  
  4377. .article__grid-image {
  4378.   margin: 0 auto;
  4379.   width: 100%;
  4380.  
  4381.   .js & {
  4382.     position: absolute;
  4383.     top: 0;
  4384.   }
  4385. }
  4386.  
  4387. .article__list-image-container {
  4388.   display: block;
  4389.   clear: both;
  4390.   position: relative;
  4391.  
  4392.   min-height: 1px;
  4393.   width: 100%;
  4394.   height: 100%;
  4395. }
  4396.  
  4397. .article__list-image-wrapper{
  4398.   width: 100%;
  4399.   margin-bottom: 20px;
  4400. }
  4401.  
  4402. .article__list-image-container {
  4403.   display: block;
  4404.   clear: both;
  4405.   position: relative;
  4406.  
  4407.   min-height: 1px;
  4408.   width: 100%;
  4409.   height: 100%;
  4410. }
  4411.  
  4412. .article__list-image-wrapper{
  4413.   width: 100%;
  4414.   margin-bottom: 20px;
  4415. }
  4416.  
  4417. .article__list-image {
  4418.   margin: 0 auto;
  4419.   width: 100%;
  4420.   position: absolute;
  4421.   top: 0;
  4422. }
  4423.  
  4424. .sidebar {
  4425.   margin-top: 40px;
  4426. }
  4427.  
  4428. .sidebar__list {
  4429.   list-style: none;
  4430.   margin-bottom: $gutter-site;
  4431.  
  4432.   li {
  4433.     margin-bottom: 10px;
  4434.   }
  4435. }
  4436.  
  4437. .pagination {
  4438.   text-align: center;
  4439.   list-style: none;
  4440.   font-size: em(15);
  4441.   padding-top: $section-spacing;
  4442.  
  4443.   li {
  4444.     display: inline-block;
  4445.   }
  4446.  
  4447.   .icon {
  4448.     display: block;
  4449.     height: 20px;
  4450.     vertical-align: middle;
  4451.   }
  4452. }
  4453.  
  4454. .pagination__text {
  4455.   padding: 0 ($gutter-site / 2);
  4456. }
  4457.  
  4458. .comment {
  4459.   margin-bottom: $grid-gutter;
  4460.  
  4461.   &:last-child {
  4462.     margin-bottom: 0;
  4463.   }
  4464. }
  4465.  
  4466. .comment__content {
  4467.   margin-bottom: 5px;
  4468. }
  4469.  
  4470. .comment__meta-item {
  4471.   margin-right: 10px;
  4472.   font-size: em(14);
  4473.  
  4474.   &:first-child::before {
  4475.     content: '\2014 \0020';
  4476.   }
  4477. }
  4478.  
  4479. .social-sharing {
  4480.   display: flex;
  4481.   .template-password & {
  4482.     justify-content: center;
  4483.   }
  4484. }
  4485.  
  4486. .btn--share {
  4487.   background-color: transparent;
  4488.   border-color: $color-border;
  4489.   color: $color-text;
  4490.   margin-right: 5px;
  4491.   margin-bottom: 10px;
  4492.  
  4493.   &:not([disabled]):hover,
  4494.   &:focus {
  4495.     background-color: transparent;
  4496.     border-color: $color-btn-social-focus;
  4497.     color: $color-text;
  4498.   }
  4499.  
  4500.   .icon {
  4501.     vertical-align: middle;
  4502.     width: 16px;
  4503.     height: 16px;
  4504.     margin-right: 4px;
  4505.   }
  4506.  
  4507.   .icon-facebook {
  4508.     fill: $color-facebook;
  4509.   }
  4510.  
  4511.   .icon-twitter {
  4512.     fill: $color-twitter;
  4513.   }
  4514.  
  4515.   .icon-pinterest {
  4516.     fill: $color-pinterest;
  4517.   }
  4518. }
  4519.  
  4520. .share-title {
  4521.   display: inline-block;
  4522.   vertical-align: middle;
  4523. }
  4524.  
  4525.  
  4526. .search-bar__form {
  4527.   display: table;
  4528.   width: 100%;
  4529.   position: relative;
  4530.   height: calc(46em / 16);
  4531.   border: 1px solid transparent;
  4532. }
  4533.  
  4534. @include media-query($small) {
  4535.   .search-bar__form {
  4536.     width: 100%;
  4537.   }
  4538. }
  4539.  
  4540. .search-bar__submit .icon {
  4541.   position: relative;
  4542.   top: -1px;
  4543.   width: 1.2rem;
  4544.   height: auto;
  4545. }
  4546.  
  4547. .search-bar__submit,
  4548. .search-header__submit {
  4549.   display: inline-block;
  4550.   vertical-align: middle;
  4551.   position: absolute;
  4552.   right: 0;
  4553.   top: 0;
  4554.   padding: 0 12px;
  4555.   height: 100%;
  4556.   z-index: 1;
  4557. }
  4558.  
  4559. .search-header__input,
  4560. .search-bar__input {
  4561.   background-color: transparent;
  4562.   border-radius: $border-radius;
  4563.   color: $color-text;
  4564.   border-color: transparent;
  4565.   padding-right: calc(35em / 16);
  4566.   width: 100%;
  4567.   min-height: 44px;
  4568.  
  4569.   &::-webkit-input-placeholder {
  4570.     @include placeholder-text($color-text);
  4571.   }
  4572.  
  4573.   &::-moz-placeholder {
  4574.     @include placeholder-text($color-text);
  4575.   }
  4576.  
  4577.   &:-ms-input-placeholder {
  4578.     @include placeholder-text($color-text, 0);
  4579.   }
  4580.  
  4581.   &::-ms-input-placeholder {
  4582.     @include placeholder-text($color-text, 1);
  4583.   }
  4584. }
  4585.  
  4586. .search-bar__input {
  4587.   border: 1px solid transparent;
  4588.  
  4589.   &:focus {
  4590.     border-color: transparent;
  4591.   }
  4592. }
  4593.  
  4594. .search-bar__close {
  4595.   padding: calc(10em / 16) .75em;
  4596.  
  4597.   .icon {
  4598.     vertical-align: top;
  4599.     width: 1.2rem;
  4600.     height: auto;
  4601.   }
  4602. }
  4603.  
  4604. /*============================================================================
  4605.   The search submit button has pointer-events: none which also
  4606.   effects the :hover style. This forces the style to be applied.
  4607. ==============================================================================*/
  4608. .search-header__input:hover + .btn--link {
  4609.   color: $color-text-focus;
  4610. }
  4611.  
  4612. /*================ Mobile Search Bar ================*/
  4613.  
  4614. .search-bar {
  4615.   border-bottom: 1px solid $color-border;
  4616.   padding: 0 ($gutter-site / 2);
  4617.   z-index: 1000;
  4618. }
  4619.  
  4620. .search-bar__table {
  4621.   display: table;
  4622.   table-layout: fixed;
  4623.   width: 100%;
  4624.   height: 100%;
  4625. }
  4626.  
  4627. .search-bar__table-cell {
  4628.   display: table-cell;
  4629.   vertical-align: middle;
  4630. }
  4631.  
  4632. .search-bar__form-wrapper {
  4633.   width: 90%;
  4634. }
  4635.  
  4636. /*================ Header Search ================*/
  4637. .search-header {
  4638.   display: inline-block;
  4639.   position: relative;
  4640.   width: 100%;
  4641.   max-width: calc(30em / 16);
  4642.   vertical-align: middle;
  4643.  
  4644.   &.search--focus {
  4645.     max-width: 250px;
  4646.   }
  4647. }
  4648.  
  4649. .search-header__input {
  4650.   cursor: pointer;
  4651. }
  4652.  
  4653. .search--focus {
  4654.   .search-header__input {
  4655.     outline: none;
  4656.     border-color: $color-border-form;
  4657.     cursor: auto;
  4658.   }
  4659.  
  4660.   .search-header__submit {
  4661.     pointer-events: auto;
  4662.   }
  4663. }
  4664.  
  4665. .search-header__submit {
  4666.   pointer-events: none;
  4667. }
  4668.  
  4669. .search-header,
  4670. .search-header__submit {
  4671.   transition: all 0.35s cubic-bezier(0.29, 0.63, 0.44, 1);
  4672. }
  4673.  
  4674. .no-svg {
  4675.   .site-header__search {
  4676.     display: inline-block;
  4677.   }
  4678.  
  4679.   .search-header {
  4680.     max-width: none;
  4681.   }
  4682.  
  4683.   .search__input {
  4684.     width: auto;
  4685.     padding-left: 60px;
  4686.   }
  4687. }
  4688.  
  4689. $return-button-width: 55px;
  4690. $nav-button-padding: 15px;
  4691.  
  4692. /*================ Mobile Site Nav ================*/
  4693. .mobile-nav {
  4694.   display: block;
  4695.   @include transform(translate3d(0, 0, 0));
  4696.   transition: $transition-drawer;
  4697.  
  4698.   .sub-nav--is-open & {
  4699.     @include transform(translate3d(-100%, 0, 0));
  4700.   }
  4701.  
  4702.   .third-nav--is-open & {
  4703.     @include transform(translate3d(-200%, 0, 0));
  4704.   }
  4705. }
  4706.  
  4707. .mobile-nav__link,
  4708. .mobile-nav__sublist-link {
  4709.   display: block;
  4710.   width: 100%;
  4711.   padding: $nav-button-padding ($nav-button-padding * 2);
  4712.   font-size: $font-size-mobile-input;
  4713. }
  4714.  
  4715. .mobile-nav__link {
  4716.   position: relative;
  4717. }
  4718.  
  4719. .mobile-nav__label {
  4720.   border-bottom: 1px solid transparent;
  4721.  
  4722.   .mobile-nav__link--active & {
  4723.     border-bottom-color: $color-text;
  4724.   }
  4725. }
  4726.  
  4727. .mobile-nav__sublist-link:not(.mobile-nav__sublist-header) {
  4728.   padding-left: $return-button-width + $nav-button-padding;
  4729.   padding-right: ($nav-button-padding * 2);
  4730. }
  4731.  
  4732. .mobile-nav__item {
  4733.   display: block;
  4734.   width: 100%;
  4735.  
  4736.   .icon {
  4737.     position: absolute;
  4738.     top: 50%;
  4739.     left: 50%;
  4740.     height: 12px;
  4741.     width: 10px;
  4742.     margin: -6px 0 0 -5px;
  4743.   }
  4744. }
  4745.  
  4746. .mobile-nav__return {
  4747.   border-right: 1px solid $color-border;
  4748. }
  4749.  
  4750. .mobile-nav__return-btn {
  4751.   position: relative;
  4752.   padding: 24px 0;
  4753.   width: $return-button-width;
  4754. }
  4755.  
  4756. .mobile-nav__icon {
  4757.   position: absolute;
  4758.   right: 0;
  4759.   top: 0;
  4760.   bottom: 0;
  4761.   padding-left: $gutter-site-mobile;
  4762.   padding-right: $gutter-site-mobile;
  4763.   pointer-events: none;
  4764.   overflow: hidden;
  4765. }
  4766.  
  4767. .mobile-nav__table {
  4768.   display: table;
  4769.   width: 100%;
  4770. }
  4771.  
  4772. .mobile-nav__table-cell {
  4773.   display: table-cell;
  4774.   vertical-align: middle;
  4775.   width: 1%;
  4776.   text-align: left;
  4777.   white-space: normal;
  4778. }
  4779.  
  4780. .mobile-nav__toggle-button {
  4781.   padding: 20px 15px;
  4782. }
  4783.  
  4784. .mobile-nav__dropdown {
  4785.   position: absolute;
  4786.   background-color: $color-body;
  4787.   z-index: $z-index-sub-nav;
  4788.   width: 100%;
  4789.   top: 0;
  4790.   right: -100%;
  4791.   display: none;
  4792.  
  4793.   .is-active + & {
  4794.     display: block;
  4795.     opacity: 1;
  4796.   }
  4797.  
  4798.   // Need the transition so `prepareTransition` removes class
  4799.   &.is-closing {
  4800.     transition: $transition-drawer;
  4801.     opacity: 0.99;
  4802.   }
  4803.  
  4804.   .mobile-nav__sublist-header {
  4805.     font-family: $font-stack-header;
  4806.     font-style: $font-style-header;
  4807.     font-weight: $font-weight-header;
  4808.     display: table-cell;
  4809.     vertical-align: middle;
  4810.     padding-left: $nav-button-padding;
  4811.   }
  4812.  
  4813.   .mobile-nav__sublist-header--main-nav-parent {
  4814.     color: $color-body-text;
  4815.   }
  4816. }
  4817.  
  4818. /*================ Mobile nav wrapper ================*/
  4819. .mobile-nav-wrapper {
  4820.   @include transform(translateY(-100%));
  4821.   position: absolute;
  4822.   top: 0;
  4823.   left: 0;
  4824.   background-color: $color-body;
  4825.   transition: $transition-drawer;
  4826.   display: none;
  4827.   overflow: hidden;
  4828.   width: 100%;
  4829.  
  4830.   &::after {
  4831.     content: '';
  4832.     position: absolute;
  4833.     bottom: 0;
  4834.     left: 0;
  4835.     right: 0;
  4836.     border-bottom: 1px solid $color-border;
  4837.   }
  4838.  
  4839.   &.js-menu--is-open {
  4840.     display: block;
  4841.   }
  4842. }
  4843.  
  4844. .mobile-nav--open {
  4845.   .icon-close {
  4846.     display: none;
  4847.   }
  4848. }
  4849.  
  4850. .mobile-nav--close {
  4851.   .icon-hamburger {
  4852.     display: none;
  4853.   }
  4854. }
  4855.  
  4856. .site-header__mobile-nav {
  4857.   z-index: 999;
  4858.   position: relative;
  4859.   background-color: $color-body;
  4860.  
  4861.   @include media-query($small) {
  4862.     @include display-flexbox();
  4863.     @include align-items(center);
  4864.   }
  4865. }
  4866.  
  4867. /*================ Modals ================*/
  4868. .modal {
  4869.   @include transform(translateY(-20px));
  4870.   background-color: $color-bg;
  4871.   bottom: 0;
  4872.   color: $color-text;
  4873.   display: none;
  4874.   left: 0;
  4875.   opacity: 0;
  4876.   overflow: hidden;
  4877.   position: fixed;
  4878.   right: 0;
  4879.   top: 0;
  4880. }
  4881.  
  4882. .modal--is-active {
  4883.   @include transform(translateY(0));
  4884.   display: block;
  4885.   opacity: 1;
  4886.   overflow: hidden;
  4887. }
  4888.  
  4889. .modal__inner {
  4890.   @include prefix(transform-style, preserve-3d, moz webkit spec);
  4891.   height: 100%;
  4892. }
  4893.  
  4894. .modal__centered {
  4895.   @include transform(translateY(-50%));
  4896.   position: relative;
  4897.   top: 50%;
  4898.  
  4899.   .no-csstransforms & {
  4900.     top: 20%;
  4901.   }
  4902. }
  4903.  
  4904. .modal__close {
  4905.   border: 0;
  4906.   padding: $gutter-site;
  4907.   position: fixed;
  4908.   top: 0;
  4909.   right: 0;
  4910.   z-index: 2;
  4911.  
  4912.   .icon {
  4913.     font-size: em(20);
  4914.   }
  4915. }
  4916.  
  4917. /*============================================================================
  4918.   Hero slider
  4919.  
  4920.   Extends default slick slider styles.
  4921.   Extra specificity in selectors is used to override defaults.
  4922. ==============================================================================*/
  4923. $slideshow-height-small: 475px;
  4924. $slideshow-height-medium: 650px;
  4925. $slideshow-height-large: 775px;
  4926. $slideshow-control-size: 44px;
  4927. $slideshow-dot-size: 9px;
  4928. $slideshow-loader: #fff;
  4929. $z-index-slideshow-image: 1;
  4930. $z-index-slideshow-text: 2;
  4931. $z-index-slideshow-controls: 3;
  4932. $color-slideshow-controls: #fff;
  4933. $color-slideshow-controls-background: #000;
  4934. $color-slideshow-close-bg: #fff;
  4935. $color-slideshow-close-text: #000;
  4936.  
  4937. $ease-transition: cubic-bezier(0.44, 0.13, 0.48, 0.87);
  4938. $transition-text-slideshow: 0.6s $ease-transition;
  4939. $transition-image-slideshow: opacity 0.8s $ease-transition;
  4940. $transition-controls-slideshow: color 0.2s $ease-transition, background-color 0.2s $ease-transition;
  4941.  
  4942. .slideshow-wrapper {
  4943.   position: relative;
  4944. }
  4945.  
  4946. .slideshow {
  4947.   position: unset;
  4948.   overflow: hidden;
  4949.   margin-bottom: 0;
  4950.   max-height: 80vh;
  4951.   transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  4952.  
  4953.   @include media-query($medium-up) {
  4954.     position: relative;
  4955.     max-height: 100vh;
  4956.   }
  4957.  
  4958.   // Make sure slides fill full height
  4959.   .slideshow__slide,
  4960.   .slick-list,
  4961.   .slick-track {
  4962.     height: 100%;
  4963.   }
  4964.  
  4965.   .slick-prev,
  4966.   .slick-next {
  4967.     top: 0;
  4968.     height: 100%;
  4969.     margin-top: 0;
  4970.     width: 40px;
  4971.   }
  4972.  
  4973.   .slick-prev {
  4974.     left: 0;
  4975.   }
  4976.  
  4977.   .slick-next {
  4978.     right: 0;
  4979.   }
  4980. }
  4981.  
  4982. .slideshow--display-controls .slick-dots {
  4983.   @include media-query($medium-up) {
  4984.     left: calc(50% - 22px);
  4985.   }
  4986. }
  4987.  
  4988. .slideshow--small {
  4989.   height: $slideshow-height-small - 300;
  4990.  
  4991.   @include media-query($medium-up) {
  4992.     height: $slideshow-height-small;
  4993.   }
  4994. }
  4995.  
  4996. .slideshow--medium {
  4997.   height: $slideshow-height-medium - 380;
  4998.  
  4999.   @include media-query($medium-up) {
  5000.     height: $slideshow-height-medium;
  5001.   }
  5002. }
  5003.  
  5004. .slideshow--large {
  5005.   height: $slideshow-height-large - 400;
  5006.  
  5007.   @include media-query($medium-up) {
  5008.     height: $slideshow-height-large;
  5009.   }
  5010. }
  5011.  
  5012. /*================ General slide styles ================*/
  5013. .slideshow__slide {
  5014.   position: relative;
  5015.   overflow: hidden;
  5016. }
  5017.  
  5018. .slideshow__link {
  5019.   display: block;
  5020.   position: absolute;
  5021.   top: 0;
  5022.   left: 0;
  5023.   right: 0;
  5024.   bottom: 0;
  5025.  
  5026.   &:active,
  5027.   &:focus {
  5028.     opacity: 1;
  5029.   }
  5030. }
  5031.  
  5032. .slideshow__overlay {
  5033.   @include media-query($medium-up) {
  5034.     @include overlay($z-index-slideshow-text);
  5035.   }
  5036. }
  5037.  
  5038. /*================ Slide images ================*/
  5039. .slideshow__image {
  5040.   transition: $transition-image-slideshow;
  5041.   position: absolute;
  5042.   top: 0;
  5043.   left: 0;
  5044.   opacity: 0;
  5045.   height: 100%;
  5046.   width: 100%;
  5047.   background-repeat: no-repeat;
  5048.   background-size: cover;
  5049.   background-position: center center;
  5050.   background-color: transparent;
  5051.   z-index: $z-index-slideshow-image;
  5052.  
  5053.   .slick-initialized &,
  5054.   .no-js & {
  5055.     opacity: 1;
  5056.   }
  5057. }
  5058.  
  5059. /*================ Slide text ================*/
  5060. .slideshow__text-wrap {
  5061.   height: 100%;
  5062.   position: relative;
  5063.  
  5064.   .slideshow__link & {
  5065.     cursor: inherit;
  5066.   }
  5067. }
  5068.  
  5069. .slideshow__text-wrap--mobile {
  5070.   display: none;
  5071.  
  5072.   @include media-query($small) {
  5073.     display: block;
  5074.     position: relative;
  5075.     top: -1.1rem;
  5076.     background-color: $color-bg;
  5077.     width: 85%;
  5078.     margin: 0 0 -1.1rem 7.5%;
  5079.   }
  5080. }
  5081.  
  5082. .slideshow__text-content {
  5083.   @include media-query($medium-up) {
  5084.     transition: $transition-text-slideshow;
  5085.     transition-delay: 0.3s;
  5086.   }
  5087.  
  5088.   .slideshow__text-wrap--desktop & {
  5089.     position: absolute;
  5090.     width: 100%;
  5091.     top: 50%;
  5092.     opacity: 0;
  5093.     z-index: $z-index-slideshow-text;
  5094.   }
  5095.  
  5096.   @include media-query($medium-up) {
  5097.     &.slideshow__text-content--vertical-top {
  5098.       top: 120px;
  5099.     }
  5100.     &.slideshow__text-content--vertical-bottom {
  5101.       top: auto;
  5102.       bottom: 40px;
  5103.     }
  5104.   }
  5105.  
  5106.   .slick-initialized .slick-active &,
  5107.   .no-js & {
  5108.     @include transform(translateY(-40px));
  5109.     opacity: 1;
  5110.   }
  5111.  
  5112.   .slick-initialized .slick-active &.slideshow__text-content--vertical-center,
  5113.   .no-js &.slideshow__text-content--vertical-center {
  5114.     @include transform(translateY(-50%));
  5115.   }
  5116.  
  5117.   &::after {
  5118.     content: '';
  5119.     @include spinner(40px, $slideshow-loader);
  5120.     @include animation(spin 0.65s infinite linear);
  5121.     opacity: 1;
  5122.     transition: all 1s cubic-bezier(0.29, 0.63, 0.44, 1);
  5123.     bottom: -$gutter-site;
  5124.     left: 50%;
  5125.  
  5126.     @include media-query($small) {
  5127.       content: none;
  5128.     }
  5129.   }
  5130.  
  5131.   .slick-initialized &,
  5132.   .no-js & {
  5133.     &::after {
  5134.       opacity: 0;
  5135.       visibility: hidden;
  5136.       content: none;
  5137.     }
  5138.   }
  5139. }
  5140.  
  5141. .slideshow__text-content--mobile {
  5142.   display: none;
  5143.   padding-top: 2.6rem;
  5144.  
  5145.   .slideshow__arrows--mobile ~ & {
  5146.     padding-top: 1.7rem;
  5147.     @include media-query($medium-up) {
  5148.       padding-top: 0;
  5149.     }
  5150.   }
  5151.  
  5152.   @include media-query($medium-up) {
  5153.     padding-top: 0;
  5154.  
  5155.     &::after {
  5156.       display: none;
  5157.     }
  5158.   }
  5159. }
  5160.  
  5161. .slideshow__title,
  5162. .slideshow__subtitle {
  5163.   color: $color-overlay-title-text;
  5164.  
  5165.   @include media-query($small) {
  5166.     display: none;
  5167.   }
  5168. }
  5169.  
  5170. .slideshow__title--mobile {
  5171.   margin-bottom: 0;
  5172.  
  5173.   & ~ .slideshow__subtitle--mobile {
  5174.     margin-top: 0.5rem;
  5175.   }
  5176. }
  5177.  
  5178. .slideshow__subtitle--mobile,
  5179. .slideshow__title--mobile {
  5180.   display: none;
  5181.   color: $color-text;
  5182.  
  5183.   @include media-query($small) {
  5184.     display: block;
  5185.   }
  5186. }
  5187.  
  5188. .slideshow__btn-wrapper {
  5189.   border: none;
  5190.   background-color: transparent;
  5191. }
  5192.  
  5193. .slideshow__btn-wrapper--push {
  5194.   @include media-query($medium-up) {
  5195.     margin-top: $grid-gutter;
  5196.   }
  5197. }
  5198.  
  5199. .slideshow__btn {
  5200.   max-width: 100%;
  5201.   display: inline-block;
  5202.   word-wrap: break-word;
  5203.   background-color: $color-btn-primary;
  5204.   color: $color-btn-primary-text;
  5205.   min-height: 3.125rem;
  5206.   line-height: 2.2;
  5207.  
  5208.   @include media-query($small) {
  5209.     display: none;
  5210.   }
  5211. }
  5212.  
  5213. .slideshow__btn--mobile {
  5214.   display: none;
  5215.   margin: 1.3rem auto 0;
  5216.  
  5217.   @include media-query($small) {
  5218.     display: inline-block;
  5219.     margin: 2rem auto 0.3rem;
  5220.   }
  5221. }
  5222.  
  5223. /*================ Slideshow control styles ================*/
  5224.  
  5225. .slideshow__controls {
  5226.   display: none;
  5227.   justify-content: center;
  5228.   position: absolute;
  5229.   top: 0px;
  5230.   right: 0px;
  5231.   margin-bottom: 5px;
  5232.  
  5233.   @include media-query($medium-up) {
  5234.     top: auto;
  5235.     bottom: 0;
  5236.     left: 0;
  5237.   }
  5238.  
  5239.   .slick-initialized + & {
  5240.     display: flex;
  5241.   }
  5242. }
  5243.  
  5244. .slideshow__arrows {
  5245.   height: $slideshow-control-size;
  5246.   padding: 5px;
  5247.   background-clip: content-box;
  5248.   background-color: rgba($color-slideshow-controls-background, 0.4);
  5249.   color: rgba($color-slideshow-controls, 0.5);
  5250.   transition: $transition-controls-slideshow;
  5251.   display: none;
  5252.  
  5253.   @include media-query($medium-up) {
  5254.     display: flex;
  5255.   }
  5256.  
  5257.   .slideshow__controls:hover &,
  5258.   .slideshow__controls:focus &,
  5259.   .slideshow__controls--hover & {
  5260.     @include media-query($medium-up) {
  5261.       background-color: rgba($color-slideshow-controls-background, 0.75);
  5262.     }
  5263.   }
  5264.  
  5265.   .slideshow__arrow {
  5266.     height: $slideshow-control-size;
  5267.     width: $slideshow-control-size;
  5268.     position: relative;
  5269.     top: -5px;
  5270.     padding: 0 0.9rem;
  5271.     cursor: pointer;
  5272.     transition: $transition-controls-slideshow;
  5273.     background-color: transparent;
  5274.     color: rgba($color-slideshow-controls, 0.5);
  5275.     border: none;
  5276.  
  5277.     .icon {
  5278.       width: 0.7rem;
  5279.       height: 0.7rem;
  5280.       transition: $transition-controls-slideshow;
  5281.  
  5282.       &:hover {
  5283.         color: $color-slideshow-controls;
  5284.       }
  5285.     }
  5286.   }
  5287.   .slideshow__arrow-left {
  5288.     float: left;
  5289.     @include media-query($medium-up) {
  5290.       order: -1;
  5291.     }
  5292.   }
  5293.   .slideshow__arrow-right {
  5294.     float: right;
  5295.     @include media-query($medium-up) {
  5296.       order: 1;
  5297.     }
  5298.   }
  5299.  
  5300.   .slick-dots {
  5301.     line-height: $slideshow-control-size - 10;
  5302.  
  5303.     li {
  5304.       width: $slideshow-dot-size;
  5305.       height: $slideshow-dot-size;
  5306.       margin-left: $slideshow-dot-size;
  5307.     }
  5308.     // sass-lint:disable SelectorDepth
  5309.     li button::before,
  5310.     li a::before {
  5311.       width: $slideshow-dot-size - 1;
  5312.       height: $slideshow-dot-size - 1;
  5313.       color: rgba($color-slideshow-controls-background, 0.5);
  5314.       border: none;
  5315.       opacity: 1;
  5316.  
  5317.       @include media-query($medium-up) {
  5318.         width: $slideshow-dot-size;
  5319.         height: $slideshow-dot-size;
  5320.         color: rgba($color-slideshow-controls, 0.5);
  5321.       }
  5322.     }
  5323.     li.slick-active-mobile button::before,
  5324.     li.slick-active-mobile a::before {
  5325.       color: $color-slideshow-controls-background;
  5326.     }
  5327.     li.slick-active button::before,
  5328.     li.slick-active a::before {
  5329.       color: $color-slideshow-controls;
  5330.     }
  5331.   }
  5332. }
  5333.  
  5334. .slideshow__arrows--mobile {
  5335.   display: block;
  5336.   width: 100%;
  5337.   height: $slideshow-control-size;
  5338.   background-color: transparent;
  5339.   .icon {
  5340.     fill: rgba($color-slideshow-controls-background, 0.5);
  5341.   }
  5342.   .slideshow__arrow:focus .icon {
  5343.     fill: $color-slideshow-controls-background;
  5344.   }
  5345.  
  5346.   @include media-query($medium-up) {
  5347.     display: none;
  5348.   }
  5349. }
  5350.  
  5351. .slideshow__pause {
  5352.   clip: auto;
  5353.   width: $slideshow-control-size;
  5354.   height: $slideshow-control-size;
  5355.   margin-left: 1px;
  5356.   padding: 5px;
  5357.   background-clip: content-box;
  5358.   z-index: $z-index-skip-to-content;
  5359.   border: none;
  5360.   background-color: rgba($color-slideshow-controls-background, 0.4);
  5361.   transition: $transition-controls-slideshow;
  5362.  
  5363.   .slideshow__controls:hover &,
  5364.   .slideshow__controls:focus &,
  5365.   .slideshow__controls--hover &{
  5366.     @include media-query($medium-up) {
  5367.       background-color: rgba($color-slideshow-controls-background, 0.75);
  5368.     }
  5369.   }
  5370.  
  5371.   .icon {
  5372.     color: rgba($color-slideshow-controls, 0.5);
  5373.     transition: $transition-controls-slideshow;
  5374.  
  5375.     &:hover {
  5376.       color: $color-slideshow-controls;
  5377.     }
  5378.   }
  5379.  
  5380.   .icon {
  5381.     width: 0.65rem;
  5382.     height: 0.65rem;
  5383.   }
  5384. }
  5385.  
  5386. .slideshow__pause-stop {
  5387.   display: block;
  5388.  
  5389.   .is-paused & {
  5390.     display: none;
  5391.   }
  5392. }
  5393.  
  5394. .slideshow__pause-rotate {
  5395.   display: none;
  5396.  
  5397.   .is-paused & {
  5398.     display: block;
  5399.   }
  5400. }
  5401.  
  5402. .price {
  5403.   @include display-flexbox;
  5404.   @include flex-wrap(wrap);
  5405.   margin-top: 0;
  5406.   margin-bottom: 0;
  5407.  
  5408.   @include media-query($small) {
  5409.     font-size: em($font-size-base - 1);
  5410.   }
  5411.  
  5412.   dl {
  5413.     margin-top: 0;
  5414.   }
  5415.   dd {
  5416.     margin: 0 0.5em 0 0;
  5417.   }
  5418. }
  5419.  
  5420. .price--unavailable {
  5421.   visibility: hidden;
  5422. }
  5423.  
  5424. .price__regular {
  5425.   color: $color-body-text;
  5426. }
  5427.  
  5428. .price__sale {
  5429.   color: $color-sale-text;
  5430.   display: none;
  5431.  
  5432.   .price--on-sale & {
  5433.     display: block;
  5434.   }
  5435. }
  5436.  
  5437. .price__vendor {
  5438.   color: $color-body-text;
  5439.   font-size: 0.9em;
  5440.   font-weight: $font-weight-body;
  5441.   text-transform: uppercase;
  5442.   letter-spacing: 1px;
  5443.   margin: 5px 0 10px;
  5444.   width: 100%;
  5445.   @include flex-basis(100%);
  5446. }
  5447.  
  5448. .price-item {
  5449.   font-weight: $font-weight-header;
  5450. }
  5451.  
  5452. .price-item--regular {
  5453.   .price--on-sale & {
  5454.     text-decoration: line-through;
  5455.   }
  5456. }
  5457.  
  5458. .price-item__label {
  5459.   display: inline-block;
  5460.   white-space: nowrap;
  5461.   font-weight: $font-weight-header;
  5462. }
  5463.  
  5464. /*================ Module | Filters and Sort toolbar and selection ================*/
  5465. $toolbar-height: 55px;
  5466. $toolbar-height-small: 46px;
  5467.  
  5468. .filters-toolbar-wrapper {
  5469.   border-bottom: 1px solid $color-border;
  5470.   border-top: 1px solid $color-border;
  5471.   margin-bottom: $gutter-site-mobile;
  5472.  
  5473.   @include media-query($medium-up) {
  5474.     margin-bottom: $section-spacing;
  5475.   }
  5476. }
  5477.  
  5478. .filters-toolbar {
  5479.   @include display-flexbox();
  5480.   @include align-items(center);
  5481.   @include flex-wrap(wrap);
  5482.  
  5483.   .icon-chevron-down {
  5484.     fill: $color-text-field-text;
  5485.     width: calc(10em / 16);
  5486.     height: calc(10em / 16);
  5487.     right: 8px;
  5488.   }
  5489. }
  5490.  
  5491. .filters-toolbar--has-filter {
  5492.   position: relative;
  5493.  
  5494.   @include media-query($small) {
  5495.     border-bottom: none;
  5496.  
  5497.     .filters-toolbar__item-child {
  5498.       flex-basis: 50%;
  5499.     }
  5500.  
  5501.     .filters-toolbar__item-wrapper {
  5502.       @include flex-basis(100%);
  5503.     }
  5504.  
  5505.     .filters-toolbar__item--count {
  5506.       @include flex-basis(100%);
  5507.       text-align: left;
  5508.  
  5509.       &:before {
  5510.         background-color: $color-border;
  5511.         content: "";
  5512.         height: 1px;
  5513.         left: 0;
  5514.         position: absolute;
  5515.         top: auto;
  5516.         width: 100%;
  5517.       }
  5518.     }
  5519.   }
  5520. }
  5521.  
  5522. .filters-toolbar__item {
  5523.   min-width: 33%;
  5524.   @include flex(1 1 33%);
  5525.  
  5526.   .no-flexbox & {
  5527.     // sass-lint:disable no-important
  5528.     text-align: left !important;
  5529.   }
  5530.  
  5531.   &:first-child {
  5532.     .filters-toolbar__input {
  5533.       @include media-query($small) {
  5534.         padding-left: 0;
  5535.       }
  5536.     }
  5537.   }
  5538. }
  5539.  
  5540. .filters-toolbar__item-child {
  5541.   @include media-query($small) {
  5542.     flex-grow: 0;
  5543.   }
  5544.  
  5545.   &:first-child {
  5546.     @include media-query($small) {
  5547.       margin-right: 2.5rem;
  5548.     }
  5549.  
  5550.     @include media-query($medium-up) {
  5551.       margin-right: 3rem;
  5552.     }
  5553.   }
  5554.  
  5555.   .filters-toolbar__input {
  5556.     @include media-query($small) {
  5557.       padding-left: 0;
  5558.       padding-right: 25px;
  5559.       width: 100%;
  5560.     }
  5561.   }
  5562. }
  5563.  
  5564. .filters-toolbar__item-wrapper {
  5565.   @include display-flexbox();
  5566.   @include flex(1 1 33%);
  5567.  
  5568.   @include media-query($small) {
  5569.     @include justify-content(space-between);
  5570.   }
  5571. }
  5572.  
  5573. .filters-toolbar__item--count {
  5574.   min-width: 0;
  5575.   @include flex(0 1 auto);
  5576.   text-align: center;
  5577.  
  5578.   @include media-query($small) {
  5579.     @include flex(0 1 50%);
  5580.     text-align: right;
  5581.   }
  5582. }
  5583.  
  5584. .no-flexbox .filters-toolbar select {
  5585.   // sass-lint:disable no-important
  5586.   width: 100% !important; // override inline styles
  5587. }
  5588.  
  5589. .filters-toolbar__label {
  5590.   display: inline-block;
  5591.  
  5592.   @include media-query($small) {
  5593.     display: block;
  5594.     margin-bottom: 0;
  5595.     margin-top: 8px;
  5596.   }
  5597. }
  5598.  
  5599. .filters-toolbar__input-wrapper {
  5600.   display: inline-block;
  5601. }
  5602.  
  5603. .filters-toolbar__input {
  5604.   border: 0 solid transparent;
  5605.   overflow: hidden;
  5606.   text-overflow: ellipsis;
  5607.   white-space: nowrap;
  5608.   max-width: 100%;
  5609.   height: $toolbar-height;
  5610.   opacity: 1;
  5611.   position: relative;
  5612.  
  5613.   .filters-toolbar__item:first-child & {
  5614.     padding-left: 0;
  5615.   }
  5616.  
  5617.   .no-flexbox & {
  5618.     margin: 0;
  5619.   }
  5620.  
  5621.   @include media-query($small) {
  5622.     height: $toolbar-height-small;
  5623.   }
  5624.  
  5625.   &.hidden {
  5626.     opacity: 0;
  5627.   }
  5628.  
  5629.   option {
  5630.     text-overflow: ellipsis;
  5631.     overflow: hidden;
  5632.   }
  5633. }
  5634.  
  5635. .filters-toolbar__product-count {
  5636.   font-size: em($font-size-base - 1px);
  5637.   font-style: italic;
  5638.   line-height: $toolbar-height;
  5639.   margin-bottom: 0;
  5640.   overflow: hidden;
  5641.   text-overflow: ellipsis;
  5642.   white-space: nowrap;
  5643.  
  5644.   @include media-query($small) {
  5645.     font-size: em($font-size-base - 2px);
  5646.     line-height: $toolbar-height-small;
  5647.   }
  5648. }
  5649.  
  5650. .site-footer {
  5651.   margin-top: $section-spacing;
  5652.   padding: $footer-spacing-large 0 $section-spacing 0;
  5653.  
  5654.   @include media-query($medium-up) {
  5655.     padding-bottom: $section-spacing-small;
  5656.   }
  5657.  
  5658.   h4 {
  5659.     margin-bottom: $footer-spacing-medium / 2;
  5660.     @include media-query($medium-up) {
  5661.       min-height: em(ceil($font-size-header * 0.7));
  5662.       margin-bottom: $footer-spacing-medium;
  5663.     }
  5664.   }
  5665. }
  5666.  
  5667. .site-footer__content {
  5668.   @include display-flexbox;
  5669.   @include align-items(flex-start);
  5670.   @include flex-wrap(wrap);
  5671.  
  5672.   @include media-query($small) {
  5673.     padding: 0 $footer-wrapper-spacing;
  5674.   }
  5675.  
  5676.   @include media-query($medium-up) {
  5677.     @include flex-wrap(nowrap);
  5678.   }
  5679. }
  5680.  
  5681. .site-footer__item {
  5682.   @include display-flexbox;
  5683.   @include flex(1 1 100%);
  5684.   margin-bottom: $section-spacing;
  5685.  
  5686.   @include media-query($medium-up) {
  5687.     padding: 0 $footer-spacing-small 0 $footer-spacing-small;
  5688.     margin-bottom: $footer-spacing-large;
  5689.   }
  5690.  
  5691.   &:first-of-type {
  5692.     padding-left: 0;
  5693.   }
  5694.  
  5695.   &:last-of-type {
  5696.     padding-right: 0;
  5697.     @include media-query($small) {
  5698.       margin-bottom: 0;
  5699.     }
  5700.   }
  5701. }
  5702.  
  5703. @include media-query($medium-up) {
  5704.   .site-footer__item--full-width {
  5705.     @include flex(1 1 100%);
  5706.   }
  5707.  
  5708.   .site-footer__item--one-half {
  5709.     @include flex(1 1 50%);
  5710.   }
  5711.  
  5712.   .site-footer__item--one-third {
  5713.     @include flex(1 1 33%);
  5714.   }
  5715.  
  5716.   .site-footer__item--one-quarter {
  5717.     @include flex(1 1 25%);
  5718.   }
  5719.  
  5720.   .site-footer__item--one-fifth {
  5721.     @include flex(1 1 20%);
  5722.   }
  5723.  
  5724.   .site-footer-newsletter__one-half {
  5725.     @include flex(1 1 50%);
  5726.   }
  5727. }
  5728.  
  5729. .site-footer__item--center {
  5730.   @include media-query($medium-up) {
  5731.     @include justify-content(center);
  5732.     & > * {
  5733.       text-align: center;
  5734.     }
  5735.   }
  5736. }
  5737.  
  5738. .site-footer__item-inner--newsletter {
  5739.   width: 100%;
  5740.  
  5741.   .newsletter__submit {
  5742.     margin-top: $footer-spacing-extra-small;
  5743.   }
  5744.  
  5745.   .newsletter__input {
  5746.     margin: $footer-spacing-extra-small 0 0 0;
  5747.     width: 100%;
  5748.   }
  5749.  
  5750.   .site-footer__item--full-width & {
  5751.     @include media-query($medium-up) {
  5752.       max-width: 50%;
  5753.     }
  5754.   }
  5755. }
  5756.  
  5757. .site-footer__centered--single-block {
  5758.   @include media-query($medium-up) {
  5759.     width: 75%;
  5760.     margin: 0 auto;
  5761.   }
  5762. }
  5763.  
  5764. .site-footer__hr {
  5765.   margin: $section-spacing 0 $grid-gutter 0;
  5766.   @include media-query($medium-up) {
  5767.     margin: $footer-spacing-large 0 $footer-hr-bottom-spacing 0;
  5768.   }
  5769. }
  5770.  
  5771. .site-footer__linklist.list--inline > li {
  5772.   @include media-query($small) {
  5773.     display: block;
  5774.   }
  5775. }
  5776.  
  5777.  
  5778. .site-footer__linklist-item {
  5779.   display: block;
  5780.   padding: ($grid-gutter / 2) 0;
  5781.  
  5782.   @include media-query($medium-up) {
  5783.     padding: 0 $grid-gutter 5px 0;
  5784.   }
  5785.  
  5786.   &:last-of-type {
  5787.     padding-right: 0;
  5788.   }
  5789. }
  5790.  
  5791.  
  5792. .site-footer__icon-list {
  5793.   padding-bottom: $grid-gutter;
  5794.   @include media-query($medium-up) {
  5795.     padding-bottom: $footer-spacing-small;
  5796.   }
  5797. }
  5798.  
  5799. .site-footer__social-icons li {
  5800.   padding: 0 $footer-spacing-small;
  5801.  
  5802.   @include media-query($medium-up) {
  5803.     &:first-of-type {
  5804.       padding-left: 0;
  5805.     }
  5806.   }
  5807. }
  5808.  
  5809. .social-icons__link {
  5810.   display: block;
  5811. }
  5812.  
  5813. .site-footer__subwrapper {
  5814.   margin-top: $section-spacing-small;
  5815. }
  5816.  
  5817. .site-footer__copyright-content {
  5818.   font-size: em($font-size-base - 3);
  5819. }
  5820.  
  5821. .site-footer__payment-icons {
  5822.   @include media-query($medium-up) {
  5823.     text-align: right;
  5824.   }
  5825.  
  5826.   .payment-icon {
  5827.     margin-bottom: $footer-spacing-extra-small;
  5828.     margin-left: $footer-spacing-extra-small;
  5829.  
  5830.     &:first-child {
  5831.       margin-left: 0;
  5832.     }
  5833.   }
  5834. }
  5835.  
  5836. .feature-row {
  5837.   @include display-flexbox();
  5838.   @include justify-content(space-between);
  5839.   @include align-items(center);
  5840.  
  5841.   @include media-query($small) {
  5842.     @include flex-direction(column);
  5843.   }
  5844. }
  5845.  
  5846. .feature-row__item {
  5847.   @include flex(0 1 50%);
  5848.  
  5849.   @include media-query($small) {
  5850.     @include flex(1 1 auto);
  5851.     width: 100%;
  5852.     max-width: 100%;
  5853.   }
  5854. }
  5855.  
  5856. .feature-row__image-wrapper {
  5857.   margin: 0 auto $section-spacing-small / 1.8;
  5858.   position: relative;
  5859.   width: 100%;
  5860. }
  5861.  
  5862. .feature-row__image {
  5863.   display: block;
  5864.   margin: 0 auto;
  5865.  
  5866.   .feature-row__image-wrapper & {
  5867.     width: 100%;
  5868.     position: absolute;
  5869.     top: 0;
  5870.   }
  5871.  
  5872.   @include media-query($small) {
  5873.     order: 1;
  5874.   }
  5875. }
  5876.  
  5877. .feature-row__text {
  5878.   padding-top: $section-spacing-small;
  5879.   padding-bottom: $section-spacing-small;
  5880.  
  5881.   @include media-query($small) {
  5882.     order: 2;
  5883.     padding-bottom: 0; // always last element on mobile
  5884.   }
  5885. }
  5886.  
  5887. @include media-query($medium-up) {
  5888.   .feature-row__text--left {
  5889.     padding-left: $section-spacing-small;
  5890.   }
  5891.  
  5892.   .feature-row__text--right {
  5893.     padding-right: $section-spacing-small;
  5894.   }
  5895. }
  5896.  
  5897. @include media-query($medium-up) {
  5898.   .featured-row__subtext {
  5899.     font-size: em($font-size-base + 2);
  5900.   }
  5901. }
  5902.  
  5903. .hero {
  5904.   position: relative;
  5905.   height: 475px;
  5906.   display: table;
  5907.   width: 100%;
  5908.   background: {
  5909.     size: cover;
  5910.     repeat: no-repeat;
  5911.     position: 50% 50%;
  5912.   }
  5913. }
  5914.  
  5915. .hero--adapt,
  5916. .hero-fixed-width__image {
  5917.   max-height: 100vh;
  5918.  
  5919.   @include media-query($medium-up) {
  5920.     max-height: 80vh;
  5921.   }
  5922. }
  5923.  
  5924. .hero--x-small {
  5925.   height: 94px;
  5926. }
  5927.  
  5928. .hero--small {
  5929.   height: 225px;
  5930. }
  5931.  
  5932. .hero--medium {
  5933.   height: 357px;
  5934. }
  5935.  
  5936. .hero--large {
  5937.   height: 488px;
  5938. }
  5939.  
  5940. .hero--x-large {
  5941.   height: 582px;
  5942. }
  5943.  
  5944. @include media-query($medium-up) {
  5945.   .hero--x-small {
  5946.     height: 125px;
  5947.   }
  5948.  
  5949.   .hero--small {
  5950.     height: 300px;
  5951.   }
  5952.  
  5953.   .hero--medium {
  5954.     height: 475px;
  5955.   }
  5956.  
  5957.   .hero--large {
  5958.     height: 650px;
  5959.   }
  5960.  
  5961.   .hero--x-large {
  5962.     height: 775px;
  5963.   }
  5964. }
  5965.  
  5966. .hero__overlay {
  5967.   @include overlay(1);
  5968. }
  5969.  
  5970. .hero__inner {
  5971.   position: relative;
  5972.   display: table-cell;
  5973.   vertical-align: middle;
  5974.   padding: $section-spacing 0;
  5975.   z-index: 2;
  5976. }
  5977.  
  5978. .hero__btn {
  5979.   margin-top: $section-spacing / 2;
  5980. }
  5981.  
  5982. /*================ Fixed width ================*/
  5983. .hero-fixed-width {
  5984.   position: relative;
  5985.   @include overlay(1);
  5986. }
  5987.  
  5988. .hero-fixed-width__content {
  5989.   position: absolute;
  5990.   top: 50%;
  5991.   left: 0;
  5992.   right: 0;
  5993.   z-index: 2;
  5994.   @include transform(translateY(-50%));
  5995. }
  5996.  
  5997. .hero-fixed-width__image {
  5998.   width: 100%;
  5999.   height: 100%;
  6000.   max-width: 100%;
  6001.   margin: 0 auto;
  6002.   display: block;
  6003.   object-fit: cover;
  6004.   // Used for the IE lazysizes object-fit polyfill
  6005.   font-family: "object-fit: cover";
  6006.   overflow: hidden;
  6007. }
  6008.  
  6009. /*================ Quote slider ================*/
  6010. .quote-icon {
  6011.   display: block;
  6012.   margin: 0 auto 20px;
  6013. }
  6014.  
  6015. // Text styles
  6016. .quotes-slider__text {
  6017.   font-size: em($font-size-base + 1.75);
  6018.   font-weight: $font-weight-body;
  6019.   font-style: $font-style-body;
  6020.   padding: 0 ($grid-gutter / 2);
  6021.  
  6022.   cite {
  6023.     font-size: em($font-size-base, $font-size-base + 4);
  6024.     font-style: normal;
  6025.   }
  6026.  
  6027.   p {
  6028.     margin-bottom: $grid-gutter;
  6029.  
  6030.     + cite {
  6031.       margin-top: 0;
  6032.     }
  6033.   }
  6034. }
  6035.  
  6036. // Slick overrides
  6037. .slick-dotted.quotes-slider.slick-initialized {
  6038.   cursor: grab;
  6039.   cursor: -moz-grab;
  6040.   cursor: -webkit-grab;
  6041. }
  6042.  
  6043. // Slick dot positioning and color
  6044. .quotes-wrapper .slick-dots {
  6045.   position: relative;
  6046.   bottom: 0;
  6047.   margin-top: $section-spacing;
  6048.  
  6049.   // sass-lint:disable SelectorDepth
  6050.   li button::before {
  6051.     color: $color-text;
  6052.     opacity: 0.2;
  6053.   }
  6054. }
  6055.  
  6056. // Slick selected outline overrides
  6057. .quotes-wrapper .slick-slide[tabindex="0"] {
  6058.   outline: none;
  6059. }
  6060.  
  6061. .logo-bar {
  6062.   list-style: none;
  6063.   text-align: center;
  6064.   margin-bottom: -$section-spacing-small;
  6065. }
  6066.  
  6067. @include media-query($medium-up) {
  6068.   .logo-bar--large {
  6069.     margin-bottom: -$section-spacing;
  6070.   }
  6071. }
  6072.  
  6073. .logo-bar__item {
  6074.   display: inline-block;
  6075.   vertical-align: middle;
  6076.   max-width: 160px;
  6077.   margin: 0 ($section-spacing / 2) $section-spacing-small;
  6078. }
  6079.  
  6080. @include media-query($medium-up) {
  6081.   .logo-bar__item--large {
  6082.     margin-bottom: $section-spacing;
  6083.   }
  6084. }
  6085.  
  6086. .logo-bar__image {
  6087.   display: block;
  6088.   margin: 0 auto;
  6089. }
  6090.  
  6091. .logo-bar__link {
  6092.   display: block;
  6093. }
  6094.  
  6095. .map-section {
  6096.   position: relative;
  6097.   width: 100%;
  6098.   overflow: hidden;
  6099.   @include display-flexbox();
  6100.   @include align-items(center);
  6101.   @include flex-wrap(wrap);
  6102.   @include flex-direction(row);
  6103.  
  6104.   @include media-query($medium-up) {
  6105.     min-height: 500px;
  6106.   }
  6107. }
  6108.  
  6109. .map-section--load-error {
  6110.   height: auto;
  6111. }
  6112.  
  6113. .map-section__wrapper {
  6114.   height: 100%;
  6115.   flex-shrink: 0;
  6116.   flex-grow: 1;
  6117.   @include flex-basis(100%);
  6118.  
  6119.   @include display-flexbox();
  6120.   @include flex-wrap(wrap);
  6121.   @include flex-direction(row);
  6122. }
  6123.  
  6124. .map-section__overlay {
  6125.   position: absolute;
  6126.   top: 0;
  6127.   right: 0;
  6128.   bottom: 0;
  6129.   left: 0;
  6130.   opacity: 0;
  6131.   z-index: 2;
  6132. }
  6133.  
  6134. .map-section__error {
  6135.   position: relative;
  6136.   z-index: 3;
  6137.  
  6138.   @include media-query($medium-up) {
  6139.     position: absolute;
  6140.     margin: 0 2rem;
  6141.     top: 50%;
  6142.     @include transform(translateY(-50%));
  6143.   }
  6144. }
  6145.  
  6146. .map-section__content-wrapper {
  6147.   position: relative;
  6148.   text-align: center;
  6149.   height: 100%;
  6150.   @include display-flexbox();
  6151.   @include flex-basis(100%);
  6152.   flex-grow: 0;
  6153.  
  6154.   @include media-query($medium) {
  6155.     @include flex-basis(50%);
  6156.   }
  6157.  
  6158.   @include media-query($large-up) {
  6159.     @include flex-basis(33%);
  6160.   }
  6161. }
  6162.  
  6163. .map-section__content {
  6164.   position: relative;
  6165.   display: inline-block;
  6166.   background-color: $color-bg-alt;
  6167.   padding: $section-spacing-small;
  6168.   width: 100%;
  6169.   text-align: center;
  6170.   z-index: 3;
  6171.   @include display-flexbox();
  6172.   @include align-items(center);
  6173.   @include flex-wrap(wrap);
  6174.   @include align-content(center);
  6175.  
  6176.   // Make sure every children is on one line
  6177.   & > * {
  6178.     width: 100%;
  6179.   }
  6180.  
  6181.   @include media-query($medium-up) {
  6182.     background-color: $color-bg;
  6183.     margin: $gutter-site 0;
  6184.     min-height: 300px;
  6185.   }
  6186.  
  6187.   .map-section--load-error & {
  6188.     position: static;
  6189.     transform: translateY(0);
  6190.   }
  6191. }
  6192.  
  6193. .map-section__link {
  6194.   display: block;
  6195.   position: absolute;
  6196.   top: 0;
  6197.   left: 50%;
  6198.   max-width: none;
  6199.   width: 100%;
  6200.   height: 100%;
  6201.   z-index: 2;
  6202.   @include transform(translateX(-50%));
  6203. }
  6204.  
  6205. // Optically center map in visible area with
  6206. // extended height/widths and negative margins
  6207. .map-section__container {
  6208.   max-width: none;
  6209.   width: 100%;
  6210.   height: 55vh;
  6211.   left: 0;
  6212.  
  6213.   @include media-query($medium-up) {
  6214.     position: absolute;
  6215.     height: 100%;
  6216.     top: 0;
  6217.     // map is centered on resize, larger widths allow pin to be off-center
  6218.     width: 130%;
  6219.   }
  6220. }
  6221.  
  6222. .map_section__directions-btn {
  6223.   [class^="icon"] {
  6224.     height: 1em;
  6225.   }
  6226.  
  6227.   * {
  6228.     vertical-align: middle;
  6229.   }
  6230. }
  6231.  
  6232. .map-section__background-wrapper {
  6233.   overflow: hidden;
  6234.   position: relative;
  6235.   @include flex-basis(100%);
  6236.  
  6237.   @include media-query($medium-up) {
  6238.     position: absolute;
  6239.     left: 0;
  6240.     top: 0;
  6241.     width: 100%;
  6242.     height: 100%;
  6243.   }
  6244.  
  6245.   .map-section--onboarding & {
  6246.     min-height: 55vh;
  6247.   }
  6248. }
  6249.  
  6250. .map-section__image {
  6251.   height: 100%;
  6252.   position:relative;
  6253.   top: 0;
  6254.   left: 0;
  6255.   width: 100%;
  6256.   background-size: cover;
  6257.   background-position: center;
  6258.  
  6259.   @include media-query($medium-up) {
  6260.     position: absolute;
  6261.   }
  6262.  
  6263.   // Only show the background image if map fails to load
  6264.   .map-section--display-map & {
  6265.     display: none !important;
  6266.   }
  6267.  
  6268.  .map-section--load-error & {
  6269.     display: block !important;
  6270.   }
  6271. }
  6272.  
  6273. // Hide Google maps UI
  6274. .gm-style-cc,
  6275. .gm-style-cc + div {
  6276.   visibility: hidden;
  6277. }
  6278.  
  6279. .image-bar {
  6280.   overflow: hidden;
  6281.  
  6282.   @include media-query($small) {
  6283.     max-width: 400px;
  6284.     margin: 0 auto;
  6285.   }
  6286. }
  6287.  
  6288. .image-bar__item {
  6289.   display: block;
  6290.   color: $color-overlay-title-text;
  6291.   background: {
  6292.     repeat: no-repeat;
  6293.     position: 50% 50%;
  6294.     size: cover;
  6295.   }
  6296. }
  6297.  
  6298. .image-bar__link {
  6299.   &:hover,
  6300.   &:focus {
  6301.     .image-bar__overlay::before {
  6302.       opacity: $hover-overlay-opacity;
  6303.     }
  6304.   }
  6305.  
  6306.   &:focus {
  6307.     position: relative;
  6308.     z-index: 2;
  6309.  
  6310.     .image-bar__content {
  6311.       @include default-focus-ring();
  6312.     }
  6313.   }
  6314. }
  6315.  
  6316. .image-bar__content, .image-bar__item {
  6317.   position: relative;
  6318.   width: 100%;
  6319.  
  6320.   .image-bar--x-small & {
  6321.     height: 94px;
  6322.   }
  6323.  
  6324.   .image-bar--small & {
  6325.     height: 225px;
  6326.   }
  6327.  
  6328.   .image-bar--medium & {
  6329.     height: 357px;
  6330.   }
  6331.  
  6332.   .image-bar--large & {
  6333.     height: 488px;
  6334.   }
  6335.  
  6336.   .image-bar--x-large & {
  6337.     height: 582px;
  6338.   }
  6339.  
  6340.   @include media-query($medium-up) {
  6341.     .image-bar--x-small & {
  6342.       height: 125px;
  6343.     }
  6344.  
  6345.     .image-bar--small & {
  6346.       height: 300px;
  6347.     }
  6348.  
  6349.     .image-bar--medium & {
  6350.       height: 475px;
  6351.     }
  6352.  
  6353.     .image-bar--large & {
  6354.       height: 650px;
  6355.     }
  6356.  
  6357.     .image-bar--x-large & {
  6358.       height: 775px;
  6359.     }
  6360.   }
  6361. }
  6362.  
  6363. .image-bar__overlay {
  6364.   @include overlay;
  6365. }
  6366.  
  6367. .image-bar__caption {
  6368.   position: absolute;
  6369.   top: 50%;
  6370.   @include transform(translateY(-50%));
  6371.   transition: $transition-link-hover;
  6372.   width: 100%;
  6373.   text-align: center;
  6374.   text-shadow: 0 0 4px $color-text-shadow;
  6375. }
  6376.  
  6377. .collection-grid {
  6378.   margin-bottom: -$gutter-site-mobile;
  6379.   overflow: auto;
  6380. }
  6381.  
  6382. .collection-grid-item {
  6383.   position: relative;
  6384.   width: 100%;
  6385.   padding-bottom: 100%;
  6386.   margin-bottom: $gutter-site-mobile;
  6387.  
  6388.   @include media-query($medium-up) {
  6389.     margin-bottom: $grid-gutter;
  6390.   }
  6391. }
  6392.  
  6393. .collection-grid-item__title {
  6394.   color: $color-overlay-title-text;
  6395.   position: absolute;
  6396.   text-align: center;
  6397.   width: 100%;
  6398.   top: 50%;
  6399.   padding: 0 5px;
  6400.   @include transform(translateY(-50%));
  6401.   transition: $transition-link-hover;
  6402.   text-shadow: 0 0 4px $color-text-shadow;
  6403.   hyphens: auto;
  6404.  
  6405.   @if $font-bold-titles {
  6406.     font-weight: $font-weight-header--bold;
  6407.   }
  6408.  
  6409.   @include media-query($medium-up) {
  6410.     padding: 0 15px;
  6411.   }
  6412. }
  6413.  
  6414. .collection-grid-item__link {
  6415.   position: absolute;
  6416.   top: 0;
  6417.   left: 0;
  6418.   bottom: 0;
  6419.   right: 0;
  6420.  
  6421.   &:hover,
  6422.   &:focus {
  6423.     .collection-grid-item__title-wrapper::before {
  6424.       opacity: $hover-overlay-opacity;
  6425.     }
  6426.   }
  6427.  
  6428.   &:focus {
  6429.     opacity: 1;
  6430.   }
  6431. }
  6432.  
  6433. .collection-grid-item__overlay {
  6434.   position: relative;
  6435.   display: block;
  6436.   height: 100%;
  6437.   width: 100%;
  6438.   background-size: cover;
  6439.   background-repeat: no-repeat;
  6440.   background-position: center top;
  6441.  
  6442. }
  6443.  
  6444. .collection-grid-item__title-wrapper::before {
  6445.   content: '';
  6446.   position: absolute;
  6447.   top: 0;
  6448.   right: 0;
  6449.   bottom: 0;
  6450.   left: 0;
  6451.   background-color: 0;
  6452.   opacity: 0;
  6453. }
  6454.  
  6455. .custom-content {
  6456.   @include display-flexbox;
  6457.   @include align-items(stretch);
  6458.   @include flex-wrap(wrap);
  6459.   width: auto;
  6460.   margin-bottom: -$grid-gutter;
  6461.   margin-left: -$grid-gutter;
  6462.  
  6463.   @include media-query($small) {
  6464.     margin-bottom: -$grid-gutter-mobile;
  6465.     margin-left: -$grid-gutter-mobile;
  6466.   }
  6467. }
  6468.  
  6469. .custom__item {
  6470.   @include flex(0 0 auto);
  6471.   margin-bottom: $grid-gutter;
  6472.   padding-left: $grid-gutter;
  6473.   max-width: 100%;
  6474.  
  6475.   @include media-query($small) {
  6476.     @include flex(0 0 auto);
  6477.     padding-left: $grid-gutter-mobile;
  6478.     margin-bottom: $grid-gutter-mobile;
  6479.  
  6480.     &.small--one-half {
  6481.       @include flex(1 0 50%);
  6482.       max-width: 400px;
  6483.       margin-left: auto;
  6484.       margin-right: auto;
  6485.     }
  6486.   }
  6487.  
  6488.   .collection-grid-item {
  6489.     margin-bottom: 0;
  6490.   }
  6491. }
  6492.  
  6493. .custom__item--image {
  6494.   margin: 0 auto;
  6495.   padding-left: 0;
  6496. }
  6497.  
  6498. .custom__item-inner {
  6499.   position: relative;
  6500.   display: block;
  6501.   text-align: left;
  6502.   max-width: 100%;
  6503. }
  6504.  
  6505. .custom__item-inner--video,
  6506. .custom__item-inner--collection,
  6507. .custom__item-inner--html {
  6508.   display: block;
  6509. }
  6510.  
  6511. .custom__item-inner--image {
  6512.   position: relative;
  6513.   margin: 0 auto;
  6514. }
  6515.  
  6516. .custom__image {
  6517.   width: 100%;
  6518.   display: block;
  6519.   position: absolute;
  6520.   top: 0;
  6521. }
  6522.  
  6523. /*================ Flex item alignment ================*/
  6524. .align--top-middle {
  6525.   text-align: center;
  6526. }
  6527.  
  6528. .align--top-right {
  6529.   text-align: right;
  6530. }
  6531.  
  6532. .align--middle-left {
  6533.   @include align-self(center);
  6534. }
  6535.  
  6536. .align--center {
  6537.   @include align-self(center);
  6538.   text-align: center;
  6539. }
  6540.  
  6541. .align--middle-right {
  6542.   @include align-self(center);
  6543.   text-align: right;
  6544. }
  6545.  
  6546. .align--bottom-left {
  6547.   @include align-self(flex-end);
  6548. }
  6549.  
  6550. .align--bottom-middle {
  6551.   @include align-self(flex-end);
  6552.   text-align: center;
  6553. }
  6554.  
  6555. .align--bottom-right {
  6556.   @include align-self(flex-end);
  6557.   text-align: right;
  6558. }
  6559.  
  6560. .newsletter-section {
  6561.   padding-top: $section-spacing;
  6562. }
  6563.  
  6564. .index-section--newsletter-background {
  6565.   background-color: $color-bg-alt;
  6566. }
  6567.  
  6568. .rich-text__heading--large {
  6569.   font-size: 1.4em; //24px default
  6570. }
  6571. .rich-text__heading--small {
  6572.   font-size: 0.88em; //16px default
  6573. }
  6574.  
  6575. .rich-text__text--large {
  6576.   font-size: em(floor($font-size-base * 1.15));
  6577. }
  6578. .rich-text__text--small {
  6579.   font-size: em(floor($font-size-base * 0.88));
  6580. }
  6581.  
  6582. .product-card {
  6583.   position: relative;
  6584.  
  6585.   &:hover,
  6586.   &:focus-within {
  6587.     .product-card__image-wrapper {
  6588.       opacity: 1;
  6589.     }
  6590.  
  6591.     .product-card__title {
  6592.       border-bottom-color: $color-text;
  6593.     }
  6594.   }
  6595. }
  6596.  
  6597. .product-card__title {
  6598.   border-bottom: 1px solid transparent;
  6599.   display: inline;
  6600. }
  6601.  
  6602. /*================ Currency selector ================*/
  6603. .currency-selector {
  6604.   @include media-query($small) {
  6605.     @include display-flexbox();
  6606.     @include align-items(center);
  6607.     background-color: transparentize($color-body-text, 0.90);
  6608.     padding: 12px 17px 12px 30px;
  6609.   }
  6610. }
  6611.  
  6612. .currency-selector__label {
  6613.   font-size: em(12);
  6614.   margin-bottom: 0;
  6615.   text-transform: uppercase;
  6616. }
  6617.  
  6618. .currency-selector__input-wrapper {
  6619.   margin-top: 4px;
  6620.  
  6621.   @include media-query($small) {
  6622.     margin-top: 0;
  6623.     width: 100%;
  6624.   }
  6625.  
  6626.   .icon {
  6627.     left: auto;
  6628.     height: 10px;
  6629.     margin: 0;
  6630.     width: 12px;
  6631.  
  6632.     @include media-query($medium-up) {
  6633.       height: calc(8em / 16);
  6634.       right: 5px;
  6635.       width: calc(8em / 16);
  6636.     }
  6637.   }
  6638. }
  6639.  
  6640. .currency-selector__dropdown {
  6641.   border: none;
  6642.   color: $color-text;
  6643.   padding-left: 8px;
  6644.   padding-right: 17px;
  6645.  
  6646.   @include media-query($small) {
  6647.     font-size: em(12);
  6648.     font-weight: $font-weight-body--bold;
  6649.     width: 100%;
  6650.   }
  6651. }
  6652.  
  6653. $video-height-small: 475px;
  6654. $video-height-medium: 650px;
  6655. $video-height-large: 775px;
  6656.  
  6657. $z-index-video-image: 1;
  6658. $z-index-video: 2;
  6659. $z-index-video-text: 3;
  6660. $z-index-video-controls: 4;
  6661. $z-index-video-loader: 5;
  6662.  
  6663. $video-button-wrapper-size: 50px;
  6664. $video-pause-button-size: 34px;
  6665. $video-close-button-size: 30px;
  6666. $video-loader-size: 2.875rem;
  6667.  
  6668. $color-video-controls: #fff;
  6669. $color-video-controls-background: #000;
  6670.  
  6671. $ease-transition: cubic-bezier(0.44, 0.13, 0.48, 0.87);
  6672. $transition-controls-video: color 0.2s $ease-transition, background-color 0.2s $ease-transition;
  6673.  
  6674. [data-section-type="video-section"] {
  6675.   margin: 0 auto;
  6676.  
  6677.   @include media-query($small) {
  6678.     transition: width 0.6s $ease-transition, height 0.6s $ease-transition, padding 0.6s $ease-transition;
  6679.   }
  6680. }
  6681.  
  6682. .video-section-wrapper {
  6683.   position: relative;
  6684.   display: flex;
  6685.   @include align-items(center);
  6686.   @include justify-content(center);
  6687.   width: 100%;
  6688.   height: 100%;
  6689.  
  6690.   @include media-query($medium-up) {
  6691.     overflow: hidden;
  6692.   }
  6693.  
  6694.   @include media-query($small) {
  6695.     overflow: visible !important;
  6696.     &.video-is-playing {
  6697.       margin: 0;
  6698.     }
  6699.  
  6700.     &.video-is-loaded {
  6701.       transition: margin 0.6s $ease-transition;
  6702.     }
  6703.   }
  6704. }
  6705.  
  6706. .video-section-wrapper--small.video-section-wrapper--min-height {
  6707.   min-height: $video-height-small - 300;
  6708.  
  6709.   @include media-query($medium-up) {
  6710.     min-height: $video-height-small;
  6711.   }
  6712. }
  6713. .video-section-wrapper--medium.video-section-wrapper--min-height {
  6714.   min-height: $video-height-medium - 380;
  6715.  
  6716.   @include media-query($medium-up) {
  6717.     min-height: $video-height-medium;
  6718.   }
  6719. }
  6720.  
  6721. .video-section-wrapper--large.video-section-wrapper--min-height {
  6722.   min-height: $video-height-large - 400;
  6723.  
  6724.   @include media-query($medium-up) {
  6725.     min-height: $video-height-large;
  6726.   }
  6727. }
  6728.  
  6729. .video-background-wrapper--no-overlay {
  6730.   background-color: rgba($color-image-overlay, 0.2);
  6731. }
  6732.  
  6733. /*================ Video text ================*/
  6734. .video__text-content {
  6735.   text-align: center;
  6736.   position: relative;
  6737.   width: 100%;
  6738.   top: 20px;
  6739.   opacity: 1;
  6740.   transition: all 0.6s $ease-transition;
  6741.   transition-delay: 0.3s;
  6742.   z-index: $z-index-video-text;
  6743.   padding: 40px 0;
  6744.  
  6745.   .video-is-playing & {
  6746.     display: none;
  6747.   }
  6748.  
  6749.   .video-is-loaded &,
  6750.   .no-js & {
  6751.     @include transform(translateY(-20px));
  6752.   }
  6753.  
  6754.   .video-is-loaded &,
  6755.   .no-js & {
  6756.     &::after {
  6757.       opacity: 0;
  6758.       visibility: hidden;
  6759.       content: none;
  6760.     }
  6761.   }
  6762. }
  6763.  
  6764. .video__title {
  6765.   color: $color-overlay-title-text;
  6766.  
  6767.   .video-is-paused & {
  6768.     display: none;
  6769.   }
  6770. }
  6771.  
  6772. /*================ Video styles ================*/
  6773. .video {
  6774.   display: none;
  6775.   position: absolute;
  6776.   left: 0;
  6777.   top: 0;
  6778.   z-index: $z-index-video;
  6779. }
  6780.  
  6781. .video--background {
  6782.   position: absolute;
  6783.   visibility: hidden;
  6784.   opacity: 0;
  6785.   transition: all 0.2s ease-in;
  6786. }
  6787.  
  6788. .autoplay .video-is-loaded .video--background {
  6789.   display: block;
  6790.   visibility: visible;
  6791.   opacity: 1;
  6792. }
  6793.  
  6794. .video--image_with_play {
  6795.   display: none;
  6796.   opacity: 0;
  6797.   visibility: none;
  6798.   width: 100%;
  6799.   height: 100%;
  6800.   transition: all 0.2s ease-in;
  6801.  
  6802.   .video-is-playing &,
  6803.   .video-is-paused & {
  6804.     display: block;
  6805.     visibility: visible;
  6806.     opacity: 1;
  6807.   }
  6808. }
  6809.  
  6810. /*================ Video control buttons ================*/
  6811. .video-control {
  6812.   display: none;
  6813.   visibility: hidden;
  6814.   opacity: 0;
  6815.   position: absolute;
  6816.   z-index: $z-index-video-controls;
  6817.   transition: all 0.1s ease-out;
  6818. }
  6819.  
  6820. .video-control__play-wrapper {
  6821.   display: none;
  6822.   height: $video-button-wrapper-size;
  6823.  
  6824.   @include media-query($medium-up) {
  6825.     display: block;
  6826.   }
  6827. }
  6828.  
  6829. .video-control__play-wrapper-mobile {
  6830.   display: block;
  6831.   height: $video-button-wrapper-size;
  6832.   position: absolute;
  6833.   top: calc(100% - 50px / 2);
  6834.   left: calc(50% - 50px / 2);
  6835.  
  6836.   @include media-query($medium-up) {
  6837.     display: none;
  6838.   }
  6839. }
  6840.  
  6841. .video-control__play-wrapper--with-text {
  6842.   margin-top: $grid-gutter;
  6843. }
  6844.  
  6845. .video-control__play {
  6846.   display: flex;
  6847.   justify-content: center;
  6848.   visibility: visible;
  6849.   opacity: 1;
  6850.   width: $video-button-wrapper-size;
  6851.   height: $video-button-wrapper-size;
  6852.   border-radius: $video-button-wrapper-size / 2;
  6853.   position: relative;
  6854.   margin: 0 auto;
  6855.   padding: 5px;
  6856.   pointer-events: none;
  6857.  
  6858.   .video-background-wrapper & {
  6859.     top: 50%;
  6860.     @include transform(translateY(-50%));
  6861.   }
  6862.  
  6863.   .icon {
  6864.     opacity: 0.5;
  6865.   }
  6866.  
  6867.   .video-is-loaded & {
  6868.     pointer-events: auto;
  6869.  
  6870.     .icon {
  6871.       opacity: 1;
  6872.     }
  6873.   }
  6874.  
  6875.   .video-is-playing & {
  6876.     display: none;
  6877.     visibility: hidden;
  6878.     opacity: 0;
  6879.   }
  6880. }
  6881.  
  6882. // Video loader shown when initializing
  6883. .video-control__play::before {
  6884.   content: '';
  6885.   display: block;
  6886.   width: $video-loader-size;
  6887.   height: $video-loader-size;
  6888.   position: absolute;
  6889.   margin-left: - $video-loader-size / 2;
  6890.   border-radius: 50%;
  6891.   border: 2px solid white;
  6892.   border-top-color: transparent;
  6893.   @include animation(spin 0.65s infinite linear);
  6894.   transition: all 0.1s ease-out 0.5s;
  6895.   z-index: $z-index-video-loader;
  6896.   top: 1px;
  6897.   left: 50%;
  6898.   opacity: 0.5;
  6899.  
  6900.   .video-is-loaded &,
  6901.   .video-is-playing &,
  6902.   .video-is-paused & {
  6903.     content: none;
  6904.     display: none;
  6905.   }
  6906. }
  6907.  
  6908. .video-control__close-wrapper {
  6909.   width: $video-button-wrapper-size;
  6910.   height: $video-button-wrapper-size;
  6911.   position: absolute;
  6912.   top: 0;
  6913.   right: 0;
  6914.   outline: none;
  6915.   z-index: 3;
  6916. }
  6917.  
  6918. .video-control__close {
  6919.   position: relative;
  6920.   width: $video-close-button-size;
  6921.   height: $video-close-button-size;
  6922.   margin: 0 auto;
  6923.   font-size: 14px;
  6924.   line-height: 27px;
  6925.   border-radius: $video-close-button-size / 2;
  6926.   background-color: $color-video-controls;
  6927.   color: $color-video-controls-background;
  6928.  
  6929.   .video-control__close-wrapper:hover &,
  6930.   .video-control__close-wrapper:focus & {
  6931.     outline: auto 5px -webkit-focus-ring-color;
  6932.     opacity: 0.7;
  6933.   }
  6934.  
  6935.   .video-is-playing &,
  6936.   .video-is-paused & {
  6937.     display: inline-block;
  6938.     visibility: visible;
  6939.     opacity: 1;
  6940.   }
  6941.  
  6942.   .icon {
  6943.     display: inline-block;
  6944.     width: 14px;
  6945.     height: 14px;
  6946.     margin: 0 auto;
  6947.   }
  6948. }
  6949.  
  6950. .video__pause {
  6951.   position: absolute;
  6952.   top: 0;
  6953.   right: 0;
  6954.   z-index: $z-index-video-text;
  6955.   width: $video-button-wrapper-size;
  6956.   height: $video-button-wrapper-size;
  6957.   padding: 0;
  6958.   border: none;
  6959.   background-color: transparent;
  6960.   transition: $transition-controls-video;
  6961.  
  6962.   @include media-query($small) {
  6963.     @include visually-hidden();
  6964.   }
  6965.  
  6966.   .video-is-playing & {
  6967.     display: none;
  6968.   }
  6969.  
  6970.   .icon {
  6971.     position: relative;
  6972.     color: rgba($color-video-controls, 0.5);
  6973.     transition: $transition-controls-video;
  6974.   }
  6975.  
  6976.   &:hover,
  6977.   &:focus {
  6978.     outline: none;
  6979.     .icon {
  6980.       color: $color-video-controls;
  6981.     }
  6982.   }
  6983.  
  6984.   .icon-pause {
  6985.     width: 12px;
  6986.     height: 12px;
  6987.     top: 11px;
  6988.   }
  6989.  
  6990.   .icon-play {
  6991.     width: 16px;
  6992.     height: 16px;
  6993.     top: 9px;
  6994.   }
  6995. }
  6996.  
  6997. .video__pause-resume,
  6998. .video__pause-stop {
  6999.   height: $video-pause-button-size;
  7000.   width: $video-pause-button-size;
  7001.   margin: 0 auto;
  7002.   justify-content: center;
  7003.   background-color: rgba($color-video-controls-background, 0.4);
  7004.  
  7005.   .video__pause:hover &,
  7006.   .video__pause:focus & {
  7007.     background-color: rgba($color-video-controls-background, 0.75);
  7008.   }
  7009.  
  7010.   .video__pause:focus & {
  7011.     outline: auto 5px -webkit-focus-ring-color;
  7012.   }
  7013. }
  7014.  
  7015. .video__pause-stop {
  7016.   display: flex;
  7017.  
  7018.   .is-paused & {
  7019.     display: none;
  7020.   }
  7021. }
  7022.  
  7023. .video__pause-resume {
  7024.   display: none;
  7025.  
  7026.   .is-paused & {
  7027.     display: flex;
  7028.   }
  7029. }
  7030.  
  7031. /*================ Overlay ================*/
  7032. .video__overlay {
  7033.   @include overlay(3);
  7034. }
  7035.  
  7036. .video-is-playing .video__overlay {
  7037.   opacity: 0;
  7038.  
  7039.   &:before {
  7040.     content: none;
  7041.   }
  7042. }
  7043.  
  7044. /*================ Fallback images ================*/
  7045. .video__image {
  7046.   transition: opacity 0.8s $ease-transition;
  7047.   position: absolute;
  7048.   top: 0;
  7049.   left: 0;
  7050.   opacity: 1;
  7051.   height: 100%;
  7052.   width: 100%;
  7053.   background-repeat: no-repeat;
  7054.   background-size: cover;
  7055.   background-position: top center;
  7056.   z-index: $z-index-video-image;
  7057.  
  7058.   .video-background-wrapper & {
  7059.     @include media-query($medium-up) {
  7060.       opacity: 0;
  7061.     }
  7062.   }
  7063.  
  7064.   .no-autoplay & {
  7065.     opacity: 1;
  7066.   }
  7067. }
  7068.  
  7069.  
  7070. .price-item--sale {
  7071.   font-size: 25px;
  7072.   font-weight: bold;
  7073. }
  7074.  
  7075.  
  7076.   .price-item--regular {
  7077.     font-size: 25px;
  7078.   }
  7079.  
  7080. .announcement-bar__message{ font-size: 14px}
  7081.  
  7082.  
  7083. header.site-header {
  7084.   background-color: #005786;
  7085. }
  7086.  
  7087. .site-header__mobile-nav {
  7088.   background-color: #005786 !important;
  7089. }
  7090.  
  7091. footer.site-footer {
  7092.    background-color: #005786;
  7093. }
  7094.  
  7095. footer.site-footer a {
  7096.     color: #ffff;
  7097. }
  7098.  
  7099. div#shopify-section-header-shopify-section {
  7100.   background-color: #005786;
  7101. }
  7102.  
  7103.  
  7104. /*===== Change header and nav item color - Feb 5, 2018 ======*/
  7105. header.site-header h1,
  7106. header.site-header nav li a {
  7107.   color: #FFFFFF;
  7108. }
  7109.  
  7110. span.price-item__label {
  7111.     font-weight: bold;
  7112.     font-size: 25px;
  7113. }
  7114.  
  7115. #AddToCart-product-template {
  7116.   font-size: 19px;
  7117. }
  7118.  
  7119. .collection-grid-item__title { display: none; }
  7120.  
  7121. @media only screen and (max-width: 767px) {
  7122.    #MobileNav li .mobile-nav__link{color: #005786 !important;}
  7123. }
  7124.  
  7125. li.trusttext {
  7126.   list-style-type: disc;
  7127.   color: black;  
  7128.  
  7129. }
  7130.  
  7131. span.truststyle {
  7132.   color: #00A154;
  7133.   font-weight: bold;
  7134. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top