iXT2FC8n

1@charset "UTF-8";
2
3/*
4  Motion, by Archetype Themes
5  http://archetypethemes.co
6*/
7
8/*============================================================================
9  #Sass Mixins
10==============================================================================*/
11
12.clearfix {
13  &:after {
14    content: '';
15    display: table;
16    clear: both;
17  }
18}
19
20@mixin clearfix() {
21  &::after {
22    content: '';
23    display: table;
24    clear: both;
25  }
26}
27
28/*================ Media Query Mixin ================*/
29
30@mixin media-query($media-query) {
31  @each $breakpoint in $grid-breakpoints {
32    $name: nth($breakpoint, 1);
33    $declaration: nth($breakpoint, 2);
34
35    @if $media-query == $name and $declaration {
36      @media only screen and #{$declaration} {
37        @content;
38      }
39    }
40  }
41}
42
43/*================ Responsive Show/Hide Helper ================*/
44
45@mixin responsive-display-helper($grid-breakpoint-type: '') {
46  .#{$grid-breakpoint-type}show {
47    display: block !important;
48  }
49
50  .#{$grid-breakpoint-type}hide {
51    display: none !important;
52  }
53}
54
55/*================ Responsive Text Alignment Helper ================*/
56
57@mixin responsive-text-align-helper($grid-breakpoint-type: '') {
58  .#{$grid-breakpoint-type}text-left {
59    text-align: left !important;
60  }
61
62  .#{$grid-breakpoint-type}text-right {
63    text-align: right !important;
64  }
65
66  .#{$grid-breakpoint-type}text-center {
67    text-align: center !important;
68  }
69}
70
71/*================ Animation related mixins ================*/
72
73@mixin keyframes($name) {
74  @keyframes #{$name} {
75    @content;
76  }
77}
78
79@function cart-animation-iteration($i: 1, $base: 0.1s) {
80  $additional: 0.06 * $i;
81  @if $i == 1 {
82    $additional: 0;
83  }
84  @return $base + $additional;
85}
86
87/*================ Functions ================*/
88
89@function em($target, $context: $type_base_size) {
90  @if $target == 0 {
91    @return 0;
92  }
93  @return $target / $context + 0em;
94}
95
96@function color-control($color, $opacity) {
97  @if (lightness( $color ) > 60) {
98    @return rgba(0,0,0,$opacity);
99  }
100  @else {
101    @return rgba(255,255,255,$opacity);
102  }
103}
104
105@function adaptive-color($color, $percentage) {
106  @if (lightness( $color ) > 40) {
107    @return darken($color, $percentage);
108  }
109  @else {
110    @return lighten($color, $percentage);
111  }
112}
113
114//Font Stack Mixins
115
116@mixin baseFontStack {
117  font-family: $type_base_stack;
118  letter-spacing: $type_base_spacing;
119  line-height: $type_base_line_height;
120}
121
122@mixin headerFontStack {
123  font-family: $type_header_stack;
124  font-weight: $type_header_weight;
125  letter-spacing: $type_header_spacing;
126  line-height: $type_header_line_height;
127}
128
129@mixin baseAccentFontStack {
130  @include baseFontStack;
131  @if $type_base_accent_transform {
132    text-transform: uppercase;
133    letter-spacing: 0.2em;
134  }
135}
136
137@mixin headerAccentFontStack {
138  @include headerFontStack;
139  @if $type_header_accent_transform {
140    text-transform: uppercase;
141    letter-spacing: 0.2em;
142  }
143}
144
145@mixin visuallyHidden {
146  clip: rect(0 0 0 0);
147  clip: rect(0, 0, 0, 0);
148  overflow: hidden;
149  position: absolute;
150  height: 1px;
151  width: 1px;
152}
153
154/*================ Animations and keyframes ================*/
155
156@include keyframes(spin) {
157  0% {
158    transform: rotate(0deg);
159  }
160
161  100% {
162    transform: rotate(360deg);
163  }
164}
165
166@include keyframes(fadeIn) {
167  0%, 35% {
168    opacity: 0;
169  }
170  100% {
171    opacity: 1;
172  }
173}
174
175@include keyframes(heroContentIn) {
176  0%, 35% {
177    opacity: 0;
178    transform: translateY(8px);
179  }
180  60% {
181    opacity: 1;
182  }
183  100% {
184    transform: translateY(0);
185  }
186}
187
188/*================ Overlay ================*/
189
190@mixin overlay($z-index: null) {
191  content: '';
192  position: absolute;
193  top: 0;
194  right: 0;
195  bottom: 0;
196  left: 0;
197
198  @if ($z-index) {
199    z-index: $z-index;
200  }
201}
202
203@mixin heroScrim() {
204  background: linear-gradient(to bottom, rgba($colorImage2, $colorImage2Opacity) 0%, rgba($colorImage2, $colorImage2Opacity) 40%, rgba($colorImage1, $colorImage1Opacity) 100%);
205}
206
207@mixin partialScrim() {
208  background: linear-gradient(to bottom, rgba($colorImage2, $colorImage2Opacity) 30%, rgba($colorImage1, $colorImage1Opacity) 100%);
209}
210
211// General size variables
212
213$gutter: 40px;
214
215$page-width: 1300px;
216
217$input-radius: 0;
218
219$page-width-gutter-small: 20px;
220
221$page-width-gutter-large: $gutter;
222
223$grid-gutter: 30px;
224
225$grid-gutter-small: 22px;
226
227/*============================================================================
228  Grid Breakpoints and Class Names
229    - Do not change breakpoint variable names
230    - Medium breakpoint is also set in theme.js.liquid and inline
231    throughout some templates. Be weary of changing unless you know what you're doing.
232==============================================================================*/
233
234$grid-medium: 590px;
235
236$grid-large: 769px;
237
238$grid-widescreen: 1050px;
239
240$small: 'small';
241
242$medium: 'medium';
243
244$medium-down: 'medium-down';
245
246$medium-up: 'medium-up';
247
248$large: 'large';
249
250$large-down: 'large-down';
251
252$large-up: 'large-up';
253
254$widescreen: 'widescreen';
255
256$grid-breakpoint-has-widths: ($small, $medium-up, $widescreen);
257
258$grid-breakpoint-has-utility: ($small, $medium-down, $medium-up, $large-up, $widescreen);
259
260$grid-breakpoint-has-push: ($medium-up);
261
262// The `$grid-breakpoints` list is used to build our media queries.
263
264// You can use these in the media-query mixin.
265
266$grid-breakpoints: (
267  $small '(max-width: #{$grid-medium - 1})',
268  $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
269  $medium-down '(max-width: #{$grid-large - 1})',
270  $medium-up '(min-width: #{$grid-medium})',
271  $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
272  $large-down '(max-width: #{$grid-widescreen - 1})',
273  $large-up '(min-width: #{$grid-large})',
274  $widescreen '(min-width: #{$grid-widescreen})'
275);
276
277/*================ Color variables ================*/
278
279// Button colors
280
281$colorBtnPrimary: {{ settings.color_button | default: '#000' }};
282
283$colorBtnPrimaryText: {{ settings.color_button_text | default: '#fff' }};
284
285$colorCartDot: {{ settings.color_cart_dot | default: '#ff4f33' }};
286
287// Text link colors
288
289$colorLink: {{ settings.color_body_text | default: '#1c1d1d' }};
290
291// Text colors
292
293$colorTextBody: {{ settings.color_body_text | default: '#1c1d1d' }};
294
295$colorSalePrice: {{ settings.color_sale_price | default: '#1c1d1d' }};
296
297$colorSaleTag: {{ settings.color_sale_tag | default: '#1c1d1d' }};
298
299// Backgrounds
300
301$colorBody: {{ settings.color_body_bg | default: '#fff' }};
302
303$colorInputBg: {{ settings.color_body_bg | default: '#1c1d1d' }};
304
305// Footer
306
307$colorFooter: {{ settings.color_footer | default: '#111' }};
308
309$colorFooterText: {{ settings.color_footer_text | default: '#fff' }};
310
311// Border colors
312
313$colorBorder: {{ settings.color_borders | default: '#1c1d1d' }};
314
315// Nav and dropdown link background
316
317$colorNav: {{ settings.color_header | default: '#fff' }};
318
319$colorNavText: {{ settings.color_header_text | default: '#000' }};
320
321$colorAnnouncement: {{ settings.color_announcement | default: '#1c1d1d' }};
322
323$colorAnnouncementText: {{ settings.color_announcement_text | default: '#fff' }};
324
325$colorStickyNavLinks: #fff;
326
327// Hero text color
328
329$colorHeroText: {{ settings.color_image_text | default: '#fff' }};
330
331// Helper colors
332
333$disabledGrey: #f6f6f6;
334
335$disabledBorder: darken($disabledGrey, 25%);
336
337$errorRed: #d02e2e;
338
339$errorRedBg: #fff6f6;
340
341$successGreen: #56ad6a;
342
343$successGreenBg: #ecfef0;
344
345// Content spacing
346
347$contentTopMargin: 70px;
348
349$contentTopMarginSmall: 40px;
350
351// Section header & collection image
352
353$sectionHeaderBottom: 50px;
354
355$sectionHeaderBottomSmall: 30px;
356
357// Slideshow colors
358
359$slideshow-text-light: #fff;
360
361$slideshow-text-dark: #000;
362
363// Modal
364
365$colorModalBg: {{ settings.color_modal_overlays | default: '#000' }};
366
367$colorModalText: #fff;
368
369// Image overlays
370
371$colorImage1: {{ settings.color_image_1 | default: '#000' }};
372
373$colorImage1Opacity: {{ settings.color_image_1_opacity | divided_by: 100.0 }};
374
375$colorImage2: {{ settings.color_image_2 | default: '#fffed9' }};
376
377$colorImage2Opacity: {{ settings.color_image_2_opacity | divided_by: 100.0 }};
378
379$colorSmallImageBg: {{ settings.color_small_image_bg | default: '#eee' }};
380
381$colorLargeImageBg: {{ settings.color_large_image_bg | default: '#1c1d1d' }};
382
383// Icon sizes
384
385$desktopMenuIconSize: 30px;
386
387$desktopMenuChevronSize: 10px;
388
389$colorSwatchCollectionSize: 14px;
390
391$colorSwatchCollectionSizeLarge: 17px;
392
393$siteNavItemPadding: 15px;
394
395$siteNavIconPadding: 12px;
396
397// Z-index
398
399$zindexNavDropdowns: 5;
400
401$zindexDrawer: 30;
402
403$zindexDrawerOverlay: 26;
404
405$zindexModal: 25;
406
407$zindexSkipToContent: 10000;
408
409$z-index-announcement: 29;
410
411$z-index-overlay-header: 6;
412
413$z-index-stuck-header: 20;
414
415$z-index-header-search: 28;
416
417/*================ Typography ================*/
418
419// Font-face header styles
420
421$type_header_family: {{ settings.type_header_font_family.family }};
422
423$type_header_fallback: {{ settings.type_header_font_family.fallback_families }};
424
425$type_header_stack: #{"'" + $type_header_family + "', " + $type_header_fallback};
426
427$type_header_weight: {{ settings.type_header_font_family.weight }};
428
429// Non font-face header styles
430
431$type_header_line_height: {{ settings.type_header_line_height | default: 1.4 }};
432
433$type_header_accent_transform: {{ settings.type_header_accent_transform | default: false }};
434
435$type_header_text_alignment: {{ settings.type_headers_align_text | default: false }};
436
437$type_header_base_size: {{ settings.type_header_base_size | default: 32 }}px;
438
439$type_header_spacing: {{ settings.type_header_spacing | default: "25" | divided_by: 1000.00 }}em;
440
441// Font-face base styles
442
443$type_base_family: {{ settings.type_base_font_family.family }};
444
445$type_base_fallback: {{ settings.type_base_font_family.fallback_families }};
446
447$type_base_stack: #{"'" + $type_base_family + "', " + $type_base_fallback};
448
449$type_base_weight: {{ settings.type_base_font_family.weight }};
450
451// Non font-face base styles
452
453$type_base_spacing: {{ settings.type_base_spacing | default: "50" | divided_by: 1000.00 }}em;
454
455$type_base_line_height: {{ settings.type_base_line_height | default: 1.4 }};
456
457$type_base_size: {{ settings.type_base_size | default: 16 }}px;
458
459$type_base_accent_transform: {{ settings.type_base_accent_transform | default: false }};
460
461$icon_weight: {{ settings.icon_weight | default: '5px' }};
462
463$icon_linecaps: {{ settings.icon_linecaps | default: 'miter' }};
464
465/*================ Animations ================*/
466
467$animate_page_transitions: {{ settings.animate_page_transitions }};
468
469$animate_page_transition_style: {{ settings.animate_page_transition_style }};
470
471$animate_sections: {{ settings.animate_sections }};
472
473$animate_sections_background_style: {{ settings.animate_sections_background_style }};
474
475$animate_sections_text_style: {{ settings.animate_sections_text_style }};
476
477$animate_images: {{ settings.animate_images }};
478
479$animate_images_style: {{ settings.animate_images_style }};
480
481$animate_buttons: {{ settings.animate_buttons }};
482
483$animate_underlines: {{ settings.animate_underlines }};
484
485/*================ Drawers ================*/
486
487$drawerNavWidth: 300px;
488
489$drawerCartWidth: 300px;
490
491$drawerCartWidthLarge: 400px;
492
493// small-up width
494
495$drawerHeaderHeight: 70px;
496
497$drawerHeaderHeightLarge: 119px;
498
499$colorDrawers: {{ settings.color_drawer_background | default: '#1c1d1d' }};
500
501$colorDrawerBorder: {{ settings.color_drawer_border | default: '#343535' }};
502
503$colorDrawerText: {{ settings.color_drawer_text | default: '#fff' }};
504
505$colorDrawerButton: {{ settings.color_drawer_button | default: '#a26b25' }};
506
507$colorDrawerButtonText: {{ settings.color_drawer_button_text | default: '#fff' }};
508
509$fixedHeightLimit: 400px;
510
511/*================ Buttons ================*/
512
513$btnPrimaryFontSize: em(16px);
514
515$btnPrimaryFontSmall: em(14px);
516
517$btnPrimaryPadding: 9px 20px;
518
519$btnPrimaryPaddingSmall: 8px 18px;
520
521$btnSmallPadding: 6px 12px;
522
523$btnSmallPaddingSmall: 5px 11px;
524
525$btnMinHeightWhenQuickCheckout: 50px;
526
527$btnBackgroundPosition: 150% 35%;
528
529$btnSmallBackgroundPosition: 150% 45%;
530
531/*================ Global | Normalize ================*/
532
533*, input, :before, :after {
534  box-sizing: border-box;
535}
536
537html, body {
538  padding: 0;
539  margin: 0;
540}
541
542article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
543  display: block;
544}
545
546audio, canvas, progress, video {
547  display: inline-block;
548  vertical-align: baseline;
549}
550
551input[type="number"]::-webkit-inner-spin-button,
552input[type="number"]::-webkit-outer-spin-button {
553  height: auto;
554}
555
556input[type="search"]::-webkit-search-cancel-button,
557input[type="search"]::-webkit-search-decoration {
558  -webkit-appearance: none;
559}
560
561.grid {
562  @include clearfix();
563  list-style: none;
564  margin: 0;
565  padding: 0;
566  margin-left: -$grid-gutter;
567
568  @include media-query($small) {
569    margin-left: -$grid-gutter-small;
570  }
571}
572
573.grid--small {
574  margin-left: -10px;
575
576  .grid__item {
577    padding-left: 10px;
578  }
579}
580
581.grid__item {
582  float: left;
583  padding-left: $grid-gutter;
584  width: 100%;
585  min-height: 1px;
586
587  @include media-query($small) {
588    padding-left: $grid-gutter-small;
589  }
590
591  &[class*="--push"] {
592    position: relative;
593  }
594}
595
596.grid--no-gutters {
597  margin-left: 0;
598
599  .grid__item {
600    padding-left: 0;
601  }
602}
603
604.grid--small-gutters {
605  margin-left: -10px;
606  margin-bottom: -10px;
607
608  .grid__item {
609    padding-left: 10px;
610    padding-bottom: 10px;
611  }
612}
613
614.grid--flush-bottom {
615  margin-bottom: -$grid-gutter;
616  overflow: auto;
617
618  > .grid__item {
619    margin-bottom: $grid-gutter;
620  }
621}
622
623/*============================================================================
624  Gutterless grids have all the properties of regular grids, minus any spacing.
625==============================================================================*/
626
627.grid--full {
628  margin-left: 0;
629
630  > .grid__item {
631    padding-left: 0;
632  }
633}
634
635@include media-query($medium-up) {
636  .grid--table-large {
637    display: table;
638    width: 100%;
639    table-layout: fixed;
640
641    > .grid__item {
642      display: table-cell;
643      vertical-align: middle;
644      float: none;
645    }
646  }
647}
648
649/*============================================================================
650  Grid Columns
651    - Create width classes, prepended by the breakpoint name.
652==============================================================================*/
653
654@mixin grid-column-generator($grid-breakpoint-type: '') {
655  /* Whole */
656  .#{$grid-breakpoint-type}one-whole { width: 100%; }
657
658  /* Halves */
659  .#{$grid-breakpoint-type}one-half { width: percentage(1 / 2); }
660
661  /* Thirds */
662  .#{$grid-breakpoint-type}one-third { width: percentage(1 / 3); }
663  .#{$grid-breakpoint-type}two-thirds { width: percentage(2 / 3); }
664
665  /* Quarters */
666  .#{$grid-breakpoint-type}one-quarter { width: percentage(1 / 4); }
667  .#{$grid-breakpoint-type}two-quarters { width: percentage(2 / 4); }
668  .#{$grid-breakpoint-type}three-quarters { width: percentage(3 / 4); }
669
670  /* Fifths */
671  .#{$grid-breakpoint-type}one-fifth { width: percentage(1 / 5); }
672  .#{$grid-breakpoint-type}two-fifths { width: percentage(2 / 5); }
673  .#{$grid-breakpoint-type}three-fifths { width: percentage(3 / 5); }
674  .#{$grid-breakpoint-type}four-fifths { width: percentage(4 / 5); }
675
676  /* Sixths */
677  .#{$grid-breakpoint-type}one-sixth { width: percentage(1 / 6); }
678  .#{$grid-breakpoint-type}two-sixths { width: percentage(2 / 6); }
679  .#{$grid-breakpoint-type}three-sixths { width: percentage(3 / 6); }
680  .#{$grid-breakpoint-type}four-sixths { width: percentage(4 / 6); }
681  .#{$grid-breakpoint-type}five-sixths { width: percentage(5 / 6); }
682
683  /* Eighths */
684  .#{$grid-breakpoint-type}one-eighth { width: percentage(1 / 8); }
685  .#{$grid-breakpoint-type}two-eighths { width: percentage(2 / 8); }
686  .#{$grid-breakpoint-type}three-eighths { width: percentage(3 / 8); }
687  .#{$grid-breakpoint-type}four-eighths { width: percentage(4 / 8); }
688  .#{$grid-breakpoint-type}five-eighths { width: percentage(5 / 8); }
689  .#{$grid-breakpoint-type}six-eighths { width: percentage(6 / 8); }
690  .#{$grid-breakpoint-type}seven-eighths { width: percentage(7 / 8); }
691
692  /* Tenths */
693  .#{$grid-breakpoint-type}one-tenth { width: percentage(1 / 10); }
694  .#{$grid-breakpoint-type}two-tenths { width: percentage(2 / 10); }
695  .#{$grid-breakpoint-type}three-tenths { width: percentage(3 / 10); }
696  .#{$grid-breakpoint-type}four-tenths { width: percentage(4 / 10); }
697  .#{$grid-breakpoint-type}five-tenths { width: percentage(5 / 10); }
698  .#{$grid-breakpoint-type}six-tenths { width: percentage(6 / 10); }
699  .#{$grid-breakpoint-type}seven-tenths { width: percentage(7 / 10); }
700  .#{$grid-breakpoint-type}eight-tenths { width: percentage(8 / 10); }
701  .#{$grid-breakpoint-type}nine-tenths { width: percentage(9 / 10); }
702
703  /* Twelfths */
704  .#{$grid-breakpoint-type}one-twelfth { width: percentage(1 / 12); }
705  .#{$grid-breakpoint-type}two-twelfths { width: percentage(2 / 12); }
706  .#{$grid-breakpoint-type}three-twelfths { width: percentage(3 / 12); }
707  .#{$grid-breakpoint-type}four-twelfths { width: percentage(4 / 12); }
708  .#{$grid-breakpoint-type}five-twelfths { width: percentage(5 / 12); }
709  .#{$grid-breakpoint-type}six-twelfths { width: percentage(6 / 12); }
710  .#{$grid-breakpoint-type}seven-twelfths { width: percentage(7 / 12); }
711  .#{$grid-breakpoint-type}eight-twelfths { width: percentage(8 / 12); }
712  .#{$grid-breakpoint-type}nine-twelfths { width: percentage(9 / 12); }
713  .#{$grid-breakpoint-type}ten-twelfths { width: percentage(10 / 12); }
714  .#{$grid-breakpoint-type}eleven-twelfths { width: percentage(11 / 12); }
715}
716
717/*================ Grid push classes ================*/
718
719@mixin grid-push-generator($grid-breakpoint-type: '') {
720  /* Halves */
721  .#{$grid-breakpoint-type}push-one-half { left: percentage(1 / 2); }
722
723  /* Thirds */
724  .#{$grid-breakpoint-type}push-one-third { left: percentage(1 / 3); }
725  .#{$grid-breakpoint-type}push-two-thirds { left: percentage(2 / 3); }
726
727  /* Quarters */
728  .#{$grid-breakpoint-type}push-one-quarter { left: percentage(1 / 4); }
729  .#{$grid-breakpoint-type}push-two-quarters { left: percentage(2 / 4); }
730  .#{$grid-breakpoint-type}push-three-quarters { left: percentage(3 / 4); }
731
732  /* Fifths */
733  .#{$grid-breakpoint-type}push-one-fifth { left: percentage(1 / 5); }
734  .#{$grid-breakpoint-type}push-two-fifths { left: percentage(2 / 5); }
735  .#{$grid-breakpoint-type}push-three-fifths { left: percentage(3 / 5); }
736  .#{$grid-breakpoint-type}push-four-fifths { left: percentage(4 / 5); }
737
738  /* Sixths */
739  .#{$grid-breakpoint-type}push-one-sixth { left: percentage(1 / 6); }
740  .#{$grid-breakpoint-type}push-two-sixths { left: percentage(2 / 6); }
741  .#{$grid-breakpoint-type}push-three-sixths { left: percentage(3 / 6); }
742  .#{$grid-breakpoint-type}push-four-sixths { left: percentage(4 / 6); }
743  .#{$grid-breakpoint-type}push-five-sixths { left: percentage(5 / 6); }
744
745  /* Eighths */
746  .#{$grid-breakpoint-type}push-one-eighth { left: percentage(1 / 8); }
747  .#{$grid-breakpoint-type}push-two-eighths { left: percentage(2 / 8); }
748  .#{$grid-breakpoint-type}push-three-eighths { left: percentage(3 / 8); }
749  .#{$grid-breakpoint-type}push-four-eighths { left: percentage(4 / 8); }
750  .#{$grid-breakpoint-type}push-five-eighths { left: percentage(5 / 8); }
751  .#{$grid-breakpoint-type}push-six-eighths { left: percentage(6 / 8); }
752  .#{$grid-breakpoint-type}push-seven-eighths { left: percentage(7 / 8); }
753
754  /* Tenths */
755  .#{$grid-breakpoint-type}push-one-tenth { left: percentage(1 / 10); }
756  .#{$grid-breakpoint-type}push-two-tenths { left: percentage(2 / 10); }
757  .#{$grid-breakpoint-type}push-three-tenths { left: percentage(3 / 10); }
758  .#{$grid-breakpoint-type}push-four-tenths { left: percentage(4 / 10); }
759  .#{$grid-breakpoint-type}push-five-tenths { left: percentage(5 / 10); }
760  .#{$grid-breakpoint-type}push-six-tenths { left: percentage(6 / 10); }
761  .#{$grid-breakpoint-type}push-seven-tenths { left: percentage(7 / 10); }
762  .#{$grid-breakpoint-type}push-eight-tenths { left: percentage(8 / 10); }
763  .#{$grid-breakpoint-type}push-nine-tenths { left: percentage(9 / 10); }
764
765  /* Twelfths */
766  .#{$grid-breakpoint-type}push-one-twelfth { left: percentage(1 / 12); }
767  .#{$grid-breakpoint-type}push-two-twelfths { left: percentage(2 / 12); }
768  .#{$grid-breakpoint-type}push-three-twelfths { left: percentage(3 / 12); }
769  .#{$grid-breakpoint-type}push-four-twelfths { left: percentage(4 / 12); }
770  .#{$grid-breakpoint-type}push-five-twelfths { left: percentage(5 / 12); }
771  .#{$grid-breakpoint-type}push-six-twelfths { left: percentage(6 / 12); }
772  .#{$grid-breakpoint-type}push-seven-twelfths { left: percentage(7 / 12); }
773  .#{$grid-breakpoint-type}push-eight-twelfths { left: percentage(8 / 12); }
774  .#{$grid-breakpoint-type}push-nine-twelfths { left: percentage(9 / 12); }
775  .#{$grid-breakpoint-type}push-ten-twelfths { left: percentage(10 / 12); }
776  .#{$grid-breakpoint-type}push-eleven-twelfths { left: percentage(11 / 12); }
777}
778
779/*================ Clearfix helper on uniform grids ================*/
780
781@mixin grid--uniform-clearfix($grid-breakpoint-type: '') {
782  .grid--uniform {
783    .#{$grid-breakpoint-type}one-half:nth-of-type(2n+1),
784    .#{$grid-breakpoint-type}one-third:nth-of-type(3n+1),
785    .#{$grid-breakpoint-type}one-quarter:nth-of-type(4n+1),
786    .#{$grid-breakpoint-type}one-fifth:nth-of-type(5n+1),
787    .#{$grid-breakpoint-type}one-sixth:nth-of-type(6n+1),
788    .#{$grid-breakpoint-type}two-sixths:nth-of-type(3n+1),
789    .#{$grid-breakpoint-type}three-sixths:nth-of-type(2n+1),
790    .#{$grid-breakpoint-type}one-eighth:nth-of-type(8n+1),
791    .#{$grid-breakpoint-type}two-eighths:nth-of-type(4n+1),
792    .#{$grid-breakpoint-type}four-eighths:nth-of-type(2n+1),
793    .#{$grid-breakpoint-type}five-tenths:nth-of-type(2n+1),
794    .#{$grid-breakpoint-type}one-twelfth:nth-of-type(12n+1),
795    .#{$grid-breakpoint-type}two-twelfths:nth-of-type(6n+1),
796    .#{$grid-breakpoint-type}three-twelfths:nth-of-type(4n+1),
797    .#{$grid-breakpoint-type}four-twelfths:nth-of-type(3n+1),
798    .#{$grid-breakpoint-type}six-twelfths:nth-of-type(2n+1) { clear: both; }
799  }
800}
801
802/*================ Build Base Grid Classes ================*/
803
804@include grid-column-generator();
805
806@include responsive-display-helper();
807
808@include responsive-text-align-helper();
809
810/*================ Build Responsive Grid Classes ================*/
811
812@each $breakpoint in $grid-breakpoint-has-widths {
813  @include media-query($breakpoint) {
814    @include grid-column-generator('#{$breakpoint}--');
815    @include grid--uniform-clearfix('#{$breakpoint}--');
816  }
817}
818
819@each $breakpoint in $grid-breakpoint-has-utility {
820  @include media-query($breakpoint) {
821    @include responsive-display-helper('#{$breakpoint}--');
822    @include responsive-text-align-helper('#{$breakpoint}--');
823  }
824}
825
826/*================ Build Grid Push Classes ================*/
827
828@each $breakpoint in $grid-breakpoint-has-push {
829  @include media-query($breakpoint) {
830    @include grid-push-generator('#{$breakpoint}--');
831  }
832}
833
834/*================ Partials | Helper Classes ================*/
835
836html:not(.tab-outline) *:focus {
837  outline: none;
838}
839
840.is-transitioning {
841  display: block !important;
842  visibility: visible !important;
843}
844
845.display-table {
846  display: table;
847  table-layout: fixed;
848  width: 100%;
849}
850
851.display-table-cell {
852  display: table-cell;
853  vertical-align: middle;
854  float: none;
855}
856
857@include media-query($medium-up) {
858  .medium-up--display-table {
859    display: table;
860    table-layout: fixed;
861    width: 100%;
862  }
863
864  .medium-up--display-table-cell {
865    display: table-cell;
866    vertical-align: middle;
867    float: none;
868  }
869}
870
871.visually-hidden {
872  @include visuallyHidden();
873}
874
875// Keep dimensions but hide visually
876
877.visually-invisible {
878  opacity: 0 !important;
879}
880
881/*============================================================================
882  #OOCSS Media Object
883    - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
884==============================================================================*/
885
886.media,
887.media-flex {
888  overflow: hidden;
889  _overflow: visible;
890  zoom: 1;
891}
892
893.media-img {
894  float: left;
895  margin-right: $gutter;
896}
897
898.media-img-right {
899  float: right;
900  margin-left: $gutter;
901}
902
903.media-img img,
904.media-img-right img {
905  display: block;
906}
907
908/*============================================================================
909  Skip to content button
910    - Overrides .visually-hidden when focused
911==============================================================================*/
912
913.skip-link:focus {
914  clip: auto;
915  width: auto;
916  height: auto;
917  margin: 0;
918  color: $colorTextBody;
919  background-color: $colorBody;
920  padding: 10px;
921  opacity: 1;
922  z-index: $zindexSkipToContent;
923  transition: none;
924}
925
926html {
927  -ms-touch-action: manipulation;
928      touch-action: manipulation;
929}
930
931html,
932body {
933  background-color: $colorBody;
934  color: $colorTextBody;
935}
936
937.page-width {
938  max-width: $page-width;
939  margin: 0 auto;
940}
941
942.page-width,
943.page-full {
944  padding: 0 $page-width-gutter-small;
945
946  @include media-query($medium-up) {
947    padding: 0 $gutter;
948  }
949}
950
951@include media-query($small) {
952  .page-width--flush-small {
953    padding: 0;
954  }
955}
956
957.page-content,
958.shopify-policy__container {
959  padding-top: $gutter * 0.75;
960  padding-bottom: $gutter * 0.75;
961
962  @include media-query($medium-up) {
963    padding-top: $gutter * 1.5;
964    padding-bottom: $gutter * 1.5;
965  }
966}
967
968.page-content--with-blocks {
969  padding-bottom: 0;
970}
971
972.product-section .page-content {
973  @include media-query($small) {
974    padding-top: $gutter / 2;
975  }
976}
977
978.main-content {
979  display: block;
980  min-height: 300px;
981  @include media-query($medium-up) {
982    min-height: 700px;
983  }
984}
985
986hr {
987  height: 1px;
988  border: 0;
989  border-top: 1px solid $colorBorder;
990}
991
992.hr--small {
993  @extend hr;
994  margin: 15px auto;
995}
996
997.hr--medium {
998  @extend hr;
999  margin: 25px auto;
1000
1001  @include media-query($medium-up) {
1002    margin: 35px auto;
1003  }
1004}
1005
1006.hr--large {
1007  @extend hr;
1008  margin: ($gutter) auto;
1009
1010  @include media-query($medium-up) {
1011    margin: ($gutter * 1.5) auto;
1012  }
1013
1014  .page-blocks + & {
1015    margin-top: 0;
1016  }
1017}
1018
1019.hr--clear {
1020  border: 0;
1021}
1022
1023/*============================================================================
1024  Responsive tables, defined with .table--responsive on table element
1025==============================================================================*/
1026
1027.table--responsive {
1028  @include media-query($small) {
1029    thead {
1030      display: none;
1031    }
1032
1033    tr {
1034      display: block;
1035    }
1036
1037    // IE9 table layout fixes
1038    tr,
1039    td {
1040      float: left;
1041      clear: both;
1042      width: 100%;
1043    }
1044
1045    th,
1046    td {
1047      display: block;
1048      text-align: right;
1049      padding: 15px;
1050    }
1051
1052    td:before {
1053      content: attr(data-label);
1054      float: left;
1055      @include headerAccentFontStack;
1056      font-size: 12px;
1057      padding-right: 10px;
1058    }
1059  }
1060}
1061
1062@include media-query($small) {
1063  .table--small-hide {
1064    display: none !important;
1065  }
1066
1067  .table__section + .table__section {
1068    position: relative;
1069    margin-top: 10px;
1070    padding-top: 15px;
1071
1072    &:after {
1073      content: '';
1074      display: block;
1075      position: absolute;
1076      top: 0;
1077      left: 15px;
1078      right: 15px;
1079      border-bottom: 1px solid $colorBorder;
1080    }
1081  }
1082}
1083
1084body,
1085input,
1086textarea,
1087button,
1088select,
1089p {
1090  @include baseFontStack;
1091  font-size: $type_base_size;
1092  -webkit-font-smoothing: antialiased;
1093  -webkit-text-size-adjust: 100%;
1094  text-rendering: optimizeSpeed;
1095}
1096
1097body {
1098  font-weight: 400;
1099}
1100
1101p,
1102.paragraph {
1103  margin: 0 0 ($gutter / 2) 0;
1104
1105  img {
1106    margin: 0;
1107  }
1108}
1109
1110em {
1111  font-style: italic;
1112}
1113
1114b, strong {
1115  font-weight: bold;
1116}
1117
1118small {
1119  font-size: 0.9em;
1120}
1121
1122sup, sub {
1123  position: relative;
1124  font-size: 60%;
1125  vertical-align: baseline;
1126}
1127
1128sup {
1129  top: -0.5em;
1130}
1131
1132sub {
1133  bottom: -0.5em;
1134}
1135
1136blockquote,
1137.rte blockquote {
1138  margin: 0;
1139  padding: ($gutter / 2) $gutter 40px;
1140
1141  p {
1142    font-size: ($type_base_size + 3);
1143    margin-bottom: 0;
1144
1145    & + cite {
1146      margin-top: $gutter / 2;
1147    }
1148  }
1149
1150  cite {
1151    display: block;
1152
1153    &:before {
1154      content: "\2014 \0020";
1155    }
1156  }
1157}
1158
1159code, pre {
1160  background-color: #faf7f5;
1161  font-family: Consolas, monospace;
1162  font-size: 1em;
1163  border: 0 none;
1164  padding: 0 2px;
1165  color: #51ab62;
1166}
1167
1168pre {
1169  overflow: auto;
1170  padding: $gutter / 2;
1171  margin: 0 0 $gutter;
1172}
1173
1174/*================ Form elements ================*/
1175
1176label,
1177.label {
1178  @include headerAccentFontStack;
1179  @if $type_header_accent_transform {
1180    font-size: em(floor($type_base_size * 0.75));
1181  } @else {
1182    font-size: em(floor($type_base_size * 0.8));
1183  }
1184
1185  @include media-query($medium-up) {
1186    @if $type_header_accent_transform {
1187      font-size: em(floor($type_base_size * 0.8));
1188    } @else {
1189      font-size: em(floor($type_base_size * 0.88));
1190    }
1191  }
1192}
1193
1194label {
1195  display: block;
1196  margin-bottom: 10px;
1197}
1198
1199.label-info {
1200  display: block;
1201  margin-bottom: 10px;
1202}
1203
1204/*============================================================================
1205  Headings
1206==============================================================================*/
1207
1208h1, h2, h3, h4, h5, h6 {
1209  display: block;
1210  @include headerFontStack;
1211  margin: 0 0 ($gutter / 4);
1212
1213  a {
1214    text-decoration: none;
1215    font-weight: inherit;
1216  }
1217  @include media-query($medium-up) {
1218    margin: 0 0 ($gutter / 2);
1219  }
1220}
1221
1222h1 {
1223  font-size: em(floor($type_header_base_size * 0.85));
1224  @include media-query($medium-up) {
1225    font-size: em($type_header_base_size);
1226  }
1227}
1228
1229h2 {
1230  font-size: em(floor($type_header_base_size * 0.9 * 0.85));
1231  @include media-query($medium-up) {
1232    font-size: em(floor($type_header_base_size * 0.9));
1233  }
1234}
1235
1236h3 {
1237  font-size: em(floor($type_header_base_size * 0.85 * 0.85));
1238  @include media-query($medium-up) {
1239    font-size: em(floor($type_header_base_size * 0.85));
1240  }
1241}
1242
1243h4 {
1244  font-size: em(floor($type_header_base_size * 0.54 * 0.85));
1245  @include media-query($medium-up) {
1246    font-size: em(floor($type_header_base_size * 0.54));
1247  }
1248}
1249
1250h5,
1251h6 {
1252  font-size: em(floor($type_header_base_size * 0.5));
1253}
1254
1255.h1 { @extend h1; }
1256
1257.h2 { @extend h2; }
1258
1259.h3 { @extend h3; }
1260
1261.h4 { @extend h4; }
1262
1263.h5 { @extend h5; }
1264
1265.h6 { @extend h6; }
1266
1267// Standardize text spacing sometimes
1268
1269.text-spacing {
1270  margin-bottom: $gutter / 2;
1271}
1272
1273/*================ Rich Text Editor Styles ================*/
1274
1275.rte {
1276  h1 {
1277    font-size: em(floor($type_header_base_size * 0.85));
1278    @include media-query($medium-up) {
1279      font-size: em($type_header_base_size);
1280    }
1281  }
1282
1283  h2 {
1284    font-size: em(floor($type_header_base_size * 0.85 * 0.85));
1285    @include media-query($medium-up) {
1286      font-size: em(floor($type_header_base_size * 0.85));
1287    }
1288  }
1289
1290  h3 {
1291    font-size: em(floor($type_header_base_size * 0.69 * 0.85));
1292    @include media-query($medium-up) {
1293      font-size: em(floor($type_header_base_size * 0.69));
1294    }
1295  }
1296
1297  h4 {
1298    font-size: em(floor($type_header_base_size * 0.59 * 0.85));
1299    @include media-query($medium-up) {
1300      font-size: em(floor($type_header_base_size * 0.59));
1301    }
1302  }
1303
1304  table {
1305    @include media-query($small) {
1306      font-size: em($type_base_size - 3);
1307      td, th {
1308        padding: 6px 8px;
1309      }
1310    }
1311    .collapsible-content & {
1312      font-size: em($type_base_size - 3);
1313      td, th {
1314        padding: 6px 8px;
1315      }
1316    }
1317  }
1318}
1319
1320/*================ Larger text styles ================*/
1321
1322.larger-text {
1323  .h3 {
1324    font-size: em(floor($type_header_base_size * 0.85));
1325    @include media-query($medium-up) {
1326      font-size: em($type_header_base_size);
1327    }
1328  }
1329  p {
1330    font-size: em($type_base_size + 1);
1331    @include media-query($medium-up) {
1332      font-size: em($type_base_size + 2);
1333    }
1334  }
1335  .subtitle {
1336
1337    @if $type_base_accent_transform {
1338      font-size: em(ceil($type_base_size * 0.85));
1339    } @else {
1340      font-size: em($type_base_size);
1341    }
1342    @include baseAccentFontStack;
1343    margin-bottom: 5px;
1344    @include media-query($medium-up) {
1345      @if $type_base_accent_transform {
1346        font-size: em(ceil($type_base_size * 1));
1347      } @else {
1348        font-size: em(ceil($type_base_size * 1.13));
1349      }
1350    }
1351  }
1352}
1353
1354/*================ Blog Typography ================*/
1355
1356.date {
1357  display: inline-block;
1358  line-height: 1.7;
1359  margin-bottom: 5px;
1360  @include headerAccentFontStack;
1361
1362  @include media-query($medium-up) {
1363    margin-bottom: 0;
1364  }
1365
1366  .section-header &:last-child {
1367    margin-bottom: 40px;
1368  }
1369}
1370
1371.comment-author {
1372  margin-bottom: 0;
1373  font-size: 16px;
1374}
1375
1376.comment-date {
1377  @include baseAccentFontStack;
1378  font-size: em(12px);
1379  display: block;
1380  margin-top: 3px;
1381  @include media-query($small) {
1382    font-size: em(10px);
1383    margin-bottom: $gutter / 2
1384  }
1385}
1386
1387/*================ Cart Typography ================*/
1388
1389.ajaxcart__product-name {
1390  font-size: em(ceil($type_base_size * 1.13 * 0.85));
1391  line-height: 1.3;
1392
1393  @include media-query($medium-up) {
1394    font-size: em(ceil($type_base_size * 1.13));
1395  }
1396}
1397
1398.ajaxcart__product-meta {
1399  font-size: em(ceil($type_base_size * 0.9 * 0.85));
1400  line-height: 1.3;
1401
1402  @include media-query($medium-up) {
1403    font-size: em(ceil($type_base_size * 0.9));
1404  }
1405}
1406
1407.ajaxcart__subtotal {
1408  @include headerAccentFontStack;
1409  font-size: em(floor($type_base_size * 0.85));
1410  margin-bottom: 10px;
1411
1412  @include media-query($medium-up) {
1413    font-size: em($type_base_size);
1414  }
1415}
1416
1417.ajaxcart__price {
1418  font-size: em(ceil($type_base_size * 0.85));
1419  line-height: 1.2; // match subtotal label
1420  margin-bottom: 10px;
1421
1422  @include media-query($medium-up) {
1423    font-size: em($type_base_size);
1424  }
1425}
1426
1427.ajaxcart__note {
1428  font-size: em(10px);
1429  opacity: 0.8;
1430  margin-bottom: 10px;
1431  @include media-query($medium-up) {
1432    font-size: em(12px);
1433  }
1434}
1435
1436.ajaxcart__note--terms {
1437  margin-top: 10px;
1438
1439  input {
1440    vertical-align: middle;
1441  }
1442
1443  label {
1444    display: inline;
1445  }
1446
1447  a {
1448    text-decoration: underline;
1449  }
1450}
1451
1452.ajaxcart__savings,
1453.cart__savings {
1454  font-size: em(20px);
1455}
1456
1457/*================ Misc typography ================*/
1458
1459.skrim__title {
1460  font-size: em(floor($type_header_base_size * 0.46));
1461  @include headerFontStack;
1462
1463  @include media-query($medium-up) {
1464    font-size: em(floor($type_header_base_size * 0.71));
1465  }
1466}
1467
1468.rte {
1469  .enlarge-text {
1470    margin: 0;
1471
1472    p {
1473      font-size: em(floor($type_base_size * 1.13));
1474
1475      @include media-query($medium-up) {
1476        font-size: em(floor($type_base_size * 1.46));
1477      }
1478
1479      &:last-child {
1480        margin-bottom: 0;
1481      }
1482    }
1483  }
1484
1485  .enlarge-text--offset {
1486    p {
1487      @include media-query($medium-up) {
1488        padding-right: 15%;
1489
1490        .text-center & {
1491          padding: 0 5%;
1492        }
1493      }
1494    }
1495  }
1496}
1497
1498/*================ Partials | Lists ================*/
1499
1500ul, ol {
1501  margin: 0 0 ($gutter / 2) ($gutter);
1502  padding: 0;
1503  text-rendering: optimizeLegibility;
1504}
1505
1506ol ol {
1507  list-style: lower-alpha;
1508}
1509
1510ol { list-style: decimal; }
1511
1512ul ul, ul ol,
1513ol ol, ol ul { margin: 4px 0 5px 20px; }
1514
1515li { margin-bottom: 0.25em; }
1516
1517ul.square { list-style: square outside; }
1518
1519ul.disc { list-style: disc outside; }
1520
1521ol.alpha { list-style: lower-alpha outside; }
1522
1523.no-bullets {
1524  list-style: none outside;
1525  margin-left: 0;
1526}
1527
1528.inline-list {
1529  padding: 0;
1530  margin: 0;
1531
1532  li {
1533    display: inline-block;
1534    margin-bottom: 0;
1535    vertical-align: middle;
1536  }
1537}
1538
1539table {
1540  width: 100%;
1541  border-spacing: 1px;
1542  position: relative;
1543  border: 0 none;
1544  background: $colorBorder;
1545}
1546
1547.table-wrapper {
1548  max-width: 100%;
1549  overflow: auto;
1550  -webkit-overflow-scrolling: touch;
1551}
1552
1553td,
1554th {
1555  border: 0 none;
1556  text-align: left;
1557  padding: 10px 15px;
1558  background: $colorBody;
1559}
1560
1561th {
1562  font-weight: bold;
1563}
1564
1565// Typography
1566
1567th,
1568.table__title {
1569  font-weight: bold;
1570}
1571
1572/*================ Partials | Links ================*/
1573
1574a,
1575.text-link {
1576  color: $colorTextBody;
1577  text-decoration: none;
1578  background: transparent;
1579
1580  &:hover {
1581    color: $colorTextBody;
1582  }
1583}
1584
1585.customers {
1586  a {
1587    text-decoration: none;
1588    border-bottom: 2px solid rgba($colorTextBody,0.1);
1589    position: relative;
1590  }
1591  @if ($animate_underlines) {
1592    a:after {
1593      content: '';
1594      position: absolute;
1595      bottom: -2px;
1596      left: 0;
1597      width: 0%;
1598      border-bottom: 2px solid rgba($colorTextBody,1);
1599      transition: width 0.5s ease;
1600    }
1601    a {
1602      &:hover:after,
1603      &:focus:after {
1604        width: 100%;
1605      }
1606    }
1607  }
1608}
1609
1610/*================ Force an input/button to look like a text link ================*/
1611
1612.text-link {
1613  display: inline;
1614  border: 0 none;
1615  background: none;
1616  padding: 0;
1617  margin: 0;
1618}
1619
1620/*================ Links in RTE ================*/
1621
1622.rte a,
1623.shopify-policy__container a {
1624  color: $colorLink;
1625}
1626
1627/*================ Partials | Buttons ================*/
1628
1629button {
1630  overflow: visible;
1631}
1632
1633button[disabled],
1634html input[disabled] {
1635  cursor: default;
1636}
1637
1638.btn,
1639.rte .btn,
1640.shopify-payment-button .shopify-payment-button__button--unbranded,
1641.product-reviews .spr-summary-actions a,
1642.product-reviews .spr-button {
1643  @include headerFontStack;
1644  display: inline-block;
1645  padding: $btnPrimaryPadding;
1646  margin: 0;
1647  width: auto;
1648  min-width: 90px;
1649  line-height: 1.42;
1650  font-size: $btnPrimaryFontSize;
1651  text-decoration: none;
1652  text-align: center;
1653  vertical-align: middle;
1654  white-space: normal;
1655  cursor: pointer;
1656  border: 1px solid transparent;
1657  -webkit-user-select: none;
1658      -ms-user-select: none;
1659          user-select: none;
1660  -webkit-appearance: none;
1661  -moz-appearance: none;
1662  border-radius: $input-radius;
1663  color: $colorBtnPrimaryText;
1664  background: $colorBtnPrimary;
1665  transition: padding-right 0.3s, background 0.3s;
1666
1667  @include media-query($small) {
1668    font-size: $btnPrimaryFontSmall;
1669    padding: $btnPrimaryPaddingSmall;
1670  }
1671
1672  &:hover {
1673    color: $colorBtnPrimaryText;
1674    background-color: $colorBtnPrimary;
1675  }
1676
1677  &[disabled],
1678  &.disabled {
1679    cursor: default;
1680    color: darken($disabledBorder, 27%);
1681    background-color: $disabledGrey;
1682    transition: none;
1683
1684    &:hover {
1685      color: darken($disabledBorder, 27%);
1686      background-color: $disabledGrey;
1687    }
1688  }
1689}
1690
1691// Mimic the .btn hover style for Shopify Payment Button
1692
1693.shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) {
1694  color: $colorBtnPrimaryText;
1695  background-color: $colorBtnPrimary;
1696}
1697
1698.btn--no-animate {
1699  background-image: none;
1700  transition: none;
1701}
1702
1703// Button animations
1704
1705@if ($animate_buttons) {
1706  .btn:not(.btn--no-animate):not(.btn--tertiary):not(.btn--static) {
1707    background: $colorBtnPrimary url({{ "button-arrow.png" | asset_url | split: '?' | first }}) no-repeat $btnBackgroundPosition;
1708    background-size: 29px;
1709
1710    @media
1711    only screen and (-webkit-min-device-pixel-ratio: 1.25),
1712    only screen and ( min--moz-device-pixel-ratio: 1.25),
1713    only screen and ( min-device-pixel-ratio: 1.25),
1714    only screen and ( -webkit-min-device-pixel-ratio: 2.0833333333333335),
1715    only screen and ( min-resolution: 200dpi),
1716    only screen and ( -webkit-min-device-pixel-ratio: 1.25),
1717    only screen and ( min-resolution: 1.25dppx) {
1718      background-image: url({{ "button-arrow-2x.png" | asset_url | split: '?' | first }});
1719    }
1720
1721    &:hover {
1722      padding-right: 55px;
1723      background-position: 91% 35%;
1724    }
1725
1726    &[disabled],
1727    &.disabled {
1728      &:hover {
1729        padding: $btnPrimaryPaddingSmall;
1730        background-image: none;
1731      }
1732    }
1733  }
1734
1735  .btn--small:not(.btn--no-animate):not(.btn--tertiary) {
1736    background-position: $btnSmallBackgroundPosition;
1737
1738    &:hover {
1739      background-position: 91% 45%;
1740      padding-right: 51px;
1741    }
1742  }
1743}
1744
1745.btn--tertiary,
1746.rte .btn--tertiary {
1747  background-color: transparent;
1748  border: 1px solid $colorBorder;
1749  color: $colorTextBody;
1750  font-weight: normal;
1751  font-size: 12px;
1752  padding: 6px 10px;
1753
1754  @include media-query($medium-up) {
1755    font-size: 14px;
1756  }
1757
1758  &:hover {
1759    background-color: transparent;
1760    color: $colorTextBody;
1761  }
1762
1763  &[disabled],
1764  &.disabled {
1765    cursor: default;
1766    color: darken($disabledBorder, 27%);
1767    background-color: $disabledGrey;
1768  }
1769}
1770
1771/*================ Button variations ================*/
1772
1773.btn--small,
1774.collapsibles-wrapper .spr-summary-actions a,
1775.collapsibles-wrapper .spr-button {
1776  padding: $btnSmallPadding;
1777  font-size: em(14px);
1778  background-position: 150% 45%;
1779  min-width: 90px;
1780
1781  @include media-query($small) {
1782    font-size: em(12px);
1783    padding: $btnSmallPaddingSmall;
1784  }
1785}
1786
1787.btn--large {
1788  padding: 15px 20px;
1789  font-size: em(18px);
1790}
1791
1792.btn--full {
1793  width: 100%;
1794  padding: $btnPrimaryPadding;
1795  font-size: em(16px);
1796}
1797
1798.btn--inverse {
1799  background-color: transparent !important;
1800  border: 2px solid #fff;
1801  color: #fff;
1802
1803  &:hover,
1804  &:active {
1805    background-color: transparent;
1806  }
1807
1808  .hero__link & {
1809    color: $colorHeroText;
1810    border-color: $colorHeroText;
1811  }
1812}
1813
1814// Button that matches body background
1815
1816.btn--body {
1817  background-color: $colorBody;
1818  color: $colorTextBody;
1819
1820  &:hover,
1821  &:active {
1822
1823    background-color: $colorBody;
1824    color: $colorTextBody;
1825  }
1826}
1827
1828.btn--circle {
1829  padding: 10px;
1830  border-radius: 50%;
1831  min-width: 0;
1832  line-height: 1;
1833
1834  .icon {
1835    width: 20px;
1836    height: 20px;
1837  }
1838
1839  &:before,
1840  &:after {
1841    content: none;
1842    background: none;
1843    width: auto; // for photoswipe close button
1844  }
1845
1846  &.btn--large .icon {
1847    width: 30px;
1848    height: 30px;
1849  }
1850
1851  &.btn--large {
1852    padding: 15px;
1853  }
1854}
1855
1856/*================ Button loading indicator ================*/
1857
1858.btn--loading {
1859  position: relative;
1860  text-indent: -9999px;
1861
1862  background-color: darken($colorBtnPrimary, 5%);
1863  color: darken($colorBtnPrimary, 5%);
1864
1865  &:hover,
1866  &:active {
1867    background-color: darken($colorBtnPrimary, 5%);
1868    color: darken($colorBtnPrimary, 5%);
1869    background-image: none !important;
1870  }
1871
1872  &:after {
1873    content: '';
1874    display: block;
1875    width: 24px;
1876    height: 24px;
1877    position: absolute;
1878    left: 50%;
1879    top: 50%;
1880    margin-left: -12px;
1881    margin-top: -12px;
1882    border-radius: 50%;
1883    border: 3px solid $colorBtnPrimaryText;
1884    border-top-color: transparent;
1885    animation: spin 1s infinite linear;
1886  }
1887}
1888
1889/*================ Return button ================*/
1890
1891.return-link {
1892  @include headerFontStack;
1893  font-size: em(18px);
1894  text-align: center;
1895  @include media-query($medium-up) {
1896    font-size: em(20px);
1897  }
1898
1899  .icon {
1900    width: 27px;
1901    margin-right: 8px;
1902  }
1903}
1904
1905/*================ Collapsible trigger ================*/
1906
1907.collapsible-trigger-btn {
1908  display: block;
1909  width: 100%;
1910  text-align: left;
1911  padding: ($gutter / 1.75) 0;
1912
1913  @include media-query($small) {
1914    padding: ($gutter / 2) 0;
1915  }
1916
1917  // One-off for the show more/less collection tag button
1918  &.btn--tertiary {
1919    padding: 6px 10px;
1920    width: auto;
1921  }
1922}
1923
1924.collapsible-trigger-btn--borders {
1925  border-top: 1px solid $colorBorder;
1926
1927  .collapsible-content + & {
1928    margin-top: -1px;
1929  }
1930
1931  + .collapsible-content .collapsible-content__inner {
1932    padding-bottom: $gutter / 2;
1933  }
1934}
1935
1936/*============================================================================
1937  Button styles when additional quick checkout buttons
1938  are enabled on product page
1939==============================================================================*/
1940
1941.shopify-payment-button {
1942  margin-top: 10px;
1943}
1944
1945.shopify-payment-button .shopify-payment-button__button--unbranded {
1946  display: block;
1947  width: 100%;
1948  transition: none;
1949
1950  // Disable arrow hover effect
1951  &:hover,
1952  &:hover:not([disabled]) {
1953    background-position: $btnBackgroundPosition;
1954    padding: $btnPrimaryPadding;
1955  }
1956}
1957
1958.payment-buttons {
1959  .add-to-cart,
1960  .shopify-payment-button,
1961  .shopify-payment-button__button--unbranded {
1962    min-height: $btnMinHeightWhenQuickCheckout;
1963  }
1964
1965  // Force .btn--tertiary to have similar styles as .btn here
1966  .btn--tertiary {
1967    @include headerFontStack;
1968    font-size: $btnPrimaryFontSize;
1969    padding: $btnPrimaryPadding;
1970    border-radius: 0;
1971
1972    @include media-query($small) {
1973      font-size: $btnPrimaryFontSmall;
1974      padding: $btnPrimaryPaddingSmall;
1975    }
1976  }
1977}
1978
1979.shopify-payment-button__button--hidden {
1980  display: none !important;
1981}
1982
1983/*================ Partials | Images, SVG, and iframes ================*/
1984
1985img {
1986  border: 0 none;
1987}
1988
1989svg:not(:root) {
1990  overflow: hidden;
1991}
1992
1993img,
1994iframe {
1995  max-width: 100%;
1996}
1997
1998img[data-sizes="auto"] {
1999  display: block;
2000  width: 100%;
2001}
2002
2003.lazyload {
2004  opacity: 0;
2005
2006  .no-js & {
2007    display: none;
2008  }
2009}
2010
2011.lazyloaded {
2012  opacity: 1;
2013  transition: opacity 0.4s ease;
2014}
2015
2016.video-wrapper {
2017  position: relative;
2018  overflow: hidden;
2019  max-width: 100%;
2020  padding-bottom: 56.25%;
2021  height: 0;
2022  height: auto;
2023
2024  iframe,
2025  video {
2026    position: absolute;
2027    top: 0;
2028    left: 0;
2029    width: 100%;
2030    height: 100%;
2031  }
2032}
2033
2034.video-wrapper--modal {
2035  width: 1000px;
2036}
2037
2038/*================ Aspect ratio grid images ================*/
2039
2040.grid__image-ratio {
2041  background-repeat: no-repeat;
2042  background-size: contain;
2043  background-position: center center;
2044  background-color: $colorSmallImageBg;
2045
2046  @if ($animate_images) {
2047    opacity: 0;
2048
2049    &.lazyloaded {
2050      opacity: 1;
2051      animation: $animate_images_style 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
2052      transition: none; // fixes safari animation conflict
2053    }
2054  }
2055
2056  &:before {
2057    content: '';
2058    display: block;
2059    height: 0;
2060    width: 100%;
2061  }
2062}
2063
2064.grid__image-ratio--cover {
2065  background-size: cover;
2066}
2067
2068.grid__image-ratio--wide:before {
2069  padding-bottom: 56.25%;
2070}
2071
2072.grid__image-ratio--landscape:before {
2073  padding-bottom: 75%;
2074}
2075
2076.grid__image-ratio--square:before {
2077  padding-bottom: 100%;
2078}
2079
2080.grid__image-ratio--portrait:before {
2081  padding-bottom: 150%;
2082}
2083
2084/*================ Lazysizes object-fit ================*/
2085
2086.image-fit {
2087  position: relative;
2088  width: 100%;
2089  height: 100%;
2090  object-fit: cover;
2091  font-family: "object-fit: cover";
2092  z-index: 1;
2093}
2094
2095/*================ Parallax styles ================*/
2096
2097.parallax-container {
2098  position: absolute;
2099  top: -30%;
2100  left: 0;
2101  height: 160%;
2102  width: 100%;
2103}
2104
2105.parallax-image {
2106  position: absolute;
2107  top: 0;
2108  left: 0;
2109  bottom: 0;
2110  width: 100%;
2111  background-size: cover;
2112  background-position: 50% 50%;
2113  background-repeat: no-repeat;
2114}
2115
2116@include media-query($medium-up) {
2117  .parallax-image {
2118    background-attachment: fixed;
2119
2120   .js-ipad & {
2121      background-attachment: initial;
2122    }
2123  }
2124}
2125
2126/*================ Partials | Forms ================*/
2127
2128form {
2129  margin: 0;
2130}
2131
2132.form-vertical {
2133  margin-bottom: $gutter / 2;
2134}
2135
2136.inline {
2137  display: inline;
2138}
2139
2140/*================ Prevent zoom on touch devices in active inputs ================*/
2141
2142@include media-query($medium-down) {
2143  input,
2144  textarea {
2145    font-size: 16px;
2146  }
2147}
2148
2149button,
2150input,
2151textarea {
2152  -webkit-appearance: none;
2153  -moz-appearance: none;
2154}
2155
2156button {
2157  background: none;
2158  border: none;
2159  display: inline-block;
2160  cursor: pointer;
2161}
2162
2163fieldset {
2164  border: 1px solid $colorBorder;
2165  padding: $gutter / 2;
2166}
2167
2168legend {
2169  border: 0;
2170  padding: 0;
2171}
2172
2173button,
2174input[type="submit"] {
2175  cursor: pointer;
2176}
2177
2178input,
2179textarea,
2180select {
2181  border: 1px solid $colorBorder;
2182  max-width: 100%;
2183  padding: 8px 10px;
2184  border-radius: $input-radius;
2185
2186  &[disabled],
2187  &.disabled {
2188    cursor: default;
2189    background-color: $disabledGrey;
2190    border-color: $disabledBorder;
2191  }
2192
2193  &.input-full {
2194    width: 100%;
2195  }
2196}
2197
2198textarea {
2199  min-height: 100px;
2200}
2201
2202/*================ Input element overrides ================*/
2203
2204input[type="checkbox"],
2205input[type="radio"] {
2206  margin: 0 10px 0 0;
2207  padding: 0;
2208  width: auto;
2209}
2210
2211input[type="checkbox"] {
2212  -webkit-appearance: checkbox;
2213  -moz-appearance: checkbox;
2214}
2215
2216input[type="radio"] {
2217  -webkit-appearance: radio;
2218  -moz-appearance: radio;
2219}
2220
2221input[type="image"] {
2222  padding-left: 0;
2223  padding-right: 0;
2224}
2225
2226select,
2227.faux-select {
2228  -webkit-appearance: none;
2229     -moz-appearance: none;
2230          appearance: none;
2231  background-position: right center;
2232  background: {
2233    image: url({{ "ico-select.svg" | asset_url | split: '?' | first }});
2234    repeat: no-repeat;
2235    position: right 10px center;
2236    color: transparent;
2237    size: 11px;
2238  }
2239  display: inline-block;
2240  vertical-align: middle;
2241  padding-right: 28px;
2242  text-indent: 0.01px;
2243  text-overflow: '';
2244  cursor: pointer;
2245  color: inherit;
2246}
2247
2248optgroup {
2249  font-weight: bold;
2250}
2251
2252// Force option color (affects IE and some Firefox versions)
2253
2254option {
2255  color: #000;
2256  background-color: #fff;
2257
2258  &[disabled] {
2259    color: #ccc;
2260  }
2261}
2262
2263select::-ms-expand {
2264  display: none;
2265}
2266
2267/*================ Form labels ================*/
2268
2269.hidden-label {
2270  @include visuallyHidden();
2271}
2272
2273label[for] {
2274  cursor: pointer;
2275}
2276
2277/*================ Vertical Form ================*/
2278
2279.form-vertical {
2280  input,
2281  select,
2282  textarea {
2283    display: block;
2284    margin-bottom: 30px;
2285  }
2286
2287  input[type="checkbox"],
2288  input[type="radio"],
2289  .btn {
2290    display: inline-block;
2291  }
2292}
2293
2294small {
2295  display: block;
2296}
2297
2298/*================ Error styles ================*/
2299
2300input,
2301textarea {
2302  &.error {
2303    border-color: $errorRed;
2304    background-color: $errorRedBg;
2305    color: $errorRed;
2306  }
2307}
2308
2309label.error {
2310  color: $errorRed;
2311}
2312
2313/*================ Selector wrapper ================*/
2314
2315.selector-wrapper {
2316  label {
2317    margin-right: 10px;
2318  }
2319
2320  + .selector-wrapper {
2321    margin-top: $gutter / 2;
2322  }
2323}
2324
2325/*================ Input Group ================*/
2326
2327.input-group {
2328  display: -ms-flexbox;
2329  display: flex;
2330
2331  .input-group-field:first-child,
2332  .input-group-btn:first-child,
2333  .input-group-btn:first-child > .btn,
2334  input[type="hidden"]:first-child + .input-group-field,
2335  input[type="hidden"]:first-child + .input-group-btn > .btn {
2336    border-radius: $input-radius 0 0 $input-radius;
2337  }
2338
2339  .input-group-field:last-child,
2340  .input-group-btn:last-child > .btn {
2341    border-radius: 0 $input-radius $input-radius 0;
2342  }
2343
2344  input {
2345    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
2346    &::-moz-focus-inner {
2347      border: 0;
2348      padding: 0;
2349      margin-top: -1px;
2350      margin-bottom: -1px;
2351    }
2352  }
2353}
2354
2355.input-group-field,
2356.input-group-btn {
2357  margin: 0;
2358}
2359
2360.input-group .input-group-field {
2361  -ms-flex: 1 1 auto;
2362      flex: 1 1 auto;
2363  min-width: 0;
2364}
2365
2366.input-group-btn {
2367  -ms-flex: 0 1 auto;
2368      flex: 0 1 auto;
2369  padding: 0;
2370
2371  .icon {
2372    vertical-align: initial;
2373  }
2374}
2375
2376.input-group-btn .btn {
2377  margin-top: 0;
2378  height: 100%;
2379  background-image: none !important;
2380
2381  &:hover {
2382    padding-right: 20px !important;
2383  }
2384}
2385
2386/*================ #Icons ================*/
2387
2388.icon {
2389  display: inline-block;
2390  width: 20px;
2391  height: 20px;
2392  vertical-align: middle;
2393  fill: currentColor;
2394
2395  .no-svg & {
2396    display: none;
2397  }
2398}
2399
2400.icon--full-color {
2401  fill: initial;
2402}
2403
2404svg,
2405symbol {
2406  &.icon:not(.icon--full-color) {
2407    circle,
2408    ellipse,
2409    g,
2410    line,
2411    path,
2412    polygon,
2413    polyline,
2414    rect {
2415      fill: inherit;
2416      stroke: inherit;
2417    }
2418  }
2419}
2420
2421/* Override the above for our stroke-only icons */
2422
2423.icon-cart,
2424.icon-bag,
2425.icon-search,
2426.icon-close,
2427.icon-chevron-down,
2428.icon-email,
2429.icon-user,
2430.icon-hamburger {
2431  circle,
2432  ellipse,
2433  g,
2434  line,
2435  path,
2436  polygon,
2437  polyline,
2438  rect {
2439    fill: none !important;
2440    stroke-width: $icon_weight;
2441    stroke: currentColor !important;
2442    stroke-linecap: $icon_linecaps;
2443    stroke-linejoin: $icon_linecaps;
2444  }
2445}
2446
2447.icon-cart circle {
2448  fill: currentColor !important;
2449}
2450
2451.icon__fallback-text {
2452  @include visuallyHidden();
2453}
2454
2455.js-drawer-open {
2456  overflow: hidden;
2457}
2458
2459.drawer {
2460  display: none;
2461  position: fixed;
2462  overflow: hidden;
2463  -webkit-overflow-scrolling: touch;
2464  top: 0;
2465  bottom: 0;
2466  max-width: 95%;
2467  z-index: $zindexDrawer;
2468  color: $colorDrawerText;
2469  background-color: $colorDrawers;
2470  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
2471
2472  // Allow whole drawer to be scrollable on short screens
2473  // typically when Android keyboard is open
2474  @media screen and (max-height: $fixedHeightLimit) {
2475    overflow: scroll;
2476
2477    .drawer__contents {
2478      height: auto;
2479    }
2480  }
2481
2482  a {
2483    color: $colorDrawerText;
2484
2485    &:hover {
2486      color: $colorDrawerText;
2487    }
2488  }
2489
2490  input,
2491  textarea {
2492    border-color: $colorDrawerBorder;
2493  }
2494
2495  .cart__checkout {
2496    background-color: $colorDrawerButton;
2497    color: $colorDrawerButtonText;
2498  }
2499}
2500
2501.drawer--left {
2502  width: $drawerNavWidth;
2503  left: -$drawerNavWidth;
2504
2505  &.drawer--is-open {
2506    display: block;
2507    transform: translateX($drawerNavWidth);
2508    transition-duration: 0.8s;
2509  }
2510}
2511
2512.drawer--right {
2513  width: $drawerCartWidth;
2514  right: -$drawerCartWidth;
2515
2516  @include media-query($medium-up) {
2517    width: $drawerCartWidthLarge;
2518    right: -$drawerCartWidthLarge;
2519  }
2520
2521  &.drawer--is-open {
2522    display: block;
2523    transform: translateX(-$drawerCartWidth);
2524    transition-duration: 0.8s;
2525
2526    @include media-query($medium-up) {
2527      transform: translateX(-$drawerCartWidthLarge);
2528    }
2529  }
2530}
2531
2532.js-drawer-open .main-content:after,
2533.js-drawer-closing .main-content:after {
2534  content: '';
2535  display: block;
2536  position: fixed;
2537  top: 0;
2538  left: 0;
2539  right: 0;
2540  bottom: 0;
2541  background-color: $colorModalBg;
2542  opacity: 0;
2543  z-index: $zindexDrawerOverlay;
2544}
2545
2546.js-drawer-open .main-content:after {
2547  animation: overlay-on 0.5s forwards;
2548}
2549
2550.js-drawer-closing .main-content:after {
2551  animation: overlay-off 0.4s forwards;
2552}
2553
2554// General drawer section padding
2555
2556.drawer__header,
2557.drawer__fixed-header,
2558.drawer__scrollable,
2559.drawer__footer {
2560  padding-left: $gutter / 2;
2561  padding-right: $gutter / 2;
2562
2563  @include media-query($medium-up) {
2564    padding-left: $gutter;
2565    padding-right: $gutter;
2566  }
2567}
2568
2569/*================ Drawer header ================*/
2570
2571.drawer__header {
2572  display: table;
2573  height: $drawerHeaderHeight;
2574  width: 100%;
2575  padding: ($gutter / 2.6) 0;
2576  margin-bottom: 0;
2577  border-bottom: 1px solid $colorDrawerBorder;
2578
2579  @include media-query($medium-up) {
2580    height: $drawerHeaderHeightLarge;
2581  }
2582}
2583
2584.drawer__fixed-header {
2585  height: $drawerHeaderHeight;
2586  overflow: visible; // for close button hit area
2587
2588  @include media-query($medium-up) {
2589    height: $drawerHeaderHeightLarge;
2590  }
2591}
2592
2593.drawer__title,
2594.drawer__close {
2595  display: table-cell;
2596  vertical-align: middle;
2597}
2598
2599.drawer__title {
2600  @include headerFontStack;
2601  font-size: em(24px);
2602  width: 100%;
2603}
2604
2605.drawer__close {
2606  width: 1%;
2607  text-align: center;
2608}
2609
2610// Button sits on right by default
2611
2612.drawer__close-button {
2613  position: relative;
2614  right: -20px;
2615  height: 100%;
2616  padding: 0 15px;
2617  color: inherit;
2618
2619  &:active {
2620    background-color: darken($colorDrawers, 5%);
2621  }
2622
2623  .icon {
2624    height: 28px;
2625    width: 28px;
2626  }
2627
2628  @include media-query($large-up) {
2629    right: 0;
2630  }
2631
2632  @include media-query($large-up) {
2633    right: -20px;
2634  }
2635}
2636
2637// Rare use case left close button
2638
2639.drawer__close--left {
2640  text-align: left;
2641
2642  .drawer__close-button {
2643    right: auto;
2644    left: -20px;
2645  }
2646}
2647
2648/*================ Drawer header/inner/footer layout ================*/
2649
2650.drawer__contents {
2651  height: 100%;
2652  display: -ms-flexbox;
2653  display: flex;
2654  -ms-flex-direction: column;
2655      flex-direction: column;
2656}
2657
2658.drawer__inner,
2659.drawer__scrollable {
2660  -ms-flex: 1 1 auto;
2661      flex: 1 1 auto;
2662  display: -ms-flexbox;
2663  display: flex;
2664  -ms-flex-direction: column;
2665      flex-direction: column;
2666  overflow-y: hidden;
2667}
2668
2669.drawer__scrollable {
2670  padding-top: $gutter / 2;
2671  overflow: hidden;
2672  overflow-y: auto;
2673  -webkit-overflow-scrolling: touch;
2674
2675  @include media-query($medium-up) {
2676    padding-top: $gutter;
2677  }
2678}
2679
2680/*================ Drawer footer ================*/
2681
2682.drawer__footer {
2683  border-top: 1px solid $colorDrawerBorder;
2684  padding-top: $gutter / 2;
2685  padding-bottom: $gutter / 2;
2686
2687  @include media-query($medium-up) {
2688    padding-top: $gutter / 1.35;
2689  }
2690}
2691
2692/*================ Cart-specific styles ================*/
2693
2694.drawer__inner.is-loading {
2695  .drawer__scrollable {
2696    transition: opacity 0.3s ease 0.7s;
2697    opacity: 0.4;
2698  }
2699}
2700
2701#CartSpecialInstructions {
2702  margin-top: 10px;
2703  margin-bottom: 10px;
2704  min-height: 60px;
2705  height: 60px;
2706  @include media-query($medium-up) {
2707    min-height: 80px;
2708    height: 80px;
2709  }
2710}
2711
2712/*================ Partials | Ajax Cart ================*/
2713
2714.ajaxcart__row {
2715  > .grid {
2716    margin-left: -$gutter / 2;
2717
2718    > .grid__item {
2719      padding-left: $gutter / 2;
2720    }
2721  }
2722}
2723
2724.ajaxcart__product {
2725  position: relative;
2726  max-height: 500px;
2727
2728  &.is-removed {
2729    max-height: 0;
2730    overflow: hidden;
2731    visibility: hidden;
2732    -webkit-backface-visibility: hidden;
2733            backface-visibility: hidden;
2734    transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
2735  }
2736}
2737
2738.ajaxcart__row {
2739  padding-bottom: $gutter / 2;
2740  margin-bottom: $gutter / 2;
2741  border-bottom: 1px solid $colorDrawerBorder;
2742
2743  @include media-query($medium-up) {
2744    padding-bottom: ($gutter / 1.35);
2745    margin-bottom: ($gutter / 1.35);
2746  }
2747}
2748
2749.ajaxcart__product:last-child .ajaxcart__row {
2750  border-bottom: 0 none;
2751  padding-bottom: 0;
2752}
2753
2754.ajaxcart__product-image {
2755  display: block;
2756  overflow: hidden;
2757  padding-top: 3px;
2758
2759  img {
2760    display: block;
2761    margin: 0 auto;
2762    max-width: 100%;
2763  }
2764}
2765
2766.ajaxcart__product-name,
2767.ajaxcart__product-meta {
2768  display: block;
2769}
2770
2771.ajaxcart__product-name--wrapper {
2772  margin-bottom: 11px;
2773}
2774
2775.ajaxcart__product-name + .ajaxcart__product-meta {
2776  padding-top: 8px;
2777}
2778
2779/*================ Partials | Blank States ================*/
2780
2781$color-blankstate: rgba($colorTextBody, 0.35);
2782
2783$color-blankstate-background: #f4f4f4;
2784
2785.placeholder-svg {
2786  fill: $color-blankstate;
2787  background-color: $color-blankstate-background;
2788  width: 100%;
2789  height: 100%;
2790  max-width: 100%;
2791  max-height: 100%;
2792  display: block;
2793  padding: 30px 0;
2794}
2795
2796.placeholder-noblocks {
2797  padding: 40px;
2798  text-align: center;
2799}
2800
2801/*================ Animations ================*/
2802
2803// Utilities
2804
2805.animation-cropper {
2806  overflow: hidden;
2807  display: -ms-inline-flexbox;
2808  display: inline-flex;
2809}
2810
2811@for $i from 1 to 20 {
2812  .animation-delay-#{$i} {
2813    animation-delay: cart-animation-iteration($i, 0s) !important;
2814  }
2815}
2816
2817// Page transitions
2818
2819@if ($animate_page_transitions) {
2820  $page_transition_duration: 0.8;
2821  $page_transition_duration_out: 0.3;
2822
2823  @if ($animate_page_transition_style == 'page-slow-fade') {
2824    $page_transition_duration: 1.2;
2825    $page_transition_duration_out: 0.5;
2826  }
2827
2828  @if ($animate_page_transition_style == 'page-slide-reveal-across' or $animate_page_transition_style == 'page-slide-reveal-down') {
2829    .transition-body:before {
2830      content: '';
2831      position: fixed;
2832      top: 0;
2833      left: 0;
2834      right: 0;
2835      bottom: 0;
2836      background: $colorBody;
2837      z-index: 10;
2838      will-change: transform;
2839    }
2840
2841    .loaded .transition-body:before {
2842      animation: $animate_page_transition_style #{$page_transition_duration}s ease forwards;
2843    }
2844
2845    .unloading .transition-body:before {
2846      animation: #{$animate_page_transition_style}-out #{$page_transition_duration_out}s ease forwards;
2847    }
2848  } @else {
2849    .transition-body {
2850      opacity: 0;
2851
2852      .no-js & {
2853        opacity: 1;
2854      }
2855    }
2856
2857    .loaded .transition-body {
2858      animation: $animate_page_transition_style #{$page_transition_duration}s ease forwards;
2859    }
2860
2861    .unloading .transition-body {
2862      animation: #{$animate_page_transition_style}-out #{$page_transition_duration_out}s ease forwards;
2863    }
2864  }
2865
2866  @keyframes page-fade-in-up {
2867    0% {
2868      opacity: 0;
2869    }
2870    100% {
2871      opacity: 1;
2872    }
2873  }
2874  @keyframes page-fade-in-up-out {
2875    0% {
2876      opacity: 1;
2877    }
2878    100% {
2879      opacity: 0;
2880    }
2881  }
2882
2883  @keyframes page-slow-fade {
2884    0% {
2885      opacity: 0;
2886    }
2887    100% {
2888      opacity: 1;
2889    }
2890  }
2891  @keyframes page-slow-fade-out {
2892    0% {
2893      opacity: 1;
2894    }
2895    100% {
2896      opacity: 0;
2897    }
2898  }
2899
2900  @keyframes page-slide-reveal-across {
2901    0% {
2902      transform: translateX(0);
2903    }
2904    100% {
2905      transform: translateX(100vw);
2906    }
2907  }
2908  @keyframes page-slide-reveal-across-out {
2909    0% {
2910      transform: translateX(-100vw);
2911    }
2912    100% {
2913      transform: translateX(0);
2914    }
2915  }
2916
2917  @keyframes page-slide-reveal-down {
2918    0% {
2919      transform: translateY(0);
2920    }
2921    100% {
2922      transform: translateY(110vh);
2923    }
2924  }
2925  @keyframes page-slide-reveal-down-out {
2926    0% {
2927      transform: translateY(110vh);
2928    }
2929    100% {
2930      transform: translateY(0);
2931    }
2932  }
2933}
2934
2935// Global image animations
2936
2937.image-wrap {
2938  background: $colorSmallImageBg;
2939  overflow: hidden;
2940}
2941
2942.image-wrap img:not([role="presentation"]) {
2943  display: block;
2944
2945  .no-js &.lazyload {
2946    display: none;
2947  }
2948}
2949
2950@if ($animate_images) {
2951  .image-wrap {
2952    img:not([role="presentation"]),
2953    svg,
2954    .animate-me {
2955      opacity: 0;
2956
2957      .no-js & {
2958        opacity: 1;
2959      }
2960    }
2961  }
2962
2963  .aos-animate .image-wrap,
2964  .aos-animate.image-wrap {
2965    .lazyloaded:not([role="presentation"]),
2966    svg,
2967    .animate-me,
2968    img[data-modal-lazy] {
2969      animation: $animate_images_style 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
2970    }
2971  }
2972
2973  .image-wrap img {
2974    [data-aos="row-of-3"].aos-animate:nth-child(3n+2) & {
2975      animation-delay: 200ms;
2976    }
2977
2978    [data-aos="row-of-3"].aos-animate:nth-child(3n+3) & {
2979      animation-delay: 400ms;
2980    }
2981
2982    [data-aos="row-of-4"].aos-animate:nth-child(4n+2) & {
2983      animation-delay: 150ms;
2984    }
2985
2986    [data-aos="row-of-4"].aos-animate:nth-child(4n+3) & {
2987      animation-delay: 300ms;
2988    }
2989
2990    [data-aos="row-of-4"].aos-animate:nth-child(4n+4) & {
2991      animation-delay: 450ms;
2992    }
2993
2994    [data-aos="row-of-5"].aos-animate:nth-child(5n+2) & {
2995      animation-delay: 100ms;
2996    }
2997
2998    [data-aos="row-of-5"].aos-animate:nth-child(5n+3) & {
2999      animation-delay: 200ms;
3000    }
3001
3002    [data-aos="row-of-5"].aos-animate:nth-child(5n+4) & {
3003      animation-delay: 300ms;
3004    }
3005
3006    [data-aos="row-of-5"].aos-animate:nth-child(5n+5) & {
3007      animation-delay: 400ms;
3008    }
3009  }
3010}
3011
3012// Overlay animations (modals, panels)
3013
3014@keyframes overlay-on {
3015  from { opacity: 0; }
3016  to { opacity: 0.6; }
3017}
3018
3019@keyframes overlay-off {
3020  from { opacity: 0.6; }
3021  to { opacity: 0; }
3022}
3023
3024@keyframes full-overlay-on {
3025  from { opacity: 0; }
3026  to { opacity: 1; }
3027}
3028
3029@keyframes full-overlay-off {
3030  from { opacity: 1; }
3031  to { opacity: 0; }
3032}
3033
3034@keyframes modal-open {
3035  from {
3036    opacity: 0;
3037    transform: translateY(30px);
3038  }
3039  to {
3040    opacity: 1;
3041    transform: translateY(0);
3042  }
3043}
3044
3045@keyframes modal-closing {
3046  from {
3047    opacity: 1;
3048    transform: scale(1);
3049  }
3050  to {
3051    opacity: 0;
3052    transform: scale(0.9);
3053  }
3054}
3055
3056// Text animations
3057
3058@keyframes rise-up {
3059  from {
3060    opacity: 1;
3061    transform: translateY(120%);
3062  }
3063  to {
3064    opacity: 1;
3065    transform: translateY(0%);
3066  }
3067}
3068
3069@keyframes rise-up-out {
3070  from {
3071    opacity: 1;
3072    transform: translateY(0%);
3073  }
3074  to {
3075    opacity: 1;
3076    transform: translateY(-120%);
3077  }
3078}
3079
3080@keyframes paint-across {
3081  from {
3082    opacity: 1;
3083    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
3084            clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
3085  }
3086  to {
3087    opacity: 1;
3088    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3089            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3090  }
3091}
3092
3093@keyframes paint-across-small {
3094  from {
3095    opacity: 1;
3096    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
3097            clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
3098  }
3099  to {
3100    opacity: 1;
3101    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3102            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3103  }
3104}
3105
3106@keyframes paint-across-out {
3107  from {
3108    opacity: 1;
3109    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3110            clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
3111  }
3112  to {
3113    opacity: 1;
3114    -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
3115            clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
3116  }
3117}
3118
3119@keyframes fade-in {
3120  from {
3121    opacity: 0;
3122  }
3123  to {
3124    opacity: 1;
3125  }
3126}
3127
3128@keyframes fade-in-small {
3129  from {
3130    opacity: 0;
3131  }
3132  to {
3133    opacity: 1;
3134  }
3135}
3136
3137@keyframes fade-in-out {
3138  from {
3139    opacity: 1;
3140  }
3141  to {
3142    opacity: 0;
3143  }
3144}
3145
3146// Utility
3147
3148@keyframes fade-out {
3149  from {
3150    opacity: 1;
3151  }
3152  to {
3153    opacity: 0;
3154  }
3155}
3156
3157// Background image animations
3158
3159@keyframes zoom-fade {
3160  from {
3161    opacity: 0;
3162    transform: scale(1.4,1.4);
3163  }
3164  to {
3165    opacity: 1;
3166    transform: scale(1,1);
3167  }
3168}
3169
3170@keyframes zoom-fade-password {
3171  0% {
3172    opacity: 0;
3173    transform: scale(1.4,1.4);
3174  }
3175  5% {
3176    opacity: 1;
3177    transform: scale(1,1);
3178  }
3179  100% {
3180    opacity: 1;
3181    transform: scale(1.2,1.2);
3182  }
3183}
3184
3185@keyframes zoom-fade-small {
3186  0% {
3187    opacity: 0;
3188    transform: scale(1.1,1.1);
3189  }
3190  10% {
3191    opacity: 1;
3192    transform: scale(1,1);
3193  }
3194  12% {
3195    opacity: 1;
3196    transform: scale(1,1);
3197  }
3198  100% {
3199    opacity: 1;
3200    transform: scale(1.03,1.03);
3201  }
3202}
3203
3204@keyframes kenburns {
3205  0% {
3206    opacity: 0;
3207    transform: scale(1.5);
3208    animation-timing-function: cubic-bezier(0.12, 0.63, 0.6, 0.74);
3209  }
3210  10% {
3211    opacity: 1;
3212    transform: scale(1.4);
3213    animation-timing-function: linear;
3214  }
3215  100% {
3216    opacity: 1;
3217    transform: scale(1);
3218  }
3219}
3220
3221@keyframes kenburns-out {
3222  0% {
3223    opacity: 1;
3224    transform: scale(1);
3225    animation-timing-function: ease-out;
3226  }
3227  100% {
3228    opacity: 0;
3229    transform: scale(1.15);
3230  }
3231}
3232
3233// Loading animations
3234
3235@keyframes loading {
3236  0% {    width: 0px;   }
3237  60% {   width: 100px; margin-left: -50px; }
3238  100% {  margin-left: 50px;  width: 0px; }
3239}
3240
3241.loading:after,
3242.loading:before {
3243  content: '';
3244  position: absolute;
3245  width: 100px;
3246  height: 5px;
3247  background: color-control($colorLargeImageBg, 1);
3248  left: 50%;
3249  top: 50%;
3250  margin: -3px 0 0 -50px;
3251  z-index: 25;
3252  opacity: 0;
3253
3254  .no-js & {
3255    display: none;
3256  }
3257}
3258
3259.loading:before {
3260  background: color-control($colorLargeImageBg, 0.15);
3261  animation: fade-in 0.5s forwards 0s;
3262}
3263
3264.loading:after {
3265  animation: preloading 0.5s ease 0.3s infinite;
3266}
3267
3268.loading--delayed:before {
3269  animation-delay: 0.8s !important;
3270  animation-duration: 1s !important;
3271}
3272
3273.loading--delayed:after {
3274  animation-delay: 1.3s !important;
3275}
3276
3277@keyframes preloading {
3278  0% {   width: 0px; opacity: 0; }
3279  60% {  width: 100px; margin-left: -50px; opacity: 1; }
3280  100% {  margin-left: 50px;  width: 0px; opacity: 1; }
3281}
3282
3283// Ajax load products
3284
3285@keyframes grid-product__loading {
3286  0% { opacity: 0; }
3287  60% { opacity: 0.2; }
3288  100% { opacity: 0; }
3289}
3290
3291// Delay animations, used in drawers
3292
3293.appear-animation {
3294  opacity: 0;
3295  transform: translateY(100px);
3296}
3297
3298@for $i from 1 to 20 {
3299  .appear-delay-#{$i} {
3300    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.1s),
3301                opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) cart-animation-iteration($i, 0.2s);
3302  }
3303}
3304
3305.js-drawer-open .appear-animation {
3306  opacity: 1;
3307  transform: translateY(0px);
3308}
3309
3310.js-drawer-closing .appear-animation {
3311  transition-duration: 0s;
3312  transition-delay: 0.5s;
3313}
3314
3315// General review styles
3316
3317.spr-badge-starrating,
3318.spr-starrating,
3319.spr-starratings,
3320.spr-icon-star-empty,
3321.spr-icon-star-hover,
3322.spr-icon-star-hover:hover {
3323  color: #f3c200;
3324}
3325
3326// Star size
3327
3328.spr-icon {
3329  font-size: 14px !important;
3330  vertical-align: text-bottom;
3331}
3332
3333// Match H3 styles
3334
3335.spr-header-title {
3336  font-size: em(floor($type_header_base_size * 0.85 * 0.85)) !important;
3337  @include media-query($medium-up) {
3338    font-size: em(floor($type_header_base_size * 0.85)) !important;
3339  }
3340}
3341
3342.spr-container.spr-container {
3343  padding: 0;
3344  border: 0;
3345}
3346
3347.product-reviews {
3348  #shopify-product-reviews {
3349    margin: 0;
3350  }
3351
3352  .spr-summary-actions-newreview {
3353    float: none;
3354  }
3355
3356  .spr-review-content-body,
3357  .spr-form-label {
3358    font-size: $type_base_size;
3359    line-height: 1.563;
3360  }
3361
3362  .spr-review-header-byline {
3363    font-size: 11px;
3364    opacity: 1;
3365
3366    strong {
3367      font-weight: normal;
3368    }
3369  }
3370
3371  .spr-form-label {
3372    display: block;
3373    text-align: left;
3374  }
3375
3376  .spr-summary-caption,
3377  .spr-summary-actions {
3378    display: block;
3379  }
3380
3381  .spr-summary-actions {
3382    margin-top: 10px;
3383  }
3384}
3385
3386// Review styles in full width section
3387
3388.product-reviews--full {
3389  @include media-query($medium-up) {
3390    .spr-reviews {
3391      display: -ms-flexbox;
3392      display: flex;
3393      -ms-flex-wrap: wrap;
3394          flex-wrap: wrap;
3395    }
3396
3397    .spr-review:first-child {
3398      margin-top: 0;
3399    }
3400
3401    .spr-review {
3402      -ms-flex: 1 1 40%;
3403          flex: 1 1 40%;
3404      padding: 20px;
3405      border: 1px solid $colorBorder;
3406      margin-left: $grid-gutter;
3407      margin-bottom: $grid-gutter;
3408
3409      &:nth-child(2n+1) {
3410        margin-left: 0;
3411      }
3412
3413      &:last-child {
3414        padding-bottom: 20px;
3415      }
3416    }
3417  }
3418}
3419
3420// Review styles in product grid
3421
3422.grid-product {
3423  .spr-badge[data-rating="0.0"] {
3424    display: none;
3425  }
3426
3427  .spr-badge-starrating {
3428    font-size: em(11px);
3429    @include media-query($medium-up) {
3430      font-size: em(12px);
3431    }
3432  }
3433
3434  .spr-icon {
3435    margin-right: 1px;
3436  }
3437
3438  .spr-badge-caption {
3439    font-size: em(11px);
3440    @include media-query($medium-up) {
3441      font-size: em(12px);
3442    }
3443    margin-left: 4px;
3444  }
3445}
3446
3447// Review styles in expandable tab
3448
3449.product-reviews--tab {
3450  .collapsible-trigger {
3451    .spr-badge-caption {
3452      margin-left: 0;
3453    }
3454
3455    .spr-badge-starrating {
3456      font-size: em(13px);
3457      margin-right: 10px;
3458      @include media-query($medium-up) {
3459        font-size: em(14px);
3460      }
3461    }
3462
3463    .spr-badge[data-rating="0.0"] {
3464      .spr-starrating {
3465        display: none;
3466      }
3467    }
3468  }
3469
3470  .spr-icon {
3471    margin-right: 1px;
3472  }
3473
3474  .spr-badge-caption {
3475    margin-left: 4px;
3476  }
3477
3478  .spr-header-title,
3479  .spr-summary-starrating,
3480  .spr-summary-caption {
3481    display: none !important;
3482  }
3483
3484  .spr-summary-actions a,
3485  .spr-button {
3486    margin-top: 0 !important;
3487  }
3488
3489  .spr-button-primary {
3490    float: none;
3491  }
3492
3493  @media only screen and (max-width: 480px) {
3494    .spr-summary {
3495      text-align: left;
3496    }
3497  }
3498
3499  // Form
3500  .spr-form-title {
3501    display: none;
3502  }
3503
3504  .spr-form-label {
3505    font-size: 13px !important;
3506  }
3507
3508  // Review
3509  .spr-review-header .spr-starratings {
3510    font-size: 14px;
3511  }
3512}
3513
3514.spr-pagination {
3515  -ms-flex: 1 1 100%;
3516      flex: 1 1 100%;
3517}
3518
3519/*================ Module-specific styles ================*/
3520
3521/*================ Module | Footer ================*/
3522
3523.site-footer {
3524  padding-bottom: $gutter;
3525  background-color: $colorFooter;
3526  color: $colorFooterText;
3527
3528  @include media-query($medium-up) {
3529    padding-top: $gutter * 2;
3530    padding-bottom: $gutter * 2;
3531  }
3532
3533  input,
3534  textarea,
3535  select,
3536  .faux-select,
3537  .collapsible-content p,
3538  .site-footer__linklist a {
3539    font-size: em(floor($type_base_size * 0.93));
3540  }
3541
3542  input,
3543  textarea,
3544  select,
3545  .faux-select {
3546    background-color: $colorFooter;
3547    color: $colorFooterText;
3548    border: 1px solid rgba($colorFooterText, 0.12);
3549
3550    &:active,
3551    &:focus {
3552      border-color: $colorFooterText;
3553    }
3554
3555    &::-webkit-input-placeholder {
3556      color: $colorFooterText;
3557      opacity: 1;
3558    }
3559
3560    &:-moz-placeholder {
3561      color: $colorFooterText;
3562      opacity: 1;
3563    }
3564
3565    &::-moz-placeholder {
3566      color: $colorFooterText;
3567      opacity: 1;
3568    }
3569
3570    &:-ms-input-placeholder {
3571      color: $colorFooterText;
3572      opacity: 1;
3573    }
3574
3575    &::-ms-input-placeholder {
3576      color: $colorFooterText;
3577      opacity: 1;
3578    }
3579  }
3580
3581  select,
3582  .faux-select {
3583    padding: 7px 36px 7px 10px;
3584    background-image: url({{ "ico-select-footer.svg" | asset_url | split: '?' | first }});
3585  }
3586
3587  @include media-query($small) {
3588    padding-bottom: 0;
3589
3590    .grid__item {
3591      padding-bottom: 5px;
3592
3593      &:after {
3594        content: '';
3595        border-bottom: 1px solid $colorFooterText;
3596        opacity: 0.12;
3597        display: block;
3598      }
3599
3600      &:last-child:after,
3601      &:first-child:after {
3602        display: none;
3603      }
3604    }
3605  }
3606
3607  a {
3608    color: $colorFooterText;
3609  }
3610}
3611
3612.site-footer__bottom {
3613  padding-top: $gutter;
3614
3615  @include media-query($medium-up) {
3616    padding-top: $gutter * 2;
3617  }
3618}
3619
3620.site-footer__bottom-block {
3621  padding-bottom: $gutter;
3622}
3623
3624.footer__clear {
3625  clear: both;
3626  height: $gutter;
3627}
3628
3629.footer__title {
3630  @include headerAccentFontStack;
3631  color: $colorFooterText;
3632  @if $type_header_accent_transform {
3633    font-size: em(ceil($type_header_base_size * 0.45));
3634  } @else {
3635    font-size: em(ceil($type_header_base_size * 0.52));
3636  }
3637
3638  @include media-query($medium-up) {
3639    @if $type_header_accent_transform {
3640      font-size: em(ceil($type_header_base_size * 0.45));
3641    } @else {
3642      font-size: em(ceil($type_header_base_size * 0.55));
3643    }
3644    margin-bottom: 20px;
3645  }
3646}
3647
3648.footer__copyright,
3649.footer__powered_by {
3650  font-size: em(10px);
3651
3652  @include media-query($medium-up) {
3653    font-size: em(12px);
3654  }
3655}
3656
3657/*================ Footer menus ================*/
3658
3659.site-footer__linklist {
3660  margin: 0;
3661
3662  a {
3663    display: block;
3664    padding: 4px 0;
3665  }
3666}
3667
3668/*================ Footer newsletter ================*/
3669
3670.footer__newsletter {
3671  position: relative;
3672}
3673
3674.footer__newsletter-input {
3675  max-width: 300px;
3676  width: 100%;
3677  padding-left: 45px;
3678  border: 1px solid rgba($colorFooterText, 0.6);
3679}
3680
3681.footer__newsletter-btn {
3682  position: absolute;
3683  top: 0;
3684  left: 0;
3685  bottom: 0;
3686  width: 46px;
3687  color: $colorFooterText;
3688
3689  .icon {
3690    width: 26px;
3691    height: 24px;
3692  }
3693}
3694
3695/*================ Logo and social block ================*/
3696
3697@include media-query($small) {
3698  .footer__logo-social {
3699    display: -ms-flexbox;
3700    display: flex;
3701    -ms-flex-align: center;
3702        align-items: center;
3703    padding: ($gutter / 2) 0;
3704
3705    .footer__logo {
3706      -ms-flex: 0 1 auto;
3707          flex: 0 1 auto;
3708    }
3709
3710    .footer__social {
3711      -ms-flex: 1 1 auto;
3712          flex: 1 1 auto;
3713      text-align: right;
3714    }
3715  }
3716}
3717
3718// Logo
3719
3720.footer__logo {
3721  @include media-query($medium-up) {
3722    margin-bottom: $gutter / 1.5;
3723  }
3724
3725  a {
3726    display: block;
3727  }
3728
3729  img {
3730    display: block;
3731    transform: translateZ(0);
3732    max-height: 100%;
3733  }
3734}
3735
3736// Social icons
3737
3738.footer__social {
3739  margin: 0;
3740
3741  li {
3742    display: inline-block;
3743    margin: 0 0 0 15px;
3744
3745    @include media-query($medium-up) {
3746      margin: 0 15px 15px 0;
3747    }
3748  }
3749
3750  a {
3751    display: block;
3752  }
3753
3754  .icon {
3755    width: 22px;
3756    height: 22px;
3757
3758    @include media-query($medium-up) {
3759      width: 24px;
3760      height: 24px;
3761    }
3762
3763    &.icon--wide {
3764      width: 40px;
3765    }
3766  }
3767}
3768
3769// Collapsible buttons
3770
3771.footer__collapsible {
3772  @include media-query($small) {
3773    padding: 0 0 ($gutter / 2) 0;
3774  }
3775}
3776
3777.footer_collapsible--disabled {
3778  @include media-query($small) {
3779    padding-top: $gutter / 2;
3780  }
3781}
3782
3783@if ($animate_underlines) {
3784  .collapsible-content p {
3785    a:after {
3786      content: '';
3787      position: absolute;
3788      bottom: -2px;
3789      left: 0;
3790      width: 0%;
3791      border-bottom: 2px solid rgba($colorFooterText,1);
3792      transition: width 0.5s ease;
3793    }
3794    a {
3795      position: relative;
3796      text-decoration: none;
3797      border-bottom: 2px solid rgba($colorFooterText,0.1);
3798      &:hover:after,
3799      &:focus:after {
3800        width: 100%;
3801      }
3802    }
3803  }
3804}
3805
3806// Multi-language/currency selectors
3807
3808.multi-selectors {
3809  display: -ms-flexbox;
3810  display: flex;
3811  -ms-flex-pack: center;
3812      justify-content: center;
3813  -ms-flex-wrap: wrap;
3814      flex-wrap: wrap;
3815}
3816
3817.multi-selectors__item {
3818  margin: 0 10px;
3819}
3820
3821/*================ Payment Icons ================*/
3822
3823.payment-icons {
3824  -webkit-user-select: none;
3825      -ms-user-select: none;
3826          user-select: none;
3827  cursor: default;
3828
3829  li {
3830    cursor: default;
3831    margin: 0 4px 0;
3832  }
3833}
3834
3835/*================ Module | Notes and Form Feedback ================*/
3836
3837.note,
3838.errors {
3839  border-radius: $input-radius;
3840  padding: 6px 12px;
3841  margin-bottom: $gutter / 2;
3842  border: 1px solid transparent;
3843  text-align: left;
3844
3845  ul,
3846  ol {
3847    margin-top: 0;
3848    margin-bottom: 0;
3849  }
3850
3851  li:last-child {
3852    margin-bottom: 0;
3853  }
3854
3855  p {
3856    margin-bottom: 0;
3857  }
3858}
3859
3860.note {
3861  border-color: $colorBorder;
3862}
3863
3864.errors {
3865  ul {
3866    list-style: disc outside;
3867    margin-left: 20px;
3868  }
3869}
3870
3871.note--success {
3872  color: $successGreen;
3873  background-color: $successGreenBg;
3874  border-color: $successGreen;
3875
3876  a {
3877    color: $successGreen;
3878    text-decoration: underline;
3879
3880    &:hover {
3881      text-decoration: none;
3882    }
3883  }
3884}
3885
3886.form-error,
3887.errors {
3888  color: $errorRed;
3889  background-color: $errorRedBg;
3890  border-color: $errorRed;
3891
3892  a {
3893    color: $errorRed;
3894    text-decoration: underline;
3895
3896    &:hover {
3897      text-decoration: none;
3898    }
3899  }
3900}
3901
3902/*================ Module | Pagination ================*/
3903
3904.pagination {
3905  @include baseFontStack;
3906  margin: 0;
3907  padding: ($gutter * 2) 0 0;
3908  text-align: center;
3909  font-size: em(15px);
3910  @include media-query($small) {
3911    font-size: em(14px);
3912  }
3913
3914  > span {
3915    display: inline-block;
3916    line-height: 1;
3917  }
3918
3919  a {
3920    display: inline-block;
3921  }
3922
3923  a,
3924  .page.current {
3925    padding: 8px 12px;
3926  }
3927
3928  .page.current {
3929    opacity: 0.3;
3930  }
3931
3932  // Hard code font family for arrows as some fonts don't include them
3933  .next,
3934  .prev {
3935    color: $colorBtnPrimaryText;
3936    background: $colorBtnPrimary;
3937    width: 43px;
3938    height: 43px;
3939    line-height: 27px;
3940    border-radius: 43px;
3941    margin: 0 10px;
3942    @include media-query($small) {
3943      width: 35px;
3944      height: 35px;
3945      line-height: 19px;
3946    }
3947    .icon {
3948      color: $colorBtnPrimaryText;
3949      width: 13px;
3950      height: 13px;
3951      @include media-query($small) {
3952        width: 12px;
3953        height: 12px;
3954      }
3955    }
3956  }
3957}
3958
3959/*================ Module | Rich Text Editor ================*/
3960
3961.rte {
3962  @include clearfix;
3963
3964  & + & {
3965    margin-top: $gutter;
3966  }
3967
3968  img {
3969    height: auto;
3970  }
3971
3972  p,
3973  ul,
3974  ol,
3975  table {
3976    margin-bottom: 25px;
3977  }
3978
3979  ul {
3980    ul {
3981      margin-bottom: 0;
3982    }
3983  }
3984
3985  a:not(.rte__image) {
3986    text-decoration: none;
3987    border-bottom: 2px solid rgba($colorTextBody,0.1);
3988    position: relative;
3989  }
3990
3991  @if ($animate_underlines) {
3992    a:not(.btn):after {
3993      content: '';
3994      position: absolute;
3995      bottom: -2px;
3996      left: 0;
3997      width: 0%;
3998      border-bottom: 2px solid currentColor;
3999      transition: width 0.5s ease;
4000    }
4001
4002    a:not(.btn) {
4003      &:hover:after,
4004      &:focus:after {
4005        width: 100%;
4006      }
4007    }
4008
4009    a.rte__image:after {
4010      content: none;
4011    }
4012  }
4013
4014  // Add some top margin to headers from the rich text editor
4015  h1, h2, h3, h4, h5, h6 {
4016    margin-top: 2.5em;
4017    margin-bottom: 1em;
4018  }
4019
4020  h1, h2, h3, h4, h5, h6 {
4021    &:first-child {
4022      margin-top: 0;
4023    }
4024
4025    a {
4026      text-decoration: none;
4027    }
4028  }
4029
4030  // In case merchants paste meta tags into their content by accident
4031  meta:first-child {
4032    & + h1, & + h2, & + h3, & + h4, & + h5, & + h6 {
4033      margin-top: 0;
4034    }
4035  }
4036
4037  > div {
4038    margin-bottom: $gutter / 2;
4039  }
4040
4041  li {
4042    margin-bottom: 0;
4043  }
4044
4045  > p:last-child {
4046    margin-bottom: 0;
4047  }
4048
4049  table {
4050    table-layout: fixed;
4051  }
4052}
4053
4054.rte--block {
4055  margin-bottom: 20px;
4056}
4057
4058.rte-setting {
4059  > p:last-child {
4060    margin-bottom: 0;
4061  }
4062}
4063
4064.text-center .rte,
4065.text-center.rte {
4066  ul,
4067  ol {
4068    list-style-position: inside;
4069    margin-left: 0;
4070  }
4071}
4072
4073.rte--nomargin {
4074  margin-bottom: 0;
4075}
4076
4077.rte--indented-images img:not([style]),
4078.rte--indented-images img[style="float: none;"] {
4079  max-width: 100vw;
4080  margin: 0 -22px;
4081  display: block;
4082  @include media-query($medium-up) {
4083    max-width: 130%;
4084    margin: $gutter -15%;
4085  }
4086}
4087
4088// Some people use text-align on the parent p tag, so do not style those images
4089
4090.rte--indented-images p[style] img {
4091  display: inline;
4092  margin: 0;
4093  max-width: 100%;
4094}
4095
4096// Header layout
4097
4098.header-layout {
4099  display: -ms-flexbox;
4100  display: flex;
4101  -ms-flex-pack: justify;
4102      justify-content: space-between;
4103}
4104
4105.header-layout--center {
4106  -ms-flex-align: center;
4107      align-items: center;
4108}
4109
4110// Header items
4111
4112.header-item {
4113  display: -ms-flexbox;
4114  display: flex;
4115  -ms-flex-align: center;
4116      align-items: center;
4117  -ms-flex: 1 1 auto;
4118      flex: 1 1 auto;
4119}
4120
4121.header-item--logo {
4122  -ms-flex: 0 0 auto;
4123      flex: 0 0 auto;
4124}
4125
4126.header-item--icons {
4127  -ms-flex-pack: end;
4128      justify-content: flex-end;
4129  -ms-flex: 0 1 auto;
4130      flex: 0 1 auto;
4131}
4132
4133/*================ Header layout specific styles ================*/
4134
4135// Same default logo and icon container size, logo block width overrides
4136
4137.header-layout--left-center {
4138  .header-item--logo,
4139  .header-item--icons {
4140    -ms-flex: 0 0 200px;
4141        flex: 0 0 200px;
4142    max-width: 50%;
4143
4144    @include media-query($medium-up) {
4145      min-width: 130px; // approx width of 2 icons
4146    }
4147  }
4148}
4149
4150.header-layout[data-logo-align="center"] {
4151  .header-item--logo {
4152    @include media-query($medium-up) {
4153      margin: 0 $gutter / 1.5;
4154    }
4155  }
4156
4157  .header-item--navigation,
4158  .header-item--icons {
4159    -ms-flex: 1 1 130px;
4160        flex: 1 1 130px; // aprox width of 2 icons
4161  }
4162}
4163
4164.header-layout[data-logo-align="left"] {
4165  .site-header__logo {
4166    margin-right: $gutter / 3;
4167  }
4168}
4169
4170.header-item--logo-split {
4171  display: -ms-flexbox;
4172  display: flex;
4173  -ms-flex-pack: center;
4174      justify-content: center;
4175  -ms-flex-align: center;
4176      align-items: center;
4177  -ms-flex: 1 1 100%;
4178      flex: 1 1 100%;
4179
4180  .header-item:not(.header-item--logo) {
4181    text-align: center;
4182    -ms-flex: 1 1 20%;
4183        flex: 1 1 20%;
4184  }
4185}
4186
4187.header-item--split-left {
4188  -ms-flex-pack: end;
4189      justify-content: flex-end;
4190}
4191
4192// Icon alignment
4193
4194.header-item--left {
4195  .site-nav {
4196    margin-left: -($siteNavIconPadding);
4197
4198    @include media-query($small) {
4199      margin-left: -($siteNavItemPadding / 2);
4200    }
4201  }
4202}
4203
4204.header-item--icons {
4205  .site-nav {
4206    margin-right: -($siteNavIconPadding);
4207
4208    @include media-query($small) {
4209      margin-right: -($siteNavItemPadding / 2);
4210    }
4211  }
4212}
4213
4214.site-header {
4215  position: relative;
4216  padding: 10px 0;
4217  background: $colorNav;
4218
4219  @include media-query($medium-up) {
4220    padding: 30px 0;
4221  }
4222}
4223
4224.site-header--stuck {
4225  position: fixed;
4226  left: 0;
4227  right: 0;
4228  top: 0;
4229  transform: translate3d(0, -100%, 0);
4230  transition: none;
4231  z-index: $z-index-stuck-header;
4232
4233  // Rearrangement for when top search drawer is open so nav is above overlay
4234  .js-drawer-open--search & {
4235    z-index: $z-index-header-search;
4236  }
4237
4238  @include media-query($medium-up) {
4239    padding: 15px 0;
4240  }
4241}
4242
4243.site-header--opening {
4244  transform: translate3d(0, 0, 0);
4245  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
4246}
4247
4248.site-header__logo {
4249  margin: ($gutter / 3) 0;
4250  display: block;
4251
4252  @include media-query($medium-up) {
4253    .text-center & {
4254      padding-right: 0;
4255      margin: ($gutter / 3) auto;
4256    }
4257  }
4258
4259  .header-layout[data-logo-align="center"] & {
4260    margin-left: auto;
4261    margin-right: auto;
4262    text-align: center;
4263  }
4264
4265  a,
4266  a:hover {
4267    text-decoration: none;
4268  }
4269
4270  img {
4271    display: block;
4272
4273    .header-layout--center & {
4274      margin: 0 auto;
4275    }
4276  }
4277}
4278
4279.site-header__logo-link {
4280  display: -ms-flexbox;
4281  display: flex;
4282  -ms-flex-align: center;
4283      align-items: center;
4284  color: $colorNavText;
4285
4286  &:hover {
4287    color: $colorNavText;
4288  }
4289
4290  @include media-query($small) {
4291    margin: 0 auto;
4292  }
4293}
4294
4295// Sticky header on top of image/slideshow
4296
4297.header-wrapper--overlay {
4298  position: absolute;
4299  top: 0;
4300  left: 0;
4301  right: 0;
4302  z-index: $z-index-overlay-header;
4303  background: none;
4304  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
4305
4306  .site-header:not(.site-header--stuck) {
4307    background: none;
4308  }
4309
4310  // Rearrangement for when top search drawer is open so nav is above overlay
4311  .js-drawer-open--search & {
4312    z-index: $z-index-header-search;
4313  }
4314}
4315
4316.site-header__search-container {
4317  position: absolute;
4318  left: 0;
4319  right: 0;
4320  bottom: 100%;
4321  height: 100%;
4322  z-index: $z-index-header-search;
4323  overflow: hidden;
4324  transition: all 0.3s cubic-bezier(0, 0, 0.38, 1);
4325
4326  &.is-active {
4327    overflow: visible;
4328    bottom: 0;
4329    transition: none;
4330  }
4331}
4332
4333.site-header__search {
4334  position: absolute;
4335  top: 0;
4336  left: 0;
4337  bottom: 0;
4338  right: 0;
4339  z-index: $z-index-header-search;
4340  display: -ms-flexbox;
4341  display: flex;
4342  transform: translate3d(0, -110%, 0);
4343  background-color: $colorBody;
4344  color: $colorTextBody;
4345  transition: all 0.3s cubic-bezier(0, 0, 0.38, 1);
4346
4347  .page-width {
4348    -ms-flex: 1 1 100%;
4349        flex: 1 1 100%;
4350    display: -ms-flexbox;
4351    display: flex;
4352    -ms-flex-align: stretch;
4353        align-items: stretch;
4354
4355    @include media-query($small) {
4356      padding: 0;
4357    }
4358  }
4359
4360  .is-active & {
4361    transform: translate3d(0, 0, 0);
4362  }
4363
4364  .icon {
4365    width: 30px;
4366    height: 30px;
4367  }
4368}
4369
4370.site-header__search-form {
4371  -ms-flex: 1 1 auto;
4372      flex: 1 1 auto;
4373  display: -ms-flexbox;
4374  display: flex;
4375
4376  @include media-query($medium-up) {
4377    padding: ($gutter / 2) 0;
4378  }
4379}
4380
4381.site-header__search-input {
4382  border: 0;
4383  width: 100px; // flexbox overrides, but fixes browser issues
4384  -ms-flex: 1 1 auto;
4385      flex: 1 1 auto;
4386  font-size: em(20px);
4387
4388  @include media-query($medium-up) {
4389    font-size: em(24px);
4390  }
4391
4392  &:focus {
4393    border: 0;
4394    outline: 0; // only active element on the page, so this is acceptable
4395  }
4396}
4397
4398// Submit and cancel buttons
4399
4400.site-header__search-btn {
4401  padding: 0 ($gutter / 2);
4402}
4403
4404.predictive-results {
4405  position: absolute;
4406  top: 100%;
4407  left: 0;
4408  right: 0;
4409  background-color: $colorBody;
4410  color: $colorTextBody;
4411  max-height: 70vh;
4412  max-height: calc(88vh - 100%);
4413  overflow: auto;
4414
4415  @include media-query($medium-up) {
4416    max-height: calc(100vh - 100% - 30px); // search + announcement
4417  }
4418}
4419
4420.predictive__label {
4421  border-bottom: 1px solid $colorBorder;
4422  padding-bottom: 5px;
4423  margin-bottom: 20px;
4424}
4425
4426.predictive-result__layout {
4427  > div {
4428    margin-bottom: $gutter;
4429
4430    &:last-child {
4431      margin-bottom: 0;
4432    }
4433  }
4434
4435  // Stacked on mobile
4436  .grid__item {
4437    margin-bottom: $gutter / 2;
4438
4439    &:last-child {
4440      margin-bottom: 0;
4441    }
4442  }
4443}
4444
4445// Individual results
4446
4447.predictive__result {
4448  display: -ms-flexbox;
4449  display: flex;
4450  -ms-flex-align: center;
4451      align-items: center;
4452}
4453
4454.predictive__result-image {
4455  -ms-flex: 0 1 60px;
4456      flex: 0 1 60px;
4457  width: 60px;
4458  height: 60px;
4459  margin-right: $gutter / 2;
4460
4461  @include media-query($medium-up) {
4462    -ms-flex: 0 1 100px;
4463        flex: 0 1 100px;
4464    width: 100px;
4465    height: 100px;
4466  }
4467}
4468
4469.predictive__result-meta {
4470  -ms-flex: 1 1 auto;
4471      flex: 1 1 auto;
4472}
4473
4474.predictive-results__footer {
4475  padding: 10px 0 30px;
4476}
4477
4478/*================ Module | Search Bar ================*/
4479
4480.search-bar {
4481  max-width: 100%;
4482}
4483
4484.search-bar--page {
4485  max-width: 300px;
4486  margin-top: -$gutter / 2;
4487}
4488
4489.search-bar--drawer {
4490  margin-bottom: $gutter / 2;
4491  padding-bottom: $gutter / 2;
4492  border-bottom: 1px solid $colorDrawerBorder;
4493
4494  input {
4495    border: 0;
4496  }
4497}
4498
4499.search-bar .icon {
4500  width: 24px;
4501  height: 24px;
4502  vertical-align: middle;
4503}
4504
4505/*================ Module | Section Headers ================*/
4506
4507.section-header {
4508  margin-bottom: $sectionHeaderBottomSmall;
4509
4510  @include media-query($medium-up) {
4511    margin-bottom: $sectionHeaderBottom;
4512  }
4513
4514  @if ($type_header_text_alignment) {
4515    text-align: center;
4516  }
4517}
4518
4519.section-header--hero {
4520  position: relative;
4521  -ms-flex: 1 1 100%;
4522      flex: 1 1 100%;
4523  color: $colorHeroText;
4524  margin-bottom: $gutter / 2;
4525
4526  @include media-query($medium-up) {
4527    margin-bottom: $gutter;
4528  }
4529}
4530
4531.section-header__rte {
4532  font-size: em(18px);
4533}
4534
4535.section-header__title {
4536  margin-bottom: 0;
4537}
4538
4539.section-header__title--big {
4540  font-size: em(40px);
4541
4542  @include media-query($medium-up) {
4543    font-size: em(80px);
4544  }
4545}
4546
4547.section-header__title--medium {
4548  font-size: em(32px);
4549
4550  @include media-query($medium-up) {
4551    font-size: em(60px);
4552  }
4553}
4554
4555.section-header__link {
4556  @include baseFontStack;
4557  font-weight: normal;
4558  font-size: $type_base_size;
4559  padding-top: 6px;
4560  float: right;
4561
4562  @include media-query($small) {
4563    display: none;
4564  }
4565}
4566
4567.section-header--404 {
4568  margin-bottom: 0;
4569  padding: 80px 0;
4570}
4571
4572.section-header select {
4573  margin-left: $gutter / 2;
4574}
4575
4576.section-header .btn {
4577  float: right;
4578  margin: 0;
4579}
4580
4581.site-nav {
4582  margin: 0;
4583}
4584
4585.site-navigation {
4586  .text-center & {
4587    margin: 0 auto;
4588  }
4589
4590  .header-layout--left & {
4591    padding-left: $gutter / 3;
4592  }
4593}
4594
4595.site-nav--icons {
4596  display: -ms-flexbox;
4597  display: flex;
4598  -ms-flex-align: center;
4599      align-items: center;
4600}
4601
4602.site-nav__icons {
4603  white-space: nowrap;
4604}
4605
4606.site-nav__item {
4607  position: relative;
4608  display: inline-block;
4609  margin: 0;
4610
4611  li {
4612    display: block;
4613  }
4614
4615  .icon-chevron-down {
4616    width: $desktopMenuChevronSize;
4617    height: $desktopMenuChevronSize;
4618  }
4619}
4620
4621.site-nav__link {
4622  display: inline-block;
4623  vertical-align: middle;
4624  text-decoration: none;
4625  padding: ($siteNavItemPadding / 2) $siteNavItemPadding;
4626  white-space: nowrap;
4627  color: $colorNavText;
4628
4629  .site-header--heading-style & {
4630    @include headerFontStack;
4631  }
4632
4633  &:hover {
4634    color: $colorNavText;
4635  }
4636
4637  .is-light & {
4638    color: $colorStickyNavLinks;
4639
4640    &:hover {
4641      color: $colorStickyNavLinks;
4642    }
4643  }
4644
4645  .site-nav--has-dropdown > & {
4646    position: relative;
4647    z-index: $zindexNavDropdowns + 1;
4648  }
4649
4650  .icon-chevron-down {
4651    margin-left: 5px;
4652  }
4653
4654  @include media-query($medium-down) {
4655    padding: $siteNavItemPadding / 2;
4656
4657    .header-layout--center & {
4658      padding-left: 2px;
4659      padding-right: 2px;
4660    }
4661  }
4662}
4663
4664// Keep active state on parent dropdown link
4665
4666.site-nav--has-dropdown {
4667  z-index: $zindexNavDropdowns + 1;
4668
4669  // Force on top of other dropdowns when active
4670  &:hover,
4671  &.is-focused {
4672    z-index: $zindexNavDropdowns + 2;
4673  }
4674}
4675
4676.site-nav--has-dropdown.is-focused > a,
4677.site-nav--has-dropdown:hover > a {
4678  color: $colorTextBody !important;
4679  background-color: $colorBody;
4680  opacity: 1;
4681  transition: none;
4682
4683  &:before {
4684    content: '';
4685    position: absolute;
4686    left: 15px;
4687    right: 45px;
4688    bottom: 0;
4689    display: block;
4690    background-color: $colorBorder;
4691    height: 1px;
4692    z-index: $zindexNavDropdowns + 1;
4693  }
4694}
4695
4696.site-nav__link--icon {
4697  padding-left: $siteNavIconPadding;
4698  padding-right: $siteNavIconPadding;
4699
4700  @include media-query($small) {
4701    padding-left: $siteNavItemPadding / 2;
4702    padding-right: $siteNavItemPadding / 2;
4703
4704    & + & {
4705      margin-left: -3px; // ~amount of inline-block space
4706    }
4707  }
4708
4709  .icon {
4710    width: $desktopMenuIconSize;
4711    height: $desktopMenuIconSize;
4712  }
4713}
4714
4715/*================ Dropdowns ================*/
4716
4717.site-nav__dropdown {
4718  position: absolute;
4719  left: 0;
4720  margin: 0;
4721  z-index: $zindexNavDropdowns;
4722  display: block;
4723  visibility: hidden;
4724  background-color: $colorBody;
4725  min-width: 100%;
4726  padding: ($gutter / 3) 0 5px;
4727  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
4728  transform: translate3d(0px, -12px, 0px);
4729
4730  .site-nav--has-dropdown:hover &,
4731  .is-focused > & {
4732    display: block;
4733    visibility: visible;
4734    transform: translate3d(0px, 0px, 0px);
4735    transition: all 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
4736  }
4737
4738  li {
4739    margin: 0;
4740  }
4741
4742  > li {
4743    position: relative;
4744
4745    > a {
4746      position: relative;
4747      z-index: $zindexNavDropdowns + 1;
4748    }
4749  }
4750
4751  a {
4752    background-color: $colorBody;
4753    padding-right: 30px;
4754  }
4755}
4756
4757/*================ Third level dropdown ================*/
4758
4759.site-nav__deep-dropdown {
4760  background-color: $colorBody;
4761  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.09);
4762  position: absolute;
4763  top: 0;
4764  left: 100%;
4765  margin: 0;
4766  visibility: hidden;
4767  opacity: 0;
4768  z-index: $zindexNavDropdowns;
4769  transform: translate3d(-12px, 0px, 0px);
4770
4771  // Last menu item is anchored to right if
4772  //   - center aligned menu
4773  .header-layout--center .site-nav__item:last-child & {
4774    left: auto;
4775    right: 100%;
4776  }
4777
4778  .site-nav__deep-dropdown-trigger:hover &,
4779  .is-focused > & {
4780    visibility: visible;
4781    opacity: 1;
4782    transform: translate3d(0px, 0px, 0px);
4783    transition: all 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95);
4784  }
4785
4786  &:before {
4787    content: '';
4788    display: block;
4789    position: absolute;
4790    top: 0;
4791    left: 0;
4792    bottom: 0;
4793    width: 10px;
4794    background-image: linear-gradient(to right, rgba(0,0,0,0.09), transparent);
4795    pointer-events: none;
4796
4797    // Reverse box shadow on submenus if
4798    //   - center aligned menu
4799    .header-layout--center .site-nav__item:last-child & {
4800      left: auto;
4801      right: 0;
4802      background-image: linear-gradient(to left, rgba(0,0,0,0.09), transparent);
4803    }
4804  }
4805}
4806
4807.site-nav__dropdown-link--has-children {
4808  .site-nav__deep-dropdown-trigger:hover &,
4809  &:hover,
4810  &:focus {
4811    background-color: darken($colorBody, 5%);
4812  }
4813}
4814
4815// Rotate to face right
4816
4817.site-nav__deep-dropdown-trigger .icon-chevron-down {
4818  position: absolute;
4819  top: 50%;
4820  right: 10px;
4821  width: $desktopMenuChevronSize;
4822  height: $desktopMenuChevronSize;
4823  transform: rotate(-90deg) translateX(50%);
4824}
4825
4826/*================ Mobile navigation ================*/
4827
4828.mobile-nav {
4829  // Negative of .drawer left/right padding for full-width link tap area
4830  margin: (-$gutter / 2) (-$gutter / 2) 0 (-$gutter / 2);
4831
4832  li {
4833    margin-bottom: 0;
4834    list-style: none;
4835  }
4836}
4837
4838.mobile-nav__search {
4839  padding: $gutter / 2;
4840}
4841
4842.mobile-nav__item {
4843  position: relative;
4844  display: block;
4845
4846  // Background color on top level items so there is no
4847  // element overlap on subnav's CSS toggle animation
4848  .mobile-nav > & {
4849    background-color: $colorDrawers;
4850  }
4851
4852  &:after {
4853    content: '';
4854    position: absolute;
4855    bottom: 0;
4856    left: $gutter / 2;
4857    right: $gutter / 2;
4858    border-bottom: 1px solid $colorDrawerBorder;
4859  }
4860
4861  .mobile-nav > &:last-child:after {
4862    display: none;
4863  }
4864}
4865
4866// Login/logout links can't have a class on them, so style <a> element
4867
4868.mobile-nav__item a,
4869.mobile-nav__item .mobile-nav__faux-link {
4870  display: block;
4871  font-size: em(21px);
4872  @include media-query($medium-up) {
4873    font-size: em(25px);
4874  }
4875}
4876
4877.mobile-nav__item a,
4878.mobile-nav__item .mobile-nav__faux-link,
4879.mobile-nav__toggle button {
4880  color: $colorDrawerText;
4881  padding: $gutter / 2;
4882  text-decoration: none;
4883
4884  &:active {
4885    color: darken($colorDrawerText, 15%);
4886  }
4887
4888  &:active {
4889    background-color: darken($colorDrawers, 5%);
4890  }
4891}
4892
4893.mobile-nav__child-item {
4894  display: -ms-flexbox;
4895  display: flex;
4896}
4897
4898.mobile-nav__item--secondary {
4899  a {
4900    font-size: 15px;
4901    line-height: 1.2;
4902    padding-top: 10px;
4903    padding-bottom: 5px;
4904  }
4905
4906  &:after {
4907    display: none;
4908  }
4909}
4910
4911.mobile-nav__spacer {
4912  height: 0;
4913  padding: 5px;
4914}
4915
4916.mobile-nav__has-sublist {
4917  position: relative;
4918  display: table;
4919  width: 100%;
4920
4921  .mobile-nav__link {
4922    display: table-cell;
4923    vertical-align: middle;
4924    width: 100%;
4925  }
4926}
4927
4928.mobile-nav__link--button {
4929  width: 100%;
4930  text-align: left;
4931  padding: 0;
4932}
4933
4934.mobile-nav__link--button-small {
4935  width: auto;
4936
4937  .collapsible-trigger__icon {
4938    right: -10px;
4939  }
4940}
4941
4942.mobile-nav__toggle {
4943  display: table-cell;
4944  vertical-align: middle;
4945  width: 1%;
4946
4947  .icon {
4948    width: 16px;
4949    height: 16px;
4950  }
4951}
4952
4953.mobile-nav__sublist {
4954  margin: 0;
4955
4956  .mobile-nav__item:after {
4957    top: 0;
4958    bottom: auto;
4959    border-bottom: none;
4960  }
4961
4962  .mobile-nav__item:last-child {
4963    padding-bottom: $gutter / 2;
4964  }
4965
4966  .mobile-nav__link,
4967  .mobile-nav__faux-link {
4968    @include baseFontStack;
4969    font-weight: normal;
4970    padding: ($gutter / 4) 25px ($gutter / 4) $gutter;
4971    font-size: $type_base_size;
4972  }
4973}
4974
4975.mobile-nav__grandchildlist {
4976  margin: 0;
4977
4978  .mobile-nav__item:last-child {
4979    padding-bottom: 0;
4980  }
4981
4982  .mobile-nav__link {
4983    padding-left: $gutter * 1.5;
4984  }
4985}
4986
4987.mobile-nav__social {
4988  margin: 10px 0 20px 0;
4989  li {
4990    margin-right: 15px;
4991    display: inline-block;
4992  }
4993}
4994
4995/*================ Cart bubble for items in cart ================*/
4996
4997@include media-query($medium-up) {
4998  .site-nav__link--icon .icon {
4999    width: 28px;
5000    height: 28px;
5001  }
5002}
5003
5004.cart-link {
5005  position: relative;
5006  display: block;
5007  line-height: 1;
5008}
5009
5010.cart-link__bubble {
5011  display: none;
5012}
5013
5014.cart-link__bubble--visible {
5015  display: block;
5016  position: absolute;
5017  top: 0px;
5018  right: -4px;
5019  width: 15px;
5020  height: 15px;
5021  background-color: $colorCartDot;
5022  border: 2px solid $colorBody;
5023  border-radius: 50%;
5024
5025  // Slight position change with cart icon
5026  [data-icon="bag"] & {
5027    top: 50%;
5028    right: 0;
5029  }
5030}
5031
5032.breadcrumb {
5033  font-size: 13px;
5034  margin-bottom: $gutter;
5035  .divider {
5036    color: $colorBorder;
5037  }
5038  @include media-query($small) {
5039    font-size: 11px;
5040    margin-bottom: $gutter / 2;
5041  }
5042}
5043
5044.modal {
5045  display: none;
5046  bottom: 0;
5047  left: 0;
5048  opacity: 1;
5049  overflow: hidden;
5050  position: fixed;
5051  right: 0;
5052  top: 0;
5053  z-index: $zindexModal;
5054  color: $colorModalText;
5055  -ms-flex-align: center;
5056      align-items: center;
5057  -ms-flex-pack: center;
5058      justify-content: center;
5059
5060  a,
5061  a:hover {
5062    color: inherit;
5063  }
5064
5065  .btn:not([disabled]),
5066  .btn:not([disabled]):hover {
5067    color: $colorBtnPrimaryText;
5068  }
5069
5070  .modal-open & {
5071    .modal__inner {
5072      animation: modal-open 0.5s forwards;
5073    }
5074    &:before {
5075      content: '';
5076      position: fixed;
5077      top: 0;
5078      left: 0;
5079      width: 100%;
5080      height: 100%;
5081      background-color: $colorModalBg;
5082      animation: overlay-on 0.5s forwards;
5083      cursor: pointer;
5084    }
5085  }
5086
5087  .modal-closing & {
5088    .modal__inner {
5089      animation: modal-closing 0.5s forwards;
5090    }
5091    &:before {
5092      content: '';
5093      position: fixed;
5094      top: 0;
5095      left: 0;
5096      width: 100%;
5097      height: 100%;
5098      background-color: $colorModalBg;
5099      animation: overlay-off 0.5s forwards;
5100    }
5101  }
5102
5103  .modal-open--solid &:before {
5104    background-color: $colorModalBg;
5105  }
5106}
5107
5108.modal--solid {
5109  .modal-open & {
5110    &:before {
5111      background-color: #000;
5112      animation: full-overlay-on 0.5s forwards;
5113    }
5114  }
5115  .modal-closing & {
5116    &:before {
5117      background-color: #000;
5118      animation: full-overlay-off 0.5s forwards;
5119    }
5120  }
5121}
5122
5123.modal--is-closing {
5124  display: -ms-flexbox !important;
5125  display: flex !important; // override .is-transitioning styles
5126  overflow: hidden;
5127}
5128
5129.modal--is-active {
5130  display: -ms-flexbox !important;
5131  display: flex !important; // override .is-transitioning styles
5132  overflow: hidden;
5133}
5134
5135// Class on body element when modal open.
5136
5137// Only medium-up because iOS jumps to top otherwise
5138
5139@include media-query($medium-up) {
5140  .modal-open {
5141    overflow: hidden;
5142  }
5143}
5144
5145.modal__inner {
5146  transform-style: preserve-3d;
5147  -ms-flex: 0 1 auto;
5148      flex: 0 1 auto;
5149  margin: $gutter / 2;
5150  max-width: 100%;
5151  display: -ms-flexbox;
5152  display: flex;
5153  -ms-flex-align: center;
5154      align-items: center;
5155
5156  @include media-query($medium-up) {
5157    margin: 40px;
5158  }
5159
5160  .modal--square & {
5161    background-color: $colorBody;
5162    color: $colorTextBody;
5163  }
5164
5165  img {
5166    display: block;
5167    max-height: 90vh;
5168  }
5169}
5170
5171// No max height on product images
5172
5173.modal__inner {
5174  .image-wrap img {
5175    max-height: none;
5176  }
5177}
5178
5179.modal__centered {
5180  position: relative;
5181  -ms-flex: 0 1 auto;
5182      flex: 0 1 auto;
5183  min-width: 1px; // ie10 thing
5184  max-width: 100%;
5185}
5186
5187.modal__centered-content {
5188  .modal--square & {
5189    max-height: 80vh;
5190    padding: $gutter * .75;
5191    min-width: 200px;
5192    min-height: 200px;
5193    overflow: auto;
5194    -webkit-overflow-scrolling: touch;
5195
5196    @include media-query($medium-up) {
5197      padding: $gutter * 1.5;
5198      max-height: 90vh;
5199      max-width: 1200px;
5200    }
5201  }
5202}
5203
5204.modal__close {
5205  border: 0;
5206  padding: $gutter/2;
5207  @include media-query($medium-up) {
5208    padding: $gutter;
5209  }
5210  position: fixed;
5211  top: 0;
5212  right: 0;
5213  color: $colorModalText;
5214
5215  .icon {
5216    width: 28px;
5217    height: 28px;
5218  }
5219
5220  &:hover,
5221  &:focus {
5222    color: $colorModalText;
5223  }
5224
5225  .modal--square & {
5226    position: absolute;
5227    color: $colorTextBody;
5228    padding: $gutter / 3;
5229
5230    &:hover,
5231    &:focus {
5232      color: $colorTextBody;
5233    }
5234  }
5235}
5236
5237// Ajax page adjustments
5238
5239.modal {
5240  .page-content,
5241  .page-width {
5242    padding: 0;
5243  }
5244}
5245
5246// Google-friendly non intrusive mobile modal
5247
5248.popup-cta {
5249  margin-bottom: $gutter / 2;
5250}
5251
5252@include media-query($small) {
5253  .modal--mobile-friendly {
5254    top: auto;
5255    bottom: 0;
5256    overflow: auto;
5257
5258    &.modal--square .modal__centered-content {
5259      padding: 20px 20px 0;
5260    }
5261
5262    &.modal--is-active {
5263      overflow: auto;
5264    }
5265
5266    .modal-open & {
5267      &:before {
5268        display: none;
5269      }
5270    }
5271
5272    .modal__inner {
5273      margin: 0;
5274      border: 2px solid $colorTextBody;
5275    }
5276
5277    .h1 {
5278      padding-right: 25px;
5279    }
5280
5281    input {
5282      font-size: 16px !important;
5283    }
5284
5285    .text-close {
5286      display: none;
5287    }
5288  }
5289}
5290
5291.js-qty__wrapper {
5292  position: relative;
5293  max-width: 100px;
5294  min-width: 75px;
5295  overflow: visible;
5296  background-color: $colorInputBg;
5297  color: color-control($colorInputBg, 1);
5298}
5299
5300.js-qty__num {
5301  display: block;
5302  background: none;
5303  text-align: center;
5304  width: 100%;
5305  padding: 8px 25px;
5306  margin: 0;
5307  z-index: 1;
5308}
5309
5310.js-qty__adjust {
5311  cursor: pointer;
5312  position: absolute;
5313  display: block;
5314  top: 0;
5315  bottom: 0;
5316  border: 0 none;
5317  background: none;
5318  text-align: center;
5319  overflow: hidden;
5320  padding: 0 5px;
5321  line-height: 1;
5322  -webkit-user-select: none;
5323      -ms-user-select: none;
5324          user-select: none;
5325  -webkit-backface-visibility: hidden;
5326          backface-visibility: hidden;
5327  transition: background-color 0.1s ease-out;
5328  z-index: 2;
5329  fill: color-control($colorInputBg, 1);
5330
5331  .icon {
5332    display: block;
5333    font-size: 8px;
5334    vertical-align: middle;
5335    width: 10px;
5336    height: 10px;
5337    fill: inherit;
5338  }
5339
5340  &:hover {
5341    background-color: darken($colorInputBg, 5%);
5342    color: color-control($colorInputBg, 1);
5343  }
5344
5345  &:active {
5346    background-color: darken($colorBorder, 10%);
5347  }
5348
5349  .js-qty__num:active ~ &,
5350  .js-qty__num:focus ~ & {
5351    border-color: $colorTextBody;
5352  }
5353}
5354
5355.js-qty__adjust--plus {
5356  right: 0;
5357  border-left: 1px solid darken($colorInputBg, 5%);
5358}
5359
5360.js-qty__adjust--minus {
5361  left: 0;
5362  border-right: 1px solid darken($colorInputBg, 5%);
5363}
5364
5365/*================ Qty selector in drawer ================*/
5366
5367.drawer {
5368  .js-qty__wrapper {
5369    background-color: transparent;
5370    border-color: $colorDrawerBorder;
5371  }
5372
5373  .js-qty__num {
5374    color: $colorDrawerText;
5375    border-color: $colorDrawerBorder;
5376    padding-top: 2px;
5377    padding-bottom: 2px;
5378  }
5379
5380  .js-qty__adjust {
5381    border-color: $colorDrawerBorder;
5382    color: $colorDrawerText;
5383    fill: $colorDrawerText;
5384
5385    &:hover {
5386      background-color: color-control($colorDrawers, 1);
5387      color: $colorDrawers;
5388      fill: $colorDrawers;
5389    }
5390  }
5391}
5392
5393.drawer .js-qty__num:active ~ .js-qty__adjust,
5394.drawer .js-qty__num:focus ~ .js-qty__adjust {
5395  border-color: $colorDrawerBorder;
5396}
5397
5398.currency-flag {
5399  position: relative;
5400  display: inline-block;
5401  vertical-align: middle;
5402  width: 50px;
5403  height: 50px;
5404  overflow: hidden;
5405  border-radius: 50%;
5406  box-shadow: 0 0 1px 0 rgba(0,0,0,0.3) inset;
5407
5408  &:before,
5409  &:after {
5410    content: '';
5411    display: block;
5412    position: absolute;
5413    top: 0;
5414    left: 0;
5415    right: 0;
5416    bottom: 0;
5417    border-radius: 50%;
5418  }
5419
5420  &:before {
5421    content: attr(data-flag);
5422    font-size: 16px;
5423    margin: 1px;
5424    background-color: #000;
5425    color: #fff;
5426    text-align: center;
5427    font-weight: bold;
5428    line-height: 49px; // height - margin
5429  }
5430}
5431
5432.currency-flag--small {
5433  width: 20px;
5434  height: 20px;
5435
5436  // Too small to display text, so hide
5437  &:before {
5438    display: none;
5439  }
5440}
5441
5442.currency-options__label {
5443  display: inline-block;
5444  vertical-align: middle;
5445  width: 100px;
5446
5447  span {
5448    border-bottom: 2px solid transparent;
5449
5450    .is-active & {
5451      border-bottom: 2px solid currentColor;
5452    }
5453  }
5454}
5455
5456.currency-options__label--inline {
5457  display: inline;
5458  width: auto;
5459  padding-left: 5px;
5460}
5461
5462$max-height-disclosure: 60vh;
5463
5464$min-height-disclosure: 92px;
5465
5466.disclosure {
5467  position: relative;
5468}
5469
5470.disclosure__toggle {
5471  white-space: nowrap;
5472}
5473
5474.disclosure-list {
5475  background-color: $colorBody;
5476  color: $colorTextBody;
5477  bottom: 100%;
5478  padding: 10px 0px;
5479  margin: 0;
5480  position: absolute;
5481  display: none;
5482  min-height: $min-height-disclosure;
5483  max-height: $max-height-disclosure;
5484  overflow-y: auto;
5485  border-radius: $input-radius;
5486  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.09);
5487
5488  a {
5489    color: currentColor;
5490  }
5491}
5492
5493.disclosure-list--visible {
5494  display: block;
5495}
5496
5497.disclosure-list__item {
5498  white-space: nowrap;
5499  padding: 5px 15px 4px;
5500  text-align: left;
5501
5502  .currency-options__label {
5503    border-bottom: 1px solid transparent;
5504  }
5505}
5506
5507.disclosure-list__option {
5508  &:focus,
5509  &:hover {
5510    .currency-options__label {
5511      border-bottom: 1px solid currentColor;
5512    }
5513  }
5514}
5515
5516.disclosure-list__item--current {
5517  .currency-options__label {
5518    border-bottom: 1px solid currentColor;
5519  }
5520}
5521
5522// Model viewer controls
5523
5524.shopify-model-viewer-ui {
5525  .shopify-model-viewer-ui__controls-area {
5526    opacity: 1; // always show controls
5527    background: $colorBody;
5528    border-color: rgba($colorTextBody, 0.05);
5529    border-radius: 50px;
5530  }
5531
5532  .shopify-model-viewer-ui__button {
5533    color: $colorTextBody;
5534  }
5535
5536  .shopify-model-viewer-ui__button--control {
5537    &:hover {
5538      color: $colorTextBody;
5539    }
5540
5541    &:active,
5542    &.focus-visible:focus {
5543      color: $colorTextBody;
5544      background: rgba($colorTextBody, 0.05);
5545    }
5546
5547    &:not(:last-child):after {
5548      border-color: rgba($colorTextBody, 0.05);
5549    }
5550  }
5551
5552  .shopify-model-viewer-ui__button--poster {
5553    background-color: $colorTextBody;
5554    color: $colorBody;
5555    border-radius: 100%;
5556    border: 1px solid rgba($colorBody, 0.05);
5557
5558    &:hover,
5559    &:focus {
5560      color: $colorBody;
5561    }
5562  }
5563}
5564
5565// View in space button
5566
5567.product-single__view-in-space {
5568  display: block;
5569  color: $colorTextBody;
5570  background-color: rgba($colorTextBody, 0.08);
5571  width: 100%;
5572  padding: 5px 10px 10px;
5573
5574  .slick-dotted.slick-slider + & {
5575    margin-top: -10px;
5576  }
5577
5578  &[data-shopify-xr-hidden] {
5579    display: none;
5580  }
5581}
5582
5583.product-single__view-in-space-text {
5584  display: inline-block;
5585  vertical-align: middle;
5586  margin-left: 5px;
5587  font-size: 0.9em;
5588}
5589
5590// Model viewer container
5591
5592.shopify-model-viewer-ui,
5593.shopify-model-viewer-ui model-viewer {
5594  display: block;
5595  position: absolute;
5596  top: 0;
5597  left: 0;
5598  width: 100%;
5599  height: 100%;
5600}
5601
5602.shopify-model-viewer-ui__button[hidden] {
5603  display: none;
5604}
5605
5606.product-single__close-media {
5607  position: absolute;
5608  top: 10px;
5609  right: 10px;
5610  z-index: 2;
5611}
5612
5613$collapsible-trigger-icon-width: 12px;
5614
5615$collapsible-open-transition: opacity 1s cubic-bezier(.25,.46,.45,.94), height 0.5s cubic-bezier(.25,.46,.45,.94);
5616
5617$collapsible-close-transition: opacity 0.3s cubic-bezier(.25,.46,.45,.94), height 0.3s cubic-bezier(.25,.46,.45,.94);
5618
5619$collapsible-content-open-transition: transform 0.5s cubic-bezier(.25,.46,.45,.94);
5620
5621$collapsible-content-close-transition: transform 0.3s cubic-bezier(.25,.46,.45,.94);
5622
5623// collapsibles-wrapper is an optional wrapper
5624
5625.collapsibles-wrapper--border-bottom {
5626  border-bottom: 1px solid $colorBorder;
5627}
5628
5629.collapsible-trigger {
5630  color: inherit;
5631  position: relative;
5632}
5633
5634.mobile-nav__toggle button {
5635  padding: 20px 30px;
5636}
5637
5638.collapsible-trigger__icon {
5639  display: block;
5640  position: absolute;
5641  right: 0;
5642  top: 50%;
5643  width: $collapsible-trigger-icon-width;
5644  height: $collapsible-trigger-icon-width;
5645  transform: translateY(-50%);
5646
5647  .mobile-nav__has-sublist & {
5648    right: $gutter / 2;
5649  }
5650
5651  .icon {
5652    display: block;
5653    width: $collapsible-trigger-icon-width;
5654    height: $collapsible-trigger-icon-width;
5655    transition: all 0.1s ease-in;
5656  }
5657}
5658
5659.collapsible-trigger--inline {
5660  font-weight: bold;
5661  padding: 11px 0 11px 20px;
5662
5663  .collapsible-trigger__icon {
5664    right: auto;
5665    left: 0;
5666  }
5667}
5668
5669.collapsible-trigger__icon--circle {
5670  border: 1px solid $colorBorder;
5671  border-radius: 50%;
5672  width: 24px;
5673  height: 24px;
5674  text-align: center;
5675
5676  .icon {
5677    position: absolute;
5678    top: 50%;
5679    left: 50%;
5680    transform: translate(-50%, -50%);
5681  }
5682}
5683
5684.collapsible-trigger.is-open .collapsible-trigger__icon > .icon-chevron-down {
5685  transform: scaleY(-1);
5686}
5687
5688.collapsible-trigger.is-open .collapsible-trigger__icon .icon-plus,
5689.collapsible-trigger .collapsible-trigger__icon .icon-minus {
5690  display: none;
5691}
5692
5693.collapsible-trigger.is-open .collapsible-trigger__icon .icon-minus {
5694  display: block;
5695}
5696
5697.collapsible-content {
5698  transition: $collapsible-close-transition;
5699
5700  &.is-open {
5701    overflow: unset;
5702    visibility: visible;
5703    opacity: 1;
5704    transition: $collapsible-open-transition;
5705  }
5706}
5707
5708.collapsible-content--all {
5709  visibility: hidden;
5710  overflow: hidden;
5711  -webkit-backface-visibility: hidden;
5712          backface-visibility: hidden;
5713  opacity: 0;
5714  height: 0;
5715
5716  .collapsible-content__inner {
5717    transform: translateY(40px);
5718  }
5719
5720  .collapsible-content__inner--no-translate {
5721    transform: translateY(0);
5722  }
5723}
5724
5725@include media-query($small) {
5726  .collapsible-content--small {
5727    overflow: hidden;
5728    visibility: hidden;
5729    -webkit-backface-visibility: hidden;
5730            backface-visibility: hidden;
5731    opacity: 0;
5732    height: 0;
5733
5734    .collapsible-content__inner {
5735      transform: translateY(40px);
5736    }
5737
5738    .collapsible-content__inner--no-translate {
5739      transform: translateY(0);
5740    }
5741  }
5742}
5743
5744.collapsible-content__inner {
5745  transition: $collapsible-content-close-transition;
5746
5747  .is-open & {
5748    transform: translateY(0);
5749    transition: $collapsible-content-open-transition;
5750  }
5751}
5752
5753.rte.collapsible-content__inner--faq {
5754  padding-bottom: $gutter;
5755}
5756
5757.collapsible-label__closed {
5758  .collapsible-trigger[aria-expanded="true"] & {
5759    display: none;
5760  }
5761}
5762
5763.collapsible-label__open {
5764  display: none;
5765
5766  .collapsible-trigger[aria-expanded="true"] & {
5767    display: inline-block;
5768  }
5769}
5770
5771.pswp {
5772  display: none;
5773  position: absolute;
5774  width: 100%;
5775  height: 100%;
5776  left: 0;
5777  top: 0;
5778  overflow: hidden;
5779  -ms-touch-action: none;
5780  touch-action: none;
5781  z-index: 1500;
5782  -webkit-text-size-adjust: 100%;
5783  -webkit-backface-visibility: hidden;
5784  outline: none; }
5785
5786.pswp img {
5787  max-width: none;
5788}
5789
5790/* style is added when JS option showHideOpacity is set to true */
5791
5792.pswp--animate_opacity {
5793  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
5794  opacity: 0.001;
5795  will-change: opacity;
5796  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
5797
5798.pswp--open {
5799  display: block; }
5800
5801.pswp--zoom-allowed .pswp__img {
5802  cursor: zoom-in; }
5803
5804.pswp--zoomed-in .pswp__img {
5805  cursor: grab; }
5806
5807.pswp--dragging .pswp__img {
5808  cursor: grabbing; }
5809
5810/*
5811  Background is added as a separate element.
5812  As animating opacity is much faster than animating rgba() background-color.
5813*/
5814
5815.pswp__bg {
5816  position: absolute;
5817  left: 0;
5818  top: 0;
5819  width: 100%;
5820  height: 100%;
5821  background: $colorBody;
5822  opacity: 0;
5823  transform: translateZ(0);
5824  -webkit-backface-visibility: hidden;
5825  will-change: opacity; }
5826
5827.pswp__scroll-wrap {
5828  position: absolute;
5829  left: 0;
5830  top: 0;
5831  width: 100%;
5832  height: 100%;
5833  overflow: hidden; }
5834
5835.pswp__container,
5836.pswp__zoom-wrap {
5837  -ms-touch-action: none;
5838  touch-action: none;
5839  position: absolute;
5840  left: 0;
5841  right: 0;
5842  top: 0;
5843  bottom: 0; }
5844
5845/* Prevent selection and tap highlights */
5846
5847.pswp__container,
5848.pswp__img {
5849  -webkit-user-select: none;
5850      -ms-user-select: none;
5851          user-select: none;
5852  -webkit-tap-highlight-color: transparent;
5853  -webkit-touch-callout: none; }
5854
5855.pswp__zoom-wrap {
5856  position: absolute;
5857  width: 100%;
5858  transform-origin: left top;
5859  /* for open/close transition */
5860  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
5861
5862.pswp__bg {
5863  will-change: opacity;
5864  /* for open/close transition */
5865  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
5866
5867.pswp--animated-in .pswp__bg,
5868.pswp--animated-in .pswp__zoom-wrap {
5869  transition: none; }
5870
5871.pswp__container,
5872.pswp__zoom-wrap {
5873  -webkit-backface-visibility: hidden; }
5874
5875.pswp__item {
5876  position: absolute;
5877  left: 0;
5878  right: 0;
5879  top: 0;
5880  bottom: 0;
5881  overflow: hidden; }
5882
5883.pswp__img {
5884  position: absolute;
5885  width: auto;
5886  height: auto;
5887  top: 0;
5888  left: 0; }
5889
5890/*
5891  stretched thumbnail or div placeholder element (see below)
5892  style is added to avoid flickering in webkit/blink when layers overlap
5893*/
5894
5895.pswp__img--placeholder {
5896  -webkit-backface-visibility: hidden; }
5897
5898.pswp--ie .pswp__img {
5899  width: 100% !important;
5900  height: auto !important;
5901  left: 0;
5902  top: 0; }
5903
5904/*
5905  Error message appears when image is not loaded
5906  (JS option errorMsg controls markup)
5907*/
5908
5909.pswp__error-msg {
5910  position: absolute;
5911  left: 0;
5912  top: 50%;
5913  width: 100%;
5914  text-align: center;
5915  line-height: 16px;
5916  margin-top: -8px;
5917  color: #CCC; }
5918
5919.pswp__error-msg a {
5920  color: #CCC;
5921  text-decoration: underline; }
5922
5923.pswp__button {
5924  position: relative;
5925
5926  // Because JS listens to click on button element itself
5927  &:after {
5928    content: '';
5929    display: block;
5930    position: absolute;
5931    top: 0;
5932    left: 0;
5933    right: 0;
5934    bottom: 0;
5935  }
5936}
5937
5938.pswp__button--arrow--left .icon,
5939.pswp__button--arrow--right .icon {
5940  width: 13px;
5941  height: 13px;
5942  margin: 8px;
5943}
5944
5945.pswp__button[disabled] {
5946  opacity: 0;
5947  pointer-events: none;
5948}
5949
5950.pswp__ui {
5951  position: absolute;
5952  display: -ms-flexbox;
5953  display: flex;
5954  -ms-flex-pack: center;
5955      justify-content: center;
5956  -ms-flex-align: center;
5957      align-items: center;
5958  bottom: $gutter;
5959  left: 0;
5960  right: 0;
5961  transform: translateY(0);
5962  transition: transform 0.25s 0.6s;
5963
5964  .btn {
5965    margin: 15px;
5966  }
5967}
5968
5969.pswp__ui--hidden {
5970  transform: translateY(150%);
5971  transition: transform 0.25s;
5972}
5973
5974/*================ Vendor-specific styles ================*/
5975
5976/*============================================================================
5977  Slick Slider 1.6.0 - customizations by @cshold
5978==============================================================================*/
5979
5980$slick-dot-color: #fff;
5981
5982$slick-dot-color-active: #fff !default;
5983
5984$slick-arrow-size: 40px;
5985
5986$slick-arrow-size-small: 33px;
5987
5988$slick-arrow-icon-height: 10px;
5989
5990$slick-arrow-icon-width: 6px;
5991
5992$slick-dot-size: 6px;
5993
5994$slick-opacity-default: 0.75;
5995
5996$slick-opacity-on-hover: 1;
5997
5998$slick-opacity-not-active: 0.25;
5999
6000/*================ Slick Slider SCSS ================*/
6001
6002.slick-slider {
6003  position: relative;
6004  display: block;
6005  box-sizing: border-box;
6006  -webkit-touch-callout: none;
6007  -webkit-user-select: none;
6008      -ms-user-select: none;
6009          user-select: none;
6010  -ms-touch-action: pan-y;
6011      touch-action: pan-y;
6012  -webkit-tap-highlight-color: transparent;
6013  direction: ltr;
6014}
6015
6016.slick-list {
6017  position: relative;
6018  overflow: hidden;
6019  display: block;
6020  margin: 0;
6021  padding: 0;
6022
6023  &:focus {
6024    outline: none;
6025  }
6026
6027  &.dragging {
6028    cursor: pointer;
6029    cursor: hand;
6030  }
6031}
6032
6033.slick-slider .slick-track,
6034.slick-slider .slick-list {
6035  transform: translate3d(0, 0, 0);
6036}
6037
6038.slick-track {
6039  position: relative;
6040  left: 0;
6041  top: 0;
6042  display: block;
6043
6044  &:before,
6045  &:after {
6046    content: "";
6047    display: table;
6048  }
6049
6050  &:after {
6051    clear: both;
6052  }
6053
6054  .slick-loading & {
6055    visibility: hidden;
6056  }
6057}
6058
6059.slick-slide {
6060  float: left;
6061  height: 100%;
6062  min-height: 1px;
6063  [dir="rtl"] & {
6064    float: right;
6065  }
6066  img {
6067    display: block;
6068  }
6069  &.slick-loading img {
6070    display: none;
6071  }
6072
6073  display: none;
6074
6075  &.dragging img {
6076    pointer-events: none;
6077  }
6078
6079  .slick-initialized & {
6080    display: block;
6081  }
6082
6083  .slick-loading & {
6084    visibility: hidden;
6085  }
6086
6087  .slick-vertical & {
6088    display: block;
6089    height: auto;
6090  }
6091}
6092
6093.slick-arrow.slick-hidden {
6094  display: none;
6095}
6096
6097/*================ Slick Slider Theme ================*/
6098
6099/* Arrows */
6100
6101.slick-arrow {
6102  position: absolute;
6103  display: -ms-flexbox;
6104  display: flex;
6105  -ms-flex-align: center;
6106      align-items: center;
6107  -ms-flex-pack: center;
6108      justify-content: center;
6109  line-height: 0px;
6110  font-size: 0px;
6111  cursor: pointer;
6112  background: $colorBtnPrimary;
6113  color: $colorBtnPrimaryText;
6114  top: 50%;
6115  transform: translate(0, -50%);
6116  padding: 0;
6117  border: none;
6118  opacity: $slick-opacity-on-hover;
6119  overflow: hidden;
6120  border-radius: 50%;
6121  z-index: 20;
6122
6123  &.slick-disabled {
6124    opacity: 0;
6125  }
6126
6127  .icon {
6128    position: relative;
6129    top: 1px;
6130    display: block;
6131    width: $slick-arrow-icon-width;
6132    height: $slick-arrow-icon-height;
6133  }
6134
6135  [data-section-type="collection-switcher"] & {
6136    width: $slick-arrow-size;
6137    height: $slick-arrow-size;
6138
6139    @include media-query($small) {
6140      width: $slick-arrow-size-small;
6141      height: $slick-arrow-size-small;
6142    }
6143  }
6144}
6145
6146.slick-prev {
6147  left: 25px;
6148  [dir="rtl"] & {
6149    left: auto;
6150    right: 25px;
6151  }
6152  @include media-query($small) {
6153    left: $page-width-gutter-small;
6154    [dir="rtl"] & {
6155      right: $page-width-gutter-small;
6156    }
6157  }
6158
6159  // optically center chevron
6160  .icon {
6161    right: 1px;
6162  }
6163
6164  .slick-vertical & .icon {
6165    right: auto;
6166  }
6167}
6168
6169.slick-next {
6170  right: 25px;
6171  [dir="rtl"] & {
6172    left: 25px;
6173    right: auto;
6174  }
6175  @include media-query($small) {
6176    right: $page-width-gutter-small;
6177    [dir="rtl"] & {
6178      left: $page-width-gutter-small;
6179    }
6180  }
6181
6182  // optically center chevron
6183  .icon {
6184    left: 1px;
6185  }
6186
6187  .slick-vertical & .icon {
6188    left: auto;
6189  }
6190}
6191
6192/* Dots */
6193
6194.slick-dotted.slick-slider {
6195  margin-bottom: 10px;
6196}
6197
6198.slick-dots {
6199  position: absolute;
6200  bottom: -25px;
6201  list-style: none;
6202  display: block;
6203  text-align: center;
6204  padding: 0;
6205  margin: 0;
6206  width: 100%;
6207  li {
6208    position: relative;
6209    display: inline-block;
6210    height: 20px;
6211    width: 20px;
6212    margin: 0 5px;
6213    padding: 0;
6214    cursor: pointer;
6215    button {
6216      border: 0;
6217      background: transparent;
6218      display: block;
6219      height: 20px;
6220      width: 20px;
6221      line-height: 0px;
6222      font-size: 0px;
6223      color: transparent;
6224      padding: 5px;
6225      cursor: pointer;
6226      &:hover, &:focus {
6227        &:before {
6228          opacity: $slick-opacity-on-hover;
6229        }
6230      }
6231      &:before {
6232        position: absolute;
6233        top: 0;
6234        left: 0;
6235        content: '';
6236        width: 20px;
6237        height: 20px;
6238        font-size: $slick-dot-size;
6239        line-height: 20px;
6240        text-align: center;
6241        color: $slick-dot-color;
6242        opacity: $slick-opacity-not-active;
6243      }
6244    }
6245    &.slick-active button:before {
6246      color: $slick-dot-color-active;
6247      opacity: $slick-opacity-default;
6248    }
6249  }
6250}
6251
6252/*================ Theme-specific partials ================*/
6253
6254/*================ Partials | Theme Form Overrides ================*/
6255
6256::-webkit-input-placeholder {
6257   color: inherit;
6258   opacity: 0.5;
6259}
6260
6261:-moz-placeholder {
6262   color: inherit;
6263   opacity: 0.5;
6264}
6265
6266:-ms-input-placeholder {
6267   color: inherit;
6268   opacity: 0.5;
6269}
6270
6271::-ms-input-placeholder {
6272   color: inherit;
6273   opacity: 1;
6274}
6275
6276input,
6277textarea,
6278select {
6279  background-color: transparent;
6280  color: inherit;
6281
6282  &[disabled],
6283  &.disabled {
6284    background-color: $disabledGrey;
6285    border-color: transparent;
6286  }
6287
6288  &:active,
6289  &:focus {
6290    border: 1px solid $colorTextBody;
6291  }
6292}
6293
6294input[type="number"] {
6295  font-size: em(16px);
6296}
6297
6298input[type="image"] {
6299  background-color: transparent;
6300}
6301
6302/*================ Custom skrim element heights ================*/
6303
6304.skrim-grid--pagination .skrim__item {
6305  height: 120px;
6306
6307  @include media-query($medium-up) {
6308    height: 350px;
6309  }
6310}
6311
6312/*================ Featured collection element heights ================*/
6313
6314.collection--square-small,
6315.collection--wide {
6316  height: 150px;
6317  @include media-query($medium-up) {
6318    height: 300px;
6319  }
6320}
6321
6322.collection--tall,
6323.collection--square-large {
6324  height: 300px;
6325  @include media-query($medium-up) {
6326    height: 600px;
6327  }
6328}
6329
6330/* Collections list template */
6331
6332.collections-list .collection--square-small {
6333  margin-bottom: 22px;
6334  @include media-query($medium-up) {
6335    margin-bottom: 30px;
6336  }
6337}
6338
6339/*================ Social share buttons ================*/
6340
6341$shareButtonHeight: 18px;
6342
6343.social-sharing {
6344  @include baseFontStack;
6345
6346  .icon {
6347    height: $shareButtonHeight;
6348    width: $shareButtonHeight;
6349  }
6350}
6351
6352.social-sharing__link {
6353  display: inline-block;
6354  color: $colorTextBody;
6355  border-radius: 2px;
6356  font-size: em($type_base_size - 1);
6357  margin: 0 18px 0 0;
6358  text-decoration: none;
6359  font-weight: normal;
6360
6361  &:last-child {
6362    margin-right: 0;
6363  }
6364}
6365
6366.social-sharing__title {
6367  display: inline-block;
6368  vertical-align: middle;
6369  padding-right: 15px;
6370  padding-left: 3px;
6371}
6372
6373.grid-search {
6374  margin-bottom: $gutter;
6375}
6376
6377.grid-search__product {
6378  position: relative;
6379  text-align: center;
6380}
6381
6382// Force heights for consistency
6383
6384.grid-search__page-link,
6385.grid-search__product-link {
6386  height: 280px;
6387}
6388
6389.grid-search__page-link {
6390  display: block;
6391  background-color: adaptive-color($colorBody, 2%);
6392  padding: 20px;
6393  color: $colorTextBody;
6394  overflow: hidden;
6395  text-overflow: ellipsis;
6396
6397  &:hover,
6398  &:focus {
6399    background-color: adaptive-color($colorBody, 4%);
6400  }
6401}
6402
6403.grid-search__page-content {
6404  display: block;
6405  height: 100%;
6406  overflow: hidden;
6407}
6408
6409.grid-search__page-content img {
6410  display: block;
6411  margin-bottom: 10px;
6412}
6413
6414.grid-search__image {
6415  display: block;
6416  padding: 20px;
6417  margin: 0 auto;
6418  max-height: 100%;
6419  max-width: 100%;
6420
6421  @include media-query($medium-up) {
6422    position: absolute;
6423    top: 50%;
6424    left: 50%;
6425    transform: translate(-50%, -50%);
6426  }
6427}
6428
6429/*================ Partials | Sections ================*/
6430
6431.index-section {
6432  margin: ($gutter * 0.85) 0;
6433}
6434
6435.index-section--small {
6436  margin: ($gutter * 0.6) 0;
6437}
6438
6439.index-section + .index-section,
6440.index-section + .index-section--hidden {
6441  margin-top: 0;
6442}
6443
6444.index-section--flush {
6445  margin: 0;
6446}
6447
6448.index-section--faq {
6449  margin-bottom: $gutter / 2;
6450}
6451
6452.section--divider {
6453  border-top: 1px solid $colorBorder;
6454  padding-top: ($gutter * 0.85);
6455}
6456
6457.index-section--faq {
6458  margin-bottom: $gutter;
6459}
6460
6461.index-section--faq {
6462  margin-bottom: $gutter;
6463}
6464
6465.newsletter-section {
6466  padding: ($gutter * 0.85) 0;
6467}
6468
6469.newsletter-section--with-divider {
6470  border-top: 1px solid $colorBorder;
6471}
6472
6473// Large screen section spacing
6474
6475@include media-query($medium-up) {
6476  .index-section {
6477    margin: ($gutter * 2.5) 0;
6478  }
6479
6480  .index-section--small {
6481    margin: $gutter 0;
6482  }
6483
6484  .index-section--faq {
6485    margin: $gutter 0 ($gutter / 2);
6486  }
6487
6488  .section--divider {
6489    padding-top: $gutter * 2.5;
6490  }
6491
6492  .newsletter-section {
6493    padding: ($gutter * 2.5) 0;
6494  }
6495}
6496
6497/*================ Page blocks ================*/
6498
6499.page-blocks--flush .page-width {
6500  padding: 0;
6501}
6502
6503.page-blocks > div:first-child {
6504  .index-section {
6505    margin-top: 0;
6506  }
6507}
6508
6509/*================ Partials | Featured row section ================*/
6510
6511.feature-row {
6512  margin: 0 auto;
6513  display: -ms-flexbox;
6514  display: flex;
6515  -ms-flex-pack: justify;
6516      justify-content: space-between;
6517  -ms-flex-align: center;
6518      align-items: center;
6519
6520  @include media-query($widescreen) {
6521    margin: 0 6%;
6522  }
6523
6524  @include media-query($medium-down) {
6525    -ms-flex-direction: column;
6526        flex-direction: column;
6527    margin: 0;
6528  }
6529}
6530
6531@include media-query($medium-down) {
6532  .feature-row--small-none {
6533    display: block;
6534  }
6535}
6536
6537.feature-row__item {
6538  min-width: 50%;
6539  -ms-flex: 0 1 50%;
6540      flex: 0 1 50%;
6541
6542  @include media-query($medium-down) {
6543    -ms-flex: 1 1 auto;
6544        flex: 1 1 auto;
6545    max-width: 100%;
6546    min-width: 100%;
6547  }
6548}
6549
6550.feature-row__image {
6551  display: block;
6552  margin: 0 auto;
6553
6554  @include media-query($medium-down) {
6555    -ms-flex-order: 1;
6556        order: 1;
6557  }
6558}
6559
6560.feature-row__text {
6561  padding-top: $gutter;
6562  padding-bottom: $gutter;
6563
6564  @include media-query($medium-down) {
6565    -ms-flex-order: 2;
6566        order: 2;
6567    padding-top: $gutter / 2;
6568    padding-bottom: 0; // always last element on mobile
6569  }
6570  .rte {
6571    margin: 0;
6572  }
6573  .btn {
6574    margin: ($gutter / 2) ($gutter / 3) 0 0;
6575  }
6576}
6577
6578@include media-query($medium-up) {
6579  .feature-row__text--left {
6580    padding-left: $gutter * 2;
6581  }
6582
6583  .feature-row__text--right {
6584    padding-right: $gutter * 2;
6585  }
6586}
6587
6588@include media-query($medium-up) {
6589  .featured-row__subtext {
6590  }
6591}
6592
6593/*================ Modules and sections ================*/
6594
6595$slideshow-dot-size: 10px;
6596
6597$slideshow-dot-size-large: 12px;
6598
6599.slick-slider,
6600.product__photo-dots {
6601
6602  // Dots
6603  .slick-dots {
6604
6605    // Inactive dot
6606    li,
6607    li button {
6608      width: $slideshow-dot-size;
6609      height: $slideshow-dot-size;
6610    }
6611
6612    li button::before {
6613      width: $slideshow-dot-size;
6614      height: $slideshow-dot-size;
6615      border-radius: 100%;
6616    }
6617
6618    // Active dot
6619    li.slick-active,
6620    li.slick-active button,
6621    li.slick-active button::before {
6622      width: $slideshow-dot-size-large;
6623      height: $slideshow-dot-size-large;
6624    }
6625  }
6626}
6627
6628.hero .slick-dots {
6629  bottom: 20px;
6630
6631  li button::before {
6632    background-color: $slideshow-text-light;
6633  }
6634}
6635
6636$z-index-slideshow-image: 1;
6637
6638$z-index-slideshow-video: 2;
6639
6640$z-index-slideshow-image-overlay: 3;
6641
6642$z-index-slideshow-text: 4;
6643
6644// Slick overrides
6645
6646.hero.slick-dotted {
6647  margin-bottom: 0;
6648}
6649
6650.slick-track {
6651  cursor: pointer;
6652  cursor: -webkit-grab;
6653
6654  // Disable grab cursor if only a single slide
6655  [data-slide-count="1"] & {
6656    cursor: default;
6657
6658    &:active {
6659      cursor: default;
6660    }
6661  }
6662
6663  &:active {
6664    cursor: -webkit-grabbing;
6665  }
6666}
6667
6668// Slider arrows
6669
6670.hero {
6671  .slick-arrow {
6672    top: 48%;
6673    background: transparent;
6674    filter: drop-shadow(0 0 10px #000);
6675
6676    .icon {
6677      width: 22px;
6678      height: 22px;
6679    }
6680  }
6681
6682  @include media-query($small) {
6683    .slick-prev {
6684      left: 5px;
6685    }
6686    .slick-next {
6687      right: 5px;
6688    }
6689
6690    .slick-prev,
6691    .slick-next {
6692      .icon {
6693        width: 16px;
6694        height: 16px;
6695      }
6696    }
6697  }
6698}
6699
6700.hero {
6701  overflow: hidden;
6702
6703  // Make sure slides fill full height
6704  .slideshow__slide,
6705  .slick-list,
6706  .slick-track {
6707    height: 100%;
6708  }
6709}
6710
6711// General slideshow styles
6712
6713.slideshow-wrapper {
6714  position: relative;
6715}
6716
6717// Pause button (focusable by keyboard only)
6718
6719.slideshow__pause:focus {
6720  clip: auto;
6721  width: auto;
6722  height: auto;
6723  margin: 0;
6724  color: $colorBtnPrimaryText;
6725  background-color: $colorBtnPrimary;
6726  padding: 10px;
6727  z-index: $zindexSkipToContent;
6728  transition: none;
6729
6730  .video-is-playing & {
6731    display: none;
6732  }
6733}
6734
6735.slideshow__pause-stop {
6736  display: block;
6737
6738  .is-paused & {
6739    display: none;
6740  }
6741}
6742
6743.slideshow__pause-play {
6744  display: none;
6745
6746  .is-paused & {
6747    display: block;
6748  }
6749}
6750
6751// General slide styles
6752
6753.slideshow__slide {
6754  display: none;
6755  position: relative;
6756  overflow: hidden;
6757
6758  &:first-child {
6759    display: block;
6760  }
6761
6762  // Progress bar
6763  &:after {
6764    content: '';
6765    position: absolute;
6766    background: $colorBody;
6767    bottom: 0;
6768    height: 2px;
6769    width: 0%;
6770    z-index: 1;
6771    transition: width 0s linear 0s;
6772  }
6773}
6774
6775$z-index-hero-image: 1;
6776
6777$z-index-hero-video: 2;
6778
6779$z-index-hero-image-overlay: 3;
6780
6781$z-index-hero-text: 4;
6782
6783.hero {
6784  position: relative;
6785  overflow: hidden;
6786  background: $colorLargeImageBg;
6787}
6788
6789.hero__image-wrapper,
6790.hero__media {
6791  position: absolute;
6792  top: 0;
6793  left: 0;
6794  height: 100%;
6795  width: 100%;
6796
6797  &:before {
6798    @include overlay($z-index-hero-image-overlay);
6799    @include heroScrim();
6800
6801    .video-interactable & {
6802      pointer-events: none;
6803    }
6804  }
6805}
6806
6807.hero__image-wrapper--no-overlay:before {
6808  content: none;
6809}
6810
6811.hero__image {
6812  position: relative;
6813  width: 100%;
6814  height: 100%;
6815  z-index: $z-index-hero-image;
6816
6817  &:not(.parallax-image) {
6818    object-fit: cover;
6819    font-family: "object-fit: cover";
6820  }
6821}
6822
6823.hero__media iframe,
6824.hero__media video {
6825  width: 100%;
6826  height: 100%;
6827  pointer-events: none;
6828
6829  .video-interactable & {
6830    pointer-events: auto;
6831  }
6832}
6833
6834// MP4 sizing
6835
6836.hero__media video {
6837  position: relative;
6838  object-fit: cover;
6839  font-family: "object-fit: cover";
6840}
6841
6842// YouTube iframes need more specific sizing
6843
6844.hero__media iframe {
6845  position: absolute;
6846  top: 0;
6847  left: 0;
6848  width: 300%;
6849  left: -100%;
6850  max-width: none;
6851
6852  // This min-width may need to change slightly depending on
6853  // embedded video dimensions. Can do on a per-shop basis
6854  @media screen and (min-width: 1140px) {
6855    width: 100%;
6856    height: 300%;
6857    left: auto;
6858    top: -100%;
6859  }
6860}
6861
6862// Mobile only vimeo play button
6863
6864.vimeo-mobile-trigger {
6865  display: block;
6866  position: absolute;
6867  width: 100%;
6868  z-index: 2;
6869  margin-top: 90px;
6870
6871  .hero__text-content & {
6872    margin-top: -130px;
6873  }
6874
6875  .icon {
6876    width: 40px;
6877    height: 40px;
6878    background-color: #fff;
6879    border-radius: 50%;
6880    padding: 10px;
6881  }
6882}
6883
6884.hero__slide-link {
6885  display: block;
6886  position: absolute;
6887  height: 100%;
6888  width: 100%;
6889  color: $colorHeroText;
6890}
6891
6892.hero__text-wrap {
6893  position: relative;
6894  height: 100%;
6895  color: $colorHeroText;
6896
6897  .video-interactable & {
6898    pointer-events: none;
6899  }
6900
6901  .page-width {
6902    display: table;
6903    width: 100%;
6904    height: 100%;
6905  }
6906}
6907
6908.hero__text-wrap--absolute {
6909  position: absolute;
6910  width: 100%;
6911}
6912
6913.hero__text-content {
6914  position: relative;
6915  padding: ($gutter / 2) 0;
6916  z-index: $z-index-hero-text;
6917  @include media-query($medium-up) {
6918    padding: ($gutter * 1.5) 0;
6919  }
6920
6921  // Add spacing if slideshow arrows enabled
6922  [data-arrows="true"] & {
6923    padding-left: 20px;
6924    padding-right: 20px;
6925  }
6926}
6927
6928.hero__title {
6929  display: block;
6930  margin-bottom: 0;
6931  font-size: em(40px);
6932
6933  @include media-query($medium-up) {
6934    font-size: em(80px);
6935  }
6936}
6937
6938.hero__subtext {
6939  margin-top: 20px;
6940}
6941
6942.hero__subtitle {
6943  display: inline-block;
6944  vertical-align: middle;
6945  margin-right: 20px;
6946  margin-top: 5px;
6947  @include baseAccentFontStack;
6948
6949  @if $type_base_accent_transform {
6950    font-size: em(floor($type_base_size * 0.85));
6951  } @else {
6952    font-size: em(floor($type_base_size * 1));
6953  }
6954
6955  @include media-query($medium-up) {
6956    @if $type_base_accent_transform {
6957      font-size: em(floor($type_base_size * 1.18));
6958    } @else {
6959      font-size: em(floor($type_base_size * 1.3));
6960    }
6961  }
6962}
6963
6964.hero__link {
6965  display: inline-block;
6966
6967  .video-interactable & {
6968    pointer-events: auto;
6969  }
6970
6971  .btn {
6972    margin-top: 10px;
6973
6974    @include media-query($medium-up) {
6975      margin-top: 0;
6976    }
6977  }
6978}
6979
6980// Text alignment
6981
6982.hero__text-content {
6983  display: table-cell;
6984
6985  &.horizontal-left {
6986    text-align: left;
6987  }
6988
6989  &.horizontal-center {
6990    text-align: center;
6991  }
6992
6993  &.horizontal-right {
6994    text-align: right;
6995  }
6996
6997  &.vertical-center {
6998    vertical-align: middle;
6999    padding-top: 50px;
7000    @include media-query($medium-up) {
7001      padding-top: 90px;
7002    }
7003
7004    .hero__subtitle {
7005      margin-right: 0; // because link is a block below subtitle
7006    }
7007
7008    .hero__link {
7009      display: block;
7010      margin-top: $gutter/4;
7011      @include media-query($medium-up) {
7012        margin-top: $gutter/2;
7013      }
7014
7015      .btn {
7016        margin-left: 0;
7017      }
7018    }
7019  }
7020
7021  &.vertical-bottom {
7022    vertical-align: bottom;
7023  }
7024}
7025
7026.slick-dotted .hero__text-content.vertical-bottom {
7027  padding-bottom: 50px;
7028}
7029
7030// Slideshow height
7031
7032.hero--450px {
7033  height: floor(450px * 0.65);
7034}
7035
7036.hero--550px {
7037  height: floor(550px * 0.65);
7038}
7039
7040.hero--650px {
7041  height: floor(650px * 0.65);
7042}
7043
7044.hero--750px {
7045  height: floor(750px * 0.65);
7046}
7047
7048.hero--100vh {
7049  height: 100vh;
7050}
7051
7052.hero--natural[data-natural] {
7053  position: absolute;
7054  top: 0;
7055  left: 0;
7056  right: 0;
7057  bottom: 0;
7058}
7059
7060@include media-query($medium-up) {
7061  .hero--450px {
7062    height: 450px;
7063  }
7064  .hero--550px {
7065    height: 550px;
7066  }
7067  .hero--650px {
7068    height: 650px;
7069  }
7070  .hero--750px {
7071    height: 750px;
7072  }
7073}
7074
7075@include media-query($small) {
7076  .hero--mobile--250px:not([data-natural]) {
7077    height: 250px;
7078  }
7079  .hero--mobile--300px:not([data-natural]) {
7080    height: 300px;
7081  }
7082  .hero--mobile--400px:not([data-natural]) {
7083    height: 400px;
7084  }
7085  .hero--mobile--500px:not([data-natural]) {
7086    height: 500px;
7087  }
7088  .hero--mobile--100vh:not([data-natural]) {
7089    height: 90vh;
7090  }
7091}
7092
7093// Align to top of page if first section on page
7094
7095.index-section--hero:first-child {
7096  [data-align-top] .slideshow-wrapper {
7097    position: relative;
7098    z-index: 1;
7099  }
7100}
7101
7102@if ($animate_sections) {
7103  [data-aos="hero__animation"],
7104  .hero .slideshow__slide {
7105    .hero__title .animation-contents,
7106    .hero__subtitle .animation-contents,
7107    .hero__link .animation-contents {
7108      opacity: 0;
7109
7110      .no-js & {
7111        opacity: 1;
7112      }
7113    }
7114
7115    .hero__media,
7116    .hero__image {
7117      opacity: 0;
7118
7119      .no-js & {
7120        opacity: 1;
7121      }
7122    }
7123  }
7124
7125  [data-aos="hero__animation"].loaded.aos-animate,
7126  .hero.loaded.aos-animate .slideshow__slide.slick-active {
7127    .hero__title .animation-contents {
7128      animation: $animate_sections_text_style 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) 0.3s forwards;
7129    }
7130
7131    .hero__subtitle .animation-contents {
7132      animation: $animate_sections_text_style 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0.7s forwards;
7133    }
7134
7135    .hero__link .animation-contents {
7136      animation: fade-in 2s ease 1.5s forwards;
7137    }
7138
7139    .hero__media,
7140    .hero__image.lazyloaded,
7141    .hero__image--svg {
7142      animation: $animate_sections_background_style 2.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
7143      transition: none; // fixes safari animation conflict
7144    }
7145  }
7146
7147  $slideshowImageAnimationAmount: 200px;
7148  $slideshowImageAnimationSpeed: 0.5s;
7149
7150  // Disable animations when not active or fading out
7151  .hero__image-wrapper {
7152    transform: translateX($slideshowImageAnimationAmount);
7153    opacity: 0;
7154    transition: none;
7155  }
7156
7157  // Reset all text position for inactive slides
7158  .slideshow__slide {
7159    .hero__top-subtitle,
7160    .hero__title,
7161    .hero__subtitle {
7162      .animation-cropper {
7163        opacity: 0;
7164        transition: none;
7165      }
7166    }
7167
7168    .hero__link {
7169      opacity: 0;
7170      transition: none;
7171    }
7172  }
7173
7174  .slick-current {
7175    .hero__image-wrapper {
7176      opacity: 1;
7177      transform: translateX(0px);
7178      transition: all ($slideshowImageAnimationSpeed + 0.2s) ease;
7179    }
7180
7181    .hero__top-subtitle .animation-cropper {
7182      opacity: 1;
7183      transition: all $slideshowImageAnimationSpeed ease-in 0.64s;
7184    }
7185
7186    .hero__title .animation-cropper {
7187      opacity: 1;
7188      transition: all $slideshowImageAnimationSpeed ease-in 0.25s;
7189    }
7190
7191    .hero__subtitle .animation-cropper {
7192      opacity: 1;
7193      transition: all $slideshowImageAnimationSpeed ease-in 0.64s;
7194    }
7195
7196    .hero__link {
7197      opacity: 1;
7198      transition: all ($slideshowImageAnimationSpeed + 0.11s) ease-in 1.18s;
7199    }
7200  }
7201
7202  .slideshow__slide.animate-out {
7203    .hero__image-wrapper {
7204      opacity: 0;
7205      transform: translateX(-($slideshowImageAnimationAmount));
7206      transition: all $slideshowImageAnimationSpeed ease-in 0.05s;
7207    }
7208
7209    // Remove all text at once
7210    .hero__top-subtitle,
7211    .hero__title,
7212    .hero__subtitle {
7213      .animation-cropper {
7214        opacity: 0;
7215        transition: none;
7216      }
7217    }
7218
7219    .hero__link {
7220      opacity: 0;
7221      transition: none;
7222    }
7223  }
7224}
7225
7226@else {
7227  [data-aos="hero__animation"] {
7228    .hero__media,
7229    .hero__image {
7230      opacity: 0;
7231
7232      .no-js & {
7233        opacity: 1;
7234      }
7235    }
7236  }
7237
7238  [data-aos="hero__animation"].loaded {
7239    .hero__media,
7240    .hero__image {
7241      animation: fade-in 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
7242      transition: none; // fixes safari animation conflict
7243    }
7244  }
7245}
7246
7247/*================ Collection callout section ================*/
7248
7249.callout-images {
7250  position: relative;
7251  height: 225px;
7252  width: 225px;
7253  max-width: 100%;
7254  margin: 20px auto;
7255  display: -ms-flexbox;
7256  display: flex;
7257  -ms-flex-align: center;
7258      align-items: center;
7259  -ms-flex-pack: center;
7260      justify-content: center;
7261
7262  @include media-query($medium-up) {
7263    height: 450px;
7264    width: 450px;
7265  }
7266}
7267
7268.callout-image-centered {
7269  position: relative;
7270  width: 140px;
7271
7272  @include media-query($medium-up) {
7273    width: 280px;
7274  }
7275}
7276
7277.callout-image-placeholder {
7278  display: block;
7279  max-height: 100%;
7280  margin: 0 auto $gutter;
7281
7282  @include media-query($small) {
7283    max-width: 585px;
7284    margin: -75px 0 0 -145px;
7285  }
7286}
7287
7288// Prevent images from overlapping text
7289
7290.feature-row__callout-image + .feature-row__text .feature-row__content {
7291  background-color: $colorBody;
7292  position: relative;
7293  z-index: 3;
7294  margin: -10px;
7295  padding-left: 10px;
7296}
7297
7298@include media-query($medium-up) {
7299  .feature-row__callout-image {
7300    -ms-flex-order: 2;
7301        order: 2;
7302  }
7303  .feature-row__callout-text.feature-row__text--left {
7304    -ms-flex-order: 1;
7305        order: 1;
7306    padding: 0 ($gutter * 2) 0 0;
7307  }
7308  .feature-row__callout-text.feature-row__text--right {
7309    -ms-flex-order: 3;
7310        order: 3;
7311    padding: 0 0 0 ($gutter * 2);
7312  }
7313}
7314
7315.callout-image {
7316  position: absolute;
7317  transition: all 2.5s cubic-bezier(0.39, 0.68, 0.29, 1) 0.5s;
7318  z-index: 1;
7319  background-color: $colorBody;
7320
7321  &:nth-child(1) {
7322    position: relative;
7323    width: 100%;
7324    z-index: 2;
7325  }
7326
7327  &:nth-child(2) {
7328    bottom: 50%;
7329    left: 50%;
7330    transform: translate3d(-50%, 50%, 0);
7331    max-width: 90px;
7332
7333    @include media-query($medium-up) {
7334      max-width: 180px;
7335    }
7336  }
7337
7338  &:nth-child(3) {
7339    top: 50%;
7340    right: 50%;
7341    transform: translate3d(50%, -50%, 0);
7342    max-width: 80px;
7343
7344    @include media-query($medium-up) {
7345      max-width: 160px;
7346    }
7347  }
7348
7349  &:nth-child(4) {
7350    top: 50%;
7351    left: 50%;
7352    transform: translate3d(-50%, -50%, 0);
7353    max-width: 100px;
7354
7355    @include media-query($medium-up) {
7356      max-width: 200px;
7357    }
7358  }
7359
7360  &:nth-child(5) {
7361    right: 50%;
7362    bottom: 50%;
7363    transform: translate3d(50%, 50%, 0);
7364    max-width: 50px;
7365
7366    @include media-query($medium-up) {
7367      max-width: 100px;
7368    }
7369  }
7370}
7371
7372[data-aos="collection-callout"].aos-animate .callout-image {
7373  &:nth-child(1) {
7374    box-shadow: 0 10px 15px rgba(0,0,0,0.3);
7375  }
7376  &:nth-child(2) {
7377    bottom: 46%;
7378    left: -64px;
7379    transform: translate3d(0, 0, 0);
7380  }
7381  &:nth-child(3) {
7382    top: 52%;
7383    right: -60px;
7384    transform: translate3d(0, 0, 0);
7385  }
7386  &:nth-child(4) {
7387    top: 48%;
7388    left: -50px;
7389    transform: translate3d(0, 0, 0);
7390  }
7391  &:nth-child(5) {
7392    bottom: 54%;
7393    right: -40px;
7394    transform: translate3d(0, 0, 0);
7395  }
7396
7397  @include media-query($medium-up) {
7398    &:nth-child(1) {
7399      box-shadow: 0 20px 30px rgba(0,0,0,0.3);
7400    }
7401    &:nth-child(2) {
7402      left: -128px;
7403    }
7404    &:nth-child(3) {
7405      right: -120px;
7406    }
7407    &:nth-child(4) {
7408      left: -100px;
7409    }
7410    &:nth-child(5) {
7411      right: -80px;
7412    }
7413  }
7414}
7415
7416.collection-filter {
7417  select {
7418    display: block;
7419    width: 100%;
7420  }
7421  .grid__item:nth-child(2) {
7422    float: right;
7423  }
7424  margin-bottom: $gutter / 2;
7425}
7426
7427/*================ Module | Collection images at top of templates ================*/
7428
7429$collectionHeroLarge: 550px;
7430
7431$collectionHeroSmall: 330px;
7432
7433.collection-hero {
7434  position: relative;
7435  width: 100%;
7436  height: $collectionHeroSmall;
7437  overflow: hidden;
7438  background: $colorLargeImageBg;
7439  @include media-query($medium-up) {
7440    height: $collectionHeroLarge;
7441  }
7442}
7443
7444.collection-hero__spacer {
7445  height: $collectionHeroSmall;
7446  @include media-query($medium-up) {
7447    height: $collectionHeroLarge;
7448  }
7449}
7450
7451.collection-hero__content {
7452  position: absolute;
7453  top: 0;
7454  left: 0;
7455  bottom: 0;
7456  width: 100%;
7457  display: -ms-flexbox;
7458  display: flex;
7459  -ms-flex-align: end;
7460      align-items: flex-end;
7461  z-index: 1;
7462
7463  .page-width {
7464    width: 100%;
7465  }
7466
7467  &:before {
7468    @include overlay();
7469    @include heroScrim();
7470    transition: opacity 2.5s ease;
7471    opacity: 0;
7472    display: block;
7473  }
7474}
7475
7476.collection-hero.loaded .collection-hero__content {
7477  &:before {
7478    opacity: 1
7479  }
7480}
7481
7482/* Apply animations */
7483
7484@if ($animate_sections) {
7485  .collection-hero {
7486    .collection-hero__image {
7487      opacity: 0;
7488
7489      .no-js & {
7490        opacity: 1;
7491      }
7492    }
7493
7494    .section-header__title .animation-contents {
7495      opacity: 0;
7496
7497      .no-js & {
7498        opacity: 1;
7499      }
7500    }
7501
7502    .collection-hero__image.lazyloaded {
7503      animation: $animate_sections_background_style 2.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
7504      transition: none; // fixes safari animation conflict
7505    }
7506
7507    &.loaded {
7508      .section-header__title .animation-contents {
7509        animation: $animate_sections_text_style 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0.5s forwards;
7510      }
7511    }
7512  }
7513}
7514
7515.collection-switcher__title {
7516  display: inline-block;
7517  margin-bottom: 0;
7518
7519  & + & {
7520    margin-left: 20px;
7521  }
7522}
7523
7524.collection-switcher__trigger.is-active {
7525  border-bottom: 2px solid currentColor;
7526}
7527
7528// Hide all products except first one to avoid page reflow
7529
7530.collection-switcher__collection-grid {
7531  .grid__item {
7532    display: none;
7533
7534    &:first-child {
7535      display: block;
7536    }
7537  }
7538
7539  &.slick-initialized .grid__item {
7540    display: block;
7541  }
7542}
7543
7544// Offset for quick view button
7545
7546.collection-switcher__collection-grid {
7547  .slick-list {
7548    padding-top: 15px;
7549  }
7550
7551  @for $i from 1 through 5 {
7552    &[data-per-row="#{$i}"] .grid__item:nth-child(#{$i}n) .quick-product__btn {
7553      right: 1px;
7554    }
7555  }
7556}
7557
7558// Custom slideshow arrow styles
7559
7560.collection-switcher__collection-grid {
7561  .slick-next,
7562  .slick-prev {
7563    top: 40%;
7564  }
7565
7566  .slick-next {
7567    right: -20px; // half of button width
7568  }
7569
7570  .slick-prev {
7571    left: $grid-gutter - 20px; // offset grid negative margin + half of button width
7572  }
7573
7574  @include media-query($small) {
7575    .slick-next {
7576      right: -10px;
7577    }
7578
7579    .slick-prev {
7580      left: 10px;
7581    }
7582  }
7583}
7584
7585/*================ Logo Image ================*/
7586
7587.site-header__logo .logo--has-inverted {
7588  .is-light & {
7589    opacity: 0;
7590    visibility: hidden;
7591    overflow: hidden;
7592    height: 0;
7593  }
7594}
7595
7596.site-header__logo .logo--inverted {
7597  opacity: 0;
7598  visibility: hidden;
7599  overflow: hidden;
7600  height: 0;
7601
7602  .is-light & {
7603    opacity: 1;
7604    visibility: visible;
7605    height: auto;
7606  }
7607}
7608
7609/*================ Text Shop Name ================*/
7610
7611.site-header__logo {
7612  font-size: em(20px);
7613
7614  @include media-query($medium-up) {
7615    text-align: left;
7616    font-size: em(25px);
7617  }
7618}
7619
7620.site-header__logo a,
7621.header-logo a {
7622  color: $colorNavText;
7623
7624  .is-light & {
7625    color: $colorStickyNavLinks;
7626
7627    &:hover {
7628      color: $colorStickyNavLinks;
7629    }
7630  }
7631}
7632
7633.site-header {
7634  @if ($colorNav == $colorBody) {
7635    border-bottom: 1px solid $colorBorder;
7636  }
7637  .is-light & {
7638    border-bottom: none;
7639  }
7640}
7641
7642/*================ Submenu items ================*/
7643
7644.site-nav__dropdown-link {
7645  display: block;
7646  white-space: nowrap;
7647  padding: 8px 15px;
7648  font-size: em(16px);
7649}
7650
7651/*================ Module | Theme Tags ================*/
7652
7653.tags a {
7654  font-size: em(16px);
7655
7656  @include media-query($medium-up) {
7657    font-size: em(19px);
7658  }
7659}
7660
7661.tags--vertical {
7662  list-style: none outside;
7663  margin: 0;
7664  padding: 0;
7665
7666  li {
7667    margin-bottom: 5px;
7668
7669    @include media-query($medium-up) {
7670      margin-bottom: 10px;
7671    }
7672  }
7673}
7674
7675.tags--article {
7676  a {
7677    padding-right: $gutter / 2;
7678    padding-left: 0;
7679  }
7680}
7681
7682.tags__title {
7683  margin-right: $gutter / 2;
7684}
7685
7686.tag--active {
7687  font-weight: 900;
7688}
7689
7690// Show more/less button
7691
7692.tags-toggle {
7693  margin-top: 10px;
7694
7695  @include media-query($medium-up) {
7696    margin-top: 20px;
7697  }
7698}
7699
7700$label-bottom-margin: 12px;
7701
7702.variant-input-wrap {
7703  border: 0;
7704  padding: 0;
7705  margin: 0 0 ($gutter / 1.5);
7706  position: relative;
7707
7708  input {
7709    @include visuallyHidden;
7710  }
7711
7712  label {
7713    position: relative;
7714    display: inline-block;
7715    line-height: 1;
7716    font-weight: normal;
7717    padding: 7px 15px 7px;
7718    margin: 0 8px $label-bottom-margin 0;
7719    font-style: normal;
7720    font-size: $type_base_size;
7721    text-transform: none;
7722    background-color: $colorBody;
7723    box-shadow: 0 0 0 1px $colorBorder;
7724    @include baseFontStack;
7725    @include media-query($small) {
7726      font-size: $type_base_size - 1;
7727    }
7728
7729    &.disabled {
7730      color: $colorBorder;
7731    }
7732
7733    &.disabled:after {
7734      position: absolute;
7735      content: "";
7736      left: 50%;
7737      top: 0;
7738      bottom: 0;
7739      border-left: 1px solid;
7740      border-color: $colorBorder;
7741      transform: rotate(45deg);
7742    }
7743  }
7744
7745  input[type='radio']:focus + label {
7746    background-color: rgba($colorTextBody, 0.05);
7747    box-shadow: 0 0 0 1px $colorTextBody;
7748  }
7749
7750  input[type='radio']:checked + label {
7751    box-shadow: 0 0 0 2px $colorTextBody;
7752  }
7753}
7754
7755.variant-input {
7756  display: inline-block;
7757
7758  // Firefox bug fix
7759  select & {
7760    display: block;
7761  }
7762}
7763
7764.variant-wrapper {
7765  margin-bottom: -$label-bottom-margin;
7766
7767  .no-js & {
7768    display: none;
7769  }
7770}
7771
7772.variant-wrapper--dropdown {
7773  display: inline-block;
7774  max-width: 100%;
7775  margin-right: $gutter / 2;
7776}
7777
7778.variant__label {
7779  display: block;
7780  margin-bottom: 10px;
7781  cursor: default;
7782  font-style: normal;
7783}
7784
7785.variant__label-info {
7786  @include baseFontStack;
7787  text-transform: none;
7788  font-weight: normal;
7789}
7790
7791.grid-product__content {
7792  position: relative;
7793  margin-bottom: $gutter / 2;
7794  text-align: left;
7795
7796  @include media-query($medium-up) {
7797    margin-bottom: $gutter;
7798  }
7799
7800  .product-single__related & {
7801    margin-bottom: 0;
7802  }
7803}
7804
7805.grid-product__link {
7806  display: block;
7807}
7808
7809.grid-product__image-mask {
7810  position: relative;
7811  overflow: hidden;
7812
7813  .grid-product__link--disabled &,
7814  .grid-product__link--disabled:hover &,
7815  .grid-product__link--disabled:focus & {
7816    opacity: 0.5;
7817  }
7818}
7819
7820.grid-product__image {
7821  display: block;
7822  margin: 0 auto;
7823  width: 100%;
7824
7825  .grid-product__link:hover &,
7826  .grid-product__link:focus & {
7827  }
7828
7829}
7830
7831.grid-product__secondary-image {
7832  position: absolute;
7833  top: -1px;
7834  left: -1px;
7835  right: -1px;
7836  bottom: -1px;
7837  background-repeat: no-repeat;
7838  background-size: cover;
7839  background-position: center;
7840  opacity: 0;
7841
7842  .grid-product__content:hover & {
7843    @if ($animate_images) {
7844      @if ($animate_images_style == 'zoom-fade') {
7845        animation: #{$animate_images_style}-small 5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
7846      } @else {
7847        animation: #{$animate_images_style}-small 0.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
7848      }
7849    } @else {
7850      opacity: 1;
7851    }
7852  }
7853
7854  @include media-query($small) {
7855    .supports-touch & {
7856      display: none;
7857    }
7858  }
7859}
7860
7861// Product title/price
7862
7863.grid-product__meta {
7864  position: relative;
7865  padding: 10px 0 6px 0;
7866  line-height: $type_base_line_height - 0.1;
7867}
7868
7869.grid-product__title {
7870  font-size: em(floor($type_base_size * 1.20 * 0.85));
7871  @include media-query($medium-up) {
7872    font-size: em(floor($type_base_size * 1.20));
7873  }
7874}
7875
7876.grid-product__vendor {
7877  @include baseAccentFontStack;
7878  font-size: em(11px);
7879  margin-top: 3px;
7880}
7881
7882.grid-product__price {
7883  margin-top: 3px;
7884  font-size: em(ceil($type_base_size * 0.9 * 0.85));
7885  @include media-query($medium-up) {
7886    font-size: em(ceil($type_base_size * 0.9));
7887  }
7888}
7889
7890.grid-product__price--original {
7891  text-decoration: line-through;
7892  margin-right: 5px;
7893}
7894
7895// Product sale and sold out tag
7896
7897.grid-product__tag {
7898  position: absolute;
7899  top: 0;
7900  right: 0;
7901  @include baseAccentFontStack;
7902  font-size: em(10px);
7903  line-height: 1;
7904  padding: 6px 6px 6px 8px;
7905  background-color: $colorBtnPrimary;
7906  color: $colorBtnPrimaryText;
7907  z-index: 1;
7908  transition: opacity 0.4s ease;
7909
7910  @include media-query($medium-up) {
7911    font-size: em(13px);
7912    padding: 7px 9px 7px 11px;
7913  }
7914}
7915
7916.grid-product__tag--sale {
7917  background-color: $colorSaleTag;
7918  color: color-control($colorSaleTag, 1);
7919}
7920
7921// Quick shop
7922
7923$quick_button_size: 65px;
7924
7925.quick-product__btn {
7926  position: absolute;
7927  top: -15px;
7928  right: -15px;
7929  z-index: 2;
7930  border-radius: 50%;
7931  width: $quick_button_size;
7932  height: $quick_button_size;
7933  background-color: $colorBtnPrimary;
7934  color: $colorBtnPrimaryText;
7935  overflow: hidden;
7936  font-size: em(floor($type_base_size * 0.85));
7937  line-height: 1.2;
7938  cursor: pointer;
7939  opacity: 0;
7940  transform: translateY(5px);
7941  transition: opacity 0.15s ease, transform 0.15s ease-out, background 0.3s ease;
7942
7943  .no-js & {
7944    display: none;
7945  }
7946
7947  .grid-product__content:hover & {
7948    opacity: 1;
7949    transform: translateY(0);
7950    transition: opacity 0.15s ease, transform 0.15s ease-out;
7951  }
7952}
7953
7954.quick-product__label {
7955  position: relative;
7956  top: 54%;
7957  transform: translateY(-50%);
7958  display: block;
7959  text-align: center;
7960  width: $quick_button_size;
7961}
7962
7963.grid-product__has-quick-shop .grid-product__content:hover .grid-product__tag {
7964  opacity: 0;
7965  transition-duration: 0.2s;
7966}
7967
7968// Mobile horizontal overflow grid
7969
7970@include media-query($small) {
7971  .grid-overflow-wrapper {
7972    overflow: hidden;
7973    overflow-x: scroll;
7974    -webkit-overflow-scrolling: touch;
7975    padding-bottom: $gutter / 1.5;
7976
7977    .grid {
7978      white-space: nowrap;
7979      display: -ms-flexbox;
7980      display: flex;
7981    }
7982
7983    .grid__item {
7984      width: 66vw;
7985      -ms-flex: 0 0 66vw;
7986          flex: 0 0 66vw;
7987      display: inline-block;
7988      float: none;
7989      white-space: normal;
7990
7991      &:first-child {
7992        margin-left: $page-width-gutter-small;
7993      }
7994
7995      &:last-child:after {
7996        content: '';
7997        display: inline-block;
7998        width: 100%;
7999        margin-right: $page-width-gutter-small;
8000      }
8001    }
8002
8003    .grid__item--view-all {
8004      -ms-flex-item-align: center;
8005          -ms-grid-row-align: center;
8006          align-self: center;
8007    }
8008
8009    .grid-product__content {
8010      margin-bottom: 0;
8011    }
8012  }
8013
8014  [data-aos="overflow__animation"] {
8015    transform: translateX(100vw);
8016    transition: all 0.8s cubic-bezier(.25,.46,.45,.94);
8017
8018    &.aos-animate {
8019      transform: translateX(0);
8020    }
8021  }
8022}
8023
8024// See all (mobile overflow)
8025
8026.grid-product__see-all {
8027  display: inline-block;
8028  padding: $gutter / 2;
8029  text-align: center;
8030  border: 1px solid $colorBorder;
8031  margin-top: -60px; // approx of what title+price is
8032}
8033
8034// Unload
8035
8036.grid-product {
8037  &.aos-animate.unload {
8038    opacity: 0;
8039    transition-duration: 0.3s;
8040    animation: grid-product__loading 1.5s ease infinite 1.5s;
8041  }
8042}
8043
8044.grid-product__colors {
8045  display: -ms-flexbox;
8046  display: flex;
8047  -ms-flex-wrap: wrap;
8048      flex-wrap: wrap;
8049  -ms-flex-align: center;
8050      align-items: center;
8051  line-height: $colorSwatchCollectionSize;
8052
8053  @include media-query($medium-up) {
8054    line-height: $colorSwatchCollectionSizeLarge;
8055  }
8056}
8057
8058.color-swatch {
8059  position: relative;
8060  display: block;
8061  text-indent: -9999px;
8062  overflow-y: hidden;
8063  margin: 0 4px 4px;
8064  background-position: center;
8065  background-size: cover;
8066  background-repeat: no-repeat;
8067  width: 2.5em;
8068  box-shadow: 0 0 0 1px $colorBorder;
8069  transition: box-shadow 0.2s ease;
8070
8071  &:before {
8072    content: '';
8073    position: absolute;
8074    top: 0;
8075    left: 0;
8076    right: 0;
8077    bottom: 0;
8078    z-index: 2;
8079  }
8080
8081  &:before {
8082    border: 3px solid $colorBody;
8083  }
8084}
8085
8086// Product grid direct variant links
8087
8088a.color-swatch:hover {
8089  box-shadow: 0 0 0 1px $colorTextBody;
8090}
8091
8092.color-swatch--small {
8093  width: $colorSwatchCollectionSize;
8094  height: $colorSwatchCollectionSize;
8095
8096  @include media-query($medium-up) {
8097    width: $colorSwatchCollectionSizeLarge;
8098    height: $colorSwatchCollectionSizeLarge;
8099  }
8100
8101  &:before {
8102    border: 2px solid $colorBody;
8103  }
8104}
8105
8106/*================ Modules | Theme collection grid item ================*/
8107
8108.skrim__item {
8109  overflow: hidden;
8110}
8111
8112.skrim__item-content {
8113  position: relative;
8114  overflow: hidden;
8115  height: 100%;
8116  width: 100%;
8117  background: $colorLargeImageBg;
8118
8119  .product-navigation & {
8120    background: $colorLargeImageBg;
8121  }
8122
8123  .icon-arrow-left {
8124    width: 33px;
8125    margin-right: 8px;
8126  }
8127  .icon-arrow-right {
8128    width: 33px;
8129    margin-left: 8px;
8130  }
8131
8132  .skrim__overlay {
8133    position: relative;
8134    transition: transform 2s ease-out 0s;
8135
8136    &:after {
8137      @include overlay();
8138      @include partialScrim();
8139      transition: all 0.5s ease;
8140    }
8141    &:before {
8142      @include overlay();
8143      background: #000;
8144      opacity: 0;
8145      transition: opacity 0.5s ease;
8146    }
8147
8148
8149    @if ($animate_sections) {
8150      &:hover,
8151      &:focus {
8152        transform: scale(1.05);
8153
8154        &:before {
8155          opacity: 0.2;
8156          transition: opacity 0.2s ease-in;
8157        }
8158      }
8159    }
8160  }
8161}
8162
8163.skrim__link {
8164  display: block;
8165  width: 100%;
8166  height: 100%;
8167}
8168
8169.skrim__overlay {
8170  display: block;
8171  overflow: hidden;
8172  height: 100%;
8173  width: 100%;
8174  background-size: cover;
8175  background-repeat: no-repeat;
8176  background-position: center;
8177}
8178
8179.skrim__title {
8180  position: absolute;
8181  bottom: 0;
8182  left: 0;
8183  margin: 0 ($gutter/1.6/2) ($gutter/1.6/2) ($gutter/1.6/2);
8184  pointer-events: none;
8185  color: $colorHeroText;
8186  transition: bottom 0.5s ease;
8187
8188  @include media-query($medium-up) {
8189    margin: 0 ($gutter/1.6) ($gutter/1.6) ($gutter/1.6);
8190  }
8191}
8192
8193.skrim__title--right {
8194  left: auto;
8195  right: 0;
8196}
8197
8198.skrim__underline-me {
8199  position: relative;
8200  display: inline-block;
8201}
8202
8203@if ($animate_underlines) {
8204  /* Hover animation */
8205  .skrim__underline-me:after {
8206    content: '';
8207    position: absolute;
8208    bottom: 0;
8209    left: 0;
8210    width: 0%;
8211    border-bottom: 2px solid $colorHeroText;
8212    transition: 0.5s;
8213  }
8214  .skrim__link:hover {
8215    .skrim__underline-me:after {
8216      width: 100%;
8217    }
8218    .skrim__title {
8219      bottom: 10px;
8220    }
8221  }
8222}
8223
8224@if ($animate_sections) {
8225  /* Scroll animation */
8226  [data-aos="skrim__animation"] .skrim__overlay {
8227    transform: scale(1.1);
8228    opacity: 0;
8229    transition: opacity 1s cubic-bezier(0.44, 0.13, 0.48, 0.87), transform 1.5s cubic-bezier(0.44, 0.13, 0.48, 0.87);
8230
8231    .no-js & {
8232      opacity: 1;
8233    }
8234  }
8235  [data-aos="skrim__animation"] .skrim__overlay:after {
8236    opacity: 0;
8237
8238    .no-js & {
8239      opacity: 1;
8240    }
8241  }
8242
8243  [data-aos="skrim__animation"].aos-animate .skrim__overlay {
8244    opacity: 1;
8245    transform: scale(1,1);
8246  }
8247  [data-aos="skrim__animation"].aos-animate .skrim__overlay:after {
8248    opacity: 1;
8249    transition-duration: 1.5s;
8250  }
8251  .skrim__item:nth-child(2) .skrim__overlay { transition-delay: 0.25s; }
8252  .skrim__item:nth-child(3) .skrim__overlay { transition-delay: 0.5s; }
8253  .skrim__item:nth-child(4) .skrim__overlay { transition-delay: 0.13s; }
8254  .skrim__item:nth-child(5) .skrim__overlay { transition-delay: 0.38s; }
8255  .skrim__item:nth-child(6) .skrim__overlay { transition-delay: 0.63s; }
8256
8257  .skrim__item:nth-child(7) .skrim__overlay { transition-delay: 0.25s; }
8258  .skrim__item:nth-child(8) .skrim__overlay { transition-delay: 0.5s; }
8259  .skrim__item:nth-child(9) .skrim__overlay { transition-delay: 0.13s; }
8260  .skrim__item:nth-child(10) .skrim__overlay { transition-delay: 0.38s; }
8261  .skrim__item:nth-child(11) .skrim__overlay { transition-delay: 0.63s; }
8262  .skrim__item:nth-child(12) .skrim__overlay { transition-delay: 0.45s; }
8263}
8264
8265.custom-content {
8266  display: -ms-flexbox;
8267  display: flex;
8268  -ms-flex-align: stretch;
8269      align-items: stretch;
8270  -ms-flex-wrap: wrap;
8271      flex-wrap: wrap;
8272  width: auto;
8273  margin-bottom: -$grid-gutter;
8274  margin-left: -$grid-gutter;
8275
8276  @include media-query($small) {
8277    margin-bottom: -$grid-gutter-small;
8278    margin-left: -$grid-gutter-small;
8279  }
8280}
8281
8282.custom__item {
8283  -ms-flex: 0 0 auto;
8284      flex: 0 0 auto;
8285  margin-bottom: $grid-gutter;
8286  padding-left: $grid-gutter;
8287  max-width: 100%;
8288
8289  @include media-query($small) {
8290    -ms-flex: 0 0 auto;
8291        flex: 0 0 auto;
8292    padding-left: $grid-gutter-small;
8293    margin-bottom: $grid-gutter-small;
8294
8295    &.small--one-half {
8296      -ms-flex: 1 0 50%;
8297          flex: 1 0 50%;
8298      max-width: 400px;
8299      margin-left: auto;
8300      margin-right: auto;
8301    }
8302  }
8303
8304  img {
8305    display: block;
8306  }
8307}
8308
8309.custom__item-inner {
8310  position: relative;
8311  display: inline-block;
8312  text-align: left;
8313  max-width: 100%;
8314  width: 100%;
8315}
8316
8317.custom__item-inner--video,
8318.custom__item-inner--html {
8319  display: block;
8320}
8321
8322.custom__item-inner--image {
8323  width: 100%;
8324}
8325
8326.custom__item-inner--html img {
8327  display: block;
8328  margin: 0 auto;
8329}
8330
8331.custom__item-inner--placeholder-image {
8332  width: 100%;
8333}
8334
8335/*================ Flex item alignment ================*/
8336
8337.align--top-middle {
8338  text-align: center;
8339}
8340
8341.align--top-right {
8342  text-align: right;
8343}
8344
8345.align--middle-left {
8346  -ms-flex-item-align: center;
8347      -ms-grid-row-align: center;
8348      align-self: center;
8349}
8350
8351.align--center {
8352  -ms-flex-item-align: center;
8353      -ms-grid-row-align: center;
8354      align-self: center;
8355  text-align: center;
8356}
8357
8358.align--middle-right {
8359  -ms-flex-item-align: center;
8360      -ms-grid-row-align: center;
8361      align-self: center;
8362  text-align: right;
8363}
8364
8365.align--bottom-left {
8366  -ms-flex-item-align: end;
8367      align-self: flex-end;
8368}
8369
8370.align--bottom-middle {
8371  -ms-flex-item-align: end;
8372      align-self: flex-end;
8373  text-align: center;
8374}
8375
8376.align--bottom-right {
8377  -ms-flex-item-align: end;
8378      align-self: flex-end;
8379  text-align: right;
8380}
8381
8382.article__grid-image {
8383  display: block;
8384  text-align: center;
8385  margin-bottom: $gutter / 2;
8386
8387  img {
8388    display: block;
8389  }
8390}
8391
8392.article__date {
8393  @include baseAccentFontStack;
8394  margin-bottom: 6px;
8395  font-size: em(11px);
8396  @include media-query($medium-up) {
8397    margin-bottom: 4px;
8398    font-size: em(13px);
8399  }
8400}
8401
8402.index-section .article__date {
8403  margin-bottom: 2px;
8404}
8405
8406.article__title {
8407  font-size: em($type_base_size + 2);
8408  @include media-query($medium-up) {
8409    font-size: em($type_base_size + 5);
8410  }
8411}
8412
8413.article__author {
8414  font-size: em($type_base_size - 1);
8415  font-style: italic;
8416  margin-top: 2px;
8417}
8418
8419.article__grid-meta {
8420  margin-bottom: $gutter;
8421}
8422
8423.logo-bar {
8424  text-align: center;
8425  margin-bottom: -$gutter;
8426  display: -ms-flexbox;
8427  display: flex;
8428  -ms-flex-align: center;
8429      align-items: center;
8430  -ms-flex-pack: center;
8431      justify-content: center;
8432  -ms-flex-wrap: wrap;
8433      flex-wrap: wrap;
8434}
8435
8436.logo-bar__item {
8437  -ms-flex: 0 1 110px;
8438      flex: 0 1 110px;
8439  vertical-align: middle;
8440  margin: 0 ($gutter / 2) ($gutter / 1.5);
8441  @include media-query($medium-up) {
8442    -ms-flex: 0 1 160px;
8443        flex: 0 1 160px;
8444    margin: 0 ($gutter / 1.5) $gutter;
8445  }
8446}
8447
8448.logo-bar__image {
8449  display: block;
8450  margin: 0 auto;
8451}
8452
8453.logo-bar__link {
8454  display: block;
8455}
8456
8457@if ($animate_images) {
8458  [data-aos="logo__animation"] .logo-bar__item {
8459    opacity: 0;
8460  }
8461
8462  [data-aos="logo__animation"].aos-animate .logo-bar__item {
8463    animation: fade-in 0.5s ease 0s forwards;
8464  }
8465  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(2) {
8466    animation-delay: 0.2s;
8467  }
8468  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(3) {
8469    animation-delay: 0.4s;
8470  }
8471  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(4) {
8472    animation-delay: 0.6s;
8473  }
8474  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(5) {
8475    animation-delay: 0.8s;
8476  }
8477  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(6) {
8478    animation-delay: 1.0s;
8479  }
8480  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(7) {
8481    animation-delay: 1.2s
8482  }
8483  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(8) {
8484    animation-delay: 1.4s;
8485  }
8486  [data-aos="logo__animation"].aos-animate .logo-bar__item:nth-child(9) {
8487    animation-delay: 1.6s;
8488  }
8489}
8490
8491.background-media-text {
8492  position: absolute;
8493  width: 100%;
8494  overflow: hidden;
8495  background: $colorLargeImageBg;
8496}
8497
8498.background-media-text__video {
8499  position: absolute;
8500  top: 0;
8501  left: 0;
8502  bottom: 0;
8503  width: 100%;
8504  z-index: 0;
8505}
8506
8507.background-media-text__video {
8508  @include media-query($small) {
8509    width: 300%;
8510    left: -100%;
8511  }
8512
8513  iframe,
8514  video {
8515    position: absolute;
8516    top: 0;
8517    left: 0;
8518    height: 100%;
8519    width: 100%;
8520    pointer-events: none;
8521
8522    @include media-query($medium-up) {
8523      height: 120%;
8524      max-width: none;
8525      left: -100%;
8526      height: 150%;
8527      width: 300%;
8528    }
8529
8530    // This min-width may need to change slightly depending on
8531    // embedded video dimensions. Can do on a per-shop basis
8532    @media screen and (min-width: 1140px) {
8533      width: 100%;
8534      height: 300%;
8535      left: auto;
8536      top: -100%;
8537    }
8538  }
8539}
8540
8541.background-media-text__inner {
8542  position: absolute;
8543  z-index: 1;
8544  width: 100%;
8545}
8546
8547.background-media-text__aligner {
8548  margin: ($gutter*2) $gutter;
8549}
8550
8551.background-media-text__text {
8552  text-align: left;
8553  background: $colorBody;
8554  padding: $gutter;
8555  width: 380px;
8556}
8557
8558.background-media-text__text .btn {
8559  margin-top: $gutter / 2;
8560}
8561
8562@include media-query($medium-up) {
8563  .background-media-text--right .animation-cropper {
8564    float: right;
8565  }
8566}
8567
8568// Section height
8569
8570.background-media-text__container {
8571  position: absolute;
8572  top: 0;
8573  left: 0;
8574  right: 0;
8575  bottom: 0;
8576}
8577
8578@include media-query($small) {
8579  .background-media-text {
8580    position: relative;
8581  }
8582  .background-media-text__inner {
8583    position: relative;
8584  }
8585  .background-media-text__container,
8586  .background-media-text__video {
8587    position: relative;
8588    height: 240px;
8589  }
8590  .background-media-text__aligner {
8591    margin: -11px -11px 11px;
8592  }
8593  .background-media-text__text {
8594    padding: $gutter * 0.75;
8595    width: auto;
8596  }
8597  .background-media-text.loading {
8598    &:before, &:after {
8599      top: 117px;
8600    }
8601  }
8602}
8603
8604@include media-query($medium-up) {
8605  .background-media-text__spacer.background-media-text--450,
8606  .background-media-text--450,
8607  .background-media-text--450 .background-media-text__image,
8608  .background-media-text--450 .background-media-text__video {
8609    min-height: 450px;
8610  }
8611  .background-media-text__spacer.background-media-text--550,
8612  .background-media-text--550,
8613  .background-media-text--550 .background-media-text__image,
8614  .background-media-text--550 .background-media-text__video {
8615    min-height: 550px;
8616  }
8617  .background-media-text__spacer.background-media-text--650,
8618  .background-media-text--650,
8619  .background-media-text--650 .background-media-text__image,
8620  .background-media-text--650 .background-media-text__video {
8621    min-height: 650px;
8622  }
8623  .background-media-text__spacer.background-media-text--750,
8624  .background-media-text--750,
8625  .background-media-text--750 .background-media-text__image,
8626  .background-media-text--750 .background-media-text__video {
8627    min-height: 750px;
8628  }
8629}
8630
8631@if ($animate_sections) {
8632  [data-aos="background-media-text__animation"] .background-media-text__image.lazyloaded,
8633  [data-aos="background-media-text__animation"] .background-media-text__image svg,
8634  [data-aos="background-media-text__animation"] .background-media-text__video {
8635    opacity: 0;
8636
8637    .no-js & {
8638      animation: none;
8639      opacity: 1;
8640    }
8641  }
8642
8643  [data-aos="background-media-text__animation"].aos-animate .background-media-text__image.lazyloaded,
8644  [data-aos="background-media-text__animation"].aos-animate .background-media-text__image svg,
8645  [data-aos="background-media-text__animation"].loaded.aos-animate .background-media-text__video {
8646    animation: $animate_sections_background_style 2.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
8647    transition: none; // fixes safari animation conflict
8648  }
8649
8650  @include media-query($medium-up) {
8651    [data-aos="background-media-text__animation"] .background-media-text__inner .animation-contents {
8652      opacity: 0;
8653
8654      .no-js & {
8655        animation: none;
8656        opacity: 1;
8657      }
8658    }
8659
8660    [data-aos="background-media-text__animation"].loaded.aos-animate .background-media-text__inner .animation-contents {
8661      animation: $animate_sections_text_style 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0.5s forwards;
8662    }
8663  }
8664}
8665
8666@else {
8667  [data-aos="background-media-text__animation"] .background-media-text__video {
8668    opacity: 0;
8669
8670    .no-js & {
8671      opacity: 1;
8672    }
8673  }
8674
8675  [data-aos="background-media-text__animation"].loaded .background-media-text__video {
8676    animation: fade-in 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
8677  }
8678}
8679
8680.quote-icon {
8681  display: block;
8682  margin: 0 auto 20px;
8683}
8684
8685// Text styles
8686
8687.testimonials-slider__text {
8688  padding: 0;
8689  margin-bottom: $gutter * 1.5;
8690
8691  .slick-slider & {
8692    margin-right: $gutter;
8693    margin-bottom: 0;
8694  }
8695
8696  .text-center .slick-slider & {
8697    margin-left: $gutter / 2;
8698    margin-right: $gutter / 2;
8699  }
8700
8701  cite {
8702    @include headerFontStack;
8703    font-size: em($type_base_size + 2);
8704    font-style: normal;
8705  }
8706
8707  p {
8708    margin-bottom: $gutter / 4;
8709
8710    + cite {
8711      margin-top: 0;
8712    }
8713  }
8714}
8715
8716// Section image
8717
8718$testimonialImageSize: 142px;
8719
8720.testimonail-image {
8721  max-width: $testimonialImageSize;
8722  background-color: $colorBody;
8723
8724  .text-center & {
8725    margin-left: auto;
8726    margin-right: auto;
8727  }
8728}
8729
8730.testimonail-image--round {
8731  width: $testimonialImageSize;
8732  height: $testimonialImageSize;
8733  max-width: none;
8734  border-radius: $testimonialImageSize;
8735
8736  // fix animation bug in Safari
8737  img {
8738    overflow: hidden;
8739    border-radius: $testimonialImageSize;
8740  }
8741}
8742
8743// Slick overrides
8744
8745.testimonials-slider.slick-initialized {
8746  cursor: grab;
8747}
8748
8749@include media-query($medium-up) {
8750  .testimonials-slider.slick-initialized[data-count="1"],
8751  .testimonials-slider.slick-initialized[data-count="2"],
8752  .testimonials-slider.slick-initialized[data-count="3"] {
8753    cursor: default;
8754
8755    .slick-track {
8756      cursor: default;
8757    }
8758  }
8759}
8760
8761// Prevent reflow by hiding all but first testimonial when a slider
8762
8763@include media-query($small) {
8764  .testimonials-slide {
8765    display: none;
8766
8767    &:first-child,
8768    .slick-initialized & {
8769      display: block;
8770    }
8771  }
8772}
8773
8774// Slick dot positioning and color
8775
8776.testimonials-wrapper .slick-dots {
8777  position: relative;
8778  bottom: 0;
8779  margin-top: $gutter / 2;
8780
8781  li button::before {
8782    background-color: $colorTextBody;
8783  }
8784}
8785
8786// Slick selected outline overrides
8787
8788.testimonials-wrapper .slick-slide[tabindex="0"] {
8789  outline: none;
8790}
8791
8792.announcement {
8793  position: relative;
8794  overflow: hidden;
8795  background-color: $colorAnnouncement;
8796  color: $colorAnnouncementText;
8797  max-height: 100px; // reset in JS
8798  transition: max-height 0.3s cubic-bezier(0, 0, 0.38, 1);;
8799  transform: translateZ(0);
8800  z-index: $z-index-announcement;
8801}
8802
8803.announcement--closed {
8804  max-height: 0 !important;
8805}
8806
8807.announcement__text {
8808  display: block;
8809  padding: 5px 20px 4px;
8810  font-size: em(14px);
8811  transition: opacity 0.75s ease;
8812  text-align: center;
8813
8814  @include media-query($medium-up) {
8815    padding: 6px 20px 5px;
8816    font-size: em(16px);
8817  }
8818
8819  .announcement--closed & {
8820    opacity: 0;
8821  }
8822}
8823
8824.announcement__link {
8825  display: block;
8826  color: $colorAnnouncementText;
8827
8828  &:hover {
8829    color: $colorAnnouncementText;
8830  }
8831}
8832
8833.announcement__close {
8834  display: block;
8835  position: absolute;
8836  top: 50%;
8837  right: 0;
8838  transform: translateY(-50%);
8839  padding: 0 10px;
8840  transition: opacity 1s ease 0.8s;
8841  cursor: pointer;
8842  z-index: 2;
8843
8844  .announcement--closed & {
8845    opacity: 0;
8846  }
8847
8848  .icon {
8849    color: $colorAnnouncementText;
8850    width: 20px;
8851    height: 20px;
8852    vertical-align: middle;
8853    @include media-query($medium-up) {
8854      width: 22px;
8855      height: 22px;
8856    }
8857  }
8858}
8859
8860.shopify-challenge__container {
8861  padding: 30px 22px;
8862  @include media-query($medium-up) {
8863    padding: 120px 0;
8864  }
8865}
8866
8867.newsletter {
8868  margin: 0 auto;
8869  max-width: 520px;
8870}
8871
8872.newsletter-section .errors {
8873  margin-left: auto;
8874  margin-right: auto;
8875  max-width: 520px;
8876}
8877
8878.modal .newsletter .h1 {
8879  margin-bottom: $gutter / 2;
8880  font-size: 1.6em;
8881  @include media-query($medium-up) {
8882    font-size: 1.8em;
8883    margin-bottom: $gutter;
8884  }
8885}
8886
8887.modal .newsletter p,
8888.newsletter-section .rte p {
8889  font-size: em($type_base_size);
8890  margin-bottom: $gutter / 2;
8891  @include media-query($medium-up) {
8892    font-size: em($type_base_size + 2);
8893  }
8894}
8895
8896.modal .newsletter .image-wrap {
8897  margin-bottom: $gutter / 4;
8898  @include media-query($medium-up) {
8899    margin-bottom: $gutter / 2;
8900  }
8901}
8902
8903.modal .newsletter input {
8904  font-size: em($type_base_size);
8905  @include media-query($medium-up) {
8906    font-size: em($type_base_size + 1);
8907  }
8908}
8909
8910.modal .newsletter .text-close {
8911  text-decoration: underline;
8912}
8913
8914.newsletter__input-group {
8915  background-color: $colorInputBg;
8916  margin: 0 auto 20px;
8917  max-width: 400px;
8918}
8919
8920.newsletter__input {
8921  &::-webkit-input-placeholder {
8922    color: $colorTextBody;
8923    opacity: 1;
8924  }
8925
8926  &:-moz-placeholder {
8927    color: $colorTextBody;
8928    opacity: 1;
8929  }
8930
8931  &::-moz-placeholder {
8932    color: $colorTextBody;
8933    opacity: 1;
8934  }
8935
8936  &:-ms-input-placeholder {
8937    color: $colorTextBody;
8938  }
8939
8940  &::-ms-input-placeholder {
8941    color: $colorTextBody;
8942    opacity: 1;
8943  }
8944}
8945
8946@include media-query($small) {
8947  .form__submit--large {
8948    display: none;
8949  }
8950
8951  .form__submit--small {
8952    display: block;
8953  }
8954}
8955
8956@include media-query($medium-up) {
8957  .form__submit--large {
8958    display: block;
8959  }
8960
8961  .form__submit--small {
8962    display: none;
8963  }
8964}
8965
8966div[data-section-type="fading-images"] {
8967  overflow: hidden; // IE11 fix
8968
8969  .hero {
8970    min-height: 300px;
8971  }
8972}
8973
8974.fading-images-overlay__overlay::before {
8975  @include overlay(1);
8976  z-index: 3;
8977}
8978
8979.fading-images__item {
8980  position: absolute;
8981  width: 100%;
8982  height: 100%;
8983  left: 0;
8984  background-size: cover;
8985  opacity: 0;
8986
8987  .no-js & {
8988    opacity: 1;
8989  }
8990}
8991
8992// Title animations
8993
8994.fading-images-overlay__titles {
8995  opacity: 0;
8996  margin: 0;
8997
8998  &.active-titles,
8999  &.finished-titles {
9000    opacity: 1;
9001  }
9002}
9003
9004.fading-images-overlay__titles--heading-style {
9005  @include headerFontStack;
9006}
9007
9008.fading-images-overlay__titles .animation-cropper {
9009  display: block;
9010}
9011
9012.fading-images-overlay__title {
9013  display: inline-block;
9014  -webkit-box-decoration-break: clone;
9015          box-decoration-break: clone;
9016  padding: 4px 15px;
9017  margin: 2px 0;
9018}
9019
9020.active-titles .fading-images-overlay__title {
9021  animation: $animate_sections_text_style 1.2s forwards;
9022}
9023
9024.finished-titles .fading-images-overlay__title {
9025  animation: #{$animate_sections_text_style}-out 0.75s forwards;
9026}
9027
9028// Image animations
9029
9030.active-image.lazyloaded {
9031  animation: kenburns 7s linear forwards;
9032  z-index: 2;
9033}
9034
9035.finished-image.lazyloaded {
9036  animation: kenburns-out 1s linear forwards;
9037  z-index: 1;
9038}
9039
9040.map-section {
9041  position: relative;
9042  height: 650px;
9043  width: 100%;
9044  overflow: hidden;
9045
9046  @include media-query($medium-up) {
9047    height: 500px;
9048  }
9049
9050  .page-width {
9051    height: 100%;
9052  }
9053}
9054
9055.map-section--load-error {
9056  height: auto;
9057}
9058
9059.map-onboarding {
9060  position: absolute;
9061  top: 0;
9062  left: 0;
9063  bottom: 0;
9064  width: 100%;
9065  background-size: cover;
9066  background-position: 50% 50%;
9067  background-repeat: no-repeat;
9068  z-index: 0;
9069}
9070
9071.map-section__overlay-wrapper {
9072  position: relative;
9073  height: 100%;
9074}
9075
9076.map-section__overlay {
9077  position: relative;
9078  display: inline-block;
9079  background-color: $colorBody;
9080  padding: $gutter;
9081  margin-top: $gutter;
9082  width: 100%;
9083  z-index: 3;
9084
9085  @include media-query($medium-up) {
9086    position: absolute;
9087    left: $gutter;
9088    top: 50%;
9089    transform: translateY(-50%);
9090    margin-top: 0;
9091    width: 30%;
9092  }
9093
9094  .map-section--load-error & {
9095    position: static;
9096    transform: translateY(0);
9097  }
9098}
9099
9100.map-section__link {
9101  display: block;
9102  position: absolute;
9103  top: 0;
9104  left: 0;
9105  width: 100%;
9106  height: 100%;
9107  z-index: 2;
9108}
9109
9110// Optically center map in visible area with
9111
9112// extended height/widths and negative margins
9113
9114.map-section__container {
9115  position: absolute !important; // api will inline relative sometimes
9116  top: 0;
9117  left: 0;
9118  width: 100%;
9119  height: 150%;
9120  margin-bottom: -50%;
9121
9122  @include media-query($medium-up) {
9123    width: 130%;
9124    height: 100%;
9125    margin: 0 -30% 0 0;
9126  }
9127}
9128
9129// Animations
9130
9131@if ($animate_sections) {
9132  [data-aos="map-section__animation"] .map-section__container {
9133    animation: fade-out 0.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
9134    will-change: opacity, transform;
9135    opacity: 0;
9136  }
9137
9138  [data-aos="map-section__animation"].aos-animate .map-section__container {
9139    animation: $animate_sections_background_style 2.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
9140  }
9141}
9142
9143.image-row {
9144  @include clearfix;
9145}
9146
9147.image-row__placeholder {
9148  float: left;
9149  width: 33.33%;
9150
9151  .image-row--gutters & {
9152    width: 32%;
9153    margin: 0 1% 2%;
9154
9155    &:first-child {
9156      margin-left: 0;
9157    }
9158
9159    &:last-child {
9160      margin-right: 0;
9161    }
9162  }
9163}
9164
9165.image-row__image {
9166  position: relative;
9167  min-height: 1px;
9168  float: left;
9169
9170  &:after {
9171    content: '';
9172    display: block;
9173    height: 0;
9174    width: 100%;
9175  }
9176
9177  img {
9178    display: block;
9179    position: absolute;
9180    top: 0;
9181    left: 0;
9182  }
9183}
9184
9185// Zoom cursor unless inside a link
9186
9187.image-row__image .js-photoswipe__zoom {
9188  cursor: zoom-in;
9189}
9190
9191.image-row__image a .js-photoswipe__zoom {
9192  cursor: pointer;
9193}
9194
9195/*================ View-specific styles ================*/
9196
9197/*================ Templates | Cart Page ================*/
9198
9199.cart__header-labels {
9200  @include headerAccentFontStack;
9201}
9202
9203.cart__row {
9204  position: relative;
9205  margin-bottom: $gutter;
9206
9207  &:first-child {
9208    border-bottom: 1px solid $colorBorder;
9209    padding-bottom: $gutter / 2;
9210  }
9211
9212  &:last-child {
9213    border-top: 1px solid $colorBorder;
9214    padding-top: $gutter / 2;
9215  }
9216
9217  .js-qty__wrapper {
9218    margin: 0 auto;
9219  }
9220}
9221
9222.cart__checkout-wrapper {
9223  margin-top: 20px;
9224
9225  .additional-checkout-buttons {
9226    margin-top: 12px;
9227  }
9228}
9229
9230.drawer .additional-checkout-buttons {
9231  margin: 10px 0;
9232
9233  [data-shopify-buttoncontainer] {
9234    -ms-flex-pack: center;
9235        justify-content: center;
9236
9237    > * {
9238      height: auto !important;
9239    }
9240  }
9241}
9242
9243.cart__row [data-shopify-buttoncontainer] {
9244  -ms-flex-pack: end;
9245      justify-content: flex-end;
9246}
9247
9248@include media-query($medium-up) {
9249  .cart__update + .cart__checkout {
9250    margin-left: $gutter / 2;
9251  }
9252}
9253
9254.cart__row--table {
9255  display: table;
9256  table-layout: fixed;
9257  width: 100%;
9258
9259  .grid__item {
9260    display: table-cell;
9261    vertical-align: middle;
9262    float: none;
9263  }
9264}
9265
9266@include media-query($medium-up) {
9267  .cart__row--table-large {
9268    display: table;
9269    table-layout: fixed;
9270    width: 100%;
9271
9272    .grid__item {
9273      display: table-cell;
9274      vertical-align: middle;
9275      float: none;
9276    }
9277
9278    .cart__image {
9279      width: 150px;
9280    }
9281  }
9282}
9283
9284.cart__image {
9285  display: block;
9286
9287  img {
9288    width: 100%;
9289    display: block;
9290  }
9291
9292  @include media-query($medium-down) {
9293    margin-bottom: $gutter / 2;
9294  }
9295}
9296
9297.cart__product-name {
9298  margin-bottom: 0;
9299}
9300
9301.cart__product-qty {
9302  text-align: center;
9303  margin: 0 auto;
9304  max-width: 80px;
9305}
9306
9307.cart__price {
9308  display: block;
9309}
9310
9311.cart__price--strikethrough {
9312  text-decoration: line-through;
9313}
9314
9315.cart__discount {
9316  display: block;
9317}
9318
9319.cart__product-meta {
9320  margin-bottom: 0;
9321
9322  & + & {
9323    margin-top: 20px;
9324  }
9325}
9326
9327// PayPal button has unhelpful z-index
9328
9329iframe.zoid-component-frame {
9330  z-index: 1 !important;
9331}
9332
9333/*================ Templates | Product Page ================*/
9334
9335.product-single__meta {
9336  padding-left: 45px;
9337
9338  @include media-query($small) {
9339    padding-left: 0;
9340    margin-top: $gutter / 2;
9341  }
9342
9343  .social-sharing {
9344    margin-top: $gutter / 2;
9345
9346    @include media-query($medium-up) {
9347      margin-top: $gutter;
9348    }
9349  }
9350}
9351
9352.product-single__vendor {
9353  @include baseAccentFontStack;
9354  font-size: em(12px);
9355  margin-bottom: $gutter / 4;
9356}
9357
9358.product-single__title {
9359  font-size: em(floor($type_header_base_size * 0.85));
9360  margin-bottom: $gutter / 6;
9361  word-wrap: break-word;
9362
9363  @include media-query($medium-up) {
9364    font-size: $type_header_base_size;
9365    margin-bottom: $gutter / 4;
9366  }
9367}
9368
9369.product-single__review-link {
9370  display: block;
9371
9372  .spr-badge[data-rating="0.0"] {
9373    display: none;
9374  }
9375
9376  .spr-badge {
9377    margin-bottom: 7px;
9378  }
9379
9380  .spr-badge-starrating {
9381    margin-right: 8px;
9382  }
9383
9384  .spr-badge-caption {
9385    font-size: em($type_base_size - 1);
9386  }
9387}
9388
9389.product-single__sku {
9390  margin-bottom: $gutter / 6;
9391}
9392
9393.product-single__description {
9394  margin-bottom: $gutter / 2;
9395}
9396
9397.product-single__description-full {
9398  margin: $gutter 0;
9399}
9400
9401.product-single__form {
9402  margin-bottom: $gutter;
9403}
9404
9405.product-single__variants {
9406  display: none;
9407
9408  .no-js & {
9409    display: block;
9410    margin-bottom: $gutter;
9411  }
9412}
9413
9414.product-image-main {
9415  position: relative;
9416}
9417
9418// Video div
9419
9420.product__video-wrapper {
9421  position: relative;
9422  overflow: hidden;
9423  max-width: 100%;
9424  padding-bottom: 100%; // apsect ratio overwritten inline
9425  height: auto;
9426  background-color: $colorSmallImageBg;
9427
9428  iframe {
9429    width: 100%;
9430    height: 100%;
9431    transition: opacity 0.5s ease-in;
9432  }
9433
9434  // Put overlay on muted videos because they cannot be interacted with
9435  &[data-video-style="muted"].loaded:before {
9436    content: '';
9437    position: absolute;
9438    top: 0;
9439    left: 0;
9440    right: 0;
9441    bottom: 0;
9442    z-index: 1;
9443  }
9444
9445  // Unless low power mode requires them to be touched to start
9446  &.video-interactable:before {
9447    display: none;
9448  }
9449
9450  &.loading:before {
9451    background: color-control($colorSmallImageBg, 0.15);
9452  }
9453  &.loading:after {
9454    background: color-control($colorSmallImageBg, 1);
9455  }
9456
9457  // Make sure states don't overlap
9458  &.loaded:after {
9459    display: none;
9460  }
9461
9462  &.loading iframe {
9463    opacity: 0.01; // sneaky way to avoid talking to an invisible YT iframe
9464  }
9465
9466  &.loaded iframe {
9467    opacity: 1;
9468  }
9469}
9470
9471.product__video {
9472  position: absolute;
9473  top: 0;
9474  left: 0;
9475  width: 100%;
9476  height: 100%;
9477}
9478
9479.product-video-trigger {
9480  position: absolute;
9481  top: 50%;
9482  left: 50%;
9483  transform: translate(-50%, -50%);
9484}
9485
9486// Images
9487
9488.product__photos--beside {
9489  display: -ms-flexbox;
9490  display: flex;
9491  width: 100%;
9492}
9493
9494.product__photos {
9495  direction: ltr;
9496
9497  a {
9498    display: block;
9499    max-width: 100%;
9500  }
9501
9502  img {
9503    display: block;
9504    margin: 0 auto;
9505    max-width: 100%;
9506    width: 100%;
9507  }
9508}
9509
9510.product__main-photos {
9511  position: relative;
9512  overflow: hidden;
9513  -ms-flex: 1 1 auto;
9514      flex: 1 1 auto;
9515
9516  @include media-query($medium-up) {
9517    -ms-flex-order: 2;
9518        order: 2;
9519  }
9520
9521  img {
9522    display: none;
9523  }
9524
9525  .starting-slide img,
9526  .slick-initialized img {
9527    display: block;
9528  }
9529
9530  .secondary-slide:not(.slick-slide) {
9531    display: none;
9532  }
9533
9534  // Hide selectable elements when slide is not active
9535  .slick-slide:not(.slick-current) {
9536    button,
9537    video,
9538    iframe,
9539    model-viewer {
9540      display: none;
9541    }
9542  }
9543}
9544
9545// Thumbnails
9546
9547.product__thumbs {
9548  position: relative;
9549}
9550
9551.product__thumbs--below {
9552  margin-top: $grid-gutter-small / 2;
9553
9554  @include media-query($medium-up) {
9555    margin-top: $gutter / 2;
9556  }
9557}
9558
9559.product__thumbs--beside {
9560  -ms-flex: 0 0 60px;
9561      flex: 0 0 60px;
9562  max-width: 60px;
9563  margin-left: $grid-gutter-small / 2;
9564
9565  @include media-query($medium-up) {
9566    -ms-flex: 0 0 80px;
9567        flex: 0 0 80px;
9568    max-width: 80px;
9569    margin-left: 0;
9570    margin-right: $gutter / 2;
9571  }
9572
9573  .slick-list {
9574    min-height: 100%;
9575  }
9576}
9577
9578// Thumbnails
9579
9580.product__thumb-item {
9581  border: 2px solid transparent;
9582
9583  a:focus {
9584    outline: none;
9585
9586    &:before {
9587      content: '';
9588      display: block;
9589      position: absolute;
9590      top: 0;
9591      left: 0;
9592      right: 0;
9593      bottom: 0;
9594      box-shadow: inset 0 0 0 2px $colorTextBody;
9595      z-index: 1;
9596    }
9597  }
9598
9599  // Don't pre-focus thumbnails
9600  a:active:before {
9601    content: none;
9602  }
9603
9604  &.slick-current {
9605    border-color: $colorTextBody;
9606
9607    // Focus state already exists on current item
9608    a:focus:before {
9609      content: none;
9610    }
9611  }
9612
9613  .product__thumbs--beside & {
9614    margin-bottom: $grid-gutter-small / 2;
9615
9616    @include media-query($medium-up) {
9617      margin-bottom: $gutter / 2;
9618    }
9619  }
9620
9621  .product__thumbs--below & {
9622    margin-right: $grid-gutter-small / 2;
9623    max-width: 80px !important;
9624
9625    @include media-query($medium-up) {
9626      margin-right: $gutter / 2;
9627    }
9628
9629    &:last-child {
9630      margin-right: 0;
9631    }
9632  }
9633}
9634
9635// Thumb slider arrows
9636
9637.product__thumbs {
9638  .slick-arrow {
9639    background: $colorBody;
9640    color: $colorTextBody;
9641    transform: none;
9642    border-radius: 0;
9643
9644    &.slick-disabled {
9645      display: none !important;
9646    }
9647
9648    .icon {
9649      display: inline-block;
9650    }
9651  }
9652}
9653
9654.product__thumbs[data-position="below"] .slick-arrow {
9655  top: 0;
9656  height: 100%;
9657  width: 25px;
9658
9659  &.slick-next {
9660    right: 0;
9661    text-align: right;
9662  }
9663
9664  &.slick-prev {
9665    left: 0;
9666    text-align: left;
9667  }
9668}
9669
9670.product__thumbs[data-position="beside"] .slick-arrow {
9671  width: 100%;
9672
9673  .icon {
9674    margin: 0 auto;
9675    transform: rotate(90deg);
9676  }
9677
9678  &.slick-prev {
9679    top: 0;
9680    left: auto;
9681    padding-bottom: 10px;
9682  }
9683
9684  &.slick-next {
9685    top: auto;
9686    bottom: 0;
9687    right: auto;
9688    padding-top: 10px;
9689  }
9690}
9691
9692// Align them before slick initializes to reduce page reflows
9693
9694.product__thumbs--below:not(.slick-initialized) .product__thumb-item {
9695  max-width: 100px;
9696  float: left;
9697}
9698
9699.product__thumb {
9700  position: relative;
9701  display: block;
9702  cursor: pointer;
9703}
9704
9705.product__thumb-icon {
9706  position: absolute;
9707  top: 5px;
9708  right: 5px;
9709  background-color: $colorTextBody;
9710  border-radius: 100px;
9711  padding: 6px;
9712  z-index: 1;
9713  opacity: 0;
9714  transition: opacity 0.5s ease;
9715  font-size: 0;
9716
9717  .aos-animate & {
9718    opacity: 1;
9719  }
9720
9721  .icon {
9722    fill: $colorBody;
9723    width: 10px;
9724    height: 10px;
9725    @include media-query($medium-up) {
9726      width: 13px;
9727      height: 13px;
9728    }
9729  }
9730}
9731
9732// Prices
9733
9734.product__price {
9735  font-size: em(floor(($type_base_size + 8) * 0.85));
9736  @include media-query($medium-up) {
9737    font-size: em($type_base_size + 8);
9738  }
9739}
9740
9741// Sale price color setting, used in multiple areas
9742
9743.sale-price {
9744  color: $colorSalePrice;
9745}
9746
9747// Used anywhere unit price is visible
9748
9749.product__unit-price {
9750  font-size: 0.8em;
9751  opacity: 0.8;
9752}
9753
9754.product__price--compare {
9755  padding-right: 5px;
9756  display: inline-block;
9757  text-decoration: line-through;
9758}
9759
9760.product__inventory {
9761  margin-top: $gutter / 6;
9762  margin-bottom: -($gutter / 6);
9763  font-style: italic;
9764
9765  @include media-query($medium-up) {
9766    margin-top: $gutter / 4;
9767    margin-bottom: -($gutter / 4);
9768  }
9769}
9770
9771// Quantity selector and label
9772
9773.product__quantity {
9774  margin-bottom: $gutter / 2;
9775  @include media-query($medium-up) {
9776    margin-bottom: $gutter;
9777  }
9778
9779  label {
9780    display: block;
9781    margin-bottom: 10px;
9782  }
9783}
9784
9785.product__quantity--dropdown {
9786  display: inline-block;
9787}
9788
9789// Hide Shopify Payment Buttons if no variant
9790
9791.add-to-cart[disabled] + .shopify-payment-button {
9792  display: none;
9793}
9794
9795// Zoom button
9796
9797.product__photo-zoom {
9798  position: absolute;
9799  bottom: 0;
9800  right: 0;
9801  cursor: zoom-in;
9802
9803  // Only show active slide's zoom button (mobile)
9804  @include media-query($small) {
9805    padding: 6px;
9806
9807    .product__main-photos & {
9808      margin-bottom: 10px;
9809      margin-right: 10px;
9810    }
9811
9812    // Hide zoom button on all slides
9813    .slick-slider & {
9814      opacity: 0;
9815      transition: opacity 0.5s ease-out;
9816    }
9817
9818    .slick-slider .slick-active & {
9819      opacity: 1;
9820    }
9821  }
9822
9823  // Visually hidden, covers full image on desktop
9824  @include media-query($medium-up) {
9825    opacity: 0;
9826    width: 100%;
9827    top: 0;
9828    left: 0;
9829    margin: 0;
9830    border-radius: 0;
9831
9832    svg,
9833    span {
9834      display: none;
9835    }
9836  }
9837}
9838
9839/*================ Templates | Theme Blog ================*/
9840
9841.template-blog .article {
9842  margin-bottom: $gutter * 1.5;
9843
9844  @include media-query($medium-up) {
9845    margin-bottom: $gutter * 3;
9846  }
9847}
9848
9849.template-blog .article:last-child {
9850  margin-bottom: 0;
9851
9852  @include media-query($medium-up) {
9853    margin-bottom: $gutter * 1.5;
9854  }
9855}
9856
9857.article__date,
9858.article__h3,
9859.article .section-header__title {
9860  margin-bottom: 5px;
9861
9862  @include media-query($medium-up) {
9863    margin-bottom: 10px;
9864  }
9865}
9866
9867.article__content-meta {
9868  margin-bottom: $gutter / 2;
9869}
9870
9871.article__featured-image {
9872  display: block;
9873  margin-bottom: $gutter;
9874
9875  img {
9876    display: block;
9877    margin: 0 auto;
9878  }
9879}
9880
9881.article__body {
9882  margin-bottom: $gutter / 2;
9883  @include media-query($medium-up) {
9884    margin-bottom: $gutter;
9885  }
9886}
9887
9888/*================ Alternating article listings ================*/
9889
9890.article--layout {
9891  display: -ms-flexbox;
9892  display: flex;
9893  -ms-flex-align: center;
9894      align-items: center;
9895  -ms-flex-pack: end;
9896      justify-content: flex-end;
9897
9898  @include media-query($small) {
9899    -ms-flex-wrap: wrap;
9900        flex-wrap: wrap;
9901  }
9902}
9903
9904.article__content {
9905  width: 100%;
9906}
9907
9908.article__image-wrap {
9909  position: relative;
9910  -ms-flex: 1 1 100%;
9911      flex: 1 1 100%;
9912  height: 200px;
9913  margin: $gutter 0;
9914}
9915
9916.article__image-wrap--empty {
9917  height: 0;
9918  margin: 0;
9919}
9920
9921.article__image--image {
9922  position: absolute;
9923  top: 0;
9924  left: 0;
9925  bottom: 0;
9926  width: 100%;
9927  background-size: cover;
9928  background-position: 50% 50%;
9929  background-repeat: no-repeat;
9930}
9931
9932@include media-query($medium-up) {
9933  .article__content {
9934    -ms-flex: 1 1 auto;
9935        flex: 1 1 auto;
9936    padding: $gutter $gutter $gutter 0;
9937    width: 100%;
9938    max-width: 50%;
9939  }
9940
9941  .article__content--right {
9942    padding: $gutter 0 $gutter $gutter;
9943  }
9944
9945  .article__image-wrap {
9946    position: static;
9947    height: 450px;
9948    margin: 0;
9949  }
9950
9951  .article__image-wrap--right {
9952    -ms-flex-order: 2;
9953        order: 2;
9954  }
9955
9956  .article__image {
9957    position: absolute;
9958    left: 0;
9959    right: 50%;
9960    width: auto;
9961    height: 450px;
9962    min-width: 0;
9963
9964    .article__image-wrap--right & {
9965      left: 50%;
9966      right: 0;
9967    }
9968  }
9969}
9970
9971/*================ Comments ================*/
9972
9973.comment.last {
9974  margin-bottom: -($gutter / 2);
9975}
9976
9977/*================ Templates | Passwords ================*/
9978
9979.template-password {
9980  height: 100vh;
9981  text-align: center;
9982}
9983
9984.password-page__image {
9985  position: fixed;
9986  top: 0;
9987  left: 0;
9988  right: 0;
9989  bottom: 0;
9990  opacity: 0;
9991  background-size: cover;
9992  background-repeat: no-repeat;
9993  background-position: center center;
9994  z-index: 1;
9995  animation: zoom-fade-password 20s ease 1s forwards;
9996  &:after {
9997    position: fixed;
9998    content: '';
9999    top: 0;
10000    left: 0;
10001    right: 0;
10002    bottom: 0;
10003    z-index: 2;
10004    background: rgba(50,50,50,0.3);
10005  }
10006}
10007
10008.password-page__wrapper {
10009  display: table;
10010  height: 100%;
10011  width: 100%;
10012  position: absolute;
10013  z-index: 3;
10014  color: $colorTextBody;
10015
10016  a {
10017    color: inherit;
10018  }
10019
10020  hr {
10021    border-color: $colorBorder;
10022  }
10023
10024  .social-sharing.clean a {
10025    color: inherit;
10026    background: transparent;
10027  }
10028}
10029
10030.password-header-section {
10031  display: table-row;
10032}
10033
10034.password-page__header {
10035  display: table-cell;
10036  height: 1px;
10037}
10038
10039.password-page__header__inner {
10040  padding: ($gutter / 2);
10041}
10042
10043.password-page__logo {
10044  margin-top: 20px;
10045
10046  @include media-query($medium-up) {
10047    margin-top: 3 * $gutter;
10048  }
10049
10050  .logo {
10051    max-width: 100%;
10052  }
10053}
10054
10055.password-page__main {
10056  display: table-row;
10057  width: 100%;
10058  height: 100%;
10059  margin: 0 auto;
10060}
10061
10062.password-page__main__inner {
10063  display: table-cell;
10064  vertical-align: middle;
10065  padding: 0 ($gutter / 1.5);
10066}
10067
10068.password-page__hero {
10069  @include headerFontStack;
10070  font-size: em(42px);
10071  text-transform: none;
10072
10073  @include media-query($medium-up) {
10074    font-size: em(60px);
10075  }
10076
10077  @include media-query($medium-up) {
10078    font-size: em(64px);
10079  }
10080}
10081
10082.password-page__message {
10083  font-size: 120%;
10084  margin-bottom: 30px !important;
10085
10086  img {
10087    max-width: 100%;
10088  }
10089}
10090
10091.password-form,
10092.password-page__message,
10093.password-page__signup-form {
10094  max-width: 500px;
10095  margin: 0 auto;
10096}
10097
10098.password-form {
10099  margin-bottom: 1em;
10100}
10101
10102.password-page__signup-form {
10103  @include media-query($medium-up) {
10104    padding: 0 $gutter;
10105  }
10106
10107  .input-group {
10108    width: 100%;
10109  }
10110
10111  .input-group-field {
10112    background-color: #fff;
10113    color: #000;
10114
10115    &::-webkit-input-placeholder {
10116      color: #000;
10117      opacity: 0.7;
10118    }
10119
10120    &:-moz-placeholder {
10121      color: #000;
10122      opacity: 0.7;
10123    }
10124
10125    &::-moz-placeholder {
10126      color: #000;
10127      opacity: 0.7;
10128    }
10129
10130    &:-ms-input-placeholder {
10131      color: #000;
10132      opacity: 0.7;
10133    }
10134
10135    &::-ms-input-placeholder {
10136      color: #000;
10137      opacity: 0.7;
10138    }
10139  }
10140
10141  .errors ul {
10142    list-style-type: none;
10143    margin-left: 0;
10144  }
10145}
10146
10147.password-page__social-sharing {
10148  margin-top: 30px;
10149}
10150
10151.password-login {
10152  display: block;
10153  margin: 0 auto;
10154  @include baseAccentFontStack;
10155  font-size: 0.8em;
10156  padding: ($gutter / 4) 15px;
10157  border: 1px solid #fff;
10158
10159  @include media-query($medium-up) {
10160    position: absolute;
10161    top: $gutter / 1.5;
10162    right: $gutter / 1.5;
10163  }
10164}
10165
10166.password__lock .icon {
10167  position: relative;
10168  top: -2px;
10169  margin-right: 4px;
10170  width: 12px;
10171  height: 12px;
10172}
10173
10174.password-page__footer {
10175  display: table-row;
10176  height: 1px;
10177}
10178
10179.password-page__footer_inner {
10180  display: table-cell;
10181  vertical-align: bottom;
10182  padding: ($gutter * 1.5) 0 ($gutter / 2);
10183  line-height: 1.5 * $type_base_size;
10184  font-size: 80%;
10185}
10186
10187.icon-shopify-logo {
10188  width: 60px;
10189  height: 20px;
10190}
10191
10192#LoginModal .modal__close {
10193  @include media-query($small) {
10194    padding: 20px;
10195  }
10196}
10197
10198#LoginModal .modal__inner {
10199  background: $colorBody;
10200  color: $colorTextBody;
10201  padding: 30px;
10202  @include media-query($small) {
10203    margin-bottom: 40vh;
10204  }
10205}