@font-face { font-family: swiper-icons; src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); font-weight: 400; font-style: normal } :root { --swiper-theme-color: #007aff } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 } .swiper-vertical>.swiper-wrapper { flex-direction: column } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box } .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) } .swiper-pointer-events { touch-action: pan-y } .swiper-pointer-events.swiper-vertical { touch-action: pan-x } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform } .swiper-slide-invisible-blank { visibility: hidden } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, .15) } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none } .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory } .swiper-centered>.swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999 } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-left: var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-top: var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) } .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size) } :root { --swiper-navigation-size: 44px } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(44px/ 44 * 27); width: calc(var(--swiper-navigation-size)/ 44 * 27); height: 44px; height: var(--swiper-navigation-size); margin-top: calc(0px - (44px/ 2)); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #007aff; color: var(--swiper-navigation-color, var(--swiper-theme-color)) } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important } .swiper-button-next:after, .swiper-button-prev:after { text-transform: none !important } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: 44px; font-size: var(--swiper-navigation-size); letter-spacing: 0; font-variant: normal; font-variant: initial; line-height: 1 } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev' } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next' } .swiper-button-lock { display: none } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-disabled>.swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100% } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0 } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(.33); position: relative } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(.33) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(.66) } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(.33) } .swiper-pagination-bullet { width: 8px; width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: 8px; height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: #000; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: .2; opacity: var(--swiper-pagination-bullet-inactive-opacity, .2) } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer } .swiper-pagination-bullet:only-child { display: none !important } .swiper-pagination-bullet-active { opacity: 1; opacity: var(--swiper-pagination-bullet-opacity, 1); background: #007aff; background: var(--swiper-pagination-color, var(--swiper-theme-color)) } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0) } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: .2s transform, .2s top } .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px) } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap } .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform, .2s left } .swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform, .2s right } .swiper-pagination-progressbar { background: rgba(0, 0, 0, .25); position: absolute } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: #007aff; background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top } .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0 } .swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical>.swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0 } .swiper-pagination-lock { display: none } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1) } .swiper-scrollbar-disabled>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important } .swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-scrollbar-lock { display: none } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center } .swiper-zoom-container>canvas, .swiper-zoom-container>img, .swiper-zoom-container>svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain } .swiper-slide-zoomed { cursor: move } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid #007aff; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff } .swiper-lazy-preloader-black { --swiper-preloader-color: #000 } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000 } .swiper-free-mode>.swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto } .swiper-grid>.swiper-wrapper { flex-wrap: wrap } .swiper-grid-column>.swiper-wrapper { flex-wrap: wrap; flex-direction: column } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube { overflow: visible } .swiper-cube .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100% } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0 } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next+.swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; backface-visibility: hidden } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0 } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px) } .swiper-flip { overflow: visible } .swiper-flip .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1 } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; backface-visibility: hidden } .swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height } .swiper-cards { overflow: visible } .swiper-cards .swiper-slide { transform-origin: center bottom; backface-visibility: hidden; overflow: hidden } div#tidio-chat, div#smile-ui-container, div#smile-ui-lite-container { transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } body[data-fluorescent-overlay-open="true"] div#tidio-chat, body[data-fluorescent-overlay-open="true"] div#smile-ui-container, body[data-fluorescent-overlay-open="true"] div#smile-ui-lite-container { opacity: 0; pointer-events: none; } div#insta-feed { padding: 0 !important; } div#insta-feed { margin-top: 0; } div#insta-feed h2 { text-align: left; margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8); } div#insta-feed .slider-arrow { margin-left: calc(4px * 2); margin-left: var(--spacing-2); margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .recharge-subscription-widget.shopify-block .rc-widget { padding: 0; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio { padding: 0; margin-top: calc(4px * 1); margin-top: var(--spacing-1); background-color: transparent; background-color: initial; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio--active~.rc-selling-plans { background-color: transparent; background-color: initial; padding: 0; margin-left: calc(4px * 7); margin-left: var(--spacing-7); margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); font-size: var(--font-size-body-75); } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio--active~.rc-selling-plans label.rc-selling-plans-dropdown { position: relative; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio--active~.rc-selling-plans label.rc-selling-plans-dropdown:before { content: ""; position: absolute; top: 56%; right: calc(4px * 3); right: var(--spacing-3); width: 10px; height: 10px; pointer-events: none; transform: translateY(-56%); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 7.438 12 17.563 22.125 7.438' stroke='currentColor' stroke-width='2.75'/%3E%3C/svg%3E"); } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio--active~.rc-selling-plans select.rc-selling-plans-dropdown__select { margin-top: calc(4px * 2); margin-top: var(--spacing-2); cursor: pointer; border-color: var(--color-border-input); transition: border-color 0.3s ease-in-out; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio--active~.rc-selling-plans select.rc-selling-plans-dropdown__select:hover { border-color: var(--color-text); } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio .rc-radio__input { margin-right: 0; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__radio .rc-radio .rc-radio__label { margin-left: calc(4px * 3); margin-left: var(--spacing-3); line-height: var(--line-height-body); } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__checkbox { padding: 0; } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__checkbox .rc-checkbox__label { margin-left: calc(4px * 3); margin-left: var(--spacing-3); } .recharge-subscription-widget.shopify-block .rc-widget .rc-template__checkbox .rc-selling-plans { margin-left: calc(4px * 7); margin-left: var(--spacing-7); margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); font-size: var(--font-size-body-75); } .recharge-subscription-widget.shopify-block .rc-widget .rc-subscription-details { padding: 0; margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .recharge-subscription-widget.shopify-block .rc-widget .rc-subscription-details svg { margin: 0; } .recharge-subscription-widget.shopify-block .rc-widget .rc-subscription-details span { margin-left: calc(4px * 3); margin-left: var(--spacing-3); line-height: var(--line-height-body); } .login__main div#rc_login { display: flex; flex-wrap: wrap; text-align: left; } .login__main div#rc_login h5 { margin-right: calc(4px * 3); margin-right: var(--spacing-3); font-size: var(--font-size-body-100); } .login__main div#rc_login a { -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.2s ease-in-out; } .login__main div#rc_login a:hover { opacity: 0.7; } :root { --media-below-480: (max-width: 479px); --media-above-480: (min-width: 480px); --media-below-720: (max-width: 719px); --media-above-720: (min-width: 720px); --media-below-960: (max-width: 1400px); --media-above-960: (min-width: 1401px); --media-below-1200: (max-width: 1199px); --media-above-1200: (min-width: 1200px); --media-below-1400: (max-width: 1399px); --media-above-1400: (min-width: 1400px); --max-width: 1400px; --max-width-narrow: 747px; --flyout-mobile-gap: var(--spacing-9); --flyout-width: calc(375px + var(--flyout-mobile-gap)); } @media (min-width: 720px) { :root { --flyout-width: 460px; } } :root { --spacing-unit: 4px; --spacing-unit-half: 2px; --spacing-1: calc(var(--spacing-unit) * 1); --spacing-2: calc(var(--spacing-unit) * 2); --spacing-3: calc(var(--spacing-unit) * 3); --spacing-4: calc(var(--spacing-unit) * 4); --spacing-5: calc(var(--spacing-unit) * 5); --spacing-6: calc(var(--spacing-unit) * 6); --spacing-7: calc(var(--spacing-unit) * 7); --spacing-8: calc(var(--spacing-unit) * 8); --spacing-9: calc(var(--spacing-unit) * 9); --spacing-10: calc(var(--spacing-unit) * 10); --spacing-11: calc(var(--spacing-unit) * 11); --spacing-12: calc(var(--spacing-unit) * 12); --spacing-15: calc(var(--spacing-unit) * 15); --spacing-16: calc(var(--spacing-unit) * 16); --spacing-17: calc(var(--spacing-unit) * 17); --spacing-18: calc(var(--spacing-unit) * 18); --spacing-20: calc(var(--spacing-unit) * 20); --spacing-25: calc(var(--spacing-unit) * 25); --spacing-30: calc(var(--spacing-unit) * 30); --box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.06); --box-shadow-darker: 0px 4px 6px rgba(0, 0, 0, 0.15); --box-shadow-double: 0px 1px 2px rgba(0, 0, 0, 0.09), 0px 3px 8px rgba(0, 0, 0, 0.14); --box-shadow-offset-bottom: 4px; --z-index-bar: 300; --z-index-header: 500; --z-index-announcement-bar: 510; --z-index-drawers: 520; --z-index-filter-bar-wash: 400; --z-index-filter-bar: 450; --z-index-popup: 400; --z-index-modal-wash: 1200; --z-index-modal: 1300; --z-index-theme-editor-offset: 2000; --z-index-page-transition-overlay: 2100; --z-index-quick-search: 480 } @media (min-width: 960px) { :root { --z-index-quick-search: 520; } } :root { --space-outer: 3.3vw } @supports (padding: 0 clamp(18px, 3.3vw, 3.3vw)) { @media (max-width: 719px) { :root { --space-outer: max(18px, min(3.3vw, 3.3vw)); } } } :root { --height-input: 48px; --quick-buy-button-height: 60px; --easing: cubic-bezier(0.33, 0, 0, 1); --duration-ultra-fast: 100ms; --duration-fast: 300ms; --duration-normal: 500ms; --duration-slow: 1200ms; --delay-small: 33ms; --delay-normal: 67ms; --delay-long: 133ms; --aspect-ratio-square: 1; --aspect-ratio-portrait: 2 / 3; --aspect-ratio-portrait-alt: 4 / 5; --aspect-ratio-landscape: 3 / 2; --aspect-ratio-landscape-alt: 5 / 4; --aspect-ratio-widescreen: 16 / 9; --aspect-ratio-ultrawide: 21 / 9 } html { background-color: var(--color-background); } html:not(.no-js) body.user-is-tabbing :focus { outline-color: var(--color-text-link); } html:not(.no-js) body:not(.user-is-tabbing) :focus { outline: 0; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-weight: var(--font-body-weight); font-style: var(--font-body-style); font-size: var(--font-size-body-100); line-height: var(--line-height-body); color: var(--color-text); letter-spacing: var(--font-body-base-letter-spacing); -webkit-font-smoothing: antialiased; } html { scroll-padding-top: 20px; } html.header-sticky-enabled { scroll-padding-top: calc(var(--header-desktop-sticky-height) + 20px); } @media (max-width: 1400px) { html.header-sticky-enabled { scroll-padding-top: calc(var(--height-header) + 20px) } } a { color: inherit; -webkit-text-decoration: none; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; } p { margin: 0; } p { margin: 0; } input:-webkit-autofill::first-line { font-size: var(--font-body-base-size); font-family: var(--font-body); } .theme-editor-scroll-offset { position: fixed; height: var(--height-header); top: 0; left: 0; right: 0; opacity: 0; z-index: 2000; z-index: var(--z-index-theme-editor-offset); pointer-events: none; } @media (min-width: 960px) { .theme-editor-scroll-offset { height: var(--header-desktop-sticky-height) } } body>.page { background-color: var(--color-background); margin: 0 auto; width: 100%; min-height: 100vh; display: flex; flex-direction: column; } .page-transition { z-index: 1000; opacity: 1; background-color: var(--color-background); position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: all; transition: opacity 0.3s ease; } .no-js .page-transition { display: none; } .shopify-challenge__container { margin: calc(4px * 10) auto !important; margin: var(--spacing-10) auto !important; } @media (min-width: 960px) { .shopify-challenge__container { margin: calc(4px * 25) auto calc(3.3vw * 2) !important; margin: var(--spacing-25) auto calc(var(--space-outer) * 2) !important } } .shopify-challenge__container .shopify-challenge__message { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .shopify-challenge__container .shopify-challenge__button.btn { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } @media (max-width: 959px) { .smart-table, .smart-table tbody { display: block; width: 100%; } .smart-table thead { display: none; } .smart-table tr, .smart-table th, .smart-table td { display: block; padding: 0; text-align: left; white-space: normal; } .smart-table tr { padding: calc(4px * 5) 0; padding: var(--spacing-5) 0; margin-top: calc(4px * 5) 0; margin-top: var(--spacing-5) 0; } .smart-table tr+tr { border-top: 1px solid var(--color-border); } .smart-table th[data-label]:before, .smart-table td[data-label]:before { content: attr(data-label) ":\00A0"; font-weight: bold; } .smart-table td { border: none; } .smart-table td:empty { display: none; } .smart-table td:first-child { margin-bottom: 4px; margin-bottom: var(--spacing-unit); } .smart-table td:first-child:before { content: ""; } } #page-transition-overlay { z-index: 2100; z-index: var(--z-index-page-transition-overlay); background-color: "#fff"; background-color: var(--color-background, "#fff"); position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity 300ms ease, visibility 0ms linear 300ms; opacity: 0; visibility: hidden; } .no-js #page-transition-overlay { display: none; } #page-transition-overlay.skip-animation { transition-duration: 0ms, 0ms; } #page-transition-overlay.active { opacity: 1; visibility: visible; transition: opacity 300ms ease, visibility 0ms linear 0ms; } .grid { display: flex; flex-wrap: wrap; padding: calc((4px * 5) * 0.5); padding: calc(calc(4px * 5) * 0.5); padding: calc(var(--spacing-5) * 0.5); } .grid__item { width: 100%; padding: calc((4px * 5) * 0.5); padding: calc(calc(4px * 5) * 0.5); padding: calc(var(--spacing-5) * 0.5); } .grid__item--one-half { width: 50%; } .grid__item--one-third { width: calc(1 / 3 * 100%); } .grid__item--one-quarter { width: 25%; } .grid__item--two-thirds { width: calc(2 / 3 * 100%); } .visually-hidden { position: absolute !important; } .visually-hidden { overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); } .no-js:not(html) { display: none; } .no-js .no-js:not(html) { display: block; } .no-js .js { display: none; } .supports-no-cookies:not(html) { display: none; } html.supports-no-cookies .supports-no-cookies:not(html) { display: block; } html.supports-no-cookies .supports-cookies { display: none; } ul.list-reset, ul.list-reset li, ul.list-reset ul li { margin: 0; padding: 0; text-indent: 0; list-style-type: none; } @media (min-width: 480px) { .hover .image { overflow: hidden; } .hover .image>* { transition: transform 1200ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-slow) var(--easing); } .hover:hover .image>* { transform: scale(1.05); } } form { margin: 0; } input, textarea, select { display: inline-block; border-radius: 0; border: 1px solid #000; position: relative; font-size: inherit; font-family: inherit; font-weight: var(--font-body-weight); background-color: transparent; color: inherit; -webkit-appearance: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } input option, textarea option, select option { background-color: var(--color-background); } input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus { border-color: var(--color-text); } input[type="search"]::-ms-clear { display: none; width: 0; height: 0; } input[type="search"]::-ms-reveal { display: none; width: 0; height: 0; } 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 { display: none; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="checkbox"] { position: relative; vertical-align: middle; width: 0.9em; width: var(--font-size-body-75, 0.9em); height: 0.9em; height: var(--font-size-body-75, 0.9em); margin: 0; border: 1px solid var(--color-border-input); cursor: pointer; } input[type="checkbox"]:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1.88 11.988 6.21 6.103L22.467 3.83' stroke='currentColor' stroke-width='3.055'/%3E%3C/svg%3E"); transform: scale(0.75); opacity: 0; transition: opacity 0.3s; } input[type="checkbox"]:checked { border-color: var(--color-text); } input[type="checkbox"]:checked:before { opacity: 1; } input[type="checkbox"]+label { display: inline-block; vertical-align: middle; padding-left: calc(4px * 1); padding-left: var(--spacing-1); } input[type="radio"] { position: relative; border-radius: 100%; width: calc(4px * 4); width: var(--spacing-4); height: calc(4px * 4); height: var(--spacing-4); border: 1px solid var(--color-border); background-color: var(--color-background); cursor: pointer; } input[type="radio"]:before { content: ""; position: absolute; border-radius: 100%; width: calc(4px * 2); width: var(--spacing-2); height: calc(4px * 2); height: var(--spacing-2); margin: auto; background-color: var(--color-text); top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } input[type="radio"]:checked { border-color: var(--color-text); } input[type="radio"]:checked:before { opacity: 1; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .input, input.spr-form-input, textarea.spr-form-input { width: 100%; border: 1px solid var(--color-border-input); color: var(--color-text-input); } .input.input--error, input.spr-form-input.input--error, textarea.spr-form-input.input--error { border-color: var(--color-text-error); } .input.input--round, input.spr-form-input.input--round, textarea.spr-form-input.input--round { border-radius: 48px; border-radius: var(--height-input); padding: 0 calc(4px * 5); padding: 0 var(--spacing-5); } input.input, select.input, input.spr-form-input { height: 48px; height: var(--height-input); padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); } input.input.has-errors, select.input.has-errors, input.spr-form-input.has-errors { border-color: var(--color-text-error); } textarea.input, textarea.spr-form-input { resize: vertical; padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-body-100); vertical-align: top; } select.input { cursor: pointer; } .select-wrapper { position: relative; } .select-wrapper select { padding-right: calc(4px * 8); padding-right: var(--spacing-8); } .select-wrapper .icon { position: absolute; right: calc(4px * 3); right: var(--spacing-3); top: 50%; width: 10px; height: 10px; display: flex; color: var(--color-icon); pointer-events: none; transform: translateY(-50%); transition: color 0.3s ease; } .select-wrapper .icon.hidden { display: none; } .select-wrapper select { transition: border-color 0.3s ease-in-out; } .select-wrapper select:hover { border-color: var(--color-text); } .select-wrapper select:hover+.icon { color: var(--color-text); } .input::-moz-placeholder { color: inherit; opacity: 0.6; } .input::placeholder { color: inherit; opacity: 0.6; } label { display: block; } label+input.input, label+select.input, label+textarea.input, input.input+label { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .input-control__container { display: flex; flex-wrap: wrap; margin: calc((4px * 2) * -1); margin: calc(calc(4px * 2) * -1); margin: calc(var(--spacing-2) * -1); } .input-control { width: 100%; padding: calc(4px * 2); padding: var(--spacing-2); } @media (min-width: 480px) { .input-control.input-control--half { width: calc(50% - (4px * 2)); width: calc(50% - calc(4px * 2)); width: calc(50% - var(--spacing-2)); width: 50% } } .rte p, .rte li, .shopify-policy__body p, .shopify-policy__body li { font-family: var(--font-body); font-weight: var(--font-body-weight); font-style: var(--font-body-style); line-height: var(--line-height-body); letter-spacing: var(--font-body-base-letter-spacing); } .rte p, .rte ol, .rte ul, .shopify-policy__body p, .shopify-policy__body ol, .shopify-policy__body ul { margin-top: calc(4px * 4); margin-top: var(--spacing-4); margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-2); } .rte p ol, .rte p ul, .rte ol ol, .rte ol ul, .rte ul ol, .rte ul ul, .shopify-policy__body p ol, .shopify-policy__body p ul, .shopify-policy__body ol ol, .shopify-policy__body ol ul, .shopify-policy__body ul ol, .shopify-policy__body ul ul { margin-top: calc(4px * 4); margin-top: var(--spacing-4); margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } .rte p:first-child, .rte ol:first-child, .rte ul:first-child, .shopify-policy__body p:first-child, .shopify-policy__body ol:first-child, .shopify-policy__body ul:first-child { margin-top: 0; } .rte p:last-child, .rte ol:last-child, .rte ul:last-child, .shopify-policy__body p:last-child, .shopify-policy__body ol:last-child, .shopify-policy__body ul:last-child { margin-bottom: 0; } .rte li, .shopify-policy__body li { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .rte li:first-child, .shopify-policy__body li:first-child { margin-top: 0; } .rte iframe, .rte video, .shopify-policy__body iframe, .shopify-policy__body video { width: 100%; display: block; } .rte:not(.non-page-rte) iframe, .rte:not(.non-page-rte) video, .rte:not(.non-page-rte) img, .rte:not(.non-page-rte) blockquote, .rte:not(.non-page-rte) table, .rte:not(.non-page-rte) div, .rte:not(.non-page-rte) .rte__iframe, .rte:not(.non-page-rte) .rte__table-wrapper, .shopify-policy__body:not(.non-page-rte) iframe, .shopify-policy__body:not(.non-page-rte) video, .shopify-policy__body:not(.non-page-rte) img, .shopify-policy__body:not(.non-page-rte) blockquote, .shopify-policy__body:not(.non-page-rte) table, .shopify-policy__body:not(.non-page-rte) div, .shopify-policy__body:not(.non-page-rte) .rte__iframe, .shopify-policy__body:not(.non-page-rte) .rte__table-wrapper { margin: calc(4px * 7) 0; margin: var(--spacing-7) 0; } .rte div>iframe, .shopify-policy__body div>iframe { margin: 0; } .rte table, .shopify-policy__body table { width: 100%; border-collapse: collapse; } .rte table:first-child, .shopify-policy__body table:first-child { margin-top: 0; } .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th { border: 1px solid var(--color-border); padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4); } .rte table th, .shopify-policy__body table th { background-color: var(--color-background-meta); text-align: left; font-weight: inherit; background: var(--color-background-meta); } .rte hr, .shopify-policy__body hr { background-color: var(--color-border); border: none; height: 1px; margin: calc(4px * 8) 0; margin: var(--spacing-8) 0; } .rte i, .rte em, .shopify-policy__body i, .shopify-policy__body em { font-style: var(--font-body-italic); } .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6, .shopify-policy__body h1, .shopify-policy__body h2, .shopify-policy__body h3, .shopify-policy__body h4, .shopify-policy__body h5, .shopify-policy__body h6 { margin-top: calc(4px * 8); margin-top: var(--spacing-4); margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); font-family: var(--font-heading); line-height: var(--line-height-heading); font-weight: var(--font-heading-weight); letter-spacing: var(--font-heading-base-letter-spacing); text-transform: var(--font-heading-text-transform); color: var(--color-text); } .rte h1, .shopify-policy__body h1 { font-size: clamp(34px, 2.8vw, 54px); } .rte h2, .shopify-policy__body h2 { font-size: clamp(24px, 2.5vw, 47px); } .rte h3, .shopify-policy__body h3 { font-size: clamp(20px, 2.1vw, 40px); } .rte h4, .shopify-policy__body h4 { font-size: clamp(16px, 1.6vw, 31px); } .rte h5, .shopify-policy__body h5 { font-size: clamp(14px, 1.4vw, 27px); } .rte h6, .shopify-policy__body h6 { font-size: clamp(11px, 1.2vw, 23px); } .slideshow .rte p, .shopify-policy__body p { font-size: clamp(11px, 1.2vw, 24px) !important; } .rte h5, .rte h6, .shopify-policy__body h5, .shopify-policy__body h6 {} .rte a, .shopify-policy__body a { color: var(--color-text-link); -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.25s; } .rte a:hover, .shopify-policy__body a:hover { opacity: 0.6; } .rte img, .shopify-policy__body img { display: block; max-width: 100%; } .rte strong, .rte b, .shopify-policy__body strong, .shopify-policy__body b { font-weight: var(--font-body-bold-weight); } .rte blockquote, .shopify-policy__body blockquote { padding-left: calc(4px * 6); padding-left: var(--spacing-6); border-left: solid 1px var(--color-border); } .rte blockquote p, .shopify-policy__body blockquote p { margin: 0; } .rte .rte__table-wrapper, .shopify-policy__body .rte__table-wrapper { overflow-x: auto; position: relative; margin: calc(4px * 4) 0; margin: var(--spacing-4) 0; } .rte .rte__table-wrapper table, .shopify-policy__body .rte__table-wrapper table { margin: 0; } .rte .rte__iframe iframe, .shopify-policy__body .rte__iframe iframe { width: 100%; aspect-ratio: 16 / 9; aspect-ratio: var(--aspect-ratio-widescreen); } .shopify-section.footer__parent { margin-top: auto; background-color: var(--color-background-footer); overflow: visible; } .footer { color: var(--color-text-footer-subdued); } .footer a:hover { color: var(--color-text-footer); } .footer .image.footer__image { max-width: var(--image-max-width); } .footer .social-icons { margin-top: 2em; } .footer .social-icons .icon { width: 20px; height: 20px; } .footer .social-icons a { color: var(--color-text-footer); opacity: 1; transition: opacity 0.2s ease; } .footer .footer__follow-on-shop { margin-top: 2em; } .footer .social-icons+.footer__follow-on-shop { margin-top: calc(4px * 3); margin-top: var(--spacing-3); margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); } @media (min-width: 960px) { .footer .social-icons+.footer__follow-on-shop { margin-top: calc(4px * 4); margin-top: var(--spacing-4) } } .footer .payment-icons__icon .icon { display: block; } .footer .disclosure__toggle { color: var(--color-text-footer); } .footer.section { padding-top: calc(4px * 8); padding-top: var(--spacing-8); padding-bottom: calc(4px * 8); padding-bottom: var(--spacing-8); } @media (min-width: 960px) { .footer.section { padding-top: calc(4px * 12); padding-top: var(--spacing-12); padding-bottom: calc(4px * 16); padding-bottom: var(--spacing-16) } } .footer__groups { display: flex; flex-direction: column; } @media (min-width: 960px) { .footer__groups { display: flex; flex-direction: row; flex-wrap: wrap } } .footer__group { width: 100%; border-bottom: 1px solid var(--color-background-input); } .footer__group:last-of-type { border-bottom: none; } @media (min-width: 960px) { .footer__group { border-bottom: none; width: var(--desktop-width); padding: 0; padding-right: var(--desktop-padding); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); flex-shrink: 0; flex-grow: 0 } } .footer__group.hide-title-on-desktop .footer__group-content .image.footer__image:first-child, .footer__group.hide-title-on-desktop .footer__group-content .footer_text:first-child { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } @media (min-width: 960px) { .footer__group.hide-title-on-desktop .footer__header { display: none } } @media (min-width: 960px) { .footer__group.footer__group--menu { grid-column: span 2 } } @media (max-width: 959px) { .footer__group.footer__group--text .footer__text { margin-bottom: 0 } } @media (max-width: 959px) { .footer__group.footer__group--spacer { display: none } } @media (min-width: 960px) { .footer__group--mobile { display: none } } .footer__header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: calc(4px * 4) 0; padding: var(--spacing-4) 0; transition: padding 0.2s ease; text-align: left; color: var(--color-text-footer); } @media (max-width: 959px) { .footer__header.footer__header--collapsed { display: none } } .footer__group--collapse .footer__header { cursor: pointer; } .footer__header.open .footer__arrow { opacity: 1; transform: rotateX(-180deg); transition: transform 0.25s, opacity 0.25s; } @media (min-width: 960px) { .footer__header { display: none; padding: 0; margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); pointer-events: none } h4.footer__header, h3.footer__header { display: block; pointer-events: all; cursor: auto; cursor: initial; } .footer__group--collapse .footer__header { cursor: auto; cursor: initial; } } .footer__heading {} .footer__arrow { display: block; transition: transform 0.25s; color: var(--color-text-footer); opacity: 0.7; transform-origin: center; } @media (min-width: 960px) { .footer__arrow { display: none } } .footer__arrow .icon { width: 14px; height: 14px; display: flex; align-items: center; } .footer__group-content { padding-top: calc(4px * 4); padding-top: var(--spacing-4); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); } .footer__group--collapse .footer__group-content { display: none; } .footer__header+.footer__group-content { padding-top: 0; } @media (min-width: 960px) { .footer__group-content { display: block !important } .footer__group-content { padding: 0; width: 100% } .footer__group--collapse .footer__group-content { display: block !important; } } .footer__text { margin-bottom: calc(4px * 9); margin-bottom: var(--spacing-9); } .footer__text a { -webkit-text-decoration: underline; text-decoration: underline; } .footer__image { margin-top: calc(4px * 6); margin-top: var(--spacing-6); margin-bottom: calc(4px * 6); margin-bottom: var(--spacing-6); } .footer__text+.footer__image { margin-bottom: 0; } .footer__links { display: flex; } .footer__links ul { width: 100%; margin: 0; padding: 0; list-style: none; } .footer__links li+li { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .footer__links a:hover { -webkit-text-decoration: underline; text-decoration: underline; } .footer__newsletter { color: var(--color-text-footer); } .footer__newsletter .footer__text { margin-top: 0; margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .footer__newsletter .form-status__message { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .footer__newsletter .footer__newsletter-inner { position: relative; } .footer__newsletter .input[type="email"] { color: inherit; height: 50px; margin-top: 0; padding: calc(4px * 4) 0; padding: var(--spacing-4) 0; border: none; border-bottom: 1px solid currentColor; border-radius: 0; } .footer__newsletter p { margin: 0; } .footer__newsletter .newsletter-form { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .footer__newsletter .footer__newsletter-button { position: absolute; right: 0; bottom: 0; height: 100%; text-transform: uppercase; font-size: var(--font-size-body-50); letter-spacing: 0.075em; color: var(--color-text-footer); transition: color 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out; transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out; transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, -webkit-text-decoration 0.2s ease-in-out; } .footer__newsletter .footer__newsletter-button:hover { color: var(--color-text-footer-subdued); } .footer__bottom { margin-top: calc(4px * 8); margin-top: var(--spacing-8); } @media (min-width: 960px) { .footer__bottom { display: flex; justify-content: space-between; margin-top: calc(4px * 3); margin-top: var(--spacing-3) } } .footer__bottom-left .disclosure-form { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .footer__bottom-right { display: flex; align-items: center; margin-top: calc(4px * 8); margin-top: var(--spacing-8); } @media (min-width: 960px) { .footer__bottom-right { margin-top: 0 } } .footer__selectors { display: flex; } .selectors-form__item+.selectors-form__item { margin-left: calc(4px * 2); margin-left: var(--spacing-2); } .footer__mobile-social-icons { margin-top: calc(4px * 7); margin-top: var(--spacing-7); display: block; padding: 0 calc(4px * 7); padding: 0 var(--spacing-7); } @media (min-width: 960px) { .footer__mobile-social-icons { display: none } } .footer__mobile-social-icons .social-icons:empty { margin-top: 50px; } .footer__credits {} @media (min-width: 960px) { .footer__bottom+.footer__credits, .footer__mobile-social-icons+.footer__credits { margin-top: calc(4px * 5); margin-top: var(--spacing-5) } } .shopify-section.header__outer-wrapper { z-index: 500; z-index: var(--z-index-header); overflow: visible; position: relative; } html.sticky-header-enabled .shopify-section.header__outer-wrapper { position: sticky; top: 0; } @media (min-width: 1401px) { html.sticky-header-enabled .shopify-section.header__outer-wrapper { top: 0; top: var(--header-desktop-sticky-position, 0) } } @media (max-width: 1400px) { html.sticky-header-enabled[data-enable-sticky-announcement-bar*="mobile"] .shopify-section.header__outer-wrapper { top: var(--announcement-height) } } @media (min-width: 1401px) { html.sticky-header-enabled[data-enable-sticky-announcement-bar*="desktop"] .shopify-section.header__outer-wrapper { top: calc(0px + var(--announcement-height)); top: calc(var(--header-desktop-sticky-position, 0px) + var(--announcement-height)) } } html.sticky-header-active body.scroll-lock .shopify-section.header__outer-wrapper { position: fixed; left: 0; right: 0; } .header__space { width: 100%; height: var(--announcement-height); position: absolute; top: 0; left: 0; pointer-events: none; } @media (min-width: 1401px) { .header__space { height: calc(var(--announcement-height) + (calc(var(--header-desktop-sticky-position) * -1))) } } .header { --size-icon-touch: 40px; --size-icon-touch-mobile: 41px; background-color: var(--color-background-header); color: var(--color-text-header); transition: background-color 500ms cubic-bezier(0.33, 0, 0, 1); transition: background-color var(--duration-normal) var(--easing); -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 0; } @media (min-width: 1401px) { .header { padding-top: calc(4px * 3); padding-top: var(--spacing-3) } } .header .image { background-color: transparent; } .header .regular-logo .image__img.lazyloaded, .header .trasparent-logo .image__img.lazyloaded { transition: none; } @media (min-width: 1401px) { .header.header--navigation-below.header--inline { padding-bottom: calc(4px * 3); padding-bottom: var(--spacing-3) } } .header .header__skip-to-content.btn { visibility: hidden; position: absolute; top: calc(4px * 10); top: var(--spacing-10); left: 0; } .user-is-tabbing .header .header__skip-to-content.btn { visibility: visible; } .header__inner { box-shadow: 0px calc(var(--divider-width) * -1) 0px currentColor inset; max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; } @media (max-width: 1500px) { .header__inner { max-width: calc(100vw - 3.3vw - 3.3vw); max-width: calc(100vw - var(--space-outer) - var(--space-outer)) } } .header__inner .social-icons { flex-wrap: nowrap; } .header__inner .social-icons li .icon { display: flex; } .header__inner .social-icons li, .header__inner .social-icons li .icon, .header__inner .social-icons li svg { width: 18px; height: 18px; } .header__inner .social-icons .icon { color: currentColor; } .header__inner [data-scroll-container], .header__inner [data-scroll-container][data-axis="horizontal"] { max-width: 100%; overflow: visible; overflow: initial; overflow-x: auto; } .header__inner [data-scroll-container] .scroll-button[data-position="end"], .header__inner [data-scroll-container] .scroll-button[data-position="start"], .header__inner [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="end"], .header__inner [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="start"] { position: relative; flex: 0 0 30px; box-shadow: none; box-shadow: initial; background-color: transparent; overflow: hidden; } .header__inner [data-scroll-container].scroll-container-initialized .scroll-button[data-position="end"], .header__inner [data-scroll-container].scroll-container-initialized .scroll-button[data-position="start"], .header__inner [data-scroll-container][data-axis="horizontal"].scroll-container-initialized .scroll-button[data-position="end"], .header__inner [data-scroll-container][data-axis="horizontal"].scroll-container-initialized .scroll-button[data-position="start"] { transition: width 500ms cubic-bezier(0.33, 0, 0, 1), flex-basis 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: width var(--duration-normal) var(--easing), flex-basis var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } .header__inner [data-scroll-container] .scroll-overflow-indicator-wrap, .header__inner [data-scroll-container][data-axis="horizontal"] .scroll-overflow-indicator-wrap { position: relative; width: 1px; height: 100%; overflow: hidden; } .header__inner [data-scroll-container] .scroll-overflow-indicator, .header__inner [data-scroll-container][data-axis="horizontal"] .scroll-overflow-indicator { width: 1px; background: currentColor; height: 50%; top: 25%; display: block; opacity: 0.5; position: absolute; } .header__inner [data-scroll-container] [data-scroll-container-viewport], .header__inner [data-scroll-container][data-axis="horizontal"] [data-scroll-container-viewport] { display: flex; width: 100%; } .header__inner [data-scroll-container][data-at-start="true"] .scroll-overflow-indicator-wrap[data-position="start"], .header__inner [data-scroll-container][data-at-end="true"] .scroll-overflow-indicator-wrap[data-position="end"], .header__inner [data-scroll-container][data-axis="horizontal"][data-at-start="true"] .scroll-overflow-indicator-wrap[data-position="start"], .header__inner [data-scroll-container][data-axis="horizontal"][data-at-end="true"] .scroll-overflow-indicator-wrap[data-position="end"] { opacity: 0; width: 0px; } .header__inner [data-scroll-container][data-at-start="true"] .scroll-button[data-position="start"], .header__inner [data-scroll-container][data-at-end="true"] .scroll-button[data-position="end"], .header__inner [data-scroll-container][data-axis="horizontal"][data-at-start="true"] .scroll-button[data-position="start"], .header__inner [data-scroll-container][data-axis="horizontal"][data-at-end="true"] .scroll-button[data-position="end"] { opacity: 0; pointer-events: none; width: 0px; flex-basis: 0px; } .header__row { display: flex; justify-content: space-between; align-items: center; } .header__row.three-segment { display: grid; grid-template-columns: 1fr auto 1fr; } .header__row.logo-only { justify-content: center; } .header--has-social-links .header__row.logo-only, .header--has-country-or-locale .header__row.logo-only { margin-top: calc(-1 * (4px * 4)); margin-top: calc(-1 * calc(4px * 4)); margin-top: calc(-1 * var(--spacing-4)); } .header--has-social-links.header--has-logo .header__row.logo-only, .header--has-country-or-locale.header--has-logo .header__row.logo-only { margin-top: calc(-1 * (4px * 2)); margin-top: calc(-1 * calc(4px * 2)); margin-top: calc(-1 * var(--spacing-2)); } .header__row .header__row-segment { display: flex; flex-shrink: 0; align-items: center; } @media (max-width: 1400px) { .header__row .header__row-segment { flex-shrink: 1 } } .header__row .header__row-segment.contains-nav { flex-shrink: 1; overflow-x: hidden; align-self: stretch; } .header__row .header__row-segment.left .header__icon-touch:first-child { margin-left: -9px; } @media (max-width: 1400px) { .header__row .header__row-segment.left .header__icon-touch:first-child { margin-left: -10px } } .header__row .header__row-segment.right { justify-content: flex-end; } .header__row .header__row-segment.right .header__icon-touch:last-child { margin-right: -9px; } @media (max-width: 1400px) { .header__row .header__row-segment.right .header__icon-touch:last-child { margin-right: -10px } } .header__row .header__row-segment.right .social-icons { padding: 0 calc(4px * 5); padding: 0 var(--spacing-5); } .header__row .header__row-segment.right .social-icons:last-child { padding-right: 0; } @media (min-width: 1401px) { .header--layout-logo-center-nav-left:not(.header--has-country-or-locale) .header__row .header__row-segment.right .social-icons { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3) } } .header__row .header__row-segment.right .header__links-secondary+.social-icons { margin-left: calc(4px * 5); margin-left: var(--spacing-5); padding-left: calc(4px * 5); padding-left: var(--spacing-5); position: relative; } .header__row .header__row-segment.right .header__links-secondary+.social-icons::after { content: ""; width: 1px; position: absolute; left: 0; opacity: 0.5; top: 25%; background: currentColor; height: 50%; } .header__row .header__row-segment.right .header__links-secondary+.header__cross-border .disclosure-form__inner { margin-left: calc(4px * 5); margin-left: var(--spacing-5); padding-left: calc(4px * 5); padding-left: var(--spacing-5); position: relative; } .header__row .header__row-segment.right .header__links-secondary+.header__cross-border .disclosure-form__inner::after { content: ""; width: 1px; position: absolute; left: 0; opacity: 0.5; top: 25%; background: currentColor; height: 50%; } .header__row .header__row-segment[data-scroll-container] .scroll-overflow-indicator { top: 0; } @media (max-width: 1400px) { .header__row.header__row-desktop { display: none } } .header__row.header__row-desktop.upper .header__logo { display: block; max-width: 100%; margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .header__row.header__row-desktop.upper, .header__row.header__row-desktop.upper .header__row-segment { align-items: flex-start; } .header__row.header__row-desktop.upper .header__row-segment-desktop.left { display: flex; flex: 0 1 auto; min-width: 0; } .header__row.header__row-desktop.upper .header__row-segment-desktop.right { flex: 1 0 auto; } .header__row.header__row-desktop.upper .header__links, .header__row.header__row-desktop.upper .social-icons { margin-top: calc(-1 * (4px * 3)); margin-top: calc(-1 * calc(4px * 3)); margin-top: calc(-1 * var(--spacing-3)); } .header__row.header__row-desktop.upper .social-icons { align-items: center; min-height: 44px; } .header__row.header__row-desktop.lower .header__logo { margin: calc(4px * 5) 0; margin: var(--spacing-5) 0; } .header__row.header__row-mobile { min-height: 60px; } @media (min-width: 1401px) { .header__row.header__row-mobile { display: none } } .header__row.header__row-mobile .header__row-segment { display: flex; } header[data-navigation-position="left"][data-logo-position="left"] .header__row.header__row-desktop.lower, header[data-navigation-position="center"][data-logo-position="left"] .header__row.header__row-desktop.lower { margin-top: calc((4px * 3) * -1); margin-top: calc(calc(4px * 3) * -1); margin-top: calc(var(--spacing-3) * -1); } header[data-navigation-position="left"][data-logo-position="left"] .header__row.header__row-desktop.lower .header__row-segment.left .header__logo, header[data-navigation-position="center"][data-logo-position="left"] .header__row.header__row-desktop.lower .header__row-segment.left .header__logo { margin-right: calc(4px * 7); margin-right: var(--spacing-7); } header[data-navigation-position="left"][data-logo-position="center"] .header__row.header__row-desktop.upper { margin-bottom: calc((4px * 3) * -1); margin-bottom: calc(calc(4px * 3) * -1); margin-bottom: calc(var(--spacing-3) * -1); } header[data-navigation-position="left"][data-logo-position="center"].is-sticky .header__row.header__row-desktop.upper { opacity: 0; } .header__logo { display: flex; align-self: center; align-items: center; transition: height 2s ease; } .header__logo .transparent-logo { display: none; } @media (max-width: 1400px) { .header__logo { padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2) } } @media (min-width: 1401px) { .header--center .header__logo, .header--icon:not(.header--left) .header__logo { padding: 0 calc(4px * 6); padding: 0 calc(var(--spacing-unit) * 6); } .header--left .header__logo { padding-right: calc(4px * 6); padding-right: calc(var(--spacing-unit) * 6); } } .header--has-logo .header__logo .header__logo-text { display: none; } .header__logo-text { font-size: var(--logo-font-size); text-transform: var(--logo-text-transform); letter-spacing: var(--logo-letter-spacing); font-family: var(--font-logo); font-weight: var(--font-logo-weight); font-style: var(--font-logo-style); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } @media (max-width: 1400px) { .header__logo-text { max-width: calc(100vw - 170px) } } .header__links-primary-scroll-container { height: 100%; } .header__links.header__links-primary { display: flex; align-self: stretch; height: 100%; } .header__links.header__links-primary>ul>li>[data-link] { line-height: var(--line-height-body); position: relative; -webkit-text-decoration: none; text-decoration: none; } .header__links.header__links-primary>ul>li>[data-link] .link-hover { position: relative; pointer-events: none; } .header__links.header__links-primary>ul>li>[data-link] .link-hover::before { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 1px; background: currentColor; pointer-events: none; transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 300ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-fast) var(--easing); } .header__links.header__links-primary>ul>li>[data-link]:hover .link-hover::before, .header__links.header__links-primary>ul>li>[data-link][aria-expanded="true"] .link-hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1); } @media (max-width: 1400px) { .header__links { display: none } } .header__links.header__links-primary { padding: calc(4px * 3) 0; padding: var(--spacing-3) 0; } .header__links-list { margin: 0; padding: 0; flex-wrap: nowrap; } .header__links-list>li { list-style: none; display: block; } .header__links-list>li:not(:last-child) { margin-right: calc(4px * 5); margin-right: var(--spacing-5); } .header__links-primary .header__links-list>li:not(:last-child) { margin-right: calc(4px * 6); margin-right: var(--spacing-6); } .header__links-list>li:last-of-type { margin-right: 0; } .header__links-list>li>a, .header__links-list>li>button { display: flex; align-items: center; min-height: 44px; } .header__links-list a[data-link]:hover, .header__links-list button[data-link]:hover { -webkit-text-decoration: underline; text-decoration: underline; } .header__links-list .header__links-icon { display: flex; pointer-events: none; margin-top: 3px; margin-left: calc(4px * 2); margin-left: var(--spacing-2); } .header--navigation-is-all-caps .header__links-list .header__links-icon { margin-top: 0; } .header__links-list .header__links-icon .icon { display: flex; width: 10px; height: 10px; } @media (min-width: 1401px) { .header__links-list { display: flex; align-items: center; white-space: nowrap } } .header__menu-icon { position: relative; align-self: center; } .header__menu-icon .icon-button-header-menu, .header__menu-icon .icon-button-header-menu-close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 100ms cubic-bezier(0.33, 0, 0, 1), transform 100ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-ultra-fast) var(--easing), transform var(--duration-ultra-fast) var(--easing); } .header__menu-icon .icon-button-header-menu { transition-delay: calc(100ms / 2); transition-delay: calc(var(--duration-ultra-fast) / 2); } .header__menu-icon .icon-button-header-menu-close { opacity: 0; transform: scale(0.8); } .header__menu-icon[aria-expanded="true"] .icon-button-header-menu { opacity: 0; transform: scale(0.8); transition-delay: 0s; } .header__menu-icon[aria-expanded="true"] .icon-button-header-menu-close { opacity: 1; transform: scale(1); transition-delay: calc(100ms / 2); transition-delay: calc(var(--duration-ultra-fast) / 2); } @media (min-width: 1401px) { .header__menu-icon { display: none } } .header__right { display: flex; align-items: center; } .header__icon-touch { position: relative; display: flex; align-items: center; align-self: center; justify-content: space-around; width: var(--size-icon-touch); height: var(--size-icon-touch); margin: 1px; } @media (max-width: 1400px) { .header__icon-touch, .header__icon-touch .icon-button, .header__icon-touch .icon-button__icon { width: var(--size-icon-touch-mobile); height: var(--size-icon-touch-mobile); } } @media (max-width: 1400px) { .header__icon-touch.header__icon-touch--account { display: none } } .header__icon-touch.header__icon-touch--search { position: relative; } .header__icon-touch.header__icon-touch--search .icon-button-header-search, .header__icon-touch.header__icon-touch--search .icon-button-header-menu-close { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 100ms cubic-bezier(0.33, 0, 0, 1), transform 100ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-ultra-fast) var(--easing), transform var(--duration-ultra-fast) var(--easing); } .header__icon-touch.header__icon-touch--search .icon-button-header-search { transition-delay: calc(100ms / 2); transition-delay: calc(var(--duration-ultra-fast) / 2); } .header__icon-touch.header__icon-touch--search .icon-button-header-menu-close { opacity: 0; transform: scale(0.8); } .header__icon-touch.header__icon-touch--search[aria-expanded="true"] .icon-button-header-search { opacity: 0; transform: scale(0.8); transition-delay: 0s; } .header__icon-touch.header__icon-touch--search[aria-expanded="true"] .icon-button-header-menu-close { opacity: 1; transform: scale(1); transition-delay: calc(100ms / 2); transition-delay: calc(var(--duration-ultra-fast) / 2); } .header__icon-touch .icon-button { color: currentColor; } [data-js-cart-icon] { position: relative; } [data-js-cart-count] { background-color: var(--color-text-header); color: var(--color-background-header); border-radius: 9px; min-width: 18px; height: 18px; padding: 0 0.25em; line-height: 18px; text-align: center; position: absolute; font-size: var(--font-size-body-20); z-index: 2; box-shadow: 0px 0px 0px 1.5px var(--color-background-header); transition: box-shadow 500ms cubic-bezier(0.33, 0, 0, 1), opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: box-shadow var(--duration-normal) var(--easing), opacity var(--duration-fast) var(--easing); opacity: 1; } @media (max-width: 479px) { [data-js-cart-count] { min-width: 14px; height: 14px; line-height: 14px } } [data-js-cart-icon="bag"] [data-js-cart-count] { left: 1px; bottom: 1px; } @media (max-width: 479px) { [data-js-cart-icon="bag"] [data-js-cart-count] { left: 4px; bottom: 4px } } [data-js-cart-icon="cart"] [data-js-cart-count] { right: 0px; top: 2px; } @media (max-width: 479px) { [data-js-cart-icon="cart"] [data-js-cart-count] { right: 4px; top: 6px } } [data-js-cart-count].hide { opacity: 0; } .header__logo-link { text-align: center; line-height: normal; } @media (max-width: 1400px) { .header__logo-link { display: flex; align-items: center } } .header--has-logo .header__logo-link { width: var(--logo-width); max-width: 40vw; } @media (max-width: 1400px) { .header--has-logo .header__logo-link { width: auto; max-width: var(--mobile-logo-width) } } @media (min-width: 1401px) { .header--has-logo .header__logo-link { width: var(--logo-width) } } .header--has-logo .header__logo-link .image { width: 100%; height: 100%; } body.header-transparent #main { margin-top: calc(var(--height-header) * -1); } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active) { background-color: transparent; } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active) [data-scroll-container] .scroll-button { background-color: transparent; } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active).header--has-transparent-logo .header__logo-link.header--has-logo { width: var(--logo-width); } @media (min-width: 1401px) { html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active).header--has-transparent-logo .header__logo-link.header--has-logo { width: 500px; max-width: var(--logo-width) } } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active).header--has-transparent-logo .regular-logo { display: none; } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active).header--has-transparent-logo .transparent-logo { display: block; } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active).header--has-transparent-logo .header__logo-text { display: none; } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active) .header__inner { color: var(--color-text-transparent); } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active) .header__inner a { color: var(--color-text-transparent); } html:not(.no-js) body:not([mobile-menu-open="true"]):not([quick-search-open="true"]) header.header--transparent:not(.is-sticky):not(:hover):not( :focus-within):not(.dropdown-active) .header__inner [data-js-cart-count] { background-color: var(--color-text-transparent); color: var(--color-cart-count-transparent); box-shadow: none; } .header__logo-link.header--has-logo { width: var(--logo-width); max-width: 40vw; } @media (min-width: 1401px) { .header__logo-link.header--has-logo { width: 500px; max-width: var(--logo-width) } } html:not(.no-js) body.template-password header.header--transparent { background-color: transparent; } html:not(.no-js) body.template-password header.header--transparent .header__inner { color: var(--color-text-transparent); } html:not(.no-js) body.template-password header.header--transparent .header__inner a { color: var(--color-text-transparent); } html:not(.no-js) body.template-password header.header--transparent .header__inner .header__logo-link.header--has-logo { width: var(--logo-width); max-width: 40vw; } @media (min-width: 1401px) { html:not(.no-js) body.template-password header.header--transparent .header__inner .header__logo-link.header--has-logo { width: 500px; max-width: var(--logo-width) } } .no-js-menu { display: none; } .no-js .header .header__logo-wrapper { text-align: left; } .no-js .header__links .header__links-list { display: none; } .no-js .header__nav { display: none; } .no-js .header__icon-menu .icon { display: none; } .no-js .no-js-menu { line-height: var(--line-height-body); display: block; width: 80%; } .no-js .no-js-menu .header__links-list { display: none; } .no-js .no-js-menu a:hover { -webkit-text-decoration: underline; text-decoration: underline; } .no-js .no-js-menu ul { margin: 0; padding: 0; width: 100%; } .no-js .no-js-menu li { display: inline-block; margin-right: calc(4px * 5); margin-right: var(--spacing-5); } .header-overlay { display: none; } .header-overlay.is-active { display: block; } .header-overlay__inner { z-index: calc(500 - 1); z-index: calc(var(--z-index-header) - 1); position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-color: var(--color-overlay); } .header-overlay__inner.is-visible { opacity: 0.5; } .a404 .a404__header { margin-bottom: 0; } .a404__subheading { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .a404__button { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .cart-section.shopify-section { overflow: visible; } .cart { --side-bar-width: 400px; } .cart .free-shipping-bar { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .cart__form { display: flex; } @media (max-width: 959px) { .cart__form { flex-wrap: wrap } } .cart__form-header { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .cart__form-items { width: 100%; } @media (min-width: 960px) { .cart__form-items { width: 100%; padding-right: calc(4px * 10); padding-right: var(--spacing-10) } } .cart__form-item { display: flex; padding-top: calc(4px * 9); padding-top: var(--spacing-9); padding-bottom: calc(4px * 9); padding-bottom: var(--spacing-9); border-top: 1px solid var(--color-border); } .cart__form-item.is-removed { opacity: 0.5; cursor: default; pointer-events: none; } .cart__form-item-link { display: block; } .cart__form-item-link { display: block; } .cart__form-item-image { width: 120px; flex-shrink: 0; } .cart__form-item-details { margin-left: calc(4px * 6); margin-left: var(--spacing-6); width: 100%; } @media (min-width: 960px) { .cart__form-item-info-wrapper { display: flex; justify-content: space-between } } .cart__form-item-quantity-wrapper { display: flex; flex-wrap: wrap; margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .cart__form-item-remove-wrapper { width: 100%; margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .cart__form-item-remove-wrapper .btn.cart__form-item-remove { color: var(--color-text); } .cart__form-item-error, .cart__inventory-warning { width: 100%; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .cart__form-item-error { color: var(--color-text-error); } .cart__form-item-error.hidden { display: none; } .cart__inventory-warning { color: var(--color-products-stock-medium); } .cart__item-discounts, .cart__form-item-discounts { position: relative; padding: calc(4px * 2) calc(4px * 5) calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-3); margin-top: 0; margin-bottom: 0; list-style: none; color: var(--color-text-sale-badge); } .cart__item-discounts:after, .cart__form-item-discounts:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-text-sale-badge); opacity: 0.08; } .cart__item-discounts+.cart__footer-subtotal, .cart__form-item-discounts+.cart__footer-subtotal { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .cart__form-item-discounts { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .cart__item-discount, .cart__form-item-discount { display: flex; } .cart__item-discount+.cart__item-discount, .cart__form-item-discount+.cart__item-discount { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .cart__item-discount .icon, .cart__form-item-discount .icon { width: 14px; height: 14px; margin-top: 2px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .cart__form-item-price-wrapper { flex-shrink: 0; } @media (max-width: 959px) { .cart__form-item-price-wrapper { margin-top: calc(4px * 3); margin-top: var(--spacing-3) } } .cart__footer-wrapper { flex-shrink: 0; } @media (max-width: 959px) { .cart__footer-wrapper { width: 100% } } .cart__footer { width: 100%; } @media (min-width: 960px) { .cart__footer { position: sticky; top: calc(0 + (4px * 10)); top: calc(0 + calc(4px * 10)); top: calc(var(--header-desktop-sticky-height, 0) + var(--spacing-10)); max-width: var(--side-bar-width) } } .cart__footer-inner { position: relative; padding: calc(4px * 6); padding: var(--spacing-6); } .cart__footer-inner:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-text); opacity: 0.04; pointer-events: none; } .cart__footer-order-note-wrapper+.cart__footer-subtotal-wrapper { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .cart__footer-order-note-wrapper+.cart__footer-subtotal-wrapper--has-discount { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .cart__footer-order-note-trigger-icons .icon { width: 10px; height: 10px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .cart__footer-order-note-trigger-icons .icon.hidden { display: none; } .cart__footer-order-note-input { display: none; padding-top: calc(4px * 7); padding-top: var(--spacing-7); padding-bottom: calc(4px * 9); padding-bottom: var(--spacing-9); } .no-js .cart__footer-order-note-input { display: block; } .cart__footer-order-note-input .input { background-color: var(--color-background); } .cart__footer-subtotal { display: flex; justify-content: space-between; } .cart__input-buttons { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .cart__update.btn.btn--secondary { display: none; margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .no-js .cart__update.btn.btn--secondary { display: flex; } .cart__empty-message { text-align: center; } .cart__empty-button { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .cart__empty-message-text { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .cart__form-item-title+.cart__form-item-variant, .cart__form-item-title+.cart__form-item-subscriptions { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .cart__form-item-title+.cart__form-item-price-wrapper { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .cart__form-item-variant+.cart__form-item-subscriptions { margin-top: 2px; margin-top: var(--spacing-unit-half); } .cart__form-item-variant+.cart__form-item-price-wrapper { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .cart__form-item-price-wrapper .unit-price__price { margin-left: 0; font-size: var(--font-size-body-60); } .cart__form-item-price { margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .cart__form-item-price.sale-price { color: var(--color-text-sale-badge); } .cart__form-item-properties { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .template-collection .main .collection-section:first-of-type .collection__top-row { border-top: 0; } .collection-section.shopify-section { overflow: visible; overflow: initial; } body[data-fluorescent-overlay-open="true"] .collection { position: static; position: initial; } .collection.collection--has-filter-bar.section { padding-top: 0; } .collection.collection--has-filter-bar.section:before { content: none; } .collection .filter-bar__inner.show { justify-content: space-between; padding: calc(4px * 7); padding: var(--spacing-7); background-color: var(--color-background-meta); } @media (max-width: 479px) { .collection .filter-bar__inner.show { display: none } } .collection__divider { position: absolute; top: 0; left: 0; width: 100%; padding: 0 3.3vw; padding: 0 var(--space-outer); z-index: 450; z-index: var(--z-index-filter-bar); } .collection__divider:before { content: ""; display: block; width: 100%; max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; border-top: solid 1px var(--color-border); } .collection+.collection { margin-top: 0; } @media (max-width: 719px) { .collection__inner { padding-top: calc(4px * 4); padding-top: var(--spacing-4) } } .collection__products { position: relative; display: grid; padding-top: calc(4px * 4); padding-top: var(--spacing-4); grid-template-columns: repeat(var(--collection-columns-mobile), 1fr); grid-row-gap: calc(4px * 6); grid-row-gap: var(--spacing-6); row-gap: calc(4px * 6); row-gap: var(--spacing-6); grid-column-gap: calc((4px * 3) + 1px); grid-column-gap: calc(calc(4px * 3) + 1px); grid-column-gap: calc(var(--spacing-3) + 1px); -moz-column-gap: calc((4px * 3) + 1px); column-gap: calc((4px * 3) + 1px); -moz-column-gap: calc(calc(4px * 3) + 1px); column-gap: calc(calc(4px * 3) + 1px); -moz-column-gap: calc(var(--spacing-3) + 1px); column-gap: calc(var(--spacing-3) + 1px); z-index: 1; } @media (min-width: 720px) { .collection__products { -moz-column-gap: calc((4px * 4) + 1px); column-gap: calc((4px * 4) + 1px); -moz-column-gap: calc(calc(4px * 4) + 1px); column-gap: calc(calc(4px * 4) + 1px); -moz-column-gap: calc(var(--spacing-4) + 1px); column-gap: calc(var(--spacing-4) + 1px); grid-template-columns: repeat(var(--collection-columns-desktop), 1fr) } } @media (min-width: 1200px) { .collection__products { -moz-column-gap: calc((4px * 6) + 1px); column-gap: calc((4px * 6) + 1px); -moz-column-gap: calc(calc(4px * 6) + 1px); column-gap: calc(calc(4px * 6) + 1px); -moz-column-gap: calc(var(--spacing-6) + 1px); column-gap: calc(var(--spacing-6) + 1px) } } .collection__products.collection__products--no-products { display: block; } .collection__content { position: relative; z-index: 1; } .collection__main-area { position: relative; display: flex; max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; } .collection__infinite-trigger { display: none; } .collection--pagination-click .collection__infinite-trigger { display: block; } .collection--pagination-click .collection__infinite-trigger .btn { width: 100%; max-width: 385px; margin: calc(4px * 3) auto 0; margin: var(--spacing-3) auto 0; } .collection__empty { display: flex; flex-direction: column; align-items: center; margin: calc(4px * 10) auto; margin: var(--spacing-10) auto; } @media (min-width: 960px) { .collection__empty { margin: calc(4px * 20) auto; margin: var(--spacing-20) auto } } .collection__window { position: relative; flex-grow: 1; } .collection__loading { position: absolute; top: 1px; bottom: 0; left: 0; right: 0; background-color: var(--color-background-semi-transparent-80); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 500ms; transition: opacity var(--duration-normal); text-align: center; margin-top: -1px; } .collection__loading.is-active { opacity: 1; pointer-events: all; } .list-collections.list-collections--mobile-per-view-1 .list-collections__grid { grid-template-columns: 1fr; } @media (min-width: 720px) { .list-collections.list-collections--per-view-3 .list-collections__grid { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 720px) { .list-collections.list-collections--per-view-4 .list-collections__grid { grid-template-columns: repeat(4, 1fr) } } @media (min-width: 720px) { .list-collections.list-collections--per-view-5 .list-collections__grid { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 960px) { .list-collections.list-collections--per-view-5 .list-collections__grid { grid-template-columns: repeat(5, 1fr) } } .list-collections__header { margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10); } .list-collections__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: calc((4px * 3) + 1px); grid-column-gap: calc(calc(4px * 3) + 1px); grid-column-gap: calc(var(--spacing-3) + 1px); -moz-column-gap: calc((4px * 3) + 1px); column-gap: calc((4px * 3) + 1px); -moz-column-gap: calc(calc(4px * 3) + 1px); column-gap: calc(calc(4px * 3) + 1px); -moz-column-gap: calc(var(--spacing-3) + 1px); column-gap: calc(var(--spacing-3) + 1px); grid-row-gap: calc((4px * 3) + 1px); grid-row-gap: calc(calc(4px * 3) + 1px); grid-row-gap: calc(var(--spacing-3) + 1px); row-gap: calc((4px * 3) + 1px); row-gap: calc(calc(4px * 3) + 1px); row-gap: calc(var(--spacing-3) + 1px); } @media (min-width: 960px) { .list-collections__grid { -moz-column-gap: calc((4px * 4) + 1px); column-gap: calc((4px * 4) + 1px); -moz-column-gap: calc(calc(4px * 4) + 1px); column-gap: calc(calc(4px * 4) + 1px); -moz-column-gap: calc(var(--spacing-4) + 1px); column-gap: calc(var(--spacing-4) + 1px); row-gap: calc((4px * 4) + 1px); row-gap: calc(calc(4px * 4) + 1px); row-gap: calc(var(--spacing-4) + 1px) } } @media (min-width: 1200px) { .list-collections__grid { -moz-column-gap: calc((4px * 6) + 1px); column-gap: calc((4px * 6) + 1px); -moz-column-gap: calc(calc(4px * 6) + 1px); column-gap: calc(calc(4px * 6) + 1px); -moz-column-gap: calc(var(--spacing-6) + 1px); column-gap: calc(var(--spacing-6) + 1px); row-gap: calc((4px * 6) + 1px); row-gap: calc(calc(4px * 6) + 1px); row-gap: calc(var(--spacing-6) + 1px) } } .list-collections--item-label-style-beneath .list-collections__grid { row-gap: calc(4px * 6); row-gap: var(--spacing-6); } .page { --header-width: 800px; position: relative; } .page .shopify-policy__container { margin-top: calc(4px * 10); margin-top: var(--spacing-10); margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10); } @media (min-width: 960px) { .page .shopify-policy__container { margin-top: calc(4px * 25); margin-top: var(--spacing-25); margin-bottom: calc(3.3vw * 2); margin-bottom: calc(var(--space-outer) * 2) } } html.sticky-header-active body.scroll-lock .page { padding-top: var(--height-header); } .page__inner { max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--content-width, var(--max-width)) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--content-width, var(--max-width)) + calc(var(--space-outer) * 2)); margin-right: auto; margin-left: auto; padding: calc(4px * 2) 3.3vw calc(4px * 6); padding: var(--spacing-2) var(--space-outer) var(--spacing-6); } .section .page__inner { padding-bottom: 0; } @media (min-width: 720px) { .page__inner { padding-top: calc(4px * 6); padding-top: var(--spacing-6) } } .page__header { max-width: var(--header-width); position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0 auto calc(4px * 10); margin: 0 auto var(--spacing-10); } .page__subheading { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .page__rte, .article__rte { width: 100%; } .page__rte .grid, .article__rte .grid { --s-item-gutter: 10px; min-width: 100%; padding: 0; margin: calc((4px * 10) - 10px) 0; margin: calc(calc(4px * 10) - 10px) 0; margin: calc(var(--spacing-10) - var(--s-item-gutter)) 0; margin-left: calc(10px * -1); margin-left: calc(var(--s-item-gutter) * -1); margin-right: calc(10px * -1); margin-right: calc(var(--s-item-gutter) * -1); } .page__rte .grid:first-child, .article__rte .grid:first-child { margin-top: calc(var(--s-item-gutter) * -1); } @media (min-width: 480px) { .page__rte .grid, .article__rte .grid { width: 100vw; position: relative; left: 50%; right: 50%; margin-top: calc((4px * 20) - var(--s-item-gutter)); margin-top: calc(calc(4px * 20) - var(--s-item-gutter)); margin-top: calc(var(--spacing-20) - var(--s-item-gutter)); margin-right: -50vw; margin-bottom: calc((4px * 20) - var(--s-item-gutter)); margin-bottom: calc(calc(4px * 20) - var(--s-item-gutter)); margin-bottom: calc(var(--spacing-20) - var(--s-item-gutter)); margin-left: -50vw; padding: 0 calc(3.3vw - var(--s-item-gutter)); padding: 0 calc(var(--space-outer) - var(--s-item-gutter)) } } .page__rte .grid img, .article__rte .grid img { width: 100%; height: auto; display: block; } .page__rte .grid img+img, .article__rte .grid img+img { margin-top: calc(var(--s-item-gutter) * 2); } .page__rte .grid>div, .page__rte .grid>img, .page__rte .grid>p, .article__rte .grid>div, .article__rte .grid>img, .article__rte .grid>p { padding: var(--s-item-gutter); margin: 0; width: 100%; } .page__rte .grid .small, .article__rte .grid .small { width: 50%; } .search-header { --header-width: 800px; --form-width: 575px; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); padding: calc(4px * 12) 3.3vw; padding: var(--spacing-12) var(--space-outer); margin-right: auto; margin-left: auto; } @media (min-width: 720px) { .search-header { padding-top: calc(4px * 16); padding-top: var(--spacing-16) } } .search-header__inner { max-width: var(--header-width); position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0 auto; } .search-header__title { text-align: center; } .search-form { width: 100%; max-width: var(--form-width); margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .search-form__input-wrapper { position: relative; } .search-form__input.input { padding-left: 48px; padding-left: var(--height-input); z-index: 1; } label+.search-form__input.input.input { margin-top: 0; } .search-form__submit { position: absolute; top: 0; left: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 48px; width: var(--height-input); height: 100%; padding: calc(4px * 2); padding: var(--spacing-2); z-index: 2; } .search-section.shopify-section { overflow: visible; overflow: initial; } body[data-fluorescent-overlay-open="true"] .search { position: static; position: initial; } .search.search--has-filter-bar.section { padding-top: 0; } .search.search--has-filter-bar.section:before { content: none; } .search .filter-bar__inner.show { justify-content: space-between; padding: calc(4px * 7); padding: var(--spacing-7); background-color: var(--color-background-meta); } @media (max-width: 479px) { .search .filter-bar__inner.show { display: none } } .search__divider { position: absolute; top: 0; left: 0; width: 100%; padding: 0 3.3vw; padding: 0 var(--space-outer); z-index: 450; z-index: var(--z-index-filter-bar); } .search__divider:before { content: ""; display: block; width: 100%; max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; border-top: solid 1px var(--color-border); } @media (max-width: 719px) { .search__inner { padding-top: calc(4px * 4); padding-top: var(--spacing-4) } } .search__results { position: relative; display: grid; padding-top: calc(4px * 4); padding-top: var(--spacing-4); grid-template-columns: repeat(var(--search-columns-mobile), 1fr); grid-row-gap: calc(4px * 6); grid-row-gap: var(--spacing-6); row-gap: calc(4px * 6); row-gap: var(--spacing-6); grid-column-gap: calc((4px * 3) + 1px); grid-column-gap: calc(calc(4px * 3) + 1px); grid-column-gap: calc(var(--spacing-3) + 1px); -moz-column-gap: calc((4px * 3) + 1px); column-gap: calc((4px * 3) + 1px); -moz-column-gap: calc(calc(4px * 3) + 1px); column-gap: calc(calc(4px * 3) + 1px); -moz-column-gap: calc(var(--spacing-3) + 1px); column-gap: calc(var(--spacing-3) + 1px); z-index: 1; } @media (min-width: 720px) { .search__results { -moz-column-gap: calc((4px * 4) + 1px); column-gap: calc((4px * 4) + 1px); -moz-column-gap: calc(calc(4px * 4) + 1px); column-gap: calc(calc(4px * 4) + 1px); -moz-column-gap: calc(var(--spacing-4) + 1px); column-gap: calc(var(--spacing-4) + 1px); grid-template-columns: repeat(var(--search-columns-desktop), 1fr) } } @media (min-width: 1200px) { .search__results { -moz-column-gap: calc((4px * 6) + 1px); column-gap: calc((4px * 6) + 1px); -moz-column-gap: calc(calc(4px * 6) + 1px); column-gap: calc(calc(4px * 6) + 1px); -moz-column-gap: calc(var(--spacing-6) + 1px); column-gap: calc(var(--spacing-6) + 1px) } } .search__results.search__results--no-products { display: block; } .search__content { position: relative; z-index: 1; } .search__infinite-trigger { display: none; } .search--pagination-click .search__infinite-trigger { display: block; } .search--pagination-click .search__infinite-trigger .btn { width: 100%; max-width: 385px; margin: calc(4px * 3) auto 0; margin: var(--spacing-3) auto 0; } .search__main-area { position: relative; display: flex; flex-grow: 1; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; } .search__empty { display: flex; flex-direction: column; align-items: center; margin: calc(4px * 10) auto; margin: var(--spacing-10) auto; } @media (min-width: 960px) { .search__empty { margin: calc(4px * 20) auto; margin: var(--spacing-20) auto } } .search__window { position: relative; } .search__loading { position: absolute; top: 1px; bottom: 0; left: 0; right: 0; background-color: var(--color-background-semi-transparent-80); z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0.25s; text-align: center; margin-top: -1px; } .search__loading.is-active { opacity: 1; pointer-events: all; transition: opacity 0.25s; } @media (max-width: 959px) { .template-product .main .main-product-section:first-of-type .product { margin-top: 0 } } .shopify-section.main-product-section { overflow-y: visible; overflow-y: initial; overflow-x: clip; } .shopify-section.main-product-section~section { overflow: hidden; } #shopify-section-product--template+.shopify-section { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .product { max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); margin: calc(4px * 10) auto calc(4px * 3); margin: var(--spacing-10) auto var(--spacing-3); } @media (min-width: 960px) { .product { margin-bottom: calc(4px * 16); margin-bottom: var(--spacing-16); padding: 0 3.3vw; padding: 0 var(--space-outer) } } .product .product__view-in-space.btn.btn--primary { margin-top: calc(4px * 3); margin-top: var(--spacing-3); margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); display: none; background: var(--color-text-8-percent); color: var(--color-text); border-width: 0; } .product .product__view-in-space.btn.btn--primary::before, .product .product__view-in-space.btn.btn--primary::after { background-color: transparent; } .product .product__view-in-space.btn.btn--primary.visible { display: flex; } .product .product__view-in-space.btn.btn--primary>span { display: flex; align-items: center; } .product .product__view-in-space.btn.btn--primary .icon { margin-right: calc(4px * 2); margin-right: var(--spacing-2); width: 18px; height: 18px; } .product .product__breadcrumbs { padding: 0 3.3vw; padding: 0 var(--space-outer); overflow: hidden; margin-top: calc(4px * 8); margin-top: var(--spacing-8); margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } @media (min-width: 960px) { .product .product__breadcrumbs { padding: 0; margin-top: calc((4px * 2) * -1); margin-top: calc(calc(4px * 2) * -1); margin-top: calc(var(--spacing-2) * -1); margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5) } } .product .product__media-item { display: flex; align-items: center; } .product .product__media-item--hide-on-load { display: none; } html.no-js .product .product__media-item--hide-on-load { display: flex; } .product [data-product-media="beforeOpen"] .product__media-item--hide-on-load:not(.hidden), .product [data-product-media="opening"] .product__media-item--hide-on-load:not(.hidden), .product [data-product-media="open"] .product__media-item--hide-on-load:not(.hidden) { display: flex; } .product .accordion__label { text-align: left; align-items: flex-start; } .product__block.product__block--medium { margin-bottom: calc(4px * 6); margin-bottom: var(--spacing-6); } .product__primary { width: 100%; } @media (min-width: 960px) { .product__primary { display: grid; grid-gap: 3.3vw } .product[data-gallery-size="small"] .product__primary { grid-template-columns: 46fr 54fr; } .product[data-gallery-size="medium"] .product__primary { grid-template-columns: 56fr 44fr; } .product[data-gallery-size="large"] .product__primary { grid-template-columns: 64fr 36fr; } .product[data-gallery-size="xlarge"] .product__primary { grid-template-columns: 72fr 28fr; } } .product__primary .payment-icons__icon .icon { width: 36px; height: 22px; } .product__bottom { position: relative; z-index: 0; } .product__media-container { width: 100%; flex-shrink: 0; transition: opacity 0.2s ease; } .product__media-container.loading { opacity: 0.6; } @media (min-width: 960px) { .product__media-container.below-mobile { display: none } } @media (max-width: 959px) { .product[data-show-mobile-carousel-full-width="false"] .product__media-container.below-mobile { padding: 0 3.3vw; padding: 0 var(--space-outer) } } .product__media-container.below-mobile .swiper-pagination { position: relative; bottom: auto; } .product__media-container.below-mobile .swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; opacity: 0.3; background-color: currentColor; transition: transform 300ms ease-out, opacity 300ms ease-out; margin: 21px 5px; } .product__media-container.below-mobile .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background-color: currentColor; transform: scale(1.3); } .product[data-hide-mobile-carousel-dots="true"] .product__media-container[data-gallery-style="carousel"] { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } @media (max-width: 959px) { .product__media-container.above-mobile { display: none } } .product__media-container[data-gallery-style="list"] .product__media { grid-template-columns: 1fr; } .product__media-container[data-gallery-style="grid"] .product__media { grid-template-columns: repeat(2, 1fr); } .product__media-container[data-gallery-style="list"] .product__media, .product__media-container[data-gallery-style="grid"] .product__media { --grid-gallery-spacing: var(--spacing-2); display: grid; grid-gap: calc(4px * 2); grid-gap: var(--grid-gallery-spacing); gap: calc(4px * 2); gap: var(--grid-gallery-spacing); grid-auto-rows: max-content; } .product__media-container[data-gallery-style="list"] .product__media, .product__media-container[data-gallery-style="grid"] .product__media { position: relative; z-index: 0; overflow: hidden; transition: box-shadow calc(var(--overflow-gallery-transition-multiplier) * 300ms) cubic-bezier(0.33, 0, 0, 1), aspect-ratio calc(var(--overflow-gallery-transition-multiplier) * 300ms) cubic-bezier(0.33, 0, 0, 1); transition: box-shadow calc(var(--overflow-gallery-transition-multiplier) * var(--duration-fast)) var(--easing), aspect-ratio calc(var(--overflow-gallery-transition-multiplier) * var(--duration-fast)) var(--easing); } html.no-js .product__media-container[data-gallery-style="list"] .product__media, html.no-js .product__media-container[data-gallery-style="grid"] .product__media { aspect-ratio: auto; } .product__media-container [data-product-media="closed"], .product__media-container [data-product-media="beforeOpen"] { aspect-ratio: var(--overflow-gallery-aspect-ratio); } .product__media-container [data-product-media="opening"] { aspect-ratio: var(--overflow-gallery-aspect-ratio-open); } .product__media-container [data-product-media="open"] { aspect-ratio: auto; } @media (min-width: 960px) { .product__media-container[data-gallery-style="thumbnails"] { display: grid; grid-template-columns: 80px auto; grid-gap: calc(4px * 7); grid-gap: var(--spacing-7); gap: calc(4px * 7); gap: var(--spacing-7) } } .product__media-container.below-mobile .product__media-item, .product__media-container.below-mobile .product__media-item .media { width: 100%; } html.no-js .product__media-container.below-mobile .product__media-item, html.no-js .product__media-container.below-mobile .product__media-item .media { width: auto; } .product__media-show-more { position: sticky; bottom: -1px; z-index: 5; display: flex; justify-content: center; width: 100%; padding: calc(4px * 4); padding: var(--spacing-4); background: var(--color-background); box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.09), 0px -10px 24px rgba(0, 0, 0, 0.14); grid-column: 1 / -1; } [data-product-media="opening"] .product__media-show-more, [data-product-media="open"] .product__media-show-more { box-shadow: 0px -1px 4px rgba(0, 0, 0, 0), 0px -10px 24px rgba(0, 0, 0, 0); } [data-product-media="open"] .product__media-show-more { padding-top: calc((4px * 4) - 0px); padding-top: calc(calc(4px * 4) - 0px); padding-top: calc(var(--spacing-4) - var(--grid-gallery-spacing, 0px)); } html.no-js .product__media-show-more { display: none; } .product__media-item { overflow: hidden; } .product__media-item.hidden { display: none; } .product__media-item[data-aspect-ratio="square"] { aspect-ratio: 1; aspect-ratio: var(--aspect-ratio-square); } .product__media-item[data-aspect-ratio="landscape"] { aspect-ratio: 3 / 2; aspect-ratio: var(--aspect-ratio-landscape); } .product__media-item[data-aspect-ratio="portrait"] { aspect-ratio: 2 / 3; aspect-ratio: var(--aspect-ratio-portrait); } .product__media-item[data-aspect-ratio="natural"] .media { width: 100%; } .product__media-item[data-aspect-ratio="square"] .media, .product__media-item[data-aspect-ratio="landscape"] .media, .product__media-item[data-aspect-ratio="portrait"] .media { width: 100%; height: 100%; background: var(--color-background); } .product__media-item[data-aspect-ratio="square"] .media[data-media-type="video"], .product__media-item[data-aspect-ratio="square"] .media[data-media-type="external_video"], .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video"], .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="external_video"], .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video"], .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="external_video"] { display: flex; align-items: center; justify-content: center; } .product__media-item[data-aspect-ratio="square"] .media[data-media-type="video"] .plyr, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="video"] .plyr__poster, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="video"] video, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="external_video"] .plyr, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="external_video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="external_video"] .plyr__poster, .product__media-item[data-aspect-ratio="square"] .media[data-media-type="external_video"] video, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video"] .plyr, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video"] .plyr__poster, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="video"] video, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="external_video"] .plyr, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="external_video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="external_video"] .plyr__poster, .product__media-item[data-aspect-ratio="landscape"] .media[data-media-type="external_video"] video, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video"] .plyr, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video"] .plyr__poster, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="video"] video, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="external_video"] .plyr, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="external_video"] .plyr__video-wrapper, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="external_video"] .plyr__poster, .product__media-item[data-aspect-ratio="portrait"] .media[data-media-type="external_video"] video { aspect-ratio: var(--video-aspect-ratio); width: 100%; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; background-color: var(--color-background); } .product__details { width: 100%; } @media (max-width: 959px) { .product__details { padding: 0 3.3vw; padding: 0 var(--space-outer) } } @media (max-width: 959px) { .product__primary-left { overflow: hidden } } @media (min-width: 960px) { .product__primary-right { min-width: 320px } } .product__primary-right .shopify-app-block { margin-bottom: calc(4px * 4); margin-bottom: calc(var(--spacing-unit) * 4); } .product__meta { padding-top: calc(4px * 4); padding-top: var(--spacing-4); } .product__title { margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); margin-top: 0; } .product__price { display: flex; flex-wrap: wrap; } .product__price.hide { opacity: 0; } .product__price s { margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .product__price s:empty { margin-right: 0; } .product__price s:not(:empty)+[data-price], .product__price .product__price-displayed-discount { color: var(--color-products-sale-price); } .product__price .product__price-displayed-discount { display: flex; align-items: center; margin-left: 0.5em; margin-top: 0.05em; } [data-price-display-type="hide"] .product__price .product__price-displayed-discount, [data-price-display-type="custom"] .product__price .product__price-displayed-discount { visibility: hidden; } .product__price .product__price-displayed-discount:empty { display: none; } .product__price .unit-price__price { margin-left: calc(4px * 3); margin-left: var(--spacing-3); } .product__price .unit-price.unit-price--available { display: flex; align-items: center; } .product__vendor_and_sku { display: flex; gap: 1em; align-items: flex-end; margin-bottom: 0.5em; } .product__vendor_and_sku[data-showing-sku="false"][data-showing-vendor="false"] { display: none; } .product__vendor_and_sku .product__sku { margin-bottom: 0.125em; } .product__price-and-ratings { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75em; } [data-price-display-type="hide"] .product__price-and-ratings[data-show-product-rating="false"] { margin-top: 0; display: none; } .left-side-blocks.for-desktop { margin-top: calc(4px * 9); margin-top: var(--spacing-9); } @media (max-width: 959px) { .left-side-blocks.for-desktop { display: none } } .left-side-blocks.for-mobile { padding: 0 3.3vw; padding: 0 var(--space-outer); } @media (min-width: 960px) { .left-side-blocks.for-mobile { display: none } } .product__description { width: 100%; } .product__description .ff-heading { margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } .product__description .share-icons a { margin-right: 4px; margin-right: var(--spacing-unit); } .information-popup__content { display: none; } .product__policies { margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); } .no-js .product__option, .no-js .product__quantity-button { display: none; } .product__variants select#variant-selector { display: none; } .no-js .product__variants select#variant-selector { display: block; } .product__option+.product__option { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .product__label-wrapper { display: flex; align-items: center; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .product__label-wrapper.product-form__label-wrapper--collapse { margin-bottom: 0; } .product__label { margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .product__color-swatches, .product__color-chips { display: flex; flex-wrap: wrap; } .product__color-swatches select, .product__color-chips select { display: none; } .product__color-chips[data-layout="3col"], .product__color-chips[data-layout="2col"] { display: grid; grid-gap: calc(4px * 2); grid-gap: var(--spacing-2); } .product__color-chips[data-layout="3col"] { grid-template-columns: repeat(3, 1fr); } .product__color-chips[data-layout="2col"] { display: grid; grid-template-columns: repeat(2, 1fr); } .product__color-chips[data-layout="natural"] { margin-top: calc((4px * 2) * -1); margin-top: calc(calc(4px * 2) * -1); margin-top: calc(var(--spacing-2) * -1); } .product__color-chips[data-layout="natural"] .product__chip { margin-right: calc(4px * 2); margin-right: var(--spacing-2); margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product__chip { display: flex; justify-content: center; align-items: center; padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4); background-color: var(--color-background); border: 1px solid var(--color-border); transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; } .product__chip.selected { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text) inset; } .product__chip:hover { border-color: var(--color-text); } .product__color-swatches .product__color-swatches--inner { display: flex; flex-wrap: wrap; margin: calc(4px * -1); margin: calc(var(--spacing-unit) * -1); } .product__color-swatches .product__color-swatch { position: relative; width: 30px; width: var(--swatch-width, 30px); aspect-ratio: 1; margin: 4px; margin: var(--spacing-unit); background-position: center center; background-size: contain; background-size: var(--swatch-image-fit, contain); } .product__color-swatches .product__color-swatch[data-shape="rectangle"] { aspect-ratio: calc(60 / 34); } .product__color-swatches .product__color-swatch::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 0 0 1px var(--color-border) inset, 0 0 0 4px var(--color-background) inset; transition: box-shadow 0.3s ease-in-out; z-index: 1; } .product__color-swatches .product__color-swatch img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-fit: var(--swatch-image-fit, contain); object-fit: var(--swatch-image-fit, contain); background-color: var(--color-background); } .product__color-swatches .product__color-swatch:hover:not(.selected)::before { box-shadow: 0 0 0 1px var(--color-text) inset, 0 0 0 4px var(--color-background) inset; } .product__color-swatches .product__color-swatch.selected::before { box-shadow: 0 0 0 2px var(--color-text) inset, 0 0 0 5px var(--color-background) inset; } .product__color-swatches .product__color-swatch::after { position: absolute; content: ""; left: 0; top: 50%; right: 0; width: 100%; border-top: 1px solid; border-color: transparent; transform: rotate(-45deg) translateY(-50%); transition: border-color 0.2s ease; z-index: 1; } .product__color-swatches .product__color-swatch[data-shape="rectangle"][data-size="small"]::after { width: 112%; left: -4%; transform: rotate(-29deg) translateY(-50%); } .product__color-swatches .product__color-swatch[data-shape="rectangle"][data-size="medium"]::after { width: 112%; left: -6%; transform: rotate(-29deg) translateY(-50%); } .product__color-swatches .product__color-swatch[data-shape="rectangle"][data-size="large"]::after { width: 112%; left: -7%; transform: rotate(-29deg) translateY(-50%); } .product__color-swatches .product__color-swatch[data-shape="square"]::after { width: 136%; left: -18%; } .product__color-swatches .product__color-swatch[data-shape="round"]::after { width: 99%; left: 1%; } .product__color-swatches .product__color-swatch[data-shape="round"], .product__color-swatches .product__color-swatch[data-shape="round"] img, .product__color-swatches .product__color-swatch[data-shape="round"]::before { border-radius: 100%; } .dynamic-variant-button.product__color-swatch { position: relative; box-shadow: 0 0 0 1px var(--color-border) inset, 0 0 0 4px var(--color-background) inset; } .dynamic-variant-button.product__color-swatch.disabled::after { border-color: inherit; } .dynamic-variant-button.product__chip.disabled { -webkit-text-decoration: line-through; text-decoration: line-through; background-color: var(--color-background-meta-alpha); color: var(--color-text-meta); } .product__controls-group.product-form__controls-group-quantity { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .product__controls-group.product-form__controls-group-quantity label { display: block; } .product__controls-group.hidden { display: none; } .product__controls-group .product__information-popup { margin-top: calc(4px * 2); margin-top: var(--spacing-2); margin-bottom: 0; } .no-js .product__controls-group-quantity { display: none; } .product__quantity { height: 42px; display: inline-flex; border: 1px solid var(--color-border); overflow: hidden; transition: border-color 0.3s ease-in-out; } .product__quantity:hover { border-color: var(--color-text); } .product__quantity input { width: 24px; border: 0; overflow: visible; text-align: center; padding: 0; } .product__quantity input::-webkit-outer-spin-button, .product__quantity input::-webkit-inner-spin-button { -webkit-appearance: none; } @media (max-width: 959px) { .product__quantity input { width: 36px } } .product__quantity-error { margin-top: calc(4px * 7); margin-top: var(--spacing-7); color: var(--color-text-error); } .product__quantity-error.hidden { display: none; } .product__share { position: relative; text-transform: none; } .product__share.active .product__share-icons { visibility: visible; transition: visibility 0.4s ease-in-out 0.1s; } .product__share.active .product__share-icons a { pointer-events: all; } .product__share.active .product__share-text { padding-right: 160px; } .product__share .product__share-text { display: flex; flex-shrink: 0; text-transform: none; transition: padding 0.3s ease; pointer-events: none; } .product__share .product__share-text .icon { margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .product__share .product__share-icons { visibility: hidden; position: absolute; right: 28px; padding-left: calc(4px * 7); padding-left: var(--spacing-7); margin-left: calc(4px * 7); margin-left: var(--spacing-7); border-left: 1px solid var(--color-border); transition: visibility 0.1s ease-in-out; pointer-events: none; } .product__share .product__share-icons a+a { margin-left: calc(4px * 4); margin-left: calc(var(--spacing-unit) * 4); } .product__block--product-header { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .product__block--product-header.product__block--with-divider { padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); border-bottom: 1px solid var(--color-border); } .product__callouts .ff-heading { margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } .product__callouts-item { display: flex; padding: calc(4px * 2) 0; padding: var(--spacing-2) 0; } .product__callouts-item-icon, .product__callouts-item-icon.icon, .product__callouts-item-icon.image { margin-right: calc(4px * 2); margin-right: var(--spacing-2); width: 32px; height: 32px; display: flex; flex-shrink: 0; } .product__callouts-item-icon svg, .product__callouts-item-icon img, .product__callouts-item-icon.icon svg, .product__callouts-item-icon.icon img, .product__callouts-item-icon.image svg, .product__callouts-item-icon.image img { width: 100%; height: auto; } .product__callouts-items[data-with-dividers="true"] .product__callouts-item:not(:first-child) { border-top: 1px solid var(--color-border); } .product__callouts-items[data-with-dividers="false"] .product__callouts-item+.product__callouts-item { margin-top: calc(-1 * (4px * 1)); margin-top: calc(-1 * calc(4px * 1)); margin-top: calc(-1 * var(--spacing-1)); } .product__callouts-items[data-with-box="true"] { border: 1px solid var(--color-border); padding: 0 calc(4px * 3); padding: 0 var(--spacing-3); } .product__callouts-item-text p:first-child, .product__callouts-item-text p+p { margin-top: 0.2em; } .product__callouts-mini-items { display: flex; flex-wrap: wrap; margin: calc((4px * 1) * -1); margin: calc(calc(4px * 1) * -1); margin: calc(var(--spacing-1) * -1); } .product__callouts-mini-item { border: 1px solid currentColor; display: flex; align-items: center; padding: 2px calc(4px * 2); padding: 2px var(--spacing-2); margin: calc(4px * 1); margin: var(--spacing-1); } .product__callouts-mini-item-icon, .product__callouts-mini-item-icon.icon, .product__callouts-mini-item-icon.image { margin-right: calc(4px * 2); margin-right: var(--spacing-2); width: 30px; height: 30px; display: flex; flex-shrink: 0; } .product__callouts-mini-item-icon svg, .product__callouts-mini-item-icon img, .product__callouts-mini-item-icon.icon svg, .product__callouts-mini-item-icon.icon img, .product__callouts-mini-item-icon.image svg, .product__callouts-mini-item-icon.image img { width: 100%; height: auto; } .product-block-social-share .btn.social-share__button { padding: 0; } .product__information-popup { cursor: pointer; -webkit-text-decoration: underline; text-decoration: underline; display: inline-flex; align-items: center; transition: opacity 0.2s ease; } .product__information-popup .icon { margin-top: 1px; margin-right: calc(4px * 1); margin-right: var(--spacing-1); } .product__information-popup:hover, .product__information-popup:focus { opacity: 0.6; } .product__information-popup-custom-icon { width: 24px; height: 24px; margin-top: 1px; margin-right: calc(4px * 1); margin-right: var(--spacing-1); } .product__custom-option-instructions { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product__custom-option-content-inner { display: inline-flex; align-items: center; cursor: pointer; } .product__custom-option-type--textarea textarea { line-height: var(--line-height-body); } .product__custom-option-type--textarea .textarea-note { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product__custom-option-input { width: calc(4px * 4); width: var(--spacing-4); height: calc(4px * 4); height: var(--spacing-4); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-input); color: var(--color-text); } .product__custom-option-input .icon { display: flex; width: 10px; height: 10px; color: var(--color-text); opacity: 0; transition: opacity 0.3s; } .product__custom-option-label { padding-left: calc(4px * 3); padding-left: var(--spacing-3); } .product__custom-option-label span { margin-left: auto; color: var(--color-text); } .product__custom-option-checkbox:checked+.product__custom-option-content-inner .product__custom-option-input { border-color: var(--color-text); } .product__custom-option-checkbox:checked+.product__custom-option-content-inner .product__custom-option-input .icon { opacity: 1; } .product__custom-option-checkbox:disabled+.product__custom-option-content-inner { color: var(--color-text-meta); cursor: default; } .product__custom-option-checkbox:disabled+.product__custom-option-content-inner .product__custom-option-input { border-color: var(--color-border-input-alpha); background-color: var(--color-text-input-alpha); } .product__label-wrapper+.product__custom-option-instructions { margin-top: calc((4px * 1) * -1); margin-top: calc(calc(4px * 1) * -1); margin-top: calc(var(--spacing-1) * -1); margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .product__custom-option-type--checkbox+.product__custom-option-instructions { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .product__controls-group--checkbox+.product__controls-group--checkbox { margin-top: calc((4px * 3) * -1); margin-top: calc(calc(4px * 3) * -1); margin-top: calc(var(--spacing-3) * -1); } .product__custom-option-radio+.product__custom-option-content-inner .product__custom-option-input { border-radius: 100%; margin: 0; border: 1px solid var(--color-border); background-color: var(--color-background); } .product__custom-option-radio+.product__custom-option-content-inner .product__custom-option-input .indicator { border-radius: 100%; width: calc(4px * 2); width: var(--spacing-2); height: calc(4px * 2); height: var(--spacing-2); background-color: var(--color-text); opacity: 0; } .product__custom-option-radio:checked+.product__custom-option-content-inner .product__custom-option-input { border-color: var(--color-text); } .product__custom-option-radio:checked+.product__custom-option-content-inner .product__custom-option-input .indicator { opacity: 1; } .product__custom-option-radio-content+.product__custom-option-radio-content { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .product-form__gift-card-recipient { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .product-form__gift-card-recipient .gift-card-recipient-fields { display: none; } .product-form__gift-card-recipient .product__gift-card-recipient-error { margin-top: calc(4px * 2); margin-top: var(--spacing-2); color: var(--color-text-error); } .product-form__gift-card-recipient .product__gift-card-recipient-error.hidden { display: none; } .no-js .product-form__gift-card-recipient[data-source="product-display"] { display: none; } .no-js .product-form__gift-card-recipient[data-source="product-form"] .gift-card-recipient-fields { display: block; } .product__block-featured-products.hidden { display: none; } .product__block-featured-products .product__block-featured-products__heading { margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } .product__block-featured-products .product__block-featured-products-grid { --grid-column-gap: var(--spacing-3); --grid-column-gap-desktop: var(--spacing-4); --grid-row-gap: var(--spacing-8); --grid-column-count: 3; --grid-item--min-width: 130px; --gap-count: calc(var(--grid-column-count) - 1); --total-gap-width: calc(var(--gap-count) * var(--grid-column-gap)); --total-gap-width-desktop: calc(var(--gap-count) * var(--grid-column-gap-desktop)); --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); --grid-item--max-width-desktop: calc((100% - var(--total-gap-width-desktop)) / var(--grid-column-count)); } .product__block-featured-products .product__block-featured-products-grid.product__block-featured-products-grid--has-mobile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); grid-column-gap: var(--grid-column-gap); grid-row-gap: var(--grid-row-gap); } @media (min-width: 720px) { .product__block-featured-products .product__block-featured-products-grid.product__block-featured-products-grid--has-mobile-grid { grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width-desktop)), 1fr)); grid-column-gap: var(--grid-column-gap-desktop) } } @media (min-width: 720px) { .product__block-featured-products .product__block-featured-products-grid.product__block-featured-products-grid--has-mobile-swipe { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width-desktop)), 1fr)); grid-column-gap: var(--grid-column-gap-desktop); grid-row-gap: var(--grid-row-gap) } } .product__block-featured-products .product__block-featured-products-grid.product__block-featured-products-grid--is-collapsible-row { margin-top: calc(4px * 1); margin-top: var(--spacing-1); margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); } .product__block-featured-products .accordion__content { max-width: none; max-width: initial; } .product__block-featured-products .product-item__meta { align-items: start; } .product__block-featured-products .product-item__text { text-align: left; } .product__block-featured-products .product-item__inner .product-item__hover-container, .product__block-featured-products .product-item__variant-info, .product__block-featured-products .product-item__swatch-count { display: none; } .product-block-image .section-blocks__image { margin-top: 0; margin-bottom: 0; } .quick-product--background-spacer { height: 100vh; } .quick-product--wrap.modal { padding: 0; --modal-width: 746px; } .quick-product--wrap.modal .modal__wash, .quick-product--wrap.modal .modal__inner { z-index: calc(1300 - 1); z-index: calc(var(--z-index-modal) - 1); } .quick-product--wrap.modal .information-popup__content { display: none; } .quick-view-modal__content { height: 100%; min-height: 300px; } .quick-view-modal__content.empty { display: flex; align-items: center; justify-content: center; } .quick-view-modal-loading-indicator { align-content: center; justify-content: center; display: flex; height: 100%; flex-direction: column; width: 100%; text-align: center; opacity: 0.5; } .quick-product--wrap.modal .quick-product--modal__inner.modal__inner { padding: 0; width: var(--modal-width); overflow: hidden; } @media (max-width: 719px) { .quick-product--wrap.modal .quick-product--modal__inner.modal__inner { width: 100%; border-width: 0; border-top-right-radius: 8px; border-top-left-radius: 8px; position: fixed; bottom: 0; height: auto } } .quick-product--wrap.modal .quick-product--modal__inner.modal__inner button.modal__close-icon { position: absolute; top: calc(4px * 5); top: var(--spacing-5); right: calc(4px * 5); right: var(--spacing-5); } .quick-product { display: flex; --quick-product-left-desktop-width: 323px; } .quick-product .product__block--product-header { display: flex; } .quick-product .product__block--product-header .product__block--product-header-image-wrap { width: 122px; flex-shrink: 0; margin-right: calc(4px * 5); margin-right: var(--spacing-5); } @media (min-width: 720px) { .quick-product .product__block--product-header .product__block--product-header-image-wrap { display: none } } .quick-product .product__block--product-header .product__block--product-header-inner { flex-grow: 1; } [data-price-display-type="hide"] .quick-product .product__block--product-header .product__block--product-header-inner .product__price-and-ratings[data-show-product-rating="false"] { margin-top: 0; display: none; } .quick-product .product__block--product-header .product__block--product-header-inner .product__price-and-ratings[data-show-product-rating="true"] { display: block; } .quick-product .product__block--product-header .product__block--product-header-inner .product-rating { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } @media (max-width: 719px) { .quick-product .product__title { font-family: var(--font-body); font-weight: var(--font-body-weight); font-style: var(--font-body-style); line-height: var(--line-height-body); font-size: var(--font-size-listing-title); text-transform: var(--font-product-listing-title-text-transform); letter-spacing: var(--font-product-listing-title-base-letter-spacing) } } @media (min-width: 720px) { .quick-product .product__title { padding-right: calc(4px * 2); padding-right: var(--spacing-2) } } .quick-product .product__policies { margin-top: calc(4px * 3); margin-top: var(--spacing-3); margin-bottom: 0; } .quick-view-view-product-details-link { display: flex; align-items: center; margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .quick-view-view-product-details-link .icon { width: 14px; height: 14px; margin-top: 0.2em; margin-left: calc(4px * 2); margin-left: var(--spacing-2); } .quick-product--left { width: var(--quick-product-left-desktop-width); padding: calc(4px * 4); padding: var(--spacing-4); flex-shrink: 0; } @media (max-width: 719px) { .quick-product--left { display: none } } .quick-product--right { width: 100%; max-height: calc(100vh - (calc(4px * 10) * 2)); max-height: calc(100vh - (var(--spacing-10) * 2)); display: flex; flex-direction: column; } @media (min-width: 720px) { .quick-product--right { width: calc(var(--modal-width) - var(--quick-product-left-desktop-width)) } } .quick-product--right-viewport { overflow-y: auto; width: 100%; padding-right: calc(4px * 4); padding-right: var(--spacing-4); } @media (max-width: 719px) { .quick-product--right-viewport { max-height: 80vh; padding: 0 calc(4px * 4); padding: 0 var(--spacing-4) } } @media (min-width: 720px) { .quick-product--right-viewport { margin-bottom: auto } } @media (max-width: 479px) { .quick-product--right-viewport { max-height: 75vh } } .quick-product--right-viewport--footer { position: relative; padding-right: calc(4px * 4); padding-right: var(--spacing-4); padding-bottom: calc(4px * 4); padding-bottom: var(--spacing-4); } .quick-product--right-viewport--footer .product-form__controls-group--submit { margin: 0; } @media (max-width: 719px) { .quick-product--right-viewport--footer { padding: calc(4px * 4); padding: var(--spacing-4) } } .quick-product--right-viewport-fade--wrap { position: relative; } .quick-product--right-viewport-fade { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; pointer-events: none; background: linear-gradient(to top, var(--color-background) 0%, var(--color-background-transparent) 100%); } .quick-product--right-inner { padding-top: calc(4px * 4); padding-top: var(--spacing-4); } @media (max-width: 719px) { .quick-product--right-inner { padding-top: calc(4px * 12); padding-top: var(--spacing-12) } } .quick-product--header-block-wrap .product__title { word-break: break-word; -webkit-hyphens: manual; hyphens: manual; } .collapsible-row-list__inner { margin-left: auto; margin-right: auto; max-width: var(--content-width); } .collapsible-row-list__heading { text-align: var(--heading-alignment); } .collapsible-row-list__heading+.collapsible-row-list-item, .collapsible-row-list__subheading+.collapsible-row-list-item { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .announcement-bar__outer-wrapper { order: -1; z-index: 510; z-index: var(--z-index-announcement-bar); } @media (min-width: 960px) { html.sticky-header-enabled[data-enable-sticky-announcement-bar*="desktop"] .announcement-bar__outer-wrapper { position: sticky; top: 0 } } @media (max-width: 959px) { html.sticky-header-enabled[data-enable-sticky-announcement-bar*="mobile"] .announcement-bar__outer-wrapper { position: sticky; top: 0 } } .announcement-bar { --min-height: 34px; z-index: 510; z-index: var(--z-index-announcement-bar); color: var(--color-text); background-color: var(--color-background); position: relative; } .announcement-bar, .announcement-bar .announcement-bar__content { min-height: var(--min-height); } .announcement-bar.hidden { display: none; } .announcement-bar .announcement-bar__content { display: flex; align-items: center; justify-content: center; } .announcement-bar .swiper-wrapper { align-items: center; } .announcement-bar__item { line-height: var(--line-height-body) !important; } .announcement-bar__item { position: relative; width: 100%; height: 98px; align-items: center; justify-content: space-around; text-align: center; padding: 4px 0; padding: var(--spacing-unit) 0; min-height: var(--min-height); display: flex !important; } .announcement-bar__item .announcement-bar__item-inner { max-width: calc(100% - (2 * calc(4px * 16))); max-width: calc(100% - (2 * var(--spacing-16))); max-width: calc(100% - calc(2 * calc(4px * 16))); max-width: calc(100% - calc(2 * var(--spacing-16))); margin: 0 auto; } .announcement-bar[data-item-count="1"] .announcement-bar__item .announcement-bar__item-inner { max-width: calc(100% - (2 * calc(4px * 4))); max-width: calc(100% - (2 * var(--spacing-4))); max-width: calc(100% - calc(2 * calc(4px * 4))); max-width: calc(100% - calc(2 * var(--spacing-4))); } @media (min-width: 720px) { .announcement-bar__item .announcement-bar__item-inner.announcement-bar__item-inner-mobile-only { display: none } } @media (max-width: 719px) { .announcement-bar__item .announcement-bar__item-inner.announcement-bar__item-inner-desktop-only { display: none } } .announcement-bar__item p>a, .announcement-bar__item p>span.fake-link { -webkit-text-decoration: underline; text-decoration: underline; } .announcement-bar__item .announcement-bar__link:hover { -webkit-text-decoration: underline; text-decoration: underline; } .ui-overlap-wrap { position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .announcement-bar:not(.slider-active) .ui-overlap-wrap { display: none; } .ui-overlap { display: flex; align-items: center; justify-content: center; height: 100%; } .ui-overlap .fader { background: blue; flex-grow: 1; flex-shrink: 1; display: flex; z-index: 2; height: 100%; padding: 0 calc(4px * 8); padding: 0 var(--spacing-8); pointer-events: none; } @media (max-width: 479px) { .ui-overlap .fader { padding: 0 calc(4px * 4); padding: 0 var(--spacing-4) } } .ui-overlap .fader.left { justify-content: flex-end; background: linear-gradient(to left, var(--color-gradient-overlay-transparent) 0, var(--color-gradient-overlay) 50px, var(--color-gradient-overlay) 100%); padding-left: calc(4px * 2); padding-left: var(--spacing-2); } .ui-overlap .fader.right { justify-content: flex-start; background: linear-gradient(to right, var(--color-gradient-overlay-transparent) 0, var(--color-gradient-overlay) 50px, var(--color-gradient-overlay) 100%); padding-right: calc(4px * 2); padding-right: var(--spacing-2); } .ui-overlap .slider-nav-button { height: 100%; display: flex; align-items: center; opacity: 0.5; padding: 0 calc(4px * 4); padding: 0 var(--spacing-4); pointer-events: all; transition: opacity 200ms ease-out; } .ui-overlap .slider-nav-button .icon { width: 12px; } .ui-overlap .slider-nav-button:hover { opacity: 1; } .ui-overlap .slider-nav-button.slider-nav-button-prev .icon { transform: rotate(90deg); } .ui-overlap .slider-nav-button.slider-nav-button-next .icon { transform: rotate(-90deg); } .ui-overlap .ui-overlap-item-clones { visibility: hidden; } .ui-overlap .ui-overlap-item-clones .announcement-bar__item { line-height: 0; height: 0; opacity: 0; pointer-events: none; } .contact-form__inner { margin-left: auto; margin-right: auto; max-width: var(--content-width); } .contact-form__heading { text-align: var(--heading-alignment); } .contact-form__text { text-align: var(--text-alignment); } .contact-form__wrapper { --contact-form-row-gap: var(--spacing-5); display: grid; grid-column-gap: calc(4px * 6); grid-column-gap: var(--spacing-6); grid-row-gap: calc(4px * 5); grid-row-gap: var(--contact-form-row-gap); } @media (min-width: 480px) { .contact-form__wrapper { grid-template-columns: repeat(2, 1fr) } } .contact-form__input-wrapper { width: 100%; } .contact-form-checkbox { display: flex; } .contact-form-checkbox__content-inner { display: inline-flex; align-items: center; cursor: pointer; } .filter-item--chip .contact-form-checkbox__content-inner { display: flex; align-items: stretch; width: 100%; } .contact-form-checkbox__input { width: calc(4px * 4); width: var(--spacing-4); height: calc(4px * 4); height: var(--spacing-4); border: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; } .contact-form-checkbox__checkbox { color: var(--color-text); } .contact-form-checkbox__checkbox:checked+.contact-form-checkbox__content-inner .contact-form-checkbox__input { border-color: var(--color-text); } .contact-form-checkbox__checkbox:checked+.contact-form-checkbox__content-inner .contact-form-checkbox__input .icon { opacity: 1; } .contact-form-checkbox__checkbox:focus-visible+.contact-form-checkbox__content-inner .contact-form-checkbox__input { border: 2px solid var(--color-text); } .contact-form-checkbox__input { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-input); } .contact-form-checkbox__input .icon { display: flex; width: 10px; height: 10px; opacity: 0; transition: opacity 0.3s; } .contact-form__heading-block { margin: calc(4px * 3) 0; margin: var(--spacing-3) 0; font-size: var(--font-size-body-250); } .contact-form__heading-block+.contact-form__paragraph { margin-top: calc(-1 * var(--contact-form-row-gap)); } .contact-form__spacer { --spacer-spacing: var(--spacing-3); position: relative; margin: calc(4px * 3) 0 0; margin: var(--spacer-spacing) 0 0; padding-bottom: calc(4px * 3); padding-bottom: var(--spacer-spacing); } .contact-form__spacer--small { --spacer-spacing: var(--spacing-1); } .contact-form__spacer--large { --spacer-spacing: var(--spacing-6); } .contact-form__spacer--extra-large { --spacer-spacing: var(--spacing-9); } .contact-form__spacer--show-divider::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: inset 0px 1px var(--color-border); pointer-events: none; } .contact-form__checkbox-label { display: flex; align-items: center; } .contact-form__checkbox-label-text { padding-left: calc(4px * 3); padding-left: var(--spacing-3); } .contact-form__radio-label { margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); } .contact-form__radio-input { border-radius: 100%; margin: 0; width: 24px; height: 24px; border: 1px solid var(--color-border); } .contact-form__radio-input+.contact-form__radio-input-content .contact-form__radio-input-button { border-radius: 100%; margin: 0; border: 1px solid var(--color-border); background-color: var(--color-background); } .contact-form__radio-input+.contact-form__radio-input-content .contact-form__radio-input-button .contact-form__radio-input-indicator { border-radius: 100%; width: calc(4px * 2); width: var(--spacing-2); height: calc(4px * 2); height: var(--spacing-2); background-color: var(--color-text); opacity: 0; } .contact-form__radio-input:checked+.contact-form__radio-input-content .contact-form__radio-input-button { border-color: var(--color-text); } .contact-form__radio-input:checked+.contact-form__radio-input-content .contact-form__radio-input-button .contact-form__radio-input-indicator { opacity: 1; } .contact-form__radio-input:focus-visible+.contact-form__radio-input-content .contact-form__radio-input-button { border: 2px solid var(--color-text); } .contact-form__radio-input-label { padding-left: calc(4px * 3); padding-left: var(--spacing-3); } .contact-form__radio-input-content { display: inline-flex; align-items: center; cursor: pointer; } .contact-form__radio-input-button { width: calc(4px * 4); width: var(--spacing-4); height: calc(4px * 4); height: var(--spacing-4); border: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; } .contact-form__item--full-width { grid-column: 1 / -1; } .contact-form__button--full-width { width: 100%; } .contact-form__recaptcha-terms { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .blog-posts__grid { display: grid; grid-column-gap: calc(4px * 10); grid-column-gap: var(--spacing-10); -moz-column-gap: calc(4px * 10); column-gap: calc(4px * 10); -moz-column-gap: var(--spacing-10); column-gap: var(--spacing-10); grid-row-gap: calc(4px * 9); grid-row-gap: var(--spacing-9); row-gap: calc(4px * 9); row-gap: var(--spacing-9); } @media (min-width: 720px) { .blog-posts__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1200px) { .blog-posts__grid { -moz-column-gap: calc(4px * 5); column-gap: calc(4px * 5); -moz-column-gap: var(--spacing-5); column-gap: var(--spacing-5); row-gap: calc(4px * 12); row-gap: var(--spacing-12) } } .collection-list-grid.collection-list-grid--mobile-per-view-1 .collection-list-grid__collections { grid-template-columns: 1fr; } @media (min-width: 720px) { .collection-list-grid.collection-list-grid--per-view-3 .collection-list-grid__collections { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 720px) { .collection-list-grid.collection-list-grid--per-view-4 .collection-list-grid__collections { grid-template-columns: repeat(4, 1fr) } } @media (min-width: 720px) { .collection-list-grid.collection-list-grid--per-view-5 .collection-list-grid__collections { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 960px) { .collection-list-grid.collection-list-grid--per-view-5 .collection-list-grid__collections { grid-template-columns: repeat(5, 1fr) } } .collection-list-grid__collections { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: calc(4px * 3); grid-gap: var(--spacing-3); } @media (min-width: 960px) { .collection-list-grid__collections { grid-gap: calc(4px * 4); grid-gap: var(--spacing-4) } } @media (min-width: 1200px) { .collection-list-grid__collections { grid-gap: calc(4px * 6); grid-gap: var(--spacing-6) } } html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized).carousel-mobile-per-view-1 .collection-list-slider__collections { grid-template-columns: 1fr; } @media (min-width: 720px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized).carousel--per-view-3 .collection-list-slider__collections { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 720px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized).carousel--per-view-4 .collection-list-slider__collections { grid-template-columns: repeat(4, 1fr) } } @media (min-width: 720px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized).carousel--per-view-5 .collection-list-slider__collections { grid-template-columns: repeat(4, 1fr) } } @media (min-width: 1200px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized).carousel--per-view-5 .collection-list-slider__collections { grid-template-columns: repeat(5, 1fr) } } html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized) .collection-list-slider__collections { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-auto-rows: 0; grid-gap: calc(4px * 3); grid-gap: var(--spacing-3); overflow: hidden; } @media (min-width: 720px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized) .collection-list-slider__collections { grid-gap: calc(4px * 4); grid-gap: var(--spacing-4) } } @media (min-width: 1200px) { html:not(.no-js) .collection-list-slider__content:not(.swiper-initialized) .collection-list-slider__collections { grid-gap: calc(4px * 6); grid-gap: var(--spacing-6) } } @media (min-width: 960px) { .featured-collection-grid.featured-collection-grid--per-view-3 .featured-collection-grid__products { grid-template-columns: repeat(3, 1fr) } } @media (min-width: 960px) { .featured-collection-grid.featured-collection-grid--per-view-4 .featured-collection-grid__products { grid-template-columns: repeat(4, 1fr) } } @media (min-width: 960px) { .featured-collection-grid.featured-collection-grid--per-view-5 .featured-collection-grid__products { grid-template-columns: repeat(5, 1fr) } } .featured-collection-grid .carousel__navigation-buttons { display: none; } @media (min-width: 960px) { .featured-collection-grid__products { display: grid; grid-column-gap: calc((4px * 4) + 1px); grid-column-gap: calc(calc(4px * 4) + 1px); grid-column-gap: calc(var(--spacing-4) + 1px); -moz-column-gap: calc((4px * 4) + 1px); column-gap: calc((4px * 4) + 1px); -moz-column-gap: calc(calc(4px * 4) + 1px); column-gap: calc(calc(4px * 4) + 1px); -moz-column-gap: calc(var(--spacing-4) + 1px); column-gap: calc(var(--spacing-4) + 1px); grid-row-gap: calc((4px * 4) + 1px); grid-row-gap: calc(calc(4px * 4) + 1px); grid-row-gap: calc(var(--spacing-4) + 1px); row-gap: calc((4px * 4) + 1px); row-gap: calc(calc(4px * 4) + 1px); row-gap: calc(var(--spacing-4) + 1px) } } @media (min-width: 1200px) { .featured-collection-grid__products { -moz-column-gap: calc((4px * 6) + 1px); column-gap: calc((4px * 6) + 1px); -moz-column-gap: calc(calc(4px * 6) + 1px); column-gap: calc(calc(4px * 6) + 1px); -moz-column-gap: calc(var(--spacing-6) + 1px); column-gap: calc(var(--spacing-6) + 1px); row-gap: calc((4px * 6) + 1px); row-gap: calc(calc(4px * 6) + 1px); row-gap: calc(var(--spacing-6) + 1px) } } @media (max-width: 959px) { .no-js .featured-collection-grid__products { display: flex; overflow: scroll } } .featured-collection-slider__meta .featured-collection-slider__navigation-buttons { display: none; } @media (min-width: 720px) { .featured-collection-slider__meta .featured-collection-slider__navigation-buttons.visible { display: flex; } } .featured-collection-slider__meta-controls { display: flex; } .featured-collection-slider__navigation-list { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; } .featured-collection-slider__navigation-list li { margin-right: calc(4px * 6); margin-right: var(--spacing-6); } .no-js .featured-collection-slider__navigation-list { display: none; } .featured-collection-slider__navigation-list-item { display: flex; flex-direction: column; margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); opacity: 0.7; } @media (min-width: 720px) { .featured-collection-slider__navigation-list-item { margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8) } } .featured-collection-slider__navigation-list-item.selected { opacity: 1; } .featured-collection-slider__navigation-list-item.selected .indicator { width: 100%; } .featured-collection-slider__navigation-list-item .indicator { margin: calc(4px * 2) auto 0; margin: var(--spacing-2) auto 0; width: 0%; height: 2px; background-color: var(--color-text); transition: width 500ms cubic-bezier(0.33, 0, 0, 1); transition: width var(--duration-normal) var(--easing); } .featured-collection-slider__content { display: none; } .animation .featured-collection-slider__content.fadeout { opacity: 0; transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing); } .animation .featured-collection-slider__content.init-reveal { opacity: 0; transition: transform 300ms cubic-bezier(0.33, 0, 0, 1), opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-fast) var(--easing), opacity var(--duration-fast) var(--easing); } .animation .featured-collection-slider__content.init-reveal.reveal { opacity: 1; transform: none; transform: initial; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } html.do-anim .animation .featured-collection-slider__content.init-reveal { transform: translateY(20px); } html.do-anim .animation .featured-collection-slider__content.init-reveal.reveal { transform: none; transform: initial; } .featured-collection-slider__content.visible { display: block; } .featured-collection-slider__content-view-all-wrapper { height: auto; height: initial; display: flex; align-items: center; margin-left: calc(4px * 4); margin-left: var(--spacing-4); } @media (min-width: 720px) { .featured-collection-slider__content-view-all-wrapper { margin-left: calc(4px * 6); margin-left: var(--spacing-6) } } .featured-collection-slider__content-view-all-header+.featured-collection-slider__view-all { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .featured-product { margin: 0; } .image-compare { --text-container-outer: 10%; --text-container-outer-large: 14%; } .image-compare.image-compare--image-right.image-compare--justify-left .image-compare__text-container-inner { padding-left: 0; } .image-compare.image-compare--image-right.image-compare--justify-right .image-compare__text-container-inner { padding-left: 0; } .image-compare.image-compare--image-left.image-compare--justify-right .image-compare__text-container-inner { padding-right: 0; } .image-compare.image-compare--image-left.image-compare--justify-left .image-compare__text-container-inner { padding-right: 0; } .image-compare__inner { display: flex; align-items: center; } .image-compare__inner .image-compare__text-container, .image-compare__inner .image-compare__image-container { width: 100%; height: 100%; } .image-compare--image-below .image-compare__inner { flex-direction: column; } .image-compare--image-left .image-compare__inner { flex-direction: row-reverse; } .image-compare--image-right .image-compare__inner { flex-direction: row; } @media (max-width: 719px) { .image-compare .image-compare__inner { flex-direction: column } } .image-compare__text-container { display: flex; flex: 0.5; flex-direction: column; justify-content: center; text-align: var(--text-alignment); } @media (min-width: 720px) { .image-compare--image-left .image-compare__text-container-inner, .image-compare--image-right .image-compare__text-container-inner { padding-right: var(--text-container-outer); padding-left: var(--text-container-outer) } } @media (min-width: 1200px) { .image-compare--image-left .image-compare__text-container-inner, .image-compare--image-right .image-compare__text-container-inner { padding-right: var(--text-container-outer-large); padding-left: var(--text-container-outer-large) } } @media (min-width: 720px) { .image-compare--image-left .image-compare__text-container-inner .section-introduction__subheading, .image-compare--image-right .image-compare__text-container-inner .section-introduction__subheading { margin-bottom: 0 } } .image-compare__image-container { position: relative; display: flex; flex: 0.5; max-width: var(--image-max-width); margin: 0 auto; --position: 50%; } .image-compare__image-container-inner { position: relative; width: 100%; } .image-compare__image-container-inner .image-compare__image-after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .image-compare--horizontal .image-compare__image-container-inner .image-compare__image-after { -webkit-clip-path: inset(0 0 0 var(--position)); clip-path: inset(0 0 0 var(--position)); } .image-compare--vertical .image-compare__image-container-inner .image-compare__image-after { -webkit-clip-path: inset(calc(100% - var(--position)) 0 0 0); clip-path: inset(calc(100% - var(--position)) 0 0 0); } .image-compare__image--blur .image-compare__image { filter: blur(var(--filter-amount)); } .image-compare__image--brightness .image-compare__image { filter: brightness(var(--filter-amount)); } .image-compare__image--contrast .image-compare__image { filter: contrast(var(--filter-amount)); } .image-compare__image--grayscale .image-compare__image { filter: grayscale(var(--filter-amount)); } .image-compare__image--invert .image-compare__image { filter: invert(var(--filter-amount)); } .image-compare__image--saturate .image-compare__image { filter: saturate(var(--filter-amount)); } .image-compare__image--sepia .image-compare__image { filter: sepia(var(--filter-amount)); } .image-compare__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .image-compare__image-wrapper { overflow: hidden; } .image-compare__label-container-wrapper { display: flex; position: absolute; top: 0; right: 0; bottom: 0; left: 0; justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position); max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); margin: 0 auto; padding: calc(4px * 2) calc(4px * 2); padding: var(--spacing-2) var(--spacing-2); color: var(--color-text); } @media (min-width: 720px) { .image-compare__label-container-wrapper { padding: calc(4px * 3) calc(4px * 3); padding: var(--spacing-3) var(--spacing-3) } } .image-compare__label-container { background-color: var(--color-text-container); padding: calc(4px * 1) calc(4px * 3); padding: var(--spacing-1) var(--spacing-3); max-width: 600px; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } .image-compare__slider { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: ew-resize; opacity: 0; width: 100%; height: 100%; } .image-compare--vertical .image-compare__slider { cursor: ns-resize; writing-mode: bt-lr; -webkit-appearance: slider-vertical; } .image-compare__slider:focus-visible~.image-compare__slider-button { outline: 2px solid; outline-offset: 3px; } .image-compare__slider-line { position: absolute; background-color: var(--slider-color); pointer-events: none; } .image-compare--horizontal .image-compare__slider-line { width: 2px; height: 100%; transform: translateX(-50%); left: var(--position); } .image-compare--vertical .image-compare__slider-line { width: 100%; height: 2px; transform: translateY(50%); bottom: var(--position); } .image-compare__slider-button { height: 40px; width: 40px; position: absolute; display: grid; align-items: center; justify-items: center; place-items: center; background-color: var(--slider-color); color: black; border-radius: 50%; pointer-events: none; box-shadow: 1px 1px 1px hsl(0, 50%, 2%, 0.5); } .image-compare--horizontal .image-compare__slider-button { transform: translate(-50%, -50%); top: 50%; left: var(--position); } .image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrows { grid-template-columns: repeat(2, 1fr); } .image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrow-before .icon { transform: rotate(90deg); } .image-compare--horizontal .image-compare__slider-button .image-compare__slider-button-arrow-after .icon { transform: rotate(-90deg); } .image-compare--vertical .image-compare__slider-button { transform: translate(-50%, 50%); left: 50%; bottom: var(--position); } .image-compare--vertical .image-compare__slider-button .image-compare__slider-button-arrows { grid-template-rows: repeat(2, 1fr); } .image-compare--vertical .image-compare__slider-button .image-compare__slider-button-arrow-before .icon { transform: rotate(180deg); } .image-compare__slider-button-arrows { display: grid; align-items: center; justify-items: center; place-items: center; height: 20px; width: 20px; } .image-compare__slider-button-arrow { color: var(--slider-arrows-color); line-height: 0; } .image-compare__slider-button-arrow .icon { width: 10px; height: 10px; } .image-hero { position: relative; color: var(--color-text); } .image-hero.image-hero--image-aspect-custom .image-hero__image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: var(--custom-height-mobile); height: 100%; overflow: hidden; } @media (min-width: 720px) { .image-hero.image-hero--image-aspect-custom .image-hero__image-container { min-height: var(--custom-height) } } .image-hero.image-hero--image-aspect-custom .image-hero__image-container .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; width: 100%; height: 100%; } .image-hero.image-hero--image-aspect-custom .image-hero__text-container-wrapper { min-height: var(--custom-height-mobile); height: 100%; position: relative; } @media (min-width: 720px) { .image-hero.image-hero--image-aspect-custom .image-hero__text-container-wrapper { min-height: var(--custom-height) } } @media (min-width: 720px) { .image-hero.image-hero--text-center { text-align: center; } .image-hero.image-hero--text-right { text-align: right; } } @media (max-width: 719px) { .image-hero.image-hero--text-mobile-center { text-align: center; } .image-hero.image-hero--text-mobile-right { text-align: right; } } body.header-transparent #main>.shopify-section:first-child .image-hero { padding-top: 0; } .image-hero__inner { position: relative; } .image-hero__image { position: relative; height: 100%; } .image-hero__image.image-hero__image--mobile { display: none; } @media (max-width: 719px) { .image-hero__image.image-hero__image--mobile { display: block } } @media (max-width: 719px) { .image-hero__image.image-hero__image--mobile+.image-hero__image { display: none } } .image-hero__image-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .image-hero__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .image-hero__text-container-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position); max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); margin: 0 auto; padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } @media (max-width: 719px) { .image-hero__text-container-wrapper { justify-content: var(--text-horizontal-position-mobile); align-items: var(--text-vertical-position-mobile) } } .image-hero__text-container { max-width: 600px; display: flex; flex-direction: column; align-items: var(--text-horizontal-position); } @media (max-width: 719px) { .image-hero__text-container { align-items: var(--text-horizontal-position-mobile) } } body.header-transparent #main>.shopify-section:first-child .image-hero .image-hero__text-container { padding-top: var(--height-header); } .image-hero__text-container-inner { z-index: 1; } .image-hero-split { color: var(--color-text); background-color: var(--color-background); } body.header-transparent #main>.shopify-section:first-child .image-hero-split { padding-top: 0; } .image-hero-split__inner { position: relative; display: flex; flex-wrap: wrap; } .image-hero-split__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .image-with-text { --small-image-width: 42%; --small-image-offset: 7%; --text-container-outer: 10%; --text-container-outer-large: 14%; background-color: var(--section-background-color); color: var(--color-text); } @media (min-width: 720px) { .image-with-text.image-with-text--image-right .image-with-text__image-container { order: 1 } } .image-with-text.image-with-text--image-right.image-with-text--justify-left .image-with-text__text-container-inner { padding-left: 0; } .image-with-text.image-with-text--image-right.image-with-text--justify-right .image-with-text__text-container-inner { padding-left: 0; } .image-with-text.image-with-text--image-left.image-with-text--justify-right .image-with-text__text-container-inner { padding-right: 0; } .image-with-text.image-with-text--image-left.image-with-text--justify-left .image-with-text__text-container-inner { padding-right: 0; } .image-with-text.image-with-text--has-small-image .image-with-text__image-container-inner { position: relative; padding-right: var(--small-image-offset); padding-bottom: var(--small-image-offset); } .image-with-text.image-with-text--has-small-image .image-with-text__image-caption { padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); padding-right: calc(var(--small-image-width) + (4px * 2)); padding-right: calc(var(--small-image-width) + calc(4px * 2)); padding-right: calc(var(--small-image-width) + var(--spacing-2)); } @media (min-width: 720px) { .image-with-text.image-with-text--has-small-image .image-with-text__image-caption { padding-bottom: calc(4px * 4); padding-bottom: var(--spacing-4) } } .image-with-text.image-with-text--has-small-image.image-with-text--has-image-caption .image-with-text__image-container-inner { padding-bottom: 0; } .image-with-text.image-with-text--has-small-image.image-with-text--image-right .image-with-text__image-container-inner { padding-left: var(--small-image-offset); padding-right: 0; } .image-with-text.image-with-text--has-small-image.image-with-text--image-right .image-with-text__image-caption { padding-right: 0; padding-left: calc(var(--small-image-width) - (4px * 2)); padding-left: calc(var(--small-image-width) - calc(4px * 2)); padding-left: calc(var(--small-image-width) - var(--spacing-2)); } @media (min-width: 720px) { .image-with-text.image-with-text--has-small-image.image-with-text--image-right .image-with-text__image-caption { padding-left: 41% } } .image-with-text.image-with-text--has-small-image.image-with-text--image-right .image-with-text__small-image-wrapper { right: auto; right: initial; left: 0; } .image-with-text.image-with-text--justify-center .image-with-text__text-container-inner { margin-right: auto; margin-left: auto; } .image-with-text.image-with-text--justify-right .image-with-text__text-container-inner { margin-left: auto; } .image-with-text__content { position: relative; display: flex; } @media (max-width: 719px) { .image-with-text__content { flex-direction: column } } .image-with-text__image-container, .image-with-text__text-container { position: relative; width: 100%; } @media (min-width: 720px) { .image-with-text__image-container, .image-with-text__text-container { width: 50% } } .image-with-text__image-container { display: flex; align-items: center; } .image-with-text__image-container-inner { width: 100%; } .image-with-text__image-wrapper { margin: 0; } .image-with-text__image-caption { margin-top: calc(4px * 2); margin-top: var(--spacing-2); color: var(--color-text-alpha-60); } @media (min-width: 720px) { .image-with-text__image-caption { margin-top: calc(4px * 4); margin-top: var(--spacing-4) } } .image-with-text__image-caption.fs-body-50 { line-height: 1.45; } .image-with-text__small-image-wrapper { position: absolute; bottom: 0; right: 0; width: var(--small-image-width); } .image-with-text__small-image-wrapper .placeholder-image { background-color: var(--color-background-placeholder-lighter); } .image-with-text__text-container { display: flex; flex-direction: column; justify-content: center; margin-top: calc(4px * 10); margin-top: var(--spacing-10); text-align: var(--text-alignment); } @media (min-width: 720px) { .image-with-text__text-container { margin-top: 0 } } .image-with-text__text-container-inner { max-width: 600px; } @media (min-width: 720px) { .image-with-text__text-container-inner { padding-right: var(--text-container-outer); padding-left: var(--text-container-outer); max-width: calc(600px + (var(--text-container-outer) * 2)) } } @media (min-width: 1200px) { .image-with-text__text-container-inner { padding-right: var(--text-container-outer-large); padding-left: var(--text-container-outer-large); max-width: calc(600px + (var(--text-container-outer-large) * 2)) } } .image-with-text-split { text-align: var(--text-align); color: var(--color-text); } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-right .image-with-text-split__image-container { order: 1 } } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-right .image-with-text-split__text-container { padding-right: calc(4px * 20); padding-right: var(--spacing-20) } } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-right.image-with-text-split--image-padding-all-sides .image-with-text-split__image-container { padding-left: 0 } } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-left.image-with-text-split--image-padding-all-sides .image-with-text-split__image-container { padding-right: 0 } } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-left .image-with-text-split__text-container { padding-left: calc(4px * 20); padding-left: var(--spacing-20) } } @media (min-width: 960px) { .image-with-text-split.image-with-text-split--image-position-left.image-with-text-split--content-align-center .image-with-text-split__text-container, .image-with-text-split.image-with-text-split--image-position-right.image-with-text-split--content-align-center .image-with-text-split__text-container { padding-right: 3.3vw; padding-right: var(--space-outer); padding-left: 3.3vw; padding-left: var(--space-outer) } } .image-with-text-split.image-with-text-split--image-padding-top-and-bottom .image-with-text-split__image-container { padding-top: calc(4px * 10); padding-top: var(--spacing-10); padding-bottom: calc(4px * 10); padding-bottom: var(--spacing-10); } .image-with-text-split.image-with-text-split--image-padding-all-sides .image-with-text-split__image-container { padding: calc(4px * 10); padding: var(--spacing-10); } @media (max-width: 959px) { .image-with-text-split.image-with-text-split--image-padding-all-sides .image-with-text-split__image-container { padding-right: 3.3vw; padding-right: var(--space-outer); padding-left: 3.3vw; padding-left: var(--space-outer) } } @media (max-width: 959px) { .image-with-text-split.image-with-text-split--image-mobile-position-below-content .image-with-text-split__image-container { padding-top: 0; order: 1 } } @media (max-width: 959px) { .image-with-text-split.image-with-text-split--image-mobile-position-above-content .image-with-text-split__image-container { padding-bottom: 0 } } .image-with-text-split__inner { display: flex; flex-direction: column; background-color: var(--color-background); } @media (min-width: 960px) { .image-with-text-split__inner { flex-direction: row } } @media (min-width: 960px) { .image-with-text-split__image-container { width: 50% } } .image-with-text-split__image-container .image { height: 100%; display: flex; } .image-with-text-split__image-container .image__img { margin-top: auto; margin-bottom: auto; } @media (min-width: 960px) { .image-with-text-split__image.image.aspect-ratio--square, .image-with-text-split__image.image.aspect-ratio--landscape, .image-with-text-split__image.image.aspect-ratio--portrait { height: 100% } } .image-with-text-split__text-container { display: flex; flex-direction: column; justify-content: center; padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } @media (min-width: 960px) { .image-with-text-split__text-container { width: 50% } } .page-section__inner { max-width: var(--content-width); display: flex; flex-direction: column; justify-content: center; margin-left: auto; margin-right: auto; text-align: var(--content-alignment); } .page-section__inner .page-section__placeholder-wrapper { background-color: var(--color-background-meta); height: 300px; display: flex; align-items: center; justify-content: center; } .page-section__inner .page-section__placeholder-wrapper svg { height: 150%; opacity: 0.25; } .page-section__heading { text-align: var(--heading-alignment); } .page-section__heading+*, .page-section__text+* { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .page-section__heading+.page-section__button-wrapper, .page-section__text+.page-section__button-wrapper { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .recommended-products.hidden { display: none; } .rich-text__inner { max-width: var(--content-width); margin-left: auto; margin-right: auto; text-align: var(--content-alignment); } .rich-text__heading { text-align: var(--heading-alignment); } .slideshow { position: relative; } .slideshow.slideshow--image-aspect-custom .slideshow-slide__image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: var(--custom-height-mobile); height: 100%; overflow: hidden; } @media (min-width: 720px) { .slideshow.slideshow--image-aspect-custom .slideshow-slide__image-container { min-height: var(--custom-height) } } .slideshow.slideshow--image-aspect-custom .slideshow-slide__image-container .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; left: 0; width: 100%; height: 100%; } .slideshow.slideshow--image-aspect-custom .slideshow-slide__text-container-wrapper { min-height: var(--custom-height-mobile); height: 100%; position: relative; } @media (min-width: 720px) { .slideshow.slideshow--image-aspect-custom .slideshow-slide__text-container-wrapper { min-height: var(--custom-height) } } body.header-transparent #main>.shopify-section:first-child .slideshow { padding-top: 0; } .slideshow__inner { position: relative; } .video.video--has-video .video__media-container { background-color: #000; } @media (min-width: 720px) { .video.video--text-center { text-align: center; } .video.video--text-right { text-align: right; } } @media (max-width: 719px) { .video.video--text-mobile-center { text-align: center; } .video.video--text-mobile-right { text-align: right; } } .video__inner { position: relative; overflow: hidden; color: var(--overlay-text-color); } .video__image.image.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: black; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .video__image.image.overlay.visible { opacity: 1; } .video__video { position: relative; display: block; width: 100%; } .video__iframe { width: 100%; height: 100%; } .video__iframe iframe { width: 100%; height: 100%; } .video__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: 0; pointer-events: none; } .video__overlay.visible { opacity: var(--overlay-opacity); } .video__text-container-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position); margin: 0 auto; max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); opacity: 0; visibility: hidden; } .video__text-container-wrapper.visible { opacity: 1; visibility: visible; } .video__text-container-wrapper.enable-pointer { cursor: pointer; } @media (max-width: 719px) { .video__text-container-wrapper { justify-content: center; align-items: center } } @media (max-width: 719px) { .video__text-container-wrapper .video__text-container-text-play-button { margin: 0 } } .video__text-container { max-width: 600px; } @media (max-width: 719px) { .video__text-container-heading, .video__text-container-subheading, .video__text-container-text { display: none } } @media (min-width: 720px) { .video__text-intro { display: none } } .video-hero { color: var(--color-text); } .video-hero .video-hero__inner { overflow-y: hidden; } .video-hero .video-hero__media-container { overflow: hidden; } .video-hero .video-hero__media-container[data-has-video="true"] { background-color: #000; } @media (max-width: 719px) { .video-hero .video-hero__media-container[data-has-video="false"][data-has-mobile-video="true"] { background-color: #000 } } .video-hero .video-hero__media-container .video-hero__video, .video-hero .video-hero__media-container .video-hero__video--mobile { width: 100%; top: 0; right: 0; bottom: 0; left: 0; -o-object-fit: cover; object-fit: cover; } .video-hero .video-hero__media-container .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; top: 0; width: 100%; } .video-hero.video-hero--image-aspect-custom .video-hero__media-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; min-height: var(--custom-height-mobile); } @media (min-width: 720px) { .video-hero.video-hero--image-aspect-custom .video-hero__media-container { min-height: var(--custom-height) } } .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__image { min-height: var(--custom-height-mobile); } @media (min-width: 720px) { .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__image { min-height: var(--custom-height) } } .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__video, .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__video--mobile { position: absolute; height: 100%; } .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__video { -o-object-position: var(--video-focal-alignment); object-position: var(--video-focal-alignment); } .video-hero.video-hero--image-aspect-custom .video-hero__media-container .video-hero__video--mobile { -o-object-position: var(--video-focal-alignment-mobile); object-position: var(--video-focal-alignment-mobile); } .video-hero.video-hero--image-aspect-custom .video-hero__media-container .image__img { height: 100%; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); } .video-hero.video-hero--image-aspect-custom .video-hero__text-container-wrapper { position: relative; min-height: var(--custom-height-mobile); height: 100%; } @media (min-width: 720px) { .video-hero.video-hero--image-aspect-custom .video-hero__text-container-wrapper { min-height: var(--custom-height) } } @media (min-width: 720px) { .video-hero.video-hero--image-aspect-original.video-hero--has-mobile-video-only .video-hero__media-container { height: 100%; aspect-ratio: 1; aspect-ratio: var(--aspect-ratio-square) } } @media (max-width: 719px) { .video-hero.video-hero--image-aspect-original.video-hero--has-mobile-video-only .video-hero__media-container { aspect-ratio: var(--original-aspect-ratio-mobile) } } .video-hero.video-hero--image-aspect-original .video-hero__media-container { position: relative; aspect-ratio: var(--original-aspect-ratio); } @media (max-width: 719px) { .video-hero.video-hero--image-aspect-original .video-hero__media-container[data-has-mobile-video="true"] { aspect-ratio: var(--original-aspect-ratio-mobile) } } .video-hero.video-hero--image-aspect-original .video-hero__media-container .video-hero__video, .video-hero.video-hero--image-aspect-original .video-hero__media-container .video-hero__video--mobile { position: relative; } .video-hero.video-hero--image-aspect-original .video-hero__media-container .video-hero__video { aspect-ratio: var(--original-aspect-ratio); -o-object-position: center; object-position: center; } .video-hero.video-hero--image-aspect-original .video-hero__media-container .video-hero__video--mobile { aspect-ratio: var(--original-aspect-ratio-mobile); -o-object-position: center; object-position: center; } .video-hero.video-hero--image-aspect-original .video-hero__media-container .image__img { aspect-ratio: var(--original-aspect-ratio); -o-object-position: center; object-position: center; } @media (max-width: 719px) { .video-hero.video-hero--image-aspect-original .video-hero__media-container .image__img { aspect-ratio: var(--original-aspect-ratio-mobile) } } .video-hero.video-hero--image-aspect-original .video-hero__text-container-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @media (min-width: 720px) { .video-hero.video-hero--text-center { text-align: center; } .video-hero.video-hero--text-right { text-align: right; } } @media (max-width: 719px) { .video-hero.video-hero--text-mobile-center { text-align: center; } .video-hero.video-hero--text-mobile-right { text-align: right; } } body.header-transparent #main>.shopify-section:first-child .video-hero { padding-top: 0; } .video-hero__inner { position: relative; } .video-hero__media-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .video-hero__overlay { z-index: 2; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } body.header-transparent #main>.shopify-section:first-child .video-hero { --header-safe-zone: calc(var(--height-header) + var(--spacing-3)); } .video-hero__text-container-wrapper { z-index: 3; display: flex; justify-content: var(--text-hortizontal-position); align-items: var(--text-vertical-position); margin: 0 auto; max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } @media (max-width: 719px) { .video-hero__text-container-wrapper { justify-content: var(--text-horizontal-position-mobile); align-items: var(--text-vertical-position-mobile) } } body.header-transparent #main>.shopify-section:first-child .video-hero .video-hero__text-container-wrapper { padding-top: var(--header-safe-zone); } .video-hero__text-container { max-width: 600px; z-index: 1; } .video-with-text { --text-container-outer: 10%; --text-container-outer-large: 14%; text-align: var(--text-align); color: var(--color-text); background-color: var(--color-background); } .video-with-text.video-with-text--content-align-left.video-with-text--video-position-right .video-with-text__text-container-inner { padding-left: 0; } .video-with-text.video-with-text--content-align-left.video-with-text--video-position-left .video-with-text__text-container-inner { padding-right: 0; } .video-with-text.video-with-text--content-align-right.video-with-text--video-position-right .video-with-text__text-container-inner { padding-left: 0; } .video-with-text.video-with-text--content-align-right.video-with-text--video-position-left .video-with-text__text-container-inner { padding-right: 0; } @media (max-width: 719px) { .video-with-text.video-with-text--aspect-ratio-mobile-natural { --aspect-ratio: unset; } .video-with-text.video-with-text--aspect-ratio-mobile-natural .video-with-text__media-container { align-items: center; } .video-with-text.video-with-text--aspect-ratio-mobile-natural video { -o-object-fit: initial; object-fit: initial; } .video-with-text.video-with-text--aspect-ratio-mobile-square { --aspect-ratio: var(--aspect-ratio-square); } .video-with-text.video-with-text--aspect-ratio-mobile-portrait { --aspect-ratio: var(--aspect-ratio-portrait); } .video-with-text.video-with-text--aspect-ratio-mobile-portrait_alt { --aspect-ratio: var(--aspect-ratio-portrait-alt); } .video-with-text.video-with-text--aspect-ratio-mobile-landscape { --aspect-ratio: var(--aspect-ratio-landscape); } .video-with-text.video-with-text--aspect-ratio-mobile-landscape_alt { --aspect-ratio: var(--aspect-ratio-landscape-alt); } .video-with-text.video-with-text--aspect-ratio-mobile-landscape_wide_alt { --aspect-ratio: var(--aspect-ratio-widescreen); } .video-with-text.video-with-text--aspect-ratio-mobile-landscape_ultrawide_alt { --aspect-ratio: var(--aspect-ratio-ultrawide); } } @media (min-width: 720px) { .video-with-text.video-with-text--aspect-ratio-natural { --aspect-ratio: unset; } .video-with-text.video-with-text--aspect-ratio-natural .video-with-text__media-container { align-items: center; } .video-with-text.video-with-text--aspect-ratio-natural video { -o-object-fit: initial; object-fit: initial; } .video-with-text.video-with-text--aspect-ratio-square { --aspect-ratio: var(--aspect-ratio-square); } .video-with-text.video-with-text--aspect-ratio-portrait { --aspect-ratio: var(--aspect-ratio-portrait); } .video-with-text.video-with-text--aspect-ratio-portrait_alt { --aspect-ratio: var(--aspect-ratio-portrait-alt); } .video-with-text.video-with-text--aspect-ratio-landscape { --aspect-ratio: var(--aspect-ratio-landscape); } .video-with-text.video-with-text--aspect-ratio-landscape_alt { --aspect-ratio: var(--aspect-ratio-landscape-alt); } .video-with-text.video-with-text--aspect-ratio-landscape_wide_alt { --aspect-ratio: var(--aspect-ratio-widescreen); } .video-with-text.video-with-text--aspect-ratio-landscape_ultrawide_alt { --aspect-ratio: var(--aspect-ratio-ultrawide); } } .video-with-text .video-with-text__inner { display: flex; flex-direction: column; } @media (min-width: 720px) { .video-with-text .video-with-text__inner { flex-direction: row } } .video-with-text .video-with-text__media-container { max-width: 100%; display: flex; aspect-ratio: var(--aspect-ratio); justify-content: center; flex-direction: column; } @media (min-width: 720px) { .video-with-text .video-with-text__media-container { width: 50% } } .video-with-text .video-with-text__video-wrapper { width: 100%; position: relative; overflow: hidden; display: block; aspect-ratio: var(--aspect-ratio); } .video-with-text .video-with-text__text-container { display: flex; flex-direction: column; justify-content: center; } @media (min-width: 720px) { .video-with-text .video-with-text__text-container { width: 50% } } .video-with-text .video-with-text__text-container-inner { max-width: 600px; } @media (min-width: 720px) { .video-with-text .video-with-text__text-container-inner { padding-right: var(--text-container-outer); padding-left: var(--text-container-outer); max-width: calc(600px + (var(--text-container-outer) * 2)) } } @media (min-width: 1200px) { .video-with-text .video-with-text__text-container-inner { padding-right: var(--text-container-outer-large); padding-left: var(--text-container-outer-large); max-width: calc(600px + (var(--text-container-outer-large) * 2)) } } .video-with-text video { min-height: 100%; min-width: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 719px) { .video-with-text video { -o-object-position: var(--video-focal-alignment-horizontal-mobile); object-position: var(--video-focal-alignment-horizontal-mobile) } } @media (min-width: 720px) { .video-with-text video { -o-object-position: var(--video-focal-alignment-horizontal); object-position: var(--video-focal-alignment-horizontal) } } @media (max-width: 719px) { .video-with-text.video-with-text--aspect-ratio-mobile-natural video { width: 100%; } } @media (min-width: 720px) { .video-with-text.video-with-text--aspect-ratio-natural video { width: 100%; } } @media (min-width: 720px) { .video-with-text.video-with-text--video-position-right .video-with-text__media-container { order: 1 } } @media (max-width: 719px) { .video-with-text.video-with-text--video-mobile-position-below-content .video-with-text__media-container { order: 1; margin-top: calc(4px * 10); margin-top: var(--spacing-10) } } @media (max-width: 719px) { .video-with-text.video-with-text--video-mobile-position-above-content .video-with-text__text-container { margin-top: calc(4px * 10); margin-top: var(--spacing-10) } } .video-with-text .current-video-with-text-container { width: 100%; max-height: 100%; height: 100%; display: flex; line-height: 0; } .video-with-text .placeholder-image { flex-grow: 1; } @media (max-width: 959px) { .video-with-text .section--full-width { flex-direction: column } } .video-with-text .section--full-width .video-with-text__text-container { padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } @media (max-width: 959px) { .video-with-text .section--full-width .video-with-text__text-container { width: 100% } } @media (max-width: 959px) { .video-with-text .section--full-width .video-with-text__media-container { width: 100% } } .video-with-text .section--full-width .video-with-text__text-container-inner { max-width: inherit; padding: 0; } @media (max-width: 959px) { .video-with-text.video-with-text--video-mobile-position-below-content .section--full-width .video-with-text__media-container { order: 1; margin-top: 0 } } @media (max-width: 959px) { .video-with-text.video-with-text--video-mobile-position-above-content .section--full-width .video-with-text__media-container { order: 0 } } @media (max-width: 959px) { .video-with-text.video-with-text--video-mobile-position-above-content .section--full-width .video-with-text__text-container { margin-top: 0 } } .testimonials { --mobile-paddle-size: 34px; background-color: var(--section-background-color, var(--color-background)); color: var(--color-text-section); } @media (max-width: 719px) { .testimonials[data-block-count="1"] .testimonials__item, .testimonials[data-block-count="1"] .testimonials__items-wrapper { margin: 0 } } .testimonials[data-block-count="1"] .testimonails__carousel.swiper { padding-right: 0; padding-left: 0; } @media (max-width: 719px) { .testimonials[data-block-count="1"] .testimonails__carousel.swiper { overflow: hidden; width: 100%; margin: 0 } } @media (max-width: 719px) { .testimonials.testimonials--has-background .testimonials__navigation-button-wrapper--prev { left: calc(var(--mobile-paddle-size) / 3) } } @media (max-width: 719px) { .testimonials.testimonials--has-background .testimonials__navigation-button-wrapper--next { right: calc((var(--mobile-paddle-size) / 3)) } } .testimonials__inner { position: relative; } .testimonials__navigation-button-wrapper { display: flex; align-items: center; z-index: 3; position: absolute; top: 50%; top: var(--mobile-button-offset, 50%); } @media (min-width: 720px) { .testimonials__navigation-button-wrapper { top: 50%; transform: translatey(-50%) } } .testimonials__navigation-button-wrapper--prev { left: calc((var(--mobile-paddle-size) / 3) * -1); } @media (min-width: 720px) { .testimonials__navigation-button-wrapper--prev { left: 1px } } .testimonials__navigation-button-wrapper--next { right: calc((var(--mobile-paddle-size) / 3) * -1); } @media (min-width: 720px) { .testimonials__navigation-button-wrapper--next { right: 1px } } .testimonials__navigation-button { flex-shrink: 0; display: flex; transition: transform 0.2s ease; } @media (max-width: 719px) { .testimonials__navigation-button { background-color: var(--color-background); color: var(--color-text); width: var(--mobile-paddle-size); height: var(--mobile-paddle-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0px 0px 2px var(--nav-box-shadow-1), 0px 2px 6px var(--nav-box-shadow-2) } } .testimonials__navigation-button:hover { transform: scale(1.1); } .testimonials__navigation-button .icon { height: 16px; } @media (min-width: 720px) { .testimonials__navigation-button .icon { height: 21px } } .testimonials__navigation-button--prev { margin-right: calc(4px * 8); margin-right: var(--spacing-8); margin-left: -6px; } @media (max-width: 719px) { .testimonials__navigation-button--prev { margin: 0 } } .testimonials__navigation-button--prev .icon { transform: rotate(90deg); } .testimonials__navigation-button--next { margin-right: -6px; margin-left: calc(4px * 8); margin-left: var(--spacing-8); } @media (max-width: 719px) { .testimonials__navigation-button--next { margin: 0 } } .testimonials__navigation-button--next .icon { transform: rotate(-90deg); } .testimonails__carousel { position: relative; } .testimonails__carousel.swiper { padding: 0 calc(4px * 10); padding: 0 var(--spacing-10); } @media (max-width: 719px) { .testimonails__carousel.swiper { position: static; overflow: visible; width: 95%; margin: 0 calc(3.3vw / -2); margin: 0 calc(var(--space-outer) / -2); padding: 0 } } .no-js .testimonails__carousel.swiper { overflow: scroll; } .testimonials__item { display: flex; flex-direction: column; width: 100%; margin-right: calc(3.3vw / 2); margin-right: calc(var(--space-outer) / 2); margin-left: calc(3.3vw / 2); margin-left: calc(var(--space-outer) / 2); background-color: var(--section-background-color, var(--color-background)); } @media (min-width: 720px) { .testimonials__item { width: 100%; flex-direction: row; margin: 0 } } @media (min-width: 720px) { .testimonials__item.testimonials__item--image-small .testimonials__item-product { width: 30% } } @media (min-width: 720px) { .testimonials__item.testimonials__item--image-medium .testimonials__item-product { width: 40% } } @media (min-width: 720px) { .testimonials__item.testimonials__item--image-large .testimonials__item-product { width: 50% } } @media (min-width: 720px) { .testimonials__item.testimonials__item--image-placement-left .testimonials__item-product { margin-right: 7% } } @media (min-width: 720px) { .testimonials__item.testimonials__item--image-placement-right .testimonials__item-product { margin-left: 7% } } .testimonials__item-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 719px) { .testimonials__item-content { margin-top: calc(4px * 10); margin-top: var(--spacing-10) } } .testimonials__item-product { width: 100%; display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; margin: 0; } @media (max-width: 719px) { .testimonials__item-product { order: -1 } } .testimonials__item-product-title { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .testimonials__item-stars .icon { width: 16px; height: 16px; } .testimonials__item-stars .icon+.icon { margin-left: -2px; } .testimonials__item-quote { margin: 0; } .testimonials__item-stars+.testimonials__item-quote { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .testimonials__item-quote+.testimonials__item-author { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quotes { position: relative; display: flex; flex-direction: column; text-align: center; transition: opacity 1.3s ease-in-out; max-width: 1150px; margin: 0 auto; } .quotes .slider-inner { align-items: center; } .quotes .slider-nav-button { z-index: 3; position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; transition: opacity 300ms ease-out; } .quotes .slider-nav-button .icon { height: 21px; } .quotes .slider-nav-button:hover { opacity: 0.5; } .quotes .slider-nav-button.slider-nav-button-prev { left: 0; margin-left: calc((4px * 4) * -1); margin-left: calc(calc(4px * 4) * -1); margin-left: calc(var(--spacing-4) * -1); } .quotes .slider-nav-button.slider-nav-button-prev .icon { transform: rotate(90deg); } .quotes .slider-nav-button.slider-nav-button-next { right: 0; margin-right: calc((4px * 4) * -1); margin-right: calc(calc(4px * 4) * -1); margin-right: calc(var(--spacing-4) * -1); } .quotes .slider-nav-button.slider-nav-button-next .icon { transform: rotate(-90deg); } .quotes:not(.swiper-initialized) .slider-nav-button { display: none; } .quotes::before, .quotes::after { content: ""; height: 100%; width: 10%; position: absolute; top: 0; pointer-events: none; z-index: 2; } .quotes::before { left: 0; background: linear-gradient(to right, var(--color-background) 0%, var(--color-background-transparent) 100%); } .quotes::after { right: 0; background: linear-gradient(to left, var(--color-background) 0%, var(--color-background-transparent) 100%); } .quote__item .quote__item-inner { width: 900px; max-width: 80%; margin: 0 auto; } .quote__item.is-selected { opacity: 1; pointer-events: all; } .quote__item .quote__item-text { margin-right: auto; margin-left: auto; line-height: 1.33; } .quote__item-logo-wrapper { position: relative; height: 25px; margin: 0 auto; } .quote__item-logo-wrapper .quote__item-logo img { height: 100%; width: auto; margin: 0 auto; } .quote__navigation { margin-top: calc(4px * 10); margin-top: var(--spacing-10); opacity: 0; } .quotes.swiper-initialized+.quote__navigation { opacity: 1; } .quote__navigation .navigation-dots { position: relative; bottom: auto; bottom: initial; } .quote__navigation .logo-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: calc((4px * 2) * -1) calc((4px * 4) * -1); margin: calc(calc(4px * 2) * -1) calc(calc(4px * 4) * -1); margin: calc(var(--spacing-2) * -1) calc(var(--spacing-4) * -1); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); padding-left: 0; } .quote__navigation .logo-navigation, .quote__navigation .logo-navigation li { list-style: none; } .quote__navigation .logo-navigation li { margin: calc(4px * 2) calc(4px * 4); margin: var(--spacing-2) var(--spacing-4); padding: 0; } .quote__navigation .logo-navigation img { height: 25px; width: auto; } .quote__navigation .logo-navigation a { cursor: pointer; opacity: 0.3; display: block; transition: opacity 300ms ease-out; position: relative; } .quote__navigation .logo-navigation a:hover { opacity: 1; } .quote__navigation .logo-navigation a::after { content: ""; position: absolute; width: 32px; height: 2px; background: currentColor; bottom: calc(-1 * (4px * 2)); bottom: calc(-1 * calc(4px * 2)); bottom: calc(-1 * var(--spacing-2)); left: 50%; margin-left: -16px; opacity: 0; transform: scale(0.3); transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } .quote__navigation .logo-navigation a.active { opacity: 1; } .quote__navigation .logo-navigation a.active::after { opacity: 1; transform: scale(1); } .quote__item-author { opacity: 0.6; } .quote__item-logo-wrapper+.quote__item-text { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quote__item-text+.quote__item-author { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .store-availability { position: relative; display: flex; margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .store-availability .icon { width: 14px; height: 14px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); margin-top: 2px; color: var(--color-text-error); } .store-availability .icon-checkmark { color: var(--color-text-success); } .store-availability .icon-close-small { padding: 1px; } .store-availability__information-title, .store-availability__information-stores { margin-top: 0; margin-bottom: 0; } .store-availability__store-list-wrapper { display: none; } .store-availability__store-list-title { margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } @media (min-width: 480px) { .store-availability__store-list-title { margin-top: calc(4px * 10); margin-top: var(--spacing-10); margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7) } } .store-availability-list__item { padding-top: calc(4px * 6); padding-top: var(--spacing-6); padding-bottom: calc(4px * 6); padding-bottom: var(--spacing-6); border-bottom: 1px solid var(--color-border); } .store-availability-list__item .icon { width: 14px; height: 14px; } .store-availability-list__item:last-of-type { padding-bottom: 0; border: 0; } .store-availability-list__item-header { display: flex; } .store-availability-list__item-inner { display: flex; padding-right: 0; padding-left: 0; } .store-availability-list__item-inner .icon { color: var(--color-text-error); margin-top: 7px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .store-availability-list__item-inner .icon-checkmark { color: var(--color-text-success); } .store-availability-list__item-inner .icon-close-small { padding: 1px; } .store-availability-list__address { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .complete-the-look__inner { display: flex; flex-direction: column; } .complete-the-look__inner .complete-the-look__inner-items { display: flex; flex-direction: column; justify-content: space-between; } @media (min-width: 720px) { .complete-the-look__inner .complete-the-look__inner-items { flex-direction: row; align-items: flex-start } .complete-the-look--image-right .complete-the-look__inner .complete-the-look__inner-items { flex-direction: row-reverse; } } .complete-the-look__secondary-content { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; flex-shrink: 1; } @media (min-width: 720px) { .complete-the-look__secondary-content { width: 50%; } } @media (min-width: 960px) { .complete-the-look__secondary-content { width: 48.75%; } } .complete-the-look__secondary-content { text-align: center } .complete-the-look__image-container { position: relative; display: flex; align-items: center; width: 100%; } .complete-the-look__image-container .image .image__img { width: 100%; } @media (min-width: 720px) { .complete-the-look__image-container { width: 50% } } @media (min-width: 720px) { .complete-the-look__image-container { width: 48.75%; margin-right: 2.5%; flex-shrink: 0 } .complete-the-look--image-right .complete-the-look__image-container { margin-right: 0; margin-left: 2.5%; } } .complete-the-look__image-container-inner { width: 100%; } .complete-the-look__image-container-inner img { display: block; } .complete-the-look__heading, .complete-the-look__subheading { max-width: var(--text-max-width); } .complete-the-look__heading+.complete-the-look__subheading { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } @media (min-width: 480px) { .complete-the-look__heading+.complete-the-look__subheading { margin-top: calc(4px * 3); margin-top: var(--spacing-3) } } .complete-the-look__cta-button { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .complete-the-look__products { display: flex; flex-direction: column; width: 100%; } @media (max-width: 959px) { .complete-the-look__products { width: 100% } .complete-the-look__products .complete-the-look__product:not(:first-child) { border-top: 1px solid var(--color-border); } .complete-the-look__products .complete-the-look__product .product-card-mini { padding: calc(4px * 4) 0; padding: var(--spacing-4) 0; } @media (min-width: 720px) { .complete-the-look__products .complete-the-look__product:first-child .product-card-mini { padding-top: 0; } } } @media (min-width: 960px) { .complete-the-look__products { flex-direction: row; flex-wrap: wrap } .complete-the-look__products .complete-the-look__product { padding: calc(4px * 3) calc(4px * 2); padding: var(--spacing-3) var(--spacing-2); position: relative; } .complete-the-look__products .complete-the-look__product[data-index="2"]::before, .complete-the-look__products .complete-the-look__product[data-index="3"]::before, .complete-the-look__products[data-count="3"] .complete-the-look__product[data-index="1"]::before { content: ""; display: block; position: absolute; height: 1px; left: 0px; right: 0px; top: calc(-1 * (4px * 5)); top: calc(-1 * calc(4px * 5)); top: calc(-1 * var(--spacing-5)); background: var(--color-border); } .complete-the-look__products .complete-the-look__product[data-index="2"], .complete-the-look__products .complete-the-look__product[data-index="3"] { margin-top: calc(4px * 10); margin-top: var(--spacing-10); } .complete-the-look__products[data-count="3"] .complete-the-look__product[data-index="1"]::before { top: auto; bottom: calc(-1 * (4px * 5) - 1px); bottom: calc(-1 * calc(4px * 5) - 1px); bottom: calc(-1 * var(--spacing-5) - 1px); } .complete-the-look__products .complete-the-look__product[data-index="1"]::after, .complete-the-look__products .complete-the-look__product[data-index="3"]::after, .complete-the-look__products .complete-the-look__product[data-index="2"]:last-child::after { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; background: var(--color-border); width: 1px; } .complete-the-look__products .complete-the-look__product[data-index="2"]:last-child::after { right: -1px; left: auto; } .complete-the-look__products .complete-the-look__product { width: 50%; } .complete-the-look__products .complete-the-look__product .product-card-mini { padding: 0; } .complete-the-look__products .complete-the-look__product .product-card-mini__image-link { max-width: 50%; display: block; margin: 0 auto; } @media (min-width: 720px) { .complete-the-look__products .complete-the-look__product[data-image-size="small"] .product-card-mini__image-link { max-width: 50%; } .complete-the-look__products .complete-the-look__product[data-image-size="medium"] .product-card-mini__image-link { max-width: 67%; } .complete-the-look__products .complete-the-look__product[data-image-size="large"] .product-card-mini__image-link { max-width: 84%; } } } @media (max-width: 959px) { .grid.section, .grid.section.section--full-width { padding-right: min(calc((4px * 6) / 2), 3.3vw); padding-right: min(calc(calc(4px * 6) / 2), 3.3vw); padding-right: min(calc(var(--grid-spacing, var(--spacing-6)) / 2), var(--space-outer)); padding-left: min(calc((4px * 6) / 2), 3.3vw); padding-left: min(calc(calc(4px * 6) / 2), 3.3vw); padding-left: min(calc(var(--grid-spacing, var(--spacing-6)) / 2), var(--space-outer)) } } @media (min-width: 960px) { .grid.section.section--full-width { padding-right: min(calc(4px * 6), 3.3vw); padding-right: min(var(--grid-spacing, var(--spacing-6)), var(--space-outer)); padding-left: min(calc(4px * 6), 3.3vw); padding-left: min(var(--grid-spacing, var(--spacing-6)), var(--space-outer)) } } .grid__inner { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; } @media (min-width: 960px) { .grid__inner { width: calc(100% + (4px * 6)); width: calc(100% + calc(4px * 6)); width: calc(100% + var(--grid-spacing, var(--spacing-6))); height: calc(100% + (4px * 6)); height: calc(100% + calc(4px * 6)); height: calc(100% + var(--grid-spacing, var(--spacing-6))); margin: calc((calc(4px * 6) / 2) * -1); margin: calc((var(--grid-spacing, var(--spacing-6)) / 2) * -1) } } .grid__header { width: 100%; text-align: var(--text-align); } @media (min-width: 960px) { .grid__header { width: calc(100% + (4px * 6)); width: calc(100% + calc(4px * 6)); width: calc(100% + var(--spacing-6)) } } .collection-banner { color: var(--color-text); } .collection-banner:not(.collection--has-image) { padding-top: calc(4px * 16); padding-top: var(--spacing-16); padding-bottom: calc(4px * 8); padding-bottom: var(--spacing-8); } .collection-banner.collection--has-image.collection-banner--image-aspect-custom .collection-banner__image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: var(--custom-height-mobile); height: 100%; overflow: hidden; } @media (min-width: 720px) { .collection-banner.collection--has-image.collection-banner--image-aspect-custom .collection-banner__image-container { min-height: var(--custom-height) } } .collection-banner.collection--has-image.collection-banner--image-aspect-custom .collection-banner__image-container .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; width: 100%; height: 100%; } .collection-banner.collection--has-image.collection-banner--image-aspect-custom .collection-banner__text-container-wrapper { min-height: var(--custom-height-mobile); height: 100%; position: relative; } @media (min-width: 720px) { .collection-banner.collection--has-image.collection-banner--image-aspect-custom .collection-banner__text-container-wrapper { min-height: var(--custom-height) } } @media (min-width: 720px) { .collection-banner.collection-banner--text-center { text-align: center; } .collection-banner.collection-banner--text-right { text-align: right; } } @media (max-width: 719px) { .collection-banner.collection-banner--text-mobile-center { text-align: center; } .collection-banner.collection-banner--text-mobile-right { text-align: right; } } .collection-banner__breadcrumbs { max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; margin-top: calc((4px * 8) * -1); margin-top: calc(calc(4px * 8) * -1); margin-top: calc(var(--spacing-8) * -1); margin-bottom: calc(4px * 11); margin-bottom: var(--spacing-11); } .collection-banner__inner .collection-banner__breadcrumbs { position: absolute; left: 0; right: 0; top: 0; margin-top: calc(4px * 8); margin-top: var(--spacing-8); margin-bottom: 0; } body.header-transparent #main>.shopify-section:first-child .collection-banner__breadcrumbs { padding-top: var(--height-header); } .collection-banner__inner { position: relative; } .collection-banner__image { position: relative; height: 100%; } .collection-banner__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .collection--has-image .collection-banner__overlay { display: block; } .collection-banner__text-container-wrapper { display: flex; align-items: var(--text-vertical-position); } @media (max-width: 719px) { .collection-banner__text-container-wrapper { align-items: var(--text-vertical-position-mobile) } } .collection--has-image .collection-banner__text-container-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } body.header-transparent #main>.shopify-section:first-child .collection-banner__text-container-wrapper { padding-top: calc(var(--height-header) + (4px * 10)); padding-top: calc(var(--height-header) + calc(4px * 10)); padding-top: calc(var(--height-header) + var(--spacing-10)); } .collection-banner__text-container { display: flex; justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position); width: 100%; max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; } @media (max-width: 719px) { .collection-banner__text-container { justify-content: var(--text-horizontal-position-mobile); align-items: var(--text-vertical-position-mobile) } } .collection--has-image .collection-banner__text-container { padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } .collection--has-image.collection--has-breadcrumbs .collection-banner__text-container { padding-top: calc(4px * 18); padding-top: var(--spacing-18); } .collection-banner__text-container-inner { max-width: 747px; max-width: var(--max-width-narrow); display: flex; flex-direction: column; align-items: var(--text-horizontal-position); } @media (max-width: 719px) { .collection-banner__text-container-inner { align-items: var(--text-horizontal-position-mobile) } } .quick-cart__wrapper { --menu-max-width: var(--flyout-width); z-index: 1300; z-index: var(--z-index-modal); visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; width: 100%; padding-left: calc(4px * 9); padding-left: var(--flyout-mobile-gap); transition: visibility 0s 500ms; transition: visibility 0s var(--duration-normal); } .quick-cart__wrapper.active { visibility: visible; transition: visibility 0s 0s; } .quick-cart__wrapper.active .quick-cart__overlay { opacity: 1; } .quick-cart__wrapper.active .quick-cart__container { transform: none; transform: initial; } .quick-cart__wrapper .free-shipping-bar { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quick-cart__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-overlay); opacity: 0; cursor: pointer; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } .quick-cart__container { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--menu-max-width); height: 100%; overflow: hidden; margin-left: auto; padding: calc(4px * 7); padding: var(--spacing-7); background-color: var(--color-background); color: var(--color-text); transform: translateX(100%); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } @media (max-width: 719px) { .quick-cart__container { padding: calc(4px * 5); padding: var(--spacing-5) } } .quick-cart__header { z-index: 2; display: flex; justify-content: space-between; padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); border-bottom: 2px solid var(--color-text); } .quick-cart__header sup { margin-left: calc(4px * 2); margin-left: var(--spacing-2); font-size: small; } .quick-cart__form { overflow: auto; -ms-overflow-style: none; scrollbar-width: none; } .quick-cart__form::-webkit-scrollbar { display: none; } .quick-cart__items { position: relative; display: flex; flex-direction: column; } .quick-cart__item { display: flex; padding-top: calc(4px * 7); padding-top: var(--spacing-7); padding-bottom: calc(4px * 7); padding-bottom: var(--spacing-7); border-bottom: 1px solid var(--color-border); } .quick-cart__item:last-of-type { border-bottom: 0; } .quick-cart__item.is-removed { opacity: 0.5; cursor: default; pointer-events: none; } .quick-cart__item-link { display: block; } .quick-cart__item-image { width: 120px; flex-shrink: 0; } @media (max-width: 719px) { .quick-cart__item-image { width: 100px } } .quick-cart__item-details { margin-left: calc(4px * 6); margin-left: var(--spacing-6); width: 100%; } .quick-cart__item-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: calc(4px * 6); margin-top: var(--spacing-6); } @media (max-width: 719px) { .quick-cart__item-bottom { display: block } } .btn.btn--text-link.quick-cart__item-remove { color: var(--color-text); } @media (max-width: 719px) { .btn.btn--text-link.quick-cart__item-remove { display: flex; margin-top: calc(4px * 2); margin-top: var(--spacing-2) } } .quick-cart__item-error, .quick-cart__inventory-warning { width: 100%; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .quick-cart__item-error { color: var(--color-text-error); } .quick-cart__item-error.hidden { display: none; } .quick-cart__inventory-warning { color: var(--color-products-stock-medium); } .quick-cart__form-item-properties { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .quick-cart__item-discounts { position: relative; padding: calc(4px * 2) calc(4px * 5) calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-3); margin-bottom: 0; margin-top: 0; list-style: none; color: var(--color-products-sale-price); } .quick-cart__item-discounts:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-products-sale-price); opacity: 0.08; } .quick-cart__item-discount { display: flex; } .quick-cart__item-discount+.quick-cart__item-discount { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .quick-cart__item-discount .icon { width: 0.9em; height: 0.9em; margin-top: 2px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .quick-cart__footer { z-index: 1; position: absolute; bottom: 0; right: 0; left: 0; margin-top: auto; padding-right: calc(4px * 7); padding-right: var(--spacing-7); padding-left: calc(4px * 7); padding-left: var(--spacing-7); background-color: var(--color-background); } @media (max-width: 719px) { .quick-cart__footer { padding-right: calc(4px * 5); padding-right: var(--spacing-5); padding-left: calc(4px * 5); padding-left: var(--spacing-5) } } .quick-cart__footer .quick-cart__item-discounts { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .quick-cart__footer-inner { padding-top: calc(4px * 4); padding-top: var(--spacing-4); padding-bottom: calc(4px * 7); padding-bottom: var(--spacing-7); border-top: 2px solid var(--color-text); } .quick-cart__item-top .quick-cart__item-discounts { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quick-cart__footer-order-note-wrapper+.quick-cart__footer-subtotal { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quick-cart__footer-order-note-wrapper+.quick-cart__item-discounts { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .quick-cart__footer-order-note-trigger-icons .icon { width: 10px; height: 10px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .quick-cart__footer-order-note-trigger-icons .icon.hidden { display: none; } .quick-cart__footer-order-note-input { display: none; } .quick-cart__footer-order-note-input[aria-expanded="true"] { margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-bottom: calc(4px * 9); margin-bottom: var(--spacing-9); } @media (max-width: 719px) { .quick-cart__footer-order-note-input[aria-expanded="true"] { margin-top: calc(4px * 5); margin-top: var(--spacing-5); margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7) } } .quick-cart__footer-subtotal { display: flex; justify-content: space-between; } .quick-cart__submit { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .quick-cart__empty-state { margin: auto; padding-top: calc(4px * 5); padding-top: var(--spacing-5); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); text-align: center; overflow: auto; } .quick-cart__empty-state-heading+.quick-cart__empty-state-promot-text { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .quick-cart__empty-state-heading+.quick-cart__empty-state-promo-button, .quick-cart__empty-state-promot-text+.quick-cart__empty-state-promo-button { margin-top: calc(4px * 8); margin-top: var(--spacing-8); } .quick-cart__empty-state-promo-button { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .quick-cart__empty-state-promo-button .btn { width: 100%; max-width: 280px; } .quick-cart__item-title+.quick-cart__item-variant, .quick-cart__item-title+.quick-cart__item-subscriptions, .quick-cart__item-title+.quick-cart__form-item-properties { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .quick-cart__item-title+.quick-cart__item-price-wrapper { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .quick-cart__item-variant+.quick-cart__item-subscriptions { margin-top: 2px; margin-top: var(--spacing-unit-half); } .quick-cart__item-variant+.quick-cart__item-price-wrapper { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quick-cart__form-item-properties+.quick-cart__item-price-wrapper { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .quick-cart__item-price-wrapper .unit-price__price { margin-left: 0; font-size: var(--font-size-body-60); } .quick-cart__item-price { margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .quick-cart__item-price.sale-price { color: var(--color-products-sale-price); margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .quick-cart__item-price:not(.sale-price)+.unit-price { margin-left: calc(4px * 1); margin-left: var(--spacing-1); } .purchase-confirmation-popup { --popup-width: 400px; max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; position: relative; } @media (max-width: 1500px) { .purchase-confirmation-popup { max-width: calc(100vw - 3.3vw - 3.3vw); max-width: calc(100vw - var(--space-outer) - var(--space-outer)) } } .purchase-confirmation-popup.active .purchase-confirmation-popup__inner { visibility: visible; opacity: 1; transition: visibility 0s 0s ease, opacity 500ms 0s cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s 0s ease, opacity var(--duration-normal) 0s var(--easing); } .purchase-confirmation-popup .free-shipping-bar { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .purchase-confirmation-popup .purchase-confirmation-popup__close { position: absolute; top: calc(4px * 2); top: var(--spacing-2); right: calc(4px * 2); right: var(--spacing-2); padding: calc(4px * 2); padding: var(--spacing-2); } .purchase-confirmation-popup__inner { visibility: hidden; position: absolute; height: auto; width: var(--popup-width); right: 0; padding: calc(4px * 6) calc(4px * 4) calc(4px * 4); padding: var(--spacing-6) var(--spacing-4) var(--spacing-4); margin-top: -1px; border: 1px solid var(--color-text); background-color: var(--color-background); opacity: 0; transition: visibility 0s 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } @media (max-width: 479px) { .purchase-confirmation-popup__inner { width: calc(100vw - (3.3vw * 2)); width: calc(100vw - (var(--space-outer) * 2)) } } .purchase-confirmation-popup__item { display: flex; flex-direction: column; } .purchase-confirmation-popup__item.hidden { display: none; } .purchase-confirmation-popup__product-title-price.sale-price { margin-left: calc(4px * 2); margin-left: var(--spacing-2); color: var(--color-products-sale-price); } .purchase-confirmation-popup__product-price-wrapper .unit-price__price { margin-left: calc(4px * 3); margin-left: var(--spacing-3); font-size: var(--font-size-body-60); } .purchase-confirmation-popup__product { display: flex; margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .purchase-confirmation-popup__product-image { width: 120px; flex-shrink: 0; } .purchase-confirmation-popup__product-details { margin-left: calc(4px * 4); margin-left: var(--spacing-4); width: 100%; } .purchase-confirmation-popup__item-properties { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .purchase-confirmation-popup__view-cart { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .purchase-confirmation-popup__submit { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .sales-banner, .promo-banner { --min-height: 0px; --min-height-mobile: 0px; color: var(--color-text); } .sales-banner__inner, .promo-banner__inner { position: relative; background-color: var(--color-background); } .sales-banner__image, .sales-banner__image.image .image__img, .promo-banner__image, .promo-banner__image.image .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; left: 0; width: 100%; height: 100%; } .sales-banner__image.sales-banner__image--mobile, .sales-banner__image.promo-banner__image--mobile, .sales-banner__image.image .image__img.sales-banner__image--mobile, .sales-banner__image.image .image__img.promo-banner__image--mobile, .promo-banner__image.sales-banner__image--mobile, .promo-banner__image.promo-banner__image--mobile, .promo-banner__image.image .image__img.sales-banner__image--mobile, .promo-banner__image.image .image__img.promo-banner__image--mobile { display: none; } @media (max-width: 719px) { .sales-banner__image.sales-banner__image--mobile, .sales-banner__image.promo-banner__image--mobile, .sales-banner__image.image .image__img.sales-banner__image--mobile, .sales-banner__image.image .image__img.promo-banner__image--mobile, .promo-banner__image.sales-banner__image--mobile, .promo-banner__image.promo-banner__image--mobile, .promo-banner__image.image .image__img.sales-banner__image--mobile, .promo-banner__image.image .image__img.promo-banner__image--mobile { display: block } } @media (max-width: 719px) { .sales-banner__image.sales-banner__image--mobile+.sales-banner__image, .promo-banner__image.promo-banner__image--mobile+.promo-banner__image { display: none } } .sales-banner__overlay, .promo-banner__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .sales-banner__content, .promo-banner__content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--min-height-mobile); padding: calc(4px * 4); padding: var(--spacing-4); overflow: hidden; } .sales-banner--bar .sales-banner__content, .promo-banner--bar .sales-banner__content, .sales-banner--bar .promo-banner__content, .promo-banner--bar .promo-banner__content { padding-right: 3.3vw; padding-right: var(--space-outer); padding-left: 3.3vw; padding-left: var(--space-outer); } .sales-banner--frame .sales-banner__content::before, .promo-banner--frame .sales-banner__content::before, .sales-banner--frame .promo-banner__content::before, .promo-banner--frame .promo-banner__content::before { content: ""; position: absolute; top: calc(4px * 4); top: var(--spacing-4); left: calc(4px * 4); left: var(--spacing-4); right: calc(4px * 4); right: var(--spacing-4); bottom: calc(4px * 4); bottom: var(--spacing-4); border: solid 1px var(--color-text); } @media (min-width: 720px) { .sales-banner__content, .promo-banner__content { min-height: var(--min-height); padding: calc(4px * 5); padding: var(--spacing-5) } .sales-banner--frame .sales-banner__content::before, .promo-banner--frame .sales-banner__content::before, .sales-banner--frame .promo-banner__content::before, .promo-banner--frame .promo-banner__content::before { top: calc(4px * 5); top: var(--spacing-5); left: calc(4px * 5); left: var(--spacing-5); right: calc(4px * 5); right: var(--spacing-5); bottom: calc(4px * 5); bottom: var(--spacing-5); } } .sales-banner__columns, .promo-banner__columns { position: relative; width: 100%; padding: calc(4px * 4); padding: var(--spacing-4); } @media (max-width: 719px) { .sales-banner--frame .sales-banner__columns, .promo-banner--frame .sales-banner__columns, .sales-banner--frame .promo-banner__columns, .promo-banner--frame .promo-banner__columns { padding: calc(4px * 8); padding: var(--spacing-8) } } @media (min-width: 720px) { .sales-banner__columns, .promo-banner__columns { padding: calc(4px * 10) calc(4px * 5); padding: var(--spacing-10) var(--spacing-5) } } @media (min-width: 720px) { .promo-banner__columns { padding: calc(4px * 10) calc(4px * 12); padding: var(--spacing-10) var(--spacing-12) } } @media (min-width: 1200px) { .promo-banner__columns { padding: calc(4px * 10) calc(4px * 15); padding: var(--spacing-10) var(--spacing-15) } } .sales-banner__columns-inner { max-width: 1400px; max-width: var(--max-width); margin: 0 auto; } @media (min-width: 720px) { .sales-banner__columns-inner { display: flex; justify-content: center } .sales-banner--layout-one-column .sales-banner__columns-inner { flex-direction: column; align-items: center; } } .promo-banner__columns-inner { max-width: 1400px; max-width: var(--max-width); margin: 0 auto; } @media (min-width: 960px) { .promo-banner__columns-inner { display: flex; justify-content: center } .sales-banner--layout-one-column .promo-banner__columns-inner { flex-direction: column; align-items: center; } } .sales-banner__column { padding-bottom: calc(4px * 12); padding-bottom: var(--spacing-12); } .sales-banner--layout-one-column .sales-banner__column { display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0; } .sales-banner--layout-one-column .sales-banner__column+.sales-banner__column::before { content: none; } .sales-banner__column+.sales-banner__column { position: relative; } .sales-banner__column+.sales-banner__column::before { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 1px; background-color: var(--color-text); } @media (max-width: 719px) { .sales-banner__column+.sales-banner__column { padding-top: calc(4px * 12); padding-top: var(--spacing-12); padding-bottom: 0; } } @media (min-width: 720px) { .sales-banner__column { flex-basis: 50%; flex-shrink: 0; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding: 0 5% } .sales-banner__column+.sales-banner__column { align-items: flex-start; } .sales-banner__column+.sales-banner__column::before { top: 0; bottom: 0; width: 1px; height: auto; } .sales-banner--layout-one-column .sales-banner__column { flex-basis: 50%; flex-shrink: 0; width: 50%; align-items: center; padding: 0; } .sales-banner--layout-one-column .sales-banner__column+.sales-banner__column { align-items: center; margin-top: calc(4px * 9); margin-top: var(--spacing-9); } } @media (min-width: 1200px) { .sales-banner__column { padding: 0 6.5% } } .promo-banner__column.promo-banner__column--alignment-center { text-align: center; } .promo-banner__column.promo-banner__column--alignment-right { text-align: right; } @media (max-width: 959px) { .promo-banner__column.promo-banner__column--alignment-mobile-center { text-align: center } } @media (max-width: 959px) { .promo-banner__column.promo-banner__column--alignment-mobile-right { text-align: right } } .promo-banner__column+.promo-banner__column { padding-top: calc(4px * 12); padding-top: var(--spacing-12); } @media (min-width: 960px) { .promo-banner__column { flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 5% } .promo-banner__column:first-of-type { flex-basis: 50%; flex-basis: var(--left-column-width, 50%); max-width: 50%; max-width: var(--left-column-width, 50%); } .promo-banner__column:last-of-type { flex-basis: 50%; flex-basis: var(--right-column-width, 50%); width: 50%; width: var(--right-column-width, 50%); } .promo-banner__column+.promo-banner__column { padding-top: 0; padding-right: 0; padding-left: 5%; } } @media (min-width: 1200px) { .promo-banner__column { padding-right: 6.5% } .promo-banner__column+.promo-banner__column { padding-right: 0; padding-left: 6.5%; } } .sales-banner__column-inner, .promo-banner__column-inner { display: inline-block; } .sales-banner--layout-one-column .sales-banner__column-inner, .sales-banner--layout-one-column .promo-banner__column-inner { text-align: center; } .sales-banner__button-group, .promo-banner__button-group { display: flex; flex-wrap: wrap; align-items: center; margin: calc((4px * 2) * -1); margin: calc(calc(4px * 2) * -1); margin: calc(var(--spacing-2) * -1); } .sales-banner--layout-one-column .sales-banner__button-group, .sales-banner--layout-one-column .promo-banner__button-group { justify-content: center; } .promo-banner__column--alignment-center .sales-banner__button-group, .promo-banner__column--alignment-center .promo-banner__button-group { justify-content: center; } .promo-banner__column--alignment-right .sales-banner__button-group, .promo-banner__column--alignment-right .promo-banner__button-group { justify-content: flex-end; } @media (max-width: 959px) { .promo-banner__column--alignment-mobile-center .sales-banner__button-group, .promo-banner__column--alignment-mobile-center .promo-banner__button-group { justify-content: center } } @media (max-width: 959px) { .promo-banner__column--alignment-mobile-right .sales-banner__button-group, .promo-banner__column--alignment-mobile-right .promo-banner__button-group { justify-content: flex-end } } .sales-banner__button, .promo-banner__button { margin: calc(4px * 2); margin: var(--spacing-2); } .promo-banner__giant-heading { font-size: var(--giant-heading-font-size-mobile); line-height: var(--line-height-heading); } @media (min-width: 960px) { .promo-banner__giant-heading { font-size: var(--giant-heading-font-size) } } .sales-banner__bar { width: 100%; } @media (min-width: 720px) { .sales-banner__bar { display: flex; align-items: center; justify-content: center; max-width: 1400px; max-width: var(--max-width); margin: 0 auto } } .sales-banner__bar-item { padding-top: calc(4px * 4); padding-top: var(--spacing-4); padding-bottom: calc(4px * 6); padding-bottom: var(--spacing-6); } @media (max-width: 719px) { .sales-banner__bar-item+.sales-banner__bar-item { padding-top: calc(4px * 6); padding-top: var(--spacing-6); padding-bottom: calc(4px * 4); padding-bottom: var(--spacing-4) } } .sales-banner__bar-item.sales-banner__bar-item--text { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 720px) { .sales-banner__bar-item { display: flex; align-items: center; padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); padding-right: 3.3vw; text-align: center } .sales-banner__bar-item+.sales-banner__bar-item { padding-right: 0; padding-left: 3.3vw; } } @media (min-width: 1200px) { .sales-banner__bar-item { padding-right: 3.3vw } .sales-banner__bar-item+.sales-banner__bar-item { padding-right: 0; padding-left: 3.3vw; } } .sales-banner__bar-item+.sales-banner__bar-item { position: relative; } .sales-banner__bar-item+.sales-banner__bar-item::before { content: ""; position: absolute; top: 0; left: 0; width: 15%; height: 1px; background-color: var(--color-text); } @media (min-width: 720px) { .sales-banner__bar-item+.sales-banner__bar-item::before { top: 0; bottom: 0; width: 1px; height: auto } } .sales-banner__bar-text+.sales-banner__button { margin-left: calc(4px * 3); margin-left: var(--spacing-3); white-space: nowrap; } @media (min-width: 720px) { .sales-banner__bar-text+.sales-banner__button { margin-left: 3.3vw; } } @media (min-width: 1200px) { .sales-banner__bar-text+.sales-banner__button { margin-left: 5vw; } } .countdown-banner { color: var(--color-text); } .countdown-banner__inner { position: relative; background-color: var(--color-background); } .countdown-banner__image, .countdown-banner__image.image .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; left: 0; width: 100%; height: 100%; } .countdown-banner__image.countdown-banner__image--mobile, .countdown-banner__image.image .image__img.countdown-banner__image--mobile { display: none; } @media (max-width: 719px) { .countdown-banner__image.countdown-banner__image--mobile, .countdown-banner__image.image .image__img.countdown-banner__image--mobile { display: block } } @media (max-width: 719px) { .countdown-banner__image.countdown-banner__image--mobile+.countdown-banner__image { display: none } } .countdown-banner__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .countdown-banner__content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: var(--min-height-mobile); padding: calc(4px * 4); padding: var(--spacing-4); overflow: hidden; } .countdown-banner--bar .countdown-banner__content { padding-right: 3.3vw; padding-right: var(--space-outer); padding-left: 3.3vw; padding-left: var(--space-outer); } .countdown-banner--frame .countdown-banner__content::before { content: ""; position: absolute; top: calc(4px * 4); top: var(--spacing-4); left: calc(4px * 4); left: var(--spacing-4); right: calc(4px * 4); right: var(--spacing-4); bottom: calc(4px * 4); bottom: var(--spacing-4); border: solid 1px var(--color-text); pointer-events: none; } @media (min-width: 720px) { .countdown-banner__content { min-height: var(--min-height); padding: calc(4px * 5); padding: var(--spacing-5) } .countdown-banner--frame .countdown-banner__content::before { top: calc(4px * 5); top: var(--spacing-5); left: calc(4px * 5); left: var(--spacing-5); right: calc(4px * 5); right: var(--spacing-5); bottom: calc(4px * 5); bottom: var(--spacing-5); } } .countdown-banner__single-column { padding: calc(4px * 6) calc(4px * 5); padding: var(--spacing-6) var(--spacing-5); text-align: center; } @media (min-width: 720px) { .countdown-banner__single-column { padding: calc(4px * 9) calc(4px * 5); padding: var(--spacing-9) var(--spacing-5) } } .countdown-banner__button-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: calc((4px * 2) * -1); margin: calc(calc(4px * 2) * -1); margin: calc(var(--spacing-2) * -1); } .countdown-banner__button { margin: calc(4px * 2); margin: var(--spacing-2); } .countdown-banner__bar { width: 100%; text-align: center; } @media (min-width: 960px) { .countdown-banner__bar { display: flex; align-items: center; justify-content: center; max-width: 1400px; max-width: var(--max-width) } } .countdown-banner__bar-item { padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); } .countdown-banner__bar-item.countdown-banner__bar-item--timer { padding-top: calc(4px * 3); padding-top: var(--spacing-3); padding-bottom: calc(4px * 3); padding-bottom: var(--spacing-3); } .countdown-banner__bar-item.countdown-banner__bar-item--text { display: flex; align-items: center; justify-content: center; } @media (min-width: 960px) { .countdown-banner__bar-item { display: flex; align-items: center; margin-top: 0; margin-bottom: 0; padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); text-align: center } .countdown-banner__bar-item.countdown-banner__bar-item--timer { margin-right: 3vw; margin-left: 3vw; padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); } .countdown-banner__bar-item.countdown-banner__bar-item--text { justify-content: space-between; } } .countdown-banner__bar-text+.countdown-banner__button { margin-left: calc(4px * 3); margin-left: var(--spacing-3); white-space: nowrap; } @media (min-width: 720px) { .countdown-banner__bar-text+.countdown-banner__button { margin-left: 3.3vw; } } .multi-column:not(.multi-column--background-behind-column) { background-color: var(--color-section-background); color: var(--color-text); } .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-small .multi-column__grid-item { padding: calc(4px * 4); padding: var(--spacing-4); } @media (min-width: 720px) { .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-small .multi-column__grid-item { padding: calc(4px * 5); padding: var(--spacing-5) } } .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-medium .multi-column__grid-item { padding: calc(4px * 5); padding: var(--spacing-5); } @media (min-width: 720px) { .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-medium .multi-column__grid-item { padding: calc(4px * 7); padding: var(--spacing-7) } } .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-large .multi-column__grid-item { padding: calc(4px * 7); padding: var(--spacing-7); } @media (min-width: 720px) { .multi-column.multi-column--background-behind-column.multi-column--column-content-padding-large .multi-column__grid-item { padding: calc(4px * 9); padding: var(--spacing-9) } } .multi-column.multi-column--background-behind-column .multi-column__grid-item { background-color: var(--color-section-background); color: var(--color-text); } .multi-column.multi-column--intro-alignment-center .multi-column__introduction { text-align: center; } .multi-column.multi-column--intro-alignment-right .multi-column__introduction { text-align: right; } .multi-column.multi-column--column-content-vertical-alignment-center .multi-column__grid-item { align-items: center; } .multi-column.multi-column--column-content-vertical-alignment-bottom .multi-column__grid-item { align-items: flex-end; } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-center .multi-column__grid-item-inner { text-align: center } } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-center .multi-column__grid-item-text, .multi-column.multi-column--column-content-alignment-mobile-center .multi-column__grid-item-image-figure, .multi-column.multi-column--column-content-alignment-mobile-center .multi-column__grid-item-icon { margin-left: auto; margin-right: auto } } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-center .multi-column__grid-item-button { justify-content: center } } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-right .multi-column__grid-item-inner { text-align: right } } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-right .multi-column__grid-item-text, .multi-column.multi-column--column-content-alignment-mobile-right .multi-column__grid-item-image-figure, .multi-column.multi-column--column-content-alignment-mobile-right .multi-column__grid-item-icon { margin-left: auto } } @media (max-width: 719px) { .multi-column.multi-column--column-content-alignment-mobile-right .multi-column__grid-item-button { justify-content: flex-end } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-center .multi-column__grid-item-inner { text-align: center } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-center .multi-column__grid-item-text, .multi-column.multi-column--column-content-alignment-desktop-center .multi-column__grid-item-image-figure, .multi-column.multi-column--column-content-alignment-desktop-center .multi-column__grid-item-icon { margin-left: auto; margin-right: auto } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-center .multi-column__grid-item-button { justify-content: center } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-right .multi-column__grid-item-inner { text-align: right } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-right .multi-column__grid-item-text, .multi-column.multi-column--column-content-alignment-desktop-right .multi-column__grid-item-image-figure, .multi-column.multi-column--column-content-alignment-desktop-right .multi-column__grid-item-icon { margin-left: auto } } @media (min-width: 720px) { .multi-column.multi-column--column-content-alignment-desktop-right .multi-column__grid-item-button { justify-content: flex-end } } .multi-column__grid { display: grid; grid-template-columns: repeat(var(--grid-columns-mobile), 1fr); grid-gap: var(--grid-gap-row-mobile) var(--grid-gap-column-mobile); gap: var(--grid-gap-row-mobile) var(--grid-gap-column-mobile); } @media (min-width: 720px) { .multi-column__grid { grid-template-columns: repeat(var(--grid-columns-desktop), 1fr); gap: var(--grid-gap-row-desktop) var(--grid-gap-column-desktop) } } @media (max-width: 719px) { [data-slider-on-mobile="true"] .multi-column__grid { display: flex; gap: 0px } } .multi-column__grid-item { display: flex; } .multi-column__grid-item-inner { width: 100%; } .multi-column__grid-item-text-container> :first-child { margin-top: 0; } .multi-column__grid-item-icon-wrapper .multi-column__grid-item-icon { max-width: var(--icon-max-width-mobile); width: 100%; height: auto; height: initial; } @media (min-width: 720px) { .multi-column__grid-item-icon-wrapper .multi-column__grid-item-icon { max-width: var(--icon-max-width) } } .multi-column__grid-item-image-figure { max-width: var(--image-max-width); margin: 0; } .multi-column__grid-item-image-figure[data-image-crop-circle="true"] .multi-column__grid-item-image-wrapper { border-radius: 100%; overflow: hidden; } .multi-column__grid-item-small-caption { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .multi-column__grid-item-text-container+.multi-column__grid-item-image-figure, .multi-column__grid-item-image-figure+.multi-column__grid-item-text-container { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .multi-column__grid-item-icon-wrapper+.multi-column__grid-item-text-container { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 720px) { .multi-column__grid-item-text { max-width: var(--text-max-width) } } .multi-column__grid-item-accent, .multi-column__grid-item-heading, .multi-column__grid-item-text { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .multi-column__grid-item-button { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } .popups { z-index: 1300; z-index: var(--z-index-modal); position: fixed; top: 0; } .newsletter { --max-newsletter-width: 500px; position: relative; background-color: var(--color-background); color: var(--color-text); } .newsletter.newsletter--content-alignment-center .newsletter__block-content, .newsletter.newsletter--content-alignment-center .newsletter__signup { margin-right: auto; margin-left: auto; } .newsletter.newsletter--content-alignment-right .newsletter__block-content, .newsletter.newsletter--content-alignment-right .newsletter__signup { margin-left: auto; } .newsletter__inner { text-align: var(--content-alignment); } .newsletter__inner.section { position: static; } .newsletter__inner.section.section--divider-solid:before { max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; } .newsletter__background-image-wrapper, .newsletter__background-image, .newsletter__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .newsletter__background-image img.image__img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); } @media (min-width: 720px) { .newsletter__background-image--mobile { display: none } } @media (max-width: 719px) { .newsletter__background-image--mobile+.newsletter__background-image { display: none } } .newsletter__block-content { z-index: 2; position: relative; max-width: var(--content-width); } @media (min-width: 720px) { .newsletter__signup { max-width: var(--max-newsletter-width) } } @media (min-width: 480px) { .newsletter__signup .newsletter__signup-inner { display: flex } } .newsletter__signup .newsletter__signup-input { margin-top: 0; color: var(--color-text-input); background-color: var(--color-background-input); } .newsletter__signup .newsletter__signup-button { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 480px) { .newsletter__signup .newsletter__signup-button { margin-top: 0; margin-left: calc(4px * 2); margin-left: var(--spacing-2); flex-shrink: 0 } } .newsletter__overlay { background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .newsletter-compact { --max-newsletter-width: 450px; position: relative; background-color: var(--color-background); color: var(--color-text); overflow: hidden; text-align: var(--text-alignment); } @media (min-width: 960px) { .newsletter-compact .newsletter-compact__block-text-contentm { margin-top: 0; margin-bottom: 0 } } @media (min-width: 720px) { .newsletter-compact.newsletter-compact--spacing-mode-compact .newsletter-compact__block-content { justify-content: center } } @media (min-width: 720px) { .newsletter-compact.newsletter-compact--spacing-mode-between .newsletter-compact__block-content { justify-content: space-between } } @media (min-width: 720px) { .newsletter-compact.newsletter-compact--spacing-mode-evenly .newsletter-compact__block-content { justify-content: space-evenly } } .newsletter-compact__inner.section { position: static; } .newsletter-compact__inner.section--divider-solid:before { max-width: 1400px; max-width: var(--max-width); margin-right: auto; margin-left: auto; } .newsletter-compact__background-image-wrapper, .newsletter-compact__overlay, .newsletter-compact__background-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .newsletter-compact__background-image img.image__img { height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); } @media (min-width: 720px) { .newsletter-compact__background-image--mobile { display: none } } @media (max-width: 719px) { .newsletter-compact__background-image--mobile+.newsletter-compact__background-image { display: none } } .newsletter-compact__block-content { z-index: 2; position: relative; } @media (min-width: 720px) { .newsletter-compact__block-content { display: flex; align-items: center; gap: calc(4px * 15); gap: var(--spacing-15) } } @media (min-width: 720px) { .newsletter-compact__signup.newsletter-compact__block-item { max-width: var(--max-newsletter-width); width: 100%; margin-top: 0; margin-bottom: 0 } } @media (min-width: 480px) { .newsletter-compact__signup.newsletter-compact__block-item .newsletter-compact__signup-inner { display: flex } } .newsletter-compact__signup.newsletter-compact__block-item .newsletter-compact__signup-input { margin-top: 0; color: var(--color-text-input); background-color: var(--color-background-input); } .newsletter-compact__signup.newsletter-compact__block-item .newsletter-compact__signup-button { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 480px) { .newsletter-compact__signup.newsletter-compact__block-item .newsletter-compact__signup-button { margin-top: 0; margin-left: calc(4px * 2); margin-left: var(--spacing-2); flex-shrink: 0 } } .newsletter-compact__signup.newsletter-compact__block-item .newsletter-compact__signup-footer { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 720px) { .newsletter-compact__block-text-content { max-width: 1400px; max-width: var(--max-width) } } @media (min-width: 720px) { .newsletter-compact__block-content-social-icons { flex-shrink: 0 } } @media (min-width: 720px) { .newsletter-compact__block-content-image.newsletter-compact__block-item { margin-top: 0; margin-bottom: 0 } } @media (min-width: 720px) { .newsletter-compact__block-content-image.newsletter-compact__block-item .placeholder-image { width: var(--image-block-max-width) } } .newsletter-compact__overlay { background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .events { --date-badge-min-width: 50px; --date-badge-min-width-large: 65px; background-color: var(--section-background-color); color: var(--color-text); } .events__header { width: 100%; text-align: var(--text-align); } .events__list { display: grid; grid-template-columns: repeat(var(--columns-mobile), 1fr); grid-column-gap: calc(4px * 6); grid-column-gap: var(--spacing-6); -moz-column-gap: calc(4px * 6); column-gap: calc(4px * 6); -moz-column-gap: var(--spacing-6); column-gap: var(--spacing-6); grid-row-gap: calc(4px * 12); grid-row-gap: var(--spacing-12); row-gap: calc(4px * 12); row-gap: var(--spacing-12); width: 100%; margin: 0; padding: 0; list-style: none; } @media (min-width: 960px) { .events__list { grid-template-columns: repeat(var(--columns), 1fr); -moz-column-gap: calc(4px * 9); column-gap: calc(4px * 9); -moz-column-gap: var(--spacing-9); column-gap: var(--spacing-9) } } .events__list.events__list--skeleton.hide { opacity: 0; transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing); } .event-item__link { display: block; } .event-item__image-wrapper { position: relative; margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } @media (min-width: 960px) { .event-item__image-wrapper { margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7) } } .event-item__name { margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); } .event-item__date { color: var(--color-text-alpha-60); } .event-item__date.skeleton { margin-bottom: calc(4px * 1); margin-bottom: var(--spacing-1); } .event-item__venue { color: var(--color-text-alpha-60); } .event-item__summary { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 960px) { .event-item__summary { margin-top: calc(4px * 4); margin-top: var(--spacing-4) } } .event-item__callout { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } @media (min-width: 960px) { .event-item__callout { margin-top: calc(4px * 7); margin-top: var(--spacing-7) } } .event-item__date-badge { display: inline-block; min-width: var(--date-badge-min-width); padding: calc(4px * 1) calc(4px * 2); padding: var(--spacing-1) var(--spacing-2); border: solid 1px var(--color-badge-text); background-color: var(--color-badge-background); color: var(--color-badge-text); text-align: center; } @media (min-width: 960px) { .event-item__date-badge { min-width: var(--date-badge-min-width-large); padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4) } .events--columns-4 .event-item__date-badge { min-width: var(--date-badge-min-width); padding: calc(4px * 1) calc(4px * 2); padding: var(--spacing-1) var(--spacing-2); } } .event-item__image+.event-item__date-badge { position: absolute; top: calc(4px * 2); top: var(--spacing-2); left: calc(4px * 2); left: var(--spacing-2); border: 0; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.09), 0px 2px 6px rgba(0, 0, 0, 0.14); } .event-item__date-badge-day { display: block; } .event-item__date-badge-month { display: block; } .event-item__date-badge-day+.event-item__date-badge-month { margin-top: calc(4px * 1); margin-top: var(--spacing-1); padding-top: calc(4px * 1); padding-top: var(--spacing-1); border-top: solid 1px var(--color-badge-text-alpha-30); } .product-tabs { background-color: var(--section-background-color); color: var(--color-text); } .product-tabs .accordion { margin-top: 0; } .product-tabs .accordion:last-of-type { margin-bottom: 0; } .product-tabs .accordion+.accordion>.accordion__inner { border-top: 0; } .product-tabs .accordion__label { text-align: left; } .product-tabs .accordion__content { padding-top: calc(4px * 5); padding-top: var(--spacing-5); } .product-tabs .accordion__label-icons .icon { position: static; } .product-tabs__tab-buttons { display: flex; align-items: flex-end; padding: 0; margin: 0; margin-bottom: calc(4px * 11); margin-bottom: var(--spacing-11); border-bottom: solid 1px var(--color-border); list-style: none; } .product-tabs__tab-buttons li { margin-right: --spacing-6; margin-right: var(--tab-spacing, --spacing-6); } .product-tabs--center .product-tabs__tab-buttons { justify-content: center; } .product-tabs--center .product-tabs__tab-buttons li { margin-right: calc(--spacing-6 / 2); margin-right: calc(var(--tab-spacing, --spacing-6) / 2); margin-left: calc(--spacing-6 / 2); margin-left: calc(var(--tab-spacing, --spacing-6) / 2); } .no-js .product-tabs__tab-buttons { display: none; } @media (max-width: 959px) { .product-tabs__tab-buttons { display: none } } .product-tabs__tab-button { display: flex; flex-direction: column; margin-bottom: -1px; opacity: 0.7; } .product-tabs__tab-button[aria-expanded="true"] { opacity: 1; } .product-tabs__tab-button[aria-expanded="true"] .indicator { width: 100%; } .product-tabs__tab-button .indicator { margin: calc(4px * 2) auto 0; margin: var(--spacing-2) auto 0; width: 0%; height: 2px; background-color: var(--color-text); transition: width 500ms cubic-bezier(0.33, 0, 0, 1); transition: width var(--duration-normal) var(--easing); } .product-tabs__tab-list { position: relative; display: block; margin: 0; padding: 0; list-style: none; z-index: 1; overflow: hidden; transition: height 500ms cubic-bezier(0.33, 0, 0, 1); transition: height var(--duration-normal) var(--easing); } @media (max-width: 959px) { .product-tabs__tab-list { display: none } } .product-tabs__tab-item { position: absolute; top: 0; left: 0; width: 100%; z-index: 1; visibility: hidden; opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1), visibility 0s 0s; transition: opacity var(--duration-normal) var(--easing), visibility 0s 0s; } html.no-js .product-tabs__tab-item { position: static; opacity: 1; visibility: visible; } .product-tabs__tab-item[aria-hidden="false"] { z-index: 2; opacity: 1; visibility: visible; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } @media (min-width: 960px) { .product-tabs__mobile-accordions { display: none } } .product-tabs__tab-item-content { display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: calc(4px * 5); grid-gap: var(--spacing-5); gap: calc(4px * 5); gap: var(--spacing-5); } @media (min-width: 720px) { .product-tabs__tab-item-content { max-width: var(--text-max-width) } } @media (min-width: 960px) { .product-tabs--center .product-tabs__tab-item-content { margin-right: auto; margin-left: auto } } @media (min-width: 960px) { .product-tabs__tab-item-content { grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(var(--grid-columns-desktop, 1), 1fr); gap: calc(4px * 5); gap: var(--grid-gap-column-desktop, var(--spacing-5)) } } .product-tabs__tab-item-content.product-tabs__tab-item-content--vertical-alignment-center { align-items: center; } .product-tabs__tab-item-content.product-tabs__tab-item-content--vertical-alignment-bottom { align-items: flex-end; } .product-tabs__tab-image-figure { max-width: var(--image-max-width); margin: 0; } .product-tabs__tab-text-container> :first-child { margin-top: 0; } .product-tabs__tab-text-container+.product-tabs__tab-image-figure, .product-tabs__tab-image-figure+.product-tabs__tab-text-container { margin-top: calc(4px * 7); margin-top: var(--spacing-7); } .product-tabs__tab-heading, .product-tabs__tab-text { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .apps__heading { margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8); } .scrolling-content { overflow-x: hidden; width: 100%; } .scrolling-content__inner { padding-top: var(--padding-top); padding-bottom: var(--padding-bottom); color: var(--color-text); background-color: var(--color-background); --border: 1px solid var(--color-border); } .scrolling-content__inner[data-borders="top-bottom"] { border-top: var(--border); border-bottom: var(--border); } .scrolling-content__inner[data-borders="top"] { border-top: var(--border); } .scrolling-content__inner[data-borders="bottom"] { border-bottom: var(--border); } .scrolling-content__marquee { display: flex; position: relative; flex-wrap: nowrap; white-space: nowrap; width: -moz-max-content; width: max-content; } .scrolling-content__marquee:hover .scrolling-content__content { animation-play-state: paused; } .user-is-tabbing .scrolling-content__marquee .scrolling-content__content { flex-wrap: wrap; max-width: 100vw; animation: none; padding-right: var(--gap); } .scrolling-content__content { display: flex; align-items: center; width: -moz-max-content; width: max-content; } [data-play-scroll-animation="true"] .scrolling-content__content { animation: marquee var(--scroll-duration) linear infinite var(--scroll-direction); } .scrolling-content__item { margin-left: var(--gap); flex-shrink: 0; } .scrolling-content__item .image-block__inner { width: var(--image-block-max-width); max-width: none; max-width: initial; } @media (max-width: 719px) { .scrolling-content__item .image-block__inner { width: var(--image-block-max-width-mobile) } } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } .breadcrumbs { display: flex; } .breadcrumbs__list, .navigation-buttons__list { list-style-type: none; margin: 0; padding: 0; } .breadcrumbs__item, .navigation-buttons__item { display: inline-block; position: relative; } .breadcrumbs__item .icon, .navigation-buttons__item .icon { transform: rotate(-90deg); width: 8px; height: 8px; opacity: 0.6; } .breadcrumbs__icon { display: block; position: absolute; right: calc((4px * 1) * -1); right: calc(calc(4px * 1) * -1); right: calc(var(--spacing-1) * -1); bottom: 0.025em; } .breadcrumbs__link { color: var(--color-text-link); transition: opacity 0.25s; } .breadcrumbs__link:hover { opacity: 0.6; } .breadcrumbs__item { margin-right: calc(4px * 3); margin-right: var(--spacing-3); padding-right: calc(4px * 3); padding-right: var(--spacing-3); } .breadcrumbs__current { opacity: 0.7; } .navigation-buttons__list { margin-left: auto; white-space: nowrap; } .navigation-buttons__item a { color: var(--color-text-link); transition: opacity 0.25s; } .navigation-buttons__item a:hover { opacity: 0.6; } .breadcrumbs__list+.navigation-buttons__list { padding-left: calc(4px * 6); padding-left: var(--spacing-6); } .navigation-buttons__item+.navigation-buttons__item { margin-left: calc(4px * 3); margin-left: var(--spacing-3); padding-left: calc(4px * 3); padding-left: var(--spacing-3); } .navigation-buttons__item+.navigation-buttons__item::before { content: ""; width: 1px; position: absolute; left: 0; opacity: 0.5; background: currentColor; height: 100%; } .collapsible-row-list-item { position: relative; margin: 0; border-bottom: 1px solid var(--color-border); } .collapsible-row-list-item:first-of-type { border-top: 1px solid var(--color-border); } .collapsible-row-list-item__trigger { position: relative; display: flex; width: 100%; padding: calc(4px * 6) 0; padding: var(--spacing-6) 0; margin: 0; text-align: left; } .collapsible-row-list-item__trigger[aria-expanded="true"] .icon.icon-plus, .collapsible-row-list-item__trigger[aria-expanded="false"] .icon.icon-minus { opacity: 0; } .accordion__label-icons { position: relative; flex-basis: 16px; width: 16px; min-width: 14px; min-height: 14px; margin-left: auto; margin-top: 0.22em; } @media (min-width: 720px) { .accordion__label-icons { min-width: 16px; min-height: 16px } } .accordion__label-icons .icon { position: absolute; top: 0; left: 0; } .accordion__label-icons .icon, .accordion__label-icons .icon svg { width: 14px; height: 14px; } @media (min-width: 720px) { .accordion__label-icons .icon, .accordion__label-icons .icon svg { width: 16px; height: 16px } } .collapsible-row-list-item__icon { margin-right: calc(4px * 2); margin-right: var(--spacing-2); margin-top: 1px; width: 25px; height: 25px; display: flex; flex-shrink: 0; } .collapsible-row-list-item__heading { position: relative; padding-right: calc(4px * 15); padding-right: var(--spacing-15); } .collapsible-row-list-item__text-container { will-change: contents; display: none; margin-bottom: 0; transition: margin 0.3s ease; transform: translateY(calc(4px * -1)); transform: translateY(calc(var(--spacing-unit) * -1)); } .collapsible-row-list-item__text-container[aria-hidden="false"] { display: block; margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10); } .collapsible-row-list-item__text { padding-right: calc(4px * 5); padding-right: var(--spacing-5); } @media (min-width: 480px) { .collapsible-row-list-item__text { padding-right: calc(4px * 16); padding-right: var(--spacing-16) } } .collection-item {} .collection-item__image-wrapper { position: relative; display: block; overflow: hidden; } .collection-item__image-wrapper .collection-item__label { position: absolute; bottom: 0; width: 100%; padding: calc(4px * 3) calc(4px * 4); padding: var(--spacing-3) var(--spacing-4); color: var(--overlay-text-color, var(--color-background)); } .collection-item--label-background-solid .collection-item__image-wrapper .collection-item__label { background-color: var(--label-background); } .collection-item--label-background-gradient .collection-item__image-wrapper .collection-item__label { background: linear-gradient(to top, var(--label-gradient-start) 0%, var(--label-gradient-mid) 30%, var(--label-gradient-end) 100%); padding-top: 100px; } .collection-item__image-wrapper .collection-item__label .collection-item__title { display: flex; justify-content: space-between; align-items: flex-end; word-break: break-word; } .collection-item__image-wrapper .collection-item__label .collection-item__icon { margin-bottom: 6px; margin-left: calc(4px * 3); margin-left: var(--spacing-3); flex-shrink: 0; overflow: hidden; } .collection-item__image-wrapper .collection-item__label .collection-item__icon .icon { display: flex; width: 16px; height: 16px; } .collection-item__image-wrapper:hover .collection-item__icon .icon { animation-name: arrow-slide; animation-duration: 500ms; animation-duration: var(--duration-normal); animation-timing-function: cubic-bezier(0.33, 0, 0, 1); animation-timing-function: var(--easing); } .collection-item__image-wrapper+.collection-item__label { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } @keyframes arrow-slide { 0% { transform: translateX(0%); } 49.9999% { transform: translateX(100%); } 50% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } .gallery-item__image-wrapper { position: relative; display: block; overflow: hidden; } .gallery-item__image-wrapper .gallery-item__label { position: absolute; bottom: 0; width: 100%; padding: calc(4px * 3) calc(4px * 4); padding: var(--spacing-3) var(--spacing-4); color: var(--overlay-text-color, var(--color-background)); } .gallery-item--label-background-solid .gallery-item__image-wrapper .gallery-item__label { background-color: var(--label-background); } .gallery-item--label-background-gradient .gallery-item__image-wrapper .gallery-item__label { background: linear-gradient(to top, var(--label-gradient-start) 0%, var(--label-gradient-mid) 30%, var(--label-gradient-end) 100%); padding-top: 100px; } .gallery-item__image-wrapper .gallery-item__label .gallery-item__title { display: flex; justify-content: space-between; align-items: flex-end; word-break: break-word; } .gallery-item__image-wrapper+.gallery-item__label { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } @media (max-width: 719px) { .gallery-item--label-overlay .gallery-item__image-wrapper .gallery-item__label { display: none } } @media (min-width: 720px) { .gallery-item--label-overlay .gallery-item__image-wrapper+.gallery-item__label { display: none } } .gallery-item__label a { -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.25s; } .gallery-item__label a:hover { opacity: 0.6; } .gallery-item__label .gallery-item__title+p { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .disclosure-form { position: relative; align-self: center; } .header__row .disclosure-form { margin-top: calc(-1 * (4px * 3)); margin-top: calc(-1 * calc(4px * 3)); margin-top: calc(-1 * var(--spacing-3)); } .disclosure-form__inner { display: flex; align-items: center; } .disclosure-form__item+.disclosure-form__item { margin-left: calc(4px * 4); margin-left: var(--spacing-4); } @media (min-width: 720px) { .disclosure { position: relative } } .disclosure__toggle { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; } .header__row .disclosure__toggle { min-height: 44px; } .disclosure__toggle .flag-icon { margin-right: calc(4px * 1); margin-right: var(--spacing-1); } .disclosure__toggle .icon { width: 8px; height: 8px; display: flex; align-items: center; margin-top: 1px; margin-left: calc((4px * 2) - 2px); margin-left: calc(calc(4px * 2) - 2px); margin-left: calc(var(--spacing-2) - 2px); } .disclosure__toggle .icon svg { width: 100%; } .disclosure-list { display: none; position: absolute; top: calc(100% + (4px * 2)); top: calc(100% + calc(4px * 2)); top: calc(100% + var(--spacing-2)); left: 0; max-height: 380px; margin: 0; border: solid 1px var(--color-text); background-color: var(--color-background); padding: calc(4px * 3); padding: var(--spacing-3); overflow-x: hidden; overflow-y: auto; z-index: 1300; z-index: var(--z-index-modal); list-style: none; } .disclosure--locale .disclosure-list { min-width: 150px; } .disclosure--currency .disclosure-list { min-width: 200px; } .disclosure-list[aria-hidden="false"] { display: block; } .disclosure-list.disclosure-list--top { top: auto; bottom: calc(100% + (4px * 2)); bottom: calc(100% + calc(4px * 2)); bottom: calc(100% + var(--spacing-2)); } @media (min-width: 720px) { .disclosure-list { left: 0 } .disclosure-list.disclosure-list--right { left: auto; right: 0; } } .disclosure-list__item { padding: 0; text-align: left; } .disclosure-list__item+.disclosure-list__item { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .disclosure-list__option { display: flex; align-items: center; } .disclosure-list__option:hover { -webkit-text-decoration: underline; text-decoration: underline; } .disclosure-list__option>.flag-icon { flex: 1 0 18px; max-width: 18px; width: 18px; height: 18px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .disclosure-list__option>.icon { display: flex; width: 14px; height: 14px; margin-left: auto; color: var(--color-text); } .disclosure-list__option-label { color: var(--color-text); } @media (min-width: 720px) { .disclosure-list__option-label { white-space: nowrap } } .icon { width: 24px; height: 24px; display: inline-block; flex-shrink: 0; } .icon svg { width: 100%; height: 100%; display: block; } .icon-block { display: flex; } .icon-block__icon { width: var(--icon-width-mobile); height: auto; } @media (min-width: 720px) { .icon-block__icon { width: var(--icon-width) } } .image>*, .video-wrapper>* { display: block; max-width: 100%; width: 100%; height: auto; -o-object-position: center center; object-position: center center; -o-object-position: var(--focal-alignment, center center); object-position: var(--focal-alignment, center center); } .image.aspect-ratio--landscape>*, .image.aspect-ratio--portrait>*, .image.aspect-ratio--square>*, .image.aspect-ratio--landscape_alt>*, .image.aspect-ratio--portrait_alt>*, .image.aspect-ratio--landscape_wide_alt>*, .image.aspect-ratio--landscape_ultrawide_alt>*, .image.aspect-ratio--externally_set>*, .video-wrapper.aspect-ratio--landscape>*, .video-wrapper.aspect-ratio--portrait>*, .video-wrapper.aspect-ratio--square>*, .video-wrapper.aspect-ratio--landscape_alt>*, .video-wrapper.aspect-ratio--portrait_alt>*, .video-wrapper.aspect-ratio--landscape_wide_alt>*, .video-wrapper.aspect-ratio--landscape_ultrawide_alt>*, .video-wrapper.aspect-ratio--externally_set>* { -o-object-fit: cover; object-fit: cover; -o-object-fit: var(--object-fit, cover); object-fit: var(--object-fit, cover); } .image.aspect-ratio--landscape>*, .video-wrapper.aspect-ratio--landscape>* { aspect-ratio: 3 / 2; aspect-ratio: var(--aspect-ratio-landscape); } .image.aspect-ratio--portrait>*, .video-wrapper.aspect-ratio--portrait>* { aspect-ratio: 2 / 3; aspect-ratio: var(--aspect-ratio-portrait); } .image.aspect-ratio--landscape_alt>*, .video-wrapper.aspect-ratio--landscape_alt>* { aspect-ratio: 5 / 4; aspect-ratio: var(--aspect-ratio-landscape-alt); } .image.aspect-ratio--portrait_alt>*, .video-wrapper.aspect-ratio--portrait_alt>* { aspect-ratio: 4 / 5; aspect-ratio: var(--aspect-ratio-portrait-alt); } .image.aspect-ratio--landscape_wide_alt>*, .video-wrapper.aspect-ratio--landscape_wide_alt>* { aspect-ratio: 16 / 9; aspect-ratio: var(--aspect-ratio-widescreen); } .image.aspect-ratio--landscape_ultrawide_alt>*, .video-wrapper.aspect-ratio--landscape_ultrawide_alt>* { aspect-ratio: 21 / 9; aspect-ratio: var(--aspect-ratio-ultrawide); } .image.aspect-ratio--square>*, .video-wrapper.aspect-ratio--square>* { aspect-ratio: 1; aspect-ratio: var(--aspect-ratio-square); } .image { background-color: hsla(0, 0%, 96%, 1); } .image.loaded { background-color: transparent; } .image:not(.loaded) { position: relative; } .image-block { display: flex; } @media (min-width: 720px) { .image-block.image-block--justify-center { justify-content: center; } .image-block.image-block--justify-right { justify-content: flex-end; } } @media (max-width: 719px) { .image-block.image-block--justify-mobile-center { justify-content: center; } .image-block.image-block--justify-mobile-right { justify-content: flex-end; } } @media (max-width: 479px) { .image-block.image-block--break-to-mobile-at-480:not(.image-block--full-width) .image-block__inner { max-width: var(--image-block-max-width-mobile) } } @media (max-width: 719px) { .image-block.image-block--break-to-mobile-at-720:not(.image-block--full-width) .image-block__inner { max-width: var(--image-block-max-width-mobile) } } .image-block.image-block--full-width .image-block__inner { max-width: 100%; } .image-block__inner { width: 100%; max-width: var(--image-block-max-width); } .media { position: relative; } .media img { max-width: 100%; } .media[data-media-type="external_video"][data-has-mobile-video-modal="false"] { width: 100%; padding-top: 57.5%; position: relative; } .media[data-media-type="external_video"][data-has-mobile-video-modal="false"] iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] { display: flex; flex-direction: column; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__external-video-modal { display: none; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__poster { background-size: cover; background-position: center center; width: 100%; padding-bottom: 56.25%; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 60px; height: 60px; padding: 4px; border: 1px solid rgba(0, 0, 0, 0.05); background-color: var(--color-background); color: #3a3a3a; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__play-icon .icon { height: 35px; width: 35px; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__play-icon .badge-background { fill: transparent; } .media[data-media-type="external_video"][data-has-mobile-video-modal="true"] .mobile-media-carousel__play-icon .icon-color { fill-opacity: 1; } .media[data-media-type="model"].model-active { height: 80%; } .media video { width: 100%; } .media.media--has-lightbox a { cursor: zoom-in; } .user-is-tabbing .media.media--has-lightbox a:focus { opacity: 0.6; } .media .plyr__poster-enabled:focus { position: relative; } .media .plyr__poster-enabled:focus:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid var(--color-text-body); } .price { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0; margin-bottom: 0; } .price dl { margin-top: 0; } .price dd { margin: 0 0.5em 0 0; } .price--unavailable { visibility: hidden; } .price--compare-price-hidden .price__compare { display: none; } .price__pricing-group { display: flex; flex-direction: row; align-items: center; } .price__regular { display: block; } .price__regular, .price__sale { margin-right: 0.625rem; } .price--on-sale .price__regular, .price--on-sale .price__availability { display: none; } .price__availability { display: none; } .price--sold-out .price__availability { display: block; } .price__sale { display: none; } .price--on-sale .price__sale { display: flex; flex-direction: row; flex-wrap: wrap; } .price__unit { display: none; } .price--unit-available .price__unit { display: block; } .product-form .product-form__quantity { display: none; margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); } .no-js .product-form .product-form__quantity { display: block; } .product-form__custom-option { display: none; } .no-js .product-form__custom-option { display: block; } .product-form__variants select#variant-selector { display: none; } .no-js .product-form__variants select#variant-selector { display: block; } .product-form__controls-group--submit { margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); } .product-form__cart-submit { position: relative; } .product-form__cart-submit[disabled] { color: var(--color-text-meta); background: var(--color-background-meta); } .product-form__cart-submit .icon { width: 16px; height: 16px; visibility: hidden; opacity: 0; display: none; } .product-form__cart-submit.item-added span { display: none; } .product-form__cart-submit.item-added .icon { visibility: visible; opacity: 1; display: block; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded { position: relative; font-size: var(--font-size-button); text-transform: var(--font-button-text-transform); line-height: var(--line-height-button); letter-spacing: var(--button-letter-spacing); display: flex; justify-content: center; align-items: center; padding: 0.777em 1.777em; border-width: 0; border-radius: 0; margin-top: calc(4px * 3); margin-top: var(--spacing-3); background: transparent; color: var(--color-text-button); font-weight: normal; height: 48px; z-index: 1; overflow: hidden; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded::before, .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded::before { width: 120%; left: -10%; background: var(--color-background-button); z-index: -1; transform: skew(30deg); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded::after { background-color: var(--color-background-button-hover); z-index: -2; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:not([disabled]):focus { background: transparent; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:not([disabled]):hover::before, .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded:not([disabled]):focus::before { transform: translate3d(100%, 0, 0); } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded[disabled] { color: var(--color-text-meta); background: transparent; display: none; } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded[disabled]::before, .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded[disabled]::after { background: var(--color-background-meta); } .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--branded { height: 49px; margin-top: calc(4px * 3); margin-top: var(--spacing-3); overflow: hidden; } @media (min-width: 480px) { .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--branded { height: 59px } } .shopify-payment-button__more-options { margin-top: calc(4px * 7) !important; margin-top: var(--spacing-7) !important; } .shopify-payment-button__more-options { margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); -webkit-text-decoration: underline; text-decoration: underline; color: var(--color-text-link); } .shopify-payment-button__more-options:hover { opacity: 0.6; } .shopify-payment-button__more-options.shopify-payment-button__button--hidden { display: none; } .product-form__shop-pay { padding: calc(4px * 4) calc(4px * 5); padding: calc(var(--spacing-unit) * 4) var(--spacing-5); margin-top: calc(4px * 3); margin-top: var(--spacing-3); background-color: var(--color-background-meta); } .product-form__shop-pay:empty { padding: 0; margin-top: 0; } .product-form__shop-pay:not(:empty)+.store-availability-container__wrapper .store-availability.store-availability { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .product-item { position: relative; z-index: var(--z-index-item); } .product-item .unit-price__price { margin-left: 0; font-size: var(--font-size-body-75); } .product-item__inner { position: relative; --spacing-calc: calc((var(--spacing-3) / 2 + 1px)); } @media (min-width: 720px) { .product-item__inner { --spacing-calc: calc((var(--spacing-4) / 2 + 1px)) } } @media (min-width: 1200px) { .product-item__inner { --spacing-calc: calc((var(--spacing-6) / 2 + 1px)) } } .product-item__inner .product-item__hover-container { z-index: -1; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: calc(var(--spacing-calc) * -1); height: var(--item-height); transition: height 0.2s ease; background-color: var(--color-background); opacity: 0; pointer-events: none; } .product-item--border-on-hover .product-item__inner .product-item__hover-container { border: 1px solid var(--color-text); } @media (max-width: 479px) { .product-item__inner .product-item__hover-container { display: none } } .product-item__inner .product-item__variant-info { display: flex; flex-direction: column; top: 100%; row-gap: var(--spacing-calc); background-color: var(--color-background); opacity: 0; pointer-events: none; } @media (max-width: 719px) { .product-item__inner .product-item__variant-info { display: none } } .product-item__inner .product-item__variant-info .product-swatches-options, .product-item__inner .product-item__variant-info .product-chips-options { opacity: 0; transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing); } @media (min-width: 720px) { .product-item__inner:hover, .product-item__inner:focus-within { z-index: 1; } .product-item__inner:hover .product-item__hover-container, .product-item__inner:focus-within .product-item__hover-container { pointer-events: all; opacity: 1; } .product-item__inner:hover .product-item__hover-action-wrap, .product-item__inner:focus-within .product-item__hover-action-wrap { opacity: 1; visibility: visible; } .product-item__inner:hover .product-item__variant-info, .product-item__inner:focus-within .product-item__variant-info { pointer-events: all; opacity: 1; } .product-item__inner:hover .product-swatches-options, .product-item__inner:hover .product-chips-options, .product-item__inner:focus-within .product-swatches-options, .product-item__inner:focus-within .product-chips-options { opacity: 1; } } .no-js .product-item__inner [data-quick-shop-trigger] { display: none; } [data-layout-type="grid"] {} [data-layout-type="grid"] .product-item__variant-info { position: absolute; left: calc(var(--spacing-calc) * -1); right: calc(var(--spacing-calc) * -1); padding-bottom: calc(var(--spacing-calc) + (4px * 1)); padding-bottom: calc(var(--spacing-calc) + calc(4px * 1)); padding-bottom: calc(var(--spacing-calc) + var(--spacing-1)); } [data-layout-type="grid"] .product-item--border-on-hover .product-item__variant-info { border: 1px solid var(--color-text); border-top: none; } [data-layout-type="grid"] {} @media (min-width: 720px) { [data-layout-type="grid"][data-products-per-view="2"] .featured-collection-grid__product:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="2"] .featured-collection-grid__product:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="2"] .collection__products .product-item:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="2"] .collection__products .product-item:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="2"] .search__results .product-item:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="2"] .search__results .product-item:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .featured-collection-grid__product:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .featured-collection-grid__product:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .collection__products .product-item:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .collection__products .product-item:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .search__results .product-item:nth-child(2n + 1):nth-last-child(-n + 2) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="2"] .search__results .product-item:nth-child(2n + 1):nth-last-child(-n + 2)~* .product-item__variant-info { position: relative; padding: 0; border: none; left: auto; left: initial; right: auto; right: initial; } } @media (min-width: 720px) { [data-layout-type="grid"][data-products-per-view="3"] .featured-collection-grid__product:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="3"] .featured-collection-grid__product:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="3"] .collection__products .product-item:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="3"] .collection__products .product-item:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="3"] .search__results .product-item:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="3"] .search__results .product-item:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .featured-collection-grid__product:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .featured-collection-grid__product:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .collection__products .product-item:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .collection__products .product-item:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .search__results .product-item:nth-child(3n + 1):nth-last-child(-n + 3) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="3"] .search__results .product-item:nth-child(3n + 1):nth-last-child(-n + 3)~* .product-item__variant-info { position: relative; padding: 0; border: none; left: auto; left: initial; right: auto; right: initial; } } @media (min-width: 720px) { [data-layout-type="grid"][data-products-per-view="4"] .featured-collection-grid__product:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="4"] .featured-collection-grid__product:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="4"] .collection__products .product-item:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="4"] .collection__products .product-item:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="4"] .search__results .product-item:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="4"] .search__results .product-item:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .featured-collection-grid__product:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .featured-collection-grid__product:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .collection__products .product-item:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .collection__products .product-item:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .search__results .product-item:nth-child(4n + 1):nth-last-child(-n + 4) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="4"] .search__results .product-item:nth-child(4n + 1):nth-last-child(-n + 4)~* .product-item__variant-info { position: relative; padding: 0; border: none; left: auto; left: initial; right: auto; right: initial; } } @media (min-width: 720px) { [data-layout-type="grid"][data-products-per-view="5"] .featured-collection-grid__product:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="5"] .featured-collection-grid__product:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="5"] .collection__products .product-item:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="5"] .collection__products .product-item:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="5"] .search__results .product-item:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-products-per-view="5"] .search__results .product-item:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .featured-collection-grid__product:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .featured-collection-grid__product:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .collection__products .product-item:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .collection__products .product-item:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .search__results .product-item:nth-child(5n + 1):nth-last-child(-n + 5) .product-item__variant-info, [data-layout-type="grid"][data-collection-columns-desktop="5"] .search__results .product-item:nth-child(5n + 1):nth-last-child(-n + 5)~* .product-item__variant-info { position: relative; padding: 0; border: none; left: auto; left: initial; right: auto; right: initial; } } @media (min-width: 720px) and (max-width: 959px) { [data-layout-type="grid"] .featured-collection-grid__product .product-item__variant-info { position: relative; padding: 0; border: none; left: auto; left: initial; right: auto; right: initial; } } .product-item__hoverless-quick-view-button.btn { position: absolute; bottom: 0; right: 0; padding: calc(4px * 2); padding: var(--spacing-2); min-width: 0; min-height: 0; z-index: 2; } .product-item__hoverless-quick-view-button.btn.loading { position: absolute; } .product-item__hoverless-quick-view-button.btn.loading .icon { opacity: 0.6; } .product-item__hoverless-quick-view-button.btn .icon-quick-add, .product-item__hoverless-quick-view-button.btn .icon-quick-view { width: 32px; height: 32px; } .product-item__hoverless-quick-view-button.btn .icon-quick-add .quick-shop-circle, .product-item__hoverless-quick-view-button.btn .icon-quick-view .quick-shop-circle { fill: var(--color-background); } @media (min-width: 720px) { .product-item__hoverless-quick-view-button.btn { visibility: hidden } } .product-item__media { position: relative; overflow: hidden; } .product-item__image-link { display: block; position: relative; } .product-item__image--one { z-index: 2; } .product-item__image--two.image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 2; opacity: 0; transform: scale(1.2); background-color: var(--color-background); transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1), transform 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing); } .product-item__image--two.image.active { transform: scale(1); opacity: 1; transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1), transform 300ms cubic-bezier(0.33, 0, 0, 1), z-index 0ms 300ms linear; transition: opacity var(--duration-fast) var(--easing), transform var(--duration-fast) var(--easing), z-index 0ms var(--duration-fast) linear; } @media (hover: none) { .product-item__image--two.image { display: none; } } .product-item__meta { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; } @media (min-width: 480px) { .product-item__meta { flex-wrap: nowrap } } @media (max-width: 719px) { .product-item__meta .btn[data-quick-shop-trigger] { display: none } } .product-item__text { width: 100%; margin: calc(4px * 4) auto calc(4px * 2); margin: var(--spacing-4) auto var(--spacing-2); } .product-item__text>*:not(:empty):not(:last-child) { margin-bottom: 2px; margin-bottom: var(--spacing-unit-half); } .product-item__product-vendor, .product-item__swatch-count { opacity: 0.6; } .product-item__hover-action-wrap { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; padding: calc(4px * 2); padding: var(--spacing-2); opacity: 0; visibility: hidden; transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1), visibility 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing), visibility var(--duration-fast) var(--easing); } .product-item__hover-action-wrap button { width: 100%; display: block; } .product-item__hover-action-wrap .btn.btn--tertiary { background: var(--color-background-semi-transparent-90); border-color: var(--color-text); transition: color 300ms cubic-bezier(0.33, 0, 0, 1), border-color 300ms cubic-bezier(0.33, 0, 0, 1), background-color 300ms cubic-bezier(0.33, 0, 0, 1); transition: color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing); } .product-item__hover-action-wrap .btn.btn--tertiary:hover { background: var(--color-background); } .product-item__price .sale, .product-item__price .displayed-discount { color: var(--color-products-sale-price); } button { border: 0; border-radius: 0; display: inline-block; cursor: pointer; -webkit-appearance: none; font-family: inherit; color: inherit; margin: 0; padding: 0; background-color: transparent; font-size: inherit; text-transform: inherit; font-weight: inherit; } .btn, .spr-summary-actions-newreview { --button-height: var(--height-input); --button-height-large: 58px; --button-height-small: 40px; --button-height-x-small: 34px; --button-padding-large: calc(1em * var(--button-padding-multiplier)) calc(2.31em * var(--button-padding-multiplier)); --button-padding-normal: calc(0.777em * var(--button-padding-multiplier)) calc(1.777em * var(--button-padding-multiplier)); --button-padding-small: calc(0.555em * var(--button-padding-multiplier)) calc(1.333em * var(--button-padding-multiplier)); --button-padding-x-small: calc(0.444em * var(--button-padding-multiplier)) calc(1.111em * var(--button-padding-multiplier)); min-height: 48px; min-height: var(--button-height); display: inline-flex; padding: calc(0.777em * var(--button-padding-multiplier)) calc(1.777em * var(--button-padding-multiplier)); padding: var(--button-padding-normal); align-items: center; justify-content: space-around; text-transform: uppercase; cursor: pointer; word-break: break-word; } .btn:disabled, .spr-summary-actions-newreview:disabled { pointer-events: none; } .btn.btn--text-link, .spr-summary-actions-newreview.btn--text-link { padding: 0; color: var(--color-text-link); -webkit-text-decoration: underline; text-decoration: underline; text-transform: none; transition: opacity 0.2s ease-in-out; min-height: 0; min-height: initial; } .btn.btn--text-link:hover, .spr-summary-actions-newreview.btn--text-link:hover { opacity: 0.7; } .btn.btn--full, .spr-summary-actions-newreview.btn--full { width: 100%; } .btn.btn--primary, .btn.btn--secondary, .btn.btn--tertiary, .spr-button-primary, .spr-summary-actions-newreview, .shopify-challenge__button, .social-share__button { display: flex; justify-content: center; align-items: center; padding: var(--button-padding-normal); font-size: var(--font-size-button); text-transform: var(--font-button-text-transform); line-height: var(--line-height-button); letter-spacing: var(--button-letter-spacing); } .btn.btn--small { min-height: var(--button-height-small); padding: var(--button-padding-small); font-size: var(--font-size-button); } .btn.btn--large { min-height: var(--button-height-large); padding: var(--button-padding-large); font-size: var(--font-size-button); } @media (min-width: 720px) { .btn.btn--small-above-960 { min-height: var(--button-height-small); padding: var(--button-padding-small); font-size: var(--font-size-button) } } .btn.btn--x-small { min-height: var(--button-height-x-small); padding: var(--button-padding-x-small); font-size: var(--font-size-button-x-small); } .btn[disabled], .btn.disabled { opacity: 0.4; cursor: not-allowed; } .btn.btn--rounded { border-radius: 100%; } .btn.btn--primary, .shopify-challenge__button { position: relative; overflow: hidden; background: transparent; color: var(--color-text-button); z-index: 1; } input.btn.btn--primary, input.shopify-challenge__button { background: var(--color-background-button); } .btn.btn--primary::before, .btn.btn--primary::after, .shopify-challenge__button::before, .shopify-challenge__button::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .btn.btn--primary::before, .shopify-challenge__button::before { width: 130%; left: -15%; background: var(--color-background-button); z-index: -1; transform: skew(30deg); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } .btn.btn--primary::after, .shopify-challenge__button::after { background-color: var(--color-background-button-hover); z-index: -2; } input.btn.btn--primary:hover:not([disabled]), input.btn.btn--primary:focus:not([disabled]), input.shopify-challenge__button:hover:not([disabled]), input.shopify-challenge__button:focus:not([disabled]) { background: var(--color-background-button-hover); } .btn.btn--primary:hover:not([disabled])::before, .btn.btn--primary:focus:not([disabled])::before, .shopify-challenge__button:hover:not([disabled])::before, .shopify-challenge__button:focus:not([disabled])::before { transform: translate3d(100%, 0, 0); } .btn.btn--primary .btn__loading-bar, .shopify-challenge__button .btn__loading-bar { background-color: var(--color-background); } .btn.btn--primary.btn--overlay, .shopify-challenge__button.btn--overlay { color: var(--color-text-overlay-button, var(--color-background)); } .btn.btn--primary.btn--overlay::before, .shopify-challenge__button.btn--overlay::before { background-color: var(--color-background-overlay-button, var(--color-background-button)); } .btn.btn--primary.btn--overlay::after, .shopify-challenge__button.btn--overlay::after { background-color: var(--color-background-overlay-button-hover, var(--color-background-button-hover)); } .btn.btn--secondary, .spr-button-primary { position: relative; color: var(--color-background-button); border: 1px solid var(--color-background-button); transition: color 0.2s ease, border-color 0.2s ease; overflow: hidden; z-index: 1; } .btn.btn--secondary::before, .spr-button-primary::before { content: ""; position: absolute; top: 0; left: -15%; width: 130%; height: 100%; background: var(--color-background-outline-button-alpha); z-index: -1; transform: translate3d(-100%, 0, 0) skew(30deg); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } .btn.btn--secondary:hover:not([disabled])::before, .btn.btn--secondary:focus:not([disabled])::before, .spr-button-primary:hover:not([disabled])::before, .spr-button-primary:focus:not([disabled])::before { transform: none; transform: initial; } .btn.btn--secondary .btn__loading-bar, .spr-button-primary .btn__loading-bar { background-color: var(--color-background-button); } .btn.btn--secondary.btn--overlay, .spr-button-primary.btn--overlay { color: var(--color-background-overlay-button, var(--color-background-button)); border-color: var(--color-background-overlay-button, var(--color-background-button)); } .btn.btn--secondary.btn--overlay::before, .spr-button-primary.btn--overlay::before { background: var(--color-background-overlay-outline-button-alpha); } .btn.btn--tertiary, .spr-summary-actions-newreview { color: var(--color-text); border: 1px solid var(--color-text-alpha); transition: color 0.2s ease, border-color 0.2s ease; } .btn.btn--tertiary:hover:not([disabled]), .btn.btn--tertiary:focus:not([disabled]), .spr-summary-actions-newreview:hover:not([disabled]), .spr-summary-actions-newreview:focus:not([disabled]) { border-color: var(--color-text); } .btn.btn--tertiary .btn__loading-bar, .spr-summary-actions-newreview .btn__loading-bar { background-color: var(--color-text); } .btn.btn--callout { position: relative; text-transform: none; min-height: 0; min-height: initial; padding: 0 0 0.444em 0; font-size: var(--font-size-body-100); line-height: 1.2; color: var(--color-text); transition: color 0.1s ease; } .btn.btn--callout span { position: relative; } .btn.btn--callout span::before, .btn.btn--callout span::after { content: ""; position: absolute; left: 0; bottom: calc(0.444em * -1); width: 100%; height: 2px; background: currentColor; pointer-events: none; transition: transform 300ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-fast) var(--easing); } .btn.btn--callout span::before { transform-origin: 100% 50%; transform: scale3d(1, 1, 1); transition-delay: 100ms; transition-delay: var(--duration-ultra-fast); } .btn.btn--callout span::after { transform-origin: 0% 50%; transform: scale3d(0, 1, 1); transition-delay: 0s; } .btn.btn--callout:hover, .btn.btn--callout:focus { color: var(--color-text); } .btn.btn--callout:hover span::before, .btn.btn--callout:focus span::before { transform: scale3d(0, 1, 1); transition-delay: 0s; } .btn.btn--callout:hover span::after, .btn.btn--callout:focus span::after { transform: scale3d(1, 1, 1); transition-delay: 100ms; transition-delay: var(--duration-ultra-fast); } .btn.btn--callout.btn--overlay { color: var(--color-background-overlay-button, var(--color-text)); } .btn.btn--callout.btn--overlay:hover:not([disabled]), .btn.btn--callout.btn--overlay:focus:not([disabled]) { color: var(--color-background-overlay-button, var(--color-text)); } .btn.loading { position: relative; } .btn.loading span { opacity: 0; } .btn.loading .btn__loading-bar { margin: 0; } .btn.loading .btn__loading-wrap { margin: 0; display: block; } .btn__loading-wrap { display: none; width: 100%; max-width: 50px; height: 2px; overflow: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn__loading-bar { width: 100%; height: 2px; border-radius: 2px; animation: loaderLine 1.4s ease-in-out infinite; } @keyframes loaderLine { 0% { transform: translateX(-150%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } to { transform: translateX(150%); } } button.btn.video-pause { visibility: hidden; position: absolute; top: calc(4px * 3); top: var(--spacing-3); right: calc(4px * 3); right: var(--spacing-3); z-index: 10; } button.btn.video-pause.video-pause--left { right: auto; right: initial; left: calc(4px * 3); left: var(--spacing-3); } .user-is-tabbing button.btn.video-pause { visibility: visible; } @media (prefers-reduced-motion) { button.btn.video-pause { visibility: visible } } body.header-transparent #main>.shopify-section:first-child .video-hero button.btn.video-pause { top: var(--header-safe-zone); } @media (min-width: 720px) { [data-has-video="false"][data-has-mobile-video="true"] button.btn.video-pause { display: none } } .section-header { position: relative; margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8); z-index: 1; } @media (min-width: 480px) { .section-header { margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10) } } @media (min-width: 480px) { .section-header.section-header--spacing-3 { margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10) } } .section-header.section-header--center { display: flex; flex-direction: column; justify-content: center; } .section-header.section-header--center .section-header__heading, .section-header.section-header--center .section-header__subheading, .section-header.section-header--center .section-header__button { text-align: center; margin-right: auto; margin-left: auto; } .section-header.section-header--extra-space .section-header__heading+.section-header__subheading, .section-header.section-header--extra-space .section-header__subheading+.section-header__button, .section-header.section-header--extra-space .section-header__heading+.section-header__button { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } @media (min-width: 480px) { .section-header.section-header--extra-space .section-header__heading+.section-header__subheading, .section-header.section-header--extra-space .section-header__subheading+.section-header__button, .section-header.section-header--extra-space .section-header__heading+.section-header__button { margin-top: calc(4px * 5); margin-top: var(--spacing-5) } } .section-header__heading, .section-header__subheading { max-width: var(--text-max-width); } .section-header__heading+.section-header__subheading, .section-header__subheading+.section-header__button, .section-header__heading+.section-header__button { margin-top: 4px; margin-top: var(--spacing-unit); } @media (min-width: 480px) { .section-header__heading+.section-header__subheading, .section-header__subheading+.section-header__button, .section-header__heading+.section-header__button { margin-top: calc(4px * 3); margin-top: var(--spacing-3) } } .carousel.swiper { overflow: visible; } .no-js .carousel { display: block; overflow: scroll; } .no-js .carousel__slide.swiper-slide { margin-right: calc(4px * 4); margin-right: var(--spacing-4); width: 75%; } @media (min-width: 720px) { .no-js .carousel__slide.swiper-slide { width: 25% } } .carousel__navigation-wrapper { display: flex; } .carousel__navigation-buttons { display: flex; align-items: flex-end; margin-left: auto; } @media (max-width: 719px) { .carousel__navigation-buttons { display: none } } .no-js .carousel__navigation-buttons { display: none; } .carousel__navigation-button { display: flex; align-items: center; } .carousel__navigation-button.swiper-button-disabled { opacity: 0.2; } .carousel__navigation-button.swiper-button-lock { visibility: hidden; } .carousel__navigation-button .icon { width: 34px; height: 34px; } .carousel__navigation-button--forward { margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8); } .carousel__navigation-button--back { transform: rotate(180deg); margin-right: calc(4px * 3); margin-right: var(--spacing-3); margin-bottom: calc((4px * 8) - 1px); margin-bottom: calc(calc(4px * 8) - 1px); margin-bottom: calc(var(--spacing-8) - 1px); } .form-status { margin: 0 auto; text-align: var(--success-alignment); } .form-status__message { position: relative; display: block; margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); border: solid 1px var(--color-border); } .form-status__message.form-status__message--error::after, .form-status__message.form-status__message--success::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.1; pointer-events: none; } .form-status__message.form-status__message--error { color: var(--color-text-error); border-color: var(--color-text-error); } .form-status__message.form-status__message--error::after { background-color: var(--color-text-error); } .form-status__message.form-status__message--success { display: inline-block; color: var(--color-text-success); border-color: var(--color-text-success); } .form-status__message.form-status__message--success::after { background-color: var(--color-text-success); } .form-status__message ul { margin: 0; padding-left: calc(4px * 5); padding-left: var(--spacing-5); } .form-status__message li { text-align: left; } .form-status__message li+li { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .form-status__message a { -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.25s; } .form-status__message a:hover { opacity: 0.6; } .filter-bar { position: relative; display: none; width: 100%; padding: calc(4px * 3) 0; padding: var(--spacing-3) 0; z-index: 450; z-index: var(--z-index-filter-bar); } .filter-bar.filter-bar--sticky { top: 0; position: sticky; background-color: var(--color-background); } @supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) { .filter-bar.filter-bar--sticky { background-color: var(--color-background-semi-transparent-80); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) } } html.sticky-header-enabled .filter-bar.filter-bar--sticky { top: calc(0px); top: calc(var(--height-header, 0px)); } @media (min-width: 960px) { html.sticky-header-enabled .filter-bar.filter-bar--sticky { top: calc(0px + 0px - 1px); top: calc(var(--height-header, 0px) + var(--header-desktop-sticky-position, 0px) - 1px) } } @media (min-width: 960px) { html.sticky-header-enabled[data-enable-sticky-announcement-bar*="desktop"] .filter-bar.filter-bar--sticky { top: calc(0px + var(--announcement-height)); top: calc(var(--height-header, 0px) + var(--announcement-height)); top: calc(0px + var(--announcement-height) + 0px - 1px); top: calc(var(--height-header, 0px) + var(--announcement-height) + var(--header-desktop-sticky-position, 0px) - 1px) } } @media (min-width: 720px) { .filter-bar { display: block } .filter-bar.filter-bar--disabled { display: none; } } .filter-bar__inner { position: relative; display: flex; align-items: center; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; } .filter-bar__button { display: inline-flex; align-items: center; padding: calc(4px * 1) 0; padding: var(--spacing-1) 0; border: 0; border-radius: 0; background-color: transparent; color: var(--color-text); font-family: var(--font-body); font-style: var(--font-body-style); } .filter-bar__button.filter-bar__button--filters { margin-right: calc(4px * 4); margin-right: var(--spacing-4); } .filter-bar__button.filter-bar__button--filters[data-filter-location="sidebar"] { margin-right: calc(4px * 5); margin-right: var(--spacing-5); } @media (max-width: 959px) { .filter-bar__button.filter-bar__button--filters[data-filter-location="sidebar"] { display: none } } .filter-bar__button.filter-bar__button--filters[data-filter-drawer-target="__tags"] { padding: calc(4px * 2) calc(4px * 6); padding: var(--spacing-2) var(--spacing-6); border: 1px solid; } @media (min-width: 960px) { .filter-bar__button.filter-bar__button--filters[data-filter-drawer-target="__tags"] { display: none } } .filter-bar__button.filter-bar__button--sort { margin-left: auto; } .filter-bar__button .icon { display: flex; transition: color 0.3s; } .filter-bar__button .icon-chevron-small { width: 10px; height: 10px; margin-left: calc(4px * 2); margin-left: var(--spacing-2); margin-top: 3px; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } .filter-bar__button .icon-filter { margin-right: 12px; } .filter-bar__button[aria-expanded="true"] .icon-chevron-small { transform: rotate3d(1, 0, 0, 180deg); } .filter-bar__button-count { margin-left: calc(4px * 2); margin-left: var(--spacing-2); padding: calc(4px * 1); padding: var(--spacing-1); background-color: var(--color-text); color: var(--color-background); font-size: var(--font-size-body-50); } .filter-bar__results-count { color: var(--color-text-meta); } .filter-bar__sort-group { position: relative; margin-left: auto; z-index: 2; } .filter-bar__filters { position: relative; display: none; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); margin-right: auto; margin-left: auto; } .filter-bar__filters-inner { display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; margin: 0 calc((4px * 2) * -1); margin: 0 calc(calc(4px * 2) * -1); margin: 0 calc(var(--spacing-2) * -1); padding: calc(4px * 1) 3.3vw 0; padding: var(--spacing-1) var(--space-outer) 0; } .filter-bar__active-filters { display: none; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); padding: 0 3.3vw; padding: 0 var(--space-outer); margin-right: auto; margin-left: auto; margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .filters-active .filter-bar__active-filters { display: block; } .filter-bar__active-filters .active-filters { flex-wrap: wrap; margin: calc((4px * 1) * -1); margin: calc(calc(4px * 1) * -1); margin: calc(var(--spacing-1) * -1); overflow-x: visible; overflow-x: initial; } .filter-bar__active-filters .active-filters .active-filters__active-filter { margin: calc(4px * 1); margin: var(--spacing-1); } .filter-bar__wash { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; z-index: 400; z-index: var(--z-index-filter-bar-wash); } .filter-bar--wash-active+.filter-bar__wash { display: block; } .filter-drawer { z-index: 1300; z-index: var(--z-index-modal); position: absolute; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; display: none; margin-left: calc(4px * 9); margin-left: var(--flyout-mobile-gap); } .filter-drawer.is-fixed { display: flex; position: fixed; visibility: visible; } .filter-drawer__panel { display: flex; flex-direction: column; height: 100%; background-color: var(--color-background); width: 100%; max-width: calc(375px + (4px * 9)); max-width: calc(375px + calc(4px * 9)); max-width: var(--flyout-width); position: absolute; top: 0; right: 0; bottom: 0; transform: translateX(calc(375px + (4px * 9))); transform: translateX(calc(375px + calc(4px * 9))); transform: translateX(var(--flyout-width)); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); z-index: 1300; z-index: var(--z-index-modal); color: var(--color-text); } .filter-drawer__panel.active { transform: translateX(0px); } .filter-drawer__content { height: 100%; padding: calc(4px * 5); padding: var(--spacing-5); margin: 0; overflow-y: auto; } .filter-drawer__heading { display: flex; margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .filter-drawer__title { display: inline-flex; align-items: center; } .filter-drawer__title .filter-drawer__title-count { margin-left: calc(4px * 2); margin-left: var(--spacing-2); padding: calc(4px * 1); padding: var(--spacing-1); background-color: var(--color-text); color: var(--color-background); line-height: 1; } .filter-drawer__close { margin-left: auto; margin-right: calc((4px * 2) * -1); margin-right: calc(calc(4px * 2) * -1); margin-right: calc(var(--spacing-2) * -1); padding: 0 calc(4px * 2); padding: 0 var(--spacing-2); } .filter-drawer__group+.filter-drawer__group { border-top: 1px solid var(--color-border); } .filter-drawer__heading+.filter-drawer__group { border-top: 2px solid var(--color-text); } .filter-drawer__panel--sort .filter-drawer__group { padding-top: calc(4px * 5); padding-top: var(--spacing-5); } .filter-drawer__group-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: calc(4px * 4) 0; padding: var(--spacing-4) 0; text-align: left; } .filter-drawer__group-toggle .icon { width: 16px; height: 16px; margin-right: 3px; } .filter-sidebar .filter-drawer__group-toggle .icon { width: 12px; height: 12px; } .filter-drawer__group-toggle .icon svg { transition: transform 0.3s; } .filter-drawer__group-toggle[aria-expanded="true"] svg { transform: rotateX(180deg); } .filter-drawer__group-toggle-inner { width: 50%; flex-grow: 1; } .filter-drawer__group-toggle-label { display: flex; align-items: center; } .filter-drawer__group-toggle-label .filter-drawer__group-toggle-count { margin-left: calc(4px * 2); margin-left: var(--spacing-2); padding: calc(4px * 1); padding: var(--spacing-1); background-color: var(--color-text); color: var(--color-background); line-height: 1; } .filter-drawer__group-toggle-active-values { display: block; margin-top: calc(4px * 1); margin-top: var(--spacing-1); color: var(--color-text-meta); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .filter-drawer__group-filter-wrapper { display: none; padding-top: calc(4px * 1); padding-top: var(--spacing-1); padding-bottom: calc(4px * 4); padding-bottom: var(--spacing-4); } .filter-drawer__group-filter-wrapper[aria-hidden="false"] { display: block; will-change: auto; } .filter-drawer__list { margin: 0; padding-left: 0; list-style: none; } .filter-drawer__list.filter-drawer__list--chips { display: flex; flex-wrap: wrap; min-width: 255px; } .filter-drawer__list.filter-drawer__list--chips[data-layout="3col"], .filter-drawer__list.filter-drawer__list--chips[data-layout="2col"] { display: grid; grid-gap: calc(4px * 3); grid-gap: var(--spacing-3); } .filter-drawer__list.filter-drawer__list--chips[data-layout="3col"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 479px) { .filter-drawer__list.filter-drawer__list--chips[data-layout="3col"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } } .filter-drawer__list.filter-drawer__list--chips[data-layout="2col"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-drawer__list.filter-drawer__list--chips[data-layout="natural"] { margin-top: calc((4px * 3) * -1); margin-top: calc(calc(4px * 3) * -1); margin-top: calc(var(--spacing-3) * -1); } .filter-drawer__list.filter-drawer__list--chips[data-layout="natural"] .filter-item { margin-right: calc(4px * 3); margin-right: var(--spacing-3); margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .filter-drawer__footer { flex-shrink: 0; padding: calc(4px * 5) 0; padding: var(--spacing-5) 0; background-color: var(--color-background); box-shadow: 10px -15px 15px var(--color-background); z-index: 1300; z-index: var(--z-index-modal); } .filter-drawer__footer-active-filters { display: none; margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .filters-active .filter-drawer__footer-active-filters { display: block; } .filter-drawer__footer-active-filters .active-filters__active-filter.active-filters__clear { display: none; } .filter-drawer__footer-active-filters .active-filters { padding: 0 calc(4px * 5); padding: 0 var(--spacing-5); } .filter-drawer__footer-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 calc(4px * 5); padding: 0 var(--spacing-5); } .filter-drawer__footer-buttons .filter-drawer__button-apply { flex: 1 0 100%; width: 100%; white-space: nowrap; } .filter-drawer__footer-buttons .filter-drawer__button-clear { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); color: var(--color-text); pointer-events: none; opacity: 0; } .filters-active .filter-drawer__footer-buttons .filter-drawer__button-clear { pointer-events: all; opacity: 1; } .filter-drawer__results-count { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); color: var(--color-text-meta); } .filter-drawer__wash { background-color: var(--color-overlay); opacity: 0; position: fixed; z-index: 1200; z-index: var(--z-index-modal-wash); top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transition: opacity 0.3s ease; cursor: pointer; } .active .filter-drawer__wash { pointer-events: all; opacity: 1; transition: opacity 0.3s ease; } .filter-drawer__price-range-title { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .filter-drawer__price-range-input-wrapper { display: flex; justify-content: space-between; position: relative; margin-bottom: calc(4px * 6); margin-bottom: var(--spacing-6); } [data-filter-sidebar] .filter-drawer__price-range-input-wrapper .filter-drawer__price-range-input { flex: 1 0 90px; } [data-filter-sidebar] .filter-drawer__price-range-input-wrapper .filter-drawer__price-range-input input { min-width: 90px; } .filter-drawer__price-range-input-wrapper .input { text-align: right; min-width: 100px; } .filter-drawer__price-range-input { flex: 1 0 100px; position: relative; } .filter-drawer__price-range-separator { display: flex; align-items: center; margin-right: calc(4px * 4); margin-right: var(--spacing-4); margin-left: calc(4px * 4); margin-left: var(--spacing-4); } .filter-drawer__price-range-currency { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); } .filter-sidebar { --sidebar-width: 280px; display: none; flex-shrink: 0; width: 280px; width: var(--sidebar-width); padding: 0 calc((4px * 6) + 1px) calc(4px * 6) 0; padding: 0 calc(calc(4px * 6) + 1px) calc(4px * 6) 0; padding: 0 calc(var(--spacing-6) + 1px) var(--spacing-6) 0; } .filter-sidebar[aria-expanded="true"] { display: block; } @media (max-width: 959px) { .filter-sidebar { display: none } .filter-sidebar[aria-expanded="true"] { display: none; } } .collection[data-enable-sticky-filter-sidebar="true"] .filter-sidebar [data-sticky-container], .search[data-enable-sticky-filter-sidebar="true"] .filter-sidebar [data-sticky-container] { position: sticky; z-index: 1; top: calc(0 + 0); top: calc(var(--header-desktop-sticky-height, 0) + var(--sticky-filter-bar-height, 0)); } .collection.has-sticky-scroll[data-enable-sticky-filter-sidebar="true"] .filter-sidebar [data-sticky-container], .search.has-sticky-scroll[data-enable-sticky-filter-sidebar="true"] .filter-sidebar [data-sticky-container] { top: 0; top: var(--sticky-container-top, 0); } .filter-item { --swatch-size: 26px; --height-input: 44px; list-style: none; margin: 0; padding: 0; transition: transform 0.2s; } .filter-item+.filter-item:not(.filter-item--chip) { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .filter-sidebar .filter-item+.filter-item:not(.filter-item--chip) { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .filter-group__list--sort .filter-item+.filter-item:not(.filter-item--chip) { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .filter-item.filter-item--chip { display: flex; } .filter-item.filter-item--chip .filter-item__content { padding: 0; } .filter-item__content { transition: background-color 0.3s; } .filter-item--chip .filter-item__content { display: flex; width: 100%; } .filter-item__content-inner { display: flex; align-items: center; cursor: pointer; } .filter-item--chip .filter-item__content-inner { display: flex; align-items: stretch; width: 100%; } .filter-input__input { width: calc(4px * 4); width: var(--spacing-4); height: calc(4px * 4); height: var(--spacing-4); border: 1px solid var(--color-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; } .filter-item__checkbox { color: var(--color-text); } .filter-item__checkbox:checked+.filter-item__content-inner .filter-input__input { border-color: var(--color-text); } .filter-item__checkbox:checked+.filter-item__content-inner .filter-input__input .icon { opacity: 1; } .filter-item__checkbox:checked+.filter-item__content-inner .filter-item__chip { border-color: var(--color-text); box-shadow: 0 0 0 1px var(--color-text); } .filter-item__checkbox:checked+.filter-item__content-inner .filter-item__swatch { box-shadow: 0 0 0 1px inset var(--color-text-8-percent), 0 0 0 2px var(--color-text); } .filter-item__checkbox:checked+.filter-item__content-inner .filter-item__swatch .icon { opacity: 1; } .filter-item__checkbox:disabled+.filter-item__content-inner { color: var(--color-text-meta); cursor: default; } .filter-item__checkbox:disabled+.filter-item__content-inner .filter-input__input { border-color: var(--color-border-input-alpha); background-color: var(--color-text-input-alpha); } .filter-item__checkbox:disabled+.filter-item__content-inner .filter-item__swatch { opacity: 0.6; } .filter-item__checkbox:disabled+.filter-item__content-inner .filter-item__chip { border-color: var(--color-border-input-alpha); background-color: var(--color-text-input-alpha); -webkit-text-decoration: line-through; text-decoration: line-through; } .filter-input__input { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border-input); color: var(--color-text-popover); } .filter-input__input .icon { display: flex; width: 10px; height: 10px; color: var(--color-text-popover); opacity: 0; transition: opacity 0.3s; } .filter-item__radio { border-radius: 100%; margin: 0; width: 24px; height: 24px; border: 1px solid var(--color-border); } .filter-item__radio+.filter-item__content-inner .filter-input__input { border-radius: 100%; margin: 0; border: 1px solid var(--color-border); background-color: var(--color-background); } .filter-item__radio+.filter-item__content-inner .filter-input__input .indicator { border-radius: 100%; width: calc(4px * 2); width: var(--spacing-2); height: calc(4px * 2); height: var(--spacing-2); background-color: var(--color-text); opacity: 0; } .filter-item__radio:checked+.filter-item__content-inner .filter-input__input { border-color: var(--color-text); } .filter-item__radio:checked+.filter-item__content-inner .filter-input__input .indicator { opacity: 1; } .filter-item__count { padding-left: calc(4px * 1); padding-left: var(--spacing-1); color: var(--color-text-meta); } .filter-item__label { align-items: center; padding-left: calc(4px * 3); padding-left: var(--spacing-3); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .filter-item__label span { margin-left: auto; color: var(--color-text); } .filter-item__chip { display: flex; justify-content: center; align-items: center; width: 100%; padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4); background-color: var(--color-background); border: 1px solid var(--color-border); box-shadow: 0 0 0 0 var(--color-border); line-height: 1; text-align: center; word-break: break-all; transition: border-color 0.2s, box-shadow 0.2s; } .filter-item__swatch { display: flex; width: var(--swatch-size); height: var(--swatch-size); border: 2px solid var(--color-background); box-shadow: 0 0 0 1px inset var(--color-text-8-percent), 0 0 0 0 var(--color-border); transition: box-shadow 0.2s; background-size: cover; background-position: center center; } .filter-item__swatch[data-shape="round"] { border-radius: 100%; } .filter-item__swatch[data-shape="rectangle"] { width: 39px; height: 24px; } .filter-item__swatch[data-shape="rectangle"] .icon { width: 15px; height: 15px; } .filter-item__swatch .icon { display: flex; width: 18px; height: 18px; margin: auto; color: var(--color-background); opacity: 0; transition: opacity 0.3s; } .filter-item__swatch .icon path { filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); } .mobile-filters { position: relative; display: none; padding: calc(4px * 2) 3.3vw; padding: var(--spacing-2) var(--space-outer); display: none; z-index: 2; } .mobile-filters.mobile-filters--sticky { position: sticky; top: 0; } html.sticky-header-enabled .mobile-filters.mobile-filters--sticky { top: 0; top: var(--height-header, 0); } html.sticky-header-enabled[data-enable-sticky-announcement-bar*="mobile"] .mobile-filters.mobile-filters--sticky { top: calc(0 + var(--announcement-height)); top: calc(var(--height-header, 0) + var(--announcement-height)); } @media (max-width: 719px) { .mobile-filters.show { display: flex } } @media (max-width: 719px) { .mobile-filters.mobile-filters--has-grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: calc((4px * 3) + 1px); grid-column-gap: calc(calc(4px * 3) + 1px); grid-column-gap: calc(var(--spacing-3) + 1px); -moz-column-gap: calc((4px * 3) + 1px); column-gap: calc((4px * 3) + 1px); -moz-column-gap: calc(calc(4px * 3) + 1px); column-gap: calc(calc(4px * 3) + 1px); -moz-column-gap: calc(var(--spacing-3) + 1px); column-gap: calc(var(--spacing-3) + 1px) } } .mobile-filters__group { flex: 1 0 calc(100% * 1 / 3); } .mobile-filters__group .mobile-filters__button-dropdown { justify-content: flex-start; } .mobile-filters__button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) calc(var(--spacing-unit) * 4); border-radius: 0; border: 1px solid var(--color-text); background-color: var(--color-background); color: var(--color-text); transition: border-color 0.25s ease-in-out; } .mobile-filters__button:hover, .mobile-filters__button:active, .mobile-filters__button.active { border-color: var(--color-text); } .mobile-filters__button .icon { display: flex; margin-right: 6px; color: currentColor; transition: color 0.3s ease-in-out; } .mobile-filters__button:hover .icon { color: var(--color-text); } .mobile-filters__button.active { box-shadow: 0 0 0 1px var(--color-text); } .mobile-filters__button-count { margin-left: calc(4px * 2); margin-left: var(--spacing-2); padding: 1px calc(4px * 1); padding: 1px var(--spacing-1); background-color: var(--color-text); color: var(--color-background); } .loader { width: 100%; height: 200px; display: flex; align-items: center; justify-content: space-around; } @media (min-width: 480px) { .loader { height: 400px } } .loader__wrap { width: 100%; max-width: 100px; height: 2px; overflow: hidden; } .loader__bar { width: 100%; height: 2px; animation: loaderLine 1.4s ease-in-out infinite; background-color: var(--color-text); } @keyframes loaderLine { 0% { transform: translateX(-150%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } to { transform: translateX(150%); } } .pagination { display: flex; flex-direction: column; align-items: center; margin-top: calc(4px * 8); margin-top: var(--spacing-8); } @media (max-width: 479px) { .pagination { font-size: var(--font-size-body-75) } } @media (min-width: 480px) { .pagination { margin-top: calc(4px * 12); margin-top: var(--spacing-12) } } .pagination__list { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: calc((4px * 2) * -1); margin: calc(calc(4px * 2) * -1); margin: calc(var(--spacing-2) * -1); padding: 0; } .pagination__item { display: inline-flex; margin: calc(4px * 1); margin: var(--spacing-1); } .pagination__item.pagination__item--ellip { align-items: center; } @media (max-width: 479px) { .pagination__item { display: none } .pagination__item.pagination__item--arrow, .pagination__item.pagination__item--active, .pagination__item.pagination__item--active+.pagination__item, .pagination__item.pagination__item--previous-page { display: inline-flex; } } .pagination__navigation-button { display: flex; align-items: center; justify-content: center; min-width: calc(4px * 10); min-width: var(--spacing-10); height: calc(4px * 10); height: var(--spacing-10); padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4); border: 1px solid var(--color-border); background-color: var(--color-background); color: var(--color-text); text-align: center; } .pagination__item--active .pagination__navigation-button { border-color: var(--color-text); } .pagination__item--ellip .pagination__navigation-button { width: calc(4px * 7); width: var(--spacing-7); padding: calc(4px * 2); padding: var(--spacing-2); border: 0; } .pagination__item--arrow .pagination__navigation-button { min-width: 0; min-width: initial; padding: calc(4px * 3) calc(4px * 1); padding: var(--spacing-3) var(--spacing-1); border: 0; } .pagination__item--arrow .pagination__navigation-button .icon { width: 16px; height: 16px; } .pagination__navigation-button.pagination__navigation-button--previous .icon { transform: rotate(90deg); } .pagination__navigation-button.pagination__navigation-button--next .icon { transform: rotate(-90deg); } .pagination__navigation-button.pagination__navigation-button--hidden { visibility: hidden; opacity: 0; pointer-events: none; } .pagination__footer { text-align: center; } .pagination__list+.pagination__footer { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .product-thumbnails { padding: 0; position: relative; } .product-thumbnails, .product-thumbnails .product-thumbnails__viewport { max-height: 730px; } .product-thumbnails[data-at-start="true"] .scroll-button[data-position="start"], .product-thumbnails[data-at-end="true"] .scroll-button[data-position="end"] { pointer-events: none; opacity: 0; } .scroll-button {} .product-thumbnails__items { display: flex; flex-direction: column; width: 80px; margin: 0; padding: 0; } .product-thumbnails__item { list-style: none; position: relative; } .product-thumbnails__item:not(:first-child) { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .product-thumbnails__item-link { display: block; width: 100%; position: relative; } .product-thumbnails__item-link.active::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border: 1px solid currentColor; } .product-thumbnails__item-badge { position: absolute; top: 4px; top: var(--spacing-unit); right: 4px; right: var(--spacing-unit); z-index: 1; width: 24px; height: 24px; color: var(--color-text); box-shadow: 0px 0px 1px 0px var(--color-text-meta); } .product-thumbnails__item-badge svg { width: 24px; height: 24px; } .product-thumbnails__item-badge .badge-background { fill: var(--color-background); } .meganav { position: absolute; top: 100%; margin-top: -1px; background: var(--color-background); border: 1px solid var(--color-text); color: var(--color-text); text-transform: none; overflow-y: hidden; overflow-x: auto; max-width: 100%; font-size: var(--font-size-body-100); transition: visibility 0s 0s cubic-bezier(0.33, 0, 0, 1), opacity 500ms 0s cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s 0s var(--easing), opacity var(--duration-normal) 0s var(--easing); } .meganav:not(.active) { opacity: 0; visibility: hidden; transition: none; } .meganav:not(.customAlignment) { left: 50%; transform: translateX(-50%); } .meganav ul, .meganav li { list-style: none; padding: 0; margin: 0; } .meganav a { text-underline-offset: unset; text-underline-position: inherit; } .meganav__nav { height: 100%; -moz-column-count: var(--column-count); column-count: var(--column-count); -moz-column-gap: calc(4px * 12); column-gap: calc(4px * 12); -moz-column-gap: var(--spacing-12); column-gap: var(--spacing-12); position: relative; padding: 0 calc(4px * 6); padding: 0 var(--spacing-6); width: var(--columns-width); } .meganav__nav.with-column-dividers .meganav__column-rule { position: absolute; width: 1px; background: var(--color-border); top: 0; bottom: 0; } .meganav__nav a { -webkit-text-decoration: none; text-decoration: none; } .meganav__nav a:hover { -webkit-text-decoration: underline; text-decoration: underline; } .meganav__nav[data-column-count="2"] .meganav__column-rule[data-index="1"] { left: 50%; } .meganav__nav[data-column-count="3"] .meganav__column-rule[data-index="1"] { left: 33.33%; } .meganav__nav[data-column-count="3"] .meganav__column-rule[data-index="2"] { left: 66.66%; } .meganav__nav[data-column-count="4"] .meganav__column-rule[data-index="1"] { left: 25%; } .meganav__nav[data-column-count="4"] .meganav__column-rule[data-index="2"] { left: 50%; } .meganav__nav[data-column-count="4"] .meganav__column-rule[data-index="3"] { left: 75%; } .meganav__nav ul[depth="0"]>li { page-break-inside: avoid; -moz-column-break-inside: avoid; break-inside: avoid; } .meganav__nav h4 { color: var(--color-text); margin-bottom: 0.4em; font-size: 1.11111em; } .meganav__nav li { line-height: 1.4; margin: 0.4em 0; white-space: normal; } .meganav__nav li:first-child { margin-top: 0 !important; } .meganav__nav li[depth="0"] { margin: 0.6em 0; } .meganav__nav li[depth="0"].has-children:not(:first-child) { margin-top: 3em; } .meganav__nav li[depth="0"].has-children:not(:last-child) { margin-bottom: 3em; } .meganav__nav ul[depth="1"]>li>a { opacity: 0.7; } .meganav__primary { padding: calc(4px * 6) 0; padding: var(--spacing-6) 0; } .meganav__secondary { width: var(--secondary-width); } .meganav__inner { display: flex; } .meganav-promo { display: block; width: var(--secondary-width); position: relative; overflow: hidden; flex-shrink: 0; height: 100%; width: 100%; min-height: var(--min-promo-height); } .meganav-promo .image { height: 100%; width: 100%; } .meganav__promo-image { position: relative; } .meganav__promo-image .image__img, .meganav__promo-image .placeholder-svg { position: absolute; top: 0; left: 0; height: 100%; } .meganav__secondary-promo-overlay, .meganav__secondary-promo-text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; } .meganav__secondary-promo-overlay *, .meganav__secondary-promo-text * { pointer-events: all; } .user-is-tabbing .meganav__promo-image-link:focus { opacity: 0.75; } .meganav__secondary-promo-overlay { background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); pointer-events: none; } .meganav__secondary-promo-text { color: var(--color-promo-text); display: flex; flex-direction: column; padding: calc(4px * 8); padding: var(--spacing-8); justify-content: var(--text-vertical-position); align-items: var(--text-horizontal-position); } .meganav__secondary-promo-text-heading+.meganav__secondary-promo-text-button { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .meganav[data-meganav-type="full_width_meganav"] { width: 100%; max-width: 1400px; max-width: var(--max-width); } .meganav[data-meganav-type="full_width_meganav"] .meganav__primary { flex-grow: 1; } .meganav[data-meganav-type="full_width_meganav"] .meganav__primary .meganav__nav { width: 100%; } model-viewer { width: 100%; height: 100%; } .shopify-model-viewer-ui { height: 100%; transition: all 0.1s ease-in; opacity: 0; visibility: hidden; } .model-active .shopify-model-viewer-ui { opacity: 1; visibility: visible; } .shopify-model-viewer-ui__controls-area { position: absolute; width: 40px; bottom: 10px; right: 10px; } @media (min-width: 480px) { .shopify-model-viewer-ui__controls-area { width: 44px; bottom: calc(4px * 5); bottom: var(--spacing-5); right: calc(4px * 5); right: var(--spacing-5) } } @media (max-width: 479px) { .shopify-model-viewer-ui__controls-area { display: flex; justify-content: flex-end; width: 100% } .shopify-model-viewer-ui__controls-area button { margin-left: calc(4px * 3); margin-left: var(--spacing-3); } } .shopify-model-viewer-ui__controls-area .shopify-model-viewer-ui__button { border: 1px solid transparent; } .shopify-model-viewer-ui__controls-area .shopify-model-viewer-ui__button:focus { border-color: var(--color-text); } .shopify-model-viewer-ui__button { display: inline-block; margin: 0; text-align: center; white-space: no-wrap; cursor: pointer; width: 40px; height: 40px; padding: 0; box-sizing: content-box; background: var(--color-background); border: 0px; color: var(--color-text-body); margin-top: calc(4px * 3); margin-top: var(--spacing-3); box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.06); box-shadow: var(--box-shadow); } .shopify-model-viewer-ui__button svg { display: block; } @media (min-width: 480px) { .shopify-model-viewer-ui__button { width: 44px; height: 44px } .shopify-model-viewer-ui__button svg { width: 44px; height: 44px; } } .shopify-model-viewer-ui__button:hover svg, .shopify-model-viewer-ui__button:focus svg { opacity: 1; transition: opacity 0.25s; } .shopify-model-viewer-ui__poster-control-icon, .shopify-model-viewer-ui__control-icon { width: 40px; height: 40px; } @media (min-width: 480px) { .shopify-model-viewer-ui__poster-control-icon, .shopify-model-viewer-ui__control-icon { width: 40px; height: 40px } } .shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--enter-fullscreen { display: none !important; } .shopify-model-viewer-ui__control-icon--exit-fullscreen { display: none !important; } .shopify-model-viewer-ui--fullscreen .shopify-model-viewer-ui__control-icon--exit-fullscreen { display: block !important; } .shopify-model-viewer-ui__button--poster { position: absolute; width: 40px; top: 0px; right: 10px; } @media (min-width: 480px) { .shopify-model-viewer-ui__button--poster { width: 44px; top: 20px; right: 20px } } .shopify-model-viewer-ui__sr-only { visibility: hidden; position: absolute; } .shopify-model-viewer-ui--fullscreen model-viewer { height: 100vh; } .model-poster { cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0; display: block; width: 100%; background-position: center center; background-size: contain; background-repeat: no-repeat; transition: all 0.1s ease-in; } .model-poster.focus-visible:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid var(--color-text-body); } .model-active .model-poster { opacity: 0; visibility: hidden; } .model-poster .media-badge { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-around; } .model-poster .media-badge .icon { width: 60px; height: 60px; background: var(--color-background); } .model-poster:focus { outline: auto; } .model-poster:focus svg path { opacity: 1; } .model-poster svg { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.06); box-shadow: var(--box-shadow); } .model-poster svg .bg { stroke: var(--color-background); fill: var(--color-background); } .model-poster svg path { opacity: 1; transition: opacity 0.25s; } .model-poster svg:hover path { opacity: 1; transition: opacity 0.25s; } .shopify-model-viewer-ui__button--poster { display: none !important; } .payment-icons { display: flex; flex-wrap: wrap; margin: calc((4px * 1) * -1); margin: calc(calc(4px * 1) * -1); margin: calc(var(--spacing-1) * -1); } .payment-icons img { width: 100%; display: block; } .payment-icons__icon { padding-top: calc((4px * 2)); padding-top: calc(calc(4px * 2)); padding-top: calc(var(--spacing-2)); margin: 0 2px; margin: 0 var(--spacing-unit-half); } .payment-icons__icon .icon { width: 36px; height: 22px; } .modal { visibility: hidden; z-index: 1300; z-index: var(--z-index-modal); position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: calc(4px * 3); padding: var(--spacing-3); transition: visibility 0s 500ms; transition: visibility 0s var(--duration-normal); } @media (min-width: 720px) { .modal { padding: calc(4px * 10); padding: var(--spacing-10) } } @media (min-width: 720px) { .modal { padding: calc(4px * 15); padding: var(--spacing-15) } } @media (min-width: 960px) { .modal { padding: calc(4px * 20); padding: var(--spacing-20) } } .modal.active { visibility: visible; transition: visibility 0s 0s; } .modal.active .modal__inner { opacity: 1; transform: translateY(0); } .modal.active .modal__wash { opacity: 1; } @media (min-width: 720px) { .modal.modal--narrow .modal__inner { width: 640px } } .modal .modal-content { display: block; } .modal h2:first-of-type { margin-top: 0; } .modal__wash { z-index: 1300; z-index: var(--z-index-modal); background-color: var(--color-overlay); opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); cursor: pointer; } .modal__header { position: sticky; top: 0; margin-bottom: calc((4px * 5) * -1); margin-bottom: calc(calc(4px * 5) * -1); margin-bottom: calc(var(--spacing-5) * -1); display: flex; justify-content: flex-end; } .modal__close-icon { background-color: var(--color-background); } .modal__inner { z-index: 1300; z-index: var(--z-index-modal); position: relative; width: 100%; max-height: calc(100vh - (calc(4px * 3) * 2)); max-height: calc(100vh - (var(--spacing-3) * 2)); background-color: var(--color-background); pointer-events: all; padding: calc(4px * 6); padding: var(--spacing-6); overflow: auto; transform: translateY(calc(4px * 4)); transform: translateY(var(--spacing-4)); opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1), transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing), transform var(--duration-normal) var(--easing); } @media (min-width: 720px) { .modal__inner { max-height: calc(100vh - (calc(4px * 10) * 2)); max-height: calc(100vh - (var(--spacing-10) * 2)); width: calc(747px + (calc(4px * 9) * 2)); width: calc(var(--max-width-narrow) + (var(--spacing-9) * 2)); padding: calc(4px * 9); padding: var(--spacing-9) } } .is-mobile .modal__inner { height: 100%; } .modal__content>div { margin: 0; } .unit-price { display: none; margin: 0; color: var(--color-text-meta); font-size: var(--font-size-body-60); } .unit-price.unit-price--available { display: inline-block; } .unit-price.unit-price--available .unit-price__price { display: block; } .store-availability-drawer { --menu-max-width: var(--flyout-width); z-index: 1300; z-index: var(--z-index-modal); visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; display: flex; width: 100%; padding-left: calc(4px * 9); padding-left: var(--flyout-mobile-gap); transition: visibility 0s 500ms; transition: visibility 0s var(--duration-normal); } .store-availability-drawer.active { visibility: visible; transition: visibility 0s 0s; } .store-availability-drawer.active .store-availability-drawer__wash { opacity: 1; } .store-availability-drawer.active .store-availability-drawer__container { transform: none; transform: initial; } .store-availability-drawer__wash { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-overlay); opacity: 0; cursor: pointer; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } .store-availability-drawer__container { position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--menu-max-width); height: 100vh; margin-left: auto; padding: calc(4px * 7); padding: var(--spacing-7); background-color: var(--color-background); color: var(--color-text); overflow: auto; transform: translateX(100%); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } @media (max-width: 719px) { .store-availability-drawer__container { padding: calc(4px * 5); padding: var(--spacing-5) } } .store-availability-drawer__header { display: flex; justify-content: space-between; padding-right: calc(4px * 10); padding-right: var(--spacing-10); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); border-bottom: 2px solid var(--color-text); } .store-availability-drawer__store-list-variant-title:not(:empty) { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .store-availability-drawer__close { position: absolute; top: calc(4px * 6); top: var(--spacing-6); right: calc(4px * 6); right: var(--spacing-6); } @media (max-width: 719px) { .store-availability-drawer__close { top: calc(4px * 4); top: var(--spacing-4); right: calc(4px * 4); right: var(--spacing-4) } } .store-availbility-drawer__content .store-availability__store-list-wrapper { display: block; } .navigation-dots { --dot-size: 10px; --animation-ease: cubic-bezier(0.33, 0, 0, 1); position: absolute; width: 100%; bottom: calc(4px * 5); bottom: var(--spacing-5); margin: 0; padding: 0; list-style: none; text-align: center; line-height: 1; z-index: 99; } .navigation-dots.hidden { display: none; } .navigation-dots .navigation-dots__inner { max-width: 1400px; max-width: var(--max-width); display: flex; padding: 0 3.3vw; padding: 0 var(--space-outer); justify-content: center; margin: 0 auto; } .navigation-dots .navigation-dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); padding: 0; margin: 0 calc(4px * 1); margin: 0 var(--spacing-1); background-color: var(--color-text); border-radius: var(--dot-size); cursor: pointer; opacity: 0.3; transform: scale(0.8); transition: opacity 0.2s var(--animation-ease), transform 0.2s var(--animation-ease); } .navigation-dots .navigation-dot.is-selected { opacity: 1; } .navigation-dots .navigation-dot:hover, .navigation-dots .navigation-dot.is-selected { transform: scale(1); } .icon-button { width: 56px; height: 56px; position: relative; } .icon-button:not([hidden]) { display: flex; } .icon-button { align-items: center; justify-content: space-around; transition: transform 0.25s } .icon-button:hover .icon-button__icon:before { opacity: 0.1; transform: scale(1); } .popover .icon-button:hover .icon-button__icon:before { opacity: 1; } .icon-button:active { transform: scale(0.9); } .popover .icon-button { --color: var(--color-text); } .icon-button.icon-button--small, .icon-button.icon-button--small .icon-button__icon { width: 20px; height: 20px; } .icon-button.icon-button--small .icon { width: 16px; height: 16px; } .icon-button__icon { position: relative; width: 56px; height: 56px; display: flex; align-items: center; justify-content: space-around; border-radius: 100%; z-index: 2; } .icon-button__icon:before { content: ""; background-color: var(--color); opacity: 0; border-radius: 100%; height: 100%; width: 100%; position: absolute; z-index: 2; transform: scale(0.8); transition: opacity 0.25s, transform 0.25s ease-in-out; } .popover .icon-button__icon:before { background-color: var(--color-background); } .icon-button__icon .icon { position: relative; z-index: 10; color: var(--color); } html:not(.no-js) .navigation__submenu { position: absolute; color: var(--color-text); margin-top: -1px; text-align: left; text-transform: none; line-height: 1.55em; top: 100%; transition: visibility 0s 0s cubic-bezier(0.33, 0, 0, 1), opacity 300ms 0s cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s 0s var(--easing), opacity var(--duration-fast) 0s var(--easing); } html:not(.no-js) .navigation__submenu:not(.active) { visibility: hidden; opacity: 0; transition: visibility 0s 300ms cubic-bezier(0.33, 0, 0, 1), opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s var(--duration-fast) var(--easing), opacity var(--duration-fast) var(--easing); } html:not(.no-js) .navigation__submenu[data-depth="1"] { left: 0; transform: translateX(calc(var(--navigation-menu-offet) * -1)); margin-left: calc(-1 * (4px * 5)); margin-left: calc(-1 * calc(4px * 5)); margin-left: calc(-1 * var(--spacing-5)); } html:not(.no-js) .navigation__submenu[data-depth="1"].active { left: auto; left: initial; } html:not(.no-js) .navigation__submenu[data-depth="2"] { top: auto; top: initial; left: 100%; margin-top: calc((0px + calc(4px * 4)) * -1); margin-top: calc((var(--submenu-item-height, 0px) + var(--spacing-4)) * -1); } html:not(.no-js) .navigation__submenu[data-depth="2"][data-position="left"] { left: -100%; } html:not(.no-js) .navigation__submenu[data-depth="2"] .navigation__submenu-list { max-height: var(--max-height); } html:not(.no-js):not(.sticky-header-active) .navigation__submenu[data-depth="2"] { margin-top: calc((0px + 0px - 0px) * -1); margin-top: calc((var(--height-header, 0px) + var(--announcement-height, 0px) - var(--submenu-item-height, 0px)) * -1); } html:not(.no-js) .navigation__submenu-list { --width: 250px; width: 250px; width: var(--width); padding: calc(4px * 4) calc(4px * 5); padding: var(--spacing-4) var(--spacing-5); border: 1px solid var(--color-text); background-color: var(--color-background); overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } html:not(.no-js) .navigation__submenu-list::-webkit-scrollbar { display: none; } html:not(.no-js) .navigation__submenu-list { max-height: calc((1vh * 100) - (0px + 0px)); max-height: calc((var(--vh, 1vh) * 100) - (var(--height-header, 0px) + var(--announcement-height, 0px))) } html:not(.no-js).sticky-header-active .navigation__submenu-list { max-height: calc((1vh * 100) - 0px); max-height: calc((var(--vh, 1vh) * 100) - var(--header-desktop-sticky-height, 0px)); } html:not(.no-js) .navigation__submenu-item { list-style: none; margin: 0; padding: 0; white-space: normal; } html:not(.no-js) .navigation__submenu-item [data-link] { display: block; width: 100%; text-align: left; text-transform: none; line-height: inherit; } html:not(.no-js) .navigation__submenu-item .navigation__submenu-child-link { position: relative; display: flex; align-items: center; } html:not(.no-js) .navigation__submenu-item .navigation__submenu-child-link .icon { display: flex; width: 10px; height: 10px; } html:not(.no-js) .navigation__submenu-item>button { width: 100%; display: flex; } html:not(.no-js) .navigation__submenu-item+.navigation__submenu-item { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } html:not(.no-js) .navigation__submenu-icon { margin-left: auto; pointer-events: none; transform: rotate(-90deg); } html:not(.no-js) .navigation__submenu-trigger { display: flex; align-items: center; } html:not(.no-js) .navigation__submenu-trigger[aria-expanded="true"] { -webkit-text-decoration: underline; text-decoration: underline; text-underline-position: auto; } .no-js .header__links ul { display: inline-block; margin: 0 0 0 calc(4px * 5); margin: 0 0 0 var(--spacing-5); padding: 0; } .no-js .header__links li { list-style: none; display: inline-block; } .no-js .header__links li+li { margin-left: calc(4px * 5); margin-left: var(--spacing-5); } .drawer-menu { --menu-width: var(--flyout-width); display: none; position: fixed; top: 0; right: 0; left: 0; height: calc(var(--vh) * 100); z-index: -1; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 0; } .drawer-menu.active { display: block; } .drawer-menu.active .drawer-menu__panel { visibility: visible; } .drawer-menu.visible .drawer-menu__overlay { opacity: 1; } .drawer-menu.visible .drawer-menu__panel { opacity: 1; } .drawer-menu__overlay { background-color: var(--color-bg-overlay); cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } .drawer-menu__panel { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; width: 100vw; height: calc(100 * var(--vh)); padding-top: calc(var(--height-header) + var(--announcement-height)); color: var(--color-text-header); background-color: var(--color-background-header); z-index: 100; opacity: 0; visibility: hidden; transition: opacity 100ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-ultra-fast) var(--easing); } html.sticky-header-active .drawer-menu__panel { padding-top: var(--height-header); } .drawer-menu__bottom { width: 100%; height: 100%; overflow: hidden; } .drawer-menu__all-links { position: relative; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.5s; height: 100%; } .drawer-menu__all-links[data-depth="0"] { transform: translateX(0); } .drawer-menu__all-links[data-depth="1"] { transform: translateX(-100%); } .drawer-menu__all-links ul { margin: 0; padding: 0; width: 100%; } .drawer-menu__all-links[data-in-initial-position="false"] .drawer-menu__secondary-links { opacity: 0; pointer-events: none; } .drawer-menu__all-links[data-in-initial-position="false"][data-depth="0"] .drawer-menu__form { opacity: 0; pointer-events: none; } .drawer-menu__contents { flex-shrink: 1; overflow-y: scroll; padding-bottom: calc(4px * 12); padding-bottom: var(--spacing-12); } .drawer-menu__main { transition: height 0.35s; overflow: hidden; } .drawer-menu__primary-links { position: relative; transition: transform 0.5s; } .drawer-menu__primary-links[data-depth="0"] { transform: translateX(0); } .drawer-menu__primary-links[data-depth="1"] { transform: translateX(-100%); } .drawer-menu__primary-links[data-depth="2"] { transform: translateX(-200%); } .drawer-menu__primary-links[data-depth="3"] { transform: translateX(-300%); } .drawer-menu__primary-links[data-depth="4"] { transform: translateX(-400%); } .drawer-menu__primary-links:last-child .drawer-menu__item:last-child { border-bottom-width: 0; } .drawer-menu__primary-links .drawer-menu__item { letter-spacing: 0.05em; } ul.drawer-menu__secondary-links { transition: all 300ms ease-out; margin-top: calc(4px * 4); margin-top: var(--spacing-4); } ul.drawer-menu__secondary-links .drawer-menu__item--account-item { display: flex; align-items: center; margin-top: calc(4px * 2); margin-top: var(--spacing-2); } ul.drawer-menu__secondary-links .drawer-menu__item--account-item .drawer-menu__link { min-width: 0; } ul.drawer-menu__secondary-links .drawer-menu__item--account-item .drawer-menu__link+.drawer-menu__link { margin-left: calc(4px * 1); margin-left: var(--spacing-1); } ul.drawer-menu__secondary-links .drawer-menu__item--account-item .drawer-menu__logout_link { -webkit-text-decoration: underline; text-decoration: underline; } ul.drawer-menu__secondary-links .drawer-menu__item--account-item .icon { width: 20px; height: 20px; margin-right: calc(4px * 2); margin-right: var(--spacing-2); } ul.drawer-menu__secondary-links .drawer-menu__item--social-icons { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } ul.drawer-menu__secondary-links .drawer-menu__item--social-icons .social-icons { -moz-column-gap: calc(4px * 3); column-gap: calc(4px * 3); -moz-column-gap: var(--spacing-3); column-gap: var(--spacing-3); } ul.drawer-menu__secondary-links .drawer-menu__item:not(:last-child) { border-bottom-width: 0; } ul.drawer-menu__secondary-links .drawer-menu__item { text-transform: none; font-size: var(--font-size-body-75); line-height: var(--line-height-body); border-bottom-width: 0; } .drawer-menu__list--sub { position: absolute; top: 0; left: 100%; width: 100%; opacity: 0; pointer-events: none; visibility: hidden; transition: visibility 0s 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } .drawer-menu__list--sub.visible { opacity: 1; transition: visibility 0s, opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s, opacity var(--duration-normal) var(--easing); pointer-events: all; visibility: visible; } .drawer-menu__list--country-selector, .drawer-menu__list--language-selector { height: 100%; overflow: auto; } .drawer-menu__item { list-style: none; font-size: var(--font-size-body-50); text-transform: uppercase; margin: 0; padding: 0; word-wrap: break-word; word-wrap: break-word; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; margin: 0 3.3vw; margin: 0 var(--space-outer); border-bottom: 1px solid var(--color-text-header-half-transparent); } .drawer-menu__item.drawer-menu__item--heading { flex-direction: column; } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__item--heading-back-link { display: block; width: 100%; padding: calc(4px * 8) 0 calc(4px * 5); padding: var(--spacing-8) 0 var(--spacing-5); } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__item--heading-back-link .icon { display: block; transform: rotate(180deg); } .drawer-menu__item.localization-item .flag-icon { margin-right: calc(4px * 3); margin-right: var(--spacing-3); margin-left: 0; } .drawer-menu__item.localization-item .icon-checkmark { margin-left: auto; } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__link { height: auto; flex-direction: column; align-items: flex-start; position: relative; margin-bottom: calc(4px * 6); margin-bottom: var(--spacing-6); } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__link .icon { position: absolute; left: 0px; width: 16px; height: 16px; top: 50%; transform: rotate(90deg); margin-top: -8px; } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__link span { text-transform: none; } .drawer-menu__item.drawer-menu__item--heading .drawer-menu__link>a { margin-top: calc(4px * 2); margin-top: var(--spacing-2); -webkit-text-decoration: underline; text-decoration: underline; } .drawer-menu__link { min-height: var(--item-height); min-width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0; font-family: inherit; font-size: inherit; background-color: transparent; color: inherit; border: none; } .drawer-menu__link .drawer-menu__link-title { display: flex; align-items: center; } .drawer-menu__link .drawer-menu__link-thumbnail { width: var(--thumbnail-width); flex-shrink: 0; margin: calc(4px * 3) calc(4px * 3) calc(4px * 3) 0; margin: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0; } .drawer-menu__link .icon { width: 15px; height: 15px; } .drawer-menu__link .icon.icon-chevron { transform: rotate(270deg); } .drawer-menu__link--cb { justify-content: flex-start; } .drawer-menu__form { margin: 0 3.3vw 0; margin: 0 var(--space-outer) var(--announcement-height, 0); border-top: 1px solid var(--color-text-header-half-transparent); padding: calc(4px * 2) 0 calc(4px * 4); padding: var(--spacing-2) 0 var(--spacing-4); z-index: 1; box-shadow: 0px -22px 22px var(--color-background-header); } .drawer-menu__footer { flex-shrink: 0; display: flex; justify-content: center; transition: all 300ms ease-out; } .drawer-menu__footer .localization-item-trigger { margin: 0; padding: 0; border-bottom: 0; text-transform: none; } .drawer-menu__footer .localization-item-trigger>.drawer-menu__link { justify-content: center; } .drawer-menu__footer .localization-item-trigger>.drawer-menu__link .flag-icon { margin-right: calc(4px * 2); margin-right: var(--spacing-2); } .drawer-menu__footer .localization-item-trigger>.drawer-menu__link .icon { margin-right: calc(4px * 1); margin-right: var(--spacing-1); } .drawer-menu__footer[data-localization-option-count="1"] .localization-item-trigger { width: 100%; } .drawer-menu__footer[data-localization-option-count="2"] .localization-item-trigger { width: 50%; } .drawer-menu__footer[data-localization-option-count="2"] .localization-item-trigger+.localization-item-trigger { border-left: 1px solid var(--color-text-header-half-transparent); } .drawer-menu__link--label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-menu__radio { width: 12px; height: 12px; margin-right: var(--spacing-small); background-color: currentColor; border-radius: 100%; display: flex; align-items: center; justify-content: space-around; } .drawer-menu__radio>div { width: 6px; height: 6px; background-color: var(--color-background-header); border-radius: 100%; } .scroll-lock { position: fixed; width: 100%; height: 100%; overflow: hidden; transition: fill 0.2s ease; } .quick-search { --menu-max-width: var(--flyout-width); position: fixed; top: calc(0 + 0 - 0); top: calc(var(--announcement-height, 0) + var(--height-header, 0) - var(--scroll-y, 0)); right: 0; bottom: 0; left: 0; display: none; width: 100%; color: var(--color-text); z-index: 480; z-index: var(--z-index-quick-search); } html.sticky-header-active .quick-search { top: 0; top: var(--height-header, 0); } @media (max-width: 959px) { html.sticky-header-active[data-enable-sticky-announcement-bar*="mobile"] .quick-search { top: calc(0 + var(--announcement-height)); top: calc(var(--height-header, 0) + var(--announcement-height)) } } .quick-search[aria-hidden="false"] { display: block; } .quick-search.quick-search--visible .quick-search__overlay { opacity: 1; } .quick-search.quick-search--visible .quick-search__container { transform: translateY(0); opacity: 1; } @media (min-width: 960px) { .quick-search { top: 0; right: calc(var(--menu-max-width) * -1); left: auto; max-width: var(--menu-max-width); height: 100% } html.sticky-header-active .quick-search { top: 0; } .quick-search.quick-search--visible .quick-search__overlay { opacity: 1; } .quick-search.quick-search--visible .quick-search__container { transform: translateX(-100%); opacity: 1; } body.quick-search-position-left .quick-search { right: auto; left: calc(var(--menu-max-width) * -1); } body.quick-search-position-left .quick-search.quick-search--visible .quick-search__container { transform: translateX(100%); } } .quick-search .c-subdued { opacity: 0.6; } .quick-search a { transition: opacity 0.25s; } .quick-search .unit-price__price { margin-left: 0; } .quick-search__container { display: flex; flex-direction: column; width: 100%; height: auto; max-height: 100%; padding-bottom: calc(4px * 3); padding-bottom: var(--spacing-3); background-color: var(--color-background); color: var(--color-text); position: relative; z-index: 1; transform: translateY(-100%); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } @media (min-width: 960px) { .quick-search__container { max-width: var(--menu-max-width); height: 100%; padding-top: 0; padding-bottom: 0; transform: translateY(0); overflow: hidden } html.sticky-header-active .quick-search__container { padding-top: 0; } } .quick-search__close { display: none; align-self: flex-end; margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-right: calc(4px * 7); margin-right: var(--spacing-7); margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .quick-search__close .icon { display: block; width: 30px; height: 30px; } @media (min-width: 960px) { .quick-search__close { display: block } } .quick-search__form { position: relative; display: flex; flex-direction: column; height: 100%; } .quick-search__form.active { overflow-y: auto; } .quick-search__bar { padding: calc(4px * 3) 3.3vw 0; padding: var(--spacing-3) var(--space-outer) 0; background-color: var(--color-background); z-index: 10; } .active .quick-search__bar { position: sticky; top: 0; } @media (min-width: 960px) { .quick-search__bar { position: static; padding: 0 calc(4px * 7); padding: 0 var(--spacing-7) } } .quick-search__bar-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; pointer-events: all; border-bottom: 2px solid var(--color-text); } .quick-search__bar-inner.active .quick-search__clear { opacity: 1; visibility: visible; } .quick-search__input { height: 44px; padding: calc(4px * 3); padding: var(--spacing-3); font-size: var(--font-size-body-100); flex-grow: 1; border: none; } .quick-search__input::-moz-placeholder { color: inherit; opacity: 0.5; } .quick-search__input::placeholder { color: inherit; opacity: 0.5; } .quick-search__actions { display: flex; align-items: center; flex-shrink: 0; } .quick-search__submit, .quick-search__clear { display: flex; align-items: center; transition: color 300ms cubic-bezier(0.33, 0, 0, 1), opacity 300ms cubic-bezier(0.33, 0, 0, 1), visibility 300ms cubic-bezier(0.33, 0, 0, 1); transition: color var(--duration-fast) var(--easing), opacity var(--duration-fast) var(--easing), visibility var(--duration-fast) var(--easing); border-radius: 4px; } .quick-search__submit .icon, .quick-search__clear .icon { display: flex; width: 20px; height: 20px; } .quick-search__clear { opacity: 0; visibility: hidden; color: var(--color-text-meta); } .quick-search__clear:hover, .quick-search__clear:focus { color: var(--color-text); } .quick-search__clear:active { color: var(--color-text); } .quick-search__results-wrapper, .quick-search__suggested-wrapper { flex-grow: 1; position: relative; display: flex; flex-direction: column; } @media (min-width: 960px) { .quick-search__results-wrapper, .quick-search__suggested-wrapper { flex-grow: 1; overflow-y: auto; overflow-x: hidden } } .quick-search__results, .quick-search__suggested { display: grid; grid-template-columns: 50fr 50fr; grid-column-gap: calc(4px * 3); grid-column-gap: var(--spacing-3); -moz-column-gap: calc(4px * 3); column-gap: calc(4px * 3); -moz-column-gap: var(--spacing-3); column-gap: var(--spacing-3); width: 100%; padding: calc(4px * 5) 3.3vw; padding: var(--spacing-5) var(--space-outer); } .quick-search__results:empty, .quick-search__suggested:empty { display: none; } @media (min-width: 960px) { .quick-search__results, .quick-search__suggested { position: absolute; top: 0; left: 0; padding: calc(4px * 9) calc(4px * 7); padding: var(--spacing-9) var(--spacing-7) } } .quick-search__results-wrapper { display: none; } .quick-search__form.active .quick-search__results-wrapper { display: block; } .quick-search__result-info.quick-search__result--list, .quick-search__result-info.quick-search__result--list_thumbnails { padding-right: calc(4px * 7); padding-right: var(--spacing-7); } .quick-search__form.active .quick-search__suggested-wrapper { display: none; } .quick-search__footer { position: absolute; align-self: flex-end; width: 100%; padding: calc(4px * 5) 3.3vw; padding: var(--spacing-5) var(--space-outer); background-color: var(--color-background); box-shadow: 0 -15px 15px var(--color-background); opacity: 0; visibility: hidden; transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; } .quick-search__form.active .quick-search__footer { position: sticky; bottom: 0; opacity: 1; visibility: visible; } @media (min-width: 960px) { .quick-search__footer { position: static; padding: calc(4px * 5) calc(4px * 7); padding: var(--spacing-5) var(--spacing-7) } } .quick-search__result { grid-column: span 2; display: flex; align-items: center; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .quick-search__result:hover { -webkit-text-decoration: underline; text-decoration: underline; } .quick-search__result.quick-search__result--product { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .quick-search__result.quick-search__result--product:hover { -webkit-text-decoration: none; text-decoration: none; } .quick-search__result.quick-search__result--product.quick-search__result--list+.quick-search__result.quick-search__result--product.quick-search__result--list, .quick-search__result.quick-search__result--product.quick-search__result--list_thumbnails+.quick-search__result.quick-search__result--product.quick-search__result--list_thumbnails { padding-top: calc(4px * 3); padding-top: var(--spacing-3); border-top: solid 1px var(--color-border); } .quick-search__result.quick-search__result--product.quick-search__result--columns { grid-column: span 1; display: block; margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); text-align: center; } .quick-search__result .hl { color: var(--color-text); background-color: var(--color-background); font-weight: var(--font-body-bold-weight); } .quick-search__header { grid-column: span 2; margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); padding-bottom: calc(4px * 1); padding-bottom: var(--spacing-1); border-bottom: 1px solid var(--color-border); } .quick-search__results .quick-search__header:first-of-type { margin-top: 0; } .quick-search__suggested-header { margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .quick-search__suggested-queries, .quick-search__suggested-header, .quick-search__no-results-header, .quick-search__no-results { grid-column: span 2; } .quick-search__result-image-wrapper { position: relative; margin-right: calc(4px * 5); margin-right: var(--spacing-5); flex-shrink: 0; width: 80px; } .quick-search__result-image-wrapper .placeholder-image { background-color: var(--color-background-meta); } .quick-search__result--columns .quick-search__result-image-wrapper { width: 100%; margin-right: 0; margin-bottom: calc(4px * 4); margin-bottom: var(--spacing-4); } .quick-search__result-details { width: 100%; overflow: hidden; } .quick-search__result--list .quick-search__result-details { display: flex; align-items: center; justify-content: space-between; } .quick-search__result-details.quick-search__result-details--query mark { background-color: transparent; color: inherit; } .quick-search__result-details.quick-search__result-details--query span { font-weight: var(--font-body-bold-weight); } .quick-search__result-heading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quick-search__result--product.quick-search__result--list .quick-search__result-heading { white-space: normal; } .quick-search__result--columns .quick-search__result-heading { white-space: inherit; } .quick-search__result-subheading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quick-search__result--columns .quick-search__result-subheading { white-space: inherit; } .quick-search__result-vendor, .quick-search__result-price { display: block; } .quick-search__result-price s { margin-right: calc(4px * 1); margin-right: var(--spacing-1); color: var(--color-text-meta); } .quick-search__result-price .sale { color: var(--color-products-sale-price); } .quick-search__result--list .quick-search__result-price { text-align: right; } .quick-search__result-price .unit-price { margin-left: calc(4px * 1); margin-left: var(--spacing-1); font-size: var(--font-size-body-60); } .quick-search__view-all { padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); margin-top: calc(4px * 5); margin-top: var(--spacing-5); margin-bottom: calc(4px * 20); margin-bottom: var(--spacing-20); } .quick-search__view-all .btn { color: var(--color-text); } .quick-search__overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-overlay); opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); cursor: pointer; } .popover { color: var(--color-text); } .popover .btn.btn--primary { color: var(--color-background); border-color: var(--color-background-button); background-color: var(--color-background-button); } .popover .btn.btn--primary:not([disabled]):hover, .popover .btn.btn--primary:not([disabled]):focus { border-color: var(--color-background-button-hover); background-color: var(--color-background-button-hover); } .popover .btn.btn--primary .btn__loading-bar { background-color: var(--color-background); } .popover .btn.btn--primary .icon { color: inherit; } .popover .btn.btn--secondary { border-color: var(--color-border); } .popover .btn.btn--secondary:hover { border-color: var(--color-border-meta); } .popover .input, .popover input.spr-form-input, .popover textarea.spr-form-input { border: 1px solid var(--color-border); color: var(--color-text); } .popover .input option, .popover input.spr-form-input option, .popover textarea.spr-form-input option { background-color: var(--color-background); } .popover input[type="checkbox"] { border: 1px solid var(--color-border); } .popover input[type="checkbox"]:checked:before { background-color: var(--color-text); } .popover .loader__bar { background-color: var(--color-text); } .popover blockquote { background-color: var(--color-background); box-shadow: inset 1px 0px 0px var(--color-border); } .popover table td, .popover table th { border: 1px solid var(--color-border); } .popover hr { background-color: var(--color-border); } .popover h1, .popover h2, .popover h3, .popover h4, .popover h5, .popover h6 { color: var(--color-text); } .popover a { color: var(--color-text-link); } .placeholder-image { position: relative; display: flex; justify-content: center; align-items: center; background-color: var(--color-background-placeholder); height: 100%; } .placeholder-image svg { fill: var(--color-foreground-placeholder); width: 100%; height: 100%; } .social-icons { display: flex; flex-wrap: wrap; gap: calc(4px * 2); gap: var(--spacing-2); margin: 0; padding: 0; } .social-icons.social-icons--center { justify-content: center; } .social-icons.social-icons--right { justify-content: flex-end; } .social-icons li { width: 24px; height: 24px; list-style: none; } .social-icons a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .social-icons-block .social-icons { justify-content: center; gap: calc(4px * 4); gap: var(--spacing-4); } .social-icons-block .social-icons.social-icons--left { justify-content: flex-start; } .social-icons-block .social-icons.social-icons--right { justify-content: flex-end; } .social-icons-block .social-icons li { margin: 0; } .share-icons { display: flex; align-items: center; justify-content: center; } .share-icons__icon { display: flex; align-items: center; } .share-icons__icon .icon {} .share-icons__label { padding-left: calc(4px * 3); padding-left: var(--spacing-3); letter-spacing: 0.05em; } .active-filters { --swatch-size: 18px; display: flex; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .active-filters::-webkit-scrollbar { display: none; } .active-filters__active-filter, .popover .active-filters__active-filter { display: flex; align-items: center; margin-right: calc(4px * 2); margin-right: var(--spacing-2); background-color: var(--color-background-darker-meta); border-radius: 24px; padding: calc(4px * 1) calc(4px * 2) calc(4px * 1) calc(4px * 4); padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-4); transition: border-color 0.3s ease-in-out; white-space: nowrap; color: var(--color-text); } .active-filters__active-filter:only-child, .popover .active-filters__active-filter:only-child { display: none; } .active-filters__active-filter:hover, .active-filters__active-filter:focus, .popover .active-filters__active-filter:hover, .popover .active-filters__active-filter:focus { border-color: var(--color-text); } .active-filters__active-filter.active-filters__clear, .popover .active-filters__active-filter.active-filters__clear { margin-left: calc(4px * 2); margin-left: var(--spacing-2); white-space: nowrap; border: 0; background: transparent; color: var(--color-text); } .active-filters__active-filter .icon-close-small, .popover .active-filters__active-filter .icon-close-small { width: 8px; height: 8px; margin-left: calc(4px * 3); margin-left: var(--spacing-3); margin-right: calc(4px * 2); margin-right: var(--spacing-2); pointer-events: none; color: currentColor; opacity: 0.5; } .active-filters__active-filter .icon-close-small svg, .popover .active-filters__active-filter .icon-close-small svg { display: block; } .active-filters__swatch { display: flex; width: var(--swatch-size); height: var(--swatch-size); margin-right: calc(4px * 3); margin-right: var(--spacing-3); margin-left: calc((4px * 2) * -1); margin-left: calc(calc(4px * 2) * -1); margin-left: calc(var(--spacing-2) * -1); border-radius: 100%; background-size: cover; background-position: center center; box-shadow: 0 0 0 1px inset var(--color-text-8-percent), 0 0 0 0 var(--color-border); } .product-swatches-options { width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .product-swatches-options__list { display: flex; width: 100%; justify-content: center; align-items: center; list-style: none; padding: 0 calc(4px * 3); padding: 0 var(--spacing-3); margin: 0; -moz-column-gap: calc((4px * 3) / 2); column-gap: calc((4px * 3) / 2); -moz-column-gap: calc(calc(4px * 3) / 2); column-gap: calc(calc(4px * 3) / 2); -moz-column-gap: calc(var(--spacing-3) / 2); column-gap: calc(var(--spacing-3) / 2); } .product-swatches-options__list+.product-swatches-options__list { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product-swatches-options__item--swatch { width: 100%; max-width: 16px; max-width: var(--swatch-width, 16px); aspect-ratio: 1; position: relative; background-position: center center; background-size: contain; background-size: var(--swatch-image-fit, contain); } .product-swatches-options__item--swatch::after { content: ""; box-shadow: 0 0 0 1px inset rgba(0, 0, 0, 0.075), 0 0 0 0 var(--color-border); } .product-swatches-options__item--swatch::after, .product-swatches-options__item--swatch img { position: absolute; width: 100%; height: 100%; } .product-swatches-options__item--swatch[data-swatch-shape="rectangle"] { aspect-ratio: 1.75; } .product-swatches-options__item--swatch[data-swatch-shape="round"], .product-swatches-options__item--swatch[data-swatch-shape="round"]::after, .product-swatches-options__item--swatch[data-swatch-shape="round"] img { border-radius: 100%; } .product-swatches-options__item--swatch img { -o-object-fit: contain; object-fit: contain; -o-object-fit: var(--swatch-image-fit, contain); object-fit: var(--swatch-image-fit, contain); background-color: var(--color-background); } .product-swatches-options__item-overflow-note { opacity: 0.65; white-space: nowrap; margin-left: 0.25em; } .product-chips-options { width: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .product-chips-options__list { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; align-items: center; list-style: none; padding: 0 calc(4px * 3); padding: 0 var(--spacing-3); margin: 0; gap: calc(4px * 2); gap: var(--spacing-2); } .product-chips-options__list+.product-chips-options__list { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product-chips-options__item--chip { padding: 2px calc(4px * 2); padding: var(--spacing-unit-half) var(--spacing-2); background-color: var(--color-background); border: solid 1px var(--color-border); } .play-button-block { width: 100%; display: flex; } @media (min-width: 720px) { .play-button-block.button-block--justify-center { justify-content: center; } .play-button-block.button-block--justify-right { justify-content: flex-end; } } @media (max-width: 719px) { .play-button-block.button-block--justify-mobile-center { justify-content: center; } .play-button-block.button-block--justify-mobile-right { justify-content: flex-end; } } .play-button-block.play-button-block--has-poster .play-button-block__inner { padding: calc(4px * 2); padding: var(--spacing-2); } .play-button-block.play-button-block--has-poster .play-button-block__inner .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .play-button-block.play-button-block--has-poster.play-button-block--has-label .play-button-block__inner { padding: calc(4px * 2) calc(4px * 5) calc(4px * 2) calc(4px * 2); padding: var(--spacing-2) var(--spacing-5) var(--spacing-2) var(--spacing-2); } .play-button-block.play-button-block--icon-style-dark .icon { color: black; } .play-button-block.play-button-block--icon-style-dark .icon circle { fill: black; fill-opacity: 1; } .play-button-block.play-button-block--icon-style-dark .icon path { fill: white; } .play-button-block.play-button-block--icon-style-light .icon { color: white; } .play-button-block.play-button-block--icon-style-light .icon circle { fill: white; fill-opacity: 1; } .play-button-block.play-button-block--icon-style-light .icon path { fill: black; } .play-button-block .icon { width: 34px; height: 34px; display: flex; align-items: center; } .play-button-block .icon circle { fill: var(--color-background-overlay-button, var(--color-background-button)); fill-opacity: 0.05; } .play-button-block__inner { position: relative; display: flex; align-items: center; padding: calc(4px * 3) calc(4px * 5); padding: var(--spacing-3) var(--spacing-5); border: 1px solid var(--color-background-overlay-button-alpha, var(--color-background-button-alpha)); color: var(--color-background-overlay-button, var(--color-background-button)); transition: box-shadow 0.2s ease, scale 0.2s ease; } .play-button-block--layout-minimal .play-button-block__inner { border: none; padding: 0; } .play-button-block--layout-minimal .play-button-block__inner .icon { width: 40px; height: 40px; } @media (min-width: 720px) { .play-button-block--layout-minimal .play-button-block__inner .icon { width: 60px; height: 60px } } .play-button-block--layout-minimal .play-button-block__inner:hover { box-shadow: none; scale: 1.1; } .play-button-block__inner:hover, .play-button-block__inner:focus { box-shadow: 0 0 0 1px var(--color-background-overlay-button, var(--color-background-button)); border-color: var(--color-background-overlay-button, var(--color-background-button)); } .play-button-block__inner[disabled] { opacity: 0.6; cursor: not-allowed; } .play-button-block-video-container { display: none; height: 100%; display: flex; align-items: center; pointer-events: none; } .play-button-block-video { display: none; margin: auto; max-height: 90vh; max-width: 90vw; pointer-events: all; } .play-button-block-video:not([data-video-provider="youtube"]) { width: auto; } .play-button-block-video.video__iframe { width: 100%; } .pswp .play-button-block-video { display: flex; justify-content: center; } .play-button-block-left { position: relative; } .play-button-block-left .image { width: 100%; } .play-button-block-left .image.aspect-ratio--portrait, .play-button-block-left .image.aspect-ratio--square, .play-button-block-left .image.aspect-ratio--landscape { width: 100px; } .play-button-block-right { margin-left: calc(4px * 5); margin-left: var(--spacing-5); } .inventory-counter.hidden { display: none; } .inventory-counter .product__label-wrapper { margin-bottom: 0; } .inventory-counter__label { margin-right: calc(4px * 3); margin-right: var(--spacing-3); } .inventory-counter__bar { display: block; height: 4px; margin-top: calc(4px * 3); margin-top: var(--spacing-3); background-color: var(--color-background-meta); } .inventory-counter__bar.hidden { display: none; } .inventory-counter[data-show-status-bar="false"] .inventory-counter__bar { display: none; } .inventory-counter__bar-progress { display: block; height: 100%; width: 100%; background-color: var(--color-products-stock-good); transition: width 0.75s ease 0.45s, background-color 0.5s ease 0.2s; } .inventory-counter[data-stock-category="low"] .inventory-counter__bar-progress { background-color: var(--color-products-stock-medium); } .inventory-counter[data-stock-category="empty"] .inventory-counter__bar-progress { background-color: var(--color-products-stock-bad); } .inventory-counter[data-stock-category="unavailable"] .inventory-counter__bar-progress { background-color: var(--color-background-meta); } .inventory-counter__message { transition: color 0.5s ease 0.2s; color: var(--color-products-stock-good); } .inventory-counter[data-stock-category="low"] .inventory-counter__message { color: var(--color-products-stock-medium); } .inventory-counter[data-stock-category="empty"] .inventory-counter__message { color: var(--color-products-stock-bad); } .inventory-counter[data-stock-category="unavailable"] .inventory-counter__message { color: var(--color-text-meta); } .product-card-mini { padding: calc(4px * 4); padding: var(--spacing-4); } .product-card-mini .product-card-mini__meta { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .product-card-mini .product-card-mini__meta .product-card-mini__price { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .product-card-mini .product-card-mini__meta .product-card-mini__price .sale { color: var(--color-products-sale-price); } .product-card-mini .product-card-mini__quick-view-button { margin: calc(4px * 3) auto 0; margin: var(--spacing-3) auto 0; } @media (max-width: 959px) { .product-card-mini.alt-layout-below-960 .product-card-mini__inner { display: flex; flex-direction: row; } .product-card-mini.alt-layout-below-960 .product-card-mini__inner .product-card-mini__meta { margin-top: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; justify-content: center; } .product-card-mini.alt-layout-below-960 .product-card-mini__inner .product-card-mini__meta .product-card-mini__quick-view-button { margin-left: 0; } .product-card-mini.alt-layout-below-960 .product-card-mini__inner .product-card-mini__image-link { flex: 0 0 80px; width: 80px; margin-right: calc(4px * 4); margin-right: var(--spacing-4); } } .mobile-drawer { position: fixed; z-index: 400; z-index: var(--z-index-popup); visibility: hidden; transition: visibility 0ms 500ms; transition: visibility 0ms var(--duration-normal); } .mobile-drawer, .mobile-drawer .mobile-drawer__overlay, .mobile-drawer .mobile-drawer__container { position: fixed; left: 0; right: 0; bottom: 0; top: 0; } .mobile-drawer.enters-upwards .mobile-drawer__container { top: auto; max-height: 75vh; border-radius: 10px 10px 0 0; } .mobile-drawer .mobile-drawer__overlay { z-index: calc(400 + 5); z-index: calc(var(--z-index-popup) + 5); background: var(--color-overlay); transition: opacity 300ms linear; opacity: 0; } .mobile-drawer .mobile-drawer__container { z-index: calc(400 + 10); z-index: calc(var(--z-index-popup) + 10); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); transform: translateY(100%); background: var(--color-background); padding: calc(4px * 7); padding: var(--spacing-7); box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.09), 0px -10px 24px rgba(0, 0, 0, 0.14); } .mobile-drawer .mobile-drawer__container .mobile-drawer__close { position: absolute; right: 0; top: 0; padding: calc(4px * 4); padding: var(--spacing-4); z-index: 10; } .mobile-drawer.active { visibility: visible; transition: visibility 0ms linear 0ms; } .mobile-drawer.active .mobile-drawer__container { transform: translateY(0); } .mobile-drawer.active .mobile-drawer__overlay { opacity: 1; } .image-hero-split-item { position: relative; width: 100%; } @media (min-width: 720px) { .image-hero-split-item { width: 50% } } .image-hero-split-item.image-hero-split-item--image-aspect-custom .image-hero-split-item__image-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; min-height: var(--custom-height-mobile); height: 100%; overflow: hidden; } @media (min-width: 720px) { .image-hero-split-item.image-hero-split-item--image-aspect-custom .image-hero-split-item__image-container { min-height: var(--custom-height) } } .image-hero-split-item.image-hero-split-item--image-aspect-custom .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; width: 100%; height: 100%; } .image-hero-split-item.image-hero-split-item--image-aspect-custom .image-hero-split-item__text-container { min-height: var(--custom-height-mobile); height: 100%; position: relative; } @media (min-width: 720px) { .image-hero-split-item.image-hero-split-item--image-aspect-custom .image-hero-split-item__text-container { min-height: var(--custom-height) } } @media (min-width: 720px) { .image-hero-split-item.image-hero-split-item--image-aspect-original.image-hero-split-item--2 .image-hero-split-item__image-container { height: 100% } } @media (min-width: 720px) { .image-hero-split-item.image-hero-split-item--image-aspect-original.image-hero-split-item--2 .image-hero-split-item__image-container .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; width: 100%; height: 100% } } @media (max-width: 719px) { .image-hero-split-item.image-hero-split-item--image-aspect-original.image-hero-split-item--2 .image-hero-split-item__image-container .placeholder-image { padding-top: 100% } } .image-hero-split-item__image { position: relative; height: 100%; } .image-hero-split-item__image.image-hero-split-item__image--mobile { display: none; } @media (max-width: 719px) { .image-hero-split-item__image.image-hero-split-item__image--mobile { display: block } } @media (max-width: 719px) { .image-hero-split-item__image.image-hero-split-item__image--mobile+.image-hero-split-item__image { display: none } } .image-hero-split-item__text-container { z-index: 1; max-width: 100%; width: 100%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; justify-content: var(--text-vertical-position); align-items: var(--text-horizontal-position); padding: var(--text-padding, calc(4px * 10) 3.3vw); text-align: var(--text-align, center); } @media (min-width: 720px) { .image-hero-split-item__text-container { padding: var(--text-padding-desktop, calc(4px * 10) calc(4px * 5)); } } body.header-transparent #main>.shopify-section:first-child .image-hero-split .image-hero-split-item__text-container { padding-top: calc(var(--height-header) + var(--spacing-10)); } .grid-item { display: block; min-height: var(--mobile-height); color: var(--color-text); } @media (min-width: 960px) { .grid-item { min-height: var(--height); padding: calc((4px * 6) / 2); padding: calc(calc(4px * 6) / 2); padding: calc(var(--grid-spacing, var(--spacing-6)) / 2) } } .grid-item.grid-item--width-100 { width: 100%; } .grid-item.grid-item--width-66 { width: 100%; } @media (min-width: 960px) { .grid-item.grid-item--width-66 { width: calc(100% * (2 / 3)) } } .grid-item.grid-item--width-50 { width: 100%; } @media (min-width: 960px) { .grid-item.grid-item--width-50 { width: 50% } } .grid-item.grid-item--width-33 { width: 100%; min-width: 290px; } @media (min-width: 960px) { .grid-item.grid-item--width-33 { width: calc(100% / 3) } } .grid-item.grid-item--width-25 { width: 100%; min-width: 220px; } @media (min-width: 960px) { .grid-item.grid-item--width-25 { width: calc(100% / 4) } } .grid-item .grid-item__image, .grid-item .image__img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-fit: var(--media-fit, cover); object-fit: var(--media-fit, cover); -o-object-position: center; object-position: center; -o-object-position: var(--focal-alignment, center); object-position: var(--focal-alignment, center); top: 0; width: 100%; height: 100%; } .grid-item.grid-item--text-center { text-align: center; } .grid-item.grid-item--text-right { text-align: right; } @media (max-width: 959px) { .grid-item+.grid-item { margin-top: calc((4px * 6) / 2); margin-top: calc(calc(4px * 6) / 2); margin-top: calc(var(--grid-spacing, var(--spacing-6)) / 2) } } .grid-item__inner { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; background-color: var(--background-color); } .grid-item__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .grid-item__image { position: relative; height: 100%; } .grid-item__image.grid-item__image--mobile { display: none; } @media (max-width: 959px) { .grid-item__image.grid-item__image--mobile { display: block } } @media (max-width: 959px) { .grid-item__image.grid-item__image--mobile+.grid-item__image { display: none } } .grid-item__text-container-wrapper { height: 100%; display: flex; justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position); padding: calc(4px * 7); padding: var(--spacing-7); } @media (min-width: 960px) { .grid-item__text-container-wrapper { padding: calc(4px * 9); padding: var(--spacing-9) } } .grid-item__text-container { max-width: 600px; z-index: 1; display: flex; flex-direction: column; align-items: var(--text-horizontal-position); } .grid-item__button { display: flex; justify-content: var(--text-horizontal-position); } .grid-item__button .btn--callout { margin-top: calc((4px * 1) * -1); margin-top: calc(calc(4px * 1) * -1); margin-top: calc(var(--spacing-1) * -1); } .grid-item__text-container-inner .grid-item__accent, .grid-item__text-container-inner .grid-item__heading, .grid-item__text-container-inner .grid-item__subheading, .grid-item__text-container-inner .grid-item__text { margin-bottom: 0; } .grid-item__text-container-inner .grid-item__accent+.grid-item__heading, .grid-item__text-container-inner .grid-item__accent+.grid-item__subheading, .grid-item__text-container-inner .grid-item__accent+.grid-item__text, .grid-item__text-container-inner .grid-item__heading+.grid-item__heading, .grid-item__text-container-inner .grid-item__heading+.grid-item__subheading, .grid-item__text-container-inner .grid-item__heading+.grid-item__text, .grid-item__text-container-inner .grid-item__subheading+.grid-item__heading, .grid-item__text-container-inner .grid-item__subheading+.grid-item__subheading, .grid-item__text-container-inner .grid-item__subheading+.grid-item__text, .grid-item__text-container-inner .grid-item__text+.grid-item__heading, .grid-item__text-container-inner .grid-item__text+.grid-item__subheading, .grid-item__text-container-inner .grid-item__text+.grid-item__text { margin-top: calc(4px * 1); margin-top: var(--spacing-1); } .button-block__inline-wrapper { display: flex; flex-wrap: wrap; margin: calc(4px * 2) calc((4px * 4) / -2); margin: calc(4px * 2) calc(calc(4px * 4) / -2); margin: var(--spacing-2) calc(var(--spacing-4) / -2); } @media (min-width: 480px) { .button-block__inline-wrapper { margin: calc(4px * 1) calc((4px * 5) / -2); margin: calc(4px * 1) calc(calc(4px * 5) / -2); margin: var(--spacing-1) calc(var(--spacing-5) / -2) } } @media (min-width: 720px) { .button-block__inline-wrapper.button-block__inline-wrapper--justify-center { justify-content: center; } .button-block__inline-wrapper.button-block__inline-wrapper--justify-right { justify-content: flex-end; } } @media (max-width: 719px) { .button-block__inline-wrapper.button-block__inline-wrapper--justify-mobile-center { justify-content: center; } .button-block__inline-wrapper.button-block__inline-wrapper--justify-mobile-right { justify-content: flex-end; } } .button-block__inline-wrapper .section-blocks__button { margin: calc((4px * 4) / 2); margin: calc(calc(4px * 4) / 2); margin: calc(var(--spacing-4) / 2); } @media (min-width: 480px) { .button-block__inline-wrapper .section-blocks__button { margin: calc((4px * 5) / 2); margin: calc(calc(4px * 5) / 2); margin: calc(var(--spacing-5) / 2) } } .button-block__button { display: flex; } @media (min-width: 720px) { .button-block__button.button-block__button--justify-center { justify-content: center; } .button-block__button.button-block__button--justify-right { justify-content: flex-end; } } @media (max-width: 719px) { .button-block__button.button-block__button--justify-mobile-center { justify-content: center; } .button-block__button.button-block__button--justify-mobile-right { justify-content: flex-end; } } .flash-alert { position: absolute; right: 0; left: 0; display: flex; justify-content: flex-end; align-items: flex-start; visibility: hidden; pointer-events: none; max-width: 1400px; max-width: var(--max-width); margin: 0 auto; padding: 0 3.3vw; padding: 0 var(--space-outer); } .flash-alert.is-visible { visibility: visible; } .flash-alert.is-visible .flash-alert__container { animation: show 4s ease 0s; } .template-password .flash-alert { position: fixed; } @keyframes show { 0% { opacity: 0; transform: translateY(calc(4px * 4)); transform: translateY(var(--spacing-4)); } 10% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 90% { opacity: 0; } } .flash-alert__container { max-width: 200px; margin-top: calc(4px * 3); margin-top: var(--spacing-3); padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); background-color: var(--color-background); color: var(--color-text); opacity: 0; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.06); box-shadow: var(--box-shadow); } .template-password .flash-alert__container { margin-top: calc(4px * 10); margin-top: var(--spacing-10); } .social-share { position: relative; display: inline-block; } .social-share__button, .btn.social-share__button { display: inline-flex; align-items: center; padding: 0; } .social-share__button .icon-share, .btn.social-share__button .icon-share { width: 20px; height: 20px; margin-top: -5px; margin-right: 6px; } .social-sharing__popup { display: none; position: absolute; width: calc(100vw - 3.3vw * 2); width: calc(100vw - var(--space-outer) * 2); max-width: 350px; padding: calc(4px * 4); padding: var(--spacing-4); border: solid 1px var(--color-border); background-color: var(--color-background); color: var(--color-text); } .social-sharing__popup[aria-hidden="false"] { display: block; z-index: 400; z-index: var(--z-index-popup); } .social-sharing--align-horizontal-center .social-sharing__popup { left: 50%; transform: translateX(-50%); } .social-sharing--align-horizontal-left .social-sharing__popup { left: 0; transform: translateX(0); } .social-sharing--align-horizontal-right .social-sharing__popup { left: auto; right: 0; transform: translateX(0); } .social-sharing--align-vertical-above .social-sharing__popup { bottom: calc(100% + (4px * 1)); bottom: calc(100% + calc(4px * 1)); bottom: calc(100% + var(--spacing-1)); } .social-sharing--align-vertical-below .social-sharing__popup { top: calc(100% + (4px * 1)); top: calc(100% + calc(4px * 1)); top: calc(100% + var(--spacing-1)); } .social-share__input-wrapper { position: relative; display: flex; border: solid 1px var(--color-border-input); background-color: var(--color-background-meta); color: var(--color-text); } .social-share__input { display: block; width: 100%; padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); padding-right: 0; border: 0; text-overflow: ellipsis; z-index: 1; transition: opacity 0.1s; } .social-sharing__popup--success .social-share__input { opacity: 0; } .social-share__copy-url { display: flex; flex: 0 0 calc(4px * 4); flex: 0 0 var(--spacing-4); padding: calc(4px * 1) 6px; padding: var(--spacing-1) 6px; z-index: 3; } .social-share__copy-url>.icon { margin: auto; } .social-share__copy-url .icon-copy { width: 20px; height: 20px; } .social-share__copy-url.hidden { display: none; } .social-share__success-message { position: absolute; top: 0; left: 0; height: 100%; padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); line-height: normal; opacity: 0; transition: opacity 0.1s; } .social-share__success-message.hidden { display: none; } .social-sharing__popup--success .social-share__success-message { opacity: 1; z-index: 2; } .social-share__icons { margin-top: calc(4px * 5); margin-top: var(--spacing-5); white-space: nowrap; } .filter-group { position: relative; margin: calc(4px * 2); margin: var(--spacing-2); border: solid 1px var(--color-border); } .filter-group.filter-group--active { z-index: 1300; z-index: var(--z-index-modal); border-color: var(--color-text); } .filter-group:hover { border-color: var(--color-text); } .filter-group__label { position: relative; display: flex; align-items: center; padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); background-color: var(--color-background); white-space: nowrap; } .filter-group__label .icon { width: 10px; height: 10px; display: flex; margin-left: calc(4px * 2); margin-left: var(--spacing-2); margin-top: 3px; transition: color 500ms cubic-bezier(0.33, 0, 0, 1), transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: color var(--duration-normal) var(--easing), transform var(--duration-normal) var(--easing); pointer-events: none; } .filter-group__label[aria-expanded="true"] { background-color: var(--color-background-meta); z-index: 4; } .filter-group__label[aria-expanded="true"] .icon { transform: rotate3d(1, 0, 0, 180deg); } .filter-group__label-count { margin-top: calc((4px * 1) * -1); margin-bottom: calc((4px * 1) * -1); margin-top: calc(calc(4px * 1) * -1); margin-bottom: calc(calc(4px * 1) * -1); margin-top: calc(var(--spacing-1) * -1); margin-bottom: calc(var(--spacing-1) * -1); margin-left: calc(4px * 2); margin-left: var(--spacing-2); padding: calc(4px * 1); padding: var(--spacing-1); background-color: var(--color-text); color: var(--color-background); font-size: var(--font-size-body-50); } .filter-group__values { display: none; position: absolute; top: calc(100% - 1px); left: -1px; max-height: 380px; min-width: max(calc(100% + 2px), 260px); border: solid 1px var(--color-text); background-color: var(--color-background); z-index: 1; overflow-x: hidden; overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 100ms cubic-bezier(0.33, 0, 0, 1), visibility 0s 100ms, pointer-events 0s 100ms; transition: opacity var(--duration-ultra-fast) var(--easing), visibility 0s var(--duration-ultra-fast), pointer-events 0s var(--duration-ultra-fast); } .filter-bar__sort-group .filter-group__values, .filter-bar__filters[aria-hidden="false"] .filter-group__values { display: block; } .filter-group__values[aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: all; transition: opacity 100ms cubic-bezier(0.33, 0, 0, 1), visibility 100ms, pointer-events 100ms; transition: opacity var(--duration-ultra-fast) var(--easing), visibility var(--duration-ultra-fast), pointer-events var(--duration-ultra-fast); } .filter-group__values.filter-group__values--right { left: auto; right: -1px; } .filter-bar__sort-group .filter-group__values { top: 100%; left: auto; right: 0; z-index: 1300; z-index: var(--z-index-modal); } .filter-group__values .filter-drawer__price-range { min-width: 270px; padding: calc(4px * 3) calc(4px * 3) calc(4px * 5); padding: var(--spacing-3) var(--spacing-3) var(--spacing-5); } .filter-group__values-header { display: flex; align-items: flex-start; justify-content: space-between; padding: calc(4px * 2) calc(4px * 3); padding: var(--spacing-2) var(--spacing-3); border-bottom: solid 1px var(--color-text); background-color: var(--color-background-meta); } .filter-group__values-active-values { flex-grow: 1; width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-group__reset, .filter-group__values-header .filter-group__reset { color: var(--color-text); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; } .filter-group__reset.active, .filter-group__values-header .filter-group__reset.active { opacity: 1; visibility: visible; pointer-events: all; } .filter-group__values-active-values+.filter-group__reset, .filter-group__values-active-values+.filter-group__values-header .filter-group__reset { margin-left: calc(4px * 2); margin-left: var(--spacing-2); } .filter-group__list { margin: 0; padding: 0; padding: calc(4px * 3); padding: var(--spacing-3); list-style: none; min-width: 180px; } .filter-group__list.filter-drawer__list--chips { display: flex; flex-wrap: wrap; min-width: 280px; } .filter-group__list.filter-drawer__list--chips[data-layout="3col"], .filter-group__list.filter-drawer__list--chips[data-layout="2col"] { display: grid; grid-gap: calc(4px * 3); grid-gap: var(--spacing-3); } .filter-group__list.filter-drawer__list--chips[data-layout="3col"] { grid-template-columns: repeat(3, 1fr); } .filter-group__list.filter-drawer__list--chips[data-layout="2col"] { grid-template-columns: repeat(2, 1fr); } .filter-group__list.filter-drawer__list--chips[data-layout="natural"] { margin-top: calc((4px * 3) * -1); margin-top: calc(calc(4px * 3) * -1); margin-top: calc(var(--spacing-3) * -1); } .filter-group__list.filter-drawer__list--chips[data-layout="natural"] .filter-item { margin-right: calc(4px * 3); margin-right: var(--spacing-3); margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .product-badges { flex-shrink: 0; display: flex; flex-wrap: wrap; white-space: nowrap; pointer-events: none; text-transform: var(--font-product-badge-text-transform); } .product-badge { display: flex; align-items: center; line-height: 1em; font-size: var(--font-size-body-20); padding: 0.3em 0.3em; background: var(--color-background); color: var(--color-text); border: 1px solid currentColor; margin-right: calc(4px * 2); margin-right: var(--spacing-2); margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); padding: 0.3em 0.3em; font-size: var(--font-size-product-badge); } .product-badge--sale { color: var(--color-text-sale-badge); } .product-badge--sold-out { background-color: var(--color-background-sold-badge); border-color: var(--color-background-sold-badge); color: var(--color-text-sold-badge); } .product-item .product-badges { z-index: 10; position: absolute; } .product-item .product-badges.product-badges--position-top { top: calc(4px * 2); top: var(--spacing-2); } .product-item .product-badges.product-badges--position-bottom { bottom: calc(4px * 2); bottom: var(--spacing-2); } .product-item .product-badges.product-badges--position-right { right: 0; justify-content: end; } .product-item .product-badges.product-badges--position-left { left: calc(4px * 2); left: var(--spacing-2); } .accordion { margin: calc(4px * 8) 0; margin: var(--spacing-8) 0; } .accordion.product-reviews.hidden { display: none; } .accordion+.accordion { margin-top: calc((calc(4px * 8) * -1) - 1px); margin-top: calc((var(--spacing-8) * -1) - 1px); margin-top: calc(calc(calc(4px * 8) * -1) - 1px); margin-top: calc(calc(var(--spacing-8) * -1) - 1px); } .accordion__inner { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .accordion__label { display: flex; gap: calc(4px * 2); gap: var(--spacing-2); width: 100%; align-items: center; justify-content: space-between; cursor: pointer; padding: calc(4px * 4) 0; padding: var(--spacing-4) 0; } .accordion__label .icon { display: flex; align-items: center; justify-content: center; } .accordion__label[aria-expanded="true"] .icon.icon-plus, .accordion__label[aria-expanded="false"] .icon.icon-minus { display: none; } .accordion__content { padding-bottom: calc(4px * 6); padding-bottom: var(--spacing-6); } .quantity-input { height: 42px; display: inline-flex; border: 1px solid var(--color-border); overflow: hidden; transition: border-color 0.3s ease-in-out; } .quantity-input:hover { border-color: var(--color-text); } .quantity-input input { width: 48px; margin: 0 calc((4px * 3) * -1); margin: 0 calc(calc(4px * 3) * -1); margin: 0 calc(var(--spacing-3) * -1); padding: 0; border: 0; overflow: visible; text-align: center; } .quantity-input input::-webkit-outer-spin-button, .quantity-input input::-webkit-inner-spin-button { -webkit-appearance: none; } .no-js .quantity-input input { margin: 0; } .has-quantity-update .quantity-input { opacity: 0.4; cursor: default; pointer-events: none; } .quantity-input__button { position: relative; height: 100%; cursor: pointer; color: var(--color-text); background-color: transparent; border: 0; transition: background-color 0.25s ease-in-out; padding: 6px calc(4px * 3); padding: 6px var(--spacing-3); z-index: 1; } .quantity-input__button:hover, .quantity-input__button:focus { background-color: var(--color-background-darker-meta-alpha); } .quantity-input__button:active { background-color: var(--color-background-darker-meta); } .quantity-input__button .icon { width: 12px; height: 12px; } .has-quantity-update .quantity-input__button { cursor: default; pointer-events: none; } .no-js .quantity-input__button { display: none; } .free-shipping-bar { position: relative; padding: calc(4px * 3); padding: var(--spacing-3); width: 100%; } .free-shipping-bar.free-shipping-bar--loaded .inventory-counter__message-wrapper { visibility: visible; } .free-shipping-bar:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-text); opacity: 0.04; pointer-events: none; } .free-shipping-bar.free-shipping-bar--success { padding-top: calc(4px * 2); padding-top: var(--spacing-2); padding-bottom: calc(4px * 2); padding-bottom: var(--spacing-2); } .free-shipping-bar.free-shipping-bar--success:after { background-color: var(--color-text-success); opacity: 0.08; } .free-shipping-bar.free-shipping-bar--success .inventory-counter__message-wrapper { color: var(--color-text-success); } .free-shipping-bar.free-shipping-bar--success .free-shipping-bar__bar { display: none; } .inventory-counter__message-wrapper { display: flex; justify-content: center; color: var(--color-text); visibility: hidden; } .inventory-counter__message-wrapper .icon { width: 1.25em; height: 1.25em; margin-top: 3px; margin-right: 10px; } .free-shipping-bar__bar { position: relative; height: 4px; width: 100%; margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .free-shipping-bar__bar:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-text); opacity: 0.1; } .free-shipping-bar__bar-progress { height: 4px; width: 0; width: var(--progress-width, 0); background-color: var(--color-text); position: absolute; left: 0; transition: width 0.2s ease; } .border-block { height: 1px; width: 100%; background-color: var(--color-text); } .sale-promotion { display: inline-block; } .sale-promotion__sale { display: flex; flex-direction: column; align-items: flex-start; } .sale-promotion__sale-grid { display: grid; grid-template-columns: auto auto; font-size: 150px; font-size: var(--promotion-amount-text-size-mobile, 150px); } @media (min-width: 720px) { .sale-promotion__sale-grid { font-size: 150px; font-size: var(--promotion-amount-text-size, 150px) } } .sale-promotion--per_month .sale-promotion__sale-grid, .sale-promotion--per_year .sale-promotion__sale-grid { grid-template-columns: auto auto auto; } .sale-promotion__type { display: block; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .sale-promotion__amount { line-height: 0.9; font-size: 150px; font-size: var(--promotion-amount-text-size-mobile, 150px); } @media (min-width: 720px) { .sale-promotion__amount { font-size: 150px; font-size: var(--promotion-amount-text-size, 150px) } } .sale-promotion__unit-currency { align-self: flex-start; font-size: 0.3em; line-height: 1; } .sale-promotion__unit { display: flex; flex-direction: column; justify-content: center; width: -moz-min-content; width: min-content; margin-left: calc(4px * 3); margin-left: var(--spacing-3); font-size: 0.3em; line-height: 1; text-align: center; } .sale-promotion__unit.sale-promotion__unit--per_month, .sale-promotion__unit.sale-promotion__unit--per_year { align-self: flex-start; font-size: 0.3em; } .sale-promotion__unit-percent { font-size: 1.2em; } .sale-promotion__terms { margin-top: 0px; margin-top: var(--terms-vertical-offset, 0px); } .search-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: calc(4px * 4) calc(4px * 3); padding: var(--spacing-4) var(--spacing-3); background-color: var(--color-background-meta); z-index: var(--z-index-item); } @media (min-width: 480px) { .search-item { padding: calc(4px * 6); padding: var(--spacing-6) } } .search-item__image-wrapper { display: block; width: 100%; position: relative; } .search-item__meta { margin-top: auto; margin-bottom: calc(4px * 12); margin-bottom: var(--spacing-12); } .search-item__image-wrapper+.search-item__meta { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .search-item__link.btn { margin: calc(4px * 4) 0 calc(4px * 3); margin: var(--spacing-4) 0 var(--spacing-3); font-size: var(--font-size-body-75); } .search-item__type { margin-top: auto; padding: calc(4px * 1) calc(4px * 4); padding: var(--spacing-1) var(--spacing-4); border: solid 1px var(--color-border); border-radius: 40px; background-color: var(--color-background); } [data-scroll-container] { overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; } [data-scroll-container]::-webkit-scrollbar { display: none; } [data-scroll-container] [data-scroll-container-viewport] { -ms-overflow-style: none; scrollbar-width: none; } [data-scroll-container] .scroll-sentinal { pointer-events: none; opacity: 0; flex-shrink: 0; } [data-scroll-container] .scroll-button { height: 100%; width: 30px; background-color: var(--color-background); position: absolute; z-index: 10; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); display: flex; align-items: center; justify-content: center; } [data-scroll-container] .scroll-button .icon { width: 16px; height: 16px; opacity: 0.5; } [data-scroll-container] .scroll-button:hover:not(:active) .icon { opacity: 1; } [data-scroll-container][data-axis="horizontal"] { display: flex; } [data-scroll-container][data-axis="horizontal"] .scroll-sentinal { width: 1px; height: 100%; } [data-scroll-container][data-axis="horizontal"] [data-scroll-container-viewport] { overflow-x: auto; overflow-y: hidden; } [data-scroll-container][data-axis="horizontal"] .scroll-button { height: 100%; width: 30px; } [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="start"] { box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.09); left: 0; } [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="start"] .icon { transform: rotate(90deg); } [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="end"] { box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.09); right: 0; } [data-scroll-container][data-axis="horizontal"] .scroll-button[data-position="end"] .icon { transform: rotate(-90deg); } [data-scroll-container][data-axis="vertical"] [data-scroll-container-viewport] { overflow-y: auto; overflow-x: hidden; } [data-scroll-container][data-axis="vertical"] .scroll-button { width: 100%; height: 30px; } [data-scroll-container][data-axis="vertical"] .scroll-button[data-position="start"] { box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.09); top: 0; } [data-scroll-container][data-axis="vertical"] .scroll-button[data-position="start"] .icon { transform: rotate(180deg); } [data-scroll-container][data-axis="vertical"] .scroll-button[data-position="end"] { box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.09); bottom: 0; } [data-scroll-container][data-at-start="true"] .scroll-button[data-position="start"], [data-scroll-container][data-at-end="true"] .scroll-button[data-position="end"] { opacity: 0; pointer-events: none; } [data-scroll-container-viewport] { scroll-behavior: smooth; } [data-start-at-end="true"] [data-scroll-container-viewport] { scroll-behavior: unset; } [data-scroll-container-viewport] { -ms-overflow-style: none; scrollbar-width: none } [data-scroll-container-viewport]::-webkit-scrollbar { display: none; } .slideshow-slide { width: 100%; color: var(--color-text); text-align: var(--text-alignment-mobile); } @media (min-width: 720px) { .slideshow-slide { text-align: var(--text-alignment) } } .slideshow-slide__inner { position: relative; } .slideshow-slide__image { position: relative; height: 100%; } @media (min-width: 720px) { .slideshow-slide__image.slideshow-slide__image--mobile { display: none } } @media (max-width: 719px) { .slideshow-slide__image.slideshow-slide__image--mobile+.slideshow-slide__image { display: none } } .slideshow-slide__image-link, .slideshow-slide__overlay, .slideshow-slide__text-container-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .user-is-tabbing .slideshow-slide__image-link:focus { outline-offset: -10px; outline-width: medium; } .slideshow-slide__overlay { background: var(--overlay-background-gradient, var(--overlay-background)); opacity: var(--overlay-opacity); } .slideshow-slide__text-container-wrapper { display: flex; justify-content: var(--text-horizontal-position-mobile); align-items: var(--text-vertical-position-mobile); max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); margin: 0 auto; padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); } @media (min-width: 720px) { .slideshow-slide__text-container-wrapper { justify-content: var(--text-horizontal-position); align-items: var(--text-vertical-position) } } .slideshow--has-navigation .slideshow-slide__text-container-wrapper { padding: calc(4px * 10) 3.3vw calc((4px * 18) + var(--slideshow-navigation-height)); padding: calc(4px * 10) 3.3vw calc(calc(4px * 18) + var(--slideshow-navigation-height)); padding: var(--spacing-10) var(--space-outer) calc(var(--spacing-8) + var(--slideshow-navigation-height)); } body.header-transparent #main>.shopify-section:first-child .slideshow .slideshow-slide__text-container-wrapper { padding-top: calc(var(--height-header) + (4px * 10)); padding-top: calc(var(--height-header) + calc(4px * 10)); padding-top: calc(var(--height-header) + var(--spacing-10)); } .slideshow-slide__text-container { max-width: 600px; display: flex; flex-direction: column; justify-content: var(--text-horizontal-position-mobile); } @media (min-width: 720px) { .slideshow-slide__text-container { align-items: var(--text-horizontal-position) } } .slideshow-slide__text-container-inner { z-index: 1; } .slideshow-navigation { z-index: 1; position: absolute; right: 0; bottom: calc(4px * 8); bottom: var(--spacing-8); left: 0; max-width: calc(1400px + (3.3vw * 2)); max-width: calc(var(--max-width) + (var(--space-outer) * 2)); max-width: calc(1400px + calc(3.3vw * 2)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 2)); display: flex; margin: 0 auto; padding-right: 3.3vw; padding-right: var(--space-outer); padding-left: 3.3vw; padding-left: var(--space-outer); } .slideshow-navigation.slideshow-navigation--align-center { justify-content: center; } .slideshow-navigation.slideshow-navigation--align-right { justify-content: flex-end; } .slideshow-navigation.slideshow-navigation--hide-autoplay .slideshow-navigation__dots .slideshow-navigation__dot.slideshow-navigation__dot--active:after { background-color: var(--color-foreground); } .slideshow-navigation.slideshow-navigation--hide-autoplay .slideshow-navigation__dots .slideshow-navigation__dot.slideshow-navigation__dot--active:before { display: none; } .slideshow-navigation.slideshow-navigation--hide-autoplay .slideshow-navigation__dots .slideshow-navigation__dot .slideshow-navigation__dot-loader { display: none; } .slideshow-navigation__inner { display: flex; } .slideshow-navigation__navigation-button { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: var(--slideshow-navigation-height); width: var(--slideshow-navigation-height); color: var(--color-foreground); background-color: var(--color-background); border-radius: 100%; transition: background-color 0.2s ease, color 0.2s ease; } .slideshow-navigation__navigation-button .icon { display: flex; width: 14px; height: 14px; transition: opacity 0.2s ease; } .user-is-tabbing .slideshow-navigation__navigation-button:focus .icon, .slideshow-navigation__navigation-button:hover .icon { opacity: 0.6; } .slideshow-navigation__navigation-button--previous { transform: rotate(90deg); } .slideshow-navigation__navigation-button--previous .icon { margin-top: 1px; } .slideshow-navigation__navigation-button--next { transform: rotate(-90deg); } .slideshow-navigation__navigation-button--next .icon { margin-top: 1px; } .slideshow-navigation__dots { display: flex; align-items: center; height: var(--slideshow-navigation-height); padding: 0 2px; padding: 0 var(--spacing-unit-half); margin: 0 calc(4px * 2); margin: 0 var(--spacing-2); background-color: var(--color-background); border-radius: 40px; transition: background-color 0.2s ease; } .slideshow-navigation__dot { position: relative; padding: calc(4px * 3); padding: var(--spacing-3); opacity: 0.4; border-radius: 100%; transition: opacity 0.2s ease; } .slideshow-navigation__dot:after { content: ""; width: 8px; height: 8px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--color-foreground); border-radius: 100%; transition: background-color 0.2s ease; } .slideshow-navigation__dot:hover, .slideshow-navigation__dot:focus { opacity: 1; } .slideshow-navigation__dot.slideshow-navigation__dot--active { opacity: 1; pointer-events: none; background-color: transparent; } .slideshow-navigation__dot.slideshow-navigation__dot--active:after { background-color: transparent; transition: background-color 0s ease; } .slideshow-navigation__dot.slideshow-navigation__dot--active:before { content: ""; width: 16px; height: 16px; position: absolute; border: 2px solid var(--color-foreground-transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; border-radius: 100%; transition: border-color 0.2s ease; } .slideshow-navigation__dot.slideshow-navigation__dot--active .slideshow-navigation__dot-loader { display: block; } .slideshow-navigation__dot-loader { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid var(--color-foreground); border-radius: 50%; width: 16px; height: 16px; transition: border-color 0.2s ease; animation: load-spinner-fill linear calc(var(--animation-timing) * 1ms); } @keyframes load-spinner-fill { 0% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); } 12.5% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); } 25% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 120.71% 50%, 100% 0%); } 37.5% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 0%); } 50% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 50% 120.71%, 50% 120.71%, 50% 120.71%, 100% 100%, 100% 0%); } 62.5% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 0% 100%, 0% 100%, 0% 100%, 100% 100%, 100% 0%); } 75% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, -20.71% 50%, -20.71% 50%, 0% 100%, 100% 100%, 100% 0%); } 87.5% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 0%); } 100% { -webkit-clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -20.71%, 50% 50%, 50% -20.71%, 0% 0%, 0% 100%, 100% 100%, 100% 0%); } } .countdown-timer { margin: calc(4px * 6) 0; margin: var(--spacing-6) 0; opacity: 0; } .countdown-timer.active { opacity: 1; } .countdown-timer.countdown-timer--small { margin: calc(4px * 2) 0; margin: var(--spacing-2) 0; } @media (min-width: 480px) { .countdown-timer.countdown-timer--small { margin: 0 } } .countdown-timer__inner { display: flex; justify-content: center; align-items: center; } .hide .countdown-timer__inner { display: none; } .countdown-timer--small.complete .countdown-timer__inner { margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .countdown-timer__item { text-align: center; } .countdown-timmer__amount { position: relative; margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); padding: 0 calc(4px * 4); padding: 0 var(--spacing-4); font-size: var(--font-size-heading-1-base); line-height: 1; } .countdown-timer--small .countdown-timmer__amount { padding: 0 calc(4px * 4); padding: 0 var(--spacing-4); font-size: var(--font-size-heading-3-base); } .countdown-timer__item+.countdown-timer__item .countdown-timmer__amount::before { content: ""; position: absolute; top: 25%; left: 0; bottom: 25%; display: block; width: 1px; background-color: var(--color-text); opacity: 0.66; } @media (min-width: 480px) { .countdown-timmer__amount { margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); padding: 0 calc(4px * 4); padding: 0 var(--spacing-4); font-size: var(--font-size-heading-display-1) } .countdown-timer--small .countdown-timmer__amount { margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); padding: 0 calc(4px * 4); padding: 0 var(--spacing-4); font-size: var(--font-size-heading-2-base); } } @media (min-width: 720px) { .countdown-timmer__amount { padding: 0 calc(4px * 8); padding: 0 var(--spacing-8) } .countdown-timer--small .countdown-timmer__amount { padding: 0 calc(4px * 6); padding: 0 var(--spacing-6); } } @media (min-width: 960px) { .countdown-timmer__amount { padding: 0 calc(4px * 12); padding: 0 var(--spacing-12) } } .countdown-timer__type, .countdown-timer__type.fs-accent { padding: 0 calc(4px * 1); padding: 0 var(--spacing-1); text-transform: uppercase; font-size: var(--font-size-body-20); } @media (min-width: 480px) { .countdown-timer__type, .countdown-timer__type.fs-accent { font-size: var(--font-size-body-50) } } .countdown-timer__message { display: none; text-align: center; } .countdown-timer--small .countdown-timer__message { margin-top: 0; margin-bottom: 0; } .complete .countdown-timer__message { display: block; } .newsletter-form__inner { position: relative; } .newsletter-form__input, .newsletter-form__input.input { margin-top: 0; } .newsletter-form__button { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .popup { --popup-width-small: 450px; --popup-width-medium: 550px; --popup-width-large: 650px; --popup-width-image-adjacent-small: 620px; --popup-width-image-adjacent-medium: 720px; --popup-width-image-adjacent-large: 820px; --popup-image-above-height: 200px; --popup-image-above-height-mobile: 150px; z-index: 400; z-index: var(--z-index-popup); visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; transition: visibility 0s 500ms; transition: visibility 0s var(--duration-normal); } .popup .form-status__message--success { width: 100%; margin-bottom: 0; } .popup.visible { visibility: visible; transition: visibility 0s 0s; } .popup.visible.popup--popup .popup__wash, .popup.visible.popup--age .popup__wash { opacity: 1; pointer-events: all; cursor: pointer; } .popup.visible.popup--age .popup__wash { cursor: default; } @media (max-width: 719px) { .popup.visible.popup--flyout .popup__wash { position: fixed; pointer-events: all; cursor: pointer } } .popup.visible .popup__content { opacity: 1; } .popup.popup--popup, .popup.popup--age { padding: calc(4px * 3); padding: var(--spacing-3); z-index: 1300; z-index: var(--z-index-modal); } .popup.popup--popup .popup__content, .popup.popup--age .popup__content { position: relative; margin: auto; } @media (max-width: 719px) { .popup.popup--popup.popup--hide-image-on-mobile:not(.popup--image-position-background) .popup__image, .popup.popup--age.popup--hide-image-on-mobile:not(.popup--image-position-background) .popup__image { display: none } } @media (max-width: 719px) { .popup.popup--popup.popup--image-is-adjacent .popup__content-inner, .popup.popup--popup.popup--image-position-top .popup__content-inner, .popup.popup--age.popup--image-is-adjacent .popup__content-inner, .popup.popup--age.popup--image-position-top .popup__content-inner { overflow-y: auto; max-height: calc(var(--vh) * 90); } .popup.popup--popup.popup--image-position-background .popup__text-container, .popup.popup--age.popup--image-position-background .popup__text-container { overflow-y: auto; max-height: calc(var(--vh) * 90); } } .popup.popup--flyout { top: auto; } .popup.popup--flyout .popup__content { width: 100%; bottom: 0; } @media (min-width: 720px) { .popup.popup--flyout .popup__content { max-width: var(--popup-width-small); margin: 0 calc(4px * 7); margin: 0 var(--spacing-7) } } @media (min-width: 720px) { .popup.popup--flyout .popup__text-container { padding-right: calc(4px * 9); padding-right: var(--spacing-9); padding-left: calc(4px * 9); padding-left: var(--spacing-9) } } @media (min-width: 720px) { .popup.popup--flyout.popup--flyout-position-right .popup__content { right: 0 } } .popup.popup--size-small .popup__content { max-width: var(--popup-width-small); } .popup.popup--size-medium .popup__content { max-width: var(--popup-width-medium); } .popup.popup--size-large .popup__content { max-width: var(--popup-width-large); } @media (max-width: 719px) { .popup.popup--has-image.popup--image-is-adjacent .popup__image { height: var(--popup-image-above-height-mobile) } } .popup.popup--has-image.popup--image-position-top .popup__image { height: var(--popup-image-above-height-mobile); } @media (min-width: 720px) { .popup.popup--has-image.popup--image-position-top .popup__image { height: var(--popup-image-above-height) } } @media (min-width: 720px) { .popup.popup--has-image.popup--image-is-adjacent .popup__content-inner { display: flex } } @media (min-width: 720px) { .popup.popup--has-image.popup--image-is-adjacent .popup__image { width: 36%; height: auto } } @media (min-width: 720px) { .popup.popup--has-image.popup--image-is-adjacent .popup__text-container { flex: 1 0 64%; width: 64% } } .popup.popup--has-image.popup--image-is-adjacent.popup--image-position-right .popup__image { order: 2; } .popup.popup--size-small.popup--image-is-adjacent.popup--size-small .popup__content { max-width: var(--popup-width-image-adjacent-small); } .popup.popup--has-image.popup--image-is-adjacent.popup--size-medium .popup__content { max-width: var(--popup-width-image-adjacent-medium); } .popup.popup--has-image.popup--image-is-adjacent.popup--size-large .popup__content { max-width: var(--popup-width-image-adjacent-large); } .popup__wash { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } .popup__content { z-index: 2; width: 100%; opacity: 0; color: var(--color-text); background-color: var(--color-background); transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); position: absolute; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.09)) drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.14)); } .popup__content-inner { width: 100%; color: var(--color-text); text-align: var(--text-alignment); background-color: var(--color-background); } .popup__dismiss-icon { position: absolute; top: calc(4px * 2); top: var(--spacing-2); right: calc(4px * 2); right: var(--spacing-2); display: flex; align-items: center; justify-content: center; padding: calc(4px * 2); padding: var(--spacing-2); border-radius: 50%; z-index: 1; } .popup--image-position-right .popup__dismiss-icon, .popup--image-position-top .popup__dismiss-icon { background-color: var(--color-background); } @media (max-width: 719px) { .popup--has-image:not(.popup--hide-image-on-mobile):not(.popup--image-position-background) .popup__dismiss-icon { background-color: var(--color-background); } } .popup__dismiss-icon .icon { width: 15px; height: 15px; } .popup__text-container { position: relative; padding: calc(4px * 12) calc(4px * 6) calc(4px * 6); padding: var(--spacing-12) var(--spacing-6) var(--spacing-6); } @media (min-width: 720px) { .popup__text-container { padding: calc(4px * 12) calc(4px * 10) calc(4px * 9); padding: var(--spacing-12) var(--spacing-10) var(--spacing-9) } } .popup__image { position: relative; } .popup__image::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--overlay-background); opacity: var(--overlay-opacity); } .popup--flyout .popup__image, .popup--image-position-background .popup__image { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; top: 0; left: 0; width: 100%; height: 100%; } .popup__countdown { margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8); } .popup__countdown .countdown-timer { margin: 0; } .popup__heading+.popup__countdown { margin-top: calc(4px * 8); margin-top: var(--spacing-8); } .popup__accent+.popup__heading, .popup__accent+.popup__subheading { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .popup__accent+.popup__text, .popup__heading+.popup__text, .popup__subheading+.popup__text { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .popup__button, .popup__newsletter { margin-top: calc(4px * 8); margin-top: var(--spacing-8); } .popup__newsletter .input { color: var(--color-text-input); background-color: var(--color-background-input); } .popup__dismiss-text { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .popup__footer-text { margin-top: calc(4px * 6); margin-top: var(--spacing-6); } .popup__social { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .popup__tab { position: fixed; display: none; background-color: var(--color-background); color: var(--color-text); visibility: hidden; opacity: 0; pointer-events: none; filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.09)) drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.14)); transition: visibility 0s 500ms, opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s var(--duration-normal), opacity var(--duration-normal) var(--easing); } html.theme-editor .popup__tab { z-index: 1300; z-index: var(--z-index-modal); } .popup__tab.popup__tab--enabled { display: flex; } .popup__tab.visible { visibility: visible; opacity: 1; pointer-events: all; transition: visibility 0s 0s, opacity 500ms cubic-bezier(0.33, 0, 0, 1), bottom 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s 0s, opacity var(--duration-normal) var(--easing), bottom var(--duration-normal) var(--easing); } .popup__tab.popup__tab-position--left_center { top: 50%; left: 0; transform-origin: bottom left; transform: rotate(90deg) translateX(-100%); } .popup__tab.popup__tab-position--left_bottom { bottom: 0; bottom: var(--sticky-atc-bar-height, 0); left: 0; transform-origin: bottom left; transform: rotate(90deg) translateX(-100%); } .popup__tab.popup__tab-position--right_center { top: 50%; right: 0; transform-origin: bottom right; transform: rotate(-90deg) translateX(100%); } .popup__tab.popup__tab-position--right_bottom { bottom: 0; bottom: var(--sticky-atc-bar-height, 0); right: 0; transform-origin: bottom right; transform: rotate(-90deg) translateX(100%); } .popup__tab.popup__tab-position--bottom_left { bottom: 0; bottom: var(--sticky-atc-bar-height, 0); left: 0; } .popup__tab.popup__tab-position--bottom_left_floating { bottom: calc(0px + (4px * 2)); bottom: calc(0px + calc(4px * 2)); bottom: calc(var(--sticky-atc-bar-height, 0px) + var(--spacing-2)); left: calc(4px * 2); left: var(--spacing-2); } .popup__tab.popup__tab-position--bottom_center { bottom: 0; bottom: var(--sticky-atc-bar-height, 0); left: 50%; transform: translateX(-50%); } .popup__tab.popup__tab-position--bottom_right { bottom: 0; bottom: var(--sticky-atc-bar-height, 0); right: 0; } .popup__tab.popup__tab-position--bottom_right_floating { bottom: calc(0px + (4px * 2)); bottom: calc(0px + calc(4px * 2)); bottom: calc(var(--sticky-atc-bar-height, 0px) + var(--spacing-2)); right: calc(4px * 2); right: var(--spacing-2); } .popup__tab-button { padding: calc(4px * 2) calc(4px * 4); padding: var(--spacing-2) var(--spacing-4); padding-right: calc(4px * 2); padding-right: var(--spacing-2); } .popup__tab-dismiss { display: flex; align-items: center; justify-content: center; padding: calc(4px * 4); padding: var(--spacing-4); } .popup__tab-dismiss .icon { width: 15px; height: 15px; } .back-to-top { position: fixed; bottom: calc(0px + (4px * 4)); bottom: calc(0px + calc(4px * 4)); bottom: calc(var(--sticky-atc-bar-height, 0px) + var(--spacing-4)); display: flex; opacity: 0; visibility: hidden; pointer-events: none; z-index: 1300; z-index: var(--z-index-modal); transition: visibility 0s 500ms, opacity 500ms cubic-bezier(0.33, 0, 0, 1), bottom 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s var(--duration-normal), opacity var(--duration-normal) var(--easing), bottom var(--duration-normal) var(--easing); } .back-to-top.visible { opacity: 1; visibility: visible; transition: visibility 0s 0s, opacity 500ms cubic-bezier(0.33, 0, 0, 1), bottom 500ms cubic-bezier(0.33, 0, 0, 1); transition: visibility 0s 0s, opacity var(--duration-normal) var(--easing), bottom var(--duration-normal) var(--easing); } .back-to-top.back-to-top--bottom-left { left: calc(4px * 4); left: var(--spacing-4); right: auto; } .back-to-top.back-to-top--bottom-center { left: 0; right: 0; } .back-to-top.back-to-top--bottom-center .back-to-top__button { margin: auto; } .back-to-top.back-to-top--bottom-right { right: calc(4px * 4); right: var(--spacing-4); } .back-to-top__button { display: flex; padding: calc(4px * 3); padding: var(--spacing-3); background-color: var(--color-background); color: var(--color-text); border-radius: 100%; pointer-events: all; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.2)); } .back-to-top__button .icon { width: 15px; height: 15px; transform: rotate(180deg); } .skeleton { position: relative; width: 50%; height: 25px; background-color: hsla(0, 0%, 96%, 1); overflow: hidden; } .skeleton.skeleton--medium { width: 75%; height: 33px; } .skeleton.skeleton--large { width: 100%; height: 38px; } .skeleton.skeleton--image { display: block; width: 100%; padding-top: 100%; } .skeleton.skeleton--image.skeleton--image-landscape { padding-top: calc((2 / 3) * 100%); } .skeleton.skeleton--image.skeleton--image-portrait { padding-top: calc((3 / 2) * 100%); } .cross-sells { position: relative; padding-top: calc(4px * 7); padding-top: var(--spacing-7); margin-bottom: calc(4px * 5); margin-bottom: var(--spacing-5); } .cart__footer .cross-sells { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .cart__form-items .cross-sells { margin-top: 0; padding-top: calc(4px * 9); padding-top: var(--spacing-9); border-top: 1px solid var(--color-border); } .cart__footer .cross-sells .cross-sells__items, .cart__form-items .cross-sells .cross-sells__items { display: grid; grid-row-gap: calc(4px * 3); grid-row-gap: var(--spacing-3); row-gap: calc(4px * 3); row-gap: var(--spacing-3); } @media (max-width: 959px) { .cart__footer .cross-sells .cross-sells__items, .cart__form-items .cross-sells .cross-sells__items { margin-bottom: calc(4px * 9); margin-bottom: var(--spacing-9) } } .cross-sells .cross-sells__items { margin-top: calc(4px * 3); margin-top: var(--spacing-3); } .cross-sells .slider-nav-button { display: flex; opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); padding: calc(4px * 2); padding: var(--spacing-2); align-items: center; border-radius: 50%; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.09); background-color: white; z-index: 1; transition: opacity 0.25s ease-in-out; } .cross-sells .slider-nav-button.swiper-button-disabled { display: none; } @media (min-width: 720px) { .cross-sells:hover .slider-nav-button { opacity: 1 } } .cross-sells .slider-nav-button-prev { left: calc(4px * 1); left: var(--spacing-1); } .cross-sells .slider-nav-button-prev .icon { transform: rotate(90deg); } .cross-sells .slider-nav-button-next { right: calc(4px * 1); right: var(--spacing-1); } .cross-sells .slider-nav-button-next .icon { transform: rotate(-90deg); } .cross-sells .icon { height: 16px; width: 16px; } .cross-sells__item { display: flex; align-items: center; height: auto; padding: calc(4px * 2); padding: var(--spacing-2); background-color: var(--color-background-meta); } @media (min-width: 720px) { .cross-sells__item { padding: calc(4px * 4); padding: var(--spacing-4) } } .cross-sells__item-image { margin-right: calc(4px * 4); margin-right: var(--spacing-4); width: 64px; flex-shrink: 0; } @media (min-width: 720px) { .cart-section .cross-sells__item-image { width: 80px } } .cross-sells__item-content { display: flex; flex-direction: column; width: 100%; } @media (min-width: 480px) { .cross-sells__item-content { flex-direction: row; align-items: center } } .cross-sells__item-details { margin-right: calc(4px * 4); margin-right: var(--spacing-4); width: 100%; } .cart__form-items .cross-sells__heading { font-size: var(--font-size-heading-4-base); } .cart__footer .cross-sells__heading { font-size: var(--font-size-heading-5-base); } .cross-sells__item-price-wrapper { display: flex; flex-wrap: wrap; } .cross-sells__item-price-wrapper .sale { color: var(--color-products-sale-price); } .cross-sells__item-price-wrapper .t-subdued { margin-right: calc(4px * 1); margin-right: var(--spacing-1); } @media (max-width: 719px) { .cross-sells__item-price-wrapper { font-size: var(--font-size-body-60) } } .cross-sells__item-button { width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; background-color: var(--color-background); transition: background-color 0.25s ease-in-out; } .cross-sells__item-button:hover, .cross-sells__item-button:focus { border-color: var(--color-text); background-color: var(--color-background-darker-meta-alpha); } @media (max-width: 479px) { .cross-sells__item-button { margin-top: calc(4px * 2); margin-top: var(--spacing-2) } } @media (min-width: 720px) { .cart__form-items .cross-sells__item-button button { min-height: var(--button-height-small); padding: var(--button-padding-small); font-size: var(--font-size-button) } } .cross-sells__item-button .btn__loading-wrap { width: 60%; } .cross-sells__item-add { width: -moz-max-content; width: max-content; } .cross-sells__text-add, .cross-sells__text-add-to-cart { pointer-events: none; } @media (min-width: 720px) { .cart__form-items .cross-sells__text-add { display: none } } .cross-sells__text-add-to-cart { display: none; } @media (min-width: 720px) { .cart__form-items .cross-sells__text-add-to-cart { display: block } } .product-block-secure-payment--center { text-align: center; } .product-block-secure-payment--center * { justify-content: center; } .product-block-secure-payment__label { margin: calc(4px * 1) 0; margin: var(--spacing-1) 0; } .product-block-secure-payment__text { margin: calc(4px * 1) 0; margin: var(--spacing-1) 0; } .product-block-secure-payment__text p a { -webkit-text-decoration: underline; text-decoration: underline; } .product-block-secure-payment__trust-image { display: inline-flex; margin: 0 0 calc(4px * 4) 0; margin: 0 0 var(--spacing-4) 0; padding: var(--image-padding); max-width: var(--image-size); } .product-rating { display: inline-flex; align-items: center; } .product-rating__stars { display: flex; color: var(--color-products-rating-star); } .product-rating__stars .icon { margin: 1px; margin-right: 2px; display: flex; } .product-rating__stars .icon, .product-rating__stars .icon svg { width: 12px; height: 12px; } .product-rating__count { margin-left: 2px; margin-top: 2px; } .sticky-atc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; z-index: var(--z-index-bar); background-color: var(--color-background); transform: translateY(0); visibility: visible; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), visibility 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), visibility var(--duration-normal) var(--easing); } .sticky-atc-bar:before { content: ""; position: absolute; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; } .sticky-atc-bar[data-divider-style="border--thin"]:before { box-shadow: 0px 1px 0px currentColor inset; } .sticky-atc-bar[data-divider-style="border--thick"]:before { box-shadow: 0px 2px 0px currentColor inset; } .sticky-atc-bar[data-divider-style="shadow--small"]:before { box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15); } .sticky-atc-bar[data-divider-style="shadow--large"]:before { box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.15); } @media (min-width: 960px) { .sticky-atc-bar[data-show-desktop="false"] { height: 0; visibility: hidden } } @media (max-width: 959px) { .sticky-atc-bar[data-show-mobile="false"] { height: 0; visibility: hidden } } .sticky-atc-bar__inner { display: flex; flex-direction: column; align-items: center; margin-right: auto; margin-left: auto; padding: calc(4px * 3); padding: var(--spacing-3); gap: calc(4px * 3); gap: var(--spacing-3); } @media (min-width: 960px) { .sticky-atc-bar__inner { max-width: min(1400px, calc(100% - 3.3vw - 3.3vw)); max-width: min(var(--max-width), calc(100% - var(--space-outer) - var(--space-outer))); flex-direction: row; padding: calc(4px * 3) 0; padding: var(--spacing-3) 0; gap: calc(4px * 5); gap: var(--spacing-5) } } .sticky-atc-bar__details { display: flex; flex-grow: 1; width: 100%; -moz-column-gap: calc(4px * 5); column-gap: calc(4px * 5); -moz-column-gap: var(--spacing-5); column-gap: var(--spacing-5); align-items: center; } .sticky-atc-bar__details .sticky-atc-bar__price { flex-direction: column; flex-grow: 1; align-content: flex-end; -moz-column-gap: calc(4px * 2); column-gap: calc(4px * 2); -moz-column-gap: var(--spacing-2); column-gap: var(--spacing-2); } @media (min-width: 960px) { .sticky-atc-bar__details .sticky-atc-bar__price { flex-direction: row; justify-content: flex-end } } .sticky-atc-bar__details .sticky-atc-bar__price s { margin: 0; } .sticky-atc-bar__media { display: none; width: 50px; flex-shrink: 0; } @media (min-width: 960px) { .sticky-atc-bar__media { display: block } } .sticky-atc-bar__meta-options { margin-right: calc(4px * 1); margin-right: var(--spacing-1); } .sticky-atc-bar__meta-change-option-trigger { color: var(--color-text-link); -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.25s; } .sticky-atc-bar__meta-change-option-trigger:hover { opacity: 0.6; } .sticky-atc-bar__button { display: flex; align-items: center; width: 100%; } @media (min-width: 960px) { .sticky-atc-bar__button { width: 225px } } .ff-body { font-family: var(--font-body); font-weight: var(--font-body-weight); font-style: var(--font-body-style); line-height: var(--line-height-body); letter-spacing: var(--font-body-base-letter-spacing); } .ff-heading { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-style: var(--font-heading-style); letter-spacing: var(--font-heading-base-letter-spacing); text-transform: var(--font-heading-text-transform); } .ff-subheading { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-style: var(--font-heading-style); line-height: var(--line-height-subheading); letter-spacing: var(--font-body-base-letter-spacing); } .fs-product-title { text-transform: var(--font-product-listing-title-text-transform); letter-spacing: var(--font-product-listing-title-base-letter-spacing); } .fs-accent { font-size: var(--font-size-body-50); text-transform: uppercase; letter-spacing: 0.05em; } .fs-product-card-title { font-size: var(--font-size-listing-title); text-transform: var(--font-product-listing-title-text-transform); letter-spacing: var(--font-product-listing-title-base-letter-spacing); } .fs-heading-display-1, .fs-heading-display-2, .fs-heading-display-3, .fs-heading-1-base, .fs-heading-2-base, .fs-heading-3-base, .fs-heading-4-base, .fs-heading-5-base, .fs-heading-6-base { line-height: var(--line-height-heading); } .fs-heading-display-1.lh-subheading, .fs-heading-display-1.ff-subheading, .fs-heading-display-2.lh-subheading, .fs-heading-display-2.ff-subheading, .fs-heading-display-3.lh-subheading, .fs-heading-display-3.ff-subheading, .fs-heading-1-base.lh-subheading, .fs-heading-1-base.ff-subheading, .fs-heading-2-base.lh-subheading, .fs-heading-2-base.ff-subheading, .fs-heading-3-base.lh-subheading, .fs-heading-3-base.ff-subheading, .fs-heading-4-base.lh-subheading, .fs-heading-4-base.ff-subheading, .fs-heading-5-base.lh-subheading, .fs-heading-5-base.ff-subheading, .fs-heading-6-base.lh-subheading, .fs-heading-6-base.ff-subheading { line-height: var(--line-height-subheading); } .fs-heading-display-1 { font-size: var(--font-size-heading-display-1); } .fs-heading-display-2 { font-size: var(--font-size-heading-display-2); } .fs-heading-display-3 { font-size: var(--font-size-heading-display-3); } .fs-heading-1-base { font-size: var(--font-size-heading-1-base); } .fs-heading-2-base { font-size: var(--font-size-heading-2-base); } .fs-heading-3-base { font-size: var(--font-size-heading-3-base); } .fs-heading-4-base { font-size: var(--font-size-heading-4-base); } .fs-heading-5-base { font-size: var(--font-size-heading-5-base); } .fs-heading-6-base { font-size: var(--font-size-heading-6-base); } .fs-body-25 { font-size: var(--font-size-body-25); } .fs-body-50 { font-size: var(--font-size-body-50); } .fs-body-60 { font-size: var(--font-size-body-60); } .fs-body-75 { font-size: var(--font-size-body-75); } .fs-body-100 { font-size: var(--font-size-body-100); } .fs-body-150 { font-size: var(--font-size-body-150); } .fs-body-200 { font-size: var(--font-size-body-200); } .fs-body-250 { font-size: var(--font-size-body-250); } .fs-body-300 { font-size: var(--font-size-body-300); } .fs-body-350 { font-size: var(--font-size-body-350); } .fs-body-400 { font-size: var(--font-size-body-400); } .fs-body-bold { font-weight: var(--font-body-bold-weight); } .fs-heading-bold { font-weight: var(--font-heading-bold-weight); } .fs-body-italic { font-style: var(--font-body-italic); } .fs-navigation-base { font-size: var(--font-size-navigation-base); text-transform: var(--font-navigation-base-text-transform); letter-spacing: var(--font-navigation-base-letter-spacing); } @media (min-width: 480px) { .fs-heading-1-base-ns { font-size: var(--font-size-heading-1-base) } } @media (min-width: 480px) { .fs-heading-2-base-ns { font-size: var(--font-size-heading-2-base) } } @media (min-width: 480px) { .fs-heading-3-base-ns { font-size: var(--font-size-heading-3-base) } } @media (min-width: 480px) { .fs-heading-4-base-ns { font-size: var(--font-size-heading-4-base) } } @media (min-width: 480px) { .fs-body-200-ns { font-size: var(--font-size-body-200) } } @media (min-width: 480px) { .fs-body-100-ns { font-size: var(--font-size-body-100) } } @media (min-width: 720px) { .fs-heading-2-base-above-720 { font-size: var(--font-size-heading-2-base) } } @media (min-width: 720px) { .fs-heading-3-base-above-720 { font-size: var(--font-size-heading-3-base) } } @media (min-width: 960px) { .fs-heading-2-base-above-960 { font-size: var(--font-size-heading-2-base) } } @media (min-width: 720px) { .fs-body-350-above-720 { font-size: var(--font-size-body-350) } } @media (min-width: 960px) { .fs-heading-1-base-l { font-size: var(--font-size-heading-1-base) } } @media (min-width: 960px) { .fs-heading-2-base-l { font-size: var(--font-size-heading-2-base) } } @media (min-width: 960px) { .fs-heading-3-base-l { font-size: var(--font-size-heading-3-base) } } @media (min-width: 960px) { .fs-heading-4-base-l { font-size: var(--font-size-heading-4-base) } } @media (min-width: 960px) { .fs-body-large-l { font-size: var(--font-size-body-200) } } @media (min-width: 960px) { .fs-body-100-l { font-size: var(--font-size-body-100) } } a.link { color: var(--color-text-link); -webkit-text-decoration: underline; text-decoration: underline; transition: opacity 0.25s; } a.link:hover { opacity: 0.6; } .ta-l { text-align: left; } .ta-c { text-align: center; } .ta-r { text-align: right; } .td-u { -webkit-text-decoration: underline; text-decoration: underline; } .t-subdued { opacity: 0.65; } .t-opacity-60 { opacity: 0.6; } .t-opacity-70 { opacity: 0.7; } .t-opacity-80 { opacity: 0.7; } .template-index .main { overflow: hidden; } .shopify-section { overflow: hidden; } .shopify-section.shopify-section--full-width+.shopify-section .section.section--divider-solid:before { display: none; } .section { position: relative; z-index: 0; max-width: calc(1400px + (3.3vw * 8)); max-width: calc(var(--max-width) + (var(--space-outer) * 8)); max-width: calc(1400px + calc(3.3vw * 8)); max-width: calc(var(--max-width) + calc(var(--space-outer) * 8)); padding: calc(4px * 10) 3.3vw; padding: var(--spacing-10) var(--space-outer); margin-right: auto; margin-left: auto; } .section.section--divider-solid:before { content: ""; position: absolute; top: 0; right: 3.3vw; right: var(--space-outer); bottom: 0; left: 3.3vw; left: var(--space-outer); box-shadow: inset 0px 1px var(--color-border); pointer-events: none; } .section.section--full-width { max-width: none; max-width: initial; padding-right: 0; padding-left: 0; } .section.section--vertical-padding-none { padding-top: 0; padding-bottom: 0; } .section.section--vertical-padding-top-only { padding-bottom: 0; } .section.section--vertical-padding-bottom-only { padding-top: 0; } .section.section--includes-product-items.section--vertical-padding-none, .section.section--includes-product-items.section--vertical-padding-top-only { padding-bottom: calc((4px * 2) + 1px); padding-bottom: calc(calc(4px * 2) + 1px); padding-bottom: calc(var(--spacing-2) + 1px); } .measure { max-width: 747px; max-width: var(--max-width-narrow); } .shopify-email-marketing-confirmation__container { padding-top: calc(4px * 5); padding-top: var(--spacing-5); padding-bottom: calc(4px * 5); padding-bottom: var(--spacing-5); text-align: center; } .shopify-email-marketing-confirmation__container a { --button-padding-normal: calc(0.777em * var(--button-padding-multiplier)) calc(1.777em * var(--button-padding-multiplier)); position: relative; display: inline-block; margin-top: calc(4px * 7); margin-top: var(--spacing-7); padding: calc(0.777em * var(--button-padding-multiplier)) calc(1.777em * var(--button-padding-multiplier)); padding: var(--button-padding-normal); background: transparent; color: var(--color-background-button); border: 1px solid var(--color-background-button); font-family: var(--font-button); font-weight: var(--font-weight-button); font-size: var(--font-size-button); text-transform: none; text-transform: var(--font-button-text-transform, none); line-height: var(--line-height-button); letter-spacing: var(--button-letter-spacing); cursor: pointer; -webkit-appearance: none; overflow: hidden; transition: color 0.2s ease, border-color 0.2s ease; z-index: 1; } .shopify-email-marketing-confirmation__container a::before { content: ""; position: absolute; top: 0; left: -15%; width: 130%; height: 100%; background: var(--color-background-outline-button-alpha); z-index: -1; transform: translate3d(-100%, 0, 0) skew(30deg); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing); } .shopify-email-marketing-confirmation__container a:hover:not([disabled])::before, .shopify-email-marketing-confirmation__container a:focus:not([disabled])::before { transform: none; transform: initial; } .section-blocks>*:first-child { margin-top: 0; } .section-blocks>*:last-child { margin-bottom: 0; } .section-blocks__accent { margin-top: calc(4px * 2); margin-top: var(--spacing-2); margin-bottom: calc(4px * 2); margin-bottom: var(--spacing-2); } .section-blocks__heading { margin-top: 0; margin-bottom: 0; } .section-blocks__subheading, .section-blocks__text, .section-blocks__form, .section-blocks__social-icons { margin-top: calc(4px * 3); margin-top: var(--spacing-3); margin-bottom: calc(4px * 3); margin-bottom: var(--spacing-3); } .section-blocks__button, .section-blocks__video-button, .section-blocks__newsletter-signup { margin-top: calc(4px * 6); margin-top: var(--spacing-6); margin-bottom: calc(4px * 6); margin-bottom: var(--spacing-6); } .section-blocks__form+ :not(.section-blocks) .section-blocks__button, .section-blocks__subheading+ :not(.section-blocks) .section-blocks__button, .section-blocks__heading+ :not(.section-blocks) .section-blocks__button, .section-blocks__form+ :not(.section-blocks) .section-blocks__video-button, .section-blocks__subheading+ :not(.section-blocks) .section-blocks__video-button, .section-blocks__heading+ :not(.section-blocks) .section-blocks__video-button, .section-blocks__form+ :not(.section-blocks) .section-blocks__newsletter-signup, .section-blocks__subheading+ :not(.section-blocks) .section-blocks__newsletter-signup, .section-blocks__heading+ :not(.section-blocks) .section-blocks__newsletter-signup { margin-top: calc(4px * 4); margin-top: var(--spacing-4); } .section-blocks__border { margin-top: calc(4px * 7); margin-top: var(--spacing-7); margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); } .section-blocks__image { margin-top: calc(4px * 10); margin-top: var(--spacing-10); margin-bottom: calc(4px * 10); margin-bottom: var(--spacing-10); } .section-introduction>*:first-child { margin-top: 0; } .section-introduction>*:last-child { margin-bottom: calc(4px * 7); margin-bottom: var(--spacing-7); } @media (min-width: 720px) { .section-introduction>*:last-child { margin-bottom: calc(4px * 8); margin-bottom: var(--spacing-8) } } .section-introduction__heading+.section-introduction__subheading { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } .section-introduction__heading+.section-introduction__button { margin-top: calc(4px * 2); margin-top: var(--spacing-2); } @media (min-width: 720px) { .section-introduction__heading+.section-introduction__button { margin-top: calc(4px * 3); margin-top: var(--spacing-3) } } .section-introduction__subheading+.section-introduction__button { margin-top: calc(4px * 5); margin-top: var(--spacing-5); } @media (min-width: 720px) { .section-introduction__subheading+.section-introduction__button { margin-top: calc(4px * 6); margin-top: var(--spacing-6) } } html.do-anim .animation .image--animate, html.do-anim .animation .video-wrapper--animate { overflow: hidden; } html.do-anim .animation .image--animate .image__img, html.do-anim .animation .image--animate .video, html.do-anim .animation .video-wrapper--animate .image__img, html.do-anim .animation .video-wrapper--animate .video { transform: scale(1.1); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .is-visible .image--animate.loaded .image__img, html.do-anim .is-visible .video-wrapper--animate .video { opacity: 1; transform: none; transform: initial; } html.do-anim .animation .animation--section-blocks>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.is-visible .animation--section-blocks>*, html.do-anim .animation .is-visible .animation--section-blocks>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation .animation--section-introduction>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.is-visible .animation--section-introduction>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--image-with-text .image-with-text__image-caption { transform: scale(1.1); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--image-with-text.is-visible .image-with-text__image-caption { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--list-slider .animation--controls { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--list-slider .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--list-slider.is-visible .animation--controls, html.do-anim .animation.animation--list-slider.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--gallery-carousel .animation--controls { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--gallery-carousel .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--gallery-carousel.is-visible .animation--controls, html.do-anim .animation.animation--gallery-carousel.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } @media (min-width: 720px) { html.do-anim .animation.animation--testimonials .animation--item .testimonials__item-stars, html.do-anim .animation.animation--testimonials .animation--item .testimonials__item-quote, html.do-anim .animation.animation--testimonials .animation--item .testimonials__item-author, html.do-anim .animation.animation--testimonials .animation--item .testimonials__item-product-image, html.do-anim .animation.animation--testimonials .animation--item .testimonials__item-product-title { opacity: 0; transform: translateX(-20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)) } } @media (max-width: 719px) { html.do-anim .animation.animation--testimonials .animation--item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)) } } @media (min-width: 720px) { html.do-anim .animation.animation--testimonials.is-visible .animation--item.swiper-slide-visible .testimonials__item-stars, html.do-anim .animation.animation--testimonials.is-visible .animation--item.swiper-slide-visible .testimonials__item-quote, html.do-anim .animation.animation--testimonials.is-visible .animation--item.swiper-slide-visible .testimonials__item-author, html.do-anim .animation.animation--testimonials.is-visible .animation--item.swiper-slide-visible .testimonials__item-product-image, html.do-anim .animation.animation--testimonials.is-visible .animation--item.swiper-slide-visible .testimonials__item-product-title { opacity: 1; transform: none; transform: initial } } @media (max-width: 719px) { html.do-anim .animation.animation--testimonials.is-visible .animation--item { opacity: 1; transform: none; transform: initial } } html.do-anim .animation.animation--quotes .animation--item .quote__item-inner>* { opacity: 0; transform: translateX(-20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--quotes.is-visible .animation--item.swiper-slide-visible .quote__item-inner>* { opacity: 1; transform: none; transform: initial; } @keyframes shimmer { 0% { transform: translate3d(-30%, 200%, 0) rotate(45deg); } 100% { transform: translate3d(-30%, -120%, 0) rotate(45deg); } } html.do-anim .animation--lazy-load { overflow: hidden; } html.do-anim .animation--lazy-load:not(.loaded)>* { visibility: hidden; } html.do-anim .animation--lazy-load:not(.loaded)::after, html.do-anim .animation--lazy-load:not(.loaded)::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 400%; height: 100%; transform: translate3d(0, -200%, 0) rotate(45deg); background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 99%, 1) 50%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, 0)); animation: shimmer 1500ms cubic-bezier(0.33, 0, 0.67, 1) infinite; content: ""; } html.do-anim .animation--lazy-load:not(.loaded)::before { animation-delay: 650ms; } html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product .product-card-mini__inner { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product::after, html.do-anim .animation.animation--complete-the-look.is-visible .complete-the-look__products .complete-the-look__product::before { opacity: 1; } @media (max-width: 959px) { html.do-anim .animation.animation--complete-the-look .complete-the-look__product { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)) } } @media (min-width: 960px) { html.do-anim .animation.animation--complete-the-look .complete-the-look__product:nth-of-type(2) .product-card-mini__inner { transition-delay: calc(67ms * (0 - 1)); transition-delay: calc(var(--delay-normal) * (var(--delay-offset-multiplier, 0) - 1)) } } @media (min-width: 960px) { html.do-anim .animation.animation--complete-the-look .complete-the-look__product:nth-of-type(4) .product-card-mini__inner { transition-delay: calc(67ms * (0 - 1)); transition-delay: calc(var(--delay-normal) * (var(--delay-offset-multiplier, 0) - 1)) } } @media (min-width: 960px) { html.do-anim .animation.animation--complete-the-look .complete-the-look__product .product-card-mini__inner { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)) } } @media (min-width: 960px) { html.do-anim .animation.animation--complete-the-look .complete-the-look__product::after, html.do-anim .animation.animation--complete-the-look .complete-the-look__product::before { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)) } } html.do-anim .animation.animation--image-hero-split.is-visible .image-hero-split-item .image-hero-split-item__image-container .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--image-hero-split .image-hero-split-item .image-hero-split-item__image-container .image__img { transform: scale(1.3); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--image-hero-split .image-hero-split-item .animation--section-blocks>* { transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } html.do-anim .animation.animation--image-hero-split .image-hero-split-item--1 .animation--section-blocks>* { --adjusted-delay-offset-mulitplier: calc(var(--delay-offset-multiplier, 0) + 1); transition-delay: calc(67ms * (0 + 1)); transition-delay: calc(67ms * calc(0 + 1)); transition-delay: calc(var(--delay-normal) * var(--adjusted-delay-offset-mulitplier)); } html.do-anim .animation.animation--image-hero-split .image-hero-split-item--2 .image-hero-split-item__image-container .image__img { transition-delay: 67ms; transition-delay: var(--delay-normal); } html.do-anim .animation.animation--image-hero-split .image-hero-split-item--2 .animation--section-blocks>* { --adjusted-delay-offset-mulitplier: calc(var(--delay-offset-multiplier, 0) + 2); transition-delay: calc(67ms * (0 + 2)); transition-delay: calc(67ms * calc(0 + 2)); transition-delay: calc(var(--delay-normal) * var(--adjusted-delay-offset-mulitplier)); } html.do-anim .animation.animation--image-hero.is-visible .image-hero__overlay { opacity: var(--overlay-opacity); } html.do-anim .animation.animation--image-hero.is-visible .image-hero__image-container .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--image-hero .animation--section-blocks>* { --adjusted-delay-offset-mulitplier: calc(var(--delay-offset-multiplier, 0) + 1); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * (0 + 1)); transition-delay: calc(67ms * calc(0 + 1)); transition-delay: calc(var(--delay-normal) * var(--adjusted-delay-offset-mulitplier)); } html.do-anim .animation.animation--image-hero .image-hero__image-container .image__img { transform: scale(1.3); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--image-hero .image-hero__overlay { opacity: 0; transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-slow) var(--easing); } html.do-anim .animation.animation--image-compare .image_compare__image .image__img { transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--image-compare .animation--label { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--image-compare.image-compare--horizontal .image-compare__slider-line, html.do-anim .animation.animation--image-compare.image-compare--horizontal .image-compare__slider-button { opacity: 0; left: 0; } html.do-anim .animation.animation--image-compare.image-compare--horizontal .image-compare__image-container-inner .image-compare__image-after { opacity: 0; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } html.do-anim .animation.animation--image-compare.image-compare--vertical .image-compare__slider-line, html.do-anim .animation.animation--image-compare.image-compare--vertical .image-compare__slider-button { opacity: 0; bottom: 100%; } html.do-anim .animation.animation--image-compare.image-compare--vertical .image-compare__image-container-inner .image-compare__image-after { opacity: 0; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } html.do-anim .animation.animation--image-compare.is-visible .animation--label { transition-duration: 1200ms; transition-duration: var(--duration-slow); transition-delay: 133ms; transition-delay: var(--delay-long); opacity: 1; } html.do-anim .animation.animation--image-compare.is-visible.image-compare--horizontal .image-compare__slider-line, html.do-anim .animation.animation--image-compare.is-visible.image-compare--horizontal .image-compare__slider-button { opacity: 1; left: var(--position); transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1), left 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing), left var(--duration-slow) var(--easing); } html.do-anim .animation.animation--image-compare.is-visible.image-compare--horizontal .image-compare__image-container-inner .image-compare__image-after { opacity: 1; -webkit-clip-path: inset(0 0 0 var(--position)); clip-path: inset(0 0 0 var(--position)); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), -webkit-clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), clip-path 1200ms cubic-bezier(0.33, 0, 0, 1), -webkit-clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-slow) var(--easing), -webkit-clip-path var(--duration-slow) var(--easing); transition: opacity var(--duration-slow) var(--easing), clip-path var(--duration-slow) var(--easing); transition: opacity var(--duration-slow) var(--easing), clip-path var(--duration-slow) var(--easing), -webkit-clip-path var(--duration-slow) var(--easing); } html.do-anim .animation.animation--image-compare.is-visible.image-compare--vertical .image-compare__slider-line, html.do-anim .animation.animation--image-compare.is-visible.image-compare--vertical .image-compare__slider-button { opacity: 1; bottom: var(--position); transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1), bottom 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing), bottom var(--duration-slow) var(--easing); } html.do-anim .animation.animation--image-compare.is-visible.image-compare--vertical .image-compare__image-container-inner .image-compare__image-after { opacity: 1; -webkit-clip-path: inset(calc(100% - var(--position)) 0 0 0); clip-path: inset(calc(100% - var(--position)) 0 0 0); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), -webkit-clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1), clip-path 1200ms cubic-bezier(0.33, 0, 0, 1), -webkit-clip-path 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-slow) var(--easing), -webkit-clip-path var(--duration-slow) var(--easing); transition: opacity var(--duration-slow) var(--easing), clip-path var(--duration-slow) var(--easing); transition: opacity var(--duration-slow) var(--easing), clip-path var(--duration-slow) var(--easing), -webkit-clip-path var(--duration-slow) var(--easing); } html.do-anim .animation.animation--video.is-visible .video__image .image__img, html.do-anim .animation.animation--video.is-visible .video__video { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--video .animation--section-blocks>* { --adjusted-delay-offset-mulitplier: calc(var(--delay-offset-multiplier, 0) + 1); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * (0 + 1)); transition-delay: calc(67ms * calc(0 + 1)); transition-delay: calc(var(--delay-normal) * var(--adjusted-delay-offset-mulitplier)); } html.do-anim .animation.animation--video .video__image .image__img, html.do-anim .animation.animation--video .video__video { transform: scale(1.3); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--video-hero.is-visible .video-hero__overlay { opacity: var(--overlay-opacity); } html.do-anim .animation.animation--video-hero.is-visible .video-hero__image .image__img, html.do-anim .animation.animation--video-hero.is-visible .video-hero__video { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--video-hero .animation--section-blocks>* { --adjusted-delay-offset-mulitplier: calc(var(--delay-offset-multiplier, 0) + 1); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * (0 + 1)); transition-delay: calc(67ms * calc(0 + 1)); transition-delay: calc(var(--delay-normal) * var(--adjusted-delay-offset-mulitplier)); } html.do-anim .animation.animation--video-hero .video-hero__image .image__img, html.do-anim .animation.animation--video-hero .video-hero__video { transform: scale(1.3); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--video-hero .video-hero__image { transition: opacity 300ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-fast) var(--easing); } html.do-anim .animation.animation--video-hero .video-hero__overlay { opacity: 0; transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-slow) var(--easing); } html.do-anim .animation.animation--collection-banner.is-visible .collection-banner__overlay { opacity: var(--overlay-opacity); } html.do-anim .animation.animation--collection-banner .collection-banner__image-container .image__img { transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--collection-banner .collection-banner__overlay { opacity: 0; transition: opacity 1200ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-slow) var(--easing); } html.do-anim .animation.animation--collection .animation--collection-products-hide { opacity: 0; transition: opacity 100ms; transition: opacity var(--duration-ultra-fast); } html.do-anim .animation.animation--collection .animation--item.animation--item-initial { opacity: 0; transform: translateY(40px); } html.do-anim .animation.animation--collection .animation--item.animation--item-revealed { --delay-amount: var(--delay-normal); --duration-amount: var(--delay-small); opacity: 0; transform: translateY(40px); transition: transform 33ms cubic-bezier(0.33, 0, 0, 1), opacity 33ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); opacity: 1; transform: initial; } html.do-anim .animation .animation--filter-bar, html.do-anim .animation .animation--mobile-filters { --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); } html.do-anim .animation .animation--filter-bar.is-visible, html.do-anim .animation .animation--mobile-filters.is-visible { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--sales-banner .animation--sale-amount, html.do-anim .animation.animation--promotion-bar .animation--sale-amount, html.do-anim .animation.animation--countdown-banner .animation--sale-amount, html.do-anim .animation.animation--countdown-bar .animation--sale-amount, html.do-anim .animation.animation--promo-banner .animation--sale-amount { transform: scale(0.8); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--sales-banner .animation--banner-divider::before, html.do-anim .animation.animation--promotion-bar .animation--banner-divider::before, html.do-anim .animation.animation--countdown-banner .animation--banner-divider::before, html.do-anim .animation.animation--countdown-bar .animation--banner-divider::before, html.do-anim .animation.animation--promo-banner .animation--banner-divider::before { width: 10%; opacity: 0; transition: width 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: width var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } @media (min-width: 720px) { html.do-anim .animation.animation--sales-banner .animation--banner-divider::before, html.do-anim .animation.animation--promotion-bar .animation--banner-divider::before, html.do-anim .animation.animation--countdown-banner .animation--banner-divider::before, html.do-anim .animation.animation--countdown-bar .animation--banner-divider::before, html.do-anim .animation.animation--promo-banner .animation--banner-divider::before { width: 1px; top: auto; height: 80%; transition: height 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: height var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing) } } html.do-anim .animation.animation--sales-banner .animation--bar-divider::before, html.do-anim .animation.animation--promotion-bar .animation--bar-divider::before, html.do-anim .animation.animation--countdown-banner .animation--bar-divider::before, html.do-anim .animation.animation--countdown-bar .animation--bar-divider::before, html.do-anim .animation.animation--promo-banner .animation--bar-divider::before { width: 5%; opacity: 0; transition: width 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: width var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); } @media (min-width: 720px) { html.do-anim .animation.animation--sales-banner .animation--bar-divider::before, html.do-anim .animation.animation--promotion-bar .animation--bar-divider::before, html.do-anim .animation.animation--countdown-banner .animation--bar-divider::before, html.do-anim .animation.animation--countdown-bar .animation--bar-divider::before, html.do-anim .animation.animation--promo-banner .animation--bar-divider::before { width: 1px; top: auto; height: 80%; transition: height 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: height var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing) } } html.do-anim .animation.animation--sales-banner .sales-banner__bar-item--heading, html.do-anim .animation.animation--sales-banner .sales-banner__bar-text, html.do-anim .animation.animation--sales-banner .sales-banner__button, html.do-anim .animation.animation--sales-banner .countdown-banner__bar-item--heading, html.do-anim .animation.animation--sales-banner .countdown-banner__bar-item--timer, html.do-anim .animation.animation--sales-banner .countdown-banner__bar-text, html.do-anim .animation.animation--sales-banner .countdown-banner__button, html.do-anim .animation.animation--sales-banner .animation--giant-heading, html.do-anim .animation.animation--promotion-bar .sales-banner__bar-item--heading, html.do-anim .animation.animation--promotion-bar .sales-banner__bar-text, html.do-anim .animation.animation--promotion-bar .sales-banner__button, html.do-anim .animation.animation--promotion-bar .countdown-banner__bar-item--heading, html.do-anim .animation.animation--promotion-bar .countdown-banner__bar-item--timer, html.do-anim .animation.animation--promotion-bar .countdown-banner__bar-text, html.do-anim .animation.animation--promotion-bar .countdown-banner__button, html.do-anim .animation.animation--promotion-bar .animation--giant-heading, html.do-anim .animation.animation--countdown-banner .sales-banner__bar-item--heading, html.do-anim .animation.animation--countdown-banner .sales-banner__bar-text, html.do-anim .animation.animation--countdown-banner .sales-banner__button, html.do-anim .animation.animation--countdown-banner .countdown-banner__bar-item--heading, html.do-anim .animation.animation--countdown-banner .countdown-banner__bar-item--timer, html.do-anim .animation.animation--countdown-banner .countdown-banner__bar-text, html.do-anim .animation.animation--countdown-banner .countdown-banner__button, html.do-anim .animation.animation--countdown-banner .animation--giant-heading, html.do-anim .animation.animation--countdown-bar .sales-banner__bar-item--heading, html.do-anim .animation.animation--countdown-bar .sales-banner__bar-text, html.do-anim .animation.animation--countdown-bar .sales-banner__button, html.do-anim .animation.animation--countdown-bar .countdown-banner__bar-item--heading, html.do-anim .animation.animation--countdown-bar .countdown-banner__bar-item--timer, html.do-anim .animation.animation--countdown-bar .countdown-banner__bar-text, html.do-anim .animation.animation--countdown-bar .countdown-banner__button, html.do-anim .animation.animation--countdown-bar .animation--giant-heading, html.do-anim .animation.animation--promo-banner .sales-banner__bar-item--heading, html.do-anim .animation.animation--promo-banner .sales-banner__bar-text, html.do-anim .animation.animation--promo-banner .sales-banner__button, html.do-anim .animation.animation--promo-banner .countdown-banner__bar-item--heading, html.do-anim .animation.animation--promo-banner .countdown-banner__bar-item--timer, html.do-anim .animation.animation--promo-banner .countdown-banner__bar-text, html.do-anim .animation.animation--promo-banner .countdown-banner__button, html.do-anim .animation.animation--promo-banner .animation--giant-heading { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--sales-banner .sale-promotion__type, html.do-anim .animation.animation--sales-banner .sale-promotion__unit-currency, html.do-anim .animation.animation--sales-banner .sale-promotion__unit-percent, html.do-anim .animation.animation--sales-banner .sale-promotion__unit-off, html.do-anim .animation.animation--sales-banner .sale-promotion__amount, html.do-anim .animation.animation--sales-banner .sale-promotion__per-month, html.do-anim .animation.animation--sales-banner .sale-promotion__per-year, html.do-anim .animation.animation--sales-banner .sale-promotion__terms, html.do-anim .animation.animation--promotion-bar .sale-promotion__type, html.do-anim .animation.animation--promotion-bar .sale-promotion__unit-currency, html.do-anim .animation.animation--promotion-bar .sale-promotion__unit-percent, html.do-anim .animation.animation--promotion-bar .sale-promotion__unit-off, html.do-anim .animation.animation--promotion-bar .sale-promotion__amount, html.do-anim .animation.animation--promotion-bar .sale-promotion__per-month, html.do-anim .animation.animation--promotion-bar .sale-promotion__per-year, html.do-anim .animation.animation--promotion-bar .sale-promotion__terms, html.do-anim .animation.animation--countdown-banner .sale-promotion__type, html.do-anim .animation.animation--countdown-banner .sale-promotion__unit-currency, html.do-anim .animation.animation--countdown-banner .sale-promotion__unit-percent, html.do-anim .animation.animation--countdown-banner .sale-promotion__unit-off, html.do-anim .animation.animation--countdown-banner .sale-promotion__amount, html.do-anim .animation.animation--countdown-banner .sale-promotion__per-month, html.do-anim .animation.animation--countdown-banner .sale-promotion__per-year, html.do-anim .animation.animation--countdown-banner .sale-promotion__terms, html.do-anim .animation.animation--countdown-bar .sale-promotion__type, html.do-anim .animation.animation--countdown-bar .sale-promotion__unit-currency, html.do-anim .animation.animation--countdown-bar .sale-promotion__unit-percent, html.do-anim .animation.animation--countdown-bar .sale-promotion__unit-off, html.do-anim .animation.animation--countdown-bar .sale-promotion__amount, html.do-anim .animation.animation--countdown-bar .sale-promotion__per-month, html.do-anim .animation.animation--countdown-bar .sale-promotion__per-year, html.do-anim .animation.animation--countdown-bar .sale-promotion__terms, html.do-anim .animation.animation--promo-banner .sale-promotion__type, html.do-anim .animation.animation--promo-banner .sale-promotion__unit-currency, html.do-anim .animation.animation--promo-banner .sale-promotion__unit-percent, html.do-anim .animation.animation--promo-banner .sale-promotion__unit-off, html.do-anim .animation.animation--promo-banner .sale-promotion__amount, html.do-anim .animation.animation--promo-banner .sale-promotion__per-month, html.do-anim .animation.animation--promo-banner .sale-promotion__per-year, html.do-anim .animation.animation--promo-banner .sale-promotion__terms { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--sales-banner.is-visible .animation--sale-amount, html.do-anim .animation.animation--promotion-bar.is-visible .animation--sale-amount, html.do-anim .animation.animation--countdown-banner.is-visible .animation--sale-amount, html.do-anim .animation.animation--countdown-bar.is-visible .animation--sale-amount, html.do-anim .animation.animation--promo-banner.is-visible .animation--sale-amount { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--sales-banner.is-visible .sales-banner__bar-item--heading, html.do-anim .animation.animation--sales-banner.is-visible .sales-banner__bar-text, html.do-anim .animation.animation--sales-banner.is-visible .sales-banner__button, html.do-anim .animation.animation--sales-banner.is-visible .countdown-banner__bar-item--heading, html.do-anim .animation.animation--sales-banner.is-visible .countdown-banner__bar-item--timer, html.do-anim .animation.animation--sales-banner.is-visible .countdown-banner__bar-text, html.do-anim .animation.animation--sales-banner.is-visible .countdown-banner__button, html.do-anim .animation.animation--sales-banner.is-visible .animation--giant-heading, html.do-anim .animation.animation--promotion-bar.is-visible .sales-banner__bar-item--heading, html.do-anim .animation.animation--promotion-bar.is-visible .sales-banner__bar-text, html.do-anim .animation.animation--promotion-bar.is-visible .sales-banner__button, html.do-anim .animation.animation--promotion-bar.is-visible .countdown-banner__bar-item--heading, html.do-anim .animation.animation--promotion-bar.is-visible .countdown-banner__bar-item--timer, html.do-anim .animation.animation--promotion-bar.is-visible .countdown-banner__bar-text, html.do-anim .animation.animation--promotion-bar.is-visible .countdown-banner__button, html.do-anim .animation.animation--promotion-bar.is-visible .animation--giant-heading, html.do-anim .animation.animation--countdown-banner.is-visible .sales-banner__bar-item--heading, html.do-anim .animation.animation--countdown-banner.is-visible .sales-banner__bar-text, html.do-anim .animation.animation--countdown-banner.is-visible .sales-banner__button, html.do-anim .animation.animation--countdown-banner.is-visible .countdown-banner__bar-item--heading, html.do-anim .animation.animation--countdown-banner.is-visible .countdown-banner__bar-item--timer, html.do-anim .animation.animation--countdown-banner.is-visible .countdown-banner__bar-text, html.do-anim .animation.animation--countdown-banner.is-visible .countdown-banner__button, html.do-anim .animation.animation--countdown-banner.is-visible .animation--giant-heading, html.do-anim .animation.animation--countdown-bar.is-visible .sales-banner__bar-item--heading, html.do-anim .animation.animation--countdown-bar.is-visible .sales-banner__bar-text, html.do-anim .animation.animation--countdown-bar.is-visible .sales-banner__button, html.do-anim .animation.animation--countdown-bar.is-visible .countdown-banner__bar-item--heading, html.do-anim .animation.animation--countdown-bar.is-visible .countdown-banner__bar-item--timer, html.do-anim .animation.animation--countdown-bar.is-visible .countdown-banner__bar-text, html.do-anim .animation.animation--countdown-bar.is-visible .countdown-banner__button, html.do-anim .animation.animation--countdown-bar.is-visible .animation--giant-heading, html.do-anim .animation.animation--promo-banner.is-visible .sales-banner__bar-item--heading, html.do-anim .animation.animation--promo-banner.is-visible .sales-banner__bar-text, html.do-anim .animation.animation--promo-banner.is-visible .sales-banner__button, html.do-anim .animation.animation--promo-banner.is-visible .countdown-banner__bar-item--heading, html.do-anim .animation.animation--promo-banner.is-visible .countdown-banner__bar-item--timer, html.do-anim .animation.animation--promo-banner.is-visible .countdown-banner__bar-text, html.do-anim .animation.animation--promo-banner.is-visible .countdown-banner__button, html.do-anim .animation.animation--promo-banner.is-visible .animation--giant-heading { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__type, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__unit-currency, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__unit-percent, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__unit-off, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__amount, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__per-month, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__per-year, html.do-anim .animation.animation--sales-banner.is-visible .sale-promotion__terms, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__type, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__unit-currency, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__unit-percent, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__unit-off, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__amount, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__per-month, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__per-year, html.do-anim .animation.animation--promotion-bar.is-visible .sale-promotion__terms, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__type, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__unit-currency, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__unit-percent, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__unit-off, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__amount, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__per-month, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__per-year, html.do-anim .animation.animation--countdown-banner.is-visible .sale-promotion__terms, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__type, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__unit-currency, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__unit-percent, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__unit-off, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__amount, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__per-month, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__per-year, html.do-anim .animation.animation--countdown-bar.is-visible .sale-promotion__terms, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__type, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__unit-currency, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__unit-percent, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__unit-off, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__amount, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__per-month, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__per-year, html.do-anim .animation.animation--promo-banner.is-visible .sale-promotion__terms { opacity: 1; } html.do-anim .animation.animation--sales-banner.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--promotion-bar.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--countdown-banner.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--countdown-bar.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--promo-banner.is-visible .animation--banner-divider::before { width: 30%; opacity: 1; } @media (min-width: 720px) { html.do-anim .animation.animation--sales-banner.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--promotion-bar.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--countdown-banner.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--countdown-bar.is-visible .animation--banner-divider::before, html.do-anim .animation.animation--promo-banner.is-visible .animation--banner-divider::before { width: 1px; height: 100% } } html.do-anim .animation.animation--sales-banner.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--promotion-bar.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--countdown-banner.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--countdown-bar.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--promo-banner.is-visible .animation--bar-divider::before { width: 15%; opacity: 1; } @media (min-width: 720px) { html.do-anim .animation.animation--sales-banner.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--promotion-bar.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--countdown-banner.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--countdown-bar.is-visible .animation--bar-divider::before, html.do-anim .animation.animation--promo-banner.is-visible .animation--bar-divider::before { width: 1px; height: 100% } } html.do-anim .animation .animation--filter-drawer .animation--filter-drawer-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation .animation--filter-drawer.animation--filter-bar-revealed .animation--filter-drawer-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation [data-filter-sidebar] .animation--filter-drawer-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation [data-filter-sidebar].animation--filter-sidebar-revealed .animation--filter-drawer-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation--drawer-menu .animation--drawer-menu-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation--drawer-menu.animation--drawer-menu-revealed .animation--drawer-menu-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--quick-cart .animation--quick-cart-items>*, html.do-anim .animation.animation--quick-cart .animation--quick-cart-footer { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--quick-cart.animation--quick-cart-revealed .animation--quick-cart-items>*, html.do-anim .animation.animation--quick-cart.animation--quick-cart-revealed .animation--quick-cart-footer { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--quick-view .animation--quick-view-items>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--quick-view .image__img { transform: scale(1.1); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--quick-view.animation--quick-view-revealed .animation--quick-view-items>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--quick-view.animation--quick-view-revealed .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--slideshow .slideshow-slide:not(.swiper-slide-active):not(.slideshow-slide--single) .slideshow-slide__inner { opacity: 0; transition: opacity 0s 500ms; transition: opacity 0s var(--duration-normal); } html.do-anim .animation.animation--slideshow .image--animate .image__img { transform: scale(1.3); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); transition-duration: 1200ms; transition-duration: var(--duration-slow); } html.do-anim .animation.animation--slideshow .animation--section-blocks>* { opacity: 0; transform: translateY(20px); } html.do-anim .animation.animation--slideshow .slideshow-slide__overlay { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } html.do-anim .animation.animation--slideshow.is-visible .image--animate.loaded .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--slideshow.is-visible .slideshow-slide.swiper-slide-active .animation--section-blocks>*, html.do-anim .animation.animation--slideshow.is-visible .slideshow-slide.slideshow-slide--single .animation--section-blocks>* { opacity: 1; transform: translateY(0); } html.do-anim .animation.animation--slideshow.is-visible .slideshow-slide__overlay { opacity: var(--overlay-opacity); } html.do-anim .header .animation--dropdown.navigation__submenu>.navigation__submenu-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); transition-delay: 67ms; transition-delay: var(--delay-normal); } html.do-anim .header .animation--dropdown.navigation__submenu.active>.navigation__submenu-item { opacity: 1; transform: none; transform: initial; } html.do-anim .header .animation--dropdown.navigation__submenu:not(.active)>.navigation__submenu-item { transition: none; } html.do-anim .header .animation--dropdown.meganav .meganav__nav .meganav__list-parent>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .header .animation--dropdown.meganav .meganav__promo-image .image__img { transform: scale(1.1); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .header .animation--dropdown.meganav .meganav__secondary-promo-overlay { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * (0 - 1)); transition-delay: calc(var(--delay-normal) * (var(--delay-offset-multiplier, 0) - 1)); } html.do-anim .header .animation--dropdown.meganav .meganav__secondary-promo-text>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .header .animation--dropdown.meganav.active .meganav__list-parent>*, html.do-anim .header .animation--dropdown.meganav.active .meganav__secondary-promo-text>* { opacity: 1; transform: none; transform: initial; } html.do-anim .header .animation--dropdown.meganav.active .meganav__promo-image .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .header .animation--dropdown.meganav.active .meganav__secondary-promo-overlay { opacity: var(--overlay-opacity); } html.do-anim .header .animation--dropdown.meganav:not(.active) .meganav__nav .meganav__list-parent>*, html.do-anim .header .animation--dropdown.meganav:not(.active) .meganav__promo-image .image__img, html.do-anim .header .animation--dropdown.meganav:not(.active) .meganav__secondary-promo-overlay, html.do-anim .header .animation--dropdown.meganav:not(.active) .meganav__secondary-promo-text>* { transition: none; } html.do-anim .animation.animation--list-collections.is-visible .list-collections__heading, html.do-anim .animation.animation--list-collections.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--list-collections .list-collections__heading { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--list-collections .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--collection-list-grid.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--collection-list-grid .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--grid.is-visible .grid-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--grid .grid-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--grid .grid-item__image .image__img { transition-duration: 1200ms; transition-duration: var(--duration-slow); transition-delay: 0ms; } html.do-anim .animation.animation--purchase-confirmation .animation--purchase-confirmation-item, html.do-anim .animation.animation--purchase-confirmation .animation--purchase-confirmation-footer-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--purchase-confirmation .animation--purchase-confirmation-footer-item { transition-delay: calc((var(--delay-amount) * 0) + 500ms); transition-delay: calc((var(--delay-amount) * var(--delay-offset-multiplier, 0)) + var(--duration-normal)); } html.do-anim .animation.animation--purchase-confirmation.animation--purchase-confirmation-revealed .animation--purchase-confirmation-item, html.do-anim .animation.animation--purchase-confirmation.animation--purchase-confirmation-revealed .animation--purchase-confirmation-footer-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--collapsible-row-list.is-visible .collapsible-row-list__inner>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--collapsible-row-list .collapsible-row-list__inner>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--blog-posts.is-visible .article-item__content-inner>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--blog-posts .article-item__content-inner>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--featured-collection-grid.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--featured-collection-grid .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--store-availability-drawer .animation--store-availability-drawer-items>* { transform: translateX(calc(40px + (40px * 0))); transform: translateX(calc(40px + (40px * var(--position-offset-multiplier, 0)))); transition: transform 500ms 33ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--delay-small) var(--easing); } html.do-anim .animation.animation--store-availability-drawer.animation--store-availability-drawer-revealed .animation--store-availability-drawer-items>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.is-visible .animation--media { opacity: 1; } html.do-anim .animation .animation--media { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--page .page-section__inner>* { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--page.is-visible .page-section__inner>* { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--contact-form.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--contact-form .animation--item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--search .animation--search-products-hide { opacity: 0; transition: opacity 100ms; transition: opacity var(--duration-ultra-fast); } html.do-anim .animation.animation--search .animation--item.animation--item-initial { opacity: 0; transform: translateY(40px); } html.do-anim .animation.animation--search .animation--item.animation--item-revealed { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); opacity: 1; transform: initial; } html.do-anim .animation .animation--filter-bar { --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); } html.do-anim .animation .animation--filter-bar.is-visible { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--multi-column.is-visible .multi-column__grid-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--multi-column .multi-column__grid-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(10px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation--popup .animation--popup-item { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation--popup .popup__image .image__img { transform: scale(1.1); opacity: 0; transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-normal) var(--easing), opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); -o-object-fit: cover; object-fit: cover; -o-object-position: var(--focal-alignment); object-position: var(--focal-alignment); width: 100%; height: 100%; transition-duration: 1200ms; transition-duration: var(--duration-slow); transition-delay: 0ms; } html.do-anim .animation--popup.animation--popup-revealed .animation--popup-item { opacity: 1; transform: none; transform: initial; } html.do-anim .animation--popup.animation--popup-revealed .popup__image .image__img { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--events .event-item { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-normal) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--events .event-item.event-item--skeleton { opacity: 0; transition: opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: opacity var(--duration-normal) var(--easing); } html.do-anim .animation.animation--events.is-visible .event-item.event-item--skeleton { opacity: 1; } html.do-anim .animation.animation--events.is-visible.animate-event-items .event-item { opacity: 1; } html.do-anim .animation.animation--product-tabs.is-visible .product-tabs__tab-list-wrapper, html.do-anim .animation.animation--product-tabs.is-visible .product-tabs__tab-buttons { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--product-tabs.is-visible .accordion { opacity: 1; transform: none; transform: initial; } html.do-anim .animation.animation--product-tabs .product-tabs__tab-buttons { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--product-tabs .product-tabs__tab-list-wrapper { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html.do-anim .animation.animation--product-tabs .accordion { --delay-amount: var(--delay-normal); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(20px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(67ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); } html:not(.no-js):not(.prefers-reduced-motion) .animation.animation--apps.is-visible .animation--item { opacity: 1; transform: none; transform: initial; } html:not(.no-js):not(.prefers-reduced-motion) .animation.animation--apps .animation--item { --delay-amount: var(--delay-small); --duration-amount: var(--duration-normal); opacity: 0; transform: translateY(40px); transition: transform 500ms cubic-bezier(0.33, 0, 0, 1), opacity 500ms cubic-bezier(0.33, 0, 0, 1); transition: transform var(--duration-amount) var(--easing), opacity var(--duration-amount) var(--easing); transition-delay: calc(33ms * 0); transition-delay: calc(var(--delay-amount) * var(--delay-offset-multiplier, 0)); }