· 7 years ago · Sep 16, 2018, 08:06 AM
1{% assign font_settings = 'type_body:bolder|type_heading:bolder' %}
2{% assign font_settings = font_settings | split: '|' %}
3{% assign font_scss_variables = '' %}
4{% for font_setting in font_settings %}
5 {% assign font_info = font_setting | split: ':' %}
6
7 {% comment %}Get setting name{% endcomment %}
8 {% assign font_setting_name = font_info[0] %}
9
10 {% comment %}Get additional weights{% endcomment %}
11 {% assign font_additional_weights = font_info[1] | split: ',' | uniq %}
12
13 {% comment %}Create variables for use in SCSS{% endcomment %}
14 {% assign font_scss_base = font_setting_name | replace: '_', '-' | prepend: '$' %}
15 {% assign font_scss_reference = font_scss_base %}
16 {% assign font_scss_family = font_scss_base | append: '-family' %}
17 {% assign font_scss_weights = font_scss_base | append: '-weights' %}
18 {% assign font_scss_named_weights = font_scss_base | append: '-named-weights' %}
19 {% assign font_scss_styles = font_scss_base | append: '-styles' %}
20 {% assign font_scss_named_styles = font_scss_base | append: '-named-styles' %}
21
22 {% comment %}Add the current setting to a list of reference variables{% endcomment %}
23 {% assign font_scss_variables = font_scss_variables | append: '|' | append: font_scss_reference %}
24
25 {% comment %}Get the initial FontDrop, and an italic style FontDrop{% endcomment %}
26 {% assign font_initial = settings[font_setting_name] %}
27 {% assign font_initial_weight = font_initial.weight | times: 1 %}
28 {% assign font_italic = font_initial | font_modify: 'style', 'italic' %}
29 {% assign font_styles = '(' | append: font_initial.style %}
30 {% assign font_named_styles = '(initial' %}
31 {% assign font_weights = font_initial_weight %}
32 {% assign font_named_weights = 'initial' %}
33
34 {{ font_initial | font_face }}
35 {{ font_italic | font_face }}
36
37 {% comment %}Use the font face italic style if possible, otherwise use something browser friendly{% endcomment %}
38 {% assign font_initial_italic_style = font_italic.style | default: 'italic' %}
39 {% assign font_styles = font_styles | append: ', ' | append: font_initial_italic_style %}
40 {% assign font_named_styles = font_named_styles | append: ', italic' %}
41
42 {% assign font_styles = font_styles | append: ')' %}
43 {% assign font_named_styles = font_named_styles | append: ')' %}
44
45 {% comment %}Iterate over each additional weight to load font face, and weights{% endcomment %}
46 {% for font_adjustment in font_additional_weights %}
47 {% assign font_weighted = font_initial | font_modify: 'weight', font_adjustment %}
48 {% assign font_styled = font_weighted | font_modify: 'style', 'italic' %}
49 {% assign font_weighted_styles = blank %}
50 {% assign font_weighted_named_styles = blank %}
51
52 {% comment %}If additional weight exists, generate font face{% endcomment %}
53 {{ font_weighted | font_face }}
54
55 {% comment %}Create a default value of the weight adjustment is not possible{% endcomment %}
56 {% assign font_adjustment_default = '' %}
57 {% case font_adjustment %}
58 {% when 'lighter' %}
59 {% comment %}Shopify requirement: If lighter variant is not found, use default value of 300{% endcomment %}
60 {% assign font_adjustment_default = 300 %}
61 {% if font_initial_weight < 300 %}
62 {% assign font_adjustment_default = font_initial_weight %}
63 {% endif %}
64 {% when 'bolder' %}
65 {% comment %}Shopify requirement: If bolder variant is not found, use default value of 700{% endcomment %}
66 {% assign font_adjustment_default = 700 %}
67 {% if font_initial_weight > 700 %}
68 {% assign font_adjustment_default = font_initial_weight %}
69 {% endif %}
70 {% else %}
71 {% assign font_adjustment_default = font_adjustment %}
72 {% endcase %}
73 {% assign font_weighted_value = font_weighted.weight | default: font_adjustment_default %}
74 {% assign font_weighted_style = font_weighted.style | default: 'normal' %}
75
76 {% assign font_weights = font_weights | append: '|' | append: font_weighted_value %}
77 {% assign font_named_weights = font_named_weights | append: '|' | append: font_adjustment %}
78 {% assign font_weighted_styles = font_weighted_styles | append: font_weighted_style %}
79 {% assign font_weighted_named_styles = font_weighted_named_styles | append: 'initial' %}
80
81 {% comment %}If italic exists for weight, generate font face{% endcomment %}
82 {{ font_styled | font_face }}
83 {% assign font_weighted_italic_style = font_styled.style | default: 'italic' %}
84 {% assign font_weighted_styles = font_weighted_styles | append: '|' | append: font_weighted_italic_style %}
85 {% assign font_weighted_named_styles = font_weighted_named_styles | append: '|italic' %}
86
87 {% if font_weighted_styles != blank %}
88 {% assign font_weighted_styles = font_weighted_styles | split: '|' | join: ', ' %}
89 {% assign font_weighted_named_styles = font_weighted_named_styles | split: '|' | join: ', ' %}
90
91 {% assign font_styles = font_styles | append: '|(' | append: font_weighted_styles | append: ')'%}
92 {% assign font_named_styles = font_named_styles | append: '|(' | append: font_weighted_named_styles | append: ')'%}
93 {% endif %}
94
95 {% assign font_weighted = blank %}
96 {% assign font_styled = blank %}
97 {% assign font_weighted_styles = blank %}
98
99 {% assign font_adjustment_default = blank %}
100 {% assign font_weighted_value = blank %}
101 {% assign font_weighted_style = blank %}
102 {% assign font_weighted_italic_style = blank %}
103 {% endfor %}
104
105 {% comment %}If only one weight, add an empty list to styles{% endcomment %}
106 {% comment %}`length()` reports length of nested list if list only has 1 index{% endcomment %}
107 {% assign font_weights_size = font_weights | split: '|' %}
108 {% if font_weights_size.size == 1 %}
109 {% assign font_styles = font_styles | append: '|()' %}
110 {% assign font_named_styles = font_named_styles | append: '|()' %}
111 {% endif %}
112
113 {% comment %}Output variables for setting to SCSS{% endcomment %}
114 {{ font_scss_reference }}: {{ font_setting_name }};
115 {{ font_scss_family }}: {{ font_initial.family }}, {{ font_initial.fallback_families }};
116 {{ font_scss_styles }}: ({{ font_styles | split: '|' | join: ', ' }});
117 {{ font_scss_named_styles }}: ({{ font_named_styles | split: '|' | join: ', ' }});
118 {{ font_scss_weights }}: ({{ font_weights | split: '|' | join: ', ' }});
119 {{ font_scss_named_weights }}: ({{ font_named_weights | split: '|' | join: ', ' }});
120
121 {% comment %}Blank used variables to prevent bleeding{% endcomment %}
122 {% assign font_info = blank %}
123 {% assign font_setting_name = blank %}
124 {% assign font_additional_weights = blank %}
125 {% assign font_scss_base = blank %}
126 {% assign font_scss_reference = blank %}
127 {% assign font_scss_family = blank %}
128 {% assign font_scss_styles = blank %}
129 {% assign font_scss_named_styles = blank %}
130 {% assign font_scss_weights = blank %}
131 {% assign font_scss_named_weights = blank %}
132 {% assign font_initial = blank %}
133 {% assign font_italic = blank %}
134 {% assign font_weights = blank %}
135 {% assign font_named_weights = blank %}
136 {% assign font_initial_italic_style = blank %}
137 {% assign font_styles = blank %}
138 {% assign font_named_styles = blank %}
139{% endfor %}
140
141{% assign font_scss_variables = font_scss_variables | remove_first: '|' | split: '|' %}
142
143{% comment %}Build SCSS friendly lists of weights{% endcomment %}
144{% assign font_variable_families = '' %}
145{% assign font_variable_weights = '' %}
146{% assign font_variable_named_weights = '' %}
147{% assign font_variable_styles = '' %}
148{% assign font_variable_named_styles = '' %}
149
150{% for variable in font_scss_variables %}
151 {% assign font_variable_families = font_variable_families | append: ' ' | append: variable | append: '-family' %}
152 {% assign font_variable_weights = font_variable_weights | append: ' ' | append: variable | append: '-weights' %}
153 {% assign font_variable_named_weights = font_variable_named_weights | append: ' ' | append: variable | append: '-named-weights' %}
154 {% assign font_variable_styles = font_variable_styles | append: ' ' | append: variable | append: '-styles' %}
155 {% assign font_variable_named_styles = font_variable_named_styles | append: ' ' | append: variable | append: '-named-styles' %}
156{% endfor %}
157
158{% comment %}Create SCSS lists of variables, which are used as references in functions{% endcomment %}
159$font-variables: ({{ font_scss_variables | join: ' ' }});
160$font-variables-families: ({{ font_variable_families | strip }});
161$font-variables-weights: ({{ font_variable_weights | strip }});
162$font-variables-named-weights: ({{ font_variable_named_weights | strip }});
163$font-variables-styles: ({{ font_variable_styles | strip }});
164$font-variables-named-styles: ({{ font_variable_named_styles | strip }});
165.toprightbuttons{
166 transform:translateX(60%);
167}
168
169//free deliveries icon and content
170.freedelivery{
171
172transform: translateX(135%);
173}
174
175//button checkout css//
176
177//login css//
178.loginheader{
179 margin-right: 60px;
180 margin-top: 5px;
181}
182
183.mobilelogin{
184 margin: 0;
185 visibility: hidden;
186}
187
188.logtext{
189 color: black;
190 text-decoration: none;
191}
192
193.logtext:hover{
194 color: red;
195}
196
197.customersupp{
198 color: black;
199 text-decoration: none;
200 padding-right: 12px;
201}
202.customersupp:hover{
203 color: red;
204}
205
206.whiteheader{
207 width:100%;
208 height:20%;
209 background-color:#FFF;
210
211}
212
213.insidebox{
214 border-radius: 3px 4px 4px 3px;
215 box-shadow: 0 0 5px 2px #bdbdbd;
216 transform: translateY(-10%);
217 margin-left: auto;
218 background-color:#FFF;
219
220}
221
222.productflip{
223 //background-color:green;
224}
225.viewallbutton{
226 @extend %button-primary;
227 background-color: blue;
228 color: white;
229 margin-left:0;
230 margin-right:auto;
231 margin-bottom: -20px;
232 margin-top: -20px;
233 transform: translateX(1240%);
234
235}
236.viewallbutton:hover{
237 opacity: 0.8;
238}
239
240.viewfixer{
241 padding-top: 20px;
242 transform: translateY(-140%);
243}
244
245@media only screen and (max-width: 1366px) {
246 .viewallbutton{
247 transform: translateX(200%);
248 }
249 .viewfixer{
250 transform: translateY(-200%);
251 }
252 .mobilelogin{
253 margin-left: -30px;
254 visibility: visible;
255}
256
257#contentrow{
258 overflow-x: auto;
259 overflow-y: hidden;
260 margin: auto;
261 padding: 12px;
262 width: 100%;
263 height: auto;
264}
265
266@media only screen and (max-width: 1080px) {
267 #contentrow{
268 width: 100%;
269 height: 20%;
270 margin: auto;
271}}
272
273
274.btn.next {
275 background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
276 right: 10px;
277}
278
279.btn.prev {
280 background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
281 left: 10px;
282}
283
284.btn {
285 position: absolute;
286
287 top: 50%;
288 transform: translateY(-50%);
289 height: 30px;
290 width: 30px;
291 border-radius: 2px;
292 background-color: rgba(0,0,0,0.5);
293 background-position: 50% 50%;
294 background-repeat: no-repeat;
295 z-index: 1000;
296}
297
298.previous {
299
300 outline: 0;
301 opacity: 0.6;
302 cursor: pointer;
303
304 &:hover {
305 background-color: transparent;
306 &:not([disabled]) {
307 opacity: 0.8;
308 }
309 }
310}
311
312.next {
313
314 opacity: 0.6;
315 cursor: pointer;
316
317 &:hover {
318 background-color: #DC143C;
319
320 &:not([disabled]) {
321 opacity: 0.8;
322 }
323 }
324}
325
326.round {
327 margin-left: 20px;
328 margin-right: 20px;
329 text-align: center;
330 vertical-align: middle;
331 //border-radius: 75%;
332 line-height: 300px;
333 text-decoration: none;
334 display: inline-block;
335 padding: 10px 10px;
336 box-shadow: 0 0.25em #999999;
337 background-color: #ff0000;
338 color: black;
339}
340
341// Find the index of the font setting for cross referencing
342@function font-setting-index($font-type) {
343 @return index($font-variables, $font-type);
344}
345
346// Font
347// --------
348// Find the index of a font weight from its relative name
349// - [$font-type]: Variable of font to look up
350// - [$font-weight]: lighter/initial/bolder
351@function font-weight-index($font-type, $font-weight: initial) {
352 $font-setting-index: font-setting-index($font-type);
353
354 // Look up available weights based on index of font setting
355 $named-weights: nth($font-variables-named-weights, $font-setting-index);
356
357 // Try to find index of desired font weight by cross referencing
358 $weight-index: index($named-weights, $font-weight);
359
360 // Return index of named weight, or return initial weight
361 @return if($weight-index, $weight-index, 1);
362}
363
364// Font
365// -----
366// Find the font family for a font setting
367// - [$font-type]: Variable of font to look up
368@function font-family($font-type) {
369 @return nth($font-variables-families, font-setting-index($font-type));
370}
371
372// Font
373// --------
374// Find a font style relative to a font weight
375// - [$font-type]: Variable of font to look up
376// - [$font-style]: initial/italic
377// - [$font-weight]: lighter/initial/bolder
378@function font-style($font-type, $font-style: initial, $font-weight: initial) {
379 $style: null;
380 $styles: null;
381
382 // Find index of font setting
383 $font-setting-index: font-setting-index($font-type);
384
385 // Get styles based on index of font setting
386 $font-styles: nth($font-variables-styles, $font-setting-index);
387 $font-named-styles: nth($font-variables-named-styles, $font-setting-index);
388
389 // Try to find index of desired font weight by cross referencing
390 $weight-named-index: font-weight-index($font-type, $font-weight);
391
392 // Get styles available for $font-weight
393 $named-weight-style: nth($font-styles, $weight-named-index);
394 $named-weight-named-style: nth($font-named-styles, $weight-named-index);
395
396 // Find position of $font-style
397 $style-named-index: index($named-weight-named-style, $font-style);
398
399 @if $style-named-index {
400 @return nth($named-weight-style, $style-named-index);
401 } @else {
402 // Return initial font style
403 @return nth($named-weight-style, 1);
404 }
405}
406
407// Font weight
408// --------
409// Find a font sensitive relative weight
410// - [$font-type]: Variable of font to look up
411// - [$font-weight]: lighter/initial/bolder
412@function font-weight($font-type, $font-weight: initial) {
413 $weight: null;
414
415 // Find index of font setting
416 $font-setting-index: font-setting-index($font-type);
417
418 // Look up available weights based on index of font setting
419 $weights: nth($font-variables-weights, $font-setting-index);
420
421 // Try to find index of desired font weight by cross referencing
422 $weight-index: font-weight-index($font-type, $font-weight);
423
424 // Return numerical weight of font
425 @return nth($weights, $weight-index);
426}
427
428// Font
429// --------
430// Generate complete font styles for a font setting
431// - [$font-type]: Variable of font to look up
432// - [$font-family]: true/false
433// - [$font-size]: unit/false
434// - [$font-style]: initial/italic/false
435// - [$font-weight]: lighter/initial/bolder/false
436@mixin font(
437 $font-type,
438 $font-family: true,
439 $font-size: false,
440 $font-style: initial,
441 $font-weight: initial
442) {
443 @if $font-family { font-family: font-family($font-type); }
444 @if $font-size { font-size: $font-size; }
445 @if $font-style { font-style: font-style($font-type, $font-style: $font-style, $font-weight: $font-weight ); }
446 @if $font-weight { font-weight: font-weight($font-type, $font-weight: $font-weight); }
447}
448
449{% assign font_scss_variables = blank %}
450{% assign font_variable_families = blank %}
451{% assign font_variable_weights = blank %}
452{% assign font_variable_named_weights = blank %}
453{% assign font_variable_styles = blank %}
454{% assign font_variable_named_styles = blank %}
455
456
457// External libraries
458/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
459
460/**
461 * 1. Change the default font family in all browsers (opinionated).
462 * 2. Correct the line height in all browsers.
463 * 3. Prevent adjustments of font size after orientation changes in
464 * IE on Windows Phone and in iOS.
465 */
466
467/* Document
468 ========================================================================== */
469
470html {
471 font-family: sans-serif; /* 1 */
472 line-height: 1.15; /* 2 */
473 -ms-text-size-adjust: 100%; /* 3 */
474 -webkit-text-size-adjust: 100%; /* 3 */
475}
476
477/* Sections
478 ========================================================================== */
479
480/**
481 * Remove the margin in all browsers (opinionated).
482 */
483
484body {
485 margin: 0;
486}
487
488/**
489 * Add the correct display in IE 9-.
490 */
491
492article,
493aside,
494footer,
495header,
496nav,
497section {
498 display: block;
499}
500
501/**
502 * Correct the font size and margin on `h1` elements within `section` and
503 * `article` contexts in Chrome, Firefox, and Safari.
504 */
505
506h1 {
507 font-size: 2em;
508 margin: 0.67em 0;
509}
510
511/* Grouping content
512 ========================================================================== */
513
514/**
515 * Add the correct display in IE 9-.
516 * 1. Add the correct display in IE.
517 */
518
519figcaption,
520figure,
521main { /* 1 */
522 display: block;
523}
524
525/**
526 * Add the correct margin in IE 8.
527 */
528
529figure {
530 margin: 1em 40px;
531}
532
533/**
534 * 1. Add the correct box sizing in Firefox.
535 * 2. Show the overflow in Edge and IE.
536 */
537
538hr {
539 -webkit-box-sizing: content-box;
540 box-sizing: content-box; /* 1 */
541 height: 0; /* 1 */
542 overflow: visible; /* 2 */
543}
544
545/**
546 * 1. Correct the inheritance and scaling of font size in all browsers.
547 * 2. Correct the odd `em` font sizing in all browsers.
548 */
549
550pre {
551 font-family: monospace, monospace; /* 1 */
552 font-size: 1em; /* 2 */
553}
554
555/* Text-level semantics
556 ========================================================================== */
557
558/**
559 * 1. Remove the gray background on active links in IE 10.
560 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
561 */
562
563a {
564 background-color: transparent; /* 1 */
565 -webkit-text-decoration-skip: objects; /* 2 */
566}
567
568/**
569 * Remove the outline on focused links when they are also active or hovered
570 * in all browsers (opinionated).
571 */
572
573a:active,
574a:hover {
575 outline-width: 0;
576}
577
578/**
579 * 1. Remove the bottom border in Firefox 39-.
580 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
581 */
582
583abbr[title] {
584 border-bottom: none; /* 1 */
585 text-decoration: underline; /* 2 */
586 -webkit-text-decoration: underline dotted;
587 text-decoration: underline dotted; /* 2 */
588}
589
590/**
591 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
592 */
593
594b,
595strong {
596 font-weight: inherit;
597}
598
599/**
600 * Add the correct font weight in Chrome, Edge, and Safari.
601 */
602
603b,
604strong {
605 font-weight: bolder;
606}
607
608/**
609 * 1. Correct the inheritance and scaling of font size in all browsers.
610 * 2. Correct the odd `em` font sizing in all browsers.
611 */
612
613code,
614kbd,
615samp {
616 font-family: monospace, monospace; /* 1 */
617 font-size: 1em; /* 2 */
618}
619
620/**
621 * Add the correct font style in Android 4.3-.
622 */
623
624dfn {
625 font-style: italic;
626}
627
628/**
629 * Add the correct background and color in IE 9-.
630 */
631
632mark {
633 background-color: #ff0;
634 color: #000;
635}
636
637/**
638 * Add the correct font size in all browsers.
639 */
640
641small {
642 font-size: 80%;
643}
644
645/**
646 * Prevent `sub` and `sup` elements from affecting the line height in
647 * all browsers.
648 */
649
650sub,
651sup {
652 font-size: 75%;
653 line-height: 0;
654 position: relative;
655 vertical-align: baseline;
656}
657
658sub {
659 bottom: -0.25em;
660}
661
662sup {
663 top: -0.5em;
664}
665
666/* Embedded content
667 ========================================================================== */
668
669/**
670 * Add the correct display in IE 9-.
671 */
672
673audio,
674video {
675 display: inline-block;
676}
677
678/**
679 * Add the correct display in iOS 4-7.
680 */
681
682audio:not([controls]) {
683 display: none;
684 height: 0;
685}
686
687/**
688 * Remove the border on images inside links in IE 10-.
689 */
690
691img {
692 border-style: none;
693}
694
695/**
696 * Hide the overflow in IE.
697 */
698
699svg:not(:root) {
700 overflow: hidden;
701}
702
703/* Forms
704 ========================================================================== */
705
706/**
707 * 1. Change the font styles in all browsers (opinionated).
708 * 2. Remove the margin in Firefox and Safari.
709 */
710
711button,
712input,
713optgroup,
714select,
715textarea {
716 font-family: sans-serif; /* 1 */
717 font-size: 100%; /* 1 */
718 line-height: 1.15; /* 1 */
719 margin: 0; /* 2 */
720}
721
722/**
723 * Show the overflow in IE.
724 * 1. Show the overflow in Edge.
725 */
726
727button,
728input { /* 1 */
729 overflow: visible;
730}
731
732/**
733 * Remove the inheritance of text transform in Edge, Firefox, and IE.
734 * 1. Remove the inheritance of text transform in Firefox.
735 */
736
737button,
738select { /* 1 */
739 text-transform: none;
740}
741
742/**
743 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
744 * controls in Android 4.
745 * 2. Correct the inability to style clickable types in iOS and Safari.
746 */
747
748button,
749html [type="button"], /* 1 */
750[type="reset"],
751[type="submit"] {
752 -webkit-appearance: button; /* 2 */
753}
754
755/**
756 * Remove the inner border and padding in Firefox.
757 */
758
759button::-moz-focus-inner,
760[type="button"]::-moz-focus-inner,
761[type="reset"]::-moz-focus-inner,
762[type="submit"]::-moz-focus-inner {
763 border-style: none;
764 padding: 0;
765}
766
767/**
768 * Restore the focus styles unset by the previous rule.
769 */
770
771button:-moz-focusring,
772[type="button"]:-moz-focusring,
773[type="reset"]:-moz-focusring,
774[type="submit"]:-moz-focusring {
775 outline: 1px dotted ButtonText;
776}
777
778/**
779 * Change the border, margin, and padding in all browsers (opinionated).
780 */
781
782fieldset {
783 border: 1px solid #c0c0c0;
784 margin: 0 2px;
785 padding: 0.35em 0.625em 0.75em;
786}
787
788/**
789 * 1. Correct the text wrapping in Edge and IE.
790 * 2. Correct the color inheritance from `fieldset` elements in IE.
791 * 3. Remove the padding so developers are not caught out when they zero out
792 * `fieldset` elements in all browsers.
793 */
794
795legend {
796 -webkit-box-sizing: border-box;
797 box-sizing: border-box; /* 1 */
798 color: inherit; /* 2 */
799 display: table; /* 1 */
800 max-width: 100%; /* 1 */
801 padding: 0; /* 3 */
802 white-space: normal; /* 1 */
803}
804
805/**
806 * 1. Add the correct display in IE 9-.
807 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
808 */
809
810progress {
811 display: inline-block; /* 1 */
812 vertical-align: baseline; /* 2 */
813}
814
815/**
816 * Remove the default vertical scrollbar in IE.
817 */
818
819textarea {
820 overflow: auto;
821}
822
823/**
824 * 1. Add the correct box sizing in IE 10-.
825 * 2. Remove the padding in IE 10-.
826 */
827
828[type="checkbox"],
829[type="radio"] {
830 -webkit-box-sizing: border-box;
831 box-sizing: border-box; /* 1 */
832 padding: 0; /* 2 */
833}
834
835/**
836 * Correct the cursor style of increment and decrement buttons in Chrome.
837 */
838
839[type="number"]::-webkit-inner-spin-button,
840[type="number"]::-webkit-outer-spin-button {
841 height: auto;
842}
843
844/**
845 * 1. Correct the odd appearance in Chrome and Safari.
846 * 2. Correct the outline style in Safari.
847 */
848
849[type="search"] {
850 -webkit-appearance: textfield; /* 1 */
851 outline-offset: -2px; /* 2 */
852}
853
854/**
855 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
856 */
857
858[type="search"]::-webkit-search-cancel-button,
859[type="search"]::-webkit-search-decoration {
860 -webkit-appearance: none;
861}
862
863/**
864 * 1. Correct the inability to style clickable types in iOS and Safari.
865 * 2. Change font properties to `inherit` in Safari.
866 */
867
868::-webkit-file-upload-button {
869 -webkit-appearance: button; /* 1 */
870 font: inherit; /* 2 */
871}
872
873/* Interactive
874 ========================================================================== */
875
876/*
877 * Add the correct display in IE 9-.
878 * 1. Add the correct display in Edge, IE, and Firefox.
879 */
880
881details, /* 1 */
882menu {
883 display: block;
884}
885
886/*
887 * Add the correct display in all browsers.
888 */
889
890summary {
891 display: list-item;
892}
893
894/* Scripting
895 ========================================================================== */
896
897/**
898 * Add the correct display in IE 9-.
899 */
900
901canvas {
902 display: inline-block;
903}
904
905/**
906 * Add the correct display in IE.
907 */
908
909template {
910 display: none;
911}
912
913/* Hidden
914 ========================================================================== */
915
916/**
917 * Add the correct display in IE 10-.
918 */
919
920[hidden] {
921 display: none;
922}
923
924
925// Setting abstracted libraries
926@function strip-units($value) {
927 @return ($value / ($value * 0 + 1));
928}
929
930@function rem($pxval, $rem-base: 16px) {
931 @return (strip-units($pxval) / strip-units($rem-base)) * 1rem;
932}
933
934@function rem2px($remval, $px-base: 16px) {
935 @return (strip-units($px-base) * strip-units($remval)) * 1px;
936}
937
938@function morph($color, $adjustment-value: 2) {
939 $lightness: lightness($color);
940 $light-color: false;
941
942 @if $lightness > 35% { $light-color: true; }
943
944 @if $light-color {
945 $lightness: ($lightness / 20) * $adjustment-value;
946 $color: darken($color, $lightness);
947 } @else {
948 @if $lightness < 2.5% {
949 $lightness: 30%;
950 } @else if $lightness < 7.5% {
951 $lightness: 15%;
952 }
953
954 $lightness: ($lightness / 10) * $adjustment-value;
955 $color: lighten($color, $lightness);
956 }
957
958 $saturation: saturation($color);
959 $saturated-color: false;
960
961 @if $saturation > 0% { $saturated-color: true; }
962
963 $saturation: ($saturation / 20);
964
965 @if $saturated-color {
966 @if $light-color {
967 $color: desaturate($color, $saturation);
968 } @else {
969 $color: saturate($color, $saturation);
970 }
971 }
972
973 @return $color;
974}
975
976// Check to see if a color is black and transparent
977@function color-transparent($color) {
978 @if (alpha($color) == 0 and red($color) == 0 and green($color) == 0 and blue($color) == 0) {
979 // Color is fully transparent, but black. Return opaque white for further adjustments
980 @return rgba(255, 255, 255, 1);
981 } @else {
982 @return $color;
983 }
984}
985
986// If background is dark return appropriate color for mixin
987@function border-mix($local-background, $local-dark, $local-light) {
988 @if(lightness($local-background) >= 50%) {
989 @return $local-dark;
990 } @else {
991 @return $local-light;
992 }
993}
994
995@function vw($pxval) {
996 $vw-context: $max-width / 100;
997 @return ($pxval/$vw-context) * 1vw;
998}
999
1000
1001// Internal libraries
1002// Fonts
1003$font-heading: $type-heading !default;
1004$font-body: $type-body !default;
1005
1006// Colors
1007
1008// Backgrounds
1009$color-background: color-transparent({{ settings.color_background }});
1010
1011// Typography
1012$color-heading: {{ settings.color_headings }};
1013$color-text: {{ settings.color_text }};
1014$color-text-hover: morph($color-text, 5);
1015$color-link: {{ settings.color_links }};
1016$color-link-hover: morph($color-link, 3);
1017
1018// Buttons
1019$color-button-text: {{ settings.color_button_text }};
1020$color-button-background: {{ settings.color_button_background }};
1021$color-button-background-hover: mix($color-background, $color-button-background, 10%);
1022$color-button-background-focus: morph($color-button-background);
1023$color-button-disable: desaturate($color-button-background, 100%);
1024
1025// Header
1026$color-header-text: {{ settings.color_header_text }};
1027$color-header-background: color-transparent({{ settings.color_header_background }});
1028
1029// Footer
1030$color-footer-text: {{ settings.color_footer_text }};
1031$color-footer-background: color-transparent({{ settings.color_footer_background }});
1032$color-footer-link: morph($color-footer-text);
1033$color-footer-color-alt: transparentize($color-footer-text, 0.2);
1034$color-additional-accent: transparentize($color-footer-text, 0.5);
1035
1036// Placeholders
1037$color-placeholder-background: mix($color-text, $color-background, 8%);
1038$color-placeholder-fill: mix($color-text, $color-background, 35%);
1039
1040// General
1041$color-black: #000;
1042$color-white: #fff;
1043$color-border: mix($color-background, border-mix($color-background, $color-black, $color-white));
1044$color-border-soft: transparentize(border-mix($color-background, $color-black, $color-white), 0.85);
1045$color-overlay-background: transparentize($color-black, 0.25);
1046$color-background-light: mix($color-text, $color-background, 5%);
1047
1048$color-box-shadow-border: transparentize($color-border, 0.84);
1049$color-box-shadow-shadow: transparentize($color-border, 0.89);
1050
1051$color-error: #f05d5d;
1052$color-success: #51a551;
1053$color-warning: #dfa354;
1054$color-highlight: #fffbd9;
1055$color-notice: $color-text;
1056$color-sale: #de0101;
1057$color-star: #f6c347;
1058$color-star-empty: mix($color-text, $color-background, 50%);
1059
1060$color-facebook: #425dab;
1061$color-twitter: #1da1f2;
1062$color-google: #db4437;
1063$color-pinterest: #bd1c1c;
1064
1065// Typography font sizes
1066$font-body-size: 16px;
1067$font-body-size-small: rem($font-body-size - 1px);
1068$font-body-size-smaller: rem($font-body-size - 2px);
1069$font-body-size-smallest: rem($font-body-size - 3px);
1070
1071$font-heading-large: rem(34px);
1072$font-heading-medium: rem(30px);
1073$font-h1-size: rem(28px);
1074$font-h2-size: rem(26px);
1075$font-h3-size: rem(24px);
1076$font-h4-size: rem(20px);
1077$font-h5-size: rem(18px);
1078$font-h6-size: rem(16px);
1079
1080// Button font sizes
1081$button-x-large-size: rem(21px);
1082$button-large-size: rem(18px);
1083$button-medium-size: rem(16px);
1084$button-small-size: rem(14px);
1085
1086// Checkbox settings
1087$checkbox-size: (13px, 13px);
1088$checkbox-border: transparentize($color-text, 0.6);
1089$checkbox-inactive: $color-background;
1090$checkbox-active: $color-link;
1091
1092// Transitions
1093$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
1094$ease-out-ripple: cubic-bezier(0.330, 0.810, 0.585, 0.990);
1095$ease-bubble: cubic-bezier(0.3, 0, 0, 1);
1096
1097// Vertical spaces
1098$space-xxx-small: rem($font-body-size * 0.25); // 4px
1099$space-xx-small: rem($font-body-size * 0.5); // 8px
1100$space-x-small: rem($font-body-size * 0.75); // 12px
1101$space-small: rem($font-body-size); // 16px
1102$space-medium: rem($font-body-size * 1.25); // 20px
1103$space-large: rem($font-body-size * 1.75); // 28px
1104$space-x-large: rem($font-body-size * 2); // 36px
1105$space-xx-large: rem($font-body-size * 3.125); // 50px
1106$space-xxx-large: rem($font-body-size * 4.25); // 68px
1107
1108// Layout
1109$max-width: 1400px;
1110$gutter-outer-small: 10px;
1111$gutter-outer-medium: 15px;
1112$gutter-outer: 25px;
1113$gutter-content: 20px;
1114
1115// Logo widths
1116$header-logo-image-max-width: 100px;
1117$header-content-offset-right: 235px; // My account + Logout + Currency switcher
1118
1119$site-nav-item-space: 8px;
1120$site-nav-link-space: 7px;
1121$site-nav-link-space-vertical: 12px;
1122$site-nav-link-space-horizontal: 15px;
1123$site-subnav-space: 15px;
1124
1125 // Header Settings
1126$header-content-height: 40px;
1127$header-padding-vertical-mobile: 5px;
1128$header-padding-vertical: 0px;
1129$header-padding-vertical-sticky: 5px;
1130$header-line-height: $font-body-size + 2px;
1131
1132// Product grid settings
1133$sidebar-width: 185px;
1134
1135// Product page settings
1136$color-slider-accent: $color-link;
1137$color-slider-dot: mix($color-text, $color-background, 23%);
1138$quantity-width: rem(115px);
1139
1140// Featured blog post
1141$color-featured-post-background: $color-link;
1142$color-featured-post-foreground: $color-background;
1143
1144// Z-Indices
1145$index-header: 700;
1146$index-header-navmenu: $index-header + 2;
1147$index-banner: 600;
1148$index-main: 500;
1149$index-footer: 500;
1150$index-mobile-nav: $index-header + 100;
1151$index-modal: $index-mobile-nav + 100;
1152
1153$index-header-search: 150;
1154$index-header-internal-icons: 125;
1155$index-header-internal-main: 100;
1156$index-header-internal-nav: 50;
1157
1158// Breakpoints
1159$bp-xs: 375px;
1160$bp-smaller: 680px;
1161$bp-small: 720px;
1162$bp-medium: 860px;
1163$bp-large: 1024px;
1164$bp-large-home: 1080px;
1165$bp-xl: 1280px;
1166
1167// Reusable button style for changing button sizes at different break points
1168@mixin button-size($button-size) {
1169 $padding: false;
1170 $font-size: false;
1171
1172 @if $button-size == small {
1173 $padding: (10px, 16px);
1174 $font-size: $button-small-size;
1175 } @else if $button-size == medium {
1176 $padding: (12px, 18px);
1177 $font-size: $button-medium-size;
1178 } @else if $button-size == large {
1179 $padding: (14px, 28px);
1180 $font-size: $button-large-size;
1181 } @else if $button-size == x-large {
1182 $padding: (14px, 28px);
1183 $font-size: $button-x-large-size;
1184 }
1185
1186 padding: rem(nth($padding, 1)) rem(nth($padding, 2));
1187 font-size: $font-size;
1188}
1189
1190@mixin media($max: false, $min: false) {
1191 @if $max {
1192 @if $min {
1193 @media screen and (max-width: $max - 1) and (min-width: $min) { @content; }
1194 } @else {
1195 @media screen and (max-width: $max - 1) { @content; }
1196 }
1197 } @else {
1198 @media screen and (min-width: $min) { @content; }
1199 }
1200}
1201
1202@mixin header-shadow {
1203 @if ($color-header-background == $color-background) {
1204 -webkit-box-shadow: 0 1px 4px transparentize($color-border, 0.75);
1205 box-shadow: 0 1px 4px transparentize($color-border, 0.75);
1206 }
1207}
1208
1209@mixin grid-gutter($size) {
1210 margin-right: -$size;
1211 margin-left: -$size;
1212
1213 > * {
1214 margin-right: $size;
1215 margin-left: $size;
1216 }
1217}
1218
1219@mixin mobile-scrolling() {
1220 overflow-x: scroll;
1221 white-space: nowrap;
1222 -ms-overflow-style: none;
1223 -webkit-overflow-scrolling: touch;
1224
1225 &::-webkit-scrollbar {
1226 display: none;
1227 }
1228}
1229
1230// Buttons
1231
1232%button-base {
1233 @include button-size(small);
1234 @include font($font-body, $font-weight: bolder);
1235 display: inline-block;
1236 text-decoration: none;
1237 cursor: pointer;
1238 border-radius: 3px;
1239 -webkit-transition:
1240 background-color 0.2s ease,
1241 width 0.2s ease,
1242 height 0.2s ease;
1243 transition:
1244 background-color 0.2s ease,
1245 width 0.2s ease,
1246 height 0.2s ease;
1247}
1248
1249%button-disable {
1250 &,
1251 &:active,
1252 &:focus {
1253 color: $color-button-text;
1254 cursor: default;
1255 background-color: $color-button-disable;
1256 border: 1px solid $color-button-disable;
1257 }
1258}
1259
1260%button-primary {
1261 @extend %button-base;
1262 color: $color-button-text;
1263 background-color: $color-button-background;
1264 border: 1px solid $color-button-background;
1265
1266 &:not(.disabled):hover {
1267 background: $color-button-background-hover;
1268 border: 1px solid $color-button-background-hover;
1269 }
1270
1271 &:active,
1272 &:focus {
1273 background: $color-button-background-focus;
1274 border: 1px solid $color-button-background-focus;
1275 }
1276
1277 &.disabled { @extend %button-disable; }
1278}
1279
1280%button-secondary {
1281 @extend %button-base;
1282 color: $color-link;
1283 background-color: $color-background;
1284 border: 1px solid transparentize($color-border, 0.7);
1285
1286 &:not(.disabled):hover {
1287 background: $color-background;
1288 border: 1px solid transparentize($color-border, 0.5);
1289 }
1290
1291 &.disabled { @extend %button-disable; }
1292}
1293
1294// Layout
1295
1296%layout-container {
1297 //mosaics and big pictures
1298 max-width: $max-width;
1299 padding-right: $gutter-outer-small;
1300 padding-left: $gutter-outer-small;
1301 margin-right: auto;
1302 margin-left: auto;
1303 margin-bottom: 20px;
1304 padding-bottom: 20px;
1305 background-color: #FFF;
1306 border-radius: 3px 4px 4px 3px;
1307
1308 @include media($min: $bp-small) {
1309 padding-right: $gutter-outer-medium;
1310 padding-left: $gutter-outer-medium;
1311 }
1312
1313 @include media($min: $bp-large) {
1314 padding-right: $gutter-outer;
1315 padding-left: $gutter-outer;
1316 }
1317}
1318
1319%layout-container--reset {
1320 max-width: 100%;
1321 padding-right: 0;
1322 padding-left: 0;
1323
1324 @include media($min: $bp-large) {
1325 padding-right: 0;
1326 padding-left: 0;
1327 }
1328}
1329
1330%page-content {
1331 margin-top: $gutter-content * 1.5;
1332 margin-bottom: $gutter-content * 1.5;
1333
1334 @include media($min: $bp-large) {
1335 margin-top: $gutter-content * 2.5;
1336 margin-bottom: $gutter-content * 2.5;
1337 }
1338}
1339
1340%clearfix {
1341 &::before,
1342 &::after {
1343 display: table;
1344 content: "";
1345 }
1346
1347 &::after {
1348 clear: both;
1349 }
1350}
1351
1352%link--text {
1353 color: $color-text;
1354 text-decoration: none;
1355 -webkit-transition: color 0.1s ease;
1356 transition: color 0.1s ease;
1357
1358 &:hover {
1359 color: $color-link;
1360 }
1361}
1362
1363%link--default {
1364 color: $color-link;
1365 text-decoration: none;
1366 -webkit-transition: color 0.1s ease;
1367 transition: color 0.1s ease;
1368
1369 &:hover {
1370 color: $color-link-hover;
1371 }
1372}
1373
1374%box-shadow {
1375 border: 1px solid $color-box-shadow-border;
1376 -webkit-box-shadow: 0 1px 4px $color-box-shadow-shadow;
1377 box-shadow: 0 1px 4px $color-box-shadow-shadow;
1378}
1379
1380%inline-chevron {
1381 display: inline-block;
1382 margin-left: rem(5px);
1383 vertical-align: middle;
1384
1385 svg {
1386 display: block;
1387 margin-top: rem(-2px);
1388 -webkit-transform: rotate(-90deg);
1389 -ms-transform: rotate(-90deg);
1390 transform: rotate(-90deg);
1391 fill: currentColor;
1392 }
1393}
1394
1395%icon-checkbox {
1396 display: inline-block;
1397 width: nth($checkbox-size, 1);
1398 height: nth($checkbox-size, 2);
1399 color: $checkbox-inactive;
1400 vertical-align: middle;
1401
1402 svg {
1403 display: block;
1404 width: 100%;
1405 height: 100%;
1406 background-color: $checkbox-inactive;
1407 border: 1px solid $checkbox-border;
1408 border-radius: 2px;
1409 fill: currentColor;
1410 }
1411}
1412
1413%icon-checkbox--active {
1414 color: $checkbox-active;
1415
1416 svg {
1417 border: 0;
1418 border-radius: 0;
1419 fill: currentColor;
1420 }
1421}
1422
1423%button-reset {
1424 @include font($font-body, $font-weight: bolder);
1425 padding: 0;
1426 cursor: pointer;
1427 background: transparent;
1428 border: 0;
1429 -webkit-appearance: normal;
1430 -moz-appearance: normal;
1431 appearance: normal;
1432}
1433
1434%atc-button {
1435 position: relative;
1436
1437 .atc-button--text {
1438 opacity: 1;
1439 }
1440
1441 .atc-button--icon {
1442 position: absolute;
1443 top: 50%;
1444 left: 50%;
1445 margin-top: -13px;
1446 margin-left: -13px;
1447 opacity: 0;
1448 visibility: hidden;
1449 -webkit-animation: rotate 0.6s linear infinite;
1450 animation: rotate 0.6s linear infinite;
1451 -webkit-transition: opacity 0.1s ease 0.1s;
1452 transition: opacity 0.1s ease 0.1s;
1453
1454 svg {
1455 display: block;
1456 width: 26px;
1457 height: 26px;
1458 }
1459 }
1460
1461 &.processing {
1462 .atc-button--text {
1463 opacity: 0;
1464 }
1465
1466 .atc-button--icon {
1467 opacity: 1;
1468 visibility: visible;
1469 }
1470 }
1471}
1472
1473%search-button {
1474 position: relative;
1475
1476 .search-icon--inactive,
1477 .search-icon--active {
1478 display: inline-block;
1479 }
1480
1481 svg {
1482 display: block;
1483 width: 100%;
1484 height: 100%;
1485 }
1486
1487 .search-icon--inactive {
1488 width: 20px;
1489 height: 21px;
1490 opacity: 1;
1491 -webkit-transition: opacity 0.1s ease;
1492 transition: opacity 0.1s ease;
1493 }
1494
1495 .search-icon--active {
1496 position: absolute;
1497 top: 50%;
1498 left: 50%;
1499 width: 26px;
1500 height: 26px;
1501 margin-top: -13px;
1502 margin-left: -13px;
1503 opacity: 0;
1504 visibility: hidden;
1505 -webkit-animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
1506 animation: rotate 0.7s cubic-bezier(0.69, 0.31, 0.56, 0.83) infinite;
1507 }
1508
1509 &.search-icon--processing {
1510 .search-icon--inactive {
1511 opacity: 0;
1512 -webkit-transition-delay: 0s;
1513 transition-delay: 0s;
1514 }
1515
1516 .search-icon--active {
1517 opacity: 1;
1518 visibility: visible;
1519 }
1520 }
1521}
1522
1523%message--base {
1524 @include font($font-body, $font-weight: bolder, $font-family: false);
1525 font-size: $font-body-size;
1526
1527 a {
1528 color: currentColor;
1529 }
1530}
1531
1532%message--error {
1533 @extend %message--base;
1534 color: $color-error;
1535 background-color: mix($color-error, $color-background, 18%);
1536}
1537
1538%message--success {
1539 @extend %message--base;
1540 color: $color-success;
1541 background-color: mix($color-success, $color-background, 18%);
1542}
1543
1544%sneak-in {
1545
1546 &.animating,
1547 &.visible:not(.animating) {
1548 display: block;
1549 }
1550
1551 &.visible:not(.animating) {
1552 opacity: 1;
1553 -webkit-transform: translate(0);
1554 -ms-transform: translate(0);
1555 transform: translate(0);
1556 }
1557
1558 &.animating-in {
1559 -webkit-animation-delay: 0s;
1560 animation-delay: 0s;
1561 -webkit-animation-duration: 0.27s;
1562 animation-duration: 0.27s;
1563 -webkit-animation-name: sneak-in;
1564 animation-name: sneak-in;
1565 -webkit-animation-timing-function: linear;
1566 animation-timing-function: linear;
1567 -webkit-animation-fill-mode: both;
1568 animation-fill-mode: both;
1569 -webkit-animation-direction: normal;
1570 animation-direction: normal;
1571 }
1572
1573 &.animating-out {
1574 opacity: 0;
1575 -webkit-transform: translateY(-5px);
1576 -ms-transform: translateY(-5px);
1577 transform: translateY(-5px);
1578 -webkit-transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
1579 transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
1580 }
1581}
1582
1583%fade-in {
1584 -webkit-animation-delay: 0s;
1585 animation-delay: 0s;
1586 -webkit-animation-duration: 0.27s;
1587 animation-duration: 0.27s;
1588 -webkit-animation-name: fade-in;
1589 animation-name: fade-in;
1590 -webkit-animation-timing-function: linear;
1591 animation-timing-function: linear;
1592 -webkit-animation-fill-mode: both;
1593 animation-fill-mode: both;
1594 -webkit-animation-direction: normal;
1595 animation-direction: normal;
1596}
1597
1598%no-results--wrapper {
1599 width: 100%;
1600 margin-top: $space-xx-large;
1601 text-align: center;
1602
1603 @include media($min: $bp-small) {
1604 margin-top: $space-xx-large - $space-large;
1605 }
1606}
1607
1608%no-results--title {
1609 @include font($font-body);
1610 margin-top: 0;
1611 margin-bottom: 0;
1612 font-size: $font-h4-size;
1613 color: $color-heading;
1614}
1615
1616%no-results--button {
1617 @extend %button-primary;
1618 @include button-size(medium);
1619 margin-top: $space-medium;
1620}
1621
1622.button-primary {
1623 @extend %button-primary;
1624}
1625
1626.button-secondary {
1627 @extend %button-secondary;
1628}
1629
1630.rte,
1631%rte {
1632 font-size: rem($font-body-size);
1633 line-height: 1.625;
1634
1635 h1 {
1636 font-size: $font-h1-size;
1637 }
1638
1639 h2 {
1640 font-size: $font-h2-size;
1641 }
1642
1643 h3 {
1644 font-size: $font-h3-size;
1645 }
1646
1647 h4 {
1648 font-size: $font-h4-size;
1649 }
1650
1651 h5 {
1652 font-size: $font-h5-size;
1653 }
1654
1655 h6 {
1656 font-size: $font-h6-size;
1657 }
1658
1659 h1,
1660 h2,
1661 h3,
1662 h4,
1663 h5,
1664 h6 {
1665 margin-top: rem($font-body-size * 2);
1666 margin-bottom: rem($font-body-size);
1667 color: $color-heading;
1668 }
1669
1670 a {
1671 @extend %link--default;
1672 }
1673
1674 blockquote {
1675 padding-left: rem($font-body-size);
1676 margin-left: 0;
1677 border-left: 2px solid $color-button-background;
1678 }
1679
1680 dl,
1681 ul,
1682 ol,
1683 p,
1684 blockquote,
1685 img:not([style]) {
1686 margin-top: rem($font-body-size);
1687 margin-bottom: rem($font-body-size);
1688 }
1689
1690 ul,
1691 ol {
1692 padding-left: $gutter-content;
1693 }
1694
1695 dl {
1696 dt {
1697 margin-top: rem($font-body-size);
1698 }
1699
1700 dd {
1701 margin-left: $gutter-content;
1702 }
1703 }
1704
1705 img {
1706 max-width: 100%;
1707 margin-top: rem($font-body-size);
1708 margin-bottom: rem($font-body-size);
1709
1710 &[style*="left"] {
1711 margin-top: 0;
1712 margin-right: rem($gutter-content);
1713 }
1714
1715 &[style*="right"] {
1716 margin-top: 0;
1717 margin-left: rem($gutter-content);
1718 }
1719 }
1720
1721 @include media($max: $bp-small) {
1722 td {
1723 display: block;
1724 width: 100%;
1725 }
1726 }
1727}
1728
1729// Form Spacing
1730$local-input-padding-horizontal: rem(10px);
1731$local-input-padding-vertical-base: rem(15px);
1732$local-input-padding-vertical-bottom: $local-input-padding-vertical-base - rem(9px);
1733$local-input-padding-vertical-top: $local-input-padding-vertical-base + rem(9px);
1734
1735%form-label {
1736 font-size: rem($font-body-size);
1737 line-height: 1;
1738 color: $color-text;
1739}
1740
1741%form-control-no-label {
1742 padding-top: $local-input-padding-vertical-base;
1743 padding-bottom: $local-input-padding-vertical-base;
1744}
1745
1746%form-control-base {
1747 @include font($font-body);
1748 z-index: 1;
1749 width: 100%;
1750 padding: $local-input-padding-vertical-top $local-input-padding-horizontal $local-input-padding-vertical-bottom;
1751 font-size: $font-body-size;
1752 color: $color-text;
1753 background-color: $color-background;
1754 border: 1px solid transparentize($color-border, 0.7);
1755 border-radius: 3px;
1756
1757 &:focus {
1758 border-color: transparentize($color-border, 0.25);
1759 outline: 0;
1760 }
1761
1762 &.form-field-error {
1763 border-color: $color-error;
1764 }
1765
1766 .no-label & {
1767 @extend %form-control-no-label;
1768 }
1769}
1770
1771%form-control-input {
1772 background-color: #FFF;
1773 width: 100%;
1774
1775 &::-webkit-input-placeholder {
1776 color: currentColor;
1777 opacity: 0;
1778 -webkit-transition: opacity 0.12s $ease-out-quad;
1779 transition: opacity 0.12s $ease-out-quad;
1780 }
1781
1782 &:-ms-input-placeholder {
1783 color: currentColor;
1784 opacity: 0;
1785 -webkit-transition: opacity 0.12s $ease-out-quad;
1786 transition: opacity 0.12s $ease-out-quad;
1787 }
1788
1789 &::-ms-input-placeholder {
1790 color: currentColor;
1791 opacity: 0;
1792 -webkit-transition: opacity 0.12s $ease-out-quad;
1793 transition: opacity 0.12s $ease-out-quad;
1794 }
1795
1796 &::placeholder {
1797 color: currentColor;
1798 opacity: 0;
1799 -webkit-transition: opacity 0.12s $ease-out-quad;
1800 transition: opacity 0.12s $ease-out-quad;
1801 }
1802
1803 .no-js &,
1804 &:focus,
1805 &.form-field-filled {
1806 &::-webkit-input-placeholder {
1807 opacity: 0.6;
1808 -webkit-transition-delay: 0.12s;
1809 transition-delay: 0.12s;
1810 }
1811 &:-ms-input-placeholder {
1812 opacity: 0.6;
1813 transition-delay: 0.12s;
1814 }
1815 &::-ms-input-placeholder {
1816 opacity: 0.6;
1817 transition-delay: 0.12s;
1818 }
1819 &::placeholder {
1820 opacity: 0.6;
1821 -webkit-transition-delay: 0.12s;
1822 transition-delay: 0.12s;
1823 }
1824
1825 + .form-field-title {
1826 top: rem(8px);
1827 font-size: rem(13px);
1828 -webkit-transition-delay: 0s;
1829 transition-delay: 0s;
1830 }
1831 }
1832
1833 .no-label & {
1834 &::-webkit-input-placeholder {
1835 opacity: 0.4;
1836 }
1837 &:-ms-input-placeholder {
1838 opacity: 0.4;
1839 }
1840 &::-ms-input-placeholder {
1841 opacity: 0.4;
1842 }
1843 &::placeholder {
1844 opacity: 0.4;
1845 }
1846 }
1847}
1848
1849// TODO: Find way to prevent content scrolling in paddings
1850%form-control-textarea {
1851 line-height: 1.5;
1852 max-width: 100%;
1853 max-height: 500px;
1854 min-width: 100%;
1855 min-height: 150px;
1856}
1857
1858// Form layout
1859.form-fields-columns {
1860 @extend %clearfix;
1861
1862 @include media($min: $bp-small) {
1863 margin-right: -1 * $gutter-content / 2;
1864 margin-left: -1 * $gutter-content / 2;
1865
1866 .form-field {
1867 float: left;
1868 margin-right: $gutter-content / 2;
1869 margin-left: $gutter-content / 2;
1870 }
1871
1872 .form-field--half {
1873 width: calc(50% - #{$gutter-content});
1874 }
1875 }
1876
1877 + .form-field {
1878 clear: left;
1879 }
1880}
1881
1882.form-action-row {
1883 margin-top: $space-medium;
1884
1885 .button-primary,
1886 .button-secondary {
1887 + .button-primary,
1888 + .button-secondary {
1889 margin-left: $gutter-content;
1890 }
1891 }
1892}
1893
1894.form-field {
1895 position: relative;
1896}
1897
1898.form-field-input,
1899.form-field-select {
1900 @extend %form-control-base;
1901}
1902
1903.form-field-input {
1904 background-color: #FFF;
1905 width: 40%;
1906
1907
1908 &::-webkit-input-placeholder {
1909 color: currentColor;
1910 opacity: 0;
1911 -webkit-transition: opacity 0.12s $ease-out-quad;
1912 transition: opacity 0.12s $ease-out-quad;
1913 }
1914
1915 &:-ms-input-placeholder {
1916 color: currentColor;
1917 opacity: 0;
1918 -webkit-transition: opacity 0.12s $ease-out-quad;
1919 transition: opacity 0.12s $ease-out-quad;
1920 }
1921
1922 &::-ms-input-placeholder {
1923 color: currentColor;
1924 opacity: 0;
1925 -webkit-transition: opacity 0.12s $ease-out-quad;
1926 transition: opacity 0.12s $ease-out-quad;
1927 }
1928
1929 &::placeholder {
1930 color: currentColor;
1931 opacity: 0;
1932 -webkit-transition: opacity 0.12s $ease-out-quad;
1933 transition: opacity 0.12s $ease-out-quad;
1934 }
1935
1936 .no-js &,
1937 &:focus,
1938 &.form-field-filled {
1939 &::-webkit-input-placeholder {
1940 opacity: 0.6;
1941 -webkit-transition-delay: 0.12s;
1942 transition-delay: 0.12s;
1943 }
1944 &:-ms-input-placeholder {
1945 opacity: 0.6;
1946 transition-delay: 0.12s;
1947 }
1948 &::-ms-input-placeholder {
1949 opacity: 0.6;
1950 transition-delay: 0.12s;
1951 }
1952 &::placeholder {
1953 opacity: 0.6;
1954 -webkit-transition-delay: 0.12s;
1955 transition-delay: 0.12s;
1956 }
1957
1958 + .form-field-title {
1959 top: rem(8px);
1960 font-size: rem(13px);
1961 -webkit-transition-delay: 0s;
1962 transition-delay: 0s;
1963 }
1964 }
1965
1966 .no-label & {
1967 &::-webkit-input-placeholder {
1968 opacity: 0.4;
1969 }
1970 &:-ms-input-placeholder {
1971 opacity: 0.4;
1972 }
1973 &::-ms-input-placeholder {
1974 opacity: 0.4;
1975 }
1976 &::placeholder {
1977 opacity: 0.4;
1978 }
1979 }
1980}
1981
1982.form-field-title {
1983 @extend %form-label;
1984 position: absolute;
1985 top: $local-input-padding-vertical-base + rem(2px);
1986 left: $local-input-padding-horizontal;
1987 z-index: 2;
1988 pointer-events: none;
1989 opacity: 0.6;
1990 -webkit-transition: 0.12s;
1991 transition: 0.12s;
1992 -webkit-transition-delay: 0.12s;
1993 transition-delay: 0.12s;
1994 -webkit-transition-timing-function: $ease-out-quad;
1995 transition-timing-function: $ease-out-quad;
1996
1997 .form-field-textarea + & {
1998 top: $local-input-padding-vertical-base;
1999 }
2000}
2001
2002.form-field-title--inline {
2003 @extend %form-label;
2004 display: inline-block;
2005 margin-left: $local-input-padding-horizontal;
2006 vertical-align: middle;
2007}
2008
2009.form-field-select-wrapper {
2010 position: relative;
2011
2012 .form-field-select {
2013 z-index: 2;
2014 width: 100%; // needed for Firefox
2015 height: 100%; // needed for IE
2016 padding-right: ($local-input-padding-horizontal * 2) + rem(8px);
2017 color: $color-text;
2018 cursor: pointer;
2019 background-color: transparent;
2020 -webkit-box-shadow: 0 1px 2px 0 $color-border-soft;
2021 box-shadow: 0 1px 2px 0 $color-border-soft;
2022 -webkit-appearance: none;
2023 -moz-appearance: none;
2024 appearance: none;
2025
2026 &::-ms-expand {
2027 display: none; // Removes default arrow from IE10+
2028 }
2029
2030 .ie9 & {
2031 padding-right: $local-input-padding-horizontal;
2032 }
2033 }
2034
2035 svg {
2036 position: absolute;
2037 top: 50%;
2038 right: $local-input-padding-horizontal;
2039 margin-top: -3px;
2040 pointer-events: none;
2041
2042 .ie9 & {
2043 display: none;
2044 }
2045 }
2046}
2047
2048.form-field-textarea {
2049 @extend %form-control-textarea;
2050}
2051
2052.form-fields--qty {
2053 position: relative;
2054
2055 .form-field {
2056 opacity: 0;
2057 -webkit-transition: opacity 0.15s ease;
2058 transition: opacity 0.15s ease;
2059 }
2060
2061 .hidden {
2062 z-index: 0;
2063 opacity: 0;
2064 visibility: hidden;
2065 }
2066
2067 .visible {
2068 z-index: 1;
2069 opacity: 1;
2070 visibility: visible;
2071 }
2072
2073 .form-field--qty-select .form-field-select-wrapper {
2074 position: absolute;
2075 width: 100%;
2076 }
2077}
2078
2079.form-field-checkbox {
2080 position: relative;
2081 display: block;
2082 margin-top: $local-input-padding-vertical-base;
2083 cursor: pointer;
2084
2085 input {
2086 position: absolute;
2087 top: 0;
2088 bottom: 0;
2089 z-index: 1;
2090 width: 100%;
2091 cursor: pointer;
2092 opacity: 0;
2093
2094 &:checked ~ .form-icon--checkbox {
2095 @extend %icon-checkbox--active;
2096 }
2097 }
2098
2099 .form-icon--checkbox {
2100 @extend %icon-checkbox;
2101 margin-top: -2px;
2102 }
2103}
2104
2105%form-message,
2106.form-message {
2107 &.message--success {
2108 @extend %message--success;
2109 padding: $space-xx-small $space-x-small;
2110 }
2111
2112 &.message--error {
2113 @extend %message--error;
2114 padding: $space-xx-small $space-x-small;
2115 }
2116
2117 ul,
2118 p {
2119 @include font($font-body, $font-family: false);
2120 margin-top: 0;
2121 margin-bottom: 0;
2122 }
2123
2124 li:not(:first-child) {
2125 margin-top: $space-xx-small;
2126 }
2127
2128 ul {
2129 padding-left: 0;
2130 list-style-type: none;
2131 }
2132}
2133
2134.accordion--icon {
2135
2136 svg {
2137 display: block;
2138 fill: currentColor;
2139 }
2140
2141 .icon-chevron-down-left,
2142 .icon-chevron-down-right {
2143 -webkit-transition: fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
2144 transition: fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
2145 transition: transform 0.25s $ease-out-quad, fill 0.15s $ease-out-quad;
2146 transition: transform 0.25s $ease-out-quad, fill 0.15s $ease-out-quad, -webkit-transform 0.25s $ease-out-quad;
2147 -webkit-transform-origin: 50% 50%;
2148 -ms-transform-origin: 50% 50%;
2149 transform-origin: 50% 50%;
2150 }
2151
2152 .icon-chevron-down-left {
2153 -webkit-transform: rotate(0);
2154 -ms-transform: rotate(0);
2155 transform: rotate(0);
2156 }
2157
2158 .icon-chevron-down-right {
2159 -webkit-transform: rotate(0);
2160 -ms-transform: rotate(0);
2161 transform: rotate(0);
2162 }
2163
2164 .accordion--active & {
2165 .icon-chevron-down-left {
2166 -webkit-transform: rotate(45deg);
2167 -ms-transform: rotate(45deg);
2168 transform: rotate(45deg);
2169 }
2170
2171 .icon-chevron-down-right {
2172 -webkit-transform: rotate(-45deg);
2173 -ms-transform: rotate(-45deg);
2174 transform: rotate(-45deg);
2175 }
2176 }
2177}
2178
2179.accordion--content {
2180 //scss-lint:disable SpaceAfterPropertyColon
2181 max-height: 0;
2182 overflow: hidden;
2183 opacity: 0;
2184 -webkit-transition:
2185 max-height 0.25s ease,
2186 padding-bottom 0.25s ease,
2187 opacity 0.15s ease;
2188 transition:
2189 max-height 0.25s ease,
2190 padding-bottom 0.25s ease,
2191 opacity 0.15s ease;
2192
2193 .accordion--active & {
2194 max-height: 999999px;
2195 opacity: 1;
2196 }
2197}
2198
2199.placeholder--image {
2200 display: block;
2201 background-color: $color-placeholder-background;
2202 fill: $color-placeholder-fill;
2203}
2204
2205.placeholder--content-image {
2206 fill: $color-placeholder-background;
2207}
2208
2209.placeholder--content-text {
2210 background-color: $color-placeholder-background;
2211}
2212
2213// General styling for Shopify Product Reviews
2214.spr-badge {
2215
2216 .spr-badge-starrating {
2217 margin-right: 0;
2218
2219 .spr-icon {
2220 font-size: rem(12px);
2221 }
2222 }
2223
2224 .spr-badge-caption {
2225 display: inline-block;
2226 margin-left: $space-xxx-small;
2227 font-size: rem(12px);
2228 white-space: nowrap;
2229 }
2230}
2231
2232.spr-starratings,
2233.spr-starrating {
2234 display: inline-block;
2235 font-size: 0;
2236 vertical-align: middle;
2237
2238 .spr-icon {
2239 top: auto;
2240 display: inline-block;
2241 width: auto;
2242 height: auto;
2243 font-size: rem(14px);
2244 vertical-align: middle;
2245
2246 &:before {
2247 font-size: 100%;
2248 }
2249 }
2250}
2251
2252.spr-icon {
2253 color: $color-star;
2254
2255 &:not(:last-child) {
2256 margin-right: 0.1em;
2257 }
2258
2259 &.spr-icon-star-empty {
2260 color: $color-star-empty;
2261
2262 &.spr-icon-star-hover,
2263 &.spr-icon-star-hover:hover {
2264 color: $color-star;
2265 }
2266 }
2267
2268 .spr-starrating.spr-form-input-error & {
2269 color: $color-error;
2270 }
2271}
2272
2273#shopify-product-reviews {
2274 @extend %box-shadow;
2275}
2276
2277.flickity-prev-next-button {
2278 @extend %button-reset;
2279 position: absolute;
2280 top: 50%;
2281 width: 40px;
2282 height: 40px;
2283 padding: 5px;
2284 outline: 0;
2285 -webkit-transform: translateY(-50%);
2286 -ms-transform: translateY(-50%);
2287 transform: translateY(-50%);
2288 opacity: 0.6;
2289 cursor: pointer;
2290
2291 svg {
2292 top: 5px;
2293 left: 5px;
2294 width: 30px;
2295 height: 30px;
2296 }
2297
2298 &:hover {
2299 background-color: transparent;
2300
2301 &:not([disabled]) {
2302 opacity: 0.8;
2303 }
2304 }
2305
2306 &.previous {
2307 float: left;
2308 left: 200px;
2309 }
2310
2311 &.next {
2312 float: right;
2313 right: 200px;
2314 }
2315}
2316@media screen and (max-width: 1024px) {
2317 .flickity-prev-next-button {
2318 visibility: hidden;
2319 }
2320}
2321
2322.flickity-page-dots {
2323 transform: translateY(90%);
2324 position: absolute;
2325 width: 100%;
2326 padding: 0;
2327 margin: 0;
2328 bottom: $gutter-outer;
2329 list-style: none;
2330 text-align: center;
2331 line-height: 1;
2332
2333
2334 .dot {
2335 display: inline-block;
2336 width: 10px;
2337 height: 10px;
2338 margin: 0 8px;
2339 background-color: rgba($color-black, 0.3);
2340 border-radius: 50%;
2341 opacity: 0.25;
2342 cursor: pointer;
2343 }
2344
2345 .dot.is-selected {
2346 opacity: 1;
2347 }
2348}
2349
2350// Static background placeholders
2351.promo-block,
2352.navmenu-meganav--image {
2353 background: $color-placeholder-background;
2354}
2355
2356.article-image,
2357.article--excerpt-image {
2358 background: $color-placeholder-background;
2359
2360 .article--excerpt-wrapper--featured & {
2361 background-color: transparent;
2362 }
2363}
2364
2365// img element fade in
2366[data-rimg="lazy"],
2367[data-rimg="loading"],
2368[data-rimg="loaded"] {
2369 -webkit-transition: opacity 0.1s ease-in;
2370 transition: opacity 0.1s ease-in;
2371}
2372
2373img[data-rimg="lazy"],
2374img[data-rimg="loading"] {
2375
2376 // Only target specific elements
2377 &.slideshow-image,
2378 .product-gallery--image & {
2379 opacity: 0;
2380 }
2381}
2382
2383[data-rimg="loaded"] {
2384 opacity: 1;
2385}
2386
2387.promo-block--content-wrapper {
2388
2389 @include media($min: $bp-small) {
2390 position: relative;
2391 z-index: 1;
2392 }
2393}
2394
2395// Sibling placeholder
2396[data-rimg-canvas] {
2397 position: absolute;
2398 top: 0;
2399 left: 0;
2400 width: 100%;
2401 height: 100%;
2402
2403 -webkit-animation: shimmer-background 1s ease-in-out infinite;
2404 animation: shimmer-background 1s ease-in-out infinite;
2405 -webkit-animation-fill-mode: forwards;
2406 animation-fill-mode: forwards;
2407 -webkit-transition: (
2408 opacity 0.1s ease-out,
2409 visibility 0s linear 0.1s
2410 );
2411 transition: (
2412 opacity 0.1s ease-out,
2413 visibility 0s linear 0.1s
2414 );
2415 -webkit-animation-direction: alternate;
2416 animation-direction: alternate;
2417
2418 [data-rimg="loaded"] + &,
2419 .no-js & {
2420 opacity: 0;
2421 visibility: hidden;
2422 }
2423
2424 .no-js & {
2425 display: none;
2426 }
2427}
2428
2429//scss-lint:disable QualifyingElement
2430.no-js noscript + img[data-rimg="lazy"] {
2431 display: none;
2432}
2433//scss-lint:enable QualifyingElement
2434
2435.article--excerpt-image {
2436 img {
2437 display: block;
2438 width: 100%;
2439 height: 100%;
2440 max-width: 100%;
2441 max-height: 100%;
2442 visibility: hidden;
2443 -o-object-fit: cover;
2444 object-fit: cover;
2445
2446 .no-js & {
2447 visibility: visible;
2448 }
2449 }
2450}
2451
2452.promo-block,
2453.video-cover,
2454.featured-collection--banner,
2455.search-section-background,
2456.search-section-overlay,
2457.article-image {
2458 img {
2459 position: absolute;
2460 width: 1px;
2461 height: 1px;
2462 opacity: 0;
2463
2464 &[data-rimg="noscript"] {
2465 position: absolute;
2466 top: 0;
2467 left: 0;
2468 width: 100%;
2469 height: 100%;
2470 opacity: 1;
2471 -o-object-fit: cover;
2472 object-fit: cover;
2473 }
2474 }
2475}
2476
2477.slideshow-image {
2478 width: 100%;
2479 //height: auto;
2480 height: 100%;
2481 opacity: 0;
2482
2483 .slideshow-slide:not(.slideshow-height-original) &[data-rimg="noscript"] {
2484 opacity: 1;
2485 -o-object-fit: cover;
2486 object-fit: cover;
2487 }
2488}
2489
2490
2491// Global styles
2492html {
2493 -webkit-box-sizing: border-box;
2494 box-sizing: border-box;
2495}
2496
2497*,
2498*::before,
2499*::after {
2500 -webkit-box-sizing: inherit;
2501 box-sizing: inherit;
2502}
2503
2504* {
2505 -moz-osx-font-smoothing: grayscale;
2506 -webkit-font-smoothing: antialiased;
2507 -webkit-text-size-adjust: none; // Prevent webkit from resizing text
2508 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Prevent tap highlight color / shadow
2509}
2510
2511html,
2512body {
2513 background-color: $color-background;
2514 //background-color: blue;
2515}
2516
2517
2518html {
2519 height: 100%;
2520
2521 &::after {
2522 display: none;
2523 content: "XS";
2524
2525 @include media($min: $bp-small) {
2526 content: "S";
2527 }
2528
2529 @include media($min: $bp-medium) {
2530 content: "M";
2531 }
2532
2533 @include media($min: $bp-large) {
2534 content: "L";
2535 }
2536 }
2537}
2538
2539body {
2540 @include font($font-body);
2541 width: 100%;
2542 font-size: $font-body-size;
2543 color: $color-text;
2544
2545 &.scroll-lock {
2546 height: 100vh;
2547 overflow: hidden;
2548 -ms-touch-action: manipulation;
2549 touch-action: manipulation;
2550 }
2551}
2552
2553th,
2554b,
2555strong {
2556 font-weight: font-weight($font-body, $font-weight: bolder);
2557}
2558
2559em {
2560 font-style: font-style($font-body, $font-style: italic);
2561}
2562
2563th em,
2564b em,
2565strong em,
2566em b,
2567em strong {
2568 font-style: font-style($font-body, $font-weight: bolder, $font-style: italic);
2569}
2570
2571// Headings
2572h1,
2573h2,
2574h3,
2575h4,
2576h5,
2577h6 {
2578 @include font($font-heading);
2579
2580 b,
2581 strong {
2582 font-weight: font-weight($font-heading, $font-weight: bolder);
2583 }
2584
2585 em {
2586 font-style: font-style($font-heading, $font-style: italic);
2587 }
2588
2589 b em,
2590 strong em,
2591 em b,
2592 em strong {
2593 font-style: font-style($font-heading, $font-weight: bolder, $font-style: italic);
2594 }
2595}
2596
2597%show-for-sr,
2598.show-for-sr {
2599 //scss-lint:disable ImportantRule
2600 position: absolute !important;
2601 width: 1px;
2602 height: 1px;
2603 padding: 0;
2604 margin: -1px;
2605 overflow: hidden;
2606 clip: rect(0 0 0 0);
2607 border: 0;
2608}
2609
2610@-webkit-keyframes fade-in {
2611 0% {
2612 opacity: 0;
2613 -webkit-animation-timing-function: $ease-bubble;
2614 animation-timing-function: $ease-bubble;
2615 }
2616
2617 76.92% {
2618 opacity: 1;
2619 -webkit-animation-timing-function: linear;
2620 animation-timing-function: linear;
2621 }
2622
2623 to {
2624 opacity: 1;
2625 }
2626}
2627
2628@keyframes fade-in {
2629 0% {
2630 opacity: 0;
2631 -webkit-animation-timing-function: $ease-bubble;
2632 animation-timing-function: $ease-bubble;
2633 }
2634
2635 76.92% {
2636 opacity: 1;
2637 -webkit-animation-timing-function: linear;
2638 animation-timing-function: linear;
2639 }
2640
2641 to {
2642 opacity: 1;
2643 }
2644}
2645
2646@-webkit-keyframes sneak-in {
2647 0% {
2648 opacity: 0;
2649 -webkit-transform: translateY(-10px);
2650 transform: translateY(-10px);
2651 -webkit-animation-timing-function: $ease-bubble;
2652 animation-timing-function: $ease-bubble;
2653 }
2654
2655 76.92% {
2656 opacity: 1;
2657 -webkit-transform: translateY(0);
2658 transform: translateY(0);
2659 -webkit-animation-timing-function: linear;
2660 animation-timing-function: linear;
2661 }
2662
2663 to {
2664 opacity: 1;
2665 -webkit-transform: translateY(0);
2666 transform: translateY(0);
2667 }
2668}
2669
2670@keyframes sneak-in {
2671 0% {
2672 opacity: 0;
2673 -webkit-transform: translateY(-10px);
2674 transform: translateY(-10px);
2675 -webkit-animation-timing-function: $ease-bubble;
2676 animation-timing-function: $ease-bubble;
2677 }
2678
2679 76.92% {
2680 opacity: 1;
2681 -webkit-transform: translateY(0);
2682 transform: translateY(0);
2683 -webkit-animation-timing-function: linear;
2684 animation-timing-function: linear;
2685 }
2686
2687 to {
2688 opacity: 1;
2689 -webkit-transform: translateY(0);
2690 transform: translateY(0);
2691 }
2692}
2693
2694@-webkit-keyframes overlay-fade-in {
2695 0% {
2696 opacity: 0;
2697 -webkit-animation-timing-function: $ease-bubble;
2698 animation-timing-function: $ease-bubble;
2699 }
2700
2701 76.92% {
2702 opacity: 1;
2703 -webkit-animation-timing-function: linear;
2704 animation-timing-function: linear;
2705 }
2706
2707 to {
2708 opacity: 1;
2709 }
2710}
2711
2712@keyframes overlay-fade-in {
2713 0% {
2714 opacity: 0;
2715 -webkit-animation-timing-function: $ease-bubble;
2716 animation-timing-function: $ease-bubble;
2717 }
2718
2719 76.92% {
2720 opacity: 1;
2721 -webkit-animation-timing-function: linear;
2722 animation-timing-function: linear;
2723 }
2724
2725 to {
2726 opacity: 1;
2727 }
2728}
2729
2730@-webkit-keyframes overlay-fade-out {
2731 0% {
2732 opacity: 1;
2733 -webkit-animation-timing-function: $ease-bubble;
2734 animation-timing-function: $ease-bubble;
2735 }
2736
2737 76.92% {
2738 opacity: 0;
2739 -webkit-animation-timing-function: linear;
2740 animation-timing-function: linear;
2741 }
2742
2743 to {
2744 opacity: 0;
2745 }
2746}
2747
2748@keyframes overlay-fade-out {
2749 0% {
2750 opacity: 1;
2751 -webkit-animation-timing-function: $ease-bubble;
2752 animation-timing-function: $ease-bubble;
2753 }
2754
2755 76.92% {
2756 opacity: 0;
2757 -webkit-animation-timing-function: linear;
2758 animation-timing-function: linear;
2759 }
2760
2761 to {
2762 opacity: 0;
2763 }
2764}
2765
2766@-webkit-keyframes sneak-in-mobilenav {
2767 0% {
2768 -webkit-transform: translateX(-100px);
2769 transform: translateX(-100px);
2770 opacity: 0;
2771 -webkit-animation-timing-function: $ease-bubble;
2772 animation-timing-function: $ease-bubble;
2773 }
2774
2775 76.92% {
2776 -webkit-transform: translate3d(0, 0, 0);
2777 transform: translate3d(0, 0, 0);
2778 opacity: 1;
2779 -webkit-animation-timing-function: linear;
2780 animation-timing-function: linear;
2781 }
2782
2783 to {
2784 left: 0;
2785 opacity: 1;
2786 }
2787}
2788
2789@keyframes sneak-in-mobilenav {
2790 0% {
2791 -webkit-transform: translateX(-100px);
2792 transform: translateX(-100px);
2793 opacity: 0;
2794 -webkit-animation-timing-function: $ease-bubble;
2795 animation-timing-function: $ease-bubble;
2796 }
2797
2798 76.92% {
2799 -webkit-transform: translate3d(0, 0, 0);
2800 transform: translate3d(0, 0, 0);
2801 opacity: 1;
2802 -webkit-animation-timing-function: linear;
2803 animation-timing-function: linear;
2804 }
2805
2806 to {
2807 left: 0;
2808 opacity: 1;
2809 }
2810}
2811
2812@-webkit-keyframes sneak-out-mobilenav {
2813 0% {
2814 -webkit-transform: translate3d(0, 0, 0);
2815 transform: translate3d(0, 0, 0);
2816 opacity: 1;
2817 -webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
2818 animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
2819 }
2820
2821 to {
2822 -webkit-transform: translateX(-100px);
2823 transform: translateX(-100px);
2824 opacity: 0;
2825 }
2826}
2827
2828@keyframes sneak-out-mobilenav {
2829 0% {
2830 -webkit-transform: translate3d(0, 0, 0);
2831 transform: translate3d(0, 0, 0);
2832 opacity: 1;
2833 -webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
2834 animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
2835 }
2836
2837 to {
2838 -webkit-transform: translateX(-100px);
2839 transform: translateX(-100px);
2840 opacity: 0;
2841 }
2842}
2843
2844@-webkit-keyframes rotate {
2845 from {
2846 -webkit-transform: rotate(0deg);
2847 transform: rotate(0deg);
2848 }
2849
2850 to {
2851 -webkit-transform: rotate(360deg);
2852 transform: rotate(360deg);
2853 }
2854}
2855
2856@keyframes rotate {
2857 from {
2858 -webkit-transform: rotate(0deg);
2859 transform: rotate(0deg);
2860 }
2861
2862 to {
2863 -webkit-transform: rotate(360deg);
2864 transform: rotate(360deg);
2865 }
2866}
2867
2868@-webkit-keyframes shimmer {
2869 from {
2870 opacity: 1;
2871 }
2872
2873 to {
2874 opacity: 0.5;
2875 }
2876}
2877
2878@keyframes shimmer {
2879 from {
2880 opacity: 1;
2881 }
2882
2883 to {
2884 opacity: 0.5;
2885 }
2886}
2887
2888@-webkit-keyframes shimmer-background {
2889 from {
2890 background-color: mix($color-text, $color-background, 8%);
2891 }
2892
2893 to {
2894 background-color: mix($color-text, $color-background, 4%);
2895 }
2896}
2897
2898@keyframes shimmer-background {
2899 from {
2900 background-color: mix($color-text, $color-background, 8%);
2901 }
2902
2903 to {
2904 background-color: mix($color-text, $color-background, 4%);
2905 }
2906}
2907
2908@-webkit-keyframes loading-video {
2909 0% {
2910 -webkit-transform: translate(-50%, -50%) rotate(0deg);
2911 transform: translate(-50%, -50%) rotate(0deg);
2912 }
2913
2914 100% {
2915 -webkit-transform: translate(-50%, -50%) rotate(360deg);
2916 transform: translate(-50%, -50%) rotate(360deg);
2917 }
2918}
2919
2920@keyframes loading-video {
2921 0% {
2922 -webkit-transform: translate(-50%, -50%) rotate(0deg);
2923 transform: translate(-50%, -50%) rotate(0deg);
2924 }
2925
2926 100% {
2927 -webkit-transform: translate(-50%, -50%) rotate(360deg);
2928 transform: translate(-50%, -50%) rotate(360deg);
2929 }
2930}
2931
2932@-webkit-keyframes hide-zoom {
2933 0% {
2934 pointer-events: all;
2935 opacity: 1;
2936 }
2937
2938 100% {
2939 pointer-events: none;
2940 opacity: 0;
2941 }
2942}
2943
2944@keyframes hide-zoom {
2945 0% {
2946 pointer-events: all;
2947 opacity: 1;
2948 }
2949
2950 100% {
2951 pointer-events: none;
2952 opacity: 0;
2953 }
2954}
2955
2956
2957// Sections
2958$local-header-icon-padding: 0px;
2959$local-header-icon-width: 48px;
2960$local-header-icon-height: $header-content-height;
2961$local-header-main-space: (30px, 500px); // Space left, right between logo/search and icons
2962
2963.site-header-wrapper {
2964 @include header-shadow;
2965 position: relative;
2966 padding-top:40px;
2967 top: -40px;
2968 left: 0;
2969 //z-index: $index-header-internal-main;
2970 z-index: 1000;
2971 width: 100%;
2972 color: $color-header-text;
2973 background-color: $color-header-background;
2974 -webkit-transition: top 0.15s $ease-bubble;
2975 transition: top 0.15s $ease-bubble;
2976
2977 .site-header-sticky & {
2978 position: fixed;
2979 }
2980
2981 .search-takeover-active & {
2982 display: none;
2983 }
2984}
2985
2986.site-header {
2987 @extend %clearfix;
2988 max-width: $max-width;
2989 padding-right: $gutter-outer-small;
2990 padding-left: $gutter-outer-small;
2991 margin-right: auto;
2992 margin-left: auto;
2993 margin-bottom: 0px;
2994 padding-bottom: 20px;
2995 //background-color: #000;
2996
2997 @include media($min: $bp-small) {
2998 padding-right: $gutter-outer-medium;
2999 padding-left: $gutter-outer-medium;
3000 }
3001
3002 @include media($min: $bp-large) {
3003 padding-right: $gutter-outer;
3004 padding-left: $gutter-outer;
3005 }
3006 position: relative;
3007 z-index: $index-header-internal-main;
3008 padding-top: $header-padding-vertical-mobile;
3009 padding-bottom: $header-padding-vertical-mobile;
3010 background-color: $color-header-background;
3011 -webkit-transition: padding 0.15s $ease-bubble;
3012 transition: padding 0.15s $ease-bubble;
3013
3014 @include media($min: $bp-large) {
3015 display: -webkit-box;
3016 display: -webkit-flex;
3017 display: -ms-flexbox;
3018 display: flex;
3019 -webkit-box-align: center;
3020 -webkit-align-items: center;
3021 -ms-flex-align: center;
3022 align-items: center;
3023 padding-top: 10px;
3024 padding-bottom: $header-padding-vertical / 2;
3025
3026 .ie9 & {
3027 display: table;
3028 width: 100%;
3029 table-layout: fixed;
3030 }
3031
3032 .site-header-sticky--scrolled & {
3033 padding-top: 10px;
3034 padding-bottom: $header-padding-vertical-sticky;
3035 }
3036 }
3037}
3038
3039.site-header-main {
3040 //background-color: #000;
3041 margin-right: auto;
3042 margin-left: auto;
3043 z-index: 1000;
3044 font-size: 0;
3045 -webkit-transition: margin 0.15s $ease-bubble;
3046 transition: margin 0.15s $ease-bubble;
3047
3048 @include media($min: $bp-large) {
3049 display: -webkit-box;
3050 display: -webkit-flex;
3051 display: -ms-flexbox;
3052 display: flex;
3053 -webkit-box-align: center;
3054 -webkit-align-items: center;
3055 -ms-flex-align: center;
3056 align-items: center;
3057 -webkit-flex-basis: auto;
3058 -ms-flex-preferred-size: auto;
3059 flex-basis: auto;
3060 -webkit-box-flex: 1;
3061 -webkit-flex-grow: 1;
3062 -ms-flex-positive: 1;
3063 flex-grow: 1;
3064 -webkit-flex-shrink: 1;
3065 -ms-flex-negative: 1;
3066 flex-shrink: 1;
3067 -webkit-box-pack: center;
3068 -webkit-justify-content: center;
3069 -ms-flex-pack: center;
3070 justify-content: center;
3071 margin-right: nth($local-header-main-space, 2);
3072 margin-left: 0;
3073
3074 .ie9 & {
3075 display: table-cell;
3076 width: 100%;
3077 padding-right: nth($local-header-main-space, 2);
3078 margin-right: 0;
3079 }
3080
3081 .site-header-sticky--scrolled & {
3082 margin-left: nth($local-header-main-space, 1);
3083
3084 .ie9 & {
3085 padding-left: nth($local-header-main-space, 1);
3086 margin-left: 0;
3087 }
3088 }
3089 }
3090}
3091
3092.site-header-logo {
3093 margin-right: auto;
3094 margin-left: auto;
3095 text-align: center;
3096 vertical-align: middle;
3097
3098 @include media($min: $bp-xs, $max: $bp-large) {
3099 max-width: calc(100% - #{$local-header-icon-width * 2});
3100 }
3101
3102 @include media($max: $bp-large) {
3103 display: table;
3104 min-height: $header-content-height;
3105 }
3106
3107 @include media($min: $bp-large) {
3108 display: inline-block;
3109 height: auto;
3110 margin-right: 25px;
3111 margin-left: 0;
3112 text-align: left;
3113 }
3114}
3115
3116.site-logo {
3117 display: block;
3118 color: currentColor;
3119 text-decoration: none;
3120
3121 @include media($max: $bp-large) {
3122 display: table-cell;
3123 vertical-align: middle;
3124 }
3125
3126 @include media($min: $bp-large) {
3127 display: inline-block;
3128 margin-left: 0;
3129 }
3130}
3131
3132.site-logo-image {
3133 display: block;
3134 margin-right: auto;
3135 margin-left: auto;
3136
3137 @include media($min: $bp-large) {
3138 display: inline-block;
3139 margin-left: 0;
3140 }
3141}
3142
3143.site-logo-text {
3144 display: block;
3145 width: 100%;
3146 font-size: rem($font-body-size);
3147 text-decoration: none;
3148}
3149
3150.site-header-menu-toggle,
3151.site-header-cart {
3152 position: absolute;
3153 top: 10px;
3154 bottom: auto;
3155 z-index: $index-header-internal-icons;
3156 display: inline-block;
3157 height: $local-header-icon-height;
3158
3159 @include media($min: $bp-large) {
3160 top: 50%;
3161 bottom: ($header-padding-vertical-mobile * 2) + $header-content-height;
3162 // Bottom padding is shorter, we need to subtract 1/4 of that to balance it
3163 margin-top: (-1 * $local-header-icon-height / 2) + ($header-padding-vertical / 4);
3164
3165 .site-header-sticky--scrolled & {
3166 // Top and bottom padding are equal
3167 margin-top: -1 * $local-header-icon-height / 2;
3168 }
3169
3170 .ie9 & {
3171 display: table-cell;
3172 width: $local-header-icon-width;
3173 }
3174 }
3175}
3176
3177.site-header-menu-toggle--button,
3178.site-header-cart--button {
3179 display: inline-block;
3180 padding: $local-header-icon-padding;
3181 color: $color-header-text;
3182
3183 svg {
3184 display: block;
3185 }
3186}
3187
3188.site-header-menu-toggle {
3189 left: $gutter-outer-small - $local-header-icon-padding;
3190
3191 @include media($min: $bp-small) {
3192 left: $gutter-outer-medium - $local-header-icon-padding;
3193 }
3194
3195 @include media($min: $bp-large) {
3196 left: -50px;
3197 width: 0;
3198 opacity: 0;
3199 visibility: hidden;
3200 -webkit-transition: opacity 0.15s $ease-bubble, left 0.15s $ease-bubble, width 0s $ease-out-quad 0.15s;
3201 transition: opacity 0.15s $ease-bubble, left 0.15s $ease-bubble, width 0s $ease-out-quad 0.15s;
3202
3203 .animating &,
3204 .visible & {
3205 width: auto;
3206 visibility: visible;
3207 }
3208
3209 .site-header-sticky--scrolled & {
3210 left: $gutter-outer - $local-header-icon-padding;
3211 opacity: 1;
3212 }
3213 }
3214}
3215
3216.site-header-menu-toggle--button {
3217 padding-top: 15px;
3218 padding-bottom: 15px;
3219 background-color: transparent;
3220
3221 &:focus {
3222 outline: none;
3223 }
3224
3225 .toggle-icon--bar {
3226 display: block;
3227 width: 22px;
3228 height: 2px;
3229 background-color: $color-header-text;
3230 -webkit-transition: -webkit-transform 0.2s;
3231 transition: -webkit-transform 0.2s;
3232 transition: transform 0.2s;
3233 transition: transform 0.2s, -webkit-transform 0.2s;
3234 -webkit-transform-origin: 1px;
3235 -ms-transform-origin: 1px;
3236 transform-origin: 1px;
3237
3238 + .toggle-icon--bar {
3239 margin-top: 5px;
3240 }
3241
3242 &.toggle-icon--bar-middle {
3243 -webkit-transition: opacity 0.2s;
3244 transition: opacity 0.2s;
3245 }
3246 }
3247
3248 &.active {
3249 .toggle-icon--bar-top {
3250 -webkit-transform: rotate(45deg);
3251 -ms-transform: rotate(45deg);
3252 transform: rotate(45deg);
3253 }
3254
3255 .toggle-icon--bar:nth-child(2) {
3256 opacity: 0;
3257 }
3258
3259 .toggle-icon--bar-bottom {
3260 -webkit-transform: rotate(-45deg);
3261 -ms-transform: rotate(-45deg);
3262 transform: rotate(-45deg);
3263 }
3264 }
3265}
3266
3267.site-header-cart {
3268 padding-top: 10px;
3269 right: $gutter-outer-small - $local-header-icon-padding;
3270 -webkit-transition: right 0.15s $ease-bubble, top 0.15s $ease-bubble;
3271 transition: right 0.15s $ease-bubble, top 0.15s $ease-bubble;
3272
3273 @include media($min: $bp-small) {
3274 right: $gutter-outer-medium - $local-header-icon-padding;
3275 }
3276
3277 @include media($min: $bp-large) {
3278 right: $gutter-outer - $local-header-icon-padding;
3279 }
3280
3281 svg {
3282 -webkit-transition: margin 0.15s;
3283 transition: margin 0.15s;
3284 }
3285}
3286
3287.site-header-cart--count {
3288 position: absolute;
3289 top: 0;
3290 right: 0;
3291 display: block;
3292 opacity: 0;
3293 -webkit-transition: opacity 0.15s linear;
3294 transition: opacity 0.15s linear;
3295
3296 &.visible {
3297 opacity: 1;
3298
3299 + svg {
3300 margin-right: 5px;
3301 }
3302 }
3303
3304 &:after {
3305 @include font($font-body, $font-family: false, $font-weight: bolder);
3306 display: block;
3307 height: 22px;
3308 min-width: 22px;
3309 padding: 3px;
3310 font-size: rem(11px);
3311 line-height: 12px;
3312 color: $color-button-text;
3313 text-align: center;
3314 text-decoration: none;
3315 background-color: $color-button-background;
3316 border: 2px solid $color-header-background;
3317 border-radius: 50%;
3318 content: attr(data-header-cart-count);
3319 }
3320}
3321
3322.announcement-bar {
3323 @include font($font-body, $font-family: false, $font-weight: bolder);
3324 display: block;
3325 padding: $gutter-outer-medium 0;
3326 font-size: $font-body-size-smaller;
3327 line-height: 1.3;
3328 color: $color-header-text;
3329 text-align: center;
3330 text-decoration: none;
3331 -webkit-transform: translate3d(0, 0, 0) scale(1);
3332 transform: translate3d(0, 0, 0) scale(1);
3333
3334 &.only-mobile {
3335 @include media($min: $bp-small) {
3336 display: none;
3337 }
3338 }
3339
3340 p {
3341 margin: 0;
3342 }
3343
3344 a {
3345 color: currentColor;
3346 }
3347
3348 @include media($min: $bp-small) {
3349 font-size: $font-body-size-small;
3350 }
3351}
3352
3353.announcement-bar-text {
3354 @extend %layout-container;
3355 display: none;
3356
3357 @include media($min: $bp-small) {
3358 display: block;
3359 }
3360}
3361
3362.announcement-bar-text-mobile {
3363 @extend %layout-container;
3364
3365 @include media($min: $bp-small) {
3366 display: none;
3367 }
3368}
3369
3370.small-promo-enabled {
3371 @include media($min: $bp-large) {
3372 margin-right: $space-xxx-large;
3373 }
3374}
3375
3376.small-promo {
3377 display: -webkit-box;
3378 display: -webkit-flex;
3379 display: -ms-flexbox;
3380 display: flex;
3381 -webkit-box-align: center;
3382 -webkit-align-items: center;
3383 -ms-flex-align: center;
3384 align-items: center;
3385 -webkit-box-pack: center;
3386 -webkit-justify-content: center;
3387 -ms-flex-pack: center;
3388 justify-content: center;
3389 -webkit-box-ordinal-group: 2;
3390 -webkit-order: 1;
3391 -ms-flex-order: 1;
3392 order: 1;
3393 font-size: $font-body-size-small;
3394 color: $color-header-text;
3395 text-decoration: none;
3396 -webkit-transform: translate3d(0, 0, 0) scale(1);
3397 transform: translate3d(0, 0, 0) scale(1);
3398
3399 @include media($max: $bp-large) {
3400 padding: {
3401 top: $space-small;
3402 right: $gutter-outer-small;
3403 bottom: $space-small - rem($header-padding-vertical-mobile);
3404 left: $gutter-outer-small;
3405 }
3406 }
3407
3408 @include media($min: $bp-large) {
3409 -webkit-box-pack: start;
3410 -webkit-justify-content: flex-start;
3411 -ms-flex-pack: start;
3412 justify-content: flex-start;
3413 margin-left: rem(35px);
3414 }
3415
3416
3417 .ie9 & {
3418 display: block;
3419 width: 100%;
3420
3421 @include media($min: $bp-large) {
3422 margin-left: 0;
3423 }
3424 }
3425}
3426@media only screen and (max-width: 1024px) {
3427 .small-promo{
3428 visibility: visible;
3429}}
3430
3431.small-promo-icon {
3432 -webkit-flex-shrink: 0;
3433 -ms-flex-negative: 0;
3434 flex-shrink: 0;
3435 height: rem(16px);
3436 margin-right: $gutter-outer-small;
3437 background-position: center;
3438 background-repeat: no-repeat;
3439 background-size: contain;
3440
3441 svg {
3442 width: 100%;
3443 height: 100%;
3444 max-width: rem(60px);
3445 max-height: rem(60px);
3446 }
3447
3448 img {
3449 height: 100%;
3450 }
3451
3452 @include media($min: $bp-large) {
3453 width: auto;
3454 height: rem(28px);
3455 margin-right: $gutter-outer-medium;
3456 }
3457}
3458
3459.small-promo-icon--svg {
3460 @include media($max: $bp-large) {
3461 width: rem(16px);
3462 }
3463}
3464
3465.small-promo-icon--custom {
3466 @include media($max: $bp-large) {
3467 width: auto;
3468 }
3469}
3470
3471.small-promo-heading,
3472.small-promo-text-desktop,
3473.small-promo-text-mobile {
3474 @include media($max: $bp-large) {
3475 font-size: $font-body-size-smaller;
3476 }
3477}
3478
3479.small-promo-heading {
3480 display: inline;
3481 margin: auto;
3482 padding-right:20px;
3483 //margin: 0;
3484 @include media($min: $bp-large) {
3485 display: block;
3486 }
3487}
3488
3489.small-promo-content {
3490 line-height: 1.3;
3491 text-align: center;
3492
3493 @include media($min: $bp-large) {
3494 max-width: 200px;
3495 text-align: left;
3496 }
3497}
3498
3499.small-promo-text-desktop {
3500 display: inline;
3501
3502 @include media($min: $bp-large) {
3503 display: block;
3504 }
3505
3506 .small-promo-text-mobile + & {
3507 @include media($max: $bp-large) {
3508 display: none;
3509 }
3510 }
3511}
3512
3513.small-promo-text-mobile {
3514 @include media($min: $bp-large) {
3515 display: none;
3516 }
3517}
3518
3519$local-font-size-small: rem(13px);
3520
3521.site-footer-wrapper {
3522 z-index: $index-footer;
3523 padding-top: $space-x-small;
3524 padding-bottom: $space-large;
3525 margin-top: -20px;
3526 color: $color-footer-text;
3527 background: $color-footer-background;
3528
3529 a {
3530 color: currentColor;
3531 text-decoration: none;
3532 -webkit-transition: color 0.1s ease;
3533 transition: color 0.1s ease;
3534
3535 &:hover {
3536 color: $color-footer-link;
3537 }
3538 }
3539
3540 .rte a {
3541 text-decoration: underline;
3542 }
3543
3544 @include media($min: $bp-large) {
3545 padding-top: ($space-xxx-large - $space-small);
3546 padding-bottom: $space-xx-large;
3547 }
3548}
3549
3550.site-footer-item {
3551 @extend %layout-container;
3552}
3553
3554.site-footer-information {
3555 @extend %clearfix;
3556 margin-top: $space-xx-large;
3557
3558 a {
3559 color: $color-footer-color-alt;
3560
3561 &:hover {
3562 color: $color-footer-link;
3563 }
3564 }
3565
3566 @include media($min: $bp-large) {
3567 margin-top: 70px;
3568 }
3569
3570 .navmenu {
3571 padding: 0;
3572 margin: 0;
3573 font-size: 0;
3574 list-style: none;
3575
3576 .navmenu-item {
3577 display: inline-block;
3578 margin-bottom: 6px;
3579 font-size: $local-font-size-small;
3580
3581 &:not(:last-child) {
3582 padding-right: 11px;
3583 margin-right: 10px;
3584 border-right: 1px solid $color-additional-accent;
3585 }
3586 }
3587 }
3588}
3589
3590.site-footer-left,
3591.site-footer-right {
3592 width: 100%;
3593
3594 @include media($min: $bp-large) {
3595 float: left;
3596 }
3597}
3598
3599.site-footer-left {
3600 font-size: $local-font-size-small;
3601 text-align: left;
3602
3603 &:not(:only-child) {
3604 @include media($min: $bp-large) {
3605 width: 60%;
3606 padding-right: $gutter-outer / 2;
3607 }
3608 }
3609}
3610
3611.site-footer-credits {
3612 margin-bottom: 0;
3613 color: $color-footer-color-alt;
3614
3615 &:not(:first-child) {
3616 margin-top: 6px;
3617 }
3618}
3619
3620.site-footer-right {
3621 @include media($min: $bp-large) {
3622 width: 40%;
3623 padding-left: $gutter-outer / 2;
3624 }
3625}
3626
3627.payment-icons {
3628 width: 100%;
3629 padding-left: 0;
3630 margin-top: $gutter-content;
3631 margin-bottom: -1 * ($gutter-content / 2);
3632 margin-left: 0;
3633 font-size: 0;
3634 list-style: none;
3635
3636 @include media($min: $bp-large) {
3637 margin-top: 0;
3638 text-align: right;
3639 }
3640}
3641
3642.payment-icons-item {
3643 display: inline-block;
3644 margin-right: $gutter-content / 2;
3645 margin-bottom: $gutter-content / 2;
3646 font-size: rem($font-body-size);
3647 vertical-align: top;
3648
3649 @include media($min: $bp-large) {
3650 margin-right: 0;
3651 margin-left: $gutter-content / 2;
3652 }
3653
3654 svg {
3655 width: 48px;
3656 height: 30px;
3657 }
3658}
3659
3660.fourohfour--container {
3661 @extend %layout-container;
3662 margin-top: $space-xx-large * 2;
3663 margin-bottom: $space-xxx-large * 3;
3664 text-align: center;
3665
3666 .fourohfour-title h1 {
3667 margin-top: 0;
3668 color: $color-heading;
3669 }
3670}
3671
3672.fourohfour--inner {
3673
3674 p {
3675 margin-bottom: $space-large;
3676 color: $color-text;
3677
3678 &:last-child {
3679 margin-bottom: 0;
3680 }
3681 }
3682
3683 .button-primary {
3684 @include button-size(large);
3685 }
3686}
3687
3688$local-max-width: 700px;
3689
3690.article-image {
3691 position: relative;
3692 width: 100%;
3693 height: 250px;
3694 margin: 0;
3695 overflow: hidden;
3696 background-position: 50% 50%;
3697 background-size: cover;
3698
3699 @include media($min: $bp-smaller) {
3700 height: 350px;
3701 }
3702
3703 @include media($min: $bp-medium) {
3704 height: 400px;
3705 }
3706
3707 @include media($min: $bp-large) {
3708 height: 500px;
3709 }
3710}
3711
3712.article--container {
3713 @extend %layout-container;
3714 position: relative;
3715 margin-top: $space-x-large;
3716
3717 @include media($max: $bp-large) {
3718 @extend %layout-container;
3719 margin-right: auto;
3720 margin-left: auto;
3721 }
3722
3723 @include media($min: $bp-smaller, $max: $bp-large) {
3724 display: -webkit-box;
3725 display: -webkit-flex;
3726 display: -ms-flexbox;
3727 display: flex;
3728
3729 .ie9 & {
3730 font-size: 0;
3731 }
3732 }
3733
3734 @include media($min: $bp-large) {
3735 padding-right: 0;
3736 padding-left: 0;
3737 }
3738}
3739
3740.article--sidebar {
3741 padding-right: $space-medium;
3742
3743 @include media($max: $bp-smaller) {
3744 display: none;
3745 }
3746
3747 @include media($min: $bp-smaller, $max: $bp-large) {
3748 width: 18%;
3749
3750 .ie9 & {
3751 display: inline-block;
3752 vertical-align: top;
3753 }
3754 }
3755
3756 @include media($min: $bp-large) {
3757 position: absolute;
3758 left: $space-large;
3759 }
3760
3761 .share-buttons {
3762 margin-top: 0;
3763
3764 .share-buttons--button {
3765 @include media($min: $bp-smaller, $max: $bp-xl) {
3766 display: block;
3767 margin-bottom: $space-xx-small;
3768 margin-left: 0 !important; //scss-lint:disable ImportantRule
3769 }
3770 }
3771 }
3772}
3773
3774.article--share-buttons {
3775 margin-top: $space-x-large;
3776
3777 @include media($min: $bp-smaller) {
3778 display: none;
3779 }
3780}
3781
3782.article--inner {
3783 margin-right: auto;
3784 margin-left: auto;
3785
3786 @include media($max: $bp-smaller) {
3787 width: 100%;
3788 }
3789
3790 @include media($min: $bp-smaller, $max: $bp-large) {
3791 width: 82%;
3792
3793 .ie9 & {
3794 display: inline-block;
3795 vertical-align: top;
3796 }
3797 }
3798
3799 @include media($min: $bp-large) {
3800 @extend %layout-container;
3801 max-width: $local-max-width;
3802 }
3803}
3804
3805.article--meta {
3806 font-size: 0;
3807 color: transparentize($color-text, 0.5);
3808}
3809
3810.article--meta-item {
3811 display: inline-block;
3812 font-size: $font-body-size;
3813
3814 @include media($max: $bp-small) {
3815 font-size: $font-body-size-small;
3816 }
3817
3818 &:nth-child(2) {
3819 padding-left: 11px;
3820 margin-left: 10px;
3821 border-left: 1px solid transparentize($color-border, 0.65);
3822
3823 @include media($max: $bp-small) {
3824 padding-left: 6px;
3825 margin-left: 5px;
3826 }
3827 }
3828}
3829
3830.article--title {
3831 margin-top: 0;
3832 margin-bottom: $space-x-large;
3833 font-size: $font-h1-size;
3834 color: $color-heading;
3835
3836 .article--meta + & {
3837 margin-top: $space-x-small;
3838 }
3839}
3840
3841.article--tags {
3842 @include font($font-body, $font-family: false, $font-weight: bolder);
3843 margin-top: $space-xx-large;
3844 font-size: $font-body-size-smaller;
3845 color: transparentize($color-text, 0.5);
3846
3847 .article--tags-title {
3848 color: $color-text;
3849 }
3850
3851 a {
3852 @extend %link--default;
3853 margin-left: $space-xxx-small;
3854 color: transparentize($color-text, 0.5);
3855
3856 &:hover {
3857 color: transparentize($color-text, 0.4);
3858 }
3859 }
3860}
3861
3862.article--pagination {
3863 @extend %clearfix;
3864 width: 100%;
3865 margin-top: $space-xxx-large;
3866 font-size: 0;
3867
3868 .article--pagination-item-left,
3869 .article--pagination-item-right {
3870 position: relative;
3871 display: inline-block;
3872 max-width: 40%;
3873 width: 100%;
3874
3875 > a {
3876 @extend %link--default;
3877 }
3878 }
3879
3880 .article--pagination-item-right {
3881 float: right;
3882 text-align: right;
3883 }
3884
3885 .article--pagination-chevron-right,
3886 .article--pagination-chevron-left {
3887 @extend %inline-chevron;
3888 margin-top: rem(8px);
3889 }
3890
3891 .article--pagination-chevron-left {
3892 margin-right: rem(5px);
3893 margin-left: 0;
3894
3895 svg {
3896 -webkit-transform: rotate(90deg);
3897 -ms-transform: rotate(90deg);
3898 transform: rotate(90deg);
3899 }
3900
3901 @include media($min: $bp-smaller) {
3902 position: absolute;
3903 left: calc(-8px - #{rem(5px)});
3904 }
3905 }
3906
3907 .article--pagination-text {
3908 @include font($font-body, $font-family: false, $font-weight: bolder);
3909 display: inline-block;
3910 width: calc(100% - (8px + #{rem(5px)}));
3911 font-size: $font-body-size;
3912 vertical-align: top;
3913 }
3914
3915 .article--pagination-title {
3916 @include font($font-body, $font-family: false, $font-style: italic);
3917 display: none;
3918 margin-top: $space-xxx-small;
3919 font-size: $font-body-size-small;
3920 line-height: 1.46;
3921 color: $color-text;
3922
3923 @include media($min: $bp-smaller) {
3924 display: block;
3925 }
3926 }
3927}
3928
3929.listcollections--container {
3930 @extend %layout-container;
3931 margin-top: $space-medium;
3932
3933 @include media($min: $bp-small) {
3934 margin-top: $space-large;
3935 }
3936}
3937
3938.listcollections--inner {
3939 @extend %clearfix;
3940}
3941
3942$local-xs-tween: 480px;
3943$local-cart-sidebar-width: 280px;
3944
3945.cart--section {
3946 @extend %layout-container;
3947}
3948
3949.cart-title {
3950 display: -webkit-box;
3951 display: -webkit-flex;
3952 display: -ms-flexbox;
3953 display: flex;
3954 -webkit-box-align: center;
3955 -webkit-align-items: center;
3956 -ms-flex-align: center;
3957 align-items: center;
3958 -webkit-box-pack: justify;
3959 -webkit-justify-content: space-between;
3960 -ms-flex-pack: justify;
3961 justify-content: space-between;
3962 margin-top: $space-large;
3963 margin-bottom: $space-large;
3964 color: $color-heading;
3965
3966 .ie9 & {
3967 @extend %clearfix;
3968 }
3969
3970 @include media($min: $bp-small) {
3971 margin-bottom: $space-x-large;
3972 }
3973
3974 @include media($min: $bp-large) {
3975 margin-top: $space-xx-large;
3976 margin-bottom: $space-xx-large;
3977 }
3978
3979 h1 {
3980 margin-top: 0;
3981 margin-bottom: 0;
3982
3983 .ie9 & {
3984 display: inline-block;
3985 vertical-align: middle;
3986 }
3987 }
3988}
3989
3990.cart-title-right,
3991.cart-title-left {
3992
3993 .ie9 & {
3994 display: inline-block;
3995 vertical-align: middle;
3996 }
3997}
3998
3999.cart-title-right {
4000 display: -webkit-box;
4001 display: -webkit-flex;
4002 display: -ms-flexbox;
4003 display: flex;
4004 -webkit-box-align: center;
4005 -webkit-align-items: center;
4006 -ms-flex-align: center;
4007 align-items: center;
4008 -webkit-flex-basis: auto;
4009 -ms-flex-preferred-size: auto;
4010 flex-basis: auto;
4011 -webkit-box-flex: 0;
4012 -webkit-flex-grow: 0;
4013 -ms-flex-positive: 0;
4014 flex-grow: 0;
4015 -webkit-flex-shrink: 0;
4016 -ms-flex-negative: 0;
4017 flex-shrink: 0;
4018
4019 .ie9 & {
4020 float: right;
4021 font-size: 0;
4022 text-align: right;
4023 }
4024}
4025
4026.cart-title-button {
4027 @include button-size(small);
4028 display: -webkit-box;
4029 display: -webkit-flex;
4030 display: -ms-flexbox;
4031 display: flex;
4032 -webkit-box-align: center;
4033 -webkit-align-items: center;
4034 -ms-flex-align: center;
4035 align-items: center;
4036
4037 @include media($min: $local-xs-tween) {
4038 @include button-size(medium);
4039 }
4040
4041 .ie9 & {
4042 display: inline-block;
4043 vertical-align: middle;
4044 }
4045
4046 svg {
4047 display: block;
4048 width: 19px;
4049 height: 18px;
4050 margin-right: 10px;
4051
4052 .ie9 & {
4053 display: inline-block;
4054 vertical-align: middle;
4055 }
4056 }
4057}
4058
4059.cart-title-total {
4060 margin-top: $space-xxx-small;
4061 font-size: rem(14px);
4062 color: transparentize($color-text, 0.4);
4063
4064 span {
4065 display: inline-block;
4066 margin-left: $space-xxx-small;
4067 color: $color-heading;
4068 }
4069}
4070
4071.cart-title-total--small {
4072 width: 100%;
4073}
4074
4075.cart-title-total--large {
4076
4077 .ie9 & {
4078 display: inline-block;
4079 vertical-align: middle;
4080 }
4081
4082 .cart-title-total {
4083 margin-top: 0;
4084 margin-right: $space-medium;
4085 text-align: right;
4086 }
4087
4088 span {
4089 display: block;
4090 margin-top: $space-xxx-small;
4091 margin-left: 0;
4092 font-size: $font-h4-size;
4093 }
4094}
4095
4096.cartitems--container {
4097 @include media($min: $bp-medium) {
4098 &.has-sidebar {
4099 display: -webkit-box;
4100 display: -webkit-flex;
4101 display: -ms-flexbox;
4102 display: flex;
4103
4104 .ie9 & {
4105 font-size: 0;
4106 }
4107 }
4108 }
4109
4110 &.has-sidebar .cartitems {
4111 .ie9 & {
4112 display: inline-block;
4113 vertical-align: top;
4114 }
4115
4116 @include media($min: $bp-medium) {
4117 width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-medium}));
4118 margin-right: $space-medium;
4119
4120 .ie9 & {
4121 display: block;
4122 }
4123 }
4124
4125 @include media($min: $bp-large) {
4126 width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-x-large}));
4127 margin-right: $space-x-large;
4128 }
4129
4130 @include media($min: $bp-xl) {
4131 width: calc(100% - (#{$local-cart-sidebar-width} + #{$space-xx-large}));
4132 margin-right: $space-xx-large;
4133 }
4134 }
4135}
4136
4137.cartitems-empty {
4138 display: -webkit-box;
4139 display: -webkit-flex;
4140 display: -ms-flexbox;
4141 display: flex;
4142 -webkit-box-align: center;
4143 -webkit-align-items: center;
4144 -ms-flex-align: center;
4145 align-items: center;
4146 -webkit-box-pack: center;
4147 -webkit-justify-content: center;
4148 -ms-flex-pack: center;
4149 justify-content: center;
4150 height: 358px;
4151 padding: $space-medium;
4152 font-size: $font-body-size;
4153 text-align: center;
4154 border: 1px solid $color-border-soft;
4155 -webkit-box-shadow: 0 1px 4px 0 rgba($color-black, 0.06);
4156 box-shadow: 0 1px 4px 0 rgba($color-black, 0.06);
4157
4158 .ie9 & {
4159 height: auto;
4160 }
4161}
4162
4163.cartitems-empty--inner {
4164
4165 p {
4166 margin-top: 0;
4167 margin-bottom: $space-medium;
4168 }
4169
4170 .button-primary {
4171 @include button-size(medium);
4172 display: -webkit-box;
4173 display: -webkit-flex;
4174 display: -ms-flexbox;
4175 display: flex;
4176 -webkit-box-align: center;
4177 -webkit-align-items: center;
4178 -ms-flex-align: center;
4179 align-items: center;
4180 -webkit-box-pack: center;
4181 -webkit-justify-content: center;
4182 -ms-flex-pack: center;
4183 justify-content: center;
4184 width: 100%;
4185
4186 svg {
4187 display: block;
4188 width: 19px;
4189 height: 18px;
4190 margin-right: 6px;
4191 margin-bottom: 1px;
4192
4193 .ie9 & {
4194 display: inline-block;
4195 vertical-align: middle;
4196 }
4197 }
4198 }
4199}
4200
4201.cart-total {
4202 margin-top: $space-x-large;
4203}
4204
4205.cart-ordernote {
4206
4207 .form-field {
4208 max-width: 450px;
4209 }
4210
4211 textarea {
4212 min-height: 118px;
4213 }
4214}
4215
4216.cart-ordernote-heading {
4217 display: block;
4218 margin-bottom: $space-x-small;
4219 color: $color-text;
4220}
4221
4222.cart-subtotal {
4223 display: table;
4224 width: 100%;
4225 padding-top: $space-large;
4226 margin-top: $space-x-large;
4227 margin-bottom: $space-small;
4228 font-size: rem(22px);
4229 color: $color-heading;
4230 border-top: 1px solid $color-border-soft;
4231
4232 span {
4233 display: table-cell;
4234 vertical-align: middle;
4235 }
4236
4237 .money {
4238 font-size: rem(28px);
4239 text-align: right;
4240 }
4241}
4242
4243.cart-shipping {
4244 margin-bottom: $space-large;
4245 color: $color-text;
4246 font-size: $font-body-size;
4247 line-height: 1.56;
4248
4249 .cart-shipping-toggle {
4250 @extend %button-reset, %link--default;
4251 display: block;
4252 line-height: 1.56;
4253 }
4254}
4255
4256.cart-shippingcalc--container {
4257 display: none;
4258 margin-bottom: $space-xxx-large;
4259
4260 &.open {
4261 display: block;
4262 }
4263}
4264
4265.cart-shippingcalc-form {
4266 margin-top: $space-large;
4267 margin-bottom: $space-large;
4268
4269 .cart-shippingcalc--inner {
4270 margin-bottom: $space-small;
4271
4272 .ie9 & {
4273 font-size: 0;
4274 }
4275
4276 @include media($min: $local-xs-tween) {
4277 display: -webkit-box;
4278 display: -webkit-flex;
4279 display: -ms-flexbox;
4280 display: flex;
4281 }
4282 }
4283
4284 .form-field {
4285 width: 100%;
4286
4287 .ie9 & {
4288 margin-bottom: $space-small;
4289
4290 &:last-child {
4291 margin-bottom: 0;
4292 }
4293 }
4294
4295 @include media($max: $local-xs-tween) {
4296 margin-bottom: $space-small;
4297
4298 &:last-child {
4299 margin-bottom: 0;
4300 }
4301 }
4302
4303 @include media($min: $local-xs-tween) {
4304 width: calc(#{percentage(1 / 3)} - #{$space-small / 2} - 2px);
4305 margin-right: $space-small;
4306
4307 &:last-child {
4308 margin-right: 0;
4309 }
4310 }
4311 }
4312
4313 .button-primary {
4314 @include button-size(medium);
4315 }
4316}
4317
4318.cart-shippingcalc-none {
4319 margin-top: 0;
4320}
4321
4322.cart-shippingcalc-response {
4323 display: none;
4324 padding: $space-medium;
4325 color: $color-text;
4326 background-color: $color-background-light;
4327
4328 &.visible {
4329 display: block;
4330 }
4331
4332 > *:first-child {
4333 margin-top: 0;
4334 }
4335
4336 > *:last-child {
4337 margin-bottom: 0;
4338 }
4339}
4340
4341.cart-shippingcalc-rates {
4342 margin-top: $space-medium;
4343
4344 &:empty {
4345 display: none;
4346 }
4347}
4348
4349.cart-checkout {
4350 text-align: center;
4351
4352 .button-primary {
4353 @include button-size(x-large);
4354 width: 100%;
4355
4356 svg {
4357 display: inline-block;
4358 width: 21px;
4359 height: 21px;
4360 margin-right: 5px;
4361 margin-bottom: 2px;
4362 vertical-align: top;
4363
4364 .ie9 & {
4365 display: inline-block;
4366 vertical-align: middle;
4367 }
4368 }
4369 }
4370
4371 .cart-continue {
4372 margin-top: $space-medium;
4373 }
4374}
4375
4376.cart-checkout-additional {
4377 margin-top: $space-medium;
4378 margin-bottom: $space-medium;
4379 text-align: center;
4380}
4381
4382.cart-continue {
4383 @extend %link--default;
4384 display: block;
4385 font-size: $font-body-size;
4386
4387 svg {
4388 position: relative;
4389 top: -1px;
4390 margin-left: 2px;
4391 -webkit-transform: rotate(-90deg);
4392 -ms-transform: rotate(-90deg);
4393 transform: rotate(-90deg);
4394
4395 .ie9 & {
4396 display: inline-block;
4397 vertical-align: middle;
4398 }
4399 }
4400}
4401
4402.cart-sidebar {
4403 width: 100%;
4404
4405 .ie9 & {
4406 display: inline-block;
4407 font-size: 0;
4408 vertical-align: top;
4409 }
4410
4411 @include media($max: $local-xs-tween) {
4412 margin-top: $space-large;
4413 }
4414
4415 @include media($min: $local-xs-tween, $max: $bp-medium) {
4416 display: -webkit-box;
4417 display: -webkit-flex;
4418 display: -ms-flexbox;
4419 display: flex;
4420 margin-top: $space-xx-large;
4421 }
4422
4423 @include media($min: $bp-medium) {
4424 width: $local-cart-sidebar-width;
4425 }
4426}
4427
4428.cart-sidebar-item {
4429 margin-bottom: $space-medium;
4430
4431 .ie9 & {
4432 font-size: $font-body-size;
4433
4434 @include media($min: $local-xs-tween, $max: $bp-medium) {
4435 display: inline-block;
4436 width: calc(50% - #{($space-medium / 2) - rem(2px)});
4437 vertical-align: top;
4438 }
4439 }
4440
4441 @include media($max: $local-xs-tween) {
4442 width: 100%;
4443 }
4444
4445 @include media($min: $local-xs-tween, $max: $bp-medium) {
4446 width: calc(50% - #{$space-medium / 2});
4447
4448 &:first-child {
4449 margin-right: $space-medium;
4450 }
4451 }
4452
4453 @include media($min: $bp-medium) {
4454 &:last-child {
4455 margin-bottom: 0;
4456 }
4457 }
4458
4459 .cart-sidebar-item-image {
4460 display: block;
4461 width: 100%;
4462 max-width: 100%;
4463 }
4464}
4465
4466.cart-sidebar-item--text {
4467 padding: $space-medium;
4468 background-color: $color-background-light;
4469
4470 > *:first-child {
4471 margin-top: 0;
4472 }
4473 > *:last-child {
4474 margin-bottom: 0;
4475 }
4476}
4477
4478.collection--section {
4479 margin-top: $space-medium;
4480
4481 @include media($min: $bp-small) {
4482 margin-top: $space-large;
4483 }
4484
4485}
4486
4487.collection--image {
4488 position: relative;
4489 margin: 0;
4490
4491 img {
4492 display: block;
4493 max-width: 100%;
4494 }
4495}
4496
4497.collection--information {
4498 margin-top: $space-large;
4499
4500 &:first-child {
4501 margin-top: 0;
4502 }
4503}
4504
4505.collection--title {
4506 margin-top: 0;
4507 margin-bottom: 0;
4508 font-size: $font-heading-large;
4509 line-height: 1.3;
4510 color: $color-heading;
4511}
4512
4513.collection--description {
4514 margin-top: $space-xx-small;
4515
4516 > *:first-child {
4517 margin-top: 0;
4518 }
4519}
4520
4521
4522/*================ #Giftcard Template ================*/
4523
4524.giftcard__apple-wallet-image {
4525 display: block;
4526 margin: 0 auto;
4527}
4528
4529/*================ Print Giftcard Styles ================*/
4530@media print {
4531 @page {
4532 margin: 0.5cm;
4533 }
4534
4535 p {
4536 orphans: 3;
4537 widows: 3;
4538 }
4539
4540 .giftcard__print-link,
4541 .giftcard__apple-wallet {
4542 display: none;
4543 }
4544}
4545
4546/*================ Custom Giftcard Styles ================*/
4547
4548.giftcard-header {
4549 padding: $space-small $space-large;
4550 color: $color-header-text;
4551 background-color: $color-header-background;
4552 text-align: center;
4553}
4554
4555.giftcard-header-logo {
4556 display: inline-block;
4557 color: currentColor;
4558 text-decoration: none;
4559}
4560
4561.giftcard-header-logo-text {
4562 display: block;
4563 width: 100%;
4564 font-size: rem($font-body-size);
4565 text-decoration: none;
4566}
4567
4568.giftcard--container {
4569 @extend %layout-container;
4570 max-width: 488px;
4571 margin-bottom: $space-xxx-large;
4572 text-align: center;
4573}
4574
4575.giftcard-title {
4576 margin-top: $space-x-large;
4577 margin-bottom: $space-x-large;
4578}
4579
4580.giftcard-message {
4581 @extend %message--base;
4582
4583 &.message--error {
4584 @extend %message--error;
4585 }
4586}
4587
4588.giftcard-qr {
4589 width: 120px;
4590 margin-right: auto;
4591 margin-left: auto;
4592}
4593
4594.giftcard-actions {
4595 margin-top: $space-medium;
4596 font-size: 0;
4597
4598 .button-secondary {
4599 margin-left: $gutter-content;
4600 }
4601}
4602
4603/*================ Gift Card image ================*/
4604.giftcard-image {
4605 position: relative;
4606 text-align: center;
4607
4608 img {
4609 position: relative;
4610 display: block;
4611 max-width: 100%;
4612 border-radius: 10px;
4613 z-index: 2;
4614 }
4615
4616 // White corner caps that overlap gift card image
4617 &::before,
4618 &::after {
4619 content: '';
4620 position: absolute;
4621 width: 47px; // asset width
4622 height: 47px; // asset width
4623 z-index: 3;
4624 }
4625
4626 &::before {
4627 background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik00NC41ODYsMUwxLDQ0LjU4NlYxMGMwLTQuOTYzLDQuMDM3LTksOS05SDQ0LjU4NiBNNDcsMEgxMEM0LjQ3NywwLDAsNC40NzcsMCwxMHYzN0w0NywwTDQ3LDB6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNNDQuNTg2LDFMMSw0NC41ODZWMTBjMC00Ljk2Myw0LjAzNy05LDktOUg0NC41ODYiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K') 0 0 no-repeat;
4628 top: -1px;
4629 left: -1px;
4630 }
4631
4632 &::after {
4633 background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE3LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB2aWV3Qm94PSIwIDAgNDcgNDciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3IDQ3IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBvcGFjaXR5PSIwLjEiPgoJCTxwYXRoIGQ9Ik0yLjQxNCw0Nkw0NiwyLjQxNFYzN2MwLDQuOTYzLTQuMDM3LDktOSw5SDIuNDE0IE0wLDQ3aDM3YzUuNTIzLDAsMTAtNC40NzcsMTAtMTBWMEwwLDQ3TDAsNDd6Ii8+Cgk8L2c+CjwvZz4KPGc+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMi40MTQsNDZMNDYsMi40MTRWMzdjMCw0Ljk2My00LjAzNyw5LTksOUgyLjQxNCIvPgoJPC9nPgo8L2c+Cjwvc3ZnPgo=') 0 0 no-repeat;
4634 bottom: -1px;
4635 right: -1px;
4636 }
4637}
4638
4639/*================ Gift card code ================*/
4640.giftcard-code {
4641 position: absolute;
4642 bottom: 20px;
4643 text-align: center;
4644 width: 100%;
4645 z-index: 5;
4646}
4647
4648.giftcard-code--medium {
4649 font-size: 0.875em;
4650}
4651
4652.giftcard-code--small {
4653 font-size: 0.75em;
4654}
4655
4656.giftcard-code--inner {
4657 display: inline-block;
4658 max-width: 450px;
4659 padding: 0.5em;
4660 vertical-align: baseline;
4661 border-radius: 4px;
4662}
4663
4664.giftcard-code-text {
4665 @include font($font-body, $font-family: false);
4666 display: inline-block;
4667 padding: 0.4em 0.5em;
4668 font-size: 1.875em;
4669 line-height: 1;
4670 text-transform: uppercase;
4671 vertical-align: baseline;
4672 background-color: $color-white;
4673 border: 1px dashed $color-border;
4674
4675 &.disabled {
4676 text-decoration: line-through;
4677 }
4678}
4679
4680/*================ Gift card amount ================*/
4681.giftcard-amount {
4682 position: absolute;
4683 top: 0;
4684 right: 0;
4685 font-size: 2.75em;
4686 line-height: 1.2;
4687 padding: 10px;
4688 z-index: 5;
4689 color: $color-white;
4690
4691 strong {
4692 display: block;
4693 }
4694}
4695
4696/*================ Tooltip ================*/
4697.giftcard-tooltip {
4698 display: block;
4699 position: absolute;
4700 top: -50%;
4701 right: 50%;
4702 margin-top: 16px;
4703 z-index: 4;
4704 text-align: center;
4705 white-space: nowrap;
4706
4707 &::before {
4708 content: '';
4709 display: block;
4710 position: absolute;
4711 left: 100%;
4712 bottom: 0;
4713 width: 0;
4714 height: 0;
4715 margin-left: -5px;
4716 margin-bottom: -5px;
4717 border-left: 8px solid transparent;
4718 border-right: 8px solid transparent;
4719 border-top: 5px solid $color-white;
4720 }
4721}
4722
4723.giftcard-tooltip-label {
4724 @include font($font-body, $font-family: false);
4725 position: relative;
4726 right: -50%;
4727 display: block;
4728 min-height: 14px;
4729 padding: 0.5em 0.75em;
4730 margin-left: 0.25em;
4731 font-size: 12px;
4732 line-height: 16px;
4733 text-decoration: none;
4734 text-shadow: none;
4735 background-color: $color-white;
4736 border: 0;
4737 border-radius: 4px;
4738
4739 small {
4740 font-size: 0.875em;
4741 letter-spacing: 0.1em;
4742 text-transform: uppercase;
4743 }
4744}
4745
4746/*================ Medium-down width ================*/
4747@media screen and (max-width: 580px) {
4748 .print-link {
4749 display: none;
4750 }
4751}
4752
4753/*================ Small width ================*/
4754@media screen and (max-width: 400px) {
4755 .giftcard-image::before,
4756 .giftcard-image::after {
4757 display: none;
4758 }
4759
4760 .giftcard-code {
4761 font-size: 0.75em;
4762 }
4763
4764 .giftcard-code--medium {
4765 font-size: 0.65em;
4766 }
4767
4768 .giftcard-code--small {
4769 font-size: 0.55em;
4770 }
4771}
4772
4773
4774/*============================================================================
4775 #Print Styles
4776==============================================================================*/
4777
4778@media print {
4779 .giftcard-image::before,
4780 .giftcard-image::after,
4781 .giftcard-tooltip {
4782 display: none;
4783 }
4784
4785 .giftcard-actions {
4786 display: none;
4787 }
4788}
4789
4790$local-max-width: 600px;
4791$local-header-height: $header-content-height + ($header-padding-vertical-mobile * 2);
4792
4793.template-password {
4794
4795 &,
4796 .site-main,
4797 .password--section {
4798 height: 100%;
4799 }
4800}
4801
4802.password--section {
4803 display: -webkit-box;
4804 display: -webkit-flex;
4805 display: -ms-flexbox;
4806 display: flex;
4807 -webkit-box-orient: vertical;
4808 -webkit-box-direction: normal;
4809 -webkit-flex-direction: column;
4810 -ms-flex-direction: column;
4811 flex-direction: column;
4812 -webkit-box-pack: justify;
4813 -webkit-justify-content: space-between;
4814 -ms-flex-pack: justify;
4815 justify-content: space-between;
4816}
4817
4818.password-page-header,
4819.password-page-content,
4820.password-page-footer {
4821 -webkit-flex-basis: auto;
4822 -ms-flex-preferred-size: auto;
4823 flex-basis: auto;
4824 -webkit-box-flex: 0;
4825 -webkit-flex-grow: 0;
4826 -ms-flex-positive: 0;
4827 flex-grow: 0;
4828 -webkit-flex-shrink: 0;
4829 -ms-flex-negative: 0;
4830 flex-shrink: 0;
4831}
4832
4833.password-mailinglist--container,
4834.password-social--container {
4835 margin-top: $space-x-large;
4836
4837 @include media($min: $bp-small) {
4838 margin-top: $space-xxx-large;
4839 }
4840}
4841
4842// Header
4843.password-page-header {
4844 width: 100%;
4845 height: $local-header-height;
4846 padding: $header-padding-vertical-mobile $gutter-outer-small;
4847 font-size: 0;
4848 color: $color-header-text;
4849 background-color: $color-header-background;
4850
4851 @include media($min: $bp-small) {
4852 padding-right: $gutter-outer-medium;
4853 padding-left: $gutter-outer-medium;
4854 }
4855
4856 @include media($min: $bp-large) {
4857 padding-right: $gutter-outer;
4858 padding-left: $gutter-outer;
4859 }
4860}
4861
4862.password-header-logo {
4863 display: inline-block;
4864 width: 50%;
4865 max-height: $header-content-height;
4866 padding-right: $gutter-content / 2;
4867 line-height: 1.1;
4868 color: currentColor;
4869 text-decoration: none;
4870 vertical-align: middle;
4871}
4872
4873.password-header-logo-image {
4874 display: block;
4875 max-width: $header-logo-image-max-width;
4876 max-height: 100%;
4877}
4878
4879.password-header-logo-text {
4880 display: block;
4881 width: 100%;
4882 font-size: rem($font-body-size);
4883 text-decoration: none;
4884}
4885
4886.password-header-login {
4887 display: inline-block;
4888 width: 50%;
4889 height: $header-content-height;
4890 padding-left: $gutter-content / 2;
4891 text-align: right;
4892 vertical-align: middle;
4893}
4894
4895.password-header-lock {
4896 display: inline-block;
4897 padding: 8px 10px;
4898 margin-top: 4px;
4899 margin-right: -10px;
4900 color: currentColor;
4901 cursor: pointer;
4902 background-color: transparent;
4903 border: 0;
4904
4905 svg {
4906 display: block;
4907 fill: currentColor;
4908 }
4909}
4910
4911// Main content
4912.password-page-content--inner {
4913 @extend %layout-container;
4914 display: -webkit-box;
4915 display: -webkit-flex;
4916 display: -ms-flexbox;
4917 display: flex;
4918 -webkit-box-orient: vertical;
4919 -webkit-box-direction: normal;
4920 -webkit-flex-direction: column;
4921 -ms-flex-direction: column;
4922 flex-direction: column;
4923 -webkit-box-pack: center;
4924 -webkit-justify-content: center;
4925 -ms-flex-pack: center;
4926 justify-content: center;
4927 max-width: $local-max-width;
4928 padding-top: $space-x-large;
4929 padding-bottom: $space-x-large;
4930 text-align: center;
4931
4932 @include media($min: $bp-small) {
4933 padding-top: $space-xxx-large;
4934 padding-bottom: $space-xxx-large;
4935 }
4936}
4937
4938.password-title {
4939 margin-top: 0;
4940 margin-bottom: $space-medium;
4941 color: $color-heading;
4942}
4943
4944.password-message {
4945 margin-bottom: 0;
4946 line-height: 1.56;
4947 color: $color-text;
4948}
4949
4950// Newsleter Signup
4951.password-mailinglist--container {
4952
4953 .password-mailinglist-title {
4954 margin-top: 0;
4955 margin-bottom: $space-medium;
4956 font-size: $font-h4-size;
4957 color: $color-heading;
4958
4959 h1 {
4960 margin-top: 0;
4961 margin-bottom: 0;
4962 }
4963 }
4964
4965 .password-mailinglist-text {
4966 font-size: $font-body-size-small;
4967 }
4968
4969 .form-fields-inline {
4970 display: table;
4971 width: 100%;
4972 max-width: calc(#{rem(520px)} * 2 / 3);
4973 margin-right: auto;
4974 margin-left: auto;
4975 }
4976
4977 .newsletter .newsletter-input {
4978 display: table-cell;
4979 width: 100%;
4980 max-width: none;
4981 padding-right: $space-x-small;
4982 vertical-align: middle;
4983 }
4984
4985 .newsletter .newsletter-submit {
4986 display: table-cell;
4987 width: auto;
4988 margin-left: 0;
4989 white-space: nowrap;
4990 vertical-align: middle;
4991 }
4992
4993 .button-primary {
4994 @include button-size(large);
4995 display: block;
4996 width: 100%;
4997
4998 @include media($max: $bp-small) {
4999 padding-right: $space-small;
5000 padding-left: $space-small;
5001 }
5002 }
5003}
5004
5005.password-social--title {
5006 @include font($font-body, $font-family: false);
5007 font-size: rem($font-body-size);
5008}
5009
5010// Footer
5011.password-page-footer {
5012 @extend %layout-container;
5013 padding-top: $space-small;
5014 padding-bottom: $space-small;
5015 text-align: center;
5016}
5017
5018.password-page-footer--item {
5019 display: block;
5020
5021 a {
5022 @extend %link--default;
5023 }
5024
5025 &:not(:first-child) {
5026 margin-top: $space-xx-small;
5027 }
5028
5029 @include media($min: $bp-smaller) {
5030 display: inline-block;
5031 margin-top: 0;
5032 }
5033}
5034
5035// Password modal
5036.passwordentry-container {
5037 display: none;
5038}
5039
5040.passwordentry-title {
5041 margin-top: 0;
5042 margin-bottom: $space-large;
5043 font-size: $font-h4-size;
5044 color: $color-heading;
5045}
5046
5047.passwordentry-contents {
5048
5049 .passwordentry-message {
5050 @extend %form-message;
5051 margin-bottom: $space-medium;
5052 }
5053
5054 .form-fields-inline {
5055 display: table;
5056 width: 100%;
5057 }
5058
5059 .passwordentry-input {
5060 display: table-cell;
5061 width: 100%;
5062 padding-right: $space-x-small;
5063 vertical-align: middle;
5064 }
5065
5066 .passwordentry-submit {
5067 display: table-cell;
5068 vertical-align: middle;
5069 }
5070
5071 .button-primary {
5072 @include button-size(large);
5073 display: block;
5074 width: 100%;
5075 white-space: nowrap;
5076
5077 @include media($max: $bp-small) {
5078 padding-right: $space-small;
5079 padding-left: $space-small;
5080 }
5081 }
5082
5083 a {
5084 @extend %link--default;
5085 }
5086}
5087
5088.passwordentry-owner {
5089 margin-top: $space-large;
5090 margin-bottom: 0;
5091 color: $color-text;
5092}
5093
5094.modal--passwordentry {
5095
5096 .modal-inner {
5097 max-width: 450px;
5098 padding: $space-large $space-medium;
5099 text-align: center;
5100 white-space: normal;
5101
5102 @include media($min: $bp-smaller) {
5103 padding: $space-xx-large;
5104 }
5105 }
5106}
5107
5108.product--container {
5109 padding-top: 20px;
5110 @extend %layout-container;
5111 //background-color: green;
5112 margin-top: $space-medium;
5113
5114 @include media($min: $bp-small) {
5115 margin-top: $space-large;
5116 }
5117
5118 @include media($max: $bp-small) {
5119 padding-right: 0;
5120 padding-left: 0;
5121 }
5122}
5123
5124.product--outer {
5125 font-size: 0;
5126}
5127
5128// Column structure
5129.product-gallery--slider,
5130.product-main {
5131 @include media($max: $bp-small) {
5132 padding-right: $gutter-outer-small;
5133 padding-left: $gutter-outer-small;
5134 }
5135}
5136
5137.product-gallery,
5138.product-form--alt,
5139.product-main {
5140 display: inline-block;
5141 width: 100%;
5142 font-size: $font-body-size;
5143 vertical-align: top;
5144}
5145
5146.product-gallery {
5147 //big image on product page
5148 top: 25%;
5149 left: 15%;
5150 position:fixed;
5151 max-height: 415px;
5152 max-width: 415px;
5153 padding: 2px;
5154 //visibility: hidden;
5155 bottom: 1000px;
5156 z-index: 300;
5157 //box-shadow: 0px 0px 1px 1px;
5158 @include media($min: $bp-small) {
5159 width: 51.5%;
5160 //position: absolute;
5161 }
5162
5163 @include media($min: $bp-large) {
5164 .layout--three-col & {
5165 width: 35%;
5166 //position: absolute;
5167 }
5168 }
5169}
5170
5171.product-main {
5172 @include media($min: $bp-small) {
5173 width: 46%;
5174 //margin-left: 2.5%;
5175 margin-left: 50%;
5176 }
5177
5178 @include media($min: $bp-large) {
5179 .layout--three-col & {
5180 width: 36.5%;
5181 //margin-left: 2.5%;
5182 margin-left: 50%;
5183 }
5184 }
5185}
5186
5187.product-description {
5188 margin-top: $space-large;
5189}
5190
5191.product-form--alt {
5192 //add cart button and buy it now
5193 width: 30%;
5194 position: fixed;
5195 margin-left: -60%;
5196 margin-top: 20%;
5197 //margin-left: 2.5%;2
5198 //margin-left: 60%;
5199 font-size: $font-body-size;
5200 z-index: 300;
5201 @include media($min: $bp-xl) {
5202 width: 22%;
5203 //margin-left: 4%;
5204 }
5205}
5206
5207.product-link {
5208 @extend %link--default;
5209 display: inline-block;
5210 margin-top: $gutter-outer;
5211}
5212
5213$local-space-small: 10px;
5214$local-space-large: 20px;
5215
5216.blog-title {
5217 margin-top: $space-x-small;
5218 margin-bottom: $space-small;
5219 color: $color-heading;
5220
5221 @include media($min: $bp-large) {
5222 margin-top: $space-large;
5223 margin-bottom: $space-small;
5224 }
5225
5226 h1,
5227 a {
5228 display: inline-block;
5229 }
5230
5231 a {
5232 padding: rem(2px) rem(10px);
5233 }
5234
5235 svg {
5236 display: block;
5237 fill: $color-link;
5238 }
5239}
5240
5241.blog--container {
5242 @extend %layout-container;
5243}
5244
5245.blog--inner {
5246 display: -webkit-box;
5247 display: -webkit-flex;
5248 display: -ms-flexbox;
5249 display: flex;
5250 -webkit-flex-wrap: wrap;
5251 -ms-flex-wrap: wrap;
5252 flex-wrap: wrap;
5253 -webkit-box-pack: start;
5254 -webkit-justify-content: flex-start;
5255 -ms-flex-pack: start;
5256 justify-content: flex-start;
5257 padding-bottom: 0;
5258
5259 .ie9 & {
5260 font-size: 0;
5261 }
5262
5263 .article--excerpt-wrapper {
5264
5265 @include media($max: $bp-smaller) {
5266 width: 100%;
5267 margin-right: 0;
5268 }
5269
5270 @include media($min: $bp-smaller) {
5271 width: calc(#{percentage(1 / 2)} - #{$local-space-small * 1 / 2});
5272 margin-right: $local-space-small;
5273 }
5274
5275 @include media($min: $bp-smaller, $max: $bp-medium) {
5276 &:nth-child(2n) {
5277 margin-right: 0;
5278 }
5279 }
5280
5281 @include media($max: $bp-small) {
5282 margin-bottom: $space-large;
5283 }
5284
5285 @include media($min: $bp-small) {
5286 margin-bottom: $space-xx-large;
5287 }
5288
5289 @include media($min: $bp-medium) {
5290 &:nth-child(3n) {
5291 margin-right: 0;
5292 }
5293 }
5294
5295 @include media($min: $bp-medium, $max: $bp-large-home) {
5296 width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
5297 }
5298
5299 @include media($min: $bp-large-home) {
5300 width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
5301 margin-right: $local-space-large;
5302 }
5303
5304 .ie9 & {
5305 display: inline-block;
5306 vertical-align: top;
5307 }
5308 }
5309}
5310
5311.blog--no-results {
5312 @extend %no-results--wrapper;
5313}
5314
5315.blog--no-results-title {
5316 @extend %no-results--title;
5317}
5318
5319.search--section {
5320 margin-top: $space-medium;
5321
5322 @include media($min: $bp-small) {
5323 margin-top: $space-large;
5324 }
5325}
5326.highlights-banners-container {
5327 @include media($max: $bp-large) {
5328 overflow-x: hidden;
5329 }
5330}
5331
5332.highlights-banners {
5333 @extend %layout-container;
5334 background-color:#ecedf3;
5335 position: relative;
5336 display: -webkit-box;
5337 display: -webkit-flex;
5338 display: -ms-flexbox;
5339 display: flex;
5340 -webkit-box-pack: center;
5341 -webkit-justify-content: center;
5342 -ms-flex-pack: center;
5343 justify-content: center;
5344 height: rem(100px);
5345 outline: 0;
5346
5347 &:before,
5348 &:after {
5349 content: '';
5350 position: absolute;
5351 top: 0;
5352 left: 0;
5353 right: calc(100% - #{$gutter-content});
5354 bottom: 0;
5355 z-index: 2;
5356 }
5357
5358 &:after {
5359 left: calc(100% - #{$gutter-content});
5360 right: 0;
5361 }
5362
5363 @include media($min: $bp-large) {
5364 height: auto;
5365 padding: {
5366 top: $gutter-content * 1.8;
5367 bottom: $gutter-content * 1.8;
5368 };
5369
5370 &:before,
5371 &:after {
5372 display: none;
5373 }
5374 }
5375}
5376
5377.highlights-banners-block {
5378 top: rem(30px);
5379 display: -webkit-box;
5380 display: -webkit-flex;
5381 display: -ms-flexbox;
5382 display: flex;
5383 -webkit-box-align: center;
5384 -webkit-align-items: center;
5385 -ms-flex-align: center;
5386 align-items: center;
5387 width: 100%;
5388 color: $color-text;
5389 text-decoration: none;
5390
5391 .highlight-banners-count-2 & {
5392 width: rem(500px);
5393
5394 @include media($min: $bp-large) {
5395 width: 33%;
5396 }
5397 }
5398
5399 .highlight-banners-count-3 & {
5400 width: rem(333px);
5401
5402 @include media($min: $bp-large) {
5403 width: 25%;
5404 }
5405 }
5406
5407 .highlight-banners-count-4 & {
5408 width: rem(250px);
5409
5410 @include media($min: $bp-large) {
5411 width: 25%;
5412 }
5413 }
5414}
5415
5416.highlights-banners-icon {
5417 width: rem(36px);
5418 height: rem(36px);
5419 margin-right: $gutter-content;
5420 background-position: center;
5421 background-size: contain;
5422 background-repeat: no-repeat;
5423
5424 @include media($min: $bp-smaller) {
5425 width: rem(40px);
5426 height: rem(40px);
5427 }
5428
5429 @include media($min: $bp-large) {
5430 width: auto;
5431 height: rem(46px);
5432 }
5433
5434 svg {
5435 width: 100%;
5436 height: 100%;
5437 max-width: rem(46px);
5438 max-height: rem(46px);
5439 }
5440
5441 .highlights-banners-custom-icon {
5442 width: auto;
5443 height: 100%;
5444 }
5445}
5446
5447.highlights-banners-text {
5448 width: calc(100% - #{rem(30px)});
5449 min-width: 0;
5450 padding-right: $gutter-content;
5451 font-size: $font-body-size-smaller;
5452 line-height: 1.4;
5453
5454 @include media($min: $bp-medium) {
5455 width: calc(100% - #{rem(50px)});
5456 }
5457
5458 @include media($min: $bp-large) {
5459 font-size: $font-body-size;
5460 }
5461}
5462
5463.highlights-banners-heading {
5464 margin: 0;
5465}
5466
5467.flickity-viewport,
5468.flickity-slider {
5469 width: 100%;
5470}
5471
5472$local-slideshow-small: 440px;
5473$local-slideshow-medium: 500px;
5474$local-slideshow-large: 560px;
5475
5476.slideshow {
5477 position: relative;
5478 overflow: hidden;
5479
5480 .flickity-viewport {
5481 -webkit-transition: height 0.2s linear;
5482 transition: height 0.2s linear;
5483 }
5484
5485 .flickity-slider {
5486 height: 100%;
5487 }
5488
5489 .flickity-page-dots {
5490 bottom: $gutter-content;
5491
5492 @include media($max: $bp-small) {
5493 bottom: auto;
5494 }
5495
5496 .dot {
5497 width: 5px;
5498 height: 5px;
5499 margin: 0 4px;
5500 -webkit-transition: background 0.3s;
5501 transition: background 0.3s;
5502
5503 @include media($min: $bp-small) {
5504 width: 7px;
5505 height: 7px;
5506 margin: 0 7.5px;
5507 }
5508 }
5509 }
5510
5511 .flickity-prev-next-button {
5512 opacity: 1;
5513
5514 svg {
5515 -webkit-transform: scale(1);
5516 -ms-transform: scale(1);
5517 transform: scale(1);
5518 -webkit-transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
5519 transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
5520 transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s;
5521 transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
5522 }
5523
5524 @include media($max: $bp-small) {
5525 display: none;
5526 }
5527
5528 &:disabled {
5529 cursor: default;
5530 opacity: 0.25;
5531 }
5532
5533 &:hover {
5534 &:not([disabled]) {
5535 opacity: 1;
5536
5537 svg {
5538 -webkit-transform: scale(1.2);
5539 -ms-transform: scale(1.2);
5540 transform: scale(1.2);
5541 }
5542 }
5543 }
5544
5545 &.previous {
5546 left: 255px;
5547 }
5548
5549 &.next {
5550 right: 255px;
5551 }
5552
5553 &:active {
5554 &:not([disabled]) {
5555 opacity: 0.5;
5556 }
5557 }
5558 }
5559
5560 &.flickity-enabled:focus {
5561 outline: none;
5562 }
5563}
5564
5565.slideshow-height-small {
5566 height: 42vw;
5567
5568 @include media($min: $bp-large) {
5569 height: $local-slideshow-small;
5570 }
5571}
5572
5573.slideshow-height-medium {
5574 height: 48vw;
5575
5576 @include media($min: $bp-large) {
5577 height: $local-slideshow-medium;
5578 }
5579}
5580
5581.slideshow-height-large {
5582 height: 54vw;
5583
5584 @include media($min: $bp-large) {
5585 height: $local-slideshow-large;
5586 }
5587}
5588
5589.slideshow-height-fullscreen {
5590 height: 100vh;
5591}
5592
5593.slideshow-slide:not(.slideshow-height-original) {
5594 height: auto;
5595}
5596
5597.slideshow-slide {
5598 width: 100%;
5599
5600 .flickity-enabled &,
5601 &:nth-of-type(1) {
5602 display: block;
5603 }
5604
5605 &.slideshow-height-fullscreen {
5606 height: 100%;
5607 }
5608}
5609
5610.slideshow-background {
5611 position: relative;
5612 //width: 1440px;
5613 //height: 336px;
5614 max-width: 1440px;
5615 height: 100%;
5616 margin: auto;
5617 font-size: .0;
5618 background-position: center;
5619 background-repeat: no-repeat;
5620 //background-size: 1440px 336px;
5621 background-size: contain;
5622
5623}
5624
5625
5626.slideshow-slide-overlay {
5627 position: absolute;
5628 top: 0;
5629 right: 0;
5630 bottom: 0;
5631 left: 0;
5632
5633 @include media($max: $bp-small) {
5634 .slideshow-height-small &,
5635 .slideshow-height-medium &,
5636 .slideshow-height-large & {
5637 display: none;
5638 }
5639 }
5640}
5641
5642.slideshow-slide-content {
5643 position: relative;
5644 z-index: 1;
5645 width: 100%;
5646 max-width: 100%;
5647 margin: $gutter-outer * 2 auto;
5648 text-align: center;
5649
5650 .slideshow-height-fullscreen + & {
5651 position: absolute;
5652 top: 50%;
5653 left: 50%;
5654 margin: 0;
5655 -webkit-transform: translate(-50%, -50%);
5656 -ms-transform: translate(-50%, -50%);
5657 transform: translate(-50%, -50%);
5658 }
5659
5660 @include media($max: $bp-small) {
5661 text-align: center;
5662 }
5663 @include media($min: $bp-small) {
5664 position: absolute;
5665 top: 50%;
5666 left: 50%;
5667 margin: 0;
5668 -webkit-transform: translate(-50%, -50%);
5669 -ms-transform: translate(-50%, -50%);
5670 transform: translate(-50%, -50%);
5671 &.text-align-left {
5672 padding-right: 30%;
5673 padding-left: 6.25em;
5674 text-align: left;
5675 }
5676 &.text-align-left .slideshow-button {
5677 margin-left: 0;
5678 }
5679 &.text-align-center {
5680 text-align: center;
5681 }
5682 &.text-align-right {
5683 padding-right: 6.25em;
5684 padding-left: 30%;
5685 text-align: right;
5686 }
5687 &.text-align-right .slideshow-button {
5688 margin-right: 0;
5689 }
5690 }
5691}
5692
5693.slideshow-link {
5694 color: $color-heading;
5695 text-decoration: none;
5696}
5697
5698.slideshow-slide-heading {
5699 margin-top: 0;
5700 margin-bottom: 0;
5701 font-size: $font-h1-size;
5702 line-height: 1.2;
5703
5704 @include media($min: $bp-small) {
5705 font-size: $font-heading-large;
5706 }
5707}
5708
5709.slideshow-slide-text {
5710 margin-top: $space-x-small;
5711 margin-bottom: 0;
5712 font-size: $font-h5-size;
5713 line-height: 1.4;
5714
5715 @include media($min: $bp-large) {
5716 font-size: $font-h4-size;
5717 }
5718}
5719
5720.slideshow-button {
5721 margin: $space-medium $gutter-outer-small / 2 0;
5722
5723 @include media($min: $bp-small) {
5724 @include button-size(medium);
5725 }
5726
5727 @include media($min: $bp-large) {
5728 margin-top: $font-heading-medium;
5729 @include button-size(large);
5730 }
5731}
5732
5733// Layouts 1 through 5 heights (Small, Medium, Large)
5734$local-mosaic-heights-layout: (
5735 (440px, 540px, 640px),
5736 (440px, 540px, 640px),
5737 (560px, 660px, 760px),
5738 (860px, 960px, 1060px),
5739 (860px, 960px, 1060px)
5740);
5741
5742$local-space-small: 10px;
5743$local-space-large: 20px;
5744
5745.promo-mosaic--container {
5746 @extend %layout-container;
5747 border-radius: 3px 4px 4px 3px;
5748 padding-top: 30px;
5749 outline: 20px solid #eaeded;
5750 //background-color: #ededed;
5751 //background-color: #000;
5752}
5753.promo-mosaic--container:after {
5754
5755}
5756.promo-mosaic--inner {
5757 -webkit-transition: height 0.2s $ease-out-ripple;
5758 transition: height 0.2s $ease-out-ripple;
5759 //padding-bottom: 100px;
5760 .promo-mosaic--height-small & {
5761 @for $i from 1 through 5 {
5762 &.promo-mosaic--layout-#{$i} {
5763 @include media($min: $bp-small) {
5764 height: (nth(nth($local-mosaic-heights-layout, $i), 1) * 0.85);
5765 }
5766
5767 @include media($min: $bp-medium) {
5768 height: nth(nth($local-mosaic-heights-layout, $i), 1);
5769 }
5770
5771 &.promo-mosaic--maintain-aspect-ratio {
5772 @include media($min: $bp-small, $max: $max-width) {
5773 height: vw(nth(nth($local-mosaic-heights-layout, $i), 1));
5774 }
5775 }
5776 }
5777 }
5778 }
5779
5780 .promo-mosaic--height-medium & {
5781 @for $i from 1 through 5 {
5782 &.promo-mosaic--layout-#{$i} {
5783 @include media($min: $bp-small) {
5784 height: (nth(nth($local-mosaic-heights-layout, $i), 2) * 0.85);
5785 }
5786
5787 @include media($min: $bp-medium) {
5788 height: nth(nth($local-mosaic-heights-layout, $i), 2);
5789 }
5790
5791 &.promo-mosaic--maintain-aspect-ratio {
5792 @include media($min: $bp-small, $max: $max-width) {
5793 height: vw(nth(nth($local-mosaic-heights-layout, $i), 2));
5794 }
5795 }
5796 }
5797 }
5798 }
5799
5800 .promo-mosaic--height-large & {
5801 @for $i from 1 through 5 {
5802 &.promo-mosaic--layout-#{$i} {
5803 @include media($min: $bp-small) {
5804 height: (nth(nth($local-mosaic-heights-layout, $i), 3) * 0.85);
5805 }
5806
5807 @include media($min: $bp-medium) {
5808 height: nth(nth($local-mosaic-heights-layout, $i), 3);
5809 }
5810
5811 &.promo-mosaic--maintain-aspect-ratio {
5812 @include media($min: $bp-small, $max: $max-width) {
5813 height: vw(nth(nth($local-mosaic-heights-layout, $i), 3));
5814 }
5815 }
5816 }
5817 }
5818 }
5819
5820 .ie9 & { @extend %clearfix; }
5821}
5822
5823.promo-mosaic--column {
5824 width: 100%;
5825
5826 @include media($min: $bp-small) {
5827 &:first-child {
5828 padding-right: $local-space-small / 2;
5829 }
5830
5831 &:last-child {
5832 padding-left: $local-space-small / 2;
5833 }
5834
5835 &:only-child {
5836 padding-right: 0;
5837 padding-left: 0;
5838 }
5839 }
5840
5841 @include media($min: $bp-large-home) {
5842 &:first-child {
5843 padding-right: $local-space-large / 2;
5844 }
5845
5846 &:last-child {
5847 padding-left: $local-space-large / 2;
5848 }
5849
5850 &:only-child {
5851 padding-right: 0;
5852 padding-left: 0;
5853 }
5854 }
5855
5856 &.promo-mosaic--column-wide {
5857 @include media($min: $bp-small) {
5858 width: percentage(2 / 3);
5859 }
5860 }
5861
5862 &.promo-mosaic--column-narrow {
5863 @include media($min: $bp-small) {
5864 width: percentage(1 / 3);
5865 }
5866 }
5867
5868 .ie9 & {
5869 float: left;
5870 }
5871}
5872
5873@include media($min: $bp-small, $max: $bp-large) {
5874 .promo-mosaic--inner.promo-mosaic--layout-3.promo-mosaic--maintain-aspect-ratio {
5875 //layout 3
5876 .promo-mosaic--row {
5877 display: -webkit-box;
5878 display: -webkit-flex;
5879 display: -ms-flexbox;
5880 display: flex;
5881 -webkit-flex-wrap: wrap;
5882 -ms-flex-wrap: wrap;
5883 flex-wrap: wrap;
5884
5885 }
5886
5887 .promo-mosaic--column {
5888 width: 100%;
5889
5890 &.promo-mosaic--column-narrow {
5891 display: -webkit-box;
5892 display: -webkit-flex;
5893 display: -ms-flexbox;
5894 display: flex;
5895 -webkit-box-align: end;
5896 -webkit-align-items: flex-end;
5897 -ms-flex-align: end;
5898 align-items: flex-end;
5899
5900 .promo-block:nth-of-type(1) {
5901 margin-right: $local-space-small;
5902 }
5903 }
5904 }
5905
5906 .promo-mosaic--height-small & {
5907 height: auto;
5908
5909 .promo-mosaic--column-wide .promo-block--content {
5910 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
5911 }
5912
5913 .promo-mosaic--column-narrow .promo-block--content {
5914 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 2);
5915 }
5916 }
5917
5918 .promo-mosaic--height-medium & {
5919 height: auto;
5920
5921 .promo-mosaic--column-wide .promo-block--content {
5922 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
5923 }
5924
5925 .promo-mosaic--column-narrow .promo-block--content {
5926 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 2);
5927 }
5928 }
5929
5930 .promo-mosaic--height-large & {
5931 height: auto;
5932
5933 .promo-mosaic--column-wide .promo-block--content {
5934 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
5935 }
5936
5937 .promo-mosaic--column-narrow .promo-block--content {
5938 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 2);
5939 }
5940 }
5941 }
5942
5943 .promo-mosaic--inner.promo-mosaic--layout-4.promo-mosaic--maintain-aspect-ratio {
5944 .promo-mosaic--row {
5945 display: -webkit-box;
5946 display: -webkit-flex;
5947 display: -ms-flexbox;
5948 display: flex;
5949 -webkit-flex-wrap: wrap;
5950 -ms-flex-wrap: wrap;
5951 flex-wrap: wrap;
5952 -webkit-box-pack: justify;
5953 -webkit-justify-content: space-between;
5954 -ms-flex-pack: justify;
5955 justify-content: space-between;
5956 }
5957
5958 .promo-mosaic--column {
5959 width: 100%;
5960
5961
5962
5963 &.promo-mosaic--column-narrow {
5964 width: 50%;
5965 }
5966
5967 &:nth-of-type(2) {
5968 width: calc(50% - #{$local-space-small / 2});
5969 }
5970 }
5971
5972 .promo-mosaic--height-small & {
5973 height: auto;
5974 padding-top: 20px;
5975
5976 .promo-mosaic--column-wide .promo-block--content {
5977 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
5978 padding-top: 20px;
5979 }
5980
5981 .promo-mosaic--column-narrow .promo-block--content {
5982 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
5983padding-top: 20px;
5984 }
5985 }
5986
5987 .promo-mosaic--height-medium & {
5988 height: auto;
5989 padding-top: 20px;
5990
5991 .promo-mosaic--column-wide .promo-block--content {
5992 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
5993 padding-top: 20px;
5994 }
5995
5996 .promo-mosaic--column-narrow .promo-block--content {
5997 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
5998padding-top: 20px;
5999 }
6000 }
6001
6002 .promo-mosaic--height-large & {
6003 height: auto;
6004 padding-top: 20px;
6005
6006 .promo-mosaic--column-wide .promo-block--content {
6007 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
6008 padding-top: 20px;
6009 }
6010
6011 .promo-mosaic--column-narrow .promo-block--content {
6012 height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
6013padding-top: 20px;
6014 }
6015 }
6016 }
6017}
6018
6019.promo-block--content.promo-block--expanded,
6020.promo-block--content.animating-in,
6021.promo-block--content.promo-block--expanded:not(.animating-out) {
6022 .promo-mosaic--column-narrow & {
6023 @include media($max: $bp-small) {
6024 .promo-mosaic--maintain-aspect-ratio & {
6025 height: auto;
6026 }
6027
6028 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-2 & {
6029 .promo-mosaic--height-small & {
6030 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 1))} * 3);
6031 }
6032
6033 .promo-mosaic--height-medium & {
6034 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 2))} * 3);
6035 }
6036
6037 .promo-mosaic--height-large & {
6038 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 3))} * 3);
6039 }
6040 }
6041
6042 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-3 & {
6043 .promo-mosaic--height-small & {
6044 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
6045 }
6046
6047 .promo-mosaic--height-medium & {
6048 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 2))} * 1.5);
6049 }
6050
6051 .promo-mosaic--height-large & {
6052 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 3))} * 1.5);
6053 }
6054 }
6055
6056 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-4 & {
6057 .promo-mosaic--height-small & {
6058 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} * 1.5);
6059 }
6060
6061 .promo-mosaic--height-medium & {
6062 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} * 1.5);
6063 }
6064
6065 .promo-mosaic--height-large & {
6066 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} * 1);
6067 }
6068 }
6069
6070 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-5 & {
6071 .promo-mosaic--height-small & {
6072 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 1))} * 1);
6073 }
6074
6075 .promo-mosaic--height-medium & {
6076 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 2))} * 1);
6077 }
6078
6079 .promo-mosaic--height-large & {
6080 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 3))} * 1);
6081 }
6082 }
6083 }
6084 }
6085
6086 .promo-mosaic--column-wide & {
6087 @include media($max: $bp-small) {
6088 .promo-mosaic--maintain-aspect-ratio & {
6089 height: auto;
6090 }
6091
6092 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-2 & {
6093 .promo-mosaic--height-small & {
6094 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 1))} * 1.5);
6095 }
6096
6097 .promo-mosaic--height-medium & {
6098 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 2))} * 1.5);
6099 }
6100
6101 .promo-mosaic--height-large & {
6102 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 2), 3))} * 1.5);
6103 }
6104 }
6105
6106 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-3 & {
6107 .promo-mosaic--height-small & {
6108 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 1))} * 1.5);
6109 }
6110
6111 .promo-mosaic--height-medium & {
6112 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 2))} * 1.5);
6113 }
6114
6115 .promo-mosaic--height-large & {
6116 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 3), 3))} * 1.5);
6117 }
6118 }
6119
6120 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-4 & {
6121 .promo-mosaic--height-small & {
6122 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 1))} / 1.33);
6123 }
6124
6125 .promo-mosaic--height-medium & {
6126 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 2))} / 1.33);
6127 }
6128
6129 .promo-mosaic--height-large & {
6130 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 4), 3))} / 1.33);
6131 }
6132 }
6133
6134 .promo-mosaic--maintain-aspect-ratio.promo-mosaic--layout-5 & {
6135 .promo-mosaic--height-small & {
6136 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 1))} / 1.33);
6137 }
6138
6139 .promo-mosaic--height-medium & {
6140 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 2))} / 1.33);
6141 }
6142
6143 .promo-mosaic--height-large & {
6144 min-height: calc(#{vw(nth(nth($local-mosaic-heights-layout, 5), 3))} / 1.33);
6145 }
6146 }
6147 }
6148 }
6149}
6150
6151// Layout 1
6152.promo-mosaic--layout-1 {
6153 .promo-block {
6154 @include media($min: $bp-small) {
6155 .promo-mosaic--height-small & {
6156 height: nth(nth($local-mosaic-heights-layout, 1), 1) * 0.85;
6157
6158 &.promo-mosaic--maintain-aspect-ratio {
6159 @include media($min: $bp-small, $max: $max-width) {
6160 height: vw(nth(nth($local-mosaic-heights-layout, 1), 1));
6161 }
6162 }
6163 }
6164
6165 .promo-mosaic--height-medium & {
6166 height: nth(nth($local-mosaic-heights-layout, 1), 2) * 0.85;
6167
6168 &.promo-mosaic--maintain-aspect-ratio {
6169 @include media($min: $bp-small, $max: $max-width) {
6170 height: vw(nth(nth($local-mosaic-heights-layout, 1), 2));
6171 }
6172 }
6173 }
6174
6175 .promo-mosaic--height-large & {
6176 height: nth(nth($local-mosaic-heights-layout, 1), 3) * 0.85;
6177
6178 &.promo-mosaic--maintain-aspect-ratio {
6179 @include media($min: $bp-small, $max: $max-width) {
6180 height: vw(nth(nth($local-mosaic-heights-layout, 1), 3));
6181 }
6182 }
6183 }
6184 }
6185
6186 @include media($min: $bp-medium) {
6187 .promo-mosaic--height-small & {
6188 height: nth(nth($local-mosaic-heights-layout, 1), 1);
6189 }
6190
6191 .promo-mosaic--height-medium & {
6192 height: nth(nth($local-mosaic-heights-layout, 1), 2);
6193 }
6194
6195 .promo-mosaic--height-large & {
6196 height: nth(nth($local-mosaic-heights-layout, 1), 3);
6197 }
6198 }
6199 }
6200}
6201
6202// Layout 2
6203.promo-mosaic--layout-2 {
6204 @include media($min: $bp-small) {
6205 .promo-mosaic--row {
6206 display: -webkit-box;
6207 display: -webkit-flex;
6208 display: -ms-flexbox;
6209 display: flex;
6210 -webkit-box-align: stretch;
6211 -webkit-align-items: stretch;
6212 -ms-flex-align: stretch;
6213 align-items: stretch;
6214 -webkit-box-orient: horizontal;
6215 -webkit-box-direction: normal;
6216 -webkit-flex-direction: row;
6217 -ms-flex-direction: row;
6218 flex-direction: row;
6219 }
6220
6221 .promo-block,
6222 .promo-mosaic--row,
6223 .promo-mosaic--column {
6224 height: 100%;
6225 }
6226 }
6227}
6228
6229// Layout 3
6230.promo-mosaic--layout-3 {
6231
6232 @include media($min: $bp-small) {
6233 .promo-mosaic--row {
6234 display: -webkit-box;
6235 display: -webkit-flex;
6236 display: -ms-flexbox;
6237 display: flex;
6238 -webkit-box-align: stretch;
6239 -webkit-align-items: stretch;
6240 -ms-flex-align: stretch;
6241 align-items: stretch;
6242 -webkit-box-orient: horizontal;
6243 -webkit-box-direction: normal;
6244 -webkit-flex-direction: row;
6245 -ms-flex-direction: row;
6246 flex-direction: row;
6247 height: 100%;
6248 }
6249
6250 .promo-mosaic--column,
6251 .promo-mosaic--column-wide .promo-block {
6252 height: 100%;
6253 }
6254 }
6255
6256 .promo-mosaic--column-narrow {
6257 .promo-block {
6258 @include media($min: $bp-small) {
6259 height: calc(50% - #{$local-space-small / 2});
6260
6261 &:last-child {
6262 margin-top: $local-space-small;
6263 }
6264 }
6265
6266 @include media($min: $bp-large-home) {
6267 height: calc(50% - #{$local-space-large / 2});
6268
6269 &:last-child {
6270 margin-top: $local-space-large;
6271 }
6272 }
6273 }
6274 }
6275}
6276
6277// Layout 4
6278.promo-mosaic--layout-4 {
6279
6280 .promo-mosaic--row {
6281 @include media($min: $bp-small) {
6282 display: -webkit-box;
6283 display: -webkit-flex;
6284 display: -ms-flexbox;
6285 display: flex;
6286 -webkit-box-align: stretch;
6287 -webkit-align-items: stretch;
6288 -ms-flex-align: stretch;
6289 align-items: stretch;
6290 -webkit-box-orient: horizontal;
6291 -webkit-box-direction: normal;
6292 -webkit-flex-direction: row;
6293 -ms-flex-direction: row;
6294 flex-direction: row;
6295 -webkit-flex-wrap: wrap;
6296 -ms-flex-wrap: wrap;
6297 flex-wrap: wrap;
6298 height: calc(50% - #{$local-space-small / 2});
6299
6300 &:last-child {
6301 margin-top: $local-space-small;
6302 }
6303 }
6304
6305 @include media($min: $bp-large-home) {
6306 height: calc(50% - #{$local-space-large / 2});
6307
6308 &:last-child {
6309 margin-top: $local-space-large;
6310 }
6311 }
6312 }
6313
6314 .promo-block,
6315 .promo-mosaic--column {
6316 @include media($min: $bp-small) {
6317 height: 100%;
6318 }
6319 }
6320
6321 .promo-mosaic--column:nth-of-type(1),
6322 .promo-mosaic--column:nth-of-type(3) {
6323 @include media($min: $bp-small) {
6324 padding-right: $local-space-small;
6325 }
6326
6327 @include media($min: $bp-large-home) {
6328 padding-right: $local-space-large;
6329 }
6330 }
6331
6332 &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(1),
6333 &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(3) {
6334 @include media($min: $bp-large-home) {
6335 padding-right: $local-space-large;
6336 }
6337 }
6338
6339 &.promo-mosaic--inner.promo-mosaic--maintain-aspect-ratio .promo-mosaic--column:nth-of-type(3) {
6340 @include media($min: $bp-small, $max: $bp-large) {
6341 width: calc(50% - #{$local-space-small / 2});
6342 }
6343 }
6344
6345 .promo-mosaic--column:nth-of-type(4) {
6346 padding-left: 0;
6347 }
6348
6349 .promo-mosaic--column:nth-of-type(1),
6350 .promo-mosaic--column:nth-of-type(2) {
6351 margin-bottom: $local-space-small;
6352
6353 @include media($min: $bp-large-home) {
6354 margin-bottom: $local-space-large;
6355 }
6356 }
6357}
6358
6359// Layout 5
6360.promo-mosaic--layout-5 {
6361 .promo-mosaic--row {
6362 @include media($min: $bp-small) {
6363 display: -webkit-box;
6364 display: -webkit-flex;
6365 display: -ms-flexbox;
6366 display: flex;
6367 -webkit-box-align: stretch;
6368 -webkit-align-items: stretch;
6369 -ms-flex-align: stretch;
6370 align-items: stretch;
6371 -webkit-box-orient: horizontal;
6372 -webkit-box-direction: normal;
6373 -webkit-flex-direction: row;
6374 -ms-flex-direction: row;
6375 flex-direction: row;
6376 }
6377 }
6378
6379 .promo-mosaic--row,
6380 .promo-mosaic--column {
6381 height: 100%;
6382 }
6383
6384 .promo-mosaic--column-wide {
6385
6386 .promo-block {
6387 @include media($min: $bp-small) {
6388 height: calc(50% - #{$local-space-small / 2});
6389
6390 &:last-child {
6391 margin-top: $local-space-small;
6392 }
6393 }
6394
6395 @include media($min: $bp-large-home) {
6396 height: calc(50% - #{$local-space-large / 2});
6397
6398 &:last-child {
6399 margin-top: $local-space-large;
6400 }
6401 }
6402 }
6403 }
6404
6405 .promo-mosaic--column-narrow {
6406 .promo-block {
6407 @include media($min: $bp-small) {
6408 height: calc(#{percentage(1 / 3)} - #{$local-space-small * (2 / 3)});
6409
6410 &:not(:first-child) {
6411 margin-top: $local-space-small;
6412 }
6413 }
6414
6415 @include media($min: $bp-large-home) {
6416 height: calc(#{percentage(1 / 3)} - #{$local-space-large * (2 / 3)});
6417
6418 &:not(:first-child) {
6419 margin-top: $local-space-large;
6420 }
6421 }
6422 }
6423 }
6424}
6425
6426// Block heights (Small, Medium, Large)
6427$local-grid-block-heights: (300px, 375px, 450px);
6428
6429$local-space-small: 10px;
6430$local-space-large: 20px;
6431
6432.promo-grid--container {
6433 @extend %layout-container;
6434 padding-top: 30px;
6435 //background-color: #ededed;
6436 background-color: #FFF;
6437 outline: 20px solid #eaeded;
6438}
6439
6440.promo-grid--inner {
6441 width: 100%;
6442
6443 .ie9 & { @extend %clearfix; }
6444
6445 @include media($min: $bp-small) {
6446 display: -webkit-box;
6447 display: -webkit-flex;
6448 display: -ms-flexbox;
6449 display: flex;
6450 -webkit-box-align: stretch;
6451 -webkit-align-items: stretch;
6452 -ms-flex-align: stretch;
6453 align-items: stretch;
6454 -webkit-box-orient: horizontal;
6455 -webkit-box-direction: normal;
6456 -webkit-flex-direction: row;
6457 -ms-flex-direction: row;
6458 flex-direction: row;
6459 -webkit-flex-wrap: wrap;
6460 -ms-flex-wrap: wrap;
6461 flex-wrap: wrap;
6462 -webkit-box-pack: justify;
6463 -webkit-justify-content: space-between;
6464 -ms-flex-pack: justify;
6465 justify-content: space-between;
6466 }
6467
6468 .promo-block {
6469
6470 @include media($min: $bp-small) {
6471 -webkit-flex-shrink: 0;
6472 -ms-flex-negative: 0;
6473 flex-shrink: 0;
6474 margin-top: $local-space-small;
6475
6476 .ie9 & {
6477 float: left;
6478 }
6479
6480 &.promo-grid--half-width {
6481 -webkit-box-flex: 0;
6482 -webkit-flex-grow: 0;
6483 -ms-flex-positive: 0;
6484 flex-grow: 0;
6485 width: calc(50% - #{$local-space-small / 2});
6486
6487 &:nth-child(-n + 2) {
6488 margin-top: 0;
6489 }
6490
6491 .ie9 & {
6492 &.promo-block--right {
6493 margin-left: $local-space-small;
6494 }
6495 }
6496 }
6497
6498 &.promo-grid--full-width {
6499 -webkit-box-flex: 1;
6500 -webkit-flex-grow: 1;
6501 -ms-flex-positive: 1;
6502 flex-grow: 1;
6503 width: 100%;
6504
6505 &:first-child {
6506 margin-top: 0;
6507
6508 + .promo-grid--half-width {
6509 margin-top: $local-space-small;
6510 }
6511 }
6512 }
6513 }
6514
6515 @include media($min: $bp-large-home) {
6516 margin-top: $local-space-large;
6517
6518 &.promo-grid--half-width {
6519 width: calc(50% - #{$local-space-large / 2});
6520
6521 &:nth-child(-n + 2) {
6522 margin-top: 0;
6523 }
6524
6525 .ie9 & {
6526 &.promo-block--right {
6527 margin-left: $local-space-large;
6528 }
6529 }
6530 }
6531
6532 &.promo-grid--full-width {
6533
6534 &:first-child {
6535 margin-top: 0;
6536
6537 + .promo-grid--half-width {
6538 margin-top: $local-space-large;
6539 }
6540 }
6541 }
6542 }
6543
6544 .promo-grid--height-small & {
6545 @include media($min: $bp-small) {
6546 height: nth($local-grid-block-heights, 1) * 0.85;
6547 }
6548
6549 @include media($min: $bp-medium) {
6550 height: nth($local-grid-block-heights, 1);
6551 }
6552
6553 &.promo-mosaic--maintain-aspect-ratio {
6554 @include media($min: $bp-small, $max: $max-width) {
6555 height: vw(nth($local-grid-block-heights, 1));
6556 }
6557
6558 .promo-block--content.promo-block--expanded,
6559 .promo-block--content.animating-in {
6560 @include media($max: $bp-small) {
6561 height: calc(#{vw(nth($local-grid-block-heights, 1))} * 2);
6562 }
6563 }
6564 }
6565 }
6566
6567 .promo-grid--height-medium & {
6568 @include media($min: $bp-small) {
6569 height: nth($local-grid-block-heights, 2) * 0.85;
6570 }
6571
6572 @include media($min: $bp-medium) {
6573 height: nth($local-grid-block-heights, 2);
6574 }
6575
6576 &.promo-mosaic--maintain-aspect-ratio {
6577 @include media($min: $bp-small, $max: $max-width) {
6578 height: vw(nth($local-grid-block-heights, 2));
6579 }
6580
6581 .promo-block--content.promo-block--expanded,
6582 .promo-block--content.animating-in {
6583 @include media($max: $bp-small) {
6584 height: calc(#{vw(nth($local-grid-block-heights, 2))} * 2);
6585 }
6586 }
6587 }
6588 }
6589
6590 .promo-grid--height-large & {
6591 @include media($min: $bp-small) {
6592 height: nth($local-grid-block-heights, 3) * 0.85;
6593 }
6594
6595 @include media($min: $bp-medium) {
6596 height: nth($local-grid-block-heights, 3);
6597 }
6598
6599 &.promo-mosaic--maintain-aspect-ratio {
6600 @include media($min: $bp-small, $max: $max-width) {
6601 height: vw(nth($local-grid-block-heights, 3));
6602 }
6603
6604 .promo-block--content.promo-block--expanded,
6605 .promo-block--content.animating-in {
6606 @include media($max: $bp-small) {
6607 height: calc(#{vw(nth($local-grid-block-heights, 3))} * 2);
6608 }
6609 }
6610 }
6611 }
6612 }
6613}
6614
6615$local-max-width: rem(520px);
6616$local-space: rem(20px);
6617$local-title-spacing: rem(24px);
6618$local-mobile-image: rem(48px);
6619$local-chevron-width: rem(14px);
6620
6621.menulist--container {
6622 @extend %layout-container;
6623}
6624
6625.menulist--inner {
6626 @extend %box-shadow;
6627 display: -webkit-box;
6628 display: -webkit-flex;
6629 display: -ms-flexbox;
6630 display: flex;
6631 -webkit-box-orient: horizontal;
6632 -webkit-box-direction: normal;
6633 -webkit-flex-direction: row;
6634 -ms-flex-direction: row;
6635 flex-direction: row;
6636 -webkit-flex-wrap: wrap;
6637 -ms-flex-wrap: wrap;
6638 flex-wrap: wrap;
6639 -webkit-box-pack: start;
6640 -webkit-justify-content: flex-start;
6641 -ms-flex-pack: start;
6642 justify-content: flex-start;
6643
6644 .ie9 & { @extend %clearfix; }
6645}
6646
6647.menulist--item {
6648 position: relative;
6649 -webkit-box-flex: 0;
6650 -webkit-flex-grow: 0;
6651 -ms-flex-positive: 0;
6652 flex-grow: 0;
6653 -webkit-flex-shrink: 0;
6654 -ms-flex-negative: 0;
6655 flex-shrink: 0;
6656 width: 100%;
6657 border-bottom: 1px solid $color-border-soft;
6658
6659 &:last-child {
6660 border-bottom: 0;
6661 }
6662
6663 .ie9 & {
6664 float: left;
6665 }
6666
6667 @include media($min: $bp-small) {
6668 padding: $space-large $local-space;
6669 }
6670
6671 @include media($min: $bp-small, $max: $bp-medium) {
6672 width: 50%;
6673 font-size: 0;
6674
6675 &:nth-last-child(2):nth-child(odd), // Second to last, only when even blocks
6676 .menulist--blocks-count-1 &,
6677 .menulist--blocks-count-2 & {
6678 border-bottom: 0;
6679 }
6680
6681 &:nth-child(2n + 1) {
6682 border-right: 1px solid $color-border-soft;
6683
6684 .ie9 & {
6685 clear: left;
6686 }
6687 }
6688 }
6689
6690 @include media($min: $bp-medium) {
6691 width: percentage(1 / 3);
6692 font-size: 0;
6693
6694 .menulist--blocks-count-1 &,
6695 .menulist--blocks-count-2 & {
6696 width: 50%;
6697 }
6698
6699 .menulist--blocks-count-1 &,
6700 .menulist--blocks-count-2 &,
6701 .menulist--blocks-count-3 & {
6702 border-right: 1px solid $color-border-soft;
6703 border-bottom: 0;
6704
6705 &:last-child {
6706 border-right: 0;
6707 }
6708 }
6709
6710 .menulist--blocks-count-4 &,
6711 .menulist--blocks-count-5 & {
6712 border-right: 1px solid $color-border-soft;
6713
6714 &.menulist--item-4 {
6715 .ie9 & {
6716 clear: left;
6717 }
6718 }
6719
6720 &.menulist--item-4,
6721 &.menulist--item-5 {
6722 width: 50%;
6723 border-bottom: 0;
6724 }
6725
6726 &.menulist--item-3,
6727 &.menulist--item-5 {
6728 border-right: 0;
6729 }
6730 }
6731
6732 .menulist--blocks-count-6 & {
6733 border-right: 1px solid $color-border-soft;
6734
6735 &:nth-child(3n) {
6736 border-right: 0;
6737 }
6738
6739 &:nth-child(n + 4) {
6740 border-bottom: 0;
6741 }
6742 }
6743 }
6744}
6745
6746.menulist--item--inner {
6747 @include media($min: $bp-small) {
6748 width: 100%;
6749 max-width: $local-max-width;
6750 margin-right: auto;
6751 margin-left: auto;
6752 }
6753}
6754
6755.menulist--image {
6756 position: relative;
6757
6758 @include media($max: $bp-small) {
6759 position: absolute;
6760 top: rem(10px);
6761 right: $local-chevron-width + ($local-space * 1.5);
6762 width: $local-mobile-image;
6763 height: $local-mobile-image;
6764 }
6765
6766 @include media($min: $bp-small) {
6767 display: inline-block;
6768 width: 35%;
6769 font-size: rem($font-body-size);
6770 vertical-align: top;
6771 }
6772
6773 img,
6774 svg {
6775 max-width: 100%;
6776 }
6777}
6778
6779.menulist--content {
6780
6781 @include media($min: $bp-small) {
6782 display: inline-block;
6783 width: 55%;
6784 margin-left: 10%;
6785 font-size: rem($font-body-size);
6786 vertical-align: top;
6787 }
6788}
6789
6790.menulist--title {
6791 @include font($font-body, $font-weight: bolder);
6792 position: relative;
6793 padding: $local-title-spacing $local-space;
6794 margin: 0;
6795 font-size: $font-h5-size;
6796 color: $color-heading;
6797 cursor: pointer;
6798
6799 @include media($max: $bp-small) {
6800 padding-right: $local-mobile-image + $local-chevron-width + ($local-space * 1.5);
6801 }
6802
6803 @include media($min: $bp-small) {
6804 padding: 0;
6805 cursor: inherit;
6806 }
6807}
6808
6809.menulist-title-icon {
6810 position: absolute;
6811 top: 50%;
6812 right: $local-space * 0.75;
6813 display: block;
6814 width: $local-chevron-width;
6815 height: 8px;
6816 margin-top: -4px;
6817 opacity: 0.5;
6818
6819 @include media($min: $bp-small) {
6820 display: none;
6821 }
6822
6823 .icon-chevron-down-left,
6824 .icon-chevron-down-right {
6825 -webkit-transition-duration: 0s;
6826 transition-duration: 0s;
6827 }
6828}
6829
6830.menulist--menu {
6831 padding: 0;
6832 margin-top: 0;
6833 margin-bottom: 0;
6834 font-size: rem($font-body-size - 1);
6835 line-height: 1.5;
6836 list-style: none;
6837
6838 .accordion--active & {
6839 padding-bottom: $local-space + rem(10px);
6840 }
6841
6842 @include media($min: $bp-small) {
6843 max-height: inherit;
6844 padding: 0;
6845 margin-top: rem(8px);
6846 opacity: 1;
6847 }
6848}
6849
6850.menulist--menu-item {
6851 padding-right: $local-space;
6852 padding-left: $local-space;
6853
6854 &:not(:first-child) {
6855 margin-top: rem(2px);
6856 }
6857
6858 @include media($min: $bp-small) {
6859 padding-right: 0;
6860 padding-left: 0;
6861 }
6862
6863 &.menulist--menu-item-hidden {
6864 display: none;
6865 }
6866
6867 &.menulist--menu-item-trigger {
6868 margin-top: rem(8px);
6869 }
6870}
6871
6872.menulist--menu-link {
6873 @extend %link--text;
6874 display: inline-block;
6875 text-decoration: none;
6876
6877 @include media($max: $bp-small) {
6878 display: block;
6879 padding-top: rem(4px);
6880 padding-bottom: rem(4px);
6881 }
6882
6883 .menulist--menu-item-trigger & {
6884 @extend %link--default;
6885 }
6886}
6887
6888$local-space-small: 10px;
6889$local-space-large: 20px;
6890
6891$local-blog-width-xs: 260px;
6892$local-blog-width-small: 280px;
6893$local-blog-width-medium: 323px;
6894
6895$local-2-up-max: ($local-blog-width-small * 2) + ($local-space-small * 2);
6896
6897.blogposts--container {
6898 @extend %layout-container;
6899 position: relative;
6900
6901 @include media($max: $bp-large) {
6902 overflow: hidden;
6903 }
6904}
6905
6906.blogposts--inner {
6907 outline: 0;
6908
6909 &:not(.flickity-enabled),
6910 .flickity-slider {
6911 display: -webkit-box;
6912 display: -webkit-flex;
6913 display: -ms-flexbox;
6914 display: flex;
6915 -webkit-box-orient: horizontal;
6916 -webkit-box-direction: normal;
6917 -webkit-flex-direction: row;
6918 -ms-flex-direction: row;
6919 flex-direction: row;
6920 -webkit-flex-wrap: nowrap;
6921 -ms-flex-wrap: nowrap;
6922 flex-wrap: nowrap;
6923 -webkit-box-pack: start;
6924 -webkit-justify-content: flex-start;
6925 -ms-flex-pack: start;
6926 justify-content: flex-start;
6927 -webkit-transition: width 0.1s ease;
6928 transition: width 0.1s ease;
6929 }
6930
6931 &.flickity-enabled {
6932 display: block;
6933 width: 100%;
6934 cursor: -webkit-grab;
6935 cursor: grab;
6936 }
6937
6938 &:not(.flickity-enabled) {
6939 @include media($max: $bp-medium) {
6940 -webkit-box-orient: vertical;
6941 -webkit-box-direction: normal;
6942 -webkit-flex-direction: column;
6943 -ms-flex-direction: column;
6944 flex-direction: column;
6945
6946 .article--excerpt-wrapper:not(:first-child) {
6947 @include media($max: $bp-large) {
6948 margin-top: $space-large;
6949 }
6950 }
6951 }
6952 }
6953
6954 .article--excerpt-wrapper {
6955 width: rem($local-blog-width-xs);
6956 min-height: 100%;
6957 font-size: rem($font-body-size);
6958
6959 &:not(:last-child) {
6960 margin-right: $local-space-small;
6961 }
6962
6963 .blogposts--count-1 &,
6964 .blogposts--count-3 & {
6965 @include media($min: $bp-xs) {
6966 width: rem($local-blog-width-small);
6967 }
6968
6969 @include media($min: $bp-small, $max: $bp-large) {
6970 width: rem($local-blog-width-medium);
6971 }
6972
6973 @include media($min: $bp-large) {
6974 width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
6975 }
6976
6977 @include media($min: $bp-large-home) {
6978 width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
6979 }
6980 }
6981
6982 .blogposts--count-2 & {
6983 width: rem($local-blog-width-small);
6984
6985 @include media($min: $local-2-up-max) {
6986 width: calc(50% - #{$local-space-small / 2});
6987 }
6988
6989 @include media($min: $bp-large-home) {
6990 width: calc(50% - #{$local-space-large / 2});
6991 }
6992 }
6993 }
6994}
6995
6996.blogposts--footer {
6997 margin-top: $space-medium;
6998 text-align: center;
6999}
7000
7001.blogposts--footer-link {
7002 @extend %link--default;
7003 line-height: 1;
7004}
7005
7006.blogposts--footer-icon {
7007 @extend %inline-chevron;
7008 margin-left: rem(1px);
7009}
7010
7011$local-space-small: rem(10px);
7012$local-space-medium: rem(15px);
7013$local-space-large: rem(20px);
7014
7015$logo-size-small: 90px;
7016$logo-size-medium: 120px;
7017$logo-size-large: 160px;
7018
7019.logolist--container {
7020 @extend %layout-container;
7021 //background-color: #ededed;
7022 background-color: #FFF;
7023 outline: 20px solid #eaeded;
7024}
7025
7026.logolist--inner {
7027 @include grid-gutter($local-space-small);
7028 font-size: 0;
7029 text-align: center;
7030
7031 @include media($min: $bp-small) {
7032 @include grid-gutter($local-space-medium);
7033 }
7034
7035 @include media($min: $bp-xl) {
7036 @include grid-gutter($local-space-large);
7037 }
7038}
7039
7040.logolist--item {
7041 position: relative;
7042 display: inline-block;
7043 width: $logo-size-small;
7044 margin-top: $local-space-small * 2;
7045 margin-right: $local-space-small;
7046 margin-left: $local-space-small;
7047 font-size: $font-body-size;
7048 vertical-align: middle;
7049 -webkit-transition: width 0.1s ease, margin 0.1s ease;
7050 transition: width 0.1s ease, margin 0.1s ease;
7051
7052 &:nth-child(-n + 2) {
7053 @include media($max: 345px) {
7054 margin-top: 0;
7055 }
7056 }
7057
7058 &:nth-child(-n + 3) {
7059 @include media($min: 345px, $max: 455px) {
7060 margin-top: 0;
7061 }
7062 }
7063
7064 &:nth-child(-n + 4) {
7065 @media screen and (min-width: 455px) and (max-width: (565px - 1px)),
7066 screen and (min-width: $bp-small) and (max-width: (755px - 1px)) {
7067 margin-top: 0;
7068 }
7069 }
7070
7071 &:nth-child(-n + 5) {
7072 @media screen and (min-width: 565px) and (max-width: (675px - 1px)),
7073 screen and (min-width: 755px) and (max-width: (905px - 1px)),
7074 screen and (min-width: $bp-large) and (max-width: (1175px - 1px)) {
7075 margin-top: 0;
7076 }
7077 }
7078
7079 &:nth-child(-n + 6) {
7080 @media screen and (min-width: 675px) and (max-width: ($bp-small - 1px)),
7081 screen and (min-width: 905px) and (max-width: ($bp-large - 1px)),
7082 screen and (min-width: 1175px) {
7083 margin-top: 0;
7084 }
7085 }
7086
7087 @include media($min: $bp-small) {
7088 width: $logo-size-medium;
7089 margin-top: $local-space-medium * 2;
7090 margin-right: $local-space-medium;
7091 margin-left: $local-space-medium;
7092 }
7093
7094 @include media($min: $bp-large) {
7095 width: $logo-size-large;
7096 }
7097
7098 @include media($min: $bp-xl) {
7099 margin-top: $local-space-large * 2;
7100 margin-right: $local-space-large;
7101 margin-left: $local-space-large;
7102
7103 &:nth-child(-n + 6) {
7104 margin-top: 0;
7105 }
7106 }
7107}
7108
7109.logolist--link {
7110 display: block;
7111}
7112
7113.logolist--image {
7114 display: block;
7115 max-width: 100%;
7116 max-height: $logo-size-small;
7117 margin: 0 auto;
7118
7119 @include media($min: $bp-small) {
7120 max-height: $logo-size-medium;
7121 }
7122
7123 @include media($min: $bp-large) {
7124 max-height: $logo-size-large;
7125 }
7126}
7127
7128$local-avatar-size: rem(45px);
7129$local-tweet-width: 276px;
7130
7131$local-padding-small: rem(20px);
7132$local-padding-large: rem(25px);
7133
7134.twitter--container {
7135 @extend %layout-container;
7136 position: relative;
7137 overflow: hidden;
7138}
7139
7140.twitter--inner {
7141 outline: 0;
7142
7143 &:not(.flickity-enabled),
7144 .flickity-slider {
7145 @extend %box-shadow;
7146 display: -webkit-box;
7147 display: -webkit-flex;
7148 display: -ms-flexbox;
7149 display: flex;
7150 -webkit-box-orient: horizontal;
7151 -webkit-box-direction: normal;
7152 -webkit-flex-direction: row;
7153 -ms-flex-direction: row;
7154 flex-direction: row;
7155 -webkit-flex-wrap: nowrap;
7156 -ms-flex-wrap: nowrap;
7157 flex-wrap: nowrap;
7158 -webkit-box-pack: start;
7159 -webkit-justify-content: flex-start;
7160 -ms-flex-pack: start;
7161 justify-content: flex-start;
7162 -webkit-transition: width 0.1s ease;
7163 transition: width 0.1s ease;
7164 }
7165
7166 &:not(.flickity-enabled) {
7167 @include media($max: $bp-medium) {
7168 -webkit-box-orient: vertical;
7169 -webkit-box-direction: normal;
7170 -webkit-flex-direction: column;
7171 -ms-flex-direction: column;
7172 flex-direction: column;
7173 }
7174 }
7175
7176 &.flickity-enabled {
7177 display: block;
7178 width: 100%;
7179 cursor: -webkit-grab;
7180 cursor: grab;
7181 }
7182
7183 .flickity-slider {
7184 @include media($max: $bp-medium) {
7185 @for $i from 1 through 3 {
7186 .tweet--count-#{$i} & {
7187 width: rem($local-tweet-width * $i);
7188 }
7189 }
7190 }
7191 }
7192
7193 .ie9 & {
7194 @extend %clearfix;
7195 }
7196}
7197
7198.tweet--wrapper {
7199 display: -webkit-box;
7200 display: -webkit-flex;
7201 display: -ms-flexbox;
7202 display: flex;
7203 -webkit-box-align: start;
7204 -webkit-align-items: flex-start;
7205 -ms-flex-align: start;
7206 align-items: flex-start;
7207 -webkit-box-orient: vertical;
7208 -webkit-box-direction: normal;
7209 -webkit-flex-direction: column;
7210 -ms-flex-direction: column;
7211 flex-direction: column;
7212 -webkit-box-flex: 0;
7213 -webkit-flex-grow: 0;
7214 -ms-flex-positive: 0;
7215 flex-grow: 0;
7216 -webkit-flex-shrink: 0;
7217 -ms-flex-negative: 0;
7218 flex-shrink: 0;
7219 -webkit-box-pack: start;
7220 -webkit-justify-content: flex-start;
7221 -ms-flex-pack: start;
7222 justify-content: flex-start;
7223 min-width: $local-tweet-width;
7224 min-height: 100%;
7225 padding: $local-padding-small;
7226 overflow: hidden;
7227 white-space: normal;
7228 border-right: 1px solid $color-border-soft;
7229 -webkit-transition: width 0.15s ease, padding 0.15s ease;
7230 transition: width 0.15s ease, padding 0.15s ease;
7231
7232 // Mobile styling before flickity kicks in
7233 .twitter--inner:not(.flickity-enabled) &{
7234 @include media($max: $bp-medium) {
7235 display: block;
7236 width: 100%;
7237 border-right: 0;
7238
7239 &:not(:first-child) {
7240 border-top: 1px solid $color-border-soft;
7241 }
7242 }
7243 }
7244
7245 @include media($min: $bp-large-home) {
7246 padding: $local-padding-large;
7247 }
7248
7249 .tweet--count-1 & {
7250 width: 100%;
7251 }
7252
7253 .tweet--count-2 & {
7254 width: 50%;
7255 }
7256
7257 .tweet--count-3 & {
7258 width: percentage(1 / 3);
7259 }
7260
7261 &:last-child {
7262 border-right: 0;
7263 }
7264
7265 .ie9 & {
7266 float: left;
7267 }
7268
7269 a {
7270 text-decoration: none;
7271 word-wrap: break-word;
7272 }
7273}
7274
7275.tweet--header {
7276 display: block;
7277 -webkit-box-flex: 0;
7278 -webkit-flex-grow: 0;
7279 -ms-flex-positive: 0;
7280 flex-grow: 0;
7281 -webkit-flex-shrink: 0;
7282 -ms-flex-negative: 0;
7283 flex-shrink: 0;
7284 font-size: 0;
7285}
7286
7287.tweet--header-image,
7288.tweet--header-authorinfo {
7289 display: inline-block;
7290 vertical-align: middle;
7291}
7292
7293.tweet--header-image {
7294 display: none;
7295}
7296
7297.tweet--header-authorinfo {
7298 max-width: 100%;
7299 margin-top: 1px;
7300}
7301
7302.tweet--header-name {
7303 @include font($font-body, $font-weight: bolder, $font-family: false);
7304 display: block;
7305 font-size: $font-h5-size;
7306 color: $color-heading;
7307 text-decoration: none;
7308}
7309
7310.tweet--header-screenname {
7311 @extend %link--text;
7312 display: block;
7313 font-size: $font-h6-size;
7314 line-height: 1.5;
7315 opacity: 0.6;
7316}
7317
7318.tweet--content {
7319 -webkit-box-flex: 0;
7320 -webkit-flex-grow: 0;
7321 -ms-flex-positive: 0;
7322 flex-grow: 0;
7323 -webkit-flex-shrink: 0;
7324 -ms-flex-negative: 0;
7325 flex-shrink: 0;
7326 max-width: 100%;
7327 max-height: 100%;
7328 margin-top: $space-large;
7329
7330 a {
7331 @extend %link--default;
7332 display: inline-block;
7333 max-width: 100%;
7334 overflow: hidden;
7335 text-overflow: ellipsis;
7336 white-space: normal;
7337 vertical-align: top;
7338 }
7339
7340 // offset content vertically by the difference of the line-height minus font size
7341 .tweet {
7342 margin-top: -1 * ((1.6 * $font-body-size) - $font-body-size) / 2;
7343 margin-bottom: 0;
7344 font-size: $font-body-size;
7345 line-height: 1.6;
7346 text-overflow: ellipsis;
7347 word-wrap: break-word;
7348
7349 img {
7350 display: inline-block;
7351 height: rem($font-body-size + 6px);
7352 margin-top: -1 * rem(5px);
7353 vertical-align: baseline;
7354 }
7355 }
7356
7357 .media {
7358 display: inline-block;
7359 float: left;
7360 width: 35%;
7361 max-width: 140px;
7362 margin-right: rem(25px);
7363 margin-bottom: rem(7px);
7364
7365 img {
7366 display: block;
7367 max-width: 100%;
7368 }
7369 }
7370}
7371
7372.tweet--footer {
7373 @extend %link--text;
7374 padding-top: $space-small;
7375 margin-top: auto;
7376 clear: left;
7377 font-size: 0;
7378}
7379
7380.tweet--footer--posted,
7381.tweet--footer--icon {
7382 display: inline-block;
7383 font-size: $font-body-size-small;
7384 vertical-align: middle;
7385}
7386
7387.tweet--footer--posted {
7388 margin-left: rem(8px);
7389 opacity: 0.6;
7390}
7391
7392.tweet--footer--icon {
7393
7394 svg {
7395 display: block;
7396 color: $color-twitter;
7397 }
7398}
7399
7400.twitter--placeholder-posted,
7401.twitter--placeholder-name,
7402.twitter--placeholder-screenname {
7403 display: inline-block;
7404 vertical-align: middle;
7405}
7406
7407.twitter--placeholder-name {
7408 width: 100px;
7409 height: $font-h5-size;
7410}
7411
7412.twitter--placeholder-screenname {
7413 width: 100px;
7414 height: $font-h6-size;
7415}
7416
7417.twitter--placeholder-tweet {
7418 width: 100%;
7419}
7420
7421.twitter--placeholder-tweet-line {
7422 display: block;
7423 height: 1em;
7424 max-width: 100%;
7425 margin-top: 0.44em;
7426
7427 &:nth-child(1) {
7428 width: 204px;
7429 }
7430
7431 &:nth-child(2) {
7432 width: 180px;
7433 }
7434
7435 &:nth-child(3) {
7436 width: 160px;
7437 }
7438}
7439
7440.twitter--placeholder-posted {
7441 width: 80px;
7442 height: 1em;
7443}
7444
7445$local-space-small: 5px;
7446$local-space-medium: 10px;
7447$local-space-large: 20px;
7448
7449$local-photo-width: 165px;
7450
7451.instagram--container {
7452 @extend %layout-container;
7453 position: relative;
7454 overflow: hidden;
7455}
7456
7457.instagram--inner {
7458 margin-right: -1 * ($local-space-small / 2);
7459 margin-left: -1 * ($local-space-small / 2);
7460 font-size: 0;
7461 outline: 0;
7462
7463 @include media($max: $bp-medium) {
7464 &:not(.flickity-enabled) {
7465 display: -webkit-box;
7466 display: -webkit-flex;
7467 display: -ms-flexbox;
7468 display: flex;
7469 -webkit-flex-wrap: nowrap;
7470 -ms-flex-wrap: nowrap;
7471 flex-wrap: nowrap;
7472 overflow: hidden;
7473
7474 .instagram--photo {
7475 -webkit-flex-basis: auto;
7476 -ms-flex-preferred-size: auto;
7477 flex-basis: auto;
7478 -webkit-flex-shrink: 0;
7479 -ms-flex-negative: 0;
7480 flex-shrink: 0;
7481 }
7482 }
7483 }
7484
7485 @include media($min: $bp-medium) {
7486 margin-right: -1 * ($local-space-medium / 2);
7487 margin-left: -1 * ($local-space-medium / 2);
7488 }
7489
7490 @include media($min: $bp-large-home) {
7491 margin-right: -1 * ($local-space-large / 2);
7492 margin-left: -1 * ($local-space-large / 2);
7493 }
7494
7495 &.flickity-enabled {
7496 cursor: -webkit-grab;
7497 cursor: grab;
7498 }
7499}
7500
7501.instagram--photo {
7502 display: inline-block;
7503 width: $local-photo-width + $local-space-small;
7504 padding-right: $local-space-small / 2;
7505 padding-bottom: $local-photo-width + $local-space-small;
7506 padding-left: $local-space-small / 2;
7507 margin: 0;
7508 font-size: $font-body-size-small;
7509 vertical-align: middle;
7510
7511 @include media($max: $bp-medium) {
7512 .flickity-enabled & {
7513 top: 50%;
7514 -webkit-transform: translateY(-50%);
7515 -ms-transform: translateY(-50%);
7516 transform: translateY(-50%);
7517 }
7518 }
7519
7520 @include media($min: $bp-medium) {
7521 width: 20%;
7522 padding-bottom: 20%;
7523 padding-right: $local-space-medium / 2;
7524 padding-left: $local-space-medium / 2;
7525 }
7526
7527 @include media($min: $bp-large-home) {
7528 padding-right: $local-space-large / 2;
7529 padding-left: $local-space-large / 2;
7530 }
7531
7532 a {
7533 position: relative;
7534 display: block;
7535 width: 100%;
7536 height: 100%;
7537 }
7538
7539 svg,
7540 img {
7541 position: absolute;
7542 display: block;
7543 max-width: 100%;
7544 margin: 0 auto;
7545 }
7546
7547 &[data-instagram-photo-placeholder] {
7548 padding-bottom: 0;
7549
7550 svg {
7551 position: relative;
7552 }
7553 }
7554}
7555
7556$local-space-small: 10px;
7557$local-space-large: 15px;
7558
7559.collection-list--container {
7560 @extend %layout-container;
7561 outline: 20px solid #eaeded;
7562 border-radius: 3px 4px 4px 3px;
7563}
7564
7565.collection-list--inner {
7566 @extend %clearfix;
7567}
7568
7569$local-padding-small: 15px;
7570$local-padding-medium: 20px;
7571
7572.featured-collection--container {
7573 .home-section--title {
7574
7575 @include media($max: $bp-small) {
7576 padding-right: $gutter-outer-small;
7577 padding-left: $gutter-outer-small;
7578
7579 }
7580
7581 @include media($min: $bp-small, $max: $bp-large) {
7582 padding-right: $gutter-outer-medium;
7583 //background-color: #000;
7584 padding-left: $gutter-outer-medium;
7585 }
7586 }
7587}
7588
7589
7590.featured-collection--banner {
7591 height: auto;
7592 background-position: 50% 50%;
7593 background-repeat: no-repeat;
7594 background-size: cover;
7595 //background-color: #000;
7596
7597 .ie9 & {
7598 height: 100%;
7599 padding-top: 50px;
7600 padding-bottom: 50px;
7601 vertical-align: middle;
7602 }
7603}
7604
7605.featured-collection--banner-outer {
7606 display: -webkit-box;
7607 display: -webkit-flex;
7608 display: -ms-flexbox;
7609 display: flex;
7610 -webkit-box-align: center;
7611 -webkit-align-items: center;
7612 -ms-flex-align: center;
7613 align-items: center;
7614 -webkit-box-flex: 1;
7615 -webkit-flex-grow: 1;
7616 -ms-flex-positive: 1;
7617 flex-grow: 1;
7618 width: 100%;
7619 //height: 20%;
7620 padding: $local-padding-small;
7621 color: currentColor;
7622 text-decoration: none;
7623
7624 @include media($min: $bp-medium) {
7625 padding: $local-padding-medium;
7626 }
7627
7628 .ie9 & {
7629 display: table;
7630 height: 100%;
7631 }
7632}
7633
7634.featured-collection--banner-inner {
7635 -webkit-align-self: center;
7636 -ms-flex-item-align: center;
7637 -ms-grid-row-align: center;
7638 align-self: center;
7639 -webkit-box-flex: 0;
7640 -webkit-flex-grow: 0;
7641 -ms-flex-positive: 0;
7642 flex-grow: 0;
7643 width: 100%;
7644 text-align: center;
7645 vertical-align: middle;
7646
7647 .ie9 & {
7648 display: table-cell;
7649 }
7650}
7651
7652.featured-collection--banner-subtitle {
7653 @include font($font-body, $font-weight: bolder, $font-family: false);
7654 font-size: $font-body-size-smaller;
7655 line-height: 1.2;
7656 text-transform: uppercase;
7657}
7658
7659.featured-collection--banner-title {
7660 margin-top: $space-x-small;
7661 margin-bottom: 0;
7662 font-size: $font-h3-size;
7663 white-space: normal;
7664}
7665
7666.search-section {
7667 position: relative;
7668 width: 90%;
7669 max-width: calc(#{$max-width - $gutter-outer * 2});
7670 margin: 0 auto;
7671}
7672
7673.search-section-background,
7674.search-section-overlay {
7675 position: absolute;
7676 top: 0;
7677 right: 0;
7678 bottom: 0;
7679 left: 0;
7680 background-size: cover;
7681}
7682
7683.search-section-position-top-left {
7684 background-position: left top;
7685}
7686
7687.search-section-position-top-center {
7688 background-position: center top;
7689}
7690
7691.search-section-position-top-right {
7692 background-position: right top;
7693}
7694
7695.search-section-position-center-left {
7696 background-position: left center;
7697}
7698
7699.search-section-position-center {
7700 background-position: center;
7701}
7702
7703.search-section-position-center-rigtht {
7704 background-position: right center;
7705}
7706
7707.search-section-position-bottom-left {
7708 background-position: left bottom;
7709}
7710
7711.search-section-position-bottom-center {
7712 background-position: center bottom;
7713}
7714
7715.search-section-position-bottom-right {
7716 background-position: right bottom;
7717}
7718
7719.search-section-content {
7720 position: relative;
7721 max-width: 85%;
7722 padding: 50px 0;
7723 margin: 0 auto;
7724
7725 @include media($min: $bp-large-home) {
7726 max-width: 65%;
7727 }
7728
7729 .search-section-overlay + & {
7730 &,
7731 .search-section-heading {
7732 color: inherit;
7733 }
7734 }
7735}
7736
7737.search-section-header {
7738 margin: 0 auto;
7739 text-align: center;
7740
7741 @include media($min: $bp-smaller) {
7742 max-width: 80%;
7743 }
7744
7745 p {
7746 margin-top: 0;
7747 }
7748}
7749
7750.search-section-heading {
7751 margin-top: 0;
7752 margin-bottom: $space-x-small;
7753 font-size: $font-h3-size;
7754 color: $color-heading;
7755}
7756
7757.search-section-text {
7758 margin-top: 0;
7759 margin-bottom: $space-x-large;
7760 line-height: 1.5625;
7761}
7762
7763.rich-text--container {
7764 @extend %layout-container;
7765 margin-top: $gutter-outer * 2;
7766
7767 @include media($min: $bp-medium) {
7768 margin-top: $gutter-outer * 3;
7769 }
7770}
7771
7772.rich-text-regular {
7773 max-width: rem(650px);
7774}
7775
7776.rich-text-wide {
7777 max-width: rem(850px);
7778}
7779
7780.rich-text-block {
7781 margin-bottom: $space-xx-large;
7782
7783 &:last-child {
7784 margin-bottom: 0;
7785 }
7786
7787 @include media($min: $bp-medium) {
7788 margin-bottom: $space-xx-large * 1.5;
7789 }
7790}
7791
7792.rich-text-alignment-left {
7793 text-align: left;
7794}
7795
7796.rich-text-alignment-center {
7797 text-align: center;
7798}
7799
7800.rich-text-alignment-right {
7801 text-align: right;
7802}
7803
7804.rich-text-heading {
7805 margin-bottom: $space-medium;
7806 font-size: $font-h4-size;
7807 line-height: 1.5;
7808 color: $color-heading;
7809}
7810
7811.rich-text-heading-medium {
7812 font-size: $font-h3-size;
7813}
7814
7815.rich-text-heading-large {
7816 font-size: $font-h1-size;
7817}
7818
7819.rich-text-content {
7820 line-height: 1.5;
7821}
7822
7823.featured-product--container {
7824 @extend %layout-container;
7825
7826 .featured-product--inner {
7827
7828 padding: $gutter-outer;
7829 }
7830
7831 .product-main {
7832 text-align: center;
7833 }
7834
7835 .product-pricing {
7836 -webkit-box-pack: center;
7837 -webkit-justify-content: center;
7838 -ms-flex-pack: center;
7839 justify-content: center;
7840 }
7841
7842 .product--outer {
7843 @include media($min: $bp-small) {
7844 display: -webkit-box;
7845 display: -webkit-flex;
7846 display: -ms-flexbox;
7847 display: flex;
7848 -webkit-box-align: center;
7849 -webkit-align-items: center;
7850 -ms-flex-align: center;
7851 align-items: center;
7852 }
7853 }
7854}
7855
7856$pxs-map-height-small: 400px !default;
7857$pxs-map-height-medium: 500px !default;
7858$pxs-map-height-large: 600px !default;
7859
7860$pxs-map-breakpoint-small: 680px !default;
7861$pxs-map-breakpoint-large: 1024px !default;
7862
7863$pxs-map-space-small: 10px !default;
7864$pxs-map-space-medium: 20px !default;
7865$pxs-map-space-large: 25px !default;
7866$pxs-map-space-larger: 50px !default;
7867
7868$pxs-map-split-map-width: calc(50% - #{$pxs-map-space-small}) !default;
7869$pxs-map-split-content-width: calc(50% - #{$pxs-map-space-small}) !default;
7870
7871$pxs-map-content-max-width: 40% !default;
7872$pxs-map-content-min-width: 280px !default;
7873
7874$pxs-map-content-background-color: #fff !default;
7875
7876$pxs-map-heading-margin: 26px !default;
7877
7878.pxs-map {
7879 position: relative;
7880 display: -webkit-box;
7881 display: -webkit-flex;
7882 display: -ms-flexbox;
7883 display: flex;
7884 -webkit-box-pack: justify;
7885 -webkit-justify-content: space-between;
7886 -ms-flex-pack: justify;
7887 justify-content: space-between;
7888 margin-top: $pxs-map-space-larger;
7889
7890 @media (max-width: $pxs-map-breakpoint-small) {
7891 -webkit-flex-wrap: wrap;
7892 -ms-flex-wrap: wrap;
7893 flex-wrap: wrap;
7894 }
7895}
7896
7897.pxs-map-wrapper {
7898 position: relative;
7899 width: 100%;
7900 height: $pxs-map-height-small * 0.7;
7901 padding: 0;
7902 background-size: cover;
7903
7904 @media (min-width: $pxs-map-breakpoint-small) {
7905 height: $pxs-map-height-small;
7906
7907 .pxs-map-section-layout-x-outside-left &,
7908 .pxs-map-section-layout-x-outside-right & {
7909 width: $pxs-map-split-map-width;
7910 }
7911 }
7912
7913 &.pxs-map-wrapper-height-medium {
7914 height: $pxs-map-height-medium * 0.7;
7915
7916 @media (min-width: $pxs-map-breakpoint-small) {
7917 height: $pxs-map-height-medium;
7918 }
7919 }
7920
7921 &.pxs-map-wrapper-height-large {
7922 height: $pxs-map-height-large * 0.7;
7923
7924 @media (min-width: $pxs-map-breakpoint-small) {
7925 height: $pxs-map-height-large;
7926 }
7927 }
7928
7929 .pxs-map-image {
7930 position: absolute;
7931 width: 1px;
7932 height: 1px;
7933 overflow: hidden;
7934 opacity: 0;
7935
7936 &[data-rimg="noscript"] {
7937 position: relative;
7938 width: 100%;
7939 height: 100%;
7940 opacity: 1;
7941 -o-object-fit: cover;
7942 object-fit: cover;
7943 }
7944 }
7945}
7946
7947.pxs-map-overlay {
7948 position: absolute;
7949 top: 0;
7950 right: 0;
7951 bottom: 0;
7952 left: 0;
7953
7954 .pxs-map-section-layout-x-outside-left &,
7955 .pxs-map-section-layout-x-outside-right & {
7956 display: none;
7957 }
7958
7959 @media (max-width: $pxs-map-breakpoint-small) {
7960 display: none;
7961 }
7962}
7963
7964.pxs-map-container {
7965 position: relative;
7966 width: 100%;
7967 height: 100%;
7968}
7969
7970.pxs-map-error-message {
7971 display: -webkit-box;
7972 display: -webkit-flex;
7973 display: -ms-flexbox;
7974 display: flex;
7975 -webkit-box-align: center;
7976 -webkit-align-items: center;
7977 -ms-flex-align: center;
7978 align-items: center;
7979 -webkit-box-orient: vertical;
7980 -webkit-box-direction: normal;
7981 -webkit-flex-direction: column;
7982 -ms-flex-direction: column;
7983 flex-direction: column;
7984 -webkit-box-pack: center;
7985 -webkit-justify-content: center;
7986 -ms-flex-pack: center;
7987 justify-content: center;
7988 width: 100%;
7989 height: 100%;
7990 padding: $pxs-map-space-medium;
7991
7992 p {
7993 margin: 0;
7994 text-align: center;
7995 }
7996
7997 a {
7998 color: inherit;
7999 }
8000}
8001
8002.pxs-map-card-wrapper {
8003 width: 100%;
8004
8005 @media (max-width: $pxs-map-breakpoint-small) {
8006 .pxs-map-section-layout-mobile-above & {
8007 -webkit-box-ordinal-group: 0;
8008 -webkit-order: -1;
8009 -ms-flex-order: -1;
8010 order: -1;
8011 margin-bottom: $pxs-map-space-medium;
8012 }
8013
8014 .pxs-map-section-layout-mobile-below & {
8015 margin-top: $pxs-map-space-medium;
8016 }
8017 }
8018
8019 @media (min-width: $pxs-map-breakpoint-small) {
8020 position: absolute;
8021 top: $pxs-map-space-medium;
8022 right: $pxs-map-space-medium;
8023 bottom: $pxs-map-space-medium;
8024 left: 0;
8025 display: -webkit-box;
8026 display: -webkit-flex;
8027 display: -ms-flexbox;
8028 display: flex;
8029 -webkit-box-align: start;
8030 -webkit-align-items: flex-start;
8031 -ms-flex-align: start;
8032 align-items: flex-start;
8033 -webkit-box-pack: start;
8034 -webkit-justify-content: flex-start;
8035 -ms-flex-pack: start;
8036 justify-content: flex-start;
8037 padding: 0 $pxs-map-space-medium;
8038
8039 .pxs-map-section-layout-x-outside-left &,
8040 .pxs-map-section-layout-x-outside-right & {
8041 position: static;
8042 width: $pxs-map-split-content-width;
8043 padding: 0;
8044 background-color: $pxs-map-content-background-color;
8045 }
8046
8047 .pxs-map-section-layout-x-outside-left & {
8048 -webkit-box-ordinal-group: 0;
8049 -webkit-order: -1;
8050 -ms-flex-order: -1;
8051 order: -1;
8052 }
8053
8054 .pxs-map-section-layout-y-outside-center &,
8055 .pxs-map-section-layout-y-overlay-center & {
8056 -webkit-box-align: center;
8057 -webkit-align-items: center;
8058 -ms-flex-align: center;
8059 align-items: center;
8060 }
8061
8062 .pxs-map-section-layout-y-outside-bottom &,
8063 .pxs-map-section-layout-y-overlay-bottom & {
8064 -webkit-box-align: end;
8065 -webkit-align-items: flex-end;
8066 -ms-flex-align: end;
8067 align-items: flex-end;
8068 }
8069
8070 .pxs-map-section-layout-x-overlay-center & {
8071 -webkit-box-pack: center;
8072 -webkit-justify-content: center;
8073 -ms-flex-pack: center;
8074 justify-content: center;
8075 }
8076
8077 .pxs-map-section-layout-x-overlay-right & {
8078 -webkit-box-pack: end;
8079 -webkit-justify-content: flex-end;
8080 -ms-flex-pack: end;
8081 justify-content: flex-end;
8082 }
8083 }
8084
8085 @media (min-width: $pxs-map-breakpoint-large) {
8086 top: $pxs-map-space-large;
8087 bottom: $pxs-map-space-large;
8088 padding: 0 $pxs-map-space-large;
8089 }
8090}
8091
8092.pxs-map-card {
8093 width: 100%;
8094 padding: $pxs-map-space-large;
8095 background-color: $pxs-map-content-background-color;
8096
8097 @media (max-width: $pxs-map-breakpoint-small) {
8098 max-width: 100%;
8099 }
8100
8101 @media (min-width: $pxs-map-breakpoint-small) {
8102 right: auto;
8103 bottom: $pxs-map-space-large;
8104 left: $pxs-map-space-large;
8105 width: auto;
8106 max-width: $pxs-map-content-max-width;
8107 min-width: $pxs-map-content-min-width;
8108
8109 .pxs-map-section-layout-x-outside-left &,
8110 .pxs-map-section-layout-x-outside-right & {
8111 width: 100%;
8112 max-width: 100%;
8113 }
8114 }
8115}
8116
8117.pxs-map-card-text-alignment-left {
8118 text-align: left;
8119}
8120
8121.pxs-map-card-text-alignment-center {
8122 text-align: center;
8123}
8124
8125.pxs-map-card-text-alignment-right {
8126 text-align: right;
8127}
8128
8129.pxs-map-card-heading {
8130 margin: 0 0 $pxs-map-heading-margin;
8131}
8132
8133.pxs-map-card-content p:last-child {
8134 margin-bottom: 0;
8135}
8136
8137// Newsletter variables
8138$pxs-newsletter-section-width: 100% !default;
8139
8140$pxs-newsletter-content-width-small: 65% !default;
8141$pxs-newsletter-content-width-large: 100% !default;
8142
8143$pxs-newsletter-header-width: 80% !default;
8144
8145$pxs-newsletter-breakpoint-small: 680px !default;
8146$pxs-newsletter-breakpoint-large: 1080px !default;
8147
8148$pxs-newsletter-space-smaller: 12px !default;
8149$pxs-newsletter-space-small: 20px !default;
8150$pxs-newsletter-space-medium: 36px !default;
8151$pxs-newsletter-space-large: 50px !default;
8152$pxs-newsletter-space-larger: 68px !default;
8153
8154.pxs-newsletter-section {
8155 position: relative;
8156 width: $pxs-newsletter-section-width;
8157
8158 .newsletter-success {
8159 font-weight: bold;
8160 text-align: center;
8161 }
8162}
8163
8164.pxs-newsletter {
8165 position: relative;
8166 display: -webkit-box;
8167 display: -webkit-flex;
8168 display: -ms-flexbox;
8169 display: flex;
8170 -webkit-box-align: center;
8171 -webkit-align-items: center;
8172 -ms-flex-align: center;
8173 align-items: center;
8174 -webkit-box-pack: center;
8175 -webkit-justify-content: center;
8176 -ms-flex-pack: center;
8177 justify-content: center;
8178 max-width: $pxs-newsletter-content-width-large;
8179 padding: $pxs-newsletter-space-large 0 $pxs-newsletter-space-small;
8180 margin: 0 auto;
8181
8182 @media screen and (max-width: $pxs-newsletter-breakpoint-small) {
8183 -webkit-box-orient: vertical;
8184 -webkit-box-direction: normal;
8185 -webkit-flex-direction: column;
8186 -ms-flex-direction: column;
8187 flex-direction: column;
8188 }
8189
8190 @media (min-width: $pxs-newsletter-breakpoint-large) {
8191 max-width: $pxs-newsletter-content-width-small;
8192 padding-top: $pxs-newsletter-space-larger;
8193 }
8194}
8195
8196.pxs-newsletter-figure {
8197 position: relative;
8198 -webkit-flex-shrink: 1;
8199 -ms-flex-negative: 1;
8200 flex-shrink: 1;
8201 -webkit-box-ordinal-group: 1;
8202 -webkit-order: 0;
8203 -ms-flex-order: 0;
8204 order: 0;
8205 margin: 0;
8206 background-size: cover;
8207
8208 @media screen and (max-width: $pxs-newsletter-breakpoint-small) {
8209 .pxs-newsletter-mobile-alignment-bottom & {
8210 -webkit-box-ordinal-group: 2;
8211 -webkit-order: 1;
8212 -ms-flex-order: 1;
8213 order: 1;
8214 }
8215 }
8216
8217 @media screen and (min-width: $pxs-newsletter-breakpoint-small) {
8218 .pxs-newsletter-desktop-alignment-right & {
8219 -webkit-box-ordinal-group: 2;
8220 -webkit-order: 1;
8221 -ms-flex-order: 1;
8222 order: 1;
8223 }
8224 }
8225}
8226
8227.pxs-newsletter-content {
8228 display: -webkit-box;
8229 display: -webkit-flex;
8230 display: -ms-flexbox;
8231 display: flex;
8232 -webkit-box-align: center;
8233 -webkit-align-items: center;
8234 -ms-flex-align: center;
8235 align-items: center;
8236 -webkit-box-orient: vertical;
8237 -webkit-box-direction: normal;
8238 -webkit-flex-direction: column;
8239 -ms-flex-direction: column;
8240 flex-direction: column;
8241 -webkit-box-pack: center;
8242 -webkit-justify-content: center;
8243 -ms-flex-pack: center;
8244 justify-content: center;
8245 -webkit-box-ordinal-group: 1;
8246 -webkit-order: 0;
8247 -ms-flex-order: 0;
8248 order: 0;
8249 padding: $pxs-newsletter-space-small;
8250
8251 @media screen and (min-width: $pxs-newsletter-breakpoint-small) {
8252 padding: $pxs-newsletter-space-large;
8253 }
8254}
8255
8256.pxs-newsletter-image {
8257 display: block;
8258 width: 100%;
8259 opacity: 0;
8260
8261 &[data-rimg="noscript"] {
8262 opacity: 1;
8263 }
8264}
8265
8266.pxs-newsletter-header {
8267 margin: 0 auto;
8268 text-align: center;
8269
8270 @media (min-width: $pxs-newsletter-breakpoint-small) {
8271 max-width: $pxs-newsletter-header-width;
8272 }
8273}
8274
8275.pxs-newsletter-heading {
8276 margin-top: 0;
8277 margin-bottom: $pxs-newsletter-space-smaller;
8278}
8279
8280.pxs-newsletter-text {
8281 margin-top: 0;
8282 margin-bottom: $pxs-newsletter-space-medium;
8283}
8284
8285.pxs-newsletter-form {
8286 .contact-form {
8287 margin: 0;
8288 }
8289}
8290
8291.pxs-newsletter-form-fields {
8292 display: -webkit-box;
8293 display: -webkit-flex;
8294 display: -ms-flexbox;
8295 display: flex;
8296 -webkit-box-align: stretch;
8297 -webkit-align-items: stretch;
8298 -ms-flex-align: stretch;
8299 align-items: stretch;
8300 -webkit-box-pack: center;
8301 -webkit-justify-content: center;
8302 -ms-flex-pack: center;
8303 justify-content: center;
8304}
8305
8306.pxs-newsletter-form-label {
8307 display: none;
8308}
8309
8310.pxs-newsletter-form-input {
8311 height: 100%;
8312 margin: 0;
8313}
8314
8315.pxs-newsletter-form-button {
8316 height: 100%;
8317}
8318
8319$pxs-image-with-text-space-smallest: 4px !default;
8320$pxs-image-with-text-space-smaller: 8px !default;
8321$pxs-image-with-text-space-small: 12px !default;
8322$pxs-image-with-text-space-medium: 20px !default;
8323$pxs-image-with-text-space-large: 28px !default;
8324$pxs-image-with-text-space-larger: 36px !default;
8325
8326$pxs-image-with-text-breakpoint-small: 480px !default;
8327$pxs-image-with-text-breakpoint-medium: 720px !default;
8328$pxs-image-with-text-breakpoint-large: 1024px !default;
8329
8330$pxs-image-with-text-content-width-small: 60% !default;
8331$pxs-image-with-text-content-width-large: 85% !default;
8332
8333$pxs-image-with-text-section-height-small: 100px !default;
8334$pxs-image-with-text-section-height-medium: 150px !default;
8335$pxs-image-with-text-section-height-large: 200px !default;
8336$pxs-image-with-text-section-height-original: 0 !default;
8337
8338$local-section-height-small: "small";
8339$local-section-height-medium: "medium";
8340$local-section-height-large: "large";
8341$local-section-height-original: "original";
8342
8343$pxs-image-original-aspect-mobile-color: #000 !default;
8344
8345$local-heights:
8346 $local-section-height-small,
8347 $local-section-height-medium,
8348 $local-section-height-large,
8349 $local-section-height-original;
8350
8351$local-height-values:
8352 $pxs-image-with-text-section-height-small,
8353 $pxs-image-with-text-section-height-medium,
8354 $pxs-image-with-text-section-height-large,
8355 $pxs-image-with-text-section-height-original;
8356
8357.pxs-image-with-text {
8358 &:not(.pxs-image-with-text-section-height-original) {
8359 .pxs-image-with-text-background {
8360 position: absolute;
8361 top: 0;
8362 right: 0;
8363 bottom: 0;
8364 left: 0;
8365 }
8366
8367 .pxs-image-with-text-image {
8368 position: absolute;
8369 width: 1px;
8370 height: 1px;
8371 overflow: hidden;
8372 opacity: 0;
8373
8374 &[data-rimg="noscript"] {
8375 width: 100%;
8376 height: 100%;
8377 opacity: 1;
8378 -o-object-fit: cover;
8379 object-fit: cover;
8380 }
8381 }
8382 }
8383
8384 &.pxs-image-with-text-section-height-original {
8385 .pxs-image-with-text-content-wrapper {
8386 @media (min-width: $pxs-image-with-text-breakpoint-small) {
8387 position: absolute;
8388 top: $pxs-image-with-text-space-medium;
8389 right: $pxs-image-with-text-space-medium;
8390 bottom: $pxs-image-with-text-space-medium;
8391 left: $pxs-image-with-text-space-medium;
8392 }
8393 }
8394 }
8395}
8396
8397.pxs-image-with-text-wrapper {
8398 position: relative;
8399}
8400
8401.pxs-image-with-text-background {
8402 background-size: cover;
8403
8404 svg {
8405 width: 100%;
8406 height: 100%;
8407 max-height: 100%;
8408 }
8409}
8410
8411.pxs-image-with-text-image {
8412 width: 100%;
8413 opacity: 0;
8414}
8415
8416.pxs-image-with-text-overlay {
8417 position: absolute;
8418 top: 0;
8419 right: 0;
8420 bottom: 0;
8421 left: 0;
8422
8423 @media (max-width: $pxs-image-with-text-breakpoint-small) {
8424 .pxs-image-with-text-section-height-original & {
8425 display: none;
8426 }
8427 }
8428}
8429
8430.pxs-image-with-text-content-wrapper {
8431 position: relative;
8432 display: -webkit-box;
8433 display: -webkit-flex;
8434 display: -ms-flexbox;
8435 display: flex;
8436 -webkit-box-align: center;
8437 -webkit-align-items: center;
8438 -ms-flex-align: center;
8439 align-items: center;
8440 -webkit-box-pack: center;
8441 -webkit-justify-content: center;
8442 -ms-flex-pack: center;
8443 justify-content: center;
8444 padding: $pxs-image-with-text-space-medium;
8445 text-align: center;
8446
8447 .pxs-image-with-text-section-height-original & {
8448 @media (max-width: $pxs-image-with-text-breakpoint-small) {
8449 -webkit-box-align: center;
8450 -webkit-align-items: center;
8451 -ms-flex-align: center;
8452 align-items: center;
8453 -webkit-box-pack: center;
8454 -webkit-justify-content: center;
8455 -ms-flex-pack: center;
8456 justify-content: center;
8457 padding: $pxs-image-with-text-space-medium;
8458 text-align: center;
8459 }
8460 }
8461}
8462
8463@for $i from 1 through 4 {
8464 .pxs-image-with-text-section-height-#{nth($local-heights, $i)} {
8465 .pxs-image-with-text-content-position-y-top {
8466 -webkit-box-align: start;
8467 -webkit-align-items: flex-start;
8468 -ms-flex-align: start;
8469 align-items: flex-start;
8470 padding-bottom: #{nth($local-height-values, $i) * 1.2 - $pxs-image-with-text-space-medium};
8471
8472 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8473 padding-bottom: #{nth($local-height-values, $i) * 2 - $pxs-image-with-text-space-medium};
8474 }
8475 }
8476
8477 .pxs-image-with-text-content-position-y-center {
8478 padding: #{nth($local-height-values, $i) * 0.6} $pxs-image-with-text-space-medium;
8479
8480 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8481 padding: #{nth($local-height-values, $i)} $pxs-image-with-text-space-medium;
8482 }
8483 }
8484
8485 .pxs-image-with-text-content-position-y-bottom {
8486 -webkit-box-align: end;
8487 -webkit-align-items: flex-end;
8488 -ms-flex-align: end;
8489 align-items: flex-end;
8490 padding-top: #{nth($local-height-values, $i) * 1.2 - $pxs-image-with-text-space-medium};
8491
8492 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8493 padding-top: #{nth($local-height-values, $i) * 2 - $pxs-image-with-text-space-medium};
8494 }
8495 }
8496
8497 .pxs-image-with-text-content-position-x-left {
8498 -webkit-box-pack: start;
8499 -webkit-justify-content: flex-start;
8500 -ms-flex-pack: start;
8501 justify-content: flex-start;
8502 text-align: left;
8503 }
8504
8505 .pxs-image-with-text-content-position-x-right {
8506 -webkit-box-pack: end;
8507 -webkit-justify-content: flex-end;
8508 -ms-flex-pack: end;
8509 justify-content: flex-end;
8510 text-align: right;
8511 }
8512 }
8513}
8514
8515.pxs-image-with-text-content {
8516 width: $pxs-image-with-text-content-width-large;
8517 padding: $pxs-image-with-text-space-smaller 0;
8518
8519 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8520 width: $pxs-image-with-text-content-width-small;
8521 padding: $pxs-image-with-text-space-small 0;
8522 }
8523}
8524
8525.pxs-image-with-text-text-alignment-left {
8526 text-align: left;
8527}
8528
8529.pxs-image-with-text-text-alignment-center {
8530 text-align: center;
8531}
8532
8533.pxs-image-with-text-text-alignment-right {
8534 text-align: right;
8535}
8536
8537.pxs-image-with-text-heading,
8538.pxs-image-with-text-subheading {
8539 color: inherit;
8540
8541 @media (max-width: $pxs-image-with-text-breakpoint-small) {
8542 .pxs-image-with-text-section-height-original & {
8543 color: $pxs-image-original-aspect-mobile-color;
8544 }
8545 }
8546}
8547
8548.pxs-image-with-text-heading {
8549 margin-top: 0;
8550 margin-bottom: $pxs-image-with-text-space-smallest;
8551
8552 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8553 margin-bottom: $pxs-image-with-text-space-small;
8554 }
8555}
8556
8557.pxs-image-with-text-subheading {
8558 margin: 0;
8559
8560 p {
8561 margin-top: 0;
8562
8563 &:last-child {
8564 margin-bottom: 0;
8565 }
8566 }
8567}
8568
8569.pxs-image-with-text-button {
8570 margin-top: $pxs-image-with-text-space-medium;
8571
8572 @media (min-width: $pxs-image-with-text-breakpoint-medium) {
8573 margin-top: $pxs-image-with-text-space-large;
8574 }
8575
8576 @media (min-width: $pxs-image-with-text-breakpoint-large) {
8577 margin-top: $pxs-image-with-text-space-larger;
8578 }
8579}
8580
8581
8582
8583// Overrides
8584.pxs-map-section {
8585 @extend %layout-container;
8586 width: 100%;
8587}
8588
8589.pxs-map-error-message {
8590 line-height: 1.5;
8591}
8592
8593.pxs-map-wrapper {
8594 @extend %box-shadow;
8595 border: 0;
8596}
8597
8598.pxs-map-card-wrapper {
8599 .pxs-map-section-layout-x-outside-left &,
8600 .pxs-map-section-layout-x-outside-right & {
8601 @extend %box-shadow;
8602 }
8603}
8604
8605.pxs-map-card {
8606 @extend %box-shadow;
8607 border: 0;
8608
8609 .pxs-map-section-layout-x-outside-left &,
8610 .pxs-map-section-layout-x-outside-right & {
8611 -webkit-box-shadow: none;
8612 box-shadow: none;
8613 }
8614}
8615
8616.pxs-map-card-heading {
8617 color: $color-heading;
8618 font-size: $font-h3-size;
8619}
8620
8621.pxs-map-card-item-link {
8622 text-decoration: none;
8623}
8624
8625.pxs-newsletter-section {
8626 @extend %layout-container;
8627
8628 .form-fields-inline {
8629 text-align: center;
8630 }
8631
8632 .newsletter-success {
8633 text-align: center;
8634 }
8635
8636 .newsletter {
8637 font-size: $font-body-size;
8638
8639 .newsletter-input {
8640 width: calc(60% - #{$gutter-outer-small});
8641 max-width: rem(360px);
8642 }
8643
8644 .newsletter-submit {
8645 width: auto;
8646 max-width: 40%;
8647
8648 .button-primary {
8649 padding-right: $space-small;
8650 padding-left: $space-small;
8651 }
8652 }
8653 }
8654}
8655
8656.pxs-newsletter-heading {
8657 font-size: $font-h4-size;
8658 color: $color-heading;
8659
8660 @include media ($min: $bp-large) {
8661 font-size: $font-h3-size;
8662 }
8663}
8664
8665.pxs-newsletter-text {
8666 @extend %rte;
8667 font-size: $font-body-size;
8668 line-height: 1.5625;
8669}
8670
8671.pxs-newsletter-content {
8672 width: 100%;
8673}
8674
8675.pxs-newsletter {
8676 width: 100%;
8677 max-width: 100%;
8678}
8679
8680.pxs-newsletter-figure,
8681.pxs-newsletter-figure + .pxs-newsletter-content {
8682 @include media ($min: $bp-smaller) {
8683 width: 50%;
8684 }
8685}
8686
8687.pxs-image-with-text-section {
8688 @extend %layout-container;
8689 margin-top: $space-xx-large;
8690
8691 @include media($min: $bp-medium) {
8692 margin-bottom: $space-large;
8693 }
8694
8695 @include media($min: $bp-large) {
8696 margin-top: $space-xxx-large;
8697 }
8698}
8699
8700.pxs-image-with-text-background svg {
8701 //scss-lint:disable PlaceholderInExtend
8702 @extend .placeholder--image;
8703 //scss-lint:Enable PlaceholderInExtend
8704}
8705
8706.pxs-image-with-text-heading {
8707 font-size: $font-h3-size;
8708
8709 @include media ($min: $bp-small) {
8710 font-size: $font-heading-medium;
8711 }
8712
8713 @include media ($min: $bp-large) {
8714 font-size: $font-heading-large;
8715 }
8716}
8717
8718.pxs-image-with-text-subheading {
8719 font-size: $font-body-size;
8720 line-height: 1.5625;
8721}
8722
8723.pxs-image-with-text-button {
8724 @extend %button-primary;
8725 padding: $gutter-outer-small $space-xx-small;
8726 font-size: rem(14px);
8727
8728 @media (min-width: $bp-small) {
8729 padding: $space-x-small $gutter-outer-small;
8730 font-size: $font-body-size;
8731 }
8732
8733 @media (min-width: $bp-large) {
8734 padding: $gutter-outer-medium;
8735 font-size: $font-h5-size;
8736 }
8737}
8738
8739
8740// Templates
8741$local-account-width-small: 500px;
8742$local-account-width-medium: 640px;
8743
8744.account-page,
8745.account-page-masthead,
8746.account-page-content {
8747 @extend %page-content;
8748}
8749
8750.account-page-masthead {
8751 @extend %layout-container;
8752 text-align: center;
8753}
8754
8755.account-page-content {
8756 @extend %layout-container;
8757
8758 a {
8759 @extend %link--default;
8760 }
8761
8762 .form-field {
8763 margin-bottom: $space-medium;
8764 }
8765
8766 .form-fields-columns {
8767
8768 @include media($min: $bp-small) {
8769 margin-bottom: -1 * $space-medium;
8770 }
8771 }
8772}
8773
8774.account-page--two-column {
8775 @extend %clearfix;
8776
8777 .account-page--column-half {
8778 margin-top: $space-xx-large;
8779
8780 &:first-child {
8781 margin-top: 0;
8782 }
8783
8784 @include media($min: $bp-medium) {
8785 float: left;
8786 width: calc(50% - #{$gutter-content});
8787 margin-top: 0;
8788
8789 &:nth-child(2) {
8790 margin-left: $gutter-content * 2;
8791 }
8792 }
8793 }
8794
8795 .account-page--column-large {
8796 @include media($min: $bp-medium) {
8797 float: left;
8798 width: calc(70% - #{$gutter-content});
8799 }
8800
8801 @include media($min: $bp-xl) {
8802 float: left;
8803 width: calc(80% - #{$gutter-content});
8804 }
8805 }
8806
8807 .account-page--column-small {
8808 margin-top: $space-x-large;
8809
8810 @include media($min: $bp-medium) {
8811 float: left;
8812 width: calc(30% - #{$gutter-content});
8813 margin-top: 0;
8814 margin-left: $gutter-content * 2;
8815 }
8816
8817 @include media($min: $bp-xl) {
8818 width: calc(20% - #{$gutter-content});
8819 }
8820 }
8821}
8822
8823// Account titles
8824.account-page-title {
8825 margin-top: 0;
8826 margin-bottom: 0;
8827 font-size: $font-h1-size;
8828 color: $color-heading;
8829
8830 @include media($min: $bp-large) {
8831 font-size: $font-heading-medium;
8832 }
8833}
8834
8835.account-page-subtitle {
8836 margin-top: 0;
8837 margin-bottom: $space-small;
8838 font-size: $font-h4-size;
8839 color: $color-heading;
8840
8841 &:not(:first-child) {
8842 margin-top: $space-x-large;
8843 }
8844}
8845
8846// Account messages
8847.account-message {
8848 @extend %form-message;
8849 margin-bottom: $space-medium;
8850}
8851
8852// Login page
8853.account-login,
8854.account-recovery {
8855 display: none;
8856
8857 &.visible {
8858 display: block;
8859 }
8860}
8861
8862.account-page-login {
8863
8864 .account-page-content {
8865 max-width: $local-account-width-small;
8866 }
8867
8868 .account-register {
8869 margin-top: $space-large;
8870 }
8871}
8872
8873.account-page-login,
8874.account-page-register {
8875
8876 .form-action--submit {
8877 vertical-align: middle;
8878 }
8879
8880 .form-action-row--helper {
8881 margin-top: $space-small;
8882
8883 @include media($min: $bp-small) {
8884 display: inline-block;
8885 margin-top: 0;
8886 margin-left: $gutter-content;
8887 vertical-align: middle;
8888 }
8889 }
8890
8891 .form-action-row--helper-item {
8892 display: block;
8893 font-size: $font-body-size-small;
8894
8895 &:not(:first-child) {
8896 margin-top: $space-xx-small;
8897 }
8898 }
8899}
8900
8901// Account registration
8902.account-page-register {
8903 .account-page-content {
8904 max-width: $local-account-width-medium;
8905 }
8906}
8907
8908// Account challenges
8909.shopify-challenge__container {
8910 margin-top: $space-large;
8911 text-align: center;
8912
8913 .btn {
8914 @extend %button-primary;
8915 }
8916}
8917
8918// Account overview
8919.account-order-list {
8920 width: 100%;
8921 max-width: 600px;
8922 font-size: $font-body-size-smaller;
8923 border-collapse: collapse;
8924 border-spacing: 0 $gutter-content;
8925 table-layout: fixed;
8926
8927 tr {
8928 text-align: left;
8929 }
8930
8931 td:not(:last-child) {
8932 padding-right: $gutter-content / 2;
8933 }
8934
8935 tbody td {
8936 padding-top: $gutter-content / 2;
8937 }
8938}
8939
8940// Account address
8941.account-address-wrapper {
8942 display: -webkit-box;
8943 display: -webkit-flex;
8944 display: -ms-flexbox;
8945 display: flex;
8946 -webkit-flex-wrap: wrap;
8947 -ms-flex-wrap: wrap;
8948 flex-wrap: wrap;
8949 -webkit-box-pack: start;
8950 -webkit-justify-content: flex-start;
8951 -ms-flex-pack: start;
8952 justify-content: flex-start;
8953
8954 .ie9 & {
8955 font-size: 0;
8956 }
8957}
8958
8959.account-address {
8960 @extend %box-shadow;
8961 -webkit-box-flex: 0;
8962 -webkit-flex-grow: 0;
8963 -ms-flex-positive: 0;
8964 flex-grow: 0;
8965 -webkit-flex-shrink: 0;
8966 -ms-flex-negative: 0;
8967 flex-shrink: 0;
8968 width: 100%;
8969 padding: $space-medium;
8970 margin-top: $gutter-content;
8971 font-size: $font-body-size;
8972
8973 &:first-child {
8974 margin-top: 0;
8975 }
8976
8977 .ie9 & {
8978 display: inline-block;
8979 vertical-align: top;
8980 }
8981
8982 @include media($min: $bp-smaller) {
8983 width: calc(#{percentage(1 / 2)} - #{$gutter-content / 2});
8984 margin-right: $gutter-content;
8985
8986 &:nth-child(2) {
8987 margin-top: 0;
8988 }
8989
8990 &:nth-child(2n) {
8991 margin-right: 0;
8992 }
8993 }
8994}
8995
8996.account-info-item,
8997.account-address-item {
8998 margin-top: $space-small;
8999 margin-bottom: $space-small;
9000}
9001
9002.account-address-item--default {
9003 font-style: font-style($font-body, $font-style: italic);
9004}
9005
9006.account-address-list {
9007 padding-left: 0;
9008 margin-top: $space-medium;
9009 margin-bottom: $space-medium;
9010 list-style: none;
9011
9012 li {
9013 margin-top: $space-xx-small;
9014 }
9015}
9016
9017.account-address-list-footer {
9018 margin-top: $space-medium / 2;
9019
9020 button {
9021 margin-top: $space-medium / 2;
9022
9023 &:first-child {
9024 margin-right: $gutter-content;
9025
9026 @include media($min: $bp-medium, $max: $bp-large) {
9027 margin-right: $gutter-content / 2;
9028 }
9029 }
9030 }
9031}
9032
9033.account-address-form {
9034 display: none;
9035
9036 &.visible {
9037 display: block;
9038 }
9039}
9040
9041// Account activation + Password reset
9042.account-page-activate,
9043.account-page-reset-password {
9044 .account-page-content {
9045 max-width: $local-account-width-small;
9046 }
9047}
9048
9049$local-max-width: 680px;
9050
9051.contact-page-content {
9052 @extend %layout-container, %page-content;
9053 max-width: $local-max-width;
9054
9055 .form-field {
9056 margin-bottom: $space-medium;
9057 }
9058
9059 .form-fields-columns {
9060
9061 @include media($min: $bp-small) {
9062 margin-bottom: -1 * $space-medium;
9063 }
9064 }
9065
9066 .contact-message {
9067 @extend %form-message;
9068 margin-bottom: $space-medium;
9069 }
9070
9071 .contact-form-button {
9072 @include button-size(medium);
9073 }
9074}
9075
9076
9077// Components
9078$local-footer-accent: rgba($color-footer-text, 0.15);
9079
9080// Footer blocks
9081.site-footer-blocks {
9082 @include media($min: $bp-large) {
9083 display: -webkit-box;
9084 display: -webkit-flex;
9085 display: -ms-flexbox;
9086 display: flex;
9087 -webkit-box-orient: horizontal;
9088 -webkit-box-direction: normal;
9089 -webkit-flex-direction: row;
9090 -ms-flex-direction: row;
9091 flex-direction: row;
9092 -webkit-flex-wrap: nowrap;
9093 -ms-flex-wrap: nowrap;
9094 flex-wrap: nowrap;
9095 -webkit-box-pack: start;
9096 -webkit-justify-content: flex-start;
9097 -ms-flex-pack: start;
9098 justify-content: flex-start;
9099 }
9100}
9101
9102.site-footer-block-item {
9103 font-size: rem($font-body-size);
9104 border-bottom: 1px solid $local-footer-accent;
9105
9106 @include media($min: $bp-large) {
9107 -webkit-flex-basis: auto;
9108 -ms-flex-preferred-size: auto;
9109 flex-basis: auto;
9110 -webkit-box-flex: 0;
9111 -webkit-flex-grow: 0;
9112 -ms-flex-positive: 0;
9113 flex-grow: 0;
9114 -webkit-flex-shrink: 0;
9115 -ms-flex-negative: 0;
9116 flex-shrink: 0;
9117 width: calc(21% - #{$space-medium * 3 / 4});
9118 padding-right: $space-medium;
9119 margin-right: $space-medium;
9120 border-bottom: 0;
9121
9122 &:last-child {
9123 padding-right: 0;
9124 margin-right: 0;
9125 }
9126
9127 .column-count-5 & {
9128 width: calc(19% - #{$space-medium * 4 / 5});
9129 }
9130
9131 &.site-footer-block-newsletter {
9132 width: calc(24% - #{$space-medium * 4 / 5});
9133 }
9134
9135 .ie9 & {
9136 float: left;
9137 width: calc(19% - #{$space-medium * 4 / 5});
9138 }
9139 }
9140}
9141
9142.site-footer-block-title {
9143 position: relative;
9144 padding-top: $space-small;
9145 padding-bottom: $space-small;
9146 margin-top: 0;
9147 margin-bottom: 0;
9148 font-size: $font-h5-size;
9149
9150 @include media($max: $bp-large) {
9151 padding-top: $space-medium;
9152
9153 .site-footer-block-menu & {
9154 padding-top: $space-small;
9155 }
9156 }
9157}
9158
9159.site-footer-block-icon {
9160 position: absolute;
9161 top: 50%;
9162 right: $gutter-content / 2;
9163 display: block;
9164 height: 8px;
9165 margin-top: -4px;
9166
9167 svg {
9168 display: block;
9169 }
9170
9171 .icon-chevron-down-left,
9172 .icon-chevron-down-right {
9173 -webkit-transition-duration: 0s;
9174 transition-duration: 0s;
9175 }
9176
9177 @include media($min: $bp-large) {
9178 display: none;
9179 }
9180}
9181
9182.site-footer-block-content {
9183 padding-bottom: $space-medium;
9184 font-size: $font-body-size-small;
9185 line-height: 1.6;
9186
9187 .site-footer-block-newsletter & {
9188 padding-bottom: 0;
9189 margin-bottom: $space-medium;
9190 }
9191
9192 .site-footer-block-newsletter &,
9193 .site-footer-block-rich-text & {
9194 > *:first-child {
9195 margin-top: 0;
9196 }
9197
9198 > *:last-child {
9199 margin-bottom: 0;
9200 }
9201 }
9202
9203 @include media($min: $bp-large) {
9204 padding-bottom: 0;
9205 }
9206}
9207
9208.site-footer-block-menu {
9209
9210 .navmenu {
9211 padding-bottom: 0;
9212 padding-left: 0;
9213 margin: 0;
9214 list-style: none;
9215 }
9216
9217 .navmenu-item:not(:first-child) {
9218 margin-top: rem(8px);
9219
9220 @include media($min: $bp-small) {
9221 margin-top: rem(5px);
9222 }
9223 }
9224
9225 .site-footer-block-title {
9226 @include media($max: $bp-large) {
9227 cursor: pointer;
9228 }
9229 }
9230
9231 .site-footer-block-content {
9232 padding-bottom: 0;
9233
9234 @include media($min: $bp-large) {
9235 max-height: 1500px;
9236 opacity: 1;
9237 }
9238 }
9239
9240 &.accordion--active {
9241 .site-footer-block-content {
9242 padding-bottom: $space-medium;
9243 }
9244 }
9245}
9246
9247.site-footer-block-social-accounts {
9248
9249 .social-icons {
9250 margin-top: -4px;
9251 margin-right: -4px;
9252 margin-left: -4px;
9253 font-size: 0;
9254 }
9255
9256 .social-link {
9257 display: inline-block;
9258 width: 36px;
9259 height: 36px;
9260 padding: 4px;
9261 overflow: hidden;
9262 font-size: $font-body-size-small;
9263 line-height: 1.8;
9264 vertical-align: top;
9265
9266 svg {
9267 width: 28px;
9268 height: 28px;
9269 background-color: $local-footer-accent;
9270 border-radius: 100%;
9271 -webkit-transition: background-color 0.4s $ease-out-quad;
9272 transition: background-color 0.4s $ease-out-quad;
9273 }
9274
9275 &:hover svg {
9276 background-color: rgba($color-footer-text, 0.05);
9277 }
9278 }
9279}
9280
9281.site-footer-block-newsletter {
9282
9283 .newsletter {
9284 padding-bottom: $space-medium;
9285
9286 @include media($min: $bp-large) {
9287 margin-top: $space-medium - $space-small;
9288 }
9289
9290 .button-primary {
9291 padding-right: rem(15px);
9292 padding-left: rem(15px);
9293 }
9294
9295 .form-fields-inline {
9296 display: -webkit-box;
9297 display: -webkit-flex;
9298 display: -ms-flexbox;
9299 display: flex;
9300 -webkit-box-orient: horizontal;
9301 -webkit-box-direction: normal;
9302 -webkit-flex-direction: row;
9303 -ms-flex-direction: row;
9304 flex-direction: row;
9305 -webkit-flex-wrap: wrap;
9306 -ms-flex-wrap: wrap;
9307 flex-wrap: wrap;
9308 -webkit-box-pack: justify;
9309 -webkit-justify-content: space-between;
9310 -ms-flex-pack: justify;
9311 justify-content: space-between;
9312 width: calc(100% + #{$gutter-content / 2});
9313 margin-top: -1 * $space-small;
9314 margin-right: -1 * $gutter-content / 4;
9315 margin-left: -1 * $gutter-content / 4;
9316
9317 .ie9 & {
9318 margin-right: 0;
9319 margin-left: 0;
9320 }
9321 }
9322
9323 .form-field {
9324 -webkit-box-align: center;
9325 -webkit-align-items: center;
9326 -ms-flex-align: center;
9327 align-items: center;
9328 -webkit-box-flex: 1;
9329 -webkit-flex-grow: 1;
9330 -ms-flex-positive: 1;
9331 flex-grow: 1;
9332 -webkit-flex-shrink: 0;
9333 -ms-flex-negative: 0;
9334 flex-shrink: 0;
9335 margin-top: $space-small;
9336 margin-right: $gutter-content / 4;
9337 margin-left: $gutter-content / 4;
9338 white-space: nowrap;
9339 vertical-align: middle;
9340
9341 .ie9 & {
9342 width: 100%;
9343 margin-right: 0;
9344 margin-left: 0;
9345 }
9346 }
9347
9348 .newsletter-input {
9349 -webkit-flex-basis: calc(67% - #{$gutter-content});
9350 -ms-flex-preferred-size: calc(67% - #{$gutter-content});
9351 flex-basis: calc(67% - #{$gutter-content});
9352 min-width: 190px;
9353 }
9354
9355 .newsletter-submit {
9356 -webkit-flex-basis: calc(33% - #{$gutter-content});
9357 -ms-flex-preferred-size: calc(33% - #{$gutter-content});
9358 flex-basis: calc(33% - #{$gutter-content});
9359 }
9360 }
9361}
9362
9363.modal {
9364 //position: fixed;
9365 top: 0;
9366 right: 0;
9367 bottom: 0;
9368 left: 0;
9369 z-index: 0;
9370 display: none;
9371 padding: $gutter-outer-small;
9372 overflow: hidden;
9373 overflow-y: auto;
9374 white-space: nowrap;
9375 background-color: transparentize($color-black, 0.4);
9376 content: "";
9377 opacity: 0;
9378 visibility: hidden;
9379 -webkit-transition: opacity 0.15s ease;
9380 transition: opacity 0.15s ease;
9381 -webkit-overflow-scrolling: touch;
9382
9383 @include media($min: $bp-small) {
9384 padding: $gutter-outer-medium;
9385 }
9386
9387 @include media($min: $bp-large) {
9388 padding: $gutter-outer;
9389 }
9390
9391 .modal-loaded & {
9392 display: block;
9393 }
9394
9395 .modal-loaded.modal-visible & {
9396 z-index: $index-modal - 1;
9397 opacity: 1;
9398 visibility: visible;
9399 }
9400}
9401
9402.modal-inner {
9403 position: relative;
9404 z-index: -1;
9405 padding: $gutter-outer-medium;
9406 margin-right: auto;
9407 margin-left: auto;
9408 overflow: hidden;
9409 background-color: $color-background;
9410 opacity: 0;
9411 -webkit-transform: translateY(-50px);
9412 -ms-transform: translateY(-50px);
9413 transform: translateY(-50px);
9414 -webkit-transition:
9415 opacity 0.15s $ease-bubble 0.15s,
9416 -webkit-transform 0.25s $ease-bubble 0.1s;
9417 transition:
9418 opacity 0.15s $ease-bubble 0.15s,
9419 -webkit-transform 0.25s $ease-bubble 0.1s;
9420 transition:
9421 transform 0.25s $ease-bubble 0.1s,
9422 opacity 0.15s $ease-bubble 0.15s;
9423 transition:
9424 transform 0.25s $ease-bubble 0.1s,
9425 opacity 0.15s $ease-bubble 0.15s,
9426 -webkit-transform 0.25s $ease-bubble 0.1s;
9427
9428 @include media($min: $bp-small) {
9429 padding: $gutter-outer-medium;
9430 }
9431
9432 @include media($min: $bp-large) {
9433 padding: $gutter-outer;
9434 }
9435
9436 .modal-visible & {
9437 z-index: $index-modal;
9438 opacity: 1;
9439 -webkit-transform: translate3d(0, 0, 0);
9440 transform: translate3d(0, 0, 0);
9441 }
9442}
9443
9444.modal-close {
9445 @extend %button-reset;
9446 position: absolute;
9447 top: 0;
9448 right: 0;
9449 padding: rem(15px);
9450 color: $color-text;
9451
9452 @include media($min: $bp-large) {
9453 top: $gutter-outer-small;
9454 right: $gutter-outer-small;
9455 }
9456
9457 svg {
9458 display: block;
9459 color: currentColor;
9460 }
9461}
9462
9463.newsletter {
9464 width: 100%;
9465 font-size: 0;
9466
9467 .newsletter-success,
9468 .form-field {
9469 font-size: rem($font-body-size);
9470 }
9471
9472 .form-field {
9473 display: inline-block;
9474 vertical-align: middle;
9475 }
9476
9477 .newsletter-input {
9478 width: calc(67% - #{$gutter-content / 2});
9479 max-width: 245px;
9480 }
9481
9482 .newsletter-submit {
9483 width: 33%;
9484 margin-left: $gutter-content / 2;
9485 }
9486
9487 .button-primary { @include button-size(large); }
9488}
9489
9490$local-max-width: 680px;
9491
9492.site-page,
9493.page-masthead,
9494.page-content {
9495 @extend %page-content;
9496}
9497
9498.page-masthead {
9499 @extend %layout-container;
9500 text-align: center;
9501}
9502
9503.page-content {
9504 @extend %layout-container;
9505 max-width: $local-max-width;
9506}
9507
9508.page-title {
9509 font-size: $font-h1-size;
9510 color: $color-heading;
9511
9512 @include media($min: $bp-large) {
9513 font-size: $font-heading-medium;
9514 }
9515}
9516
9517.site-main {
9518 position: relative;
9519 z-index: $index-main;
9520}
9521
9522.site-navigation-wrapper {
9523 display: none;
9524 //z-index: -100;
9525 background-color: #FFF;
9526
9527 font-size:13px;
9528 //-webkit-transition: -webkit-transform 0.2s $ease-bubble;
9529 //transition: -webkit-transform 0.2s $ease-bubble;
9530 //transition: transform 0.2s $ease-bubble;
9531 //transition: transform 0.2s $ease-bubble, -webkit-transform 0.2s $ease-bubble;
9532 @include media($min: $bp-large) {
9533 display: block;
9534 }
9535
9536 .site-header-sticky--scrolled & {
9537 position: absolute;
9538 z-index: $index-header-internal-nav;
9539 width: 100%;
9540 -webkit-transform: translateY(-180%);
9541 -ms-transform: translateY(-180%);
9542 transform: translateY(-180%);
9543 }
9544
9545 .site-header-sticky--open & {
9546
9547 -webkit-transform: translateY(-15%);
9548 -ms-transform: translateY(-15%);
9549 transform: translateY(-15%);
9550 }
9551}
9552
9553.site-navigation {
9554 max-width: $max-width;
9555 padding-right: $gutter-outer-small;
9556 padding-left: $gutter-outer-small;
9557 margin-right: auto;
9558 margin-left: auto;
9559 margin-bottom: 0px;
9560 padding-bottom: 0px;
9561
9562
9563 @include media($min: $bp-small) {
9564 padding-right: $gutter-outer-medium;
9565 padding-left: $gutter-outer-medium;
9566 }
9567
9568 @include media($min: $bp-large) {
9569 padding-right: $gutter-outer;
9570 padding-left: $gutter-outer;
9571 }
9572 //background-color: $color-header-background;
9573
9574 ul {
9575 padding: 0;
9576 margin: 0;
9577 list-style: none;
9578 }
9579
9580 a {
9581 position: relative;
9582 display: inline-block;
9583 padding: $site-nav-link-space-vertical $site-nav-link-space-horizontal;
9584 line-height: $header-line-height;
9585 color: $color-header-text;
9586 text-decoration: none;
9587
9588 &:focus {
9589 outline: solid rgba($color-header-text, 0.5);
9590 outline-offset: -5px;
9591 }
9592
9593 &.navmenu-item-active:focus {
9594 outline: 0;
9595 }
9596 }
9597
9598 .navmenu-icon {
9599 position: absolute;
9600 top: 50%;
9601 right: $site-subnav-space + 5px;
9602 display: inline-block;
9603 height: 6px;
9604 margin-top: -3px;
9605
9606 &.navmenu-icon-depth-1 {
9607 position: relative;
9608 top: -1px;
9609 right: -5px;
9610 -webkit-transform: rotate(90deg);
9611 -ms-transform: rotate(90deg);
9612 transform: rotate(90deg);
9613 }
9614
9615 svg {
9616 display: block;
9617 width: 8px;
9618 height: 6px;
9619 -webkit-transform: rotate(-90deg);
9620 -ms-transform: rotate(-90deg);
9621 transform: rotate(-90deg);
9622 fill: currentColor;
9623 }
9624
9625 .icon-chevron-down-left,
9626 .icon-chevron-down-right {
9627 -webkit-transition: fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
9628 transition: fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
9629 transition: transform 0.4s $ease-out-quad, fill 0.4s $ease-out-quad;
9630 transition: transform 0.4s $ease-out-quad, fill 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
9631 -webkit-transform-origin: 50% 50%;
9632 -ms-transform-origin: 50% 50%;
9633 transform-origin: 50% 50%;
9634 }
9635 }
9636
9637 .navmenu {
9638 display: -webkit-box;
9639 display: -webkit-flex;
9640 display: -ms-flexbox;
9641 display: flex;
9642 -webkit-flex-wrap: wrap;
9643 -ms-flex-wrap: wrap;
9644 flex-wrap: wrap;
9645 padding: 0;
9646 }
9647
9648 .navmenu-depth-1 {
9649 display: inline-block;
9650 height: 100%;
9651 max-width: 100%;
9652 margin-left: -1 * $site-nav-link-space-horizontal;
9653
9654 .site-navigation--has-actions & {
9655 max-width: calc(100% - #{$header-content-offset-right});
9656 }
9657
9658 > li {
9659 display: inline-block;
9660 padding-top: $site-nav-item-space;
9661 padding-bottom: $site-nav-item-space;
9662 vertical-align: top;
9663
9664 > a {
9665 @include font($font-body, $font-family: false, $font-weight: bolder);
9666 -webkit-transition: opacity 0.15s ease;
9667 transition: opacity 0.15s ease;
9668
9669 &.navmenu-item-active,
9670 &.navmenu-active,
9671 &:active,
9672 &:focus {
9673 opacity: 0.8;
9674 }
9675 &:hover {
9676 color: red;
9677 opacity: 0.8;
9678
9679 }
9680 }
9681 }
9682 }
9683//navmenu for hovering
9684.navmenu-id-gaming:hover .navmenu-submenu,{
9685 display: block;
9686}
9687.navmenu-id-fashion:hover .navmenu-submenu,{
9688 display: block;
9689}
9690
9691
9692 .navmenu-submenu {
9693 position: absolute;
9694 top: 100%;
9695 z-index: 100;
9696 display: none;
9697 width: 240px;
9698 background-color: $color-background;
9699 -webkit-box-shadow: 0 3px 4px transparentize($color-border, 0.75);
9700 box-shadow: 0 3px 4px transparentize($color-border, 0.75);
9701 -webkit-transition: text-shadow 0.275s linear;
9702 transition: text-shadow 0.275s linear; // animation duration + delay
9703
9704 &.animating,
9705 &.visible {
9706 padding-top: $site-subnav-space;
9707 padding-bottom: $site-subnav-space;
9708 }
9709
9710 &.animating,
9711 &.visible:not(.animating) {
9712 &,
9713 & > li {
9714 display: block;
9715 }
9716
9717 & .navmenu-meganav-items {
9718 display: -webkit-box;
9719 display: -webkit-flex;
9720 display: -ms-flexbox;
9721 display: flex;
9722 }
9723 }
9724
9725 &.visible:not(.animating) {
9726 z-index: 100;
9727
9728 &,
9729 & > li,
9730 & .navmenu-meganav {
9731 opacity: 1;
9732 }
9733 }
9734
9735 &.animating-in {
9736 &,
9737 & > li {
9738 @extend %fade-in;
9739 }
9740
9741 > li,
9742 & .navmenu-meganav-items {
9743 -webkit-animation-delay: 0.05s;
9744 animation-delay: 0.05s;
9745 }
9746 }
9747
9748 &.animating-out {
9749 &,
9750 & > li,
9751 & .navmenu-meganav-items {
9752 opacity: 0;
9753 -webkit-transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
9754 transition: all 0.12s cubic-bezier(1, 0, 0.7, 1);
9755 }
9756 }
9757
9758 &.navmenu-submenu-inline-children {
9759 overflow-x: hidden;
9760 overflow-y: auto;
9761
9762 .navmenu-icon svg {
9763 -webkit-transform: rotate(0deg);
9764 -ms-transform: rotate(0deg);
9765 transform: rotate(0deg);
9766 }
9767
9768 .navmenu-depth-3 {
9769 position: relative;
9770 top: 0;
9771 left: 0;
9772 padding-top: 0;
9773 margin-left: 0;
9774 -webkit-box-shadow: none;
9775 box-shadow: none;
9776 }
9777 }
9778 }
9779
9780 .navmenu-depth-2 {
9781 margin-left: -1 * rem(10px);
9782
9783 .navmenu-link {
9784 @extend %link--text;
9785 z-index: 2;
9786 display: block;
9787 padding: rem($site-nav-link-space) rem($gutter-outer + $site-nav-link-space) rem($site-nav-link-space) rem($gutter-outer);
9788
9789 &:hover,
9790 &.navmenu-active {
9791 color: $color-link;
9792 }
9793
9794 &:focus {
9795 outline: solid rgba($color-link, 0.5);
9796 outline-offset: -3px;
9797 }
9798 }
9799
9800 // Third level drop downs don't animate
9801 .navmenu-submenu {
9802 &,
9803 & > li {
9804 -webkit-animation-name: none;
9805 animation-name: none;
9806 -webkit-transition: none;
9807 transition: none;
9808 }
9809 }
9810 }
9811
9812 .navmenu-depth-3 {
9813 top: -1 * $site-subnav-space;
9814 left: 100%;
9815 min-height: 100%;
9816 margin-left: -1px;
9817 }
9818
9819 .navmenu-link-parent,
9820 .navmenu-item-parent {
9821 position: relative;
9822
9823 }
9824
9825 .navmenu-meganav-item-parent,
9826 .navmenu-meganav-item-parent > a {
9827 position: inherit;
9828 }
9829}
9830
9831.site-header-actions {
9832 @include font($font-body, $font-family: false, $font-weight: bolder);
9833 padding-left: 0;
9834 margin-left: -200px;
9835 margin-top: 0;
9836 margin-bottom: 0;
9837 font-size: 13px;
9838 list-style: none;
9839
9840 li {
9841 display: inline-block;
9842
9843 a {
9844 padding-right: $site-nav-link-space-horizontal - 3px;
9845 padding-left: $site-nav-link-space-horizontal - 3px;
9846 }
9847 }
9848
9849 .site-navigation-wrapper & {
9850 display: inline-block;
9851 float: right;
9852 max-width: $header-content-offset-right;
9853 margin-top: $site-nav-item-space;
9854 text-align: right;
9855
9856 a {
9857 opacity: 0.8;
9858 }
9859 }
9860
9861 .site-mobile-nav & {
9862 display: block;
9863 height: $header-content-height;
9864 padding-right: $gutter-outer;
9865 margin: 4px 16px;
9866 font-size: $font-body-size;
9867
9868 li {
9869 line-height: $header-content-height;
9870 opacity: 0.8;
9871 }
9872
9873 a {
9874 padding-right: $site-nav-link-space-horizontal - 7px;
9875 padding-left: $site-nav-link-space-horizontal - 7px;
9876 }
9877 }
9878
9879 .site-header-account-link:last-child {
9880 margin-right: -1 * $site-nav-link-space;
9881 }
9882
9883 .currency-converter-wrapper {
9884
9885 .site-navigation-wrapper & {
9886 margin-right: -1 * rem(6px);
9887 opacity: 0.8;
9888 }
9889
9890 .form-field-select {
9891 @include font($font-body, $font-family: false, $font-weight: bolder);
9892 padding-top: $site-nav-item-space;
9893 padding-right: rem(20px);
9894 padding-bottom: $site-nav-item-space;
9895 font-size: $font-body-size-small;
9896 color: currentColor;
9897 border: 0;
9898 -webkit-box-shadow: none;
9899 box-shadow: none;
9900
9901 &:focus {
9902 outline: solid rgba($color-header-text, 0.5);
9903 }
9904
9905 // Some browsers extend <select> color to options
9906 // Style as consistently legible <option>
9907 option {
9908 font-weight: font-weight($font-body);
9909 color: $color-black;
9910 background-color: $color-white;
9911 }
9912
9913 .site-mobile-nav & {
9914 font-size: $font-body-size;
9915 }
9916 }
9917
9918 svg {
9919 right: $site-nav-link-space-horizontal - 8px;
9920 }
9921 }
9922}
9923
9924$local-padding: 2px;
9925$local-menu-offset: $local-padding + $gutter-outer;
9926$local-fade-width: 30px + $local-padding;
9927
9928.navmenu-meganav {
9929 &.navmenu-meganav--desktop {
9930 position: absolute;
9931 left: 0;
9932 float: left;
9933 width: 100%;
9934 margin-left: 0;
9935 overflow: hidden;
9936 -webkit-transform: translate3d(0, 0, 0);
9937 transform: translate3d(0, 0, 0);
9938 -webkit-backface-visibility: hidden;
9939 backface-visibility: hidden;
9940
9941 a {
9942 &:focus {
9943 outline-offset: -1 * $local-padding;
9944 }
9945 }
9946
9947 &.animating,
9948 &.visible {
9949 padding-top: 0;
9950 padding-bottom: 0;
9951 }
9952
9953 &.animating-in {
9954 @extend %fade-in;
9955 }
9956
9957 .ie9 & {
9958 @extend %clearfix;
9959 }
9960
9961 .navmenu-meganav-items {
9962 position: relative;
9963 z-index: 1;
9964 display: -webkit-box;
9965 display: -webkit-flex;
9966 display: -ms-flexbox;
9967 display: flex;
9968 -webkit-box-align: start;
9969 -webkit-align-items: flex-start;
9970 -ms-flex-align: start;
9971 align-items: flex-start;
9972 -webkit-flex-wrap: nowrap;
9973 -ms-flex-wrap: nowrap;
9974 flex-wrap: nowrap;
9975 -webkit-box-pack: start;
9976 -webkit-justify-content: flex-start;
9977 -ms-flex-pack: start;
9978 justify-content: flex-start;
9979 padding-top: $site-subnav-space + 3px; // Thse numbers create better spacing effect
9980 padding-bottom: $site-subnav-space + 10px;
9981 margin-right: -1 * $local-menu-offset;
9982 margin-left: -1 * $local-menu-offset;
9983 overflow-x: auto;
9984 white-space: nowrap;
9985 -webkit-overflow-scrolling: touch;
9986 }
9987
9988 .navmenu-icon {
9989
9990 &.navmenu-icon-depth-2 {
9991 display: none;
9992 }
9993
9994 &.navmenu-icon-depth-3 {
9995 position: relative;
9996 top: -1px;
9997 right: -2px;
9998 }
9999
10000 svg {
10001 -webkit-transform: rotate(0deg);
10002 -ms-transform: rotate(0deg);
10003 transform: rotate(0deg);
10004 }
10005 }
10006
10007 .navmenu-meganav-item {
10008 -webkit-flex-basis: 225px;
10009 -ms-flex-preferred-size: 225px;
10010 flex-basis: 225px;
10011 -webkit-box-flex: 1;
10012 -webkit-flex-grow: 1;
10013 -ms-flex-positive: 1;
10014 flex-grow: 1;
10015 -webkit-flex-shrink: 0;
10016 -ms-flex-negative: 0;
10017 flex-shrink: 0;
10018 -webkit-box-pack: justify;
10019 -webkit-justify-content: space-between;
10020 -ms-flex-pack: justify;
10021 justify-content: space-between;
10022 min-width: 225px;
10023 padding-right: $local-padding;
10024 padding-left: $local-padding;
10025
10026 &.navmenu-item-count-1 {
10027 width: 100%;
10028 }
10029
10030 &.navmenu-item-count-2 {
10031 width: 50%;
10032 }
10033
10034 &.navmenu-item-count-3 {
10035 width: percentage(1 / 3);
10036 }
10037
10038 &.navmenu-item-count-4 {
10039 width: 25%;
10040 }
10041
10042 &.navmenu-item-count-5-up {
10043 width: 20%;
10044 }
10045
10046 .ie9 & {
10047 float: left;
10048 }
10049 }
10050
10051 .navmenu-depth-4,
10052 .navmenu-depth-3 {
10053 position: relative;
10054 top: 0;
10055 left: auto;
10056 z-index: 1;
10057 width: 100%;
10058 -webkit-transform: translate(0);
10059 -ms-transform: translate(0);
10060 transform: translate(0);
10061 -webkit-box-shadow: none;
10062 box-shadow: none;
10063 }
10064
10065 .navmenu-depth-3 {
10066 display: block;
10067 height: auto;
10068 padding: 0;
10069 margin-top: rem(4px);
10070 margin-left: 0;
10071 opacity: 1;
10072 }
10073
10074 .navmenu-depth-3 .navmenu-submenu {
10075 padding-top: rem(2.5px);
10076 padding-bottom: $site-subnav-space / 2;
10077 padding-left: 12px;
10078 }
10079
10080 .navmenu-item-text {
10081 @include font($font-body, $font-family: false, $font-weight: bolder);
10082 display: block;
10083 padding: rem($site-nav-link-space) rem($gutter-outer);
10084 font-size: $font-h5-size;
10085 color: $color-text;
10086 }
10087
10088 .navmenu-link {
10089 padding: rem($site-nav-link-space) rem($gutter-outer - $local-padding) rem($site-nav-link-space) rem($gutter-outer);
10090 white-space: normal;
10091 }
10092 }
10093}
10094
10095.navmenu-meganav--scroller {
10096 @extend %layout-container;
10097 position: relative;
10098
10099 &.has-meganav-image {
10100 @extend %layout-container;
10101 margin: 0 $gutter-content;
10102 }
10103
10104 .site-mobile-nav & {
10105 padding-right: 0;
10106 padding-left: 0;
10107 }
10108
10109 &::before,
10110 &::after {
10111 position: absolute;
10112 top: 0;
10113 bottom: 0;
10114 z-index: 2;
10115 display: block;
10116 width: $local-fade-width;
10117 pointer-events: none;
10118 background-color: transparent;
10119 content: "";
10120 opacity: 0;
10121 -webkit-transition: opacity 0.2s $ease-out-quad;
10122 transition: opacity 0.2s $ease-out-quad;
10123 }
10124
10125 &::before {
10126 left: -1 * $local-padding;
10127 background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-background, 1)), to(rgba($color-background, 0)));
10128 background-image: linear-gradient(90deg, rgba($color-background, 1) 0%, rgba($color-background, 0) 100%);
10129
10130 .ie9 & {
10131 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-background, 0))}', endColorstr='#{ie-hex-str(rgba($color-background, 1))}', GradientType=1);
10132 }
10133 }
10134
10135 &::after {
10136 right: -1 * $local-padding;
10137 background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-background, 0)), to(rgba($color-background, 1)));
10138 background-image: linear-gradient(90deg, rgba($color-background, 0) 0%, rgba($color-background, 1) 100%);
10139
10140 .ie9 & {
10141 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-background, 0))}', endColorstr='#{ie-hex-str(rgba($color-background, 1))}', GradientType=1);
10142 }
10143 }
10144
10145 .meganav--overflows-right &::after,
10146 .meganav--overflows-left &::before {
10147 opacity: 1;
10148 }
10149}
10150
10151.site-mobile-nav .navmenu-meganav--image {
10152 width: 100%;
10153}
10154
10155.navmenu-meganav--image-size-small {
10156 display: block;
10157 width: 200px;
10158}
10159
10160.navmenu-meganav--image-size-medium {
10161 width: 300px;
10162}
10163
10164.navmenu-meganav--image-size-large {
10165 width: 400px;
10166}
10167
10168li.navmenu-meganav--image-container {
10169 position: relative;
10170 margin: $gutter-content / 2 $gutter-outer $gutter-content;
10171
10172 .site-mobile-nav & {
10173 margin: $gutter-content 0;
10174 padding: 0 $gutter-content 0 $gutter-outer;
10175 }
10176}
10177
10178.navmenu-meganav--image-text {
10179 margin-top: $space-x-small;
10180 margin-bottom: 0;
10181 color: $color-text;
10182}
10183
10184.site-navigation .navmenu-meganav--image-link {
10185 @extend %link--text;
10186 padding: 0;
10187 color: $color-text;
10188}
10189
10190.navmenu-meganav--image-last {
10191 -webkit-box-ordinal-group: 2;
10192 -webkit-order: 1;
10193 -ms-flex-order: 1;
10194 order: 1;
10195}
10196
10197$local-link-space: 13px;
10198
10199.site-mobile-nav {
10200 display: none;
10201 opacity: 0;
10202
10203 &.animating-in {
10204 -webkit-transition: text-shadow 0.4s linear;
10205 transition: text-shadow 0.4s linear; // sneak-in-meganav animation duration
10206 }
10207
10208 &.animating-out {
10209 -webkit-transition: text-shadow 0.3s linear;
10210 transition: text-shadow 0.3s linear; // sneak-out-mobilenav animation length
10211 }
10212
10213 &.animating,
10214 &.visible {
10215 display: block;
10216 opacity: 1;
10217 }
10218}
10219
10220.mobile-nav-panel {
10221 position: fixed;
10222 top: 0;
10223 bottom: 0;
10224 z-index: $index-mobile-nav + 2;
10225 display: none;
10226 width: 100%;
10227 height: 100%;
10228 max-width: 325px;
10229 overflow-x: hidden;
10230 overflow-y: scroll;
10231 color: $color-text;
10232 background-color: $color-background;
10233 -webkit-transition: -webkit-transform 0.4s $ease-out-quad;
10234 transition: -webkit-transform 0.4s $ease-out-quad;
10235 transition: transform 0.4s $ease-out-quad;
10236 transition: transform 0.4s $ease-out-quad, -webkit-transform 0.4s $ease-out-quad;
10237 -webkit-overflow-scrolling: touch;
10238
10239 .animating-in &,
10240 .visible & {
10241 display: block;
10242 -webkit-transform: translate3d(0, 0, 0);
10243 transform: translate3d(0, 0, 0);
10244 }
10245
10246 .animating-in & {
10247 -webkit-animation-delay: 0s;
10248 animation-delay: 0s;
10249 -webkit-animation-duration: 0.4s;
10250 animation-duration: 0.4s;
10251 -webkit-animation-name: sneak-in-mobilenav;
10252 animation-name: sneak-in-mobilenav;
10253 -webkit-animation-timing-function: linear;
10254 animation-timing-function: linear;
10255 -webkit-animation-fill-mode: both;
10256 animation-fill-mode: both;
10257 -webkit-animation-direction: normal;
10258 animation-direction: normal;
10259 }
10260
10261 .animating-out & {
10262 -webkit-animation-delay: 0s;
10263 animation-delay: 0s;
10264 -webkit-animation-duration: 0.2s;
10265 animation-duration: 0.2s;
10266 -webkit-animation-name: sneak-out-mobilenav;
10267 animation-name: sneak-out-mobilenav;
10268 -webkit-animation-timing-function: linear;
10269 animation-timing-function: linear;
10270 -webkit-animation-fill-mode: both;
10271 animation-fill-mode: both;
10272 -webkit-animation-direction: normal;
10273 animation-direction: normal;
10274 }
10275
10276 a {
10277 color: currentColor;
10278 text-decoration: none;
10279 }
10280}
10281
10282.mobile-nav-overlay {
10283 position: fixed;
10284 top: 0;
10285 right: 0;
10286 bottom: 0;
10287 left: 0;
10288 z-index: $index-mobile-nav + 1;
10289 display: block;
10290 height: 100%;
10291 background-color: $color-overlay-background;
10292
10293 .animating-out &,
10294 .visible & {
10295 display: block;
10296 }
10297
10298 .animating-in & {
10299 -webkit-animation-delay: 0s;
10300 animation-delay: 0s;
10301 -webkit-animation-duration: 0.4s;
10302 animation-duration: 0.4s;
10303 -webkit-animation-name: overlay-fade-in;
10304 animation-name: overlay-fade-in;
10305 -webkit-animation-timing-function: linear;
10306 animation-timing-function: linear;
10307 -webkit-animation-direction: normal;
10308 animation-direction: normal;
10309 }
10310
10311 .animating-out & {
10312 opacity: 0;
10313 -webkit-animation-delay: 0.1s;
10314 animation-delay: 0.1s;
10315 -webkit-animation-duration: 0.2s;
10316 animation-duration: 0.2s;
10317 -webkit-animation-name: overlay-fade-out;
10318 animation-name: overlay-fade-out;
10319 -webkit-animation-timing-function: linear;
10320 animation-timing-function: linear;
10321 -webkit-animation-fill-mode: both;
10322 animation-fill-mode: both;
10323 -webkit-animation-direction: normal;
10324 animation-direction: normal;
10325 }
10326}
10327
10328.mobile-nav-close {
10329 position: absolute;
10330 top: 10px;
10331 right: 7px;
10332 width: 33px;
10333 height: 33px;
10334 padding: 10px;
10335
10336 svg {
10337 display: block;
10338 width: 13px;
10339 height: 13px;
10340 vertical-align: middle;
10341 }
10342}
10343
10344.mobile-nav-content {
10345 min-height: 100%;
10346 padding-top: 20px;
10347 padding-bottom: 60px;
10348
10349 .site-header-actions ~ & {
10350 min-height: calc(100% - #{$header-content-height});
10351 }
10352
10353 .navmenu {
10354 display: -webkit-box;
10355 display: -webkit-flex;
10356 display: -ms-flexbox;
10357 display: flex;
10358 -webkit-flex-wrap: wrap;
10359 -ms-flex-wrap: wrap;
10360 flex-wrap: wrap;
10361 padding: 0;
10362 margin: 0;
10363 list-style: none;
10364 }
10365
10366 li {
10367 width: 100%;
10368 margin-right: 0;
10369 margin-left: 0;
10370 }
10371
10372 .navmenu-depth-1 {
10373 @include font($font-body, $font-family: false, $font-weight: bolder);
10374 font-size: rem($font-body-size + 1);
10375 }
10376
10377 .navmenu-depth-2 {
10378 @include font($font-body, $font-family: false, $font-weight: initial);
10379 font-size: rem($font-body-size);
10380 background-color: mix($color-text, $color-background, 10%);
10381
10382 .navmenu-submenu {
10383 padding: 0 rem(10px);
10384 }
10385 }
10386
10387 .navmenu-submenu {
10388 max-height: 0;
10389 overflow: hidden;
10390 opacity: 0;
10391 -webkit-transition: max-height 0.25s ease, opacity 0.15s ease;
10392 transition: max-height 0.25s ease, opacity 0.15s ease;
10393
10394 &.visible {
10395 max-height: 999999px;
10396 opacity: 1;
10397 }
10398 }
10399
10400 .navmenu-link,
10401 .navmenu-item-text {
10402 position: relative;
10403 display: block;
10404 padding: rem($local-link-space) rem($gutter-outer);
10405 cursor: pointer;
10406 -webkit-transition: color 0.1s ease-in;
10407 transition: color 0.1s ease-in;
10408
10409 &.navmenu-link-parent {
10410 padding-right: rem($local-link-space + 10px);
10411 }
10412 }
10413
10414 .navmenu-link {
10415
10416 &:focus {
10417 outline: solid rgba($color-header-background, 0.5);
10418 outline-offset: -3px;
10419 }
10420 }
10421
10422 .navmenu-icon {
10423 position: absolute;
10424 top: 50%;
10425 right: rem(20px);
10426 display: inline-block;
10427 margin-top: -3px;
10428
10429 svg {
10430 display: block;
10431 width: 8px;
10432 height: 6px;
10433 -webkit-transform: scale(1.25);
10434 -ms-transform: scale(1.25);
10435 transform: scale(1.25);
10436 fill: currentColor;
10437 }
10438
10439 .icon-chevron-down-left,
10440 .icon-chevron-down-right {
10441 -webkit-transform: rotate(0);
10442 -ms-transform: rotate(0);
10443 transform: rotate(0);
10444 -webkit-transition: fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
10445 transition: fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
10446 transition: transform 0s, fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
10447 transition: transform 0s, fill 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0s;
10448 -webkit-transform-origin: 50% 50%;
10449 -ms-transform-origin: 50% 50%;
10450 transform-origin: 50% 50%;
10451 }
10452 }
10453
10454 .navmenu-link-parent-active {
10455 color: $color-link;
10456
10457 .icon-chevron-down-left {
10458 -webkit-transform: rotate(45deg);
10459 -ms-transform: rotate(45deg);
10460 transform: rotate(45deg);
10461 }
10462
10463 .icon-chevron-down-right {
10464 -webkit-transform: rotate(-45deg);
10465 -ms-transform: rotate(-45deg);
10466 transform: rotate(-45deg);
10467 }
10468 }
10469}
10470
10471.home-section--title {
10472 padding-bottom: 20px;
10473 transform: translateY(20%);
10474 margin-top: $space-xx-large;
10475 //margin-bottom: $space-medium;
10476 font-size: $font-h1-size;
10477 color: $color-heading;
10478 //text-align: center;
10479 //background-color: #ededed;
10480 background-color: #FFF;
10481
10482 @include media($min: $bp-medium) {
10483 margin-bottom: 0;
10484 }
10485
10486 @include media($min: $bp-large) {
10487 margin-top: 20px;
10488 }
10489}
10490
10491.home-section--content {
10492 margin-top: $space-medium;
10493
10494 @include media($min: $bp-medium) {
10495 margin-top: $space-large;
10496 }
10497
10498 .shopify-section:first-child &:first-child {
10499 margin-top: rem($gutter-outer-small);
10500
10501 @include media($min: $bp-small) {
10502 margin-top: rem($gutter-outer-medium);
10503 }
10504
10505 @include media($min: $bp-large) {
10506 margin-top: rem($gutter-outer);
10507 }
10508 }
10509}
10510
10511$local-expander-width: rem(70px);
10512
10513.promo-block {
10514 position: relative;
10515 background-position: 50% 50%;
10516 background-repeat: no-repeat;
10517 background-size: cover;
10518
10519 @include media($max: $bp-small) {
10520 border-radius: 4px;
10521 }
10522}
10523
10524.promo-block--content-wrapper {
10525 max-width: 60%;
10526 -webkit-transition: font-size 0.23s $ease-bubble;
10527 transition: font-size 0.23s $ease-bubble;
10528
10529 @include media($max: $bp-small) {
10530 max-width: 75%;
10531 overflow: hidden;
10532 text-overflow: ellipsis;
10533 white-space: nowrap;
10534
10535 .promo-block--expanded:not(.animating-out) & {
10536 white-space: normal;
10537 }
10538
10539 .promo-block--expanded &,
10540 .promo-block--expanded:not(.animating-out) & {
10541 max-width: 85%;
10542 }
10543 }
10544
10545 .promo-mosaic--column-narrow & {
10546 @include media($min: $bp-small) {
10547 max-width: 70%;
10548 }
10549 }
10550
10551 .promo-grid--container & {
10552 @include media($min: $bp-small, $max: $bp-medium) {
10553 max-width: 80%;
10554 }
10555 }
10556}
10557
10558.promo-block--content {
10559 position: relative;
10560 display: -webkit-box;
10561 display: -webkit-flex;
10562 display: -ms-flexbox;
10563 display: flex;
10564 height: 100%;
10565
10566 padding: $space-x-large $space-medium;
10567 color: currentColor;
10568 text-decoration: none;
10569 -webkit-transition: height 0.23s $ease-bubble;
10570 transition: height 0.23s $ease-bubble;
10571
10572 &.promo-block--content-align-top-center {
10573 -webkit-box-align: start;
10574 -webkit-align-items: flex-start;
10575 -ms-flex-align: start;
10576 align-items: flex-start;
10577 -webkit-box-pack: center;
10578 -webkit-justify-content: center;
10579 -ms-flex-pack: center;
10580 justify-content: center;
10581 text-align: center;
10582 }
10583
10584 &.promo-block--content-align-top-right {
10585 -webkit-box-align: start;
10586 -webkit-align-items: flex-start;
10587 -ms-flex-align: start;
10588 align-items: flex-start;
10589 -webkit-box-pack: end;
10590 -webkit-justify-content: flex-end;
10591 -ms-flex-pack: end;
10592 justify-content: flex-end;
10593 text-align: right;
10594 }
10595
10596 &.promo-block--content-align-center-left {
10597 -webkit-box-align: center;
10598 -webkit-align-items: center;
10599 -ms-flex-align: center;
10600 align-items: center;
10601 }
10602
10603 &.promo-block--content-align-center-center {
10604 -webkit-box-align: center;
10605 -webkit-align-items: center;
10606 -ms-flex-align: center;
10607 align-items: center;
10608 -webkit-box-pack: center;
10609 -webkit-justify-content: center;
10610 -ms-flex-pack: center;
10611 justify-content: center;
10612 text-align: center;
10613 }
10614
10615 &.promo-block--content-align-center-right {
10616 -webkit-box-align: center;
10617 -webkit-align-items: center;
10618 -ms-flex-align: center;
10619 align-items: center;
10620 -webkit-box-pack: end;
10621 -webkit-justify-content: flex-end;
10622 -ms-flex-pack: end;
10623 justify-content: flex-end;
10624 text-align: right;
10625 }
10626
10627 &.promo-block--content-align-bottom-left {
10628 -webkit-box-align: end;
10629 -webkit-align-items: flex-end;
10630 -ms-flex-align: end;
10631 align-items: flex-end;
10632 -webkit-box-pack: start;
10633 -webkit-justify-content: flex-start;
10634 -ms-flex-pack: start;
10635 justify-content: flex-start;
10636 }
10637
10638 &.promo-block--content-align-bottom-center {
10639 -webkit-box-align: end;
10640 -webkit-align-items: flex-end;
10641 -ms-flex-align: end;
10642 align-items: flex-end;
10643 -webkit-box-pack: center;
10644 -webkit-justify-content: center;
10645 -ms-flex-pack: center;
10646 justify-content: center;
10647 text-align: center;
10648 }
10649
10650 &.promo-block--content-align-bottom-right {
10651 -webkit-box-align: end;
10652 -webkit-align-items: flex-end;
10653 -ms-flex-align: end;
10654 align-items: flex-end;
10655 -webkit-box-pack: end;
10656 -webkit-justify-content: flex-end;
10657 -ms-flex-pack: end;
10658 justify-content: flex-end;
10659 text-align: right;
10660 }
10661
10662 @include media($max: $bp-small) {
10663 height: 120px;
10664 padding-right: $local-expander-width + $space-medium;
10665 margin-top: 10px;
10666 cursor: pointer;
10667
10668 &.animating,
10669 &.promo-block--expanded {
10670 overflow: hidden;
10671 }
10672
10673 &.animating-in,
10674 &.promo-block--expanded:not(.animating-out) {
10675 height: 270px;
10676 }
10677
10678 &.promo-block--expanded,
10679 &.promo-block--expanded:not(.animating-out) {
10680 padding-right: 1.25em;
10681 }
10682
10683 &.promo-block--expanded.promo-block--unlinked {
10684 cursor: default;
10685 }
10686 }
10687
10688 @include media($min: $bp-large-home) {
10689 padding: $space-large;
10690 }
10691}
10692
10693.promo-block--background {
10694 position: absolute;
10695 width: 100%;
10696 height: 100%;
10697}
10698
10699.promo-block--expander {
10700
10701 position: absolute;
10702 top: 0;
10703 right: 0;
10704 bottom: 0;
10705 width: $local-expander-width;
10706 color: $color-white;
10707 cursor: pointer;
10708 background-color: transparent;
10709 background-image: -webkit-gradient(linear, left top, right top, from(rgba($color-black, 0)), to(rgba($color-black, 0.3)));
10710 background-image: linear-gradient(90deg, rgba($color-black, 0) 0%, rgba($color-black, 0.3) 100%);
10711 border: 0;
10712 border-radius: 0 4px 4px 0;
10713 outline: 0;
10714 -webkit-transition: opacity 0.23s $ease-bubble;
10715 transition: opacity 0.23s $ease-bubble;
10716
10717 @include media($min: $bp-small) {
10718 display: none;
10719 }
10720
10721 // Button should be hidden when expanded
10722 .promo-block--expanded & {
10723 visibility: hidden;
10724 }
10725
10726 // Button should be visible when expanded, but is collapsing
10727 .promo-block--expanded.animating-out & {
10728 visibility: visible;
10729 }
10730
10731 // Button should be transparent when collapsing, then opaque as expanding
10732 .animating-in &,
10733 .promo-block--expanded:not(.animating-out) & {
10734 opacity: 0;
10735 -webkit-transition-delay: 0s;
10736 transition-delay: 0s;
10737 }
10738
10739 .ie9 & {
10740 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(rgba($color-black, 0))}', endColorstr='#{ie-hex-str(rgba($color-black, 0.3))}', GradientType=1);
10741 }
10742
10743 svg {
10744 position: absolute;
10745 bottom: 50%;
10746 left: 50%;
10747 display: block;
10748 width: 20px;
10749 height: 12px;
10750 margin-bottom: -7px;
10751 margin-left: -10px;
10752 overflow: visible;
10753 -webkit-filter: drop-shadow(0 0 4px rgba($color-black, 0.6));
10754 filter: drop-shadow(0 0 4px rgba($color-black, 0.6));
10755 -webkit-transform-origin: 50% 50%;
10756 -ms-transform-origin: 50% 50%;
10757 transform-origin: 50% 50%;
10758 }
10759}
10760
10761
10762.promo-block--text,
10763.promo-block--header {
10764 -webkit-transition: font-size 0.23s $ease-bubble;
10765 transition: font-size 0.23s $ease-bubble;
10766
10767 @include media($max: $bp-small) {
10768 overflow: hidden;
10769 text-overflow: ellipsis;
10770 white-space: nowrap;
10771
10772 .promo-block--expanded:not(.animating-out) & {
10773 white-space: normal;
10774 }
10775 }
10776}
10777
10778.promo-block--header {
10779 margin-top: -070px;
10780 margin-bottom: 0;
10781 font-size: $font-h3-size;
10782 line-height: 1.2;
10783 color: #000;
10784
10785 @include media($max: $bp-small) {
10786 .animating-in &,
10787 .promo-block--expanded:not(.animating-out) & {
10788 font-size: $font-h1-size;
10789 }
10790 }
10791
10792 @include media($min: $bp-small) {
10793 .promo-mosaic--column-full &,
10794 .promo-mosaic--column-wide & {
10795 font-size: $font-heading-medium;
10796 }
10797
10798 .promo-grid--container & {
10799 font-size: $font-h3-size;
10800 }
10801 }
10802
10803 @include media($min: $bp-large) {
10804 line-height: 1.4;
10805
10806 .promo-mosaic--column-full &,
10807 .promo-mosaic--column-wide & {
10808 font-size: $font-heading-large;
10809 }
10810
10811 .promo-mosaic--column-narrow & {
10812 font-size: $font-h3-size;
10813 }
10814
10815 .promo-grid--container & {
10816 font-size: $font-heading-medium;
10817 }
10818 }
10819}
10820
10821.promo-block--text {
10822 margin-top: $space-xxx-small;
10823 margin-bottom: 0;
10824 font-size: $font-body-size-small;
10825 line-height: 1.4;
10826
10827 @include media($max: $bp-small) {
10828 .animating-in &,
10829 .promo-block--expanded & {
10830 font-size: $font-h5-size;
10831 }
10832 }
10833
10834 @include media($min: $bp-small) {
10835 .promo-mosaic--column-full &,
10836 .promo-mosaic--column-wide & {
10837 font-size: $font-h5-size;
10838 }
10839 }
10840
10841 @include media($min: $bp-large) {
10842 .promo-mosaic--column-full &,
10843 .promo-mosaic--column-wide & {
10844 font-size: $font-h4-size;
10845 }
10846
10847 .promo-mosaic--column-narrow &,
10848 .promo-grid--container & {
10849 font-size: $font-h5-size;
10850 }
10851 }
10852}
10853
10854.promo-block--button {
10855 display: none;
10856 margin-top: $space-medium;
10857 -webkit-transition:
10858 background-color 0.4s $ease-out-quad,
10859 font-size 0.15s $ease-out-quad,
10860 padding 0.15s $ease-out-quad,
10861 opacity 0.23s $ease-bubble;
10862 transition:
10863 background-color 0.4s $ease-out-quad,
10864 font-size 0.15s $ease-out-quad,
10865 padding 0.15s $ease-out-quad,
10866 opacity 0.23s $ease-bubble;
10867 opacity: 0;
10868
10869 .animating-in &,
10870 .promo-block--expanded & {
10871 display: inline-block;
10872 }
10873
10874 .promo-block--expanded:not(.animating-out) & {
10875 opacity: 1;
10876 }
10877
10878 @include media($min: $bp-small) {
10879 display: inline-block;
10880 opacity: 1;
10881
10882 .promo-mosaic--column-full,
10883 .promo-mosaic--column-wide & { @include button-size(medium); }
10884 }
10885
10886 @include media($min: $bp-large) {
10887 .promo-mosaic--column-full,
10888 .promo-mosaic--column-wide & {
10889 @include button-size(large);
10890 margin-top: $font-heading-medium;
10891 }
10892
10893 .promo-mosaic--column-narrow &,
10894 .promo-grid--container & { @include button-size(medium); }
10895 }
10896}
10897
10898.rte .tabs,
10899.rte .tabs-content {
10900 padding-left: 0;
10901 margin-left: 0;
10902 list-style: none;
10903}
10904
10905.rte .tabs {
10906 margin-top: $space-large;
10907
10908 li {
10909 display: inline-block;
10910 cursor: pointer;
10911
10912 &:not(:first-child) {
10913 margin-left: $space-large;
10914 }
10915
10916 &,
10917 > a {
10918 @extend %link--text;
10919 }
10920
10921 &.active,
10922 &.active a {
10923 @extend %link--default;
10924 }
10925 }
10926}
10927
10928.rte .tabs-content {
10929 margin-top: $space-medium;
10930
10931 > li {
10932 display: none;
10933
10934 &.active {
10935 display: block;
10936 }
10937 }
10938}
10939
10940$local-bp-xs-tween: 480px;
10941$local-bp-xs-tween-large: 560px;
10942$local-padding-small: rem(15px);
10943$local-padding-large: $space-medium;
10944
10945$local-cart-image-width-small: 75px;
10946$local-cart-image-width-large: 120px;
10947
10948$local-icon-remove: rem(20px);
10949$local-quantity-width: $quantity-width + $local-padding-large;
10950$local-total-width: rem(120px);
10951
10952.cart-item {
10953 @extend %box-shadow;
10954 position: relative;
10955 display: -webkit-box;
10956 display: -webkit-flex;
10957 display: -ms-flexbox;
10958 display: flex;
10959 padding: $local-padding-small;
10960 margin-bottom: $space-medium;
10961 overflow: hidden;
10962 -webkit-transition: all 0.2s ease-out;
10963 transition: all 0.2s ease-out;
10964
10965 @include media($min: $bp-small) {
10966 padding: $local-padding-large;
10967 }
10968
10969 @include media($min: $bp-large) {
10970 -webkit-box-align: center;
10971 -webkit-align-items: center;
10972 -ms-flex-align: center;
10973 align-items: center;
10974 }
10975
10976 &.removing {
10977 height: 0 !important;
10978 padding-top: 0;
10979 padding-bottom: 0;
10980 margin-bottom: 0;
10981 border-top-width: 0;
10982 border-bottom-width: 0;
10983 }
10984
10985 .ie9 & {
10986 font-size: 0;
10987 }
10988}
10989
10990// Image
10991.cart-item--image-wrapper {
10992 width: $local-cart-image-width-small;
10993 margin: 0;
10994
10995 @include media($min: $local-bp-xs-tween) {
10996 width: $local-cart-image-width-large;
10997 }
10998
10999 .ie9 & {
11000 display: inline-block;
11001 vertical-align: top;
11002 }
11003
11004 svg,
11005 img {
11006 display: block;
11007 max-width: 100%;
11008 margin: 0 auto;
11009 }
11010}
11011
11012// Inner (wraps non-image content)
11013.cart-item--inner {
11014 width: calc(100% - #{$local-cart-image-width-small});
11015
11016 .ie9 & {
11017 display: inline-block;
11018 font-size: 0;
11019 vertical-align: top;
11020 }
11021
11022 @include media($min: $local-bp-xs-tween) {
11023 width: calc(100% - #{$local-cart-image-width-large});
11024 }
11025
11026 .cartitems--container:not(.has-sidebar) & {
11027 @include media($min: $bp-small) {
11028 display: -webkit-box;
11029 display: -webkit-flex;
11030 display: -ms-flexbox;
11031 display: flex;
11032 -webkit-box-align: center;
11033 -webkit-align-items: center;
11034 -ms-flex-align: center;
11035 align-items: center;
11036 -webkit-box-pack: justify;
11037 -webkit-justify-content: space-between;
11038 -ms-flex-pack: justify;
11039 justify-content: space-between;
11040 width: calc(100% - #{$local-cart-image-width-large});
11041 }
11042
11043 @include media($max: $local-bp-xs-tween) {
11044 width: calc(100% - #{$local-cart-image-width-small});
11045 }
11046 }
11047
11048 .cartitems--container.has-sidebar & {
11049 @include media($max: $local-bp-xs-tween) {
11050 width: calc(100% - #{$local-cart-image-width-small});
11051 }
11052
11053 @include media($min: $bp-small, $max: $bp-medium) {
11054 display: -webkit-box;
11055 display: -webkit-flex;
11056 display: -ms-flexbox;
11057 display: flex;
11058 -webkit-box-align: center;
11059 -webkit-align-items: center;
11060 -ms-flex-align: center;
11061 align-items: center;
11062 -webkit-box-pack: justify;
11063 -webkit-justify-content: space-between;
11064 -ms-flex-pack: justify;
11065 justify-content: space-between;
11066 width: calc(100% - #{$local-cart-image-width-large});
11067 }
11068
11069 @include media($min: $bp-large) {
11070 display: -webkit-box;
11071 display: -webkit-flex;
11072 display: -ms-flexbox;
11073 display: flex;
11074 -webkit-box-align: center;
11075 -webkit-align-items: center;
11076 -ms-flex-align: center;
11077 align-items: center;
11078 -webkit-box-pack: justify;
11079 -webkit-justify-content: space-between;
11080 -ms-flex-pack: justify;
11081 justify-content: space-between;
11082 width: calc(100% - #{$local-cart-image-width-large});
11083 }
11084 }
11085}
11086
11087// Title, Price, Variants
11088.cart-item--content {
11089 padding-left: $local-padding-large;
11090
11091 .cartitems--container.has-sidebar & {
11092 @include media($min: $bp-medium, $max: $bp-large) {
11093 margin-bottom: $space-large;
11094 }
11095 }
11096
11097 .ie9 & {
11098 display: block;
11099
11100 @include media($min: $bp-small) {
11101 display: inline-block;
11102 width: 30%;
11103 vertical-align: top;
11104 }
11105 }
11106}
11107
11108.cart-item--content-title {
11109 margin-top: 0;
11110 margin-bottom: $space-xx-small;
11111 font-size: $font-h5-size;
11112 color: $color-heading;
11113
11114 a {
11115 color: currentColor;
11116 text-decoration: none;
11117 }
11118}
11119
11120.cart-item--product-options,
11121.cart-item--content-price {
11122 font-size: $font-body-size-smaller;
11123 line-height: 1.5;
11124 color: transparentize($color-text, 0.2);
11125}
11126
11127.cart-item--option-name,
11128.cart-item--price-title {
11129 @include font($font-body, $font-weight: bolder, $font-family: false);
11130}
11131
11132.cart-item--sale-price {
11133 color: transparentize($color-text, 0.5);
11134 text-decoration: line-through;
11135}
11136
11137// Quantity select, line price, remove
11138.cart-item--info {
11139 position: relative;
11140 padding-right: 0;
11141 padding-left: $local-padding-large;
11142 margin-top: $space-large - $space-x-small;
11143
11144 .ie9 & {
11145 width: 100%;
11146 }
11147
11148 @include media($min: $local-bp-xs-tween-large) {
11149 display: -webkit-box;
11150 display: -webkit-flex;
11151 display: -ms-flexbox;
11152 display: flex;
11153 -webkit-box-align: center;
11154 -webkit-align-items: center;
11155 -ms-flex-align: center;
11156 align-items: center;
11157
11158 .ie9 & {
11159 display: inline-block;
11160 text-align: right;
11161 }
11162 }
11163
11164 @include media($min: $bp-small) {
11165 margin-top: 0;
11166
11167 .ie9 & {
11168 width: 70%;
11169 }
11170 }
11171}
11172
11173.cart-item--sku {
11174 font-size: rem(13px);
11175 line-height: 1.5;
11176 opacity: 0.6;
11177}
11178
11179.cart-item--sku-empty {
11180 display: none;
11181}
11182
11183.cart-item--quantity,
11184.cart-item--total,
11185.cart-item--remove {
11186 -webkit-flex-basis: auto;
11187 -ms-flex-preferred-size: auto;
11188 flex-basis: auto;
11189 -webkit-box-flex: 1;
11190 -webkit-flex-grow: 1;
11191 -ms-flex-positive: 1;
11192 flex-grow: 1;
11193 -webkit-flex-shrink: 1;
11194 -ms-flex-negative: 1;
11195 flex-shrink: 1;
11196 margin-top: $space-x-small;
11197
11198 .ie9 & {
11199 @include media($min: $local-bp-xs-tween-large) {
11200 display: inline-block;
11201 vertical-align: top;
11202 }
11203 }
11204}
11205
11206.cart-item--total,
11207.cart-item--remove {
11208 .ie9 & {
11209 @include media($min: $local-bp-xs-tween-large, $max: $bp-small) {
11210 width: calc((100% - #{$local-quantity-width}) / 2);
11211 }
11212 }
11213}
11214
11215
11216.cart-item--quantity {
11217 width: 100%;
11218 max-width: $local-quantity-width;
11219 min-width: $local-quantity-width;
11220 padding-right: $local-padding-large;
11221 padding-left: 0;
11222}
11223
11224.cart-item--total {
11225 padding-right: $local-padding-large + $local-icon-remove;
11226 font-size: $font-h5-size;
11227 color: $color-text;
11228 text-align: left;
11229 white-space: nowrap;
11230
11231 @include media($min: $local-bp-xs-tween-large) {
11232 padding-right: 0;
11233 text-align: right;
11234 }
11235
11236 @include media($min: $bp-small) {
11237 min-width: $local-total-width;
11238 }
11239}
11240
11241.cart-item--remove {
11242 position: absolute;
11243 right: 0;
11244 bottom: 0;
11245 width: $local-padding-large;
11246 text-align: right;
11247
11248 @include media($min: $local-bp-xs-tween-large) {
11249 position: relative;
11250 right: auto;
11251 bottom: auto;
11252 -webkit-box-flex: 0;
11253 -webkit-flex-grow: 0;
11254 -ms-flex-positive: 0;
11255 flex-grow: 0;
11256 width: ($local-padding-large * 2) + $local-icon-remove;
11257 max-width: percentage(1 / 3);
11258 padding-left: $local-padding-large * 2;
11259 }
11260}
11261
11262.cart-item--remove-link {
11263 @extend %link--text;
11264 display: inline-block;
11265 width: $local-icon-remove;
11266 height: $local-icon-remove;
11267 padding: 5px;
11268 background-color: transparentize($color-text, 0.8);
11269 border-radius: 100%;
11270
11271 &:hover {
11272 color: currentColor;
11273 }
11274
11275 svg {
11276 display: block;
11277 fill: currentColor;
11278 }
11279}
11280
11281
11282$local-bp-xs-tween: 640px;
11283$local-space-small: 10px;
11284$local-space-large: 15px;
11285
11286.collection--item {
11287 float: left;
11288 width: calc(50% - 5px);
11289 margin-left: $local-space-small;
11290
11291 // 2 cols - 10px gutter
11292 @include media($max: $local-bp-xs-tween) {
11293 &:nth-child(n + 3) {
11294 margin-top: $space-xx-large;
11295 }
11296
11297 &:nth-child(2n + 1) {
11298 margin-left: 0;
11299 clear: left;
11300 }
11301 }
11302
11303 // 3 cols
11304 @include media($min: $local-bp-xs-tween, $max: $bp-medium) {
11305 &:nth-child(n + 4) {
11306 margin-top: $space-xx-large;
11307 }
11308
11309 &:nth-child(3n + 1) {
11310 margin-left: 0;
11311 clear: left;
11312 }
11313 }
11314
11315 // 3 cols - 10px gutter
11316 @include media($min: $local-bp-xs-tween, $max: $bp-small) {
11317 width: calc(#{percentage(1 / 3)} - #{$local-space-small * (2 / 3)});
11318
11319 &:nth-child(3n + 1) {
11320 margin-left: 0;
11321 clear: left;
11322 }
11323 }
11324
11325 // 15px gutter
11326 @include media($min: $bp-small, $max: $bp-large) {
11327 margin-left: $local-space-large;
11328 }
11329
11330 // 3 cols, 15px gutter
11331 @include media($min: $bp-small, $max: $bp-medium) {
11332 width: calc(#{percentage(1 / 3)} - #{$local-space-large * (2 / 3)});
11333 }
11334
11335 // 4 cols
11336 @include media($min: $bp-medium) {
11337 &:nth-child(n + 5) {
11338 margin-top: $space-xx-large;
11339 }
11340
11341 &:nth-child(4n + 1) {
11342 margin-left: 0;
11343 clear: left;
11344 }
11345 }
11346
11347 // 4 cols - 15px gutter
11348 @include media($min: $bp-medium, $max: $bp-large) {
11349 width: calc(25% - #{$local-space-large * (3 / 4)});
11350 }
11351
11352 // 4 cols - 20px gutter
11353 @include media($min: $bp-large) {
11354 width: calc(25% - #{20px * (3 / 4)});
11355 margin-left: 20px;
11356 }
11357}
11358
11359.collection--item-image {
11360 position: relative;
11361 height: auto;
11362 margin: 0;
11363
11364 a {
11365 display: block;
11366 }
11367
11368 img,
11369 svg {
11370 display: block;
11371 max-width: 100%;
11372 }
11373}
11374
11375.collection--item-info {
11376 margin-top: $space-medium;
11377 margin-bottom: 0;
11378 font-size: $font-body-size;
11379 text-align: center;
11380}
11381
11382.collection--item-title {
11383 @extend %link--default;
11384 display: inline-block;
11385 line-height: 1.4;
11386 text-decoration: none;
11387}
11388
11389.article--comments-item {
11390 margin: 0 0 $space-xx-large;
11391 line-height: 1.6;
11392
11393 cite {
11394 font-size: $font-body-size-small;
11395 font-style: font-style($font-body, $font-style: italic);
11396 color: transparentize($color-text, 0.6);
11397
11398 strong {
11399 font-size: $font-h5-size;
11400 color: $color-heading;
11401 }
11402 }
11403
11404 .rte {
11405 margin-top: $space-xx-small;
11406
11407 > *:first-child {
11408 margin-top: 0;
11409 }
11410
11411 > *:last-child {
11412 margin-bottom: 0;
11413 }
11414 }
11415}
11416.article--comments {
11417 margin-top: $space-xxx-large;
11418}
11419
11420.article--comments-title {
11421 margin-top: 0;
11422 margin-bottom: $space-x-large;
11423 font-size: $font-h3-size;
11424 color: $color-heading;
11425
11426 .article--comments-form & {
11427 margin-bottom: $space-medium;
11428 }
11429}
11430
11431.article--comments-form {
11432 margin-top: $space-xxx-large;
11433
11434 .form-field--half {
11435 margin-bottom: $space-medium;
11436 }
11437
11438 .form-field-textarea {
11439 display: block;
11440 min-height: 200px;
11441 }
11442
11443 .button-primary {
11444 @include button-size(large);
11445 margin-top: $space-large;
11446 }
11447}
11448
11449.article--comments-moderated {
11450 @include font($font-body, $font-weight: bolder, $font-family: false, $font-style: italic);
11451 margin-bottom: $space-x-large;
11452 line-height: 1.6;
11453}
11454
11455.article--comments-message {
11456 margin-bottom: $space-medium;
11457
11458 &.message--success {
11459 @extend %message--success;
11460 padding: $space-xx-small $space-x-small;
11461 }
11462
11463 &.message--error {
11464 @extend %message--error;
11465 padding: $space-xx-small $space-x-small;
11466 }
11467
11468 ul {
11469 @include font($font-body, $font-family: false);
11470 padding-left: $space-medium;
11471 margin-top: 0;
11472 margin-bottom: 0;
11473 }
11474
11475 p {
11476 @extend %message--base;
11477 @include font($font-body, $font-family: false);
11478 margin-top: 0;
11479 margin-bottom: 0;
11480
11481 + .article--comments-error {
11482 margin-top: 0.67em;
11483 }
11484 }
11485}
11486
11487.article--comments-required {
11488 margin-top: $space-medium;
11489 margin-bottom: 0;
11490 font-size: rem($font-body-size - 3px);
11491 color: transparentize($color-text, 0.6);
11492}
11493
11494
11495.article--excerpt-wrapper {
11496 @extend %box-shadow;
11497 -webkit-box-flex: 0;
11498 -webkit-flex-grow: 0;
11499 -ms-flex-positive: 0;
11500 flex-grow: 0;
11501 -webkit-flex-shrink: 0;
11502 -ms-flex-negative: 0;
11503 flex-shrink: 0;
11504 text-align: center;
11505 -webkit-transition: width 0.1s ease;
11506 transition: width 0.1s ease;
11507
11508 &.article--excerpt-wrapper--centered {
11509 display: -webkit-box;
11510 display: -webkit-flex;
11511 display: -ms-flexbox;
11512 display: flex;
11513 }
11514
11515 .ie9 & {
11516 display: inline-block;
11517 font-size: $font-body-size;
11518 vertical-align: middle;
11519 }
11520}
11521
11522.article--excerpt-image {
11523 position: relative;
11524 display: block;
11525 height: rem(200px);
11526 background-position: 50% 50%;
11527 background-repeat: no-repeat;
11528 background-size: cover;
11529
11530 @include media($min: $bp-small) {
11531 height: rem(250px);
11532 }
11533
11534 @include media($min: $bp-large) {
11535 .blogposts--count-2 & {
11536 height: rem(300px);
11537 }
11538 }
11539}
11540
11541.article--excerpt-content {
11542 width: 100%;
11543 padding: $space-medium;
11544 white-space: normal;
11545
11546 .article--excerpt-wrapper--centered & {
11547 -webkit-align-self: center;
11548 -ms-flex-item-align: center;
11549 -ms-grid-row-align: center;
11550 align-self: center;
11551 padding-top: $space-xx-large;
11552 padding-bottom: $space-xx-large;
11553
11554 @include media($min: $bp-large) {
11555 padding-top: $space-xxx-large;
11556 padding-bottom: $space-xxx-large;
11557 }
11558 }
11559}
11560
11561.article--excerpt-meta {
11562 font-size: 0;
11563 color: transparentize($color-text, 0.5);
11564}
11565
11566.article--excerpt-meta-item {
11567 display: inline-block;
11568 font-size: $font-body-size-small;
11569
11570 @include media($max: $bp-small) {
11571 font-size: $font-body-size-small - rem(2px);
11572 }
11573
11574 &:nth-child(2) {
11575 padding-left: 11px;
11576 margin-left: 10px;
11577 border-left: 1px solid transparentize($color-border, 0.65);
11578
11579 @include media($max: $bp-small) {
11580 padding-left: 6px;
11581 margin-left: 5px;
11582 }
11583 }
11584}
11585
11586.article--excerpt-title {
11587 margin-top: $space-xx-small;
11588 margin-bottom: $space-small;
11589 font-size: $font-h4-size;
11590 line-height: 1.3;
11591 color: $color-heading;
11592
11593 &:first-child {
11594 margin-top: 0;
11595 }
11596
11597 a {
11598 color: currentColor;
11599 text-decoration: none;
11600 }
11601}
11602
11603.article--excerpt-text {
11604 margin-bottom: $space-small;
11605}
11606
11607.article--excerpt-readmore {
11608 @extendc %link--default;
11609 margin-top: $space-small;
11610 line-height: 1;
11611}
11612
11613.article--excerpt-readmore--icon {
11614 @extend %inline-chevron;
11615 margin-left: rem(1px);
11616}
11617
11618
11619.article--excerpt-wrapper--featured {
11620 position: relative;
11621 width: 100%;
11622 margin-right: 0;
11623 margin-bottom: $space-xx-large;
11624 color: $color-featured-post-foreground;
11625 background-color: $color-featured-post-background;
11626 border: 0;
11627 -webkit-box-shadow: none;
11628 box-shadow: none;
11629
11630 @include media($min: $bp-medium) {
11631 margin-bottom: $space-xxx-large;
11632 font-size: 0;
11633 }
11634
11635 .article--excerpt-image {
11636 height: rem(250px);
11637
11638 @include media($min: $bp-smaller) {
11639 height: rem(360px);
11640 }
11641
11642 @include media($min: $bp-small) {
11643 height: rem(430px);
11644 }
11645
11646 @include media($min: $bp-medium) {
11647 height: rem(467px);
11648 }
11649
11650 @include media($min: $bp-large) {
11651 height: rem(526px);
11652 }
11653
11654 .no-js & {
11655 height: auto;
11656 }
11657 }
11658
11659 .article--excerpt-content {
11660 padding: $space-x-large;
11661 font-size: $font-body-size;
11662
11663 @include media($min: $bp-large) {
11664 padding: $space-xx-large;
11665 }
11666 }
11667
11668 .article--excerpt-meta {
11669 color: transparentize($color-featured-post-foreground, 0.4);
11670 }
11671
11672 .article--excerpt-meta-item {
11673 font-size: rem($font-body-size);
11674
11675 &:nth-child(2) {
11676 border-left-color: transparentize($color-featured-post-foreground, 0.5);
11677 }
11678 }
11679
11680 .article--excerpt-title {
11681 margin-top: $space-xx-small;
11682 margin-bottom: $space-medium;
11683 font-size: $font-h1-size;
11684 color: currentColor;
11685
11686 &:first-child {
11687 margin-top: 0;
11688 }
11689
11690 @include media($min: $bp-smaller) {
11691 margin-bottom: 0;
11692 }
11693 }
11694
11695 .article--excerpt-text {
11696 margin-top: $space-medium;
11697 margin-bottom: $space-large;
11698 line-height: 1.56;
11699
11700 a {
11701 color: currentColor;
11702 text-decoration: underline;
11703
11704 &:hover {
11705 color: currentColor;
11706 }
11707 }
11708 }
11709
11710 .article--excerpt-button {
11711 @extend %button-secondary;
11712 border-color: transparent;
11713
11714 &:not(.disabled):hover {
11715 border-color: transparent;
11716 }
11717 }
11718
11719 &.article--excerpt-wrapper--no-image {
11720
11721 .article--excerpt-content {
11722 @include media($min: $bp-smaller) {
11723 width: 70%;
11724 text-align: right;
11725 }
11726 }
11727
11728 .article--excerpt-meta,
11729 .article--excerpt-title,
11730 .article--excerpt-meta-item,
11731 .article--excerpt-text {
11732 max-width: rem(700px);
11733
11734 @include media($min: $bp-smaller) {
11735 text-align: left;
11736 }
11737 }
11738
11739 .article--excerpt-text {
11740 @include media($min: $bp-smaller) {
11741 margin-bottom: 0;
11742 }
11743 }
11744
11745 .article--excerpt-button {
11746 @include media($min: $bp-smaller) {
11747 position: absolute;
11748 right: $space-large;
11749 bottom: $space-large;
11750 }
11751
11752 @include media($min: $bp-large) {
11753 right: $space-xx-large;
11754 bottom: $space-xx-large;
11755 }
11756 }
11757 }
11758
11759 &.article--excerpt-wrapper--has-image {
11760
11761 .ie9 & {
11762 @extend %clearfix;
11763 }
11764
11765 @include media($min: $bp-medium) {
11766 .article--excerpt-image,
11767 .article--excerpt-content {
11768 position: relative;
11769 display: inline-block;
11770 width: 50%;
11771 text-align: left;
11772 vertical-align: middle;
11773 }
11774
11775 .article--excerpt-image {
11776 right: 0;
11777 left: 50%;
11778
11779 .ie9 & {
11780 right: 0;
11781 left: auto;
11782 float: right;
11783 }
11784 }
11785
11786 .article--excerpt-content {
11787 right: 50%;
11788 left: auto;
11789
11790 .ie9 & {
11791 left: 0;
11792 }
11793 }
11794 }
11795 }
11796}
11797
11798.breadcrumbs-container {
11799 @extend %layout-container;
11800 margin-top: $space-medium;
11801 margin-bottom: $space-medium;
11802 font-size: 0;
11803
11804 @include media($min: $bp-small) {
11805 margin-top: $space-large;
11806 margin-bottom: $space-large;
11807 }
11808
11809 a,
11810 span {
11811 display: inline-block;
11812 font-size: $font-body-size;
11813 vertical-align: middle;
11814 }
11815
11816 a {
11817 @extend %link--default;
11818 }
11819
11820 span {
11821 color: $color-text;
11822 opacity: 0.6;
11823
11824 &.breadcrumbs-tag:not(:last-child) {
11825 margin-right: 2px;
11826 }
11827 }
11828}
11829
11830.breadcrumbs-delimiter {
11831 @extend %inline-chevron;
11832 margin-right: rem(7px);
11833 margin-left: rem(7px);
11834
11835 svg {
11836 margin-top: 0;
11837 }
11838}
11839
11840.pagination--container {
11841 @extend %layout-container;
11842 margin-top: $space-xx-large;
11843 margin-bottom: $space-large;
11844
11845 #shopify-section-static-blog & {
11846 margin-top: 0;
11847 }
11848}
11849
11850.pagination--inner {
11851 padding-left: 0;
11852 margin-right: -1 * rem(9px);
11853 margin-left: -1 * rem(9px);
11854 font-size: 0;
11855 color: $color-text;
11856 text-align: center;
11857
11858 li {
11859 display: inline-block;
11860 font-size: $font-body-size;
11861
11862 &:not(:last-child) {
11863 margin-right: rem(5px);
11864 }
11865 }
11866
11867 a {
11868 @extend %link--default;
11869 }
11870}
11871
11872.pagination--item {
11873 display: inline-block;
11874 padding: rem(9px) rem(11px);
11875
11876 .pagination--active & {
11877 @include font($font-body, $font-family: false, $font-weight: bolder);
11878 color: $color-text;
11879
11880 &:hover {
11881 color: currentColor;
11882 }
11883 }
11884}
11885
11886.pagination--chevron-right,
11887.pagination--chevron-left {
11888 @extend %inline-chevron;
11889}
11890
11891.pagination--chevron-left {
11892 margin-left: 0;
11893
11894 svg {
11895 -webkit-transform: rotate(90deg);
11896 -ms-transform: rotate(90deg);
11897 transform: rotate(90deg);
11898 }
11899}
11900
11901.share-buttons {
11902 margin-top: $space-large;
11903
11904 @include media($min: $bp-small) {
11905 margin-top: $space-x-large;
11906 }
11907
11908 .share-buttons--title {
11909 margin-top: 0;
11910 margin-bottom: 0;
11911 font-size: $font-body-size-smaller;
11912 color: $color-text;
11913 }
11914
11915 .share-buttons--list {
11916 margin-top: $space-small;
11917 font-size: 0;
11918
11919 @include media($min: $bp-small) {
11920 margin-top: $space-x-small;
11921 }
11922 }
11923
11924 .share-buttons--button {
11925 display: inline-block;
11926 width: 30px;
11927 height: 30px;
11928 padding: 2px;
11929 color: $color-white;
11930 border-radius: 100%;
11931
11932 &:not(:first-child) {
11933 margin-left: $space-xx-small;
11934 }
11935
11936 @include media($min: $bp-small) {
11937 width: 24px;
11938 height: 24px;
11939 padding: 1px;
11940 }
11941
11942 svg {
11943 display: block;
11944 width: 100%;
11945 height: 100%;
11946 fill: currentColor;
11947 }
11948 }
11949
11950 .share-buttons--facebook {
11951 background-color: $color-facebook;
11952 }
11953
11954 .share-buttons--twitter {
11955 background-color: $color-twitter;
11956 }
11957
11958 .share-buttons--google {
11959 background-color: $color-google;
11960 }
11961
11962 .share-buttons--pinterest {
11963 background-color: $color-pinterest;
11964 }
11965}
11966
11967$local-image-width: rem(100px);
11968
11969// Outer banner styles
11970.atc-banner--container {
11971 @extend %sneak-in;
11972 position: fixed;
11973 top: 0;
11974 z-index: $index-banner;
11975 display: none;
11976 width: 100%;
11977 background-color: $color-background;
11978 outline: 0;
11979 -webkit-box-shadow: 0 2px 5px transparentize($color-border, 0.75);
11980 box-shadow: 0 2px 5px transparentize($color-border, 0.75);
11981 -webkit-transition: text-shadow 0.275s linear;
11982 transition: text-shadow 0.275s linear; // animation duration + delay
11983}
11984
11985.atc-banner--outer {
11986 @extend %layout-container;
11987 position: relative;
11988 padding: $space-medium;
11989}
11990
11991.atc-banner--inner {
11992 width: 100%;
11993 max-width: 820px;
11994 padding-top: $space-medium;
11995 padding-bottom: $space-medium;
11996 margin-right: auto;
11997 margin-left: auto;
11998 table-layout: fixed;
11999 text-align: center;
12000
12001 @include media($min: $bp-small) {
12002 display: table;
12003 text-align: left;
12004 }
12005}
12006
12007// Banner columns
12008.atc-banner--product {
12009 font-size: $font-body-size;
12010 vertical-align: middle;
12011
12012 @include media($min: $bp-small) {
12013 display: table-cell;
12014 width: 54%;
12015 padding-right: $space-x-large;
12016 }
12017
12018 @include media($min: $bp-large) {
12019 padding-right: $space-x-large;
12020 }
12021}
12022
12023.atc-banner--cart {
12024 margin-top: $space-xx-large;
12025 vertical-align: middle;
12026
12027 @include media($min: $bp-small) {
12028 display: table-cell;
12029 width: 46%;
12030 padding-left: $space-large;
12031 margin-top: 0;
12032 border-left: 1px solid $color-border-soft;
12033 }
12034
12035 @include media($min: $bp-large) {
12036 padding-left: $space-xx-large;
12037 }
12038}
12039
12040// Product column
12041.atc-banner--product-title {
12042 margin-top: 0;
12043 font-size: $font-h4-size;
12044 color: $color-heading;
12045}
12046
12047.atc-banner--product-title--icon {
12048 display: inline-block;
12049 width: 18px;
12050 height: 13px;
12051 margin-top: -3px;
12052 margin-right: 5px;
12053 vertical-align: middle;
12054
12055 svg {
12056 display: block;
12057 width: 100%;
12058 height: 100%;
12059 }
12060}
12061
12062.atc--product {
12063 max-width: rem(310px);
12064 margin: $space-x-large auto 0;
12065 font-size: 0;
12066 text-align: left;
12067 vertical-align: middle;
12068
12069 @include media($min: $bp-small) {
12070 display: block;
12071 max-width: 100%;
12072 margin-top: $space-large;
12073 }
12074}
12075
12076.atc--product-image {
12077 display: inline-block;
12078 width: 100px;
12079 vertical-align: middle;
12080
12081 svg,
12082 img {
12083 max-width: 100%;
12084 }
12085}
12086
12087.atc--product-details {
12088 display: inline-block;
12089 width: calc(100% - #{$space-large + $local-image-width});
12090 margin-left: $space-large;
12091 font-size: $font-body-size;
12092 vertical-align: middle;
12093}
12094
12095.atc--product-details--title {
12096 margin-top: 0;
12097 margin-bottom: 0;
12098 font-size: $font-body-size;
12099 line-height: 1.3125;
12100}
12101
12102.atc--product-details--options {
12103 display: block;
12104 margin-top: $space-xxx-small;
12105 font-size: $font-body-size-smaller;
12106 line-height: 1.4;
12107 opacity: 0.6;
12108}
12109
12110.atc--product-details--price {
12111 display: block;
12112 margin-top: $space-xxx-small;
12113 line-height: 1.2;
12114}
12115
12116// Cart column
12117.atc-banner--cart-subtotal {
12118 font-size: $font-h4-size;
12119}
12120
12121.atc-subtotal--label {
12122 opacity: 0.6;
12123}
12124
12125.atc-subtotal--price {
12126 display: inline-block;
12127 margin-left: $space-xx-small;
12128 color: $color-heading;
12129}
12130
12131.atc-banner--cart-footer {
12132 margin-top: $space-large;
12133 font-size: 0;
12134}
12135
12136.atc-button--viewcart,
12137.atc-button--checkout {
12138 @include button-size(medium);
12139}
12140
12141.atc-button--checkout {
12142 margin-left: $space-xx-small;
12143}
12144
12145// Close button
12146.atc-banner--close {
12147 @extend %button-reset;
12148 position: absolute;
12149 top: $gutter-outer-medium;
12150 right: $gutter-outer-medium;
12151
12152 @include media($min: $bp-large) {
12153 right: $gutter-outer;
12154 }
12155}
12156
12157.message-banner--container {
12158 @extend %sneak-in;
12159 position: fixed;
12160 top: 0;
12161 z-index: $index-banner;
12162 display: none;
12163 width: 100%;
12164 -webkit-transition: text-shadow 0.275s linear;
12165 transition: text-shadow 0.275s linear; // animation duration + delay
12166
12167 &.message--error {
12168 @extend %message--error;
12169 }
12170}
12171
12172.message-banner--outer {
12173 @extend %layout-container;
12174 position: relative;
12175}
12176
12177.message-banner--inner {
12178 width: 100%;
12179 max-width: 820px;
12180 padding-top: $space-x-small;
12181 padding-bottom: $space-x-small;
12182 margin-right: auto;
12183 margin-left: auto;
12184 text-align: center;
12185}
12186
12187// Close button
12188.message-banner--close {
12189 @extend %button-reset;
12190 position: absolute;
12191 top: 50%;
12192 right: $gutter-outer-small;
12193 margin-top: -6.5px;
12194
12195 @include media($min: $bp-small) {
12196 right: $gutter-outer-medium;
12197 }
12198
12199 @include media($min: $bp-large) {
12200 right: $gutter-outer;
12201 }
12202
12203 .message--error & {
12204 color: $color-error;
12205 }
12206}
12207
12208.social-icons {
12209 margin-top: -4px;
12210 margin-right: -4px;
12211 margin-left: -4px;
12212 font-size: 0;
12213}
12214
12215.social-link {
12216 display: inline-block;
12217 width: 36px;
12218 height: 36px;
12219 padding: 4px;
12220 overflow: hidden;
12221 color: $color-text;
12222 font-size: $font-body-size-small;
12223 line-height: 1.8;
12224 vertical-align: top;
12225
12226 svg {
12227 width: 28px;
12228 height: 28px;
12229 background-color: $local-footer-accent;
12230 border-radius: 100%;
12231 -webkit-transition: background-color 0.4s $ease-out-quad;
12232 transition: background-color 0.4s $ease-out-quad;
12233 }
12234
12235 &:hover svg {
12236 background-color: rgba($color-footer-text, 0.05);
12237 }
12238}
12239
12240$local-link-padding: rem(3px);
12241
12242.productgrid--sidebar {
12243
12244 @include media($max: $bp-medium) {
12245 display: none;
12246 }
12247
12248 @include media($min: $bp-medium) {
12249 float: left;
12250 width: $sidebar-width;
12251 }
12252}
12253
12254.productgrid--sidebar-section,
12255.productgrid--sidebar-title {
12256 margin-top: $space-xx-large;
12257
12258 &:first-child {
12259 margin-top: 0;
12260 }
12261}
12262
12263.productgrid--sidebar-title {
12264 margin-bottom: $space-medium;
12265 font-size: $font-h5-size;
12266 color: $color-heading;
12267}
12268
12269.productgrid--sidebar-title--small {
12270 @include font($font-body, $font-weight: bolder);
12271 margin-top: $space-large;
12272 margin-bottom: $space-xxx-small;
12273 font-size: $font-body-size-small;
12274 color: $color-text;
12275}
12276
12277.productgrid--sidebar-item {
12278 padding-left: 0;
12279 margin-top: $space-xx-small;
12280 margin-left: 0;
12281 list-style: none;
12282
12283 &:first-child {
12284 margin-top: 0;
12285 }
12286}
12287
12288.productgrid--sidebar-filters--current {
12289 margin-bottom: $space-large;
12290
12291 @include media($min: $bp-medium) {
12292 display: none;
12293 }
12294}
12295
12296$local-space-small: 10px;
12297$local-space-large: 20px;
12298
12299.productitem--listview-price,
12300.productitem--listview-badge {
12301 display: none;
12302}
12303
12304.productgrid--outer {
12305 @extend %layout-container, %clearfix;
12306
12307 .breadcrumbs-container {
12308 margin-top: 0;
12309 }
12310
12311 .pagination--container,
12312 .breadcrumbs-container {
12313 @extend %layout-container--reset;
12314 }
12315}
12316
12317.productgrid--wrapper {
12318
12319 .layout--has-sidebar & {
12320
12321 @include media($min: $bp-medium) {
12322 float: left;
12323 width: calc(100% - #{$sidebar-width + $gutter-outer});
12324 margin-left: $gutter-outer;
12325 }
12326 }
12327}
12328
12329.productgrid--filters {
12330
12331 @include media ($max: $bp-medium) {
12332 display: none;
12333 }
12334
12335 @include media ($min: $bp-medium) {
12336 margin-top: $space-large - $space-xx-small;
12337 margin-bottom: $space-large;
12338 }
12339}
12340
12341.productgrid--utils {
12342 display: none;
12343 width: 100%;
12344 padding-top: $space-xx-small;
12345 padding-bottom: $space-xx-small;
12346 margin-top: $space-large;
12347 margin-bottom: $space-large;
12348 background-color: $color-background-light;
12349 table-layout: fixed;
12350
12351 @include media($max: $bp-medium) {
12352 &.productgrid--utils--visible-mobile {
12353 display: table;
12354 }
12355 }
12356
12357 @include media($min: $bp-medium) {
12358 display: table;
12359
12360 &.productgrid--utils--hidden-desktop {
12361 display: none;
12362 }
12363 }
12364}
12365
12366.productgrid--items {
12367 display: -webkit-box;
12368 display: -webkit-flex;
12369 display: -ms-flexbox;
12370 display: flex;
12371 -webkit-box-align: stretch;
12372 -webkit-align-items: stretch;
12373 -ms-flex-align: stretch;
12374 align-items: stretch;
12375 -webkit-box-orient: horizontal;
12376 -webkit-box-direction: normal;
12377 -webkit-flex-direction: row;
12378 -ms-flex-direction: row;
12379 flex-direction: row;
12380 -webkit-flex-wrap: wrap;
12381 -ms-flex-wrap: wrap;
12382 flex-wrap: wrap;
12383 -webkit-box-pack: start;
12384 -webkit-justify-content: flex-start;
12385 -ms-flex-pack: start;
12386 justify-content: flex-start;
12387 margin-top: $space-large;
12388
12389 .search--section & {
12390 @include media($max: $bp-small) {
12391 margin-top: $space-medium;
12392 }
12393 }
12394
12395 .ie9 & {
12396 font-size: 0;
12397 }
12398}
12399
12400.productgrid--item {
12401 position: relative;
12402 z-index: 1;
12403 display: -webkit-box;
12404 display: -webkit-flex;
12405 display: -ms-flexbox;
12406 display: flex;
12407 -webkit-box-orient: vertical;
12408 -webkit-box-direction: normal;
12409 -webkit-flex-direction: column;
12410 -ms-flex-direction: column;
12411 flex-direction: column;
12412 -webkit-box-flex: 0;
12413 -webkit-flex-grow: 0;
12414 -ms-flex-positive: 0;
12415 flex-grow: 0;
12416 -webkit-flex-shrink: 0;
12417 -ms-flex-negative: 0;
12418 flex-shrink: 0;
12419 -webkit-box-pack: start;
12420 -webkit-justify-content: flex-start;
12421 -ms-flex-pack: start;
12422 justify-content: flex-start;
12423 -webkit-transition: text-shadow 0.25s linear;
12424 transition: text-shadow 0.25s linear; // Sets transition speed for revealer
12425
12426 &:focus {
12427 outline: 0;
12428 }
12429
12430 @include media($min: $bp-large) {
12431 &.animating,
12432 &.visible {
12433 z-index: 200;
12434 }
12435
12436 &:hover {
12437 z-index: 300;
12438 }
12439 }
12440
12441 .ie9 & {
12442 display: inline-block;
12443 vertical-align: top;
12444 }
12445
12446 .productgrid--items & {
12447 @include media($max: $bp-smaller) {
12448 width: calc(50% - #{$local-space-small / 2});
12449 margin-top: $local-space-small;
12450 margin-left: $local-space-small;
12451
12452 .ie9 & {
12453 width: calc(#{percentage(1 / 2)} - #{($local-space-small / 2) + 1px});
12454 }
12455
12456 &:nth-child(2n + 1) {
12457 margin-left: 0;
12458
12459 .ie9 & {
12460 clear: left;
12461 }
12462 }
12463
12464 &:nth-child(-n + 2) {
12465 margin-top: 0;
12466 }
12467 }
12468
12469 @include media($min: $bp-smaller, $max: $bp-medium) {
12470 width: calc(#{percentage(1 / 3)} - #{$local-space-small * 2 / 3});
12471 margin-top: $local-space-small;
12472 margin-left: $local-space-small;
12473
12474 .ie9 & {
12475 width: calc(#{percentage(1 / 3)} - #{($local-space-small * 2 / 3) + 1px});
12476 }
12477
12478 &:nth-child(3n + 1) {
12479 margin-left: 0;
12480
12481 .ie9 & {
12482 clear: left;
12483 }
12484 }
12485
12486 &:nth-child(-n + 3) {
12487 margin-top: 0;
12488 }
12489 }
12490
12491 .layout--has-sidebar & {
12492 @include media($min: $bp-medium, $max: $bp-large) {
12493 width: calc(#{percentage(1 / 3)} - #{$local-space-large * 2 / 3});
12494 margin-top: $local-space-large;
12495 margin-left: $local-space-large;
12496
12497 .ie9 & {
12498 width: calc(#{percentage(1 / 3)} - #{($local-space-large * 2 / 3) + 1px});
12499 }
12500
12501 &:nth-child(3n + 1) {
12502 margin-left: 0;
12503
12504 .ie9 & {
12505 clear: left;
12506 }
12507 }
12508
12509 &:nth-child(-n + 3) {
12510 margin-top: 0;
12511 }
12512 }
12513
12514 @include media($min: $bp-large) {
12515 width: calc(25% - #{$local-space-large * 3 / 4});
12516 margin-top: $local-space-large;
12517 margin-left: $local-space-large;
12518
12519 .ie9 & {
12520 width: calc(25% - #{($local-space-large * 3 / 4) + 1px});
12521 }
12522
12523 &:nth-child(4n + 1) {
12524 margin-left: 0;
12525
12526 .ie9 & {
12527 clear: left;
12528 }
12529 }
12530
12531 &:nth-child(-n + 4) {
12532 margin-top: 0;
12533 }
12534 }
12535 }
12536
12537 .layout--no-sidebar & {
12538 @include media($min: $bp-medium) {
12539 width: calc(25% - #{$local-space-large * 3 / 4});
12540 margin-top: $local-space-large;
12541 margin-left: $local-space-large;
12542
12543 .ie9 & {
12544 width: calc(25% - #{($local-space-large * 3 / 4) + 1px});
12545 }
12546
12547 &:nth-child(4n + 1) {
12548 margin-left: 0;
12549
12550 .ie9 & {
12551 clear: left;
12552 }
12553 }
12554
12555 &:nth-child(-n + 4) {
12556 margin-top: 0;
12557 }
12558 }
12559 }
12560 }
12561}
12562
12563.productgrid--no-results {
12564 @extend %no-results--wrapper;
12565}
12566
12567.productgrid--no-results-title {
12568 @extend %no-results--title;
12569}
12570
12571.productgrid--no-results-button {
12572 @extend %no-results--button;
12573}
12574
12575.productgrid--footer {
12576 @extend %clearfix;
12577 padding-top: $space-xx-large;
12578 margin-top: $space-xx-large;
12579 border-top: 1px solid $color-border-soft;
12580}
12581
12582.productgrid--footer-item {
12583 @include media($max: $bp-small) {
12584 &:not(:first-child) {
12585 margin-top: $space-medium;
12586 }
12587 }
12588
12589 @include media($min: $bp-small) {
12590 float: left;
12591 width: calc(50% - #{$gutter-content});
12592
12593 &:not(:first-child) {
12594 margin-left: $gutter-content * 2;
12595 }
12596 }
12597}
12598
12599.productgrid--footer-title {
12600 margin-top: 0;
12601 margin-bottom: 0;
12602 font-size: $font-h5-size;
12603 color: $color-heading;
12604 text-transform: uppercase;
12605}
12606
12607.productgrid--footer-results-list {
12608 padding-left: 0;
12609 margin-top: $space-medium;
12610 margin-bottom: 0;
12611 list-style: none;
12612
12613 a {
12614 @extend %link--default;
12615 }
12616
12617 li {
12618 font-size: $font-body-size;
12619 line-height: 1.56;
12620 color: $color-text;
12621
12622 &:not(:first-child) {
12623 margin-top: $space-xx-small;
12624 }
12625 }
12626}
12627
12628.productitem--description {
12629 display: none;
12630 margin-bottom: $gutter-content;
12631 line-height: 1.5;
12632}
12633
12634.productgrid-listview {
12635 .productgrid--items .productgrid--item {
12636 width: 100%;
12637
12638 &:nth-of-type(n + 1) {
12639 margin: $gutter-content 0 0;
12640 }
12641 }
12642
12643 .productgrid--items {
12644 display: block;
12645 }
12646
12647 .productgrid--item {
12648 width: 100%;
12649 margin: $gutter-content 0 0;
12650 }
12651
12652 .productitem--image-link {
12653 width: percentage(1.5/6);
12654
12655 .productitem--badge {
12656 display: none;
12657 }
12658 }
12659
12660 .no-touch & .productitem--actions,
12661 .productitem--actions {
12662 position: static;
12663 display: none;
12664 width: percentage(1.5/6);
12665 max-width: 220px;
12666 margin: 0;
12667 opacity: 1;
12668 visibility: visible;
12669
12670 .productitem--action {
12671 display: block;
12672 width: 100%;
12673
12674 &:nth-of-type(2n) {
12675 -webkit-box-ordinal-group: 2;
12676 -webkit-order: 1;
12677 -ms-flex-order: 1;
12678 order: 1;
12679 }
12680 }
12681
12682 .productitem--listview-price {
12683 display: block;
12684 width: 100%;
12685 margin-bottom: $gutter-content;
12686 text-align: right;
12687 }
12688
12689 .productitem--listview-badge {
12690 display: -webkit-box;
12691 display: -webkit-flex;
12692 display: -ms-flexbox;
12693 display: flex;
12694 -webkit-box-pack: end;
12695 -webkit-justify-content: flex-end;
12696 -ms-flex-pack: end;
12697 justify-content: flex-end;
12698 width: 100%;
12699 margin-bottom: rem(12px);
12700
12701 .productitem--badge {
12702 position: relative;
12703 top: rem(-6px);
12704 }
12705 }
12706
12707 @include media($min: $bp-medium) {
12708 display: -webkit-box;
12709 display: -webkit-flex;
12710 display: -ms-flexbox;
12711 display: flex;
12712 -webkit-align-content: flex-start;
12713 -ms-flex-line-pack: start;
12714 align-content: flex-start;
12715 }
12716 }
12717
12718 .productitem {
12719 display: -webkit-box;
12720 display: -webkit-flex;
12721 display: -ms-flexbox;
12722 display: flex;
12723 -webkit-box-pack: justify;
12724 -webkit-justify-content: space-between;
12725 -ms-flex-pack: justify;
12726 justify-content: space-between;
12727 }
12728
12729 .productitem--info {
12730 width: percentage(4.5/6);
12731 margin: 0 0 0 $gutter-outer;
12732
12733 @include media($min: $bp-medium) {
12734 width: percentage(3/6);
12735 margin: 0 #{$gutter-outer * 2} 0 $gutter-outer;
12736 }
12737
12738 .productitem--price {
12739 @include media($min: $bp-medium) {
12740 display: none;
12741 }
12742
12743 @include media($min: $bp-smaller, $max: $bp-medium) {
12744 margin-top: $space-xx-small;
12745 }
12746 }
12747 }
12748
12749 .productitem--title {
12750 @include media($min: $bp-medium) {
12751 @include font($font-body, $font-family: false, $font-weight: bolder);
12752 font-size: $font-h4-size;
12753 }
12754 }
12755
12756 .price--compare-at.visible {
12757 display: block;
12758
12759 .price--spacer {
12760 display: none;
12761 }
12762 }
12763
12764 .productitem--description {
12765 @include media($min: $bp-medium) {
12766 display: block;
12767
12768
12769 }
12770 }
12771
12772 .productitem--link {
12773 @extend %link--default;
12774 }
12775}
12776.productitem:hover{
12777 box-shadow: 0 0 5px 4px #d3d3d3;
12778 transition: box-shadow 0.2s ease-in-out;
12779 //transform: scale(1.1);
12780 //z-index: 1000;
12781}
12782
12783.utils-filter,
12784.utils-sortby,
12785.utils-view {
12786 display: table-cell;
12787 width: 40%;
12788 padding: $space-xx-small $space-small;
12789 font-size: $font-body-size-small;
12790 vertical-align: middle;
12791}
12792
12793.utils-sortby-button,
12794.utils-filter-button {
12795 @extend %button-reset, %link--default;
12796}
12797
12798.utils-filter {
12799 text-align: left;
12800
12801 @include media($min: $bp-medium) {
12802 display: none;
12803 }
12804}
12805
12806.utils-filter-button {
12807 display: table;
12808 font-size: 0;
12809 -webkit-transition: color 0.1s ease;
12810 transition: color 0.1s ease;
12811}
12812
12813.utils-filter-icon {
12814 display: table-cell;
12815 padding-right: 11px;
12816 vertical-align: middle;
12817
12818 svg {
12819 display: block;
12820 width: 19px;
12821 height: 13px;
12822 -webkit-transition: fill 0.1s ease;
12823 transition: fill 0.1s ease;
12824 fill: currentColor;
12825 }
12826}
12827
12828.utils-filter-text {
12829 @include font($font-body, $font-family: false, $font-weight: bolder);
12830 display: table-cell;
12831 font-size: $font-body-size-small;
12832 vertical-align: middle;
12833}
12834
12835.utils-sortby {
12836 font-size: 0;
12837 text-align: right;
12838
12839 @include media($min: $bp-medium) {
12840 text-align: left;
12841 }
12842}
12843
12844.utils-sortby-select,
12845.utils-sortby-title {
12846 display: inline-block;
12847 vertical-align: middle;
12848}
12849
12850.utils-sortby-title {
12851 @include font($font-body, $font-family: false, $font-weight: bolder);
12852 cursor: pointer;
12853
12854 @include media($min: $bp-medium) {
12855 display: inline-block;
12856 font-size: $font-body-size-small;
12857 }
12858}
12859
12860.utils-sortby-button {
12861 @include font($font-body, $font-family: false, $font-weight: bolder);
12862 display: inline-block;
12863 font-size: $font-body-size-small;
12864 vertical-align: middle;
12865
12866 @include media($min: $bp-medium) {
12867 display: none;
12868 }
12869}
12870
12871.utils-sortby-select {
12872 display: none;
12873 width: auto;
12874 max-width: 100%;
12875
12876 @include media($min: $bp-medium) {
12877 display: inline-block;
12878 margin-left: $space-xx-small;
12879 }
12880
12881 .form-field-select {
12882 max-width: 100%;
12883 padding-top: 0;
12884 padding-bottom: 0;
12885 font-size: $font-body-size-smaller;
12886 border: 0;
12887 -webkit-box-shadow: none;
12888 box-shadow: none;
12889 }
12890}
12891
12892.utils-sortby--modal {
12893 display: none;
12894}
12895
12896.utils-sortby--modal-title {
12897 @include font($font-body, $font-family: false, $font-weight: bolder);
12898 display: block;
12899 margin-bottom: $space-medium;
12900 font-size: $font-h5-size;
12901 color: $color-heading;
12902}
12903
12904.utils-sortby--modal-list {
12905 padding-left: 0;
12906 margin-top: 0;
12907 margin-bottom: 0;
12908 list-style: none;
12909}
12910
12911.utils-sortby--modal-item {
12912 margin-top: $space-x-small;
12913
12914 &:first-child {
12915 margin-top: 0;
12916 }
12917}
12918
12919.utils-sortby--modal-button {
12920 @extend %button-secondary;
12921 display: block;
12922 width: 100%;
12923 -webkit-transition-duration: 0s;
12924 transition-duration: 0s;
12925
12926 &:active,
12927 &:focus,
12928 &.utils-sortby--modal-button--active {
12929 &,
12930 &:hover {
12931 color: $color-background;
12932 background: $color-link;
12933 }
12934 }
12935}
12936
12937.utils-showby {
12938 font-size: 0;
12939 text-align: right;
12940
12941 @include media($max: $bp-medium) {
12942 display: none;
12943 }
12944
12945 li {
12946 display: inline-block;
12947 list-style: none;
12948
12949 &:not(:first-child) {
12950 margin-left: $space-small;
12951 }
12952 }
12953}
12954
12955.utils-showby-title {
12956 @include font($font-body, $font-family: false, $font-weight: bolder);
12957 font-size: $font-body-size-small;
12958}
12959
12960.utils-showby-item {
12961 @extend %link--text;
12962 font-size: $font-body-size-smaller;
12963
12964 &:hover {
12965 color: $color-link;
12966 }
12967
12968 &.utils-showby-item--active {
12969 @extend %link--default;
12970 }
12971}
12972
12973// Limit product grid modals to a reasonable width
12974.modal--productgrid-sort,
12975.modal--productgrid-filters {
12976 .modal-inner {
12977 max-width: rem(500px);
12978 }
12979}
12980
12981.productgrid--outer:not(.layout--has-sidebar) .utils-sortby {
12982 text-align: left;
12983}
12984
12985.utils-view {
12986 width: rem(102px);
12987
12988 @include media($max: $bp-medium) {
12989 padding: 0 $space-xx-small 0 0;
12990
12991 &.utils-hide {
12992 display: none;
12993 }
12994 }
12995
12996 @include media($min: $bp-medium) {
12997 width: 60%;
12998 }
12999}
13000
13001.utils-view-container {
13002 display: -webkit-box;
13003 display: -webkit-flex;
13004 display: -ms-flexbox;
13005 display: flex;
13006 -webkit-box-pack: end;
13007 -webkit-justify-content: flex-end;
13008 -ms-flex-pack: end;
13009 justify-content: flex-end;
13010 -webkit-box-align: center;
13011 -webkit-align-items: center;
13012 -ms-flex-align: center;
13013 align-items: center;
13014}
13015
13016.utils-viewtoggle {
13017 display: -webkit-box;
13018 display: -webkit-flex;
13019 display: -ms-flexbox;
13020 display: flex;
13021 -webkit-box-align: center;
13022 -webkit-align-items: center;
13023 -ms-flex-align: center;
13024 align-items: center;
13025
13026 @include media($min: $bp-medium) {
13027 margin-left: $gutter-content * 2;
13028 }
13029}
13030
13031.utils-viewtoggle-label {
13032 @include font($font-body, $font-family: false, $font-weight: bolder);
13033 display: none;
13034 margin-right: 10px;
13035
13036 @include media($min: $bp-medium) {
13037 display: block;
13038 }
13039}
13040
13041.utils-viewtoggle-button {
13042 padding: 5px 13px 2px;
13043 margin-left: 0;
13044 color: lighten($color-text, 40%);
13045 cursor: pointer;
13046 background: $color-background;
13047 border: 0;
13048 border-top: 1px solid lighten($color-text, 40%);
13049 border-bottom: 1px solid lighten($color-text, 40%);
13050 outline: 0;
13051 -webkit-transition: color .1s ease;
13052 transition: color .1s ease;
13053 -webkit-appearance: none;
13054
13055
13056 &:nth-of-type(1) {
13057 border-left: 1px solid lighten($color-text, 40%);
13058 border-radius: 3px 0 0 3px;
13059
13060 &.active {
13061 border-color: $color-link;
13062 }
13063 }
13064
13065 &:nth-of-type(2) {
13066 border-right: 1px solid lighten($color-text, 40%);
13067 border-radius: 0 3px 3px 0;
13068
13069 &.active {
13070 border-color: $color-link;
13071 }
13072 }
13073
13074 &:focus {
13075 -webkit-box-shadow: 0 0 0 2px transparentize($color-text, 0.8);
13076 box-shadow: 0 0 0 2px transparentize($color-text, 0.8);
13077
13078 &.active {
13079 border-color: $color-link-hover;
13080 -webkit-box-shadow: 0 0 0 2px transparentize($color-link, 0.6);
13081 box-shadow: 0 0 0 2px transparentize($color-link, 0.6);
13082 }
13083 }
13084
13085 &:hover {
13086 color: lighten($color-text, 20%);
13087 }
13088
13089 &.active {
13090 color: $color-background;
13091 background: $color-link;
13092 }
13093
13094 @include media($min: $bp-medium) {
13095 height: 20px;
13096 padding: 0;
13097 margin-left: 6px;
13098 background-color: transparent;
13099
13100 &:nth-of-type(1) {
13101 border: 0;
13102 border-radius: 2px;
13103 }
13104
13105 &:nth-of-type(2) {
13106 border: 0;
13107 border-radius: 2px;
13108 }
13109
13110 &.active {
13111 color: $color-link;
13112 background-color: transparent;
13113 }
13114 }
13115}
13116
13117$local-space-small: 10px;
13118$local-space-large: 20px;
13119
13120$local-padding-small: 15px;
13121$local-padding-medium: 20px;
13122
13123$local-item-width: 220px;
13124
13125.product-row--container {
13126 //outer box
13127 border-radius: 3px 4px 4px 3px;
13128 max-width: $max-width;
13129 padding-right: $gutter-outer-small;
13130 padding-left: $gutter-outer-small;
13131 margin-right: auto;
13132 margin-left: auto;;
13133 //background-color: #ededed;
13134 background-color: #FFF;
13135 outline: 20px solid #eaeded;
13136
13137
13138
13139 @include media($min: $bp-small) {
13140 padding-right: $gutter-outer-medium;
13141 padding-left: $gutter-outer-medium;
13142 }
13143
13144 @include media($min: $bp-large) {
13145 padding-right: $gutter-outer;
13146 padding-left: $gutter-outer;
13147 }
13148 position: relative;
13149 @include media($max: $bp-large) {
13150 // Prevent overflow scrolling for Flickity
13151 // add spacing for shadow
13152 // then reduce vertical offset
13153 padding-bottom: $local-space-small;
13154 margin-bottom: -1 * $local-space-small;
13155 overflow: hidden;
13156 }
13157}
13158
13159@media only screen and (max-width: 1024px) {
13160 .product-row--container {
13161 //padding-top: 0px;
13162 outline: 0px;
13163}}
13164
13165.product-row {
13166 //box inside
13167 background-size:contain;
13168 display: -webkit-box;
13169 display: -webkit-flex;
13170 display: -ms-flexbox;
13171 display: flex;
13172 -webkit-box-align: stretch;
13173 -webkit-align-items: stretch;
13174 -ms-flex-align: stretch;
13175 align-items: stretch;
13176 -webkit-box-orient: horizontal;
13177 -webkit-box-direction: normal;
13178 -webkit-flex-direction: row;
13179 -ms-flex-direction: row;
13180 flex-direction: row;
13181 -webkit-flex-wrap: nowrap;
13182 -ms-flex-wrap: nowrap;
13183 flex-wrap: nowrap;
13184 -webkit-box-pack: start;
13185 -webkit-justify-content: flex-start;
13186 -ms-flex-pack: start;
13187 justify-content: flex-start;
13188 outline: 0;
13189
13190 &.flickity-enabled {
13191 cursor: -webkit-grab;
13192 cursor: grab;
13193 }
13194
13195 .ie9 & {
13196 font-size: 0;
13197
13198 @include media($max: $bp-small) {
13199 margin-right: $gutter-outer-small;
13200 }
13201
13202 @include media($min: $bp-small, $max: $bp-large) {
13203 margin-right: $gutter-outer-medium;
13204 }
13205 }
13206
13207 .flickity-slider .productgrid--item {
13208 min-height: 100%;
13209 }
13210
13211 .productgrid--item {
13212 width: $local-item-width;
13213 margin-top: 0;
13214 margin-right: $local-space-small;
13215
13216 &:last-child {
13217 margin-right: 0;
13218 }
13219
13220 .ie9 & {
13221 vertical-align: top;
13222 }
13223
13224 @include media($min: $bp-large, $max: $bp-large-home) {
13225 width: calc(25% - #{$local-space-large * 3 / 4});
13226 margin-right: $local-space-large;
13227
13228 .ie9 & {
13229 width: calc(20% - #{($local-space-large * 3 / 4) + 1px});
13230 }
13231
13232 // Within "Featured collection", hide last product when its the 4th
13233 .featured-collection--container & {
13234 &:nth-child(4):nth-last-child(2) {
13235 display: none;
13236 //background-color: #000;
13237 }
13238 }
13239
13240 // Within "Related products", hide last product, when its 5th
13241 .related-products--container & {
13242 &:nth-child(5) {
13243 display: none;
13244 }
13245 }
13246
13247 &:last-child {
13248 margin-right: 0;
13249 }
13250 }
13251
13252 @include media($min: $bp-large-home) {
13253 width: calc(15.34% - #{$local-space-large * 4 / 5});
13254 margin-right: 2px;
13255
13256 .ie9 & {
13257 width: calc(20% - #{($local-space-large * 4 / 5) + 1px});
13258 }
13259
13260 &:last-child {
13261 margin-right: 0;
13262 }
13263 }
13264 }
13265}
13266
13267$local-link-padding: rem(3px);
13268
13269.productgrid--sidebar-item.filter-group {
13270 margin-top: $space-xx-small - $local-link-padding;
13271}
13272
13273// Filter
13274.filter-item {
13275 @extend %link--text;
13276 position: relative;
13277 margin-top: $space-xxx-small;
13278 cursor: pointer;
13279 -webkit-transition-duration: 0s;
13280 transition-duration: 0s;
13281
13282 .modal & {
13283 margin-top: 0;
13284 border-top: 1px solid $color-border-soft;
13285
13286 &:first-child {
13287 margin-top: $space-xx-small;
13288 }
13289
13290 &:last-child {
13291 border-bottom: 1px solid $color-border-soft;
13292 }
13293
13294 &.filter-item--toggle {
13295 padding-top: $space-xx-small;
13296 border-bottom: 0;
13297 }
13298 }
13299
13300 &.filter-item--hidden {
13301 display: none;
13302 }
13303
13304 .filter-icon--checkbox {
13305 @extend %icon-checkbox;
13306 }
13307
13308 a {
13309 position: relative;
13310 z-index: 100;
13311 display: block;
13312 padding: $local-link-padding;
13313 margin-left: -1 * $local-link-padding;
13314 font-size: $font-body-size-small;
13315 line-height: 1.15;
13316 color: currentColor;
13317 text-decoration: none;
13318
13319 .modal & {
13320 padding: ($local-link-padding * 3) $local-link-padding;
13321 }
13322
13323 &.filter-text--link {
13324 @extend %link--default;
13325 }
13326 }
13327
13328 .filter-text,
13329 .filter-icon--checkbox {
13330 display: inline-block;
13331 vertical-align: middle;
13332 }
13333
13334 .filter-text {
13335 max-width: calc(100% - (#{$local-link-padding * 3 + rem(nth($checkbox-size, 1))}));
13336 margin-left: $local-link-padding * 3;
13337
13338 .modal & {
13339 white-space: normal;
13340 }
13341 }
13342}
13343
13344.filter-item--inactive {
13345 a {
13346
13347 &:hover {
13348 color: $color-text;
13349
13350 .filter-icon--checkbox {
13351 border-color: transparentize($color-text, 0.5);
13352 }
13353 }
13354
13355 &.filter-link--active,
13356 &:active,
13357 &:focus {
13358 @include font($font-body, $font-family: false, $font-weight: bolder);
13359 color: $color-link;
13360
13361 .filter-icon--checkbox {
13362 @extend %icon-checkbox--active;
13363 }
13364 }
13365 }
13366}
13367
13368.filter-item--active {
13369 @extend %link--default;
13370 -webkit-transition-duration: 0s;
13371 transition-duration: 0s;
13372
13373 a {
13374 @include font($font-body, $font-family: false, $font-weight: bolder);
13375
13376 &,
13377 &:hover {
13378 color: $color-link;
13379 }
13380
13381 .filter-icon--checkbox {
13382 @extend %icon-checkbox--active;
13383 }
13384
13385 &.filter-link--active,
13386 &:active,
13387 &:focus {
13388 @include font($font-body, $font-family: false, $font-weight: initial);
13389 color: $color-text;
13390
13391 .filter-icon--checkbox {
13392 @extend %icon-checkbox;
13393 }
13394 }
13395 }
13396}
13397
13398.filter-group--grid {
13399 padding: 0;
13400 margin: 0;
13401 font-size: 0;
13402 white-space: normal;
13403}
13404
13405.filter-item--grid-simple,
13406.filter-item--grid {
13407 display: inline-block;
13408 margin-top: $space-xx-small;
13409 margin-right: $space-xx-small;
13410 vertical-align: middle;
13411}
13412
13413.filter-item--grid {
13414
13415 a {
13416 display: block;
13417 color: $color-background;
13418 background: $color-link;
13419 }
13420
13421 .filter-icon--remove,
13422 .filter-text {
13423 display: inline-block;
13424 font-size: $font-body-size-small;
13425 color: currentColor;
13426 vertical-align: middle;
13427 }
13428
13429 .filter-text {
13430 @include font($font-body, $font-family: false, $font-weight: bolder);
13431 padding: rem(7px) rem(10px);
13432 border-right: 1px solid currentColor;
13433 }
13434
13435 .filter-icon--remove {
13436 padding: rem(10px);
13437
13438 svg {
13439 display: block;
13440 width: 11px;
13441 height: 11px;
13442 fill: currentColor;
13443 }
13444 }
13445}
13446
13447.filter-item--grid-simple {
13448 @include media($max: $bp-medium) {
13449 display: block;
13450 margin-top: $space-small;
13451 }
13452
13453 a {
13454 @extend %link--default;
13455 padding: rem(5px);
13456 font-size: $font-body-size-small;
13457 background-color: transparent;
13458
13459 @include media($max: $bp-medium) {
13460 padding-right: 0;
13461 padding-left: 0;
13462 }
13463 }
13464}
13465
13466$local-indentation: rem(13px);
13467
13468.productgrid--sidebar-menu {
13469
13470 .navmenu-link {
13471 @extend %link--text;
13472 }
13473
13474 .navmenu-link--active {
13475 @extend %link--default;
13476 @include font($font-body, $font-family: false, $font-weight: bolder);
13477 }
13478
13479 .navmenu-item {
13480 display: block;
13481 margin-top: rem(8px);
13482 line-height: 1.375;
13483 }
13484
13485 .navmenu {
13486 padding-left: 0;
13487 margin-left: 0;
13488 list-style: none;
13489
13490 .navmenu {
13491 padding-left: $local-indentation;
13492 }
13493 }
13494
13495 .navmenu-depth-3 {
13496 border-left: 2px solid $color-border-soft;
13497
13498 .navmenu-item {
13499 margin-top: rem(7px);
13500 font-size: $font-body-size-smaller;
13501 }
13502 }
13503}
13504
13505$local-form-height: rem(66px);
13506$local-input-padding-small: rem(8px);
13507$local-input-padding-large: rem(16px);
13508$local-button-size: rem(28px) + (rem(2px) * 2); // size + (padding * 2)
13509
13510.productgrid--search {
13511 position: relative;
13512 z-index: 1;
13513 display: none;
13514
13515 @include media($min: $bp-small) {
13516 display: block;
13517 }
13518}
13519
13520.productgrid--search-form-field {
13521 height: rem(46px);
13522 padding: {
13523 top: $local-input-padding-small;
13524 right: $local-button-size + $local-input-padding-large;
13525 bottom: $local-input-padding-small;
13526 left: $local-input-padding-large;
13527 };
13528 font-size: $font-heading-large;
13529 line-height: 1;
13530 color: $color-heading;
13531
13532 &::-webkit-input-placeholder {
13533 color: currentColor;
13534 opacity: transparentize($color-heading, 0.4);
13535 }
13536
13537 &:-ms-input-placeholder {
13538 color: currentColor;
13539 opacity: transparentize($color-heading, 0.4);
13540 }
13541
13542 &::-ms-input-placeholder {
13543 color: currentColor;
13544 opacity: transparentize($color-heading, 0.4);
13545 }
13546
13547 &::placeholder {
13548 color: currentColor;
13549 opacity: transparentize($color-heading, 0.4);
13550 }
13551}
13552
13553.productgrid--search-button {
13554 @extend %button-reset, %search-button;
13555 position: absolute;
13556 top: 50%;
13557 right: $local-input-padding-large;
13558 width: $local-button-size;
13559 height: $local-button-size;
13560 padding: rem(2px);
13561 margin-top: -1 * $local-button-size / 2;
13562
13563 .search-icon--inactive {
13564 width: 100%;
13565 height: 100%;
13566 color: $color-button-background;
13567 }
13568
13569 .search-icon--active {
13570 color: transparentize($color-heading, 0.8);
13571 }
13572}
13573
13574
13575$local-padding-small: rem(15px);
13576$local-padding-medium: rem(20px);
13577
13578// Z-index stack, highest to lowest
13579$local-stack: (100, 50);
13580
13581.productitem {
13582 //@extend %box-shadow;
13583 position: relative;
13584 -webkit-box-flex: 1;
13585 -webkit-flex-grow: 1;
13586 -ms-flex-positive: 1;
13587 flex-grow: 1;
13588 width: 100%;
13589 min-height: 100%;
13590 padding: $local-padding-small;
13591 background: #fff;
13592 -webkit-transition: height 0.25s ease;
13593 transition: height 0.25s ease;
13594
13595 @include media($min: $bp-medium) {
13596 padding: 4px;
13597 }
13598
13599 @include media($min: $bp-large) {
13600 .productgrid--item.animating &,
13601 .productgrid--item.visible & {
13602 position: absolute;
13603 }
13604 }
13605
13606 &:hover {
13607 .productitem--image-alternate ~ img {
13608 visibility: hidden;
13609 }
13610
13611 .productitem--image-alternate {
13612 visibility: visible;
13613 }
13614 }
13615}
13616
13617.productitem--badge {
13618 position: absolute;
13619 bottom: 0;
13620 left: 0;
13621 width: auto;
13622 height: auto;
13623 font-size: rem(13px);
13624}
13625
13626.productitem--info {
13627 position: relative;
13628 z-index: nth($local-stack, 1);
13629 background-color: #fff;
13630}
13631
13632.productitem--price {
13633
13634 &,
13635 + .productitem--title {
13636 margin-top: $space-xxx-small;
13637 }
13638
13639 .price--spacer {
13640 display: block;
13641 height: rem(13px) * 1.38;
13642 }
13643
13644 .price--compare-at.visible + .price--main {
13645 margin-top: rem(2px);
13646 }
13647
13648 .price--main {
13649 color: $color-link;
13650
13651 .productitem--emphasis & {
13652 font-size: rem(22px);
13653
13654 .price--varies & {
13655 font-size: rem(20px);
13656 }
13657
13658 .price--label {
13659 font-size: rem(18px);
13660 }
13661 }
13662
13663 .productitem--sale & {
13664 color: $color-sale;
13665 }
13666 }
13667}
13668
13669.productitem--title {
13670 position: relative;
13671 display: block;
13672 height: 45px;
13673 color: $color-text;
13674 font-size: $font-body-size-small;
13675 line-height: 1.5;
13676 text-decoration: none;
13677 overflow: hidden;
13678
13679 &:after {
13680 content: '';
13681 position: absolute;
13682 width: 40%;
13683 height: rem(20px);
13684 right: 0;
13685 bottom: 0;
13686 background: -webkit-gradient(linear, left top, right top, from(rgba($color-white, 0)), color-stop(50%, $color-white));
13687 background: linear-gradient(to right, rgba($color-white, 0), $color-white 50%);
13688 text-align: right;
13689 }
13690
13691
13692 a {
13693 @extend %link--text;
13694 }
13695}
13696
13697.productitem--vendor {
13698 @include font($font-body);
13699 margin: $space-xxx-small 0 0;
13700 font-size: rem($font-body-size - 3px);
13701 line-height: 1.3125;
13702 color: $color-text;
13703 white-space: normal;
13704 opacity: 0.6;
13705}
13706
13707.productitem--ratings {
13708
13709 .spr-badge {
13710 margin-top: rem(6px);
13711 line-height: 1;
13712 }
13713}
13714
13715.productitem--actions {
13716 z-index: nth($local-stack, 2);
13717 display: -webkit-box;
13718 display: -webkit-flex;
13719 display: -ms-flexbox;
13720 display: flex;
13721 -webkit-box-orient: horizontal;
13722 -webkit-box-direction: normal;
13723 -webkit-flex-direction: row;
13724 -ms-flex-direction: row;
13725 flex-direction: row;
13726 -webkit-flex-wrap: wrap;
13727 -ms-flex-wrap: wrap;
13728 flex-wrap: wrap;
13729 -webkit-box-pack: start;
13730 -webkit-justify-content: flex-start;
13731 -ms-flex-pack: start;
13732 justify-content: flex-start;
13733 margin: $space-xx-small ($local-padding-medium - $space-xxx-small) 0;
13734 text-align: center;
13735 -webkit-transition: opacity 0.20s ease 0s;
13736 transition: opacity 0.20s ease 0s;
13737
13738 .no-touch & {
13739 position: absolute;
13740 right: 0;
13741 bottom: $local-padding-medium;
13742 left: 0;
13743 opacity: 0;
13744 visibility: hidden;
13745 }
13746
13747 .has-touch & {
13748 display: none;
13749 margin-right: -1 * $space-xxx-small;
13750 margin-left: -1 * $space-xxx-small;
13751 }
13752
13753 @include media($min: $bp-large) {
13754
13755 .productgrid--item:hover,
13756 .productgrid--item.animating &,
13757 .productgrid--item.visible & {
13758 visibility: visible;
13759 }
13760
13761 .productgrid--item.animating-in:not(.animating-out) & {
13762 -webkit-transition: opacity 0.2s ease 0.05s;
13763 transition: opacity 0.2s ease 0.05s;
13764 }
13765
13766 .productgrid--item.animating-in:not(.animating-out) &,
13767 .productgrid--item.visible:not(.animating-out) &,
13768 .productgrid--item.visible.animating-out:hover & {
13769 opacity: 1;
13770 }
13771
13772 // Occurs when user mouses in / out super quick
13773 .productgrid--item.animating-in.animating-out & {
13774 opacity: 0;
13775 }
13776
13777 .has-touch & {
13778 display: block;
13779 width: 100%;
13780 }
13781 }
13782}
13783
13784.productitem--action {
13785 display: inline-block;
13786 -webkit-box-align: center;
13787 -webkit-align-items: center;
13788 -ms-flex-align: center;
13789 align-items: center;
13790 -webkit-flex-basis: auto;
13791 -ms-flex-preferred-size: auto;
13792 flex-basis: auto;
13793 -webkit-box-flex: 1;
13794 -webkit-flex-grow: 1;
13795 -ms-flex-positive: 1;
13796 flex-grow: 1;
13797 -webkit-flex-shrink: 1;
13798 -ms-flex-negative: 1;
13799 flex-shrink: 1;
13800 min-width: 50%;
13801 padding-right: $space-xxx-small;
13802 padding-left: $space-xxx-small;
13803 margin-top: $space-xx-small;
13804
13805 .ie9 & {
13806 display: block;
13807 width: calc(100% - 2px);
13808 }
13809
13810 .has-touch & {
13811 min-width: 100%;
13812 }
13813}
13814
13815.productitem--action-trigger {
13816 display: block;
13817 width: 100%;
13818 padding-right: $space-xxx-small;
13819 padding-left: $space-xxx-small;
13820 text-align: center;
13821 white-space: nowrap;
13822 vertical-align: middle;
13823
13824 &.productitem--action-atc {
13825 @extend %atc-button;
13826 }
13827}
13828
13829.productitem--image-link {
13830 display: block;
13831}
13832
13833.productitem--image {
13834 position: relative;
13835 width: 100%;
13836 height: auto;
13837 padding: 0;
13838 margin: 0;
13839 overflow: hidden;
13840 background-size: 0;
13841
13842 .imagestyle--no-image & {
13843 height: 0;
13844 padding-bottom: 100%;
13845 }
13846
13847 img {
13848 display: block;
13849 max-width: 100%;
13850 max-height: 100%;
13851 margin: 0 auto;
13852 }
13853
13854 .productitem--image-alternate {
13855 position: absolute;
13856 top: 0;
13857 left: 50%;
13858 -webkit-transform: translateX(-50%);
13859 -ms-transform: translateX(-50%);
13860 transform: translateX(-50%);
13861 visibility: hidden;
13862 }
13863
13864 svg {
13865 position: absolute;
13866 top: 0;
13867 left: 0;
13868 width: 100%;
13869 height: 100%;
13870 }
13871
13872 .imagestyle--small &,
13873 .imagestyle--medium &,
13874 .imagestyle--large & {
13875
13876 .in-theme-editor & {
13877 background-color: $color-background-light;
13878 }
13879
13880 img,
13881 svg {
13882 position: absolute;
13883 top: 50%;
13884 left: 50%;
13885 -webkit-transform: translate(-50%, -50%);
13886 -ms-transform: translate(-50%, -50%);
13887 transform: translate(-50%, -50%);
13888 }
13889 }
13890
13891 .imagestyle--small &,
13892 .imagestyle--medium &,
13893 .imagestyle--large &,
13894 .imagestyle--cropped-small &,
13895 .imagestyle--cropped-medium &,
13896 .imagestyle--cropped-large & {
13897 height: 0;
13898 }
13899
13900 .imagestyle--small &,
13901 .imagestyle--cropped-small & {
13902 padding-bottom: 75%;
13903 }
13904
13905 .imagestyle--medium &,
13906 .imagestyle--cropped-medium & {
13907 padding-bottom: 100%;
13908 }
13909
13910 .imagestyle--large &,
13911 .imagestyle--cropped-large & {
13912 padding-bottom: 150%;
13913 }
13914
13915 .imagestyle--cropped-small &,
13916 .imagestyle--cropped-medium &,
13917 .imagestyle--cropped-large & {
13918 img,
13919 svg {
13920 position: absolute;
13921 top: 0;
13922 width: 100%;
13923 height: 100%;
13924 -webkit-transform: none;
13925 -ms-transform: none;
13926 transform: none;
13927 -o-object-fit: cover;
13928 object-fit: cover;
13929 }
13930
13931 &.product-item-image-no-objectfit {
13932 background-position: center;
13933 background-size: cover;
13934
13935 img {
13936 display: none;
13937 }
13938 }
13939 }
13940}
13941
13942.productitem-quickshop {
13943 display: none;
13944}
13945
13946.modal--quickshop-slim,
13947.modal--quickshop-full {
13948 @include media($max: $bp-large) {
13949 //scss-lint:disable ImportantRule
13950 display: none !important;
13951 }
13952}
13953
13954.modal--quickshop-full {
13955 display: none;
13956
13957 .modal-inner {
13958 max-width: 840px;
13959 padding: $space-xx-large;
13960 }
13961
13962 .product-gallery,
13963 .product-main {
13964 white-space: normal;
13965 }
13966
13967 .product-gallery {
13968 width: 47%;
13969 }
13970
13971 .product-main {
13972 width: 46%;
13973 margin-left: 7%;
13974 }
13975}
13976
13977.modal--quickshop-slim {
13978
13979 .product-ratings,
13980 .product-vendor,
13981 .product-gallery,
13982 .product-description,
13983 .share-buttons {
13984 display: none;
13985 }
13986
13987 .modal-inner {
13988 max-width: 500px;
13989 padding: $space-xx-large;
13990 }
13991
13992 .product-main {
13993 width: 100%;
13994 margin-left: 0;
13995 white-space: normal;
13996 }
13997}
13998
13999.product-details {
14000 color: $color-text;
14001
14002 @include media($max: $bp-small) {
14003 margin-top: $space-large;
14004 margin-bottom: $space-medium;
14005 }
14006}
14007
14008.product-title {
14009 margin-top: 0;
14010 margin-bottom: 0;
14011 font-size: $font-h3-size;
14012 color: $color-heading;
14013 line-height: 1.2;
14014
14015 @include media($min: $bp-small) {
14016 font-size: $font-h1-size;
14017 }
14018
14019 a {
14020 color: $color-heading;
14021 text-decoration: none;
14022 }
14023}
14024
14025.product-vendor {
14026 margin-top: $space-xxx-small;
14027 font-size: $font-body-size;
14028 line-height: 1.6;
14029 color: transparentize($color-text, 0.6);
14030
14031 a {
14032 @extend %link--default;
14033 }
14034}
14035
14036.product-ratings {
14037 margin-top: $space-xx-small;
14038
14039 .spr-badge {
14040
14041 .spr-badge-caption {
14042 margin-left: $space-xx-small;
14043 font-size: $font-body-size-smaller;
14044 }
14045
14046 .spr-badge-starrating {
14047 position: relative;
14048 top: -1px;
14049
14050 .spr-icon {
14051 font-size: $font-body-size-smaller;
14052
14053 @include media($min: $bp-small) {
14054 font-size: rem($font-body-size + 1);
14055 }
14056 }
14057 }
14058 }
14059}
14060
14061.product-pricing {
14062 display: -webkit-box;
14063 display: -webkit-flex;
14064 display: -ms-flexbox;
14065 display: flex;
14066 -webkit-flex-wrap: nowrap;
14067 -ms-flex-wrap: nowrap;
14068 flex-wrap: nowrap;
14069 margin-top: $space-x-small;
14070 margin-bottom: -1 * $space-xxx-small;
14071
14072 .ie9 & {
14073 font-size: 0;
14074 }
14075
14076 @include media($min: $bp-small) {
14077 margin-top: $space-small;
14078 }
14079}
14080
14081.product-sku {
14082 margin: $gutter-outer-medium 0 $gutter-outer;
14083 font-size: rem(14px);
14084 line-height: 1.5;
14085 opacity: 0.6;
14086
14087 &.product-sku--empty {
14088 display: none;
14089 }
14090
14091 .modal & {
14092 margin-bottom: $gutter-outer-small;
14093 }
14094}
14095
14096.product--badge {
14097 display: inline-block;
14098 height: 100%;
14099 margin-right: $space-small;
14100 margin-bottom: $space-xxx-small;
14101 font-size: rem(13px);
14102 white-space: nowrap;
14103}
14104
14105.product--price {
14106 display: -webkit-box;
14107 display: -webkit-flex;
14108 display: -ms-flexbox;
14109 display: flex;
14110 -webkit-box-flex: 0;
14111 -webkit-flex-grow: 0;
14112 -ms-flex-positive: 0;
14113 flex-grow: 0;
14114 -webkit-flex-shrink: 1;
14115 -ms-flex-negative: 1;
14116 flex-shrink: 1;
14117 -webkit-flex-wrap: wrap;
14118 -ms-flex-wrap: wrap;
14119 flex-wrap: wrap;
14120 vertical-align: middle;
14121
14122 .ie9 & {
14123 display: inline-block;
14124 font-size: 0;
14125 }
14126
14127 .price--compare-at,
14128 .price--main {
14129 -webkit-flex-basis: auto;
14130 -ms-flex-preferred-size: auto;
14131 flex-basis: auto;
14132 -webkit-box-flex: 1;
14133 -webkit-flex-grow: 1;
14134 -ms-flex-positive: 1;
14135 flex-grow: 1;
14136 margin-bottom: $space-xxx-small;
14137 font-size: rem(20px);
14138 line-height: 1.15;
14139 white-space: nowrap;
14140
14141 @include media($min: $bp-small) {
14142 font-size: rem(22px);
14143 }
14144 }
14145
14146 .price--main {
14147 display: inline-block;
14148 }
14149
14150 .price--compare-at {
14151 margin-right: $space-xx-small;
14152
14153 &.visible + .price--main {
14154 color: $color-sale;
14155 }
14156 }
14157}
14158
14159.product-section--container {
14160 @extend %layout-container;
14161 background-color: #FFF;
14162 margin-top: $space-xx-large;
14163
14164 @include media($min: $bp-large) {
14165 margin-top: $space-xxx-large;
14166 }
14167}
14168
14169.product-section--container:after {
14170 //background-color: #d3d3d3;
14171}
14172
14173.product-section--title {
14174 margin-bottom: $space-medium;
14175 font-size: $font-h4-size;
14176 color: $color-heading;
14177
14178 @include media($min: $bp-medium) {
14179 margin-bottom: $space-large;
14180 }
14181}
14182
14183// Additional product sections
14184.product-section--content {
14185 margin-top: $space-medium;
14186
14187 @include media($min: $bp-medium) {
14188 margin-top: $space-large;
14189 }
14190}
14191
14192.related-products--title {
14193 @include media($max: $bp-small) {
14194 padding-right: $gutter-outer-small;
14195 padding-left: $gutter-outer-small;
14196 }
14197
14198 @include media($min: $bp-small, $max: $bp-large) {
14199 padding-right: $gutter-outer-medium;
14200 padding-left: $gutter-outer-medium;
14201 }
14202}
14203
14204.product-message--container {
14205 //scss-lint:disable SpaceAfterPropertyColon
14206 max-height: 0;
14207 padding-top: 0;
14208 overflow: hidden;
14209 opacity: 0;
14210 -webkit-transition:
14211 max-height 0.25s ease,
14212 padding-top 0.25s ease,
14213 opacity 0.15s ease;
14214 transition:
14215 max-height 0.25s ease,
14216 padding-top 0.25s ease,
14217 opacity 0.15s ease;
14218
14219 &.visible {
14220 max-height: 200px;
14221 padding-top: $space-small;
14222 opacity: 1;
14223 }
14224
14225 div {
14226 padding: $space-x-small;
14227 }
14228}
14229
14230.product-message--error {
14231 @extend %message--error;
14232}
14233
14234.price--compare-at {
14235 display: none;
14236 font-size: rem(13px);
14237 line-height: 1.38;
14238 text-decoration: line-through;
14239 opacity: 0.6;
14240
14241 &.visible {
14242 display: inline-block;
14243 }
14244}
14245
14246.price--main {
14247 font-size: $font-body-size;
14248 line-height: rem(23px);
14249}
14250
14251.badge--soldout,
14252.badge--sale {
14253 @include font($font-body, $font-family: false, $font-weight: bolder);
14254 padding: $space-xxx-small rem(5px);
14255 text-decoration: none;
14256 vertical-align: middle;
14257}
14258
14259.badge--soldout {
14260 color: $color-background;
14261 background-color: $color-notice;
14262}
14263
14264.badge--sale {
14265 color: $color-white;
14266 background-color: $color-sale;
14267}
14268
14269.product-reviews--content {
14270
14271 .spr-container {
14272 padding: 0;
14273 border: 0;
14274 }
14275
14276 // Header
14277 .spr-header {
14278 padding: $space-large $space-medium;
14279 }
14280
14281 .spr-header-title {
14282 margin-bottom: 0;
14283 font-size: $font-h4-size;
14284 color: $color-heading;
14285 }
14286
14287 @media only screen and (max-width: 480px) {
14288 .spr-summary,
14289 .spr-header-title {
14290 text-align: left;
14291 }
14292 }
14293
14294 // Current rating
14295 .spr-summary {
14296 position: relative;
14297 margin-top: $space-x-small;
14298 font-size: $font-h3-size;
14299
14300 .spr-starrating {
14301 display: block;
14302 margin-right: 0;
14303
14304 @include media($min: $bp-small) {
14305 display: inline-block;
14306 }
14307
14308 .spr-icon {
14309 font-size: $font-h3-size;
14310 }
14311 }
14312 }
14313
14314 .spr-summary-caption {
14315 display: block;
14316 margin-top: $space-x-small;
14317 font-size: $font-body-size;
14318 line-height: 1.5;
14319 color: $color-text;
14320 vertical-align: bottom;
14321
14322 @include media($min: $bp-small) {
14323 display: inline-block;
14324 margin-top: ($font-h3-size - rem($font-body-size)) / 2;
14325 margin-left: $space-xx-small;
14326 }
14327
14328 span.spr-summary-actions-togglereviews {
14329 opacity: 0.6;
14330 }
14331
14332 a.spr-summary-actions-togglereviews {
14333 @extend %link--default;
14334 opacity: 1;
14335 }
14336 }
14337
14338 .spr-summary-actions {
14339 display: block;
14340 margin-top: $space-large;
14341
14342 @include media($min: $bp-small) {
14343 position: absolute;
14344 right: 0;
14345 bottom: 0;
14346 margin-top: 0;
14347 }
14348 }
14349
14350 .spr-summary-actions-newreview {
14351 @extend %button-secondary;
14352 float: none;
14353 }
14354
14355 .spr-form-message-error {
14356 @extend %message--error;
14357 }
14358
14359 // Review form
14360 .spr-form {
14361 padding: $space-large $space-medium;
14362 margin-top: 0;
14363 border: 0;
14364 border-top: 1px solid $color-border-soft;
14365
14366 @include media($min: $bp-small) {
14367 padding-top: $space-xx-large;
14368 padding-bottom: $space-xx-large;
14369 }
14370
14371 .spr-form-title {
14372 font-size: $font-h4-size;
14373 color: $color-heading;
14374 }
14375
14376 form {
14377 max-width: rem(640px);
14378 margin-right: auto;
14379 margin-left: auto;
14380 }
14381
14382 .spr-form-label {
14383 @extend %form-label;
14384 @include font($font-body, $font-family: false, $font-weight: bolder);
14385 display: block;
14386 margin-top: $space-large;
14387 }
14388
14389 .spr-form-contact-name .spr-form-label {
14390 margin-top: $space-small;
14391 }
14392
14393 .spr-form-input {
14394 display: block;
14395 margin-top: $space-x-small;
14396 }
14397
14398 .spr-form-input-text,
14399 .spr-form-input-email,
14400 .spr-form-input-textarea {
14401 @extend %form-control-base, %form-control-input;
14402 padding-top: rem(15px);
14403 padding-bottom: rem(15px);
14404 margin-bottom: 0;
14405
14406 &::-webkit-input-placeholder {
14407 opacity: 0.6;
14408 }
14409
14410 &:-ms-input-placeholder {
14411 opacity: 0.6;
14412 }
14413
14414 &::-ms-input-placeholder {
14415 opacity: 0.6;
14416 }
14417
14418 &::placeholder {
14419 opacity: 0.6;
14420 }
14421
14422 &.spr-form-input-error {
14423 border-color: $color-error;
14424 }
14425 }
14426
14427 .spr-form-input-textarea {
14428 @extend %form-control-textarea;
14429 }
14430
14431 .spr-form-review-rating {
14432
14433 .spr-icon {
14434 width: $font-h3-size;
14435 height: $font-h3-size;
14436 font-size: $font-h3-size;
14437 color: $color-star;
14438 }
14439 }
14440
14441 .spr-form-actions {
14442 margin-top: $space-large;
14443 }
14444
14445 .spr-button-primary {
14446 float: none;
14447 }
14448
14449 .spr-form-contact-name,
14450 .spr-form-contact-email,
14451 .spr-form-contact-location,
14452 .spr-form-review-rating,
14453 .spr-form-review-title,
14454 .spr-form-review-body {
14455 margin-bottom: 0;
14456 }
14457
14458 }
14459
14460 // Review / Pagination container
14461 .spr-content {
14462
14463 // Review container
14464 .spr-reviews {
14465 @extend %clearfix;
14466 padding: $space-x-large / 2 $space-medium;
14467 margin-top: 0;
14468 border: 0;
14469 border-top: 1px solid $color-border-soft;
14470 }
14471
14472 // Individual review
14473 .spr-review {
14474 padding: $space-x-large / 2 0;
14475 margin: 0;
14476 border: 0;
14477
14478 @include media($min: $bp-small) {
14479 float: left;
14480 width: calc(50% - #{$space-medium});
14481
14482 &:nth-child(2n + 1) {
14483 margin-right: $space-medium * 2;
14484 clear: left;
14485 }
14486 }
14487
14488 &:first-child {
14489 margin-top: 0;
14490 }
14491
14492 .spr-review-header-starratings {
14493 margin-bottom: $space-xxx-small;
14494 }
14495
14496 .spr-review-header-title {
14497 margin-top: $space-xx-small;
14498 font-size: $font-h4-size;
14499 color: $color-heading;
14500 }
14501
14502 .spr-review-header-byline {
14503 display: block;
14504 margin-top: $space-xx-small;
14505 margin-bottom: 0;
14506 font-size: $font-body-size-small;
14507 font-style: font-style($font-body);
14508 color: $color-text;
14509 opacity: 0.6;
14510
14511 strong {
14512 @include font($font-body, $font-family: false, $font-weight: initial);
14513 }
14514 }
14515
14516 .spr-review-content {
14517 margin-top: $space-x-small;
14518 margin-bottom: 0;
14519
14520 .spr-review-content-body {
14521 font-size: rem($font-body-size);
14522 line-height: 1.625;
14523 }
14524 }
14525
14526 .spr-review-reply {
14527 padding: $space-small;
14528 margin-top: $space-medium;
14529 margin-bottom: 0;
14530 background-color: $color-background-light;
14531
14532 .spr-review-reply-body {
14533 font-size: $font-body-size-smaller;
14534 }
14535 }
14536
14537 .spr-review-footer {
14538 margin-top: $space-medium;
14539
14540 a {
14541 @extend %link--default;
14542 font-size: rem(12px);
14543 }
14544 }
14545 }
14546
14547 // Review pagination
14548 .spr-pagination {
14549 padding: $space-large 0 0;
14550 clear: both;
14551 border-top: 0;
14552
14553 a {
14554 @extend %link--default;
14555 padding: 0 rem(9px);
14556 }
14557 }
14558
14559 .spr-pagination-page {
14560 display: inline-block;
14561 color: $color-text;
14562
14563 &.is-active {
14564 padding: rem(9px);
14565 }
14566 }
14567
14568 .spr-pagination-prev,
14569 .spr-pagination-next {
14570 position: relative;
14571 right: auto;
14572 left: auto;
14573 display: inline-block;
14574 }
14575 }
14576}
14577.product-recently-viewed--section {
14578 position: relative;
14579 &.hide {
14580 display: none;
14581 }
14582
14583 .flickity-viewport {
14584 position: relative;
14585
14586 &:before,
14587 &:after {
14588 content: '';
14589 position: absolute;
14590 top: 0;
14591 left: -$gutter-content;
14592 right: 100%;
14593 bottom: 0;
14594 background: -webkit-gradient( linear, left top, right top, color-stop(10%, $color-footer-background), to(rgba($color-footer-background, 0)));
14595 background: linear-gradient( to right, $color-footer-background 10%, rgba($color-footer-background, 0) 100%);
14596 z-index: 2;
14597 }
14598
14599 &:after {
14600 left: 100%;
14601 right: -$gutter-content;
14602 background: -webkit-gradient( linear, right top, left top, color-stop(10%, $color-footer-background), to(rgba($color-footer-background, 0)));
14603 background: linear-gradient( to left, $color-footer-background 10%, rgba($color-footer-background, 0) 100%);
14604 }
14605 }
14606
14607 .flickity-prev-next-button {
14608 opacity: 1;
14609
14610 svg {
14611 -webkit-transform: scale(1);
14612 -ms-transform: scale(1);
14613 transform: scale(1);
14614 -webkit-transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
14615 transition: fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
14616 transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s;
14617 transition: transform .15s cubic-bezier(.3, 0, 0, 1), fill 0.3s, -webkit-transform .15s cubic-bezier(.3, 0, 0, 1);
14618 fill: $color-text;
14619 }
14620
14621 &:disabled {
14622 cursor: default;
14623 opacity: 0.15;
14624 }
14625
14626 &:hover {
14627 &:not([disabled]) {
14628 opacity: 1;
14629
14630 svg {
14631 -webkit-transform: scale(1.2);
14632 -ms-transform: scale(1.2);
14633 transform: scale(1.2);
14634 }
14635 }
14636 }
14637
14638 &:active {
14639 &:not([disabled]) {
14640 opacity: 0.5;
14641 }
14642 }
14643
14644 @include media($max: $bp-medium) {
14645 display: none;
14646 }
14647
14648 &.next {
14649 @include media($min: $bp-medium, $max: $bp-large) {
14650 right: rem(25px);
14651 }
14652 }
14653
14654 &.previous {
14655 @include media($min: $bp-medium, $max: $bp-large) {
14656 left: rem(25px);
14657 }
14658 }
14659 }
14660}
14661
14662.product-recently-viewed-wrapper {
14663 padding: $gutter-content $gutter-content $gutter-outer-small;
14664 background: $color-footer-background;
14665}
14666
14667.product-recently-viewed--content {
14668 display: -webkit-box;
14669 display: -webkit-flex;
14670 display: -ms-flexbox;
14671 display: flex;
14672 width: calc(100%);
14673 padding: 0 $gutter-content;
14674 margin: $space-x-large auto;
14675 overflow: hidden;
14676 outline: 0;
14677
14678 @include media($min: $bp-medium) {
14679 width: calc(100% - (70px - #{$gutter-content * 2}));
14680 }
14681}
14682
14683.product-recently-viewed-header {
14684 -webkit-box-align: center;
14685 -webkit-align-items: center;
14686 -ms-flex-align: center;
14687 align-items: center;
14688 -webkit-box-pack: justify;
14689 -webkit-justify-content: space-between;
14690 -ms-flex-pack: justify;
14691 justify-content: space-between;
14692 width: 100%;
14693
14694 @include media($min: $bp-medium) {
14695 display: -webkit-box;
14696 display: -webkit-flex;
14697 display: -ms-flexbox;
14698 display: flex;
14699 }
14700}
14701
14702.product-recently-viewed-heading {
14703 margin: 0;
14704
14705 @include media($max: $bp-medium) {
14706 margin-bottom: $space-xxx-small;
14707 }
14708}
14709
14710.product-recently-viewed-clear {
14711 @extend %link--default;
14712 font-size: $button-small-size;
14713 cursor: pointer;
14714}
14715
14716.product-recently-viewed-card {
14717
14718 width: rem(175px);
14719 padding: $gutter-outer-small $gutter-outer-medium $gutter-outer-medium;
14720 margin-right: $gutter-outer-small;
14721 font-size: $font-body-size-small;
14722 background: $color-white;
14723 -webkit-transition: opacity 0.25s, -webkit-transform 0s;
14724 transition: opacity 0.25s, -webkit-transform 0s;
14725 transition: transform 0s, opacity 0.25s;
14726 transition: transform 0s, opacity 0.25s, -webkit-transform 0s;
14727
14728 &.hide-card {
14729 opacity: 0;
14730 }
14731
14732 &.move-card {
14733 -webkit-transform: translateX(calc(-100% - #{$gutter-outer-small}));
14734 -ms-transform: translateX(calc(-100% - #{$gutter-outer-small}));
14735 transform: translateX(calc(-100% - #{$gutter-outer-small}));
14736 -webkit-transition: opacity 0.25s, -webkit-transform 0.5s;
14737 transition: opacity 0.25s, -webkit-transform 0.5s;
14738 transition: transform 0.5s, opacity 0.25s;
14739 transition: transform 0.5s, opacity 0.25s, -webkit-transform 0.5s;
14740 }
14741
14742 @include media($min: $bp-medium) {
14743 width: rem(200px);
14744 padding: $gutter-outer-small $gutter-content $gutter-content;
14745 margin-right: $gutter-content;
14746 }
14747}
14748.product-recently-viewed-card:hover{
14749 box-shadow: 0 0 5px 4px #d3d3d3;
14750}
14751
14752.product-recently-viewed-card-time {
14753 display: -webkit-box;
14754 display: -webkit-flex;
14755 display: -ms-flexbox;
14756 display: flex;
14757 -webkit-box-align: center;
14758 -webkit-align-items: center;
14759 -ms-flex-align: center;
14760 align-items: center;
14761 -webkit-box-pack: justify;
14762 -webkit-justify-content: space-between;
14763 -ms-flex-pack: justify;
14764 justify-content: space-between;
14765 margin-bottom: $space-x-small;
14766 font-size: $font-body-size - 3px;
14767 line-height: 1;
14768 opacity: 0.7;
14769
14770 @include media($min: $bp-medium) {
14771 font-size: $font-body-size-smaller;
14772 }
14773}
14774
14775.product-recently-viewed-card-remove {
14776 padding: 5px;
14777 margin-right: -6px;
14778 cursor: pointer;
14779
14780 @include media($min: $bp-medium) {
14781 margin-right: -10px;
14782 }
14783}
14784
14785.product-recently-viewed-card-image {
14786
14787 &.product-recently-viewed-card-image-placeholder {
14788 background-color: $color-placeholder-background;
14789 }
14790}
14791
14792.product-recently-viewed-card-price {
14793 padding: $gutter-content 0 $gutter-outer-small / 2;
14794
14795 .price--main {
14796 color: $color-link;
14797 }
14798
14799 .product--badge {
14800 font-size: $font-body-size-smaller;
14801 }
14802}
14803
14804.product-recently-viewed-card-title {
14805 position: relative;
14806 display: block;
14807 height: 45px;
14808 color: $color-text;
14809 font-size: $font-body-size-small;
14810 line-height: 1.5;
14811 text-decoration: none;
14812 overflow: hidden;
14813
14814 &:after {
14815 content: '';
14816 position: absolute;
14817 width: 40%;
14818 height: rem(20px);
14819 right: 0;
14820 bottom: 0;
14821 background: -webkit-gradient(linear, left top, right top, from(rgba($color-white, 0)), color-stop(50%, $color-white));
14822 background: linear-gradient(to right, rgba($color-white, 0), $color-white 50%);
14823 text-align: right;
14824 }
14825}
14826
14827$local-thumbnail-space: 3px;
14828
14829.product-gallery--slider {
14830 position: relative;
14831 overflow: hidden;
14832 outline: none;
14833 -ms-touch-action: pan-y;
14834 touch-action: pan-y;
14835
14836 .flickity-viewport {
14837 height: auto;
14838 overflow: hidden;
14839 -webkit-transition: height 0.3s linear;
14840 transition: height 0.3s linear;
14841 }
14842
14843 @include media($max: $bp-small) {
14844
14845 &.flickity-enabled {
14846 cursor: -webkit-grab;
14847 cursor: grab;
14848 }
14849 }
14850
14851 @include media($min: $bp-small) {
14852 margin-top: 0;
14853
14854 // Disable Flickity's transformations
14855 .flickity-slider {
14856 -webkit-transform: none !important;
14857 -ms-transform: none !important;
14858 transform: none !important; //scss-lint:disable ImportantRule
14859 }
14860 }
14861
14862 &.product-gallery-style-natural:not(.flickity-enabled) {
14863 min-height: 150px;
14864 }
14865
14866 &.product-gallery--has-images:not(.flickity-enabled) {
14867 .product-gallery--image:not(.image--selected) {
14868 position: absolute;
14869 opacity: 0;
14870 }
14871 }
14872
14873 .video {
14874 position: absolute;
14875 top: 50%;
14876 opacity: 1;
14877 -webkit-transform: translateY(-50%);
14878 -ms-transform: translateY(-50%);
14879 transform: translateY(-50%);
14880 -webkit-transition: opacity 200ms linear;
14881 transition: opacity 200ms linear;
14882
14883 .no-js & {
14884 opacity: 0;
14885 }
14886 }
14887}
14888
14889.product-gallery--slider:not(.product-gallery--style-natural) {
14890 .fluid-width-video-wrapper {
14891 position: absolute;
14892 top: 50%;
14893 left: 50%;
14894 display: block;
14895 width: 100%;
14896 height: auto;
14897 max-width: 100%;
14898 max-height: 100%;
14899 margin: 0 auto;
14900 -webkit-transform: translate(-50%, -50%);
14901 -ms-transform: translate(-50%, -50%);
14902 transform: translate(-50%, -50%);
14903 }
14904
14905 .product-galley--image-background {
14906 position: absolute;
14907 top: 0;
14908 right: 0;
14909 bottom: 0;
14910 left: 0;
14911 background-position: center;
14912 background-size: cover;
14913 }
14914}
14915
14916.product-gallery--style-natural .product-galley--image-background {
14917 background-size: 0;
14918}
14919
14920.pixelzoom--active {
14921 overflow: hidden;
14922}
14923
14924.product-galley--video-container {
14925 background-color: $color-background-light;
14926}
14927
14928.product-gallery--video-image {
14929 opacity: 1;
14930 -webkit-transition: opacity 200ms ease-in-out;
14931 transition: opacity 200ms ease-in-out;
14932
14933 .video-playing ~ &,
14934 .video-transitioning ~ & {
14935 opacity: 0;
14936 }
14937}
14938
14939.product-gallery--style-cropped-short,
14940.product-gallery--style-cropped-square,
14941.product-gallery--style-cropped-tall,
14942.product-gallery--style-short,
14943.product-gallery--style-square,
14944.product-gallery--style-tall {
14945 &:not(.flickity-enabled),
14946 .flickity-viewport,
14947 .product-gallery--image {
14948 height: 0;
14949 }
14950}
14951
14952.product-gallery--style-short,
14953.product-gallery--style-square,
14954.product-gallery--style-tall {
14955 .in-theme-editor & {
14956 background-color: $color-background-light;
14957 }
14958
14959 img {
14960 position: absolute;
14961 //hidden
14962 //position:fixed;
14963 //visibility: hidden;
14964 top: 50%;
14965 left: 50%;
14966 display: block;
14967 width: auto;
14968 height: auto;
14969 //bottom:200px;
14970 max-width: 100%;
14971 max-height: 100%;
14972 margin: 0 auto;
14973 -webkit-transform: translate(-50%, -50%);
14974 -ms-transform: translate(-50%, -50%);
14975 transform: translate(-50%, -50%);
14976 }
14977}
14978
14979.product-gallery--style-cropped-short,
14980.product-gallery--style-cropped-square,
14981.product-gallery--style-cropped-tall {
14982
14983 img {
14984 position: absolute;
14985 top: 50%;
14986 left: 50%;
14987 overflow-x: hidden;
14988 -webkit-transform: translate(-50%, -50%);
14989 -ms-transform: translate(-50%, -50%);
14990 transform: translate(-50%, -50%);
14991
14992 &[data-rimg="noscript"],
14993 &.product-gallery--video-image {
14994 width: 100%;
14995 height: 100%;
14996 -o-object-fit: cover;
14997 object-fit: cover;
14998 }
14999
15000 &[data-rimg="lazy"]:not(.product-gallery--video-image),
15001 &[data-rimg="loading"]:not(.product-gallery--video-image),
15002 &[data-rimg="loaded"]:not(.product-gallery--video-image) {
15003 @extend %show-for-sr;
15004 }
15005 }
15006
15007 .video {
15008 iframe {
15009 opacity: 0;
15010 -webkit-transition: opacity 0.3s;
15011 transition: opacity 0.3s;
15012 }
15013
15014 .video-cover {
15015 background-size: 0;
15016 }
15017 }
15018
15019 .video-playing iframe {
15020 opacity: 1;
15021 }
15022}
15023
15024.product-gallery--style-short,
15025.product-gallery--style-cropped-short {
15026 &:not(.flickity-enabled),
15027 .flickity-viewport,
15028 .product-gallery--image {
15029 padding-bottom: 75%;
15030 }
15031}
15032
15033.product-gallery--style-square,
15034.product-gallery--style-cropped-square {
15035 &:not(.flickity-enabled),
15036 .flickity-viewport,
15037 .product-gallery--image {
15038 padding-bottom: 100%;
15039 }
15040}
15041
15042.product-gallery--style-tall,
15043.product-gallery--style-cropped-tall {
15044 &:not(.flickity-enabled),
15045 .flickity-viewport,
15046 .product-gallery--image {
15047 padding-bottom: 150%;
15048 }
15049}
15050
15051.product-gallery--image {
15052 width: 100%;
15053 margin: 0;
15054 overflow: hidden;
15055 outline: none;
15056 opacity: 0;
15057 -webkit-transition: opacity 0.25s ease;
15058 transition: opacity 0.25s ease;
15059
15060 @include media($max: $bp-small) {
15061 &.image--selected,
15062 .flickity-enabled & {
15063 opacity: 1;
15064 }
15065 }
15066
15067 @include media($min: $bp-small) {
15068 left: 0 !important; //scss-lint:disable ImportantRule
15069 z-index: -1;
15070 opacity: 0;
15071
15072 .flickity-enabled & {
15073 opacity: 0;
15074 -webkit-transition-duration: 0s;
15075 transition-duration: 0s;
15076 }
15077
15078 &.product-gallery--image-placeholder,
15079 &.image--selected,
15080 &.is-selected {
15081 z-index: 0;
15082 opacity: 1;
15083 }
15084 }
15085
15086 .product-gallery--style-natural & img,
15087 svg {
15088 display: block;
15089 width: 100%;
15090 margin: 0 auto;
15091 }
15092}
15093
15094.product-gallery--navigation {
15095 margin-top: $space-small - rem($local-thumbnail-space * 2);
15096 font-size: 0;
15097 text-align: left;
15098
15099 @include media($min: $bp-small) {
15100 margin-top: $space-medium - rem(6px);
15101 margin-right: -1 * $local-thumbnail-space;
15102 margin-left: -1 * $local-thumbnail-space;
15103 }
15104
15105 @include media($max: $bp-small) {
15106 padding-bottom: 2px;
15107 margin-left: $gutter-outer-small - $local-thumbnail-space;
15108 overflow-x: scroll;
15109 overflow-y: hidden;
15110 white-space: nowrap;
15111
15112 .product-gallery--thumbnail-trigger:last-child {
15113 margin-right: $gutter-outer-small;
15114 }
15115
15116 &::-webkit-scrollbar {
15117 display: none;
15118 }
15119 }
15120}
15121
15122.product-gallery--thumbnail-trigger {
15123 @extend %button-reset;
15124 position: relative;
15125 display: inline-block;
15126 height: 51px;
15127 max-width: 51px;
15128 padding: 2px;
15129 margin-top: $local-thumbnail-space * 2;
15130 margin-right: $local-thumbnail-space;
15131 margin-left: $local-thumbnail-space;
15132 color: $color-white;
15133 vertical-align: middle;
15134 border-radius: 2px;
15135 -webkit-box-shadow: 0 0 2px transparent;
15136 box-shadow: 0 0 2px transparent;
15137 -webkit-transition: -webkit-box-shadow 0.1s linear;
15138 transition: -webkit-box-shadow 0.1s linear;
15139 transition: box-shadow 0.1s linear;
15140 transition: box-shadow 0.1s linear, -webkit-box-shadow 0.1s linear;
15141
15142 .no-js & {
15143 cursor: default;
15144 }
15145
15146 &:focus {
15147 outline: none;
15148 }
15149
15150 &.thumbnail--selected {
15151 -webkit-box-shadow: 0 0 0 2px $color-slider-accent;
15152 box-shadow: 0 0 0 2px $color-slider-accent;
15153 }
15154
15155 .icon-play {
15156 position: absolute;
15157 top: 50%;
15158 left: 50%;
15159 width: rem(20px);
15160 height: rem(20px);
15161 -webkit-transform: translate(-50%, -50%);
15162 -ms-transform: translate(-50%, -50%);
15163 transform: translate(-50%, -50%);
15164
15165 .no-js & {
15166 display: none;
15167 }
15168 }
15169}
15170
15171.product-gallery--thumbnail {
15172 display: block;
15173 max-width: 100%;
15174}
15175
15176.product-gallery--overlay {
15177 display: none;
15178}
15179
15180.pixelzoom--image {
15181 opacity: 0;
15182 //position: fixed;
15183 //background-color: green;
15184 -webkit-transition: opacity 0.2s;
15185 transition: opacity 0.2s;
15186 will-change: transform;
15187
15188 .product-galley--image-background:hover & {
15189 opacity: 0;
15190
15191 @include media($min: $bp-small) {
15192 opacity: 1;
15193 }
15194 }
15195}
15196
15197.modal--pixelzoom {
15198 padding: 0;
15199 //background-color: $color-background;
15200 background-color: blue;
15201
15202 .modal-inner {
15203 //position: fixed;
15204 top: 0;
15205 right: 0;
15206 bottom: 0;
15207 left: 0;
15208 z-index: 3;
15209 display: -webkit-box;
15210 display: -webkit-flex;
15211 display: -ms-flexbox;
15212 display: flex;
15213 -webkit-box-align: center;
15214 -webkit-align-items: center;
15215 -ms-flex-align: center;
15216 align-items: center;
15217 -webkit-box-pack: center;
15218 -webkit-justify-content: center;
15219 -ms-flex-pack: center;
15220 justify-content: center;
15221 height: 100%;
15222 padding: 0;
15223
15224 .pixelzoom--image {
15225 opacity: 1;
15226 }
15227 }
15228
15229 .modal-content {
15230 position: relative;
15231 font-size: 0;
15232 pointer-events: none;
15233 opacity: 0;
15234 -webkit-transition: 0.2s opacity;
15235 transition: 0.2s opacity;
15236
15237 &.loaded {
15238 pointer-events: all;
15239 opacity: 1;
15240 }
15241 }
15242
15243 .modal-close {
15244 @extend %box-shadow;
15245 position: absolute;
15246 top: auto;
15247 right: auto;
15248 bottom: $gutter-outer;
15249 left: 50%;
15250 z-index: 9;
15251 display: -webkit-box;
15252 display: -webkit-flex;
15253 display: -ms-flexbox;
15254 display: flex;
15255 -webkit-box-align: center;
15256 -webkit-align-items: center;
15257 -ms-flex-align: center;
15258 align-items: center;
15259 padding: $gutter-outer-medium;
15260 cursor: pointer;
15261 background-clip: padding-box;
15262 background-color: $color-background;
15263 border-radius: 50%;
15264 -webkit-transform: translate3d(-50%, 0, 0);
15265 transform: translate3d(-50%, 0, 0);
15266 }
15267
15268 [data-rimg] {
15269 max-width: 100%;
15270 max-height: 100%;
15271 }
15272}
15273
15274.product-gallery--overlay-container {
15275 position: relative;
15276 font-size: 0;
15277}
15278
15279.product-galley--zoom-instructions {
15280 @extend %box-shadow;
15281 position: absolute;
15282 right: $gutter-outer-small;
15283 bottom: $gutter-outer-small;
15284 z-index: 1;
15285 font-size: $font-body-size-smallest;
15286 pointer-events: all;
15287 border-radius: 4px;
15288 opacity: 1;
15289
15290 .is-selected & {
15291 -webkit-animation: hide-zoom 0.5s 3s linear both;
15292 animation: hide-zoom 0.5s 3s linear both;
15293 }
15294
15295 svg {
15296 width: $font-body-size-smallest;
15297 height: $font-body-size-smallest;
15298 margin-right: $gutter-outer-small / 2;
15299 margin-left: 0;
15300 }
15301
15302 .no-js & {
15303 pointer-events: none;
15304 opacity: 0;
15305 }
15306}
15307
15308.product-galley--instruction {
15309 display: -webkit-box;
15310 display: -webkit-flex;
15311 display: -ms-flexbox;
15312 display: flex;
15313 -webkit-box-align: center;
15314 -webkit-align-items: center;
15315 -ms-flex-align: center;
15316 align-items: center;
15317 background-color: $color-background;
15318 border-radius: 3px;
15319
15320 &.click {
15321 padding: 8px;
15322
15323 svg {
15324 margin-top: 1px;
15325 }
15326
15327 @include media($max: $bp-small) {
15328 display: none;
15329 }
15330 }
15331
15332 .has-touch &.click {
15333 display: none;
15334 }
15335
15336 &.tap,
15337 &.mobile {
15338 display: none;
15339 padding: 6px;
15340
15341 .has-touch & {
15342 display: -webkit-box;
15343 display: -webkit-flex;
15344 display: -ms-flexbox;
15345 display: flex;
15346
15347 @include media($max: $bp-small) {
15348 display: none;
15349 }
15350 }
15351
15352 svg {
15353 width: rem(19px);
15354 height: rem(18px);
15355 }
15356
15357 @include media($max: $bp-large) {
15358 padding: 8px;
15359 font-size: $font-body-size-smaller;
15360 }
15361 }
15362
15363 &.mobile {
15364 .has-touch & {
15365 display: none;
15366
15367 @include media($max: $bp-small) {
15368 display: -webkit-box;
15369 display: -webkit-flex;
15370 display: -ms-flexbox;
15371 display: flex;
15372 }
15373 }
15374 }
15375}
15376
15377.form-options {
15378 margin-top: $space-small;
15379
15380 .product-form--alt &:first-of-type {
15381 margin-top: 0;
15382 }
15383
15384 .no-js & {
15385 &.no-js-required {
15386 display: block;
15387 width: 100%;
15388 }
15389
15390 &.js-required {
15391 display: none;
15392 }
15393 }
15394
15395 .js & {
15396 &.no-js-required {
15397 display: none;
15398 }
15399
15400 &.js-required {
15401 display: block;
15402 }
15403 }
15404}
15405
15406.product-form--atc {
15407 margin-top: $space-small;
15408 font-size: 0;
15409
15410 // For non variant products when in the alternate column
15411 .product-form--alt input[type=hidden] + & {
15412 margin-top: 0;
15413 }
15414}
15415
15416.product-form--atc-qty,
15417.product-form--atc-button {
15418 display: inline-block;
15419 vertical-align: middle;
15420}
15421
15422.product-form--atc-qty {
15423 width: $quantity-width;
15424}
15425
15426.product-form--atc-button {
15427 @extend %button-primary, %atc-button;
15428 @include button-size(large);
15429 width: calc(100% - #{$space-x-small + $quantity-width});
15430 padding-right: rem(5px);
15431 padding-left: rem(5px);
15432 margin-left: $space-x-small;
15433
15434 .ie9 & {
15435 width: calc(100% - #{rem2px($space-x-small) + rem2px($quantity-width)});
15436 }
15437
15438 .product-form--alt & {
15439 @include media($max: $bp-xl) {
15440 font-size: $button-medium-size;
15441 }
15442 }
15443}
15444
15445.option-name {
15446 @include font($font-body, $font-family: false, $font-weight: bolder);
15447
15448 @include media($min: $bp-small) {
15449 font-size: $font-body-size-smaller;
15450 }
15451}
15452
15453.option-values {
15454 margin-top: $gutter-outer-small;
15455}
15456
15457.option-value {
15458 display: inline-block;
15459}
15460
15461.option-value-input {
15462 display: none;
15463
15464 & + .option-value-name {
15465 @extend %form-control-base;
15466 display: inline-block;
15467 width: auto;
15468 padding: $gutter-outer-small * 0.75 $gutter-outer-small;
15469 margin: 0 $gutter-outer-small / 2 $gutter-outer-small 0;
15470 cursor: pointer;
15471 -webkit-transition: 0.2s;
15472 transition: 0.2s;
15473
15474 @include media($min: $bp-small) {
15475 font-size: $font-body-size-smaller;
15476 }
15477 }
15478
15479 &:checked + .option-value-name {
15480 color: $color-link;
15481 background-color: rgba($color-link, 0.1);
15482 border-color: $color-link;
15483 }
15484
15485 &:disabled + .option-value-name {
15486 opacity: 0.5;
15487 text-decoration: line-through;
15488 cursor: default;
15489 }
15490}
15491
15492.smart-payment-enabled {
15493 .product-form--atc-button {
15494 @extend %button-secondary, %atc-button;
15495 @include button-size(large);
15496 width: 100%;
15497 margin-top: 75px;
15498 margin-left: 0;
15499 font-size: $font-body-size;
15500 }
15501}
15502
15503//scss-lint:disable SelectorFormat
15504.shopify-payment-button {
15505 margin-top: $space-small;
15506
15507 .shopify-payment-button__button {
15508 margin-right: auto;
15509 margin-left: auto;
15510 }
15511
15512 .shopify-payment-button__button--unbranded {
15513 @extend %button-primary, %atc-button;
15514 @include button-size(large);
15515
15516 .product-form--alt & {
15517 @include media($max: $bp-xl) {
15518 font-size: $button-medium-size;
15519 }
15520 }
15521 }
15522
15523 .shopify-payment-button__button--branded {
15524 // Make button same height as ATC button
15525 min-height: 48px;
15526 overflow: hidden;
15527 border-radius: 3px;
15528 }
15529
15530 .shopify-payment-button__more-options {
15531 @extend %link--default;
15532 @include font($font-body);
15533 padding: 0;
15534 font-size: $font-body-size-small;
15535
15536 &:hover {
15537 text-decoration: none;
15538 }
15539 }
15540}
15541
15542//scss-lint:enable SelectorFormat
15543
15544.account-order {
15545 width: 100%;
15546 text-align: left;
15547 border-collapse: collapse;
15548
15549 tr {
15550 border-bottom: 1px solid $color-border-soft;
15551 }
15552
15553 th {
15554 @include font($font-heading);
15555 padding-bottom: $space-small;
15556 font-size: $font-h6-size;
15557 color: $color-heading;
15558 }
15559
15560 td {
15561 padding-top: $space-small;
15562 padding-bottom: $space-small;
15563 padding-left: $gutter-content;
15564 font-size: $font-body-size-small;
15565
15566 &:first-child {
15567 padding-left: 0;
15568 }
15569 }
15570
15571 .order-footer-value,
15572 .order-item-price,
15573 .order-item-quantity,
15574 .order-item-total {
15575 width: 20%;
15576 text-align: right;
15577
15578 @include media($min: $bp-small) {
15579 width: 16%;
15580 }
15581 }
15582
15583 .order-item-placeholder {
15584 display: block;
15585 }
15586
15587 .order-item-title {
15588 @include font($font-heading);
15589 width: calc(60% - 64px);
15590
15591 a {
15592 display: block;
15593 }
15594
15595 .order-item-options {
15596 display: block;
15597 margin-top: $space-xx-small;
15598 font-size: $font-body-size-smaller;
15599 }
15600 }
15601
15602 .order-item-price {
15603 display: table-cell;
15604
15605 @include media($max: $bp-small) {
15606 position: absolute;
15607 visibility: hidden;
15608 }
15609 }
15610
15611 .order-item-image {
15612 width: 50px;
15613
15614 a {
15615 display: block;
15616 height: 100%;
15617 }
15618
15619 img {
15620 display: block;
15621 width: auto;
15622 height: auto;
15623 max-width: 100%;
15624 }
15625 }
15626
15627 .order-footer-item {
15628 &:last-child {
15629 border-bottom: 0;
15630 }
15631 }
15632}
15633
15634.account-order-attributes {
15635 padding-left: 0;
15636 list-style: none;
15637
15638 li:not(:first-child) {
15639 margin-top: $space-xx-small;
15640 }
15641}
15642
15643.account-order-attribute-title {
15644 @include font($font-body, $font-weight: bolder, $font-family: false);
15645}
15646.dynamic-video-wrapper {
15647 @extend %layout-container;
15648 margin-top: $gutter-outer;
15649}
15650
15651.video {
15652 position: relative;
15653 width: 100%;
15654 padding-bottom: percentage(9/16);
15655 z-index: 2;
15656
15657 &.video-aspect-ratio-21-9 {
15658 padding-bottom: percentage(9/21);
15659 }
15660
15661 iframe {
15662 position: absolute;
15663 z-index: 0;
15664 width: 100%;
15665 height: 100%;
15666 background-color: $color-black;
15667 }
15668
15669 &.video-playing {
15670 .fluid-width-video-wrapper {
15671 z-index: 1;
15672 }
15673 }
15674
15675 .hide-player {
15676 opacity: 0;
15677 -webkit-transition: opacity 200ms ease-in-out;
15678 transition: opacity 200ms ease-in-out;
15679 }
15680
15681 &.video-transitioning .hide-player,
15682 &.video-playing .hide-player {
15683 opacity: 1;
15684 }
15685}
15686
15687.video-cover {
15688 position: absolute;
15689 top: 0;
15690 right: 0;
15691 bottom: 0;
15692 left: 0;
15693 z-index: 1;
15694 width: 100%;
15695 height: 100%;
15696 background-position: center;
15697 background-size: cover;
15698 opacity: 1;
15699
15700 .video-transitioning &,
15701 .video-playing & {
15702 opacity: 0;
15703 -webkit-transition: opacity 200ms ease-in-out;
15704 transition: opacity 200ms ease-in-out;
15705 }
15706
15707 .video-playing & {
15708 z-index: 0;
15709 }
15710}
15711
15712.video-overlay {
15713 position: absolute;
15714 top: 0;
15715 right: 0;
15716 bottom: 0;
15717 left: 0;
15718 display: -webkit-box;
15719 display: -webkit-flex;
15720 display: -ms-flexbox;
15721 display: flex;
15722 -webkit-box-align: center;
15723 -webkit-align-items: center;
15724 -ms-flex-align: center;
15725 align-items: center;
15726 -webkit-box-pack: center;
15727 -webkit-justify-content: center;
15728 -ms-flex-pack: center;
15729 justify-content: center;
15730 width: 100%;
15731 height: 100%;
15732}
15733
15734.video-play-button {
15735 position: relative;
15736 display: -webkit-box;
15737 display: -webkit-flex;
15738 display: -ms-flexbox;
15739 display: flex;
15740 -webkit-box-align: center;
15741 -webkit-align-items: center;
15742 -ms-flex-align: center;
15743 align-items: center;
15744 -webkit-box-pack: center;
15745 -webkit-justify-content: center;
15746 -ms-flex-pack: center;
15747 justify-content: center;
15748 width: rem(77px);
15749 height: rem(77px);
15750 padding: 0;
15751 margin: 0;
15752 color: $color-white;
15753 background-color: transparent;
15754 cursor: pointer;
15755 border: 0;
15756 border-radius: rem(25px);
15757 outline: none;
15758 -webkit-transition: -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
15759 transition: -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
15760 transition: transform .12s cubic-bezier(.3, 0, 0, 1);
15761 transition: transform .12s cubic-bezier(.3, 0, 0, 1), -webkit-transform .12s cubic-bezier(.3, 0, 0, 1);
15762
15763 &.no-cover {
15764 opacity: 0;
15765
15766 &:active {
15767 opacity: 0;
15768 }
15769 }
15770
15771 &:hover {
15772 -webkit-transform: scale(1.08);
15773 -ms-transform: scale(1.08);
15774 transform: scale(1.08);
15775 }
15776
15777 &:active {
15778 opacity: 0.7;
15779 -webkit-transform: scale(.96);
15780 -ms-transform: scale(.96);
15781 transform: scale(.96);
15782 }
15783}
15784
15785.icon-play {
15786 position: absolute;
15787 top: 0;
15788 left: 0;
15789 display: block;
15790 height: auto;
15791 opacity: 1;
15792
15793 .video-loading & {
15794 opacity: 0;
15795 -webkit-transition: opacity 200ms ease-in-out;
15796 transition: opacity 200ms ease-in-out;
15797 }
15798}
15799
15800.icon-loading {
15801 position: absolute;
15802 top: 0;
15803 left: 0;
15804 display: block;
15805 opacity: 0;
15806 -webkit-animation: 0.6s rotate linear infinite both;
15807 animation: 0.6s rotate linear infinite both;
15808
15809 .video-loading & {
15810 opacity: 1;
15811 -webkit-transition: opacity 200ms ease-in-out;
15812 transition: opacity 200ms ease-in-out;
15813 }
15814}
15815
15816$local-button-width: 53px;
15817$local-active-background: mix($color-link, $color-background, 8%);
15818$local-image-width: rem(48px);
15819//+-livesearch
15820.live-search {
15821 position: relative;
15822 z-index: $index-header-search;
15823 display: block;
15824 height: $header-content-height;
15825 margin-top: 10px;
15826
15827 @include media($min: $bp-large) {
15828 display: -webkit-box;
15829 display: -webkit-flex;
15830 display: -ms-flexbox;
15831 display: flex;
15832 -webkit-flex-basis: auto;
15833 -ms-flex-preferred-size: auto;
15834 flex-basis: auto;
15835 -webkit-box-flex: 1;
15836 -webkit-flex-grow: 1;
15837 -ms-flex-positive: 1;
15838 flex-grow: 1;
15839 -webkit-flex-shrink: 1;
15840 -ms-flex-negative: 1;
15841 flex-shrink: 1;
15842 margin-top: 0;
15843 vertical-align: middle;
15844
15845 .ie9 & {
15846 display: inline-block;
15847 width: calc(100% - 300px); // Max logo width + safety margin
15848 }
15849 }
15850
15851 &.live-search--takeover {
15852 position: fixed;
15853 top: 0;
15854 right: 0;
15855 left: 0;
15856 width: 100%;
15857 height: 100vh;
15858 margin-top: 0;
15859 background-color: $color-background;
15860 }
15861}
15862//editing search bar
15863.live-search-form {
15864
15865 position: absolute;
15866 top: -1px;
15867 right: -1px;
15868 left: -1px;
15869 border: 1px solid transparentize($color-border, 0.8);
15870 width: calc(260% - #{53px});
15871 border-radius: 3px 4px 4px 3px;
15872 -webkit-box-shadow: 0 2px 3px transparentize($color-border, 0.89);
15873 box-shadow: 0 2px 3px transparentize($color-border, 0.89);
15874 -webkit-transition: border 0.1s ease, -webkit-box-shadow 0.1s ease;
15875 transition: border 0.1s ease, -webkit-box-shadow 0.1s ease;
15876 transition: border 0.1s ease, box-shadow 0.1s ease;
15877 transition: border 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
15878
15879 &:hover,
15880 .live-search--focused & {
15881 border-color: transparentize($color-border, 0.75);
15882 -webkit-box-shadow: 0 3px 7px transparentize($color-border, 0.84);
15883 box-shadow: 0 3px 7px transparentize($color-border, 0.84);
15884 }
15885
15886 .live-search--takeover & {
15887 border-color: transparent;
15888 border-radius: 0;
15889 -webkit-box-shadow: none;
15890 box-shadow: none;
15891 }
15892
15893 .form-field {
15894 position: relative;
15895 z-index: 100;
15896 display: -webkit-box;
15897 display: -webkit-flex;
15898 display: -ms-flexbox;
15899 display: flex;
15900 height: 35px;
15901
15902 .live-search--takeover & {
15903 height: $header-content-height + 6px;
15904 border-bottom: 1px solid $color-border-soft;
15905 }
15906
15907 .ie9 & {
15908 height: $header-content-height;
15909 overflow: hidden;
15910 }
15911 }
15912}
15913//livesearch
15914.live-search-form-field {
15915 -webkit-flex-basis: auto;
15916 -ms-flex-preferred-size: auto;
15917 flex-basis: auto;
15918 -webkit-box-flex: 0;
15919 -webkit-flex-grow: 0;
15920 -ms-flex-positive: 0;
15921 flex-grow: 0;
15922 -webkit-flex-shrink: 0;
15923 -ms-flex-negative: 0;
15924 flex-shrink: 0;
15925 width: calc(100% - #{53px});
15926 padding-top: rem(14px);
15927 padding-bottom: rem(14px);
15928 font-size: rem(13px);
15929 vertical-align: top;
15930 border: 0;
15931 //truesearch
15932 margin:5px;
15933 transform: translateY(-5%);
15934 border-top-right-radius: 0;
15935 border-bottom-right-radius: 0;
15936
15937 .ie9 & {
15938 display: inline-block;
15939 }
15940
15941 .live-search--active & {
15942 border-bottom-left-radius: 0;
15943 }
15944
15945 .live-search--takeover & {
15946 z-index: $index-header-search + 50;
15947 width: 100%;
15948 padding-right: 100px;
15949 border-radius: 0;
15950 }
15951}
15952
15953
15954.live-search-button {
15955 @extend %search-button;
15956 -webkit-flex-basis: auto;
15957 -ms-flex-preferred-size: auto;
15958 flex-basis: auto;
15959 -webkit-box-flex: 0;
15960 -webkit-flex-grow: 0;
15961 -ms-flex-positive: 0;
15962 flex-grow: 0;
15963 -webkit-flex-shrink: 0;
15964 -ms-flex-negative: 0;
15965 flex-shrink: 0;
15966 width: $local-button-width;
15967 vertical-align: top;
15968 border-bottom-left-radius: 0;
15969 border-top-left-radius: 0;
15970 margin-left: -5px;
15971 border:5px;
15972 height: 35px;
15973
15974
15975 .live-search--active & {
15976 border-bottom-right-radius: 0;
15977 }
15978
15979 .live-search--takeover & {
15980 display: none;
15981 visibility: hidden;
15982 }
15983
15984 .ie9 & {
15985 display: inline-block;
15986 height: $header-content-height;
15987 }
15988
15989 .search-icon--inactive svg {
15990 margin-top: -2px;
15991 }
15992}
15993
15994.live-search-takeover-cancel {
15995 @extend %button-reset, %link--default;
15996 @include font($font-body, $font-family: false, $font-weight: bolder);
15997 position: absolute;
15998 top: 0;
15999 right: 0;
16000 bottom: 0;
16001 z-index: $index-header-search + 100;
16002 display: none;
16003 padding: rem(15px);
16004 font-size: $font-body-size;
16005 visibility: hidden;
16006
16007 .live-search--takeover & {
16008 display: inline-block;
16009 visibility: visible;
16010 }
16011
16012 &:focus {
16013 outline: solid transparentize($color-link, 0.5);
16014 outline-offset: -3px;
16015 }
16016}
16017
16018.search-flydown {
16019 position: relative;
16020 z-index: 50;
16021 display: none;
16022 width: 100%;
16023 font-size: rem($font-body-size);
16024 background-color: $color-background;
16025 border-top: 1px solid $color-border-soft;
16026 border-bottom-right-radius: 3px;
16027 border-bottom-left-radius: 3px;
16028
16029 .live-search--active & {
16030 z-index: 200;
16031 display: block;
16032 }
16033
16034 .live-search--takeover & {
16035 height: calc(100vh - #{$header-content-height});
16036 border-top: 0;
16037 }
16038}
16039
16040.search-flydown--placeholder,
16041.search-flydown--results,
16042.search-flydown--quicklinks {
16043 display: none;
16044
16045 &.visible {
16046 display: block;
16047 }
16048}
16049
16050// Quicklinks
16051.search-flydown--quicklinks {
16052 padding-top: 15px;
16053 padding-bottom: 10px;
16054}
16055
16056.search-flydown--quicklinks-title {
16057 @include font($font-body, $font-family: false, $font-weight: bolder);
16058 margin-top: 0;
16059 margin-bottom: 0;
16060 margin-left: 15px;
16061 font-size: rem(17px);
16062 color: $color-heading;
16063}
16064
16065.search-flydown--quicklinks-list {
16066 padding-left: 0;
16067 margin-top: $space-xx-small;
16068 margin-bottom: 0;
16069 list-style: none;
16070}
16071
16072.search-flydown--quicklinks-item {
16073 display: block;
16074}
16075
16076.search-flydown--quicklinks-link {
16077 display: block;
16078 padding: 7px 15px;
16079 color: $color-link;
16080 text-decoration: none;
16081 background-color: $color-background;
16082 -webkit-transition: color 0.1s ease, background-color 0.1s ease;
16083 transition: color 0.1s ease, background-color 0.1s ease;
16084
16085 &:hover,
16086 &:focus {
16087 background-color: $local-active-background;
16088 }
16089
16090 &:focus {
16091 outline: none;
16092 }
16093}
16094
16095// Product results
16096.search-flydown--product-items--none,
16097.search-flydown--product-items {
16098 display: block;
16099
16100 .search-flydown--results--content-enabled & {
16101 display: inline-block;
16102 width: 64%;
16103 vertical-align: top;
16104
16105 .live-search--takeover & {
16106 display: block;
16107 width: 100%;
16108 }
16109 }
16110}
16111
16112.search-flydown--product {
16113 display: block;
16114 padding: 10px 15px;
16115 font-size: 0;
16116 color: $color-text;
16117 text-decoration: none;
16118 background-color: $color-background;
16119 -webkit-transition: color 0.1s ease-in, background-color 0.1s ease-in;
16120 transition: color 0.1s ease-in, background-color 0.1s ease-in;
16121
16122 &:hover,
16123 &:focus {
16124 background-color: $local-active-background;
16125 }
16126
16127 &:focus {
16128 outline: solid transparentize($color-link, 0.5);
16129 }
16130
16131 .search-flydown--placeholder & {
16132 cursor: default;
16133
16134 &:hover,
16135 &:focus {
16136 background-color: $color-background;
16137 }
16138
16139 &:last-child {
16140 border-bottom-right-radius: 3px;
16141 border-bottom-left-radius: 3px;
16142 }
16143 }
16144}
16145
16146.placeholder--content-text,
16147.placeholder--content-image {
16148 -webkit-animation: shimmer 1s ease-in-out infinite;
16149 animation: shimmer 1s ease-in-out infinite;
16150 -webkit-animation-fill-mode: forwards;
16151 animation-fill-mode: forwards;
16152 -webkit-animation-direction: alternate;
16153 animation-direction: alternate;
16154}
16155
16156.search-flydown--product-text,
16157.search-flydown--product-image {
16158 display: inline-block;
16159 vertical-align: middle;
16160}
16161
16162.search-flydown--product-image {
16163 display: inline-block;
16164 width: $local-image-width;
16165 height: $local-image-width;
16166 font-size: $font-body-size;
16167
16168 img,
16169 svg {
16170 display: block;
16171 max-width: 100%;
16172 max-height: 100%;
16173 margin: 0 auto;
16174 }
16175
16176 + .search-flydown--product-text {
16177 max-width: calc(100% - (#{$local-image-width + $space-small}));
16178 margin-left: $space-small;
16179 }
16180}
16181
16182.search-flydown--product-text {
16183 font-size: $font-body-size;
16184
16185 .placeholder--content-text {
16186 height: 0.6em;
16187 max-width: 100%;
16188 }
16189}
16190
16191.search-flydown--product-title {
16192 display: block;
16193 font-size: $font-body-size;
16194 line-height: 1.3;
16195
16196 &.placeholder--content-text {
16197 width: 240px; // Opinionated width -- for pleasantries
16198 }
16199
16200 .highlight {
16201 background-color: $color-highlight;
16202 }
16203}
16204
16205.search-flydown--product-price {
16206 display: block;
16207 font-size: $font-body-size-small;
16208 line-height: 1.5;
16209
16210 &.placeholder--content-text {
16211 width: 70px;
16212 margin-top: 0.44em; // Estimated space above normally derived from line-height
16213 }
16214}
16215
16216.search-flydown--product-price--main {
16217 display: inline-block;
16218 color: $color-link;
16219
16220 .search-flydown--product-price-has-sale & {
16221 margin-right: rem(7px);
16222 color: $color-sale;
16223 }
16224}
16225
16226.search-flydown--product-price--compare-at {
16227 color: transparentize($color-text, 0.4);
16228 text-decoration: line-through;
16229}
16230
16231.search-flydown--product-items--none {
16232 padding: $space-medium 15px $space-large;
16233 font-size: $font-body-size;
16234 color: $color-text;
16235 vertical-align: top;
16236
16237 h5 {
16238 margin-top: 0;
16239 margin-bottom: 0;
16240 font-size: $font-h5-size;
16241 color: $color-heading;
16242 }
16243
16244 p {
16245 margin-top: $space-medium;
16246 margin-bottom: 0;
16247 }
16248}
16249
16250.search-flydown--continue {
16251 @extend %link--default;
16252
16253 &:focus {
16254 outline: solid transparentize($color-link, 0.5);
16255 outline-offset: 4px;
16256 }
16257}
16258
16259// Content results
16260.search-flydown--content-items {
16261 display: inline-block;
16262 width: 36%;
16263 padding: $space-medium 25px $space-large;
16264 vertical-align: top;
16265
16266 .live-search--takeover & {
16267 display: none;
16268 }
16269}
16270
16271.search-flydown--content-title {
16272 margin-top: 0;
16273 margin-bottom: 0;
16274 font-size: $font-body-size-smaller;
16275 color: transparentize($color-text, 0.4);
16276}
16277
16278.search-flydown--content-items-list {
16279 padding-left: 0;
16280 margin-top: $space-x-small;
16281 font-size: $font-body-size;
16282 list-style: none;
16283}
16284
16285.search-flydown--content-item {
16286 margin-top: $space-xx-small;
16287 font-size: $font-body-size;
16288 line-height: 1.56;
16289
16290 a {
16291 @extend %link--default;
16292
16293 &:focus {
16294 outline: solid transparentize($color-link, 0.5);
16295 outline-offset: 4px;
16296 }
16297 }
16298}
16299
16300.search-flydown--content-items-none {
16301 margin-top: $space-xx-small;
16302 margin-bottom: 0;
16303 font-size: $font-body-size;
16304 color: $color-text;
16305}
16306
16307.search-flydown--footer {
16308 display: block;
16309 width: 100%;
16310 padding: 10px 15px 15px;
16311 text-align: center;
16312}