WEhCn3Yk

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