/** Shopify CDN: Minification failed Line 4423:30 Unexpected ")" Line 4426:30 Unexpected ")" Line 6817:55 Unexpected ")" Line 6821:55 Unexpected ")" Line 6824:55 Unexpected ")" Line 6827:55 Unexpected ")" Line 6836:55 Unexpected ")" Line 6840:57 Unexpected ")" Line 6845:55 Unexpected ")" Line 6848:55 Unexpected ")" ... and 19 more hidden warnings **/ /* Ported from the live theme and mechanically transformed for the Dawn test theme: * all selectors scoped to #MainContent (so nothing leaks into Dawn's header/footer) * and all rem values baked to px (live assumes a 16px root; Dawn's root is 10px). * Source of truth: the live theme on main. Do not hand-edit -- regenerate instead. */ @charset "UTF-8"; /*================ Colors ================*/ #MainContent{ --bg: var(--COLOR-BG); --bg-alpha-25: var(--COLOR-BG-ALPHA-25); --bg-alpha-35: var(--COLOR-BG-ALPHA-35); --bg-alpha-60: var(--COLOR-BG-ALPHA-60); --bg-darken: var(--COLOR-BG-DARKEN); --bg-lighten-darken: var(--COLOR-BG-LIGHTEN-DARKEN); --bg-lighten-darken-shimmer-bg: var(--COLOR-BG-LIGHTEN-DARKEN-SHIMMER-BG); --bg-lighten-darken-shimmer-effect: var(--COLOR-BG-LIGHTEN-DARKEN-SHIMMER-EFFECT); --bg-lighten-darken-shimmer-enhancement: var(--COLOR-BG-LIGHTEN-DARKEN-SHIMMER-ENHANCEMENT); --bg-lighten-darken-foreground: var(--COLOR-BG-LIGHTEN-DARKEN-FOREGROUND); --bg-lighten-darken-highlight: var(--COLOR-BG-LIGHTEN-DARKEN-HIGHLIGHT); --bg-lighten-darken-search-loader: var(--COLOR-BG-LIGHTEN-DARKEN-SEARCH-LOADER); --bg-lighten-darken-search-loader-line: var(--COLOR-BG-LIGHTEN-DARKEN-SEARCH-LOADER-LINE); --bg-lighten-darken-contrast: var(--COLOR-BG-LIGHTEN-DARKEN-CONTRAST); --bg-overlay: var(--COLOR-BG-OVERLAY); --text: var(--COLOR-TEXT); --text-darken: var(--COLOR-TEXT-DARKEN); --text-lighten: var(--COLOR-TEXT-LIGHTEN); --text-alpha-5: var(--COLOR-TEXT-ALPHA-5); --text-alpha-8: var(--COLOR-TEXT-ALPHA-8); --text-alpha-10: var(--COLOR-TEXT-ALPHA-10); --text-alpha-15: var(--COLOR-TEXT-ALPHA-15); --text-alpha-25: var(--COLOR-TEXT-ALPHA-25); --text-alpha-50: var(--COLOR-TEXT-ALPHA-50); --text-alpha-60: var(--COLOR-TEXT-ALPHA-60); --text-alpha-85: var(--COLOR-TEXT-ALPHA-85); --heading: var(--COLOR-HEADING); --accent: var(--COLOR-ACCENT); --accent-text: var(--COLOR-ACCENT-TEXT); --sale-bg: var(--COLOR-SALE-BG); --sale-text: var(--COLOR-SALE-TEXT); --custom-bg: var(--COLOR-CUSTOM-BG); --custom-text: var(--COLOR-CUSTOM-TEXT); --sold-bg: var(--COLOR-SOLD-BG); --sold-text: var(--COLOR-SOLD-TEXT); --saving-bg: var(--COLOR-SAVING-BG); --saving-text: var(--COLOR-SAVING-TEXT); --input-bg: var(--COLOR-INPUT-BG); --border: var(--COLOR-BORDER); --border-alpha-15: var(--COLOR-BORDER-ALPHA-15); --border-alpha-30: var(--COLOR-BORDER-ALPHA-30); --border-alpha-50: var(--COLOR-BORDER-ALPHA-50); --border-alpha-65: var(--COLOR-BORDER-ALPHA-65); --border-lighten-darken: var(--COLOR-BORDER-LIGHTEN-DARKEN); --hairline: var(--COLOR-BORDER-HAIRLINE); --error: var(--COLOR-ERROR); --error-bg: var(--COLOR-ERROR-BG); --success: var(--COLOR-SUCCESS); --success-bg: var(--COLOR-SUCCESS-BG); --disabled-grey: var(--COLOR-DISABLED-GREY); --disabled-grey-darken: var(--COLOR-DISABLED-GREY-DARKEN); --white: var(--COLOR-WHITE); --white-darken: var(--COLOR-WHITE-DARKEN); --white-alpha-10: var(--COLOR-WHITE-ALPHA-10); --white-alpha-20: var(--COLOR-WHITE-ALPHA-20); --white-alpha-25: var(--COLOR-WHITE-ALPHA-25); --white-alpha-50: var(--COLOR-WHITE-ALPHA-50); --white-alpha-60: var(--COLOR-WHITE-ALPHA-60); --black: var(--COLOR-BLACK); --black-lighten: var(--COLOR-BLACK-LIGHTEN); --black-alpha-05: var(--COLOR-BLACK-ALPHA-05); --black-alpha-10: var(--COLOR-BLACK-ALPHA-10); --black-alpha-20: var(--COLOR-BLACK-ALPHA-20); --black-alpha-25: var(--COLOR-BLACK-ALPHA-25); --black-alpha-50: var(--COLOR-BLACK-ALPHA-50); --black-alpha-60: var(--COLOR-BLACK-ALPHA-60); --upsells-bg: var(--COLOR-UPSELLS-BG); --upsells-text: var(--COLOR-UPSELLS-TEXT); --upsells-text-lighten: var(--COLOR-UPSELLS-TEXT-LIGHTEN); --upsells-disabled-grey-darken: var(--COLOR-UPSELLS-DISABLED-GREY-DARKEN); } /*================ Typography ================*/ #MainContent{ --adjust-body: var(--FONT-ADJUST-BODY); --adjust-heading: var(--FONT-ADJUST-HEADING); --adjust-button: var(--FONT-ADJUST-MEDIUM-BUTTON); --adjust-small-button: var(--FONT-ADJUST-SMALL-BUTTON); --adjust-medium-button: var(--FONT-ADJUST-MEDIUM-BUTTON); --adjust-large-button: var(--FONT-ADJUST-LARGE-BUTTON); --adjust-nav: var(--FONT-ADJUST-NAV); --adjust-nav-top-level: var(--FONT-ADJUST-NAV-TOP-LEVEL); --adjust-accent: var(--FONT-ADJUST-SUBHEADING); --adjust-label: var(--FONT-ADJUST-LABEL); --adjust-product-grid: var(--FONT-ADJUST-PRODUCT-GRID); --adjust-product-grid-heading: var(--FONT-ADJUST-PRODUCT-GRID-HEADING); --adjust-badges: calc(var(--FONT-ADJUST-BADGES) * var(--FONT-ADJUST-SUBHEADING)); } #MainContent a{ text-decoration: none; } #MainContent, #MainContent{ font-size: 16px; } #MainContent{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); line-height: 1.5625; color: var(--text); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } #MainContent input, #MainContent textarea, #MainContent select, #MainContent button{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); font-size: calc(16px * var(--adjust-body)); line-height: 26px; border-radius: var(--RADIUS); } #MainContent h1, #MainContent h2, #MainContent h3, #MainContent h4, #MainContent h5, #MainContent h6, #MainContent .h1, #MainContent .h2, #MainContent .h3, #MainContent .h4, #MainContent .h5, #MainContent .h6{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); display: block; color: var(--heading); margin: 0 0 0.5em; font-size: var(--heading-size, 48px); line-height: 1.25; } #MainContent h1 a, #MainContent h2 a, #MainContent h3 a, #MainContent h4 a, #MainContent h5 a, #MainContent h6 a, #MainContent .h1 a, #MainContent .h2 a, #MainContent .h3 a, #MainContent .h4 a, #MainContent .h5 a, #MainContent .h6 a{ text-decoration: none; font-weight: inherit; color: inherit; } #MainContent h1 .strong, #MainContent h1.strong, #MainContent h1 strong, #MainContent h2 .strong, #MainContent h2.strong, #MainContent h2 strong, #MainContent h3 .strong, #MainContent h3.strong, #MainContent h3 strong, #MainContent h4 .strong, #MainContent h4.strong, #MainContent h4 strong, #MainContent h5 .strong, #MainContent h5.strong, #MainContent h5 strong, #MainContent h6 .strong, #MainContent h6.strong, #MainContent h6 strong, #MainContent .h1 .strong, #MainContent .h1.strong, #MainContent .h1 strong, #MainContent .h2 .strong, #MainContent .h2.strong, #MainContent .h2 strong, #MainContent .h3 .strong, #MainContent .h3.strong, #MainContent .h3 strong, #MainContent .h4 .strong, #MainContent .h4.strong, #MainContent .h4 strong, #MainContent .h5 .strong, #MainContent .h5.strong, #MainContent .h5 strong, #MainContent .h6 .strong, #MainContent .h6.strong, #MainContent .h6 strong{ font-weight: var(--FONT-WEIGHT-HEADING-BOLD); } #MainContent h1, #MainContent .h1{ --heading-size: calc(48px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 1439px) { #MainContent h1, #MainContent .h1{ --heading-size: calc(40px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent h1, #MainContent .h1{ --heading-size: calc(36px * var(--adjust-heading)); } } #MainContent h2, #MainContent .h2{ --heading-size: calc(40px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 1439px) { #MainContent h2, #MainContent .h2{ --heading-size: calc(33.6px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent h2, #MainContent .h2{ --heading-size: calc(28px * var(--adjust-heading)); } } #MainContent h3, #MainContent .h3{ --heading-size: calc(28px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 1439px) { #MainContent h3, #MainContent .h3{ --heading-size: calc(24px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent h3, #MainContent .h3{ --heading-size: calc(20px * var(--adjust-heading)); } } #MainContent h4, #MainContent .h4{ --heading-size: calc(21px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 1439px) { #MainContent h4, #MainContent .h4{ --heading-size: calc(20.48px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent h4, #MainContent .h4{ --heading-size: calc(20px * var(--adjust-heading)); } } #MainContent h5, #MainContent .h5{ --heading-size: calc(17.6px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 767px) { #MainContent h5, #MainContent .h5{ --heading-size: calc(16px * var(--adjust-heading)); } } #MainContent h6, #MainContent .h6{ --heading-size: calc(16px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 767px) { #MainContent h6, #MainContent .h6{ --heading-size: calc(14px * var(--adjust-heading)); } } #MainContent .h1-body{ --text-size: calc(48px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h1-body{ --text-size: calc(32px * var(--adjust-body)); } } #MainContent .h2-body{ --text-size: calc(48px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h2-body{ --text-size: calc(32px * var(--adjust-body)); } } #MainContent .h3-body{ --text-size: calc(32px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h3-body{ --text-size: calc(24px * var(--adjust-body)); } } #MainContent .h4-body{ --text-size: calc(21px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h4-body{ --text-size: calc(20px * var(--adjust-body)); } } #MainContent .h5-body{ --text-size: calc(17.6px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h5-body{ --text-size: calc(16px * var(--adjust-body)); } } #MainContent .h6-body{ --text-size: calc(16px * var(--adjust-body)); font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .h6-body{ --text-size: calc(14px * var(--adjust-body)); } } #MainContent .h1-body, #MainContent .h2-body, #MainContent .h3-body, #MainContent .h4-body, #MainContent .h5-body, #MainContent .h6-body{ font-size: var(--text-size, 16px); } #MainContent p, #MainContent .p{ font-size: calc(16px * var(--adjust-body)); } #MainContent .h1 p, #MainContent .h2 p, #MainContent .h3 p, #MainContent .h4 p, #MainContent .h5 p, #MainContent .h6 p, #MainContent .h1 .p, #MainContent .h2 .p, #MainContent .h3 .p, #MainContent .h4 .p, #MainContent .h5 .p, #MainContent .h6 .p{ font-size: inherit; } #MainContent p img{ margin: 0; } #MainContent p a{ color: inherit; text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } #MainContent em{ font-style: var(--FONT-STYLE-BODY-ITALIC); } #MainContent b, #MainContent strong{ font-weight: var(--FONT-WEIGHT-BODY-BOLD); } #MainContent small{ --text-size: calc(12px * var(--adjust-body)); font-size: var(--text-size); } #MainContent sup, #MainContent sub{ position: relative; font-size: 60%; vertical-align: baseline; } #MainContent sup{ top: -0.5em; } #MainContent sub{ bottom: -0.5em; } #MainContent .font-heading{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); } #MainContent .font-body{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } #MainContent .main-heading{ --heading-size: calc(48px * var(--adjust-heading)); font-size: var(--heading-size); text-transform: var(--HEADING-TEXT-CAPS); line-height: 1.2; } @media only screen and (max-width: 1439px) { #MainContent .main-heading{ --heading-size: calc(40px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .main-heading{ --heading-size: calc(36px * var(--adjust-heading)); } } #MainContent .main-text{ text-transform: none; --text-size: calc(21px * var(--adjust-body)); font-size: var(--text-size); font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } @media only screen and (max-width: 767px) { #MainContent .main-text{ --text-size: calc(20px * var(--adjust-body)); } } #MainContent .section-header__subheading, #MainContent .subheading-text{ font-family: var(--FONT-STACK-SUBHEADING); font-weight: var(--FONT-WEIGHT-SUBHEADING); font-size: calc(14px * var(--FONT-ADJUST-SUBHEADING)); text-transform: var(--SUBHEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-SUBHEADING); color: inherit; } #MainContent .button-typography{ font-family: var(--FONT-STACK-BUTTON); font-weight: var(--FONT-WEIGHT-BUTTON); font-style: var(--FONT-STYLE-BUTTON); text-transform: var(--BUTTON-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-BUTTON); } #MainContent .label-typography{ font-family: var(--FONT-STACK-LABEL); font-weight: var(--FONT-WEIGHT-LABEL); font-style: var(--FONT-STYLE-LABEL); font-size: calc(19.2px * var(--adjust-label)); text-transform: var(--LABEL-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-LABEL); } #MainContent .price--bold, #MainContent .product__price--bold{ font-weight: var(--FONT-WEIGHT-BODY-BOLD); } #MainContent .text-discounts{ opacity: 0.7; font-size: calc(14px * var(--adjust-body)); } #MainContent .text-discounts .price{ color: inherit; } /*================ Normalize ================*/ #MainContent *, #MainContent input, #MainContent :before, #MainContent :after{ box-sizing: border-box; } #MainContent, #MainContent{ padding: 0; margin: 0; } #MainContent input{ background: none; } #MainContent article, #MainContent aside, #MainContent details, #MainContent figcaption, #MainContent figure, #MainContent footer, #MainContent header, #MainContent hgroup, #MainContent main, #MainContent nav, #MainContent section, #MainContent summary{ display: block; } #MainContent details, #MainContent header, #MainContent main{ overflow: hidden; } #MainContent audio, #MainContent canvas, #MainContent progress, #MainContent video{ display: inline-block; vertical-align: baseline; } #MainContent input[type=number]::-webkit-inner-spin-button, #MainContent input[type=number]::-webkit-outer-spin-button{ height: auto; margin: 0; -webkit-appearance: none; } #MainContent input[type=search]::-webkit-search-cancel-button, #MainContent input[type=search]::-webkit-search-decoration{ -webkit-appearance: none; } #MainContent [hidden], #MainContent template{ display: none; } #MainContent blockquote{ --text-size: calc(15px * var(--adjust-body)); font-size: var(--text-size); line-height: 1.45; font-style: var(--FONT-STYLE-BODY-ITALIC); margin: 0 0 var(--gutter); padding: calc(var(--gutter) / 2) var(--gutter); } #MainContent blockquote p{ margin-bottom: 0; } #MainContent blockquote p + cite{ margin-top: calc(var(--gutter) / 2); } #MainContent blockquote cite{ display: block; font-size: calc(11px * var(--adjust-body)); } #MainContent blockquote cite:before{ content: "— "; } #MainContent code, #MainContent pre{ background-color: #FAF7F5; font-family: Consolas, monospace; font-size: calc(14px * var(--adjust-body)); border: 0 none; padding: 0 2px; color: #51AB62; } #MainContent pre{ overflow: auto; padding: calc(var(--gutter) / 2); margin: 0 0 var(--gutter); } #MainContent hr{ clear: both; border-top: solid var(--accent); border-width: var(--BORDER-WIDTH) 0 0; margin: var(--gutter) 0; height: 0; } #MainContent ul, #MainContent ol{ margin: 0 0 calc(var(--gutter) / 2) 20px; padding: 0; } #MainContent ol{ list-style: decimal; } #MainContent ul ul, #MainContent ul ol, #MainContent ol ol, #MainContent ol ul{ margin: 4px 0 5px 20px; } #MainContent li{ margin-bottom: 0.25em; } #MainContent ul.square{ list-style: square outside; } #MainContent ul.disc{ list-style: disc outside; } #MainContent ol.alpha{ list-style: lower-alpha outside; } #MainContent .no-bullets{ list-style: none outside; margin-left: 0; } #MainContent .inline-list{ margin-left: 0; } #MainContent .inline-list li{ display: inline-block; margin-bottom: 0; } #MainContent table{ width: 100%; border-collapse: collapse; border-spacing: 0; border: var(--BORDER-WIDTH) solid var(--border); } #MainContent .table-wrap{ max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } @media only screen and (max-width: 767px) { #MainContent .table-wrap{ margin-bottom: 20px; } } #MainContent th, #MainContent td{ text-align: left; padding: 20px; font-weight: inherit; border: var(--BORDER-WIDTH) solid var(--border); } @media only screen and (max-width: 767px) { #MainContent th, #MainContent td{ padding: 15px; } } @media only screen and (max-width: 479px) { #MainContent th, #MainContent td{ padding: 10px; } } #MainContent img{ border: 0 none; } #MainContent svg:not(:root){ overflow: hidden; } #MainContent img, #MainContent iframe{ max-width: 100%; } #MainContent form{ margin-bottom: 0; } #MainContent input, #MainContent textarea, #MainContent button, #MainContent select{ color: var(--text); padding: 0; margin: 0; line-height: 26px; -webkit-user-select: text; user-select: text; } #MainContent button{ background: none; border: none; cursor: pointer; } #MainContent button, #MainContent input, #MainContent textarea{ -webkit-appearance: none; -moz-appearance: none; } #MainContent button{ background: none; border: none; display: inline-block; cursor: pointer; font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } #MainContent input[type=image]{ padding-left: 0; padding-right: 0; } #MainContent fieldset{ padding: calc(var(--gutter) / 2); } #MainContent legend{ border: 0; padding: 0; } #MainContent button, #MainContent input[type=submit]{ cursor: pointer; } #MainContent input, #MainContent textarea, #MainContent select{ font-size: var(--FONT-SIZE-INPUT); border: var(--BORDER-WIDTH) solid var(--border); background: var(--input-bg); max-width: 100%; padding: 13px 20px; } #MainContent input[disabled], #MainContent input.disabled, #MainContent textarea[disabled], #MainContent textarea.disabled, #MainContent select[disabled], #MainContent select.disabled{ cursor: default; background-color: var(--disabled-grey); border-color: var(--disabled-grey-darken); } #MainContent input[type=checkbox], #MainContent input[type=radio]{ display: inline-block; padding: 0; width: auto; } #MainContent input[type=checkbox]{ -webkit-appearance: checkbox; -moz-appearance: checkbox; } #MainContent input[type=radio]{ -webkit-appearance: radio; -moz-appearance: radio; } #MainContent input[type=image]{ padding-left: 0; padding-right: 0; } #MainContent select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow: ""; cursor: pointer; } #MainContent ::input-placeholder{ color: var(--text); } #MainContent ::placeholder{ color: var(--text); } #MainContent :input-placeholder{ color: var(--text); } #MainContent :placeholder{ color: var(--text); } #MainContent optgroup{ font-weight: var(--FONT-WEIGHT-BODY-BOLD); } #MainContent option{ color: var(--black); background-color: var(--white); } #MainContent select::-ms-expand{ display: none; } @media only screen and (max-width: 767px) { #MainContent .table--responsive h2, #MainContent .table--responsive h3{ text-align: center; } #MainContent .table--responsive thead{ display: none; } #MainContent .table--responsive tr{ display: block; position: relative; } #MainContent .table--responsive th{ padding: 10px 10px 0 10px; } #MainContent .table--responsive tr, #MainContent .table--responsive td{ float: left; clear: both; width: 100%; } #MainContent .table--responsive th, #MainContent .table--responsive td{ display: block; padding: 15px 15px 15px 0; } } @media only screen and (max-width: 479px) { #MainContent .table--small-hide{ display: none !important; } } #MainContent .no-js select{ -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } /*================ Heights ================*/ #MainContent{ --full-height: 100vh; --three-quarters: 75vh; --two-thirds: 66vh; --one-half: 50vh; --one-third: 33vh; --one-fifth: 20vh; --announcement-height: 0px; --content-full: calc(100vh - var(--header-height, 0px) - var(--announcement-height, 0px)); } #MainContent .original-height{ --min-h: 240px; } #MainContent .full-height{ --min-h: var(--full-height); } #MainContent .three-quarters-height{ --min-h: var(--three-quarters); } #MainContent .two-thirds-height{ --min-h: var(--two-thirds); } #MainContent .one-half-height{ --min-h: var(--one-half); } #MainContent .one-third-height{ --min-h: var(--one-third); } #MainContent .one-fifth-height{ --min-h: var(--one-fifth); } #MainContent .seven-fifty-height{ --min-h: 750px; } #MainContent .six-fifty-height{ --min-h: 650px; } #MainContent .five-fifty-height{ --min-h: 550px; } #MainContent .four-fifty-height{ --min-h: 450px; } #MainContent .three-fifty-height{ --min-h: 350px; } #MainContent .three-hundred-height{ --min-h: 300px; } #MainContent .two-fifty-height{ --min-h: 250px; } #MainContent .two-hundred-height{ --min-h: 200px; } #MainContent .one-fifty-height{ --min-h: 150px; } #MainContent .one-hundred-height{ --min-h: 100px; } #MainContent .original-height, #MainContent .full-height, #MainContent .three-quarters-height, #MainContent .two-thirds-height, #MainContent .one-half-height, #MainContent .one-third-height, #MainContent .one-fifth-height, #MainContent .seven-fifty-height, #MainContent .six-fifty-height, #MainContent .five-fifty-height, #MainContent .four-fifty-height, #MainContent .three-fifty-height, #MainContent .three-hundred-height, #MainContent .two-fifty-height, #MainContent .two-hundred-height, #MainContent .one-fifty-height, #MainContent .one-hundred-height{ min-height: var(--min-h); } @media only screen and (max-width: 767px) { #MainContent .original-height-mobile{ --min-h: auto; } #MainContent .full-height-mobile{ --min-h: var(--full-height); } #MainContent .three-quarters-height-mobile{ --min-h: var(--three-quarters); } #MainContent .two-thirds-height-mobile{ --min-h: var(--two-thirds); } #MainContent .one-half-height-mobile{ --min-h: var(--one-half); } #MainContent .one-third-height-mobile{ --min-h: var(--one-third); } #MainContent .one-fifth-height-mobile{ --min-h: var(--one-fifth); } #MainContent .seven-fifty-height-mobile{ --min-h: 750px; } #MainContent .six-fifty-height-mobile{ --min-h: 650px; } #MainContent .five-fifty-height-mobile{ --min-h: 550px; } #MainContent .four-fifty-height-mobile{ --min-h: 450px; } #MainContent .three-fifty-height-mobile{ --min-h: 350px; } #MainContent .two-fifty-height-mobile{ --min-h: 250px; } #MainContent .one-fifty-height-mobile{ --min-h: 150px; } #MainContent .original-height-mobile, #MainContent .full-height-mobile, #MainContent .three-quarters-height-mobile, #MainContent .two-thirds-height-mobile, #MainContent .one-half-height-mobile, #MainContent .one-third-height-mobile, #MainContent .one-fifth-height-mobile, #MainContent .seven-fifty-height-mobile, #MainContent .six-fifty-height-mobile, #MainContent .five-fifty-height-mobile, #MainContent .four-fifty-height-mobile, #MainContent .three-fifty-height-mobile, #MainContent .two-fifty-height-mobile, #MainContent .one-fifty-height-mobile{ min-height: var(--min-h); } } /*================ Links and Buttons ================*/ #MainContent{ --button-line-height: 1.53; } #MainContent a{ color: var(--text); background: transparent; } #MainContent button[disabled], #MainContent input[disabled]{ cursor: default; } #MainContent .btn, #MainContent .shopify-payment-button__button--unbranded{ font-family: var(--FONT-STACK-BUTTON); font-weight: var(--FONT-WEIGHT-BUTTON); font-style: var(--FONT-STYLE-BUTTON); text-transform: var(--BUTTON-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-BUTTON); --top-bottom-padding: 15px; --left-right-padding: 22px; --btn-inner-top-bottom: calc(var(--top-bottom-padding) * var(--adjust-button)); --btn-inner-left-right: calc(var(--left-right-padding) * var(--adjust-button)); position: relative; display: inline-block; overflow: hidden; padding: var(--btn-inner-top-bottom) var(--btn-inner-left-right); line-height: var(--button-line-height); border-radius: var(--RADIUS); border: var(--BORDER-WIDTH) solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text); text-decoration: none; box-shadow: none; font-size: calc(16px * var(--adjust-button)); text-align: center; will-change: color, border, background; transition: color 0.3s ease, border 0.3s ease, background 0s linear 0s; z-index: 1; -webkit-tap-highlight-color: initial; } #MainContent .btn::after, #MainContent .shopify-payment-button__button--unbranded::after, #MainContent .btn::before, #MainContent .shopify-payment-button__button--unbranded::before{ content: ""; position: absolute; display: flex; left: calc(var(--BORDER-WIDTH) * -1); top: calc(var(--BORDER-WIDTH) * -1); right: calc(var(--BORDER-WIDTH) * -1); bottom: calc(var(--BORDER-WIDTH) * -1); will-change: transform; z-index: -1; opacity: 0.3; transition: transform 0.3s ease; background: var(--btn-bg-hover); } #MainContent .btn::before, #MainContent .shopify-payment-button__button--unbranded::before{ transform: scale(1, 0); } #MainContent .btn::after, #MainContent .shopify-payment-button__button--unbranded::after{ transform: scale(0, 1); } #MainContent .btn[disabled], #MainContent [disabled].shopify-payment-button__button--unbranded, #MainContent .btn:disabled, #MainContent .shopify-payment-button__button--unbranded:disabled, #MainContent .btn.disabled, #MainContent .disabled.shopify-payment-button__button--unbranded{ cursor: default; opacity: 0.65; } #MainContent .btn[disabled]::before, #MainContent [disabled].shopify-payment-button__button--unbranded::before, #MainContent .btn[disabled]::after, #MainContent [disabled].shopify-payment-button__button--unbranded::after, #MainContent .btn:disabled::before, #MainContent .shopify-payment-button__button--unbranded:disabled::before, #MainContent .btn:disabled::after, #MainContent .shopify-payment-button__button--unbranded:disabled::after, #MainContent .btn.disabled::before, #MainContent .disabled.shopify-payment-button__button--unbranded::before, #MainContent .btn.disabled::after, #MainContent .disabled.shopify-payment-button__button--unbranded::after{ content: none; transform: scale(0); } #MainContent .btn:hover, #MainContent .shopify-payment-button__button--unbranded:hover{ transition: color 0.3s ease, border 0.3s ease, background 0s linear 0.3s; } @media only screen and (min-width: 480px) { #MainContent .btn, #MainContent .shopify-payment-button__button--unbranded{ min-width: 120px; } } @media only screen and (min-width: 1440px) { #MainContent .btn, #MainContent .shopify-payment-button__button--unbranded{ min-width: 180px; } } @media only screen and (max-width: 479px) { #MainContent .btn, #MainContent .shopify-payment-button__button--unbranded{ width: 100%; } } #MainContent span.btn, #MainContent span.shopify-payment-button__button--unbranded{ cursor: default; } #MainContent .btn--top::before{ transform-origin: top center; } #MainContent .btn--bottom::before{ transform-origin: bottom center; } #MainContent .btn--top:hover::before, #MainContent .btn--bottom:hover::before{ transform: none; } #MainContent .btn--left::after{ transform-origin: center left; } #MainContent .btn--right::after{ transform-origin: center right; } #MainContent .btn--left:hover::after, #MainContent .btn--right:hover::after{ transform: none; } #MainContent .btn, #MainContent .shopify-payment-button__button--unbranded{ --btn-border: var(--text); --btn-bg: var(--text); --btn-text: var(--bg); --btn-bg-hover: var(--bg-lighten-darken); } #MainContent .collection__filters-more.btn span, #MainContent .collection__filters-more.shopify-payment-button__button--unbranded span, #MainContent .cookies__buttons .btn, #MainContent .cookies__buttons .shopify-payment-button__button--unbranded, #MainContent .cookies__close, #MainContent .product-upsell__btn{ font-size: calc(13.6px * var(--adjust-button)); } /*=== Buttons - Advanced ===*/ #MainContent .btn--advanced{ display: inline-flex; align-items: center; justify-content: center; } #MainContent .btn--advanced.btn--small{ --adjust-button: var(--adjust-small-button); } #MainContent .btn--advanced.btn--large{ --adjust-button: var(--adjust-large-button); } #MainContent .btn--advanced-width-height{ --button-width: var(--MEDIUM-BUTTON-WIDTH); --button-height: var(--MEDIUM-BUTTON-HEIGHT); --btn-min-max-width: calc(100vw - 2 * var(--gutter)); --btn-width-limit: var(--button-width), var(--btn-min-max-width); height: auto; min-height: var(--button-height); width: auto; min-width: var(--stacked-button, min(var(--btn-width-limit))); max-width: max(var(--btn-width-limit), 100%); align-content: center; } @media only screen and (max-width: 767px) { #MainContent .btn--advanced-width-height{ --btn-min-max-width: calc(100vw - 2 * var(--gutter-mobile)); } } @media only screen and (min-width: 480px) { #MainContent .overlapping-images__buttons .btn--advanced-width-height{ min-width: min(var(--btn-width-limit), 100%); } } @media only screen and (max-width: 767px) { #MainContent .brick__block:not(:only-child) .brick__block__inner .btn--advanced-width-height{ --btn-min-max-width: calc(100vw - (2 * var(--inner) + 2 * var(--gutter-mobile))); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .brick__block:not(:only-child) .brick__block__inner .btn--advanced-width-height{ --btn-min-max-width: calc(50vw - (2 * var(--inner) + var(--gutter-mobile))); } } @media only screen and (min-width: 768px) { #MainContent .brick__block:not(:only-child) .brick__block__inner .btn--advanced-width-height{ --btn-min-max-width: calc(50vw - 2 * var(--gutter)); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .brick__blocks__flex--gap .brick__block:not(:only-child) .brick__block__inner .btn--advanced-width-height{ --btn-min-max-width: calc(50vw - (2 * var(--inner) + var(--gutter-mobile) + (var(--gutter-mobile) / 2))); } } #MainContent .btn--advanced-width-height.btn--small{ --button-width: var(--SMALL-BUTTON-WIDTH); --button-height: var(--SMALL-BUTTON-HEIGHT); } #MainContent .btn--advanced-width-height.btn--large{ --button-width: var(--LARGE-BUTTON-WIDTH); --button-height: var(--LARGE-BUTTON-HEIGHT); } #MainContent .btn--advanced-width-height.btn--advanced-adaptive-width{ min-width: min(var(--btn-width-limit), 100%); } /*=== Button Primary ===*/ #MainContent .btn--primary, #MainContent .btn--primary .shopify-payment-button__button--unbranded, #MainContent input.btn .shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .shopify-payment-button__button--unbranded, #MainContent input.btn, #MainContent input.shopify-payment-button__button--unbranded{ --btn-border: var(--PRIMARY-BUTTONS-COLOR-BORDER); --btn-bg: var(--PRIMARY-BUTTONS-COLOR-BG); --btn-text: var(--PRIMARY-BUTTONS-COLOR-TEXT); --btn-text-alpha-10: var(--PRIMARY-BUTTONS-COLOR-TEXT-ALPHA-10); --btn-bg-hover: var(--PRIMARY-BUTTONS-COLOR-HOVER); } #MainContent .btn--primary-outline, #MainContent .btn--primary.btn--outline .shopify-payment-button__button--unbranded, #MainContent input.btn--outline.btn .shopify-payment-button__button--unbranded, #MainContent input.btn--outline.shopify-payment-button__button--unbranded .shopify-payment-button__button--unbranded, #MainContent .btn--outline input.shopify-payment-button__button--unbranded .shopify-payment-button__button--unbranded, #MainContent .btn--primary.btn--outline, #MainContent .btn--outline .btn--primary.shopify-payment-button__button--unbranded, #MainContent .btn--primary .btn--outline.shopify-payment-button__button--unbranded, #MainContent .btn--primary .btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--outline .btn--primary .shopify-payment-button__button--unbranded, #MainContent input.btn .btn--outline.shopify-payment-button__button--unbranded, #MainContent input.btn .btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--outline input.btn .shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--outline.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--outline .shopify-payment-button__button--unbranded, #MainContent input.btn--outline.btn, #MainContent input.btn--outline.shopify-payment-button__button--unbranded, #MainContent .btn--outline input.shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-BUTTONS-PRIMARY-BORDER); --btn-bg: var(--OUTLINE-BUTTONS-PRIMARY-BG); --btn-text: var(--OUTLINE-BUTTONS-PRIMARY-TEXT); --btn-text-alpha-10: var(--OUTLINE-BUTTONS-PRIMARY-TEXT-ALPHA-10); --btn-bg-hover: var(--OUTLINE-BUTTONS-PRIMARY-BG-HOVER); } #MainContent .btn--primary-solid-border, #MainContent .btn--primary.btn--solid-border .shopify-payment-button__button--unbranded, #MainContent input.btn--solid-border.btn .shopify-payment-button__button--unbranded, #MainContent input.btn--solid-border.shopify-payment-button__button--unbranded .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border input.shopify-payment-button__button--unbranded .shopify-payment-button__button--unbranded, #MainContent .btn--primary.btn--solid-border, #MainContent .btn--solid-border .btn--primary.shopify-payment-button__button--unbranded, #MainContent .btn--primary .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent .btn--primary .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border .btn--primary .shopify-payment-button__button--unbranded, #MainContent input.btn .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent input.btn .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border input.btn .shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent input.btn--solid-border.btn, #MainContent input.btn--solid-border.shopify-payment-button__button--unbranded, #MainContent .btn--solid-border input.shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-BORDER); --btn-bg: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-BG); --btn-text: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-TEXT); --btn-text-alpha-10: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-TEXT-ALPHA-10); --btn-bg-hover: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-BG-HOVER); } #MainContent .btn--primary.btn--soft, #MainContent .btn--primary .btn--soft.shopify-payment-button__button--unbranded, #MainContent input.btn .btn--soft.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--soft.shopify-payment-button__button--unbranded, #MainContent input.btn--soft.btn, #MainContent input.btn--soft.shopify-payment-button__button--unbranded{ --btn-bg: var(--PRIMARY-BUTTONS-COLOR-ALPHA-05); --btn-text: var(--PRIMARY-BUTTONS-COLOR-BG); --btn-bg-hover: var(--PRIMARY-BUTTONS-COLOR-ALPHA-10); } #MainContent .btn--primary.btn--text, #MainContent .btn--primary .btn--text.shopify-payment-button__button--unbranded, #MainContent input.btn .btn--text.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn--text.shopify-payment-button__button--unbranded, #MainContent input.btn--text.btn, #MainContent input.btn--text.shopify-payment-button__button--unbranded{ --btn-text: var(--PRIMARY-BUTTONS-COLOR-BG); } #MainContent .btn--secondary, #MainContent .btn--secondary .shopify-payment-button__button--unbranded{ --btn-border: var(--SECONDARY-BUTTONS-COLOR-BORDER); --btn-bg: var(--SECONDARY-BUTTONS-COLOR-BG); --btn-text: var(--SECONDARY-BUTTONS-COLOR-TEXT); --btn-text-alpha-10: var(--SECONDARY-BUTTONS-COLOR-TEXT-ALPHA-10); --btn-bg-hover: var(--COLOR-SECONDARY-OPPOSITE-ALPHA-20); } #MainContent .btn--secondary-outline, #MainContent .btn--secondary.btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--secondary.btn--outline, #MainContent .btn--outline .btn--secondary.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn--outline.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--outline .btn--secondary .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-BUTTONS-SECONDARY-BORDER); --btn-bg: var(--OUTLINE-BUTTONS-SECONDARY-BG); --btn-text: var(--OUTLINE-BUTTONS-SECONDARY-TEXT); --btn-text-alpha-10: var(--OUTLINE-BUTTONS-SECONDARY-TEXT-ALPHA-10); --btn-bg-hover: var(--OUTLINE-BUTTONS-SECONDARY-BG-HOVER); } #MainContent .btn--secondary-solid-border, #MainContent .btn--secondary.btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--secondary.btn--solid-border, #MainContent .btn--solid-border .btn--secondary.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border .btn--secondary .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-BORDER); --btn-bg: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-BG); --btn-text: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-TEXT); --btn-text-alpha-10: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-TEXT-ALPHA-10); --btn-bg-hover: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-BG-HOVER); } #MainContent .btn--secondary.btn--soft, #MainContent .btn--secondary .btn--soft.shopify-payment-button__button--unbranded{ --btn-bg: var(--SECONDARY-BUTTONS-COLOR-ALPHA-05); --btn-text: var(--SECONDARY-BUTTONS-COLOR-BG); --btn-bg-hover: var(--SECONDARY-BUTTONS-COLOR-ALPHA-10); } #MainContent .btn--secondary.btn--text, #MainContent .btn--secondary .btn--text.shopify-payment-button__button--unbranded{ --btn-text: var(--SECONDARY-BUTTONS-COLOR-BG); } #MainContent .btn--white, #MainContent .btn--white .shopify-payment-button__button--unbranded{ --btn-border: var(--white); --btn-bg: var(--white); --btn-text: var(--black); --btn-text-alpha-10: var(--black-alpha-10); --btn-bg-hover: var(--black-alpha-25); } #MainContent .btn--white-outline, #MainContent .btn--white.btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--white.btn--outline, #MainContent .btn--outline .btn--white.shopify-payment-button__button--unbranded, #MainContent .btn--white .btn--outline.shopify-payment-button__button--unbranded, #MainContent .btn--white .btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--outline .btn--white .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-BUTTONS-WHITE-BORDER); --btn-bg: var(--OUTLINE-BUTTONS-WHITE-BG); --btn-text: var(--OUTLINE-BUTTONS-WHITE-TEXT); --btn-text-alpha-10: var(--OUTLINE-BUTTONS-WHITE-TEXT-ALPHA-10); } #MainContent .btn--white-solid-border, #MainContent .btn--white.btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--white.btn--solid-border, #MainContent .btn--solid-border .btn--white.shopify-payment-button__button--unbranded, #MainContent .btn--white .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent .btn--white .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border .btn--white .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-SOLID-BUTTONS-WHITE-BORDER); --btn-bg: var(--OUTLINE-SOLID-BUTTONS-WHITE-BG); --btn-text: var(--OUTLINE-SOLID-BUTTONS-WHITE-TEXT); --btn-text-alpha-10: var(--OUTLINE-SOLID-BUTTONS-WHITE-TEXT-ALPHA-10); } #MainContent .btn--white.btn--soft, #MainContent .btn--white .btn--soft.shopify-payment-button__button--unbranded{ --btn-bg: var(--white-alpha-10); --btn-text: var(--white); --btn-bg-hover: var(--white-alpha-20); } #MainContent .btn--white.btn--text, #MainContent .btn--white .btn--text.shopify-payment-button__button--unbranded{ --btn-text: var(--white); } #MainContent .btn--black, #MainContent .btn--black .shopify-payment-button__button--unbranded{ --btn-border: var(--black); --btn-bg: var(--black); --btn-text: var(--white); --btn-text-alpha-10: var(--white-alpha-10); --btn-bg-hover: var(--white-alpha-50); } #MainContent .btn--black-outline, #MainContent .btn--black.btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--black.btn--outline, #MainContent .btn--outline .btn--black.shopify-payment-button__button--unbranded, #MainContent .btn--black .btn--outline.shopify-payment-button__button--unbranded, #MainContent .btn--black .btn--outline .shopify-payment-button__button--unbranded, #MainContent .btn--outline .btn--black .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-BUTTONS-BLACK-BORDER); --btn-bg: var(--OUTLINE-BUTTONS-BLACK-BG); --btn-text: var(--OUTLINE-BUTTONS-BLACK-TEXT); --btn-text-alpha-10: var(--OUTLINE-BUTTONS-BLACK-TEXT-ALPHA-10); } #MainContent .btn--black-solid-border, #MainContent .btn--black.btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--black.btn--solid-border, #MainContent .btn--solid-border .btn--black.shopify-payment-button__button--unbranded, #MainContent .btn--black .btn--solid-border.shopify-payment-button__button--unbranded, #MainContent .btn--black .btn--solid-border .shopify-payment-button__button--unbranded, #MainContent .btn--solid-border .btn--black .shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-SOLID-BUTTONS-BLACK-BORDER); --btn-bg: var(--OUTLINE-SOLID-BUTTONS-BLACK-BG); --btn-text: var(--OUTLINE-SOLID-BUTTONS-BLACK-TEXT); --btn-text-alpha-10: var(--OUTLINE-SOLID-BUTTONS-BLACK-TEXT-ALPHA-10); } #MainContent .btn--black.btn--soft, #MainContent .btn--black .btn--soft.shopify-payment-button__button--unbranded{ --btn-bg: var(--black-alpha-05); --btn-text: var(--black); --btn-bg-hover: var(--black-alpha-10); } #MainContent .btn--black.btn--text, #MainContent .btn--black .btn--text.shopify-payment-button__button--unbranded{ --btn-text: var(--black); } #MainContent .btn--ar::before{ content: none; } #MainContent .btn--small{ --top-bottom-padding: 10px; --left-right-padding: 18px; } #MainContent .btn--medium{ --top-bottom-padding: 12px; --left-right-padding: 20px; } #MainContent .btn--solid{ border-width: 0; } #MainContent .btn--solid.btn--large, #MainContent .btn--solid.btn--medium, #MainContent .btn--solid.btn--small, #MainContent .product__submit__item:has(.btn--solid) ~ .product__submit__item .shopify-payment-button__button--unbranded{ --btn-inner-top-bottom: calc(var(--top-bottom-padding) * var(--adjust-button) + var(--BORDER-WIDTH)); --btn-inner-left-right: calc(var(--left-right-padding) * var(--adjust-button) + var(--BORDER-WIDTH)); } #MainContent .btn--soft{ border: none; padding: calc(var(--btn-inner-top-bottom) + var(--BORDER-WIDTH)) calc(var(--btn-inner-left-right) + var(--BORDER-WIDTH)); } #MainContent .btn--text{ position: relative; display: inline-block; text-decoration: none !important; --btn-text: var(--text); font-weight: var(--FONT-WEIGHT-BUTTON-BOLD); line-height: 1.25; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; width: auto; overflow: initial; transition: none; } #MainContent .btn--text:before, #MainContent .btn--text:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .btn--text:before{ transform: scaleX(0); transform-origin: left; } #MainContent .btn--text:after{ transform-origin: right; } #MainContent .no-touch .btn--text:hover{ background: transparent; border: 0; } #MainContent .no-touch .btn--text:hover:before, #MainContent .no-touch .btn--text:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .btn--text:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .btn--text::after, #MainContent .btn--text::before{ top: auto; bottom: -1.6px; left: 0; right: 0; opacity: 1; transform-origin: left; } #MainContent .btn--text::after{ transform: scaleX(1); transform-origin: right; } #MainContent .btn--text:hover{ transition: none; } #MainContent .btn--text:hover::before{ transform-origin: left; } #MainContent .no-touch .btn--text[disabled]::after, #MainContent .no-touch .btn--text:disabled::after, #MainContent .no-touch .btn--text.disabled::after{ transform: none; } #MainContent input.btn, #MainContent input.shopify-payment-button__button--unbranded{ transition: none; } #MainContent input.btn:hover, #MainContent input.shopify-payment-button__button--unbranded:hover{ color: var(--btn-text); background: var(--btn-bg); transition: none; } #MainContent input.btn::before, #MainContent input.shopify-payment-button__button--unbranded::before, #MainContent input.btn::after, #MainContent input.shopify-payment-button__button--unbranded::after{ content: none; } #MainContent .additional-checkout-buttons{ overflow: hidden; margin-top: 8px; } #MainContent shopify-accelerated-checkout, #MainContent shopify-accelerated-checkout-cart{ --top-bottom-padding: 15px; --shopify-accelerated-checkout-button-block-size: 44px; --shopify-accelerated-checkout-button-border-radius: var(--RADIUS); } #MainContent .cart__checkout{ width: 100%; max-width: 300px; } #MainContent .shopify-payment-button__button--unbranded{ --payment-button-height: calc(16px * var(--adjust-button) * var(--button-line-height) + (2 * var(--btn-inner-top-bottom))); padding: var(--btn-inner-top-bottom) var(--btn-inner-left-right) !important; border-radius: var(--RADIUS) !important; border: var(--BORDER-WIDTH) solid var(--btn-border) !important; background: var(--btn-bg) !important; color: var(--btn-text) !important; font-family: var(--FONT-STACK-BUTTON) !important; font-style: var(--FONT-STYLE-BUTTON) !important; font-weight: var(--FONT-WEIGHT-BUTTON) !important; font-size: calc(16px * var(--adjust-button)) !important; letter-spacing: var(--LETTER-SPACING-BUTTON); line-height: var(--button-line-height) !important; transition: color 0.3s ease, border 0.3s ease, background 0s linear 0s !important; height: var(--payment-button-height) !important; min-height: 44px !important; } #MainContent .shopify-payment-button__button--unbranded:hover{ border-color: var(--btn-border) !important; background: var(--btn-bg) !important; color: var(--btn-text) !important; transition: color 0.3s ease, border 0.3s ease, background 0s linear 0.3s !important; } #MainContent .btn-quick-buy{ --adjust-height: max((var(--MEDIUM-BUTTON-HEIGHT) * 0.2), 8px); --adjust-size: max((12px * var(--adjust-button)), 12px); --btn-font-size: calc(14.4px * var(--adjust-button)); --btn-icon-size: calc(var(--adjust-size) + var(--adjust-height)); --btn-space-block: calc(6px * var(--adjust-button)); --btn-height: calc(var(--btn-icon-size) / 0.8 + 2 * var(--btn-space-block)); --btn-width: var(--btn-height); --icon-space-inline: calc(2px + var(--btn-space-block)); --icon-width: calc(var(--btn-height) - 2 * var(--icon-space-inline)); font-family: var(--FONT-STACK-BUTTON); font-weight: var(--FONT-WEIGHT-BUTTON); font-style: var(--FONT-STYLE-BUTTON); text-transform: var(--BUTTON-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-BUTTON); font-size: var(--btn-font-size); line-height: inherit; text-align: center; display: grid; position: absolute; right: 15px; bottom: 15px; padding: 0; margin: 0; border: none; } #MainContent .btn-quick-buy .btn__inner{ width: var(--btn-width); min-height: var(--btn-height); display: flex; align-items: center; justify-content: center; justify-self: end; border-radius: var(--RADIUS); padding-block: var(--btn-space-block); cursor: pointer; background: var(--white); color: var(--black); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.07); transition: width 0.3s ease; } #MainContent .btn-quick-buy .icon{ stroke-width: calc(var(--STROKE-WIDTH) - 4px); width: var(--icon-width); overflow: hidden; flex: 0 0 var(--icon-width); margin-inline: var(--icon-space-inline); transition: transform 0.3s ease, opacity 0.3s ease; } #MainContent .btn-quick-buy .btn__text{ display: block; white-space: nowrap; overflow: hidden; opacity: 0; transition: opacity 0.3s ease, padding 0.3s ease; } @media only screen and (max-width: 1023px) { #MainContent .btn-quick-buy .btn__text{ display: none; } } #MainContent .btn-quick-buy .btn__loader{ position: absolute; top: 0; right: 0; width: var(--btn-width); height: var(--btn-height); content-visibility: hidden; opacity: 0; transition: opacity 0.1s ease-in; } #MainContent .btn-quick-buy .svg-loader circle{ stroke: var(--black); } #MainContent .btn-quick-buy .svg-loader circle:first-child{ opacity: 0.1; } #MainContent .btn-quick-buy:hover .btn__inner{ width: 100%; transition: width 0.3s ease; } @media only screen and (max-width: 1023px) { #MainContent .btn-quick-buy:hover .btn__inner{ width: var(--btn-width); } } #MainContent .btn-quick-buy:hover .icon{ transform: none; } #MainContent .btn-quick-buy:hover .btn__text{ opacity: 1; padding-right: calc(12px * var(--adjust-button)); } #MainContent .btn-quick-buy.cart__toggle--has-items .cart-indicator{ visibility: hidden; } #MainContent .btn-quick-buy.is-loading{ pointer-events: none; } #MainContent .btn-quick-buy.is-loading .icon{ opacity: 0; } #MainContent .btn-quick-buy.is-loading .btn__inner{ width: var(--btn-width); } #MainContent .btn-quick-buy.is-loading .btn__text{ opacity: 0; padding: 0; } #MainContent .btn-quick-buy.is-loading .btn__loader{ content-visibility: visible; opacity: 1; transition: opacity 0.3s ease; } #MainContent .btn-quick-buy.is-loading .btn__loader circle ~ circle{ animation-play-state: running; } #MainContent .btn--quick-buy{ --adjust-height: max((var(--MEDIUM-BUTTON-HEIGHT) * 0.2), 8px); --adjust-size: max((12px * var(--adjust-button)), 12px); --btn-font-size: calc(14.4px * var(--adjust-button)); --btn-icon-size: calc(var(--adjust-size) + var(--adjust-height)); --btn-space-block: calc(6px * var(--adjust-button)); --btn-quick-buy-height: calc(var(--btn-icon-size) / 0.8 + 2 * var(--btn-space-block)); --btn-height: calc(var(--button-line-height) * var(--btn-font-size) + 2 * var(--btn-space-block)); --btn-space-inline: calc((12px * var(--adjust-button) + var(--btn-icon-size)) / 2); --btn-inner-top-bottom: var(--btn-space-block); --btn-inner-left-right: var(--btn-space-inline); min-height: max(var(--btn-quick-buy-height), var(--btn-height)); display: flex; align-items: center; justify-content: center; font-size: var(--btn-font-size); } #MainContent .btn--quick-buy > span, #MainContent .btn--quick-buy .svg-loader{ transition: opacity 0.3s ease; } #MainContent .btn--quick-buy .svg-loader{ --loader-size: 24px; top: unset; left: unset; transform: none; inset-block-start: 50%; inset-inline-start: 50%; margin-block-start: calc(-1 * var(--loader-size) / 2); margin-inline-start: calc(-1 * var(--loader-size) / 2); width: var(--loader-size); height: var(--loader-size); opacity: 0; pointer-events: none; } #MainContent .btn--quick-buy .svg-loader circle{ stroke: var(--btn-text); } #MainContent .btn--quick-buy .svg-loader circle:first-child{ opacity: 0.1; } #MainContent .btn--quick-buy.is-loading{ opacity: 1; cursor: default; pointer-events: none; } #MainContent .btn--quick-buy.is-loading > span{ opacity: 0; transition: opacity 0s; } #MainContent .btn--quick-buy.is-loading::before, #MainContent .btn--quick-buy.is-loading::after{ content: none; } #MainContent .btn--quick-buy.is-loading .svg-loader{ opacity: 1; } #MainContent .btn--quick-buy.is-loading circle ~ circle{ animation-play-state: running; } #MainContent .share-link{ display: flex; align-items: center; justify-content: center; font-size: calc(14.4px * var(--adjust-body)); } #MainContent .no-touch .share-link::after{ opacity: 0; } #MainContent .no-touch .share-link:hover::after{ opacity: 1; } #MainContent .progress-bar + .quick__form .btn-quick-buy, #MainContent .progress-bar + .btn-quick-buy{ bottom: 25px; } #MainContent .btn--scroll-top{ position: fixed; right: 0; bottom: 0; margin: calc(var(--gutter) / 2); z-index: 200; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; min-width: 0; width: 60px; height: 60px; padding: 0; } #MainContent .btn--scroll-top .icon{ transform: rotate(270deg); } #MainContent .btn--scroll-top.is-visible{ opacity: 1; visibility: visible; } @keyframes animate-svg { 0% { stroke-dashoffset: 88; } 100% { stroke-dashoffset: 0; } } #MainContent .svg-loader{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #MainContent .svg-loader circle{ stroke-width: 1; stroke: var(--PRIMARY-BUTTONS-COLOR-ALPHA-50); fill: none; } #MainContent .svg-loader circle ~ circle{ stroke: var(--PRIMARY-BUTTONS-COLOR-TEXT); stroke-dashoffset: 88; animation: animate-svg 1s linear infinite; animation-play-state: paused; } #MainContent .btn:focus, #MainContent .shopify-payment-button__button--unbranded:focus{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .btn-quick-buy:focus, #MainContent .btn-quick-buy.focus-visible{ outline: -webkit-focus-ring-color auto 5px; } /*================ Keyframes animations ================*/ @keyframes fadeInOut { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes menuFadeIn { 0% { opacity: 0; transform: scale(0.975); } 100% { opacity: 1; transform: scale(1); } } @keyframes fadeInOutError { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } } @keyframes move { 0% { left: -100%; } 100% { left: 100%; } } @keyframes blink { 0% { opacity: 0.2; } 20% { opacity: 1; } 100% { opacity: 0.2; } } @keyframes showCompactHeader { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes hideCompactHeader { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes pulse { 0% { opacity: 0.1; } 50% { opacity: 1; } 100% { opacity: 0.1; } } @keyframes pulseOut { 0% { transform: scale(0); opacity: 0; } 69% { transform: scale(0); opacity: 0; } 70% { transform: scale(1); opacity: 0.2; } 100% { transform: scale(4); opacity: 0; } } @keyframes pulseOutFast { 0% { transform: scale(0); opacity: 0; } 1% { transform: scale(1); opacity: 0.4; } 65% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } } @keyframes pulseInOutSubtle { 0% { transform: scale(1); opacity: 0; } 50% { transform: scale(1.125); opacity: 0.4; } 100% { transform: scale(1); opacity: 0; } } @keyframes progressBar { 0% { width: 0; } 100% { width: 100%; } } @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } @keyframes rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes fadeInUp { 0% { transform: translateY(15px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateZ(0); opacity: 1; } } @keyframes pressFadeInUp { 0% { transform: translateY(70%); opacity: 0; } 100% { transform: translateZ(0); opacity: 1; } } @keyframes pressFadeOutDown { 0% { transform: translateZ(0); opacity: 1; } 100% { transform: translateY(40%); opacity: 0; } } @keyframes cartItemRemoved { 0% { transform: translateZ(0); max-height: 300px; } 50% { padding-top: var(--inner); } 90% { transform: translate3d(100%, 0, 0); max-height: 0; } 100% { opacity: 0; max-height: 0; padding: 0; } } @keyframes slideInFromLeft { 0% { transform: translateX(-100%); } 100% { transform: none; } } @keyframes clipPathFromLeft { 0% { -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } } @keyframes clipPathFromRight { 0% { -webkit-clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%); clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes sliderRightToLeft { 0% { transform: translateX(-40%); } 100% { transform: translateX(-50%); } } @keyframes sliderRightToLeftOneSlide { 0% { transform: translateX(10%); } 100% { transform: translateX(0); } } @keyframes imageInSlide { 0% { transform: translateX(20%); } 100% { transform: translateX(0); } } @keyframes zoomOut { from { transform: scale(var(--scale-factor, 1.2)); } to { transform: scale(1); } } @keyframes zoomIn { from { transform: scale(1); } to { transform: scale(var(--scale-factor, 1.2)); } } @keyframes expandAccordion { from { flex: 2; } to { flex: 5; } } @keyframes collapseAccordion { from { flex: var(--factor, 2); } to { flex: 1; } } /*================ Helper Classes ================*/ #MainContent .text-light{ --text: var(--white); --text-alpha-50: rgb(255 255 255 / 50%); --heading: var(--white); --overlay: var(--black); color: var(--text); } #MainContent .text-dark{ --text: var(--black); --text-alpha-50: rgb(0 0 0 / 50%); --heading: var(--black); --overlay: var(--white); color: var(--text); } #MainContent .text-dark .backdrop--radial:before{ background: radial-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 65%); } #MainContent .text-left{ text-align: left; } #MainContent .text-center{ text-align: center; } #MainContent .text-right{ text-align: right; } #MainContent .backdrop--radial{ position: relative; } #MainContent .backdrop--radial:before{ content: ""; position: absolute; top: -100px; bottom: -100px; left: -200px; right: -200px; z-index: -1; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 65%); opacity: 0; } #MainContent .img-in .backdrop--radial:before{ opacity: 1; } #MainContent .letter-spacing-nav, #MainContent .caps-letter-spacing-nav.caps, #MainContent .caps-letter-spacing-nav .caps{ letter-spacing: var(--LETTER-SPACING-NAV); } #MainContent .caps{ text-transform: uppercase; } #MainContent .placeholder-svg, #MainContent .placeholder-svg-filled{ position: relative; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; fill: var(--bg-lighten-darken-contrast); content-visibility: auto; } #MainContent .placeholder-svg-filled{ background-color: var(--bg-lighten-darken); } #MainContent .placeholder-svg--overlayed{ position: relative; content-visibility: auto; } #MainContent .placeholder-svg--overlayed:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: 0.1; } #MainContent .placeholder-bg{ background-size: contain !important; background-position: center center !important; } #MainContent .placeholder-noblocks{ position: relative; width: 100%; padding: calc(var(--gutter) / 2); text-align: center; } #MainContent .no-image-placeholder{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; content-visibility: auto; } #MainContent .cv-v{ content-visibility: visible; } #MainContent .cv-h{ content-visibility: hidden; } #MainContent .cv-a{ content-visibility: auto; } #MainContent .label-hidden{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .no-placeholder .label-hidden{ position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } #MainContent .visually-shown{ position: inherit !important; overflow: auto; clip: auto; width: auto; height: auto; margin: 0; } #MainContent .highlight{ color: var(--accent); } #MainContent .hidden{ display: none; } @media only screen and (max-width: 767px) { #MainContent .hidden-sm{ display: none !important; } } @media only screen and (min-width: 768px) { #MainContent .mobile-only{ display: none !important; } } @media only screen and (max-width: 1023px) { #MainContent .hidden-md{ display: none !important; } } @media only screen and (min-width: 1024px) { #MainContent .hidden-lg{ display: none !important; } } @media only screen and (max-width: 767px) { #MainContent .desktop-only{ display: none !important; } } #MainContent .fallback-text, #MainContent .visually-hidden{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .clearfix:after{ content: ""; display: table; clear: both; } #MainContent .is-transitioning{ display: block !important; visibility: visible !important; } #MainContent .table-wrapper{ overflow: auto; } #MainContent .bg-pos-center-top{ background-position: center top !important; } #MainContent .bg-pos-center-center{ background-position: center center !important; } #MainContent .bg-pos-center-bottom{ background-position: center bottom !important; } #MainContent .bg-pos-left-center{ background-position: left center !important; } #MainContent .bg-pos-right-center{ background-position: right center !important; } #MainContent .img-pos-center-top{ object-position: top; } #MainContent .img-pos-center-center{ object-position: center; } #MainContent .img-pos-center-bottom{ object-position: bottom; } #MainContent .img-pos-left-center{ object-position: left; } #MainContent .img-pos-right-center{ object-position: right; } #MainContent .align--top-left{ align-items: flex-start; justify-content: flex-start; text-align: left; } #MainContent .align--top-center{ align-items: flex-start; justify-content: center; text-align: center; } #MainContent .align--top-right{ align-items: flex-start; justify-content: flex-end; text-align: left; } @media only screen and (min-width: 768px) { #MainContent .align--top-right{ text-align: right; } } #MainContent .align--middle-left{ align-items: center; justify-content: flex-start; text-align: left; } #MainContent .align--middle-center, #MainContent .align--middle-split{ align-items: center; justify-content: center; text-align: center; } #MainContent .align--middle-right{ align-items: center; justify-content: flex-end; text-align: left; } @media only screen and (min-width: 768px) { #MainContent .align--middle-right{ text-align: right; } } #MainContent .align--bottom-left{ align-items: flex-end; justify-content: flex-start; text-align: left; } #MainContent .align--bottom-center{ align-items: flex-end; justify-content: center; text-align: center; } #MainContent .align--bottom-right{ align-items: flex-end; justify-content: flex-end; text-align: left; } @media only screen and (min-width: 768px) { #MainContent .align--bottom-right{ text-align: right; } } #MainContent .align--top-right .wrapper, #MainContent .align--top-right .wrapper--narrow, #MainContent .align--middle-right .wrapper, #MainContent .align--middle-right .wrapper--narrow, #MainContent .align--bottom-right .wrapper, #MainContent .align--bottom-right .wrapper--narrow{ margin-right: 0; } #MainContent .align--top-left .wrapper, #MainContent .align--top-left .wrapper--narrow, #MainContent .align--middle-left .wrapper, #MainContent .align--middle-left .wrapper--narrow, #MainContent .align--bottom-left .wrapper, #MainContent .align--bottom-left .wrapper--narrow{ margin-left: 0; } #MainContent [data-scroll-locked] .has-scrolled .site-header{ padding-right: var(--scrollbar-width); } #MainContent [data-scroll-locked] .collection__inner:after{ width: 100vw; } #MainContent [data-scroll-locked] .btn--scroll-top{ right: var(--scrollbar-width); } @media (pointer: fine) { #MainContent [data-scroll-locked] .megamenu-opened .shopify-section-header, #MainContent [data-scroll-locked] .search-opened .shopify-section-header, #MainContent [data-scroll-locked] .megamenu-opened .site-header, #MainContent [data-scroll-locked] .search-opened .site-header, #MainContent [data-scroll-locked] .search-opened .search-popdown__body--fixed, #MainContent [data-scroll-locked] .search-opened predictive-search, #MainContent [data-scroll-locked] .search-opened search-form, #MainContent [data-scroll-locked] .megamenu-opened .announcement-bar-static, #MainContent [data-scroll-locked] .search-opened .announcement-bar-static, #MainContent [data-scroll-locked] .megamenu-opened .announcement, #MainContent [data-scroll-locked] .search-opened .announcement{ width: 100vw; padding-right: var(--scrollbar-width); } } @media (pointer: fine) { #MainContent [data-scroll-locked] .megamenu-opened .site-header--has-border .wrapper:before{ right: calc(-1 * var(--scrollbar-width)); } } @media (pointer: fine) { #MainContent [data-scroll-locked] .search-opened .search-form__inner{ width: 100vw; padding-right: calc(var(--scrollbar-width) + var(--gutter)); } } @media only screen and (pointer: fine) and (max-width: 767px) { #MainContent [data-scroll-locked] .search-opened .search-form__inner{ padding-right: calc(var(--scrollbar-width) + var(--gutter-mobile)); } } @media only screen and (pointer: fine) and (max-width: 767px) { #MainContent [data-scroll-locked] .search-opened .search-popdown__results{ padding-right: var(--scrollbar-width); } } #MainContent{ --site-width: var(--SITE-WIDTH); --site-width-narrow: var(--SITE-WIDTH-NARROW); --wrapper-width: calc(100vw - var(--scrollbar-width) - var(--gutter-mobile) * 2); } @media only screen and (min-width: 1440px) { #MainContent{ --site-width: calc(var(--SITE-WIDTH) - var(--scrollbar-width)); --wrapper-width: calc(var(--site-width) - var(--gutter) * 2); } } @media only screen and (min-width: 1024px) and (max-width: 1439px) { #MainContent{ --wrapper-width: calc(100vw - var(--scrollbar-width) - var(--gutter) * 2); } } #MainContent .wrapper--full-padded{ --wrapper-width: calc(100vw - var(--scrollbar-width) - var(--gutter-mobile) * 2); } @media only screen and (min-width: 1024px) { #MainContent .wrapper--full-padded{ --wrapper-width: calc(100vw - var(--scrollbar-width) - var(--gutter) * 2); } } #MainContent .wrapper--full{ --wrapper-width: calc(100vw - var(--scrollbar-width)); } @media only screen and (min-width: 1024px) { #MainContent .wrapper--full{ --wrapper-width: calc(100vw - var(--scrollbar-width)); } } @media only screen and (min-width: 1024px) { #MainContent .wrapper--narrow{ --wrapper-width: calc(var(--site-width-narrow) - var(--gutter) * 2); } } @media only screen and (min-width: 1024px) { #MainContent .grid{ grid-template-columns: var(--grid); } } @media only screen and (min-width: 768px) { #MainContent .grid{ justify-content: center; } #MainContent .grid .grid__item{ width: 100%; } } #MainContent .grid, #MainContent .grid--center{ display: grid; gap: var(--grid-gutter); } @media only screen and (max-width: 1023px) { #MainContent .grid, #MainContent .grid--center{ grid-template-columns: var(--grid-tablet); } } @media only screen and (max-width: 767px) { #MainContent .grid, #MainContent .grid--center{ gap: var(--grid-gutter-mobile) var(--grid-gutter); } } @media only screen and (max-width: 479px) { #MainContent .grid, #MainContent .grid--center{ grid-template-columns: var(--grid-mobile); } #MainContent .grid .mobile--one-whole, #MainContent .grid--center .mobile--one-whole{ grid-column: span 2; } } #MainContent .grid--center{ display: flex; flex-flow: row wrap; justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .grid--center .grid__item{ width: 100%; } } @media only screen and (max-width: 767px) { #MainContent .grid__container{ overflow: hidden; margin: 0 calc(var(--gutter-mobile) * -1); } } #MainContent .wrapper--full-padded .carousel__container{ margin: 0 calc(var(--gutter-mobile) * -1); } @media only screen and (min-width: 1024px) { #MainContent .wrapper--full-padded .carousel__container{ margin: 0 calc(var(--gutter) * -1); } #MainContent .wrapper--full-padded .carousel{ padding: 0 var(--gutter); } #MainContent .wrapper--full-padded .carousel .flickity-prev-next-button.next{ right: calc(var(--gutter) * 1.5); } #MainContent .wrapper--full-padded .carousel .flickity-prev-next-button.previous{ left: calc(var(--gutter) * 1.5); } } @media only screen and (max-width: 1023px) { #MainContent .carousel__container{ margin: 0 calc(var(--gutter-mobile) * -1); } } #MainContent .carousel{ --flickity-btn-position: calc((var(--gutter) - var(--flickity-btn-size)) / 2); } #MainContent .carousel .flickity-viewport{ overflow: visible; } #MainContent .carousel .flickity-prev-next-button.next{ right: var(--flickity-btn-position); } #MainContent .carousel .flickity-prev-next-button.previous{ left: var(--flickity-btn-position); } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .carousel{ padding: 0 var(--gutter-mobile); } } @media only screen and (min-width: 768px) { #MainContent .carousel:not(.flickity-enabled), #MainContent .carousel--inactive{ display: flex; text-align: center; justify-content: center; } #MainContent .carousel:not(.flickity-enabled) .carousel__item, #MainContent .carousel--inactive .carousel__item{ margin-right: var(--grid-gutter); } #MainContent .carousel:not(.flickity-enabled) .carousel__item:last-child:not(:only-child), #MainContent .carousel--inactive .carousel__item:last-child:not(:only-child){ margin-right: 0; } } #MainContent .carousel:not(.flickity-enabled){ justify-content: flex-start; } @media only screen and (max-width: 767px) { #MainContent .carousel--mobile{ --item-width-mobile: calc(var(--wrapper-width) - var(--grid-gutter)); display: flex; flex-flow: row nowrap; justify-content: flex-start; gap: normal; margin: 0; overflow-x: scroll; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding: var(--gutter-mobile); padding-left: var(--gutter-mobile); scrollbar-width: none; -ms-overflow-style: none; } #MainContent .carousel--mobile::-webkit-scrollbar{ display: none; } #MainContent .carousel--mobile .grid__item, #MainContent .carousel--mobile .carousel__item{ display: block; float: none; flex: 0 0 auto; scroll-snap-align: start; margin-right: var(--grid-gutter); padding-bottom: 0; width: var(--item-width-mobile); } #MainContent .carousel--mobile .grid__item:last-child, #MainContent .carousel--mobile .carousel__item:last-child{ margin-right: 0; } #MainContent .carousel--mobile:after{ content: ""; display: block; position: relative; padding-right: var(--gutter-mobile); } } #MainContent .carousel__item{ width: calc(var(--wrapper-width) - var(--grid-gutter)); display: block; white-space: normal; flex: 0 0 auto; } @media only screen and (min-width: 768px) { #MainContent .carousel__item{ margin-right: var(--grid-gutter); } } @media only screen and (max-width: 767px) { #MainContent .grid--mobile, #MainContent .stacked--mobile{ gap: var(--grid-gutter); display: grid; grid-template-columns: var(--grid-tablet); padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); } } @media only screen and (max-width: 479px) { #MainContent .grid--mobile, #MainContent .stacked--mobile{ grid-template-columns: var(--grid-mobile); } } @media only screen and (max-width: 767px) { #MainContent .stacked--mobile{ grid-template-columns: minmax(0, 1fr); } } @media only screen and (min-width: 1440px) { #MainContent .one-whole{ width: var(--wrapper-width); } #MainContent .one-half{ width: calc((var(--wrapper-width) - var(--grid-gutter)) / 2); } #MainContent .one-third{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 2) / 3); } #MainContent .one-quarter{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 3) / 4); } #MainContent .one-fifth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 4) / 5); } #MainContent .one-sixth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 5) / 6); } #MainContent .one-seventh{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 6) / 7); } #MainContent .one-eighth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 7) / 8); } } @media only screen and (min-width: 1024px) and (max-width: 1439px) { #MainContent .one-whole{ width: calc(var(--wrapper-width) - var(--grid-gutter)); } #MainContent .one-half{ width: calc((var(--wrapper-width) - var(--grid-gutter)) / 2); } #MainContent .one-third{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 2) / 3); } #MainContent .one-quarter{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 3) / 4); } #MainContent .one-fifth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 4) / 5); } #MainContent .one-sixth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 5) / 6); } #MainContent .one-seventh{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 6) / 7); } #MainContent .one-eighth{ width: calc((var(--wrapper-width) - var(--grid-gutter) * 7) / 8); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .one-whole{ width: calc(var(--wrapper-width) * 0.9 - var(--grid-gutter)); } #MainContent .one-half, #MainContent .one-third, #MainContent .one-quarter{ width: calc((var(--wrapper-width) * 0.9 - var(--grid-gutter)) / 2); } #MainContent .one-fifth, #MainContent .one-sixth, #MainContent .one-seventh, #MainContent .one-eighth{ width: calc((var(--wrapper-width) * 0.9 - var(--grid-gutter)) / 4); } } @media only screen and (max-width: 767px) { #MainContent .one-whole{ width: calc(var(--wrapper-width) * 0.9 - var(--grid-gutter)); } #MainContent .one-half, #MainContent .one-third, #MainContent .one-quarter, #MainContent .one-fifth, #MainContent .one-sixth, #MainContent .one-seventh, #MainContent .one-eighth{ width: calc((var(--wrapper-width) * 0.9 - var(--grid-gutter)) / 2); } #MainContent .grid--mobile .one-half, #MainContent .grid--mobile .one-third, #MainContent .grid--mobile .one-quarter, #MainContent .grid--mobile .one-fifth, #MainContent .grid--mobile .one-sixth, #MainContent .grid--mobile .one-seventh, #MainContent .grid--mobile .one-eighth{ width: 100%; } #MainContent .grid__item:only-child, #MainContent .carousel__item:only-child{ margin: 0 auto; } } @media only screen and (max-width: 479px) { #MainContent .mobile--one-whole{ width: calc(var(--wrapper-width) * 0.9 - var(--grid-gutter)); } #MainContent .mobile--one-half{ width: calc((var(--wrapper-width) * 0.9 - var(--grid-gutter)) / 2); } #MainContent .grid--mobile .grid__item:only-of-type{ width: 100%; } #MainContent .carousel--mobile .mobile--one-half:first-of-type:nth-last-of-type(2), #MainContent .carousel--mobile .mobile--one-half:first-of-type:nth-last-of-type(2) ~ .mobile--one-half:last-of-type, #MainContent .carousel--mobile .mobile--one-half:only-of-type{ --item-width-mobile: calc(50% - var(--grid-gutter)); } #MainContent .mosaic--no-spacing .wrapper--no-full .carousel--mobile .mobile--one-half:first-of-type:nth-last-of-type(2), #MainContent .mosaic--no-spacing .wrapper--no-full .carousel--mobile .mobile--one-half:first-of-type:nth-last-of-type(2) ~ .mobile--one-half:last-of-type, #MainContent .mosaic--no-spacing .wrapper--no-full .carousel--mobile .mobile--one-half:only-of-type{ --item-width-mobile: calc(50% - var(--grid-gutter) / 2); } #MainContent .carousel--mobile .mobile--one-whole:only-of-type{ --item-width-mobile: calc(100% - var(--grid-gutter)); } #MainContent .carousel--mobile .mobile--one-half:only-of-type{ margin-left: 0; } } #MainContent .btn-primary-border .btn--primary.btn--solid, #MainContent .btn-primary-border input.btn--solid.btn, #MainContent .btn-primary-border input.btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn-primary-border .btn--primary .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn--primary .btn-primary-border .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn-primary-border input.btn .btn--solid.shopify-payment-button__button--unbranded, #MainContent input.btn .btn-primary-border .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn-primary-border input.shopify-payment-button__button--unbranded .btn--solid.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .btn-primary-border .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn-secondary-border .btn--secondary.btn--solid, #MainContent .btn-secondary-border .btn--secondary .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn-secondary-border .btn--solid.shopify-payment-button__button--unbranded{ --btn-inner-top-bottom: calc(var(--top-bottom-padding) * var(--adjust-button)); --btn-inner-left-right: calc(var(--left-right-padding) * var(--adjust-button)); --btn-border: var(--OUTLINE-SOLID-BUTTONS-PRIMARY-BORDER); border-width: var(--BORDER-WIDTH); } #MainContent .btn-secondary-border .btn--secondary.btn--solid, #MainContent .btn-secondary-border .btn--secondary .btn--solid.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .btn-secondary-border .btn--solid.shopify-payment-button__button--unbranded{ --btn-border: var(--OUTLINE-SOLID-BUTTONS-SECONDARY-BORDER); } /*================ No JS ================*/ #MainContent .no-js .js-only, #MainContent .no-js .pagination--infinite{ display: none !important; } #MainContent .no-js .carousel{ display: flex; flex-flow: row wrap; text-align: center; } @media only screen and (max-width: 767px) { #MainContent .no-js .carousel{ flex-flow: row nowrap; margin: 0; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .no-js .carousel::-webkit-scrollbar{ display: none; } } #MainContent .no-js .carousel .carousel__item{ margin-right: var(--grid-gutter); } #MainContent .no-js .carousel .carousel__item.one-half:nth-child(2n+2), #MainContent .no-js .carousel .carousel__item.one-third:nth-child(3n+3), #MainContent .no-js .carousel .carousel__item.one-quarter:nth-child(4n+4), #MainContent .no-js .carousel .carousel__item.one-fifth:nth-child(5n+5), #MainContent .no-js .carousel .carousel__item.one-sixth:nth-child(6n+6), #MainContent .no-js .carousel .carousel__item.one-seventh:nth-child(7n+7), #MainContent .no-js .carousel .carousel__item.one-eighth:nth-child(8n+8), #MainContent .no-js .carousel .carousel__item:last-child{ margin-right: 0; } @media only screen and (max-width: 1023px) { #MainContent .no-js .carousel .carousel__item:nth-child(n){ margin-right: var(--grid-gutter) !important; } #MainContent .no-js .carousel .carousel__item:nth-child(even){ margin-right: 0 !important; } } @media only screen and (max-width: 767px) { #MainContent .no-js .carousel .carousel__item:nth-child(n){ margin-right: 0 !important; margin-bottom: var(--grid-gutter); } } #MainContent .no-js.ie11 .cart__checkout, #MainContent .no-js.ie11 .site-header--transparent:not(.is-megamenu-open) .logo__image-link--home{ display: block !important; } #MainContent .no-js.ie11 .product__selectors, #MainContent .no-js.ie11 .logo .logo__image-link.logo__image-link--home{ display: none !important; } #MainContent .no-js.ie11 .selector-wrapper, #MainContent .no-js.ie11 .quantity__btn{ display: none; } #MainContent .no-js.ie11 ul li:hover .dropdown{ opacity: 1; visibility: visible; pointer-events: auto; } #MainContent .no-js .one-whole, #MainContent .no-js .one-half, #MainContent .no-js .one-third, #MainContent .no-js .one-quarter, #MainContent .no-js .one-fifth, #MainContent .no-js .one-sixth, #MainContent .no-js .one-seventh, #MainContent .no-js .one-eighth{ --wrapper-width: 100%; } #MainContent .overflow-hidden{ overflow: hidden !important; } #MainContent .icon{ fill: none; stroke: currentcolor; stroke-width: var(--STROKE-WIDTH); display: inline-block; width: 100%; height: 100%; } #MainContent .icon-stroke .icon{ stroke-width: 3px; } @supports (-webkit-hyphens: none) { #MainContent .icon-stroke .icon{ transform: translateZ(0); } } #MainContent .icon-select, #MainContent .icon-toggle-plus, #MainContent .icon-toggle-minus{ width: 15px; height: 15px; } #MainContent .icon-close{ display: block; width: 100%; height: 100%; transition: transform 0.3s ease; } #MainContent .icon-shopping-bag{ vertical-align: middle; pointer-events: none; } #MainContent .icon-filter{ fill: currentcolor; width: 20px; height: 13px; stroke: none; } #MainContent .icon-hamburger{ display: block; width: 28px; height: 28px; pointer-events: none; } #MainContent .icon-css-arrow{ pointer-events: none; } #MainContent .icon-play{ width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 var(--BORDER-WIDTH) currentcolor; fill: currentcolor; stroke: none; -webkit-transform: translateY(0); } #MainContent .icon-share{ width: 20px; height: calc(19px * var(--adjust-body)); margin-right: 10px; } #MainContent .icon-check{ stroke: none; } #MainContent .icon-media-model, #MainContent .icon-media-video{ fill: var(--COLOR-BG); stroke: none; } #MainContent .icon-media-model-outline, #MainContent .icon-media-video-outline{ stroke: var(--text-alpha-5); } #MainContent .icon-media-model-element, #MainContent .icon-media-video-element{ fill: var(--text); } #MainContent .icon-check{ background: var(--icon-check-swatch) no-repeat center center/contain; } #MainContent .icon-rss{ font-size: calc(22px * var(--adjust-heading)); margin: -4px 0 -4px 9px; width: 28px; height: 28px; } /*================ Images ================*/ #MainContent .lazy-image{ position: relative; margin: 0; overflow: hidden; } #MainContent .lazy-image::after{ position: absolute; display: block; top: -10%; left: -10%; right: -10%; bottom: -10%; transform: none; background: var(--bg-lighten-darken-shimmer-bg); animation: 0.4s ease-out 1 forwards fadeOut, 1s linear 1 forwards shimmerBgOut; pointer-events: none; } #MainContent .lazy-image.is-loading{ background: var(--bg-lighten-darken-shimmer-bg); z-index: 1; } #MainContent .lazy-image.is-loading::after{ content: ""; z-index: -1; animation: 1.6s linear infinite forwards shimmer; background: linear-gradient(98deg, var(--bg-lighten-darken-shimmer-bg) 16%, var(--bg-lighten-darken-shimmer-effect) 32%, var(--bg-lighten-darken-shimmer-bg) 48%); transform: translateX(-100%); } @media only screen and (min-width: 1024px) { #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) img[loading]{ opacity: 0.000001; } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) .lazy-image{ background: var(--bg-lighten-darken-shimmer-bg); z-index: 1; } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) .lazy-image::after{ content: ""; z-index: -1; animation: 1.6s linear infinite forwards shimmer; background: linear-gradient(98deg, var(--bg-lighten-darken-shimmer-bg) 16%, var(--bg-lighten-darken-shimmer-effect) 32%, var(--bg-lighten-darken-shimmer-bg) 48%); transform: translateX(-100%); } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item [data-aos]{ opacity: 0.000001; transform: translateY(var(--move-offset)); } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item [data-aos=hero]{ animation-name: none; } #MainContent .no-js .aos-initialized .skeleton-loading:has(img[loading].is-loading) img[loading]{ opacity: 1; } #MainContent .no-js .aos-initialized .skeleton-loading:has(img[loading].is-loading) .lazy-image{ background-color: var(--bg); } #MainContent .no-js .aos-initialized .skeleton-loading:has(img[loading].is-loading) .lazy-image::after{ background: var(--bg-lighten-darken-shimmer-bg); animation: 0.4s ease-out 1 forwards fadeOut, 1s linear 1 forwards shimmerBgOut; } #MainContent .no-js .aos-initialized .skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item [data-aos]{ opacity: 1; transform: none; } #MainContent .no-js .aos-initialized .skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item [data-aos=hero]{ animation-name: heroFade; } #MainContent .grid__item.one-half:nth-child(2n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-half:nth-child(2n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--2 .shimmer-sequential__item:nth-of-type(2n + 2) .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--2.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(2n + 2) .lazy-image:after{ animation-delay: 0.7s; } #MainContent .grid__item.one-third:nth-child(3n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .carousel__item.one-half:nth-child(3n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-third:nth-child(3n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-half:nth-child(3n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--3 .shimmer-sequential__item:nth-of-type(3n + 2) .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--3.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(3n + 2) .lazy-image:after{ animation-delay: 0.7s; } #MainContent .grid__item.one-quarter:nth-child(4n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .carousel__item.one-third:nth-child(4n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-quarter:nth-child(4n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-third:nth-child(4n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--4 .shimmer-sequential__item:nth-of-type(4n + 2) .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--4.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 2) .lazy-image:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--mixed .shimmer-sequential__item:nth-of-type(4n + 2) .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .shimmer-sequential--mixed.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 2) .lazy-image:after{ animation-delay: 0.7s; } #MainContent .carousel__item.one-quarter:nth-child(5n+2) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 0.7s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-quarter:nth-child(5n+2) .product-grid-item__image .lazy-image:after{ animation-delay: 0.7s; } #MainContent .grid__item.one-third:nth-child(3n+3) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .carousel__item.one-half:nth-child(3n+3) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-third:nth-child(3n+3) .product-grid-item__image .lazy-image:after{ animation-delay: 1.4s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-half:nth-child(3n+3) .product-grid-item__image .lazy-image:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--3 .shimmer-sequential__item:nth-of-type(3n + 3) .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--3.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(3n + 3) .lazy-image:after{ animation-delay: 1.4s; } #MainContent .grid__item.one-quarter:nth-child(4n+3) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .carousel__item.one-third:nth-child(4n+3) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-quarter:nth-child(4n+3) .product-grid-item__image .lazy-image:after{ animation-delay: 1.4s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-third:nth-child(4n+3) .product-grid-item__image .lazy-image:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--4 .shimmer-sequential__item:nth-of-type(4n + 3) .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--4.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 3) .lazy-image:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--mixed .shimmer-sequential__item:nth-of-type(4n + 3) .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .shimmer-sequential--mixed.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 3) .lazy-image:after{ animation-delay: 1.4s; } #MainContent .carousel__item.one-quarter:nth-child(5n+3) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 1.4s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-quarter:nth-child(5n+3) .product-grid-item__image .lazy-image:after{ animation-delay: 1.4s; } #MainContent .grid__item.one-quarter:nth-child(4n+4) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 2.1s; } #MainContent .carousel__item.one-third:nth-child(4n+4) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 2.1s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .grid__item.one-quarter:nth-child(4n+4) .product-grid-item__image .lazy-image:after{ animation-delay: 2.1s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-third:nth-child(4n+4) .product-grid-item__image .lazy-image:after{ animation-delay: 2.1s; } #MainContent .shimmer-sequential--4 .shimmer-sequential__item:nth-of-type(4n + 4) .lazy-image.is-loading:after{ animation-delay: 2.1s; } #MainContent .shimmer-sequential--4.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 4) .lazy-image:after{ animation-delay: 2.1s; } #MainContent .shimmer-sequential--mixed .shimmer-sequential__item:nth-of-type(4n + 4) .lazy-image.is-loading:after{ animation-delay: 2.1s; } #MainContent .shimmer-sequential--mixed.skeleton-loading:has(img[loading].is-loading) .shimmer-sequential__item:nth-of-type(4n + 4) .lazy-image:after{ animation-delay: 2.1s; } #MainContent .carousel__item.one-quarter:nth-child(5n+4) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 2.1s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-quarter:nth-child(5n+4) .product-grid-item__image .lazy-image:after{ animation-delay: 2.1s; } #MainContent .carousel__item.one-quarter:nth-child(5n+5) .product-grid-item__image .lazy-image.is-loading:after{ animation-delay: 2.8s; } #MainContent .skeleton-loading:has(img[loading].is-loading) .carousel__item.one-quarter:nth-child(5n+5) .product-grid-item__image .lazy-image:after{ animation-delay: 2.8s; } } #MainContent .lazy-image--simple.background-size-cover, #MainContent .lazy-image:has(.lazy-image__simple).background-size-cover{ background: var(--bg); } #MainContent .lazy-image--simple::after, #MainContent .lazy-image:has(.lazy-image__simple)::after{ animation: 0.6s ease 1 forwards fadeOut; } #MainContent .lazy-image--simple.is-loading::after, #MainContent .lazy-image:has(.lazy-image__simple).is-loading::after{ animation: 1.6s linear infinite forwards shimmer; } #MainContent .lazy-image--cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .original-height-mobile .lazy-image--cover{ position: relative; } #MainContent .lazy-image img{ transition: opacity 0.5s ease-in; } #MainContent .lazy-image img.is-loading{ opacity: 0.000001; } #MainContent .background-size-cover{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; display: block; background: var(--bg); } #MainContent .overlapping-images .background-size-cover, #MainContent .image-with-text .background-size-cover, #MainContent .sticky-images-and-text .background-size-cover, #MainContent .product-upsell__image .background-size-cover{ background: none; } #MainContent .background-size-cover.is-loading{ background: var(--bg-lighten-darken-shimmer-bg); } #MainContent .background-size-cover img{ display: block; object-fit: cover; width: 100%; height: 100%; min-height: 100%; } #MainContent .img-object-cover{ display: block; object-fit: cover; width: 100%; height: 100%; min-height: 100%; } #MainContent .img-object-contain{ display: block; object-fit: contain; width: 100%; height: 100%; min-height: 100%; } #MainContent .image-fill{ position: relative; overflow: hidden; } #MainContent .aspect-ratio{ --aspect-ratio-default: 1 / 1; --fallback-ratio-default: 100%; --image-ratio-desktop: calc(1 / var(--aspect-ratio-desktop, var(--aspect-ratio-default))); --image-ratio-fallback-desktop: calc((100 * var(--aspect-ratio-desktop, var(--fallback-ratio-default))) * 1%); --image-ratio-mobile: calc(1 / var(--aspect-ratio-mobile, var(--aspect-ratio-default))); --image-ratio-fallback-mobile: calc((100 * var(--aspect-ratio-mobile, var(--fallback-ratio-default))) * 1%); aspect-ratio: var(--image-ratio-desktop); } @supports not (aspect-ratio: 16/9) { #MainContent .aspect-ratio{ padding-top: var(--image-ratio-fallback-desktop); } } @media only screen and (max-width: 767px) { #MainContent .aspect-ratio{ aspect-ratio: var(--image-ratio-mobile); } @supports not (aspect-ratio: 16/9) { #MainContent .aspect-ratio{ padding-top: var(--image-ratio-fallback-mobile); } } } #MainContent .image-fill .placeholder-svg--overlayed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .placeholder-svg-rect, #MainContent .placeholder-svg-sqr{ position: relative; height: auto; min-width: 300px; padding-top: 100%; } #MainContent .placeholder-svg-rect svg, #MainContent .placeholder-svg-sqr svg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .placeholder-svg-rect{ padding-top: 38.4%; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes shimmerBgOut { 0% { background: var(--bg-lighten-darken-shimmer-bg); } 100% { background: var(--bg-lighten-darken-shimmer-enhancement); } } #MainContent .no-touch .hover-scale img, #MainContent .no-touch .hover-scale .placeholder-svg--overlayed, #MainContent .no-touch .hover-scale-svg .placeholder-svg-filled{ transform: scale(1); transition: transform 0.8s cubic-bezier(0.19, 0.61, 0.15, 0.82); } #MainContent .no-touch .hover-scale:hover img, #MainContent .no-touch .hover-scale:hover .placeholder-svg--overlayed, #MainContent .no-touch .hover-scale-svg:hover .placeholder-svg-filled{ transform: scale(1.1); } #MainContent .no-js .lazy-image.is-loading::after{ display: none !important; } #MainContent .no-js img[loading].is-loading{ opacity: 1; z-index: auto; vertical-align: top; } #MainContent .no-js figure.lazy-image.is-loading{ z-index: 0; background-color: transparent; } /*================ Instant Page builder cart hiding css ================*/ #MainContent #cart-drawer, #MainContent .drawer__overlay{ display: none !important; } #MainContent .iopETl9nr4mHbNvqf{ z-index: 99999 !important; } /*================ Forms ================*/ #MainContent .hidden-label{ position: absolute; height: 0; width: 0; margin-bottom: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } #MainContent .form-vertical-wrapper{ max-width: 480px; margin: 0 auto; text-align: center; } #MainContent .form-vertical-wrapper p a{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .form-vertical-wrapper p a:before, #MainContent .form-vertical-wrapper p a:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .form-vertical-wrapper p a:before{ transform: scaleX(0); transform-origin: left; } #MainContent .form-vertical-wrapper p a:after{ transform-origin: right; } #MainContent .no-touch .form-vertical-wrapper p a:hover{ background: transparent; border: 0; } #MainContent .no-touch .form-vertical-wrapper p a:hover:before, #MainContent .no-touch .form-vertical-wrapper p a:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .form-vertical-wrapper p a:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .form-vertical-wrapper button{ width: 100%; } #MainContent .form-vertical{ margin-bottom: calc(var(--gutter) / 2); } #MainContent .form-vertical input, #MainContent .form-vertical select, #MainContent .form-vertical button, #MainContent .form-vertical textarea{ display: block; margin-bottom: 10px; } #MainContent .form-vertical input[type=radio], #MainContent .form-vertical input[type=checkbox]{ display: inline-block; } #MainContent .form__heading{ text-align: center; margin-bottom: 20px; } #MainContent .form__item{ padding: 0; border: 0; margin: 0 0 20px; } #MainContent .form__item .selector-wrapper{ display: block; position: relative; margin: 0; padding: 0; width: 100%; } #MainContent .form__item .selector-wrapper .icon-select{ position: absolute; top: 0; right: 0; width: 54px; padding: 0 20px; height: 100%; pointer-events: none; transform: rotate(90deg); } #MainContent .form__item select{ margin: 0; width: 100%; } #MainContent .form__item--radio, #MainContent .form__item--checkbox{ margin: 20px 0; } #MainContent .form__item--radio label, #MainContent .form__item--checkbox label{ clear: both; display: block; } #MainContent .form__item--radio span, #MainContent .form__item--checkbox span{ display: block; } #MainContent .form__item--checkbox + .form__item--checkbox{ margin-top: -20px; } #MainContent .form__item--submit{ margin: 30px 0 0; } #MainContent .form__label{ display: block; margin: 0 0 10px; font-size: calc(21.6px * var(--adjust-label)); } #MainContent .input--full{ width: 100%; } #MainContent .input--checkbox, #MainContent .input--radio{ margin: 5px 8px 10px 0; float: left; } #MainContent input.error, #MainContent select.error, #MainContent textarea.error{ border-color: var(--error); background-color: var(--input-bg); color: var(--error); } #MainContent label.error{ color: var(--error); } #MainContent .input-group{ --form-margin: 20px; --input-height: 54px; display: flex; flex-direction: column; margin: calc(var(--form-margin) / -2); } @media only screen and (min-width: 768px) { #MainContent .input-group{ flex-flow: row wrap; } } #MainContent .text-left .input-group, #MainContent .item--left .input-group, #MainContent .item--bottom-left .input-group, #MainContent .item--top-left .input-group, #MainContent .align--top-left .input-group, #MainContent .align--middle-left .input-group, #MainContent .align--middle-split .input-group, #MainContent .align--bottom-left .input-group{ justify-content: flex-start; } #MainContent .text-center .input-group, #MainContent .item--center .input-group, #MainContent .item--bottom-center .input-group, #MainContent .item--top-center .input-group, #MainContent .align--top-center .input-group, #MainContent .align--middle-center .input-group, #MainContent .align--middle-split .input-group, #MainContent .align--bottom-center .input-group{ justify-content: center; } @media only screen and (min-width: 768px) { #MainContent .text-right .input-group, #MainContent .item--right .input-group, #MainContent .item--bottom-right .input-group, #MainContent .item--top-right .input-group, #MainContent .align--top-right .input-group, #MainContent .align--middle-right .input-group, #MainContent .align--middle-split .input-group, #MainContent .align--bottom-right .input-group{ justify-content: flex-end; } } @media only screen and (max-width: 479px) { #MainContent .input-group{ --form-margin: 15px; } } #MainContent .input-group--inline{ margin: 0; position: relative; max-width: 340px; flex-wrap: nowrap; flex-direction: row; } #MainContent .align--middle-center .input-group--inline{ margin: 0 auto; } @media only screen and (min-width: 768px) { #MainContent .text-right .input-group--inline, #MainContent .item--right .input-group--inline, #MainContent .item--bottom-right .input-group--inline, #MainContent .item--top-right .input-group--inline, #MainContent .align--top-right .input-group--inline, #MainContent .align--middle-right .input-group--inline, #MainContent .align--bottom-right .input-group--inline{ margin-left: auto; } } #MainContent .input-group--inline input::-moz-focus-inner{ border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } #MainContent .input-group--inline .input-group__item{ flex: 1 1 auto; padding: 0; } #MainContent .input-group--inline .input-group__item--btn{ flex-grow: 0; flex-basis: 54px; max-width: 54px; } #MainContent .input-group--inline .input-group__field{ width: 100%; border-right: 0; border-radius: var(--RADIUS) 0 0 var(--RADIUS); } #MainContent .input-group--inline .input-group__btn--icon{ display: flex; align-items: center; justify-content: center; border-left: 0; border-radius: 0 var(--RADIUS) var(--RADIUS) 0; } #MainContent .input-group--inline .input-group__field, #MainContent .input-group--inline .input-group__btn--icon{ height: var(--input-height); } #MainContent .input-group--inline .input-group__field--text{ margin: 10px 0; } #MainContent .input-group__item{ position: relative; padding: calc(var(--form-margin) / 2); flex-basis: 100%; flex-grow: 2; } @media only screen and (min-width: 1024px) { #MainContent .input-group__item{ max-width: 280px; } } @media only screen and (min-width: 768px) { #MainContent .input-group__item{ flex-basis: 50%; } } @media only screen and (min-width: 1440px) { #MainContent .input-group__item{ flex-basis: 25%; } #MainContent .align--middle-split .input-group__item{ flex-basis: 50%; } } #MainContent .input-group__item--btn{ flex-grow: 0; } #MainContent .input-group__item--text{ flex-basis: 100%; } #MainContent .input-group__field{ color: var(--text); background: var(--input-bg); } #MainContent .input-group__btn{ width: 100%; height: var(--input-height); min-width: 54px; } #MainContent .input-group__error{ display: none; position: absolute; left: 0; right: 0; bottom: var(--inner); padding: 0 calc(0.5 * var(--inner) + 20px); color: var(--error); font-size: calc(12px * var(--adjust-body)); line-height: 1.05; transform: translateY(50%); } #MainContent .has-error .input-group__error{ display: block; } #MainContent input:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px white inset; } #MainContent input{ -webkit-appearance: none; } #MainContent .product__form input, #MainContent .product__form textarea, #MainContent .product__form select, #MainContent #collection-sorting input, #MainContent #collection-sorting textarea, #MainContent #collection-sorting select{ border: var(--BORDER-WIDTH) solid var(--border); } #MainContent .note, #MainContent .errors{ border-radius: var(--RADIUS); padding: 8px 12px; margin-bottom: var(--inner); border: var(--BORDER-WIDTH) solid transparent; font-size: calc(12px * var(--adjust-body)); text-align: center; } #MainContent .note ul, #MainContent .note ol, #MainContent .errors ul, #MainContent .errors ol{ margin: 0; list-style: none outside; } #MainContent .note li:last-child, #MainContent .errors li:last-child{ margin-bottom: 0; } #MainContent .note p, #MainContent .errors p{ margin-bottom: 0; font-size: inherit; } #MainContent .errors{ background-color: var(--error-bg); } #MainContent .errors .input-group__field{ color: var(--error); border-color: var(--error); } #MainContent .form-success{ color: var(--success); border-color: var(--success); } #MainContent .form-success a{ color: inherit; text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } #MainContent .form-success a:hover{ text-decoration: none; } #MainContent .form-error, #MainContent .errors{ color: var(--error); border-color: var(--error); clear: both; } #MainContent .form-error a, #MainContent .errors a{ color: var(--error); text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } #MainContent .form-error a:hover, #MainContent .errors a:hover{ text-decoration: none; } #MainContent .checkbox > input{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .checkbox > label{ position: relative; display: block; padding-left: 22px; font-size: calc(14px * var(--adjust-body)); line-height: 1.43; text-align: left; cursor: pointer; } #MainContent .checkbox > label:before{ content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--white); border-radius: var(--RADIUS-CHECKBOX); border: 1px solid var(--text); } #MainContent .checkbox > input:checked ~ label:before{ background: var(--text) var(--icon-check) no-repeat center center; background-size: 14px auto; } /* * Pagination */ #MainContent .pagination{ margin: var(--gutter) 0; text-align: center; } #MainContent .pagination .prev, #MainContent .pagination .page, #MainContent .pagination .next{ display: inline-block; line-height: 1.2; } #MainContent .pagination a:not(.btn):not(.shopify-payment-button__button--unbranded){ display: block; } #MainContent .pagination a:not(.btn):not(.shopify-payment-button__button--unbranded), #MainContent .pagination .page.current{ padding: 8px; } #MainContent .pagination .page.current{ border-bottom: var(--BORDER-WIDTH) solid var(--text); } #MainContent .pagination__loading{ position: relative; padding-top: 40px; display: inline-block; width: 150px; height: 150px; } #MainContent .pagination__loading:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--loading-svg) no-repeat top center/320px; pointer-events: none; } #MainContent .palette--dark .pagination__loading:after{ filter: invert(1); } #MainContent .pagination__button--previous{ transform: rotate(180deg); } #MainContent .dots--animated span{ animation-name: blink; animation-duration: 1.4s; animation-iteration-count: infinite; animation-fill-mode: both; } #MainContent .dots--animated span:nth-child(2){ animation-delay: 0.2s; } #MainContent .dots--animated span:nth-child(3){ animation-delay: 0.4s; } /* * Rich Text Editor */ #MainContent .rte{ margin-bottom: calc(var(--gutter) / 2); font-size: calc(16px * var(--adjust-body)); } #MainContent .rte a:not(.btn):not(.shopify-payment-button__button--unbranded){ text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } #MainContent .rte p{ font-size: inherit; } #MainContent .rte h1, #MainContent .rte h2, #MainContent .rte h3, #MainContent .rte h4, #MainContent .rte h5, #MainContent .rte h6{ margin: 1em 0; } #MainContent .rte li{ margin-bottom: 0.4em; } #MainContent .rte *:last-child{ margin-bottom: 0; } #MainContent .text-center .rte ul, #MainContent .text-center .rte ol{ display: flex; flex-direction: column; align-items: center; } #MainContent .rte--header{ margin-bottom: 0; } /*================ Basic Styles ================*/ #MainContent{ scroll-behavior: smooth; --scroll-behavior: smooth; } #MainContent{ color: var(--text); } #MainContent *{ -webkit-font-smoothing: antialiased; } #MainContent, #MainContent{ background-color: var(--bg); min-height: 100%; min-width: 320px; } #MainContent *:focus{ outline: 0; } #MainContent [tabindex="-1"]:focus{ outline: none; } #MainContent .no-js body.no-outline :focus{ outline: auto; outline: -webkit-focus-ring-color auto 5px; } #MainContent .skip-link{ position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .skip-link:focus{ clip: auto; width: auto; height: auto; margin: 0; color: var(--text); background-color: var(--bg); padding: 10px; opacity: 1; z-index: 10000; transition: none; } #MainContent hr{ width: 75px; margin: 15px auto; border-width: var(--BORDER-WIDTH) 0 0; border-color: var(--border); } #MainContent .item--left hr, #MainContent .item--top-left hr, #MainContent .item--bottom-left hr, #MainContent .align--middle-left hr, #MainContent .align--top-left hr, #MainContent .align--bottom-left hr, #MainContent .text-left hr{ margin-left: 0; } #MainContent .text-right hr, #MainContent .align--middle-right hr, #MainContent .align--top-right hr, #MainContent .align--bottom-right hr{ margin-right: 0; margin-left: auto; } @media only screen and (max-width: 767px) { #MainContent .item--right hr, #MainContent .item--top-right hr, #MainContent .item--bottom-right hr{ margin-left: 0; } } @media only screen and (min-width: 768px) { #MainContent .item--right hr, #MainContent .item--top-right hr, #MainContent .item--bottom-right hr{ margin-right: 0; } } #MainContent hr.hr--clear{ border-top-color: transparent; } #MainContent hr.hr--full{ width: 100%; } #MainContent .form__item .hr--full, #MainContent .divider-section .hr--full{ margin: 0; } #MainContent .wrapper--full{ width: 100%; margin: 0 auto; padding: 0; max-width: 100%; } #MainContent .wrapper--full:after{ content: ""; display: table; clear: both; } #MainContent .wrapper--full-padded{ width: 100%; max-width: 100%; margin: 0 auto; padding: 0 var(--gutter-mobile); } #MainContent .wrapper--full-padded:after{ content: ""; display: table; clear: both; } @media only screen and (min-width: 1024px) { #MainContent .wrapper--full-padded{ padding: 0 var(--gutter); } } #MainContent .wrapper{ width: var(--site-width); max-width: 100%; margin: 0 auto; padding: 0 var(--gutter-mobile); } #MainContent .wrapper:after{ content: ""; display: table; clear: both; } @media only screen and (min-width: 1024px) { #MainContent .wrapper{ padding: 0 var(--gutter); } } #MainContent .wrapper--narrow{ width: var(--site-width-narrow); max-width: 100%; margin: 0 auto; padding: 0 var(--gutter-mobile); } #MainContent .wrapper--narrow:after{ content: ""; display: table; clear: both; } @media only screen and (min-width: 1024px) { #MainContent .wrapper--narrow{ padding: 0 var(--gutter); } } #MainContent .section-default{ background: var(--bg); } #MainContent .section-padding{ --padding-top: var(--PT); --padding-bottom: var(--PB); padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .section-padding{ --padding-top: calc(var(--PT) * 0.8); --padding-bottom: calc(var(--PB) * 0.8); } } @media only screen and (max-width: 767px) { #MainContent .section-padding{ --padding-top: calc(var(--PT) * 0.6); --padding-bottom: calc(var(--PB) * 0.6); } } #MainContent .block-spacing{ margin-bottom: var(--block-spacing-bottom, 12px); } #MainContent .block-spacing.main-subheading{ margin-bottom: var(--block-spacing-bottom, 10px); } #MainContent .block-spacing.main-buttons{ margin-bottom: var(--block-spacing-bottom, 0); } #MainContent .main-content{ display: block; overflow: initial; min-height: var(--content-min); } #MainContent .main-content--parallax{ position: relative; z-index: 1; background-color: var(--bg); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: z-index 0s linear 0.4s, box-shadow 0s linear 0.4s; } #MainContent .main-content--parallax ~ .shopify-section:not(.section-footer){ position: relative; z-index: 1; } #MainContent .main-content--parallax:has(.search-page) .search-page__head{ z-index: 112; } #MainContent .main-content--parallax:has(.featured-product-section:only-of-type) .wave-svg, #MainContent .main-content--parallax:has(.featured-product-section:last-of-type) .wave-svg, #MainContent .main-content--parallax:has(.shopify-section--product:last-of-type) .wave-svg, #MainContent .main-content--parallax:has(.shopify-section--product:only-of-type) .wave-svg{ z-index: 9; } #MainContent .js-drawer-open--inner .main-content--parallax{ transition: z-index 0s linear 0s, box-shadow 0s linear 0s; z-index: 9999; } #MainContent .js-drawer-open--inner .main-content--parallax::before{ opacity: 0.2; visibility: visible; transition: visibility 0s, opacity 0.4s ease-in-out; } #MainContent .js-drawer-open--inner:has(.site-header--has-border) .main-content--parallax{ box-shadow: inset 0 var(--BORDER-WIDTH) var(--text); } #MainContent .js-drawer-open--inner:has(.site-header--has-border) .main-content--parallax.parallax-shadow{ box-shadow: 0 calc(-1 * var(--BORDER-WIDTH)) var(--text); } #MainContent .js-drawer-open--inner:has(.main-content--parallax) .drawer__overlay{ display: none; } #MainContent .has-scrolled:has(.main-content--parallax):has(.drawer) .main-content--parallax::before, #MainContent .has-scrolled:has(.main-content--parallax):has(.drawer) .main-content--parallax{ transition-delay: 0.4s; } #MainContent .has-scrolled.js-drawer-open--inner:has(.main-content--parallax):has(.drawer.is-open) .drawer, #MainContent .has-scrolled.js-drawer-open--inner:has(.main-content--parallax):has(.drawer.is-open) .main-content--parallax::before, #MainContent .has-scrolled.js-drawer-open--inner:has(.main-content--parallax):has(.drawer.is-open) .main-content--parallax{ transition-delay: 0.3s; } #MainContent .has-scrolled.js-drawer-open--inner:has(.main-content--parallax):has(.drawer.is-open) .site-header--fixed{ animation: hideCompactHeader 0.3s; } #MainContent ~ .section-footer) .section-footer{ z-index: 1; } #MainContent ~ .section-footer) .section-footer ~ .section-footer{ z-index: 0; } #MainContent .parallax-shadow{ box-shadow: 0 25px 25px -10px var(--footer-bg); } @media only screen and (max-width: 767px) { #MainContent .parallax-shadow{ box-shadow: none; } } #MainContent .parallax-rounded-corners{ overflow: clip; margin-bottom: calc(-1 * var(--radius-large)); position: relative; z-index: 1; } #MainContent .parallax-rounded-corners:has(.wavy){ overflow: unset; } #MainContent .parallax-rounded-corners{ border-bottom-left-radius: var(--radius-large); border-bottom-right-radius: var(--radius-large); } #MainContent .wavy{ position: relative; padding-bottom: 5px; } @media only screen and (max-width: 767px) { #MainContent .wavy{ padding-bottom: 10px; } } #MainContent .wavy .wave-svg{ display: block; } #MainContent .wave-svg{ --wave-height: 57px; position: absolute; width: 100%; bottom: calc(-1 * var(--wave-height)); display: none; z-index: 105; filter: drop-shadow(0 15px 10px var(--footer-bg)); } #MainContent .wave-svg svg{ height: var(--wave-height); display: block; } #MainContent .wave-svg #wave-svg__little-wave{ fill: var(--footer-bg); } @media only screen and (max-width: 767px) { #MainContent .wave-svg{ --wave-height: 28px; filter: none; } } #MainContent .wave-svg__reversed{ margin-top: -15px; transform: scale(-1); } @media only screen and (max-width: 767px) { #MainContent .wave-svg__reversed{ margin-top: 0; } } #MainContent .main-content > .shopify-section:first-child{ --full-height: var(--content-full); } #MainContent .main-content > .shopify-section:first-child .collection__filters{ --full-height: 100vh; } #MainContent .section__header{ --heading-margin: 20px; margin-bottom: calc(var(--gutter) / 2); } #MainContent .section__heading{ margin-bottom: var(--heading-margin); text-align: center; } #MainContent .text-left .section__heading{ text-align: left; } #MainContent .text-right .section__heading{ text-align: right; } #MainContent .section__heading a{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .section__heading a:before, #MainContent .section__heading a:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .section__heading a:before{ transform: scaleX(0); transform-origin: left; } #MainContent .section__heading a:after{ transform-origin: right; } #MainContent .no-touch .section__heading a:hover{ background: transparent; border: 0; } #MainContent .no-touch .section__heading a:hover:before, #MainContent .no-touch .section__heading a:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .section__heading a:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .section__heading [data-has-highlight]::before, #MainContent .section__heading [data-has-highlight]::after, #MainContent .section__heading .section__link::before, #MainContent .section__heading .section__link::after{ display: none; } #MainContent .section__heading:not(.text-highlight-wrapper) .text-reveal__cropper a::before, #MainContent .section__heading:not(.text-highlight-wrapper) .text-reveal__cropper a::after{ bottom: 0; } #MainContent .section__heading-line{ --padding: 15px; margin-top: calc(var(--padding) - var(--heading-margin) - var(--BORDER-WIDTH) / 2); margin-bottom: calc(var(--padding) - var(--BORDER-WIDTH) / 2); } #MainContent .section__heading-line:last-child{ margin-bottom: 0; } #MainContent .section__text{ font-size: calc(16px * var(--adjust-body)); margin-bottom: calc(var(--gutter) / 2); } #MainContent .section__text:last-child{ margin-bottom: 0; } #MainContent .section__text p:first-child{ margin-top: 0; } #MainContent .section__text p:last-child{ margin-bottom: 0; } #MainContent .section__text p{ font-size: inherit; } #MainContent .main-heading{ margin-bottom: 0; color: var(--heading); } #MainContent .main-heading a{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .main-heading a:before, #MainContent .main-heading a:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .main-heading a:before{ transform: scaleX(0); transform-origin: left; } #MainContent .main-heading a:after{ transform-origin: right; } #MainContent .no-touch .main-heading a:hover{ background: transparent; border: 0; } #MainContent .no-touch .main-heading a:hover:before, #MainContent .no-touch .main-heading a:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .main-heading a:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .main-heading [data-has-highlight]::before, #MainContent .main-heading [data-has-highlight]::after, #MainContent .main-heading .section__link::before, #MainContent .main-heading .section__link::after{ display: none; } #MainContent .main-heading:not(.text-highlight-wrapper) .text-reveal__cropper a::before, #MainContent .main-heading:not(.text-highlight-wrapper) .text-reveal__cropper a::after{ bottom: 0; } #MainContent .main-subheading{ margin-bottom: 10px; } #MainContent .main-text{ display: block; margin-bottom: 10px; color: var(--text); } #MainContent .main-buttons{ margin: 4px -8px 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } #MainContent .text-left .main-buttons, #MainContent .item--left .main-buttons, #MainContent .item--bottom-left .main-buttons, #MainContent .item--top-left .main-buttons, #MainContent .align--top-left .main-buttons, #MainContent .align--middle-left .main-buttons, #MainContent .align--bottom-left .main-buttons{ justify-content: flex-start; } @media only screen and (min-width: 768px) { #MainContent .text-right .main-buttons, #MainContent .item--right .main-buttons, #MainContent .item--bottom-right .main-buttons, #MainContent .item--top-right .main-buttons, #MainContent .align--top-right .main-buttons, #MainContent .align--middle-right .main-buttons, #MainContent .align--bottom-right .main-buttons{ justify-content: flex-end; } } @media only screen and (max-width: 479px) { #MainContent .main-buttons{ flex-flow: column; align-items: normal; } } #MainContent .main-buttons--video{ margin-top: 0; } #MainContent .main-buttons--video .main-buttons__item{ margin-top: 0; margin-bottom: 16px; } #MainContent .main-buttons__item{ display: flex; align-items: center; margin: 16px 8px 0; } #MainContent .text-center .main-buttons__item, #MainContent .item--center .main-buttons__item, #MainContent .item--bottom-center .main-buttons__item, #MainContent .item--top-center .main-buttons__item, #MainContent .align--top-center .main-buttons__item, #MainContent .align--middle-center .main-buttons__item, #MainContent .align--bottom-center .main-buttons__item{ justify-content: center; } @media only screen and (min-width: 480px) { #MainContent .main-buttons--stacked{ --stacked-button: 400px; flex-direction: column; } #MainContent .main-buttons--stacked .main-buttons__item{ width: 100%; max-width: var(--stacked-button); } #MainContent .main-buttons--stacked .main-buttons__item:has(.btn--text){ width: auto; } #MainContent .main-buttons--stacked .btn, #MainContent .main-buttons--stacked .shopify-payment-button__button--unbranded{ width: 100%; } #MainContent .text-left .main-buttons--stacked{ align-items: flex-start; } #MainContent .text-center .main-buttons--stacked{ align-items: center; } #MainContent .text-right .main-buttons--stacked{ align-items: flex-end; } } #MainContent .item{ width: 100%; position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #MainContent .item--center{ text-align: center; } #MainContent .item--center .image-accordion__text, #MainContent .item--left .image-accordion__text, #MainContent .item--right .image-accordion__text{ justify-content: center; } #MainContent .item--center .image-accordion__text, #MainContent .item--center .countdown__text-container, #MainContent .item--center .banner-image__text-container, #MainContent .item--center .slide__text__container, #MainContent .item--left .image-accordion__text, #MainContent .item--left .countdown__text-container, #MainContent .item--left .banner-image__text-container, #MainContent .item--left .slide__text__container, #MainContent .item--right .image-accordion__text, #MainContent .item--right .countdown__text-container, #MainContent .item--right .banner-image__text-container, #MainContent .item--right .slide__text__container{ align-items: center; } #MainContent .item--center .image-accordion__text, #MainContent .item--center .countdown__text-container, #MainContent .item--center .banner-image__text-container, #MainContent .item--center .slide__text__container{ justify-content: center; } #MainContent .item--left, #MainContent .item--bottom-left, #MainContent .item--top-left{ text-align: left; } #MainContent .item--left .image-accordion__text, #MainContent .item--left .countdown__text-container, #MainContent .item--left .banner-image__text-container, #MainContent .item--left .slide__text__container, #MainContent .item--bottom-left .image-accordion__text, #MainContent .item--bottom-left .countdown__text-container, #MainContent .item--bottom-left .banner-image__text-container, #MainContent .item--bottom-left .slide__text__container, #MainContent .item--top-left .image-accordion__text, #MainContent .item--top-left .countdown__text-container, #MainContent .item--top-left .banner-image__text-container, #MainContent .item--top-left .slide__text__container{ justify-content: flex-start; } @media only screen and (min-width: 768px) { #MainContent .item--right, #MainContent .item--bottom-right, #MainContent .item--top-right{ text-align: right; } } @media only screen and (min-width: 768px) { #MainContent .item--right .image-accordion__text, #MainContent .item--right .countdown__text-container, #MainContent .item--right .banner-image__text-container, #MainContent .item--right .slide__text__container, #MainContent .item--bottom-right .image-accordion__text, #MainContent .item--bottom-right .countdown__text-container, #MainContent .item--bottom-right .banner-image__text-container, #MainContent .item--bottom-right .slide__text__container, #MainContent .item--top-right .image-accordion__text, #MainContent .item--top-right .countdown__text-container, #MainContent .item--top-right .banner-image__text-container, #MainContent .item--top-right .slide__text__container{ justify-content: flex-end; } } #MainContent .item--bottom-left .image-accordion__text, #MainContent .item--bottom-left .countdown__text-container, #MainContent .item--bottom-left .banner-image__text-container, #MainContent .item--bottom-left .slide__text__container, #MainContent .item--bottom-right .image-accordion__text, #MainContent .item--bottom-right .countdown__text-container, #MainContent .item--bottom-right .banner-image__text-container, #MainContent .item--bottom-right .slide__text__container{ align-items: flex-end; } #MainContent .item--top-left .image-accordion__text, #MainContent .item--top-left .countdown__text-container, #MainContent .item--top-left .banner-image__text-container, #MainContent .item--top-left .slide__text__container, #MainContent .item--top-right .image-accordion__text, #MainContent .item--top-right .countdown__text-container, #MainContent .item--top-right .banner-image__text-container, #MainContent .item--top-right .slide__text__container{ align-items: flex-start; } #MainContent .body--rounded-corners{ --radius: 8px; --radius-medium: 5px; --radius-small: 4px; --radius-large: 8px; } #MainContent .body--rounded-corners-large{ --radius-large: 34px; } #MainContent .section-header{ padding-top: var(--gutter); padding-bottom: var(--gutter); text-align: center; } @media only screen and (max-width: 767px) { #MainContent .section-header{ padding-top: calc(var(--gutter) / 2); padding-bottom: calc(var(--gutter) / 2); } } #MainContent .table{ display: table; table-layout: fixed; width: 100%; margin-left: auto; margin-right: auto; } #MainContent .overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: var(--overlay); opacity: var(--overlay-opacity); } #MainContent .shopify-challenge__container{ padding: var(--gutter) var(--gutter-mobile); } @media only screen and (min-width: 480px) { #MainContent .shopify-challenge__container{ padding: var(--gutter) 0; } } #MainContent .shopify-challenge__container input.shopify-challenge__button{ margin-top: 20px; } /*================ Loading animations ================*/ #MainContent .loader--line{ position: relative; height: 4px; display: block; background-color: var(--PRIMARY-BUTTONS-COLOR-ALPHA-05); border-radius: 2px; overflow: hidden; width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } #MainContent .loader-indeterminate{ background-color: var(--PRIMARY-BUTTONS-COLOR-BG); } #MainContent .loader-indeterminate:before{ content: ""; position: absolute; background-color: inherit; top: 0; left: -35%; width: 100%; bottom: 0; will-change: transform; animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } #MainContent .loader-indeterminate:after{ content: ""; position: absolute; background-color: inherit; top: 0; left: -200%; width: 100%; bottom: 0; will-change: transform; animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } #MainContent .loadMore .loader, #MainContent .is-loading .loader{ visibility: visible; opacity: 1; transition-delay: 0s; } @keyframes indeterminate { 0% { transform: translateX(0) scale(0.35, 1); } 60% { transform: translateX(50%) scale(0.9, 1); } 100% { transform: translateX(100%) scale(0.9, 1); } } @keyframes indeterminate-short { 0% { transform: translateX(0) scale(2, 1); } 60% { transform: translateX(460px) scale(0, 1); } 100% { transform: translateX(460px) scale(0, 1); } } @keyframes pulse-loading { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } } #MainContent [data-collapsible-container]{ position: relative; width: 100%; height: 0; opacity: 0; overflow: hidden; visibility: hidden; will-change: height; transition: opacity 0.3s ease, height 0.3s ease, visibility 0s 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #MainContent [data-collapsible-container].is-expanded{ opacity: 1; overflow: unset; visibility: visible; transition: opacity 1s ease, height 0.5s ease, visibility 0s; } #MainContent [data-collapsible-content]{ overflow: hidden; will-change: transform; transform: translateY(25px); transition: transform 0.5s ease; } #MainContent .is-expanded > [data-collapsible-content]{ transform: translateY(0); } #MainContent [data-collapsible-trigger], #MainContent [data-collapsible-trigger-mobile]{ position: relative; display: flex; align-items: center; justify-content: center; color: inherit; cursor: pointer; min-width: 22px; } #MainContent [data-collapsible-trigger] .icon, #MainContent [data-collapsible-trigger-mobile] .icon{ position: absolute; color: inherit; display: flex; align-items: center; justify-content: center; } #MainContent [data-collapsible-trigger] .icon-toggle-plus, #MainContent [data-collapsible-trigger] .icon-toggle-minus, #MainContent [data-collapsible-trigger-mobile] .icon-toggle-plus, #MainContent [data-collapsible-trigger-mobile] .icon-toggle-minus{ width: 16px; height: 16px; } #MainContent [data-collapsible-trigger] .icon-toggle-plus, #MainContent [data-collapsible-trigger] .icon-toggle-minus, #MainContent [data-collapsible-trigger-mobile] .icon-toggle-plus, #MainContent [data-collapsible-trigger-mobile] .icon-toggle-minus{ transition: opacity 0.3s ease, transform 0.3s ease; } #MainContent [data-collapsible-trigger] .icon-toggle-minus, #MainContent [data-collapsible-trigger-mobile] .icon-toggle-minus{ opacity: 0; } #MainContent [data-collapsible-trigger].is-expanded > .icon-toggle-plus, #MainContent [data-collapsible-trigger-mobile].is-expanded > .icon-toggle-plus{ opacity: 0; transform: rotate(180deg); } #MainContent [data-collapsible-trigger].is-expanded > .icon-toggle-minus, #MainContent [data-collapsible-trigger-mobile].is-expanded > .icon-toggle-minus{ opacity: 1; transform: rotate(180deg); } @media only screen and (max-width: 767px) { #MainContent [data-collapsible-container-mobile]{ position: relative; width: 100%; height: 0; opacity: 0; overflow: hidden; visibility: hidden; will-change: height; transition: opacity 0.3s ease, height 0.3s ease, visibility 0s 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #MainContent [data-collapsible-container-mobile].is-expanded{ opacity: 1; overflow: unset; visibility: visible; transition: opacity 1s ease, height 0.5s ease, visibility 0s; } #MainContent [data-collapsible-content-mobile]{ transform: translateY(25px); transition: transform 0.5s ease; } #MainContent .is-expanded > [data-collapsible-content-mobile]{ transform: translateY(0); } } #MainContent [data-collapsible-trigger]:focus{ outline-offset: -2px; } #MainContent .no-js [data-collapsible-content]{ transform: none; } #MainContent .no-js [data-collapsible-container]{ visibility: initial; opacity: initial; height: auto; } /*================ Cart elements ================*/ #MainContent .cart__text{ display: block; text-align: center; margin: calc(var(--inner) / 2) 0 0; font-size: calc(13.04px * var(--adjust-body)); line-height: 1.36; } @media only screen and (max-width: 767px) { #MainContent .cart__text{ margin-top: 7px; } } #MainContent .cart__total{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding-top: calc(var(--inner) / 2); margin-bottom: calc(var(--inner) / 2); font-size: calc(12px * var(--adjust-body)); line-height: 1.33; font-weight: var(--FONT-WEIGHT-BODY-BOLD); } #MainContent .cart__total span:first-child{ text-transform: uppercase; letter-spacing: 0.14em; } #MainContent .cart__total.hidden{ display: none; } #MainContent .cart__checkout{ max-width: calc(var(--drawer-width, 100vw) - var(--inner)); padding-top: 12px; padding-bottom: 12px; } #MainContent .cart__checkout--dynamic{ min-height: 44px; } #MainContent #dynamic-checkout-cart:empty{ min-height: 0 !important; } #MainContent .cart__item{ position: relative; display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: row wrap; padding: var(--inner); overflow: hidden; will-change: transition, opacity; } #MainContent .cart__item.is-disabled a{ pointer-events: none; } #MainContent .cart__item--no-border{ border-bottom: none; } #MainContent .cart__item--open{ z-index: 1; overflow: visible; } #MainContent .cart__item__image{ position: relative; font-size: 0; margin-right: var(--inner); } #MainContent .cart__item__image img{ width: 100%; height: 100%; object-fit: cover; } #MainContent .cart__item__image a{ display: flex; flex-flow: row wrap; justify-content: center; align-items: center; text-decoration: none; transition: opacity 0.3s; width: 100px; height: 100px; border-radius: inherit; transform: translateZ(0); overflow: hidden; } #MainContent .cart__item__content{ width: calc(100% - 100px - var(--inner)); } #MainContent .cart__item__content-inner{ display: flex; flex-flow: row nowrap; } #MainContent .cart__item__price{ margin: 0 0 0 auto; font-size: calc(13.04px * var(--adjust-body)); line-height: 1.25; text-align: right; } #MainContent .cart__item__price ins{ background: none; margin-right: 5px; color: var(--text-darken); text-decoration: none; } #MainContent .cart__item__price del{ display: inline-block; color: var(--text-lighten); } #MainContent .cart__item__price .line__price{ display: block; margin-top: 4px; } #MainContent .cart__item__info{ max-width: 150px; } #MainContent .cart__item__title{ font-size: calc(13.04px * var(--adjust-body)); font-weight: var(--FONT-WEIGHT-BODY-MEDIUM); line-height: 1.3; margin: 0; } #MainContent .cart__item__title a{ text-decoration: none; } #MainContent .cart__item__meta{ margin: 8px 0 0; } #MainContent .cart__item__meta:empty{ display: none; } #MainContent .cart__item__selling-plan{ font-size: calc(13.04px * var(--adjust-body)); font-style: var(--FONT-STYLE-BODY-ITALIC); } #MainContent .cart__item__selling-plan span{ display: block; margin: 5px 0; } #MainContent .cart__item__selected-options, #MainContent .cart__item__property{ margin: 2px 0 0; font-size: calc(12px * var(--adjust-body)); } #MainContent .cart__item__bottom{ display: flex; flex-flow: row wrap; align-items: center; margin-top: 10px; justify-content: space-between; } #MainContent .cart__item__remove{ font-size: calc(12px * var(--adjust-body)); color: inherit; opacity: 0.6; text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); transition: opacity 0.3s; padding: 0 calc(var(--inner) / 2); } #MainContent .cart-drawer .cart__item__remove{ padding: 0; } #MainContent .cart__item__remove:hover{ opacity: 1; text-decoration: none; } #MainContent .cart-drawer.is-loading .cart__item__remove, #MainContent .cart__item.is-disabled .cart__item__remove{ pointer-events: none; opacity: 0.3; } #MainContent .cart__item__quantity{ position: relative; width: 80px; transition: opacity 0.4s; } #MainContent .cart__item__quantity.read-only{ opacity: 0.5; pointer-events: none; } #MainContent .cart__item__quantity button{ position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; width: 20px; height: 100%; font-size: 0; line-height: 1; border-radius: 0; transform: translateY(-50%); transition: color 0.3s; color: var(--text-alpha-50); } #MainContent .cart__item__quantity button.is-disabled{ pointer-events: none; opacity: 0.5; } #MainContent .cart__item__quantity button:hover{ color: var(--text); } #MainContent .cart__item__quantity .icon{ width: 8px; height: 8px; } #MainContent .cart__item__quantity input[type=number]{ -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } #MainContent .cart__item__quantity input[type=number]::-webkit-outer-spin-button, #MainContent .cart__item__quantity input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; appearance: none; } #MainContent .cart__item__quantity-minus{ left: 0; box-shadow: var(--BORDER-WIDTH) 0 var(--COLOR-BORDER-ALPHA-50); } #MainContent .cart__item__quantity-plus{ right: 0; box-shadow: calc(var(--BORDER-WIDTH) * -1) 0 var(--COLOR-BORDER-ALPHA-50); } #MainContent .cart__item__quantity-field{ display: flex; width: 100%; padding: 6px 20px; border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER-ALPHA-50); border-radius: 1px; margin: 0; font-size: calc(12px * var(--adjust-body)); line-height: normal; color: inherit; text-align: center; } #MainContent .is-loading .cart__item__quantity, #MainContent .is-disabled .cart__item__quantity{ pointer-events: none; opacity: 0.6; } #MainContent .cart__widget{ overflow: hidden; font-size: calc(13.04px * var(--adjust-body)); line-height: 1.16; font-weight: var(--FONT-WEIGHT-BODY-BOLD); padding: calc(var(--inner) / 2) 0; } #MainContent .cart__widget .cart__field{ display: block; width: 100%; font-size: calc(13.04px * var(--adjust-body)); line-height: 1.4; } #MainContent .cart__widget .cart__field--textarea{ height: 90px; resize: none; border-radius: var(--RADIUS-TEXTAREA); } #MainContent .cart__widget label{ display: block; margin-bottom: 5px; } #MainContent .cart__widget__wrapper div:last-of-type{ margin-bottom: calc(var(--inner) / 2); } #MainContent .cart__widget__title{ display: block; position: relative; width: calc(100% + var(--inner)); padding: 12px calc(var(--inner) / 2); margin: -12px calc(var(--inner) / -2); font-size: calc(13.04px * var(--adjust-body)); line-height: 1.16; color: var(--text); text-align: left; } #MainContent .cart__widget__title .icon{ top: 0; right: calc(var(--inner) / 2); height: 100%; width: 12px; } #MainContent .cart__widget__content-inner{ overflow-x: auto; position: relative; display: flex; flex-flow: row nowrap; margin-bottom: -38px; } #MainContent .cart__widget__content-inner > *{ flex: 0 0 auto; width: 100%; margin-bottom: 22px; } #MainContent .cart__widget__content-inner .product-upsell__btn{ position: relative; display: flex; right: auto; bottom: auto; } #MainContent .cart__widget__content{ overflow: hidden; position: relative; margin-top: var(--inner); } #MainContent .cart__widget__content textarea{ padding: 5px; } #MainContent .cart__discount{ width: 100%; padding: 5px 15px; border-radius: 3px; margin: var(--inner) 0 0; background-color: var(--PRIMARY-BUTTONS-COLOR-ALPHA-50); font-size: calc(12px * var(--adjust-body)); color: var(--PRIMARY-BUTTONS-COLOR-TEXT); } #MainContent .cart__discount .icon-tags{ display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-right: 4px; stroke: currentcolor; stroke-width: 1px; } #MainContent .cart__errors{ position: relative; width: 100%; visibility: hidden; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s cubic-bezier(0, 1, 0.5, 1), visibility 0.5s; } #MainContent .cart__errors.is-expanded{ opacity: 1; visibility: visible; max-height: 300px; transition-timing-function: cubic-bezier(0, 0, 1, 0); } #MainContent .cart__errors__inner{ position: relative; padding: calc(var(--inner) * 0.75) calc(var(--inner) * 2) calc(var(--inner) * 0.75) var(--inner); border: var(--BORDER-WIDTH) solid var(--error); border-radius: var(--RADIUS-CHECKBOX); margin: 0 auto calc(var(--inner) * 0.75); background-color: var(--error-bg); } @media only screen and (max-width: 767px) { #MainContent .cart__errors__inner{ padding: calc(var(--inner) / 2) calc(var(--inner) * 2) calc(var(--inner) / 2) var(--gutter-mobile); } } #MainContent .cart__errors__close, #MainContent .errors__button-close{ position: absolute; top: 50%; right: 10px; width: 32px; height: 32px; padding: 8px; transform: translateY(-50%); } #MainContent .cart__errors__close .icon, #MainContent .errors__button-close .icon{ display: block; width: 100%; height: 100%; transition: transform 0.3s ease; } #MainContent .cart__errors__close:hover .icon, #MainContent .errors__button-close:hover .icon{ transform: rotate(90deg); } #MainContent .cart__errors__heading{ margin: 0; font-size: calc(12px * var(--adjust-body)); color: var(--error); } #MainContent .cart__errors__content{ width: 100%; margin: 0; font-size: calc(12px * var(--adjust-body)); color: var(--error); } #MainContent .cart__buttons-wrapper{ display: flex; flex-flow: row wrap; width: 100%; } #MainContent .cart__acceptance__input{ display: block; width: 13px; height: 13px; margin: calc(4px * var(--adjust-body)) 7px 5px 0; float: none; } #MainContent .cart__acceptance__label{ display: block; cursor: pointer; width: calc(100% - 25px); font-size: calc(13.04px * var(--adjust-body)); } #MainContent .cart__acceptance__label p{ margin: 0; font-size: inherit; } #MainContent .cart__buttons__fieldset{ padding: 0; margin: 0; border: none; } #MainContent .cart__buttons{ width: 100%; } #MainContent .cart__buttons--disabled{ position: relative; } #MainContent .cart__buttons--disabled::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: default; background: var(--bg-alpha-35); z-index: 1; cursor: default; transition: opacity 0.3s ease, visibility 0s linear 0s; } #MainContent .cart__acceptance__input ~ .cart__buttons{ margin-top: var(--inner); } #MainContent .cart__acceptance__input:checked ~ .cart__buttons--disabled::after{ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } #MainContent .cart__terms{ width: 100%; margin: 0; font-size: calc(12px * var(--adjust-body)); color: var(--error); visibility: hidden; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.5s ease, margin 0.5s ease, max-height 0.5s cubic-bezier(0, 1, 0.5, 1), visibility 0.5s; } #MainContent .cart__terms.is-expanded{ opacity: 1; visibility: visible; max-height: 300px; margin-top: var(--inner); transition: opacity 0.5s ease, margin 0.5s ease, max-height 0.5s cubic-bezier(0, 0, 1, 0), visibility 0.5s; } #MainContent .cart__pair{ border-top: var(--BORDER-WIDTH) solid var(--text); padding-top: 10px; margin-bottom: 30px; transition: opacity 0.3s; } #MainContent .cart__pair.fade-out{ opacity: 0; } #MainContent .cart__pair .flickity-page-dots{ position: static; margin: 9px 0 -25px; } #MainContent .cart__pair:empty{ display: none; } #MainContent .body--rounded-corners .cart__widget, #MainContent .body--rounded-corners .cart__item__image{ border-radius: var(--radius); overflow: hidden; } #MainContent .no-js .cart__item__quantity-plus, #MainContent .no-js .cart__item__quantity-minus, #MainContent .no-js .cart__widget__title::before, #MainContent .no-js .cart__widget__title::after{ display: none !important; } #MainContent .no-js .cart__checkout--no-js{ display: none; } #MainContent .no-js .cart__acceptance__input ~ .cart__buttons .cart__checkout{ display: none; } #MainContent .no-js .cart__acceptance__input ~ .cart__buttons .cart__checkout--no-js{ display: block; } #MainContent .no-js .cart__acceptance__input:checked ~ .cart__buttons .cart__checkout{ display: block; } #MainContent .no-js .cart__acceptance__input:checked ~ .cart__buttons .cart__checkout--no-js{ display: none; } #MainContent .no-js .cart__item__image img{ max-width: 100px; max-height: 100px; } /*================ Search popdown ================*/ #MainContent search-popdown{ --width: 600px; --icon-size: 26px; --search-popdown-height: 68px; display: flex; } #MainContent search-popdown summary.navlink--icon{ transition: none; } #MainContent search-popdown details > summary:first-of-type{ list-style-type: none; } #MainContent .search-popdown--page{ width: 100%; } #MainContent .search-popdown--page .search-popdown__body{ width: 100%; } #MainContent .search-popdown--page .predictive-search, #MainContent .search-popdown--page .popular-searches{ max-width: var(--width); max-height: calc(100vh - var(--header-height) - var(--search-popdown-height) - var(--announcement-height)); } @media only screen and (max-width: 767px) { #MainContent .search-popdown--page .predictive-search, #MainContent .search-popdown--page .popular-searches{ display: none; } } @media (pointer: coarse) { #MainContent .search-popdown--page .predictive-search, #MainContent .search-popdown--page .popular-searches{ display: none; } } #MainContent .search-popdown--page .search-popdown__close{ opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; } @media only screen and (max-width: 767px) { #MainContent .search-popdown--page .search-popdown__close{ display: none; } } @media (pointer: coarse) { #MainContent .search-popdown--page .search-popdown__close{ display: none; } } #MainContent .no-js .search-popdown--page .popular-searches, #MainContent .no-js .search-popdown--page .search-popdown__close{ display: none; } #MainContent .search-popdown--page:focus-within .search-popdown__close{ opacity: 1; visibility: visible; } #MainContent .menu__item--compress search-popdown{ min-height: 100%; } #MainContent .menu__item--compress search-popdown details > summary:first-of-type{ height: 100%; } #MainContent .menu__item--texts search-popdown > details, #MainContent .menu__item--texts search-popdown details > summary:first-of-type{ height: 100%; } #MainContent .search-popdown__body--fixed{ position: fixed; z-index: 4; top: 100%; left: 0; width: 100%; } @media only screen and (max-width: 767px) { #MainContent .search-popdown__body--fixed{ width: 100vw; } } #MainContent .site-header--has-border .search-popdown__body--fixed::before{ z-index: 1; content: ""; position: absolute; top: calc(var(--BORDER-WIDTH) * -1); left: 0; right: 0; height: var(--BORDER-WIDTH); box-shadow: 0 var(--BORDER-WIDTH) var(--border-color); opacity: var(--border-opacity, 1); transition: box-shadow 0.2s ease; } #MainContent .search-opened .search-popdown__body--fixed{ z-index: 12; } #MainContent .search-opened .search-popdown__body--fixed::after{ --adjust-font-size: calc(24px * var(--adjust-nav) / 2); position: absolute; content: ""; top: auto; bottom: 100%; left: 0; right: 0; height: calc(var(--header-height) / 2 - var(--adjust-font-size)); } #MainContent .has-scrolled.search-opened .search-popdown__body--fixed::after{ height: calc(var(--header-sticky-height) / 2 - var(--adjust-font-size)); } #MainContent .search-popdown__results{ position: absolute; z-index: 4; top: 100%; left: 0; right: 0; width: 100%; height: 100vh; max-height: calc(100vh - var(--header-height) - var(--search-popdown-height) - var(--announcement-height)); pointer-events: none; } @media only screen and (max-width: 767px) { #MainContent .search-page .search-popdown__results{ max-width: 100%; } } #MainContent .search-popdown__results > *{ pointer-events: all; } #MainContent .search-popdown__toggle{ display: flex; justify-content: center; align-items: center; cursor: pointer; } #MainContent .search-popdown__toggle::-webkit-details-marker{ display: none; } #MainContent .search-popdown__toggle .icon-close{ display: none; } #MainContent .search-popdown__close{ position: absolute; top: 50%; right: 9px; transform: translateY(-50%); width: 44px; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; text-decoration: none; } @media only screen and (max-width: 767px) { #MainContent .search-popdown__close{ right: 0; width: 40px; } } #MainContent .search-popdown__close .icon{ width: calc(var(--icon-size) - 2px); height: calc(var(--icon-size) - 2px); stroke-width: calc(var(--STROKE-WIDTH) - 4px); transition: transform 0.3s ease; pointer-events: none; } #MainContent .search-popdown__close:hover .icon{ transform: rotate(90deg); } #MainContent .body--rounded-corners .popular-searches, #MainContent .body--rounded-corners .predictive-search{ border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } #MainContent search-popdown:focus-within > details{ outline: -webkit-focus-ring-color inset 1px; } /*================ Search form ================*/ #MainContent .search-form{ position: relative; display: block; } #MainContent .search-form__inner{ display: flex; padding: 11px var(--gutter); min-height: var(--header-sticky-height); width: 100%; background: var(--bg); } @media only screen and (max-width: 767px) { #MainContent .search-form__inner{ padding: 8px var(--gutter-mobile); } } #MainContent .search-form__input-holder{ position: relative; margin: 0 auto; max-width: var(--width); width: 100%; background: var(--input-bg); } #MainContent .search-form__input{ --input-bg: var(--bg-lighten-darken-foreground); width: 100%; border: 0; border-radius: 0; margin: 0; padding: 9px 66px; color: var(--text); text-align: left; } @supports (-webkit-touch-callout: none) { #MainContent .search-form__input{ font-size: max(16px * var(--FONT-ADJUST-BODY), 16px); } } @media only screen and (max-width: 767px) { #MainContent .search-form__input{ padding-left: 46px; padding-right: 35px; } } #MainContent .search-form__input::placeholder{ color: var(--text); } #MainContent .search-form__input:focus, #MainContent .search-form__input:active{ box-shadow: none; } #MainContent .search-form__label{ position: absolute; top: 50%; left: 12px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 100%; padding: 0; } @media only screen and (max-width: 767px) { #MainContent .search-form__label{ left: 0; } } #MainContent .search-form__label .icon{ width: var(--icon-size, 26px); height: var(--icon-size, 26px); stroke-width: calc(var(--STROKE-WIDTH) - 4px); } #MainContent .body--rounded-corners .search-form__input{ border-radius: var(--radius); overflow: hidden; } #MainContent .body--rounded-corners .search-popdown--page:focus-within .search-form__input, #MainContent .body--rounded-corners .search-popdown__body predictive-search[open=true] .search-form__input, #MainContent .body--rounded-corners .search-popdown__body--fixed .search-form__input{ border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /*================ Predictive search & Search form ================*/ #MainContent predictive-search, #MainContent search-form{ width: 100%; display: block; } @media only screen and (max-width: 767px) { #MainContent predictive-search, #MainContent search-form{ max-width: none; } } #MainContent predictive-search p, #MainContent search-form p{ margin: 0; } #MainContent predictive-search mark, #MainContent search-form mark{ background-color: var(--bg-lighten-darken-highlight); color: var(--text); } #MainContent .predictive-search, #MainContent .popular-searches{ --image-size: 30px; --gap-lg: 24px; --gap-sm: 16px; --left-right: var(--gap-lg); --top-bottom: var(--gap-sm); --item-top-bottom: calc(var(--top-bottom) / 2); --inner: 20px; position: absolute; z-index: 20; top: 0; right: 0; left: 0; margin: -11px auto 0; padding: 0 var(--inner); width: 100%; max-width: var(--width); max-height: calc(100vh - var(--header-height, 0px) - var(--search-popdown-height) - var(--announcement-height)); background: var(--bg-lighten-darken-foreground); scrollbar-width: none; -ms-overflow-style: none; } #MainContent .predictive-search::-webkit-scrollbar, #MainContent .popular-searches::-webkit-scrollbar{ display: none; } @media only screen and (max-width: 767px) { #MainContent .predictive-search, #MainContent .popular-searches{ margin-top: -8px; border-left: 0; border-right: 0; width: calc(100% - var(--gutter-mobile) * 2); } } #MainContent .search-popdown__results .predictive-search, #MainContent .search-popdown__results .popular-searches{ overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: smooth; } #MainContent .has-scrolled .predictive-search, #MainContent .has-scrolled .popular-searches{ max-height: calc(100vh - var(--header-sticky-height) - var(--search-popdown-height) - var(--announcement-height)); } #MainContent .popular-searches .predictive-search__list{ padding: var(--item-top-bottom) var(--left-right); display: flex; flex-flow: row wrap; } @media only screen and (max-width: 479px) { #MainContent .popular-searches .predictive-search__list{ padding: var(--item-top-bottom) 0; } } #MainContent .popular-searches .predictive-search__list:last-child{ padding-bottom: 0; } #MainContent .popular-searches .predictive-search__group:last-child{ padding-bottom: var(--gap-lg); } #MainContent .popular-searches .predictive-search__item{ padding: 0 var(--left-right) var(--item-top-bottom) 0; } #MainContent .predictive-search__actions{ border-top: var(--BORDER-WIDTH) solid var(--border); margin-top: var(--gap-lg); padding: var(--top-bottom) var(--left-right); width: 100%; display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 479px) { #MainContent .predictive-search__actions{ padding: var(--top-bottom) 0; } } #MainContent .caps .predictive-search__actions{ text-transform: none; } #MainContent .predictive-search__actions .predictive-search__link{ position: relative; display: inline-block; text-decoration: none !important; font-size: calc(16px * var(--adjust-body)); } #MainContent .predictive-search__actions .predictive-search__link:before, #MainContent .predictive-search__actions .predictive-search__link:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .predictive-search__actions .predictive-search__link:before{ transform: scaleX(0); transform-origin: left; } #MainContent .predictive-search__actions .predictive-search__link:after{ transform-origin: right; } #MainContent .no-touch .predictive-search__actions .predictive-search__link:hover{ background: transparent; border: 0; } #MainContent .no-touch .predictive-search__actions .predictive-search__link:hover:before, #MainContent .no-touch .predictive-search__actions .predictive-search__link:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .predictive-search__actions .predictive-search__link:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .predictive-search__actions .predictive-search__link::after{ opacity: 0; } #MainContent .predictive-search__actions .predictive-search__link:hover{ opacity: 1; } #MainContent .predictive-search__actions .predictive-search__link:hover::before, #MainContent .predictive-search__actions .predictive-search__link:hover::after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); } #MainContent .predictive-search__actions .predictive-search__link:hover::before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .predictive-search__actions .predictive-search__link:hover::after{ transform: scaleX(0); opacity: 1; } #MainContent .predictive-search__quick-tip{ --text-size: calc(12px * var(--adjust-body)); font-size: var(--text-size); letter-spacing: initial; } #MainContent .predictive-search__heading{ margin-bottom: calc(var(--gap-lg) - var(--item-top-bottom)); padding: var(--gap-lg) var(--left-right) calc(var(--gap-sm) / 4); border-bottom: var(--BORDER-WIDTH) solid var(--border); font-size: calc(16px * var(--adjust-label)); } #MainContent .nav .predictive-search__heading{ font-size: calc(16px * var(--adjust-label)); } @media only screen and (max-width: 479px) { #MainContent .predictive-search__heading{ padding: var(--gap-lg) 0 var(--item-top-bottom); } } #MainContent .predictive-search__heading span{ display: inline-block; } #MainContent .predictive-search__item{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); font-size: calc(16px * var(--adjust-body)); line-height: 1.2; letter-spacing: initial; padding: var(--item-top-bottom) var(--left-right); } @media only screen and (max-width: 479px) { #MainContent .predictive-search__item{ padding: var(--item-top-bottom) 0; } } #MainContent .predictive-search__item:last-child{ padding-bottom: 0; } #MainContent .caps .predictive-search__item{ text-transform: none; } #MainContent .nav .predictive-search__item{ font-size: calc(16px * var(--adjust-body)); } #MainContent .predictive-search__link{ display: inline-block; color: currentcolor; transition: opacity 0.3s ease; } #MainContent .predictive-search__link:hover{ opacity: 0.65; } #MainContent .predictive-search__link > *{ pointer-events: none; } #MainContent .predictive-search__product{ display: flex; align-items: center; width: 100%; } #MainContent .predictive-search__product-image{ position: relative; max-width: var(--image-size); flex: 0 0 var(--image-size); height: var(--image-size); } #MainContent .predictive-search__product-image figure{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .predictive-search__product-title{ padding-left: calc(var(--gap-sm) - 4px); } #MainContent .predictive-search__loading-state{ margin: 0 var(--left-right); min-height: var(--search-popdown-height); display: flex; align-items: center; } @media only screen and (max-width: 479px) { #MainContent .predictive-search__loading-state{ margin: 0; } } #MainContent .predictive-search__loading-state .predictive-search__loader{ background: var(--bg-lighten-darken-search-loader-line); } #MainContent .predictive-search__loading-state .loader-indeterminate{ background: var(--bg-lighten-darken-search-loader); } #MainContent .predictive-search__item[aria-selected=true] a, #MainContent .predictive-search__product[aria-selected=true] a, #MainContent .predictive-search__link[aria-selected=true]{ outline: 5px auto var(--PRIMARY-BUTTONS-COLOR-BG); } /*================ Search popdown animations ================*/ #MainContent details[open]:not(.is-open) predictive-search[results] .predictive-search, #MainContent .predictive-search, #MainContent .popular-searches{ visibility: hidden; transform-origin: center top; transform: scaleY(0); transition: transform 0.2s ease, visibility 0s 0.2s; } #MainContent .search-popdown--page:focus-within search-form .popular-searches, #MainContent details.is-open search-form .popular-searches{ visibility: visible; transform: scaleY(1); transition: transform 0.2s ease 0.2s, visibility 0s; } #MainContent .search-popdown--page:focus-within predictive-search:not([open]):not([results]).is-searched .popular-searches, #MainContent details.is-open predictive-search:not([open]):not([results]).is-searched .popular-searches{ transition: none; } #MainContent .search-popdown--page:focus-within predictive-search:not([open]):not([results]) .popular-searches, #MainContent details.is-open predictive-search:not([open]):not([results]) .popular-searches{ visibility: visible; transform: scaleY(1); transition: transform 0.2s ease 0.2s, visibility 0s; } #MainContent .search-popdown--page:focus-within predictive-search:not([open]):not([results]) .predictive-search, #MainContent details.is-open predictive-search:not([open]):not([results]) .predictive-search{ transition-delay: 0.1s; } #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches predictive-search:not([open]):not([results]) .predictive-search, #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches search-form, #MainContent details.is-open .search-popdown__body--has-popular-searches predictive-search:not([open]):not([results]) .predictive-search, #MainContent details.is-open .search-popdown__body--has-popular-searches search-form{ transition-delay: 0s; } #MainContent predictive-search[open=true][results=true] .predictive-search{ transition: none; } #MainContent predictive-search[open=true][results=true].is-searched .predictive-search{ visibility: visible; transform: scaleY(1); transition: transform 0.2s ease 0.2s, visibility 0s; } #MainContent predictive-search[open=true][results=true] .popular-searches{ transition: none; } #MainContent .predictive-search__heading span, #MainContent .predictive-search__list{ opacity: 0; transform: translateY(-5px); transition: transform 0.2s, opacity 0.1s; } #MainContent .search-popdown--page:focus-within search-form .predictive-search__heading span, #MainContent .search-popdown--page:focus-within predictive-search:not([open]):not([results]) .predictive-search__heading span, #MainContent details.is-open search-form .predictive-search__heading span, #MainContent details.is-open predictive-search:not([open]):not([results]) .predictive-search__heading span, #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches predictive-search.reset .predictive-search__heading span, #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches predictive-search.reset:not([open]):not([results]) .predictive-search__heading span, #MainContent details.is-open .search-popdown__body--has-popular-searches predictive-search.reset .predictive-search__heading span, #MainContent details.is-open .search-popdown__body--has-popular-searches predictive-search.reset:not([open]):not([results]) .predictive-search__heading span, #MainContent predictive-search[open=true][results=true] .predictive-search__heading span, #MainContent .search-popdown--page:focus-within search-form .predictive-search__list, #MainContent .search-popdown--page:focus-within predictive-search:not([open]):not([results]) .predictive-search__list, #MainContent details.is-open search-form .predictive-search__list, #MainContent details.is-open predictive-search:not([open]):not([results]) .predictive-search__list, #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches predictive-search.reset .predictive-search__list, #MainContent .search-popdown--page:focus-within .search-popdown__body--has-popular-searches predictive-search.reset:not([open]):not([results]) .predictive-search__list, #MainContent details.is-open .search-popdown__body--has-popular-searches predictive-search.reset .predictive-search__list, #MainContent details.is-open .search-popdown__body--has-popular-searches predictive-search.reset:not([open]):not([results]) .predictive-search__list, #MainContent predictive-search[open=true][results=true] .predictive-search__list{ transform: translateY(0); opacity: 1; transition: transform 0.2s 0.4s, opacity 0.2s 0.4s; } #MainContent .search-popdown--page:focus-within predictive-search.reset .predictive-search__heading span, #MainContent .search-popdown--page:focus-within predictive-search.reset:not([open]):not([results]) .predictive-search__heading span, #MainContent details.is-open predictive-search.reset .predictive-search__heading span, #MainContent details.is-open predictive-search.reset:not([open]):not([results]) .predictive-search__heading span, #MainContent details[open]:not(.is-open) predictive-search[results] .predictive-search__heading span, #MainContent .search-popdown--page:focus-within predictive-search.reset .predictive-search__list, #MainContent .search-popdown--page:focus-within predictive-search.reset:not([open]):not([results]) .predictive-search__list, #MainContent details.is-open predictive-search.reset .predictive-search__list, #MainContent details.is-open predictive-search.reset:not([open]):not([results]) .predictive-search__list, #MainContent details[open]:not(.is-open) predictive-search[results] .predictive-search__list{ opacity: 0; transform: translateY(-5px); transition: transform 0.1s, opacity 0.1s; } #MainContent .search-popdown__body--fixed .search-form__inner{ transform-origin: center top; transform: scaleY(0); visibility: hidden; transition: transform 0.2s ease 0.1s, visibility 0s 0.3s; } #MainContent details:not(.is-open) .search-popdown__body--fixed .search-form__inner{ transition: transform 0.2s ease 0.4s, visibility 0s 0.6s; } #MainContent .no-js details[open] .search-popdown__body--fixed .search-form__inner, #MainContent details.is-open .search-popdown__body--fixed .search-form__inner{ visibility: visible; transform: scaleY(1); transition: transform 0.2s ease, visibility 0s; } #MainContent .search-popdown__body--fixed .search-form__input-holder{ opacity: 0; transform: translateY(-10px); transition: transform 0.2s, opacity 0.1s; } #MainContent details:not(.is-open) .search-popdown__body--fixed .search-form__input-holder{ transition: transform 0.2s 0.2s, opacity 0.1s 0.2s; } #MainContent .no-js details[open] .search-popdown__body--fixed .search-form__input-holder, #MainContent details.is-open .search-popdown__body--fixed .search-form__input-holder{ transform: translateY(0); opacity: 1; transition: transform 0.1s 0.2s, opacity 0.1s 0.2s; } #MainContent .main-content::before{ content: ""; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; z-index: 130; opacity: 0; visibility: hidden; transition: visibility 0.4s linear, opacity 0.4s ease-in-out; background: var(--overlay); } #MainContent .megamenu-opened .main-content::before, #MainContent .search-opened .main-content::before{ opacity: 0.2; visibility: visible; transition: visibility 0s, opacity 0.4s ease-in-out; } #MainContent .predictive-search__loader{ margin: auto; } #MainContent .search-popdown--page:focus-within predictive-search:not([loading]) .predictive-search__loading-state, #MainContent .search-popdown--page:focus-within search-form:not([loading]) .predictive-search__loading-state, #MainContent predictive-search:not([loading]) .predictive-search__loading-state, #MainContent search-form:not([loading]) .predictive-search__loading-state{ display: none; } #MainContent .search-popdown--page:focus-within predictive-search[loading] .predictive-search__group, #MainContent .search-popdown--page:focus-within predictive-search[loading] .predictive-search__actions, #MainContent .search-popdown--page:focus-within search-form[loading] .predictive-search__group, #MainContent .search-popdown--page:focus-within search-form[loading] .predictive-search__actions, #MainContent predictive-search[loading] .predictive-search__group, #MainContent predictive-search[loading] .predictive-search__actions, #MainContent search-form[loading] .predictive-search__group, #MainContent search-form[loading] .predictive-search__actions{ display: none; } #MainContent .search-popdown--page:focus-within predictive-search[loading] .predictive-search__loader, #MainContent .search-popdown--page:focus-within search-form[loading] .predictive-search__loader, #MainContent predictive-search[loading] .predictive-search__loader, #MainContent search-form[loading] .predictive-search__loader{ opacity: 1; visibility: visible; } #MainContent .no-js details[open] .search-popdown__close{ display: none; } #MainContent .no-js details[open] .search-popdown__toggle .icon-search{ display: none; } #MainContent .no-js details[open] .search-popdown__toggle .icon-close{ display: block; } #MainContent search-popdown details[open] predictive-search{ transition: opacity 0.3s; } #MainContent .nav:has(.menu__item.is-visible) predictive-search{ opacity: 0; } /* * Social sharing */ #MainContent .share-button{ position: relative; } #MainContent .share-button .tooltip-default{ top: 100%; z-index: 1; } /*================ Tooltips ================*/ #MainContent .tooltip-default{ position: absolute; z-index: 10001; top: var(--tooltip-top, 0); left: 0; right: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-out; overflow: hidden; padding-bottom: 20px; } @media (pointer: coarse) { #MainContent .tooltip-default{ opacity: 0; } } #MainContent .tooltip-default__inner{ position: relative; display: inline-block; max-width: 90vw; } #MainContent .tooltip-default__arrow{ position: absolute; top: 8px; left: 0; z-index: 1; margin-top: 4px; transition: top 0.2s ease-out; } #MainContent .tooltip-default__arrow::before{ position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin-left: -5px; background: var(--bg); border: var(--BORDER-WIDTH) solid var(--border); border-width: 0 0 var(--BORDER-WIDTH) var(--BORDER-WIDTH); transform: rotate(135deg); content: ""; } #MainContent .tooltip-default__text{ position: relative; top: 8px; margin-top: 10px; background: var(--bg); color: var(--text-dark); padding: 2px 8px; border-radius: 0; box-shadow: 0 0 0 var(--BORDER-WIDTH) var(--border); font-size: calc(16px * var(--adjust-label)); text-align: center; transition: top 0.2s ease-out; } #MainContent .aos-initialized .tooltip-default.is-animating{ opacity: 0; } #MainContent .tooltip-default.is-hiding{ opacity: 1; } #MainContent .tooltip-default.is-hiding .tooltip-default__arrow, #MainContent .tooltip-default.is-hiding .tooltip-default__text{ top: 0; } #MainContent .tooltip-default.is-visible{ transition: none; animation: tooltip-opacity 0.2s ease-out; animation-fill-mode: forwards; } #MainContent .tooltip-default.is-visible .tooltip-default__arrow, #MainContent .tooltip-default.is-visible .tooltip-default__text{ transition: none; animation: tooltip-top 0.2s ease-out; animation-fill-mode: forwards; } @keyframes tooltip-top { from { top: 8px; } to { top: 0; } } @keyframes tooltip-opacity { from { opacity: 0; } to { opacity: 1; } } #MainContent .custom-scrollbar{ --thumb-scale: 0; --thumb-position: 0; --track-width: 100%; --radius-scrollbar: 0; --scrollbar-bg: var(--COLOR-ACCENT-MIX-ALPHA); position: relative; min-width: var(--track-width); width: 100%; height: 5px; padding: 0; margin-top: 10px; background: var(--scrollbar-bg); border-radius: var(--radius-scrollbar); overflow: hidden; } #MainContent .custom-scrollbar__thumb{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(var(--thumb-position)); transform-origin: left; transition: transform 0.3s ease-in-out; will-change: transform; } #MainContent .custom-scrollbar__thumb:before{ content: ""; display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(var(--thumb-scale)); transform-origin: left; transition: transform 0.3s ease-in-out; will-change: transform; } #MainContent .body--rounded-corners .custom-scrollbar{ --radius-scrollbar: 3px; } #MainContent toggle-ellipsis{ --height: 175px; --bg: var(--bg-ellipsis, var(--COLOR-BG)); display: block; position: relative; overflow: hidden; height: var(--height); transition: height 0.5s ease; } #MainContent .toggle-ellipsis__content{ overflow: hidden; padding-bottom: 1.6px; } #MainContent .toggle-ellipsis__actions{ display: none; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 0; background: var(--bg); } #MainContent .toggle-ellipsis__actions::before{ content: ""; position: absolute; left: 0; bottom: 99.99%; right: 0; height: 30px; background: linear-gradient(to bottom, transparent, var(--bg)); opacity: 1; transition: opacity 0.3s ease; pointer-events: none; } #MainContent .toggle-ellipsis__button{ position: absolute; top: -1.6px; left: 0; } #MainContent .toggle-ellipsis__more, #MainContent .toggle-ellipsis__less{ animation: fadeIn 1s ease; } #MainContent .is-enabled .toggle-ellipsis__actions{ display: block; padding-bottom: 15px; } #MainContent .is-enabled .toggle-ellipsis__more{ display: inline; } #MainContent .is-enabled .toggle-ellipsis__less{ display: none; } #MainContent .is-open .toggle-ellipsis__actions::before{ opacity: 0; } #MainContent .is-open .toggle-ellipsis__more{ display: none; } #MainContent .is-open .toggle-ellipsis__less{ display: inline; } /*================ "Header" ================*/ #MainContent .shopify-section-header{ position: relative; width: 100%; z-index: 9000; } #MainContent .site-header{ --highlight: var(--text); position: relative; z-index: 5; width: 100%; min-width: 320px; background-color: var(--bg); color: var(--text); overflow: initial; -webkit-overflow-scrolling: touch; transition: color 0.2s ease, background 0.3s ease; } #MainContent .no-js .site-header > .wrapper[data-aos], #MainContent .site-header > .wrapper:not(.aos-initialized){ transform: translateZ(0); } #MainContent .site-header > .wrapper{ --header-sticky-height: 60px; position: relative; display: flex; align-items: center; width: 100%; min-height: var(--header-sticky-height); height: inherit; } @media (pointer: coarse) { #MainContent .site-header > .wrapper{ justify-content: center; } } @media only screen and (max-width: 767px) { #MainContent .site-header[data-header-in-editor] > .wrapper{ justify-content: center; } } #MainContent .site-header a{ text-decoration: none; } #MainContent .site-header__background{ position: absolute; top: 0; left: 0; width: 100%; height: 0; transition: height 0.25s ease; pointer-events: none; background: inherit; } #MainContent .site-header--transparent .site-header__background{ background-color: var(--bg); } @media (pointer: fine) { #MainContent .site-header:focus-within .site-header__background{ height: var(--header-height); } #MainContent .site-header.site-header--menu-opened:focus-within .site-header__background, #MainContent .site-header.site-header--menu-opened .site-header__background{ height: var(--header-background-height); } } @media (hover: hover) { #MainContent .site-header:hover .site-header__background{ height: var(--header-background-height); } } #MainContent .site-header--has-border{ transition: color 0.2s ease, background 0.2s ease; } #MainContent .site-header--has-border .wrapper::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; box-shadow: 0 var(--BORDER-WIDTH) var(--border-color); opacity: var(--border-opacity, 1); transition: box-shadow 0.2s ease; } #MainContent .logo{ position: relative; z-index: 1; text-align: left; margin: 15px 0; padding-right: var(--inner); max-width: calc(100% - 120px); display: flex; align-items: center; font-size: calc(18px * var(--adjust-heading)); line-height: 1.3; color: inherit; word-break: break-word; } @media (pointer: coarse) { #MainContent .logo{ position: relative; padding-left: var(--inner); padding-right: var(--inner); } #MainContent .logo .logo__image-link--home:not(.logo__image-link--single){ left: var(--inner); max-width: calc(100% - var(--inner) * 2); } } @media only screen and (max-width: 479px) { #MainContent .logo{ max-width: calc(100% - 117px); } } #MainContent .site-header--nav-left .logo, #MainContent .site-header--compress .logo{ margin-left: auto; margin-right: auto; padding-left: var(--inner); padding-right: var(--inner); } #MainContent .site-header--nav-left .logo .logo__image-link--home:not(.logo__image-link--single), #MainContent .site-header--compress .logo .logo__image-link--home:not(.logo__image-link--single){ left: var(--inner); max-width: calc(100% - var(--inner) * 2); } #MainContent .logo__image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: left; image-rendering: auto; } #MainContent .logo__image-link{ position: relative; color: var(--text); max-width: 100%; } #MainContent .logo__image-link--home:not(.logo__image-link--single){ position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.4s ease; } #MainContent .site-header--nav-left:not(.site-header--compress) .logo__image-link--home:not(.logo__image-link--single){ left: var(--inner); } #MainContent .logo__image-link--other, #MainContent .logo__image-link--single{ display: block; } #MainContent .logo__text-link{ color: var(--text); transition: color 0.2s ease; } #MainContent .logo__image-push{ display: block; height: 0; } @media only screen and (max-width: 479px) { #MainContent .logo__text-link--has-image{ display: none; } } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .shopify-section.supports-transparent-header:first-child{ --full-height: var(--content-full); --content-full: calc(100vh - var(--announcement-height)); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .shopify-section-header{ height: auto; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .site-header{ position: absolute; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .banner-content, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .banners--cols .banner, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .banners--row .banners__content, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .banner-image__text-wrapper, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .slide__text__wrapper, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .split-images__content, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .video-text-wrapper{ padding-top: calc(var(--header-height) + var(--gutter)); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .hero-scrolling__text-container{ padding-top: var(--header-height); } @media only screen and (max-width: 767px) { #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .banners--row .banners__content{ padding-top: calc(var(--header-height) + var(--gutter-mobile)); padding-bottom: calc(var(--header-height) + var(--gutter-mobile)); } } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .countdown__text-container{ padding-top: calc(var(--header-height) + var(--gutter) / 2 + var(--PT)); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .countdown.section-padding{ padding-top: 0; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .countdown__content, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .main-content > .supports-transparent-header:first-child .countdown__aside{ padding-top: 0; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent{ background: transparent; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .logo__image-link--other{ opacity: 0; transition: opacity 0.4s ease; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .logo__image-link--home:not(.logo__image-link--single), #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .logo__image-link--single, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--menu-opened .logo__image-link--other{ opacity: 1; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent[data-text-color=black]{ --text: var(--black); --header-gradient: var(--white-alpha-10); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent[data-text-color=white]{ --text: var(--white); --header-gradient: var(--black-alpha-10); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .localization-form .select-popout__list{ --text: var(--black); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .localization-form .select-popout__list .select-popout__item:hover{ color: var(--white); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent .localization-form .select-popout__list .select-popout__item--current:hover span{ border-color: var(--white); } #MainContent .no-js body:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--has-gradient::before, #MainContent .is-loaded body:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--has-gradient::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, var(--header-gradient) 30%, rgba(0, 0, 0, 0) 100%); } @media (pointer: fine) { #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent:focus-within .logo__image-link--other{ opacity: 1; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent:focus-within .logo__image-link--home:not(.logo__image-link--single), #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--menu-opened .logo__image-link--home:not(.logo__image-link--single){ opacity: 0; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent:focus-within, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--menu-opened[data-text-color=white]{ --text: var(--black); } } @media (hover: hover) { #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--hovered:hover .logo__image-link--other{ opacity: 1; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--hovered:hover .logo__image-link--home:not(.logo__image-link--single){ opacity: 0; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])):not(.search-opened) .site-header--transparent.site-header--hovered[data-text-color=white]:hover{ --text: var(--black); } } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open .site-header--transparent.site-header--hovered .logo__image-link--other, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open-cart .site-header--transparent.site-header--hovered .logo__image-link--other, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-from-cart .site-header--transparent.site-header--hovered .logo__image-link--other, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-visible .site-header--transparent.site-header--hovered .logo__image-link--other{ opacity: 1; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open .site-header--transparent.site-header--hovered .logo__image-link--home:not(.logo__image-link--single), #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open-cart .site-header--transparent.site-header--hovered .logo__image-link--home:not(.logo__image-link--single), #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-from-cart .site-header--transparent.site-header--hovered .logo__image-link--home:not(.logo__image-link--single), #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-visible .site-header--transparent.site-header--hovered .logo__image-link--home:not(.logo__image-link--single){ opacity: 0; } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open .site-header--transparent.site-header--hovered[data-text-color=white], #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open-cart .site-header--transparent.site-header--hovered[data-text-color=white], #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-from-cart .site-header--transparent.site-header--hovered[data-text-color=white], #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-visible .site-header--transparent.site-header--hovered[data-text-color=white]{ --text: var(--black); } #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open .site-header--transparent.site-header .site-header__background, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-drawer-open-cart .site-header--transparent.site-header .site-header__background, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-from-cart .site-header--transparent.site-header .site-header__background, #MainContent > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])).js-quick-view-visible .site-header--transparent.site-header .site-header__background{ height: var(--header-background-height); } #MainContent .has-scrolled .shopify-section-header{ height: var(--header-height); } #MainContent .has-scrolled .site-header{ position: fixed; top: 0; left: 0; width: 100%; height: var(--header-sticky-height); } #MainContent .has-scrolled .site-header--has-border .wrapper::before{ box-shadow: none; } #MainContent .has-scrolled .site-header--fixed{ height: var(--header-sticky-height); animation: showCompactHeader 0.3s ease; } #MainContent .has-scrolled.hide-header .site-header--fixed{ animation: hideCompactHeader 0.3s; animation-fill-mode: forwards; } #MainContent .has-scrolled:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .site-header{ position: fixed; height: var(--header-sticky-height); } #MainContent .has-scrolled .site-header:not(.site-header--menu-opened):focus-within .site-header__background, #MainContent .has-scrolled .site-header:not(.site-header--menu-opened) .site-header__background{ --header-background-height: var(--header-sticky-height); } @media (pointer: fine) { #MainContent .has-scrolled.search-opened .site-header .site-header__background, #MainContent .has-scrolled .site-header:focus-within .site-header__background{ height: var(--header-sticky-height); } #MainContent .has-scrolled .site-header.site-header--menu-opened:focus-within .site-header__background, #MainContent .has-scrolled .site-header.site-header--menu-opened .site-header__background{ height: var(--header-background-height); } } @media (hover: hover) { #MainContent .has-scrolled .site-header:not(.site-header--menu-opened):hover .site-header__background{ --header-background-height: var(--header-sticky-height); } } #MainContent .has-scrolled .logo{ margin-top: 10px; margin-bottom: 10px; } #MainContent .has-scrolled .site-header--has-logo .logo{ height: 40px; } #MainContent .body--rounded-corners.megamenu-opened .site-header__background{ border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; } #MainContent .no-js body:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .site-header--transparent[data-text-color=white]:hover{ --text: var(--black); } #MainContent .no-js body:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .site-header--transparent:hover .logo__image-link--other{ opacity: 1; } #MainContent .no-js body:has(.site-header[data-transparent=true]):has(.main-content > .supports-transparent-header:first-child):not(:has(.main-content > .supports-transparent-header:first-child [data-prevent-transparent-header])) .site-header--transparent:hover .logo__image-link--home:not(.logo__image-link--single){ opacity: 0; } /*================ Drawers ================*/ #MainContent .drawer{ will-change: transform; position: fixed; width: var(--drawer-width); overflow-y: auto; overflow-x: hidden; top: 0; bottom: 0; z-index: 9999; color: var(--text); background-color: var(--bg); transition: var(--drawer-transition), visibility 0s linear 0.4s; visibility: hidden; } #MainContent .drawer input{ border: none; } #MainContent .drawer textarea{ border-color: var(--border); } #MainContent .drawer .btn, #MainContent .drawer .shopify-payment-button__button--unbranded{ min-width: 0; } #MainContent .drawer.is-open{ content-visibility: visible; visibility: visible; transform: translateX(calc(-1 * var(--drawer-width))); transition: var(--drawer-transition), visibility 0s linear 0s; } #MainContent .drawer--left{ right: 100vw; } #MainContent .drawer--left.is-open{ transform: translateX(var(--drawer-width)); } #MainContent .drawer--right{ left: 100vw; } #MainContent .drawer--bottom{ transform: translateY(100vh); } #MainContent .drawer--bottom.is-open{ transform: none; } #MainContent .drawer--header{ padding-bottom: var(--inner); } #MainContent .drawer--nav{ display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } #MainContent .drawer__inner{ width: 100%; height: 100%; flex: 0 1 100%; display: flex; flex-direction: column; } #MainContent .drawer__header{ display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: var(--inner); position: relative; } #MainContent .drawer__header .drawer__close-button{ top: 50%; transform: translateY(-50%); } #MainContent .drawer__body{ flex: 1; width: 100%; min-height: 250px; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } #MainContent .drawer__content{ --item-height: 50px; position: relative; flex: 1; display: flex; min-height: var(--item-height); width: 100%; overflow: hidden; } #MainContent .drawer__content-scroll{ overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; flex: 0 1 100%; transition: opacity 0.2s ease; } #MainContent .drawer__content-scroll::after{ content: ""; position: absolute; bottom: -15px; left: 0; right: var(--scrollbar-width); height: 20px; background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } #MainContent .drawer__content-scroll--has-scroll::after{ opacity: 1; } #MainContent .drawer__close-button{ position: absolute; top: 8px; right: 0; width: 54px; height: 54px; padding: 18px; color: inherit; text-decoration: none; z-index: 1; } #MainContent .drawer__close-button svg{ display: block; width: 100%; height: 100%; transition: transform 0.3s ease; pointer-events: none; } #MainContent .drawer__close-button:hover svg{ transform: rotate(90deg); } #MainContent .drawer__secondary-close-button{ display: block; margin: calc(var(--gutter-mobile) + 25px) auto; width: 100%; } #MainContent .drawer__title{ margin: 0; max-width: calc(100% - 70px); font-weight: var(--FONT-WEIGHT-HEADING-BOLD); } #MainContent .drawer__logo{ display: block; position: relative; max-width: 100%; margin: 0; } #MainContent .drawer__logo-image{ display: block; width: var(--logo-width); max-width: 100%; object-fit: contain; object-position: left; } #MainContent .cart-drawer__spacer-line{ clear: both; display: block; width: 100%; margin-bottom: var(--inner); border-bottom: var(--BORDER-WIDTH) solid var(--accent); } #MainContent .drawer__foot{ width: 100%; margin-top: auto; margin-top: calc(var(--inner) / 2); } #MainContent .drawer__overlay{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--black); opacity: 0; visibility: hidden; content: ""; z-index: 9998; transition: visibility 0.4s ease-in-out, opacity 0.4s ease-in-out; } #MainContent .js-drawer-open-cart .drawer__overlay, #MainContent .js-drawer-open .drawer__overlay{ opacity: 0.2; visibility: visible; will-change: opacity; } #MainContent .no-js .drawer{ display: none !important; } #MainContent .drawer__block{ padding-bottom: var(--PBB, 0); } #MainContent .drawer__block-inner{ padding: 0 var(--inner); } #MainContent .drawer__block--menu .drawer__block-inner{ padding: 0; } #MainContent .drawer__block--menu{ position: relative; overflow-y: auto; min-height: var(--item-height); } #MainContent .drawer__block--menu:only-of-type{ margin-bottom: var(--gutter-mobile); } #MainContent .drawer-image{ width: 100%; display: flex; flex-flow: row wrap; } #MainContent .drawer-image__link{ display: block; width: var(--image-width); flex: 0 0 var(--image-width); } #MainContent .drawer-icon{ --icon-size: 25px; --line-height: 1.5625; display: flex; align-items: center; font-size: calc(16px * var(--adjust-body)); line-height: var(--line-height); align-self: start; } #MainContent .drawer-icon__inner{ min-height: calc(16px * var(--adjust-body) * var(--line-height)); display: flex; flex-basis: var(--icon-size); flex-shrink: 0; align-items: center; justify-content: center; align-self: center; position: relative; color: var(--icon-color); } #MainContent .drawer-icon__inner .icon{ display: block; width: var(--icon-size); height: var(--icon-size); } #MainContent .drawer-icon__holder{ display: block; position: relative; width: 100%; height: 0; padding-top: var(--aspect-ratio); } #MainContent .drawer-icon__text:not(:only-child){ margin-left: 10px; } #MainContent .drawer-text{ font-size: calc(16px * var(--adjust-body)); } #MainContent .drawer-text p{ margin: 0; } #MainContent .drawer__block--button .main-buttons__item{ margin-top: 0; } #MainContent .drawer__block--button .btn, #MainContent .drawer__block--button .shopify-payment-button__button--unbranded{ min-width: 100%; } #MainContent .drawer__block--localization .localization-form{ justify-content: flex-start; margin: 0; } @media only screen and (min-width: 1024px) { #MainContent .drawer__block--localization .localization-form .select-popout__list{ left: 0; transform: none; } } #MainContent .drawer__foot .select-popout__list{ top: auto; bottom: 100%; margin-bottom: 5px; } #MainContent .drawer__block--divider hr{ margin: 0; } #MainContent .drawer-product{ background: var(--bg); } #MainContent .drawer-product__link{ width: 100%; display: flex; flex-flow: column wrap; gap: 12px; } #MainContent .drawer-product__link--center{ align-items: center; } #MainContent .drawer-product__link--right{ align-items: flex-end; } #MainContent .drawer-product__image{ width: var(--image-width); flex: 0 0 var(--image-width); } #MainContent .drawer-product__title{ font-size: calc(16px * var(--adjust-body)); } #MainContent .drawer-product__link--padding{ padding: calc(var(--inner) / 2); } #MainContent .body--rounded-corners .drawer-product, #MainContent .body--rounded-corners .drawer-product__image, #MainContent .body--rounded-corners .drawer-image__link, #MainContent .body--rounded-corners .drawer-icon__holder{ border-radius: var(--radius); overflow: hidden; } #MainContent .aos-initialized [data-aos]{ transition-duration: 500ms; transition-delay: 0s; } #MainContent .aos-initialized [data-aos][data-aos-duration="0"]{ transition-duration: 0ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="0"]{ transition-delay: 0ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="50"]{ transition-duration: 50ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="50"]{ transition-delay: 50ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="100"]{ transition-duration: 100ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="100"]{ transition-delay: 100ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="150"]{ transition-duration: 150ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="150"]{ transition-delay: 150ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="200"]{ transition-duration: 200ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="200"]{ transition-delay: 200ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="250"]{ transition-duration: 250ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="250"]{ transition-delay: 250ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="300"]{ transition-duration: 300ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="300"]{ transition-delay: 300ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="350"]{ transition-duration: 350ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="350"]{ transition-delay: 350ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="400"]{ transition-duration: 400ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="400"]{ transition-delay: 400ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="450"]{ transition-duration: 450ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="450"]{ transition-delay: 450ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="500"]{ transition-duration: 500ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="500"]{ transition-delay: 500ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="550"]{ transition-duration: 550ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="550"]{ transition-delay: 550ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="600"]{ transition-duration: 600ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="600"]{ transition-delay: 600ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="650"]{ transition-duration: 650ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="650"]{ transition-delay: 650ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="700"]{ transition-duration: 700ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="700"]{ transition-delay: 700ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="750"]{ transition-duration: 750ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="750"]{ transition-delay: 750ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="800"]{ transition-duration: 800ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="800"]{ transition-delay: 800ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="850"]{ transition-duration: 850ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="850"]{ transition-delay: 850ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="900"]{ transition-duration: 900ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="900"]{ transition-delay: 900ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="950"]{ transition-duration: 950ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="950"]{ transition-delay: 950ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1000"]{ transition-duration: 1000ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1000"]{ transition-delay: 1000ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1050"]{ transition-duration: 1050ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1050"]{ transition-delay: 1050ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1100"]{ transition-duration: 1100ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1100"]{ transition-delay: 1100ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1150"]{ transition-duration: 1150ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1150"]{ transition-delay: 1150ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1200"]{ transition-duration: 1200ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1200"]{ transition-delay: 1200ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1250"]{ transition-duration: 1250ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1250"]{ transition-delay: 1250ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1300"]{ transition-duration: 1300ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1300"]{ transition-delay: 1300ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1350"]{ transition-duration: 1350ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1350"]{ transition-delay: 1350ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1400"]{ transition-duration: 1400ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1400"]{ transition-delay: 1400ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1450"]{ transition-duration: 1450ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1450"]{ transition-delay: 1450ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1500"]{ transition-duration: 1500ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1500"]{ transition-delay: 1500ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1550"]{ transition-duration: 1550ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1550"]{ transition-delay: 1550ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1600"]{ transition-duration: 1600ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1600"]{ transition-delay: 1600ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1650"]{ transition-duration: 1650ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1650"]{ transition-delay: 1650ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1700"]{ transition-duration: 1700ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1700"]{ transition-delay: 1700ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1750"]{ transition-duration: 1750ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1750"]{ transition-delay: 1750ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1800"]{ transition-duration: 1800ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1800"]{ transition-delay: 1800ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1850"]{ transition-duration: 1850ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1850"]{ transition-delay: 1850ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1900"]{ transition-duration: 1900ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1900"]{ transition-delay: 1900ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="1950"]{ transition-duration: 1950ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="1950"]{ transition-delay: 1950ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2000"]{ transition-duration: 2000ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2000"]{ transition-delay: 2000ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2050"]{ transition-duration: 2050ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2050"]{ transition-delay: 2050ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2100"]{ transition-duration: 2100ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2100"]{ transition-delay: 2100ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2150"]{ transition-duration: 2150ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2150"]{ transition-delay: 2150ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2200"]{ transition-duration: 2200ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2200"]{ transition-delay: 2200ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2250"]{ transition-duration: 2250ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2250"]{ transition-delay: 2250ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2300"]{ transition-duration: 2300ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2300"]{ transition-delay: 2300ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2350"]{ transition-duration: 2350ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2350"]{ transition-delay: 2350ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2400"]{ transition-duration: 2400ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2400"]{ transition-delay: 2400ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2450"]{ transition-duration: 2450ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2450"]{ transition-delay: 2450ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2500"]{ transition-duration: 2500ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2500"]{ transition-delay: 2500ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2550"]{ transition-duration: 2550ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2550"]{ transition-delay: 2550ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2600"]{ transition-duration: 2600ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2600"]{ transition-delay: 2600ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2650"]{ transition-duration: 2650ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2650"]{ transition-delay: 2650ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2700"]{ transition-duration: 2700ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2700"]{ transition-delay: 2700ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2750"]{ transition-duration: 2750ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2750"]{ transition-delay: 2750ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2800"]{ transition-duration: 2800ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2800"]{ transition-delay: 2800ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2850"]{ transition-duration: 2850ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2850"]{ transition-delay: 2850ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2900"]{ transition-duration: 2900ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2900"]{ transition-delay: 2900ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="2950"]{ transition-duration: 2950ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="2950"]{ transition-delay: 2950ms; } #MainContent .aos-initialized [data-aos][data-aos-duration="3000"]{ transition-duration: 3000ms; } #MainContent .aos-initialized [data-aos][data-aos-delay="3000"]{ transition-delay: 3000ms; } #MainContent .aos-initialized [data-aos][data-aos-easing=linear]{ transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease]{ transition-timing-function: ease; } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in]{ transition-timing-function: ease-in; } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out]{ transition-timing-function: ease-out; } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out]{ transition-timing-function: ease-in-out; } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-back]{ transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out-back]{ transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out-back]{ transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-sine]{ transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out-sine]{ transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out-sine]{ transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-quad]{ transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out-quad]{ transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out-quad]{ transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-cubic]{ transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out-cubic]{ transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out-cubic]{ transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-quart]{ transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-out-quart]{ transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } #MainContent .aos-initialized [data-aos][data-aos-easing=ease-in-out-quart]{ transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } #MainContent .aos-initialized [data-aos^=fade]{ opacity: 0.001; transition-property: opacity, transform; } #MainContent .aos-initialized [data-aos^=fade].aos-animate{ opacity: 1; transform: translateZ(0); } #MainContent .aos-initialized [data-aos=fade-up]{ transform: translateY(var(--move-offset)); } #MainContent .aos-initialized [data-aos=fade-down]{ transform: translateY(calc(var(--move-offset) * -1)); } #MainContent .aos-initialized [data-aos=fade-right]{ transform: translate(calc(var(--move-offset) * -1)); } #MainContent .aos-initialized [data-aos=fade-left]{ transform: translate(var(--move-offset)); } #MainContent .aos-initialized [data-aos=fade-up-right]{ transform: translate(calc(var(--move-offset) * -1), var(--move-offset)); } #MainContent .aos-initialized [data-aos=fade-up-left]{ transform: translate(var(--move-offset), var(--move-offset)); } #MainContent .aos-initialized [data-aos=fade-down-right]{ transform: translate(calc(var(--move-offset) * -1), calc(var(--move-offset) * -1)); } #MainContent .aos-initialized [data-aos=fade-down-left]{ transform: translate(var(--move-offset), calc(var(--move-offset) * -1)); } #MainContent .aos-initialized [data-aos^=zoom]{ opacity: 0.001; transition-property: opacity, transform; } #MainContent .aos-initialized [data-aos^=zoom].aos-animate{ opacity: 1; transform: translateZ(0) scale(1); } #MainContent .aos-initialized [data-aos=zoom-in]{ transform: scale(0.6); } #MainContent .aos-initialized [data-aos=zoom-in-up]{ transform: translateY(var(--move-offset)) scale(0.6); } #MainContent .aos-initialized [data-aos=zoom-in-down]{ transform: translateY(calc(var(--move-offset) * -1)) scale(0.6); } #MainContent .aos-initialized [data-aos=zoom-in-right]{ transform: translate(calc(var(--move-offset) * -1)) scale(0.6); } #MainContent .aos-initialized [data-aos=zoom-in-left]{ transform: translate(var(--move-offset)) scale(0.6); } #MainContent .aos-initialized [data-aos=zoom-out]{ transform: scale(1.2); } #MainContent .aos-initialized [data-aos=zoom-out-up]{ transform: translateY(var(--move-offset)) scale(1.2); } #MainContent .aos-initialized [data-aos=zoom-out-down]{ transform: translateY(calc(var(--move-offset) * -1)) scale(1.2); } #MainContent .aos-initialized [data-aos=zoom-out-right]{ transform: translate(calc(var(--move-offset) * -1)) scale(1.2); } #MainContent .aos-initialized [data-aos=zoom-out-left]{ transform: translate(var(--move-offset)) scale(1.2); } #MainContent .aos-initialized [data-aos^=slide]{ transition-property: transform; } #MainContent .aos-initialized [data-aos^=slide].aos-animate{ transform: translateZ(0); } #MainContent .aos-initialized [data-aos=slide-up]{ transform: translateY(100%); } #MainContent .aos-initialized [data-aos=slide-down]{ transform: translateY(-100%); } #MainContent .aos-initialized [data-aos=slide-right]{ transform: translateX(-100%); } #MainContent .aos-initialized [data-aos=slide-left]{ transform: translateX(100%); } #MainContent .aos-initialized [data-aos^=flip]{ -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-property: transform; } #MainContent .aos-initialized [data-aos=flip-left]{ transform: perspective(2500px) rotateY(-100deg); } #MainContent .aos-initialized [data-aos=flip-left].aos-animate{ transform: perspective(2500px) rotateY(0); } #MainContent .aos-initialized [data-aos=flip-right]{ transform: perspective(2500px) rotateY(100deg); } #MainContent .aos-initialized [data-aos=flip-right].aos-animate{ transform: perspective(2500px) rotateY(0); } #MainContent .aos-initialized [data-aos=flip-up]{ transform: perspective(2500px) rotateX(-100deg); } #MainContent .aos-initialized [data-aos=flip-up].aos-animate{ transform: perspective(2500px) rotateX(0); } #MainContent .aos-initialized [data-aos=flip-down]{ transform: perspective(2500px) rotateX(100deg); } #MainContent .aos-initialized [data-aos=flip-down].aos-animate{ transform: perspective(2500px) rotateX(0); } #MainContent .aos-initialized [data-aos=come-up]{ transform: translateY(100%); opacity: 0.001; transition-property: opacity, transform; } #MainContent .aos-initialized [data-aos=come-up].aos-animate{ transform: translateZ(0); opacity: 1; } #MainContent .aos-initialized [data-aos=image-in]{ transition: none; transition-delay: 0s; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay]{ transition-delay: 0s; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="0"] .image-in{ --duration: 0ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="0"] .image-in{ animation-delay: 0ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="50"] .image-in{ --duration: 50ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="50"] .image-in{ animation-delay: 50ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="100"] .image-in{ --duration: 100ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="100"] .image-in{ animation-delay: 100ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="150"] .image-in{ --duration: 150ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="150"] .image-in{ animation-delay: 150ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="200"] .image-in{ --duration: 200ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="200"] .image-in{ animation-delay: 200ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="250"] .image-in{ --duration: 250ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="250"] .image-in{ animation-delay: 250ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="300"] .image-in{ --duration: 300ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="300"] .image-in{ animation-delay: 300ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="350"] .image-in{ --duration: 350ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="350"] .image-in{ animation-delay: 350ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="400"] .image-in{ --duration: 400ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="400"] .image-in{ animation-delay: 400ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="450"] .image-in{ --duration: 450ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="450"] .image-in{ animation-delay: 450ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="500"] .image-in{ --duration: 500ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="500"] .image-in{ animation-delay: 500ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="550"] .image-in{ --duration: 550ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="550"] .image-in{ animation-delay: 550ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="600"] .image-in{ --duration: 600ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="600"] .image-in{ animation-delay: 600ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="650"] .image-in{ --duration: 650ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="650"] .image-in{ animation-delay: 650ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="700"] .image-in{ --duration: 700ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="700"] .image-in{ animation-delay: 700ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="750"] .image-in{ --duration: 750ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="750"] .image-in{ animation-delay: 750ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="800"] .image-in{ --duration: 800ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="800"] .image-in{ animation-delay: 800ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="850"] .image-in{ --duration: 850ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="850"] .image-in{ animation-delay: 850ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="900"] .image-in{ --duration: 900ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="900"] .image-in{ animation-delay: 900ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="950"] .image-in{ --duration: 950ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="950"] .image-in{ animation-delay: 950ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1000"] .image-in{ --duration: 1000ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1000"] .image-in{ animation-delay: 1000ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1050"] .image-in{ --duration: 1050ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1050"] .image-in{ animation-delay: 1050ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1100"] .image-in{ --duration: 1100ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1100"] .image-in{ animation-delay: 1100ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1150"] .image-in{ --duration: 1150ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1150"] .image-in{ animation-delay: 1150ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1200"] .image-in{ --duration: 1200ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1200"] .image-in{ animation-delay: 1200ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1250"] .image-in{ --duration: 1250ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1250"] .image-in{ animation-delay: 1250ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1300"] .image-in{ --duration: 1300ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1300"] .image-in{ animation-delay: 1300ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1350"] .image-in{ --duration: 1350ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1350"] .image-in{ animation-delay: 1350ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1400"] .image-in{ --duration: 1400ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1400"] .image-in{ animation-delay: 1400ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1450"] .image-in{ --duration: 1450ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1450"] .image-in{ animation-delay: 1450ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-duration="1500"] .image-in{ --duration: 1500ms; } #MainContent .aos-initialized [data-aos=image-in][data-aos-delay="1500"] .image-in{ animation-delay: 1500ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="1"]{ animation-delay: 300ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="2"]{ animation-delay: 442.5ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="3"]{ animation-delay: 570ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="4"]{ animation-delay: 682.5ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="5"]{ animation-delay: 780ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="6"]{ animation-delay: 862.5ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="7"]{ animation-delay: 930ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="8"]{ animation-delay: 982.5ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="9"]{ animation-delay: 1020ms; } #MainContent .aos-initialized [data-aos=image-in]:has([data-aos=hero]) [data-aos-order="10"]{ animation-delay: 1042.5ms; } #MainContent .aos-initialized [data-aos=image-in] .image-in{ --duration: 0.8s; --easing: ease-in; animation-duration: var(--duration); animation-timing-function: var(--easing); animation-fill-mode: forwards; } #MainContent .aos-initialized [data-aos=image-in] .image-in--reveal{ --duration: 0.3s; --easing: ease-in-out; --move-offset: 100%; overflow: hidden; } #MainContent .aos-initialized [data-aos=image-in] .image-in--reveal a{ overflow: hidden; } #MainContent .aos-initialized [data-aos=image-in] .image-in--slide{ --duration: 0.4s; --easing: cubic-bezier(0.25, 0.6, 0.5, 0.95); } #MainContent .aos-initialized [data-aos=image-in] .image-in--wipe{ --duration: 0.5s; --easing: cubic-bezier(0.75, 0, 1, 0); } #MainContent .aos-initialized [data-aos=image-in] .image-in--zoom-out{ --scale-factor: 1.2; --duration: 0.9s; --easing: cubic-bezier(0.25, 0.6, 0.5, 0.95); transform: scale(var(--scale-factor)); transition: 0s; } #MainContent .aos-initialized [data-aos=image-in]:not(.aos-animate):has(img[loading].is-loading) .image-in--zoom-out{ transform: scale(var(--scale-factor)); } #MainContent .aos-initialized [data-aos=image-in]:not(.aos-animate):has(img[loading]:not(.is-loading)) .image-in{ opacity: 0.001; } #MainContent .aos-initialized [data-aos=image-in]:not(.aos-animate):has(img[loading]:not(.is-loading)) .image-in--zoom-out{ opacity: 1; transform: scale(var(--scale-factor)); } #MainContent .no-js .aos-initialized [data-aos=image-in]:has(img[loading]) .image-in, #MainContent .aos-initialized [data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading)) .image-in{ opacity: 0.001; animation-name: fadeIn; } #MainContent .no-js .aos-initialized [data-aos=image-in]:has(img[loading]) .image-in--reveal, #MainContent .aos-initialized [data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading)) .image-in--reveal{ animation-name: heroFade; } #MainContent .no-js .aos-initialized [data-aos=image-in]:has(img[loading]) .image-in--slide, #MainContent .aos-initialized [data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading)) .image-in--slide{ animation-name: fadeIn, imageInSlide; } #MainContent .no-js .aos-initialized [data-aos=image-in]:has(img[loading]) .image-in--wipe, #MainContent .aos-initialized [data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading)) .image-in--wipe{ animation-name: fadeIn, clipPathFromRight; } #MainContent .no-js .aos-initialized [data-aos=image-in]:has(img[loading]) .image-in--zoom-out, #MainContent .aos-initialized [data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading)) .image-in--zoom-out{ opacity: 1; animation-name: zoomOut; } @media only screen and (min-width: 768px) { #MainContent .aos-initialized .skeleton-loading:has([data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading))):has(img[loading]:not(.is-loading)) .image-in{ opacity: 0.001; animation-name: fadeIn; } #MainContent .aos-initialized .skeleton-loading:has([data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading))):has(img[loading]:not(.is-loading)) .image-in--reveal{ animation-name: heroFade; } #MainContent .aos-initialized .skeleton-loading:has([data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading))):has(img[loading]:not(.is-loading)) .image-in--slide{ animation-name: fadeIn, imageInSlide; } #MainContent .aos-initialized .skeleton-loading:has([data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading))):has(img[loading]:not(.is-loading)) .image-in--wipe{ animation-name: fadeIn, clipPathFromRight; } #MainContent .aos-initialized .skeleton-loading:has([data-aos=image-in].aos-animate:has(img[loading]:not(.is-loading))):has(img[loading]:not(.is-loading)) .image-in--zoom-out{ opacity: 1; animation-name: zoomOut; } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) [data-aos=image-in] .image-in{ opacity: 0.001; animation: none; } #MainContent .aos-initialized .skeleton-loading:has(img[loading].is-loading) [data-aos=image-in] .image-in--zoom-out{ opacity: 1; transform: scale(var(--scale-factor)); } } #MainContent .aos-initialized .products-list__item [data-aos]{ opacity: 0.001; } #MainContent .aos-initialized .products-list__item--active [data-aos].aos-animate{ opacity: 1; } #MainContent .aos-initialized .cart-drawer:not(.is-open) [data-aos]:not(.aos-animate), #MainContent .aos-initialized .products-list__item [data-aos]:not(.aos-animate), #MainContent .aos-initialized .tabs [data-aos]:not(.aos-animate){ transition-duration: 0s; transition-delay: 0s; } #MainContent .aos-initialized .product__media__holder{ will-change: transform; } #MainContent .aos-initialized .text-reveal__cropper{ --move-offset: 100%; display: block; overflow: hidden; } #MainContent .aos-initialized .text-reveal__cropper, #MainContent .aos-initialized .text-reveal__cropper > span{ display: block; } #MainContent .aos-initialized [data-aos=hero]{ opacity: 0.001; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: none; } #MainContent .no-js .aos-initialized [data-aos=hero]{ opacity: 1; } #MainContent .aos-initialized [data-aos=hero].aos-animate{ opacity: 1; animation-name: heroFade; animation-duration: 0.5s; animation-fill-mode: both; } #MainContent .aos-initialized [data-aos=heading].aos-animate{ -webkit-mask-image: linear-gradient(90deg, var(--text) 0%, var(--text) 20%, transparent 100%); mask-image: linear-gradient(90deg, var(--text) 0%, var(--text) 20%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 500%; mask-size: 500%; animation: headingFade 2s linear both; } #MainContent .aos-initialized [data-aos=when-active-animate-up]{ opacity: 0.001; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: none; } #MainContent .no-js .aos-initialized [data-aos=when-active-animate-up]{ opacity: 1; } #MainContent .aos-initialized .is-active [data-aos=when-active-animate-up].aos-animate{ opacity: 1; animation-name: whenActiveAnimateUp; animation-duration: 0.5s; animation-fill-mode: both; } #MainContent .aos-initialized [data-aos=come-in-from-right]{ opacity: 0.001; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: none; } #MainContent .no-js .aos-initialized [data-aos=come-in-from-right]{ opacity: 1; } #MainContent .aos-initialized [data-aos=come-in-from-right].aos-animate{ opacity: 1; animation-name: comeInFromRight; animation-duration: 0.5s; animation-fill-mode: both; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="1"]{ animation-delay: 500ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="2"]{ animation-delay: 646.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="3"]{ animation-delay: 785ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="4"]{ animation-delay: 916.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="5"]{ animation-delay: 1040ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="6"]{ animation-delay: 1156.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="7"]{ animation-delay: 1265ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="8"]{ animation-delay: 1366.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="9"]{ animation-delay: 1460ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="10"]{ animation-delay: 1546.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="11"]{ animation-delay: 1625ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="12"]{ animation-delay: 1696.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="13"]{ animation-delay: 1760ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="14"]{ animation-delay: 1816.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="15"]{ animation-delay: 1865ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="16"]{ animation-delay: 1906.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="17"]{ animation-delay: 1940ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="18"]{ animation-delay: 1966.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="19"]{ animation-delay: 1985ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items [data-aos-order="20"]{ animation-delay: 1996.25ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="1"]{ animation-delay: 0ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="2"]{ animation-delay: 48.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="3"]{ animation-delay: 95ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="4"]{ animation-delay: 138.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="5"]{ animation-delay: 180ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="6"]{ animation-delay: 218.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="7"]{ animation-delay: 255ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="8"]{ animation-delay: 288.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="9"]{ animation-delay: 320ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="10"]{ animation-delay: 348.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="11"]{ animation-delay: 375ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="12"]{ animation-delay: 398.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="13"]{ animation-delay: 420ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="14"]{ animation-delay: 438.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="15"]{ animation-delay: 455ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="16"]{ animation-delay: 468.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="17"]{ animation-delay: 480ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="18"]{ animation-delay: 488.75ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="19"]{ animation-delay: 495ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__items.is-updated [data-aos-order="20"]{ animation-delay: 495ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="1"]{ animation-delay: 350ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="2"]{ animation-delay: 450ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="3"]{ animation-delay: 550ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="4"]{ animation-delay: 650ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="5"]{ animation-delay: 750ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="6"]{ animation-delay: 850ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="7"]{ animation-delay: 950ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="8"]{ animation-delay: 1050ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="9"]{ animation-delay: 1150ms; } #MainContent .aos-initialized .cart-drawer .cart-drawer__empty-message [data-aos-order="10"]{ animation-delay: 1250ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="1"]{ animation-delay: 0ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="2"]{ animation-delay: 100ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="3"]{ animation-delay: 200ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="4"]{ animation-delay: 300ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="5"]{ animation-delay: 400ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="6"]{ animation-delay: 500ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="7"]{ animation-delay: 600ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="8"]{ animation-delay: 700ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="9"]{ animation-delay: 800ms; } #MainContent .aos-initialized .cart-drawer .is-updated + .cart-drawer__empty-message [data-aos-order="10"]{ animation-delay: 900ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="1"]{ animation-delay: 150ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="2"]{ animation-delay: 248.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="3"]{ animation-delay: 343.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="4"]{ animation-delay: 435ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="5"]{ animation-delay: 523.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="6"]{ animation-delay: 608.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="7"]{ animation-delay: 690ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="8"]{ animation-delay: 768.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="9"]{ animation-delay: 843.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="10"]{ animation-delay: 915ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="11"]{ animation-delay: 983.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="12"]{ animation-delay: 1048.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="13"]{ animation-delay: 1110ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="14"]{ animation-delay: 1168.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="15"]{ animation-delay: 1223.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="16"]{ animation-delay: 1275ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="17"]{ animation-delay: 1323.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="18"]{ animation-delay: 1368.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="19"]{ animation-delay: 1410ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="20"]{ animation-delay: 1448.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="21"]{ animation-delay: 1483.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="22"]{ animation-delay: 1515ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="23"]{ animation-delay: 1543.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="24"]{ animation-delay: 1568.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="25"]{ animation-delay: 1590ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="26"]{ animation-delay: 1608.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="27"]{ animation-delay: 1623.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="28"]{ animation-delay: 1635ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="29"]{ animation-delay: 1643.3333333333ms; } #MainContent .aos-initialized .cart .cart__inner [data-aos-order="30"]{ animation-delay: 1648.3333333333ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="1"]{ animation-delay: 0ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="2"]{ animation-delay: 48.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="3"]{ animation-delay: 95ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="4"]{ animation-delay: 138.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="5"]{ animation-delay: 180ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="6"]{ animation-delay: 218.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="7"]{ animation-delay: 255ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="8"]{ animation-delay: 288.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="9"]{ animation-delay: 320ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="10"]{ animation-delay: 348.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="11"]{ animation-delay: 375ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="12"]{ animation-delay: 398.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="13"]{ animation-delay: 420ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="14"]{ animation-delay: 438.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="15"]{ animation-delay: 455ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="16"]{ animation-delay: 468.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="17"]{ animation-delay: 480ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="18"]{ animation-delay: 488.75ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="19"]{ animation-delay: 495ms; } #MainContent .aos-initialized .cart .cart__items.is-updated [data-aos-order="20"]{ animation-delay: 495ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="1"]{ animation-delay: 150ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="2"]{ animation-delay: 250ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="3"]{ animation-delay: 350ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="4"]{ animation-delay: 450ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="5"]{ animation-delay: 550ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="6"]{ animation-delay: 650ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="7"]{ animation-delay: 750ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="8"]{ animation-delay: 850ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="9"]{ animation-delay: 950ms; } #MainContent .aos-initialized .cart .cart__empty [data-aos-order="10"]{ animation-delay: 1050ms; } #MainContent .aos-initialized .cart [data-aos].cart__item.is-removed, #MainContent .aos-initialized .cart-drawer [data-aos].cart__item.is-removed{ animation-delay: 0ms; animation: cartItemRemoved 0.5s ease; animation-fill-mode: forwards; } #MainContent .aos-initialized #resultsPages [data-aos-order="1"]{ animation-delay: 150ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="2"]{ animation-delay: 247.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="3"]{ animation-delay: 340ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="4"]{ animation-delay: 427.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="5"]{ animation-delay: 510ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="6"]{ animation-delay: 587.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="7"]{ animation-delay: 660ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="8"]{ animation-delay: 727.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="9"]{ animation-delay: 790ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="10"]{ animation-delay: 847.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="11"]{ animation-delay: 900ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="12"]{ animation-delay: 947.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="13"]{ animation-delay: 990ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="14"]{ animation-delay: 1027.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="15"]{ animation-delay: 1060ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="16"]{ animation-delay: 1087.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="17"]{ animation-delay: 1110ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="18"]{ animation-delay: 1127.5ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="19"]{ animation-delay: 1140ms; } #MainContent .aos-initialized #resultsPages [data-aos-order="20"]{ animation-delay: 1147.5ms; } #MainContent .aos-initialized .slider [data-aos=hero]{ opacity: 0.001; animation-duration: 0.6s; animation-name: none; transition: none; } #MainContent .no-js .aos-initialized .slider .item [data-aos=hero].aos-animate, #MainContent .aos-initialized .slider.img-in .item:only-of-type [data-aos=hero].aos-animate, #MainContent .aos-initialized .slider.flickity-enabled.img-in .item.is-selected [data-aos=hero].aos-animate{ opacity: 1; animation-name: heroFade; } #MainContent .aos-initialized .banner-image [data-aos=hero]{ opacity: 0.001; animation-duration: 0.6s; animation-name: none; transition: none; } #MainContent .no-js .aos-initialized .banner-image .banner-image__inner [data-aos=hero].aos-animate, #MainContent .aos-initialized .banner-image.img-in .banner-image__inner [data-aos=hero].aos-animate{ opacity: 1; animation-name: heroFade; } #MainContent .aos-initialized .promotion-row [data-aos=hero]{ opacity: 0.001; animation-duration: 0.6s; animation-name: none; transition: none; } #MainContent .no-js .aos-initialized .promotion-row .promotion-row__inner [data-aos=hero].aos-animate, #MainContent .aos-initialized .promotion-row.aos-animate .promotion-row__inner [data-aos=hero].aos-animate{ opacity: 1; animation-name: heroFade; } #MainContent .aos-initialized .promotion-row.aos-animate .promotion-row__item__heading:has(text-count-up) [data-aos=hero], #MainContent .aos-initialized .promotion-row.aos-animate .promotion-row__item__heading:has(text-count-up) [data-aos=hero].aos-animate{ opacity: 1; animation-name: fadeIn; animation-delay: 0.1s; } #MainContent .aos-initialized .banner-image--slide [data-aos-order="1"], #MainContent .aos-initialized .slider--slide [data-aos-order="1"]{ animation-delay: 300ms; } #MainContent .aos-initialized .banner-image--slide [data-aos-order="2"], #MainContent .aos-initialized .slider--slide [data-aos-order="2"]{ animation-delay: 300ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="1"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="1"]{ animation-delay: 200ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="2"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="2"]{ animation-delay: 342.5ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="3"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="3"]{ animation-delay: 470ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="4"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="4"]{ animation-delay: 582.5ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="5"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="5"]{ animation-delay: 680ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="6"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="6"]{ animation-delay: 762.5ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="7"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="7"]{ animation-delay: 830ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="8"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="8"]{ animation-delay: 882.5ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="9"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="9"]{ animation-delay: 920ms; } #MainContent .aos-initialized .banner-image--slide .banner-image__heading [data-aos-order="10"], #MainContent .aos-initialized .slider--slide .slide__heading [data-aos-order="10"]{ animation-delay: 942.5ms; } #MainContent .aos-initialized .banner-image--slide .countdown-timer [data-aos-order="1"]{ animation-delay: 300ms; } #MainContent .aos-initialized .banner-image--slide .countdown-timer [data-aos-order="2"]{ animation-delay: 435ms; } #MainContent .aos-initialized .banner-image--slide .countdown-timer [data-aos-order="3"]{ animation-delay: 540ms; } #MainContent .aos-initialized .banner-image--slide .countdown-timer [data-aos-order="4"]{ animation-delay: 615ms; } #MainContent .aos-initialized .banner-image--slide .countdown-timer [data-aos-order="5"]{ animation-delay: 660ms; } #MainContent .aos-initialized .banner-image--fade [data-aos-order="1"], #MainContent .aos-initialized .slider--fade [data-aos-order="1"]{ animation-delay: 350ms; } #MainContent .aos-initialized .banner-image--fade [data-aos-order="2"], #MainContent .aos-initialized .slider--fade [data-aos-order="2"]{ animation-delay: 350ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="1"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="1"]{ animation-delay: 250ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="2"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="2"]{ animation-delay: 392.5ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="3"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="3"]{ animation-delay: 520ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="4"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="4"]{ animation-delay: 632.5ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="5"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="5"]{ animation-delay: 730ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="6"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="6"]{ animation-delay: 812.5ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="7"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="7"]{ animation-delay: 880ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="8"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="8"]{ animation-delay: 932.5ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="9"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="9"]{ animation-delay: 970ms; } #MainContent .aos-initialized .banner-image--fade .banner-image__heading [data-aos-order="10"], #MainContent .aos-initialized .slider--fade .slide__heading [data-aos-order="10"]{ animation-delay: 992.5ms; } #MainContent .aos-initialized .banner-image--fade .countdown-timer [data-aos-order="1"]{ animation-delay: 350ms; } #MainContent .aos-initialized .banner-image--fade .countdown-timer [data-aos-order="2"]{ animation-delay: 485ms; } #MainContent .aos-initialized .banner-image--fade .countdown-timer [data-aos-order="3"]{ animation-delay: 590ms; } #MainContent .aos-initialized .banner-image--fade .countdown-timer [data-aos-order="4"]{ animation-delay: 665ms; } #MainContent .aos-initialized .banner-image--fade .countdown-timer [data-aos-order="5"]{ animation-delay: 710ms; } #MainContent .aos-initialized .promotion-row [data-aos-order="1"], #MainContent .aos-initialized .split-images-section [data-aos-order="1"], #MainContent .aos-initialized .banner-image--zoom-out [data-aos-order="1"], #MainContent .aos-initialized .slider--zoom-out [data-aos-order="1"]{ animation-delay: 250ms; } #MainContent .aos-initialized .promotion-row [data-aos-order="2"], #MainContent .aos-initialized .split-images-section [data-aos-order="2"], #MainContent .aos-initialized .banner-image--zoom-out [data-aos-order="2"], #MainContent .aos-initialized .slider--zoom-out [data-aos-order="2"]{ animation-delay: 250ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="1"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="1"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="1"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="1"]{ animation-delay: 150ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="2"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="2"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="2"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="2"]{ animation-delay: 292.5ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="3"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="3"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="3"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="3"]{ animation-delay: 420ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="4"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="4"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="4"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="4"]{ animation-delay: 532.5ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="5"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="5"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="5"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="5"]{ animation-delay: 630ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="6"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="6"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="6"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="6"]{ animation-delay: 712.5ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="7"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="7"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="7"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="7"]{ animation-delay: 780ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="8"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="8"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="8"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="8"]{ animation-delay: 832.5ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="9"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="9"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="9"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="9"]{ animation-delay: 870ms; } #MainContent .aos-initialized .promotion-row .promotion-row__item__heading [data-aos-order="10"], #MainContent .aos-initialized .split-images-section .split-images__heading [data-aos-order="10"], #MainContent .aos-initialized .banner-image--zoom-out .banner-image__heading [data-aos-order="10"], #MainContent .aos-initialized .slider--zoom-out .slide__heading [data-aos-order="10"]{ animation-delay: 892.5ms; } #MainContent .aos-initialized .banner-image--zoom-out .countdown-timer [data-aos-order="1"]{ animation-delay: 250ms; } #MainContent .aos-initialized .banner-image--zoom-out .countdown-timer [data-aos-order="2"]{ animation-delay: 385ms; } #MainContent .aos-initialized .banner-image--zoom-out .countdown-timer [data-aos-order="3"]{ animation-delay: 490ms; } #MainContent .aos-initialized .banner-image--zoom-out .countdown-timer [data-aos-order="4"]{ animation-delay: 565ms; } #MainContent .aos-initialized .banner-image--zoom-out .countdown-timer [data-aos-order="5"]{ animation-delay: 610ms; } #MainContent .aos-initialized .banner-image--wipe [data-aos-order="1"], #MainContent .aos-initialized .slider--wipe [data-aos-order="1"]{ animation-delay: 500ms; } #MainContent .aos-initialized .banner-image--wipe [data-aos-order="2"], #MainContent .aos-initialized .slider--wipe [data-aos-order="2"]{ animation-delay: 500ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="1"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="1"]{ animation-delay: 400ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="2"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="2"]{ animation-delay: 542.5ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="3"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="3"]{ animation-delay: 670ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="4"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="4"]{ animation-delay: 782.5ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="5"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="5"]{ animation-delay: 880ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="6"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="6"]{ animation-delay: 962.5ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="7"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="7"]{ animation-delay: 1030ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="8"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="8"]{ animation-delay: 1082.5ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="9"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="9"]{ animation-delay: 1120ms; } #MainContent .aos-initialized .banner-image--wipe .banner-image__heading [data-aos-order="10"], #MainContent .aos-initialized .slider--wipe .slide__heading [data-aos-order="10"]{ animation-delay: 1142.5ms; } #MainContent .aos-initialized .banner-image--wipe .countdown-timer [data-aos-order="1"]{ animation-delay: 500ms; } #MainContent .aos-initialized .banner-image--wipe .countdown-timer [data-aos-order="2"]{ animation-delay: 635ms; } #MainContent .aos-initialized .banner-image--wipe .countdown-timer [data-aos-order="3"]{ animation-delay: 740ms; } #MainContent .aos-initialized .banner-image--wipe .countdown-timer [data-aos-order="4"]{ animation-delay: 815ms; } #MainContent .aos-initialized .banner-image--wipe .countdown-timer [data-aos-order="5"]{ animation-delay: 860ms; } #MainContent .aos-initialized .countdown [data-aos-order="1"]{ animation-delay: 150ms; } #MainContent .aos-initialized .countdown [data-aos-order="2"]{ animation-delay: 324ms; } #MainContent .aos-initialized .countdown [data-aos-order="3"]{ animation-delay: 486ms; } #MainContent .aos-initialized .countdown [data-aos-order="4"]{ animation-delay: 636ms; } #MainContent .aos-initialized .countdown [data-aos-order="5"]{ animation-delay: 774ms; } #MainContent .aos-initialized .countdown [data-aos-order="6"]{ animation-delay: 900ms; } #MainContent .aos-initialized .countdown [data-aos-order="7"]{ animation-delay: 1014ms; } #MainContent .aos-initialized .countdown [data-aos-order="8"]{ animation-delay: 1116ms; } #MainContent .aos-initialized .countdown [data-aos-order="9"]{ animation-delay: 1206ms; } #MainContent .aos-initialized .countdown [data-aos-order="10"]{ animation-delay: 1284ms; } #MainContent .aos-initialized .countdown [data-aos-order="11"]{ animation-delay: 1350ms; } #MainContent .aos-initialized .countdown [data-aos-order="12"]{ animation-delay: 1404ms; } #MainContent .aos-initialized .countdown [data-aos-order="13"]{ animation-delay: 1446ms; } #MainContent .aos-initialized .countdown [data-aos-order="14"]{ animation-delay: 1476ms; } #MainContent .aos-initialized .countdown [data-aos-order="15"]{ animation-delay: 1494ms; } #MainContent .aos-initialized .promotion-row__item__heading [data-aos=hero], #MainContent .aos-initialized .split-images__heading [data-aos=hero], #MainContent .aos-initialized .slide__heading [data-aos=hero], #MainContent .aos-initialized .banner-image__heading [data-aos=hero]{ animation-duration: 0.7s; animation-timing-function: ease-in-out; } @keyframes heroFade { from { opacity: 0.001; transform: translate3d(0, var(--move-offset), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes headingFade { 0% { -webkit-mask-size: 0%; mask-size: 0%; } 100% { -webkit-mask-size: 500%; mask-size: 500%; } } @keyframes comeInFromRight { from { opacity: 0.001; transform: translate3d(var(--move-offset), 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes whenActiveAnimateUp { from { opacity: 0.001; transform: translate3d(0, var(--move-offset), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media only screen and (max-width: 767px) { #MainContent [data-aos]:not([data-aos=hero]){ opacity: 1 !important; transform: none !important; } } #MainContent .no-js .aos-initialized [data-aos][data-aos]{ opacity: 1; transform: none; } /*================ Flickity v2.2.2 ================*/ /* https://flickity.metafizzy.co */ #MainContent .flickity-enabled{ position: relative; } #MainContent .flickity-viewport{ overflow: hidden; position: relative; } #MainContent .flickity-slider{ position: absolute; width: 100%; height: 100%; } #MainContent .flickity-enabled.is-draggable{ -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } #MainContent .flickity-enabled.is-draggable .flickity-viewport{ cursor: move; cursor: grab; } #MainContent .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{ cursor: grabbing; } #MainContent .flickity-button{ position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; } #MainContent .flickity-button:hover{ background: white; cursor: pointer; } #MainContent .flickity-button:focus{ outline: none; box-shadow: 0 0 0 5px #19F; } #MainContent .flickity-button:active{ opacity: 0.6; } #MainContent .flickity-button:disabled{ opacity: 0.3; cursor: auto; pointer-events: none; } #MainContent .flickity-button-icon{ fill: currentColor; } #MainContent .flickity-prev-next-button{ top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-50%); } #MainContent .flickity-prev-next-button.previous{ left: 10px; } #MainContent .flickity-prev-next-button.next{ right: 10px; } #MainContent .flickity-rtl .flickity-prev-next-button.previous{ left: auto; right: 10px; } #MainContent .flickity-rtl .flickity-prev-next-button.next{ right: auto; left: 10px; } #MainContent .flickity-page-dots{ position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } #MainContent .flickity-rtl .flickity-page-dots{ direction: rtl; } #MainContent .flickity-page-dots .dot{ display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } #MainContent .flickity-page-dots .dot.is-selected{ opacity: 1; } #MainContent .flickity-enabled.is-fade .flickity-slider > *{ pointer-events: none; z-index: 0; opacity: 0.001 !important; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s; } #MainContent .flickity-enabled.is-fade .flickity-slider > .is-selected{ pointer-events: auto; z-index: 1; opacity: 1 !important; visibility: visible; } #MainContent{ --flickity-btn-size: 40px; --flickity-btn-position: 10px; } @media only screen and (min-width: 1024px) { #MainContent{ --flickity-btn-position: calc(var(--flickity-btn-size) / -2); } } #MainContent .flickity-viewport{ transition: height 0.2s ease; } #MainContent .flickity-button{ background-color: transparent; } #MainContent .flickity-button:disabled{ opacity: 0; } #MainContent .flickity-page-dots{ pointer-events: none; } #MainContent .flickity-page-dots .dot{ border: var(--BORDER-WIDTH) solid var(--text); background-color: transparent; transition: border 0.5s ease, width 0.5s ease, opacity 0.5s ease; border-radius: 5px; pointer-events: auto; } #MainContent .flickity-page-dots .dot.is-selected{ width: 25px; } #MainContent .flickity-page-dots .dot:only-child{ visibility: hidden; } #MainContent .flickity-button-icon{ display: none; } #MainContent .flickity-prev-next-button, #MainContent .pswp__button--arrow--left, #MainContent .pswp__button--arrow--right{ width: var(--flickity-btn-size); height: var(--flickity-btn-size); color: var(--text); background: var(--bg); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 1px 5px rgba(0, 0, 0, 0.06); transform: translateY(-50%); transform-origin: top; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; border-radius: 50%; transform-origin: top; transition: opacity 0.2s ease, transform 0.25s ease-out, visibility 0s linear 0.2s; } #MainContent .flickity-prev-next-button:hover, #MainContent .pswp__button--arrow--left:hover, #MainContent .pswp__button--arrow--right:hover{ background: var(--bg); transform: scale(1.12) translateY(-50%); } #MainContent .pswp__button--arrow--left{ left: var(--flickity-btn-position); } #MainContent .pswp__button--arrow--right{ right: var(--flickity-btn-position); } #MainContent .flickity-prev-next-button.previous{ left: var(--flickity-btn-position); } #MainContent .flickity-prev-next-button.next{ right: var(--flickity-btn-position); } #MainContent .flickity-prev-next-button{ --icon-size: 18px; opacity: 0; transform: scale(0) translateY(-50%); visibility: hidden; } #MainContent .pswp__button{ --icon-size: 18px; opacity: 1; visibility: visible; } #MainContent .flickity-prev-next-button:before, #MainContent .pswp__button:before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: var(--icon-size); height: var(--icon-size); background: var(--text); -webkit-mask-size: var(--icon-size); mask-size: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; max-width: 100%; max-height: 100%; } #MainContent .pswp__button--close:before{ content: none; } #MainContent .flickity-prev-next-button.previous:before, #MainContent .pswp__button--arrow--left:before{ -webkit-mask-image: var(--ICON-ARROW-RIGHT); mask-image: var(--ICON-ARROW-RIGHT); transform: rotate(180deg); } #MainContent .flickity-prev-next-button.next:before, #MainContent .pswp__button--arrow--right:before{ -webkit-mask-image: var(--ICON-ARROW-RIGHT); mask-image: var(--ICON-ARROW-RIGHT); } #MainContent .supports-touch .flickity-prev-next-button:not(:disabled), #MainContent .flickity-enabled:hover > .flickity-prev-next-button:not(:disabled), #MainContent .flickity-enabled:hover .flickity-button-holder .flickity-prev-next-button:not(:disabled), #MainContent section:hover .flickity-enabled > .flickity-prev-next-button:not(:disabled){ opacity: 1; visibility: visible; transform: scale(1) translateY(-50%); transition-delay: 0s; } #MainContent .supports-touch .flickity-prev-next-button:not(:disabled):hover, #MainContent .flickity-enabled:hover > .flickity-prev-next-button:not(:disabled):hover, #MainContent .flickity-enabled:hover .flickity-button-holder .flickity-prev-next-button:not(:disabled):hover, #MainContent section:hover .flickity-enabled > .flickity-prev-next-button:not(:disabled):hover{ transform: scale(1.12) translateY(-50%); } #MainContent .flickity-prev-next-button{ opacity: 1; visibility: visible; transform: none; } #MainContent .flickity-button:focus{ box-shadow: 0 0 0 5px #19F; } #MainContent .shopify-model-viewer-ui{ position: relative; display: inline-block; cursor: pointer; } #MainContent .shopify-model-viewer-ui model-viewer{ transform: translateZ(0); z-index: 1; } #MainContent .shopify-model-viewer-ui model-viewer.shopify-model-viewer-ui__disabled{ pointer-events: none; } #MainContent .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen model-viewer{ position: relative; width: 100vw; height: 100vh; } #MainContent .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen{ display: block; } #MainContent .shopify-model-viewer-ui.shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen{ display: none; } #MainContent .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop:hover .shopify-model-viewer-ui__controls-area, #MainContent .shopify-model-viewer-ui.shopify-model-viewer-ui--desktop.shopify-model-viewer-ui--child-focused .shopify-model-viewer-ui__controls-area{ opacity: 1; } #MainContent .shopify-model-viewer-ui:not(.shopify-model-viewer-ui--desktop) .shopify-model-viewer-ui__controls-area{ display: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-overlay{ position: absolute; width: 100%; height: 100%; top: 0; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area{ display: flex; flex-direction: column; background: var(--COLOR-BG); opacity: 0; border: var(--BORDER-WIDTH) solid var(--text-alpha-5); position: absolute; bottom: 10px; right: 10px; z-index: 1; transition: opacity 0.1s linear; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area:not(.shopify-model-viewer-ui__controls-area--playing){ display: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button{ color: var(--text); border-radius: 0; border: none; margin: 0px; cursor: pointer; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button:not(.focus-visible){ outline: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control{ padding: 0px; height: 44px; width: 44px; background: transparent; position: relative; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover{ color: var(--text-alpha-50); } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus{ color: var(--text-alpha-50); background: var(--text-alpha-5); } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after{ position: absolute; content: ""; border-bottom: var(--BORDER-WIDTH) solid var(--text-alpha-5); width: 28px; bottom: 0px; right: 8px; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon{ width: 44px; height: 44px; fill: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster{ background: var(--COLOR-BG); position: absolute; border: 1px solid var(--text-alpha-5); top: 50%; left: 50%; padding: 0; transform: translate3d(-50%, -50%, 0); height: 62px; width: 62px; z-index: 1; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus{ color: var(--text-alpha-50); } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__poster-control-icon{ width: 60px; height: 60px; z-index: 1; fill: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--exit-fullscreen{ display: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__control-icon--enter-fullscreen{ display: block; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__spritesheet{ display: none; } #MainContent .shopify-model-viewer-ui .shopify-model-viewer-ui__sr-only{ border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } #MainContent model-viewer:focus, #MainContent model-viewer.focus-visible{ outline: -webkit-focus-ring-color auto 5px; } /*================ PhotoSwipe ================*/ /* by Dmitry Semenov | photoswipe.com | MIT license */ #MainContent .pswp{ display: none; position: absolute; width: 100%; height: 100vh; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: none; } #MainContent .pswp *{ box-sizing: border-box; } #MainContent .pswp img{ max-width: none; } #MainContent .pswp__custom-native video{ width: 100%; height: auto; } #MainContent .pswp--animate_opacity{ opacity: 0.001; will-change: opacity; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } #MainContent .pswp--open{ display: block; } #MainContent .pswp--zoom-allowed .pswp__img{ cursor: zoom-in; cursor: var(--icon-zoom-in), zoom-in; } #MainContent .pswp--zoomed-in .pswp__img{ cursor: zoom-out; cursor: var(--icon-zoom-out), zoom-out; } #MainContent .pswp--dragging .pswp__img{ cursor: grabbing; cursor: -webkit-grabbing; } #MainContent .pswp__bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } #MainContent .pswp__scroll-wrap{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } #MainContent .pswp__container, #MainContent .pswp__zoom-wrap{ touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #MainContent .pswp__container, #MainContent .pswp__img{ -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } #MainContent .pswp__zoom-wrap{ position: absolute; width: 100%; transform-origin: left top; transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } #MainContent .pswp__bg{ will-change: opacity; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } #MainContent .pswp--animated-in .pswp__bg, #MainContent .pswp--animated-in .pswp__zoom-wrap{ transition: none; } #MainContent .pswp__container, #MainContent .pswp__zoom-wrap{ -webkit-backface-visibility: hidden; } #MainContent .pswp__item{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } #MainContent .pswp__img{ position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ #MainContent .pswp__img--placeholder{ -webkit-backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ #MainContent .pswp__img--placeholder--blank{ background: #222; } #MainContent .pswp--ie .pswp__img{ width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ #MainContent .pswp__error-msg{ position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: calc(14px * var(--FONT-ADJUST-BODY)); line-height: 16px; margin-top: -8px; color: #CCC; } #MainContent .pswp__error-msg a{ color: #CCC; text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } /*================ Blog post item ================*/ #MainContent .blog__post{ padding-left: 0; padding-right: 0; --grid-mobile: repeat(1, minmax(0, 1fr)); } @media only screen and (min-width: 768px) { #MainContent .blog__post{ --grid: repeat(1, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { #MainContent .blog__post--two-col{ --grid: repeat(2, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { #MainContent .blog__post--three-col{ --grid: repeat(3, minmax(0, 1fr)); } } @media only screen and (min-width: 768px) { #MainContent .blog__post--four-col{ --grid: repeat(3, minmax(0, 1fr)); } } @media only screen and (min-width: 1024px) { #MainContent .blog__post--four-col{ --grid: repeat(4, minmax(0, 1fr)); } } #MainContent .blog--standard .blog__post-image-link{ margin-bottom: 16px; } #MainContent .blog__post-item{ word-break: break-word; } #MainContent .blog__post-image-link{ position: relative; padding-top: var(--image-height); display: block; overflow: hidden; } #MainContent .blog__post-image{ z-index: 0; background: unset; } #MainContent .blog__post-excerpt-link{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } #MainContent .blog__post-comments{ margin-bottom: 0; } #MainContent .blog__comments-link{ color: var(--text); } #MainContent .blog__post-image--accent{ background: var(--accent); } #MainContent .blog__post-image--default{ background: var(--text-alpha-25); } #MainContent .blog__post-tags a:after{ content: ","; } #MainContent .blog__post-tags a:last-child:after{ content: none; } #MainContent .blog__post-overlay{ display: none; } #MainContent .blog__post-tags{ margin-bottom: 16px; line-height: 1.25; } @media (hover: hover) { #MainContent .blog__post-tags-link:hover, #MainContent .blog__comments-link:hover{ text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } } #MainContent .blog__post-title, #MainContent .blog__post-meta{ margin: 0 0 8px; } @media only screen and (max-width: 479px) { #MainContent .blog--photo .blog__post-meta > *{ display: block; } } #MainContent .blog__post-meta > *:not(:last-child):after{ content: "•"; padding: 0 7px; } @media only screen and (max-width: 479px) { #MainContent .blog--photo .blog__post-meta > *:not(:last-child):after{ display: none; } } #MainContent .blog__post-meta{ line-height: 1.25; } #MainContent .blog--photo .blog__post-title{ margin-bottom: 12px; } #MainContent .blog--photo .blog__post-item{ position: relative; overflow: hidden; } #MainContent .blog--photo .blog__post-excerpt-link{ display: none; } #MainContent .blog--photo .blog__post-content{ position: absolute; padding: calc(var(--gutter) / 3); bottom: 0; left: 0; right: 0; pointer-events: none; } #MainContent .blog--photo .blog__post-content a{ pointer-events: auto; } #MainContent .blog--photo .blog__post-overlay{ display: block; position: absolute; width: 100%; height: 100%; top: 0%; left: 0%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); } #MainContent .blog--photo .blog__post-meta{ margin-bottom: 0; } #MainContent .blog--photo .blog__post-content, #MainContent .blog--photo .blog__post-title-link, #MainContent .blog--photo .blog__post-tags-link, #MainContent .blog--photo .blog__post-comments a{ color: var(--white); } @media only screen and (min-width: 480px) and (max-width: 1280px) { #MainContent .blog--photo .collection__products .one-third .blog__post-title, #MainContent .blog--photo .collection__products .one-quarter .blog__post-title{ margin-bottom: 10px; font-size: calc(18.56px * var(--adjust-heading)); } #MainContent .blog--photo .collection__products .one-third .blog__post-tags, #MainContent .blog--photo .collection__products .one-quarter .blog__post-tags{ margin-bottom: 10px; font-size: calc(12px * var(--adjust-body)); } #MainContent .blog--photo .collection__products .one-third .blog__post-meta, #MainContent .blog--photo .collection__products .one-quarter .blog__post-meta{ font-size: calc(12px * var(--adjust-body)); } #MainContent .blog--photo .collection__products .one-third .blog__post-meta > *, #MainContent .blog--photo .collection__products .one-quarter .blog__post-meta > *{ display: block; } #MainContent .blog--photo .collection__products .one-third .blog__post-meta > *:not(:last-child):after, #MainContent .blog--photo .collection__products .one-quarter .blog__post-meta > *:not(:last-child):after{ display: none; } #MainContent .blog--photo .collection__products .one-third .blog__post-content, #MainContent .blog--photo .collection__products .one-quarter .blog__post-content{ padding: calc(var(--gutter) / 4); } } @media only screen and (max-width: 479px) { #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-title{ margin-bottom: 10px; font-size: calc(18.56px * var(--adjust-heading)); } #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-tags{ margin-bottom: 10px; font-size: calc(12px * var(--adjust-body)); } #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-meta{ font-size: calc(12px * var(--adjust-body)); } #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-meta > *{ display: block; } #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-meta > *:not(:last-child):after{ display: none; } #MainContent .blog--photo .collection__products .mobile--one-half .blog__post-content{ padding: calc(var(--gutter) / 4); } } #MainContent .body--rounded-corners .blog__post-overlay, #MainContent .body--rounded-corners .blog--photo .blog__post-item, #MainContent .body--rounded-corners .blog__post-item .background-size-cover, #MainContent .body--rounded-corners .blog__post-image-link{ border-radius: var(--radius); overflow: hidden; } #MainContent .body--rounded-corners .blog__post-image-link{ transform: translateZ(0); } #MainContent .blog--photo .blog__post-item:focus-within, #MainContent .blog__post-image-link:focus .blog__post-image{ outline: -webkit-focus-ring-color auto 5px; } /*================ Breadcrumbs ================*/ #MainContent .breadcrumbs{ display: flex; flex-wrap: wrap; font-size: calc(14px * var(--adjust-body)); } #MainContent .breadcrumbs__link, #MainContent .breadcrumbs__sep{ margin-right: 7px; } /*================ Card scrolling effect ================*/ #MainContent{ --offset: 100px; --sticky-top: 0; } #MainContent{ --sticky-top: var(--header-sticky-height); } #MainContent .main-content > .shopify-section:first-child{ --sticky-top: 0; } #MainContent .shopify-section:has(.card-scrolling-effect){ position: sticky; top: var(--sticky-top); } #MainContent .shopify-section:has(.card-scrolling-effect).sticky-top-zero{ top: 0; } #MainContent .shopify-section:has(.card-scrolling-effect).card-scrolling-hidden{ opacity: 0; visibility: hidden; } #MainContent .shopify-section:has(.card-scrolling-effect).slideshow{ background-color: var(--bg); } #MainContent .shopify-section:has(.card-scrolling-effect):not(:last-child) .item, #MainContent .shopify-section:has(.card-scrolling-effect):not(:last-child) .banner-image__text-container{ padding-bottom: var(--offset); } #MainContent .shopify-section:has(.card-scrolling-effect):not(:last-child) .flickity-page-dots{ bottom: calc(10px + var(--offset)); } #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section{ top: 1px; margin-top: calc(var(--offset) * -1); } #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section:has(.card-scrolling-effect){ top: var(--sticky-top); } #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:not(:has(.card-scrolling-effect)){ position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--bg); transform: translateZ(0); } #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:not(:has(.card-scrolling-effect)) .recent-products, #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:not(:has(.card-scrolling-effect)) .related-products, #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:not(:has(.card-scrolling-effect)) .section-marquee, #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:not(:has(.card-scrolling-effect)) section{ background: var(--bg); } #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:has(.collection__filters), #MainContent .main-content > .shopify-section:has(.card-scrolling-effect) ~ .shopify-section:has(.drawer){ transform: none; } #MainContent .shopify-section:has(.card-scrolling-effect) .card-scrolling-effect:after{ content: ""; z-index: 101; position: absolute; inset: 0; background: var(--COLOR-BLACK-WHITE-ALPHA-34); pointer-events: none; opacity: var(--card-scrolling-overlay, 0); } #MainContent .body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section{ --card-scrolling-radius: calc(var(--radius) * 2); border-radius: var(--card-scrolling-radius) var(--card-scrolling-radius) 0 0; contain: paint; } #MainContent .body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section:has(.collection__filters), #MainContent .body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect) + .shopify-section:has(.drawer){ contain: none; overflow: clip; } #MainContent .body--rounded-corners .main-content > .shopify-section:has(.card-scrolling-effect--rounded-large) + .shopify-section{ --card-scrolling-radius: 34px; } /*================ Cart collections ================*/ #MainContent .cart-collections{ width: var(--drawer-width); max-width: 100%; margin: var(--inner) auto 0; } #MainContent .cart-drawer__empty-message .cart-collections{ width: 100%; } #MainContent .cart-collections__inner{ display: flex; flex-flow: row wrap; margin: 0 calc(-1 * var(--grid-gutter) / 4); } #MainContent .cart-collection{ width: 50%; padding: calc(var(--grid-gutter) / 4); text-align: left; } #MainContent .cart-collection.one-whole{ width: 100%; } #MainContent .cart-collection__link{ position: relative; display: block; } #MainContent .cart-collection__image{ padding-top: 100%; position: relative; } #MainContent .one-whole .cart-collection__image{ padding-top: 50%; } #MainContent .cart-collection__title{ margin: calc(var(--inner) / 2) 0; color: var(--text); } #MainContent .cart-collection--overlay-text .cart-collection__title{ --icon-size: 18px; position: absolute; left: calc(var(--inner) / 2); right: calc(var(--inner) / 2); bottom: calc(var(--inner) / 2); z-index: 3; margin: 0; padding-right: calc(var(--icon-size) + 10px); } #MainContent .cart-collection--overlay-text .cart-collection__title:after{ content: ""; position: absolute; right: 0; bottom: 0; margin: auto; width: var(--icon-size); height: var(--icon-size); background: var(--text); max-width: 100%; max-height: 100%; -webkit-mask: var(--ICON-ARROW-RIGHT) center center/var(--icon-size) no-repeat; mask: var(--ICON-ARROW-RIGHT) center center/var(--icon-size) no-repeat; } #MainContent .one-whole.cart-collection--overlay-text .cart-collection__title{ --icon-size: 30px; --heading-size: calc(32px * var(--adjust-heading)); left: var(--inner); right: var(--inner); bottom: var(--inner); } @media only screen and (max-width: 1439px) { #MainContent .one-whole.cart-collection--overlay-text .cart-collection__title{ --heading-size: calc(28.8px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .one-whole.cart-collection--overlay-text .cart-collection__title{ --heading-size: calc(27.2px * var(--adjust-heading)); } } #MainContent .body--rounded-corners .cart-collection__image, #MainContent .body--rounded-corners .cart-collection--overlay-text .cart-collection__link{ border-radius: var(--radius); overflow: hidden; } /*================ Cart Drawer ================*/ @media only screen and (max-width: 479px) { #MainContent{ --drawer-width: 100vw; } } #MainContent .cart-drawer{ will-change: transform; overflow-y: auto; overflow-x: hidden; position: fixed; top: 0; bottom: 0; max-width: 95%; min-width: 320px; z-index: 9999; display: flex; flex-direction: column; height: 100%; width: var(--drawer-width); left: 100vw; background-color: var(--bg); visibility: hidden; opacity: 0; transition: transform 0.4s ease-in-out, visibility 0s linear 0.4s, opacity 1s; transition-behavior: allow-discrete; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .cart-drawer::-webkit-scrollbar{ display: none; } @media only screen and (max-width: 479px) { #MainContent .cart-drawer{ max-width: 100%; } } #MainContent .cart-drawer.is-loading .cart__item a{ pointer-events: none; } #MainContent .cart-drawer .cart__item__price del{ display: block; } #MainContent .cart-drawer .cart__item__price ins{ margin-right: 0; } #MainContent .cart-drawer .cart__discounts{ margin-bottom: var(--inner); } #MainContent .cart-drawer .cart__discounts .cart__total{ font-weight: inherit; } #MainContent .cart-drawer .cart__total__money:before{ content: "•"; margin: 0 5px; } #MainContent .cart-drawer .loader--line{ position: absolute; top: 0; } #MainContent .js-drawer-open-cart .cart-drawer{ content-visibility: visible; visibility: visible; opacity: 1; transform: translateX(calc(-1 * var(--drawer-width))); transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1), visibility 0s linear, opacity 0.4s; transition-behavior: allow-discrete; } #MainContent .cart-drawer__head{ position: relative; display: block; width: 100%; padding: calc(var(--inner) / 2) var(--inner); border-bottom: var(--BORDER-WIDTH) solid var(--text); } #MainContent .cart-drawer__head h3{ font-weight: var(--FONT-WEIGHT-HEADING-BOLD); font-size: calc(32px * var(--adjust-heading)); margin: 0 30px 0 0; display: grid; grid-template-columns: min-content auto; gap: 5px; align-items: center; } #MainContent .cart-drawer__item-qty{ display: inline-block; vertical-align: middle; font-size: calc(13.04px * var(--adjust-heading)); text-transform: none; } #MainContent .cart-drawer__item-qty:before{ content: "  ("; } #MainContent .cart-drawer__item-qty:after{ content: ")"; } #MainContent .cart-drawer__close{ position: absolute; top: 8px; right: 0; width: 54px; height: 54px; padding: 18px; color: inherit; text-decoration: none; top: -2px; padding: 15px; } #MainContent .cart-drawer__close svg{ display: block; width: 100%; height: 100%; transition: transform 0.3s ease; pointer-events: none; } #MainContent .cart-drawer__close:hover svg{ transform: rotate(90deg); } #MainContent .cart-drawer__body{ flex: 1; width: 100%; min-height: 250px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .cart-drawer__body::-webkit-scrollbar{ display: none; } #MainContent .cart-drawer__body .cart__widgets:has(.cart-notes.hidden){ border: none; } #MainContent .cart-drawer__body .cart__widgets:has(.product-upsell__holder), #MainContent .cart-drawer__body .cart__widgets:has(.cart__widget__wrapper){ border-top: var(--BORDER-WIDTH) solid var(--text); } #MainContent .cart-drawer__body .cart__pair{ padding: var(--inner); margin-bottom: 0; border: none; } #MainContent .cart-drawer__body .cart__widget__wrapper{ padding: var(--inner); } #MainContent .cart-drawer__body .cart__widget__wrapper .cart__widget:last-of-type{ margin-bottom: 0; } #MainContent .cart-drawer__foot{ position: relative; width: 100%; margin-top: auto; padding: var(--inner); border-top: var(--BORDER-WIDTH) solid var(--text); box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px 0; } #MainContent .cart-drawer__foot .cart__foot-inner{ padding: 0; } #MainContent .cart-drawer__empty-message{ padding: var(--inner); text-align: center; height: 100%; display: flex; flex-direction: column; } #MainContent .cart-drawer__empty-message.visually-hidden{ padding: 0; margin: 0; } #MainContent .cart-drawer__empty-message.hidden{ display: none; } #MainContent .cart-drawer__empty-message > p{ margin: 0 0 0.5em; } #MainContent .cart-drawer__empty-message .btn:not(.btn--text), #MainContent .cart-drawer__empty-message .shopify-payment-button__button--unbranded:not(.btn--text){ width: 100%; } #MainContent .cart-drawer__empty-message--bottom{ padding: 0; } #MainContent .cart-drawer__empty-message-bottom{ margin-top: auto; } #MainContent .cart-drawer__empty-message-bottom p{ font-size: calc(16px * var(--adjust-accent)); } #MainContent .cart-drawer__errors{ position: sticky; top: 0; z-index: 9; background: var(--bg); } #MainContent .cart-drawer__errors .cart__errors__inner{ padding: 10px 40px 10px 20px; margin: calc(var(--inner) / 2) 0 0; border-radius: 0; border-left: none; border-right: none; } /*================ Cart empty buttons ================*/ #MainContent .cart-empty-buttons{ display: grid; gap: calc(var(--inner) / 2); grid-template-columns: minmax(0, 1fr); } #MainContent .cart-empty-buttons .btn, #MainContent .cart-empty-buttons .shopify-payment-button__button--unbranded{ justify-self: center; } #MainContent .cart-empty-buttons + .cart-drawer__empty-message-bottom{ margin-top: 0; } #MainContent .cart-drawer__empty-message .cart-empty-buttons:last-child{ padding-bottom: var(--inner); } #MainContent .cart-empty-buttons__item:not(.cart-empty-buttons__item--text){ line-height: 0; } /*================ Cart message ================*/ #MainContent .cart-message{ display: flex; flex-flow: row nowrap; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: var(--inner); font-size: calc(13.04px * var(--adjust-body)); transition: max-height 0.3s, padding 0.3s, border 0.3s, opacity 0.3s, visibility 0.3s; } #MainContent .cart-message p{ font-size: inherit; } #MainContent .cart-drawer .cart-message{ justify-content: center; padding-top: calc(var(--inner) / 2); padding-bottom: calc(var(--inner) / 2); } #MainContent .cart .cart-message{ padding: 0 0 var(--inner); margin: 0; } #MainContent .cart-message__success, #MainContent .cart-message__default{ padding-bottom: 6px; } #MainContent .cart-message__success{ display: none; } #MainContent .is-success .cart-message__success{ display: inline; } #MainContent .is-success .cart-message__success ~ .cart-message__default{ display: none; } #MainContent .cart-message.is-hidden, #MainContent .cart-message__default.is-hidden{ overflow: hidden; visibility: hidden; max-height: 0; padding: 0 15px; border: none; opacity: 0; } #MainContent .cart-message--custom{ text-align: center; background: var(--accent); } #MainContent .cart-message--custom p{ margin: 0 auto; } #MainContent .cart-drawer .cart-message--drawer{ background: var(--bg); border-bottom: var(--BORDER-WIDTH) solid var(--text); position: relative; z-index: 5; } #MainContent .cart-drawer .cart-message__success, #MainContent .cart-drawer .cart-message__default{ font-size: calc(13.04px * var(--adjust-body)); padding-bottom: 2px; } #MainContent .cart-drawer .cart-message--custom p{ font-size: inherit; } #MainContent .cart .cart-message--custom{ padding: 16px var(--inner); margin-bottom: var(--inner); } #MainContent .body--rounded-corners .cart .cart-message{ border-radius: var(--radius); overflow: hidden; } #MainContent .cart-message__progress-holder{ display: block; width: 100%; } #MainContent .cart-message__progress{ -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; width: 100%; height: 7px; border-radius: 6px; background-color: var(--text-alpha-10); color: var(--PRIMARY-BUTTONS-COLOR-BG); } #MainContent .cart-message__progress:nth-child(2){ display: none; } #MainContent .cart-message__progress::-webkit-progress-bar{ background-color: transparent; border-radius: 6px; } #MainContent .cart-message__progress::-webkit-progress-value{ background-color: var(--accent); border-radius: 6px; } #MainContent .aos-initialized .cart-message__progress::-webkit-progress-value{ width: 0 !important; -webkit-transition: width 1s ease 0s; transition: width 1s ease 0s; } #MainContent .aos-initialized .cart .cart-message__progress::-webkit-progress-value, #MainContent .aos-initialized .cart-message--drawer.aos-animate .cart-message__progress::-webkit-progress-value{ width: min(var(--progress-width, 100%), 100%) !important; transition-delay: 0.5s; } #MainContent .cart-message__progress::-moz-progress-bar{ background-color: var(--accent); border-radius: 6px; } @-moz-document url-prefix() { .aos-initialized .cart-message__progress:first-child:not(:last-child) { display: none; } .aos-initialized .cart-message__progress:nth-child(2) { display: block; } .aos-initialized .cart-message__progress:indeterminate::-moz-progress-bar { width: 0 !important; -moz-transition: width 1s ease-in-out 0s; transition: width 1s ease-in-out 0s; } .aos-initialized .cart .cart-message__progress:indeterminate::-moz-progress-bar, .aos-initialized .cart-message--drawer.aos-animate .cart-message__progress:indeterminate::-moz-progress-bar { width: min(var(--progress-width, 100%), 100%) !important; transition-delay: 0.5s; } } #MainContent .announcement .cart-message__success, #MainContent .announcement .cart-message__default{ padding: 0; } #MainContent .announcement__text .cart-message{ padding: 0; margin: 0; width: 100%; font-size: inherit; } #MainContent .announcement__text .cart-message.is-hidden{ visibility: visible; max-height: none; opacity: 1; padding: 0; } #MainContent .announcement__text .cart-message .cart-message__default{ padding-bottom: 0; } #MainContent .announcement__text .cart-message .cart-message__default.is-hidden{ display: none; } /*================ Circle Text ================*/ #MainContent .circle-text__content{ width: var(--circle-size); } @media only screen and (max-width: 767px) { #MainContent .circle-text__content{ max-width: 125px; max-height: 125px; } } #MainContent .circle-text__content img{ display: block; max-width: var(--circle-size); height: auto; margin: 0 auto; } @media only screen and (max-width: 767px) { #MainContent .circle-text__content img{ width: auto; max-width: 125px; max-height: 125px; } } #MainContent .circle-text__content svg{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); display: block; width: var(--circle-size); height: var(--circle-size); color: var(--circle-color); word-spacing: var(--circle-word-spacing); } @media only screen and (max-width: 767px) { #MainContent .circle-text__content svg{ max-width: 125px; max-height: 125px; } } #MainContent .circle-text{ --circle-size: var(--circle-size-option); transform: rotate(var(--rotate, 0deg)); } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .circle-text{ --circle-size: calc(var(--circle-size-option) * 0.8); } } @media only screen and (max-width: 767px) { #MainContent .circle-text{ --circle-size: calc(var(--circle-size-option) * 0.6); transition: transform 0.1s linear; } } #MainContent .circle-text.is-rotating{ animation: rotate 20s infinite linear; animation-direction: reverse; } @media only screen and (max-width: 767px) { #MainContent .circle-text.is-rotating{ transition: none; } } #MainContent .circle-text.is-static-text{ --rotate: 75deg; } /*================ Collection Filters ================*/ #MainContent .collection__sticky-bar{ --text-size: calc(12.8px * var(--adjust-body)); position: sticky; top: 0; z-index: 5; display: flex; flex-basis: 100%; align-items: center; background: var(--bg); } @media only screen and (min-width: 768px) { #MainContent .collection__sticky-bar{ z-index: 3; margin-top: 0; min-height: var(--collection-sticky-bar-height); } } @media only screen and (max-width: 767px) { #MainContent .collection__sticky-bar{ justify-content: space-between; } } @media only screen and (min-width: 768px) { #MainContent .collection--filters-disabled .collection__sticky-bar{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } #MainContent .collection--sorting-disabled .collection__sticky-bar, #MainContent .collection--filters-sorting-disabled .collection__sticky-bar{ justify-content: space-between; } #MainContent .collection--breadcrumbs-disabled .collection__sticky-bar{ justify-content: flex-end; } @media only screen and (min-width: 768px) { #MainContent .collection--breadcrumbs-disabled.collection--sorting-disabled .collection__sticky-bar{ height: var(--gutter); } } #MainContent .collection__filters{ --text-size: calc(12.8px * var(--adjust-body)); position: fixed; top: 0; left: 0; right: 0; z-index: 2; max-height: var(--full-height); overflow: hidden; } @media only screen and (min-width: 768px) { #MainContent .collection__filters{ --full-height: calc(100vh - var(--collection-sticky-bar-height)); position: sticky; top: calc(var(--collection-sticky-bar-height) - 1px); width: 240px; } } @media only screen and (min-width: 1024px) { #MainContent .collection__filters{ margin-right: calc(var(--gutter) / 2); } } @media only screen and (min-width: 1440px) { #MainContent .collection__filters{ width: 300px; } } @media only screen and (max-width: 767px) { #MainContent .collection__filters{ height: var(--full-height); background: var(--bg); z-index: -1; visibility: hidden; transform: translateX(100%); transition: var(--drawer-transition), visibility 0s linear 0.4s, z-index 0s linear 0.4s; } #MainContent .collection__filters:not(.collection__filters--visible) [data-collapsible-container].is-expanded{ visibility: hidden; } #MainContent .no-js .collection__filters{ z-index: 2; } } @media only screen and (min-width: 768px) { #MainContent .collection--breadcrumbs-disabled .collection__filters{ --full-height: 100vh; top: 0; margin-top: calc(-1 * var(--collection-sticky-bar-height)); z-index: 3; } } @media only screen and (max-width: 767px) { #MainContent .collection__filters--visible{ z-index: 9001; visibility: visible; transform: translateX(0); transition: var(--drawer-transition), visibility 0s linear 0s, z-index 0s linear 0s; } } @media only screen and (min-width: 768px) { #MainContent .collection--filters-disabled .collection__filters{ display: none; } } #MainContent .collection__filters-wrapper{ position: relative; display: flex; flex-direction: column; max-height: calc(var(--full-height)); } @media only screen and (max-width: 1023px) { #MainContent .collection__filters-wrapper{ padding-right: calc(var(--gutter-mobile) / 2); } } @media only screen and (max-width: 479px) { #MainContent .collection__filters-wrapper{ padding-right: 0; } } #MainContent .collection__filter{ position: relative; display: block; width: 100%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @media only screen and (min-width: 768px) { #MainContent .collection__filter:last-of-type{ padding-bottom: var(--inner); } } #MainContent .collection__sort .icon, #MainContent .collection__filter__count .icon{ position: absolute; top: 0; right: 0; width: 14px; height: 100%; margin: 0 3px; } #MainContent .collection__filters__title{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); font-weight: var(--FONT-WEIGHT-HEADING-BOLD); font-size: calc(24px * var(--adjust-heading)); } #MainContent .collection--filters-disabled .collection__sort__label{ padding-top: 2px; } #MainContent .collection__filter__title, #MainContent .collection__sort__label{ position: relative; display: block; border-radius: 0; padding: 6px 40px 6px 0; margin: 0; width: 100%; text-align: left; cursor: pointer; } #MainContent .is-expanded .collection__filter__count .icon-toggle-plus{ opacity: 0; transform: rotate(180deg); } #MainContent .is-expanded .collection__filter__count .icon-toggle-minus{ opacity: 1; transform: rotate(180deg); } #MainContent .is-expanded .collection__filter__count:after{ opacity: 0; } #MainContent .collection__filters-list{ display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-start; width: 100%; height: var(--full-height); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; --double-scrollbar-width: calc(1.8 * var(--scrollbar-width)); mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent var(--double-scrollbar-width), black var(--double-scrollbar-width)); mask-size: 100% 20000px; mask-position: left bottom; -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent var(--double-scrollbar-width), black var(--double-scrollbar-width)); -webkit-mask-size: 100% 20000px; -webkit-mask-position: left bottom; transition: mask-position 0.3s, -webkit-mask-position 0.3s; } @media only screen and (max-width: 1023px) { #MainContent .collection__filters-list{ --double-scrollbar-width: 0; } } #MainContent .collection__filters-list:hover{ -webkit-mask-position: left top; } @media only screen and (max-width: 767px) { #MainContent .collection__filters-list{ width: 100vw; } } @media only screen and (min-width: 768px) { #MainContent .collection__filters-list{ padding: 0; } } #MainContent .no-js .collection__filters-list form{ padding-bottom: var(--inner); } #MainContent .collection__filters-list__inner{ position: relative; width: 100%; padding: 0 var(--gutter-mobile); z-index: 1; flex: 1; height: var(--full-height); min-height: 250px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } @media only screen and (min-width: 768px) { #MainContent .collection__filters-list__inner{ width: calc(210px + 2 * var(--gutter-mobile)); margin: 0 calc(-1 * var(--gutter-mobile)); } } @media only screen and (min-width: 1440px) { #MainContent .collection__filters-list__inner{ width: calc(270px + 2 * var(--gutter-mobile)); } } @media only screen and (max-width: 767px) { #MainContent .collection__filters-list__inner{ overflow-x: hidden; overflow-y: auto; } } #MainContent .collection__filters-bottom{ display: none; position: relative; z-index: 5; width: 100%; padding: 0 var(--gutter-mobile) var(--gutter-mobile); margin-top: auto; text-align: center; } #MainContent .collection__filters-bottom:before{ content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 25px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--bg) 100%); pointer-events: none; } @media only screen and (max-width: 767px) { #MainContent .collection__filters-bottom.is-visible{ display: block; } } #MainContent .collection__filters__close-bottom{ width: 100%; text-transform: var(--BUTTON-TEXT-CAPS); } #MainContent .collection__filter-tags{ list-style: none; display: grid; grid-template-columns: minmax(0, 100%); gap: 4px; align-content: start; padding: 5px 5px 2px 0; margin: 0; } #MainContent .collection__filter-tags label, #MainContent .collection__filter-tags span, #MainContent .collection__filter-tags input, #MainContent .collection__filter-tags .collection__filter-tag--swatch span{ font-size: var(--text-size); } #MainContent .is-expanded .collection__filter-tags{ visibility: visible; pointer-events: auto; } #MainContent .collection__filter-actions .collection__filter-tags{ margin-right: -5px; } #MainContent .collection__sort-bar .collection__filter-tags{ padding: 0; gap: 0; } #MainContent .collection__filter-tags--swatches{ display: grid; gap: normal; grid-template-columns: repeat(5, minmax(0, 1fr)); } @media only screen and (max-width: 767px) { #MainContent .collection__filter-tags-wrapper .collection__filter-tags--swatches{ padding-top: 8px; } } #MainContent .collection__filter-tag--default{ margin-bottom: 0; } #MainContent .collection__filter-tag--default:last-child{ margin-bottom: 0.25em; } #MainContent .collection__filter-tag--default .filter__button{ display: block; padding-left: 22px; position: relative; text-align: left; } #MainContent .collection__filter-tag--default .filter__button:before{ content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin-top: 3px; color: var(--white); border-radius: var(--RADIUS-CHECKBOX); border: var(--BORDER-WIDTH) solid var(--text); } @media only screen and (max-width: 767px) { #MainContent .collection__filter-tag--default .filter__button:before{ top: 3px; } } #MainContent .collection__filter-tag--default .filter__input:checked ~ .filter__button:before, #MainContent .collection__filter-tag--default.is-active .filter__button:before{ background: var(--text) var(--icon-check) no-repeat center center; background-size: 14px auto; } #MainContent .collection__filter-tag--default .filter__input:disabled ~ .filter__button, #MainContent .collection__filter-tag--default.link--disable .filter__button{ cursor: default; color: var(--disabled-grey-darken); } #MainContent .collection__filter-tag--default .filter__input:disabled ~ .filter__button:before, #MainContent .collection__filter-tag--default.link--disable .filter__button:before{ background: var(--text-alpha-15); border: 0; } @media only screen and (max-width: 479px) { #MainContent .collection__filter-tag--default{ padding-right: 0; } } #MainContent .collection__filter-tags--images .image__label{ position: relative; padding: 0; } #MainContent .collection__filter-tags--images{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #MainContent .collection__filter-tags--circle .filter__image{ border-radius: var(--RADIUS-TINY); overflow: hidden; } #MainContent .filter__image{ position: relative; } #MainContent .filter__image:before{ content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 2; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 0; border: var(--BORDER-WIDTH) solid var(--bg); margin: 5px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; } #MainContent .collection__filter-tags--circle .filter__image:before{ border-radius: var(--RADIUS-TINY); } #MainContent .filter__image:after{ content: ""; display: block; position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; height: var(--BORDER-WIDTH); background-color: var(--bg-alpha-60); transform: rotate(135deg); pointer-events: none; opacity: 0; visibility: hidden; } #MainContent .collection__filter-tags--images .filter__input:checked ~ .filter__image:before, #MainContent .collection__filter-tags--images .filter__input:checked ~ .filter__image .icon-check, #MainContent .filter__input:disabled ~ .filter__image:after{ opacity: 1; visibility: visible; } #MainContent .filter__input:disabled ~ .filter__image{ opacity: 0.5; } #MainContent .image__label:hover{ cursor: pointer; } #MainContent .filter__input:disabled ~ .filter__image .image__label:hover{ cursor: default; } #MainContent .image__label .icon-check{ position: absolute; margin-left: auto; margin-right: auto; top: 0; left: 0; right: 0; width: 16px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s; fill: var(--white); } #MainContent .collection__filter-tag.is-hidden{ display: none; } #MainContent .collection__filter-actions{ margin-top: -5px; width: 100%; padding-bottom: 10px; grid-column: 1/-1; } #MainContent .collection__filter-actions:last-child{ margin-bottom: 0; } #MainContent .no-js .collection__filter-actions{ margin-bottom: 0; padding-bottom: 0; } #MainContent .collection__filters-more{ margin-left: 0; margin-top: 10px; } #MainContent .collection__filters-more > *{ pointer-events: none; } #MainContent .collection__filters-more span:nth-child(1){ display: inline-block; } #MainContent .collection__filters-more span:nth-child(2){ display: none; } #MainContent .no-js .collection__filters-more{ display: none; } #MainContent .collection__filter-tags--swatches .collection__filters-more{ margin-top: 5px; } #MainContent .collection__filters-more.is-expanded span:nth-child(1){ display: none; } #MainContent .collection__filters-more.is-expanded span:nth-child(2){ display: inline-block; } #MainContent .collection__filter-tag--swatch{ display: flex; text-align: left; line-height: 1.2; margin-bottom: 8px; padding: 0 2px; word-break: break-word; } @media only screen and (max-width: 479px) { #MainContent .collection__filter-tag--swatch{ margin-bottom: 16px; } } #MainContent .collection__filter-tag--swatch .swatch__button{ display: flex; justify-content: flex-start; margin-bottom: 4px; padding: 0; } #MainContent .collection__filter-tag--swatch .filter__input:checked ~ .swatch__button--circle .swatch__label .icon, #MainContent .collection__filter-tag--swatch.is-active .swatch__button--circle .swatch__label .icon{ opacity: 0.6; visibility: visible; transition-delay: 0s; } #MainContent .collection__filter-tag--swatch .filter__input:checked ~ .filter__button .swatch__label:before, #MainContent .collection__filter-tag--swatch.is-active .swatch__label:before{ opacity: 1; visibility: visible; } #MainContent .collection__filter-tag--swatch .filter__input:disabled ~ .filter__button, #MainContent .collection__filter-tag--swatch.link--disable .filter__button{ cursor: default; opacity: 0.5; } #MainContent .collection__filter-tag--swatch .filter__input:disabled ~ .swatch__label:after, #MainContent .collection__filter-tag--swatch.link--disable .swatch__label:after{ position: absolute; top: 50%; left: 50%; opacity: 1; visibility: visible; border-color: transparent; background: var(--bg-alpha-60); content: ""; } #MainContent .collection__filter-tag--swatch .filter__input:disabled ~ .swatch__label[data-swatch=white i]:after, #MainContent .collection__filter-tag--swatch.link--disable .swatch__label[data-swatch=white i]:after{ background-color: var(--COLOR-BLACK); } #MainContent .collection__filter-tag--swatch .filter__input:disabled ~ .swatch__label[data-swatch=black i]:after, #MainContent .collection__filter-tag--swatch.link--disable .swatch__label[data-swatch=black i]:after{ background-color: var(--COLOR-WHITE); } #MainContent .collection__filter-tags--swatches-rectangle .collection__filter-tag--swatch{ font-size: 0; } @media only screen and (min-width: 768px) and (max-width: 1439px) { #MainContent .collection__filter-tags--swatches-rectangle .collection__filter-tag--swatch{ --swatch-width: 30px; --swatch-height: 21px; } } #MainContent .collection__filters__reset{ display: none; text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); } #MainContent .collection__filters__reset.is-visible{ display: block; } #MainContent .collection--no-results .collection__filters__reset{ display: inline-block; width: auto; } #MainContent .filter__button{ font-size: var(--text-size); line-height: 20px; color: inherit; cursor: pointer; } @media only screen and (max-width: 767px) { #MainContent .filter__button{ line-height: 26px; } } #MainContent .collection__sort{ overflow: hidden; } @media only screen and (min-width: 768px) { #MainContent .collection__sort{ display: none; } } #MainContent .no-js .collection__sort__options{ margin-bottom: var(--inner); } #MainContent .collection__sort-bar{ position: relative; } @media only screen and (max-width: 767px) { #MainContent .collection__sort-bar{ display: none; } } #MainContent .collection__sort-bar .collection__sort__label{ width: auto; padding-right: 0; display: flex; align-items: center; font-family: var(--FONT-STACK-BODY); font-size: var(--text-size); font-weight: var(--FONT-WEIGHT-BODY); } #MainContent .collection__sort-bar .collection__sort__label .icon{ padding: 0 4px; width: 22px; rotate: 90deg; } #MainContent .collection__sort-bar .collection__filter-tag{ opacity: 0; transform: translateY(-10px); transition: transform 0.2s 0s, opacity 0.1s 0s; } #MainContent .collection__sort-bar .collection__filter-tag:last-child{ margin-bottom: 0; } #MainContent .collection__sort-bar .collection__sort__option-wrapper--visible .collection__filter-tag{ opacity: 1; transform: translateY(0); transition: transform 0.2s 0.2s, opacity 0.2s 0.2s; } @media only screen and (min-width: 768px) { #MainContent .collection--breadcrumbs-disabled .collection__sort-bar{ margin-left: 240px; } } @media only screen and (min-width: 1024px) { #MainContent .collection--breadcrumbs-disabled .collection__sort-bar{ margin-left: calc(240px + var(--gutter) / 2); } } @media only screen and (min-width: 1440px) { #MainContent .collection--breadcrumbs-disabled .collection__sort-bar{ margin-left: calc(300px + var(--gutter) / 2); } } #MainContent .collection--breadcrumbs-disabled.collection--filters-disabled .collection__sort-bar{ margin-left: 0; } #MainContent .collection__sort__button{ display: block; font-size: calc(16px * var(--adjust-body)); line-height: 26px; position: relative; padding-left: 18px; cursor: pointer; } #MainContent .collection__sort__button:before{ content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--text); margin: 7px 0; } #MainContent .collection__sort__button:after{ content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; background: transparent; margin: 10px 3px; } #MainContent .collection__sort-bar .collection__sort__button{ line-height: 24px; } #MainContent .collection__sort__input{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .collection__sort__input:checked ~ .collection__sort__button:before{ background: var(--text); } #MainContent .collection__sort__input:checked ~ .collection__sort__button:after{ background: var(--bg); } #MainContent .collection__sort-bar .collection__sort__option-wrapper{ position: absolute; opacity: 0; visibility: hidden; border: var(--BORDER-WIDTH) solid var(--text); overflow: hidden; padding: calc(var(--gutter) / 4); background: var(--bg); top: calc(50% + 16px); min-width: 200px; max-width: 320px; transform-origin: center top; transform: scaleY(0); transition: transform 0.2s 0.1s, opacity 0.2s 0.2s, visibility 0s 0.3s; } #MainContent .collection__sort-bar .collection__sort__option-wrapper--visible{ opacity: 1; visibility: visible; transform: scaleY(1); transition: transform 0.2s, opacity 0.1s 0s, visibility 0s 0s; } #MainContent .collection__filters__empty{ margin: 0; padding: 10px 0; } #MainContent .collection__filters__buttons{ padding-bottom: 15px; } @media only screen and (min-width: 768px) { #MainContent .collection__filters__buttons{ width: 220px; } } @media only screen and (min-width: 1440px) { #MainContent .collection__filters__buttons{ width: 270px; } } @media only screen and (max-width: 767px) { #MainContent .collection__filters__buttons{ max-width: calc(100vw - var(--scrollbar-width)); padding: 15px var(--gutter-mobile); } } #MainContent .collection__filters__buttons .btn, #MainContent .collection__filters__buttons .shopify-payment-button__button--unbranded{ margin-top: 15px; width: 100%; } @media only screen and (min-width: 768px) { #MainContent .collection__filters__buttons .collection__filters__reset.btn--secondary, #MainContent .collection__filters__buttons .btn--secondary .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent .btn--secondary .collection__filters__buttons .collection__filters__reset.shopify-payment-button__button--unbranded{ display: none; } } @media only screen and (max-width: 767px) { #MainContent .collection__filters__buttons .collection__filters__reset.btn--primary, #MainContent .collection__filters__buttons input.collection__filters__reset.btn, #MainContent .collection__filters__buttons input.collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent .collection__filters__buttons .btn--primary .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent .btn--primary .collection__filters__buttons .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent .collection__filters__buttons input.btn .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent input.btn .collection__filters__buttons .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent .collection__filters__buttons input.shopify-payment-button__button--unbranded .collection__filters__reset.shopify-payment-button__button--unbranded, #MainContent input.shopify-payment-button__button--unbranded .collection__filters__buttons .collection__filters__reset.shopify-payment-button__button--unbranded{ display: none; } } #MainContent .collection__filters-header{ display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; width: 100%; min-height: var(--collection-sticky-bar-height); position: relative; } @media only screen and (max-width: 767px) { #MainContent .collection__filters-header{ padding-top: calc(var(--inner) / 2); } } @media only screen and (min-width: 768px) { #MainContent .collection__filters-header.hidden{ display: none; } } @media only screen and (min-width: 768px) { #MainContent .collection--breadcrumbs-disabled .collection__filters-list__inner{ padding-top: 10px; } } #MainContent .collection__filters__top{ margin-bottom: 5px; padding: 10px 0; width: 100%; min-height: var(--collection-sticky-bar-height); display: flex; align-items: center; justify-content: space-between; font-size: var(--text-size); } @media only screen and (max-width: 767px) { #MainContent .collection__filters__top{ padding-top: 0; } } #MainContent .collection__filters__close{ display: flex; align-items: center; justify-content: center; height: 16px; width: 16px; margin-bottom: 15px; cursor: pointer; } #MainContent .collection__filters__close:hover .icon{ transform: rotate(90deg); } #MainContent .collection__filters__close .icon{ width: 100%; height: 100%; transition: transform 0.3s ease; } @media only screen and (min-width: 768px) { #MainContent .collection__filters__close{ display: none; } } #MainContent .collection__filters__toggle{ display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-right: -17px; } @media only screen and (min-width: 768px) { #MainContent .collection__filters__toggle{ display: none; } } #MainContent .collection--filters-disabled .collection__filters__toggle{ justify-self: end; } #MainContent .collection__filters__clear{ display: flex; flex-wrap: wrap; margin-bottom: 15px; } #MainContent .collection__filters__clear:empty{ margin-bottom: 0; } #MainContent .collection__filters__line{ border-width: var(--BORDER-WIDTH) 0 0; margin-top: 0; } #MainContent .filter__active__remove{ position: relative; min-width: 0; width: auto; margin: 0 10px 10px 0; padding: 6px 32px 6px 10px; font-size: var(--text-size); text-align: left; background: var(--bg-lighten-darken-foreground); border-radius: var(--RADIUS); } #MainContent .filter__active__remove .filter__x{ position: absolute; top: 0; right: 0; padding: 6px 10px 8px 12px; font-weight: var(--FONT-WEIGHT-BODY-BOLD); } #MainContent .filter__input{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .filter__price{ margin-top: -8px; } @media only screen and (max-width: 767px) { #MainContent .filter__price{ margin-top: -6px; } } #MainContent .filter__price__fields{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; max-width: 100%; margin: 0; } #MainContent .filter__price__fields label{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .filter__price__field{ display: flex; align-items: center; flex: 1; max-width: calc(50% - 10px); border: var(--BORDER-WIDTH) solid var(--border); background: var(--input-bg); padding: 5px 15px; border-radius: var(--RADIUS); } #MainContent .filter__price__field span{ margin-right: 5px; } #MainContent .filter__price__input{ flex: 1; display: block; min-width: 0; max-width: 100%; width: auto; padding: 0 3px; border: var(--BORDER-WIDTH) solid transparent; border-radius: 0; margin: 0; font-size: inherit; text-align: right; } #MainContent .no-js .filter__price__range{ display: none; } #MainContent .range{ position: relative; display: block; height: 36px; margin: 0 -6px 6px; -webkit-user-select: none; user-select: none; opacity: 0; } #MainContent .range.is-initialized{ opacity: 1; } #MainContent .range__dot{ position: absolute; z-index: 2; display: block; top: 3px; width: 30px; height: 30px; padding: 7px; } #MainContent .range__dot:before{ content: ""; position: absolute; left: -3px; top: -3px; width: 36px; height: 36px; } #MainContent .range__dot span{ display: block; width: 100%; height: 100%; background: var(--white); border: 2px solid var(--black); border-radius: 50%; font-size: 0; cursor: pointer; } #MainContent .range__line{ position: absolute; top: 16px; left: 8px; z-index: 0; overflow: hidden; width: calc(100% - 16px); height: 4px; border-radius: 6px; background-color: var(--COLOR-BLACK-WHITE-ALPHA-25); } #MainContent .range__line span{ display: block; height: 100%; width: 0%; background-color: var(--COLOR-BLACK-WHITE); font-size: 0; } #MainContent .body--rounded-corners .collection__sort__option-wrapper{ border-radius: var(--radius); overflow: hidden; } #MainContent .filter__input:focus ~ label, #MainContent .collection__sort__input:focus ~ label{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .no-js .collection__sort-bar, #MainContent .no-js .collection__sort__label .icon, #MainContent .no-js .collection__filter__title .icon{ display: none !important; } #MainContent .no-js .collection__sort{ display: block; } @media only screen and (max-width: 767px) { #MainContent .no-js .collection__filters__close, #MainContent .no-js .collection__sticky-bar{ display: none; } } @media only screen and (min-width: 768px) { #MainContent .no-js .collection__filters{ margin-top: 0; } } @media only screen and (max-width: 767px) { #MainContent .no-js .collection__filters{ position: static; transform: none; height: auto; max-height: none; padding-bottom: var(--gutter); opacity: 1; visibility: visible; } } @media only screen and (max-width: 767px) { #MainContent .no-js .collection__filters-list{ height: auto; } } @media only screen and (max-width: 767px) { #MainContent .no-js .collection__filters-list__inner{ height: auto; padding-left: 0; } } @media only screen and (max-width: 767px) { #MainContent .no-js .collection__filters-wrapper{ max-height: none; } } #MainContent .no-js body.no-outline .filter__input:focus ~ label, #MainContent .no-js body.no-outline .collection__sort__input:focus ~ label{ outline: auto; outline: -webkit-focus-ring-color auto 5px; } /*================ Collection promo ================*/ #MainContent .collection-promo{ display: grid; grid-template-columns: 1fr; position: relative; grid-column: 1/-1; line-height: 1.5; overflow: hidden; background: var(--bg) no-repeat center center/cover; } #MainContent .collection-promo__inner{ display: grid; grid-template-columns: minmax(0, 1fr); position: relative; line-height: 1.5; background: var(--bg) no-repeat center center/cover; overflow: hidden; } #MainContent .collection-promo__bg{ position: relative; z-index: 2; width: 100%; height: 100%; grid-row-start: 1; grid-column-start: 1; padding-top: var(--promo-height); } @media only screen and (max-width: 767px) and (orientation: landscape) { #MainContent .collection-promo__bg{ min-height: auto; } } #MainContent .collection-promo__bg .placeholder-svg-filled{ position: absolute; top: 50%; left: 0; width: 100%; height: 200%; max-height: 200%; transform: translateY(-50%); } #MainContent .collection-promo__link{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 5; } #MainContent .collection-promo__heading{ color: var(--text); } #MainContent .collection-promo__heading sup{ top: -1.1em; font-size: calc(10.4px * var(--adjust-heading)); line-height: 1; margin-left: 5px; } @media only screen and (max-width: 1439px) { #MainContent .collection-promo__heading sup{ top: -1em; font-size: calc(9.6px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .collection-promo__heading sup{ font-size: calc(8px * var(--adjust-heading)); } } #MainContent .collection-promo__heading small{ font-size: calc(10.4px * var(--adjust-heading)); margin-left: calc(-13.6px * var(--adjust-heading)); } @media only screen and (max-width: 1439px) { #MainContent .collection-promo__heading small{ font-size: calc(9.6px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .collection-promo__heading small{ font-size: calc(8px * var(--adjust-heading)); margin-left: calc(-12px * var(--adjust-heading)); } } #MainContent .collection-promo__heading a{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .collection-promo__heading a:before, #MainContent .collection-promo__heading a:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .collection-promo__heading a:before{ transform: scaleX(0); transform-origin: left; } #MainContent .collection-promo__heading a:after{ transform-origin: right; } #MainContent .no-touch .collection-promo__heading a:hover{ background: transparent; border: 0; } #MainContent .no-touch .collection-promo__heading a:hover:before, #MainContent .no-touch .collection-promo__heading a:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .collection-promo__heading a:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .collection-promo__heading [data-has-highlight]:before, #MainContent .collection-promo__heading [data-has-highlight]:after, #MainContent .collection-promo__heading .section__link:before, #MainContent .collection-promo__heading .section__link:after{ display: none; } #MainContent .collection-promo__heading:not(.text-highlight-wrapper) .text-reveal__cropper a:before, #MainContent .collection-promo__heading:not(.text-highlight-wrapper) .text-reveal__cropper a:after{ bottom: 0; } #MainContent .collection-promo__text{ font-size: calc(13.04px * var(--adjust-body)); } @media only screen and (min-width: 768px) { #MainContent .collection-promo__text{ font-size: calc(16px * var(--adjust-body)); } } #MainContent .collection-promo__buttons{ display: flex; flex-flow: row wrap; justify-content: inherit; align-items: flex-start; } @media only screen and (min-width: 480px) { #MainContent .collection-promo__buttons{ margin: 0 calc(var(--inner) / -2); } } @media only screen and (max-width: 479px) { #MainContent .collection-promo__buttons{ width: 100%; } } #MainContent .collection-promo__button{ display: flex; justify-content: center; } @media only screen and (max-width: 479px) { #MainContent .collection-promo__button{ margin-left: 0; margin-right: 0; } } #MainContent .collection-promo__heading, #MainContent .collection-promo__text, #MainContent .collection-promo__button{ margin: calc(var(--inner) / 2) 0; max-width: 100%; overflow-wrap: break-word; } @media only screen and (max-width: 479px) { #MainContent .collection-promo__heading, #MainContent .collection-promo__text, #MainContent .collection-promo__button{ width: 100%; } } #MainContent .collection-promo__content{ display: flex; justify-content: center; position: relative; z-index: 5; flex-flow: column wrap; grid-row-start: 1; grid-column-start: 1; padding: var(--inner); } #MainContent .collection-promo__link ~ .collection-promo__content{ pointer-events: none; } #MainContent .collection-promo__link ~ .collection-promo__content a{ pointer-events: auto; } #MainContent .collection-promo__body{ width: 100%; display: flex; flex-flow: column wrap; justify-content: center; } @media only screen and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo[data-aos][data-aos-delay].aos-animate{ transition-delay: 0s; } } @media only screen and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo.collection-promo--grid-even[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.15s; } } @media only screen and (min-width: 480px) and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo.collection-promo--grid-second[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.15s; } } @media only screen and (min-width: 480px) and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo.collection-promo--grid-third[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.3s; } } @media only screen and (max-width: 479px) { #MainContent .aos-initialized .collection .collection-items--mobile--one-whole .collection-promo.collection-promo--grid-even[data-aos][data-aos-delay].aos-animate{ transition-delay: 0s; } } @media only screen and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__heading[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.3s; } } @media only screen and (max-width: 479px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__heading[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.15s; } } @media only screen and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__text[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.45s; } } @media only screen and (max-width: 479px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__text[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.3s; } } @media only screen and (max-width: 1023px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__button[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.6s; } } @media only screen and (max-width: 479px) { #MainContent .aos-initialized .collection .collection-promo .collection-promo__button[data-aos][data-aos-delay].aos-animate{ transition-delay: 0.45s; } } #MainContent .collection-promo--two-columns{ grid-column: span 2; } @media only screen and (max-width: 479px) { #MainContent .collection-promo--two-columns{ grid-column: 1/-1; } } #MainContent .collection-promo--one-column{ grid-column: span 1; } @media only screen and (max-width: 1023px) { #MainContent .collection-items--2 .collection-promo--full.collection-promo--tablet-full, #MainContent .collection-promo--two-columns.collection-promo--tablet-full{ grid-column: span 2; } } @media only screen and (max-width: 1023px) { #MainContent .collection-promo--full.collection-promo--tablet-full{ grid-column: span 3; } } @media only screen and (max-width: 1023px) { #MainContent .collection-promo--two-columns.collection-promo--grid-second, #MainContent .collection-promo--full.collection-promo--grid-second{ grid-column: span 2; } } @media only screen and (max-width: 1023px) { #MainContent .collection-promo--two-columns.collection-promo--grid-third, #MainContent .collection-promo--full.collection-promo--grid-third{ grid-column: span 1; } } @media only screen and (max-width: 479px) { #MainContent .collection-promo--two-columns.collection-promo, #MainContent .collection-promo--full.collection-promo{ grid-column: span 2; } } @media only screen and (max-width: 479px) { #MainContent .collection-promo--two-columns.collection-promo--grid-even, #MainContent .collection-promo--full.collection-promo--grid-even{ grid-column: span 1; } } @media only screen and (max-width: 479px) { #MainContent .collection-items--mobile--one-whole .collection-promo--one-column, #MainContent .collection-items--mobile--one-whole .collection-promo--two-columns, #MainContent .collection-items--mobile--one-whole .collection-promo--full{ grid-column: 1/-1; } } #MainContent .collection-items--2 .collection-promo:not(.collection-promo--one-column) .collection-promo__bg, #MainContent .collection-items--3 .collection-promo--two-columns .collection-promo__bg, #MainContent .collection-items--4 .collection-promo--two-columns .collection-promo__bg{ padding-top: calc(var(--promo-height) / 2); } #MainContent .collection-items--3 .collection-promo--full .collection-promo__bg{ padding-top: calc(var(--promo-height) / 3); } @media only screen and (max-width: 767px) { #MainContent .collection-items--3 .collection-promo--full .collection-promo__bg{ padding-top: calc(var(--promo-height) / 2); } } #MainContent .collection-items--4 .collection-promo--full .collection-promo__bg{ padding-top: calc(var(--promo-height) / 4); } @media only screen and (max-width: 1023px) { #MainContent .collection-items--4 .collection-promo--full .collection-promo__bg{ padding-top: calc(var(--promo-height) / 3); } } @media only screen and (max-width: 767px) { #MainContent .collection-items--4 .collection-promo--full .collection-promo__bg{ padding-top: calc(var(--promo-height) / 2); } } @media only screen and (max-width: 479px) { #MainContent .collection-items--3 .collection-promo--two-columns.collection-promo--grid-even .collection-promo__bg, #MainContent .collection-items--4 .collection-promo--two-columns.collection-promo--grid-even .collection-promo__bg{ padding-top: var(--promo-height); } } @media only screen and (max-width: 479px) { #MainContent .collection__products.collection-items--mobile--one-whole .collection-promo .collection-promo__bg{ padding-top: var(--promo-height); } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__heading, #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__text, #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__button{ margin: calc(var(--inner) / 2); } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline{ padding: 0; } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__body{ flex-flow: row wrap; justify-content: center; align-items: center; padding: var(--inner); } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__buttons{ margin: 0; } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__button{ display: flex; justify-content: center; z-index: 2; } } @media only screen and (min-width: 1024px) { #MainContent .collection-promo--full .collection-promo__content--inline .collection-promo__button .btn--caps{ margin-bottom: -2px; } } #MainContent .item--top-left .collection-promo__link, #MainContent .item--top-right .collection-promo__link, #MainContent .item--top-left .collection-promo__button, #MainContent .item--top-right .collection-promo__button{ align-items: flex-start; } #MainContent .item--right .collection-promo__content, #MainContent .item--bottom-right .collection-promo__link, #MainContent .item--bottom-right .collection-promo__button, #MainContent .item--bottom-right .collection-promo__content, #MainContent .item--top-right .collection-promo__content, #MainContent .item--bottom-right .collection-promo__content--inline .collection-promo__body, #MainContent .item--bottom-left .collection-promo__link, #MainContent .item--bottom-left .collection-promo__button, #MainContent .item--bottom-left .collection-promo__content--inline .collection-promo__body{ align-items: flex-end; } #MainContent .item--bottom-left .collection-promo__content, #MainContent .item--bottom-right .collection-promo__content, #MainContent .item--right .collection-promo__link, #MainContent .item--right .collection-promo__button, #MainContent .item--right .collection-promo__buttons, #MainContent .item--right .collection-promo__content--inline .collection-promo__body, #MainContent .item--top-right .collection-promo__link, #MainContent .item--top-right .collection-promo__button, #MainContent .item--top-right .collection-promo__buttons, #MainContent .item--top-right .collection-promo__content--inline, #MainContent .item--top-right .collection-promo__content--inline .collection-promo__body, #MainContent .item--bottom-right .collection-promo__link, #MainContent .item--bottom-right .collection-promo__button, #MainContent .item--bottom-right .collection-promo__buttons, #MainContent .item--bottom-right .collection-promo__content--inline, #MainContent .item--bottom-right .collection-promo__content--inline .collection-promo__body{ justify-content: flex-end; } #MainContent .item--top-left .collection-promo__link, #MainContent .item--top-left .collection-promo__button, #MainContent .item--top-left .collection-promo__buttons, #MainContent .item--top-left .collection-promo__content, #MainContent .item--top-left .collection-promo__content--inline .collection-promo__body, #MainContent .item--top-right .collection-promo__content, #MainContent .item--left .collection-promo__link, #MainContent .item--left .collection-promo__button, #MainContent .item--left .collection-promo__buttons, #MainContent .item--left .collection-promo__content--inline .collection-promo__body, #MainContent .item--bottom-left .collection-promo__link, #MainContent .item--bottom-left .collection-promo__button, #MainContent .item--bottom-left .collection-promo__buttons, #MainContent .item--bottom-left .collection-promo__content--inline .collection-promo__body{ justify-content: flex-start; } #MainContent .item--right .collection-promo__content, #MainContent .item--top-right .collection-promo__content, #MainContent .item--bottom-right .collection-promo__content{ text-align: right; } #MainContent .body--rounded-corners .collection-promo, #MainContent .body--rounded-corners .collection-promo__link{ border-radius: var(--radius); overflow: hidden; } #MainContent .body--rounded-corners .wrapper--full .collection-promo{ border-radius: 0; } /*================ Countdown Timer ================*/ #MainContent .countdown-timer{ --gap: 80px; max-width: 600px; display: block; } @media only screen and (max-width: 1439px) { #MainContent .countdown-timer{ --gap: 50px; } } @media only screen and (max-width: 1023px) { #MainContent .countdown-timer{ --gap: 40px; } } @media only screen and (max-width: 767px) { #MainContent .countdown-timer{ --gap: 32px; } } #MainContent .countdown__aside--timer-large .countdown-timer, #MainContent .countdown__block--timer-large .countdown-timer{ max-width: none; } #MainContent .product__block--timer .countdown-timer{ --gap: 32px; } #MainContent .countdown-timer--background{ position: relative; z-index: 2; padding: var(--inner-mobile); } @media only screen and (min-width: 1024px) { #MainContent .countdown-timer--background{ padding: var(--inner); } } @media only screen and (min-width: 1440px) { #MainContent .countdown-timer--background{ padding: var(--inner) var(--gutter); } } #MainContent .countdown-timer--background::before{ content: ""; z-index: -1; position: absolute; inset: 0; display: block; background: var(--timer-bg); } #MainContent .aos-initialized .countdown .countdown-timer--background::before{ opacity: 0; transition: opacity 0.5s var(--timer-bg-delay, 0.25s) ease; } #MainContent .no-js .aos-initialized .countdown-timer--background::before{ opacity: 1; } #MainContent .aos-initialized .countdown .countdown-timer--background:has(.aos-animate)::before{ opacity: 1; } #MainContent .aos-initialized .countdown-timer--background:has(.aos-animate)::before{ opacity: 1; } @media only screen and (min-width: 1440px) { #MainContent .product__block--timer .countdown-timer--background{ padding: var(--inner); } } #MainContent .countdown-timer__wrapper{ display: inline-grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: calc(var(--gap) / 2); } @media only screen and (max-width: 479px) { #MainContent .countdown-timer__wrapper{ display: flex; flex-wrap: wrap; justify-content: center; width: 100%; } } #MainContent .countdown-timer--show-message .countdown-timer__wrapper{ display: none; } @media only screen and (min-width: 768px) { #MainContent .countdown-timer__wrapper--inline .countdown-timer__item{ flex-flow: row wrap; } #MainContent .countdown-timer__wrapper--inline .countdown-timer__digit{ margin-right: 10px; } } #MainContent .countdown-timer__item{ display: flex; flex-direction: column; align-items: center; } #MainContent .countdown-timer__digit{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); margin: 0; min-width: 2ch; font-weight: var(--FONT-WEIGHT-HEADING-BOLD); line-height: 1.2; } @media only screen and (max-width: 767px) { #MainContent .countdown-timer__digit{ font-size: clamp(9px, var(--heading-size), 35px); } } #MainContent .countdown-timer__unit{ font-size: calc(11.44px * var(--adjust-unit)); } #MainContent .product__block--timer .countdown-timer__unit{ font-size: calc(16px * var(--adjust-unit)); } @media only screen and (max-width: 767px) { #MainContent .countdown-timer__unit{ font-size: clamp(9px, 11.44px * var(--adjust-unit), 16px); } } #MainContent .countdown-timer__message{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); --text-size: calc(16px * var(--adjust-body)); font-size: var(--text-size); display: none; } @media only screen and (max-width: 767px) { #MainContent .countdown-timer__message{ --text-size: calc(14px * var(--adjust-body)); } } #MainContent .countdown-timer--show-message .countdown-timer__message{ display: block; animation: fadeIn 1s ease; } #MainContent .product__block--timer .countdown-timer__message{ margin-bottom: 0; } #MainContent .countdown-timer__content{ margin-bottom: 20px; } #MainContent .countdown-timer__title{ margin-bottom: 4px; } #MainContent .countdown-timer__text > *:first-child{ margin-top: 0; } #MainContent .countdown-timer__text > *:last-child{ margin-bottom: 0; } #MainContent .body--rounded-corners .countdown-timer--background{ border-radius: var(--radius); overflow: hidden; } /*================ Featured Image ================*/ #MainContent .featured-image__content{ position: relative; z-index: 10; pointer-events: none; } #MainContent .featured-image__content a{ pointer-events: auto; } #MainContent .featured-image__content-inner{ max-width: 740px; margin: 0; padding: var(--inner); } #MainContent .featured-image__link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } /*================ Hotspot ================*/ #MainContent .hotspot{ --position-x: var(--hotspot-x-sm, 50%); --position-y: var(--hotspot-y-sm, 50%); --hotspot-color: var(--COLOR-BG-ALPHA-85); --hotspot-width: 32px; --hotspot-offset: 12px; --padding-block: 8px; --padding-inline: 16px; --line-height: 1.25; --font-size: calc(16px * var(--adjust-heading)); --btn-inner-block: calc(var(--padding-block) * var(--adjust-heading)); --btn-inner-inline: calc(var(--padding-inline) * var(--adjust-heading)); --title-height: calc(2 * var(--btn-inner-block) + var(--line-height) * var(--font-size)); --info-bubble-inset-block: var(--inset-block-sm, calc(100% + var(--hotspot-offset)) auto); --info-bubble-inset-inline: var(--inset-inline-sm, auto auto); --info-bubble-align: var(--align-sm, baseline); --info-bubble-justify: var(--justify-sm, center); --line-rotation: var(--rotate-sm, -90deg); --inner: 10px; --scale-factor: 0.9; --duration: 0.25s; --easing: cubic-bezier(0.25, 0.6, 0.5, 0.95); /* stylelint-disable-next-line */ --target-animation: pulseInOutSubtle 2.5s ease infinite; --content-animation-in: var(--duration) var(--easing) 1 forwards fadeIn, var(--duration) var(--easing) 1 forwards zoomOut; --content-animation-out: var(--duration) var(--easing) 1 forwards fadeOut, var(--duration) var(--easing) 1 forwards zoomIn; position: absolute; z-index: 2; inset-inline-start: var(--position-x); inset-block-start: var(--position-y); margin-inline-start: calc(var(--hotspot-width) / -2); margin-block-start: calc(var(--hotspot-width) / -2); display: flex; align-items: center; justify-content: center; line-height: var(--line-height); } @media only screen and (min-width: 768px) { #MainContent .hotspot{ --position-x: var(--hotspot-x-lg, 50%); --position-y: var(--hotspot-y-lg, 50%); --info-bubble-inset-block: var(--inset-block-lg, calc(100% + var(--hotspot-offset)) auto); --info-bubble-inset-inline: var(--inset-inline-lg, auto auto); --info-bubble-align: var(--align-lg, baseline); --info-bubble-justify: var(--justify-lg, center); --line-rotation: var(--rotate-lg, -90deg); } } #MainContent .hotspot.on-hover .hotspot__target, #MainContent .hotspot:hover .hotspot__target, #MainContent .hotspot:focus-within .hotspot__target{ transform: scale(1.25); } #MainContent .hotspot.on-hover .hotspot__target-inner, #MainContent .hotspot:hover .hotspot__target-inner, #MainContent .hotspot:focus-within .hotspot__target-inner{ transform: scale(0.9); } #MainContent .hotspot.on-hover .hotspot__line, #MainContent .hotspot:hover .hotspot__line, #MainContent .hotspot:focus-within .hotspot__line{ transform: scale(1.25) rotate(var(--line-rotation)); } #MainContent .hotspot.is-active.block-selected .hotspot__content{ inset-block: var(--info-bubble-inset-block); inset-inline: var(--info-bubble-inset-inline); } #MainContent .hotspot.is-active.block-selected .hotspot__line{ opacity: 1; } #MainContent .hotspot.is-active{ z-index: 5; } #MainContent .hotspot.is-active .hotspot__target:after{ animation: none; } @media only screen and (min-width: 768px) { #MainContent .hotspot.is-active .hotspot__line, #MainContent .hotspot.is-active .hotspot__info-bubble{ opacity: 0; } #MainContent .hotspot.is-active .hotspot__content{ pointer-events: all; animation: var(--content-animation-in); } #MainContent .hotspot.is-active .hotspot__content a, #MainContent .hotspot.is-active .hotspot__content button, #MainContent .hotspot.is-active .swatch__button{ pointer-events: all; } } #MainContent .hotspot__line{ position: absolute; z-index: 3; inset-block: auto auto; inset-inline: auto auto; width: var(--hotspot-width); height: var(--BORDER-WIDTH); display: block; background: transparent; transform: rotate(var(--line-rotation)); transform-origin: 50% 50%; pointer-events: none; transition: transform 0.3s ease-in-out, opacity 0.4s; } #MainContent .hotspot__line:after{ content: ""; position: absolute; inset-block: auto auto; inset-inline: auto 100%; width: min(var(--hotspot-width), var(--title-height)); height: 100%; background-color: var(--hotspot-color); } #MainContent .hotspot__info-bubble{ position: absolute; z-index: 3; display: grid; grid-template-columns: max-content; inset-block: var(--info-bubble-inset-block); inset-inline: var(--info-bubble-inset-inline); justify-content: var(--info-bubble-justify); align-items: var(--info-bubble-align); pointer-events: none; } @media only screen and (min-width: 768px) { #MainContent .hotspot__info-bubble{ transition: opacity 0.4s; } } #MainContent .hotspot__title{ margin-block: 0; margin-inline: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding-block: var(--btn-inner-block); padding-inline: var(--btn-inner-inline); max-width: calc(var(--wrapper-width) / 2); display: flex; justify-content: center; align-items: center; align-self: center; background: var(--bg); font-size: var(--font-size); color: var(--text); pointer-events: all; cursor: pointer; } #MainContent .hotspot__title .icon{ height: calc(var(--font-size) * 0.9); width: auto; margin-inline-start: 3px; flex-shrink: 0; transition: transform 0.3s ease; } #MainContent .hotspot__title:hover .icon{ transform: translateX(40%); } #MainContent .hotspot__content{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: var(--inner); display: none; background: var(--bg); color: var(--text); } @media only screen and (min-width: 768px) { #MainContent .hotspot__content{ position: absolute; z-index: 4; inset-block: auto auto; inset-inline: auto auto; min-width: 320px; display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); opacity: 0; pointer-events: none; animation: var(--content-animation-out); } } #MainContent .hotspot__content a, #MainContent .hotspot__content button, #MainContent .hotspot__content .swatch__button{ pointer-events: none; } #MainContent .hotspot__target{ position: relative; border: var(--BORDER-WIDTH) solid var(--hotspot-color); border-radius: 50%; width: var(--hotspot-width); height: var(--hotspot-width); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-in-out; } #MainContent .hotspot__target:after{ content: ""; pointer-events: none; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: var(--hotspot-color); opacity: 0; z-index: -1; will-change: transform, opacity; animation: var(--target-animation); } #MainContent .hotspot__title.is-loading, #MainContent .hotspot:has(.hotspot__target.is-loading){ pointer-events: none; } #MainContent .hotspot__target-inner{ display: block; pointer-events: none; width: 10px; height: 10px; margin: auto; border-radius: 50%; background-color: var(--hotspot-color); transition: transform 0.3s ease-in-out; } #MainContent .body--rounded-corners .hotspot__title, #MainContent .body--rounded-corners .hotspot__content{ border-radius: var(--radius); overflow: hidden; } #MainContent .no-js .hotspot--links .hotspot__content{ display: none; } #MainContent .no-js stl-hotspots{ display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); padding-block-start: var(--gutter-mobile); padding-inline: var(--gutter-mobile); gap: calc(var(--gutter-mobile) / 2); } @media only screen and (min-width: 768px) { #MainContent .no-js stl-hotspots{ padding-block-start: calc(var(--gutter) / 2); padding-inline: var(--gutter); gap: calc(var(--gutter) / 2); } } #MainContent .no-js stl-hotspots .hotspot{ position: relative; inset-block: auto; inset-inline: auto; margin-block: 0; margin-inline: 0; } #MainContent .no-js stl-hotspots .hotspot__target:after{ animation: none; } #MainContent .no-js stl-hotspots .hotspot__content{ position: relative; inset-block: auto; inset-inline: auto; margin-block: 0; margin-inline: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: block; width: 100%; pointer-events: all; animation: var(--content-animation-in); } #MainContent .no-js stl-hotspots .hotspot__content a, #MainContent .no-js stl-hotspots .hotspot__content button, #MainContent .no-js stl-hotspots .swatch__button{ pointer-events: all; } /*================ Modal ================*/ #MainContent .modal{ transform: translateY(-20px); background-color: var(--bg); bottom: 0; color: var(--text); display: none; left: 0; opacity: 0; overflow: hidden; position: fixed; right: 0; top: 0; } #MainContent .modal--is-active{ transform: translateY(0); display: block; opacity: 1; overflow: hidden; } #MainContent .modal--is-active .drawer__overlay{ opacity: 0.2; visibility: visible; will-change: opacity; } /*================ Newsletter form ================*/ #MainContent .newsletter-form .form-success, #MainContent .newsletter-form .errors{ display: none; } #MainContent .newsletter-form .input-group__field, #MainContent .newsletter-form .input-group__btn--icon{ background: transparent; } #MainContent .newsletter-form.has-error .errors{ display: inline-block; } #MainContent .newsletter-form.has-success .form-success{ display: inline-block; } #MainContent .newsletter-form.has-success .input-group__item:not(.input-group__item--text){ display: none; } #MainContent .newsletter-form .errors, #MainContent .newsletter-form .form-success{ margin: var(--form-margin) 0; text-align: left; } @media only screen and (max-width: 479px) { #MainContent .newsletter-form .errors, #MainContent .newsletter-form .form-success{ width: 100%; flex-basis: 100%; text-align: center; } } @media only screen and (min-width: 768px) { #MainContent .newsletter-form .input-group--inline ~ .form-success{ margin: 0; } } #MainContent .input-group__fields{ display: flex; flex: 1 1 auto; padding: 0; flex-flow: row wrap; } @media only screen and (min-width: 1024px) { #MainContent .input-group__fields{ max-width: 280px; } } @media only screen and (min-width: 768px) { #MainContent .input-group__fields{ flex-basis: 50%; } } @media only screen and (min-width: 1440px) { #MainContent .input-group__fields{ flex-basis: 25%; } } #MainContent .input-group__fields--name{ flex-basis: 100%; } @media only screen and (min-width: 1024px) { #MainContent .input-group__fields--name{ max-width: 560px; } } #MainContent .input-group__fields--name .errors, #MainContent .input-group__fields--first-last-name .errors, #MainContent .input-group__fields--name .form-success, #MainContent .input-group__fields--first-last-name .form-success{ margin: calc(var(--form-margin) / 2); } #MainContent .input-group__fields--first-last-name{ flex-basis: 100%; } @media only screen and (min-width: 1024px) { #MainContent .input-group__fields--first-last-name{ max-width: 840px; } } #MainContent .input-group__btn--icon{ height: 100%; width: 54px; max-width: 54px; color: var(--text); background: transparent; border: var(--BORDER-WIDTH) solid var(--text); } #MainContent .input-group__btn--icon .icon-select{ transition: transform 0.3s ease; } #MainContent .input-group__btn--icon:before{ content: none; } #MainContent .input-group__btn--icon:hover{ background: transparent; } #MainContent .input-group__btn--icon:hover .icon-select{ transform: translate(5px); } #MainContent .input-group__field{ display: block; width: 100%; border: var(--BORDER-WIDTH) solid var(--text); border-radius: var(--RADIUS); padding: 12px 0 12px 20px; } #MainContent .input-group__field::input-placeholder{ color: var(--text); } #MainContent .input-group__field::placeholder{ color: var(--text); } #MainContent .input-group__field:input-placeholder{ color: var(--text); } #MainContent .input-group__field:placeholder{ color: var(--text); } #MainContent .mailer-response{ display: none; } /*================ Product card inline ================*/ /* Shares the same class naming as ".product-grid-item" and makes use of the same styles */ #MainContent .product-grid-item.product-grid-item--inline{ display: grid; gap: var(--inner, 15px); grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; } #MainContent .product-grid-item--inline .product-grid-item__image{ margin: 0; align-self: center; } #MainContent .product-grid-item--inline .product-grid-item__info{ padding-block-start: 5px; display: flex; flex-direction: column; } #MainContent .product-grid-item--inline .product-grid-item__title, #MainContent .product-grid-item--inline .product-grid-item__price, #MainContent .product-grid-item--inline .product-cutline{ line-height: var(--line-height, 1); } #MainContent .product-grid-item--inline .product-grid-item__swatch{ justify-content: flex-start; } #MainContent .product-grid-item--inline .product-grid-item__quick-buy{ position: relative; right: auto; bottom: auto; display: flex; justify-content: flex-start; margin-block-start: auto; } #MainContent .product-grid-item--inline .errors{ left: auto; bottom: auto; inset-inline-start: 0; inset-block-end: 0; } #MainContent .body--rounded-corners .product-grid-item--inline .errors{ border-radius: var(--radius); } #MainContent .product-grid-item--inline.soldout .quick__form{ display: block; } #MainContent .product-grid-item--inline.soldout .btn--quick-buy{ border-color: transparent; background-color: var(--text-alpha-10); color: var(--text-alpha-50); opacity: 1; pointer-events: none; } #MainContent .product-grid-item--inline:has(.product-grid-item__image--error) .errors{ animation: fadeInOutError 6s ease; } #MainContent .product-grid-item__image:focus-within{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .no-js .product-grid-item__image:focus-within{ outline: -webkit-focus-ring-color auto 5px; } /*================ Product elements ================*/ #MainContent .product__block{ padding-bottom: var(--PBB, 0); } @media only screen and (max-width: 767px) { #MainContent .product__block{ padding-bottom: max(var(--PBB, 0) * 0.75, 8px); } #MainContent .product__block.product__accordions{ padding-bottom: calc(var(--PBB, 0) * 0.75); } } @media only screen and (min-width: 480px) { #MainContent .product__block--half{ display: inline-block; width: 50%; } } #MainContent .product__block hr{ margin: 0; } #MainContent .product__description a, #MainContent .product__subheading a, #MainContent .product__feature__content a, #MainContent .product__accordion__inner a, #MainContent .product__popup__link span{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .product__description a:before, #MainContent .product__description a:after, #MainContent .product__subheading a:before, #MainContent .product__subheading a:after, #MainContent .product__feature__content a:before, #MainContent .product__feature__content a:after, #MainContent .product__accordion__inner a:before, #MainContent .product__accordion__inner a:after, #MainContent .product__popup__link span:before, #MainContent .product__popup__link span:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .product__description a:before, #MainContent .product__subheading a:before, #MainContent .product__feature__content a:before, #MainContent .product__accordion__inner a:before, #MainContent .product__popup__link span:before{ transform: scaleX(0); transform-origin: left; } #MainContent .product__description a:after, #MainContent .product__subheading a:after, #MainContent .product__feature__content a:after, #MainContent .product__accordion__inner a:after, #MainContent .product__popup__link span:after{ transform-origin: right; } #MainContent .no-touch .product__description a:hover, #MainContent .no-touch .product__subheading a:hover, #MainContent .no-touch .product__feature__content a:hover, #MainContent .no-touch .product__accordion__inner a:hover, #MainContent .no-touch .product__popup__link span:hover{ background: transparent; border: 0; } #MainContent .no-touch .product__description a:hover:before, #MainContent .no-touch .product__description a:hover:after, #MainContent .no-touch .product__subheading a:hover:before, #MainContent .no-touch .product__subheading a:hover:after, #MainContent .no-touch .product__feature__content a:hover:before, #MainContent .no-touch .product__feature__content a:hover:after, #MainContent .no-touch .product__accordion__inner a:hover:before, #MainContent .no-touch .product__accordion__inner a:hover:after, #MainContent .no-touch .product__popup__link span:hover:before, #MainContent .no-touch .product__popup__link span:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .product__description a:hover:before, #MainContent .no-touch .product__subheading a:hover:before, #MainContent .no-touch .product__feature__content a:hover:before, #MainContent .no-touch .product__accordion__inner a:hover:before, #MainContent .no-touch .product__popup__link span:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .product__title-and-price{ display: grid; grid-template-columns: minmax(0, 100%); grid-template-rows: min-content; align-content: start; gap: var(--form-margin); margin-bottom: calc(var(--form-margin) / 2); } @media only screen and (max-width: 767px) { #MainContent .product__title-and-price{ margin-bottom: var(--form-margin-mobile); } } #MainContent .product__title{ font-size: calc(32px * var(--adjust-heading)); margin-bottom: 0; } #MainContent .product__subheading p{ font-size: calc(16px * var(--adjust-body)); margin: 0; } #MainContent .product__price-and-badge{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: -8px; } #MainContent .product__price-and-badge .product__price{ padding-right: 10px; margin: 0 auto 0 0; } #MainContent .product__price-and-badge .product__unit-price{ margin-right: 12px; } #MainContent .product__price-wrapper{ width: 100%; display: flex; justify-content: space-between; align-items: flex-start; } #MainContent .product__price{ --adjust-price: var(--adjust-body-desktop, var(--FONT-ADJUST-BODY)); --adjust-body: var(--adjust-price); display: flex; flex-flow: row wrap; align-items: flex-start; margin: 0; --text-size: calc(17.6px * var(--adjust-body)); font-size: var(--text-size); transition: opacity 0.3s ease; } @media only screen and (max-width: 767px) { #MainContent .product__price{ --text-size: calc(16px * var(--adjust-body)); } } @media only screen and (max-width: 767px) { #MainContent .product__price{ --adjust-body: var(--adjust-body-mobile, var(--adjust-price)); } } #MainContent .product__price--hidden{ opacity: 0; } #MainContent .product__price--regular{ margin: 0 6px 8px 0; } #MainContent .product__price--compare{ text-decoration: line-through; opacity: 0.5; margin: 0 12px 8px 0; } #MainContent .product__price--off{ display: flex; flex-flow: row wrap; gap: 5px 12px; align-items: center; font-size: calc(12px * var(--adjust-body) * var(--FONT-ADJUST-BADGES)); } @media only screen and (max-width: 767px) { #MainContent .product__price--off{ column-gap: var(--form-margin-mobile); } } #MainContent .product__price--off.hidden{ display: none; } #MainContent .product__price--off .product__price-badge{ flex-shrink: 0; padding: 3px 9px; border-radius: var(--RADIUS-BADGE); background-color: var(--saving-bg); color: var(--saving-text); } #MainContent .product__price--off .product__price-badge em{ font-style: normal; opacity: 0.5; padding: 0 4px; } #MainContent .product__price--off .product__price-badge:last-child{ margin-right: 0; } #MainContent .product__final-sale-wrap{ display: flex; align-items: center; color: var(--final-sale-color); padding: 3px 9px; border: var(--BORDER-WIDTH) solid var(--final-sale-color); border-radius: var(--RADIUS-BADGE); } #MainContent .product__final-sale-wrap.hidden{ display: none; } #MainContent .product__final-sale-question{ margin-left: 9px; --icon-size: calc(12px * var(--adjust-body) * var(--FONT-ADJUST-BADGES)); display: flex; justify-content: center; align-items: center; padding: 2px; text-align: center; border-radius: var(--RADIUS-BADGE); background: var(--final-sale-color); } #MainContent .product__final-sale-question:hover{ cursor: help; } #MainContent .product__final-sale-question .icon{ width: var(--icon-size, 20px); height: var(--icon-size, 20px); stroke-width: 2px; } #MainContent .product__final-sale-question .icon path{ stroke: var(--COLOR-BG); } #MainContent .product__unit-price{ --text-size: calc(12px * var(--adjust-body)); font-size: var(--text-size); line-height: calc(27.5px * var(--adjust-body)); opacity: 0.5; } #MainContent .product-cutline{ margin: -2px 0 3px; font-size: calc(12.8px * var(--adjust-body)); line-height: 1; } #MainContent .product__description.rte{ color: var(--text); margin-bottom: 0; font-size: calc(14.4px * var(--adjust-body)); } #MainContent .product__description.rte p{ line-height: inherit; margin-block-start: 0; } @media only screen and (max-width: 1023px) { #MainContent .product__description.rte{ width: 100%; } } #MainContent .product__accordion{ background: var(--bg-item); text-align: left; overflow: hidden; position: relative; padding: 0 var(--padding-sides); } #MainContent .product__accordion::after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--border-width); background: var(--text); opacity: var(--border-opacity); pointer-events: none; } #MainContent .product__accordion__inner{ margin-bottom: 0; padding-block-end: 10px; position: relative; font-size: calc(14.4px * var(--adjust-body)); } #MainContent .product__accordion__inner p{ margin-top: 0; } #MainContent .product__accordion__title{ font-size: calc(14.4px * var(--adjust-body)); display: block; position: relative; width: 100%; padding: 16px 53px 16px 0; text-align: left; color: var(--text); background: transparent; border: 0; } #MainContent .product__accordion__title::before{ content: ""; position: absolute; top: 0; left: calc(-1 * var(--padding-sides)); width: calc(100% + 2 * var(--padding-sides)); height: 100%; display: var(--display-pseudo, none); } #MainContent .product__accordion__title .icon{ top: 0; right: 0; width: 16px; height: 100%; } #MainContent .body--rounded-corners .product__accordion{ border-radius: var(--radius); overflow: hidden; } #MainContent .product__popup__link{ display: flex; align-items: center; font-size: calc(17.6px * var(--adjust-label)); line-height: 1.5625; } #MainContent .product__popup__link .icon{ margin-right: 5px; width: 16px; height: 16px; pointer-events: none; } #MainContent .product__popup__link span{ pointer-events: none; } @media only screen and (max-width: 767px) { #MainContent .product__popup__link{ font-size: calc(13.6px * var(--adjust-label)); line-height: 1.1; } #MainContent .product__popup__link .icon{ width: min(16px * var(--adjust-label) * 1.1, 16px); height: min(16px * var(--adjust-label) * 1.1, 16px); } } #MainContent .product__popup__link:hover span::before, #MainContent .product__popup__link:hover span::after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); } #MainContent .product__popup__link:hover span::before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .product__popup__link:hover span::after{ transform: scaleX(0); } #MainContent .no-touch .product__popup__link span::after{ opacity: 0; } #MainContent .no-touch .product__popup__link:hover span::after{ opacity: 1; } #MainContent .product__popup{ overflow: hidden; display: flex; flex-direction: column; } @media only screen and (min-width: 1024px) { #MainContent .product__popup{ --drawer-width: calc(50vw - var(--gutter) / 2); } } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .product__popup{ --drawer-width: 600px; } } @media only screen and (max-width: 767px) { #MainContent .product__popup{ --drawer-width: 100%; } } #MainContent .product__popup__inner{ position: relative; height: auto; overflow-x: hidden; overflow-y: auto; padding: 0 var(--inner); } #MainContent .product__popup__content{ overflow: hidden; position: relative; max-width: 600px; width: 100%; background-color: var(--bg); padding: var(--inner); margin: 60px auto 20px; } #MainContent .product__popup__content .product__accordions{ overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 140px); margin-top: 20px; } #MainContent .complementary-products__title{ margin: 0 0 var(--form-margin); } @media only screen and (max-width: 767px) { #MainContent .complementary-products__title{ margin: 0 0 var(--form-margin-mobile); } } #MainContent .product__complementary:has(.flickity-enabled){ padding-bottom: calc(var(--PBB) + 28px); } #MainContent .body--rounded-corners .complementary-products__slider{ overflow: initial; } #MainContent .complementary-products__slider .flickity-page-dots{ --text: var(--COLOR-TEXT); bottom: -28px; } #MainContent .complementary-products__item{ --inner: 12px; width: 100%; } #MainContent .flickity-slider .complementary-products__item{ margin-right: var(--inner); } #MainContent .product__icon__row{ --icon-size: 25px; --line-height: 1.5625; background-color: var(--bg); display: flex; align-items: center; border-radius: var(--radius); font-size: calc(16px * var(--adjust-body)); line-height: var(--line-height); align-self: start; } #MainContent .product__icon__row--center{ justify-content: center; text-align: center; } #MainContent .product__icon{ min-height: calc(16px * var(--adjust-body) * var(--line-height)); display: flex; flex-basis: var(--icon-size); flex-shrink: 0; align-items: center; justify-content: center; align-self: center; position: relative; color: var(--icon-color); } #MainContent .product__icon .icon{ display: block; width: var(--icon-size); height: var(--icon-size); } #MainContent .product__icon__holder{ display: block; position: relative; width: 100%; height: 0; padding-top: var(--aspect-ratio); } #MainContent .product__icon__text:not(:only-child){ margin-left: 5px; } #MainContent .product__icon__row--multiple{ display: grid; column-gap: calc(var(--grid-gutter) * 2); } @media only screen and (min-width: 768px) { #MainContent .product__icon__row--multiple{ grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } } @media only screen and (max-width: 767px) { #MainContent .product__icon__row--multiple{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0; } } #MainContent .product__feature{ width: 100%; color: var(--text); background-color: var(--bg); margin-right: var(--inner); } #MainContent .product__feature__icon__container{ display: flex; align-items: center; } #MainContent .product__feature__icon__container .product__icon{ margin-right: 10px; } #MainContent .product__feature__content{ display: grid; gap: var(--grid-gutter); } #MainContent .product__feature__content p{ font-size: calc(14.4px * var(--adjust-body)); margin: 0; } #MainContent .product__feature__heading h5{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); margin: 0; } #MainContent .product__features.flickity-enabled{ --max-bottom-padding: max(54px, var(--padding-bottom)); padding-bottom: var(--max-bottom-padding); } #MainContent .product__features.flickity-enabled .flickity-page-dots{ bottom: calc(var(--max-bottom-padding) - 28px); } #MainContent .guide__line{ display: flex; } #MainContent .guide__line:first-child{ margin-top: 0; } #MainContent .guide__line:last-child{ margin-bottom: 0; } #MainContent .guide__line span{ flex: 1; height: 3px; border-radius: 3px; margin: 0 2px; background: var(--text-alpha-25); font-size: 0; line-height: 0; } #MainContent .guide__line span:first-child{ margin-left: 0; } #MainContent .guide__line span:last-child{ margin-right: 0; } #MainContent .guide__line span.is-active{ background: var(--text); } #MainContent .guide__heading{ font-size: calc(17.6px * var(--adjust-label)); } @media only screen and (max-width: 767px) { #MainContent .guide__heading{ font-size: calc(16px * var(--adjust-label)); line-height: 1.1; } } #MainContent .guide__heading, #MainContent .guide__line{ margin: 0 0 calc(var(--form-margin) / 4); } @media only screen and (max-width: 767px) { #MainContent .guide__heading, #MainContent .guide__line{ margin-bottom: var(--form-margin-mobile); } } #MainContent .guide__content{ display: flex; justify-content: space-around; font-size: calc(17.6px * var(--adjust-label)); } #MainContent .guide__content--skip-right::after, #MainContent .guide__content--skip-left::before{ content: ""; } #MainContent .guide__content--skip-right::after, #MainContent .guide__content--skip-left::before, #MainContent .guide__left, #MainContent .guide__right{ flex: 1 0 0; } #MainContent .guide__middle{ flex-grow: 0; max-width: 70%; padding: 0 5px; text-align: center; } #MainContent .guide__right{ text-align: right; } #MainContent .popup-chart{ --drawer-width: 590px; display: block; background: var(--bg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); margin-left: auto; overflow: hidden; } @media only screen and (max-width: 1023px) { #MainContent .popup-chart{ --drawer-width: calc(100vw - 400px); } } @media only screen and (max-width: 767px) { #MainContent .popup-chart{ --drawer-width: 100%; } } #MainContent .popup-chart .drawer__close-button{ right: var(--inner); } @media only screen and (max-width: 1023px) { #MainContent .popup-chart .drawer__close-button{ right: 0; } } #MainContent .popup-chart__inner{ position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .popup-chart__inner::-webkit-scrollbar{ display: none; } #MainContent .popup-chart__content{ overflow: hidden; position: relative; max-width: 600px; width: 100%; background-color: var(--bg); padding: calc(var(--inner) * 2); padding-right: calc(var(--inner) * 4); margin: var(--inner) 0 var(--inner) auto; } @media only screen and (max-width: 1023px) { #MainContent .popup-chart__content{ padding: var(--inner); } } #MainContent .popup-chart__content .rte{ font-size: calc(14px * var(--adjust-body)); } #MainContent .popup-chart__content .tab{ padding-top: 5px; } #MainContent .popup-chart__content h1{ --heading-size: calc(40px * var(--adjust-heading)); font-size: var(--heading-size); margin: 35px 0 5px; } @media only screen and (max-width: 1439px) { #MainContent .popup-chart__content h1{ --heading-size: calc(33.6px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .popup-chart__content h1{ --heading-size: calc(28px * var(--adjust-heading)); } } #MainContent .popup-chart__content .table-wrapper{ border-top: var(--BORDER-WIDTH) solid var(--text); border-bottom: var(--BORDER-WIDTH) solid var(--text); padding: var(--inner) 0 calc(var(--inner) * 2); margin-bottom: calc(var(--inner) * 2); overflow-x: auto; } #MainContent .popup-chart__content table{ border: 0; } @media only screen and (max-width: 1023px) { #MainContent .popup-chart__content table{ min-width: 400px; } } #MainContent .popup-chart__content tr:nth-child(even){ background: var(--text-alpha-5); } #MainContent .popup-chart__content th, #MainContent .popup-chart__content td{ border: 0; padding: 10px; } #MainContent .popup-chart__content tbody tr:not(:first-child) th, #MainContent .popup-chart__content tbody tr:not(:first-child) td{ padding-left: 20px; } #MainContent .popup-chart__content .tabs__head{ margin-bottom: 10px; } #MainContent .popup-chart__content .tabs-scrollbar{ text-align: left; } #MainContent .popup-chart__content .tabs__nav{ align-items: flex-start; } #MainContent .popup-chart__content .tabs__link{ margin-bottom: 0; } #MainContent .popup-chart--quickview{ position: absolute; left: 100%; z-index: 5; } @media only screen and (max-width: 767px) { #MainContent .popup-chart--quickview{ top: 100%; left: 0; z-index: 15; border-radius: 20px 20px 0 0; --drawer-transition: top 0.4s cubic-bezier(0.46, 0.01, 0.32, 1); } } @media only screen and (max-width: 767px) { #MainContent .popup-chart--quickview .drawer__close-button svg{ transform: rotate(90deg); } } #MainContent .popup-chart--quickview .drawer__close-button:hover svg{ transform: translateX(5px); } @media only screen and (max-width: 767px) { #MainContent .popup-chart--quickview .drawer__close-button:hover svg{ transform: rotate(90deg) translateY(5px); } } #MainContent .popup-chart--quickview.is-open{ transform: translateX(calc(-1 * (var(--drawer-width) + 400px))); transition: var(--drawer-transition), visibility 0.1s linear 0s; } @media only screen and (max-width: 767px) { #MainContent .popup-chart--quickview.is-open{ top: 0; transform: none; } } #MainContent .body--rounded-corners .product__feature{ border-radius: var(--radius); overflow: hidden; } #MainContent .product__accordion__title:focus, #MainContent .product__accordion__title.focus-visible{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .no-js .product__accordion__title .icon{ display: none !important; } #MainContent .no-js .product__accordion__inner{ top: 0; } @media only screen and (max-width: 479px) { #MainContent .product__block--timer .countdown-timer__wrapper{ justify-content: space-between; gap: unset; } } /*================ Product form ================*/ #MainContent{ --form-top: 14px; --form-left: 20px; --form-margin: 25px; --form-padding-mobile: 6px; --form-margin-mobile: 8px; } #MainContent .product__notification{ position: relative; background: var(--bg); padding: var(--gutter); max-width: 500px; width: 100%; text-align: center; margin: auto; } #MainContent .product__notification .contact-form{ text-align: left; } #MainContent .product__notification label{ display: block; font-size: calc(14px * var(--adjust-body)); margin-bottom: 15px; } #MainContent .product__notification .input-group{ max-width: 100%; flex-direction: column; } #MainContent .product__notification .input-group__item{ max-width: 100%; } #MainContent .product__notification .input-group__field{ border: var(--BORDER-WIDTH) solid var(--border); border-radius: var(--RADIUS); } #MainContent .product__notification .input-group__item--btn{ margin-top: var(--form-top); flex: 1; max-width: 100%; width: 100%; } #MainContent .product__notification button[type=submit]{ width: 100%; } @media only screen and (max-width: 767px) { #MainContent .product__notification{ padding: var(--gutter-mobile); } } #MainContent .product__notification .contact-form{ margin-top: 16px; } #MainContent .product__notification__title{ font-size: calc(32px * var(--adjust-heading)); margin-bottom: 0; } @media only screen and (max-width: 767px) { #MainContent .product__notification__title{ padding: 0 var(--inner-mobile); } } #MainContent .product__notification__subtitle{ font-size: calc(16px * var(--adjust-body)); margin: 5px 0 0; } #MainContent .product__notification__close{ position: absolute; top: 20px; right: 20px; width: 30px; height: 30px; padding: 5px; opacity: 1; text-indent: 0; color: inherit; background: none; } #MainContent .product__notification__close:hover .icon-close{ transform: rotate(90deg); } @media only screen and (max-width: 767px) { #MainContent .product__notification__close{ top: 10px; right: 10px; width: 25px; height: 25px; } } #MainContent .product__notification__message{ display: none; margin: var(--gutter) 0; text-align: center; } #MainContent .template-product .pswp--success .product__notification__form{ display: none; } #MainContent .template-product .pswp--success .product__notification__message{ display: block; } #MainContent .quantity-selector{ display: block; max-width: 120px; position: relative; margin: 0; text-align: left; } #MainContent .quantity__selector{ display: block; width: 100%; padding: var(--form-top) 32px; font-size: calc(14px * var(--adjust-body)); text-align: center; letter-spacing: 0.02em; line-height: 1.3; } #MainContent .quantity__selector input[type=number]::-webkit-outer-spin-button, #MainContent .quantity__selector input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; appearance: none; margin: 0; } #MainContent .quantity__selector input[type=number]{ -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } #MainContent .quantity__btn{ height: 50%; width: 44px; color: inherit; } #MainContent .quantity__btn--decrease, #MainContent .quantity__btn--increase{ position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; } #MainContent .quantity__btn--decrease{ left: 0; } #MainContent .quantity__btn--increase{ right: 0; } #MainContent .product__form{ --form-top: 10px; display: grid; grid-template-columns: minmax(0, 100%); gap: var(--grid-gutter); position: relative; } @media only screen and (max-width: 767px) { #MainContent .product__form{ --form-margin: var(--form-margin-mobile); gap: calc(var(--form-margin) * 2); } #MainContent .variant__labels--hide .product__form{ gap: var(--form-margin); } } #MainContent .product__form .btn--submit{ position: relative; width: 100%; transition: color 0.3s ease, border 0.3s ease, background 0.3s linear; } #MainContent .product__form .btn--submit span{ transition: opacity 0.3s ease; } #MainContent .product__form .btn--submit.is-loading{ opacity: 1; cursor: default; } #MainContent .product__form .btn--submit.is-loading span{ opacity: 0; transition: opacity 0s; } #MainContent .product__form .btn--submit.is-loading::before{ content: none; } #MainContent .product__form .btn--submit .loader-indeterminate{ background-color: var(--btn-text); } #MainContent .product__form .btn--submit .loader--line{ transition: opacity 0.3s ease, visibility 0s linear 0s; background-color: var(--btn-text-alpha-10); } #MainContent .product__form .btn, #MainContent .product__form .shopify-payment-button__button--unbranded, #MainContent .product__form .shopify-payment-button{ width: 100%; } #MainContent .product__form .errors{ margin-bottom: 0; } #MainContent .product__form__select{ display: none; } #MainContent .shop-pay-terms{ font-size: calc(14px * var(--adjust-body)); } #MainContent .shop-pay-terms:empty{ display: none; } #MainContent .product__submit__holder--spb .shopify-payment-button__button--unbranded{ border: var(--BORDER-WIDTH) solid transparent; padding: var(--form-top) var(--form-left); } #MainContent .product__submit__holder--spb .product__submit__add{ min-height: 44px; } #MainContent .shopify-payment-button__more-options{ font-size: calc(13.6px * var(--adjust-body)) !important; margin-top: 5px !important; } #MainContent .product__submit__buttons{ --form-margin: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--form-margin); } @media only screen and (max-width: 767px) { #MainContent .product__submit__buttons{ --form-margin: var(--form-margin-mobile); } } @media only screen and (min-width: 1024px) { #MainContent .btn--half .product__submit__buttons{ grid-template-columns: repeat(2, minmax(0, 1fr)); } #MainContent .btn--half.variant--soldout .product__submit__holder--notification .product__submit__buttons{ grid-template-columns: minmax(0, 1fr); } } #MainContent .product__submit__buttons .shopify-payment-button__button--hidden{ display: none; } #MainContent .product__submit__add em{ font-style: normal; } #MainContent .product__submit__add .product__price--regular{ margin: 0; } #MainContent .product__submit__add .product__price--regular::before{ content: "•"; margin: 0 5px; } #MainContent .product__submit__item .loader--line{ position: absolute; top: 0; bottom: 0; width: 80%; margin: auto; } #MainContent .product__form__errors{ overflow: hidden; position: relative; text-align: left; max-height: 0; visibility: hidden; opacity: 0; transition: max-height 0.3s, visibility 0.3s, opacity 0.3s, margin 0.3s; } #MainContent .product__form__errors.is-visible{ max-height: 500px; visibility: visible; opacity: 1; transition: max-height 0.3s 0.3s, visibility 0.3s 0.3s, opacity 0.3s 0.3s, margin 0.3s 0.3s; } @media only screen and (max-width: 479px) { #MainContent .product__form__errors{ max-width: 390px; } } #MainContent .product__form__errors .errors{ max-width: 100%; margin: var(--form-margin) 0; padding: 15px 40px 15px 15px; position: relative; } @media only screen and (max-width: 767px) { #MainContent .product__form__errors .errors{ --form-margin: var(--form-margin-mobile); } } #MainContent .product__form__errors .errors__close{ position: absolute; top: 0; right: 0; width: 32px; height: 32px; padding: 5px; z-index: 20; cursor: pointer; } #MainContent .product__form__errors .errors__close .icon-close{ width: 100%; height: 100%; } #MainContent .product__form__errors .errors__close:hover .icon-close{ transform: rotate(90deg); } #MainContent .product__add__success{ display: flex; align-items: stretch; background: var(--bg); border-left: var(--BORDER-WIDTH) solid var(--border); border-bottom: var(--BORDER-WIDTH) solid var(--border); } @media only screen and (max-width: 767px) { #MainContent .product__add__success{ border-left: none; } } #MainContent .product__add__success__image{ width: 50%; } @media only screen and (max-width: 767px) { #MainContent .product__add__success__image{ display: none; } } #MainContent .product__add__success__image-bg{ height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; } #MainContent .product__add__success__content{ width: 50%; padding: 50px; } @media only screen and (max-width: 767px) { #MainContent .product__add__success__content{ width: 100%; padding: 15px 20px; } } #MainContent .product__add__success--hide{ display: none; } #MainContent .variant--soldout .quantity-selector label, #MainContent .variant--soldout .quantity-selector input, #MainContent .variant--soldout .quantity-selector button, #MainContent .variant--soldout .shopify-payment-button label, #MainContent .variant--soldout .shopify-payment-button input, #MainContent .variant--soldout .shopify-payment-button button, #MainContent .variant--soldout .product__price label, #MainContent .variant--soldout .product__price input, #MainContent .variant--soldout .product__price button, #MainContent .variant--unavailabe .quantity-selector label, #MainContent .variant--unavailabe .quantity-selector input, #MainContent .variant--unavailabe .quantity-selector button, #MainContent .variant--unavailabe .shopify-payment-button label, #MainContent .variant--unavailabe .shopify-payment-button input, #MainContent .variant--unavailabe .shopify-payment-button button, #MainContent .variant--unavailabe .product__price label, #MainContent .variant--unavailabe .product__price input, #MainContent .variant--unavailabe .product__price button{ cursor: default; } #MainContent .variant--soldout .product__submit__add, #MainContent .variant--soldout .product__submit__add:hover, #MainContent .variant--unavailabe .product__submit__add, #MainContent .variant--unavailabe .product__submit__add:hover{ border-color: transparent; background-color: var(--text-alpha-10); color: var(--text-alpha-50); cursor: not-allowed; } #MainContent .variant--soldout .product__submit__add > *, #MainContent .variant--soldout .product__submit__add:hover > *, #MainContent .variant--unavailabe .product__submit__add > *, #MainContent .variant--unavailabe .product__submit__add:hover > *{ pointer-events: none; } @media only screen and (max-width: 767px) { #MainContent .variant--soldout .product__submit__add, #MainContent .variant--soldout .product__submit__add:hover, #MainContent .variant--unavailabe .product__submit__add, #MainContent .variant--unavailabe .product__submit__add:hover{ transform: none; pointer-events: none; } } #MainContent .variant--soldout .product__submit__add::before, #MainContent .variant--unavailabe .product__submit__add::before{ background-color: var(--text-alpha-25); } #MainContent .variant--soldout .shopify-payment-button, #MainContent .variant--unavailabe .shopify-payment-button{ position: relative; pointer-events: none; } #MainContent .variant--soldout .shopify-payment-button::after, #MainContent .variant--unavailabe .shopify-payment-button::after{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0); z-index: 2; } #MainContent .variant--soldout .product__submit__holder--notification .product__submit__add, #MainContent .variant--soldout .product__submit__holder--notification .product__submit__add:hover{ cursor: pointer; pointer-events: auto; } #MainContent .variant--unavailabe .product__price{ opacity: 0; } #MainContent .no-js .quantity__btn{ display: none !important; } #MainContent .no-js .product__form__select{ display: inline-block; margin-right: 5px; } /*================ Product gallery ================*/ #MainContent .product-gallery{ position: relative; } @media only screen and (max-width: 767px) { #MainContent .product-gallery{ margin-bottom: var(--gutter-mobile); } } #MainContent .product-gallery__media-slider{ margin: 0 auto; } @media only screen and (max-width: 479px) { #MainContent .product-gallery__media-slider{ max-width: 100%; } } @media only screen and (max-width: 479px) { #MainContent .product-gallery__media-slider .flickity-prev-next-button{ display: none; } } #MainContent .product-gallery__media-slider .flickity-button{ z-index: 1; background: var(--COLOR-BG); } #MainContent .product-gallery__media-slider:not(.has-media-active) .flickity-button{ transition-delay: 0.15s !important; } #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button, #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button:not(:disabled){ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button::before, #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button::after, #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button:not(:disabled)::before, #MainContent .no-outline .product-gallery__media-slider.has-media-active .flickity-prev-next-button:not(:disabled)::after{ transition: none; } #MainContent .product-gallery__media-slider--single{ margin: 0; } #MainContent .product-gallery__media-slide--placeholder{ display: block; width: 100%; height: 0; } #MainContent .product-gallery__media-slide{ width: 100%; position: relative; overflow: hidden; } #MainContent .product-gallery__media-slider--single .product-gallery__media-slide.media--hidden:not(.is-selected) button, #MainContent .product-gallery__media-slider--single .product-gallery__media-slide.media--hidden:not(.is-selected) input, #MainContent .product-gallery__media-slider--single .product-gallery__media-slide.media--hidden:not(.is-selected) iframe, #MainContent .product-gallery__media-slider--single .product-gallery__media-slide.media--hidden:not(.is-selected) .shopify-model-viewer-ui__button, #MainContent .product-gallery__media-slider--single .product-gallery__media-slide.media--hidden:not(.is-selected) .shopify-model-viewer-ui__controls-area{ visibility: visible; } #MainContent .product-gallery__media-slide.is-loading model-viewer{ background-image: var(--loading-svg); background-size: 320px auto; background-repeat: no-repeat; background-position: center center; } #MainContent .product-gallery__media{ position: relative; width: 100%; height: 0; min-height: 1px; overflow: hidden; } #MainContent .product-gallery__media img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; margin: 0; object-fit: contain; } #MainContent .product-gallery__media .lazy-image, #MainContent .product-gallery__media iframe, #MainContent .product-gallery__media model-viewer, #MainContent .product-gallery__media .shopify-model-viewer-ui, #MainContent .product-gallery__media img, #MainContent .product-gallery__media > video, #MainContent .product-gallery__media .media-item{ position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; min-width: 100%; } #MainContent .product-gallery__media iframe, #MainContent .product-gallery__media model-viewer, #MainContent .product-gallery__media .shopify-model-viewer-ui, #MainContent .product-gallery__media .media-item{ height: 100%; } #MainContent .product-gallery__media--video video{ height: 100%; object-fit: cover; } #MainContent .product-gallery__media-link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-width: 768px) { #MainContent .product-gallery__media-link{ cursor: zoom-in; cursor: var(--icon-zoom-in), zoom-in; } } #MainContent .product-gallery__media--image{ height: auto; background-color: transparent; } #MainContent .product-gallery__media--onboarding{ padding-top: 66%; background-color: transparent; } #MainContent .product-gallery__media--onboarding .placeholder-svg, #MainContent .product-gallery__media--onboarding .placeholder-svg-filled{ position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; max-width: 150%; max-height: 150%; transform: translate(-50%, -50%); } #MainContent .product-gallery__media--onboarding.featured-product--two-columns{ padding-top: 66%; } #MainContent .product-gallery__media-space{ padding-top: var(--media-padding-top, 0); } #MainContent .product-gallery__view-in-space{ width: 100%; position: relative; border-color: transparent; color: var(--text); background: var(--text-alpha-8); margin-top: 10px; } #MainContent .product-gallery__view-in-space:hover{ color: var(--text); background: var(--text-alpha-15); } #MainContent .product-gallery__view-in-space:active, #MainContent .product-gallery__view-in-space:focus{ color: var(--text); background: var(--text-alpha-8); } #MainContent .product-gallery__view-in-space .icon{ display: inline-block; vertical-align: middle; width: 22px; height: 22px; line-height: 22px; margin-right: 4px; fill: transparent; } #MainContent .product-gallery__view-in-space .icon .icon-media-model-outline{ stroke: none; } #MainContent .product-gallery__view-in-space .icon .icon-media-model-element{ fill: var(--text); opacity: 1; } #MainContent .product-gallery__view-in-space[data-shopify-xr-hidden]{ visibility: hidden; position: absolute; width: 0; height: 0; overflow: hidden; } @media only screen and (min-width: 768px) { #MainContent .product-gallery__view-in-space[data-shopify-xr-hidden]{ display: none; } } #MainContent .product-gallery__view-in-space-text{ display: inline-block; vertical-align: middle; line-height: 22px; } @media only screen and (min-width: 768px) { #MainContent .product-gallery--equal .product-gallery__media-slide{ display: flex; } } #MainContent .product-gallery--equal .media__wrapper{ grid-column: span 2; } @media only screen and (min-width: 768px) { #MainContent .product-gallery--equal .product-gallery__media img{ object-fit: cover; } } #MainContent .body--rounded-corners .product-gallery__media-slider .product-gallery__media, #MainContent .body--rounded-corners .product-gallery__media-slider .flickity-viewport{ border-radius: var(--radius); overflow: hidden; } #MainContent .product-gallery__media-slider .flickity-button:focus, #MainContent .product-gallery__media-slider .flickity-button.focus-visible{ opacity: 1; } #MainContent .product-gallery__media-link:focus{ outline: auto; outline: -webkit-focus-ring-color auto 5px; outline-offset: -6px; } #MainContent .product-gallery__media-slide:focus, #MainContent .product-gallery__media-slide.focus-visible{ outline: -webkit-focus-ring-color auto 5px; } /*================ Deferred media ================*/ #MainContent .deferred-media{ display: block; } #MainContent .deferred-media:not([loaded]){ background: var(--loading-svg) no-repeat center center; background-size: 320px auto; } #MainContent .deferred-media:not([loaded]) template{ z-index: -1; } #MainContent .deferred-media[loaded] > .deferred-media__poster{ display: none; } #MainContent .deferred-media__poster{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: default; } #MainContent .deferred-media__poster-button{ position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -30px; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 8px; background: var(--COLOR-BG); border: var(--BORDER-WIDTH) solid var(--text-alpha-5); z-index: 1; cursor: pointer; } #MainContent .deferred-media__poster-button .icon-media-video-outline, #MainContent .deferred-media__poster-button .icon-media-model-outline{ stroke: none; } #MainContent .deferred-media__poster-button .icon{ width: 100%; height: 100%; } #MainContent .deferred-media__poster img{ object-fit: cover; } #MainContent .body--rounded-corners .deferred-media__poster{ border-radius: var(--radius); overflow: hidden; } #MainContent .deferred-media__poster:focus .deferred-media__poster-button{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .deferred-media__poster, #MainContent .deferred-media__poster:focus, #MainContent .deferred-media__poster:focus-visible, #MainContent .deferred-media__poster.focus-visible{ outline: none; } /*================ Product grid item ================*/ #MainContent{ --product-media-padding-top: var(--PRODUCT-MEDIA-PADDING-TOP); } #MainContent .product-grid-item{ max-width: 100%; --move-offset: 10px; position: relative; text-align: center; white-space: normal; } #MainContent .product-grid-item shopify-payment-terms, #MainContent .product-grid-item .shopify-installments{ display: none; } #MainContent .product-grid-item .errors{ position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px; border-radius: 0; font-size: calc(12px * var(--adjust-product-grid)); text-align: center; cursor: default; opacity: 0; margin: 0; z-index: 1; } #MainContent .product-grid-item .placeholder-svg, #MainContent .product-grid-item .placeholder-svg-filled{ position: absolute; top: 0; left: 0; } #MainContent .product-grid-item h3, #MainContent .product-grid-item .h3{ font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); } @media only screen and (min-width: 1024px) { #MainContent .collection-items--4 .product-grid-item:nth-child(-n+4){ --move-offset: 20px; } } @media only screen and (min-width: 768px) { #MainContent .tab-collections__container .product-grid-item, #MainContent .look__slide .product-grid-item, #MainContent .collection-items--4 .product-grid-item:nth-child(-n+3), #MainContent .collection-items--3 .product-grid-item:nth-child(-n+3), #MainContent .collection-items--2 .product-grid-item:nth-child(-n+2){ --move-offset: 20px; } } #MainContent .no-touch .product__media__hover{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: var(--bg); visibility: hidden; } #MainContent .no-touch .product__media__hover--fade-in{ opacity: 0; transition: opacity 0.25s ease-out, visibility 0s 0.25s; } #MainContent .no-touch .product__media__hover--wipe{ transition: visibility 0s 0.6s; } #MainContent .no-touch .product__media__image--hover-wipe{ will-change: transform; transition: -webkit-clip-path 0.6s cubic-bezier(0.75, -0.01, 0, 1.22); transition: clip-path 0.6s cubic-bezier(0.75, -0.01, 0, 1.22); transition: clip-path 0.6s cubic-bezier(0.75, -0.01, 0, 1.22), -webkit-clip-path 0.6s cubic-bezier(0.75, -0.01, 0, 1.22); -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); } #MainContent .no-touch .product__media__image--hover-fade-in{ transition: opacity 0.25s ease-in, visibility 0s linear 0s; } #MainContent .no-touch .product-grid-item__image--hovered .product__media__hover--wipe, #MainContent .no-touch .product-grid-item__image:hover .product__media__hover--wipe{ visibility: visible; transition-delay: 0s; } #MainContent .no-touch .product-grid-item__image--hovered .product__media__image--hover-wipe, #MainContent .no-touch .product-grid-item__image:hover .product__media__image--hover-wipe{ -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.75, -0.01, 0, 1.22); } #MainContent .no-touch .product-grid-item__image--hovered .product__media__image--hover-fade-in, #MainContent .no-touch .product-grid-item__image:hover .product__media__image--hover-fade-in{ opacity: 0; } #MainContent .no-touch .product-grid-item__image--hovered .product__media__hover--fade-in, #MainContent .no-touch .product-grid-item__image:hover .product__media__hover--fade-in{ opacity: 1; visibility: visible; transition-delay: 0s; transition-duration: 0.25s; transition-timing-function: ease-out; } #MainContent .no-touch .product__media__image--hover-slide, #MainContent .no-touch .product__media__hover--slide{ visibility: visible; transition: transform 0.4s cubic-bezier(1, 0, 0.6, 1); transform: none; } #MainContent .no-touch .product__media__hover--slide{ transform: translateX(100%); } #MainContent .no-touch .product-grid-item__image--hovered .product__media__image--hover-slide, #MainContent .no-touch .product-grid-item__image:hover .product__media__image--hover-slide{ transform: translateX(-100%); } #MainContent .no-touch .product-grid-item__image--hovered .product__media__hover--slide, #MainContent .no-touch .product-grid-item__image:hover .product__media__hover--slide{ transform: none; } #MainContent .product-grid-item__info{ display: grid; grid-template-columns: minmax(0, 100%); gap: 9px; align-content: start; font-size: calc(12.8px * var(--adjust-product-grid)); } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__info{ font-size: calc(15.2px * var(--adjust-product-grid)); } } #MainContent .product-grid-item__info--inline .product-grid-item__title, #MainContent .product-grid-item__info--inline .product-grid-item__price{ display: inline; vertical-align: middle; } #MainContent .product-grid-item__price{ margin: 0; display: block; text-decoration: none; font-size: calc(14.4px * var(--adjust-product-grid)); line-height: 1; } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__price{ font-size: calc(17.6px * var(--adjust-product-grid)); } } #MainContent .product-grid-item__price .product__unit-price{ --text-size: calc(12px * var(--adjust-product-grid)); line-height: inherit; } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__price .product__unit-price{ --text-size: calc(14.4px * var(--adjust-product-grid)); } } #MainContent .product-grid-item__info--inline .product-grid-item__price .product__unit-price{ --text-size: calc(12px * var(--adjust-product-grid-heading)); } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__info--inline .product-grid-item__price .product__unit-price{ --text-size: calc(14.4px * var(--adjust-product-grid-heading)); } } #MainContent .product-grid-item__info--inline .product-grid-item__price{ font-size: calc(14.4px * var(--adjust-product-grid-heading)); } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__info--inline .product-grid-item__price{ font-size: calc(17.6px * var(--adjust-product-grid-heading)); } } #MainContent .product-grid-item__price-new{ margin-right: 5px; } #MainContent .product-grid-item__price-new:last-child{ margin-right: 0; } #MainContent .product-grid-item__info-separator{ display: inline-block; vertical-align: middle; width: 20px; height: var(--BORDER-WIDTH); margin: 0 8px; background: var(--text); border-radius: 4px; } #MainContent .product-grid-item__info--inline, #MainContent .product-grid-item__info--left{ text-align: left; } #MainContent .product-grid-item__info--inline .product-grid-item__swatch, #MainContent .product-grid-item__info--left .product-grid-item__swatch{ justify-content: flex-start; } #MainContent .product-grid-item__title{ display: block; text-decoration: none; text-transform: none; font-weight: var(--FONT-WEIGHT-BODY-BOLD); font-size: calc(14.4px * var(--adjust-product-grid-heading)); line-height: 1; } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__title{ font-size: calc(17.6px * var(--adjust-product-grid-heading)); } } #MainContent .product-grid-item__title.font-heading{ font-weight: var(--FONT-WEIGHT-HEADING-BOLD); } #MainContent .product-grid-item__info .product-cutline{ margin: -2px 0 3px; line-height: 1; font-size: calc(12.8px * var(--adjust-product-grid)); } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__info .product-cutline{ font-size: calc(15.2px * var(--adjust-product-grid)); } } #MainContent .product-grid-item__swatch{ position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 -6px; min-height: 12px; } @-moz-document url-prefix() { .product-grid-item__swatch { padding-bottom: 1px; } } @media (pointer: fine) { #MainContent .product-grid-item__swatch::before{ content: ""; position: absolute; top: -6px; left: 0; right: 0; bottom: 0; } #MainContent .product-grid-item__swatch:hover .swatch__button.is-hidden{ display: inline-block; animation: fadeIn 1s ease; } #MainContent .product-grid-item__swatch:hover .swatch__text-more{ display: none; } } #MainContent .product-grid-item__swatch.is-visible .swatch__button.is-hidden, #MainContent .product-grid-item__swatch:focus-within .swatch__button.is-hidden{ display: inline-block; animation: fadeIn 1s ease; } #MainContent .product-grid-item__swatch.is-visible .swatch__text-more, #MainContent .product-grid-item__swatch:focus-within .swatch__text-more{ display: none; } #MainContent .product-grid-item__swatch .swatch__button{ margin: 0 6px 6px 0; padding: 0; } #MainContent .product-grid-item__swatch .swatch__button:last-child{ margin-right: 0; } #MainContent .product-grid-item__swatch .swatch__button.is-hidden{ display: none; } #MainContent .product-grid-item__swatch .swatch__button .swatch__label{ width: 12px; height: 12px; } @media only screen and (max-width: 479px) { #MainContent .product-grid-item__swatch .swatch__button .swatch__label{ width: 15px; height: 15px; } } #MainContent .product-grid__swatch--rectangle .swatch__button .swatch__label{ border-radius: 0; width: 20px; height: 10px; } @media only screen and (max-width: 479px) { #MainContent .product-grid__swatch--rectangle .swatch__button .swatch__label{ width: 24px; height: 12px; } } #MainContent .body--rounded-corners .product-grid__swatch--rectangle .swatch__button .swatch__label{ border-radius: var(--radius-small); } #MainContent .swatch__link--no-image{ cursor: default; } #MainContent .swatch__text-more{ margin: 0 0 6px; font-size: calc(12px * var(--adjust-product-grid)); line-height: 12px; animation: fadeIn 1s ease; } #MainContent .product-grid__swatch--rectangle .swatch__text-more{ line-height: 10px; } @media only screen and (max-width: 479px) { #MainContent .swatch__text-more{ font-size: calc(14.4px * var(--adjust-product-grid)); } } #MainContent .soldout .quick__form{ display: none; } #MainContent .product__media__holder{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } #MainContent .product__media__container{ --aspect-ratio: 1; position: relative; grid-row-start: 1; grid-column-start: 1; overflow: hidden; width: 100%; height: 100%; } #MainContent .product__media__container--portrait{ width: 0; height: 100%; padding-right: calc(var(--aspect-ratio) * var(--product-media-padding-top)); } #MainContent .product__media__container--landscape{ width: 100%; height: 0; padding-top: calc(100% / var(--aspect-ratio)); } #MainContent .product__media img{ image-rendering: auto; } #MainContent .product__media.hidden{ display: none; visibility: hidden; content-visibility: hidden; } #MainContent .product__media--featured-secondary{ z-index: 2; } #MainContent .product__media--featured-visible{ z-index: 3; } #MainContent .product__media--featured-secondary.product__media--featured-visible{ animation-name: fadeIn; animation-duration: 0.25s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: ease-in; z-index: 4; } #MainContent .product__media__image--hover-wipe .product__media--featured-secondary.product__media--featured-visible{ animation-name: clipPathFromLeft; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.75, -0.01, 0, 1.22); } #MainContent .product__media__image--hover-slide .product__media--featured-secondary.product__media--featured-visible{ animation-name: slideInFromLeft; animation-duration: 0.4s; animation-timing-function: cubic-bezier(1, 0, 0.6, 1); } #MainContent .product__media__image--hover-none .product__media--featured-secondary.product__media--featured-visible{ animation-duration: 0s; animation-delay: 0s; } #MainContent .product__media__image{ position: absolute; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; } #MainContent .product__media__slider{ display: block; height: 100%; } #MainContent .product__media__slider .flickity-viewport{ width: 100%; height: 100% !important; } #MainContent .supports-touch .product__media__slider{ display: none; } #MainContent .product__media__slide{ width: 100%; height: 100%; background-color: var(--bg); } #MainContent .product__media__hover-img{ z-index: 0; } #MainContent .product__media__hover-img--visible{ z-index: 1; } #MainContent .product-grid-item__image{ position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; margin-bottom: 15px; } #MainContent .product-grid-item__image::before{ content: ""; padding-top: var(--product-media-padding-top); width: 100%; height: 100%; grid-row-start: 1; grid-column-start: 1; } #MainContent .product-grid-item__image .btn-quick-buy{ opacity: 0; transform: translate(calc(15px + var(--btn-icon-size) / 2), calc(15px + var(--btn-icon-size) / 2)) scale(0); transition: transform 0.3s ease, opacity 0.15s ease; transform-origin: right bottom; z-index: 2; } @media only screen and (max-width: 1023px) { #MainContent .product-grid-item__image .btn-quick-buy{ opacity: 1; transform: translate(0); will-change: opacity; } } #MainContent .product-grid-item__image--hovered .btn-quick-buy, #MainContent .product-grid-item__image:hover .btn-quick-buy, #MainContent .product-grid-item__image:focus-within .btn-quick-buy{ opacity: 1; transform: translate(0); transition-duration: 0.3s; } #MainContent .product-grid-item__image--error .btn-quick-buy, #MainContent .product-grid-item__image--error:hover .btn-quick-buy, #MainContent .product-grid-item__image--error:focus-within .btn-quick-buy{ opacity: 0; transform: translate(calc(15px + var(--btn-icon-size) / 2), calc(15px + var(--btn-icon-size) / 2)) scale(0); } #MainContent .product-grid-item__image--error .errors{ animation: fadeInOutError 6s ease; } #MainContent .product-grid-item__quick-buy{ position: absolute; right: 0; bottom: 0; width: 100%; z-index: 2; } #MainContent .product-badge{ position: absolute; z-index: 1; top: 0; left: 0; max-width: 100%; margin: 10px; display: grid; grid-template-columns: minmax(0, 100%); gap: 5px; justify-items: start; transition: transform 0.2s ease; pointer-events: none; } #MainContent .product__block .product-badge{ position: relative; margin: 0; pointer-events: auto; } #MainContent .product-badge__item{ font-family: var(--FONT-STACK-SUBHEADING); font-weight: var(--FONT-WEIGHT-SUBHEADING); font-size: calc(14px * var(--FONT-ADJUST-SUBHEADING)); text-transform: var(--SUBHEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-SUBHEADING); color: inherit; background-color: var(--sale-bg); color: var(--sale-text); text-align: left; font-size: calc(11px * var(--adjust-badges)); line-height: 1.2; transition: opacity 0.15s ease; padding: 6px 8px; height: auto; border-radius: var(--RADIUS-BADGE); } @media only screen and (max-width: 479px) { #MainContent .product-badge__item{ font-size: calc(13.2px * var(--adjust-badges)); } #MainContent .product-grid-item__image .product-badge__item{ font-size: calc(11px * var(--adjust-badges)); } } #MainContent .product-badge__item > span{ display: block; } #MainContent .product-badge__item--sold{ background-color: var(--sold-bg); color: var(--sold-text); } #MainContent .product-badge__item--custom{ background-color: var(--custom-bg); color: var(--custom-text); } #MainContent .product-badge__item--saving{ background-color: var(--saving-bg); color: var(--saving-text); } #MainContent .body--rounded-corners .product-grid-item__image, #MainContent .body--rounded-corners .product__media__container, #MainContent .body--rounded-corners .product__media__slider:not(.flickity-enabled) .product-gallery__media{ border-radius: var(--radius); overflow: hidden; } #MainContent .product-grid-item .btn:focus, #MainContent .product-grid-item .shopify-payment-button__button--unbranded:focus, #MainContent .product-grid-item .btn.focus-visible, #MainContent .product-grid-item .focus-visible.shopify-payment-button__button--unbranded{ opacity: 1; transform: translateY(0); transition: none; } #MainContent .product__media:focus, #MainContent .product__media.focus-visible{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .product__media__holder:focus .product__media{ outline: auto; outline: -webkit-focus-ring-color auto 5px; outline-offset: -6px; } #MainContent .product__media__hover{ display: none; } #MainContent .product-grid-item__image:hover .product__media__image--hover-wipe{ -webkit-clip-path: unset; clip-path: unset; } #MainContent .product-grid-item__image .btn-quick-buy{ transform: scale(1); } #MainContent .no-js .product__media__slide:not(:first-child){ display: none !important; } /*================ Siblings ================*/ #MainContent .siblings{ --swatch: var(--text); --swatch-size: 44px; --inner-offset: calc(var(--BORDER-WIDTH) + 2px); --swatches-gap: 12px; border: 0; margin: 0 0 calc(-1 * var(--swatches-gap)); padding: 0; display: flex; width: 100%; flex-wrap: wrap; justify-content: flex-start; align-items: center; font-size: 0; } @media only screen and (max-width: 767px) { #MainContent .siblings{ --swatches-gap: 8px; } } #MainContent .siblings__legend{ flex: 0 0 100%; } #MainContent .siblings__button{ position: relative; width: var(--swatch-size); height: var(--swatch-size); min-width: var(--swatch-size); display: block; } #MainContent .siblings__button .lazy-image{ height: 100%; } #MainContent .siblings__swatch{ margin: 0 var(--swatches-gap) var(--swatches-gap) 0; overflow: hidden; } #MainContent .siblings__swatch:last-child{ margin-right: 0; } #MainContent .siblings__swatch[aria-current=true]{ cursor: default; } #MainContent .siblings__swatch[aria-current=true] .siblings__button:after{ content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--swatch-size); height: var(--swatch-size); min-width: var(--swatch-size); border: var(--BORDER-WIDTH) solid var(--swatch); z-index: 10; } #MainContent .siblings__swatch[aria-current=true] .siblings__button{ border: var(--inner-offset) solid var(--bg); } #MainContent .siblings__swatch--sold-out img{ opacity: 0.8; } #MainContent .siblings__swatch--sold-out .siblings__button:before{ content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: var(--BORDER-WIDTH); height: 100%; border-radius: 0; background: var(--text); transform: translate(-50%, -50%) rotate(45deg); } #MainContent .siblings__swatch--sold-out[aria-current=true] .siblings__button:before{ height: calc(100% + 2 * var(--inner-offset)); } #MainContent .siblings__swatch--circle img, #MainContent .siblings__swatch--circle svg{ border-radius: 50%; overflow: hidden; } #MainContent .siblings__swatch--circle .siblings__button, #MainContent .siblings__swatch--circle .siblings__button:after{ border-radius: 50%; } #MainContent .siblings__swatch--colors{ --swatch: #CCC; } #MainContent .siblings__swatch--colors .icon-check{ position: absolute; top: 50%; left: 50%; width: 22px; transform: translate(-50%, -50%); } #MainContent .siblings__swatch--colors .siblings__button{ background: var(--swatch) no-repeat center center/cover; } #MainContent .siblings__swatch--rectangle{ --swatch-size: 56px; --rectangle-ratio: calc(var(--swatch-size) / 1.6); } #MainContent .siblings__swatch--rectangle svg, #MainContent .siblings__swatch--rectangle .siblings__button, #MainContent .siblings__swatch--rectangle[aria-current=true] .siblings__button:after{ height: var(--rectangle-ratio); } #MainContent .siblings__swatch--rectangle[aria-current=true] svg{ height: calc(var(--rectangle-ratio) - var(--inner-offset) * 2); } #MainContent .siblings__swatch--rectangle.siblings__swatch--sold-out .siblings__button:before{ --offset-diagonals: calc(var(--inner-offset) * 1.4); height: calc(var(--swatch-size) + var(--offset-diagonals) * 2); transform: translate(-50%, -50%) rotate(59deg); } #MainContent .palette--light .siblings__swatch--colors .siblings__button[data-swatch=white i]{ border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER); } #MainContent .palette--light .siblings__swatch--colors[aria-current=true] .siblings__button[data-swatch=white i]{ border: var(--inner-offset) solid var(--COLOR-BLACK-ALPHA-10); } #MainContent .palette--light .siblings__swatch--colors[aria-current=true] .siblings__button[data-swatch=white i]:after{ border-color: var(--COLOR-BLACK); } #MainContent .palette--light .siblings__swatch--colors.siblings__swatch--sold-out .siblings__button[data-swatch=black i]:before{ background: var(--COLOR-WHITE); } #MainContent .palette--light .siblings__swatch--image[aria-current=true] .siblings__button[data-swatch=white i]:after{ border-color: var(--text); } #MainContent .palette--dark .siblings__swatch--colors .siblings__button[data-swatch=black i]{ border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER); } #MainContent .palette--dark .siblings__swatch--colors[aria-current=true] .siblings__button[data-swatch=black i]{ border: var(--inner-offset) solid var(--COLOR-WHITE-ALPHA-50); } #MainContent .palette--dark .siblings__swatch--colors[aria-current=true] .siblings__button[data-swatch=black i]:after{ border-color: var(--COLOR-WHITE); } #MainContent .palette--dark .siblings__swatch--colors.siblings__swatch--sold-out .siblings__button[data-swatch=white i]:before{ background: var(--COLOR-BLACK); } #MainContent .palette--dark .siblings__swatch--image[aria-current=true] .siblings__button[data-swatch=black i]:after{ border-color: var(--text); } /*================ Product subscriptions ================*/ #MainContent .product__subs{ padding: 0; border: 0; margin: 0; } #MainContent .product__subs__group{ display: block; border: var(--BORDER-WIDTH) solid var(--border); } #MainContent .product__subs__group + .product__subs__group{ border-top: none; } #MainContent .product__subs__plans{ margin-left: 24px; } #MainContent .product__subs__plans .product__subs__option{ padding-top: 0; } #MainContent .product__subs__option{ display: flex; width: 100%; padding: var(--form-top) var(--form-left); align-items: center; cursor: pointer; line-height: 1.3; font-size: calc(14px * var(--adjust-body)); font-family: var(--FONT-STACK-BODY); } @media only screen and (max-width: 767px) { #MainContent .product__subs__option{ font-size: calc(12px * var(--adjust-body)); line-height: 1.1; padding: 10px 12px; } } #MainContent .product__subs__option input[type=radio]{ background-color: transparent; color: var(--text-darken); width: 16px; height: 16px; flex-shrink: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; padding: 0; border: 0; margin: 0 8px 0 0; cursor: pointer; } @media only screen and (max-width: 767px) { #MainContent .product__subs__option input[type=radio]{ width: 12px; height: 12px; } } #MainContent .product__subs__option input[type=radio]:before{ content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: var(--BORDER-WIDTH) solid var(--text-darken); box-sizing: border-box; } #MainContent .product__subs__option input[type=radio]:checked:before{ background-image: radial-gradient(var(--PRIMARY-BUTTONS-COLOR-BG) 50%, var(--bg) 51%); } #MainContent .product__subs__description{ color: var(--text-lighten); font-size: calc(14px * var(--adjust-body)); background: var(--hairline); margin: 0; padding: 10px 20px; font-style: var(--FONT-STYLE-BODY-ITALIC); } #MainContent .product__subs__description:empty{ display: none; } #MainContent [data-subscription-watch-price]{ display: none; } #MainContent .body--rounded-corners .product__subs__group:first-of-type{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } #MainContent .body--rounded-corners .product__subs__group:last-of-type{ border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } #MainContent .no-js .product__subs__plans.hidden{ display: block; } /*================ Product Upsell ================*/ #MainContent .body--rounded-corners .upsell__products{ overflow: initial; } #MainContent .upsell__products .flickity-page-dots{ --text: var(--COLOR-TEXT); bottom: -28px; } #MainContent .upsell__products--slider{ padding-bottom: calc(var(--PBB) + 28px); } #MainContent .product-upsell__holder{ --heading: var(--upsells-text); --text-lighten: var(--upsells-text-lighten); --disabled-grey-darken: var(--upsells-disabled-grey-darken); --inner: 12px; --border-color: var(--upsells-border, transparent); border: var(--BORDER-WIDTH) solid var(--border-color); padding: var(--inner); width: 100%; background-color: var(--upsells-bg); color: var(--upsells-text); transition: opacity 0.3s; } #MainContent .product-upsell__holder.fade-out{ opacity: 0; } #MainContent .flickity-slider .product-upsell__holder{ margin-right: var(--inner); } #MainContent .product-upsell__holder__title{ font-weight: var(--FONT-WEIGHT-HEADING); --heading-size: calc(16px * var(--adjust-heading)); font-size: var(--heading-size); } @media only screen and (max-width: 767px) { #MainContent .product-upsell__holder__title{ --heading-size: calc(14px * var(--adjust-heading)); } } #MainContent .product-upsell{ min-height: calc(var(--UPSELLS-HEIGHT) - 2 * (var(--inner) + var(--BORDER-WIDTH))); position: relative; display: flex; justify-content: flex-start; } #MainContent .product-upsell__content{ position: relative; z-index: 2; flex: 0 0 calc(100% - var(--UPSELLS-IMAGE-WIDTH)); max-width: calc(100% - var(--UPSELLS-IMAGE-WIDTH)); padding: 5px 0 5px var(--inner); font-size: calc(16px * var(--adjust-body)); display: flex; flex-flow: column wrap; } #MainContent .product-upsell__content .shopify-product-form{ margin-top: auto; } #MainContent .product-upsell__image{ position: relative; max-width: var(--UPSELLS-IMAGE-WIDTH); flex: 0 0 var(--UPSELLS-IMAGE-WIDTH); display: block; background-color: var(--upsells-bg); overflow: hidden; } #MainContent .product-upsell__title{ font-family: var(--FONT-STACK-HEADING); font-weight: var(--FONT-WEIGHT-HEADING); font-style: var(--FONT-STYLE-HEADING); text-transform: var(--HEADING-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-HEADING); font-size: calc(16px * var(--adjust-heading)); margin: 0 10px 10px 0; } #MainContent .product-upsell__subtitle{ margin: 0 0 10px; font-size: calc(12px * var(--adjust-body)); } #MainContent .product-upsell__row{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } #MainContent .product-upsell__variant-title{ color: var(--text-lighten); font-size: calc(12.8px * var(--adjust-body)); margin: 0; } #MainContent .product-upsell__variant-title span{ display: inline-block; width: 2px; height: 2px; border-radius: 50%; margin: 0 4px; background-color: currentcolor; vertical-align: middle; opacity: 0.8; } #MainContent .product-upsell__price{ margin: 0 0 10px; font-size: calc(12px * var(--adjust-body)); } #MainContent .product-upsell__price-new{ margin-right: 5px; } #MainContent .product-upsell__price-new:last-child{ margin-right: 0; } #MainContent .product-upsell__unit-price{ --text-size: calc(12px * var(--adjust-body)); font-size: var(--text-size); line-height: calc(1.171875 * var(--adjust-body)); opacity: 0.5; } #MainContent .product-upsell__btn{ min-width: 0; margin-top: auto; align-self: flex-start; } @media only screen and (max-width: 479px) { #MainContent .product-upsell__btn{ width: auto; } } #MainContent .product-upsell__btn.btn--small{ --top-bottom-padding: 6px; --left-right-padding: 20px; } #MainContent .product-upsell__btn.btn--medium{ --top-bottom-padding: 9px; --left-right-padding: 26px; } #MainContent .product-upsell__btn.btn--large{ --top-bottom-padding: 12px; --left-right-padding: 28px; } #MainContent .product-upsell__btn-hidden{ visibility: hidden; position: absolute; top: 0; left: 0; font-size: 80%; opacity: 0; white-space: nowrap; } #MainContent .product-upsell__btn-progress{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; content-visibility: hidden; opacity: 0; transition: opacity 0.3s ease; } #MainContent .product-upsell__btn-check{ position: absolute; top: 50%; left: 50%; width: 14px; height: 8px; border-left: var(--BORDER-WIDTH) solid var(--white); border-bottom: var(--BORDER-WIDTH) solid var(--white); margin-top: -2px; transform: translate(-50%, -50%) rotate(-45deg); opacity: 0; } #MainContent .product-upsell__btn.is-success, #MainContent .product-upsell__btn.is-success:disabled, #MainContent .product-upsell__btn.is-success:disabled:hover{ --btn-text: var(--SECONDARY-BUTTONS-COLOR-BG); --btn-bg: var(--SECONDARY-BUTTONS-COLOR-TEXT); --btn-border: var(--SECONDARY-BUTTONS-COLOR-TEXT); } #MainContent .product-upsell__btn.is-loading .svg-loader circle{ stroke: var(--SECONDARY-BUTTONS-COLOR-ALPHA-50); } #MainContent .product-upsell__btn.is-loading .svg-loader circle ~ circle{ stroke: var(--SECONDARY-BUTTONS-COLOR-TEXT); } #MainContent .product-upsell__btn.is-loading, #MainContent .product-upsell__btn.is-loading:disabled, #MainContent .product-upsell__btn.is-loading:disabled:hover, #MainContent .product-upsell__btn.btn--secondary.is-loading:hover{ --btn-text: var(--SECONDARY-BUTTONS-COLOR-TEXT); --btn-bg: var(--SECONDARY-BUTTONS-COLOR-BG); } #MainContent .product-upsell__btn.btn--secondary.is-loading:hover, #MainContent .btn--secondary .product-upsell__btn.is-loading.shopify-payment-button__button--unbranded:hover{ transition: none; } #MainContent .product-upsell__btn.btn--secondary.is-loading:hover::before, #MainContent .btn--secondary .product-upsell__btn.is-loading.shopify-payment-button__button--unbranded:hover::before{ transform-origin: unset; transform: scaleY(0); } #MainContent .product-upsell__btn.is-success > .product-upsell__btn-text, #MainContent .product-upsell__btn.is-success > .product-upsell__btn-price{ opacity: 0; } #MainContent .product-upsell__btn.is-success > .product-upsell__btn-check{ opacity: 1; border-left-color: currentcolor; border-bottom-color: currentcolor; } #MainContent .product-upsell__btn.is-loading{ pointer-events: none; } #MainContent .product-upsell__btn.is-loading > .product-upsell__btn-text, #MainContent .product-upsell__btn.is-loading > .product-upsell__btn-price, #MainContent .product-upsell__btn.is-loading > .product-upsell__btn-check{ opacity: 0; } #MainContent .product-upsell__btn.is-loading > .product-upsell__btn-progress{ opacity: 1; content-visibility: visible; } #MainContent .product-upsell__btn.is-loading > .product-upsell__btn-progress circle ~ circle{ animation-play-state: running; } #MainContent .product-upsell__out-of-stock{ display: none; color: var(--disabled-grey-darken); margin: 8px 0 0; font-size: inherit; } #MainContent .product-upsell__btn.is-hidden{ display: none; } #MainContent .product-upsell__btn.is-hidden ~ .product-upsell__out-of-stock{ display: block; } #MainContent .product-upsell__unavailable{ margin: 0; font-size: calc(14px * var(--adjust-body)); opacity: 0.65; } #MainContent .product-upsell__errors{ overflow: hidden; visibility: hidden; position: relative; max-height: 0; border: var(--BORDER-WIDTH) solid var(--error); border-radius: var(--RADIUS-CHECKBOX); background-color: var(--error-bg); color: var(--error); opacity: 0; transition: all 0.3s; } #MainContent .product-upsell__errors.is-visible{ visibility: visible; max-height: 100vh; margin: 10px 0; opacity: 1; } #MainContent .product-upsell__errors .errors{ padding: 10px 40px 10px 10px; margin: 0; border: none; text-align: left; } #MainContent .product-upsell__errors .errors__close{ position: absolute; top: 4px; right: 12px; width: 20px; height: 20px; padding: 5px; z-index: 20; cursor: pointer; } #MainContent .product-upsell__errors .icon{ width: 100%; height: 100%; } #MainContent .product-upsell__holder--cart .product-upsell, #MainContent .product-upsell__holder--cart .product-upsell__errors.is-visible{ margin-bottom: 0; } #MainContent .product-upsell__holder--cart .product-upsell__title{ font-size: calc(13.04px * var(--adjust-body)); } #MainContent .product-upsell__holder--cart .product-upsell__btn, #MainContent .product-upsell__holder--cart .product-upsell__variant-title{ font-size: calc(11px * var(--adjust-body)); } #MainContent .body--rounded-corners .product-upsell__image, #MainContent .body--rounded-corners .product-upsell__image img, #MainContent .body--rounded-corners .product-upsell__holder, #MainContent .body--rounded-corners .upsell__products__slider .flickity-viewport, #MainContent .body--rounded-corners .complementary-products__slider .flickity-viewport{ border-radius: var(--radius); overflow: hidden; } /*================ Progress bar ================*/ #MainContent .progress-bar{ position: absolute; bottom: 0; left: 0; right: 0; margin: 4px 8px; height: 8px; border-radius: 4px; z-index: 1; pointer-events: none; } #MainContent .progress-bar__inner{ position: absolute; top: 0; left: 0; height: 4px; border-radius: 2px; width: 0%; background-color: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); animation: none; animation-fill-mode: forwards; } #MainContent .progress-bar__inner.fill{ animation: progressBar var(--autoplay-speed) linear; } #MainContent hover-slideshow .btn-quick-buy{ bottom: 20px; } /*================ PhotoSwipe overwrites ================*/ #MainContent .pswp{ z-index: 10000; } #MainContent .pswp .pswp__bg{ background: var(--black-alpha-60); } #MainContent .pswp .pswp__zoom-wrap{ display: flex; flex-direction: column; justify-content: center; } #MainContent .pswp .pswp__custom-inner{ max-width: 920px; width: 100%; padding: 0 10px; margin: 0 auto; font-size: 0; text-align: center; } #MainContent .pswp .pswp__custom-inner:before{ display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ""; } #MainContent .pswp .pswp__custom-content{ display: inline-block; width: 100%; vertical-align: middle; } #MainContent .pswp .pswp__custom-iframe-outer{ overflow: hidden; position: relative; width: 100%; height: 0; padding-top: 56.25%; } #MainContent .pswp .pswp__custom-iframe-outer > video, #MainContent .pswp .pswp__custom-iframe-outer iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .pswp .pswp__button{ display: none; padding: 0; line-height: 1; font-size: 100%; } #MainContent .pswp .pswp__custom-close{ display: block; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 12px; z-index: 4; border: 0; background-color: var(--bg); color: var(--text); text-align: center; } #MainContent .pswp .pswp__custom-close:hover .icon-close{ transform: rotate(90deg); } #MainContent .pswp .pswp__counter{ display: none; position: absolute; bottom: 0; right: 0; white-space: nowrap; font-size: calc(14px * var(--adjust-body)); line-height: 24px; padding: 10px 20px; color: var(--text); background: var(--text-alpha-5); } #MainContent .pswp .pswp__loader{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity 0.4s, visibility 0.4s; } #MainContent .pswp .pswp__loader .loader__image{ visibility: initial; } #MainContent .pswp.pswp--animate_opacity{ transition: opacity 0.4s cubic-bezier(0.4, 0, 0.22, 1); } #MainContent .pswp .pswp__zoom-wrap{ transition: transform 0.4s cubic-bezier(0.75, 0, 0.175, 1); } #MainContent .pswp .pswp__bg{ transition: opacity 0.4s cubic-bezier(0.4, 0, 0.22, 1); } #MainContent .pswp--not-close-btn .pswp__custom-close{ display: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery]{ position: fixed; display: block; opacity: 1 !important; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__img--placeholder{ display: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__loader, #MainContent .pswp-zoom-gallery .pswp__loader{ z-index: 5; display: block; background: var(--bg); animation: 0.3s ease-in forwards fadeOut; opacity: 0; pointer-events: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__bg, #MainContent .pswp-zoom-gallery .pswp__bg{ background: var(--bg); } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__container, #MainContent .pswp-zoom-gallery .pswp__container{ transition: transform 0.7s cubic-bezier(0.645, 0.045, 0.355, 1); } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__zoom-wrap, #MainContent .pswp-zoom-gallery .pswp__zoom-wrap{ display: block; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__item, #MainContent .pswp-zoom-gallery .pswp__item{ overflow: visible; } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__item, #MainContent .pswp-zoom-gallery .pswp__item{ overflow: hidden; } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--right, #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--left, #MainContent .pswp-zoom-gallery .pswp__button--arrow--right, #MainContent .pswp-zoom-gallery .pswp__button--arrow--left{ display: block; position: absolute; top: 50%; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--left, #MainContent .pswp-zoom-gallery .pswp__button--arrow--left{ left: 10px; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--right, #MainContent .pswp-zoom-gallery .pswp__button--arrow--right{ right: 10px; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumbs, #MainContent .pswp-zoom-gallery .pswp__thumbs{ position: absolute; bottom: -146px; left: 0; z-index: 2; overflow-x: auto; width: 100%; padding: 10px 10px 16px; font-size: 0; text-align: center; white-space: nowrap; -webkit-overflow-scrolling: touch; display: none; } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumbs, #MainContent .pswp-zoom-gallery .pswp__thumbs{ bottom: 0; padding: 10px 0; } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumb, #MainContent .pswp-zoom-gallery .pswp__thumb{ display: inline-block; width: 80px; height: 80px; border-radius: 50%; border: var(--BORDER-WIDTH) solid transparent; margin: 10px; background: var(--bg) no-repeat center center/105%; color: inherit; vertical-align: top; transition: border 0.2s, transform 0.2s; transition: all 0.2s ease-in-out; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumb:hover, #MainContent .pswp-zoom-gallery .pswp__thumb:hover{ transform: scale(1.1); } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumb, #MainContent .pswp-zoom-gallery .pswp__thumb{ width: 42px; height: 42px; } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumb.is-current, #MainContent .pswp-zoom-gallery .pswp__thumb.is-current{ border-color: var(--bg); } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumb.is-current, #MainContent .pswp-zoom-gallery .pswp__thumb.is-current{ transform: scale(1.4); } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption, #MainContent .pswp-zoom-gallery .pswp__caption{ display: none; position: absolute; z-index: 1; top: 30px; left: 30px; max-width: 50vw; padding: 10px 20px 10px 50px; background: var(--bg); } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption, #MainContent .pswp-zoom-gallery .pswp__caption{ top: 50px; left: 10px; max-width: 250px; max-width: calc(100% - 80px); padding: 7px 14px 7px 7px; } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption .pswp__caption__center *:not(.product__title), #MainContent .pswp-zoom-gallery .pswp__caption .pswp__caption__center *:not(.product__title){ display: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption .product__link-holder, #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption .product-badge, #MainContent .pswp-zoom-gallery .pswp__caption .product__link-holder, #MainContent .pswp-zoom-gallery .pswp__caption .product-badge{ display: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption h1, #MainContent .pswp-zoom-gallery .pswp__caption h1{ margin: 0 0 5px; font-size: calc(22px * var(--adjust-heading)); } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption h1, #MainContent .pswp-zoom-gallery .pswp__caption h1{ font-size: calc(16px * var(--adjust-heading)); } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption h1:last-child, #MainContent .pswp-zoom-gallery .pswp__caption h1:last-child{ margin-bottom: 0; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption div, #MainContent .pswp-zoom-gallery .pswp__caption div{ margin-top: 0; font-size: calc(16px * var(--adjust-body)); } @media only screen and (max-width: 767px) { #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption div, #MainContent .pswp-zoom-gallery .pswp__caption div{ font-size: calc(14px * var(--adjust-body)); } } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption div:last-child, #MainContent .pswp-zoom-gallery .pswp__caption div:last-child{ margin-bottom: 0; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__caption--fake, #MainContent .pswp-zoom-gallery .pswp__caption--fake{ display: none; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery].pswp--custom-loader .pswp__loader, #MainContent .pswp-zoom-gallery.pswp--custom-loader .pswp__loader{ animation-name: fadeIn; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery].pswp--custom-loader .loader--image, #MainContent .pswp-zoom-gallery.pswp--custom-loader .loader--image{ width: 100%; height: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; } #MainContent .pswp[data-pswp-option-classes*=pswp-zoom-gallery].pswp--custom-loader .loader__image, #MainContent .pswp-zoom-gallery.pswp--custom-loader .loader__image{ background: var(--loading-svg) no-repeat center center/320px; width: 150px; height: 150px; } #MainContent .palette--dark .pswp[data-pswp-option-classes*=pswp-zoom-gallery].pswp--custom-loader .loader__image, #MainContent .palette--dark .pswp-zoom-gallery.pswp--custom-loader .loader__image{ filter: invert(1); } #MainContent .pswp-zoom-gallery--single[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--right, #MainContent .pswp-zoom-gallery--single[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__button--arrow--left, #MainContent .pswp-zoom-gallery--single[data-pswp-option-classes*=pswp-zoom-gallery] .pswp__thumbs, #MainContent .pswp-zoom-gallery--single .pswp__button--arrow--right, #MainContent .pswp-zoom-gallery--single .pswp__button--arrow--left, #MainContent .pswp-zoom-gallery--single .pswp__thumbs{ display: none; } #MainContent .pswp--notification{ transition: opacity 0.3s ease; } #MainContent .pswp--notification .pswp__container{ -webkit-user-select: auto; user-select: auto; } #MainContent .pswp--notification .pswp__zoom-wrap{ transition: none; } #MainContent .pswp--notification .pswp__scroll-wrap{ width: 100vw; } /*================ "Quick shop" ================*/ #MainContent .popup-quick-view{ --inner: 25px; position: fixed; bottom: 0; min-width: 320px; height: auto; overflow: visible; pointer-events: none; } #MainContent .popup-quick-view .pswp__bg{ left: -100vw; width: 200vw; background: rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .pswp__bg{ top: -100vh; left: 0; width: 100vw; height: 200vh; } } #MainContent .popup-quick-view .pswp__container{ -webkit-user-select: auto; user-select: auto; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .pswp__zoom-wrap{ justify-content: flex-end; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .product-gallery{ margin-bottom: 0; } } #MainContent .popup-quick-view .flickity-slider{ display: flex; align-items: center; } #MainContent .popup-quick-view .product-gallery__media-slide{ margin-right: 10px; } #MainContent .popup-quick-view .product-gallery__media{ padding-top: 100%; } #MainContent .popup-quick-view .product-gallery__media img{ object-fit: cover; } #MainContent .popup-quick-view .product-gallery__media-space{ display: none; } #MainContent .popup-quick-view .product__price{ align-items: center; font-size: calc(16px * var(--adjust-body)); line-height: 1.25; } #MainContent .popup-quick-view .product__price--off{ padding-top: 4px; margin-bottom: 8px; } #MainContent .popup-quick-view .product__unit-price{ margin-bottom: 8px; line-height: inherit; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .product__unit-price{ margin-top: 0; } } #MainContent .popup-quick-view .product__notification{ width: 100%; } #MainContent .popup-quick-view .product__notification .contact-form{ margin-bottom: var(--form-margin); } #MainContent .popup-quick-view .product__notification .contact-form:last-child{ margin-bottom: 0; } #MainContent .popup-quick-view .input-group--inline, #MainContent .popup-quick-view .input-group__item{ max-width: none; } #MainContent .popup-quick-view .product__submit__buttons .btn, #MainContent .popup-quick-view .product__submit__buttons .shopify-payment-button__button--unbranded{ min-width: 0; } #MainContent .popup-quick-view .product__submit__add, #MainContent .popup-quick-view .shopify-payment-button{ width: 100%; } #MainContent .popup-quick-view .variant--soldout .product__submit__add{ pointer-events: none; } #MainContent .popup-quick-view .product-cutline{ margin: 12px 0 0; line-height: 1.25; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .product-cutline{ margin-top: 10px; font-size: calc(12.8px * var(--adjust-body)); } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view .variant__countdown{ font-size: calc(12px * var(--adjust-body)); margin-bottom: 12px; } } #MainContent .popup-quick-view__inner{ width: var(--drawer-width); max-width: 100%; display: block; margin-left: auto; position: relative; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__inner{ width: 100%; } } #MainContent .popup-quick-view__form{ display: block; background: var(--bg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); gap: 0; overflow: hidden; z-index: 10; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form{ border-radius: 20px 20px 0 0; } } #MainContent .palette--light .popup-quick-view__form--onboarding .swatch__button .swatch__label[data-swatch=white i]{ --swatch: #FFF; } #MainContent .palette--light .popup-quick-view__form--onboarding .swatch__button .swatch__label[data-swatch=grey i]{ --swatch: #808080; } #MainContent .palette--light .popup-quick-view__form--onboarding .swatch__button .swatch__label[data-swatch=black i]{ --swatch: #000; } #MainContent .popup-quick-view__wrapper{ display: flex; flex-direction: column; width: 100%; height: 100vh; max-width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .popup-quick-view__wrapper::-webkit-scrollbar{ display: none; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__wrapper{ height: auto; max-height: 75vh; } } #MainContent .popup-quick-view__body{ position: relative; z-index: 1; flex: 1; padding: var(--inner) var(--grid-gutter); width: 100%; min-height: 250px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .popup-quick-view__body::-webkit-scrollbar{ display: none; } @media only screen and (max-width: 767px) and (orientation: landscape) { #MainContent .popup-quick-view__body{ min-height: 200px; } } #MainContent .popup-quick-view__body__inner{ display: grid; } #MainContent .popup-quick-view__foot{ position: relative; z-index: 5; width: 100%; padding: calc(var(--inner) / 2) var(--grid-gutter) var(--inner); margin-top: auto; text-align: center; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__foot{ border-top: var(--BORDER-WIDTH) solid var(--COLOR-BORDER); box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px 0; } } #MainContent .popup-quick-view__foot::before{ content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 25px; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--bg) 100%); pointer-events: none; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__foot::before{ content: none; } } #MainContent .popup-quick-view__foot__inner{ position: relative; } #MainContent .popup-quick-view__title{ --adjust-heading: var(--adjust-heading-desktop, var(--FONT-ADJUST-HEADING)); margin-bottom: 10px; font-size: calc(28.8px * var(--adjust-heading)); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__title{ --adjust-heading: var(--adjust-heading-mobile, var(--FONT-ADJUST-HEADING)); margin-bottom: var(--form-margin-mobile); } } #MainContent .popup-quick-view__close{ position: absolute; top: 8px; right: 0; width: 54px; height: 54px; padding: 18px; color: inherit; text-decoration: none; top: 0; } #MainContent .popup-quick-view__close svg{ display: block; width: 100%; height: 100%; transition: transform 0.3s ease; pointer-events: none; } #MainContent .popup-quick-view__close:hover svg{ transform: rotate(90deg); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__close{ padding: 15px; } } #MainContent .popup-quick-view--shop-the-look .popup-quick-view__close{ --drawer-top-padding: var(--inner); --heading-height: calc(1.25 * 21.92px * var(--adjust-heading)); --heading-padding: 22px; --close-button-height: 54px; --visual-adjustment: 2px; --top-offset: calc((var(--drawer-top-padding) + var(--heading-height) + var(--heading-padding)) / 2 - var(--close-button-height) / 2); top: auto; right: auto; inset-block-start: calc(var(--top-offset) + var(--visual-adjustment)); inset-inline-end: 4px; padding: 11px; } #MainContent .popup-quick-view--shop-the-look:has(.popup-quick-view__nav--thumbs-only) .popup-quick-view__close{ --visual-adjustment: 0px; } #MainContent .popup-quick-view--shop-the-look .cart-drawer__empty-message-bottom p{ margin-block: calc(var(--inner) / 2) 0; } #MainContent .popup-quick-view__nav{ --space-between: 14px; --border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER); margin-block-end: var(--inner); border-block-end: var(--border); padding-block: 0 var(--space-between); } #MainContent .popup-quick-view__nav-title{ margin-block-end: var(--space-between); border-block-end: var(--border); padding-block: 2px 20px; padding-inline: 0 40px; text-transform: uppercase; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__nav-title{ --heading-size: calc(21.92px * var(--adjust-heading)); } } #MainContent .popup-quick-view__nav-thumbs{ max-width: 87%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } #MainContent .popup-quick-view__nav-thumb{ display: block; padding-inline-end: var(--space-between); } #MainContent .popup-quick-view__nav-media{ position: relative; } #MainContent .popup-quick-view__nav-media::before{ content: ""; position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0; border: var(--border); width: 100%; height: 100%; opacity: 0; visibility: hidden; } #MainContent .popup-quick-view__nav-media .product-single__thumbnail, #MainContent .popup-quick-view__nav-media .popup-quick-view__thumbnail{ overflow: hidden; padding: 100% 0 0; background: inherit; } #MainContent .popup-quick-view__nav-media .lazy-image, #MainContent .popup-quick-view__nav-media .placeholder-svg, #MainContent .popup-quick-view__nav-media .placeholder-svg-filled{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .popup-quick-view__nav-media .product-single__thumbnail .icon{ position: absolute; top: 2px; right: 2px; margin: 2px; width: 16px; height: 16px; } #MainContent .popup-quick-view__nav-thumb.is-loading{ pointer-events: none; } #MainContent .popup-quick-view__nav-thumb.is-active .popup-quick-view__nav-media::before{ opacity: 1; visibility: visible; } #MainContent .popup-quick-view__view-button{ display: inline-block; margin-top: 10px; background-color: var(--bg); text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); font-size: calc(14.4px * var(--adjust-body)); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__view-button{ margin-top: 25px; font-size: calc(12px * var(--adjust-body)); } } #MainContent .popup-quick-view__view-button:hover{ text-decoration: none; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__view-button--desktop{ display: none; } } #MainContent .popup-quick-view__foot__inner{ opacity: 0; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__foot__inner{ opacity: 1; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--small .popup-quick-view__title{ padding-right: calc(var(--inner) / 2); } } #MainContent .popup-quick-view__form--small .popup-quick-view__body__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inner); margin-bottom: var(--form-margin); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--small .popup-quick-view__body__inner{ margin-bottom: var(--form-margin-mobile); } } #MainContent .popup-quick-view__form--small .popup-quick-view__content{ order: 2; } #MainContent .popup-quick-view__form--small .flickity-button{ display: none; } #MainContent .popup-quick-view__form--small .popup-quick-view__content{ padding: 8px 0; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--small .popup-quick-view__content{ padding: 0; } } #MainContent .popup-quick-view__form--small .product__price{ flex-direction: column; margin-right: 0; align-items: flex-start; } #MainContent .popup-quick-view__form--small .product__price--sale, #MainContent .popup-quick-view__form--small .product__price--compare{ margin-right: 0; } #MainContent .popup-quick-view__form--small .product__price--sale{ margin-bottom: 2px; } #MainContent .popup-quick-view__form--small .product__price--compare{ margin-bottom: 10px; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--small .product__price--compare{ margin-bottom: var(--form-margin-mobile); } } #MainContent .popup-quick-view__form--small .product__price--compare + .product__unit-price{ margin-top: -6px; margin-bottom: 10px; } #MainContent .popup-quick-view__form--small .product__unit-price{ margin-top: 0; } @media only screen and (min-width: 768px) { #MainContent .popup-quick-view__form--small .product-cutline{ margin-top: 10px; } } #MainContent .popup-quick-view__form--large .popup-quick-view__body__inner{ margin-bottom: var(--form-margin); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .popup-quick-view__body__inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--inner); } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .flickity-button{ display: none; } } #MainContent .popup-quick-view__form--large .product-gallery__media-slider{ margin-right: calc(var(--inner) * -1); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product-gallery__media-slider{ margin-right: 0; } } #MainContent .popup-quick-view__form--large .product-gallery__media-slider .flickity-prev-next-button.next{ right: calc(var(--inner) + var(--flickity-btn-position)); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product-gallery__media-slider .flickity-prev-next-button.next{ right: 0; } } #MainContent .popup-quick-view__form--large .product-gallery__media-slide{ width: 84%; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product-gallery__media-slide{ width: 100%; } } #MainContent .popup-quick-view__form--large .product-gallery__media-slide:only-child{ width: 100%; padding-right: var(--inner); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product-gallery__media-slide:only-child{ padding-right: 0; } } #MainContent .popup-quick-view__form--large .product-gallery__media-slide:not(.is-selected) .deferred-media:not([loaded]){ background: none; } #MainContent .popup-quick-view__form--large .popup-quick-view__content{ margin-bottom: var(--form-margin); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .popup-quick-view__content{ order: 2; margin-bottom: 0; } } #MainContent .popup-quick-view__form--large .popup-quick-view__title{ padding-right: var(--inner); } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .popup-quick-view__title{ padding-right: calc(var(--inner) / 2); } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product__price{ margin-right: 0; flex-direction: column; align-items: flex-start; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product__price--sale, #MainContent .popup-quick-view__form--large .product__price--compare{ margin-right: 0; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product__price--compare{ margin-bottom: 10px; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product__price--compare + .product__unit-price{ margin-top: -6px; margin-bottom: 10px; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view__form--large .product__price--sale{ margin-bottom: 2px; } } #MainContent .popup-quick-view__form--large .select-popout__list{ top: auto; bottom: 100%; margin: 0 0 5px; } #MainContent .popup-quick-view .pswp__bg{ transition: opacity 0.4s ease-in-out; } #MainContent .popup-quick-view--animate-in{ animation: quickViewAnimateInLeft 0.4s; animation-fill-mode: both; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view--animate-in{ animation: quickViewAnimateInUp 0.4s ease-in-out; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view--shop-the-look.popup-quick-view--animate-in{ pointer-events: none; animation: quickViewAnimateInUp 0.3s ease-in; } } #MainContent .popup-quick-view--animate-in .popup-quick-view__foot__inner{ animation: quickViewAnimateInUp 0.4s; animation-delay: 0.2s; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view--animate-in .popup-quick-view__foot__inner{ animation: none; } } #MainContent .popup-quick-view--animated{ pointer-events: all; } #MainContent .popup-quick-view--animated .popup-quick-view__foot__inner{ opacity: 1; } #MainContent .popup-quick-view--animate-out{ animation: quickViewAnimateOutRight 0.4s ease-in-out; animation-fill-mode: both; } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view--animate-out{ pointer-events: none; animation: quickViewAnimateOutDown 0.4s ease-in-out; } } @media only screen and (max-width: 767px) { #MainContent .popup-quick-view--shop-the-look.popup-quick-view--animate-out{ animation: quickViewAnimateOutDown 0.3s linear; } } #MainContent .popup-quick-view--animate-out .pswp__bg{ opacity: 0 !important; } @keyframes quickViewAnimateInLeft { from { opacity: 0 !important; transform: translateX(var(--drawer-width)); } to { opacity: 1 !important; transform: translateZ(0); } } @keyframes quickViewAnimateInUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateZ(0); } } @keyframes quickViewAnimateOutRight { from { transform: translateZ(0); } to { transform: translateX(var(--drawer-width)); } } @keyframes quickViewAnimateOutDown { from { opacity: 1; transform: translateZ(0); } to { opacity: 0; transform: translateY(100%); } } #MainContent .body--rounded-corners .popup-quick-view .product-gallery__media img, #MainContent .body--rounded-corners .popup-quick-view__nav-media, #MainContent .body--rounded-corners .popup-quick-view__nav-media::before{ border-radius: var(--radius); overflow: hidden; } #MainContent .body--rounded-corners .popup-quick-view__form--large .flickity-viewport{ border-radius: 0; } /*================ Recipient form ================*/ #MainContent .recipient-form .form__label{ margin: 10px 0; font-size: calc(17.6px * var(--adjust-label)); } @media only screen and (max-width: 767px) { #MainContent .recipient-form .form__label{ margin: var(--form-margin-mobile) 0; font-size: calc(15.2px * var(--adjust-label)); } } #MainContent .recipient-form .recipient-fields__message{ margin-top: 0; } #MainContent .recipient-form input[type=checkbox]:checked ~ .recipient-fields{ display: block; } #MainContent .aos-initialized .recipient-form input[type=checkbox]:checked ~ .recipient-fields .recipient-fields__field:nth-child(1){ animation: fadeInUp 0.2s; } #MainContent .aos-initialized .recipient-form input[type=checkbox]:checked ~ .recipient-fields .recipient-fields__field:nth-child(2){ animation: fadeInUp 0.4s; } #MainContent .aos-initialized .recipient-form input[type=checkbox]:checked ~ .recipient-fields .recipient-fields__field:nth-child(3){ animation: fadeInUp 0.6s; } #MainContent .aos-initialized .recipient-form input[type=checkbox]:checked ~ .recipient-fields .recipient-fields__field:nth-child(4){ animation: fadeInUp 0.8s; } #MainContent .recipient-fields{ display: none; } #MainContent .recipient-fields__field{ margin: var(--inner) 0 0; } @media only screen and (max-width: 767px) { #MainContent .recipient-fields__field{ margin: var(--form-margin-mobile) 0 0; } } @media only screen and (min-width: 768px) { #MainContent .popup-quick-view__item .recipient-fields__field{ margin-top: calc(var(--inner) / 2); } } #MainContent .recipient-fields__message{ font-size: calc(14px * var(--adjust-body)); text-align: right; } #MainContent .no-js .recipient-form .recipient-fields__field:first-child{ margin-top: 0; } #MainContent .no-js .recipient-form input[type=checkbox], #MainContent .no-js .recipient-form input[type=checkbox] + label{ display: none; } #MainContent .no-js .recipient-fields{ display: block; } #MainContent .no-js .recipient-fields .errors{ margin-top: calc(var(--form-margin) / 2); } /*================ Rich text ================*/ #MainContent .rich-text{ width: 100%; position: relative; } #MainContent .rich-text__top-image{ position: relative; overflow: hidden; display: inline-block; margin-bottom: 10px; } #MainContent .rich-text__top-image-img{ display: block; max-width: 100%; height: auto; margin: auto; } #MainContent .rich-text__heading{ margin-bottom: 12px; } #MainContent .rich-text__heading p{ margin: 0; } #MainContent .rich-text__text p:last-child{ margin-bottom: 0; } #MainContent .body--rounded-corners .rich-text__top-image{ border-radius: var(--radius); overflow: hidden; } /*================ Select popout ================*/ #MainContent .select-popout{ --form-left: 15px; --arrow-size: 46px; position: relative; margin-bottom: 10px; text-align: left; display: block; } #MainContent .select-popout.sold-out .select-popout__toggle, #MainContent .select-popout.unavailable .select-popout__toggle{ background-color: rgba(92, 92, 92, 0.1); text-decoration: line-through; } #MainContent .select-popout + .quantity-selector, #MainContent .select-popout + .cart__item__quantity{ display: none; } #MainContent .select-popout.is-active.select-popout--small, #MainContent .select-popout.is-active > *{ display: none; } #MainContent .select-popout.is-active + .quantity-selector, #MainContent .select-popout.is-active + .cart__item__quantity{ display: block; } @media only screen and (min-width: 768px) { #MainContent .select-popout{ --form-left: 20px; --arrow-size: 54px; } } #MainContent .select-popout__toggle{ position: relative; overflow: hidden; display: block; width: 100%; padding: var(--form-top) var(--arrow-size) var(--form-top) var(--form-left); border: var(--BORDER-WIDTH) solid var(--text); border-radius: var(--RADIUS); line-height: 1.3; text-align: inherit; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.02em; color: var(--text); background: var(--input-bg); font-size: calc(14px * var(--adjust-body)); font-family: var(--FONT-STACK-BODY); } @media only screen and (max-width: 767px) { #MainContent .select-popout__toggle{ font-size: calc(12px * var(--adjust-body)); padding: 10px var(--arrow-size) 10px var(--form-left); } } #MainContent .select-popout__toggle .icon-select{ position: absolute; top: 0; right: 0; width: var(--arrow-size); padding: 0 var(--form-left); height: 100%; transition: transform 0.4s; transform: rotate(90deg); } #MainContent .select-popout__toggle[aria-expanded=true] .icon-select{ transform: rotate(270deg); } #MainContent .cart__item__bottom .select-popout__toggle{ padding: 6px 38px 6px 14px; border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER-ALPHA-50); border-radius: 1px; font-size: calc(12px * var(--adjust-body)); line-height: normal; } #MainContent .cart__item__bottom .select-popout__toggle .icon-select{ width: 38px; padding: 0 12px; } #MainContent .select-popout__list{ position: absolute; top: 100%; left: 0; min-width: 100%; overflow: hidden; border: var(--BORDER-WIDTH) solid var(--text); border-radius: var(--RADIUS); margin: 5px 0 0; background: var(--input-bg); opacity: 0; visibility: hidden; z-index: -1; pointer-events: none; transition: opacity 0.15s ease, z-index 0.15s, visibility 0s linear 0.15s; } #MainContent .select-popout__list .sold-out, #MainContent .select-popout__list .unavailable{ text-decoration: line-through; background-color: rgba(92, 92, 92, 0.1); } #MainContent .cart__item__bottom .select-popout__list{ border: var(--BORDER-WIDTH) solid var(--COLOR-BORDER-ALPHA-50); border-radius: 1px; } #MainContent .select-popout__list--top{ top: auto; bottom: 100%; margin-bottom: 5px; } #MainContent .select-popout__list--visible{ opacity: 1; visibility: visible; z-index: 110; pointer-events: auto; transition: opacity 0.3s ease, z-index 0s, visibility 0s linear 0s; } #MainContent .select-popout__list__scroll{ --min: 170px; --adjustment: 0px; --available: calc(var(--max-height, 350px) - var(--adjustment)); overflow-x: hidden; overflow-y: auto; margin: 0; list-style: none; max-height: max(var(--available), var(--min)); } #MainContent .select-popout__list--top .select-popout__list__scroll{ --adjustment: calc(2 * var(--BORDER-WIDTH)); } #MainContent .select-popout__item{ display: block; margin-bottom: 0; min-width: 100px; color: var(--text); transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; } #MainContent .select-popout__item:hover, #MainContent .select-popout__item.sold-out:hover, #MainContent .select-popout__item.unavailable:hover{ color: var(--bg); background-color: var(--text); } #MainContent .cart__item__bottom .select-popout__item{ min-width: 100%; } #MainContent .select-popout__option{ display: block; padding: var(--form-top) var(--form-left); color: inherit; font-size: calc(14px * var(--adjust-body)); } @media only screen and (max-width: 767px) { #MainContent .select-popout__option{ font-size: calc(12px * var(--adjust-body)); } } #MainContent .cart__item__bottom .select-popout__option{ padding: 6px 14px; font-size: calc(12px * var(--adjust-body)); line-height: normal; } #MainContent .select-popout--small{ max-width: 120px; } #MainContent .cart__item__bottom .select-popout--small{ width: 80px; margin-bottom: 0; } #MainContent .localization-form{ --form-top: 8px; --form-left: 15px; --arrow-size: 31px; display: flex; justify-content: center; flex-wrap: wrap; column-gap: var(--gutter-mobile); margin-bottom: calc(var(--gutter-mobile) / 2); } @media only screen and (max-width: 767px) { #MainContent .localization-form{ justify-content: flex-start; } } #MainContent .localization-form .select-popout{ --form-left: inherit; --arrow-size: inherit; margin-bottom: 0; } #MainContent .shopify-section-header .localization-form{ margin-bottom: 0; padding: 0 8px; } @media only screen and (max-width: 1439px) { #MainContent .shopify-section-header .localization-form{ display: none; } } #MainContent .localization-form .select-popout__list{ margin: 0 0 5px; background-color: var(--bg); border-radius: var(--RADIUS-SMALL); } #MainContent .shopify-section-header .localization-form .select-popout__list{ bottom: auto; top: 100%; margin: 5px 0 0; } #MainContent footer .localization-form .select-popout__list{ top: auto; bottom: 100%; } @media only screen and (min-width: 1024px) { #MainContent .localization-form .select-popout__list{ left: 50%; transform: translateX(-50%); } } #MainContent .localization-form .select-popout--country .select-popout__list{ min-width: max(210px, 100%); } #MainContent .localization-form .select-popout--country .select-popout__list__scroll, #MainContent .localization-form .select-popout--lang .select-popout__list__scroll{ max-height: calc((14px * var(--adjust-body) * 1.5625 + var(--form-top) * 2) * 4); } @media only screen and (max-width: 767px) { #MainContent .localization-form .select-popout--country .select-popout__list__scroll, #MainContent .localization-form .select-popout--lang .select-popout__list__scroll{ max-height: calc((12px * var(--adjust-body) * 1.5625 + var(--form-top) * 2) * 4); } } #MainContent .localization-form.localization-form--country-flag .select-popout--country .select-popout__list{ min-width: max(240px, 100%); } #MainContent .localization-form .select-popout__toggle{ padding-left: 0; padding-right: calc(var(--arrow-size) - 9px); display: flex; flex-flow: row wrap; align-items: center; color: var(--text); background-color: var(--bg); border: none; margin: 0; } #MainContent .site-header--transparent .localization-form .select-popout__toggle{ background-color: transparent; } #MainContent .localization-form .icon-select{ right: -9px; width: var(--arrow-size); padding: 0 var(--form-top); pointer-events: none; } #MainContent .localization-form .select-popout__option{ display: flex; flex-flow: row nowrap; align-items: center; } #MainContent .localization-form .select-popout__item--current .select-popout__option span{ border-bottom: var(--BORDER-WIDTH) solid var(--border); transition: border-color 0.3s ease-in-out; } #MainContent .localization-form .select-popout__item--current:hover .select-popout__option span{ border-color: var(--bg); } #MainContent .localization-form .select-popout__flag{ display: inline-block; vertical-align: top; width: 20px; height: 15px; margin-right: 8px; object-fit: cover; } #MainContent .no-js .localization-form popout-select.select-popout{ display: none !important; } #MainContent .no-js .localization-form{ margin-bottom: 0; } #MainContent .no-js .localization-form .btn, #MainContent .no-js .localization-form .shopify-payment-button__button--unbranded{ margin-top: 5px; } /*================ Star rating ================*/ #MainContent .rating__star{ position: relative; display: block; margin: 0 0 2px; } #MainContent .rating__star .icon{ display: block; width: 12px; height: 12px; } #MainContent .rating__star__empty, #MainContent .rating__star__full{ display: flex; } #MainContent .rating__star__empty .icon, #MainContent .rating__star__full .icon{ margin-right: 2px; } #MainContent .rating__star__empty .icon:last-child, #MainContent .rating__star__full .icon:last-child{ margin-right: 0; } #MainContent .rating__star__full{ position: absolute; top: 0; left: 0; clip-path: inset(0 var(--percent) 0 0); -webkit-clip-path: inset(0 var(--percent) 0 0); } #MainContent .rating__star .icon-star{ stroke: currentcolor; stroke-width: 1px; fill: currentcolor; } #MainContent .rating__star .icon-star--empty{ fill: transparent; } /*================ Sticky text ================*/ #MainContent .sticky-text{ --adjust-heading: var(--adjust-heading-desktop); position: absolute; top: 50%; left: 50%; width: calc(100% - 2 * var(--padding)); transform: translate(-50%, -50%); opacity: 0; visibility: hidden; } @media only screen and (max-width: 1023px) { #MainContent .sticky-text{ --adjust-heading: var(--adjust-heading-mobile); } } @media only screen and (max-width: 767px) { #MainContent .sticky-text{ top: auto; bottom: 0; transform: translateX(-50%); } } #MainContent .sticky-text.is-active{ position: relative; top: auto; left: auto; width: 100%; transform: none; opacity: 1; visibility: visible; } @media only screen and (max-width: 767px) { #MainContent .sticky-text.is-active{ bottom: auto; } } #MainContent .aos-initialized .sticky-text [data-aos-order="1"]{ animation-delay: 100ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="2"]{ animation-delay: 242.5ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="3"]{ animation-delay: 370ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="4"]{ animation-delay: 482.5ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="5"]{ animation-delay: 580ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="6"]{ animation-delay: 662.5ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="7"]{ animation-delay: 730ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="8"]{ animation-delay: 782.5ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="9"]{ animation-delay: 820ms; } #MainContent .aos-initialized .sticky-text [data-aos-order="10"]{ animation-delay: 842.5ms; } @media only screen and (max-width: 479px) { #MainContent .sticky-text .main-buttons{ margin-left: 0; margin-right: 0; flex-flow: column wrap; align-items: flex-start; } } @media only screen and (max-width: 479px) { #MainContent .sticky-text .main-buttons__item{ margin-left: 0; margin-right: 0; flex: 0 0 100%; max-width: 100%; } } #MainContent .text-center .sticky-text .main-buttons__item{ justify-content: center; } @media only screen and (max-width: 479px) { #MainContent .text-center .sticky-text .main-buttons__item{ align-items: center; } } #MainContent .text-right .sticky-text .main-buttons__item{ justify-content: flex-end; } @media only screen and (max-width: 479px) { #MainContent .text-right .sticky-text .main-buttons__item{ align-items: flex-end; } } #MainContent .sticky-text--static{ position: relative; top: auto; left: auto; width: 100%; transform: none; opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 1023px) { #MainContent .sticky-text--static{ --adjust-heading: calc(var(--adjust-heading-mobile) * 0.7); } } #MainContent .sticky-text__inner{ position: relative; } #MainContent .sticky-text__heading{ margin-bottom: 12px; } #MainContent .sticky-text__heading p{ margin: 0; } #MainContent .sticky-text__heading sup{ top: -1.1em; font-size: calc(14.88px * var(--adjust-heading)); line-height: 1; margin-left: 5px; } @media only screen and (max-width: 1439px) { #MainContent .sticky-text__heading sup{ top: -1em; font-size: calc(13.44px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .sticky-text__heading sup{ font-size: calc(11.2px * var(--adjust-heading)); } } #MainContent .sticky-text__heading small{ font-size: calc(14.88px * var(--adjust-heading)); margin-left: calc(-20.8px * var(--adjust-heading)); } @media only screen and (max-width: 1439px) { #MainContent .sticky-text__heading small{ font-size: calc(13.44px * var(--adjust-heading)); margin-left: calc(-19.2px * var(--adjust-heading)); } } @media only screen and (max-width: 767px) { #MainContent .sticky-text__heading small{ font-size: calc(11.2px * var(--adjust-heading)); margin-left: calc(-16px * var(--adjust-heading)); } } #MainContent .sticky-text__heading a{ position: relative; display: inline-block; text-decoration: none !important; } #MainContent .sticky-text__heading a:before, #MainContent .sticky-text__heading a:after{ content: ""; position: absolute; left: 0; bottom: -1.6px; width: 100%; height: var(--BORDER-WIDTH); display: block; background: var(--btn-text, var(--text)); transition: none; pointer-events: none; } #MainContent .sticky-text__heading a:before{ transform: scaleX(0); transform-origin: left; } #MainContent .sticky-text__heading a:after{ transform-origin: right; } #MainContent .no-touch .sticky-text__heading a:hover{ background: transparent; border: 0; } #MainContent .no-touch .sticky-text__heading a:hover:before, #MainContent .no-touch .sticky-text__heading a:hover:after{ transition: transform 1.1s cubic-bezier(0.19, 1, 0.22, 1); transform: scaleX(0); } #MainContent .no-touch .sticky-text__heading a:hover:before{ transform: scaleX(1); transition-delay: 0.25s; } #MainContent .sticky-text__heading [data-has-highlight]::before, #MainContent .sticky-text__heading [data-has-highlight]::after, #MainContent .sticky-text__heading .section__link::before, #MainContent .sticky-text__heading .section__link::after{ display: none; } #MainContent .sticky-text__heading:not(.text-highlight-wrapper) .text-reveal__cropper a::before, #MainContent .sticky-text__heading:not(.text-highlight-wrapper) .text-reveal__cropper a::after{ bottom: 0; } #MainContent .sticky-text__text p{ margin: 0; } #MainContent .sticky-text__text *{ font-size: calc(16px * var(--adjust-body)); } #MainContent .sticky-text__button{ width: 100%; } #MainContent .sticky-text__button--video .video-text-link{ text-transform: none; } #MainContent .sticky-text__button--video .icon-play{ width: 30px; height: 30px; } @media only screen and (max-width: 479px) { #MainContent .sticky-text__button--video, #MainContent .sticky-text__button--text{ width: auto; } } #MainContent .no-js .sticky-text{ position: relative; top: auto; left: auto; bottom: auto; width: 100%; transform: none; opacity: 1; visibility: visible; } /*================ Store availability ================*/ #MainContent .store-availability-container .icon{ --icon-size: calc(12px * var(--adjust-body)); width: var(--icon-size); height: var(--icon-size); flex-basis: var(--icon-size); flex-shrink: 0; margin: calc(4px * var(--adjust-body)) 4px 0 0; } #MainContent .store-availability-container .icon-in-stock{ fill: var(--success); } #MainContent .store-availability-container .icon-out-of-stock{ fill: var(--error); } #MainContent .store-availability-container .store-availability-list__stock .icon{ margin: 0 2px 3px 0; } #MainContent .store-availability-container .icon-close{ width: 18px; height: 18px; margin: 0; } #MainContent .store-availability-container .store-availabilities-modal{ display: none; } #MainContent .icon-in-stock, #MainContent .icon-out-of-stock{ stroke: none; } #MainContent .product-single__store-availability-container:empty{ display: none; } #MainContent .store-availability-small-text{ margin: 0; font-size: calc(14.4px * var(--adjust-body)); } #MainContent .store-availability-information{ display: flex; margin-left: 0; } #MainContent .store-availability-information-container{ line-height: 1.5; margin-left: 5px; } #MainContent .store-availability-information__title{ margin: 0; } #MainContent .store-availability-information__stock{ margin: 0; } #MainContent .store-availability-information__stores{ margin: 8px 0 0; } #MainContent .store-availability-information__link{ text-decoration: underline; text-decoration-thickness: var(--BORDER-WIDTH); cursor: pointer; } #MainContent .store-availability-information__link:hover, #MainContent .store-availability-information__link:focus{ opacity: 0.6; } #MainContent .store-availabilities-modal{ will-change: transform; overflow: hidden; position: fixed; top: 0; bottom: 0; left: 100vw; right: auto; z-index: 9999; width: var(--drawer-width); max-width: 100%; max-height: 100vh; color: var(--text); background-color: var(--bg); transition: var(--drawer-transition); opacity: 1; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; transform: translateY(0); padding: var(--inner); } #MainContent .store-availabilities-modal .icon-in-stock, #MainContent .store-availabilities-modal .icon-out-of-stock{ width: 12px; height: 12px; vertical-align: middle; } #MainContent .store-availabilities-modal .icon-in-stock{ fill: var(--success); margin: 5px 0 0 0; } #MainContent .store-availabilities-modal .icon-out-of-stock{ fill: var(--error); margin: 5px 0 0 0; } #MainContent .store-availabilities-modal .store-availability-list__stock .icon-in-stock{ margin: 0 0 2px 0; } #MainContent .store-availabilities-modal .store-availability-list__stock .icon-out-of-stock{ margin: 0 0 2px 0; } #MainContent .store-availabilities-modal--active{ transform: translateX(calc(-1 * var(--drawer-width))); } #MainContent .store-availabilities-modal__header{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; position: relative; } #MainContent .store-availabilities-modal__close{ z-index: 1; } #MainContent .store-availabilities-modal__product-information{ position: relative; width: calc(100% - 30px); } #MainContent .store-availabilities-modal__product__title{ text-transform: none; margin: 0 0 15px; padding: 0; color: var(--text); font-size: calc(22px * var(--adjust-heading)); font-weight: var(--FONT-WEIGHT-HEADING-BOLD); } #MainContent .store-availabilities-list{ border-top: var(--BORDER-WIDTH) solid var(--text); overflow: auto; list-style: none; margin: var(--inner) 0 0; } #MainContent .store-availability-list__item{ margin: 0; padding: var(--inner) 0; } #MainContent .store-availability-list__item p{ font-size: calc(13px * var(--adjust-body)); margin-bottom: 0; } #MainContent .store-availability-list__phone a{ text-decoration: none; } #MainContent .store-availability-list__location{ display: flex; justify-content: space-between; } #MainContent .store-availability-list__stock{ margin-top: 8px; margin-bottom: 16px; } #MainContent .store-availability-list__address{ font-size: 90%; font-style: var(--FONT-STYLE-BODY); } #MainContent .store-availability-list__address p{ margin: 0; font-size: inherit; } #MainContent .store-availability-list-header{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } #MainContent .store-availability-list-header__location{ font-weight: var(--FONT-WEIGHT-BODY-BOLD); padding-right: 5px; } #MainContent .store-availability-list-header__location, #MainContent .store-availability-list-header__distance{ margin-bottom: 0; font-size: calc(16px * var(--adjust-body)); color: var(--text); } /*================ Swatches ================*/ #MainContent .swatch__label:hover{ cursor: pointer; } #MainContent .swatch__button{ --swatch: #CCC; display: inline-block; vertical-align: top; position: relative; pointer-events: initial; } #MainContent .swatch__input{ position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; margin: 0; overflow: hidden; pointer-events: none; display: block; } #MainContent .swatch__button .swatch__label{ --inner-offset: calc(var(--BORDER-WIDTH) + 5px); --inner-size: calc(var(--swatch-size) - var(--inner-offset)); --adjust-size: calc(var(--inner-size) - var(--BORDER-WIDTH)); display: flex; justify-content: center; align-items: center; position: relative; width: var(--swatch-size); height: var(--swatch-size); margin: 0; border-radius: 50%; color: var(--black); background: var(--swatch) no-repeat center center/cover; overflow: hidden; } @media only screen and (max-width: 767px) { #MainContent .swatch__button .swatch__label{ --inner-offset: calc(var(--BORDER-WIDTH) + 3px); } } #MainContent .swatch__button .swatch__label:before{ content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: var(--inner-size); height: var(--inner-size); border-radius: 50%; border: var(--BORDER-WIDTH) solid var(--bg); opacity: 0; visibility: hidden; } #MainContent .swatch__button .swatch__label:after{ content: ""; display: block; position: absolute; top: 50%; left: 50%; z-index: 1; width: var(--adjust-size); height: var(--BORDER-WIDTH); background-color: var(--text); transform: translate(-50%, -50%) rotate(135deg); opacity: 0; visibility: hidden; } #MainContent .swatch__button .swatch__label--empty{ border-style: dashed; } #MainContent .swatch__button--rectangle .swatch__label{ --adjust-size: calc(var(--swatch-width) - var(--BORDER-WIDTH)); border-radius: var(--RADIUS); width: var(--swatch-width); height: var(--swatch-height); color: var(--swatch); } #MainContent .swatch__button--rectangle .swatch__label:before{ border-radius: var(--RADIUS); width: calc(var(--swatch-width) - var(--inner-offset)); height: calc(var(--swatch-height) - var(--inner-offset)); } #MainContent .swatch__button--rectangle .swatch__label:after{ width: calc(var(--adjust-size) - 30%); height: var(--BORDER-WIDTH); transform: translate(-50%, -50%) rotate(152deg); } #MainContent .swatch__button.sold-out .swatch__label:after, #MainContent .swatch__button.unavailable .swatch__label:after{ opacity: 1; visibility: visible; } #MainContent .swatch__button .icon-check{ display: block; width: 16px; margin-right: 2px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; fill: var(--white); position: relative; } #MainContent .swatch__button .swatch__input:checked ~ .swatch__label:before{ opacity: 1; visibility: visible; } #MainContent .swatch__button:not(.sold-out, #MainContent .unavailable) .swatch__input:checked ~ .swatch__label .icon{ visibility: visible; opacity: 1; transition-delay: 0s; } #MainContent .palette--light .swatch__button .swatch__label[data-swatch=white i]{ border: var(--BORDER-WIDTH) solid var(--COLOR-BLACK); } #MainContent .palette--light .swatch__button .swatch__label[data-swatch=white i]:before{ border-color: inherit; } #MainContent .palette--light .swatch__button .swatch__label--empty[data-swatch=white i]{ border: var(--BORDER-WIDTH) dashed var(--COLOR-BLACK); } #MainContent .palette--light .swatch__button--circle .swatch__label[data-swatch=white i]:before{ width: var(--adjust-size); height: var(--adjust-size); } #MainContent .palette--light .swatch__button--circle .swatch__label[data-swatch=white i]:after{ width: calc(var(--adjust-size) - var(--BORDER-WIDTH)); } #MainContent .swatch__button.sold-out .swatch__label[data-swatch=white i]:after{ background-color: var(--COLOR-BLACK); } #MainContent .palette--dark .swatch__button .swatch__label[data-swatch=black i]{ border: var(--BORDER-WIDTH) solid var(--COLOR-WHITE); } #MainContent .palette--dark .swatch__button .swatch__label[data-swatch=black i]:before{ border-color: inherit; } #MainContent .palette--dark .swatch__button--circle .swatch__label[data-swatch=black i]:before{ width: var(--adjust-size); height: var(--adjust-size); } #MainContent .palette--dark .swatch__button--circle .swatch__label[data-swatch=black i]:after{ width: calc(var(--adjust-size) - var(--BORDER-WIDTH)); } #MainContent .swatch__button.sold-out .swatch__label[data-swatch=black i]:after{ background-color: var(--COLOR-WHITE); } #MainContent .swatch__button .swatch__link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; font-style: normal; line-height: 0; text-indent: -100%; overflow: hidden; } #MainContent .is-focused .swatch__button .swatch__input:focus ~ .swatch__label:before{ position: absolute; content: ""; left: -3px; bottom: -10px; height: 2px; width: calc(100% + 6px); background: var(--SECONDARY-BUTTONS-COLOR-BG); } #MainContent .is-focused .radio__button input:focus ~ .swatch__label:before{ position: absolute; content: ""; left: 0; bottom: -10px; height: 2px; width: 100%; background: var(--SECONDARY-BUTTONS-COLOR-BG); } #MainContent .swatch__button .swatch__input:focus + .swatch__label, #MainContent .swatch__button .swatch__input.focus-visible + .swatch__label{ outline: -webkit-focus-ring-color auto 5px; } /*================ Tabs ================*/ #MainContent .tabs{ position: relative; } #MainContent .tabs__head{ position: relative; z-index: 2; overflow: hidden; } @media only screen and (max-width: 1023px) { #MainContent .tabs__head{ overflow: visible; } } #MainContent .tabs__arrow{ position: absolute; top: 50%; display: block; width: 24px; height: 24px; max-height: none; margin-top: -12px; border-radius: 0; background-color: var(--bg); box-shadow: none; } #MainContent .tabs__arrow--prev{ left: 0; transform: rotate(90deg); } #MainContent .tabs__arrow--next{ right: 0; transform: rotate(-90deg); } #MainContent .tabs__contents{ position: relative; } #MainContent .tabs__nav{ display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 0; padding: 0; list-style: none; position: relative; white-space: nowrap; font-size: calc(16px * var(--text-size)); color: var(--text-lighten); scrollbar-width: none; -ms-overflow-style: none; } #MainContent .tabs__nav::-webkit-scrollbar{ display: none; } @media only screen and (min-width: 768px) { #MainContent .tabs__nav{ text-align: center; } } #MainContent .tabs__link{ margin-right: 30px; margin-bottom: 0; flex: 0 0 auto; background: none; cursor: pointer; vertical-align: bottom; border-bottom: 3px solid transparent; white-space: normal; } #MainContent .tabs__link:last-child{ margin-right: 0; } #MainContent .tab{ position: absolute; top: 0; width: 100%; padding-top: 15px; opacity: 0; visibility: hidden; pointer-events: none; } #MainContent .tab .flickity-button{ display: none; } #MainContent .tab.current{ position: static; opacity: 1; visibility: visible; display: inherit; transition: opacity 0.3s ease, visibility 0s linear 0s; pointer-events: all; } #MainContent .tab.current .flickity-button{ display: block; background: var(--bg); } #MainContent .tabs-wrapper{ overflow: hidden; position: relative; padding-top: 30px; } #MainContent .tabs-scrollbar{ width: 100%; } #MainContent .tabs-scrollbar__holder{ display: inline-block; overflow-x: auto; max-width: 100%; text-align: center; scrollbar-width: none; -ms-overflow-style: none; } #MainContent .tabs-scrollbar__holder::-webkit-scrollbar{ display: none; } @media only screen and (max-width: 1023px) { #MainContent .tabs-scrollbar__holder{ max-width: calc(100% + var(--gutter-mobile) * 2); padding: 0 var(--gutter-mobile); margin: 0 calc(var(--gutter-mobile) * -1); } } #MainContent .tabs-scrollbar__holder .tabs__nav{ overflow: visible; } #MainContent .no-js .tab{ visibility: visible; position: static; opacity: 1; display: inherit; pointer-events: all; } #MainContent .no-js .tab:empty{ display: none; } #MainContent .no-js .tab:not(.current), #MainContent .no-js .tab:not(.current) *{ pointer-events: auto !important; } /*================ Text highlight decorations and animations ================*/ #MainContent .text-highlight{ color: var(--highlight-text-color, var(--text)); position: relative; display: inline-block; } #MainContent .text-highlight__icon{ position: absolute; z-index: -1; top: 50%; left: 50%; width: 100%; height: 100%; background-image: var(--icon-url); transform: translate(-50%, -50%); color: var(--icon-color); } #MainContent .text-highlight__icon--pseudo{ background: none; } #MainContent .text-highlight__icon svg{ position: absolute; top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; } #MainContent .text-highlight__break{ display: block; } #MainContent .haspercentoff a, #MainContent .haspercentoff .text-highlight{ white-space: nowrap; } #MainContent .text-highlight-wrapper{ --height-multiplier: 0.06; --heading-margin: var(--inner); --decoration-height: calc(var(--heading-size, 48px) * var(--height-multiplier)); position: relative; z-index: 1; } #MainContent .text-highlight-wrapper ~ *{ position: relative; z-index: 2; } #MainContent .text-highlight-wrapper.slide__heading, #MainContent .text-highlight-wrapper.split-images__heading, #MainContent .video-text-wrapper .text-highlight-wrapper.main-heading{ margin-bottom: calc(var(--heading-margin) / 1.5); } #MainContent .slide__heading:not(.text-highlight-wrapper):has(a), #MainContent .split-images__heading:not(.text-highlight-wrapper):has(a), #MainContent .video-text-wrapper .main-heading:not(.text-highlight-wrapper):has(a){ margin-bottom: calc(var(--inner) / 1.5); } #MainContent .text-highlight-wrapper [data-has-highlight]{ text-decoration: none; } #MainContent ul:has(.text-reveal__cropper) li, #MainContent ol:has(.text-reveal__cropper) li{ margin-bottom: 0; } #MainContent .aos-initialized .text-highlight-wrapper .text-reveal__cropper{ overflow: visible; } #MainContent .aos-initialized .text-highlight-wrapper:has(.text-reveal__cropper.overflow-hidden) .text-reveal__cropper{ overflow: hidden; } #MainContent .text-highlight-wrapper:has(a:not([data-has-highlight])) .text-reveal__cropper a::before, #MainContent .text-highlight-wrapper:has(a:not([data-has-highlight])) .text-reveal__cropper a::after{ bottom: 0; } #MainContent .text-reveal__cropper:not(:has(.text-highlight)){ position: relative; z-index: 2; } #MainContent .text-highlight-wrapper--circle{ margin-bottom: var(--heading-margin); } #MainContent .text-highlight-wrapper--circle .text-highlight{ z-index: -1; } #MainContent .text-highlight-wrapper--circle .text-highlight path{ stroke-dasharray: 506; stroke-dashoffset: 506; opacity: 0; } #MainContent .no-js .text-highlight-wrapper--circle .text-highlight path{ opacity: 1; stroke-dashoffset: 0; } #MainContent .text-highlight-wrapper--circle .text-highlight__icon{ width: 125%; height: 125%; transform: translate(-50%, -50%) scale(-1); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon svg{ width: 85%; transform: translate(-50%, -50%) scaleY(0.8); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--single-word svg{ width: 100%; transform: translate(-50%, -50%); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--single-word svg path{ stroke-width: 4px; } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--short svg{ transform: translate(-50%, -50%) scaleY(1.5); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--l1 svg{ width: 220%; transform: translate(-50%, -50%) scaleY(1.8); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--l2 svg{ width: 160%; } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--l3 svg{ width: 130%; } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--long svg{ width: 85%; transform: translate(-50%, -50%) scaleY(0.8); } #MainContent .text-highlight-wrapper--circle .text-highlight__icon--long svg path{ stroke-width: 2px; } #MainContent .text-highlight-wrapper--circle.haspercentoff .text-highlight__icon svg{ width: 110%; transform: translate(-50%, -50%) scaleY(1.3); } #MainContent .text-highlight-wrapper--circle.haspercentoff .text-highlight__icon path{ stroke-width: 4px; } #MainContent .text-highlight-wrapper--circle-hand-drawn{ margin-bottom: var(--heading-margin); } #MainContent .text-highlight-wrapper--circle-hand-drawn .text-highlight{ z-index: -1; } #MainContent .text-highlight-wrapper--circle-hand-drawn .text-highlight path{ opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; } #MainContent .no-js .text-highlight-wrapper--circle-hand-drawn .text-highlight path{ opacity: 1; stroke-dashoffset: 0; } #MainContent .text-highlight-wrapper--circle-hand-drawn .text-highlight__icon{ width: 145%; height: 145%; } #MainContent .text-highlight-wrapper--squiggle{ margin-bottom: var(--heading-margin); --height-multiplier: 0.13; } @media only screen and (max-width: 767px) { #MainContent .text-highlight-wrapper--squiggle{ --height-multiplier: 0.15; } } #MainContent .text-highlight-wrapper--squiggle svg{ display: none; } #MainContent .text-highlight-wrapper--squiggle .text-highlight__icon{ background: currentcolor; top: auto; left: 0; bottom: 0; height: var(--decoration-height); margin-bottom: calc(-1px * var(--adjust-heading)); transform: none; -webkit-mask: var(--icon-url) repeat-x center; mask: var(--icon-url) repeat-x center; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } #MainContent .no-js .text-highlight-wrapper--squiggle .text-highlight__icon{ -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 1.2s; transition: mask-position 1.2s; transition: mask-position 1.2s, -webkit-mask-position 1.2s; } @media (hover: hover) { #MainContent .no-js .text-highlight-wrapper--squiggle a:hover .text-highlight__icon{ -webkit-mask-position: 100% 0; mask-position: 100% 0; } } #MainContent .text-highlight-wrapper--stroke:not(.haspercentoff):not(.hasnumberpercent) .text-highlight, #MainContent .text-highlight-wrapper--highlight-color:not(.haspercentoff):not(.hasnumberpercent) .text-highlight{ display: inline; } #MainContent .text-highlight-wrapper--stroke{ --height-multiplier: 0.03; } #MainContent .text-highlight-wrapper--stroke .text-highlight__string, #MainContent .text-highlight-wrapper--stroke .text-highlight__string sup{ text-stroke: var(--decoration-height) var(--highlight-text-color, var(--text)); -webkit-text-stroke: var(--decoration-height) var(--highlight-text-color, var(--text)); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-image: linear-gradient(135deg, transparent 50%, var(--highlight-text-color, var(--text)) 50.1%, var(--highlight-text-color, var(--text)) 100%); background-size: 260% 100%; background-position: 100% 0; } #MainContent .no-js .text-highlight-wrapper--stroke .text-highlight__string, #MainContent .no-js .text-highlight-wrapper--stroke .text-highlight__string sup{ background-image: linear-gradient(135deg, var(--highlight-text-color, var(--text)) 0%, var(--highlight-text-color, var(--text)) 55%, transparent 50.1%); background-size: 0 100%; background-position: 0 0; transition: background-size 0.3s cubic-bezier(0.67, 0.01, 0.15, 0.98); } @media (hover: hover) { #MainContent .no-js .text-highlight-wrapper--stroke a:hover .text-highlight__string, #MainContent .no-js .text-highlight-wrapper--stroke a:hover .text-highlight__string sup{ background-size: 260% 100%; } } #MainContent .text-highlight-wrapper--highlight .text-highlight{ --offset: -2%; } #MainContent .text-highlight-wrapper--highlight .text-highlight__icon--pseudo::before{ content: ""; position: absolute; top: 0; left: var(--offset); right: var(--offset); height: 100%; background: linear-gradient(0deg, var(--highlight-color, transparent), var(--highlight-color, transparent)) no-repeat right bottom/100% 100%; transform: scaleX(0); transform-origin: 0 0; z-index: -1; } @media (hover: hover) { #MainContent .text-highlight-wrapper--highlight a:hover .text-highlight__icon--pseudo::before{ transform-origin: 0 100%; } } #MainContent .no-js .text-highlight-wrapper--highlight .text-highlight__icon--pseudo::before{ transition: background-size 350ms; transform: none; } @media (hover: hover) { #MainContent .no-js .text-highlight-wrapper--highlight a:hover .text-highlight__icon--pseudo::before{ background-size: 100% 10%; } } #MainContent .text-highlight-wrapper--highlight-color .text-highlight__string, #MainContent .text-highlight-wrapper--highlight-color .text-highlight__string sup{ background: var(--highlight-text-color, var(--text)); background-image: linear-gradient(90deg, transparent 10%, var(--text) 40%, var(--text) 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; } #MainContent .no-js .text-highlight-wrapper--highlight-color .text-highlight__string, #MainContent .no-js .text-highlight-wrapper--highlight-color .text-highlight__string sup{ background-image: var(--highlight-text-color, var(--text)); background-size: 100% 100%; background-position: 0 0; } #MainContent .text-highlight-wrapper--alternate-font .text-highlight__string{ opacity: 0; font-family: var(--FONT-STACK-HIGHLIGHT); font-weight: var(--FONT-WEIGHT-HIGHLIGHT); font-style: var(--FONT-STYLE-HIGHLIGHT); } #MainContent .no-js .text-highlight-wrapper--alternate-font .text-highlight__string{ opacity: 1; } #MainContent .text-highlight-wrapper--underline .text-highlight{ --offset: 0; } #MainContent .text-highlight-wrapper--underline .text-highlight__string{ position: relative; display: inline-block; } #MainContent .text-highlight-wrapper--underline .text-highlight__string::before{ content: ""; position: absolute; bottom: 0; left: var(--offset); right: var(--offset); height: 3px; display: block; background: var(--highlight-color, var(--text)); transform: scaleX(0); transform-origin: left; z-index: -1; } #MainContent .no-js .text-highlight-wrapper--underline .text-highlight__string::before{ transform: none; transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1); } @media (hover: hover) { #MainContent .no-js .text-highlight-wrapper--underline a:hover .text-highlight__string::before{ transform: scaleX(0); } } #MainContent .text-highlight-wrapper--underline-hand-drawn .text-highlight__icon svg{ top: 75%; transform: translateX(-50%); width: 108%; } #MainContent .text-highlight-wrapper--underline-hand-drawn .text-highlight path{ opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; } #MainContent .no-js .text-highlight-wrapper--underline-hand-drawn .text-highlight path{ opacity: 1; stroke-dashoffset: 0; } /*================ Variants ================*/ #MainContent .product__selectors{ display: grid; grid-template-columns: repeat(2, minmax(0, 50%)); row-gap: var(--grid-gutter); margin-right: calc(var(--form-left) * -1); z-index: 110; } @media only screen and (max-width: 767px) { #MainContent .product__selectors{ row-gap: calc(var(--form-margin-mobile) * 2); } #MainContent .variant__labels--hide .product__selectors{ row-gap: var(--form-margin-mobile); } } @media only screen and (max-width: 767px) { #MainContent .product__selectors{ --swatch-size: var(--swatch-size-mobile); } } @media only screen and (max-width: 479px) { #MainContent .product__selectors{ grid-template-columns: minmax(0, 100%); margin-right: 0; } } @media only screen and (max-width: 767px) { #MainContent .product__selectors .swatch__button .swatch__label .icon{ width: 14px; margin-right: 1px; } } #MainContent .product__selectors .selector-wrapper{ margin-right: var(--form-left); font-size: 0; } @media only screen and (max-width: 479px) { #MainContent .product__selectors .selector-wrapper{ margin-right: 0; width: 100%; } } #MainContent .product__selectors .selector-wrapper .select-popout{ margin-bottom: 0; } #MainContent .product__selectors .selector-wrapper .select-popout--small{ max-width: none; } #MainContent .product__selectors .selector-wrapper--boxes, #MainContent .product__selectors .selector-wrapper--swatches{ grid-column: 1/-1; } #MainContent .product__selectors .selector-wrapper--swatches{ order: -1; margin-bottom: 0; } #MainContent .selector-wrapper--swatches{ position: relative; } #MainContent .selector-wrapper--swatches .radio__legend{ z-index: auto; } #MainContent .selector-wrapper--swatches .radio__legend__label{ display: block; } #MainContent .selector-wrapper--swatches .radio__fieldset{ padding-top: calc((var(--BORDER-WIDTH) + 5px) / 2); padding-left: calc((var(--BORDER-WIDTH) + 5px) / 2); margin-top: calc(-1 * (var(--BORDER-WIDTH) + 5px) / 2); margin-left: calc(-1 * (var(--BORDER-WIDTH) + 5px) / 2); } #MainContent .selector-wrapper--swatches .radio__fieldset--circle{ padding-top: 1px; padding-left: 1px; margin-top: 1px; margin-left: 1px; } #MainContent .selector-wrapper--large .radio__fieldset{ --label-h: calc(17.6px * var(--adjust-label) * 1.5625); --label-mb: calc(var(--form-margin) / 4); --swatch-rows: calc(var(--swatch-height) * 2); --swatch-gaps: calc(12px * 2); --sf: 1px; max-height: calc(var(--label-h) + var(--label-mb) + var(--swatch-rows) + var(--swatch-gaps) - var(--sf)); overflow: hidden; transition: max-height 0.5s ease; } @media only screen and (max-width: 767px) { #MainContent .selector-wrapper--large .radio__fieldset{ --label-h: calc(16px * var(--adjust-label) * 1.1); --label-mb: var(--form-margin-mobile); --swatch-gaps: calc(var(--form-margin-mobile) * 2); } } #MainContent .variant__labels--hide .selector-wrapper--large .radio__fieldset{ --label-h: 0px; --label-mb: 0px; } #MainContent .selector-wrapper--large .radio__fieldset--circle{ --swatch-rows: calc(var(--swatch-size) * 2); } #MainContent .selector-wrapper--swatches .radio__fieldset:focus-within, #MainContent .selector-wrapper--visible .radio__fieldset, #MainContent .variant__labels--hide .selector-wrapper--visible .radio__fieldset{ max-height: var(--swatches-max-height, 500px); } #MainContent .radio__legend{ display: block; margin: 0; width: 100%; z-index: 1; margin-bottom: calc(var(--form-margin) / 4); } @media only screen and (max-width: 767px) { #MainContent .radio__legend{ margin-bottom: var(--form-margin-mobile); } } #MainContent .radio__legend.is-hidden{ display: none; padding: 0; margin: 0; } #MainContent .radio__fieldset--sizeguide .radio__legend{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } #MainContent .radio__legend__label{ font-size: calc(17.6px * var(--adjust-label)); } @media only screen and (max-width: 767px) { #MainContent .radio__legend__label{ display: block; font-size: calc(16px * var(--adjust-label)); line-height: 1.1; } } #MainContent .radio__fieldset--sizeguide .radio__legend__label{ margin-right: 15px; } #MainContent .radio__label{ transition: color 0.3s ease, background 0.3s ease, border 0.3s ease; } #MainContent .radio__label:hover{ cursor: pointer; } #MainContent .radio__button{ position: relative; display: inline-block; margin: 0 12px 12px 0; border-color: transparent; font-size: calc(14px * var(--adjust-body)); } @media only screen and (max-width: 767px) { #MainContent .radio__button{ margin: 0 var(--form-margin-mobile) var(--form-margin-mobile) 0; } } #MainContent .radio__button.sold-out .radio__label, #MainContent .radio__button.unavailable .radio__label{ background-color: rgba(92, 92, 92, 0.1); text-decoration: line-through; } #MainContent .radio__fieldset{ display: flex; flex-wrap: wrap; margin: 0 -12px -12px 0; border: 0; padding: 0; } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset{ margin: 0 -8px -8px 0; } } #MainContent .radio__fieldset .radio__label{ display: block; font-size: calc(16px * var(--adjust-button)); line-height: 1.3; position: relative; margin: 0; padding: var(--form-top) var(--form-left); color: var(--text); background-color: var(--bg); border: var(--BORDER-WIDTH) solid var(--text-alpha-25); border-radius: var(--RADIUS); font-family: var(--FONT-STACK-BUTTON); font-weight: var(--FONT-WEIGHT-BUTTON); font-style: var(--FONT-STYLE-BUTTON); text-transform: var(--BUTTON-TEXT-CAPS); letter-spacing: var(--LETTER-SPACING-BUTTON); } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset .radio__label{ font-size: calc(12px * var(--adjust-button)); line-height: 1.1; padding: 10px 12px; min-width: 60px; text-align: center; } } #MainContent .radio__fieldset .radio__label:hover, #MainContent .radio__fieldset .radio__label:active, #MainContent .radio__fieldset .radio__label:focus, #MainContent .radio__fieldset .radio__input:checked ~ .radio__label{ border-color: var(--text); } #MainContent .radio__fieldset .radio__fieldset-arrow{ position: absolute; bottom: 50%; display: block; width: 26px; height: 26px; max-height: none; margin-bottom: -26px; border-radius: 0; box-shadow: none; } #MainContent .radio__fieldset .radio__fieldset-arrow--prev{ left: 5px; transform: scale(-1, 1); } #MainContent .radio__fieldset .radio__fieldset-arrow--next{ right: 5px; } #MainContent .radio__fieldset .radio__fieldset-arrow::before:before, #MainContent .radio__fieldset .radio__fieldset-arrow::before:after{ content: ""; position: absolute; width: 10px; height: 2px; border-radius: calc(2px / 2); background-color: currentColor; right: calc(50% - 10px); } #MainContent .radio__fieldset .radio__fieldset-arrow::before:before{ top: calc(50% - 2px / 2); transform: rotate(calc(180deg - 45deg)) translate(50%, 50%); } #MainContent .radio__fieldset .radio__fieldset-arrow::before:after{ bottom: calc(50% - 2px / 2); transform: rotate(calc(180deg + 45deg)) translate(50%, -50%); } #MainContent .radio__fieldset .swatch__button{ margin: 0 12px 12px 0; } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset .swatch__button{ margin: 0 var(--form-margin-mobile) var(--form-margin-mobile) 0; } } #MainContent .radio__fieldset--sizeguide{ display: inline-flex; width: calc(100% + 12px); } #MainContent .radio__fieldset--sizeguide .radio__legend{ width: calc(100% - 12px); } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset--sizeguide{ width: calc(100% + var(--form-margin-mobile)); } #MainContent .radio__fieldset--sizeguide .radio__legend{ width: calc(100% - var(--form-margin-mobile)); } } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset--rectangle{ margin-bottom: -4px; } #MainContent .radio__fieldset--rectangle .radio__legend{ margin-bottom: var(--form-margin-mobile); } } #MainContent .radio__fieldset--variant-option-image{ --default-wh: 60px; --spacing: var(--form-top); } #MainContent .radio__fieldset--variant-option-image .radio__buttons{ display: flex; flex-wrap: wrap; } #MainContent .radio__fieldset--variant-option-image .radio__button{ min-width: var(--option-image-width, var(--default-wh)); min-height: var(--option-image-height, var(--default-wh)); } #MainContent .radio__fieldset--variant-option-image .radio__label{ padding: var(--spacing); min-height: 100%; display: grid; grid-template-columns: var(--default-wh) minmax(0, 1fr); align-content: center; justify-items: center; gap: var(--spacing); } @media only screen and (max-width: 767px) { #MainContent .radio__fieldset--variant-option-image .radio__label{ gap: var(--form-margin-mobile); } } #MainContent .radio__fieldset--variant-option-image .option-image, #MainContent .radio__fieldset--variant-option-image .option-title{ display: flex; align-items: center; } #MainContent .radio__fieldset--variant-option-image .option-image{ border-radius: calc(var(--RADIUS) / 2); overflow: hidden; } #MainContent .radio__fieldset--variant-option-image .placeholder-svg, #MainContent .radio__fieldset--variant-option-image .placeholder-svg-filled{ width: var(--default-wh); height: var(--default-wh); max-height: var(--default-wh); } #MainContent .radio__fieldset--variant-option-image-inline img{ width: var(--default-wh); height: auto; } #MainContent .radio__fieldset--variant-option-image-stacked .radio__label{ grid-template-columns: minmax(0, 1fr); } #MainContent .selector-wrapper--grid{ display: inline-flex; } #MainContent .selector-wrapper--grid .radio__button{ flex: 0 0 calc(16.6666666667% - 12px); min-width: 60px; max-width: 75px; } @media only screen and (max-width: 767px) { #MainContent .selector-wrapper--grid .radio__button{ flex: 0 0 auto; } } #MainContent .selector-wrapper--grid .radio__label{ height: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; text-align: center; } #MainContent .selector-wrapper--grid-small .radio__button{ max-width: 60px; } #MainContent .selector-wrapper.hidden{ display: none; } #MainContent .radio__input{ position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0; margin: 0; overflow: hidden; pointer-events: none; display: block; } #MainContent .radio__input.sold-out ~ label, #MainContent .radio__input.unavailable ~ label{ text-decoration: line-through; } #MainContent .selector-wrapper fieldset label{ margin-top: unset; } #MainContent .swatch__more{ display: none; font-weight: var(--FONT-WEIGHT-BUTTON); font-size: calc(12px * var(--adjust-body)); } #MainContent .swatch__more span{ animation: fadeIn 1s ease; pointer-events: none; } #MainContent .swatch__more span:nth-child(1){ display: inline-block; } #MainContent .swatch__more span:nth-child(2){ display: none; } #MainContent .selector-wrapper--large .swatch__more{ display: inline-block; margin-top: 14px; } @media only screen and (max-width: 767px) { #MainContent .selector-wrapper--large .swatch__more{ margin-top: 8px; } } @media only screen and (max-width: 767px) { #MainContent .variant__labels--hide .selector-wrapper--large .swatch__more{ margin-bottom: 4px; } } #MainContent .selector-wrapper--visible .swatch__more span:nth-child(1), #MainContent .radio__fieldset:focus-within + .swatch__more span:nth-child(1){ display: none; } #MainContent .selector-wrapper--visible .swatch__more span:nth-child(2), #MainContent .radio__fieldset:focus-within + .swatch__more span:nth-child(2){ display: inline-block; } #MainContent .product__form .btn.swatch__more, #MainContent .product__form .swatch__more.shopify-payment-button__button--unbranded{ width: auto; } #MainContent .select__fieldset .select-popout{ margin: 0; } #MainContent .select__fieldset .radio__legend__label, #MainContent .select__fieldset .select__label{ display: block; padding-right: 0; margin-right: 0; margin-bottom: 8px; font-size: calc(17.6px * var(--adjust-label)); } @media only screen and (max-width: 767px) { #MainContent .select__fieldset .radio__legend__label, #MainContent .select__fieldset .select__label{ font-size: calc(15.2px * var(--adjust-label)); line-height: 1.1; } } #MainContent .select__fieldset .radio__legend__label.is-hidden, #MainContent .select__fieldset .select__label.is-hidden{ display: none; margin: 0; padding: 0; } #MainContent .select__fieldset .radio__legend__label{ display: block; padding-right: 0; margin-right: 0; } #MainContent .select__fieldset--small .radio__legend__label{ display: inline; margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.1em; } #MainContent .variant__labels--hide .radio__legend{ margin: 0; } #MainContent .variant__labels--hide .radio__legend__label, #MainContent .variant__labels--hide .select__label{ position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } #MainContent .variant__labels--hide .selector-wrapper--boxes{ margin-bottom: calc(var(--form-margin) / 2); } #MainContent .selector-wrapper{ z-index: 10; } #MainContent .selector-wrapper:focus-within{ z-index: 111; } @media (pointer: coarse) { #MainContent .selector-wrapper:has(.select-popout__toggle:hover){ z-index: 111; } } #MainContent .selector-wrapper .select-popout{ contain: paint; } #MainContent .selector-wrapper--qty{ grid-column-start: 1; } #MainContent .selector-wrapper--open{ z-index: 110; } #MainContent .selector-wrapper--open .select-popout{ contain: unset; } #MainContent .variant__countdown{ --line-height: 1; --dot-size: 8px; font-size: calc(14.4px * var(--adjust-body)); line-height: var(--line-height); padding: 0; margin: 0; } @media only screen and (max-width: 767px) { #MainContent .variant__countdown{ font-size: calc(12px * var(--adjust-body)); } } #MainContent .variant__countdown--in{ --dot-color: var(--COLOR-SUCCESS); } #MainContent .variant__countdown--low{ --dot-color: var(--COLOR-WARN); } #MainContent .variant__countdown--out{ --dot-color: var(--COLOR-ERROR); } #MainContent .variant__countdown--unavailable{ --dot-color: var(--text-alpha-50); } #MainContent .count-is-in .variant__countdown--in, #MainContent .count-is-low .variant__countdown--low, #MainContent .count-is-out .variant__countdown--out, #MainContent .count-is-unavailable .variant__countdown--unavailable{ display: block; } #MainContent .variant__countdown--in, #MainContent .variant__countdown--low, #MainContent .variant__countdown--out, #MainContent .variant__countdown--unavailable{ display: none; padding-left: 16px; position: relative; } #MainContent .variant__countdown--in::after, #MainContent .variant__countdown--in::before, #MainContent .variant__countdown--low::after, #MainContent .variant__countdown--low::before, #MainContent .variant__countdown--out::after, #MainContent .variant__countdown--out::before, #MainContent .variant__countdown--unavailable::after, #MainContent .variant__countdown--unavailable::before{ content: ""; display: block; position: absolute; top: calc((15px * var(--adjust-body) * var(--line-height) - var(--dot-size)) / 2); left: 0; width: var(--dot-size); height: var(--dot-size); background-color: var(--dot-color); border-radius: 50%; } @media only screen and (max-width: 767px) { #MainContent .variant__countdown--in::after, #MainContent .variant__countdown--in::before, #MainContent .variant__countdown--low::after, #MainContent .variant__countdown--low::before, #MainContent .variant__countdown--out::after, #MainContent .variant__countdown--out::before, #MainContent .variant__countdown--unavailable::after, #MainContent .variant__countdown--unavailable::before{ top: calc((11.8px * var(--adjust-body) * var(--line-height) - var(--dot-size)) / 2); } } #MainContent .variant__countdown--in::after, #MainContent .variant__countdown--low::after, #MainContent .variant__countdown--out::after, #MainContent .variant__countdown--unavailable::after{ opacity: 1; } #MainContent .variant__countdown--in::before, #MainContent .variant__countdown--low::before, #MainContent .variant__countdown--out::before, #MainContent .variant__countdown--unavailable::before{ opacity: 0.2; animation: pulseOut 2.5s linear; animation-iteration-count: infinite; } @media only screen and (max-width: 767px) { #MainContent .product__form .variant__countdown .variant__countdown--in::after, #MainContent .product__form .variant__countdown .variant__countdown--in::before, #MainContent .product__form .variant__countdown .variant__countdown--low::after, #MainContent .product__form .variant__countdown .variant__countdown--low::before, #MainContent .product__form .variant__countdown .variant__countdown--out::after, #MainContent .product__form .variant__countdown .variant__countdown--out::before, #MainContent .product__form .variant__countdown .variant__countdown--unavailable::after, #MainContent .product__form .variant__countdown .variant__countdown--unavailable::before{ top: calc((11.8px * var(--adjust-body) * var(--line-height) - var(--dot-size)) / 2); } } #MainContent .radio__button:focus-within input + .radio__label, #MainContent .radio__input:focus + .radio__label, #MainContent .radio__input.focus-visible + .radio__label{ outline: -webkit-focus-ring-color auto 5px; } #MainContent .no-js .product__selectors, #MainContent .no-js .selector-wrapper{ display: none !important; } #MainContent .no-js .quantity__input{ display: block; max-width: 120px; width: 100%; } /*================ Video elements ================*/ #MainContent .video__container{ overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .is-paused .video__container{ z-index: 0; } #MainContent .video-background{ position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; display: block; background: var(--bg); } #MainContent .video-background.is-loading{ background: var(--bg-lighten-darken-shimmer-bg); } #MainContent .video-background img{ display: block; object-fit: cover; width: 100%; height: 100%; min-height: 100%; } #MainContent .video-background .placeholder-svg-filled{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); } #MainContent .video-background.lazy-image.is-loading{ z-index: 0; } #MainContent .is-paused .video-background--image{ z-index: 1; } #MainContent [rc-not-selected] .rc-purchase-option__selector--save{ display: none; } #MainContent [rc-selected] .rc-purchase-option__selector--save{ display: block; } #MainContent [rc-selected] .rc-purchase-option__selector--save.none{ display: none; } #MainContent .video__player{ position: absolute; top: 50%; left: 50%; min-height: 100%; min-width: 100%; width: 100%; height: 100%; transform: translate(-50%, -50%); overflow: hidden; transition: opacity 0.5s ease 0.5s; } #MainContent .video__player video{ min-width: 100%; min-height: 100%; } #MainContent .video__player video::-webkit-media-controls{ display: none; } #MainContent .video__player.is-loading{ opacity: 0; } #MainContent .video__iframe{ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 200%; max-width: none; pointer-events: none; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.2s ease; } #MainContent .loaded .video__iframe{ opacity: 1; } #MainContent .video__overlay{ z-index: auto; } #MainContent .is-paused .video__overlay{ z-index: 2; } #MainContent .video-cover{ object-fit: cover; } #MainContent .video-fit{ object-fit: contain; } #MainContent .text-inside{ display: flex; width: 100%; height: 100%; flex: 1; } #MainContent .brick__section__wrapper:has(.brick__video--video-fit){ align-content: center; } #MainContent .brick__section__wrapper:has(.brick__video--video-fit):has(.brick__block:only-child){ height: auto; min-height: auto; } #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .brick__block__content, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .brick__block__inner, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .brick__video, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .video-wrapper, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .video__container, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .text-inside, #MainContent .brick__section__wrapper:has(.brick__video--video-fit) .video__overlay{ border-radius: inherit; } #MainContent .brick__video--video-fit .video__container, #MainContent .brick__video--video-fit .video-background, #MainContent .brick__video--video-fit .video__player, #MainContent .brick__video--video-fit .video-fit{ position: relative; top: auto; left: auto; height: 100%; } #MainContent .brick__video--video-fit .video__player{ transform: none; } #MainContent .brick__video--video-fit .video-fit{ display: block; } #MainContent .brick__video--video-fit .video-wrapper{ display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; height: auto; transform: none; } @media only screen and (max-width: 767px) { #MainContent .brick__video--video-fit .video-wrapper{ grid-template-rows: minmax(0, 1fr); } } #MainContent .brick__video--video-fit .video__container{ grid-row-start: 1; grid-column-start: 1; align-self: center; } #MainContent .brick__video--video-fit .text-inside{ position: relative; display: flex; grid-row-start: 1; grid-column-start: 1; } #MainContent .brick__video--video-fit .placeholder-svg--overlayed{ aspect-ratio: 16/9; } @supports not (aspect-ratio: 16/9) { #MainContent .brick__video--video-fit .placeholder-svg--overlayed{ padding-top: 56.25%; } } #MainContent .video-text-link{ font-size: calc(14px * var(--adjust-body)); display: inline-flex; align-items: center; line-height: 30px; letter-spacing: 2px; position: relative; text-transform: uppercase; color: var(--text); font-family: var(--FONT-STACK-BODY); font-weight: var(--FONT-WEIGHT-BODY); font-style: var(--FONT-STYLE-BODY); transition: opacity 0.2s; } #MainContent .video-text-link:hover, #MainContent .video-text-link:focus, #MainContent .video-text-link:active{ opacity: 0.7; } #MainContent .video-text-link span{ display: inline-block; vertical-align: middle; margin-left: 10px; } #MainContent .video-text-link .icon-play{ width: 60px; height: 60px; display: inline-block; vertical-align: middle; } #MainContent .video-text-wrapper{ position: relative; padding-top: var(--gutter); padding-bottom: var(--gutter); } #MainContent .video-text-wrapper .btn, #MainContent .video-text-wrapper .shopify-payment-button__button--unbranded{ margin-right: 0; } #MainContent .video-text-wrapper .video-text-link .icon-play{ width: 60px; height: 60px; margin-right: 0; } #MainContent .video-text-wrapper .main-buttons{ flex-flow: row wrap; } @media only screen and (max-width: 479px) { #MainContent .video-text-wrapper .main-buttons__item{ width: 100%; } } @media only screen and (max-width: 767px) { #MainContent .video-text-wrapper .align--top-right, #MainContent .video-text-wrapper .align--middle-right, #MainContent .video-text-wrapper .align--bottom-right{ justify-content: flex-start; } } #MainContent .sticky-copy-bar{ padding-top: 16px; padding-bottom: 16px; } #MainContent .sticky-copy-bar__wrapper{ display: flex; align-items: center; justify-content: space-between; font-family: "Montserrat"; } #MainContent .sticky-copy-bar__wrapper:after{ display: none; } #MainContent .sticky-copy-bar--button{ font-family: "Montserrat"; padding: 8px 10px; font-weight: 600; font-size: 16px; line-height: 100%; letter-spacing: 0px; display: block; border-radius: 4px; white-space: nowrap; } #MainContent .sticky-copy-bar__wrapper img{ object-fit: contain; object-position: left; } #MainContent .sticky-copy-bar__text{ font-weight: 500; font-style: Medium; font-size: 16px; line-height: 100%; letter-spacing: 0.15px; } #MainContent .sticky-copy-bar__text span{ font-weight: 700; font-size: 17px; line-height: 100%; letter-spacing: 0px; text-decoration: underline; } #MainContent .sticky-copy-bar__button{ display: flex; align-items: center; gap: 8px; justify-content: end; } #MainContent .sticky-copy-bar__button .cart__toggle{ /* display: none; */ position: relative; } #MainContent .sticky-copy-bar__button .cart__toggle svg circle{ display: none; } #MainContent .sticky-copy-bar__button .cart__toggle svg{ color: #FFFFFF; width: 24px; } #MainContent .cart__toggle .cart__toggle--count{ position: absolute; top: 5px; right: 4px; background: #CF0A66; color: #FFFFFF; font-family: 'Montserrat'; font-weight: 600; font-size: 10px; line-height: 100%; letter-spacing: 0.15px; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } @media (max-width: 990px) { #MainContent .sticky-copy-bar__logo{ display: none; } #MainContent .sticky-copy-bar--button{ padding: 8px 4px; } #MainContent .sticky-copy-bar__text{ width: 50%; } #MainContent .sticky-copy-bar__button{ width: 50%; } } /* Dawn compat: no lazy-load JS here to remove .is-loading -- keep images visible */ #MainContent .lazy-image img.is-loading{ opacity: 1; } #MainContent .lazy-image.is-loading{ background: none; z-index: auto; } #MainContent .lazy-image::after, #MainContent .lazy-image.is-loading::after{ content: none; } /* Dawn compat: share icons -- the scoped .icon rules (fill:none; stroke; width/height 100%) outrank the snippets' own sizing here, unlike on live. Restore intended rendering. */ #MainContent .social-share-row svg{ width: 30px; height: 30px; stroke: none; fill: currentColor; } #MainContent .share-button .icon-share{ width: 13px; height: 12px; fill: none; stroke: none; } /* Dawn compat: pagination carets (Dawn markup, .icon icon-caret) -- same specificity clash as the share icons: the scoped .icon rules blow them up to 100% black. */ #MainContent .pagination__item .icon-caret{ width: 10px; height: 6px; fill: currentColor; stroke: none; } /* Dawn compat: base.css has div:empty{display:none}, which hides the product gallery's empty aspect-ratio spacer div and collapses every media slide to 1px. Restore it (the id selector outranks div:empty). */ #MainContent .product-gallery__media-space{ display: block; } /* Dawn compat: below 1024px live runs a Flickity carousel on the gallery via theme JS, which this theme never loads -- without it all media stack vertically. Substitute a CSS scroll-snap carousel. (At 1024px+ the grid layout from template-product.css takes over.) */ @media only screen and (max-width: 1023px) { #MainContent .product-single__wrapper--grid .product-gallery__media-slider:not(.flickity-enabled){ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } #MainContent .product-single__wrapper--grid .product-gallery__media-slider:not(.flickity-enabled) .product-gallery__media-slide{ flex: 0 0 100%; scroll-snap-align: start; } } /* Dawn compat: live theme.css's gallery sizing block never made it into the scoped port, so slides, media boxes and images all compute to 0x1px. Copied verbatim from live theme.css (.product-gallery__media-* base rules), scoped to #MainContent like the rest. */ #MainContent .product-gallery__media-slide{ width: 100%; position: relative; overflow: hidden; } #MainContent .product-gallery__media{ position: relative; width: 100%; height: 0; min-height: 1px; overflow: hidden; } #MainContent .product-gallery__media img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; margin: 0; object-fit: contain; } #MainContent .product-gallery__media .lazy-image, #MainContent .product-gallery__media iframe, #MainContent .product-gallery__media model-viewer, #MainContent .product-gallery__media .shopify-model-viewer-ui, #MainContent .product-gallery__media > video, #MainContent .product-gallery__media .media-item{ position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; min-width: 100%; } #MainContent .product-gallery__media iframe, #MainContent .product-gallery__media model-viewer, #MainContent .product-gallery__media .shopify-model-viewer-ui, #MainContent .product-gallery__media .media-item{ height: 100%; } #MainContent .product-gallery__media-link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #MainContent .product-gallery__media--image{ height: auto; background-color: transparent; } #MainContent .product-gallery__media-space{ display: block; padding-top: var(--media-padding-top, 0); }