@charset "UTF-8";
/*============================================================================
Debut | Built with Shopify Slate
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
==============================================================================*/
/*================ SASS HELPERS ================*/
/*================ #Mixins ================*/
/*============================================================================
Prefix mixin for generating vendor prefixes.
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
Usage:
// Input:
.element {
@include prefix(transform, scale(1), ms webkit spec);
}
// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
/*================ Media Query Mixin ================*/
/*================ Responsive Show/Hide Helper ================*/
/*================ Responsive Text Alignment Helper ================*/
/*============================================================================
Convert pixels (unitless) to ems
eg. for a relational value of 12px write calc-font-size(12) when the parent is 16px
if the parent is another value say 24px write calc-font-size(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
/*============================================================================
Flexbox prefix mixins from Bourbon
https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
/*================ VARIABLES ================*/
/*============================================================================
Grid Breakpoints and Class Names
- Do not change the variable names
- Breakpoint pixel values are used in the window.theme.breakpoints object
==============================================================================*/
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
==============================================================================*/
/*================ Color Variables ================*/
/*================ Sizing Variables ================*/
/*================ Footer Variables ================*/
/*================ Z-Index ================*/
/*================ SVG ================*/
/*================ Drawers ================*/
/*================ Hero Slider ================*/
/*================ Typography ================*/
/*================ Gift Cards ================*/
/*================ Z-index ================*/
/*================ Product video ================*/
/*================ Image placeholder ================*/
/*================ VENDOR ================*/
/*============================================================================
Slick Slider 1.6.0
- If upgrading Slick's styles, use the following variables/functions
instead of the slick defaults (from slick-theme.scss)
- This file includes default slick.scss styles (at Slick Slider SCSS)
and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually.
- Remove `outline: none` from `.slick-dots li button`
==============================================================================*/
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; }
/*================ Slick Slider Theme ================*/
.slick-loading .slick-list {
background: #fff var(--slick-img-url) center center no-repeat; }
/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none; }
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
background: transparent;
color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1; }
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25; }
.slick-prev:before,
.slick-next:before {
font-family: "slick-icons, sans-serif";
font-size: 20px;
line-height: 1;
color: #000;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-prev {
left: -25px; }
[dir="rtl"] .slick-prev {
left: auto;
right: -25px; }
.slick-prev:before {
content: "←"; }
[dir="rtl"] .slick-prev:before {
content: "→"; }
.slick-next {
right: -25px; }
[dir="rtl"] .slick-next {
left: -25px;
right: auto; }
.slick-next:before {
content: "→"; }
[dir="rtl"] .slick-next:before {
content: "←"; }
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px; }
.slick-dots {
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0; }
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.slick-dots li button, .slick-dots li a {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before, .slick-dots li a:hover:before, .slick-dots li a:focus:before {
opacity: 1; }
.slick-dots li button:before, .slick-dots li a:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick-icons, sans-serif";
font-size: 6px;
line-height: 20px;
text-align: center;
color: #fff;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {
color: #fff;
opacity: 0.75; }
/*================ GLOBAL ================*/
/*============================================================================
#Normalize
Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block; }
input,
textarea,
select,
.disclosure__toggle {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%; }
a {
background-color: transparent; }
b,
strong {
font-weight: var(--font-weight-body--bolder); }
em {
font-style: italic; }
small {
font-size: 80%; }
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
img {
max-width: 100%;
border: 0; }
button,
input,
optgroup,
select,
.disclosure__toggle,
textarea {
color: inherit;
font: inherit;
margin: 0; }
button[disabled],
html input[disabled] {
cursor: default; }
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0; }
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText; }
input[type="search"], input[type="number"], input[type="email"], input[type="password"] {
-webkit-appearance: none;
-moz-appearance: none; }
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0; }
td,
th {
padding: 0; }
textarea {
overflow: auto;
-webkit-appearance: none;
-moz-appearance: none; }
/*============================================================================
Fast Tap
enables no-delay taps (FastClick-esque) on supporting browsers
==============================================================================*/
a,
button,
[role="button"],
input,
label,
select,
.disclosure__toggle,
textarea {
touch-action: manipulation; }
/*============================================================================
#Grid
==============================================================================*/
/*============================================================================
Grid Setup
1. Allow the grid system to be used on lists.
2. Remove any margins and paddings that might affect the grid system.
3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
/*============================================================================
Reversed grids allow you to structure your source in the opposite
order to how your rendered layout will appear.
==============================================================================*/
.grid--rev {
direction: rtl;
text-align: left; }
.grid--rev > .grid__item {
direction: ltr;
text-align: left;
float: right; }
/*============================================================================
Grid Columns
- Create width classes, prepended by the breakpoint name.
==============================================================================*/
/*================ Grid push classes ================*/
/*================ Clearfix helper on uniform grids ================*/
/*================ Build Base Grid Classes ================*/
/* Whole */
.one-whole {
width: 100%; }
/* Halves */
.one-half {
width: 50%; }
/* Thirds */
.one-third {
width: 33.33333%; }
.two-thirds {
width: 66.66667%; }
/* Quarters */
.one-quarter {
width: 25%; }
.two-quarters {
width: 50%; }
.three-quarters {
width: 75%; }
/* Fifths */
.one-fifth {
width: 20%; }
.two-fifths {
width: 40%; }
.three-fifths {
width: 60%; }
.four-fifths {
width: 80%; }
/* Sixths */
.one-sixth {
width: 16.66667%; }
.two-sixths {
width: 33.33333%; }
.three-sixths {
width: 50%; }
.four-sixths {
width: 66.66667%; }
.five-sixths {
width: 83.33333%; }
/* Eighths */
.one-eighth {
width: 12.5%; }
.two-eighths {
width: 25%; }
.three-eighths {
width: 37.5%; }
.four-eighths {
width: 50%; }
.five-eighths {
width: 62.5%; }
.six-eighths {
width: 75%; }
.seven-eighths {
width: 87.5%; }
/* Tenths */
.one-tenth {
width: 10%; }
.two-tenths {
width: 20%; }
.three-tenths {
width: 30%; }
.four-tenths {
width: 40%; }
.five-tenths {
width: 50%; }
.six-tenths {
width: 60%; }
.seven-tenths {
width: 70%; }
.eight-tenths {
width: 80%; }
.nine-tenths {
width: 90%; }
/* Twelfths */
.one-twelfth {
width: 8.33333%; }
.two-twelfths {
width: 16.66667%; }
.three-twelfths {
width: 25%; }
.four-twelfths {
width: 33.33333%; }
.five-twelfths {
width: 41.66667%; }
.six-twelfths {
width: 50%; }
.seven-twelfths {
width: 58.33333%; }
.eight-twelfths {
width: 66.66667%; }
.nine-twelfths {
width: 75%; }
.ten-twelfths {
width: 83.33333%; }
.eleven-twelfths {
width: 91.66667%; }
.show {
display: block !important; }
.hide {
display: none !important; }
.text-left {
text-align: left !important; }
.text-right {
text-align: right !important; }
.text-center {
text-align: center !important; }
/*================ Build Responsive Grid Classes ================*/
@media only screen and (max-width: 749px) {
/* Whole */
.small--one-whole {
width: 100%; }
/* Halves */
.small--one-half {
width: 50%; }
/* Thirds */
.small--one-third {
width: 33.33333%; }
.small--two-thirds {
width: 66.66667%; }
/* Quarters */
.small--one-quarter {
width: 25%; }
.small--two-quarters {
width: 50%; }
.small--three-quarters {
width: 75%; }
/* Fifths */
.small--one-fifth {
width: 20%; }
.small--two-fifths {
width: 40%; }
.small--three-fifths {
width: 60%; }
.small--four-fifths {
width: 80%; }
/* Sixths */
.small--one-sixth {
width: 16.66667%; }
.small--two-sixths {
width: 33.33333%; }
.small--three-sixths {
width: 50%; }
.small--four-sixths {
width: 66.66667%; }
.small--five-sixths {
width: 83.33333%; }
/* Eighths */
.small--one-eighth {
width: 12.5%; }
.small--two-eighths {
width: 25%; }
.small--three-eighths {
width: 37.5%; }
.small--four-eighths {
width: 50%; }
.small--five-eighths {
width: 62.5%; }
.small--six-eighths {
width: 75%; }
.small--seven-eighths {
width: 87.5%; }
/* Tenths */
.small--one-tenth {
width: 10%; }
.small--two-tenths {
width: 20%; }
.small--three-tenths {
width: 30%; }
.small--four-tenths {
width: 40%; }
.small--five-tenths {
width: 50%; }
.small--six-tenths {
width: 60%; }
.small--seven-tenths {
width: 70%; }
.small--eight-tenths {
width: 80%; }
.small--nine-tenths {
width: 90%; }
/* Twelfths */
.small--one-twelfth {
width: 8.33333%; }
.small--two-twelfths {
width: 16.66667%; }
.small--three-twelfths {
width: 25%; }
.small--four-twelfths {
width: 33.33333%; }
.small--five-twelfths {
width: 41.66667%; }
.small--six-twelfths {
width: 50%; }
.small--seven-twelfths {
width: 58.33333%; }
.small--eight-twelfths {
width: 66.66667%; }
.small--nine-twelfths {
width: 75%; }
.small--ten-twelfths {
width: 83.33333%; }
.small--eleven-twelfths {
width: 91.66667%; }
.grid--uniform .small--one-half:nth-child(2n+1),
.grid--uniform .small--one-third:nth-child(3n+1),
.grid--uniform .small--one-quarter:nth-child(4n+1),
.grid--uniform .small--one-fifth:nth-child(5n+1),
.grid--uniform .small--one-sixth:nth-child(6n+1),
.grid--uniform .small--two-sixths:nth-child(3n+1),
.grid--uniform .small--three-sixths:nth-child(2n+1),
.grid--uniform .small--one-eighth:nth-child(8n+1),
.grid--uniform .small--two-eighths:nth-child(4n+1),
.grid--uniform .small--four-eighths:nth-child(2n+1),
.grid--uniform .small--five-tenths:nth-child(2n+1),
.grid--uniform .small--one-twelfth:nth-child(12n+1),
.grid--uniform .small--two-twelfths:nth-child(6n+1),
.grid--uniform .small--three-twelfths:nth-child(4n+1),
.grid--uniform .small--four-twelfths:nth-child(3n+1),
.grid--uniform .small--six-twelfths:nth-child(2n+1) {
clear: both; }
.small--show {
display: block !important; }
.small--hide {
display: none !important; }
.small--text-left {
text-align: left !important; }
.small--text-right {
text-align: right !important; }
.small--text-center {
text-align: center !important; } }
@media only screen and (min-width: 750px) {
/* Whole */
.medium-up--one-whole {
width: 100%; }
/* Halves */
.medium-up--one-half {
width: 50%; }
/* Thirds */
.medium-up--one-third {
width: 33.33333%; }
.medium-up--two-thirds {
width: 66.66667%; }
/* Quarters */
.medium-up--one-quarter {
width: 25%; }
.medium-up--two-quarters {
width: 50%; }
.medium-up--three-quarters {
width: 75%; }
/* Fifths */
.medium-up--one-fifth {
width: 20%; }
.medium-up--two-fifths {
width: 40%; }
.medium-up--three-fifths {
width: 60%; }
.medium-up--four-fifths {
width: 80%; }
/* Sixths */
.medium-up--one-sixth {
width: 16.66667%; }
.medium-up--two-sixths {
width: 33.33333%; }
.medium-up--three-sixths {
width: 50%; }
.medium-up--four-sixths {
width: 66.66667%; }
.medium-up--five-sixths {
width: 83.33333%; }
/* Eighths */
.medium-up--one-eighth {
width: 12.5%; }
.medium-up--two-eighths {
width: 25%; }
.medium-up--three-eighths {
width: 37.5%; }
.medium-up--four-eighths {
width: 50%; }
.medium-up--five-eighths {
width: 62.5%; }
.medium-up--six-eighths {
width: 75%; }
.medium-up--seven-eighths {
width: 87.5%; }
/* Tenths */
.medium-up--one-tenth {
width: 10%; }
.medium-up--two-tenths {
width: 20%; }
.medium-up--three-tenths {
width: 30%; }
.medium-up--four-tenths {
width: 40%; }
.medium-up--five-tenths {
width: 50%; }
.medium-up--six-tenths {
width: 60%; }
.medium-up--seven-tenths {
width: 70%; }
.medium-up--eight-tenths {
width: 80%; }
.medium-up--nine-tenths {
width: 90%; }
/* Twelfths */
.medium-up--one-twelfth {
width: 8.33333%; }
.medium-up--two-twelfths {
width: 16.66667%; }
.medium-up--three-twelfths {
width: 25%; }
.medium-up--four-twelfths {
width: 33.33333%; }
.medium-up--five-twelfths {
width: 41.66667%; }
.medium-up--six-twelfths {
width: 50%; }
.medium-up--seven-twelfths {
width: 58.33333%; }
.medium-up--eight-twelfths {
width: 66.66667%; }
.medium-up--nine-twelfths {
width: 75%; }
.medium-up--ten-twelfths {
width: 83.33333%; }
.medium-up--eleven-twelfths {
width: 91.66667%; }
.grid--uniform .medium-up--one-half:nth-child(2n+1),
.grid--uniform .medium-up--one-third:nth-child(3n+1),
.grid--uniform .medium-up--one-quarter:nth-child(4n+1),
.grid--uniform .medium-up--one-fifth:nth-child(5n+1),
.grid--uniform .medium-up--one-sixth:nth-child(6n+1),
.grid--uniform .medium-up--two-sixths:nth-child(3n+1),
.grid--uniform .medium-up--three-sixths:nth-child(2n+1),
.grid--uniform .medium-up--one-eighth:nth-child(8n+1),
.grid--uniform .medium-up--two-eighths:nth-child(4n+1),
.grid--uniform .medium-up--four-eighths:nth-child(2n+1),
.grid--uniform .medium-up--five-tenths:nth-child(2n+1),
.grid--uniform .medium-up--one-twelfth:nth-child(12n+1),
.grid--uniform .medium-up--two-twelfths:nth-child(6n+1),
.grid--uniform .medium-up--three-twelfths:nth-child(4n+1),
.grid--uniform .medium-up--four-twelfths:nth-child(3n+1),
.grid--uniform .medium-up--six-twelfths:nth-child(2n+1) {
clear: both; }
.medium-up--show {
display: block !important; }
.medium-up--hide {
display: none !important; }
.medium-up--text-left {
text-align: left !important; }
.medium-up--text-right {
text-align: right !important; }
.medium-up--text-center {
text-align: center !important; } }
/*================ Build Grid Push Classes ================*/
@media only screen and (max-width: 749px) {
/* Halves */
.small--push-one-half {
left: 50%; }
/* Thirds */
.small--push-one-third {
left: 33.33333%; }
.small--push-two-thirds {
left: 66.66667%; }
/* Quarters */
.small--push-one-quarter {
left: 25%; }
.small--push-two-quarters {
left: 50%; }
.small--push-three-quarters {
left: 75%; }
/* Fifths */
.small--push-one-fifth {
left: 20%; }
.small--push-two-fifths {
left: 40%; }
.small--push-three-fifths {
left: 60%; }
.small--push-four-fifths {
left: 80%; }
/* Sixths */
.small--push-one-sixth {
left: 16.66667%; }
.small--push-two-sixths {
left: 33.33333%; }
.small--push-three-sixths {
left: 50%; }
.small--push-four-sixths {
left: 66.66667%; }
.small--push-five-sixths {
left: 83.33333%; }
/* Eighths */
.small--push-one-eighth {
left: 12.5%; }
.small--push-two-eighths {
left: 25%; }
.small--push-three-eighths {
left: 37.5%; }
.small--push-four-eighths {
left: 50%; }
.small--push-five-eighths {
left: 62.5%; }
.small--push-six-eighths {
left: 75%; }
.small--push-seven-eighths {
left: 87.5%; }
/* Tenths */
.small--push-one-tenth {
left: 10%; }
.small--push-two-tenths {
left: 20%; }
.small--push-three-tenths {
left: 30%; }
.small--push-four-tenths {
left: 40%; }
.small--push-five-tenths {
left: 50%; }
.small--push-six-tenths {
left: 60%; }
.small--push-seven-tenths {
left: 70%; }
.small--push-eight-tenths {
left: 80%; }
.small--push-nine-tenths {
left: 90%; }
/* Twelfths */
.small--push-one-twelfth {
left: 8.33333%; }
.small--push-two-twelfths {
left: 16.66667%; }
.small--push-three-twelfths {
left: 25%; }
.small--push-four-twelfths {
left: 33.33333%; }
.small--push-five-twelfths {
left: 41.66667%; }
.small--push-six-twelfths {
left: 50%; }
.small--push-seven-twelfths {
left: 58.33333%; }
.small--push-eight-twelfths {
left: 66.66667%; }
.small--push-nine-twelfths {
left: 75%; }
.small--push-ten-twelfths {
left: 83.33333%; }
.small--push-eleven-twelfths {
left: 91.66667%; } }
@media only screen and (min-width: 750px) {
/* Halves */
.medium-up--push-one-half {
left: 50%; }
/* Thirds */
.medium-up--push-one-third {
left: 33.33333%; }
.medium-up--push-two-thirds {
left: 66.66667%; }
/* Quarters */
.medium-up--push-one-quarter {
left: 25%; }
.medium-up--push-two-quarters {
left: 50%; }
.medium-up--push-three-quarters {
left: 75%; }
/* Fifths */
.medium-up--push-one-fifth {
left: 20%; }
.medium-up--push-two-fifths {
left: 40%; }
.medium-up--push-three-fifths {
left: 60%; }
.medium-up--push-four-fifths {
left: 80%; }
/* Sixths */
.medium-up--push-one-sixth {
left: 16.66667%; }
.medium-up--push-two-sixths {
left: 33.33333%; }
.medium-up--push-three-sixths {
left: 50%; }
.medium-up--push-four-sixths {
left: 66.66667%; }
.medium-up--push-five-sixths {
left: 83.33333%; }
/* Eighths */
.medium-up--push-one-eighth {
left: 12.5%; }
.medium-up--push-two-eighths {
left: 25%; }
.medium-up--push-three-eighths {
left: 37.5%; }
.medium-up--push-four-eighths {
left: 50%; }
.medium-up--push-five-eighths {
left: 62.5%; }
.medium-up--push-six-eighths {
left: 75%; }
.medium-up--push-seven-eighths {
left: 87.5%; }
/* Tenths */
.medium-up--push-one-tenth {
left: 10%; }
.medium-up--push-two-tenths {
left: 20%; }
.medium-up--push-three-tenths {
left: 30%; }
.medium-up--push-four-tenths {
left: 40%; }
.medium-up--push-five-tenths {
left: 50%; }
.medium-up--push-six-tenths {
left: 60%; }
.medium-up--push-seven-tenths {
left: 70%; }
.medium-up--push-eight-tenths {
left: 80%; }
.medium-up--push-nine-tenths {
left: 90%; }
/* Twelfths */
.medium-up--push-one-twelfth {
left: 8.33333%; }
.medium-up--push-two-twelfths {
left: 16.66667%; }
.medium-up--push-three-twelfths {
left: 25%; }
.medium-up--push-four-twelfths {
left: 33.33333%; }
.medium-up--push-five-twelfths {
left: 41.66667%; }
.medium-up--push-six-twelfths {
left: 50%; }
.medium-up--push-seven-twelfths {
left: 58.33333%; }
.medium-up--push-eight-twelfths {
left: 66.66667%; }
.medium-up--push-nine-twelfths {
left: 75%; }
.medium-up--push-ten-twelfths {
left: 83.33333%; }
.medium-up--push-eleven-twelfths {
left: 91.66667%; } }
/*================ #Helper Classes ================*/
.clearfix {
*zoom: 1; }
.clearfix::after {
content: '';
display: table;
clear: both; }
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.visually-hidden--inline {
margin: 0;
height: 1em; }
.visually-hidden--static {
position: static !important; }
.js-focus-hidden:focus {
outline: none; }
.no-js:not(html) {
display: none; }
.no-js .no-js:not(html) {
display: block; }
.no-js .js {
display: none; }
.hide {
display: none !important; }
/*============================================================================
Skip to content button
- Overrides .visually-hidden when focused
==============================================================================*/
.skip-link:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: var(--color-text);
background-color: var(--color-bg);
padding: 10px;
opacity: 1;
z-index: 10000;
transition: none; }
/*=============== Critical CSS ===================*/
.main-content {
opacity: 1; }
.main-content .shopify-section {
display: inherit; }
.critical-hidden {
display: inherit; }
/*================ #Basic Styles ================*/
.page-width {
*zoom: 1;
max-width: 1200px;
margin: 0 auto; }
.page-width::after {
content: '';
display: table;
clear: both; }
.main-content {
display: block;
padding-top: 35px; }
@media only screen and (min-width: 750px) {
.main-content {
padding-top: 55px; } }
.section-header {
margin-bottom: 35px; }
@media only screen and (min-width: 750px) {
.section-header {
margin-bottom: 55px; } }
/*================ Typography ================*/
blockquote {
font-size: calc(((18) / (var(--font-size-base))) * 1em);
font-style: normal;
text-align: center;
padding: 0 30px;
margin: 0; }
.rte blockquote {
border-color: var(--color-border);
border-width: 1px 0;
border-style: solid;
padding: 30px 0;
margin-bottom: 27.5px; }
blockquote p + cite {
margin-top: 27.5px; }
blockquote cite {
display: block;
font-size: 0.85em;
font-weight: var(--font-weight-body); }
blockquote cite::before {
content: '\2014 \0020'; }
code,
pre {
font-family: Consolas, monospace;
font-size: 1em; }
pre {
overflow: auto; }
input,
textarea,
select,
.disclosure__toggle {
font-size: calc(var(--font-size-base) * 1px);
font-family: var(--font-stack-body);
font-style: var(--font-style-body);
font-weight: var(--font-weight-body);
color: var(--color-text);
line-height: 1.5; }
@media only screen and (max-width: 989px) {
input,
textarea,
select,
.disclosure__toggle,
button {
font-size: 16px; } }
/*================ Headings ================*/
h3, .h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
margin: 0 0 17.5px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
line-height: 1.2;
overflow-wrap: break-word;
word-wrap: break-word; }
h3 a, .h3 a,
h4 a,
.h4 a,
h5 a,
.h5 a,
h6 a,
.h6 a {
color: inherit;
text-decoration: none;
font-weight: inherit; }
h3, .h3 {
font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em);
text-transform: none;
letter-spacing: 0; }
@media only screen and (max-width: 749px) {
h3, .h3 {
font-size: calc(((var(--font-h3-mobile)) / (var(--font-size-base))) * 1em); } }
h4,
.h4 {
font-size: calc(((var(--font-h4-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h4,
.h4 {
font-size: calc(((var(--font-h4-mobile)) / (var(--font-size-base))) * 1em); } }
h5,
.h5 {
font-size: calc(((var(--font-h5-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h5,
.h5 {
font-size: calc(((var(--font-h5-mobile)) / (var(--font-size-base))) * 1em); } }
h6,
.h6 {
font-size: calc(((var(--font-h6-desktop)) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
h6,
.h6 {
font-size: calc(((var(--font-h6-mobile)) / (var(--font-size-base))) * 1em); } }
/*================ RTE headings ================*/
.rte {
color: var(--color-body-text);
margin-bottom: 35px; }
.rte:last-child {
margin-bottom: 0; }
.rte h1,
.rte h2,
.rte h3,
.rte .h3,
.rte h4,
.rte .h4,
.rte h5,
.rte .h5,
.rte h6,
.rte .h6 {
margin-top: 55px;
margin-bottom: 27.5px; }
.rte h1:first-child,
.rte h2:first-child,
.rte h3:first-child,
.rte .h3:first-child,
.rte h4:first-child,
.rte .h4:first-child,
.rte h5:first-child,
.rte .h5:first-child,
.rte h6:first-child,
.rte .h6:first-child {
margin-top: 0; }
.rte li {
margin-bottom: 4px;
list-style: inherit; }
.rte li:last-child {
margin-bottom: 0; }
.rte-setting {
margin-bottom: 19.44444px; }
.rte-setting:last-child {
margin-bottom: 0; }
/*================ Misc styles ================*/
.fine-print {
font-size: calc(((14) / (var(--font-size-base))) * 1em);
font-style: italic; }
.txt--minor {
font-size: 80%; }
.txt--emphasis {
font-style: italic; }
.address {
margin-bottom: 55px; }
/*================ Hero and slideshow headers ================*/
.mega-title,
.mega-subtitle {
color: var(--color-overlay-title-text); }
.hero .mega-title, .hero
.mega-subtitle {
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
@media only screen and (min-width: 750px) {
.mega-title,
.mega-subtitle {
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } }
.mega-title {
margin-bottom: 8px; }
.mega-title--large {
font-size: calc(((var(--font-size-header) + 8) / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.mega-title--large {
font-size: calc(((var(--font-mega-title-large-desktop)) / (var(--font-size-base))) * 1em); } }
@media only screen and (min-width: 750px) {
.mega-subtitle {
font-size: calc(((var(--font-size-base) + 4) / (var(--font-size-base))) * 1em);
margin: 0 auto; }
.text-center .mega-subtitle {
max-width: 75%; } }
.mega-subtitle p {
color: var(--color-overlay-title-text); }
.mega-subtitle a {
color: var(--color-overlay-title-text);
border-bottom: 1px solid currentColor; }
.mega-subtitle a:hover, .mega-subtitle a:focus {
color: var(--color-overlay-text-focus); }
.mega-subtitle--large {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-header); }
@media only screen and (min-width: 750px) {
.mega-subtitle--large {
font-size: calc(((var(--font-size-base) + 8) / (var(--font-size-base))) * 1em); } }
/*============================================================================
Animation Classes and Keyframes
==============================================================================*/
.is-transitioning {
display: block !important;
visibility: visible !important; }
/*================ #Icons ================*/
svg.icon:not(.icon--full-color) .icon-error__symbol,
symbol.icon:not(.icon--full-color) .icon-error__symbol {
fill: #ffffff; }
/*================ Payment Icons ================*/
.payment-icons {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default; }
@media only screen and (max-width: 749px) {
.payment-icons {
line-height: 40px; } }
.payment-icons .icon {
width: 38px;
height: 24px;
fill: inherit; }
/*================ Social Icons ================*/
.social-icons .icon {
width: 23px;
height: 23px; }
@media only screen and (min-width: 750px) {
.social-icons .icon {
width: 25px;
height: 25px; } }
.social-icons .icon.icon--wide {
width: 40px; }
/*================ Spinner Icon ================*/
.icon-spinner {
-moz-animation: spin 500ms infinite linear;
-o-animation: spin 500ms infinite linear;
-webkit-animation: spin 500ms infinite linear;
animation: spin 500ms infinite linear; }
/*================ Error Icons ================*/
.icon-error {
fill: #d20000;
width: calc(calc(var(--font-size-base) * 1px) - 2px);
height: calc(calc(var(--font-size-base) * 1px) - 2px);
margin-top: 0.1em;
flex-shrink: 0; }
/*================ #Lists ================*/
ul,
ol {
margin: 0;
padding: 0; }
ol {
list-style: decimal; }
/*================ #Rich Text Editor ================*/
.rte img {
height: auto; }
.rte table {
table-layout: fixed; }
.rte ul,
.rte ol {
margin: 0 0 17.5px 35px; }
.rte ul.list--inline,
.rte ol.list--inline {
margin-left: 0; }
.rte ul {
list-style: disc outside; }
.rte ul ul {
list-style: circle outside; }
.rte ul ul ul {
list-style: square outside; }
.rte a:not(.btn) {
border-bottom: 1px solid currentColor;
padding-bottom: 1px; }
.text-center.rte ul,
.text-center.rte ol,
.text-center .rte ul,
.text-center .rte ol {
margin-left: 0;
list-style-position: inside; }
.scrollable-wrapper {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch; }
/*================ #Links and Buttons ================*/
a:not([disabled]):hover, a:focus {
color: var(--color-text-focus); }
.password-powered-by a:not([disabled]):hover, .password-powered-by a:focus {
color: var(--color-text-focus);
border-bottom: 1px solid var(--color-text-focus); }
a[href^="tel"] {
color: inherit; }
/*================ Buttons ================*/
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 2px;
padding: 8px 15px;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: normal;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.btn, .shopify-payment-button .shopify-payment-button__button--unbranded {
padding: 10px 18px; } }
.btn:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover, .btn:focus, .shopify-payment-button .shopify-payment-button__button--unbranded:focus {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-focus); }
.btn .icon-arrow-right, .shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-right,
.btn .icon-arrow-left,
.shopify-payment-button .shopify-payment-button__button--unbranded .icon-arrow-left {
height: 9px; }
.btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn[aria-disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[aria-disabled] {
cursor: default;
opacity: 0.5; }
.btn--secondary {
background-color: transparent;
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary:not([disabled]):hover, .btn--secondary:focus {
background-color: transparent;
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }
.btn--secondary-accent {
background-color: var(--color-body);
color: var(--color-btn-primary);
border-color: var(--color-btn-primary); }
.btn--secondary-accent:not([disabled]):hover, .btn--secondary-accent:focus {
background-color: var(--color-body);
color: var(--color-btn-primary-focus);
border-color: var(--color-btn-primary-focus); }
.btn--small {
padding: 8px 10px;
font-size: calc(((12) / (var(--font-size-base))) * 1em);
line-height: 1; }
.btn--tertiary {
background-color: transparent;
color: var(--color-small-button-text-border);
border-color: var(--color-small-button-text-border); }
.btn--tertiary:not([disabled]):hover, .btn--tertiary:focus {
background-color: transparent;
color: var(--color-small-button-text-border-focus);
border-color: var(--color-small-button-text-border-focus); }
/*================ Button variations ================*/
@media only screen and (max-width: 749px) {
.btn--small-wide {
padding-left: 50px;
padding-right: 50px; } }
.btn--link {
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text);
text-align: left; }
.btn--link:not([disabled]):hover, .btn--link:focus {
color: var(--color-text-focus);
background-color: transparent; }
.btn--link .icon {
vertical-align: middle; }
.btn--narrow {
padding-left: 15px;
padding-right: 15px; }
.btn--has-icon-after .icon {
margin-left: 10px; }
.btn--has-icon-before .icon {
margin-right: 10px; }
/*================ Force an input/button to look like a text link ================*/
.text-link {
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0; }
.text-link--accent {
color: var(--color-btn-primary);
border-bottom: 1px solid currentColor;
padding-bottom: 1px; }
.text-link--accent:not([disabled]):hover, .text-link--accent:focus {
color: var(--color-btn-primary-focus); }
/*================ Return to collection/blog links ================*/
.return-link-wrapper {
margin-top: 82.5px;
margin-bottom: 0; }
@media only screen and (max-width: 749px) {
.return-link-wrapper {
margin-top: 55px; } }
.full-width-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2; }
/*================ #Tables ================*/
table {
margin-bottom: 27.5px; }
table a {
border-bottom: 1px solid currentColor; }
th {
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-body--bold); }
th,
td {
text-align: left;
border: 1px solid var(--color-border);
padding: 10px 14px; }
tbody th,
tfoot th {
font-weight: normal; }
/*============================================================================
Responsive tables, defined with .responsive-table on table element.
==============================================================================*/
@media only screen and (max-width: 749px) {
.responsive-table thead {
display: none; }
.responsive-table th,
.responsive-table td {
float: left;
clear: left;
width: 100%;
text-align: right;
padding: 27.5px;
border: 0;
margin: 0; }
.responsive-table th::before,
.responsive-table td::before {
content: attr(data-label);
float: left;
text-align: center;
font-size: 12px;
padding-right: 10px;
font-weight: normal; }
.responsive-table__row + .responsive-table__row,
tfoot > .responsive-table__row:first-child {
position: relative;
margin-top: 10px;
padding-top: 55px; }
.responsive-table__row + .responsive-table__row::after,
tfoot > .responsive-table__row:first-child::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 27.5px;
right: 27.5px;
border-bottom: 1px solid var(--color-border); } }
/*================ #Images and Iframes ================*/
svg:not(:root) {
overflow: hidden; }
.video-wrapper {
position: relative;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
height: 0;
height: auto; }
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
/*================ Adds a background color pulsating animation ================*/
[data-image-loading-animation] {
background-color: var(--global-color-image-loader-primary);
-moz-animation: image-loader 2s 400ms infinite;
-o-animation: image-loader 2s 400ms infinite;
-webkit-animation: image-loader 2s 400ms infinite;
animation: image-loader 2s 400ms infinite; }
.no-js [data-image-loading-animation] {
animation-name: none; }
/*================ Forms ================*/
form {
margin: 0; }
fieldset {
border: 1px solid var(--color-border-form);
margin: 0 0 55px;
padding: 27.5px; }
legend {
border: 0;
padding: 0; }
button {
cursor: pointer; }
input[type="submit"] {
cursor: pointer; }
label {
display: block;
margin-bottom: 5px; }
@media only screen and (max-width: 749px) {
label {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); } }
[type="radio"] + label,
[type="checkbox"] + label {
display: inline-block;
margin-bottom: 0; }
label[for] {
cursor: pointer; }
input,
textarea,
select,
.disclosure__toggle {
border: 1px solid var(--color-border-form);
background-color: var(--color-text-field);
color: var(--color-text-field-text);
max-width: 100%;
line-height: 1.2;
border-radius: 2px; }
input:focus,
textarea:focus,
select:focus,
.disclosure__toggle:focus {
border-color: var(--color-border-form-darker); }
input[disabled],
textarea[disabled],
select[disabled],
.disclosure__toggle[disabled] {
cursor: default;
background-color: #f4f4f4;
border-color: #f4f4f4; }
input.input--error::-webkit-input-placeholder,
textarea.input--error::-webkit-input-placeholder,
select.input--error::-webkit-input-placeholder,
.input--error.disclosure__toggle::-webkit-input-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error::-moz-placeholder,
textarea.input--error::-moz-placeholder,
select.input--error::-moz-placeholder,
.input--error.disclosure__toggle::-moz-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error:-ms-input-placeholder,
textarea.input--error:-ms-input-placeholder,
select.input--error:-ms-input-placeholder,
.input--error.disclosure__toggle:-ms-input-placeholder {
color: #d20000;
opacity: 0.5; }
input.input--error::-ms-input-placeholder,
textarea.input--error::-ms-input-placeholder,
select.input--error::-ms-input-placeholder,
.input--error.disclosure__toggle::-ms-input-placeholder {
color: #d20000;
opacity: 1; }
input.hidden-placeholder::-webkit-input-placeholder,
textarea.hidden-placeholder::-webkit-input-placeholder,
select.hidden-placeholder::-webkit-input-placeholder,
.hidden-placeholder.disclosure__toggle::-webkit-input-placeholder {
color: transparent; }
input.hidden-placeholder::-moz-placeholder,
textarea.hidden-placeholder::-moz-placeholder,
select.hidden-placeholder::-moz-placeholder,
.hidden-placeholder.disclosure__toggle::-moz-placeholder {
color: transparent; }
input.hidden-placeholder:-ms-input-placeholder,
textarea.hidden-placeholder:-ms-input-placeholder,
select.hidden-placeholder:-ms-input-placeholder,
.hidden-placeholder.disclosure__toggle:-ms-input-placeholder {
color: transparent; }
input.hidden-placeholder::-ms-input-placeholder,
textarea.hidden-placeholder::-ms-input-placeholder,
select.hidden-placeholder::-ms-input-placeholder,
.hidden-placeholder.disclosure__toggle::-ms-input-placeholder {
opacity: 1; }
.product-form input, .product-form
textarea, .product-form select, .product-form .disclosure__toggle {
min-height: 44px; }
textarea {
min-height: 100px; }
/*================ Error styles ================*/
input.input--error,
select.input--error,
.input--error.disclosure__toggle,
textarea.input--error {
border-color: #d20000;
background-color: #fff8f8;
color: #d20000;
margin-bottom: 11.66667px; }
.input-error-message {
display: flex;
line-height: 1.3;
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
margin-bottom: 11.66667px; }
@media only screen and (max-width: 749px) {
.input-error-message {
margin-bottom: 19.44444px; } }
.input-error-message .icon {
width: 1em;
height: 1em;
margin-right: calc((10 / (var(--font-size-base))) * 1em); }
.selector-wrapper {
position: relative; }
.selector-wrapper:after {
content: '';
position: absolute;
bottom: calc(22px - 9px / 2);
right: 15px;
width: 9px;
height: 9px;
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNOC41NDIwNCAyLjU1ODA2QzguNzg2MTIgMi44MDIxNCA4Ljc4NjEyIDMuMTk3ODYgOC41NDIwNCAzLjQ0MTk0TDQuOTQyNDIgNy4wNDE1NkM0LjgyNTIxIDcuMTU4NzcgNC42NjU4NiA3LjIyNSA0LjUwMDEgNy4yMjVDNC4zMzQzNCA3LjIyNSA0LjE3NTM3IDcuMTU5MTUgNC4wNTgxNiA3LjA0MTk0TDAuNDU4MTU3IDMuNDQxOTRDMC4yMTQwNzkgMy4xOTc4NiAwLjIxNDA3OSAyLjgwMjE0IDAuNDU4MTU3IDIuNTU4MDZDMC43MDIyMzQgMi4zMTM5OCAxLjA5Nzk2IDIuMzEzOTggMS4zNDIwNCAyLjU1ODA2TDQuNTAwMSA1LjcxNjEyTDcuNjU4MTYgMi41NTgwNkM3LjkwMjIzIDIuMzEzOTggOC4yOTc5NiAyLjMxMzk4IDguNTQyMDQgMi41NTgwNloiIGZpbGw9IiMxNjI5NTAiLz4NCjwvc3ZnPg0K");
background: var(--color-text-field-text); }
select,
.disclosure__toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
line-height: 1.2;
padding-right: 28px;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
padding-top: 8px;
padding-left: 15px;
padding-bottom: 8px; }
@media only screen and (min-width: 750px) {
select,
.disclosure__toggle {
padding-top: 10px;
padding-left: 18px;
padding-bottom: 10px; } }
.select-group {
position: relative;
z-index: 2; }
.select-group select, .select-group .disclosure__toggle {
background-image: none;
background-color: transparent; }
.select-group .icon {
height: calc(8em / 16);
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: calc(8em / 16);
z-index: -1; }
.select-label {
font-size: calc(((12) / (var(--font-size-base))) * 1em);
text-transform: uppercase; }
optgroup {
font-weight: var(--font-weight-body--bold); }
option {
color: var(--color-text);
background-color: var(--color-body); }
select::-ms-expand, .disclosure__toggle::-ms-expand {
display: none; }
/*================ Form labels ================*/
.label--hidden {
position: absolute;
height: 0;
width: 0;
margin-bottom: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px); }
::-webkit-input-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
::-moz-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
:-ms-input-placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
::-ms-input-placeholder {
color: var(--color-text-field-text);
opacity: 1; }
/*================ Labels ================*/
.label--error {
color: #d20000; }
input,
textarea {
padding: 8px 15px; }
@media only screen and (min-width: 750px) {
input,
textarea {
padding: 10px 18px; } }
/*================ Vertical forms ================*/
.form-vertical input,
.form-vertical select,
.form-vertical .disclosure__toggle,
.form-vertical textarea {
display: block;
width: 100%;
margin-bottom: 19.44444px; }
.form-vertical input.input--error,
.form-vertical select.input--error,
.form-vertical .input--error.disclosure__toggle,
.form-vertical textarea.input--error {
margin-bottom: 11.66667px; }
.form-vertical [type="radio"],
.form-vertical [type="checkbox"] {
display: inline-block;
width: auto;
margin-right: 5px; }
.form-vertical [type="submit"],
.form-vertical .btn,
.form-vertical .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .form-vertical .shopify-payment-button__button--unbranded {
display: inline-block;
width: auto; }
/*================ Single field forms ================*/
.form-single-field {
margin: 0 auto 55px;
max-width: 35rem; }
.form-single-field .input--error {
margin-bottom: 0; }
/*================ Form feedback messages ================*/
.note,
.form-message {
padding: 8px;
margin: 0 0 27.5px;
border: 1px solid var(--color-border-form); }
@media only screen and (min-width: 750px) {
.note,
.form-message {
padding: 10px; } }
.form-message--success {
border: 1px solid #1F873D;
background-color: #f8fff9;
color: #1F873D;
display: block;
width: 100%; }
.form-message--error {
color: #651818;
border: 1px solid #d20000;
background-color: #fff8f8;
padding: 1rem 1.3rem;
text-align: left;
width: 100%; }
.form-message--error li {
list-style-type: disc;
list-style-position: inside; }
.form-message--error .form-message__title {
font-size: 1.2em; }
.form-message--error .form-message__link, .form-message--error a {
display: inline-block;
text-decoration: underline;
text-decoration-skip-ink: auto;
color: #651818; }
.form-message--error .form-message__link:hover, .form-message--error .form-message__link:focus, .form-message--error a:hover, .form-message--error a:focus {
text-decoration: none;
color: #651818; }
/*================ Input Groups ================*/
.input-group {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.form-vertical .input-group {
margin-bottom: 55px; }
.input-group--nowrap {
flex-wrap: nowrap; }
.input-group--error {
margin-bottom: 11.66667px; }
.input-group__field,
.input-group__field input,
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
min-height: 42px; }
@media only screen and (min-width: 750px) {
.input-group__field,
.input-group__field input,
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
min-height: 46px; } }
.input-group__field {
-ms-flex-preferred-size: 15rem;
-webkit-flex-basis: 15rem;
-moz-flex-basis: 15rem;
flex-basis: 15rem;
flex-grow: 9999;
margin-bottom: 1rem;
border-radius: 2px 0 0 2px;
text-align: left; }
.input-group__field input {
width: 100%; }
.form-vertical .input-group__field {
margin: 0; }
.input-group__field--connected {
margin-bottom: 0; }
.input-group__field--connected input {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.input-group__btn {
flex-grow: 1; }
.input-group__btn .btn,
.input-group__btn .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .input-group__btn .shopify-payment-button__button--unbranded {
width: 100%;
border-radius: 0 2px 2px 0; }
/*================ #Site Nav and Dropdowns ================*/
.site-nav--centered {
padding-bottom: 22px; }
/*================ Site Nav Links ================*/
.site-nav__link.site-nav--active-dropdown {
border: 1px solid var(--color-border);
border-bottom: 1px solid transparent;
z-index: 2; }
.site-nav__link:focus .site-nav__label, .site-nav__link:not([disabled]):hover .site-nav__label {
border-bottom-color: var(--color-text); }
@media only screen and (max-width: 989px) {
.site-nav__link--button {
font-size: calc(var(--font-size-base) * 1px); } }
.site-nav__link--button:focus, .site-nav__link--button:hover {
color: var(--color-text-focus); }
/*================ Dropdowns ================*/
.site-nav--has-dropdown {
position: relative; }
.site-nav--has-centered-dropdown {
position: static; }
.site-nav__dropdown {
display: none;
position: absolute;
padding: 11px 30px 11px 0;
margin: 0;
z-index: 7;
text-align: left;
border: 1px solid var(--color-border);
background: var(--color-bg);
left: -1px;
top: 41px; }
.site-nav__dropdown .site-nav__link {
padding: 4px 15px 5px; }
.site-nav--active-dropdown .site-nav__dropdown {
display: block; }
.site-nav__dropdown li {
display: block; }
.site-nav__dropdown--right:not(.site-nav__dropdown--centered) {
right: 0;
left: unset; }
.site-nav__dropdown--left:not(.site-nav__dropdown--centered) {
left: 0; }
.site-nav__dropdown--centered {
width: 100%;
padding: 0;
text-align: center; }
/*================ Child list ================*/
.site-nav__childlist {
display: inline-block;
background: var(--color-bg);
padding: 11px 17px;
text-align: left; }
.site-nav__childlist-grid {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: auto;
margin-bottom: -15px; }
.site-nav__childlist-item {
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
margin-bottom: 15px; }
.site-nav__child-link--parent {
font-weight: var(--font-weight-body--bold);
margin: 4px 0; }
body.prevent-scrolling {
overflow: hidden;
position: fixed;
width: 100%; }
.page-width {
padding-left: 55px;
padding-right: 55px; }
@media only screen and (max-width: 749px) {
.page-width {
padding-left: 22px;
padding-right: 22px; } }
.page-container {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
position: relative;
overflow: hidden; }
@media only screen and (min-width: 750px) {
.page-container {
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
hr {
margin: 55px 0;
border: 0;
border-bottom: 1px solid var(--color-border); }
.hr--small {
padding: 10px 0;
margin: 0; }
.hr--invisible {
border-bottom: 0; }
.border-top {
border-top: 1px solid var(--color-border); }
.empty-page-content {
padding: 125px 55px; }
@media only screen and (max-width: 749px) {
.empty-page-content {
padding-left: 22px;
padding-right: 22px; } }
.grid--half-gutters {
margin-left: -15px; }
.grid--half-gutters > .grid__item {
padding-left: 15px; }
.grid--double-gutters {
margin-left: -60px; }
.grid--double-gutters > .grid__item {
padding-left: 60px; }
.grid--flush-bottom {
margin-bottom: -55px;
overflow: auto; }
.grid--flush-bottom > .grid__item {
margin-bottom: 55px; }
@-webkit-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-moz-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes spin {
0% {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@-moz-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@-ms-keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
@keyframes image-loader {
0% {
background-color: var(--global-color-image-loader-primary); }
50% {
background-color: var(--global-color-image-loader-primary); }
100% {
background-color: var(--global-color-image-loader-primary); } }
.drawer {
display: none;
position: fixed;
-webkit-overflow-scrolling: touch;
z-index: 9; }
.js-drawer-open-top .drawer {
display: block; }
.drawer--top {
width: 100%;
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%); }
.js-drawer-open-top .drawer--top {
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
transform: translateY(0%);
display: flex;
max-height: 100vh; }
.drawer-page-content::after {
opacity: 0;
visibility: hidden;
pointer-events: none;
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 8;
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); }
.js-drawer-open .drawer-page-content::after {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.drawer__title,
.drawer__close {
display: table-cell;
vertical-align: middle; }
.drawer__close-button {
background: none;
border: 0 none;
position: relative;
right: -15px;
height: 100%;
width: 60px;
padding: 0 20px;
color: inherit;
font-size: calc(((18) / (var(--font-size-base))) * 1em); }
.drawer__close-button:active, .drawer__close-button:focus {
background-color: rgba(0, 0, 0, 0.6); }
.grid--view-items {
overflow: auto;
margin-bottom: -35px; }
.grid-view-item {
margin: 0 auto 35px; }
.custom__item .grid-view-item {
margin-bottom: 0; }
.grid-view-item__title {
margin-bottom: 0;
color: var(--color-text); }
.grid-view-item__meta {
margin-top: 8px; }
@media only screen and (max-width: 749px) {
.grid-view-item__title,
.grid-view-item__meta {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.grid-view-item__link {
display: block; }
.grid-view-item__vendor {
margin-top: 4px;
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-transform: uppercase; }
@media only screen and (max-width: 749px) {
.grid-view-item__vendor {
font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em); } }
.grid-view-item__image-wrapper {
margin: 0 auto 15px;
position: relative;
width: 100%; }
.grid-view-item__image {
display: block;
margin: 0 auto;
width: 100%; }
.grid-view-item__image-wrapper .grid-view-item__image {
position: absolute;
top: 0; }
.list-view-item {
margin-bottom: 22px; }
.list-view-item:last-child {
margin-bottom: 0; }
@media only screen and (min-width: 750px) {
.list-view-item {
border-bottom: 1px solid var(--color-border);
padding-bottom: 22px; }
.list-view-item:last-child {
padding-bottom: 0;
border-bottom: 0; } }
.list-view-item__link {
display: table;
table-layout: fixed;
width: 100%; }
.list-view-item__image {
max-height: 95px; }
.list-view-item__image-column {
display: table-cell;
vertical-align: middle;
width: 130px;
min-height: 44px; }
@media only screen and (max-width: 749px) {
.list-view-item__image-column {
width: 85px; } }
.list-view-item__image-wrapper {
position: relative;
margin-right: 35px; }
@media only screen and (max-width: 749px) {
.list-view-item__image-wrapper {
margin-right: 17.5px; } }
.list-view-item__title-column {
display: table-cell;
vertical-align: middle; }
.list-view-item__title {
color: var(--color-text);
min-width: 100px;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
.list-view-item__title {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.list-view-item__vendor {
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px; }
.list-view-item__price-column {
display: table-cell;
text-align: right;
vertical-align: middle;
width: 20%;
font-size: calc(((var(--font-size-base) + 1) / (var(--font-size-base))) * 1em); }
@media only screen and (max-width: 749px) {
.list-view-item__price-column {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.list-view-item__price-column .price {
align-items: flex-end; }
.list-view-item__price-column .price dd {
margin: 0 0 0 0.5em; }
.list-view-item__price-column .price__regular,
.list-view-item__price-column .price__sale {
flex-basis: 100%;
justify-content: flex-end;
margin-right: 0; }
/*============================================================================
Slick slider overrides
==============================================================================*/
.slick-dotted.slick-slider {
margin-bottom: 0; }
/*================ Slick dots and prev/next pagination ================*/
.slideshow__arrows .slick-dots {
margin: 0 0.75rem; }
.slideshow__arrows .slick-dots li {
margin: 0;
vertical-align: middle;
width: 10px;
height: 10px;
margin-left: 6px; }
.slideshow__arrows .slick-dots li:first-of-type {
margin-left: 0; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li {
width: 12px;
height: 12px;
margin-left: 8px; } }
.slideshow__arrows .slick-dots li button, .slideshow__arrows .slick-dots li a {
position: relative;
padding: 0;
width: 10px;
height: 10px; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button, .slideshow__arrows .slick-dots li a {
width: 12px;
height: 12px; } }
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
text-indent: -9999px;
background-color: transparent;
border-radius: 100%;
background-color: currentColor;
width: 10px;
height: 10px;
opacity: 0.4;
transition: all 0.2s; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
width: 12px;
height: 12px; } }
.slideshow__arrows .slick-dots li.slick-active button::before,
.slideshow__arrows .slick-dots li.slick-active a::before,
.slideshow__arrows .slick-dots li.slick-active-mobile button::before,
.slideshow__arrows .slick-dots li.slick-active-mobile a::before {
opacity: 1; }
.slideshow__arrows .slick-dots li button:active::before,
.slideshow__arrows .slick-dots li .slick-active a::before,
.slideshow__arrows .slick-dots li .slick-active-mobile a::before {
opacity: 0.7; }
/*================ Index sections ================*/
.index-section {
padding-top: 35px;
padding-bottom: 35px; }
@media only screen and (min-width: 750px) {
.index-section {
padding-top: 55px;
padding-bottom: 55px; } }
.index-section:first-child {
padding-top: 0;
border-top: 0; }
.index-section:last-child {
padding-bottom: 0; }
.index-section--flush + .index-section--flush {
margin-top: -70px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"] + [class*="index-section--flush"] {
margin-top: -110px; } }
.index-section--flush:first-child {
margin-top: -35px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"]:first-child {
margin-top: -55px; } }
.index-section--flush:last-child {
margin-bottom: -35px; }
@media only screen and (min-width: 750px) {
[class*="index-section--flush"]:last-child {
margin-bottom: -55px; } }
@media only screen and (max-width: 749px) {
.index-section--featured-product:first-child {
margin-top: -12px; } }
@media only screen and (max-width: 749px) {
.index-section--slideshow + .index-section--flush {
margin-top: 0.4rem; } }
.placeholder-svg {
display: block;
fill: var(--color-blankstate);
background-color: var(--color-blankstate-background);
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
border: 1px solid var(--color-blankstate-border); }
.placeholder-noblocks {
padding: 40px;
text-align: center; }
.placeholder-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.placeholder-background .icon {
border: 0; }
.image-bar__content .placeholder-svg {
position: absolute;
top: 0;
left: 0; }
.plyr.plyr--full-ui.plyr--video {
color: var(--color-text);
background-color: transparent;
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */
/* stylelint-disable-next-line */ }
.plyr.plyr--full-ui.plyr--video .plyr__video-wrapper {
background-color: transparent; }
.plyr.plyr--full-ui.plyr--video .plyr__poster {
background-color: var(--color-video-bg); }
.plyr.plyr--full-ui.plyr--video:fullscreen .plyr__video-wrapper .plyr.plyr--full-ui.plyr--video:fullscreen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-webkit-full-screen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-moz-full-screen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video:-ms-fullscreen .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__video-wrapper,
.plyr.plyr--full-ui.plyr--video .plyr--fullscreen-fallback .plyr__poster {
background-color: #000; }
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid {
background-color: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid.plyr__tab-focus, .plyr.plyr--full-ui.plyr--video .plyr__control.plyr__control--overlaid:hover {
color: rgba(var(--color-text-rgb), 0.55); }
.plyr.plyr--full-ui.plyr--video .plyr__controls {
background-color: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--color-text-rgb), 0.6) var(--value, 0)); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-moz-range-track {
background-color: rgba(var(--color-text-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']::-ms-fill-upper {
background-color: rgba(var(--color-text-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range'].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress input[type='range']:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-text-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip {
background-color: var(--color-text);
color: var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__progress .plyr__tooltip::before {
border-top-color: var(--color-text); }
.plyr.plyr--full-ui.plyr--video.plyr--loading .plyr__progress__buffer {
background-image: linear-gradient(-45deg, rgba(var(--color-text-rgb), 0.6) 25%, transparent 25%, transparent 50%, rgba(var(--color-text-rgb), 0.6) 50%, rgba(var(--color-text-rgb), 0.6) 75%, transparent 75%, transparent); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'] {
color: var(--color-bg); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 var(--color-text); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, currentColor var(--value, 0), rgba(var(--color-bg-rgb), 0.6) var(--value, 0)); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-moz-range-track, .plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']::-ms-fill-upper {
background-color: rgba(var(--color-bg-rgb), 0.6); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range'].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-moz-range-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.plyr.plyr--full-ui.plyr--video .plyr__volume input[type='range']:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(var(--color-bg-rgb), 0.25); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area {
background: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button {
color: var(--color-text); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover {
color: rgba(var(--color-text-rgb), 0.55); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus {
color: rgba(var(--color-text-rgb), 0.55);
background: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after {
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster {
background: var(--color-bg);
border-color: rgba(var(--color-text-rgb), 0.05); }
.shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus {
color: rgba(var(--color-text-rgb), 0.55); }
/*================ TEMPLATES ================*/
/*============= Templates | Password =============*/
.password-page {
display: table;
height: 100%;
width: 100%;
color: var(--color-body-text);
background-color: var(--color-body);
background-size: cover; }
.password-form-message {
max-width: 500px;
margin-left: auto;
margin-right: auto; }
.password-header {
height: 85px;
display: table-row; }
.password-header__inner {
display: table-cell;
vertical-align: middle; }
.password-login {
padding: 0 30px;
text-align: right; }
.password-logo .logo {
color: var(--color-text);
font-weight: var(--font-weight-header);
max-width: 100%; }
.password-content {
text-align: center; }
.password-content--rte {
margin-bottom: 35px; }
.password-content__title {
display: block;
margin-bottom: 82.5px; }
.password-main {
display: table-row;
width: 100%;
height: 100%;
margin: 0 auto; }
.password-main__inner {
display: table-cell;
vertical-align: middle;
padding: 27.5px 55px; }
.password-message {
max-width: 500px;
margin: 82.5px auto 27.5px; }
.password__form-heading {
margin-bottom: 55px; }
.password-powered-by {
margin-top: 82.5px; }
.password-social-sharing {
margin-top: 82.5px; }
.product-single {
overflow-anchor: none; }
.product-single__title {
margin-bottom: 0.5rem; }
.product__price,
.featured-product__price {
font-size: 1.25em; }
.product__policies {
margin: 0.4rem 0 1rem 0;
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); }
/*================ Add to cart form ================*/
.product-form {
width: auto;
padding-top: 2rem; }
.product-form__controls-group {
display: flex;
flex-wrap: wrap; }
.product-form__controls-group--submit {
margin-top: 0px; }
.product-form__controls-group ~ .product-form__controls-group--submit {
margin-top: 15px; }
.product-form__item {
flex-grow: 0;
flex-basis: 100%;
margin-bottom: 10px;
padding: 0; }
@media only screen and (min-width: 990px) {
.product-form__item {
flex-basis: 50%;
padding: 0 5px; }
.product-single--large-image .product-form__item {
flex-basis: 100%; } }
.product-form__item label {
display: block; }
.product-form__item--submit {
-webkit-flex: 1 1 300px;
-moz-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px; }
.product-form__item--no-variants {
max-width: 400px; }
.product-form__item--payment-button {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
@media only screen and (min-width: 990px) {
.product-single--small-media .product-form__item--payment-button,
.product-single--full-media .product-form__item--payment-button {
display: inline-flex;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start; } }
.product-form__item--payment-button.product-form__item--no-variants {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch; }
.product-form--variant-sold-out .shopify-payment-button {
display: none; }
.product-form--payment-button-no-variants {
max-width: 25rem; }
.product-form__variants {
display: none; }
.no-js .product-form__variants {
display: block; }
.product-form__input {
display: block;
width: 100%; }
.product-form__input.input--error {
margin-bottom: 0; }
.product-form__input--quantity {
max-width: 5rem; }
.product-form__error-message-wrapper {
display: flex;
flex-basis: 100%;
padding: 0.5rem 0;
margin: 0 calc((5 / (var(--font-size-base))) * 1em) 20px; }
.product-form__controls-group ~ .product-form__error-message-wrapper {
margin-bottom: 0; }
.product-form__error-message-wrapper--has-payment-button {
padding: 0.5rem 0; }
.product-form__error-message-wrapper--hidden {
display: none; }
.product-form__error-message {
margin-left: 0.5rem;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
line-height: 1.2;
color: var(--color-body-text); }
.product-form__cart-submit, .shopify-payment-button .shopify-payment-button__button--unbranded {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;
margin-top: 0;
margin-bottom: 10px;
min-height: 44px; }
.product-single--small-media .product-form__cart-submit, .product-single--small-media .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-payment-button .product-single--small-media .shopify-payment-button__button--unbranded,
.product-single--full-media .product-form__cart-submit,
.product-single--full-media .shopify-payment-button .shopify-payment-button__button--unbranded,
.shopify-payment-button .product-single--full-media .shopify-payment-button__button--unbranded {
-webkit-flex: 50%;
-moz-flex: 50%;
-ms-flex: 50%;
flex: 50%;
margin-right: 10px; }
.product-single--small-media .shopify-payment-button,
.product-single--full-media .shopify-payment-button {
-webkit-flex: 50%;
-moz-flex: 50%;
-ms-flex: 50%;
flex: 50%; }
.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
background-color: var(--color-btn-primary-focus) !important; }
.shopify-payment-button .shopify-payment-button__button--branded {
border-radius: 2px;
overflow: hidden; }
.shopify-payment-button .shopify-payment-button__more-options {
margin: 16px 0 10px;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-decoration: underline; }
.shopify-payment-button .shopify-payment-button__more-options:hover, .shopify-payment-button .shopify-payment-button__more-options:focus {
opacity: 0.6; }
@media only screen and (min-width: 750px) {
.product-form__cart-submit--small {
max-width: 300px; } }
.product-single__description {
margin-top: 30px; }
.product__quantity-error .icon {
margin-right: 1rem; }
/*================ Product Images ================*/
.product-single__thumbnail {
display: block;
margin: -2px 0 8px;
min-height: 44px;
position: relative;
border: 2px solid transparent; }
.product-single__thumbnail:not([disabled]):not(.active-thumb):hover {
opacity: 0.8; }
.product-single__thumbnail.active-thumb {
border-color: var(--color-text); }
.product-single__thumbnail-image {
max-width: 100%;
display: block;
margin: 0 auto;
padding: 2px; }
.product-single__thumbnail-badge {
width: 22px;
height: 22px;
position: absolute;
right: 6px;
top: 6px;
pointer-events: none; }
@media only screen and (min-width: 750px) {
.product-single__thumbnail-badge {
width: 26px;
height: 26px; } }
.product-single__thumbnail-badge .icon {
fill: var(--color-bg);
width: 100%;
height: 100%;
vertical-align: baseline; }
.product-single__thumbnail-badge .icon-3d-badge-full-color-outline,
.product-single__thumbnail-badge .icon-video-badge-full-color-outline {
stroke: rgba(var(--color-text-rgb), 0.05); }
.product-single__thumbnail-badge .icon-3d-badge-full-color-element,
.product-single__thumbnail-badge .icon-video-badge-full-color-element {
fill: var(--color-text); }
.product-featured-media {
display: block;
margin: 0 auto;
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 8px); }
.no-js .product-featured-media {
position: relative; }
.zoomImg {
background-color: var(--color-body); }
@media only screen and (max-width: 749px) {
.product-single__media-group {
margin-bottom: 30px; }
.product-single__media--has-thumbnails {
margin-bottom: 30px; } }
.product-single__media-group--full {
margin-bottom: 30px; }
.product-single__media-wrapper {
margin: 0 auto;
width: 100%; }
.product-single__media {
margin: 0 auto;
min-height: 1px;
width: 100%;
height: 100%;
position: relative; }
.product-single__media iframe,
.product-single__media model-viewer,
.product-single__media .shopify-model-viewer-ui,
.product-single__media img,
.product-single__media > video,
.product-single__media .plyr,
.product-single__media .media-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%; }
.product-single__media iframe,
.product-single__media .media-video,
.product-single__media model-viewer,
.product-single__media .shopify-model-viewer-ui,
.product-single__media .media-item,
.product-single__media .plyr,
.product-single__media .plyr__video-wrapper {
height: 100%; }
.product-single__media--video {
background-color: var(--color-video-bg); }
.product-single__view-in-space {
background-color: rgba(var(--color-text-rgb), 0.08);
border: none;
width: 100%;
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em);
color: var(--color-text); }
.product-single__view-in-space[data-shopify-xr-hidden] {
visibility: hidden; }
@media only screen and (min-width: 750px) {
.product-single__view-in-space[data-shopify-xr-hidden] {
display: none; } }
.product-single__view-in-space:hover .product-single__view-in-space-text, .product-single__view-in-space:focus .product-single__view-in-space-text {
border-bottom-color: var(--color-text); }
.product-single__view-in-space svg.icon {
height: calc((25 / (var(--font-size-base))) * 1em);
width: calc((25 / (var(--font-size-base))) * 1em);
margin-top: -3px;
margin-right: 2.43px;
fill: transparent; }
.product-single__view-in-space svg.icon .icon-3d-badge-full-color-outline {
stroke: none; }
.product-single__view-in-space svg.icon .icon-3d-badge-full-color-element {
fill: var(--color-text);
opacity: 1; }
.product-single__view-in-space-text {
border-bottom: 1px solid transparent; }
@media only screen and (max-width: 749px) {
.template-product .main-content {
padding-top: 22px; }
.product-single__media-group {
position: relative; }
.thumbnails-wrapper {
position: relative;
top: 10px;
text-align: center;
margin: 0 2px 30px 2px; }
.thumbnails-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-top: 10px;
padding-bottom: 10px; }
.thumbnails-slider__btn .icon {
height: 14px;
width: 14px; }
.thumbnails-slider__prev {
left: -15px; }
.thumbnails-slider__next {
right: -15px; }
.product-single__thumbnail {
margin: 0 auto; } }
.product-single__thumbnails {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
margin-left: -9px;
margin-right: -9px; }
@media only screen and (max-width: 749px) {
.product-single__thumbnails {
margin-top: 0;
justify-content: center; }
.slider-active .product-single__thumbnails {
display: block;
margin: 0 auto;
max-width: 75%;
overflow: hidden; } }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-slider-track {
position: relative;
left: 0;
top: 0;
display: block; }
.product-single__thumbnails-slider-track:before, .product-single__thumbnails-slider-track:after {
content: "";
display: table; }
.product-single__thumbnails-slider-track:after {
clear: both; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-slider-track {
display: flex;
flex-wrap: wrap; } }
.product-single__thumbnails-item {
flex: 0 0 25%;
padding-left: 5px; }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-item.slick-slide {
padding-bottom: 10px;
padding-left: 2.5px;
padding-right: 2.5px;
vertical-align: middle; }
.thumbnails-slider--active .product-single__thumbnails-item.slick-slide {
padding-top: 5px;
padding-bottom: 5px; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item {
padding-left: 5px;
padding-right: 5px; } }
@media only screen and (max-width: 749px) {
.product-single__thumbnails-item-slide {
display: block;
float: left;
height: 100%;
min-height: 1px;
padding: 5px 2.5px; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--small {
flex: 0 0 50%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--small {
flex: 0 0 33.33333%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--medium {
flex: 0 0 33.33333%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--medium {
flex: 0 0 25%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--large {
flex: 0 0 25%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--large {
flex: 0 0 20%; } }
@media only screen and (min-width: 750px) {
.product-single__thumbnails-item--full {
flex: 0 0 20%; } }
@media only screen and (min-width: 990px) {
.product-single__thumbnails-item--full {
flex: 0 0 12.5%; } }
/*================ Template | Collections ================*/
.collection-hero {
position: relative;
overflow: hidden;
margin-top: -55px;
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.collection-hero {
margin-bottom: 35px; } }
.collection-description {
margin-bottom: 22px;
margin-top: 22px; }
@media only screen and (min-width: 750px) {
.collection-description {
margin-bottom: 35px;
margin-top: 35px; } }
.collection-hero__image {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
height: 300px;
opacity: 1; }
@media only screen and (max-width: 749px) {
.collection-hero__image {
height: 180px; } }
.collection-hero__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.collection-hero__title {
position: absolute;
color: var(--color-overlay-title-text);
width: 100%;
text-align: center;
left: 0;
right: 0;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media only screen and (min-width: 750px) {
.collection-hero__title {
font-size: calc(((var(--font-size-header) + 6) / (var(--font-size-base))) * 1em); } }
.template-blog .social-sharing {
margin-bottom: 17.5px; }
.blog-list-view .pagination {
padding-top: 0; }
.blog-filter {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.blog-filter .icon-chevron-down {
fill: var(--color-text-field-text);
width: calc(10em / 16);
height: calc(10em / 16);
right: 0.7rem; }
.blog-filter__label {
margin: 0 1rem 0 0; }
.cart-header {
margin-bottom: 0.7rem;
text-align: center; }
@media only screen and (min-width: 750px) {
.cart-header {
margin-bottom: 1.7rem; } }
.cart-header__title {
margin-bottom: 0.5rem; }
@media only screen and (min-width: 750px) {
.cart-header__title {
margin-bottom: 1rem; } }
/*================ Cart page ================*/
.cart {
color: var(--color-body-text); }
.cart th,
.cart td {
border: 0; }
.cart td {
padding-top: 22px;
padding-bottom: 22px; }
@media only screen and (min-width: 750px) {
.cart td {
padding-left: 22px;
padding-right: 22px; } }
.cart th {
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body);
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
text-transform: uppercase;
padding: 27.5px 22px; }
@media only screen and (max-width: 749px) {
.cart td:nth-child(3),
.cart th:nth-child(2) {
padding-left: 0;
padding-right: 0; } }
.cart td:first-child,
.cart th:first-child {
padding-left: 0; }
.cart td:first-child.cart__removed-product,
.cart th:first-child.cart__removed-product {
padding: 1rem 0 1.2rem 0.5rem; }
.cart td:last-child,
.cart th:last-child {
padding-right: 0; }
.cart dd {
margin-left: 0; }
.cart__meta {
width: 50%; }
@media only screen and (min-width: 750px) {
.cart__meta {
width: 40%; } }
@media only screen and (min-width: 990px) {
.cart__meta {
width: 45%; } }
.cart__product-information {
display: flex; }
.cart__image-wrapper {
padding-right: 1.5rem;
flex: 5rem 0 0; }
@media only screen and (min-width: 750px) {
.cart__image-wrapper {
padding-right: 2.5rem;
flex: 8rem 0 0; } }
@media only screen and (min-width: 990px) {
.cart__image-wrapper {
padding-right: 3rem;
flex: 9rem 0 0; } }
.product-details {
padding: calc((5 / (var(--font-size-base))) * 1em) 0 0;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.product-details.hide + .cart__remove {
margin-top: 0; }
.product-details__item {
margin-bottom: 0.15em; }
.product-details__item--variant-option:not(.hide) + .product-details__item--property {
margin-top: 0.8rem; }
.product-details__item-label {
font-weight: var(--font-weight-body--bold); }
.cart__qty {
margin-top: calc((15 / (var(--font-size-base))) * 1em); }
@media only screen and (min-width: 750px) {
.cart__qty {
margin-top: 0; } }
.cart__qty-label {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0; }
.cart__qty-input {
text-align: center;
width: 60px;
padding-left: calc((5 / (var(--font-size-base))) * 1em);
padding-right: calc((5 / (var(--font-size-base))) * 1em); }
.cart__qty-error-message-wrapper,
.cart__error-message-wrapper {
line-height: 1.2; }
.cart__qty-error-message-wrapper .icon-error,
.cart__error-message-wrapper .icon-error {
margin-top: 0; }
.cart__qty-error-message-wrapper--desktop {
display: none; }
@media only screen and (min-width: 750px) {
.cart__qty-error-message-wrapper--desktop {
display: block; } }
.cart__qty-error-message-wrapper--mobile {
display: block; }
@media only screen and (min-width: 750px) {
.cart__qty-error-message-wrapper--mobile {
display: none; } }
.cart__qty-error-message,
.cart__error-message {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
color: var(--color-body-text);
vertical-align: middle; }
.cart__error-message-wrapper {
margin-top: 1rem; }
@media only screen and (min-width: 750px) {
.cart__error-message-wrapper {
margin-top: 0.8rem; } }
.cart__row {
border-bottom: 1px solid var(--color-border); }
.cart__row p {
margin-bottom: 0; }
.cart__row p + p {
margin-top: 10px; }
.cart__row td {
vertical-align: top; }
@media only screen and (min-width: 750px) {
.cart__row td {
vertical-align: middle; } }
.cart__row--heading {
color: var(--color-text);
letter-spacing: 0.3px; }
.cart__removed-product-details {
font-weight: var(--font-weight-body--bold); }
.cart-subtotal__title {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); }
.cart-subtotal__price {
padding-left: 27.5px; }
@media only screen and (min-width: 750px) {
.cart-subtotal__price {
padding-left: 55px;
min-width: 150px;
display: inline-block; } }
.cart__footer {
padding-top: 17.5px; }
.cart__buttons-container {
display: flex;
flex-direction: column;
max-width: 20rem;
margin: 0 auto; }
@media only screen and (min-width: 750px) {
.cart__buttons-container {
display: block;
max-width: none; } }
.cart__submit-controls {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
@media only screen and (min-width: 750px) {
.cart__submit-controls {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end; } }
.cart__submit {
margin-bottom: 0;
min-height: 44px;
width: 100%; }
.cart__submit + .cart__submit {
margin-top: 10px;
margin-left: 0; }
@media only screen and (min-width: 750px) {
.cart__submit {
min-height: auto;
width: auto; }
.cart__submit + .cart__submit {
margin-top: 0;
margin-left: 10px; } }
.cart__shipping {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
padding: 10px 0 20px;
margin-bottom: 25px; }
.cart-note__label,
.cart-note__input {
display: block; }
@media only screen and (max-width: 749px) {
.cart-note__label,
.cart-note__input {
margin: 0 auto; } }
.cart-note__label {
margin-bottom: 15px; }
.cart-note__input {
min-height: 50px;
width: 100%; }
@media only screen and (max-width: 749px) {
.cart-note__input {
margin-bottom: 40px; } }
.cart__product-title {
border-bottom: none;
color: var(--color-body-text); }
.cart__product-title:not([disabled]):hover, .cart__product-title:focus {
color: var(--color-body-text);
border-bottom: 1px solid currentColor; }
.cart__image {
max-height: 95px;
display: block;
margin: 0 auto; }
.cart__remove {
margin-top: calc((8 / (var(--font-size-base))) * 1em); }
.cart__price {
text-align: right;
padding-right: 0;
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
width: 50%; }
.cart__price dl {
margin: 0; }
@media only screen and (min-width: 750px) {
.cart__price {
width: 25%; } }
.cart__quantity-td {
width: 20%; }
.cart__final-price {
width: 15%; }
@media only screen and (max-width: 749px) {
.cart-message {
padding-top: 20px; }
.cart__qty-label {
position: inherit !important;
overflow: auto;
clip: auto;
width: auto;
height: auto;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: calc(((13) / (var(--font-size-base))) * 1em);
margin-right: 5px; } }
.cart--no-cookies .cart__continue-btn {
display: none; }
.cart--no-cookies .cart--empty-message {
display: none; }
.cookie-message {
display: none;
padding-bottom: 25px; }
.cart--no-cookies .cookie-message {
display: block; }
.additional-checkout-buttons {
margin-top: 1rem; }
.additional-checkout-buttons input[type="image"] {
padding: 0;
border: 0;
background: transparent; }
[data-shopify-buttoncontainer] {
justify-content: flex-end; }
.myaccount {
display: flex;
flex-wrap: wrap; }
@media only screen and (min-width: 990px) {
.myaccount__order-history {
-webkit-flex: 1 0 66.66667%;
-moz-flex: 1 0 66.66667%;
-ms-flex: 1 0 66.66667%;
flex: 1 0 66.66667%; } }
@media only screen and (min-width: 990px) {
.myaccount__account-details {
-webkit-flex: 1 0 33.33333%;
-moz-flex: 1 0 33.33333%;
-ms-flex: 1 0 33.33333%;
flex: 1 0 33.33333%; } }
.order-table {
border: 1px solid var(--color-border); }
.order-table a {
border-bottom: 1px solid currentColor; }
.order-table th, .order-table td {
border: 0; }
.order-table tbody th,
.order-table tfoot th {
font-weight: normal;
text-transform: none;
letter-spacing: 0; }
.order-table tbody tr + tr {
border-top: 1px solid var(--color-border); }
.order-table thead {
border-bottom: 1px solid var(--color-body-text); }
.order-table tfoot {
border-top: 1px solid var(--color-body-text); }
.order-table tfoot tr:first-child th,
.order-table tfoot tr:first-child td {
padding-top: 1.25em; }
.order-table tfoot tr:nth-last-child(2) th,
.order-table tfoot tr:nth-last-child(2) td {
padding-bottom: 1.25em; }
.order-table tfoot tr:last-child th,
.order-table tfoot tr:last-child td {
border-top: 1px solid var(--color-body-text);
font-weight: var(--font-weight-body--bold);
padding-top: 1.25em;
padding-bottom: 1.25em;
text-transform: uppercase; }
@media only screen and (min-width: 750px) {
.order-table thead th {
text-transform: uppercase;
padding-top: 1.25em;
padding-bottom: 1.25em; }
.order-table tbody tr th, .order-table tbody tr td {
padding-top: 1.25em;
padding-bottom: 1.25em; }
.order-table tfoot tr td, .order-table tfoot tr th {
vertical-align: bottom; } }
@media only screen and (max-width: 749px) {
.order-table {
border: 0; }
.order-table thead {
display: none; }
.order-table th, .order-table td {
float: left;
clear: left;
width: 100%;
text-align: right;
padding: 0.5rem 0;
border: 0;
margin: 0; }
.order-table th::before,
.order-table td::before {
content: attr(data-label);
float: left;
text-align: left;
padding-right: 2em;
max-width: 80%; }
.order-table tbody tr th:first-child {
padding-top: 1.25em; }
.order-table tbody tr td:last-child {
padding-bottom: 1.25em; }
.order-table tbody th::before,
.order-table tbody td::before {
font-weight: var(--font-weight-body--bold); } }
@media only screen and (max-width: 749px) {
.order-table__product {
display: flex;
justify-content: space-between; } }
.item-props {
margin-top: 5px;
display: flex;
flex-direction: column; }
.item-props__property {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.order-discount {
color: var(--color-sale-text);
display: block;
line-height: 1.2em; }
.order-discount .icon-saletag {
fill: currentColor;
width: 1em;
height: 1em;
margin-right: 0.4em; }
.order-discount--title {
text-transform: uppercase;
word-break: break-word;
padding-right: 1em; }
.order-discount--list {
margin: 0.8em 0 0 1.3em;
list-style: none;
padding: 0; }
.order-discount__item {
text-indent: -1.3em; }
.order-discount__item + .order-discount__item {
margin-top: 0.6em; }
@media only screen and (max-width: 749px) {
.order-discount-wrapper {
display: flex;
justify-content: space-between;
width: 100%; } }
.order-discount-card-wrapper {
display: flex;
justify-content: center; }
@media only screen and (min-width: 750px) {
.order-discount-card-wrapper {
justify-content: flex-end; } }
.order-discount--cart {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
padding-right: 0; }
@media only screen and (min-width: 750px) {
.order-discount--cart {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); } }
.order-discount--cart-total {
padding-left: 27.5px; }
@media only screen and (min-width: 750px) {
.order-discount--cart-total {
padding-left: 55px;
min-width: 150px; } }
/*================ MODULES ================*/
.site-header {
position: relative;
background-color: var(--color-body); }
@media only screen and (max-width: 749px) {
.site-header {
border-bottom: 1px solid var(--color-border); } }
@media only screen and (min-width: 750px) {
.site-header {
padding: 0 55px; }
.site-header.logo--center {
padding-top: 30px; } }
.site-header__logo {
margin: 15px 0; }
.logo-align--center .site-header__logo {
text-align: center;
margin: 0 auto; }
@media only screen and (max-width: 749px) {
.logo-align--center .site-header__logo {
text-align: left;
margin: 15px 0; } }
@media only screen and (max-width: 749px) {
.site-header__logo {
padding-left: 22px;
text-align: left; }
.site-header__logo img {
margin: 0; } }
.site-header__logo-link {
display: inline-block;
word-break: break-word; }
@media only screen and (min-width: 750px) {
.logo-align--center .site-header__logo-link {
margin: 0 auto; } }
.site-header__logo-image {
background-color: transparent !important;
display: block; }
@media only screen and (min-width: 750px) {
.site-header__logo-image {
margin: 0 auto; } }
.site-header__logo-image img {
width: 100%; }
.site-header__logo-image--centered img {
margin: 0 auto; }
.site-header__logo img {
display: block; }
.site-header__icons {
position: relative;
white-space: nowrap; }
@media only screen and (max-width: 749px) {
.site-header__icons {
width: auto;
padding-right: 13px; }
.site-header__icons .btn--link,
.site-header__icons .site-header__cart {
font-size: calc(((var(--font-size-base)) / (var(--font-size-base))) * 1em); } }
.site-header__icons-wrapper {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end; }
.site-header__cart,
.site-header__search,
.site-header__account {
position: relative; }
.site-header__search.site-header__icon {
display: none; }
@media only screen and (min-width: 1400px) {
.site-header__search.site-header__icon {
display: block; } }
.site-header__search-toggle {
display: block; }
@media only screen and (min-width: 750px) {
.site-header__account,
.site-header__cart {
padding: 10px 11px; } }
.site-header__cart-title,
.site-header__search-title {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
display: block;
vertical-align: middle; }
.site-header__cart-title {
margin-right: 3px; }
.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.4rem;
top: 0.2rem;
font-weight: bold;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
border-radius: 50%;
min-width: 1em;
height: 1em; }
.site-header__cart-count span {
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: calc(11em / 16);
line-height: 1; }
@media only screen and (max-width: 749px) {
.site-header__cart-count {
top: calc(7em / 16);
right: 0;
border-radius: 50%;
min-width: calc(19em / 16);
height: calc(19em / 16); } }
@media only screen and (max-width: 749px) {
.site-header__cart-count span {
padding: 0.25em calc(6em / 16);
font-size: 12px; } }
.site-header__menu {
display: none; }
@media only screen and (max-width: 749px) {
.site-header__icon {
display: inline-block;
vertical-align: middle;
padding: 10px 11px;
margin: 0; } }
@media only screen and (min-width: 750px) {
.site-header__icon .icon-search {
margin-right: 3px; } }
.announcement-bar {
z-index: 10;
position: relative;
text-align: center;
border-bottom: 1px solid transparent;
padding: 2px; }
.announcement-bar__link {
display: block; }
.announcement-bar__message {
display: block;
padding: 11px 22px;
font-size: calc(((16) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-header); }
@media only screen and (min-width: 750px) {
.announcement-bar__message {
padding-left: 55px;
padding-right: 55px; } }
.article-listing {
padding-top: 55px;
margin-bottom: 55px; }
.article {
margin-bottom: 55px; }
.article__meta {
margin-bottom: 22px; }
.article__title {
margin-bottom: 11px; }
@media only screen and (max-width: 749px) {
.article__title--has-image {
padding-left: 22px; } }
.article__author {
margin-right: 10px; }
.article__author,
.article__date {
display: inline-block;
margin-bottom: 22px; }
.template-article .article__author,
.article__meta .article__author, .template-article
.article__date,
.article__meta
.article__date {
margin-bottom: 0; }
.article__tags {
margin-bottom: 27.5px; }
.article__tags--list {
font-style: italic; }
.article__link {
display: block; }
@media only screen and (max-width: 749px) {
.article__link {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
.article__link:not([disabled]):hover .article__grid-image-wrapper::before, .article__link:focus .article__grid-image-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.article__link--fixed-overlay:not([disabled]):hover .article__grid-image-wrapper::before, .article__link--fixed-overlay:focus .article__grid-image-wrapper::before {
bottom: auto; }
.article__meta-buttons li:first-child {
margin-right: 1.5rem; }
.article__comment-count {
border-color: transparent;
border-bottom-color: currentColor;
padding: 0 0 3px 0; }
.article__comment-count:not([disabled]):hover, .article__comment-count:focus {
border-color: transparent;
border-bottom-color: currentColor; }
.rte--article {
margin-bottom: 20px; }
/*============================================================================
Blog article grid
==============================================================================*/
.grid--blog {
margin-bottom: -55px;
overflow: auto; }
.article__grid-tag {
margin-right: 10px; }
.article__grid-meta {
margin-bottom: 55px; }
@media only screen and (max-width: 749px) {
.article__grid-meta--has-image {
float: left;
padding-left: 22px; } }
.article__grid-excerpt {
margin-bottom: 17.5px; }
.article-image-wrapper.article__grid-image-wrapper {
margin-left: 0;
margin-right: 0; }
.article__grid-image-wrapper {
margin: 0 auto;
position: relative;
width: 100%; }
.article__grid-image-wrapper--small {
width: 50%; }
.article__grid-image-container {
display: block;
clear: both;
position: relative;
margin: 0 auto 27.5px 0;
min-height: 1px;
width: 100%;
height: 100%; }
@media only screen and (max-width: 749px) {
.article__grid-image-container {
float: left;
margin: 0 0 55px 0; } }
.article__grid-image-container img {
display: block; }
.article__grid-image {
margin: 0 auto;
width: 100%; }
.js .article__grid-image {
position: absolute;
top: 0; }
.article__list-image-container {
display: block;
clear: both;
position: relative;
min-height: 1px;
width: 100%;
height: 100%; }
.article__list-image-wrapper {
width: 100%;
margin-bottom: 20px; }
.article__list-image {
margin: 0 auto;
width: 100%;
position: absolute;
top: 0; }
/*============================================================================
Blog/article card
==============================================================================*/
.blog-card {
margin-bottom: 30px;
margin-top: 30px; }
@media only screen and (min-width: 750px) {
.blog-card {
margin-top: 0; } }
.blog-card__image-wrapper {
margin-bottom: 30px;
padding-bottom: 100%;
position: relative;
width: 100%; }
.blog-card__image-wrapper:hover .blog-card__title-wrapper::before, .blog-card__image-wrapper:focus .blog-card__title-wrapper::before {
opacity: var(--hover-overlay-opacity); }
.blog-card__image-wrapper:focus {
opacity: 1; }
.blog-card__image-wrapper--small {
padding-bottom: 50%; }
.blog-card__image-wrapper--medium {
padding-bottom: 75%; }
.blog-card__title {
color: var(--color-overlay-title-text);
font-size: calc(((var(--font-size-header)) / (var(--font-size-base))) * 1em);
hyphens: auto;
margin-bottom: 11px;
padding: 0 5px;
position: absolute;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
top: 50%;
width: 100%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
@media only screen and (min-width: 750px) {
.blog-card__title {
padding: 0 15px; } }
.blog-card__link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.blog-card__overlay {
position: relative;
display: block;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top; }
.blog-card__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.blog-card__excerpt {
margin-bottom: 17.5px; }
.blog-card__comment-count {
border-color: transparent;
border-bottom-color: currentColor;
padding: 0 0 3px 0; }
.blog-card__comment-count:not([disabled]):hover, .blog-card__comment-count:focus {
border-color: transparent;
border-bottom-color: currentColor; }
.cart-popup-wrapper {
display: block;
position: fixed;
width: 100%;
background-color: var(--color-body);
z-index: 9999;
border: 1px solid var(--color-border);
transform: translateY(0%);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); }
@media only screen and (min-width: 750px) {
.cart-popup-wrapper {
width: 23rem;
right: 0; } }
.cart-popup-wrapper--hidden {
display: none;
transform: translateY(-100%); }
.cart-popup {
padding: 0.2rem 1.5rem 1rem; }
.cart-popup__header {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--color-border); }
.cart-popup__heading {
flex-grow: 1;
padding: 0.5rem 0rem;
margin: 0;
color: var(--color-body-text);
line-height: 1.2em;
letter-spacing: 0.3px;
text-transform: uppercase;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body); }
.cart-popup__close {
padding: 0.9rem;
margin-right: -0.9rem;
background-color: transparent;
border: none;
line-height: 0; }
.cart-popup__close .icon-close {
width: 1rem;
height: 1rem;
fill: currentColor; }
.cart-popup__close:hover, .cart-popup__close:focus {
color: var(--color-text-focus); }
.cart-popup-item {
display: flex;
margin: 1rem 0; }
.cart-popup-item__image-wrapper {
position: relative;
flex-basis: 18%;
flex-shrink: 0;
margin-right: 1rem;
text-align: center; }
.cart-popup-item__image {
display: block;
margin: 0 auto;
max-height: 95px; }
.cart-popup-item__description {
display: flex;
color: var(--color-body-text);
flex-basis: 100%;
justify-content: space-between;
line-height: 1.2rem; }
.cart-popup-item__title {
color: var(--color-text);
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header);
margin-bottom: 0; }
.product-details {
margin-top: 0.25rem;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.product-details__item {
margin-bottom: 0.2rem;
line-height: 1.5; }
.product-details__item:last-child {
margin-bottom: 0; }
.product-details__property-label {
font-weight: var(--font-weight-body--bold); }
.cart-popup-item__quantity {
flex-basis: 30%;
flex-shrink: 0;
margin-left: 1rem;
text-align: right;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.cart-popup__cta-link {
width: 100%; }
.cart-popup__dismiss {
margin-top: 0.5rem;
text-align: center; }
.cart-popup__dismiss-button {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.sidebar {
margin-top: 40px; }
.sidebar__list {
list-style: none;
margin-bottom: 55px; }
.sidebar__list li {
margin-bottom: 10px; }
.pagination {
text-align: center;
list-style: none;
font-size: calc(((15) / (var(--font-size-base))) * 1em);
padding-top: 55px; }
.pagination li {
display: inline-block; }
.pagination .icon {
display: block;
height: 20px;
vertical-align: middle; }
.pagination__text {
padding: 0 27.5px; }
.comment {
margin-bottom: 30px; }
.comment:last-child {
margin-bottom: 0; }
.comment__content {
margin-bottom: 5px; }
.comment__meta-item {
margin-right: 10px;
font-size: calc(((14) / (var(--font-size-base))) * 1em); }
.comment__meta-item:first-child::before {
content: '\2014 \0020'; }
.social-sharing {
display: flex; }
.template-password .social-sharing {
justify-content: center; }
.btn--share {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
margin-right: 5px;
margin-bottom: 10px; }
.btn--share:not([disabled]):hover, .btn--share:focus {
background-color: transparent;
border-color: var(--color-btn-social-focus);
color: var(--color-text); }
.btn--share .icon {
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 4px; }
.btn--share .icon-facebook {
fill: #3b5998; }
.btn--share .icon-twitter {
fill: #00aced; }
.btn--share .icon-pinterest {
fill: #cb2027; }
.share-title {
display: inline-block;
vertical-align: middle; }
/*================ Variables ================*/
.search-form__input-wrapper {
position: relative; }
.search-form__input {
padding-right: 45px;
width: 100%;
min-height: 44px;
color: var(--color-text-field-text);
background-color: var(--color-text-field);
border: none;
border: 1px solid var(--color-border-form); }
.search-form__input::-ms-clear {
display: none; }
.search-form__input::-webkit-search-cancel-button {
display: none; }
.search-form__input::placeholder {
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__input::-ms-input-placeholder {
/* Microsoft Edge */
color: var(--color-text-field-text);
opacity: 0.6; }
.search-form__clear-action {
appearance: none;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: inherit;
line-height: inherit;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 50%;
margin-top: -12px;
right: 10px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: transparent;
transition-property: opacity, visibility, background-color, transform;
transition-duration: 100ms;
transition-timing-function: ease-in-out; }
.search-form__clear-action .icon-close {
flex: 1 1 auto;
width: 12px;
height: 12px;
fill: var(--color-text-field-text); }
.search-form__clear-action:focus, .search-form__clear-action:hover {
background-color: rgba(var(--color-text-field-text-rgb), 0.2); }
.search-form__clear-action:active {
transform: scale(0.9); }
.search-form__clear-action.predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-bar__form .search-form__clear-action {
right: 44px; }
.search-form--focus .predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-page-form .predictive-search__clear-button--visible {
opacity: 1;
visibility: visible;
pointer-events: auto; }
.search-form__connected-submit {
appearance: none;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: inherit;
line-height: inherit;
cursor: pointer;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
background-color: var(--color-btn-primary);
border-radius: 0 2px 2px 0;
transition: background-color 100ms ease-in-out; }
.search-form__connected-submit:focus, .search-form__connected-submit:hover {
background-color: var(--color-btn-primary-darker); }
.search-form__connected-submit:active {
background-color: var(--color-btn-primary); }
.search-form__connected-submit .icon-search {
fill: var(--color-btn-primary-text);
width: 20px;
height: 20px; }
.search-bar {
z-index: 999;
background-color: var(--color-body); }
.search-bar__interior {
height: 100%;
display: flex;
flex: 1; }
@media only screen and (min-width: 750px) {
.search-bar__interior {
padding-left: 55px;
padding-right: 55px;
height: auto; } }
.search-form__container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding-left: 7px;
padding-right: 10px;
background-color: var(--color-bg); }
.search-bar__form {
flex: 1 1 100%;
position: relative;
max-width: 750px;
border: 1px solid transparent; }
.search-bar__actions {
display: flex;
flex: 0 0 auto;
align-items: center; }
.search-bar__submit {
z-index: 1;
position: absolute;
right: 0;
top: 0;
display: inline-block;
padding: 0 12px;
height: 100%;
vertical-align: middle;
background-color: transparent;
border: 0;
margin: 0;
color: var(--color-text-field-text); }
.search-bar__submit .icon {
position: relative;
top: -1px;
width: 1.2rem;
height: auto; }
.search-bar__submit:hover, .search-bar__submit:focus {
color: rgba(var(--color-text-field-text-rgb), 0.6); }
.search-bar__input {
padding-right: 45px;
width: 100%;
min-height: 44px;
color: var(--color-text-field-text);
background-color: var(--color-text-field);
border: none;
border: 1px solid var(--color-border-form); }
.search-bar__close {
padding: calc(10em / 16) 0.75em;
margin-right: -10px; }
.search-bar__close .icon {
width: 1rem;
height: auto; }
.search--less-than-2-results {
height: 40vh; }
.predictive-search-wrapper {
transition-property: opacity, visibility;
transition-duration: 100ms;
transition-timing-function: ease-in-out;
z-index: 1000;
position: absolute;
left: 0;
right: 0;
margin-top: -1px;
border: 1px solid var(--color-border-form);
background-color: var(--color-bg);
overflow-y: auto;
display: none; }
.search-bar .predictive-search-wrapper {
position: fixed;
width: 100%; }
@media only screen and (max-width: 749px) {
.search-bar .predictive-search-wrapper {
border: none; } }
@media only screen and (min-width: 750px) {
.search-bar .predictive-search-wrapper {
position: absolute;
right: auto;
left: auto;
max-width: 748px; } }
@media only screen and (min-width: 750px) {
.predictive-search-wrapper {
max-height: 80vh; } }
.search-page-form .predictive-search-wrapper {
max-height: 60vh; }
@media only screen and (max-width: 749px) {
.predictive-search-wrapper--drawer {
padding-top: 14px;
margin-top: 3px; } }
.predictive-search-wrapper--visible {
display: block; }
.predictive-search {
height: 100%;
text-align: left; }
@media only screen and (max-width: 989px) {
.search-bar .predictive-search {
overflow-y: auto;
-webkit-overflow-scrolling: touch; } }
.predictive-search-loading {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 14px 0;
text-align: center; }
.icon-predictive-search-spinner::before {
content: '';
display: block;
width: 28px;
height: 28px;
border-radius: 50%;
border: 4px solid;
border-color: currentColor currentColor currentColor transparent;
-moz-animation: spin 500ms infinite linear;
-o-animation: spin 500ms infinite linear;
-webkit-animation: spin 500ms infinite linear;
animation: spin 500ms infinite linear; }
.predictive-search-loading__icon {
display: inline-block;
margin: 0;
color: var(--color-body-text);
width: 20px;
height: 20px; }
.predictive-search-loading__icon .icon-predictive-search-spinner::before {
width: 100%;
height: 100%;
border-width: 3px; }
.predictive-search-title {
position: relative;
display: flex;
align-items: center;
padding: 14px; }
.predictive-search-title::before {
content: '';
position: absolute;
right: 0;
top: 0;
left: 0;
height: 0;
background-color: var(--color-border); }
.predictive-search-title::after {
content: '';
position: absolute;
right: 14px;
bottom: -1px;
left: 14px;
height: 1px;
background-color: var(--color-border); }
@media only screen and (max-width: 749px) {
.predictive-search-wrapper--drawer .predictive-search-title::before {
height: 1px; } }
.predictive-search-title__content {
flex: 1 1 auto;
margin-bottom: 0;
padding-right: 40px;
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-family: var(--font-stack-body);
font-weight: var(--font-weight-body);
text-transform: uppercase;
color: var(--color-body-text);
white-space: normal; }
.predictive-search-title__loading-spinner {
flex: 0 0 auto;
position: absolute;
top: 50%;
right: 14px;
margin-top: -10px;
width: 20px;
height: 20px;
color: var(--color-body-text); }
.predictive-search-title__loading-spinner .icon-predictive-search-spinner::before {
width: 100%;
height: 100%;
border-width: 3px; }
.predictive-search-item {
font-weight: 400;
white-space: normal; }
.predictive-search-item__details {
display: flex;
width: 100%;
flex-wrap: wrap;
flex-direction: column;
margin-top: 0;
margin-bottom: 0; }
.predictive-search-item__detail--inline {
display: flex;
flex-direction: row; }
.predictive-search-item__link {
display: flex;
padding: 14px;
background-color: transparent;
transition: background-color 100ms ease-in-out; }
.predictive-search-item__link:active {
background-color: transparent; }
.predictive-search-item--selected .predictive-search-item__link,
.predictive-search-item--selected .predictive-search-view-all__button,
.predictive-search-item__link:hover {
background-color: var(--predictive-search-focus); }
.predictive-search-item--selected .predictive-search-item__link .predictive-search-item__title-text,
.predictive-search-item--selected .predictive-search-view-all__button .predictive-search-item__title-text,
.predictive-search-item__link:hover .predictive-search-item__title-text {
border-bottom-color: var(--color-text); }
.predictive-search__column {
flex: 1 1 auto; }
.predictive-search__column--image {
flex-grow: 0;
flex-shrink: 0;
width: 44px;
height: 44px;
margin-right: 12px;
position: relative; }
.predictive-search-item__image {
object-fit: contain;
font-family: "object-fit: contain";
width: 100%;
height: 100%; }
.predictive-search__column--content {
display: flex;
flex-wrap: wrap;
flex-direction: column; }
.predictive-search__column--center {
justify-content: center; }
.predictive-search-item__title-text {
display: inline-block;
color: var(--color-text);
word-break: break-word;
border-bottom: 1px solid transparent;
line-height: 1.2;
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header); }
.predictive-search-item__vendor {
color: var(--color-body-text);
font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em);
text-transform: uppercase;
letter-spacing: 1px; }
.predictive-search-item__price {
padding-top: 6px;
flex: 0 0 auto;
color: var(--color-body-text); }
.predictive-search-item__price--sale {
color: var(--color-sale-text); }
.predictive-search-item__price--compare {
text-decoration: line-through; }
.predictive-search-view-all, .predictive-search-loading {
border-top: 1px solid var(--color-border); }
@media only screen and (min-width: 750px) {
.predictive-search__list .predictive-search-view-all:first-child, .predictive-search__list .predictive-search-loading:first-child {
border-top: none; } }
.predictive-search-view-all__button {
display: block;
width: 100%;
border: none;
padding: 14px;
text-align: left;
color: var(--color-text);
background-color: transparent;
word-break: break-word;
white-space: normal;
font-family: var(--font-stack-header);
font-weight: var(--font-weight-header); }
.predictive-search-view-all__button:hover, .predictive-search-view-all__button:focus {
background-color: var(--predictive-search-focus); }
/*================ Mobile Site Nav ================*/
.mobile-nav {
display: block;
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1); }
.sub-nav--is-open .mobile-nav {
-ms-transform: translate3d(-100%, 0, 0);
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); }
.third-nav--is-open .mobile-nav {
-ms-transform: translate3d(-200%, 0, 0);
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0); }
.mobile-nav__link,
.mobile-nav__sublist-link {
display: block;
width: 100%;
padding: 15px 30px;
font-size: 16px; }
.mobile-nav__link {
position: relative; }
.mobile-nav__label {
border-bottom: 1px solid transparent; }
.mobile-nav__link--active .mobile-nav__label {
border-bottom-color: var(--color-text); }
.mobile-nav__sublist-link:not(.mobile-nav__sublist-header) {
padding-left: 70px;
padding-right: 30px; }
.mobile-nav__item {
display: block;
width: 100%; }
.mobile-nav__item .icon {
position: absolute;
top: 50%;
left: 50%;
height: 14px;
width: 14px;
margin: -6px 0 0 -7px; }
.mobile-nav__return {
border-right: 1px solid var(--color-border); }
.mobile-nav__return-btn {
position: relative;
padding: 24px 0;
width: 55px; }
.mobile-nav__icon {
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding-left: 22px;
padding-right: 22px;
pointer-events: none;
overflow: hidden; }
.mobile-nav__table {
display: table;
width: 100%; }
.mobile-nav__table-cell {
display: table-cell;
vertical-align: middle;
width: 1%;
text-align: left;
white-space: normal; }
.mobile-nav__toggle-button {
padding: 20px 15px; }
.mobile-nav__dropdown {
position: absolute;
background-color: var(--color-body);
z-index: 8;
width: 100%;
top: 0;
right: -100%;
display: none; }
.is-active + .mobile-nav__dropdown {
display: block;
opacity: 1; }
.mobile-nav__dropdown.is-closing {
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
opacity: 0.99; }
.mobile-nav__dropdown .mobile-nav__sublist-header {
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header);
display: table-cell;
vertical-align: middle;
padding-left: 15px; }
.mobile-nav__dropdown .mobile-nav__sublist-header--main-nav-parent {
color: var(--color-body-text); }
/*================ Mobile nav wrapper ================*/
.mobile-nav-wrapper {
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
position: absolute;
top: 0;
left: 0;
background-color: var(--color-body);
transition: all 0.45s cubic-bezier(0.29, 0.63, 0.44, 1);
display: none;
overflow: hidden;
width: 100%; }
.mobile-nav-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-bottom: 1px solid var(--color-border); }
.mobile-nav-wrapper.js-menu--is-open {
display: block; }
.mobile-nav--close .icon-hamburger {
display: none; }
.site-header__mobile-nav {
z-index: 11;
position: relative;
background-color: var(--color-body); }
@media only screen and (max-width: 749px) {
.site-header__mobile-nav {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center; } }
/*================ Modals ================*/
.modal {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
background-color: var(--color-bg);
bottom: 0;
color: var(--color-text);
display: none;
left: 0;
opacity: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0; }
.modal--is-active {
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
display: block;
opacity: 1;
overflow: hidden; }
.modal__inner {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%; }
.modal__centered {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: relative;
top: 50%; }
.modal__close {
border: 0;
padding: 55px;
position: fixed;
top: 0;
right: 0;
z-index: 2; }
.modal__close .icon {
font-size: calc(((20) / (var(--font-size-base))) * 1em); }
/*============================================================================
Hero slider
Extends default slick slider styles.
Extra specificity in selectors is used to override defaults.
==============================================================================*/
.slideshow-wrapper {
position: relative; }
.slideshow {
position: unset;
overflow: hidden;
margin-bottom: 0;
max-height: 80vh;
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (min-width: 750px) {
.slideshow {
position: relative;
max-height: 100vh; } }
.slideshow .slick-list,
.slideshow .slick-track {
height: 100%; }
.slideshow .slick-prev,
.slideshow .slick-next {
top: 0;
height: 100%;
margin-top: 0;
width: 40px; }
.slideshow .slick-prev {
left: 0; }
.slideshow .slick-next {
right: 0; }
@media only screen and (min-width: 750px) {
.slideshow--display-controls .slick-dots {
left: calc(50% - 22px); } }
.slideshow--small {
height: 175px; }
@media only screen and (min-width: 750px) {
.slideshow--small {
height: 475px; } }
.slideshow--medium {
height: 270px; }
@media only screen and (min-width: 750px) {
.slideshow--medium {
height: 650px; } }
.slideshow--large {
height: 375px; }
@media only screen and (min-width: 750px) {
.slideshow--large {
height: 775px; } }
/*================ General slide styles ================*/
.slideshow__slide {
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
transition: opacity 500ms ease 0s;
top: 0;
width: 100%;
z-index: -1; }
.slideshow__slide--active {
opacity: 1;
z-index: 8; }
.slideshow__link {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0; }
.slideshow__link:active, .slideshow__link:focus {
opacity: 1; }
@media only screen and (min-width: 750px) {
.slideshow__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 2; } }
/*================ Slide images ================*/
.slideshow__image {
transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: transparent;
z-index: 1; }
.no-js .slideshow__image {
opacity: 1; }
/*================ Slide text ================*/
.slideshow__text-wrap {
height: 100%;
position: relative; }
.slideshow__link .slideshow__text-wrap {
cursor: inherit; }
.slideshow__text-wrap--mobile {
display: none; }
@media only screen and (max-width: 749px) {
.slideshow__text-wrap--mobile {
display: block;
position: relative;
top: -1.1rem;
background-color: var(--color-bg);
width: 85%;
margin: 0 0 -1.1rem 7.5%;
z-index: 8; } }
@media only screen and (min-width: 750px) {
.slideshow__text-content {
opacity: 0;
transition: 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s; } }
.slideshow__text-wrap--desktop .slideshow__text-content {
position: absolute;
width: 100%;
top: 50%;
z-index: 2; }
@media only screen and (min-width: 750px) {
.slideshow__text-content.slideshow__text-content--vertical-top {
top: 120px; }
.slideshow__text-content.slideshow__text-content--vertical-bottom {
top: auto;
bottom: 40px; } }
.slideshow__slide--active .slideshow__text-content,
.no-js .slideshow__text-content {
-ms-transform: translateY(-40px);
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
opacity: 1; }
.slideshow__slide--active .slideshow__text-content.slideshow__text-content--vertical-center,
.no-js .slideshow__text-content.slideshow__text-content--vertical-center {
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.no-js .slideshow__text-content::after {
opacity: 0;
visibility: hidden;
content: none; }
.slideshow__text-content--mobile {
display: none;
padding-top: 2.6rem; }
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 1.7rem; }
@media only screen and (min-width: 750px) {
.slideshow__arrows--mobile ~ .slideshow__text-content--mobile {
padding-top: 0; } }
@media only screen and (min-width: 750px) {
.slideshow__text-content--mobile {
padding-top: 0; }
.slideshow__text-content--mobile::after {
display: none; } }
.slideshow__text-content--mobile-active {
display: block; }
.slideshow__title,
.slideshow__subtitle {
color: var(--color-overlay-title-text); }
@media only screen and (max-width: 749px) {
.slideshow__title,
.slideshow__subtitle {
display: none; } }
.slideshow__title--mobile {
margin-bottom: 0; }
.slideshow__title--mobile ~ .slideshow__subtitle--mobile {
margin-top: 0.5rem; }
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: none;
color: var(--color-text); }
@media only screen and (max-width: 749px) {
.slideshow__subtitle--mobile,
.slideshow__title--mobile {
display: block; } }
.slideshow__btn-wrapper {
border: none;
background-color: transparent; }
@media only screen and (min-width: 750px) {
.slideshow__btn-wrapper--push {
margin-top: 30px; } }
.slideshow__btn {
max-width: 100%;
display: inline-block;
word-wrap: break-word;
background-color: var(--color-btn-primary);
color: var(--color-btn-primary-text);
min-height: 3.125rem;
line-height: 2.2; }
@media only screen and (max-width: 749px) {
.slideshow__btn {
display: none; } }
.slideshow__btn--mobile {
display: none;
margin: 1.3rem auto 0; }
@media only screen and (max-width: 749px) {
.slideshow__btn--mobile {
display: inline-block;
margin: 2rem auto 0.3rem; } }
/*================ Slideshow control styles ================*/
.slideshow__controls {
display: flex;
justify-content: center;
position: absolute;
top: 0px;
right: 0px;
margin-bottom: 5px;
z-index: 8; }
@media only screen and (min-width: 750px) {
.slideshow__controls {
top: auto;
bottom: 0;
left: 0; } }
.slideshow__arrows {
height: 44px;
padding: 5px;
background-clip: content-box;
background-color: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
display: none; }
@media only screen and (min-width: 750px) {
.slideshow__arrows {
display: flex; } }
@media only screen and (min-width: 750px) {
.slideshow__controls:hover .slideshow__arrows,
.slideshow__controls:focus .slideshow__arrows,
.slideshow__controls--hover .slideshow__arrows {
background-color: rgba(0, 0, 0, 0.75); } }
.slideshow__arrows .slideshow__arrow {
height: 44px;
width: 44px;
position: relative;
top: -5px;
padding: 0 0.9rem;
line-height: 0;
cursor: pointer;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
background-color: transparent;
color: rgba(255, 255, 255, 0.5);
border: none; }
.slideshow__arrows .slideshow__arrow .icon {
width: 0.7rem;
height: 0.7rem;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.slideshow__arrows .slideshow__arrow .icon:hover {
color: white; }
.slideshow__arrows .slideshow__arrow-previous {
float: left; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slideshow__arrow-previous {
order: -1; } }
.slideshow__arrows .slideshow__arrow-next {
float: right; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slideshow__arrow-next {
order: 1; } }
.slideshow__arrows .slick-dots {
line-height: 32px; }
.slideshow__arrows .slick-dots li {
width: 9px;
height: 9px;
margin-left: 9px; }
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
width: 9px;
height: 9px;
color: rgba(var(--color-text-rgb), 0.7);
border: none;
opacity: 1; }
@media only screen and (min-width: 750px) {
.slideshow__arrows .slick-dots li button::before,
.slideshow__arrows .slick-dots li a::before {
color: rgba(255, 255, 255, 0.5); } }
.slideshow__arrows .slick-dots li.slick-active button::before,
.slideshow__arrows .slick-dots li.slick-active a::before {
color: white; }
.slideshow__arrows--mobile .slick-dots li.slick-active button::before,
.slideshow__arrows--mobile .slick-dots li.slick-active a::before {
color: var(--color-text); }
.slideshow__arrows--mobile {
display: block;
width: 100%;
height: 44px;
background-color: transparent; }
.slideshow__arrows--mobile .icon {
fill: rgba(var(--color-text-rgb), 0.7); }
.slideshow__arrows--mobile .slideshow__arrow:focus .icon {
fill: var(--color-text); }
@media only screen and (min-width: 750px) {
.slideshow__arrows--mobile {
display: none; } }
.slideshow__pause {
clip: auto;
width: 44px;
height: 44px;
margin-left: 1px;
padding: 5px;
background-clip: content-box;
z-index: 10000;
border: none;
background-color: rgba(0, 0, 0, 0.4);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87);
line-height: 0; }
@media only screen and (min-width: 750px) {
.slideshow__controls:hover .slideshow__pause,
.slideshow__controls:focus .slideshow__pause,
.slideshow__controls--hover .slideshow__pause {
background-color: rgba(0, 0, 0, 0.75); } }
.slideshow__pause .icon {
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.slideshow__pause .icon:hover {
color: white; }
.slideshow__pause .icon {
width: 0.65rem;
height: 0.65rem; }
.slideshow__pause-stop {
display: block; }
.slideshow__pause--is-paused .slideshow__pause-stop {
display: none; }
.slideshow__pause-rotate {
display: none; }
.slideshow__pause--is-paused .slideshow__pause-rotate {
display: block; }
.price {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 0;
margin-bottom: 0; }
@media only screen and (max-width: 749px) {
.price {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } }
.price dl {
margin-top: 0; }
.price dd {
margin: 0 0.5em 0 0; }
.price--unavailable {
visibility: hidden; }
.price--compare-price-hidden .price__compare {
display: none; }
.price__pricing-group {
display: flex;
flex-direction: row;
align-items: center; }
.price__regular {
display: block; }
.price__regular,
.price__sale {
margin-right: 0.625rem; }
.price--on-sale .price__regular,
.price--on-sale .price__availability {
display: none; }
.price__availability {
display: none;
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px; }
.price--sold-out .price__availability {
display: block; }
.price__sale {
display: none; }
.price--on-sale .price__sale {
display: flex;
flex-direction: row;
flex-wrap: wrap; }
.price__vendor {
color: var(--color-body-text);
font-size: 0.9em;
font-weight: var(--font-weight-body);
text-transform: uppercase;
letter-spacing: 1px;
margin: 5px 0 10px;
width: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
.price__vendor--listing {
margin: 0 0 4px; }
.price__unit {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
display: none; }
.price--unit-available .price__unit {
display: block; }
.price-item {
color: var(--color-body-text);
font-weight: var(--font-weight-body--bolder); }
.price-item--sale {
color: var(--color-sale-text); }
.price--on-sale .price-item--regular {
text-decoration: line-through; }
.price-unit-price {
color: var(--color-body-text);
font-size: 0.8em; }
.price-item__label {
display: inline-block;
white-space: nowrap;
font-weight: var(--font-weight-body--bolder); }
.price__badges {
margin-top: 0; }
.price__badge {
display: none;
align-self: center;
text-align: center;
font-size: 0.5em;
line-height: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
background-color: var(--color-bg);
border: 1px solid var(--color-text);
border-radius: 2px;
padding: 0.2rem 0.5rem; }
.price__badge--sale {
color: var(--color-bg);
border-color: var(--color-sale-text);
background-color: var(--color-sale-text); }
.price--on-sale .price__badge--sale {
display: flex; }
.price--sold-out .price__badge--sale {
display: none; }
.price__badge--sold-out {
color: var(--color-body-text);
border-color: var(--color-body-text); }
.price--sold-out .price__badge--sold-out {
display: flex; }
.price__badges--listing {
margin-top: 0.5rem; }
.price__badges--listing .price__badge {
font-size: 0.6em;
padding: 0.25rem 0.55rem; }
/*================ Module | Filters and Sort toolbar and selection ================*/
.filters-toolbar-wrapper {
border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.filters-toolbar-wrapper {
margin-bottom: 55px; } }
.filters-toolbar {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.filters-toolbar .icon-chevron-down {
fill: var(--color-text-field-text);
width: calc(10em / 16);
height: calc(10em / 16);
right: 8px; }
.filters-toolbar--has-filter {
position: relative; }
@media only screen and (max-width: 749px) {
.filters-toolbar--has-filter {
border-bottom: none; }
.filters-toolbar--has-filter .filters-toolbar__item-child {
flex-basis: 50%; }
.filters-toolbar--has-filter .filters-toolbar__item-wrapper {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
.filters-toolbar--has-filter .filters-toolbar__item--count {
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
text-align: left; }
.filters-toolbar--has-filter .filters-toolbar__item--count:before {
background-color: var(--color-border);
content: "";
height: 1px;
left: 0;
position: absolute;
top: auto;
width: 100%; } }
.filters-toolbar__item {
min-width: 33%;
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item:first-child .filters-toolbar__input {
padding-left: 0; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child {
flex-grow: 0; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child:first-child {
margin-right: 2.5rem; } }
@media only screen and (min-width: 750px) {
.filters-toolbar__item-child:first-child {
margin-right: 3rem; } }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-child .filters-toolbar__input {
padding-left: 0;
padding-right: 25px;
width: 100%; } }
.filters-toolbar__item-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item-wrapper {
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between; } }
.filters-toolbar__item--count {
min-width: 0;
-webkit-flex: 0 1 auto;
-moz-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
text-align: center; }
@media only screen and (max-width: 749px) {
.filters-toolbar__item--count {
-webkit-flex: 0 1 50%;
-moz-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
text-align: right; } }
.filters-toolbar__label {
display: inline-block; }
@media only screen and (max-width: 749px) {
.filters-toolbar__label {
display: block;
margin-bottom: 0;
margin-top: 8px; } }
.filters-toolbar__input-wrapper {
display: inline-block; }
.filters-toolbar__input {
border: 0 solid transparent;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
height: 55px;
opacity: 1;
position: relative; }
.filters-toolbar__item:first-child .filters-toolbar__input {
padding-left: 0; }
@media only screen and (max-width: 749px) {
.filters-toolbar__input {
height: 46px; } }
.filters-toolbar__input.hidden {
opacity: 0; }
.filters-toolbar__input option {
text-overflow: ellipsis;
overflow: hidden; }
.filters-toolbar__product-count {
font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em);
font-style: italic;
line-height: 55px;
margin-bottom: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@media only screen and (max-width: 749px) {
.filters-toolbar__product-count {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
line-height: 46px; } }
.site-footer {
margin-top: 55px;
padding: 45px 0 55px 0; }
@media only screen and (min-width: 750px) {
.site-footer {
padding-bottom: 35px; } }
.site-footer h4, .site-footer .h4 {
margin-bottom: 12.5px; }
@media only screen and (min-width: 750px) {
.site-footer h4, .site-footer .h4 {
min-height: calc(var(--font-size-header) * 0.7);
margin-bottom: 25px; } }
.site-footer__content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
-o-align-items: flex-start;
align-items: flex-start;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media only screen and (max-width: 749px) {
.site-footer__content {
padding: 0 18px; } }
@media only screen and (min-width: 750px) {
.site-footer__content {
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; } }
.site-footer__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
margin-bottom: 55px; }
@media only screen and (min-width: 750px) {
.site-footer__item {
padding: 0 15px 0 15px;
margin-bottom: 45px; } }
.site-footer__item:first-of-type {
padding-left: 0; }
.site-footer__item:last-of-type {
padding-right: 0; }
@media only screen and (max-width: 749px) {
.site-footer__item:last-of-type {
margin-bottom: 0; } }
@media only screen and (min-width: 750px) {
.site-footer__item--full-width {
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%; }
.site-footer__item--one-half {
-webkit-flex: 1 1 50%;
-moz-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; }
.site-footer__item--one-third {
-webkit-flex: 1 1 33%;
-moz-flex: 1 1 33%;
-ms-flex: 1 1 33%;
flex: 1 1 33%; }
.site-footer__item--one-quarter {
-webkit-flex: 1 1 25%;
-moz-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%; }
.site-footer__item--one-fifth {
-webkit-flex: 1 1 20%;
-moz-flex: 1 1 20%;
-ms-flex: 1 1 20%;
flex: 1 1 20%; }
.site-footer-newsletter__one-half {
-webkit-flex: 1 1 50%;
-moz-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%; } }
@media only screen and (min-width: 750px) {
.site-footer__item--center {
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center; }
.site-footer__item--center > * {
text-align: center; } }
.site-footer__item-inner--newsletter {
width: 100%; }
.site-footer__item-inner--newsletter .newsletter__submit {
margin-top: 5px; }
.site-footer__item-inner--newsletter .newsletter__input {
margin: 5px 0 0 0;
width: 100%; }
@media only screen and (min-width: 750px) {
.site-footer__item--full-width .site-footer__item-inner--newsletter {
max-width: 50%; } }
@media only screen and (min-width: 750px) {
.site-footer__centered--single-block {
width: 75%;
margin: 0 auto; } }
.site-footer__hr {
margin: 55px 0 30px 0; }
@media only screen and (min-width: 750px) {
.site-footer__hr {
margin: 45px 0 20px 0; } }
@media only screen and (max-width: 749px) {
.site-footer__linklist.list--inline > li {
display: block; } }
.site-footer__linklist-item {
display: block;
padding: 15px 0; }
@media only screen and (min-width: 750px) {
.site-footer__linklist-item {
padding: 0 30px 5px 0; } }
.site-footer__linklist-item:last-of-type {
padding-right: 0; }
.site-footer__icon-list {
padding-bottom: 30px; }
@media only screen and (min-width: 750px) {
.site-footer__icon-list {
padding-bottom: 15px; } }
@media only screen and (min-width: 750px) {
.site-footer__social-icons {
padding-top: 7.5px;
text-align: right; } }
.social-icons__item {
padding: 0 15px; }
@media only screen and (min-width: 750px) {
.social-icons__item:last-of-type {
padding-right: 0; } }
.social-icons__link {
display: block; }
.site-footer__subwrapper {
margin-top: 35px; }
@media only screen and (min-width: 750px) {
.site-footer-item-align-right {
text-align: right; } }
.site-footer__copyright-content {
font-size: calc(((var(--font-size-base) - 3) / (var(--font-size-base))) * 1em); }
.site-footer__payment-icons .payment-icon {
margin-bottom: 5px;
margin-left: 5px; }
.site-footer__payment-icons .payment-icon:first-child {
margin-left: 0; }
.site-footer-item-center-vertically {
padding-top: 7.5px; }
@media only screen and (min-width: 750px) {
.site-footer-item-tall {
margin-bottom: 15px;
height: 46px; }
.site-footer-item-tall .site-footer__icon-list {
padding-bottom: 0; } }
.feature-row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center; }
@media only screen and (max-width: 749px) {
.feature-row {
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; } }
.feature-row__item {
-webkit-flex: 0 1 50%;
-moz-flex: 0 1 50%;
-ms-flex: 0 1 50%;
flex: 0 1 50%; }
@media only screen and (max-width: 749px) {
.feature-row__item {
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 100%;
max-width: 100%; } }
.feature-row__image-wrapper {
margin: 0 auto 19.44444px;
position: relative;
width: 100%; }
.feature-row__image {
display: block;
margin: 0 auto; }
.feature-row__image-wrapper .feature-row__image {
width: 100%;
position: absolute;
top: 0; }
@media only screen and (max-width: 749px) {
.feature-row__image {
order: 1; } }
.feature-row__text {
padding-top: 35px;
padding-bottom: 35px; }
@media only screen and (max-width: 749px) {
.feature-row__text {
order: 2;
padding-bottom: 0; } }
@media only screen and (min-width: 750px) {
.feature-row__text--left {
padding-left: 35px; }
.feature-row__text--right {
padding-right: 35px; } }
@media only screen and (min-width: 750px) {
.featured-row__subtext {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em); } }
.hero {
position: relative;
height: 475px;
display: table;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%; }
.hero--adapt,
.hero-fixed-width__image {
max-height: 100vh; }
@media only screen and (min-width: 750px) {
.hero--adapt,
.hero-fixed-width__image {
max-height: 80vh; } }
.hero--x-small {
height: 94px; }
.hero--small {
height: 225px; }
.hero--medium {
height: 357px; }
.hero--large {
height: 488px; }
.hero--x-large {
height: 582px; }
@media only screen and (min-width: 750px) {
.hero--x-small {
height: 125px; }
.hero--small {
height: 300px; }
.hero--medium {
height: 475px; }
.hero--large {
height: 650px; }
.hero--x-large {
height: 775px; } }
.hero__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.hero__inner {
position: relative;
display: table-cell;
vertical-align: middle;
padding: 55px 0;
z-index: 2; }
.hero__btn {
margin-top: 27.5px; }
/*================ Fixed width ================*/
.hero-fixed-width {
position: relative; }
.hero-fixed-width::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 1; }
.hero-fixed-width__content {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.hero-fixed-width__image {
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 auto;
display: block;
object-fit: cover;
font-family: "object-fit: cover";
overflow: hidden; }
/*================ Quote slider ================*/
.quote-icon {
display: block;
margin: 0 auto 20px; }
.quotes-slider-wrapper {
overflow: hidden; }
.quotes-slider-wrapper.slick-initialized .quotes-slider {
touch-action: pan-y; }
.quotes-slider {
display: flex;
max-width: 100%; }
.quotes-slide {
width: 100%;
flex-shrink: 0; }
@media only screen and (min-width: 750px) {
.quotes-slide {
width: 33.33%; } }
.quotes-slide--single {
width: 100%; }
.quotes-slider__text {
font-size: calc(((var(--font-size-base) + 1.75) / (var(--font-size-base))) * 1em);
font-weight: var(--font-weight-body);
font-style: var(--font-style-body);
padding: 0 15px; }
.quotes-slider__text cite {
font-size: calc(((var(--font-size-base)) / (var(--font-size-base) + 4)) * 1em);
font-style: normal; }
.quotes-slider__text p {
margin-bottom: 30px; }
.quotes-slider__text p + cite {
margin-top: 0; }
.slick-dotted.quotes-slider.slick-initialized {
cursor: grab;
cursor: -moz-grab;
cursor: -webkit-grab; }
.quotes-wrapper .slick-dots {
position: relative;
bottom: 0;
margin-top: 55px; }
.quotes-wrapper .slick-dots li {
margin: 0; }
@media only screen and (min-width: 750px) {
.quotes-wrapper .slick-dots li:nth-last-child(-n+2) {
display: none; } }
.quotes-wrapper .slick-dots li button::before {
font-size: 34px;
color: var(--color-text);
opacity: 0.2; }
.quotes-wrapper .slick-dots li.slick-active button::before {
opacity: 1; }
@media only screen and (min-width: 750px) {
.quotes-wrapper .slick-dots--mobile-only {
display: none; } }
.quotes-wrapper .slick-slide[tabindex="0"] {
outline: none; }
.logo-bar {
list-style: none;
text-align: center;
margin-bottom: -35px; }
@media only screen and (min-width: 750px) {
.logo-bar--large {
margin-bottom: -55px; } }
.logo-bar__item {
display: inline-block;
vertical-align: middle;
max-width: 160px;
margin: 0 27.5px 35px; }
@media only screen and (min-width: 750px) {
.logo-bar__item--large {
margin-bottom: 55px; } }
.logo-bar__image {
display: block;
margin: 0 auto; }
.logo-bar__link {
display: block; }
.map-section {
position: relative;
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
@media only screen and (min-width: 750px) {
.map-section {
min-height: 500px; } }
.map-section--load-error {
height: auto; }
.map-section__wrapper {
height: 100%;
flex-shrink: 0;
flex-grow: 1;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.map-section__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: 2; }
.map-section__error {
position: relative;
z-index: 3; }
@media only screen and (min-width: 750px) {
.map-section__error {
position: absolute;
margin: 0 2rem;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); } }
.map-section__content-wrapper {
position: relative;
text-align: center;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%;
flex-grow: 0; }
@media only screen and (min-width: 750px) and (max-width: 989px) {
.map-section__content-wrapper {
-ms-flex-preferred-size: 50%;
-webkit-flex-basis: 50%;
-moz-flex-basis: 50%;
flex-basis: 50%; } }
@media only screen and (min-width: 990px) {
.map-section__content-wrapper {
-ms-flex-preferred-size: 33%;
-webkit-flex-basis: 33%;
-moz-flex-basis: 33%;
flex-basis: 33%; } }
.map-section__content {
position: relative;
display: inline-block;
background-color: var(--color-bg-alt);
padding: 35px;
width: 100%;
text-align: center;
z-index: 3;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
-ms-align-content: center;
align-content: center; }
.map-section__content > * {
width: 100%; }
@media only screen and (min-width: 750px) {
.map-section__content {
background-color: var(--color-bg);
margin: 55px 0;
min-height: 300px; } }
.map-section--load-error .map-section__content {
position: static;
transform: translateY(0); }
.map-section__link {
display: block;
position: absolute;
top: 0;
left: 50%;
max-width: none;
width: 100%;
height: 100%;
z-index: 2;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%); }
.map-section__container {
max-width: none;
width: 100%;
height: 55vh;
left: 0; }
@media only screen and (min-width: 750px) {
.map-section__container {
position: absolute;
height: 100%;
top: 0;
width: 130%; } }
.map_section__directions-btn [class^="icon"] {
height: 1em; }
.map_section__directions-btn * {
vertical-align: middle; }
.map-section__background-wrapper {
overflow: hidden;
position: relative;
-ms-flex-preferred-size: 100%;
-webkit-flex-basis: 100%;
-moz-flex-basis: 100%;
flex-basis: 100%; }
@media only screen and (min-width: 750px) {
.map-section__background-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; } }
.map-section--onboarding .map-section__background-wrapper {
min-height: 55vh; }
.map-section__image {
height: 100%;
position: relative;
top: 0;
left: 0;
width: 100%;
background-size: cover;
background-position: center; }
@media only screen and (min-width: 750px) {
.map-section__image {
position: absolute; } }
.map-section--display-map .map-section__image {
display: none !important; }
.map-section--load-error .map-section__image {
display: block !important; }
.gm-style-cc,
.gm-style-cc + div {
visibility: hidden; }
.image-bar {
overflow: hidden; }
@media only screen and (max-width: 749px) {
.image-bar {
max-width: 400px;
margin: 0 auto; } }
.image-bar__item {
display: block;
color: var(--color-overlay-title-text);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover; }
.image-bar__link:hover .image-bar__overlay::before, .image-bar__link:focus .image-bar__overlay::before {
opacity: var(--hover-overlay-opacity); }
.image-bar__link:focus {
position: relative;
z-index: 2; }
.image-bar__link:focus .image-bar__content {
outline: 1px dotted #212121;
outline: 5px auto -webkit-focus-ring-color; }
.image-bar__content, .image-bar__item {
position: relative;
width: 100%; }
.image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
height: 94px; }
.image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
height: 225px; }
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 357px; }
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: 488px; }
.image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
height: 582px; }
@media only screen and (min-width: 750px) {
.image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
height: 125px; }
.image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
height: 300px; }
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 475px; }
.image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
height: 650px; }
.image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
height: 775px; } }
.image-bar__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.image-bar__caption {
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
width: 100%;
text-align: center;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
.collection-grid {
margin-bottom: -22px;
overflow: auto; }
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
margin-bottom: 22px; }
@media only screen and (min-width: 750px) {
.collection-grid-item {
margin-bottom: 30px; } }
.collection-grid-item__title {
color: var(--color-overlay-title-text);
position: absolute;
text-align: center;
width: 100%;
top: 50%;
padding: 0 5px;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
hyphens: auto; }
@media only screen and (min-width: 750px) {
.collection-grid-item__title {
padding: 0 15px; } }
.collection-grid-item__link {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.collection-grid-item__link:hover .collection-grid-item__title-wrapper::before, .collection-grid-item__link:focus .collection-grid-item__title-wrapper::before {
opacity: var(--hover-overlay-opacity); }
.collection-grid-item__link:focus {
opacity: 1; }
.collection-grid-item__overlay {
position: relative;
display: block;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center top; }
.collection-grid-item__title-wrapper::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay); }
.custom-content {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-ms-flex-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
-o-align-items: stretch;
align-items: stretch;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: auto;
margin-bottom: -30px;
margin-left: -30px; }
@media only screen and (max-width: 749px) {
.custom-content {
margin-bottom: -22px;
margin-left: -22px; } }
.custom__item {
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin-bottom: 30px;
padding-left: 30px;
max-width: 100%; }
@media only screen and (max-width: 749px) {
.custom__item {
-webkit-flex: 0 0 auto;
-moz-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-left: 22px;
margin-bottom: 22px; }
.custom__item.small--one-half {
-webkit-flex: 1 0 50%;
-moz-flex: 1 0 50%;
-ms-flex: 1 0 50%;
flex: 1 0 50%;
max-width: 400px;
margin-left: auto;
margin-right: auto; } }
.custom__item .collection-grid-item {
margin-bottom: 0; }
.custom__item-inner {
position: relative;
display: block;
text-align: left;
max-width: 100%; }
.custom__item-inner--video,
.custom__item-inner--collection,
.custom__item-inner--html {
display: block; }
.custom__item-inner--image {
position: relative;
margin: 0 auto; }
.custom__image {
width: 100%;
display: block;
position: absolute;
top: 0; }
/*================ Linklist ================*/
@media only screen and (max-width: 749px) {
.custom__item.custom__item--link_list {
flex: 1 0 100%;
max-width: none; } }
.custom__linklist {
margin-left: -15px;
margin-right: -15px; }
@media only screen and (min-width: 750px) {
.custom__linklist {
margin-left: -12px;
margin-right: -12px; } }
.custom__linklist-link {
display: inline-block;
padding: 10px 15px;
margin: 5px 0; }
@media only screen and (min-width: 750px) {
.custom__linklist-link {
padding: 3px 12px;
margin-top: 0;
margin-bottom: 0; } }
/*================ Flex item alignment ================*/
.align--top-middle {
text-align: center; }
.align--top-right {
text-align: right; }
.align--middle-left {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center; }
.align--center {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
text-align: center; }
.align--middle-right {
-ms-flex-item-align: center;
-webkit-align-self: center;
align-self: center;
text-align: right; }
.align--bottom-left {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end; }
.align--bottom-middle {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
text-align: center; }
.align--bottom-right {
-ms-flex-item-align: flex-end;
-webkit-align-self: flex-end;
align-self: flex-end;
text-align: right; }
.newsletter-section {
padding-top: 55px; }
.index-section--newsletter-background {
background-color: var(--color-bg-alt); }
.rich-text__heading--large {
font-size: 1.4em; }
.rich-text__heading--small {
font-size: 0.88em; }
.rich-text__text--large {
font-size: calc(((var(--font-rich-text-large)) / (var(--font-size-base))) * 1em); }
.rich-text__text--small {
font-size: calc(((var(--font-rich-text-small)) / (var(--font-size-base))) * 1em); }
.product-card {
position: relative; }
.product-card:hover .product-card__image-wrapper, .product-card:focus-within .product-card__image-wrapper {
opacity: 0.8; }
.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {
border-bottom-color: var(--color-text); }
.product-card__image-with-placeholder-wrapper {
position: relative; }
.product-card__title {
border-bottom: 1px solid transparent;
display: inline;
font-family: var(--font-stack-header);
font-style: var(--font-style-header);
font-weight: var(--font-weight-header); }
[data-section-type="video-section"] {
margin: 0 auto; }
@media only screen and (max-width: 749px) {
[data-section-type="video-section"] {
transition: width 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), padding 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-section-wrapper {
position: relative;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (min-width: 750px) {
.video-section-wrapper {
overflow: hidden; } }
@media only screen and (max-width: 749px) {
.video-section-wrapper {
overflow: visible !important; }
.video-section-wrapper.video-is-playing {
margin: 0; }
.video-section-wrapper.video-is-loaded {
transition: height 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87), margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-section-wrapper--small.video-section-wrapper--min-height {
min-height: 175px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--small.video-section-wrapper--min-height {
min-height: 475px; } }
.video-section-wrapper--medium.video-section-wrapper--min-height {
min-height: 270px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--medium.video-section-wrapper--min-height {
min-height: 650px; } }
.video-section-wrapper--large.video-section-wrapper--min-height {
min-height: 375px; }
@media only screen and (min-width: 750px) {
.video-section-wrapper--large.video-section-wrapper--min-height {
min-height: 775px; } }
.video-section-wrapper--min-height {
transition: height 0s, margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (max-width: 749px) {
.video-section-wrapper--min-height.video-is-loaded {
transition: height 0s, margin 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87); } }
.video-background-wrapper--no-overlay {
background-color: rgba(var(--color-image-overlay-rgb), 0.2); }
/*================ Video text ================*/
.video__text-content {
text-align: center;
position: relative;
width: 100%;
top: 20px;
opacity: 1;
transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s;
z-index: 3;
padding: 40px 0; }
.video-is-playing .video__text-content {
display: none; }
.video-is-loaded .video__text-content,
.no-js .video__text-content {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
transform: translateY(-20px); }
.video-is-loaded .video__text-content::after,
.no-js .video__text-content::after {
opacity: 0;
visibility: hidden;
content: none; }
.video__title {
color: var(--color-overlay-title-text); }
.video-is-paused .video__title {
display: none; }
/*================ Video styles ================*/
.video {
display: none;
position: absolute;
left: 0;
top: 0;
z-index: 2; }
.video--background {
position: absolute;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease-in; }
.autoplay .video-is-loaded .video--background {
display: block;
visibility: visible;
opacity: 1; }
.video--image_with_play {
display: none;
opacity: 0;
visibility: none;
width: 100%;
height: 100%;
transition: all 0.2s ease-in; }
.video-is-playing .video--image_with_play,
.video-is-paused .video--image_with_play {
display: block;
visibility: visible;
opacity: 1; }
/*================ Video control buttons ================*/
.video-control {
display: none;
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 4;
transition: all 0.1s ease-out; }
.video-control__play-wrapper {
display: none;
height: 50px; }
@media only screen and (min-width: 750px) {
.video-control__play-wrapper {
display: block; } }
.video-control__play-wrapper-mobile {
display: block;
height: 50px;
position: absolute;
top: calc(100% - 50px / 2);
left: calc(50% - 50px / 2); }
@media only screen and (min-width: 750px) {
.video-control__play-wrapper-mobile {
display: none; } }
.video-control__play-wrapper--with-text {
margin-top: 30px; }
.video-control__play {
display: flex;
justify-content: center;
align-items: center;
visibility: visible;
opacity: 1;
width: 50px;
height: 50px;
border-radius: 25px;
position: relative;
margin: 0 auto;
padding: 5px;
pointer-events: none; }
.video-background-wrapper .video-control__play {
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%); }
.video-control__play .icon {
opacity: 0.5; }
.video-is-loaded .video-control__play {
pointer-events: auto; }
.video-is-loaded .video-control__play .icon {
opacity: 1; }
.video-is-playing .video-control__play {
display: none;
visibility: hidden;
opacity: 0; }
.video-control__play::before {
content: '';
display: block;
width: 2.875rem;
height: 2.875rem;
position: absolute;
margin-left: -1.4375rem;
border-radius: 50%;
border: 2px solid white;
border-top-color: transparent;
-moz-animation: spin 0.65s infinite linear;
-o-animation: spin 0.65s infinite linear;
-webkit-animation: spin 0.65s infinite linear;
animation: spin 0.65s infinite linear;
transition: all 0.1s ease-out 0.5s;
z-index: 5;
top: 1px;
left: 50%;
opacity: 0.5; }
.video-is-loaded .video-control__play::before,
.video-is-playing .video-control__play::before,
.video-is-paused .video-control__play::before {
content: none;
display: none; }
.video-control__close-wrapper {
display: none;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
outline: none;
z-index: 3; }
.video-is-playing .video-control__close-wrapper,
.video-is-paused .video-control__close-wrapper {
display: block; }
.video-control__close {
position: relative;
width: 30px;
height: 30px;
margin: 0 auto;
font-size: 14px;
line-height: 27px;
border-radius: 15px;
background-color: white;
color: black; }
.video-control__close-wrapper:hover .video-control__close,
.video-control__close-wrapper:focus .video-control__close {
outline: auto 5px -webkit-focus-ring-color;
opacity: 0.7; }
.video-is-playing .video-control__close,
.video-is-paused .video-control__close {
display: inline-block;
visibility: visible;
opacity: 1; }
.video-control__close .icon {
display: inline-block;
width: 14px;
height: 14px;
margin: 0 auto; }
.video__pause {
position: absolute;
top: 0;
right: 0;
z-index: 3;
width: 50px;
height: 50px;
padding: 0;
border: none;
background-color: transparent;
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
@media only screen and (max-width: 749px) {
.video__pause {
display: none; } }
.video-is-playing .video__pause {
display: none; }
.video__pause .icon {
position: relative;
color: rgba(255, 255, 255, 0.5);
transition: color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87), background-color 0.2s cubic-bezier(0.44, 0.13, 0.48, 0.87); }
.video__pause:hover, .video__pause:focus {
outline: none; }
.video__pause:hover .icon, .video__pause:focus .icon {
color: white; }
.video__pause .icon-pause {
width: 12px;
height: 12px;
top: 11px; }
.video__pause .icon-play {
width: 16px;
height: 16px;
top: 9px; }
.video__pause-resume,
.video__pause-stop {
height: 34px;
width: 34px;
margin: 0 auto;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4); }
.video__pause:hover .video__pause-resume,
.video__pause:focus .video__pause-resume, .video__pause:hover
.video__pause-stop,
.video__pause:focus
.video__pause-stop {
background-color: rgba(0, 0, 0, 0.75); }
.video__pause:focus .video__pause-resume, .video__pause:focus
.video__pause-stop {
outline: auto 5px -webkit-focus-ring-color; }
.video__pause-stop {
display: flex; }
.is-paused .video__pause-stop {
display: none; }
.video__pause-resume {
display: none; }
.is-paused .video__pause-resume {
display: flex; }
/*================ Overlay ================*/
.video__overlay::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--color-image-overlay);
opacity: var(--opacity-image-overlay);
z-index: 3; }
.video-is-playing .video__overlay {
opacity: 0; }
.video-is-playing .video__overlay:before {
content: none; }
/*================ Fallback images ================*/
.video__image {
transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
position: absolute;
top: 0;
left: 0;
opacity: 1;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
z-index: 1; }
@media only screen and (min-width: 750px) {
.video-background-wrapper .video__image {
opacity: 0; } }
.product-recommendations__inner {
padding: 35px 0; }
@media only screen and (min-width: 750px) {
.product-recommendations__inner {
padding: 55px 0; } }
.disclosure {
position: relative; }
.disclosure__toggle {
white-space: nowrap; }
.disclosure-list {
background-color: var(--color-text-field);
border: 1px solid var(--color-border-form);
bottom: 115%;
padding: 11px 0px;
position: absolute;
display: none;
min-height: 92px;
max-height: 300px;
overflow-y: auto;
border-radius: 2px; }
.disclosure-list--visible {
display: block; }
.disclosure-list__item {
border-bottom: 1px solid transparent;
white-space: nowrap;
padding: 5px 45px 4px 15px;
text-align: left; }
.disclosure-list__item:active {
background-color: var(--color-bg-currency-selector); }
.disclosure-list__option {
color: var(--color-text-field-text); }
.disclosure-list__option:focus, .disclosure-list__option:hover {
color: var(--color-text-field-text) !important;
border-bottom: 1px solid var(--color-text-field-text); }
.disclosure-list__item--current .disclosure-list__option {
border-bottom: 1px solid var(--color-text-field-text); }
/*================ Selectors ================*/
.selectors-form {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 15px; }
@media only screen and (min-width: 750px) {
.selectors-form {
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
-webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; } }
.selectors-form__item {
padding-bottom: 15px;
margin: 0 5px; }
@media only screen and (min-width: 750px) {
.selectors-form__item {
padding-bottom: 0; }
.selectors-form__item:first-of-type {
margin-left: 0; } }
.store-availability-small-text {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em); }
.store-availability-information {
display: flex;
margin-left: 5px; }
.store-availability-information-container {
margin-left: 5px; }
.store-availability-information__title {
margin-bottom: 0; }
.store-availability-information__stock {
margin-bottom: 0; }
.store-availability-information__button {
text-decoration: underline;
cursor: pointer;
border: none;
padding: 0;
background: transparent;
margin-top: 8px; }
.store-availability-container .icon {
min-width: 12px;
min-height: 12px;
width: 12px;
height: 12px;
margin: 4px 4px 0 0; }
.store-availability-container .icon-in-stock {
fill: #00730B; }
.store-availability-container .icon-out-of-stock {
fill: #DD2200; }
.store-availability-container .icon-close {
width: 18px;
height: 18px;
margin: 0; }
.store-availability-container .store-availability-list__stock .icon {
margin: 0 2px 3px 0; }
.store-availabilities-modal {
z-index: 3;
width: 375px;
left: auto;
border: 1px solid var(--color-border);
box-sizing: border-box;
box-shadow: -4px 4px 6px rgba(58, 58, 58, 0.04); }
.store-availabilities-modal--active {
display: flex;
flex-direction: column;
transform: translateY(0);
opacity: 1; }
@media only screen and (max-width: 749px) {
.store-availabilities-modal--active {
width: 100%;
height: 100%;
overflow: hidden;
z-index: 9999; } }
.store-availabilities-modal__header {
display: flex;
justify-content: space-between;
margin: 16px 0 16px 0;
padding: 0 24px 0 24px; }
.store-availabilities-modal__product-title {
font-size: calc(((var(--font-size-base) + 2) / (var(--font-size-base))) * 1em);
text-transform: none;
margin-bottom: 0;
letter-spacing: 0; }
.store-availabilities-list {
overflow-y: auto;
padding: 0 20px 0 20px; }
.store-availabilities-modal__close {
margin: -14px -14px 0 0;
padding: 14px;
align-self: start; }
.store-availability-list__item {
padding-bottom: 16px; }
.store-availability-list__item::before {
content: "";
display: block;
margin: 0 0 16px 0;
border-bottom: 1px solid var(--color-border); }
.store-availability-list__address {
font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
font-style: normal;
margin-bottom: 0; }
.store-availability-list__location {
font-size: var(--font-size-base);
margin-bottom: 8px; }
.store-availability-list__stock {
margin-top: 8px;
margin-bottom: 16px; }
.store-availability-list__phone {
margin-bottom: 0; }
/* Contenedor de la palabra "Cantidad" y los botones */
.product-form__controls-group {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px; /* Ajusta este valor para controlar la separación entre "Cantidad" y el botón "menos" */
}
/* Ajustar el margen entre la palabra "Cantidad" y el botón menos */
.product-form__controls-group label {
font-size: 16px;
margin-right: 5px; /* Ajusta este valor para controlar la separación exacta */
margin-left: 10px; /* Desplaza la palabra "Cantidad" hacia la derecha */
text-align: center;
font-weight: bold; /* Hace que la palabra "Cantidad" esté en negrita */
}
.quantity-container {
display: flex;
align-items: center;
gap: 5px; /* Ajusta este valor para controlar el espacio entre los botones y el input */
}
.quantity-btn {
background-color: #ddd;
border: none;
padding: 0;
width: 50px;
height: 50px;
font-size: 28px; /* Aumenta el tamaño de los símbolos un poco más */
cursor: pointer;
display: flex;
justify-content: center;
align-items: flex-start; /* Coloca los símbolos más arriba */
padding-top: 1.5px; /* Añade un pequeño padding superior para subir los símbolos */
}
/* Control específico del ancho del botón "menos" */
.quantity-btn#decrease {
width: 48px; /* Ajusta el ancho del botón "menos" */
}
/* Control específico del ancho del botón "más" */
.quantity-btn#increase {
width: 50px; /* Ajusta el ancho del botón "más" si es necesario */
}
.quantity-btn:hover {
background-color: #ccc;
}
.product-form__input {
width: 50px;
height: 50px;
text-align: center;
font-size: 16px;
padding: 0;
border: 1px solid #ddd;
box-sizing: border-box;
}
/* Elimina los spinners en Chrome, Safari, Edge y Opera */
.product-form__input::-webkit-outer-spin-button,
.product-form__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
@media (max-width: 768px) {
.logo-bar {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo-bar li {
flex: 1 1 45%; /* Ajusta para tener dos logos por fila en móviles */
max-width: 100px; /* Limita el ancho de cada logotipo */
margin: 10px;
list-style: none; /* Elimina los puntos de lista si aparecen */
}
.logo-bar img {
width: 100%; /* Asegura que los logos se ajusten al contenedor */
height: auto;
}
}
@media (max-width: 768px) {
.site-footer__linklist {
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.site-footer__linklist li {
flex: 1 1 45%;
margin: -12px 0; /* Reduce el margen para que queden más juntos */
list-style: none;
}
.site-footer__item-inner--link_list p { /* Asegúrate de que esta clase sea la del contenedor del título */
text-align: center;
}
}
/* ===== Estilos para ícono de MercadoPago ===== */
.payment-icon.mercado-custom {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
width: 40px;
border: 1px solid #e8e8e8;
border-radius: 3px;
padding: 3px;
box-shadow: none; /* asegúrate que no tenga sombra si los demás tampoco */
transform: translateY(0px); /* ajuste visual solo para escritorio */
}
.payment-icon.mercado-custom img {
height: 22px; /* tamaño del logo */
max-width: 145%; /* evita que se desborde el cuadro */
}
/* ✅ Solo para móviles */
@media screen and (max-width: 768px) {
.gallery-desktop {
display: none !important;
}
.gallery-mobile {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
padding: 0;
margin: 0;
}
.aliton-slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
padding: 0 12px;
box-sizing: border-box;
}
.aliton-slide img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
object-fit: contain;
}
.gallery-mobile::-webkit-scrollbar {
display: none;
}
}
/* ✅ Solo para escritorio */
@media screen and (min-width: 769px) {
.gallery-desktop {
display: block !important;
}
.gallery-mobile {
display: none !important;
}
}
select.single-option-selector {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.collapsible-row {
border-top: 1px solid #e5e5e5;
padding: 1rem 0;
}
.collapsible-row summary {
list-style: none;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.05rem;
cursor: pointer; /* ✅ aplicar aquí */
}
.collapsible-row .content {
margin-top: 0.5rem;
font-size: 0.95rem;
color: #333;
cursor: default; /* ✅ importante para que no se herede */
}
.collapsible-row summary {
list-style: none;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.05rem;
}
.collapsible-row .content {
margin-top: 0.5rem;
font-size: 0.95rem;
color: #333;
}
@media screen and (max-width: 749px) {
.product-single__media-group {
opacity: 0;
transition: opacity 0.2s ease-in-out;
min-height: 450px; /* ajusta este valor al tamaño que usualmente ocupa tu galería */
}
.product-single__media-group.loaded {
opacity: 1;
}
}
transition: opacity 0.3s ease-in-out;
.collection-description {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0.5rem auto;
text-align: center;
font-size: 16px;
}
.collection-description li {
display: inline-block;
white-space: nowrap;
}
.collection-description li:not(:last-child)::after {
content: " · ";
color: inherit;
}
.collection-description li a {
text-decoration: none;
color: inherit;
}
.collection-description li a:hover {
border-bottom: 1px solid #e71010;
}
@media (max-width: 768px) {
.collection-description {
justify-content: center !important;
text-align: center !important;
padding: 0 1rem;
gap: 0.25rem 0.75rem;
line-height: 1.4;
}
.collection-description li {
display: inline-block;
}
}
.collection-description {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 1rem auto;
text-align: center;
font-size: 16px;
}
.collection-description li {
display: inline-block;
white-space: nowrap;
}
.collection-description li:not(:last-child)::after {
content: " · ";
}
.collection-description li a {
text-decoration: none;
color: inherit;
}
.collection-description li a:hover {
border-bottom: 1px solid #e71010;
}
@media (max-width: 768px) {
.collection-description {
padding: 0 1rem;
font-size: 14px;
}
}
/* Restaurar visibilidad y tamaño correcto de los videos en móvil */
div.aliton-slide video {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
object-fit: contain;
margin: 0 auto;
}
.badge-exclusivo-aliton {
position: absolute !important;
top: -2px !important;
left: 2px !important;
width: auto !important;
height: auto !important;
max-width: 110px !important;
max-height: 110px !important;
z-index: 10 !important;
transform: rotate(-18deg) !important;
pointer-events: none !important;
opacity: 0.98;
}
.collapsible-row summary {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.arrow-icon {
transform: rotate(0deg);
display: inline-block;
margin-left: 8px;
transform-origin: center center; /* Centra el eje de rotación */
height: 20px;
width: 20px;
}
.collapsible-row[open] .arrow-icon {
transform: rotate(180deg);
}
/* Hover-swap funcional solo en dispositivos con puntero */
@media (hover: hover) {
.hover-swap {
position: relative;
}
.hover-swap img {
display: block;
width: 100%;
height: auto;
transition: opacity 0.3s ease-in-out;
}
.primary-img {
position: relative;
z-index: 2;
opacity: 1;
}
.secondary-img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
z-index: 1;
width: 100%;
height: auto;
}
.hover-swap:hover .secondary-img {
opacity: 1;
z-index: 3;
}
.hover-swap:hover .primary-img {
opacity: 0;
}
}
/* En móviles: elimina el swap y previene scroll */
@media (hover: none) {
.hover-swap {
position: relative;
}
.primary-img,
.secondary-img {
position: static !important;
opacity: 1 !important;
z-index: 1 !important;
width: 100% !important;
height: auto !important;
}
.secondary-img {
display: none !important;
}
}