/** Shopify CDN: Minification failed Line 5044:104 Unexpected "-small" **/ /*!***********************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./src/css/style.css ***! \***********************************************************************************************************************************************************************/ /* ! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } :root { --dropdown-position-top: 0px; --dropdown-position-left: 0px; --dropdown-height: 400px; } ::-moz-selection { color: var(--color-light); background-color: var(--color-brand); } ::selection { color: var(--color-light); background-color: var(--color-brand); } html { height: 100%; scroll-behavior: smooth; } body { min-height: 100%; background-color: var(--color-light); font-family: var(--font-body-family); font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); letter-spacing: var(--font-body-space); color: var(--color-dark); } @media print { .no-print { display: none; } } svg{ display: inline-flex; fill: currentColor; } label[for] { cursor: pointer; } hr{ border-color: var(--color-light-material); } small{ font-size: calc(var(--font-body-scale) * 0.75rem); line-height: calc(var(--font-body-line) * 1.5); } a{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } a:hover{ color: var(--color-brand); } a:hover .text-light{ color: var(--color-brand); } a:hover .bg-brand{ color: var(--color-brand-text); } a:hover .bg-brand .text-light{ color: var(--color-brand-text); } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .skip-to-content-link:focus { z-index: 9999; position: inherit; overflow: auto; width: auto; height: auto; clip: auto; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ letter-spacing: var(--font-heading-space); } .text-menu{ letter-spacing: var(--font-menu-space); } *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; } .basket-modal { max-width: 37.5rem; } .loading-circle circle { animation: clock-animation 2s ease-in-out forwards; transform-origin: center; } @keyframes clock-animation { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: var(--fill_num); } } .text-button, .text-button-small, .text-button-large{ letter-spacing: var(--font-button-space); } .btn, .shopify-payment-button__button.shopify-payment-button__button--unbranded{ display: inline-flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 2.8125rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; background-color: var(--color-light); } .btn, .btn-small, .btn-large, .shopify-payment-button__button.shopify-payment-button__button--unbranded, .shopify-payment-button__button.shopify-payment-button__button--unbranded-small, .shopify-payment-button__button.shopify-payment-button__button--unbranded-large{ letter-spacing: var(--font-button-space); } .btn, .shopify-payment-button__button.shopify-payment-button__button--unbranded{ text-align: center; font-size: calc(var(--font-button-scale) * 0.875rem); color: var(--color-dark); font-weight: 500; line-height: 1.25; border-width: 1px; border-radius: var(--buttons-radius); transition: all 0.15s ease-in; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .btn .text, .shopify-payment-button__button.shopify-payment-button__button--unbranded .text{ min-width: 0px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } @media (min-width: 768px) { .btn .icon, .shopify-payment-button__button.shopify-payment-button__button--unbranded .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .btn .text, .shopify-payment-button__button.shopify-payment-button__button--unbranded .text { transition: all .15s linear; transform: translateX(12px); } .btn:hover .icon, .btn:active .icon, .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover .icon, .shopify-payment-button__button.shopify-payment-button__button--unbranded:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .btn:hover .text, .btn:active .text, .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover .text, .shopify-payment-button__button.shopify-payment-button__button--unbranded:active .text { transform: translateX(0); } } .btn:hover, .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover{ background-color: var(--color-brand-surface); } .btn:hover:active, .shopify-payment-button__button.shopify-payment-button__button--unbranded:hover:active{ background-color: var(--color-brand-surface-active); } .btn:focus, .shopify-payment-button__button.shopify-payment-button__button--unbranded:focus{ outline-style: solid; outline-width: 4px; outline-color: var(--color-brand-alpha-250); } .btn:disabled, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .btn:disabled, .btn:disabled span, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled span{ color: var(--color-dark-subdued); } .btn:disabled:hover, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled:hover{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .btn:disabled:hover, .btn:disabled:hover span, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled:hover, .shopify-payment-button__button.shopify-payment-button__button--unbranded:disabled:hover span{ color: var(--color-dark-subdued); cursor: not-allowed; } a:hover .btn-primary{ color: var(--color-brand-text); } a:hover .btn-primary .text-light{ color: var(--color-brand-text); } .btn-primary{ border-color: var(--color-brand); background-color: var(--color-brand); color: var(--color-brand-text); } .btn-primary:hover{ border-color: var(--color-brand-hover); background-color: var(--color-brand-hover); color: var(--color-brand-text); } .btn-primary:hover:active{ border-color: var(--color-brand-active); background-color: var(--color-brand-active); color: var(--color-brand-text); } .btn-inverted{ border-width: 1px; border-color: rgba(0,0,0, 0); background-color: var(--color-light); color: var(--color-dark); } .btn-inverted:hover{ background-color: var(--color-light-surface); color: var(--color-dark); } .btn-inverted:hover:active{ border-color: var(--color-light-material); background-color: var(--color-light-surface); } .btn-outline{ background-color: rgba(0,0,0, 0); color: var(--color-dark); border-width: 1px; border-color: var(--color-light-material); } .btn-outline:hover{ border-color: var(--color-dark); background-color: rgba(0,0,0, 0); color: var(--color-dark); } .btn-outline:hover:active{ background-color: var(--color-dark-10); } .btn-outline:focus{ outline-color: var(--color-brand-alpha-250); } .btn-small{ padding-left: 1rem; padding-right: 1rem; min-height: 2.313rem; } .btn-small, .btn-small-small, .btn-small-large{ letter-spacing: var(--font-button-space); } .btn-small{ font-size: calc(var(--font-button-scale) * 0.875rem); line-height: 1.14285; } .btn-large, .shopify-payment-button__button.shopify-payment-button__button--unbranded{ padding-left: 2rem; padding-right: 2rem; height: auto; min-height: 3.313rem; } .btn-large, .shopify-payment-button__button.shopify-payment-button__button--unbranded{ letter-spacing: var(--font-button-space); } .btn-large, .shopify-payment-button__button.shopify-payment-button__button--unbranded{ font-size: calc(var(--font-button-scale) * 1rem); line-height: 1.125; } .shopify-payment-button__button, .shopify-payment-button__button--unbranded{ margin-top: 0.5rem; padding-top: 0 !important; padding-bottom: 0 !important; border: 1px solid; text-transform: uppercase; font-weight: 600; } .cookies-modal-content .cookies-list-li.active, .cookies-modal-content .cookies-list-li:hover{ background-color: var(--color-dark-10); } .container, [role="main"] .shopify-policy__container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .container, [role="main"] .shopify-policy__container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .container, [role="main"] .shopify-policy__container { max-width: 540px } } @media (min-width: 768px) { .container, [role="main"] .shopify-policy__container { max-width: 720px } } @media (min-width: 992px) { .container, [role="main"] .shopify-policy__container { max-width: 960px } } @media (min-width: 1200px) { .container, [role="main"] .shopify-policy__container { max-width: 1152px } } @media (min-width: 1440px) { .container, [role="main"] .shopify-policy__container { max-width: 1440px } } .dropdown-menu { display: none; position: absolute; min-width: 12.5rem; top: 100%; left: 0; /*margin-top: 1rem;*/ padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: var(--color-light); color: var(--color-dark); letter-spacing: var(--font-menu-space); font-size: calc(var(--font-menu-scale) * 0.875rem); line-height: 1.25; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.16); border-radius: var(--tiles-radius); z-index: 20; } .dropdown-menu:not(.show).transition-width{ display: block; width: 0px; } .dropdown-menu:not(.show).transition-height{ display: block; height: 0px; } .dropdown-menu:not(.show).fade{ display: block; } .dropdown-menu.show{ display: block; } .dropdown-menu .js-submenu-item svg { display: none; } .dropdown-menu .js-submenu-item:hover, .dropdown-menu .js-submenu-item:focus-within{ background-color: var(--color-light-surface); } .dropdown-menu .js-submenu-item:hover .submenu, .dropdown-menu .js-submenu-item:focus-within .submenu { opacity: 1; visibility: visible; } .dropdown-menu-link { display: block; position: relative; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1.5rem; padding-right: 1.5rem; color: var(--color-dark-material); white-space: nowrap; transition-property: color, background-color; transition-duration: .1s; transition-timing-function: ease-in; } .dropdown-menu-link:hover{ background-color: var(--color-light-surface); color: var(--color-dark); } .dropdown-menu-link:hover:active{ background-color: var(--color-dark-10); } .dropdown-menu-link.has-submenu::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 1rem; width: 1rem; height: 1rem; background: url('data:image/svg+xml,'); } .dropdown-menu-link + .submenu { display: block; position: fixed; top: var(--dropdown-position-top); left: var(--dropdown-position-left); height: 100%; max-height: 25rem; width: 15.625rem; height: var(--dropdown-height); overflow-y: auto; opacity: 0; visibility: hidden; } .dropdown-menu-link + .submenu::-webkit-scrollbar { width: 10px; } @media (min-width: 992px) { .dropdown-menu-link + .submenu::-webkit-scrollbar-track{ background-color: var(--color-light-surface); border: 1px solid; border-color: var(--color-light-material); } } .dropdown-menu-link + .submenu::-webkit-scrollbar-thumb{ border-radius: 999px; background-color: var(--color-dark-30); border: 3px solid transparent; background-clip: padding-box; } .dropdown-menu-link + .submenu { transition: 0.15s ease-in-out; } .dropdown-menu-link + .submenu.left { right: 100%; left: unset; } .dropdown-menu hr{ margin-top: 0.5rem; margin-bottom: 0.5rem; border-width: 1px; border-color: var(--color-light-material); } /* used in gallery_thumbs_vertical to maintain proper size of thumbnails for different resolutions */ .gallery-thumbnails-vertical > li.glide__bullet--active { position: relative; } .gallery-thumbnails-vertical > li.glide__bullet--active:after { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; box-shadow: inset 0 0 0 1px var(--color-brand); /* additional properties from different classes might need transition */ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-radius: var(--tiles-radius); } .gallery-modal .modal-dialog { max-width: 100% !important; width: 100% !important; height: 100%; margin: 0; } @media (max-width: 767px) { .gallery-modal .modal-dialog { width: 100%; height: 100%; margin: 0; border-radius: 0 } } .gallery-modal .modal-content { min-height: 0; height: 100%; max-height: 100%; } .gallery-modal .glide__arrow{ height: 3rem; width: 3rem; position: absolute; top: 50%; transform: translateY(-50%); } /* .glide-image { border: 2px solid transparent; transition-property: border; transition-duration: .1s; transition-timing-function: ease-in; &.active { @apply border-brand; } }*/ .gallery-modal--2 .modal-dialog { width: 100%; max-width: unset; } .gallery-modal--2 .modal-dialog .modal-content { border-radius: 0; } .gallery-modal--2 .modal-dialog .modal-content .glide-image { border-width: 1px; } @media (max-width: 991px) { .gallery-mobile-bullets .glide__bullet { border: none; touch-action: none; } .gallery-mobile-bullets .glide__bullet > div{ background-color: var(--color-dark-10); touch-action: none; transition: background-color 0.2s; } .gallery-mobile-bullets .glide__bullet--active > div{ border-radius: var(--tiles-radius); background-color: var(--color-dark-material); } } #product-gallery{ left: 0px; top: 0px; } @media (min-width: 768px){ #product-gallery{ position: absolute; width: 66.666667%; padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 767px){ #product-gallery{ margin-top: 1.25rem; margin-bottom: 1.25rem; } } @media (max-width: 575px){ #product-gallery{ margin-left: -1.25rem; margin-right: -1.25rem; } } .glide{ position: relative; width: 100%; } .glide__track { overflow: hidden; } .glide__slides { position: relative; width: 100%; list-style: none; backface-visibility: hidden; transform-style: preserve-3d; touch-action: pan-Y; overflow: hidden; padding: 0; white-space: nowrap; display: flex; flex-wrap: nowrap; will-change: transform; } .glide__slides.glide-fade { transform: none !important; width: auto !important; display: grid; grid-template-areas: 'slide'; } /* create a 1x1 grid where the single cell is called slide */ .glide__slides.glide-fade .glide__slide { position: relative; opacity: 0; transition: opacity 0.25s ease-in-out; grid-area: slide; /* assign all child slides to the cell */ } .glide__slides.glide-fade .glide__slide--active { z-index: 1; opacity: 1; } .glide__slide { width: 100%; height: 100%; flex-shrink: 0; white-space: normal; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .glide__slide a { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -moz-user-select: none; -ms-user-select: none; } .glide__arrows, .glide__bullets { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .glide__bullet.dot.glide__bullet--active{ padding: 0px; opacity: 1; } .glide__bullet.stripe.glide__bullet--active{ width: 4rem; opacity: 1; } .glide__bullet--active{ border-width: 1px; border-color: var(--color-brand); } .slider__slides.glide-fade { transform: none !important; width: auto !important; display: grid; grid-template-areas: 'slide'; } /* create a 1x1 grid where the single cell is called slide */ .slider__slides.glide-fade .glide__slide { position: relative; opacity: 0; transition: opacity 0.5s ease; grid-area: slide; /* assign all child slides to the cell */ } .slider__slides.glide-fade .glide__slide--active { z-index: 1; opacity: 1; } .slider .slider-bullets .glide__bullet .bullet { transition-property: background-color, width, height; transition-timing-function: ease-in; transition-duration: .15s; } .slider .slider-bullets--1 .glide__bullet .bullet{ margin-left: 0.25rem; margin-right: 0.25rem; height: 0.125rem; width: 2rem; } .slider .slider-bullets--1 .glide__bullet--active .bullet{ width: 4rem; } .slider .slider-bullets--2 .glide__bullet{ height: 2rem; display: flex; align-items: center; justify-content: center; } .slider .slider-bullets--2 .glide__bullet .bullet{ margin-left: 0.375rem; margin-right: 0.375rem; height: 0.5rem; width: 0.5rem; border-radius: 999px; } .slider .slider-bullets--2 .glide__bullet--active .bullet{ height: 1rem; width: 1rem; } .slider .slider-bullets.slider-bullets--2 .glide__bullet{ height: 2rem; display: flex; align-items: center; justify-content: center; } .slider .slider-bullets.slider-bullets--2 .glide__bullet .bullet{ margin-left: 0.375rem; margin-right: 0.375rem; height: 0.5rem; width: 0.5rem; background-color: var(--color-dark-60); border-radius: 999px; } .slider .slider-bullets.slider-bullets--2 .glide__bullet--active .bullet{ height: 1rem; width: 1rem; background-color: var(--color-dark); } .slider .slider-bullets--light.slider-bullets--1 .glide__bullet .bullet{ background-color: var(--color-dark-10); } @media (min-width: 992px){ .slider .slider-bullets--light.slider-bullets--1 .glide__bullet .bullet{ background-color: var(--color-light-50); } } .slider .slider-bullets--light.slider-bullets--1 .glide__bullet--active .bullet{ background-color: var(--color-dark); } @media (min-width: 992px){ .slider .slider-bullets--light.slider-bullets--1 .glide__bullet--active .bullet{ background-color: var(--color-light); } } .slider .slider-bullets--light.slider-bullets--2 .glide__bullet .bullet{ background-color: var(--color-light-50); } .slider .slider-bullets--light.slider-bullets--2 .glide__bullet--active .bullet{ background-color: var(--color-light); } .slider .slider-bullets--dark.slider-bullets--1 .glide__bullet .bullet{ margin-left: 0.25rem; margin-right: 0.25rem; height: 0.125rem; width: 2rem; background-color: var(--color-dark-10); } @media (min-width: 992px){ .slider .slider-bullets--dark.slider-bullets--1 .glide__bullet .bullet{ background-color: var(--color-dark-30); } } .slider .slider-bullets--dark.slider-bullets--1 .glide__bullet--active .bullet{ width: 4rem; background-color: var(--color-dark); } .slider .slider-bullets--dark.slider-bullets--2 .glide__bullet{ height: 2rem; display: flex; align-items: center; justify-content: center; } .slider .slider-bullets--dark.slider-bullets--2 .glide__bullet .bullet{ margin-left: 0.375rem; margin-right: 0.375rem; height: 0.5rem; width: 0.5rem; background-color: var(--color-dark-30); border-radius: 999px; } .slider .slider-bullets--dark.slider-bullets--2 .glide__bullet--active .bullet{ height: 1rem; width: 1rem; background-color: var(--color-dark); } .btn-outline:hover:active{ background-color: var(--color-light-material); } .glide__arrows .glide__arrow[disabled] { display: none; } [data-generic-slider]:not(.nav-tab-slider):not(.glide--swipeable) .glide__slides:not(.glide-fade) > div:not(:first-child) { display: none; } [data-generic-slider]:not(.nav-tab-slider):not(.glide--swipeable) .glide__slides.glide-fade .glide__slide { opacity: 1; } .nav-tab-slider:not(.glide--swipeable) .glide__slides{ display: grid; gap: 1rem; } @media (min-width: 576px){ .nav-tab-slider:not(.glide--swipeable) .glide__slides{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px){ .nav-tab-slider:not(.glide--swipeable) .glide__slides{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px){ .nav-tab-slider:not(.glide--swipeable) .glide__slides{ grid-template-columns: repeat(4, minmax(0, 1fr)); } } .nav-tab-slider:not(.glide--swipeable) .glide__slides > div:nth-child(1n+5) { display: none; } .image-zoom { background-position: 50% 50%; background-repeat: no-repeat; cursor: zoom-in; } .image-zoom.zoom-active { cursor: zoom-out; } .image-zoom.zoom-active .image-zoom__inner { visibility: hidden; opacity: 0; } .image-zoom .image-zoom__inner { transition-property: opacity, visibility; transition-duration: .1s; transition-timing-function: ease-in; } /* // .modal-open - body class for killing the scroll // .modal - container to scroll within // .modal-dialog - positioning shell for the actual modal // .modal-content - actual modal w/ bg and corners and stuff */ /* Container that the modal scrolls within */ .modal { position: fixed; top: 0; left: 0; z-index: 1010; display: none; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; /* Prevent Chrome on Windows from adding a focus outline. For details, see // https://github.com/twbs/bootstrap/pull/10951. */ outline: 0; /* We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342 // See also https://github.com/twbs/bootstrap/issues/17695 */ } /* Shell div to position the modal with bottom padding */ .modal-dialog { position: relative; width: auto; pointer-events: none; min-height: calc(100% - var(--modal-dialog-margin) * 2); height: 100%; display: flex; align-items: center; } @media (min-width: 576px) { .modal-dialog.quick-view { max-width: 540px } } @media (min-width: 768px) { .modal-dialog.quick-view { max-width: 720px } } @media (min-width: 992px) { .modal-dialog.quick-view { max-width: 960px } } @media (min-width: 1200px) { .modal-dialog.quick-view { max-width: 1152px } } @media (min-width: 1440px) { .modal-dialog.quick-view { max-width: 1152px } } @media (min-width: 576px) { .modal-dialog { height: calc(100% - var(--modal-dialog-margin) * 2); margin: var(--modal-dialog-margin) } } /* When fading in the modal, animate it to slide down */ .modal.fade .modal-dialog { transform: translate(0, -50px); transition: transform 0.3s ease-out; } .modal.show .modal-dialog { transform: none; } /* When trying to close, animate focus to scale */ .modal.modal-static .modal-dialog { transform: scale(1.02); } .modal-dialog .modal-body { overflow-y: auto; } /* Actual modal */ @media (min-width: 576px){ .modal-content{ border-radius: var(--tiles-radius); } } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; /* Ensure `.modal-content` extends the full width of the parent `.modal-dialog`*/ /* counteract the pointer-events: none; in the .modal-dialog */ pointer-events: auto; background-color: #ffffff; background-clip: padding-box; outline: 0; max-height: 100%; overflow: hidden; margin: 0 auto; } @media (max-width: 767px) { .modal-content { height: 100% } } /* Modal background */ .modal-backdrop{ background-color: var(--color-dark-30); position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); z-index: 1000; } /* Fade for backdrop */ .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show { opacity: 1; } /* Modal body // Where all modal content resides (sibling of .modal-header and .modal-footer) */ .modal-body { position: relative; /* Enable `flex-grow: 1` so that the body take up as much space as possible // when there should be a fixed height on `.modal-dialog`. */ flex: 1 1 auto; padding: 1rem 1.5rem; } /* Scale up the modal */ @media (min-width: 576px) { /* Automatically set modal's width for larger viewports */ .modal-dialog { max-width: 45rem; margin: var(--modal-dialog-margin-y-sm-up) auto; min-height: calc(100% - var(--modal-dialog-margin-y-sm-up) * 2); height: calc(100% - var(--modal-dialog-margin-y-sm-up) * 2); } } .nav-tabs { display: flex; margin-bottom: 1rem; font-weight: bold; border-bottom-width: 1px; border-color: var(--color-light-material); overflow-y: auto; } .nav-tabs .tab-link{ padding-left: 2rem; padding-right: 2rem; padding-top: 0.5rem; padding-bottom: 0.875rem; font-weight: bold; border-bottom: 3px solid transparent; transition-property: color, border; transition-duration: .15s; transition-timing-function: ease-in; white-space: nowrap; } @media (max-width: 767px) { .nav-tabs .tab-link{ padding-left: 1.5rem; padding-right: 1.5rem; font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } } .nav-tabs .tab-link:hover{ border-color: var(--color-light-material); } .nav-tabs .tab-link.active{ border-color: var(--color-brand); color: var(--color-brand); } @media (max-width: 767px) { .product-tabs .tab-link{ padding-left: 1.5rem; padding-right: 1.5rem; font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } } .product-tabs .tab-link-dark{ color: var(--color-dark-60); } .product-tabs .tab-link-dark:hover, .product-tabs .tab-link-dark.active{ color: var(--color-dark); } .product-tabs .tab-link-light{ color: var(--color-light-50); } a:hover .product-tabs .tab-link-light:hover, a:hover .product-tabs .tab-link-light.active{ color: var(--color-brand); } a:hover .bg-brand .product-tabs .tab-link-light:hover, a:hover .bg-brand .product-tabs .tab-link-light.active{ color: var(--color-brand-text); } a.promo-tile:hover .product-tabs .tab-link-light:hover, a.promo-tile:hover .product-tabs .tab-link-light.active { color: var(--color-light); } .product-tabs .tab-link-light:hover, .product-tabs .tab-link-light.active{ color: var(--color-light); } .hover-underline-animation.product-tabs .tab-link-light:hover, .hover-underline-animation .product-tabs .tab-link-light.active { color: var(--color-light); } a:hover .blog-nav-tabs .tab-link.active{ color: var(--color-brand); color: var(--color-brand-text); } a:hover .blog-nav-tabs .tab-link.active .text-light{ color: var(--color-brand-text); } a:hover .bg-brand .blog-nav-tabs .tab-link.active{ color: var(--color-brand-text); } a.promo-tile:hover .blog-nav-tabs .tab-link.active { color: var(--color-light); } .blog-nav-tabs .tab-link.active{ border-color: var(--color-brand); background-color: var(--color-brand); color: var(--color-light); } .hover-underline-animation.blog-nav-tabs .tab-link.active { color: var(--color-light); } .product-card { position: relative; display: flex; flex-direction: column; height: 100%; } .product-card:hover > .product-card-hover { transition: opacity 0.1s ease-in, z-index 0s linear 0s; opacity: 1; z-index: 2; } .product-card:hover > .product-card-main { transition: z-index 0s linear 0s; z-index: 3; } .product-card-main { z-index: 1; position: relative; display: flex; height: 100%; flex-direction: column; transition: z-index 0s linear 0.1s; } .product-card-main > .group:focus a, .product-card-main > .group:focus-within a{ outline-style: solid; outline-width: 4px; outline-color: var(--color-brand-alpha-250); } .product-card-main > .group:focus .card-image-content button, .product-card-main > .group:focus-within .card-image-content button{ opacity: 1; } .h1{ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (min-width: 768px){ .h1{ font-size: calc(var(--font-heading-scale) * 4rem); line-height: calc(var(--font-heading-line) * 1.2); } } @media (min-width: 992px){ .h1{ font-size: calc(var(--font-heading-scale) * 4.5rem); line-height: calc(var(--font-heading-line) * 1.2); } } .h2{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (min-width: 768px){ .h2{ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } @media (min-width: 992px){ .h2{ font-size: calc(var(--font-heading-scale) * 4rem); line-height: calc(var(--font-heading-line) * 1.2); } } .h3{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (min-width: 992px){ .h3{ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } .h4{ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (min-width: 992px){ .h4{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } .h5{ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } @media (min-width: 992px){ .h5{ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } } .h1, .h2, .h3, .h4, .h5{ overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; font-family: var(--font-heading-family); -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .h1 a, .h2 a, .h3 a, .h4 a, .h5 a{ overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text, [role="main"] .shopify-policy__container{ overflow-wrap: break-word; text-align: left; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text h1:not(.h2, .h3, .h4, .h5), [role="main"] .shopify-policy__container h1:not(.h2, .h3, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 4.5rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (max-width: 767px){ .rich-text h1:not(.h2, .h3, .h4, .h5), [role="main"] .shopify-policy__container h1:not(.h2, .h3, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 4rem); line-height: calc(var(--font-heading-line) * 1.2); } } .rich-text h2:not(.h1, .h3, .h4, .h5), [role="main"] .shopify-policy__container h2:not(.h1, .h3, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 4rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (max-width: 767px){ .rich-text h2:not(.h1, .h3, .h4, .h5), [role="main"] .shopify-policy__container h2:not(.h1, .h3, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } .rich-text h3:not(.h1, .h2, .h4, .h5), [role="main"] .shopify-policy__container h3:not(.h1, .h2, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (max-width: 767px){ .rich-text h3:not(.h1, .h2, .h4, .h5), [role="main"] .shopify-policy__container h3:not(.h1, .h2, .h4, .h5){ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } .rich-text h4:not(.h1, .h2, .h3, .h5), [role="main"] .shopify-policy__container h4:not(.h1, .h2, .h3, .h5){ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (max-width: 767px){ .rich-text h4:not(.h1, .h2, .h3, .h5), [role="main"] .shopify-policy__container h4:not(.h1, .h2, .h3, .h5){ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } } .rich-text h5:not(.h1, .h2, .h3, .h4), [role="main"] .shopify-policy__container h5:not(.h1, .h2, .h3, .h4){ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (max-width: 767px){ .rich-text h5:not(.h1, .h2, .h3, .h4), [role="main"] .shopify-policy__container h5:not(.h1, .h2, .h3, .h4){ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } } .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, [role="main"] .shopify-policy__container h1, [role="main"] .shopify-policy__container h2, [role="main"] .shopify-policy__container h3, [role="main"] .shopify-policy__container h4, [role="main"] .shopify-policy__container h5{ margin-bottom: 1.5rem; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; font-weight: 700; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text h1 a, .rich-text h2 a, .rich-text h3 a, .rich-text h4 a, .rich-text h5 a, [role="main"] .shopify-policy__container h1 a, [role="main"] .shopify-policy__container h2 a, [role="main"] .shopify-policy__container h3 a, [role="main"] .shopify-policy__container h4 a, [role="main"] .shopify-policy__container h5 a{ overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text:not(.h1, .h2, .h3, .h4, .h5, .text-p-small, .text-caption, .text-p-large, .lg\:text-p-large, .max-sm\:text-p-small), [role="main"] .shopify-policy__container:not(.h1, .h2, .h3, .h4, .h5, .text-p-small, .text-caption, .text-p-large, .lg\:text-p-large, .max-sm\:text-p-small){ font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); } .rich-text:not(.text-p-small, .text-caption) p:not(.h1, .h2, .h3, .h4, .h5), [role="main"] .shopify-policy__container:not(.text-p-small, .text-caption) p:not(.h1, .h2, .h3, .h4, .h5){ font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); } .rich-text p, [role="main"] .shopify-policy__container p{ overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text p:not(:last-of-type), [role="main"] .shopify-policy__container p:not(:last-of-type){ margin-bottom: 1.5rem; } .rich-text:not(.text-dark-60, .text-light, .text-dark-subdued, .text-light-subdued) p, [role="main"] .shopify-policy__container:not(.text-dark-60, .text-light, .text-dark-subdued, .text-light-subdued) p { color: var(--color-dark); } .rich-text.rich-text-small > *, [role="main"] .shopify-policy__container.rich-text-small > *{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } .rich-text a:not(.btn), [role="main"] .shopify-policy__container a:not(.btn){ color: var(--color-brand); text-decoration-line: underline; } .rich-text li, [role="main"] .shopify-policy__container li{ margin-bottom: 0.75rem; text-overflow: ellipsis; overflow-wrap: break-word; padding-left: 0.375rem; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text ul, .rich-text ol, [role="main"] .shopify-policy__container ul, [role="main"] .shopify-policy__container ol{ margin-bottom: 3.5rem; padding-left: 1.5rem; } .rich-text ul, [role="main"] .shopify-policy__container ul{ list-style-type: disc; } .rich-text ol, [role="main"] .shopify-policy__container ol{ list-style-type: decimal; } .rich-text ol li::marker, [role="main"] .shopify-policy__container ol li::marker{ font-weight: 700; color: var(--color-dark); } .rich-text b, .rich-text strong, [role="main"] .shopify-policy__container b, [role="main"] .shopify-policy__container strong{ font-weight: 700; } .rich-text img, [role="main"] .shopify-policy__container img{ margin-bottom: 3.5rem; } .rich-text figure, [role="main"] .shopify-policy__container figure{ margin-bottom: 3.5rem; } .rich-text figure img, [role="main"] .shopify-policy__container figure img { margin-bottom: 0; } .rich-text figure figcaption, [role="main"] .shopify-policy__container figure figcaption{ margin-top: 1rem; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; color: var(--color-dark-60); -webkit-hyphens: auto; hyphens: auto; white-space: normal; } @media (max-width: 767px){ .rich-text figure figcaption, [role="main"] .shopify-policy__container figure figcaption{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } } .rich-text blockquote, [role="main"] .shopify-policy__container blockquote{ margin-bottom: 3.5rem; padding-left: 2rem; } @media (max-width: 767px){ .rich-text blockquote, [role="main"] .shopify-policy__container blockquote{ padding-left: 0.75rem; } } .rich-text blockquote, [role="main"] .shopify-policy__container blockquote{ overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; border-left-width: 4px; border-color: var(--color-light-material); } .rich-text blockquote p, [role="main"] .shopify-policy__container blockquote p{ margin-bottom: 0px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); line-height: 1.375; color: var(--color-dark); } .rich-text blockquote small, [role="main"] .shopify-policy__container blockquote small{ display: block; margin-top: 1.5rem; font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); color: var(--color-dark-60); overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } .rich-text iframe, [role="main"] .shopify-policy__container iframe { max-width: 100%; } .rich-text table, [role="main"] .shopify-policy__container table { max-width: 100%; margin-bottom: 3.5rem; overflow-x: auto; white-space: nowrap; border-spacing: 0pt; border-collapse: separate; } .rich-text table thead, [role="main"] .shopify-policy__container table thead{ background-color: var(--color-light-surface); font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); border-bottom-width: 1px; border-color: var(--color-light-material); } .rich-text table thead th, [role="main"] .shopify-policy__container table thead th{ border-top-width: 1px; border-bottom-width: 1px; border-color: var(--color-light-material); } .rich-text table thead th:first-child, [role="main"] .shopify-policy__container table thead th:first-child{ border-top-left-radius: var(--tiles-radius); border-left-width: 1px; } .rich-text table thead th:last-child, [role="main"] .shopify-policy__container table thead th:last-child{ border-top-right-radius: var(--tiles-radius); border-right-width: 1px; } .rich-text table th, .rich-text table td, [role="main"] .shopify-policy__container table th, [role="main"] .shopify-policy__container table td{ padding: 1rem; } .rich-text table thead + tbody tr:first-child td, [role="main"] .shopify-policy__container table thead + tbody tr:first-child td{ border-top-width: 0px; } .rich-text table tbody tr:first-child td, [role="main"] .shopify-policy__container table tbody tr:first-child td{ border-top-width: 1px; border-color: var(--color-light-material); } .rich-text table tbody tr:nth-child(even), [role="main"] .shopify-policy__container table tbody tr:nth-child(even){ background-color: var(--color-light-surface); } .rich-text table tbody tr td:first-child, [role="main"] .shopify-policy__container table tbody tr td:first-child{ border-left-width: 1px; border-color: var(--color-light-material); } .rich-text table tbody tr td:last-child, [role="main"] .shopify-policy__container table tbody tr td:last-child{ border-right-width: 1px; border-color: var(--color-light-material); } .rich-text table tbody tr:last-child td:first-child, [role="main"] .shopify-policy__container table tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--tiles-radius); border-bottom-width: 1px; border-color: var(--color-light-material); } .rich-text table tbody tr:last-child td, [role="main"] .shopify-policy__container table tbody tr:last-child td{ border-bottom-width: 1px; border-color: var(--color-light-material); } .rich-text table tbody tr:last-child td:last-child, [role="main"] .shopify-policy__container table tbody tr:last-child td:last-child{ border-bottom-right-radius: var(--tiles-radius); border-bottom-width: 1px; border-color: var(--color-light-material); } .rich-text table caption, [role="main"] .shopify-policy__container table caption{ margin-top: 1rem; text-align: left; color: var(--color-dark-60); } .rich-text.h3, [role="main"] .shopify-policy__container.h3{ font-family: var(--font-heading-family); font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } @media (min-width: 992px){ .rich-text.h3, [role="main"] .shopify-policy__container.h3{ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } .rich-text.rich-text-links p:not(:last-child), [role="main"] .shopify-policy__container.rich-text-links p:not(:last-child){ margin-bottom: 0.25rem; } @media (min-width: 992px){ .blog-content > *{ margin-left: auto; margin-right: auto; width: 66.666667%; } .blog-content > img{ margin-left: auto; margin-right: auto; width: 83.333333%; } } .row { display: flex; flex-wrap: wrap; margin-left: -1rem; margin-right: -1rem; } @media (max-width: 767px) { .row{ margin-left: -0.25rem; margin-right: -0.25rem; } } .row > *{ width: 100%; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 767px) { .row > *{ padding-left: 0.25rem; padding-right: 0.25rem; } } .shopify-payment-button__button + .shopify-payment-button__button--hidden { display: none; } html.no-js .no-js-hidden { display: none !important; } .deferred-media:not([loaded]) template { z-index: -1; } .deferred-media[loaded] > .deferred-media__poster { display: none; } /* Dynamic checkout */ .shopify-payment-button__button{ display: inline-flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 2.8125rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; background-color: var(--color-light); } .shopify-payment-button__button, .shopify-payment-button__button-small, .shopify-payment-button__button-large{ letter-spacing: var(--font-button-space); } .shopify-payment-button__button{ text-align: center; font-size: calc(var(--font-button-scale) * 0.875rem); color: var(--color-dark); font-weight: 500; line-height: 1.25; border-width: 1px; border-radius: var(--buttons-radius); transition: all 0.15s ease-in; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .shopify-payment-button__button .text{ min-width: 0px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } @media (min-width: 768px) { .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } .shopify-payment-button__button .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .shopify-payment-button__button .text { transition: all .15s linear; transform: translateX(12px); } .shopify-payment-button__button:hover .icon, .shopify-payment-button__button:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .shopify-payment-button__button:hover .text, .shopify-payment-button__button:active .text { transform: translateX(0); } } .shopify-payment-button__button:hover{ background-color: var(--color-brand-surface); } .shopify-payment-button__button:hover:active{ background-color: var(--color-brand-surface-active); } .shopify-payment-button__button:focus{ outline-style: solid; outline-width: 4px; outline-color: var(--color-brand-alpha-250); } .shopify-payment-button__button:disabled{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .shopify-payment-button__button:disabled, .shopify-payment-button__button:disabled span{ color: var(--color-dark-subdued); } .shopify-payment-button__button:disabled:hover{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .shopify-payment-button__button:disabled:hover, .shopify-payment-button__button:disabled:hover span{ color: var(--color-dark-subdued); cursor: not-allowed; } .cl-link.active .shopify-payment-button__button { opacity: 1; visibility: visible; } .shopify-payment-button__button{ padding-left: 0px; padding-right: 0px; } .shopify-payment-button__button .shopify-cleanslate { width: 100%; } .shopify-payment-button__button [role='button']:focus:not(:focus-visible) { outline: 0; box-shadow: none !important; } .shopify-payment-button__button--unbranded { font-size: 1.4rem; letter-spacing: 0.07rem; } a:hover .switcher .switcher-link.active{ color: var(--color-brand); color: var(--color-brand-text); } a:hover .switcher .switcher-link.active .text-light{ color: var(--color-brand-text); } a:hover .bg-brand .switcher .switcher-link.active{ color: var(--color-brand-text); } a.promo-tile:hover .switcher .switcher-link.active { color: var(--color-light); } .switcher .switcher-link.active{ background-color: var(--color-brand); color: var(--color-light); } .hover-underline-animation.switcher .switcher-link.active { color: var(--color-light); } .switcher-dark .switcher-link.active{ background-color: var(--color-light); color: var(--color-dark); } .tooltip { position: absolute; z-index: 10; display: block; font-family: var(--font-body-family); font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); word-wrap: break-word; opacity: 0; padding: .5rem 0; } .tooltip.show { opacity: 1; } .tooltip .tooltip-arrow { position: absolute; display: block; width: 1rem; height: .5rem; } .tooltip .tooltip-arrow:before { position: absolute; content: ""; border-color: transparent; border-style: solid; } .bs-tooltip-top .tooltip-arrow, &[data-popper-placement^="top"] .tooltip-arrow { bottom: 0; } .bs-tooltip-top .tooltip-arrow:before, &[data-popper-placement^="top"] .tooltip-arrow:before { top: -1px; border-width: .5rem .5rem 0 .5rem; border-top-color: var(--color-dark); } .bs-tooltip-bottom .tooltip-arrow, &[data-popper-placement^="bottom"] .tooltip-arrow { top: 0; } .bs-tooltip-bottom .tooltip-arrow:before, &[data-popper-placement^="bottom"] .tooltip-arrow:before { bottom: -1px; border-width: 0 .5rem .5rem .5rem; border-bottom-color: var(--color-dark); } .bs-tooltip-end, &[data-popper-placement^="right"] { padding: 0 .5rem; } .bs-tooltip-end .tooltip-arrow, &[data-popper-placement^="right"] .tooltip-arrow { left: 0; width: .5rem; height: .1rem; } .bs-tooltip-end .tooltip-arrow:before, &[data-popper-placement^="right"] .tooltip-arrow:before { right: -1px; border-width: .5rem .5rem .5rem 0; border-right-color: var(--color-dark); } .bs-tooltip-start, &[data-popper-placement^="left"] { padding: 0 .5rem; } .bs-tooltip-start .tooltip-arrow, &[data-popper-placement^="left"] .tooltip-arrow { right: 0; width: .5rem; height: .1rem; } .bs-tooltip-start .tooltip-arrow:before, &[data-popper-placement^="left"] .tooltip-arrow:before { left: -1px; border-width: .5rem 0 .5rem .5rem; border-left-color: var(--color-dark); } .tooltip-inner { max-width: 200px; text-align: center; padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; } a:hover .tooltip-inner{ color: var(--color-brand); } a:hover .bg-brand .tooltip-inner{ color: var(--color-brand-text); } a.promo-tile:hover .tooltip-inner { color: var(--color-light); } .tooltip-inner{ background-color: var(--color-dark); color: var(--color-light); } .hover-underline-animation.tooltip-inner { color: var(--color-light); } .tooltip-inner{ border-radius: 0.25rem; } input.color-input{ position: absolute; opacity: 0; z-index: -1; } input.color-input + label { display: block; } input.color-input + label:hover .color-image{ outline-color: var(--color-brand); } input.color-input + label .color-image { position: relative; display: block; height: 2rem; width: 2rem; margin: 0 auto; border-width: 2px; border-style: solid; border-radius: var(--buttons-radius); transition-property: border-color, outline-color; transition-duration: .1s; transition-timing-function: ease; outline: 2px solid transparent; } input.color-input + label .color-image svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 1.5rem; width: 1.5rem; display: none; } input.color-input + label .color-name{ margin-top: 0.25rem; text-align: center; font-size: calc(var(--font-body-scale) * 0.75rem); line-height: calc(var(--font-body-line) * 1.5); color: var(--color-dark-subdued); overflow: hidden; text-overflow: ellipsis; } input.color-input:focus + label .color-image{ outline-color: var(--color-brand); } input.color-input:checked + label .color-image{ border-color: var(--color-light) !important; outline-color: var(--color-brand); } input.color-input:checked + label .color-image svg { display: block; } input.color-input:disabled + label { opacity: .5; cursor: not-allowed; } .input { position: relative; width: 100%; height: 3rem; padding-right: 2rem; padding-left: 1rem; line-height: 3rem; border-width: var(--inputs-border-width); border-radius: var(--inputs-radius); border-color: var(--color-light-material); transition: color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in, z-index 0s ease-in 0.1s; outline: none; } .input ~ svg{ position: absolute; top: 1rem; right: 1rem; } .input ~ .error{ color: var(--color-negative); } .input:hover{ border-width: 1px; border-color: var(--color-brand); } .input:focus{ border-width: 1px; border-color: var(--color-brand-alpha-250); box-shadow: 0 0 0 4px var(--color-brand-alpha-250); transition: color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in, z-index 0s ease-in; z-index: 1; } .input:disabled{ background-color: var(--color-dark-10); color: var(--color-dark-60); border: none; } .input::-moz-placeholder{ padding-left: 0.25rem; padding-right: 0.25rem; color: var(--color-dark-60); font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); letter-spacing: var(--font-body-space); } .input::placeholder{ padding-left: 0.25rem; padding-right: 0.25rem; color: var(--color-dark-60); font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); letter-spacing: var(--font-body-space); } .input.field_valid{ border-color: var(--color-positive); box-shadow: 0 0 0 4px var(--color-positive-25); } .input.field_valid ~ .success { display: block; } .input.field_error { box-shadow: 0 0 0 4px var(--color-negative-25); border-color: var(--color-negative); } .input.field_error ~ .error { display: block; } .input:not(:-moz-placeholder-shown) ~ label { top: 0; transform: translateY(-50%); opacity: 1; visibility: visible; } .input:not(:placeholder-shown) ~ label { top: 0; transform: translateY(-50%); opacity: 1; visibility: visible; } .input ~ label{ position: absolute; left: 0.75rem; top: 1.5rem; padding-left: 0.25rem; padding-right: 0.25rem; background-color: var(--color-light); font-size: calc(var(--font-body-scale) * 0.75rem); line-height: calc(var(--font-body-line) * 1.5); color: var(--color-dark-60); transition-property: top, opacity; transition-duration: .2s; transition-timing-function: ease-in; opacity: 0; visibility: hidden; z-index: 1; } textarea.input{ border-radius: var(--tiles-radius); } input[type="search"], input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } textarea, input, input[type="text"], input[type="button"], input[type="submit"] { -webkit-appearance: none; } input[type="checkbox"] { -webkit-appearance: checkbox; } input[type="checkbox"].checkbox, input[name="address[default]"]{ position: absolute; top: 0.375rem; left: 0.25rem; opacity: 0; z-index: -1; } input[type="checkbox"].checkbox ~ label, input[name="address[default]"] ~ label { position: relative; padding-left: 1.75rem; } input[type="checkbox"].checkbox ~ label::before, input[type="checkbox"].checkbox ~ label::after, input[name="address[default]"] ~ label::before, input[name="address[default]"] ~ label::after{ position: absolute; display: block; content: ''; } input[type="checkbox"].checkbox ~ label::before, input[name="address[default]"] ~ label::before{ left: 0px; border-radius: 0.125rem; border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; width: 20px; height: 20px; top: 2px; } input[type="checkbox"].checkbox ~ label::after, input[name="address[default]"] ~ label::after{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.97 7.47a.75.75 0 0 1 1.133.976l-.073.084-7.999 8a.75.75 0 0 1-.976.073l-.084-.073-4.001-4a.75.75 0 0 1 .976-1.133l.084.073 3.47 3.469 7.47-7.47z' fill='%23540804' fill-rule='nonzero'/%3E%3C/svg%3E%0A"); width: 18px; height: 18px; top: 3px; left: 1px; opacity: 0; } input[type="checkbox"].checkbox:not(:disabled):hover + label::before, input[name="address[default]"]:not(:disabled):hover + label::before{ border-color: var(--color-brand); } input[type="checkbox"].checkbox:not(:disabled):hover + label::after, input[name="address[default]"]:not(:disabled):hover + label::after { opacity: 0.2; } input[type="checkbox"].checkbox:not(:disabled):focus + label::before, input[name="address[default]"]:not(:disabled):focus + label::before { outline: 4px solid; outline-color: var(--color-brand-alpha-250); } input[type="checkbox"].checkbox:disabled + label, input[name="address[default]"]:disabled + label { cursor: not-allowed; color: var(--color-dark-60); } input[type="checkbox"].checkbox:disabled + label::before, input[name="address[default]"]:disabled + label::before{ background-color: var(--color-light-material); } a:hover input[type="checkbox"].checkbox:checked + label::before, a:hover input[name="address[default]"]:checked + label::before{ color: var(--color-brand-text); } a:hover input[type="checkbox"].checkbox:checked + label::before .text-light, a:hover input[name="address[default]"]:checked + label::before .text-light{ color: var(--color-brand-text); } input[type="checkbox"].checkbox:checked + label::before, input[name="address[default]"]:checked + label::before{ background-color: var(--color-brand); } input[type="checkbox"].checkbox:checked + label::after, input[name="address[default]"]:checked + label::after { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.97 7.47a.75.75 0 0 1 1.133.976l-.073.084-7.999 8a.75.75 0 0 1-.976.073l-.084-.073-4.001-4a.75.75 0 0 1 .976-1.133l.084.073 3.47 3.469 7.47-7.47z' fill='%23ffffff' fill-rule='nonzero'/%3E%3C/svg%3E%0A"); } a:hover input[type="checkbox"].checkbox:checked:not(:disabled) + label::before, a:hover input[name="address[default]"]:checked:not(:disabled) + label::before{ color: var(--color-brand-text); } a:hover input[type="checkbox"].checkbox:checked:not(:disabled) + label::before .text-light, a:hover input[name="address[default]"]:checked:not(:disabled) + label::before .text-light{ color: var(--color-brand-text); } input[type="checkbox"].checkbox:checked:not(:disabled) + label::before, input[name="address[default]"]:checked:not(:disabled) + label::before{ border-color: var(--color-brand); background-color: var(--color-brand); } input[type="checkbox"].checkbox:checked:not(:disabled):hover + label:before, input[name="address[default]"]:checked:not(:disabled):hover + label:before{ background-color: var(--color-light); } input[type="checkbox"].checkbox:checked:not(:disabled):hover + label::after, input[name="address[default]"]:checked:not(:disabled):hover + label::after { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.97 7.47a.75.75 0 0 1 1.133.976l-.073.084-7.999 8a.75.75 0 0 1-.976.073l-.084-.073-4.001-4a.75.75 0 0 1 .976-1.133l.084.073 3.47 3.469 7.47-7.47z' fill='%23540804' fill-rule='nonzero'/%3E%3C/svg%3E%0A"); } input[type="radio"].radio{ position: absolute; top: 0px; opacity: 0; z-index: -1; } input[type="radio"].radio + label { position: relative; padding-left: 1.75rem; } input[type="radio"].radio + label::before, input[type="radio"].radio + label::after{ position: absolute; display: block; border-radius: 999px; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; content: ''; } input[type="radio"].radio + label::before{ left: 0px; border-width: 1px; border-color: var(--color-light-material); width: 20px; height: 20px; top: 2px; } a:hover input[type="radio"].radio + label::after{ color: var(--color-brand-text); } a:hover input[type="radio"].radio + label::after .text-light{ color: var(--color-brand-text); } input[type="radio"].radio + label::after{ background-color: var(--color-brand); transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; opacity: 0; width: 14px; height: 14px; top: 5px; left: 3px; } input[type="radio"].radio:not(:disabled):hover + label::before{ border-color: var(--color-brand); } input[type="radio"].radio:not(:disabled):focus + label::before{ border-color: var(--color-brand); outline: 4px solid; outline-color: var(--color-brand-alpha-250); } input[type="radio"].radio:disabled + label { cursor: not-allowed; color: var(--color-dark-60); } input[type="radio"].radio:checked + label::after { opacity: 1; } select.input{ background-color: var(--color-light); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10.667a.662.662 0 0 1-.427-.155l-4-3.333a.666.666 0 1 1 .854-1.024l3.58 2.984 3.575-2.877a.667.667 0 0 1 .836 1.039l-4 3.218a.667.667 0 0 1-.418.148' fill-rule='evenodd'/%3E%3C/svg%3E%0A"); background-size: 1rem; background-position: 97% 50%; background-repeat: no-repeat; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } input[type="radio"]:focus + .variant-radio{ outline-style: solid; outline-width: 4px; outline-color: var(--color-brand-alpha-250); } a:hover input[type="radio"]:checked + .variant-radio{ color: var(--color-brand); } a:hover .bg-brand input[type="radio"]:checked + .variant-radio{ color: var(--color-brand-text); } a.promo-tile:hover input[type="radio"]:checked + .variant-radio { color: var(--color-light); } input[type="radio"]:checked + .variant-radio{ border-color: var(--color-dark) !important; background-color: var(--color-dark); color: var(--color-light); } .hover-underline-animationinput[type="radio"]:checked + .variant-radio { color: var(--color-light); } .js-product-form-input input[type='radio']:disabled + label, .js-product-form-input input[type='radio'].disabled + label{ cursor: not-allowed; background-color: var(--color-light-surface); color: var(--color-dark-material); text-decoration-line: line-through; } .js-product-form-input input[type='radio']:disabled + label:hover, .js-product-form-input input[type='radio'].disabled + label:hover{ border-color: var(--color-light-material); } .js-product-form-input input[type='radio']:disabled + label span, .js-product-form-input input[type='radio'].disabled + label span{ color: var(--color-dark-material); } .js-product-form-input input[type='radio']:checked:disabled, .js-product-form-input input[type='radio']:checked.disabled{ color: var(--color-dark-material); } .js-product-form-input input[type='radio'].custom-color-input:disabled + label.variant-radio::after, .js-product-form-input input[type='radio'].custom-color-input.disabled + label.variant-radio::after { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background-color: var(--color-light-50); } input.size-input { display: none; } input.size-input + label { display: block; padding: 0.5rem; text-align: center; font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); border-radius: var(--buttons-radius); border-width: 1px; border-color: var(--color-light-material); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } input.size-input + label:hover{ border-color: var(--color-dark); } @media (max-width: 767px) { input.size-input + label{ height: 2.75rem; display: flex; align-items: center; justify-content: center; } } input.size-input:disabled + label{ background-color: var(--color-dark-10); color: var(--color-dark-60); cursor: not-allowed; } input.size-input:checked + label{ color: var(--color-brand); border-color: var(--color-brand); } .toggle input { display: none; } a:hover .toggle input:checked ~ label .toggle-wrapper{ color: var(--color-brand-text); } a:hover .toggle input:checked ~ label .toggle-wrapper .text-light{ color: var(--color-brand-text); } .toggle input:checked ~ label .toggle-wrapper{ background-color: var(--color-brand); } .toggle input:checked ~ label .toggle-wrapper > svg { opacity: 1; visibility: visible; } .toggle input:checked ~ label .toggle-wrapper > span{ background-color: var(--color-light); right: 2px; } .toggle input:disabled ~ label { cursor: not-allowed; } .toggle input:disabled ~ label .toggle-wrapper{ background-color: var(--color-dark-10); } .toggle input:disabled ~ label .toggle-wrapper > span{ background-color: var(--color-light); } .toggle label { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 1rem; padding-bottom: 1rem; } .toggle label:active .toggle-wrapper { outline: 4px solid; outline-color: var(--color-brand-alpha-250); } .toggle label:hover .toggle-wrapper{ border-color: var(--color-brand-alpha-250); } .toggle label .toggle-wrapper { position: relative; display: block; width: 3.125rem; /*50px*/ height: 1.5rem; margin-left: 0.5rem; padding: 1px; background-color: var(--color-light); border-radius: 999px; border-width: 1px; border-color: var(--color-light-material); transition-property: background; transition-duration: .1s; transition-timing-function: ease-in; } .toggle label .toggle-wrapper > svg { position: absolute; top: 50%; left: 2px; transform: translateY(-50%); opacity: 0; visibility: hidden; transition-property: opacity; transition-duration: .1s; transition-timing-function: ease-in; } .toggle label .toggle-wrapper > span { display: block; position: absolute; top: 1px; right: 26px; height: 1.25rem; width: 1.25rem; background-color: var(--color-dark-10); border-radius: 999px; transition-property: right, background-color, border; transition-duration: .1s; transition-timing-function: ease-in; } .js-hideable-item.tab-pane:not(.active) { display: none; } .tab-pane:not(.active){ display: none; } .collapse-btn, .collapse-horizontal-btn{ display: flex; align-items: center; justify-content: space-between; } .collapse-btn svg, .collapse-horizontal-btn svg { transition: transform .2s; } .collapse-btn:not(.collapsed) svg, .collapse-horizontal-btn:not(.collapsed) svg{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .collapse-horizontal.collapsed { max-width: 0; opacity: 0; overflow: hidden; transition: max-width 0.2s ease-in-out, opacity 0.2s ease-in; } .bg-filter{ position: fixed; left: 0px; top: 0px; height: 100vh; width: 100vw; background-color: var(--color-dark-30); opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: .15s; transition-timing-function: ease-in-out; } .sidebar{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background-color: var(--color-light); visibility: hidden; opacity: 0; z-index: 31; overflow: hidden; } @media (min-width: 992px) { .sidebar{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-color: rgba(0,0,0, 0); } .sidebar > .desktop-sidebar-bg{ height: 100%; width: 100%; opacity: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .sidebar > form{ position: absolute; top: 0px; right: 0px; } } .sidebar > form{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .sidebar.active{ visibility: visible; --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 1; display: block; } .sidebar.active + .bg-filter { transition: opacity 0.15s ease-in-out, z-index 0s linear 0s; opacity: 1; visibility: visible; z-index: 30; } @media (min-width: 992px) { .sidebar.active > form{ width: 28.75rem; background-color: var(--color-light); padding-top: 2rem; padding-bottom: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; } .sidebar.active > .desktop-sidebar-bg{ opacity: 1; } } .sidebar.active > form{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .sidebar-right{ right: 0px; --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); left: auto; } .burger-menu { max-width: 390px; } .js-mobile-menu-scroll { height: 100vh; overflow-y: auto; overflow-x: hidden; } .js-mobile-menu-sub-level{ position: absolute; left: 100%; top: 0px; height: 100%; width: 100%; } .js-hideable-item.js-mobile-menu-sub-level { display: none; } .js-mobile-menu-sub-level{ display: none; } .js-mobile-menu-sub-level.active{ display: block; height: 100vh; } .gallery-modal .modal-dialog { max-width: 69.375rem; width: 90%; } @media (max-width: 767px) { .gallery-modal .modal-dialog { width: 100%; height: 100%; margin: 0; border-radius: 0 } } .gallery-modal .modal-dialog__quick-view { max-width: unset; } .gallery-modal .glide__arrow{ height: 3rem; width: 3rem; position: absolute; top: 50%; transform: translateY(-50%); } .gallery-modal .glide-image { border: 2px solid transparent; transition-property: border; transition-duration: .1s; transition-timing-function: ease-in; } .gallery-modal .glide-image.active{ border-color: var(--color-brand); } .gallery-modal--2 .modal-dialog { width: 100%; max-width: unset; } .gallery-modal--2 .modal-dialog .modal-content { border-radius: 0; } .gallery-modal--2 .modal-dialog .modal-content .glide-image { border-width: 1px; } .gallery-mobile-slider .glide__bullet { transition: background-color 0.1s; } .gallery-mobile-slider .glide__bullet--active{ background-color: var(--color-dark-material); } .search-modal { max-height: calc(100vh - 8.75rem); } .catalog-description.collapse:not(.show) { display: block; overflow: hidden; } .catalog-description.collapse:not(.show) > div { text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .catalog-description.collapse:not(.show), .catalog-description.collapsing { /* 2 rows with 1rem font size and 1.5 line height */ height: 3rem; } /*250px*/ .store-detail.collapsed { transform: translateX(-150%); opacity: 0; visibility: hidden; } .custom-scrollbar::-webkit-scrollbar { width: 10px; } @media (min-width: 992px) { .custom-scrollbar::-webkit-scrollbar-track{ background-color: var(--color-light-surface); border: 1px solid; border-color: var(--color-light-material); } } .custom-scrollbar::-webkit-scrollbar-thumb{ border-radius: 999px; background-color: var(--color-dark-30); border: 3px solid transparent; background-clip: padding-box; } .scrollbar-hide::-webkit-scrollbar { display: none; } /* For IE, Edge and Firefox */ .scrollbar-hide { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /*240px*/ .store-detail-slider .glide__bullet { transition: width .15s; } .store-detail-slider .glide__bullet--active{ width: 4rem; background-color: var(--color-dark); } .tab-link-location.active { display: none; } /* Login and recover password forms */ #recover, #recover + div { display: none; } #recover:target, #recover:target + div { display: block; } #recover:target ~ #login, #recover:target ~ #login + div { display: none; } #recover, #login { scroll-margin-top: 20rem; } /*Cart item*/ .cart__empty-text, .is-empty .cart__contents, cart-items.is-empty .title-wrapper-with-link, .is-empty.cart-hide-when-empty, .is-empty .cart-hide-when-empty { display: none; } .is-empty .cart__empty-text, .is-empty .cart__warnings { display: block; } .is-empty .cart-when-empty{ padding-bottom: 4rem; } /* Product gallery */ cart-drawer.active { transform: translateX(0); } .js-show-more-button svg { transition: rotate .2s; } .js-show-more-button.active svg { transform: rotate(180deg); } .show-more-box { overflow: hidden; height: 6rem; height: 4lh; } .show-more-fade{ bottom: 0px; width: 100%; background-image: linear-gradient(to top, var(--tw-gradient-stops)); --tw-gradient-from: var(--color-light); --tw-gradient-to: rgb(255 255 255 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); height: 1.5rem; height: 1lh; } .cl-link.active .cl-link-title { opacity: 1; } .cl-link.active .btn { opacity: 1; visibility: visible; } .cl-image.active { opacity: 1; visibility: visible; z-index: 2; } .menu-1 ~ .header-banner{ margin-top: -3.813rem; } @media (min-width: 768px){ .menu-1 ~ .header-banner{ margin-top: -10.063rem; } } .menu-2 ~ .header-banner{ margin-top: -3.813rem; } @media (min-width: 768px){ .menu-2 ~ .header-banner{ margin-top: -6.063rem; } } .product-description a{ color: var(--color-brand); text-decoration-line: underline; } .product-description{ transition: height 0.5s ease-in-out; } .complementary-product .card-image-content{ padding: 0.5rem; } .complementary-product .product-color-variants { display: none; } .gift-card-qr-code img { width: 120px; height: 120px; margin: 0 auto; } .product-stock-state.out-of-stock .product-available { display: none; } .product-stock-state.on-stock .product-out-of-stock { display: none; } .deferred-media:not([loaded]) template { z-index: -1; } .deferred-media[loaded] .deferred-media-poster { display: none; } .deferred-media > *:not(.zoom):not(.deferred-media-poster), .deferred-media .shopify-model-viewer-ui, .deferred-media model-viewer { display: block; width: 100%; max-width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .js-hideable-item.hidden { display: none; } .featured-product li:not(:first-child) { display: none; } .js-modal-content .container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } [role="main"] .shopify-policy__container{ padding-top: 2.5rem; padding-bottom: 2.5rem; } @media (min-width: 768px){ [role="main"] .shopify-policy__container{ padding-top: 4.5rem; padding-bottom: 4.5rem; } } @media (min-width: 992px){ [role="main"] .shopify-policy__container > div{ margin-left: auto; margin-right: auto; width: 66.666667%; } } [role="main"] .shopify-policy__container > div .rte br{ margin-top: 0.75rem; display: block; content: ""; line-height: 190%; vertical-align: top; } .js-sorting select { background: linear-gradient(to right, white calc(84%), transparent 16px); } .js-sorting::before { content: ""; position: absolute; top: 50%; right: 0.5rem; display: block; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); height: 1rem; width: 1rem; background: url('data:image/svg+xml,'); } a.promo-tile:hover{ color: var(--color-dark); } a.promo-tile:hover .text-light { color: var(--color-light); } .pointer-events-none{ pointer-events: none; } .invisible{ visibility: hidden; } .static{ position: static; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: sticky; } .inset-0{ top: 0px; right: 0px; bottom: 0px; left: 0px; } .top-0{ top: 0px; } .left-0{ left: 0px; } .right-0{ right: 0px; } .left-auto{ left: auto; } .bottom-1\/2{ bottom: 50%; } .top-1\/2{ top: 50%; } .bottom-0{ bottom: 0px; } .-left-6{ left: -0.375rem; } .-right-6{ right: -0.375rem; } .top-24{ top: 1.5rem; } .right-24{ right: 1.5rem; } .top-10{ top: 0.625rem; } .right-10{ right: 0.625rem; } .-left-32{ left: -2rem; } .-right-32{ right: -2rem; } .left-24{ left: 1.5rem; } .-left-16{ left: -1rem; } .-right-16{ right: -1rem; } .left-1\/2{ left: 50%; } .-top-8{ top: -0.5rem; } .-bottom-8{ bottom: -0.5rem; } .top-2\/4{ top: 50%; } .right-16{ right: 1rem; } .top-16{ top: 1rem; } .top-full{ top: 100%; } .right-20{ right: 1.25rem; } .top-auto{ top: auto; } .bottom-full{ bottom: 100%; } .top-2{ top: 0.125rem; } .right-2{ right: 0.125rem; } .bottom-16{ bottom: 1rem; } .left-16{ left: 1rem; } .top-8{ top: 0.5rem; } .right-8{ right: 0.5rem; } .isolate{ isolation: isolate; } .z-1000{ z-index: 1000; } .z-100{ z-index: 100; } .z-10{ z-index: 10; } .z-1{ z-index: 1; } .z-2000{ z-index: 2000; } .z-20{ z-index: 20; } .order-1{ order: 1; } .col-span-2{ grid-column: span 2 / span 2; } .-m-4{ margin: -0.25rem; } .-m-2{ margin: -0.125rem; } .m-2{ margin: 0.125rem; } .-m-10{ margin: -0.625rem; } .m-0{ margin: 0px; } .-m-8{ margin: -0.5rem; } .m-4{ margin: 0.25rem; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-40{ margin-top: 2.5rem; margin-bottom: 2.5rem; } .my-12{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .my-96{ margin-top: 6rem; margin-bottom: 6rem; } .-mx-8{ margin-left: -0.5rem; margin-right: -0.5rem; } .-my-8{ margin-top: -0.5rem; margin-bottom: -0.5rem; } .-mx-4{ margin-left: -0.25rem; margin-right: -0.25rem; } .-my-2{ margin-top: -0.125rem; margin-bottom: -0.125rem; } .mx-4{ margin-left: 0.25rem; margin-right: 0.25rem; } .my-8{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .mx-8{ margin-left: 0.5rem; margin-right: 0.5rem; } .my-20{ margin-top: 1.25rem; margin-bottom: 1.25rem; } .my-24{ margin-top: 1.5rem; margin-bottom: 1.5rem; } .-mx-16{ margin-left: -1rem; margin-right: -1rem; } .my-48{ margin-top: 3rem; margin-bottom: 3rem; } .my-16{ margin-top: 1rem; margin-bottom: 1rem; } .my-64{ margin-top: 4rem; margin-bottom: 4rem; } .mb-48{ margin-bottom: 3rem; } .mb-0{ margin-bottom: 0px; } .mb-8{ margin-bottom: 0.5rem; } .mt-4{ margin-top: 0.25rem; } .mr-18{ margin-right: 1.125rem; } .ml-12{ margin-left: 0.75rem; } .mb-40{ margin-bottom: 2.5rem; } .ml-16{ margin-left: 1rem; } .mb-32{ margin-bottom: 2rem; } .ml-8{ margin-left: 0.5rem; } .mb-4{ margin-bottom: 0.25rem; } .mt-8{ margin-top: 0.5rem; } .mt-16{ margin-top: 1rem; } .mt-24{ margin-top: 1.5rem; } .mr-16{ margin-right: 1rem; } .mr-4{ margin-right: 0.25rem; } .mt-20{ margin-top: 1.25rem; } .mb-12{ margin-bottom: 0.75rem; } .mb-16{ margin-bottom: 1rem; } .mr-8{ margin-right: 0.5rem; } .mt-0{ margin-top: 0px; } .mb-24{ margin-bottom: 1.5rem; } .ml-auto{ margin-left: auto; } .ml-4{ margin-left: 0.25rem; } .-mr-4{ margin-right: -0.25rem; } .mt-40{ margin-top: 2.5rem; } .mt-32{ margin-top: 2rem; } .mt-72{ margin-top: 4.5rem; } .mt-64{ margin-top: 4rem; } .mb-64{ margin-bottom: 4rem; } .mt-12{ margin-top: 0.75rem; } .mt-48{ margin-top: 3rem; } .mr-auto{ margin-right: auto; } .mb-56{ margin-bottom: 3.5rem; } .-mt-1{ margin-top: -1px; } .mt-56{ margin-top: 3.5rem; } .mb-96{ margin-bottom: 6rem; } .-mr-8{ margin-right: -0.5rem; } .mr-2{ margin-right: 0.125rem; } .mt-auto{ margin-top: auto; } .mr-12{ margin-right: 0.75rem; } .mr-6{ margin-right: 0.375rem; } .-mt-10{ margin-top: -0.625rem; } .mb-20{ margin-bottom: 1.25rem; } .mr-32{ margin-right: 2rem; } .-mb-10{ margin-bottom: -0.625rem; } .mb-14{ margin-bottom: 0.875rem; } .mb-80{ margin-bottom: 5rem; } .mb-120{ margin-bottom: 7.5rem; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .grid{ display: grid; } .contents{ display: contents; } .hidden{ display: none; } .aspect-square{ aspect-ratio: 1; } .h-2{ height: 0.125rem; } .h-4{ height: 0.25rem; } .h-20{ height: 1.25rem; } .h-22{ height: 1.375rem; } .h-24{ height: 1.5rem; } .h-28{ height: 1.75rem; } .h-32{ height: 2rem; } .h-36{ height: 2.25rem; } .h-40{ height: 2.5rem; } .h-44{ height: 2.75rem; } .h-48{ height: 3rem; } .h-50{ height: 3.125rem; } .h-56{ height: 3.5rem; } .h-200{ height: 12.5rem; } .h-240{ height: 15rem; } .h-250{ height: 15.625rem; } .h-300{ height: 18.75rem; } .h-320{ height: 20rem; } .h-350{ height: 21.875rem; } .h-400{ height: 25rem; } .h-416{ height: 26rem; } .h-450{ height: 28.125rem; } .h-459{ height: 28.688rem; } .h-460{ height: 28.75rem; } .h-485{ height: 30.313rem; } .h-500{ height: 31.25rem; } .h-540{ height: 33.75rem; } .h-544{ height: 34rem; } .h-600{ height: 37.5rem; } .h-700{ height: 43.75rem; } .h-auto{ height: auto; } .h-2\/3{ height: 66.666667%; } .h-2\/4{ height: 50%; } .h-3\/4{ height: 75%; } .h-2\/5{ height: 40%; } .h-3\/5{ height: 60%; } .h-4\/5{ height: 80%; } .h-2\/6{ height: 33.333333%; } .h-3\/6{ height: 50%; } .h-4\/6{ height: 66.666667%; } .h-5\/6{ height: 83.333333%; } .h-full{ height: 100%; } .h-16{ height: 1rem; } .h-72{ height: 4.5rem; } .h-120{ height: 7.5rem; } .h-64{ height: 4rem; } .h-80{ height: 5rem; } .h-10{ height: 0.625rem; } .h-8{ height: 0.5rem; } .h-12{ height: 0.75rem; } .h-14{ height: 0.875rem; } .h-1\/2{ height: 50%; } .h-6{ height: 0.375rem; } .h-screen{ height: 100vh; } .h-70{ height: 4.375rem; } .max-h-2{ max-height: 0.125rem; } .max-h-4{ max-height: 0.25rem; } .max-h-20{ max-height: 1.25rem; } .max-h-22{ max-height: 1.375rem; } .max-h-24{ max-height: 1.5rem; } .max-h-28{ max-height: 1.75rem; } .max-h-32{ max-height: 2rem; } .max-h-36{ max-height: 2.25rem; } .max-h-40{ max-height: 2.5rem; } .max-h-44{ max-height: 2.75rem; } .max-h-48{ max-height: 3rem; } .max-h-50{ max-height: 3.125rem; } .max-h-56{ max-height: 3.5rem; } .max-h-200{ max-height: 12.5rem; } .max-h-240{ max-height: 15rem; } .max-h-250{ max-height: 15.625rem; } .max-h-300{ max-height: 18.75rem; } .max-h-320{ max-height: 20rem; } .max-h-350{ max-height: 21.875rem; } .max-h-400{ max-height: 25rem; } .max-h-416{ max-height: 26rem; } .max-h-450{ max-height: 28.125rem; } .max-h-459{ max-height: 28.688rem; } .max-h-460{ max-height: 28.75rem; } .max-h-485{ max-height: 30.313rem; } .max-h-500{ max-height: 31.25rem; } .max-h-540{ max-height: 33.75rem; } .max-h-544{ max-height: 34rem; } .max-h-600{ max-height: 37.5rem; } .max-h-700{ max-height: 43.75rem; } .max-h-screen{ max-height: 100vh; } .min-h-48{ min-height: 3rem; } .min-h-250{ min-height: 15.625rem; } .min-h-300{ min-height: 18.75rem; } .min-h-400{ min-height: 25rem; } .min-h-416{ min-height: 26rem; } .min-h-580{ min-height: 36.25rem; } .min-h-0{ min-height: 0px; } .w-1\/3{ width: 33.333334%; } .w-1\/4{ width: 25%; } .w-1\/5{ width: 20%; } .w-1\/6{ width: 16.666667%; } .w-full{ width: 100%; } .w-16{ width: 1rem; } .w-24{ width: 1.5rem; } .w-32{ width: 2rem; } .w-72{ width: 4.5rem; } .w-250{ width: 15.625rem; } .w-12{ width: 0.75rem; } .w-20{ width: 1.25rem; } .w-120{ width: 7.5rem; } .w-1\/2{ width: 50%; } .w-80{ width: 5rem; } .w-44{ width: 2.75rem; } .w-70{ width: 4.375rem; } .w-3\/12{ width: 25%; } .w-28{ width: 1.75rem; } .w-10{ width: 0.625rem; } .w-2\/3{ width: 66.666667%; } .w-48{ width: 3rem; } .w-8{ width: 0.5rem; } .w-56{ width: 3.5rem; } .w-14{ width: 0.875rem; } .w-max{ width: -moz-max-content; width: max-content; } .w-40{ width: 2.5rem; } .w-auto{ width: auto; } .min-w-0{ min-width: 0px; } .min-w-300{ min-width: 18.75rem; } .max-w-full{ max-width: 100%; } .max-w-460{ max-width: 28.75rem; } .max-w-350{ max-width: 21.875rem; } .max-w-400{ max-width: 25rem; } .max-w-880{ max-width: 55rem; } .max-w-200{ max-width: 12.5rem; } .max-w-150{ max-width: 9.375rem; } .max-w-110{ max-width: 6.875rem; } .max-w-480{ max-width: 30rem; } .flex-shrink-0{ flex-shrink: 0; } .shrink-0{ flex-shrink: 0; } .shrink{ flex-shrink: 1; } .grow{ flex-grow: 1; } .-translate-y-1\/2{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-full{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-2\/4{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-rotate-90{ --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } .animate-rotate{ animation: rotate 1s linear infinite; } .cursor-auto{ cursor: auto; } .cursor-pointer{ cursor: pointer; } .appearance-none{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } .grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .flex-nowrap{ flex-wrap: nowrap; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .items-baseline{ align-items: baseline; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .gap-16{ gap: 1rem; } .gap-8{ gap: 0.5rem; } .gap-32{ gap: 2rem; } .gap-48{ gap: 3rem; } .gap-6{ gap: 0.375rem; } .gap-4{ gap: 0.25rem; } .gap-2{ gap: 0.125rem; } .gap-12{ gap: 0.75rem; } .gap-10{ gap: 0.625rem; } .gap-x-16{ -moz-column-gap: 1rem; column-gap: 1rem; } .gap-y-24{ row-gap: 1.5rem; } .gap-x-32{ -moz-column-gap: 2rem; column-gap: 2rem; } .gap-y-16{ row-gap: 1rem; } .gap-y-8{ row-gap: 0.5rem; } .gap-y-32{ row-gap: 2rem; } .gap-x-12{ -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .gap-x-8{ -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .gap-y-4{ row-gap: 0.25rem; } .gap-x-24{ -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-x-20{ -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .self-end{ align-self: flex-end; } .self-stretch{ align-self: stretch; } .overflow-auto{ overflow: auto; } .\!overflow-hidden{ overflow: hidden !important; } .overflow-hidden{ overflow: hidden; } .overflow-visible{ overflow: visible; } .overflow-x-auto{ overflow-x: auto; } .overflow-y-auto{ overflow-y: auto; } .overflow-x-hidden{ overflow-x: hidden; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-ellipsis{ text-overflow: ellipsis; } .whitespace-normal{ white-space: normal; } .whitespace-nowrap{ white-space: nowrap; } .break-words{ overflow-wrap: break-word; } .rounded-full{ border-radius: 999px; } .rounded-md{ border-radius: var(--tiles-radius); } .rounded-button{ border-radius: var(--buttons-radius); } .rounded-1{ border-radius: 1px; } .rounded-input{ border-radius: var(--inputs-radius); } .rounded-none{ border-radius: 0px; } .rounded-checkbox{ border-radius: 0.125rem; } .rounded-b-none{ border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .rounded-r-none{ border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .rounded-l-none{ border-top-left-radius: 0px; border-bottom-left-radius: 0px; } .border{ border-width: 1px; } .border-2{ border-width: 2px; } .border-0{ border-width: 0px; } .border-b{ border-bottom-width: 1px; } .border-t{ border-top-width: 1px; } .border-r{ border-right-width: 1px; } .border-l{ border-left-width: 1px; } .border-b-0{ border-bottom-width: 0px; } .\!border-none{ border-style: none !important; } .border-none{ border-style: none; } .border-light-material{ border-color: var(--color-light-material); } .border-positive{ border-color: var(--color-positive); } .border-negative{ border-color: var(--color-negative); } .border-dark-30{ border-color: var(--color-dark-30); } .border-transparent{ border-color: rgba(0,0,0, 0); } .border-light-20{ border-color: var(--color-light-20); } .border-light-50{ border-color: var(--color-light-50); } .border-dark-10{ border-color: var(--color-dark-10); } .border-dark{ border-color: var(--color-dark); } .border-light{ border-color: var(--color-light); } .\!border-light-material{ border-color: var(--color-light-material) !important; } .border-t-transparent{ border-top-color: rgba(0,0,0, 0); } .border-l-light{ border-left-color: var(--color-light); } .\!bg-light{ background-color: var(--color-light) !important; } .bg-light-surface{ background-color: var(--color-light-surface); } .bg-dark-60{ background-color: var(--color-dark-60); } .bg-brand{ background-color: var(--color-brand); } .bg-dark-10{ background-color: var(--color-dark-10); } .bg-light{ background-color: var(--color-light); } .bg-positive-25{ background-color: var(--color-positive-25); } .bg-negative-25{ background-color: var(--color-negative-25); } .bg-light-material{ background-color: var(--color-light-material); } .bg-dark{ background-color: var(--color-dark); } .bg-transparent{ background-color: rgba(0,0,0, 0); } .bg-dark-material{ background-color: var(--color-dark-material); } .bg-positive{ background-color: var(--color-positive); } .bg-dark-30{ background-color: var(--color-dark-30); } .bg-warning{ background-color: var(--color-warning); } .bg-light-75{ background-color: var(--color-light-75); } .object-contain{ -o-object-fit: contain; object-fit: contain; } .object-cover{ -o-object-fit: cover; object-fit: cover; } .object-scale-down{ -o-object-fit: scale-down; object-fit: scale-down; } .p-8{ padding: 0.5rem; } .p-16{ padding: 1rem; } .p-4{ padding: 0.25rem; } .p-10{ padding: 0.625rem; } .p-0{ padding: 0px; } .p-24{ padding: 1.5rem; } .p-32{ padding: 2rem; } .p-28{ padding: 1.75rem; } .p-6{ padding: 0.375rem; } .p-12{ padding: 0.75rem; } .p-40{ padding: 2.5rem; } .py-40{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-24{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-80{ padding-top: 5rem; padding-bottom: 5rem; } .py-32{ padding-top: 2rem; padding-bottom: 2rem; } .py-8{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-10{ padding-top: 0.625rem; padding-bottom: 0.625rem; } .px-10{ padding-left: 0.625rem; padding-right: 0.625rem; } .px-24{ padding-left: 1.5rem; padding-right: 1.5rem; } .px-6{ padding-left: 0.375rem; padding-right: 0.375rem; } .px-8{ padding-left: 0.5rem; padding-right: 0.5rem; } .py-2{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .px-0{ padding-left: 0px; padding-right: 0px; } .py-160{ padding-top: 10rem; padding-bottom: 10rem; } .py-16{ padding-top: 1rem; padding-bottom: 1rem; } .px-32{ padding-left: 2rem; padding-right: 2rem; } .px-20{ padding-left: 1.25rem; padding-right: 1.25rem; } .px-16{ padding-left: 1rem; padding-right: 1rem; } .py-4{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-0{ padding-top: 0px; padding-bottom: 0px; } .px-12{ padding-left: 0.75rem; padding-right: 0.75rem; } .py-20{ padding-top: 1.25rem; padding-bottom: 1.25rem; } .pl-40{ padding-left: 2.5rem; } .pt-20{ padding-top: 1.25rem; } .pt-56{ padding-top: 3.5rem; } .pt-32{ padding-top: 2rem; } .pb-32{ padding-bottom: 2rem; } .pl-4{ padding-left: 0.25rem; } .pb-56{ padding-bottom: 3.5rem; } .pb-0{ padding-bottom: 0px; } .pt-16{ padding-top: 1rem; } .pb-16{ padding-bottom: 1rem; } .pr-24{ padding-right: 1.5rem; } .pb-24{ padding-bottom: 1.5rem; } .pt-40{ padding-top: 2.5rem; } .pr-32{ padding-right: 2rem; } .\!pb-0{ padding-bottom: 0px !important; } .pr-16{ padding-right: 1rem; } .pt-full{ padding-top: 100%; } .pb-8{ padding-bottom: 0.5rem; } .pl-16{ padding-left: 1rem; } .pr-8{ padding-right: 0.5rem; } .pb-28{ padding-bottom: 1.75rem; } .pt-8{ padding-top: 0.5rem; } .pb-18{ padding-bottom: 1.125rem; } .pt-24{ padding-top: 1.5rem; } .pb-64{ padding-bottom: 4rem; } .pb-14{ padding-bottom: 0.875rem; } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .align-middle{ vertical-align: middle; } .font-body{ font-family: var(--font-body-family); } .text-h1{ font-size: calc(var(--font-heading-scale) * 4.5rem); line-height: calc(var(--font-heading-line) * 1.2); } .text-h2{ font-size: calc(var(--font-heading-scale) * 4rem); line-height: calc(var(--font-heading-line) * 1.2); } .text-h3{ font-size: calc(var(--font-heading-scale) * 2.75rem); line-height: calc(var(--font-heading-line) * 1.2); } .text-h4{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } .text-h5{ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } .text-p-small{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } .text-p-mini{ font-size: calc(var(--font-body-scale) * 0.563rem); line-height: calc(var(--font-body-line) * 1.5); } .text-caption{ font-size: calc(var(--font-body-scale) * 0.75rem); line-height: calc(var(--font-body-line) * 1.5); } .text-p-large{ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } .text-menu{ font-size: calc(var(--font-menu-scale) * 0.875rem); line-height: 1.5; } .text-p{ font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); } .text-display-subtitle{ font-size: calc(var(--font-heading-scale) * 1.875rem); line-height: calc(var(--font-heading-line) * 1.125); } .text-button{ font-size: calc(var(--font-button-scale) * 0.875rem); line-height: 1.14285; } .text-button-large{ font-size: calc(var(--font-button-scale) * 1rem); line-height: 1.125; } .font-bold{ font-weight: 700; } .font-normal{ font-weight: 400; } .font-semibold{ font-weight: 600; } .font-medium{ font-weight: 500; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } .italic{ font-style: italic; } .leading-tight{ line-height: 1.25; } .leading-snug{ line-height: 1.375; } .leading-normal{ line-height: 1.5; } .text-dark-material{ color: var(--color-dark-material); } .text-light-subdued{ color: var(--color-light-subdued); } .text-dark-subdued{ color: var(--color-dark-subdued); } .text-light{ color: var(--color-light); } .text-positive{ color: var(--color-positive); } .text-negative{ color: var(--color-negative); } .text-brand{ color: var(--color-brand); } .text-dark-60{ color: var(--color-dark-60); } .text-dark{ color: var(--color-dark); } .text-warning{ color: var(--color-warning); } .text-light-material{ color: var(--color-light-material); } .text-light-75{ color: var(--color-light-75); } .underline{ text-decoration-line: underline; } .line-through{ text-decoration-line: line-through; } .opacity-0{ opacity: 0; } .opacity-50{ opacity: 0.5; } .opacity-75{ opacity: 0.75; } .opacity-60{ opacity: 0.6; } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .outline{ outline-style: solid; } .outline-2{ outline-width: 2px; } .outline-transparent{ outline-color: rgba(0,0,0, 0); } .blur-sm{ --tw-blur: blur(4px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur-sm{ --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-height{ transition-property: height; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-500{ transition-duration: 500ms; } .duration-700{ transition-duration: 700ms; } .duration-1000{ transition-duration: 1000ms; } .duration-300{ transition-duration: 300ms; } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .\!shadow-none{ box-shadow: none !important; } .shadow-sm{ box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.16); } .shadow{ box-shadow: 0 8px 16px 0 rgb(0 0 0 / 0.16); } .shadow-none{ box-shadow: none; } .line-clamp-3{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .line-clamp-4{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .fade{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .fade:not(.show) { transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s, z-index 0.15s linear 0s; opacity: 0; visibility: hidden; z-index: -1; } .js-hideable-item.collapse:not(.show) { display: none; } .collapse:not(.show){ display: none; } @media (min-width: 768px) { .collapse.md\:block{ display: block; } } .dropdown-menu:not(.show).collapsing{ display: block; height: 0px; } .collapsing{ height: 0px; overflow: hidden; transition-property: height; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .absolute-center{ position: absolute; left: 50%; top: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .flex-center { display: flex; align-items: center; justify-content: center; } .clip-path-top { clip-path: inset(0px 0px -24px 0px); } .active { opacity: 1; visibility: visible; } .visually-hidden { position: absolute !important; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); word-wrap: normal !important; } .visually-hidden--inline { margin: 0; height: 1em; } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes accordion-hide { 0% { max-height: 25rem; } 100% { max-height: 0; } } .thumb-active { position: relative; } .thumb-active:after { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; box-shadow: inset 0 0 0 1px var(--color-brand); /* additional properties from different classes might need transition */ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-radius: var(--tiles-radius); } button:disabled, a[aria-disabled='true'], button[aria-disabled='true'] { cursor: not-allowed; opacity: 0.5; } .blur-sm { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } .hover-underline-animation { display: inline-block; position: relative; color: var(--color-dark); } .hover-underline-animation::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 1px; bottom: 0px; left: 0; background-color: var(--color-brand); transform-origin: bottom left; transition: transform 0.25s ease-out; } .hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; color: var(--color-brand); } .hover-underline-animation.text-light { color: var(--color-light); } a:hover .theme-light{ color: var(--color-brand); } a:hover .bg-brand .theme-light{ color: var(--color-brand-text); } a.promo-tile:hover .theme-light { color: var(--color-light); } .theme-light{ color: var(--color-light); } .hover-underline-animation.theme-light { color: var(--color-light); } .theme-light > .hover-underline-animation { color: var(--color-light); } .theme-light > .hover-underline-animation::after { background-color: var(--color-light); } .theme-light > *, .theme-light.rich-text *, .theme-light.rich-text p, .theme-light .rich-text p, .theme-light .rich-text a, .theme-light .rich-text.h1, .theme-light .rich-text.h2, .theme-light .rich-text.h3, .theme-light .rich-text.h4, .theme-light .rich-text.h5 { color: var(--color-light) !important; } .break-words { -webkit-hyphens: auto; hyphens: auto; white-space: normal; } deferred-media[loaded] > .deferred-media-poster { display: none; } .product__xr-button[data-shopify-xr-hidden] { visibility: hidden; } @media (min-width: 992px){ .js-hideable-item.product__xr-button[data-shopify-xr-hidden] { display: none; } .product__xr-button[data-shopify-xr-hidden]{ display: none; } } @media (max-width: 991px){ .glide__slide--active .product__xr-button:not[data-shopify-xr-hidden]{ display: block; } } .shopify-design-mode .product__xr-button[data-shopify-xr-hidden] { display: none; } .cart__dynamic-checkout-buttons ul[data-shopify-buttoncontainer]{ display: flex; flex-direction: column !important; gap: 0.5rem; } .cart__dynamic-checkout-buttons ul[data-shopify-buttoncontainer] li[data-testid] { flex-grow: 1 !important; flex-basis: unset !important; height: unset !important; } .cart__dynamic-checkout-buttons div[role="button"]{ display: inline-flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 2.8125rem; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; background-color: var(--color-light); } .cart__dynamic-checkout-buttons div[role="button"], .cart__dynamic-checkout-buttons div[role="button"]-small, .cart__dynamic-checkout-buttons div[role="button"]-large{ letter-spacing: var(--font-button-space); } .cart__dynamic-checkout-buttons div[role="button"]{ text-align: center; font-size: calc(var(--font-button-scale) * 0.875rem); color: var(--color-dark); font-weight: 500; line-height: 1.25; border-width: 1px; border-radius: var(--buttons-radius); transition: all 0.15s ease-in; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cart__dynamic-checkout-buttons div[role="button"] .text{ min-width: 0px; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; white-space: normal; } @media (min-width: 768px) { .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } .cart__dynamic-checkout-buttons div[role="button"] .icon { transition: all 0.15s ease-in-out; transform: translateX(-12px); opacity: 0; visibility: hidden; } .cart__dynamic-checkout-buttons div[role="button"] .text { transition: all .15s linear; transform: translateX(12px); } .cart__dynamic-checkout-buttons div[role="button"]:hover .icon, .cart__dynamic-checkout-buttons div[role="button"]:active .icon { transform: translateX(0); opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"]:hover .text, .cart__dynamic-checkout-buttons div[role="button"]:active .text { transform: translateX(0); } } .cart__dynamic-checkout-buttons div[role="button"]:hover{ background-color: var(--color-brand-surface); } .cart__dynamic-checkout-buttons div[role="button"]:hover:active{ background-color: var(--color-brand-surface-active); } .cart__dynamic-checkout-buttons div[role="button"]:focus{ outline-style: solid; outline-width: 4px; outline-color: var(--color-brand-alpha-250); } .cart__dynamic-checkout-buttons div[role="button"]:disabled{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .cart__dynamic-checkout-buttons div[role="button"]:disabled, .cart__dynamic-checkout-buttons div[role="button"]:disabled span{ color: var(--color-dark-subdued); } .cart__dynamic-checkout-buttons div[role="button"]:disabled:hover{ border-width: 1px; border-color: var(--color-light-material); background-color: var(--color-light-surface); } .cart__dynamic-checkout-buttons div[role="button"]:disabled:hover, .cart__dynamic-checkout-buttons div[role="button"]:disabled:hover span{ color: var(--color-dark-subdued); cursor: not-allowed; } .cart__dynamic-checkout-buttons div[role="button"]{ padding-left: 2rem; padding-right: 2rem; height: auto; min-height: 3.313rem; } .cart__dynamic-checkout-buttons div[role="button"]{ letter-spacing: var(--font-button-space); } .cart__dynamic-checkout-buttons div[role="button"]{ font-size: calc(var(--font-button-scale) * 1rem); line-height: 1.125; } .cl-link.active .cart__dynamic-checkout-buttons div[role="button"] { opacity: 1; visibility: visible; } .cart__dynamic-checkout-buttons div[role="button"] { border-radius: 0 !important; } .cart__dynamic-checkout-buttons .shopify-cleanslate .X1znsY_r3nPaOB5sdn2C{ width: 100% !important; } [data-shopify-buttoncontainer] { justify-content: flex-end; } @media (min-width: 768px) { [data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { transition-duration: 50ms } [data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate { transition-delay: 50ms } [data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { transition-duration: .1s } [data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { transition-delay: .1s } [data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { transition-duration: .15s } [data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate { transition-delay: .15s } [data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { transition-duration: .2s } [data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate { transition-delay: .2s } [data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { transition-duration: .25s } [data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate { transition-delay: .25s } [data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { transition-duration: .3s } [data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { transition-delay: .3s } [data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { transition-duration: .35s } [data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { transition-delay: .35s } [data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { transition-duration: .4s } [data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate { transition-delay: .4s } [data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { transition-duration: .45s } [data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate { transition-delay: .45s } [data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { transition-duration: .5s } [data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate { transition-delay: .5s } [data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { transition-duration: .55s } [data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate { transition-delay: .55s } [data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { transition-duration: .6s } [data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate { transition-delay: .6s } [data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { transition-duration: .65s } [data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate { transition-delay: .65s } [data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { transition-duration: .7s } [data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate { transition-delay: .7s } [data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { transition-duration: .75s } [data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate { transition-delay: .75s } [data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { transition-duration: .8s } [data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate { transition-delay: .8s } [data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { transition-duration: .85s } [data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate { transition-delay: .85s } [data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { transition-duration: .9s } [data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate { transition-delay: .9s } [data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { transition-duration: .95s } [data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate { transition-delay: .95s } [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: 1s } [data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate { transition-delay: 1s } [data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { transition-duration: 1.05s } [data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate { transition-delay: 1.05s } [data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { transition-duration: 1.1s } [data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate { transition-delay: 1.1s } [data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { transition-duration: 1.15s } [data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate { transition-delay: 1.15s } [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1.2s } [data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate { transition-delay: 1.2s } [data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { transition-duration: 1.25s } [data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate { transition-delay: 1.25s } [data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { transition-duration: 1.3s } [data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate { transition-delay: 1.3s } [data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { transition-duration: 1.35s } [data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate { transition-delay: 1.35s } [data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { transition-duration: 1.4s } [data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate { transition-delay: 1.4s } [data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { transition-duration: 1.45s } [data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate { transition-delay: 1.45s } [data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { transition-duration: 1.5s } [data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { transition-delay: 1.5s } [data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { transition-duration: 1.55s } [data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate { transition-delay: 1.55s } [data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { transition-duration: 1.6s } [data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate { transition-delay: 1.6s } [data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { transition-duration: 1.65s } [data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate { transition-delay: 1.65s } [data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { transition-duration: 1.7s } [data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate { transition-delay: 1.7s } [data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { transition-duration: 1.75s } [data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate { transition-delay: 1.75s } [data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { transition-duration: 1.8s } [data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate { transition-delay: 1.8s } [data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { transition-duration: 1.85s } [data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate { transition-delay: 1.85s } [data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { transition-duration: 1.9s } [data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate { transition-delay: 1.9s } [data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { transition-duration: 1.95s } [data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate { transition-delay: 1.95s } [data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2s } [data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { transition-delay: 2s } [data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] { transition-duration: 2.05s } [data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate { transition-delay: 2.05s } [data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] { transition-duration: 2.1s } [data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate { transition-delay: 2.1s } [data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] { transition-duration: 2.15s } [data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate { transition-delay: 2.15s } [data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] { transition-duration: 2.2s } [data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate { transition-delay: 2.2s } [data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] { transition-duration: 2.25s } [data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate { transition-delay: 2.25s } [data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] { transition-duration: 2.3s } [data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate { transition-delay: 2.3s } [data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] { transition-duration: 2.35s } [data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate { transition-delay: 2.35s } [data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] { transition-duration: 2.4s } [data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate { transition-delay: 2.4s } [data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] { transition-duration: 2.45s } [data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate { transition-delay: 2.45s } [data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { transition-duration: 2.5s } [data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate { transition-delay: 2.5s } [data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] { transition-duration: 2.55s } [data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate { transition-delay: 2.55s } [data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] { transition-duration: 2.6s } [data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate { transition-delay: 2.6s } [data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] { transition-duration: 2.65s } [data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate { transition-delay: 2.65s } [data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] { transition-duration: 2.7s } [data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate { transition-delay: 2.7s } [data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] { transition-duration: 2.75s } [data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate { transition-delay: 2.75s } [data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] { transition-duration: 2.8s } [data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate { transition-delay: 2.8s } [data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] { transition-duration: 2.85s } [data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate { transition-delay: 2.85s } [data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] { transition-duration: 2.9s } [data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate { transition-delay: 2.9s } [data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] { transition-duration: 2.95s } [data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate { transition-delay: 2.95s } [data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { transition-duration: 3s } [data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { transition-delay: 0 } [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate { transition-delay: 3s } [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75) } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { transition-timing-function: ease } [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] { transition-timing-function: ease-in } [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] { transition-timing-function: ease-out } [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] { transition-timing-function: ease-in-out } [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045) } [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) } [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) } [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715) } [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1) } [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95) } [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) } [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) } [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955) } [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) } [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) } [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955) } [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) } [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) } [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955) } [data-aos^=fade][data-aos^=fade] { opacity: 0; transition-property: opacity, transform }[data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; transform: translateZ(0) }[data-aos=fade-up] { transform: translate3d(0, 100px, 0) } [data-aos=fade-down] { transform: translate3d(0, -100px, 0) } [data-aos=fade-right] { transform: translate3d(-100px, 0, 0) } [data-aos=fade-left] { transform: translate3d(100px, 0, 0) } [data-aos=fade-up-right] { transform: translate3d(-100px, 100px, 0) } [data-aos=fade-up-left] { transform: translate3d(100px, 100px, 0) } [data-aos=fade-down-right] { transform: translate3d(-100px, -100px, 0) } [data-aos=fade-down-left] { transform: translate3d(100px, -100px, 0) } [data-aos^=zoom][data-aos^=zoom] { opacity: 0; transition-property: opacity, transform }[data-aos^=zoom][data-aos^=zoom].aos-animate { opacity: 1; transform: translateZ(0) scale(1) }[data-aos=zoom-in] { transform: scale(.6) } [data-aos=zoom-in-up] { transform: translate3d(0, 100px, 0) scale(.6) } [data-aos=zoom-in-down] { transform: translate3d(0, -100px, 0) scale(0.6) } [data-aos=zoom-in-right] { transform: translate3d(-100px, 0, 0) scale(0.6) } [data-aos=zoom-in-left] { transform: translate3d(100px, 0, 0) scale(.6) } [data-aos=zoom-out] { transform: scale(1.2) } [data-aos=zoom-out-up] { transform: translate3d(0, 100px, 0) scale(1.2) } [data-aos=zoom-out-down] { transform: translate3d(0, -100px, 0) scale(1.2) } [data-aos=zoom-out-right] { transform: translate3d(-100px, 0, 0) scale(1.2) } [data-aos=zoom-out-left] { transform: translate3d(100px, 0, 0) scale(1.2) } [data-aos^=slide][data-aos^=slide] { transition-property: transform }[data-aos^=slide][data-aos^=slide].aos-animate { transform: translateZ(0) }[data-aos=slide-up] { transform: translate3d(0, 100%, 0) } [data-aos=slide-down] { transform: translate3d(0, -100%, 0) } [data-aos=slide-right] { transform: translate3d(-100%, 0, 0) } [data-aos=slide-left] { transform: translate3d(100%, 0, 0) } [data-aos^=flip][data-aos^=flip] { backface-visibility: hidden; transition-property: transform }[data-aos=flip-left] { transform: perspective(2500px) rotateY(-100deg) } [data-aos=flip-left].aos-animate { transform: perspective(2500px) rotateY(0) } [data-aos=flip-right] { transform: perspective(2500px) rotateY(100deg) } [data-aos=flip-right].aos-animate { transform: perspective(2500px) rotateY(0) } [data-aos=flip-up] { transform: perspective(2500px) rotateX(-100deg) } [data-aos=flip-up].aos-animate { transform: perspective(2500px) rotateX(0) } [data-aos=flip-down] { transform: perspective(2500px) rotateX(100deg) } [data-aos=flip-down].aos-animate { transform: perspective(2500px) rotateX(0) } } .accordion .accordion-button.collapsed .button-arrow svg{ --tw-rotate: 0deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition: transform 0.3s ease-in-out; } .accordion .accordion-button.collapsed .button-plus-minus svg.plus { opacity: 1; transition: opacity 0.3s ease-in-out; } .accordion .accordion-button.collapsed .button-plus-minus svg.minus { opacity: 0; transition: opacity 0.3s ease-in-out; } .accordion .accordion-button .button-arrow svg{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition: transform 0.3s ease-in-out; } .accordion .accordion-button .button-plus-minus svg.plus { opacity: 0; transition: opacity 0.3s ease-in-out; } .accordion .accordion-button .button-plus-minus svg.minus { opacity: 1; transition: opacity 0.3s ease-in-out; } .accordion .accordion-button .button-icon{ display: flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; border-radius: 999px; border-width: 1px; border-color: var(--color-light-material); padding: 0.5rem; } .main-header .main-menu-item a, .main-header .js-hideable-dropdown-item button{ transition-property: none; } .main-header .logo-light { display: none; } .main-header .header-text-theme{ border-color: var(--color-dark-10); } .main-header > div.light .logo-light { display: flex; } .main-header > div.light .logo-dark { display: none; } a:hover .main-header > div.light .header-text-theme{ color: var(--color-brand); } a:hover .bg-brand .main-header > div.light .header-text-theme{ color: var(--color-brand-text); } a.promo-tile:hover .main-header > div.light .header-text-theme { color: var(--color-light); } .main-header > div.light .header-text-theme{ border-color: var(--color-light-20); color: var(--color-light); } .hover-underline-animation.main-header > div.light .header-text-theme { color: var(--color-light); } @media (min-width: 768px){ .main-header > div.light .menu-1 .header-search-wrapper input.input{ border-color: var(--color-light-50); } .main-header > div.light .menu-1 .header-search-wrapper input.input::-moz-placeholder{ color: var(--color-light-75); } .main-header > div.light .menu-1 .header-search-wrapper input.input::placeholder{ color: var(--color-light-75); } .main-header > div.light .menu-1 .header-search-wrapper input.input:hover{ border-color: var(--color-light); } .main-header > div.light .menu-1 .header-search-wrapper input.input:focus{ background-color: var(--color-light); } .main-header > div.light .menu-1 .header-search-wrapper input.input:focus::-moz-placeholder{ color: var(--color-dark); } .main-header > div.light .menu-1 .header-search-wrapper input.input:focus::placeholder{ color: var(--color-dark); } .main-header > div.light .menu-1 .header-search-wrapper input.input:focus ~ .search-input-icon{ color: var(--color-dark); } .main-header > div.light .menu-1 .header-search-wrapper .search-input-icon{ color: var(--color-light-75); } } @media (min-width: 992px){ .main-header > div.light .menu-2 .header-search-wrapper input.input{ border-color: var(--color-light-50); } .main-header > div.light .menu-2 .header-search-wrapper input.input::-moz-placeholder{ color: var(--color-light-75); } .main-header > div.light .menu-2 .header-search-wrapper input.input::placeholder{ color: var(--color-light-75); } .main-header > div.light .menu-2 .header-search-wrapper input.input:hover{ border-color: var(--color-light); } .main-header > div.light .menu-2 .header-search-wrapper input.input:focus{ background-color: var(--color-light); } .main-header > div.light .menu-2 .header-search-wrapper input.input:focus::-moz-placeholder{ color: var(--color-dark); } .main-header > div.light .menu-2 .header-search-wrapper input.input:focus::placeholder{ color: var(--color-dark); } .main-header > div.light .menu-2 .header-search-wrapper input.input:focus ~ .search-input-icon{ color: var(--color-dark); } .main-header > div.light .menu-2 .header-search-wrapper .search-input-icon{ color: var(--color-light-75); } } a:hover .main-header > div.light .header-search-wrapper .header-search-icon{ color: var(--color-brand); } a:hover .bg-brand .main-header > div.light .header-search-wrapper .header-search-icon{ color: var(--color-brand-text); } a.promo-tile:hover .main-header > div.light .header-search-wrapper .header-search-icon { color: var(--color-light); } .main-header > div.light .header-search-wrapper .header-search-icon{ color: var(--color-light); } .hover-underline-animation.main-header > div.light .header-search-wrapper .header-search-icon { color: var(--color-light); } .main-header > div.light .main-menu-item:hover{ color: var(--color-brand); } .main-header > div.light .header-customer-icon:hover svg *, .main-header > div.light .header-customer-icon:hover svg path, .main-header > div.light .js-icon-search:hover svg *, .main-header > div.light .js-icon-search:hover svg path, .main-header > div.light .menu-icon-wrapper:hover svg *, .main-header > div.light .menu-icon-wrapper:hover svg path{ color: var(--color-brand); } .main-header > div.dark .logo-light { display: none; } .main-header > div.dark .header-text-theme{ border-color: var(--color-dark-10); color: var(--color-dark); } @media (min-width: 768px){ .main-header > div.dark .menu-1 .header-search-wrapper input.input::-moz-placeholder{ color: var(--color-dark-60); } .main-header > div.dark .menu-1 .header-search-wrapper input.input::placeholder{ color: var(--color-dark-60); } .main-header > div.dark .menu-1 .header-search-wrapper input.input:focus ~ .search-input-icon{ color: var(--color-dark); } .main-header > div.dark .menu-1 .header-search-wrapper .search-input-icon{ color: var(--color-dark-60); } } @media (min-width: 992px){ .main-header > div.dark .menu-2 .header-search-wrapper input.input::-moz-placeholder{ color: var(--color-dark-60); } .main-header > div.dark .menu-2 .header-search-wrapper input.input::placeholder{ color: var(--color-dark-60); } .main-header > div.dark .menu-2 .header-search-wrapper input.input:focus ~ .search-input-icon{ color: var(--color-dark); } .main-header > div.dark .menu-2 .header-search-wrapper .search-input-icon{ color: var(--color-dark-60); } } .main-header > div.dark .header-search-wrapper input.input{ border-color: var(--color-dark-30); background-color: rgba(0,0,0, 0); } .main-header > div.dark .header-search-wrapper input.input:focus{ border-color: var(--color-dark); background-color: var(--color-light); } .main-header > div.dark .header-search-wrapper input.input:focus::-moz-placeholder{ color: var(--color-dark); } .main-header > div.dark .header-search-wrapper input.input:focus::placeholder{ color: var(--color-dark); } .main-header > div.dark .header-search-wrapper .header-search-icon{ color: var(--color-dark); } .main-header > div.dark .header-customer-icon:hover svg *, .main-header > div.dark .header-customer-icon:hover svg path, .main-header > div.dark .js-icon-search:hover svg *, .main-header > div.dark .js-icon-search:hover svg path, .main-header > div.dark .header-icon-search-2:hover svg *, .main-header > div.dark .header-icon-search-2:hover svg path, .main-header > div.dark .menu-icon:hover svg *, .main-header > div.dark .menu-icon:hover svg path{ color: var(--color-brand); } /* TODO: cleanup */ :root { --modal-dialog-margin: 0.5rem; --modal-dialog-margin-y-sm-up: 1.75rem; } /*INPUTS*/ .first\:mt-0:first-child{ margin-top: 0px; } a:hover .hover\:text-light:hover{ color: var(--color-brand); } a:hover .bg-brand .hover\:text-light:hover{ color: var(--color-brand-text); } a.promo-tile:hover .hover\:text-light:hover { color: var(--color-light); } .hover\:rotate-90:hover{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:scale-110:hover{ --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-light:hover{ border-color: var(--color-light); } .hover\:border-brand:hover{ border-color: var(--color-brand); } .hover\:border-brand-alpha-250:hover{ border-color: var(--color-brand-alpha-250); } .hover\:border-dark:hover{ border-color: var(--color-dark); } .hover\:bg-light-surface:hover{ background-color: var(--color-light-surface); } .hover\:bg-light:hover{ background-color: var(--color-light); } .hover\:bg-light-material:hover{ background-color: var(--color-light-material); } .hover\:text-brand-text:hover{ color: var(--color-brand-text); } .hover\:text-light:hover{ color: var(--color-light); } .hover\:text-brand:hover{ color: var(--color-brand); } .hover\:text-dark:hover{ color: var(--color-dark); } .hover\:text-negative:hover{ color: var(--color-negative); } .hover\:underline:hover{ text-decoration-line: underline; } .hover\:opacity-75:hover{ opacity: 0.75; } .hover\:outline:hover{ outline-style: solid; } .hover\:outline-1:hover{ outline-width: 1px; } .hover\:outline-brand:hover{ outline-color: var(--color-brand); } .hover\:thumb-active:hover { position: relative; } .hover\:thumb-active:hover:after { content: ''; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; box-shadow: inset 0 0 0 1px var(--color-brand); /* additional properties from different classes might need transition */ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; border-radius: var(--tiles-radius); } .hover-underline-animation.hover\:text-light:hover { color: var(--color-light); } .focus\:border-dark:focus{ border-color: var(--color-dark); } .focus\:bg-light:focus{ background-color: var(--color-light); } .active\:bg-light:active{ background-color: var(--color-light); } .group:focus-within .group-focus-within\:visible{ visibility: visible; } .group:focus-within .group-focus-within\:z-10{ z-index: 10; } .group:focus-within .group-focus-within\:scale-110{ --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:focus-within .group-focus-within\:bg-light-surface{ background-color: var(--color-light-surface); } .group:focus-within .group-focus-within\:text-dark{ color: var(--color-dark); } .group:focus-within .group-focus-within\:opacity-100{ opacity: 1; } .group:focus-within .group-focus-within\:visible { display: block !important; } .group:hover .group-hover\:visible{ visibility: visible; } .group:hover .group-hover\:z-10{ z-index: 10; } .group:hover .group-hover\:translate-x-4{ --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:rotate-90{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:scale-110{ --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:border-dark{ border-color: var(--color-dark); } .group:hover .group-hover\:border-light-material{ border-color: var(--color-light-material); } .group:hover .group-hover\:bg-light{ background-color: var(--color-light); } .group:hover .group-hover\:bg-light-surface{ background-color: var(--color-light-surface); } .group:hover .group-hover\:text-brand{ color: var(--color-brand); } .group:hover .group-hover\:text-dark{ color: var(--color-dark); } .group:hover .group-hover\:opacity-100{ opacity: 1; } .group:hover .group-hover\:visible { display: block !important; } @media (min-width: 576px){ .sm\:container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .sm\:container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .sm\:container { max-width: 540px } } @media (min-width: 768px) { .sm\:container { max-width: 720px } } @media (min-width: 992px) { .sm\:container { max-width: 960px } } @media (min-width: 1200px) { .sm\:container { max-width: 1152px } } @media (min-width: 1440px) { .sm\:container { max-width: 1440px } } .js-hideable-item.sm\:hidden { display: none; } .js-modal-content .sm\:container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .sm\:container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .sm\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .sm\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .sm\:container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .sm\:container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .sm\:container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .sm\:container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .sm\:container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .sm\:container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } .sm\:ml-8{ margin-left: 0.5rem; } .sm\:mb-8{ margin-bottom: 0.5rem; } .sm\:hidden{ display: none; } .sm\:w-1\/2{ width: 50%; } .sm\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:p-18{ padding: 1.125rem; } .sm\:pr-24{ padding-right: 1.5rem; } .sm\:text-center{ text-align: center; } .sm\:text-right{ text-align: right; } } @media (min-width: 768px){ .md\:btn-large{ padding-left: 2rem; padding-right: 2rem; height: auto; min-height: 3.313rem; } .md\:btn-large{ letter-spacing: var(--font-button-space); } .md\:btn-large{ font-size: calc(var(--font-button-scale) * 1rem); line-height: 1.125; } .md\:container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .md\:container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .md\:container { max-width: 540px } } @media (min-width: 768px) { .md\:container { max-width: 720px } } @media (min-width: 992px) { .md\:container { max-width: 960px } } @media (min-width: 1200px) { .md\:container { max-width: 1152px } } @media (min-width: 1440px) { .md\:container { max-width: 1440px } } .js-hideable-item.md\:hidden { display: none; } .js-modal-content .md\:container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .md\:container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .md\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .md\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .md\:container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .md\:container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .md\:container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .md\:container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.md\:mt-32{ margin-top: 1.25rem; } .js-modal-content .md\:container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.md\:mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .md\:container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } .md\:pointer-events-none{ pointer-events: none; } .md\:absolute{ position: absolute; } .md\:top-0{ top: 0px; } .md\:left-0{ left: 0px; } .md\:top-24{ top: 1.5rem; } .md\:right-24{ right: 1.5rem; } .md\:-top-24{ top: -1.5rem; } .md\:-bottom-24{ bottom: -1.5rem; } .md\:top-full{ top: 100%; } .md\:right-0{ right: 0px; } .md\:my-56{ margin-top: 3.5rem; margin-bottom: 3.5rem; } .md\:my-12{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .md\:mx-4{ margin-left: 0.25rem; margin-right: 0.25rem; } .md\:mx-auto{ margin-left: auto; margin-right: auto; } .md\:my-80{ margin-top: 5rem; margin-bottom: 5rem; } .md\:-mx-12{ margin-left: -0.75rem; margin-right: -0.75rem; } .md\:mt-32{ margin-top: 2rem; } .md\:mb-16{ margin-bottom: 1rem; } .md\:mt-8{ margin-top: 0.5rem; } .md\:mb-8{ margin-bottom: 0.5rem; } .md\:ml-auto{ margin-left: auto; } .md\:mr-auto{ margin-right: auto; } .md\:mb-24{ margin-bottom: 1.5rem; } .md\:mt-24{ margin-top: 1.5rem; } .md\:mt-36{ margin-top: 2.25rem; } .md\:mt-auto{ margin-top: auto; } .md\:mt-14{ margin-top: 0.875rem; } .md\:mt-80{ margin-top: 5rem; } .md\:mt-64{ margin-top: 4rem; } .md\:-mb-10{ margin-bottom: -0.625rem; } .md\:mb-48{ margin-bottom: 3rem; } .md\:mt-16{ margin-top: 1rem; } .md\:mr-56{ margin-right: 3.5rem; } .md\:mb-40{ margin-bottom: 2.5rem; } .md\:block{ display: block; } .md\:flex{ display: flex; } .md\:hidden{ display: none; } .md\:h-2{ height: 0.125rem; } .md\:h-4{ height: 0.25rem; } .md\:h-20{ height: 1.25rem; } .md\:h-22{ height: 1.375rem; } .md\:h-24{ height: 1.5rem; } .md\:h-28{ height: 1.75rem; } .md\:h-32{ height: 2rem; } .md\:h-36{ height: 2.25rem; } .md\:h-40{ height: 2.5rem; } .md\:h-44{ height: 2.75rem; } .md\:h-48{ height: 3rem; } .md\:h-50{ height: 3.125rem; } .md\:h-56{ height: 3.5rem; } .md\:h-200{ height: 12.5rem; } .md\:h-240{ height: 15rem; } .md\:h-250{ height: 15.625rem; } .md\:h-300{ height: 18.75rem; } .md\:h-320{ height: 20rem; } .md\:h-350{ height: 21.875rem; } .md\:h-400{ height: 25rem; } .md\:h-416{ height: 26rem; } .md\:h-450{ height: 28.125rem; } .md\:h-459{ height: 28.688rem; } .md\:h-460{ height: 28.75rem; } .md\:h-485{ height: 30.313rem; } .md\:h-500{ height: 31.25rem; } .md\:h-540{ height: 33.75rem; } .md\:h-544{ height: 34rem; } .md\:h-2\/3{ height: 66.666667%; } .md\:h-2\/4{ height: 50%; } .md\:h-3\/4{ height: 75%; } .md\:h-2\/5{ height: 40%; } .md\:h-3\/5{ height: 60%; } .md\:h-4\/5{ height: 80%; } .md\:h-2\/6{ height: 33.333333%; } .md\:h-3\/6{ height: 50%; } .md\:h-4\/6{ height: 66.666667%; } .md\:h-5\/6{ height: 83.333333%; } .md\:h-96{ height: 6rem; } .md\:h-700{ height: 43.75rem; } .md\:h-full{ height: 100%; } .md\:h-auto{ height: auto; } .md\:h-64{ height: 4rem; } .md\:h-600{ height: 37.5rem; } .md\:h-72{ height: 4.5rem; } .md\:h-80{ height: 5rem; } .md\:max-h-2{ max-height: 0.125rem; } .md\:max-h-4{ max-height: 0.25rem; } .md\:max-h-20{ max-height: 1.25rem; } .md\:max-h-22{ max-height: 1.375rem; } .md\:max-h-24{ max-height: 1.5rem; } .md\:max-h-28{ max-height: 1.75rem; } .md\:max-h-32{ max-height: 2rem; } .md\:max-h-36{ max-height: 2.25rem; } .md\:max-h-40{ max-height: 2.5rem; } .md\:max-h-44{ max-height: 2.75rem; } .md\:max-h-48{ max-height: 3rem; } .md\:max-h-50{ max-height: 3.125rem; } .md\:max-h-56{ max-height: 3.5rem; } .md\:max-h-200{ max-height: 12.5rem; } .md\:max-h-240{ max-height: 15rem; } .md\:max-h-250{ max-height: 15.625rem; } .md\:max-h-300{ max-height: 18.75rem; } .md\:max-h-320{ max-height: 20rem; } .md\:max-h-350{ max-height: 21.875rem; } .md\:max-h-400{ max-height: 25rem; } .md\:max-h-416{ max-height: 26rem; } .md\:max-h-450{ max-height: 28.125rem; } .md\:max-h-459{ max-height: 28.688rem; } .md\:max-h-460{ max-height: 28.75rem; } .md\:max-h-485{ max-height: 30.313rem; } .md\:max-h-500{ max-height: 31.25rem; } .md\:max-h-540{ max-height: 33.75rem; } .md\:max-h-544{ max-height: 34rem; } .md\:min-h-48{ min-height: 3rem; } .md\:min-h-250{ min-height: 15.625rem; } .md\:min-h-300{ min-height: 18.75rem; } .md\:min-h-400{ min-height: 25rem; } .md\:min-h-416{ min-height: 26rem; } .md\:min-h-580{ min-height: 36.25rem; } .md\:w-40{ width: 2.5rem; } .md\:w-96{ width: 6rem; } .md\:w-1\/3{ width: 33.333334%; } .md\:w-1\/2{ width: 50%; } .md\:w-5\/12{ width: 41.666667%; } .md\:w-350{ width: 21.875rem; } .md\:w-64{ width: 4rem; } .md\:w-72{ width: 4.5rem; } .md\:w-24{ width: 1.5rem; } .md\:w-3\/12{ width: 25%; } .md\:w-1\/6{ width: 16.666667%; } .md\:w-9\/12{ width: 75%; } .md\:w-80{ width: 5rem; } .md\:max-w-1\/2{ max-width: 50%; } .md\:max-w-360{ max-width: 22.5rem; } .md\:flex-shrink-0{ flex-shrink: 0; } .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:flex-row{ flex-direction: row; } .md\:flex-row-reverse{ flex-direction: row-reverse; } .md\:flex-col{ flex-direction: column; } .md\:flex-wrap{ flex-wrap: wrap; } .md\:items-center{ align-items: center; } .md\:justify-center{ justify-content: center; } .md\:gap-32{ gap: 2rem; } .md\:gap-48{ gap: 3rem; } .md\:gap-y-24{ row-gap: 1.5rem; } .md\:gap-y-56{ row-gap: 3.5rem; } .md\:gap-x-16{ -moz-column-gap: 1rem; column-gap: 1rem; } .md\:rounded-md{ border-radius: var(--tiles-radius); } .md\:border{ border-width: 1px; } .md\:border-l{ border-left-width: 1px; } .md\:border-b{ border-bottom-width: 1px; } .md\:border-light-material{ border-color: var(--color-light-material); } .md\:bg-light-surface{ background-color: var(--color-light-surface); } .md\:bg-dark-30{ background-color: var(--color-dark-30); } .md\:p-16{ padding: 1rem; } .md\:p-24{ padding: 1.5rem; } .md\:p-40{ padding: 2.5rem; } .md\:p-32{ padding: 2rem; } .md\:py-24{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .md\:px-80{ padding-left: 5rem; padding-right: 5rem; } .md\:py-64{ padding-top: 4rem; padding-bottom: 4rem; } .md\:py-80{ padding-top: 5rem; padding-bottom: 5rem; } .md\:py-8{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .md\:py-56{ padding-top: 3.5rem; padding-bottom: 3.5rem; } .md\:px-12{ padding-left: 0.75rem; padding-right: 0.75rem; } .md\:px-16{ padding-left: 1rem; padding-right: 1rem; } .md\:py-4{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .md\:py-48{ padding-top: 3rem; padding-bottom: 3rem; } .md\:py-32{ padding-top: 2rem; padding-bottom: 2rem; } .md\:px-40{ padding-left: 2.5rem; padding-right: 2.5rem; } .md\:pt-32{ padding-top: 2rem; } .md\:pt-48{ padding-top: 3rem; } .md\:pb-140{ padding-bottom: 8.75rem; } .md\:pb-16{ padding-bottom: 1rem; } .md\:pl-80{ padding-left: 5rem; } .md\:pt-56{ padding-top: 3.5rem; } .md\:pb-72{ padding-bottom: 4.5rem; } .md\:pr-40{ padding-right: 2.5rem; } .md\:pb-80{ padding-bottom: 5rem; } .md\:pr-80{ padding-right: 5rem; } .md\:pb-32{ padding-bottom: 2rem; } .md\:pt-8{ padding-top: 0.5rem; } .md\:pt-40{ padding-top: 2.5rem; } .md\:pb-48{ padding-bottom: 3rem; } .md\:text-center{ text-align: center; } .md\:text-right{ text-align: right; } .md\:text-p-large{ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } .md\:text-p-small{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } .md\:text-p{ font-size: calc(var(--font-body-scale) * 1rem); line-height: calc(var(--font-body-line) * 1.5); } .md\:leading-tight{ line-height: 1.25; } .md\:line-clamp-1{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .md\:flex-center { display: flex; align-items: center; justify-content: center; } .group:focus-within .md\:group-focus-within\:opacity-100{ opacity: 1; } .group:hover .md\:group-hover\:opacity-100{ opacity: 1; } } @media (min-width: 992px){ .lg\:btn-outline{ background-color: rgba(0,0,0, 0); color: var(--color-dark); border-width: 1px; border-color: var(--color-light-material); } .lg\:btn-outline:hover{ border-color: var(--color-dark); background-color: rgba(0,0,0, 0); color: var(--color-dark); } .lg\:btn-outline:hover:active{ background-color: var(--color-dark-10); } .lg\:btn-outline:focus{ outline-color: var(--color-brand-alpha-250); } .lg\:container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .lg\:container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .lg\:container { max-width: 540px } } @media (min-width: 768px) { .lg\:container { max-width: 720px } } @media (min-width: 992px) { .lg\:container { max-width: 960px } } @media (min-width: 1200px) { .lg\:container { max-width: 1152px } } @media (min-width: 1440px) { .lg\:container { max-width: 1440px } } .lg\:btn-outline:hover:active{ background-color: var(--color-light-material); } .lg\:custom-scrollbar::-webkit-scrollbar { width: 10px; } @media (min-width: 992px) { .lg\:custom-scrollbar::-webkit-scrollbar-track{ background-color: var(--color-light-surface); border: 1px solid; border-color: var(--color-light-material); } } .lg\:custom-scrollbar::-webkit-scrollbar-thumb{ border-radius: 999px; background-color: var(--color-dark-30); border: 3px solid transparent; background-clip: padding-box; } .js-hideable-item.lg\:hidden { display: none; } .js-modal-content .lg\:container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .lg\:container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .lg\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .lg\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .lg\:container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .lg\:container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .lg\:container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .lg\:container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.lg\:mt-32{ margin-top: 1.25rem; } .js-modal-content .lg\:container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .container .lg\:w-1\/3 fieldset.lg\:mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .lg\:container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } .lg\:pointer-events-none{ pointer-events: none; } .lg\:invisible{ visibility: hidden; } .lg\:absolute{ position: absolute; } .lg\:top-0{ top: 0px; } .lg\:left-0{ left: 0px; } .lg\:bottom-0{ bottom: 0px; } .lg\:top-full{ top: 100%; } .lg\:mx-auto{ margin-left: auto; margin-right: auto; } .lg\:mr-56{ margin-right: 3.5rem; } .lg\:mb-56{ margin-bottom: 3.5rem; } .lg\:mt-56{ margin-top: 3.5rem; } .lg\:mt-24{ margin-top: 1.5rem; } .lg\:mb-48{ margin-bottom: 3rem; } .lg\:mb-16{ margin-bottom: 1rem; } .lg\:mr-32{ margin-right: 2rem; } .lg\:mr-auto{ margin-right: auto; } .lg\:mb-0{ margin-bottom: 0px; } .lg\:mt-32{ margin-top: 2rem; } .lg\:ml-16{ margin-left: 1rem; } .lg\:mb-24{ margin-bottom: 1.5rem; } .lg\:mt-80{ margin-top: 5rem; } .lg\:mt-72{ margin-top: 4.5rem; } .lg\:ml-56{ margin-left: 3.5rem; } .lg\:mt-16{ margin-top: 1rem; } .lg\:mr-48{ margin-right: 3rem; } .lg\:mr-16{ margin-right: 1rem; } .lg\:ml-auto{ margin-left: auto; } .lg\:mr-80{ margin-right: 5rem; } .lg\:\!block{ display: block !important; } .lg\:flex{ display: flex; } .lg\:hidden{ display: none; } .lg\:h-500{ height: 31.25rem; } .lg\:h-600{ height: 37.5rem; } .lg\:h-700{ height: 43.75rem; } .lg\:h-auto{ height: auto; } .lg\:h-full{ height: 100%; } .lg\:h-320{ height: 20rem; } .lg\:h-50{ height: 3.125rem; } .lg\:h-120{ height: 7.5rem; } .lg\:h-485{ height: 30.313rem; } .lg\:h-800{ height: 50rem; } .lg\:h-540{ height: 33.75rem; } .lg\:h-64{ height: 4rem; } .lg\:h-20{ height: 1.25rem; } .lg\:h-450{ height: 28.125rem; } .lg\:h-32{ height: 2rem; } .lg\:h-688{ height: 43rem; } .lg\:max-h-500{ max-height: 31.25rem; } .lg\:max-h-600{ max-height: 37.5rem; } .lg\:max-h-700{ max-height: 43.75rem; } .lg\:min-h-580{ min-height: 36.25rem; } .lg\:min-h-688{ min-height: 43rem; } .lg\:w-1\/3{ width: 33.333334%; } .lg\:w-1\/4{ width: 25%; } .lg\:w-1\/5{ width: 20%; } .lg\:w-1\/6{ width: 16.666667%; } @media (min-width: 992px){ .lg\:lg\:w-1\/3{ width: 33.333334%; } } .lg\:w-1\/2{ width: 50%; } .lg\:w-5\/12{ width: 41.666667%; } .lg\:w-7\/12{ width: 58.333333%; } .lg\:w-3\/4{ width: 75%; } .lg\:w-2\/3{ width: 66.666667%; } .lg\:w-540{ width: 33.75rem; } .lg\:w-10\/12{ width: 83.333333%; } .lg\:w-120{ width: 7.5rem; } .lg\:w-full{ width: 100%; } .lg\:w-64{ width: 4rem; } .lg\:w-20{ width: 1.25rem; } .lg\:w-0{ width: 0px; } .lg\:w-32{ width: 2rem; } .lg\:max-w-460{ max-width: 28.75rem; } .lg\:max-w-600{ max-width: 37.5rem; } .lg\:flex-shrink-0{ flex-shrink: 0; } .lg\:translate-y-full{ --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:flex-col{ flex-direction: column; } .lg\:flex-nowrap{ flex-wrap: nowrap; } .lg\:justify-end{ justify-content: flex-end; } .lg\:justify-center{ justify-content: center; } .lg\:gap-32{ gap: 2rem; } .lg\:gap-72{ gap: 4.5rem; } .lg\:gap-4{ gap: 0.25rem; } .lg\:gap-48{ gap: 3rem; } .lg\:gap-y-72{ row-gap: 4.5rem; } .lg\:overflow-y-auto{ overflow-y: auto; } .lg\:overflow-x-hidden{ overflow-x: hidden; } .lg\:rounded-md{ border-radius: var(--tiles-radius); } .lg\:border{ border-width: 1px; } .lg\:border-r{ border-right-width: 1px; } .lg\:border-light-material{ border-color: var(--color-light-material); } .lg\:bg-light-surface{ background-color: var(--color-light-surface); } .lg\:bg-dark-10{ background-color: var(--color-dark-10); } .lg\:bg-dark{ background-color: var(--color-dark); } .lg\:bg-light{ background-color: var(--color-light); } .lg\:bg-dark-30{ background-color: var(--color-dark-30); } .lg\:p-24{ padding: 1.5rem; } .lg\:p-96{ padding: 6rem; } .lg\:py-56{ padding-top: 3.5rem; padding-bottom: 3.5rem; } .lg\:pl-32{ padding-left: 2rem; } .lg\:pb-40{ padding-bottom: 2.5rem; } .lg\:pb-36{ padding-bottom: 2.25rem; } .lg\:text-p-large{ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } .lg\:text-brand{ color: var(--color-brand); } .lg\:opacity-0{ opacity: 0; } .lg\:transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .lg\:duration-500{ transition-duration: 500ms; } .lg\:ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .lg\:absolute-center{ position: absolute; left: 50%; top: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } a:hover .lg\:theme-light{ color: var(--color-brand); } a:hover .bg-brand .lg\:theme-light{ color: var(--color-brand-text); } a.promo-tile:hover .lg\:theme-light { color: var(--color-light); } .lg\:theme-light{ color: var(--color-light); } .hover-underline-animation.lg\:theme-light { color: var(--color-light); } .lg\:theme-light > .hover-underline-animation { color: var(--color-light); } .lg\:theme-light > .hover-underline-animation::after { background-color: var(--color-light); } .lg\:theme-light > *,.lg\:theme-light.rich-text *,.lg\:theme-light.rich-text p,.lg\:theme-light .rich-text p,.lg\:theme-light .rich-text a,.lg\:theme-light .rich-text.h1,.lg\:theme-light .rich-text.h2,.lg\:theme-light .rich-text.h3,.lg\:theme-light .rich-text.h4,.lg\:theme-light .rich-text.h5 { color: var(--color-light) !important; } .lg\:hover\:border-light-material:hover{ border-color: var(--color-light-material); } .lg\:hover\:bg-light:hover{ background-color: var(--color-light); } .group:hover .group-hover\:lg\:translate-y-0{ --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:lg\:opacity-100{ opacity: 1; } } @media (min-width: 1200px){ .js-hideable-item.xl\:hidden { display: none; } .xl\:invisible{ visibility: hidden; } .xl\:-left-96{ left: -6rem; } .xl\:-right-96{ right: -6rem; } .xl\:mb-110{ margin-bottom: 6.875rem; } .xl\:hidden{ display: none; } .xl\:h-450{ height: 28.125rem; } .xl\:h-416{ height: 26rem; } .xl\:h-608{ height: 38rem; } .xl\:w-1\/2{ width: 50%; } .xl\:flex-row{ flex-direction: row; } .xl\:items-center{ align-items: center; } .xl\:py-64{ padding-top: 4rem; padding-bottom: 4rem; } .xl\:pr-120{ padding-right: 7.5rem; } .xl\:opacity-50{ opacity: 0.5; } .xl\:opacity-0{ opacity: 0; } } @media (min-width: 1440px){ .\32xl\:h-600{ height: 37.5rem; } .\32xl\:h-544{ height: 34rem; } .\32xl\:h-688{ height: 43rem; } } @media (max-width: 1199px){ .js-hideable-item.max-lg\:hidden { display: none; } .max-lg\:hidden{ display: none; } .max-lg\:flex-col-reverse{ flex-direction: column-reverse; } } @media (max-width: 991px){ .max-md\:container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .max-md\:container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .max-md\:container { max-width: 540px } } @media (min-width: 768px) { .max-md\:container { max-width: 720px } } @media (min-width: 992px) { .max-md\:container { max-width: 960px } } @media (min-width: 1200px) { .max-md\:container { max-width: 1152px } } @media (min-width: 1440px) { .max-md\:container { max-width: 1440px } } .max-md\:sidebar{ position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background-color: var(--color-light); visibility: hidden; opacity: 0; z-index: 31; overflow: hidden; } @media (min-width: 992px) { .max-md\:sidebar{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-color: rgba(0,0,0, 0); } .max-md\:sidebar > .desktop-sidebar-bg{ height: 100%; width: 100%; opacity: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .max-md\:sidebar > form{ position: absolute; top: 0px; right: 0px; } .max-md\:sidebar{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-color: rgba(0,0,0, 0); } .max-md\:sidebar > .desktop-sidebar-bg{ height: 100%; width: 100%; opacity: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .max-md\:sidebar > form{ position: absolute; top: 0px; right: 0px; } .max-md\:sidebar{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); background-color: rgba(0,0,0, 0); } .max-md\:sidebar > .desktop-sidebar-bg{ height: 100%; width: 100%; opacity: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .max-md\:sidebar > form{ position: absolute; top: 0px; right: 0px; } } .max-md\:sidebar > form{ --tw-translate-x: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition-property: transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .max-md\:sidebar.active{ visibility: visible; --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); opacity: 1; display: block; } .max-md\:sidebar.active + .bg-filter { transition: opacity 0.15s ease-in-out, z-index 0s linear 0s; opacity: 1; visibility: visible; z-index: 30; } @media (min-width: 992px) { .max-md\:sidebar.active > form{ width: 28.75rem; background-color: var(--color-light); padding-top: 2rem; padding-bottom: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; } .max-md\:sidebar.active > .desktop-sidebar-bg{ opacity: 1; } .max-md\:sidebar.active > form{ width: 28.75rem; background-color: var(--color-light); padding-top: 2rem; padding-bottom: 2rem; padding-left: 1.25rem; padding-right: 1.25rem; } .max-md\:sidebar.active > .desktop-sidebar-bg{ opacity: 1; } } .max-md\:sidebar.active > form{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .js-hideable-item.max-md\:hidden { display: none; } .js-modal-content .max-md\:container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .max-md\:container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .max-md\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .max-md\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .max-md\:container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .max-md\:container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .max-md\:container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .max-md\:container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .max-md\:container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .max-md\:container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } .max-md\:fixed{ position: fixed; } .max-md\:top-0{ top: 0px; } .max-md\:left-0{ left: 0px; } .max-md\:left-18{ left: 1.125rem; } .max-md\:z-100{ z-index: 100; } .max-md\:order-1{ order: 1; } .max-md\:my-32{ margin-top: 2rem; margin-bottom: 2rem; } .max-md\:mr-32{ margin-right: 2rem; } .max-md\:mt-24{ margin-top: 1.5rem; } .max-md\:mb-32{ margin-bottom: 2rem; } .max-md\:mb-12{ margin-bottom: 0.75rem; } .max-md\:mt-16{ margin-top: 1rem; } .max-md\:ml-auto{ margin-left: auto; } .max-md\:mr-16{ margin-right: 1rem; } .max-md\:mb-16{ margin-bottom: 1rem; } .max-md\:\!block{ display: block !important; } .max-md\:flex{ display: flex; } .max-md\:hidden{ display: none; } .max-md\:h-full{ height: 100%; } .max-md\:h-300{ height: 18.75rem; } .max-md\:max-h-400{ max-height: 25rem; } .max-md\:w-full{ width: 100%; } .max-md\:w-screen{ width: 100vw; } .max-md\:flex-col{ flex-direction: column; } .max-md\:flex-col-reverse{ flex-direction: column-reverse; } .max-md\:items-end{ align-items: flex-end; } .max-md\:justify-end{ justify-content: flex-end; } .max-md\:justify-between{ justify-content: space-between; } .max-md\:overflow-y-auto{ overflow-y: auto; } .max-md\:border-b{ border-bottom-width: 1px; } .max-md\:border-light-material{ border-color: var(--color-light-material); } .max-md\:bg-light-surface{ background-color: var(--color-light-surface); } .max-md\:bg-light{ background-color: var(--color-light); } .max-md\:py-16{ padding-top: 1rem; padding-bottom: 1rem; } .max-md\:py-40{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .max-md\:py-24{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .max-md\:py-32{ padding-top: 2rem; padding-bottom: 2rem; } .max-md\:px-20{ padding-left: 1.25rem; padding-right: 1.25rem; } .max-md\:pt-16{ padding-top: 1rem; } .max-md\:pb-32{ padding-bottom: 2rem; } .max-md\:pt-8{ padding-top: 0.5rem; } .max-md\:pb-24{ padding-bottom: 1.5rem; } .max-md\:pt-64{ padding-top: 4rem; } .max-md\:text-p-small{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } .max-md\:text-h4{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } } @media (max-width: 767px){ .max-sm\:container { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (max-width: 575px) { .max-sm\:container{ padding-left: 1.25rem; padding-right: 1.25rem; } } @media (min-width: 576px) { .max-sm\:container { max-width: 540px } } @media (min-width: 768px) { .max-sm\:container { max-width: 720px } } @media (min-width: 992px) { .max-sm\:container { max-width: 960px } } @media (min-width: 1200px) { .max-sm\:container { max-width: 1152px } } @media (min-width: 1440px) { .max-sm\:container { max-width: 1440px } } .js-hideable-item.max-sm\:hidden { display: none; } .js-modal-content .max-sm\:container{ margin-bottom: 0px; padding-left: 0px; padding-right: 0px; } @media (min-width: 992px){ .js-modal-content .max-sm\:container .lg\:w-2\/3{ width: 58.333333%; } } .js-hideable-item.js-modal-content .max-sm\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child) { display: none; } .js-modal-content .max-sm\:container .lg\:w-2\/3 [data-glide-el="track"] ul li:not(:first-child){ display: none; } .js-modal-content .max-sm\:container .lg\:w-2\/3 img{ aspect-ratio: 1; height: auto; } @media (min-width: 992px){ .js-modal-content .max-sm\:container .lg\:w-1\/3{ width: 41.666667%; } } .js-modal-content .max-sm\:container .lg\:w-1\/3 h1 + .md\:mt-32{ margin-top: 1rem; } .js-modal-content .max-sm\:container .lg\:w-1\/3 fieldset.mt-32{ margin-top: 1.25rem; } .js-modal-content .max-sm\:container .lg\:w-1\/3 fieldset.mt-32 legend{ margin-bottom: 1rem; } .js-modal-content .max-sm\:container .lg\:w-1\/3 .js-stock-wrapper{ border-left-width: 0px; border-right-width: 0px; padding-left: 0px; padding-right: 0px; } .max-sm\:fixed{ position: fixed; } .max-sm\:relative{ position: relative; } .max-sm\:top-0{ top: 0px; } .max-sm\:left-0{ left: 0px; } .max-sm\:left-18{ left: 1.125rem; } .max-sm\:z-100{ z-index: 100; } .max-sm\:order-2{ order: 2; } .max-sm\:order-1{ order: 1; } .max-sm\:-mx-24{ margin-left: -1.5rem; margin-right: -1.5rem; } .max-sm\:mb-0{ margin-bottom: 0px; } .max-sm\:-mt-40{ margin-top: -2.5rem; } .max-sm\:mb-16{ margin-bottom: 1rem; } .max-sm\:mt-24{ margin-top: 1.5rem; } .max-sm\:mt-16{ margin-top: 1rem; } .max-sm\:mt-8{ margin-top: 0.5rem; } .max-sm\:mb-40{ margin-bottom: 2.5rem; } .max-sm\:mb-4{ margin-bottom: 0.25rem; } .max-sm\:mt-auto{ margin-top: auto; } .max-sm\:mr-16{ margin-right: 1rem; } .max-sm\:mt-0{ margin-top: 0px; } .max-sm\:mr-24{ margin-right: 1.5rem; } .max-sm\:\!block{ display: block !important; } .max-sm\:flex{ display: flex; } .max-sm\:hidden{ display: none; } .max-sm\:h-240{ height: 15rem; } .max-sm\:h-56{ height: 3.5rem; } .max-sm\:h-full{ height: 100%; } .max-sm\:max-h-400{ max-height: 25rem; } .max-sm\:w-1\/2{ width: 50%; } .max-sm\:w-full{ width: 100%; } .max-sm\:w-56{ width: 3.5rem; } .max-sm\:w-screen{ width: 100vw; } .max-sm\:max-w-120{ max-width: 7.5rem; } .max-sm\:flex-row-reverse{ flex-direction: row-reverse; } .max-sm\:flex-col{ flex-direction: column; } .max-sm\:flex-col-reverse{ flex-direction: column-reverse; } .max-sm\:flex-wrap{ flex-wrap: wrap; } .max-sm\:justify-between{ justify-content: space-between; } .max-sm\:gap-4{ gap: 0.25rem; } .max-sm\:overflow-x-auto{ overflow-x: auto; } .max-sm\:overflow-y-hidden{ overflow-y: hidden; } .max-sm\:whitespace-nowrap{ white-space: nowrap; } .max-sm\:border{ border-width: 1px; } .max-sm\:border-b{ border-bottom-width: 1px; } .max-sm\:border-t{ border-top-width: 1px; } .max-sm\:bg-light{ background-color: var(--color-light); } .max-sm\:p-16{ padding: 1rem; } .max-sm\:py-16{ padding-top: 1rem; padding-bottom: 1rem; } .max-sm\:py-8{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .max-sm\:px-20{ padding-left: 1.25rem; padding-right: 1.25rem; } .max-sm\:px-0{ padding-left: 0px; padding-right: 0px; } .max-sm\:py-24{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .max-sm\:pr-16{ padding-right: 1rem; } .max-sm\:pt-8{ padding-top: 0.5rem; } .max-sm\:pb-16{ padding-bottom: 1rem; } .max-sm\:pt-20{ padding-top: 1.25rem; } .max-sm\:pb-56{ padding-bottom: 3.5rem; } .max-sm\:pt-32{ padding-top: 2rem; } .max-sm\:pb-4{ padding-bottom: 0.25rem; } .max-sm\:pb-8{ padding-bottom: 0.5rem; } .max-sm\:pb-32{ padding-bottom: 2rem; } .max-sm\:pr-40{ padding-right: 2.5rem; } .max-sm\:pt-64{ padding-top: 4rem; } .max-sm\:text-p-small{ font-size: calc(var(--font-body-scale) * 0.875rem); line-height: calc(var(--font-body-line) * 1.5); } .max-sm\:text-p-large{ font-size: calc(var(--font-body-scale) * 1.125rem); line-height: calc(var(--font-body-line) * 1.5); } .max-sm\:text-h4{ font-size: calc(var(--font-heading-scale) * 1.75rem); line-height: calc(var(--font-heading-line) * 1.2); } .max-sm\:text-caption{ font-size: calc(var(--font-body-scale) * 0.75rem); line-height: calc(var(--font-body-line) * 1.5); } .max-sm\:text-h5{ font-size: calc(var(--font-heading-scale) * 1.25rem); line-height: calc(var(--font-heading-line) * 1.2); } } @media (max-width: 575px){ .js-hideable-item.max-xs\:hidden { display: none; } .max-xs\:order-1{ order: 1; } .max-xs\:-mx-20{ margin-left: -1.25rem; margin-right: -1.25rem; } .max-xs\:mt-8{ margin-top: 0.5rem; } .max-xs\:mr-16{ margin-right: 1rem; } .max-xs\:flex{ display: flex; } .max-xs\:hidden{ display: none; } .max-xs\:w-full{ width: 100%; } .max-xs\:flex-shrink-0{ flex-shrink: 0; } .max-xs\:flex-col{ flex-direction: column; } .max-xs\:items-center{ align-items: center; } .max-xs\:py-8{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .max-xs\:px-16{ padding-left: 1rem; padding-right: 1rem; } }