/** Shopify CDN: Minification failed Line 9542:2 Unexpected "{" **/ /* components v3.0.1 | Copyright © 2024 Archetype Themes Limited Partnership | "Shopify Theme Store (https://www.shopify.com/legal/terms#9-additional-services)" License */ .at-add-to-cart { display: block; position: relative; height: 36px; } .at-add-to-cart.is-added { pointer-events: none; } .at-add-to-cart__button.btn, .at-add-to-cart__content { display: flex; padding: 7px 24px; justify-content: center; align-items: center; border-radius: 32px; width: 100%; height: 100%; } .at-add-to-cart__button--add.btn:hover, .at-add-to-cart__button--options.btn:hover, .at-add-to-cart__button--add.btn:focus, .at-add-to-cart__button--options.btn:focus { color: var(--color-button-primary-text); background-color: var(--color-button-primary); } .at-add-to-cart__content { position: absolute; top: 0; left: 0; display: none; background: var(--color-button-primary); } .at-add-to-cart__button[aria-expanded='true']+.at-add-to-cart__content { display: flex; } .at-add-to-cart__content .js-qty__wrapper { max-width: none; width: 100%; background: transparent; } .is-added .at-add-to-cart__content .js-qty__wrapper { display: none; } .at-add-to-cart__content .js-qty__num { border: none; padding: 0 16px; background: transparent; color: var(--color-button-primary-text); font-size: calc(var(--type-base-size)); font-weight: var(--type-header-weight); line-height: 1.42; } .at-add-to-cart__content .js-qty__adjust { padding: 0; color: var(--color-button-primary-text); } .at-add-to-cart__content .js-qty__adjust:hover, .at-add-to-cart__content .js-qty__adjust:focus { background: transparent; color: var(--color-button-primary-text); } .at-add-to-cart__content .js-qty__adjust .icon { width: 16px; height: 16px; } .at-add-to-cart__message.btn { position: absolute; top: 0; left: 0; display: none; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 36px; border-radius: 32px; cursor: default; } .is-added .at-add-to-cart__message.btn { display: flex; } /* If styles are shared between components, they should be added here * If it's only at the snippet or section level, we should remove * the import from here and move them into the snippet or section folder */ :root { /* Core Sizes */ --size-0-5: 0.125rem; /* 2px */ --size-1: 0.25rem; /* 4px */ --size-1-5: 0.375rem; /* 6px */ --size-2: 0.5rem; /* 8px */ --size-2-5: 0.625rem; /* 10px */ --size-3: 0.75rem; /* 12px */ --size-3-5: 0.875rem; /* 14px */ --size-4: 1rem; /* 16px */ --size-4-5: 1.125rem; /* 18px */ --size-5: 1.25rem; /* 20px */ --size-5-5: 1.375rem; /* 22px */ --size-6: 1.5rem; /* 24px */ --size-6-5: 1.625rem; /* 26px */ --size-7: 1.75rem; /* 28px */ --size-7-5: 1.875rem; /* 30px */ --size-8: 2rem; /* 32px */ --size-8-5: 2.125rem; /* 34px */ --size-9: 2.25rem; /* 36px */ --size-9-5: 2.375rem; /* 38px */ --size-10: 2.5rem; /* 40px */ --size-11: 2.75rem; /* 44px */ --size-12: 3rem; /* 48px */ --size-14: 3.5rem; /* 56px */ --size-16: 4rem; /* 64px */ --size-18: 4.5rem; /* 72px */ --size-20: 5rem; /* 80px */ --size-24: 6rem; /* 96px */ --size-28: 7rem; /* 112px */ --size-32: 8rem; /* 128px */ --gutter: 30px; --page-width: 1640px; --page-width-narrow: 1000px; --input-radius: 0; --page-width-gutter-small: 17px; --grid-gutter: 22px; --grid-gutter-small: 16px; --slide-curve: 0.25s cubic-bezier(0.165, 0.84, 0.44, 1); --drawer-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /*================ Product and collection grids ================*/ /* Product grid margin is double this variable */ --product-grid-margin: 10px; --product-grid-padding: 12px; --product-radius: 10px; /*================ Color variables ================*/ --color-sticky-nav-links: #fff; --disabled-grey: #f6f6f6; --disabled-border: #b6b6b6; --disabled-grey-text: #b6b6b6; --error-red: #d02e2e; --error-red-bg: #fff6f6; --success-green: #56ad6a; --success-green-bg: #ecfef0; /*================ General sizing and z-index ================*/ --desktop-menu-chevron-size: 10px; --site-nav-item-padding: 21px; --site-nav-item-padding-top-bottom: 16px; --site-nav-icon-padding: 12px; --z-index-modal: 30; --z-index-toolbar: 7; --z-index-header: 6; --z-index-header-submenu: 7; --z-index-header-bottom-row: 3; --z-index-header-drawers: 5; --z-index-header-drawers-mobile: 3; --z-index-header-search: 7; --z-index-loader: 4; --z-index-header-search-overlay: 1; } /*================ Breakpoints ================*/ *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */ tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } html { touch-action: manipulation; } html[dir='rtl'] { direction: rtl; } html, body { background-color: var(--color-body); color: var(--color-text-body); } @media only screen and (max-width: 768px) { @media (hover: none) and (pointer: coarse) { .lock-scroll { overflow: hidden !important; touch-action: none; -webkit-overflow-scrolling: auto; } } } .page-width { max-width: var(--page-width); margin: 0 auto; } .page-width, .page-full { padding: 0 var(--page-width-padding); } .gift-cart-product-page .page-width--narrow { max-width: 1480px; margin-top: 82px; } .gift-cart-product-page .page-width--narrow { max-width: var(--page-narrow); } .page-width--tiny { max-width: 450px; } [id*='giftcard_recommendations'] { display: flex; justify-content: center; width: 100%; } .giftcard-recommendations { width: 100%; max-width: 1480px; padding: 0 80px; } .giftcard-recommendations__item { display: flex; align-items: center; gap: 8px; max-width: calc(100% / 4 - 19.5px); width: 100%; margin: 0 13px; } .giftcard-recommendations__image { width: calc(52.5% - 4px); } .giftcard-recommendations__image img { width: 100%; aspect-ratio: 1/1; background-color: #e5e2e3; } .giftcard-recommendations__info { width: calc(47.5% - 4px); } .giftcard-recommendations__info-row { display: flex; align-items: center; width: 100%; justify-content: space-between; gap: 4px; } .giftcard-recommendations__title { font-weight: 300; font-size: 11px; line-height: 1; letter-spacing: 0; vertical-align: middle; text-transform: capitalize; margin-bottom: 14px; } .giftcard-recommendations__price { font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0; vertical-align: middle; text-transform: capitalize; margin-bottom: 0; } .giftcard-recommendations__variant { display: flex; align-items: center; gap: 4px; } .giftcard-recommendations__variant label { font-weight: 500 !important; font-size: 12px !important; line-height: 1; letter-spacing: 0; vertical-align: middle; text-transform: capitalize; margin-bottom: 0; } .giftcard-recommendations__variant select { width: 44px; height: 23px; border-radius: 4px; font-size: 10px; letter-spacing: 0; padding: 0 10px 0 5px; border-color: rgba(234, 234, 234, 1); color: rgba(20, 20, 20, 1); } .giftcard-recommendations__actions { margin-top: 20px; } .giftcard-recommendations__actions .js-qty__num { width: 61px; height: 23px; padding: 5px 10px; font-size: 14px; } .giftcard-recommendations__actions .js-qty__adjust { display: flex; justify-content: center; align-items: center; padding: 0; color: #ffffff; width: 20px; height: 23px; background-color: rgba(20, 20, 20, 1); } .giftcard-recommendations__actions .js-qty__adjust svg { width: 12px !important; height: 12px !important; } .giftcard-recommendations__actions .js-qty__adjust--minus { border-radius: 4px 0 0 4px; } .giftcard-recommendations__actions .js-qty__adjust--plus { border-radius: 0 4px 4px 0; } .giftcard-recommendations__actions>button { display: flex; justify-content: center; align-items: center; border-radius: 4px; gap: 6px; max-width: 61px; width: 100%; min-width: auto; height: 25px; font-size: 12px; font-weight: 500; padding: 0; border: 0; color: #ffffff; background-color: rgba(255, 51, 51, 1); } .giftcard-recommendations .flickity-button { box-shadow: 0px 4px 5.7px 0px rgba(0, 0, 0, 0.1); } .giftcard-recommendations .flickity-button.flickity-previous { border-radius: 0 6px 6px 0; left: -40px; } .giftcard-recommendations .flickity-button.flickity-next { border-radius: 6px 0 0 6px; right: -40px; } @media only screen and (max-width: 1440px) { .giftcard-recommendations__item { max-width: calc(100% / 3 - (26px * 2 / 3)); } } @media only screen and (max-width: 1024px) { .giftcard-recommendations__item { max-width: calc(100% / 2 - (26px / 3)); } } @media only screen and (max-width: 768px) { .giftcard-recommendations { padding: 0 var(--page-width-padding); } .giftcard-recommendations .flickity-button { display: block; } .giftcard-recommendations .flickity-button.flickity-previous { left: -35px; } .giftcard-recommendations .flickity-button.flickity-next { right: -35px; } .page-width--flush-small { padding: 0; } .gift-cart-product-page .page-width--narrow { margin-top: -28px; } .giftcard-recommendations__item { align-items: flex-start; max-width: 100%; margin: 0; } .giftcard-recommendations__item:not(:last-child) { margin-bottom: 12px; } .giftcard-recommendations__title { margin-top: 9px; margin-bottom: 11px; } .giftcard-recommendations__actions { margin-top: 10px; } .giftcard-recommendations__actions>button { height: 23px; } .giftcard-recommendations__image { width: 25.5%; } .giftcard-recommendations__info { width: 74.5%; } .giftcard-recommendations__heading { font-size: 16px; line-height: 1; font-weight: 600; width: 100%; letter-spacing: 0; } .giftcard-recommendations__heading.text-center { text-align: left !important; margin-bottom: 18px; } } .page-content, .shopify-policy__container, .shopify-email-marketing-confirmation__container { padding-top: var(--page-top-padding); padding-bottom: var(--page-top-padding); } .shopify-email-marketing-confirmation__container { text-align: center; } hr, .hr--small, .hr--medium, .hr--large { height: 1px; border: 0; border-top: 1px solid; border-top-color: var(--color-border); } .hr--small { margin: 15px auto; } .hr--medium { margin: 30px auto; } .hr--large { margin: var(--gutter) auto; } @media only screen and (min-width: 769px) { .hr--large { margin: calc(var(--gutter) * 1.5) auto; } } .page-blocks+.hr--large, .page-blocks+[data-section-type='recently-viewed'] .hr--large { margin-top: 0; } .hr--clear { border: 0; } /*============================================================================ Responsive tables, defined with .table--responsive on table element. ==============================================================================*/ @media only screen and (max-width: 768px) { .table--responsive thead { display: none; } .table--responsive tr { display: block; } .table--responsive tr, .table--responsive td { float: left; clear: both; width: 100%; } .table--responsive th, .table--responsive td { display: block; text-align: right; padding: 15px; } .table--responsive td:before { content: attr(data-label); float: left; font-size: 12px; padding-right: 10px; } } @media only screen and (max-width: 768px) { .table--small-hide { display: none !important; } .table__section+.table__section { position: relative; margin-top: 10px; padding-top: 15px; } .table__section+.table__section:after { content: ''; display: block; position: absolute; top: 0; left: 15px; right: 15px; border-bottom: 1px solid; border-bottom-color: var(--color-border); } } details summary::-webkit-details-marker { display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes preloading { 0% { transform-origin: 0 50%; transform: scale3d(0, 1, 1); opacity: 0; } 40% { transform-origin: 0 50%; transform: scale3d(1, 1, 1); opacity: 1; } 41% { transform-origin: 100% 50%; transform: scale3d(1, 1, 1); opacity: 1; } 100% { transform-origin: 100% 50%; transform: scale3d(0, 1, 1); opacity: 1; } } @keyframes slideshowBars { from { transform: translateX(-100%); } to { transform: translateX(0); } } /*Ajax load products*/ @keyframes grid-product__loading { 0% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 1; } } /*Overlay animations (modals, panels)*/ @keyframes overlay-on { from { opacity: 0; } to { opacity: 0.6; } } @keyframes overlay-off { from { opacity: 0.6; } to { opacity: 0; } } @keyframes modal-open { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } } @keyframes modal-closing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } } /*Text animations*/ @keyframes rise-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } /*Background image animations*/ @keyframes zoom-fade { from { opacity: 0; transform: scale(1.1, 1.1); } to { opacity: 1; transform: scale(1, 1); } } /*Product form placeholder*/ @keyframes placeholder-shimmer { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } } *, input, :before, :after { box-sizing: border-box; } html, body { padding: 0; margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { height: auto; } input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration { -webkit-appearance: none; } body, input, textarea, button, select, .faux-select { font-family: var(--type-base-primary), var(--type-base-fallback); font-size: var(--type-base-size); letter-spacing: var(--type-base-spacing); line-height: var(--type-base-line-height); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-rendering: optimizeSpeed; } body { font-weight: var(--type-base-weight); } p { margin: 0 0 calc(var(--gutter) / 2) 0; } p:last-child { margin-bottom: 0; } p img { margin: 0; } em { font-style: italic; } b, strong { font-weight: bold; } small, p[data-spam-detection-disclaimer] { font-size: 0.85em; } sup, sub { position: relative; font-size: 60%; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.5em; } blockquote, .rte blockquote { margin: 0; padding: calc(var(--gutter) / 2) var(--gutter) 40px; } blockquote p, .rte blockquote p { margin-bottom: 0; } blockquote p+cite, .rte blockquote p+cite { margin-top: calc(var(--gutter) / 2); } blockquote cite, .rte blockquote cite { display: block; } code, pre { background-color: #faf7f5; font-family: Consolas, monospace; font-size: 1em; border: 0 none; padding: 0 2px; color: #51ab62; } pre { overflow: auto; padding: calc(var(--gutter) / 2); margin: 0 0 var(--gutter); } label:not(.variant__button-label):not(.text-label), .label { font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 1px); } label { display: block; margin-bottom: 10px; } .text-label a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .label-info { display: block; margin-bottom: 10px; } .h0, .heading-font-stack, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--type-header-primary), var(--type-header-fallback); font-weight: var(--type-header-weight); letter-spacing: var(--type-header-spacing); line-height: var(--type-header-line-height); text-transform: var(--type-header-transform); } .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { display: block; margin: 0 0 15px; } @media only screen and (min-width: 769px) { .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0 0 20px; } } .h0 a, h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a { -webkit-text-decoration: none; text-decoration: none; font-weight: inherit; } /* Mobile sizes */ .h0 { font-size: var(--type-header-size); font-family: var(--type-header-primary), var(--type-header-fallback); font-weight: var(--type-header-weight); letter-spacing: var(--type-header-spacing); line-height: var(--type-header-line-height); } h1, .h1 { font-size: calc(var(--type-header-size) * 0.85); } h2, .h2 { font-size: calc(var(--type-header-size) * 0.63); } h3, .h3 { font-size: calc(var(--type-header-size) * 0.57); } h4, .h4 { font-size: calc(var(--type-header-size) * 0.55); } /* Desktop sizes */ @media only screen and (min-width: 769px) { .h0 { font-size: calc(var(--type-header-size) * 1.25); } h1, .h1 { font-size: var(--type-header-size); } h2, .h2 { font-size: calc(var(--type-header-size) * 0.85); } h3, .h3 { font-size: calc(var(--type-header-size) * 0.7); } .h3--mobile { font-size: calc(var(--type-header-size) * 0.57); } } .accent-subtitle { letter-spacing: 0.07em; margin: 0 0 20px; } /*Standardize text spacing sometimes*/ .text-spacing, .text-spacing.rte:last-child { margin-bottom: 15px; } @media only screen and (min-width: 769px) { .text-spacing, .text-spacing.rte:last-child { margin-bottom: 25px; } } @media only screen and (max-width: 768px) { .rte table td, .rte table th { padding: 6px 8px; } } .collapsible-content .rte table td, .collapsible-content .rte table th { padding: 6px 8px; } .enlarge-text { font-size: calc(var(--type-base-size) + 2px); } @media only screen and (min-width: 769px) { .enlarge-text { font-size: calc(var(--type-base-size) + 4px); } } @media only screen and (min-width: 769px) { .table--small-text { font-size: calc(var(--type-base-size) * 0.85); } } .index-section--footer h3 { font-size: 1.5em; } /*================ RTL overrides ================*/ html[dir='rtl'] .text-left { text-align: right !important; } html[dir='rtl'] .text-right { text-align: left !important; } /*Icon + text element that prevents awkward line wrapping*/ .sales-point .icon-and-text { font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: 30px; } .sales-point .icon-and-text svg { width: 40px; height: 40px; } .gift-cart-product-page .sales-point .icon-and-text svg { width: 26px; height: 24px; } .icon-and-text { display: flex; flex-wrap: nowrap; align-items: center; } .icon-and-text .icon { flex: 0 0 auto; } .capitalize-first-letter:first-letter { font-size: 55px; float: left; margin-right: 6px; margin-top: -20px; font-weight: var(--type-header-weight); } /* Text Highlights */ .text-highlight em { font-style: normal; } .text-highlight.h0 a, .text-highlight.h1 a, .text-highlight.h2 a, .text-highlight.h3 a, .text-highlight.h4 a, .text-highlight.h5 a, .text-highlight.h6 a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .text-highlight--outline em { -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: inherit; -webkit-text-fill-color: var(--color-body); } .color-scheme-1 .text-highlight--outline em { -webkit-text-fill-color: var(--color-scheme-1-bg); } .color-scheme-2 .text-highlight--outline em { -webkit-text-fill-color: var(--color-scheme-2-bg); } .color-scheme-3 .text-highlight--outline em { -webkit-text-fill-color: var(--color-scheme-3-bg); } .text-highlight--regular em { font-style: italic; } .text-highlight--serif em { font-family: serif; font-style: italic; } .text-highlight--handwrite em { font-family: cursive; font-style: italic; } .text-highlight--accent-color em { color: var(--color-sale-tag); } .base-extra-small-font-stack { font-size: max(calc(var(--type-base-size) * 0.7), 12px); } [class*='color-scheme-']:not(.color-scheme-none) { position: relative; z-index: 1; } [class*='color-scheme-']:not(.color-scheme-none) a:not(.btn) { color: currentColor; border-color: currentColor; } .index-section[class*='color-scheme-']:not(.color-scheme-none) { margin: 0; padding-top: var(--index-section-padding); padding-bottom: var(--index-section-padding); } .color-scheme-1 { color: var(--color-scheme-1-text); background-color: var(--color-scheme-1-bg); } .color-scheme-1 .btn { color: var(--color-scheme-1-bg); background-color: var(--color-scheme-1-text); } .color-scheme-1 .btn.color-scheme-reversed { background-color: var(--color-scheme-1-bg); color: var(--color-scheme-1-text); border-color: var(--color-scheme-1-text); } .color-scheme-2 { color: var(--color-scheme-2-text); background-color: var(--color-scheme-2-bg); } .color-scheme-2 .btn { color: var(--color-scheme-2-bg); background-color: var(--color-scheme-2-text); } .color-scheme-2 .btn.color-scheme-reversed { color: var(--color-scheme-2-text); background-color: var(--color-scheme-2-bg); border-color: var(--color-scheme-2-text); } .color-scheme-3 { color: var(--color-scheme-3-text); background-color: var(--color-scheme-3-bg); } .color-scheme-3 .btn { color: var(--color-scheme-3-bg); background-color: var(--color-scheme-3-text); } .color-scheme-3 .btn.color-scheme-reversed { color: var(--color-scheme-3-text); background-color: var(--color-scheme-3-bg); border-color: var(--color-scheme-3-text); } /*Force some elements to be specific colors when over a color scheme*/ [class*='color-scheme-']:not(.color-scheme-none) input, [class*='color-scheme-']:not(.color-scheme-none) textarea { color: var(--color-text-body); background-color: var(--color-body); } :root { --animate-duration: 1s; } [data-animate] { opacity: 0; transition-property: opacity, transform; transition-duration: var(--animate-duration), var(--animate-duration); transition-timing-function: ease-in-out, ease-in-out; } .no-js [data-animate] { opacity: 1; } [data-animate] { opacity: 0; } [ready] [data-animate] { opacity: 1; } [data-animate='fadein'] { opacity: 0; } [ready] [data-animate='fadein'] { opacity: 1; } [data-animate='fadeup'] { transform: translateY(5rem); } [ready] [data-animate='fadeup'] { transform: translateY(0); } [data-animate='fadedown'] { transform: translateY(-5rem); } [ready] [data-animate='fadedown'] { transform: translateY(0); } [data-animate='fadeleft'] { transform: translateX(-5rem); } [ready] [data-animate='fadeleft'] { transform: translateX(0); } [data-animate='faderight'] { transform: translateX(5rem); } [ready] [data-animate='faderight'] { transform: translateX(0); } [data-animate='zoomin'] { transform: scale(0.8); } [ready] [data-animate='zoomin'] { transform: scale(1); } [data-animate='zoomout'] { transform: scale(1.2); } [ready] [data-animate='zoomout'] { transform: scale(1); } [data-animate='rise-up'] { opacity: 0; } [data-animate='rise-up'] [ready] [data-animate='rise-up'] { animation: rise-up 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) forwards; } .image-wrap { background: var(--color-small-image-bg); overflow: hidden; } .image-wrap img:not([role='presentation']) { display: block; } .unload:before, .unload:after { content: ''; position: absolute; width: 100px; height: 3px; background: var(--color-body); left: 50%; top: 30%; margin: -1px 0 0 -50px; z-index: var(--z-index-loader); opacity: 0; } .no-js .unload:before, .no-js .unload:after { display: none; } .unload:before { background: var(--color-text-body); opacity: 1; } .unload:after { opacity: 0; animation: preloading 0.5s ease 0.3s infinite; } .loading { animation: placeholder-shimmer 1.3s linear 0.5s infinite; background-size: 300% 100%; background-image: linear-gradient(100deg, var(--color-large-image-bg) 40%, var(--color-large-image-bg-light) 63%, var(--color-large-image-bg) 79%); } .loading.loaded { animation: none; background-image: none; } .loading--delayed:before { animation-delay: 0.8s !important; animation-duration: 1s !important; } .loading--delayed:after { animation-delay: 1.3s !important; } .clearfix::after { clear: both; content: ''; display: table; } .is-transitioning { display: block !important; visibility: visible !important; } .visually-hidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .overlay::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-index-overlay, auto); } /*Keep dimensions but hide visually*/ .visually-invisible { opacity: 0 !important; } .show { display: block !important; } .hide { display: none !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } @media only screen and (max-width: 768px) { .small--show { display: block !important; } .small--hide { display: none !important; } .small--text-left { text-align: left !important; } .small--text-right { text-align: right !important; } .small--text-center { text-align: center !important; } } @media only screen and (min-width: 769px) { .medium-up--hide { display: none !important; } } @media (max-width: 769px) { .medium-down--hide { display: none !important; } } @media (min-width: 1189px) { .large-up--hide { display: none !important; } } @media (max-width: 1189px) { .large-down--hide { display: none !important; } } /* Shared styling for all images in our themes It's a work in progress and we're trying to move away from having to add specific styling for images in themes All images now have a base fade-in animation when they're loaded Motion & Streamline have settings to enable/disable animations for images */ .svg-mask is-land[data-image-type], .image-wrap:not(.image-wrap__thumbnail) is-land[data-image-type], .grid__image-ratio is-land[data-image-type], .countdown__background-image-wrapper is-land[data-image-type], .social-section__image-wrapper is-land[data-image-type], .fading-images__item-wrapper is-land[data-image-type] { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } img { border: 0 none; display: block; max-width: 100%; height: auto; } .image-element { opacity: 0; } .image-element[loading='eager'] { opacity: 1; } .template-giftcard .image-element { opacity: 1; } [data-animate_images='false'] .image-element { opacity: 1; } [data-media-gallery-layout='stacked'] .image-element { opacity: 1; } .image-element[data-animate='fadein'] { --animate-duration: 0.5s; /* * Gem's new stacked images will have the fade-in animation disabled */ } [data-media-gallery-layout='stacked'] .image-element[data-animate='fadein'] { animation: none; } /* * Remove animation from color scheme images */ .image-element.scheme-image[data-animate='fadein'] { animation: none; } /* Remove animation from eagerly loaded images */ .image-element[data-animate='fadein'][loading='eager'] { animation: none; } .image-element.hero__image[data-animate='fadein'] { animation: none; } /* This should ensure that images show up if JS is disabled */ .no-js .image-element { opacity: 1; } .image-wrap { position: relative; } .image-wrap img { width: 100%; object-fit: cover; height: auto; } .rte p[style*='text-align: center'] img, .rte div[style*='text-align: center'] img { margin-left: auto; margin-right: auto; } svg:not(:root) { overflow: hidden; } iframe { max-width: 100%; border: none; } .video-wrapper { position: relative; overflow: hidden; max-width: 100%; } .video-wrapper iframe, .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-wrapper--modal { background-color: #000; width: 1000px; } .grid__image-ratio { position: relative; background-color: var(--color-small-image-bg); } .grid__image-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .grid__image-ratio img.grid__image-contain { object-fit: contain; } .grid__image-ratio:before { content: ''; display: block; height: 0; width: 100%; } .grid__image-ratio .placeholder-svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .grid__image-ratio--object { opacity: 1; } .grid__image-ratio--wide:before { padding-bottom: 56.25%; } .grid__image-ratio--landscape:before { padding-bottom: 75%; } .grid__image-ratio--square:before { padding-bottom: 100%; } .grid__image-ratio--portrait:before { padding-bottom: 150%; } .image-fit { position: relative; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover'; z-index: 1; } .parallax-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .svg-mask { background: transparent !important; background-color: transparent !important; padding-bottom: 100% !important; position: relative !important; } .svg-mask .grid__image-ratio { background: transparent !important; background-color: transparent !important; } .svg-mask img, .svg-mask svg:not(.icon), .svg-mask video { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; height: 100% !important; position: absolute !important; object-fit: cover !important; } .svg-mask--landscape { padding-bottom: 56.25% !important; } .svg-mask--portrait { padding-bottom: 150% !important; } .svg-mask--square { padding-bottom: 100% !important; } .svg-mask--rounded-top img, .svg-mask--rounded-top svg:not(.icon), .svg-mask--rounded-top video { border-top-right-radius: 50%; border-top-left-radius: 50%; } .svg-mask--rounded img, .svg-mask--rounded svg:not(.icon), .svg-mask--rounded video { border-radius: 50%; } .svg-mask--star img, .svg-mask--star svg:not(.icon), .svg-mask--star video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTI4NCcgaGVpZ2h0PScxMjUxJyB2aWV3Qm94PScwIDAgMTI4NCAxMjUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J002NDIgMEw4MTkuMDA3IDI5MC40NDFMMTE1Ni40NSAyNDcuNzQ0TDEwMzkuNzMgNTY3LjIyTDEyODMuNSA4MDQuNDE5TDk2MC45NTYgOTEyLjM1OUw5MjcuNDk1IDEyNTAuODRMNjQyIDEwNjUuOTZMMzU2LjUwNCAxMjUwLjg0TDMyMy4wNDQgOTEyLjM1OUwwLjQ5NzQzNyA4MDQuNDE5TDI0NC4yNjggNTY3LjIyTDEyNy41NTUgMjQ3Ljc0NEw0NjQuOTkzIDI5MC40NDFMNjQyIDBaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTI4NCcgaGVpZ2h0PScxMjUxJyB2aWV3Qm94PScwIDAgMTI4NCAxMjUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J002NDIgMEw4MTkuMDA3IDI5MC40NDFMMTE1Ni40NSAyNDcuNzQ0TDEwMzkuNzMgNTY3LjIyTDEyODMuNSA4MDQuNDE5TDk2MC45NTYgOTEyLjM1OUw5MjcuNDk1IDEyNTAuODRMNjQyIDEwNjUuOTZMMzU2LjUwNCAxMjUwLjg0TDMyMy4wNDQgOTEyLjM1OUwwLjQ5NzQzNyA4MDQuNDE5TDI0NC4yNjggNTY3LjIyTDEyNy41NTUgMjQ3Ljc0NEw0NjQuOTkzIDI5MC40NDFMNjQyIDBaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); } .svg-mask--rounded-wave img, .svg-mask--rounded-wave svg:not(.icon), .svg-mask--rounded-wave video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA2NicgaGVpZ2h0PScxMDY2JyB2aWV3Qm94PScwIDAgMTA2NiAxMDY2JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J000OTIuNTA5IDMxLjgyOTJDNTAzLjA1NCAtMTAuMzE0OSA1NjIuOTQ2IC0xMC4zMTQ5IDU3My40OTEgMzEuODI5MlYzMS44MjkyQzU4Mi40MjQgNjcuNTMxIDYyOS44MzMgNzUuMDM5OCA2NDkuMzYxIDQzLjg0NThWNDMuODQ1OEM2NzIuNDEzIDcuMDIyODkgNzI5LjM3NCAyNS41MzA3IDcyNi4zOCA2OC44NzA3VjY4Ljg3MDdDNzIzLjg0MyAxMDUuNTg2IDc2Ni42MTEgMTI3LjM3NyA3OTQuODIzIDEwMy43NDRWMTAzLjc0NEM4MjguMTI1IDc1Ljg0NyA4NzYuNTggMTExLjA1MSA4NjAuMzM5IDE1MS4zNDRWMTUxLjM0NEM4NDYuNTgxIDE4NS40NzggODgwLjUyMiAyMTkuNDE5IDkxNC42NTYgMjA1LjY2MVYyMDUuNjYxQzk1NC45NDkgMTg5LjQyIDk5MC4xNTMgMjM3Ljg3NSA5NjIuMjU2IDI3MS4xNzdWMjcxLjE3N0M5MzguNjIzIDI5OS4zODkgOTYwLjQxNCAzNDIuMTU3IDk5Ny4xMjkgMzM5LjYyVjMzOS42MkMxMDQwLjQ3IDMzNi42MjYgMTA1OC45OCAzOTMuNTg3IDEwMjIuMTUgNDE2LjYzOVY0MTYuNjM5Qzk5MC45NiA0MzYuMTY3IDk5OC40NjkgNDgzLjU3NiAxMDM0LjE3IDQ5Mi41MDlWNDkyLjUwOUMxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA1NjIuOTQ2IDEwMzQuMTcgNTczLjQ5MVY1NzMuNDkxQzk5OC40NjkgNTgyLjQyNCA5OTAuOTYgNjI5LjgzMyAxMDIyLjE1IDY0OS4zNjFWNjQ5LjM2MUMxMDU4Ljk4IDY3Mi40MTMgMTA0MC40NyA3MjkuMzc0IDk5Ny4xMjkgNzI2LjM4VjcyNi4zOEM5NjAuNDE0IDcyMy44NDMgOTM4LjYyMyA3NjYuNjExIDk2Mi4yNTYgNzk0LjgyM1Y3OTQuODIzQzk5MC4xNTMgODI4LjEyNSA5NTQuOTQ5IDg3Ni41OCA5MTQuNjU2IDg2MC4zMzlWODYwLjMzOUM4ODAuNTIyIDg0Ni41ODEgODQ2LjU4MSA4ODAuNTIyIDg2MC4zMzkgOTE0LjY1NlY5MTQuNjU2Qzg3Ni41OCA5NTQuOTQ5IDgyOC4xMjUgOTkwLjE1MyA3OTQuODIzIDk2Mi4yNTZWOTYyLjI1NkM3NjYuNjExIDkzOC42MjMgNzIzLjg0MyA5NjAuNDE0IDcyNi4zOCA5OTcuMTI5Vjk5Ny4xMjlDNzI5LjM3NCAxMDQwLjQ3IDY3Mi40MTMgMTA1OC45OCA2NDkuMzYxIDEwMjIuMTVWMTAyMi4xNUM2MjkuODMzIDk5MC45NiA1ODIuNDI0IDk5OC40NjkgNTczLjQ5MSAxMDM0LjE3VjEwMzQuMTdDNTYyLjk0NiAxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA0OTIuNTA5IDEwMzQuMTdWMTAzNC4xN0M0ODMuNTc2IDk5OC40NjkgNDM2LjE2NyA5OTAuOTYgNDE2LjYzOSAxMDIyLjE1VjEwMjIuMTVDMzkzLjU4NyAxMDU4Ljk4IDMzNi42MjYgMTA0MC40NyAzMzkuNjIgOTk3LjEyOVY5OTcuMTI5QzM0Mi4xNTcgOTYwLjQxNCAyOTkuMzg5IDkzOC42MjMgMjcxLjE3NyA5NjIuMjU2Vjk2Mi4yNTZDMjM3Ljg3NSA5OTAuMTUzIDE4OS40MiA5NTQuOTQ5IDIwNS42NjEgOTE0LjY1NlY5MTQuNjU2QzIxOS40MTkgODgwLjUyMiAxODUuNDc4IDg0Ni41ODEgMTUxLjM0NCA4NjAuMzM5Vjg2MC4zMzlDMTExLjA1MSA4NzYuNTggNzUuODQ3IDgyOC4xMjUgMTAzLjc0NCA3OTQuODIzVjc5NC44MjNDMTI3LjM3NyA3NjYuNjExIDEwNS41ODYgNzIzLjg0MyA2OC44NzA3IDcyNi4zOFY3MjYuMzhDMjUuNTMwNyA3MjkuMzc0IDcuMDIyODcgNjcyLjQxMyA0My44NDU4IDY0OS4zNjFWNjQ5LjM2MUM3NS4wMzk4IDYyOS44MzMgNjcuNTMxIDU4Mi40MjQgMzEuODI5MiA1NzMuNDkxVjU3My40OTFDLTEwLjMxNDkgNTYyLjk0NiAtMTAuMzE0OSA1MDMuMDU0IDMxLjgyOTIgNDkyLjUwOVY0OTIuNTA5QzY3LjUzMSA0ODMuNTc2IDc1LjAzOTggNDM2LjE2NyA0My44NDU4IDQxNi42MzlWNDE2LjYzOUM3LjAyMjg2IDM5My41ODcgMjUuNTMwNyAzMzYuNjI2IDY4Ljg3MDcgMzM5LjYyVjMzOS42MkMxMDUuNTg2IDM0Mi4xNTcgMTI3LjM3NyAyOTkuMzg5IDEwMy43NDQgMjcxLjE3N1YyNzEuMTc3Qzc1Ljg0NyAyMzcuODc1IDExMS4wNTEgMTg5LjQyIDE1MS4zNDQgMjA1LjY2MVYyMDUuNjYxQzE4NS40NzggMjE5LjQxOSAyMTkuNDE5IDE4NS40NzggMjA1LjY2MSAxNTEuMzQ0VjE1MS4zNDRDMTg5LjQyIDExMS4wNTEgMjM3Ljg3NSA3NS44NDcgMjcxLjE3NyAxMDMuNzQ0VjEwMy43NDRDMjk5LjM4OSAxMjcuMzc3IDM0Mi4xNTcgMTA1LjU4NiAzMzkuNjIgNjguODcwN1Y2OC44NzA3QzMzNi42MjYgMjUuNTMwNyAzOTMuNTg3IDcuMDIyODcgNDE2LjYzOSA0My44NDU4VjQzLjg0NThDNDM2LjE2NyA3NS4wMzk4IDQ4My41NzYgNjcuNTMxIDQ5Mi41MDkgMzEuODI5MlYzMS44MjkyWicgZmlsbD0nI0E0OTVGQicvPjwvc3ZnPgo='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA2NicgaGVpZ2h0PScxMDY2JyB2aWV3Qm94PScwIDAgMTA2NiAxMDY2JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J000OTIuNTA5IDMxLjgyOTJDNTAzLjA1NCAtMTAuMzE0OSA1NjIuOTQ2IC0xMC4zMTQ5IDU3My40OTEgMzEuODI5MlYzMS44MjkyQzU4Mi40MjQgNjcuNTMxIDYyOS44MzMgNzUuMDM5OCA2NDkuMzYxIDQzLjg0NThWNDMuODQ1OEM2NzIuNDEzIDcuMDIyODkgNzI5LjM3NCAyNS41MzA3IDcyNi4zOCA2OC44NzA3VjY4Ljg3MDdDNzIzLjg0MyAxMDUuNTg2IDc2Ni42MTEgMTI3LjM3NyA3OTQuODIzIDEwMy43NDRWMTAzLjc0NEM4MjguMTI1IDc1Ljg0NyA4NzYuNTggMTExLjA1MSA4NjAuMzM5IDE1MS4zNDRWMTUxLjM0NEM4NDYuNTgxIDE4NS40NzggODgwLjUyMiAyMTkuNDE5IDkxNC42NTYgMjA1LjY2MVYyMDUuNjYxQzk1NC45NDkgMTg5LjQyIDk5MC4xNTMgMjM3Ljg3NSA5NjIuMjU2IDI3MS4xNzdWMjcxLjE3N0M5MzguNjIzIDI5OS4zODkgOTYwLjQxNCAzNDIuMTU3IDk5Ny4xMjkgMzM5LjYyVjMzOS42MkMxMDQwLjQ3IDMzNi42MjYgMTA1OC45OCAzOTMuNTg3IDEwMjIuMTUgNDE2LjYzOVY0MTYuNjM5Qzk5MC45NiA0MzYuMTY3IDk5OC40NjkgNDgzLjU3NiAxMDM0LjE3IDQ5Mi41MDlWNDkyLjUwOUMxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA1NjIuOTQ2IDEwMzQuMTcgNTczLjQ5MVY1NzMuNDkxQzk5OC40NjkgNTgyLjQyNCA5OTAuOTYgNjI5LjgzMyAxMDIyLjE1IDY0OS4zNjFWNjQ5LjM2MUMxMDU4Ljk4IDY3Mi40MTMgMTA0MC40NyA3MjkuMzc0IDk5Ny4xMjkgNzI2LjM4VjcyNi4zOEM5NjAuNDE0IDcyMy44NDMgOTM4LjYyMyA3NjYuNjExIDk2Mi4yNTYgNzk0LjgyM1Y3OTQuODIzQzk5MC4xNTMgODI4LjEyNSA5NTQuOTQ5IDg3Ni41OCA5MTQuNjU2IDg2MC4zMzlWODYwLjMzOUM4ODAuNTIyIDg0Ni41ODEgODQ2LjU4MSA4ODAuNTIyIDg2MC4zMzkgOTE0LjY1NlY5MTQuNjU2Qzg3Ni41OCA5NTQuOTQ5IDgyOC4xMjUgOTkwLjE1MyA3OTQuODIzIDk2Mi4yNTZWOTYyLjI1NkM3NjYuNjExIDkzOC42MjMgNzIzLjg0MyA5NjAuNDE0IDcyNi4zOCA5OTcuMTI5Vjk5Ny4xMjlDNzI5LjM3NCAxMDQwLjQ3IDY3Mi40MTMgMTA1OC45OCA2NDkuMzYxIDEwMjIuMTVWMTAyMi4xNUM2MjkuODMzIDk5MC45NiA1ODIuNDI0IDk5OC40NjkgNTczLjQ5MSAxMDM0LjE3VjEwMzQuMTdDNTYyLjk0NiAxMDc2LjMxIDUwMy4wNTQgMTA3Ni4zMSA0OTIuNTA5IDEwMzQuMTdWMTAzNC4xN0M0ODMuNTc2IDk5OC40NjkgNDM2LjE2NyA5OTAuOTYgNDE2LjYzOSAxMDIyLjE1VjEwMjIuMTVDMzkzLjU4NyAxMDU4Ljk4IDMzNi42MjYgMTA0MC40NyAzMzkuNjIgOTk3LjEyOVY5OTcuMTI5QzM0Mi4xNTcgOTYwLjQxNCAyOTkuMzg5IDkzOC42MjMgMjcxLjE3NyA5NjIuMjU2Vjk2Mi4yNTZDMjM3Ljg3NSA5OTAuMTUzIDE4OS40MiA5NTQuOTQ5IDIwNS42NjEgOTE0LjY1NlY5MTQuNjU2QzIxOS40MTkgODgwLjUyMiAxODUuNDc4IDg0Ni41ODEgMTUxLjM0NCA4NjAuMzM5Vjg2MC4zMzlDMTExLjA1MSA4NzYuNTggNzUuODQ3IDgyOC4xMjUgMTAzLjc0NCA3OTQuODIzVjc5NC44MjNDMTI3LjM3NyA3NjYuNjExIDEwNS41ODYgNzIzLjg0MyA2OC44NzA3IDcyNi4zOFY3MjYuMzhDMjUuNTMwNyA3MjkuMzc0IDcuMDIyODcgNjcyLjQxMyA0My44NDU4IDY0OS4zNjFWNjQ5LjM2MUM3NS4wMzk4IDYyOS44MzMgNjcuNTMxIDU4Mi40MjQgMzEuODI5MiA1NzMuNDkxVjU3My40OTFDLTEwLjMxNDkgNTYyLjk0NiAtMTAuMzE0OSA1MDMuMDU0IDMxLjgyOTIgNDkyLjUwOVY0OTIuNTA5QzY3LjUzMSA0ODMuNTc2IDc1LjAzOTggNDM2LjE2NyA0My44NDU4IDQxNi42MzlWNDE2LjYzOUM3LjAyMjg2IDM5My41ODcgMjUuNTMwNyAzMzYuNjI2IDY4Ljg3MDcgMzM5LjYyVjMzOS42MkMxMDUuNTg2IDM0Mi4xNTcgMTI3LjM3NyAyOTkuMzg5IDEwMy43NDQgMjcxLjE3N1YyNzEuMTc3Qzc1Ljg0NyAyMzcuODc1IDExMS4wNTEgMTg5LjQyIDE1MS4zNDQgMjA1LjY2MVYyMDUuNjYxQzE4NS40NzggMjE5LjQxOSAyMTkuNDE5IDE4NS40NzggMjA1LjY2MSAxNTEuMzQ0VjE1MS4zNDRDMTg5LjQyIDExMS4wNTEgMjM3Ljg3NSA3NS44NDcgMjcxLjE3NyAxMDMuNzQ0VjEwMy43NDRDMjk5LjM4OSAxMjcuMzc3IDM0Mi4xNTcgMTA1LjU4NiAzMzkuNjIgNjguODcwN1Y2OC44NzA3QzMzNi42MjYgMjUuNTMwNyAzOTMuNTg3IDcuMDIyODcgNDE2LjYzOSA0My44NDU4VjQzLjg0NThDNDM2LjE2NyA3NS4wMzk4IDQ4My41NzYgNjcuNTMxIDQ5Mi41MDkgMzEuODI5MlYzMS44MjkyWicgZmlsbD0nI0E0OTVGQicvPjwvc3ZnPgo='); } .svg-mask--splat-1 img, .svg-mask--splat-1 svg:not(.icon), .svg-mask--splat-1 video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA0OCcgaGVpZ2h0PScxMDUyJyB2aWV3Qm94PScwIDAgMTA0OCAxMDUyJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNTcwLjkwNSAxNTIuMzQ4QzY4OC40NDEgMTQwLjMzIDc3MS4xODcgLTI3LjkxNDggODg0Ljk0MSA0LjAyNTc1Qzk4Ny45OTcgMzIuOTYyMyAxMDA2LjIzIDE3OC4xODggMTAzMi42IDI4MS45ODVDMTA1NS43NiAzNzMuMTU0IDEwNTIuMjUgNDY4LjEzNCAxMDI1Ljc2IDU1OC4zODhDMTAwMS43IDY0MC4zMzYgOTQwLjI5OCA3MDAuNTM5IDg4OS41NTIgNzY5LjIxOUM4MzQuMDIyIDg0NC4zNzUgNzk1LjMgOTM0LjQ2IDcxMy45NSA5ODAuMzk3QzYyMi4zMTggMTAzMi4xNCA1MTAuMTA4IDEwNzMuNSA0MTAuNDM2IDEwMzkuNzdDMzExLjE4NiAxMDA2LjE4IDI3NS45MjcgODg3LjQwNSAyMDYuNjc3IDgwOC43MzdDMTM2LjcwMyA3MjkuMjQ4IDE0LjY1MzYgNjc5Ljk3OCAxLjIyNDE0IDU3NC45MDdDLTEyLjIxNDYgNDY5Ljc2MyA4OC4yODk2IDM4OC40MzMgMTQxLjIyMSAyOTYuNjEyQzE4OC42MTYgMjE0LjM5NCAyMDUuNjQzIDk0LjQ4MjEgMjk1LjU3NSA2NC4yODhDMzg4LjgwOSAzMi45ODUxIDQ3My4wNzEgMTYyLjM1MSA1NzAuOTA1IDE1Mi4zNDhaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA0OCcgaGVpZ2h0PScxMDUyJyB2aWV3Qm94PScwIDAgMTA0OCAxMDUyJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNTcwLjkwNSAxNTIuMzQ4QzY4OC40NDEgMTQwLjMzIDc3MS4xODcgLTI3LjkxNDggODg0Ljk0MSA0LjAyNTc1Qzk4Ny45OTcgMzIuOTYyMyAxMDA2LjIzIDE3OC4xODggMTAzMi42IDI4MS45ODVDMTA1NS43NiAzNzMuMTU0IDEwNTIuMjUgNDY4LjEzNCAxMDI1Ljc2IDU1OC4zODhDMTAwMS43IDY0MC4zMzYgOTQwLjI5OCA3MDAuNTM5IDg4OS41NTIgNzY5LjIxOUM4MzQuMDIyIDg0NC4zNzUgNzk1LjMgOTM0LjQ2IDcxMy45NSA5ODAuMzk3QzYyMi4zMTggMTAzMi4xNCA1MTAuMTA4IDEwNzMuNSA0MTAuNDM2IDEwMzkuNzdDMzExLjE4NiAxMDA2LjE4IDI3NS45MjcgODg3LjQwNSAyMDYuNjc3IDgwOC43MzdDMTM2LjcwMyA3MjkuMjQ4IDE0LjY1MzYgNjc5Ljk3OCAxLjIyNDE0IDU3NC45MDdDLTEyLjIxNDYgNDY5Ljc2MyA4OC4yODk2IDM4OC40MzMgMTQxLjIyMSAyOTYuNjEyQzE4OC42MTYgMjE0LjM5NCAyMDUuNjQzIDk0LjQ4MjEgMjk1LjU3NSA2NC4yODhDMzg4LjgwOSAzMi45ODUxIDQ3My4wNzEgMTYyLjM1MSA1NzAuOTA1IDE1Mi4zNDhaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); } .svg-mask--splat-2 img, .svg-mask--splat-2 svg:not(.icon), .svg-mask--splat-2 video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSdub25lJyBoZWlnaHQ9Jzg5Nicgdmlld0JveD0nMCAwIDk3NyA4OTYnIHdpZHRoPSc5NzcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggY2xpcC1ydWxlPSdldmVub2RkJyBkPSdtOTc1LjY4NCAzODEuODMyYzE3LjI2MyA5NS4wMzMtMTQwLjIxNCAxMjkuMjMxLTE4Ny4xNzcgMjEzLjY2Ni01Mi4xMzggOTMuNzM3IDguNTE1IDI4OC4wOTUtOTguMjUzIDI5OS41MDMtMTI3LjE3NSAxMy41ODctMTM4LjA0OS0xMTUuMzYyLTI2My0xNDIuNjMtMTA5LjU4NS0yMy45MTQtMjI0LjUzNSA5MS44OTQtMzA4LjcxNSAxNy44NjQtODQuNTQzMy03NC4zNDggMTE4LjY4OC0yMDcuMzczIDkzLjgyOS0zMTcuMDk0LTIyLjE0OS05Ny43Ni0yMDQuMTk2NzItMTA0Ljg3OC0yMTIuMDcxNDAxLTIwNC44LTYuODY1NTc5LTg3LjExOCAxMDcuMDIxNDAxLTEzNi4xNzcgMTgxLjU5NjQwMS0xODEuOTAxMyA2Ni4xNjMtNDAuNTY2OCAxNDIuNTMxLTc2LjcwNDkgMjE5LjA4Mi02My43Njk5NiA3MS4zODMgMTIuMDYxNzYgMTQwLjQ4NiA2Mi43NzM1NiAxNjguODUyIDEyOS4zMjAyNiA5LjkyOSAyMy4yOTMgMjUuODM5IDU0LjUyOCA2OS45MiA3OC41MTcgOTEuODU5IDQ5Ljk5IDMwNC44MTYgMCAzMzUuOTM3IDE3MS4zMjV6JyBmaWxsPScjYTQ5NWZiJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4='); mask-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSdub25lJyBoZWlnaHQ9Jzg5Nicgdmlld0JveD0nMCAwIDk3NyA4OTYnIHdpZHRoPSc5NzcnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggY2xpcC1ydWxlPSdldmVub2RkJyBkPSdtOTc1LjY4NCAzODEuODMyYzE3LjI2MyA5NS4wMzMtMTQwLjIxNCAxMjkuMjMxLTE4Ny4xNzcgMjEzLjY2Ni01Mi4xMzggOTMuNzM3IDguNTE1IDI4OC4wOTUtOTguMjUzIDI5OS41MDMtMTI3LjE3NSAxMy41ODctMTM4LjA0OS0xMTUuMzYyLTI2My0xNDIuNjMtMTA5LjU4NS0yMy45MTQtMjI0LjUzNSA5MS44OTQtMzA4LjcxNSAxNy44NjQtODQuNTQzMy03NC4zNDggMTE4LjY4OC0yMDcuMzczIDkzLjgyOS0zMTcuMDk0LTIyLjE0OS05Ny43Ni0yMDQuMTk2NzItMTA0Ljg3OC0yMTIuMDcxNDAxLTIwNC44LTYuODY1NTc5LTg3LjExOCAxMDcuMDIxNDAxLTEzNi4xNzcgMTgxLjU5NjQwMS0xODEuOTAxMyA2Ni4xNjMtNDAuNTY2OCAxNDIuNTMxLTc2LjcwNDkgMjE5LjA4Mi02My43Njk5NiA3MS4zODMgMTIuMDYxNzYgMTQwLjQ4NiA2Mi43NzM1NiAxNjguODUyIDEyOS4zMjAyNiA5LjkyOSAyMy4yOTMgMjUuODM5IDU0LjUyOCA2OS45MiA3OC41MTcgOTEuODU5IDQ5Ljk5IDMwNC44MTYgMCAzMzUuOTM3IDE3MS4zMjV6JyBmaWxsPScjYTQ5NWZiJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnLz48L3N2Zz4='); } .svg-mask--splat-3 img, .svg-mask--splat-3 svg:not(.icon), .svg-mask--splat-3 video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA3MicgaGVpZ2h0PScxMDUxJyB2aWV3Qm94PScwIDAgMTA3MiAxMDUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNjE4LjkxMyAyMTUuMzgzQzc0NS43NzUgMjI1LjY1NyA4NDEuNzUgMTguMDA0OSA5NjAuNjc4IDYzLjMyMjRDMTA2OS44NSAxMDQuOTI0IDEwNzAuNDMgMjcxLjI2MiAxMDcxLjk5IDM4OC4wMjhDMTA3My4yNSA0ODIuMjg4IDk3Mi4wMjYgNTUwLjg1NSA5NjguNDQ5IDY0NS4wNTVDOTY0LjE0NyA3NTguMzMxIDExMDMuNjkgODY4LjI5OCAxMDQ5Ljk2IDk2OC4xMjZDMTAwMC4yNCAxMDYwLjUgODU2LjQ2OCAxMDM4LjgyIDc1MS44NzYgMTA0Ny40MUM2NjQuMzE2IDEwNTQuNiA1NzMuNjY0IDEwNTQuNDQgNDk1Ljg3IDEwMTMuNjRDNDI0LjczMSA5NzYuMzMxIDQwOS44MzQgODc4LjY4OSAzNDMuNTgyIDgzMy4yNzJDMjQxLjM0OSA3NjMuMTkgNjYuMzk5NyA3OTMuNDE2IDEyLjExOTQgNjgyLjAyM0MtMzcuNTczOCA1ODAuMDQ0IDc5LjI3NTYgNDcyLjUzOCAxMTUuNDAyIDM2NS4wMDhDMTU2LjY3MiAyNDIuMTY0IDExNS4zMiA0MS44NTYzIDIzOS41OTggNC45MjU3M0MzODEuMDgxIC0zNy4xMTc2IDQ3MS43OTEgMjAzLjQ2OCA2MTguOTEzIDIxNS4zODNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTA3MicgaGVpZ2h0PScxMDUxJyB2aWV3Qm94PScwIDAgMTA3MiAxMDUxJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNNjE4LjkxMyAyMTUuMzgzQzc0NS43NzUgMjI1LjY1NyA4NDEuNzUgMTguMDA0OSA5NjAuNjc4IDYzLjMyMjRDMTA2OS44NSAxMDQuOTI0IDEwNzAuNDMgMjcxLjI2MiAxMDcxLjk5IDM4OC4wMjhDMTA3My4yNSA0ODIuMjg4IDk3Mi4wMjYgNTUwLjg1NSA5NjguNDQ5IDY0NS4wNTVDOTY0LjE0NyA3NTguMzMxIDExMDMuNjkgODY4LjI5OCAxMDQ5Ljk2IDk2OC4xMjZDMTAwMC4yNCAxMDYwLjUgODU2LjQ2OCAxMDM4LjgyIDc1MS44NzYgMTA0Ny40MUM2NjQuMzE2IDEwNTQuNiA1NzMuNjY0IDEwNTQuNDQgNDk1Ljg3IDEwMTMuNjRDNDI0LjczMSA5NzYuMzMxIDQwOS44MzQgODc4LjY4OSAzNDMuNTgyIDgzMy4yNzJDMjQxLjM0OSA3NjMuMTkgNjYuMzk5NyA3OTMuNDE2IDEyLjExOTQgNjgyLjAyM0MtMzcuNTczOCA1ODAuMDQ0IDc5LjI3NTYgNDcyLjUzOCAxMTUuNDAyIDM2NS4wMDhDMTU2LjY3MiAyNDIuMTY0IDExNS4zMiA0MS44NTYzIDIzOS41OTggNC45MjU3M0MzODEuMDgxIC0zNy4xMTc2IDQ3MS43OTEgMjAzLjQ2OCA2MTguOTEzIDIxNS4zODNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); } .svg-mask--splat-4 img, .svg-mask--splat-4 svg:not(.icon), .svg-mask--splat-4 video { -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTE4JyBoZWlnaHQ9JzUwNCcgdmlld0JveD0nMCAwIDUxOCA1MDQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00zMDMuNzkzIDg0LjY3M0MzMTkuOTQyIDEwOC41MjEgMzM1LjUzIDEyOC4yNTMgMzYwLjI4OSAxMzMuMzk3QzQwMy42NDMgMTQyLjQwNCA0NTQuNDIxIDk3LjczMiA0OTAuNDc5IDEyMy40NTdDNTIwLjMxMSAxNDQuNzM5IDUyMy44IDIxMC42NDYgNTEwLjQ3OSAyMzUuOTk5QzQ5NC45NzkgMjY1LjQ5OSA0NTguMjc4IDI4MC4wNCA0NDIuOTc5IDMwOS45OTlDNDI0LjYyOSAzNDUuOTMxIDQ1My43NCAzODQuOTY3IDQxMC40NzkgNDEzLjQ5OUMzNzcuNTc4IDQzNS4xOTggMzQxLjgxNiAzOTcuODcyIDMwMy43OTMgNDA4LjE5OEMyNDMuODg2IDQyNC40NjYgMjA5LjIgNTA0LjU0MSAxNDcuMTQ4IDUwMi45OTlDODkuMzQxNCA1MDEuNTYzIDMxLjUxMDMgNDU0LjgzNiAxMC40NzkzIDQwMC45MDhDLTEwLjc0ODEgMzQ2LjQ3NyAyLjQzNTM5IDI3NS4wNTYgNDEuMjE1IDIzMS4zNjZDNjkuNSAxOTkuNSAxMDUgMTg5IDEyMi40OCAxMzlDMTMxLjkzNSAxMTEuOTUzIDExOS40OCAzNiAxNzQuMzc3IDYuOTQ5OThDMjE5LjYxNyAtMTYuOTg5OSAyNjYuNDQyIDI0LjAyMjEgMzAzLjc5MyA4NC42NzNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNTE4JyBoZWlnaHQ9JzUwNCcgdmlld0JveD0nMCAwIDUxOCA1MDQnIGZpbGw9J25vbmUnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00zMDMuNzkzIDg0LjY3M0MzMTkuOTQyIDEwOC41MjEgMzM1LjUzIDEyOC4yNTMgMzYwLjI4OSAxMzMuMzk3QzQwMy42NDMgMTQyLjQwNCA0NTQuNDIxIDk3LjczMiA0OTAuNDc5IDEyMy40NTdDNTIwLjMxMSAxNDQuNzM5IDUyMy44IDIxMC42NDYgNTEwLjQ3OSAyMzUuOTk5QzQ5NC45NzkgMjY1LjQ5OSA0NTguMjc4IDI4MC4wNCA0NDIuOTc5IDMwOS45OTlDNDI0LjYyOSAzNDUuOTMxIDQ1My43NCAzODQuOTY3IDQxMC40NzkgNDEzLjQ5OUMzNzcuNTc4IDQzNS4xOTggMzQxLjgxNiAzOTcuODcyIDMwMy43OTMgNDA4LjE5OEMyNDMuODg2IDQyNC40NjYgMjA5LjIgNTA0LjU0MSAxNDcuMTQ4IDUwMi45OTlDODkuMzQxNCA1MDEuNTYzIDMxLjUxMDMgNDU0LjgzNiAxMC40NzkzIDQwMC45MDhDLTEwLjc0ODEgMzQ2LjQ3NyAyLjQzNTM5IDI3NS4wNTYgNDEuMjE1IDIzMS4zNjZDNjkuNSAxOTkuNSAxMDUgMTg5IDEyMi40OCAxMzlDMTMxLjkzNSAxMTEuOTUzIDExOS40OCAzNiAxNzQuMzc3IDYuOTQ5OThDMjE5LjYxNyAtMTYuOTg5OSAyNjYuNDQyIDI0LjAyMjEgMzAzLjc5MyA4NC42NzNaJyBmaWxsPScjQTQ5NUZCJy8+PC9zdmc+Cg=='); } .background-svg--wave { position: relative; padding-bottom: 100px !important; border-bottom: 0 !important; } @media only screen and (max-width: 768px) { .background-svg--wave { padding-bottom: 90px !important; } } .background-svg--wave:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 85px; background-repeat: no-repeat; background-size: cover; background-color: var(--color-body); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; } @media only screen and (max-width: 768px) { .background-svg--wave:after { -webkit-mask-size: 190%; mask-size: 190%; -webkit-mask-position: left bottom; mask-position: left bottom; } } .background-svg--wave-reverse { position: relative; padding-top: 100px !important; border-top: 0 !important; } @media only screen and (max-width: 768px) { .background-svg--wave-reverse { padding-top: 90px !important; } } .background-svg--wave-reverse:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 85px; background-repeat: no-repeat; background-size: cover; background-color: var(--color-body); -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1439 57' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 57L1439 57V-3.8147e-06C1400.62 -3.8147e-06 1313.56 90.4365 1126.12 20.9833C938.69 -48.4699 829.284 116.882 444.121 20.9833C220.961 -34.5797 28.1238 37.491 0 57Z' fill='currentColor'/%3E%3C/svg%3E%0A"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; transform: rotate(180deg); } @media only screen and (max-width: 768px) { .background-svg--wave-reverse:after { -webkit-mask-size: 190%; mask-size: 190%; -webkit-mask-position: left bottom; mask-position: left bottom; } } .rte { display: block; margin-bottom: calc(var(--gutter) / 4); } @media only screen and (min-width: 769px) { .rte { margin-bottom: calc(var(--gutter) / 2); } } .rte:last-child { margin-bottom: 0; } .rte+.rte { margin-top: var(--gutter); } .rte p, .rte ul, .rte ol, .rte table { margin-bottom: 15px; } @media only screen and (min-width: 769px) { .rte p, .rte ul, .rte ol, .rte table { margin-bottom: 25px; } } .rte p:last-child, .rte ul:last-child, .rte ol:last-child, .rte table:last-child { margin-bottom: 0; } .rte ul ul { margin-bottom: 0; } /*Add some top margin to headers from the rich text editor*/ .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { margin-top: 60px; margin-bottom: 25px; } .rte h1:first-child, .rte h2:first-child, .rte h3:first-child, .rte h4:first-child, .rte h5:first-child, .rte h6:first-child { margin-top: 0; } .rte h1 a, .rte h2 a, .rte h3 a, .rte h4 a, .rte h5 a, .rte h6 a { -webkit-text-decoration: none; text-decoration: none; } /*In case merchants paste meta tags into their content by accident*/ .rte meta:first-child+h1, .rte meta:first-child+h2, .rte meta:first-child+h3, .rte meta:first-child+h4, .rte meta:first-child+h5, .rte meta:first-child+h6 { margin-top: 0; } /*Mimic a paragraph tag because they're not always created*/ .rte>div { margin-bottom: calc(var(--gutter) / 2); } .rte>div:last-child { margin-bottom: 0; } .rte li { margin-bottom: 0; } .rte table { table-layout: fixed; } .rte--block { margin-bottom: 8px; } @media only screen and (min-width: 769px) { .rte--block { margin-bottom: 12px; } } .rte-setting>p:last-child { margin-bottom: 0; } .rte a, .rte-setting a { -webkit-text-decoration: none; text-decoration: none; } .rte img, .rte-setting img { height: auto; } .rte a:not(.rte__image):not(.btn), .rte-setting a:not(.rte__image):not(.btn) { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .rte a.rte__image:after, .rte-setting a.rte__image:after { content: none; } .text-center .rte ul, .text-center.rte ul, .text-center .rte ol, .text-center.rte ol { list-style-position: inside; margin-left: 0; } .rte--nomargin { margin-bottom: 0; } .float-grid { list-style: none; margin: 0; padding: 0; position: relative; margin-left: calc(var(--grid-gutter) * -1); } @media only screen and (max-width: 768px) { .float-grid { margin-left: calc(var(--grid-gutter-small) * -1); } html[dir='rtl'] .float-grid { margin-left: 0; margin-right: calc(var(--grid-gutter-small) * -1); } } html[dir='rtl'] .float-grid { margin-left: 0; margin-right: calc(var(--grid-gutter) * -1); } .grid--small { margin-left: -10px; } .grid--small .grid__item { padding-left: 10px; } .grid__item { float: left; padding-left: var(--grid-gutter); width: 100%; min-height: 1px; } @media only screen and (max-width: 768px) { .grid__item { padding-left: var(--grid-gutter-small); } html[dir='rtl'] .grid__item { padding-left: 0; padding-right: var(--grid-gutter-small); } } html[dir='rtl'] .grid__item { float: right; padding-left: 0; padding-right: var(--grid-gutter); } .grid--flush-bottom { margin-bottom: calc(var(--grid-gutter) * -1); overflow: auto; } .grid--flush-bottom>.grid__item { margin-bottom: var(--grid-gutter); } .grid--center { text-align: center; } .grid--center .grid__item { float: none; display: inline-block; vertical-align: top; text-align: left; } html[dir='rtl'] .grid--center .grid__item { text-align: right; } /* Flex grid for products, collections, search */ .new-grid { display: flex; flex-wrap: wrap; margin-left: calc(var(--product-grid-margin) * -1); margin-right: calc(var(--product-grid-margin) * -1); word-break: break-word; /*prevents elements ignoring flex properties*/ } .new-grid--center { justify-content: center; } .grid-item { flex: 0 0 100%; align-items: stretch; display: flex; margin-bottom: var(--product-grid-margin); padding-left: var(--product-grid-margin); padding-right: var(--product-grid-margin); } [data-view='custom-grid-item-width'] .grid-item.medium-up--one-sixth { flex: 0 auto; } [data-view='custom-grid-item-width'] .grid-item { flex: auto; } /* 6 per row, scrollable on mobile */ [data-view='scrollable'] .grid-item { flex: 0 0 calc(100% / 6); max-width: 250px; } /* 7 per row, scrollable on mobile (recently viewed) */ [data-view='scrollable-7'] .grid-item { flex: 0 0 calc(100% / 7); } /* 5 per row, scrollable on mobile */ [data-view='scrollable-5'] .grid-item { flex: 0 0 calc(100% / 5); } /* 5 per row, 2 mobile */ [data-view='super-xsmall'] .grid-item { flex: 0 0 16%; } [data-view='xsmall'] .grid-item { flex: 0 0 20%; } /* 4 per row, 2 per row mobile */ [data-view='small'] .grid-item { flex: 0 0 25%; } /* 3 per row, 3 per row mobile */ [data-view='medium'] .grid-item { flex: 0 0 calc(100% / 4); } /* 2 per row, 2 per row mobile */ [data-view='large'] .grid-item { flex: 0 0 calc(100% / 3); } /* 6 per row, 3 mobile */ [data-view='6-3'] .grid-item { flex: 0 0 calc(100% / 6); } [data-view='6-2'] .grid-item { flex: 0 0 calc(100% / 6); } [data-view='8-2'] .grid-item { flex: 0 0 calc(100% / 8) !important; flex-basis: calc(100% / 8) !important; } [data-view='3-1'] .grid-item { flex: 0 0 calc(100% / 3); } @media only screen and (max-width: 768px) { [data-view='xsmall'] .grid-item { flex: 0 0 50%; } [data-view='small'] .grid-item { flex: 0 0 50%; } [data-view='medium'] .grid-item { flex: 0 0 50%; } [data-view='large'] .grid-item { flex: 0 0 100%; } [data-view='subcollections'] .grid-item { flex: 0 0 28%; } [data-view='6-3'] .grid-item { flex: 0 0 calc(100% / 3); } [data-view='6-2'] .grid-item { flex: 0 0 50%; } [data-view='3-1'] .grid-item { flex: 0 0 100%; } } .grid-item__content { position: relative; display: flex; flex-direction: column; text-align: left; width: 100%; /*required to prevent double grid border styles*/ background-color: var(--color-body); } html[dir='rtl'] .grid-item__content { text-align: right; } .grid-item__link { display: block; width: 100%; } [data-grid-style='grey-round'] .grid-item__link { overflow: hidden; border-radius: var(--product-radius) var(--product-radius) 0 0; } [data-grid-style='white-round'] .grid-item__link { overflow: hidden; border-radius: var(--product-radius); } [data-grid-style='grey-round'] [data-view='list'] .grid-item__link { border-radius: var(--product-radius) 0 0 var(--product-radius); } [data-grid-style='white-round'] [data-view='list'] .grid-item__link { border-radius: var(--product-radius) 0 0 var(--product-radius); } [data-view=large] .grid-item__meta { margin: 18px; } [data-view=medium] .grid-item__meta { margin: 20px 0 0 0; } [data-view=list] .grid-item__meta { margin: 0 0 0 10px; } @media only screen and (min-width: 769px) { .grid-item__meta { margin: 16px 0 0 0; } } .scrollable-grid { overflow: hidden; overflow-x: auto; flex-wrap: nowrap; margin: -20px -10px 0 0; padding: 20px 10px 0 var(--grid-thickness); } .scrollable-grid .grid-item { flex: 0 0 25%; /*Specific sizes for cart drawer popover*/ } .site-header__cart .scrollable-grid .grid-item { min-width: 150px; } .new-grid[data-type='subcollections'] { margin-bottom: 20px; padding-bottom: 5px; } .new-grid[data-type='subcollections']:empty { border: 0; margin-bottom: 0; padding-bottom: 0; } @media only screen and (max-width: 768px) { .scrollable-grid--small { overflow: hidden; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; margin: calc(var(--product-grid-margin) * -1) calc(var(--page-width-gutter-small) * -1) 0 0; padding: var(--product-grid-margin) var(--page-width-gutter-small) 0 0; } .page-width--flush-small .scrollable-grid--small { margin-left: 0; margin-right: 0; padding-left: var(--page-width-gutter-small); } .scrollable-grid--small .grid-item { flex: 0 0 45%; } /*Some one-off sizing*/ .scrollable-grid--small[data-type='subcollections'] { margin-left: calc(var(--grid-gutter-small) * -1); margin-bottom: 0; padding-bottom: 10px; } .scrollable-grid--small[data-type='subcollections'] .grid-item { flex: 0 0 30%; } /*Create faux-element to make enough right-side padding inside scrollable div*/ [data-view*='scrollable']:after { content: ''; display: block; height: 1px; min-width: var(--page-width-padding); } } /* Grid columns */ .one-whole { width: 100%; } .one-half { width: 50%; } .one-third { width: 33.33333%; } .two-thirds { width: 66.66667%; } .one-quarter { width: 25%; } .two-quarters { width: 50%; } .three-quarters { width: 75%; } .one-fifth { width: 20%; } .two-fifths { width: 40%; } .three-fifths { width: 60%; } .four-fifths { width: 80%; } .one-sixth { width: 16.66667%; } .two-sixths { width: 33.33333%; } .three-sixths { width: 50%; } .four-sixths { width: 66.66667%; } .five-sixths { width: 83.33333%; } @media only screen and (max-width: 768px) { .small--one-whole { width: 100%; } .small--one-half { width: 50%; } .small--one-third { width: 33.33333%; } .small--two-thirds { width: 66.66667%; } .grid--uniform .small--one-half:nth-of-type(odd), .grid--uniform .small--one-third:nth-of-type(3n + 1) { clear: both; } .small--one-quarter { width: 25%; } .small--two-quarters { width: 50%; } .small--three-quarters { width: 75%; } .grid--uniform .small--one-quarter:nth-of-type(4n + 1) { clear: both; } .small--one-fifth { width: 20%; } .small--two-fifths { width: 40%; } .small--three-fifths { width: 60%; } .small--four-fifths { width: 80%; } .grid--uniform .small--one-fifth:nth-of-type(5n + 1) { clear: both; } .small--one-sixth { width: 16.66667%; } .small--two-sixths { width: 33.33333%; } .small--three-sixths { width: 50%; } .small--four-sixths { width: 66.66667%; } .small--five-sixths { width: 83.33333%; } .grid--uniform .small--one-sixth:nth-of-type(6n + 1), .grid--uniform .small--three-sixths:nth-of-type(odd), .grid--uniform .small--two-sixths:nth-of-type(3n + 1) { clear: both; } } @media only screen and (min-width: 769px) { .medium-up--one-whole { width: 100%; } .medium-up--one-half { width: 50%; } .medium-up--one-third { width: 33.33333%; } .medium-up--two-thirds { width: 66.66667%; } .grid--uniform .medium-up--one-half:nth-of-type(odd), .grid--uniform .medium-up--one-third:nth-of-type(3n + 1) { clear: both; } .medium-up--one-quarter { width: 25%; } .medium-up--two-quarters { width: 50%; } .medium-up--three-quarters { width: 75%; } .grid--uniform .medium-up--one-quarter:nth-of-type(4n + 1) { clear: both; } .medium-up--one-fifth { width: 19.7%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; padding-left: 17px; } .grid--uniform .medium-up--one-fifth:nth-of-type(5n + 1) { clear: both; } .medium-up--one-sixth { width: 16.66667%; } .medium-up--two-sixths { width: 33.33333%; } .medium-up--three-sixths { width: 50%; } .medium-up--four-sixths { width: 66.66667%; } .medium-up--five-sixths { width: 83.33333%; } .grid--uniform .medium-up--one-sixth:nth-of-type(6n + 1), .grid--uniform .medium-up--three-sixths:nth-of-type(odd), .grid--uniform .medium-up--two-sixths:nth-of-type(3n + 1) { clear: both; } } @media(max-width: 768px) { .collection-list { display: flex; flex-wrap: wrap; gap: 4px; } .collection-list .grid__item { width: calc(50% - 2px); padding: 0; margin: 0; } .collection-list .image-wrap { margin-bottom: 0; padding-bottom: 0; } .collection-list .image-wrap is-land { position: relative !important; } .collection-list .image-wrap is-land img { height: auto !important; } ; } button { overflow: visible; color: currentColor; } button[disabled], html input[disabled] { cursor: default; } .btn, .rte .btn, .shopify-payment-button .shopify-payment-button__button--unbranded { line-height: 1.42; -webkit-text-decoration: none; text-decoration: none; text-align: center; white-space: normal; font-size: calc(var(--type-base-size) + 2px); font-weight: var(--type-header-weight); display: inline-block; padding: var(--button-padding); margin: 0; width: auto; min-width: 90px; vertical-align: middle; cursor: pointer; border: 1px solid transparent; -webkit-user-select: none; user-select: none; -webkit-appearance: none; -moz-appearance: none; color: #141414; background: #FFF; border-radius: 8px; border: 1px solid #5A31F4; text-align: center; leading-trim: both; text-edge: cap; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; } .btn:hover, .rte .btn:hover, .shopify-payment-button .shopify-payment-button__button--unbranded:hover { color: var(--color-button-primary-text); background-color: var(--color-button-primary); } .btn[disabled], .rte .btn[disabled], .shopify-payment-button .shopify-payment-button__button--unbranded[disabled], .btn.disabled, .rte .btn.disabled, .shopify-payment-button .shopify-payment-button__button--unbranded.disabled { cursor: default; color: var(--disabled-grey-text); background-color: var(--disabled-grey); } .btn[disabled]:hover, .rte .btn[disabled]:hover, .shopify-payment-button .shopify-payment-button__button--unbranded[disabled]:hover, .btn.disabled:hover, .rte .btn.disabled:hover, .shopify-payment-button .shopify-payment-button__button--unbranded.disabled:hover { color: var(--disabled-grey-text); background-color: var(--disabled-grey); } /*Mimic the .btn hover style for Shopify Payment Button*/ .shopify-payment-button .shopify-payment-button__button--unbranded:hover:not([disabled]) { color: var(--color-button-primary-text); background-color: var(--color-button-primary); } /*Fix height of Shopify Payment Button*/ .shopify-payment-button .shopify-payment-button__button--unbranded { height: auto; } /*More payment options button color*/ .shopify-payment-button__more-options { color: inherit; } .product-block.block-buy-buttons { margin-top: 28px; margin-bottom: 16px; } .product-block.block-buy-buttons button { height: 52px; background: #F33; color: white; border: none; text-transform: uppercase; } .btn--secondary, .block-buy-buttons[data-show-dynamic-checkout] .btn, .rte .btn--secondary { color: #FFF; background-color: #F33; border-radius: 8px; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; border: none; } .block-buy-buttons[data-show-dynamic-checkout] .btn span::before { content: ""; display: inline-block; margin-top: 2px; width: 16px; height: 16px; background-image: url('/assets/shopping-cart.svg'); background-size: contain; background-repeat: no-repeat; } main.page-product { width: 100%; background: url(https://cdn.shopify.com/s/files/1/0916/2742/2005/files/magic_bus_-_backrgound.png?v=1749563696); background-size: cover; background-position: center; background-repeat: no-repeat; } .btn--secondary:hover, .block-buy-buttons[data-show-dynamic-checkout] .btn:hover, .rte .btn--secondary:hover { background-color: var(--color-body); color: var(--color-text-body); border: 1px solid #f33; } .btn--secondary[disabled], .block-buy-buttons[data-show-dynamic-checkout] .btn[disabled], .rte .btn--secondary[disabled], .btn--secondary.disabled, .block-buy-buttons[data-show-dynamic-checkout] .btn.disabled, .rte .btn--secondary.disabled { cursor: default; color: var(--disabled-grey-text); background-color: var(--disabled-grey); border-color: var(--disabled-border); } .btn--circle { padding: 8px; border-radius: 50%; min-width: 0; line-height: 1; } .btn--circle .icon { width: 18px; height: 18px; } .btn--circle:before, .btn--circle:after { content: none; background: none; width: auto; /*for photoswipe close button*/ } .btn--circle.btn--large .icon { width: 30px; height: 30px; } .btn--circle.btn--large { padding: 15px; } .btn--circle.btn--loading { text-indent: unset; } @media only screen and (max-width: 768px) { .btn--circle.btn--loading:before { width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-width: 2px; } } .btn--circle.btn--loading svg { opacity: 0; } .btn--icon { min-width: 0; padding: 6px; } .btn--icon .icon { display: block; width: 23px; height: 23px; } .btn--small { padding: 8px 14px; font-size: calc(var(--type-base-size) - 2px); } .btn--large { padding: 15px 20px; } .btn--full { width: 100%; } .btn--inverse { background-color: transparent; color: #fff; border: 2px solid #fff; } .btn--inverse:hover, .btn--inverse:focus { background-color: transparent; } .btn--loading { position: relative; text-indent: -9999px; background-color: var(--color-button-primary-dim); color: var(--color-button-primary-dim); } .btn--loading:hover, .btn--loading:active { background-color: var(--color-button-primary-dim); color: var(--color-button-primary-dim); } .btn--loading:before { content: ''; display: block; width: 22px; height: 22px; position: absolute; left: 50%; top: 50%; margin-left: -11px; margin-top: -11px; border-radius: 50%; border: 3px solid; border-color: var(--color-button-primary-text); border-top-color: transparent; animation: spin 1s infinite linear; } /*Alt loading state*/ .btn--loading.btn--secondary, .block-buy-buttons[data-show-dynamic-checkout] .btn--loading { color: var(--color-text-body); background: transparent; } .btn--loading.btn--secondary:before, .block-buy-buttons[data-show-dynamic-checkout] .btn--loading:before { border-color: var(--color-text-body); border-top-color: transparent; } .collapsible-trigger-btn { text-align: left; display: block; width: 100%; padding: 19px 0; font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 3px); } @media only screen and (max-width: 768px) { .collapsible-trigger-btn { padding: 12px 17px 12px 0; font-size: calc(var(--type-base-size) + 1px); } } .collapsible-content__inner { padding: 0 0 15px; } @media only screen and (max-width: 768px) { .collapsible-content__inner { padding: 0 0 12px; } } .collapsible-trigger-btn--borders { border-bottom: 1px solid; border-color: var(--color-border); } .collapsible-trigger-btn--borders.is-open { border-color: transparent; } .collapsible-content+.collapsible-trigger-btn--borders { margin-top: -1px; } .collapsible-trigger-btn--borders+.collapsible-content--expanded { margin-bottom: var(--gutter); } .collapsible-trigger-btn--borders+.collapsible-content--expanded:last-child { margin-bottom: -1px; } .collapsible-trigger-btn--borders-top { border-top: 1px solid; border-top-color: var(--color-border); } /*============================================================================ Button styles when additional quick checkout buttons are enabled on product page ==============================================================================*/ .shopify-payment-button { margin-top: 12px; } .shopify-payment-button .shopify-payment-button__button--unbranded { display: block; width: 100%; transition: none; } .payment-buttons .cart__checkout, .payment-buttons .add-to-cart, .payment-buttons .shopify-payment-button, .payment-buttons .shopify-payment-button__button--unbranded { min-height: 54px; } .add-to-cart.btn--secondary { border: 1px solid; border-color: var(--color-text-body); } .add-to-cart.btn--secondary.disabled, .add-to-cart.btn--secondary[disabled] { border-color: var(--disabled-border); } .shopify-payment-button__button--hidden { display: none !important; } form { margin: 0; } .form-vertical { margin-bottom: calc(var(--gutter) / 2); } .form-vertical label { text-align: left; } [dir='rtl'] .form-vertical label { text-align: right; } button, input, textarea { -webkit-appearance: none; -moz-appearance: none; } button { background: none; border: none; display: inline-block; cursor: pointer; } fieldset { border: 1px solid; border-color: var(--color-border); padding: calc(var(--gutter) / 2); } legend { border: 0; padding: 0; } button, input[type='submit'] { cursor: pointer; } input, textarea, select { border: 1px solid; border-color: var(--color-border); max-width: 100%; padding: 8px 10px; border-radius: var(--input-radius); } input[disabled], textarea[disabled], select[disabled], input.disabled, textarea.disabled, select.disabled { cursor: default; background-color: var(--disabled-grey); border-color: var(--disabled-border); } input.input-full, textarea.input-full, select.input-full { width: 100%; } textarea { min-height: 100px; } input[type='checkbox'], input[type='radio'] { margin: 0 10px 0 0; padding: 0; width: auto; } input[type='checkbox'] { -webkit-appearance: checkbox; -moz-appearance: checkbox; } .tag-list, .tag-list li { list-style: none !important; } input[type='radio'] { -webkit-appearance: radio; -moz-appearance: radio; } input[type='image'] { padding-left: 0; padding-right: 0; } select, .faux-select { -webkit-appearance: none; appearance: none; background-color: #fff; color: #000; padding: 8px 28px 8px 8px; text-indent: 0.01px; text-overflow: ''; cursor: pointer; text-align: left; border: 1px solid; border-color: var(--color-border); } select { background-position: right center; background-image: var(--url-ico-select); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; } .faux-select .icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; } /*Force option color (affects IE and some Firefox versions)*/ option { color: #000; background-color: #fff; } option[disabled] { color: #ccc; } select::-ms-expand { display: none; } label[for] { cursor: pointer; } .form-vertical input, .form-vertical select, .form-vertical textarea { display: block; margin-bottom: 30px; } .form-vertical input[type='checkbox'], .form-vertical input[type='radio'], .form-vertical .btn { display: inline-block; } .form-vertical .btn:not(:last-child) { margin-bottom: 30px; } small { display: block; } input.error, textarea.error { border-color: var(--error-red); background-color: var(--error-red-bg); color: var(--error-red); } label.error { color: var(--error-red); } /* Form Notes */ .note, .errors { border-radius: var(--input-radius); padding: 6px 12px; margin-bottom: calc(var(--gutter) / 2); border: 1px solid transparent; text-align: left; } .note ul, .errors ul, .note ol, .errors ol { margin-top: 0; margin-bottom: 0; } .note li:last-child, .errors li:last-child { margin-bottom: 0; } .note p, .errors p { margin-bottom: 0; } .note { border-color: var(--color-border); } .errors ul { list-style: disc outside; margin-left: 20px; } .note--success { color: var(--success-green); background-color: var(--success-green-bg); border-color: var(--success-green); } .note--success a { color: var(--success-green); -webkit-text-decoration: underline; text-decoration: underline; } .note--success a:hover { -webkit-text-decoration: none; text-decoration: none; } .form-error, .errors { color: var(--error-red); background-color: var(--error-red-bg); border-color: var(--error-red); } .form-error a, .errors a { color: var(--error-red); -webkit-text-decoration: underline; text-decoration: underline; } .form-error a:hover, .errors a:hover { -webkit-text-decoration: none; text-decoration: none; } ::-webkit-input-placeholder { color: inherit; opacity: 0.5; } :-moz-placeholder { color: inherit; opacity: 0.5; } :-ms-input-placeholder { color: inherit; opacity: 0.5; } ::-ms-input-placeholder { color: inherit; opacity: 1; } input, textarea, select { background-color: inherit; color: inherit; } input[disabled], textarea[disabled], select[disabled], input.disabled, textarea.disabled, select.disabled { background-color: var(--disabled-grey); border-color: transparent; } input:active, textarea:active, select:active, input:focus, textarea:focus, select:focus { border: 1px solid; border-color: var(--color-text-body); } input[type='image'] { background-color: transparent; } a { color: var(--color-text-body); -webkit-text-decoration: none; text-decoration: none; background: transparent; } a:hover { color: var(--color-text-body); } /*Force an input/button to look like a text link*/ .text-link { display: inline; border: 0 none; background: none; padding: 0; margin: 0; color: currentColor; background: transparent; } .text-link:hover { color: currentColor; } /*Links in RTE*/ .rte a, .shopify-policy__container a, .shopify-email-marketing-confirmation__container a { color: var(--color-link); } ul, ol { margin: 0 0 calc(var(--gutter) / 2) var(--gutter); padding: 0; text-rendering: optimizeLegibility; } ol ol { list-style: lower-alpha; } ol { list-style: decimal; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 20px; } li { margin-bottom: 0.25em; } ul.square { list-style: square outside; } ul.disc { list-style: disc outside; } ol.alpha { list-style: lower-alpha outside; } .no-bullets { list-style: none outside; margin-left: 0; } .inline-list { padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; } .inline-list li { display: block; margin-bottom: 0; } .inline-list--no-wrap { flex-wrap: nowrap; } table { width: 100%; border-spacing: 1px; position: relative; border: 0 none; background: var(--color-border); } .table-wrapper { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; } td, th { border: 0 none; text-align: left; padding: 10px 15px; background: var(--color-body); } html[dir='rtl'] td, html[dir='rtl'] th { text-align: right; } th, .table__title { font-weight: var(--type-header-weight); } .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; transition: height 0.35s; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } .flickity-enabled.is-draggable { -webkit-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } .flickity-enabled.is-draggable[data-arrows='true'] .flickity-viewport { cursor: default; } .flickity-enabled.is-draggable[data-arrows='true'] .flickity-viewport.is-pointer-down { cursor: default; } .flickity-button { position: absolute; border: none; color: #141414; background: #FFFFFF99; backdrop-filter: blur(4px); transition-duration: .2s; transition-timing-function: ease-in-out; } @media (hover:hover) { .flickity-button:hover { background-color: #D9D9D930; } } .hero .flickity-button { box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); color: #fff; background-color: #433C3B; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); padding: 30px; height: 64px; width: 68px; } .flickity-button:hover { cursor: pointer; opacity: 1; } .flickity-button:disabled { display: none; cursor: auto; pointer-events: none; } .flickity-prev-next-button { top: 45%; width: 32px; height: 54px; transform: translateY(-50%); /*Smaller arrows on mobile*/ } @media only screen and (max-width: 768px) { .flickity-prev-next-button { width: 33px; height: 33px; } } .flickity-prev-next-button:active { transform: translateY(-50%) scale(1); transition: transform 0.05s ease-out; } .flickity-previous { left: 0; } .flickity-next { right: 0; } .flickity-rtl .flickity-previous { left: auto; right: 10px; } .flickity-rtl .flickity-next { right: auto; left: 10px; } .flickity-button-icon { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; fill: currentColor; } .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; color: #FF3333; z-index: 2; } .hero .flickity-page-dots { bottom: 20px; color: #fff; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; vertical-align: middle; width: 9px; height: 9px; margin: 0 5px; border-radius: 100%; cursor: pointer; background-color: #D9D9D9; } .flickity-page-dots .dot:hover { opacity: 0.6; } .flickity-page-dots .dot.is-selected { opacity: 1; background-color: #FF3333; } .flickity-enabled.is-fade .flickity-slider>* { pointer-events: none; z-index: 0; } .flickity-enabled.is-fade .flickity-slider>.is-selected { pointer-events: auto; z-index: 1; } /* Hero specific styles for flickity dots/arrows */ .hero[data-arrows='true'] { overflow: visible; } .hero[data-arrows='true'] .flickity-previous { top: 45%; bottom: 0; transform: none; z-index: 2; z-index: 2; border-bottom-right-radius: 50%; border-top-right-radius: 50%; } .hero[data-arrows='true'] .flickity-prev-next-button:hover { transform: scale(1.12); } .hero[data-arrows='true'] .flickity-prev-next-button:active { transform: scale(1); } .hero[data-arrows='true'] .flickity-previous { left: 0px; right: auto; } .hero[data-arrows='true'] .flickity-next { right: 0px; border-bottom-left-radius: 50%; border-top-left-radius: 50%; transform: none; } .hero.flickity-rtl[data-arrows='true'] .flickity-previous { right: auto; left: 90px; } .hero.flickity-rtl[data-arrows='true'] .flickity-next { right: auto; left: 40px; } @media only screen and (max-width: 768px) { .hero[data-arrows='true'] .flickity-prev-next-button { bottom: -16px; } .hero[data-arrows='true'] .flickity-previous { right: 60px; } /* .hero[data-arrows='true'] .flickity-next { right: 20px; } */ .hero.flickity-rtl[data-arrows='true'] .flickity-previous { left: 60px; } .hero.flickity-rtl[data-arrows='true'] .flickity-next { left: 20px; } } /*Change dots to bars*/ .hero[data-bars='true'] .flickity-page-dots { bottom: 0; height: 6px; line-height: 6px; z-index: 2; } [data-bars='true'] .flickity-page-dots .dot { position: relative; border-radius: 0; width: 120px; height: 6px; border: 0; opacity: 1; vertical-align: top; background: none; overflow: hidden; } .hero .flickity-page-dots .dot { width: 12px; height: 12px; } .hero .flickity-page-dots .dot:not(.is-selected) { background: #FFFFFF66; border: 1px solid #fff; } @media only screen and (max-width: 768px) { [data-bars='true'] .flickity-page-dots .dot { width: 45px; } } [data-bars='true'] .flickity-page-dots .dot:before, [data-bars='true'] .flickity-page-dots .dot:after { content: ''; display: block; position: absolute; left: 0; height: 100%; width: 100%; } [data-bars='true'] .flickity-page-dots .dot:before { opacity: 0.1; background-color: #000; } [data-bars='true'] .flickity-page-dots .dot:hover:before { opacity: 0.2; } [data-bars='true'] .flickity-page-dots .dot:after { transform: translateX(-100%); transition: none; background-color: currentColor; } [data-bars='true'] .flickity-page-dots .dot.is-selected:after { animation: slideshowBars 0s linear forwards; } /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; touch-action: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } /* Wrapper for all connect elements. */ .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; right: 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -webkit-transform-style: preserve-3d; transform-origin: 0 0; transform-style: flat; } .noUi-connect { height: 100%; width: 100%; } .noUi-origin { height: 10%; width: 10%; } /* Offset direction */ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin { left: 0; right: auto; } /* Give origins 0 height/width so they don't interfere with clicking the * connect elements. */ .noUi-vertical .noUi-origin { width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; } .noUi-touch-area { height: 100%; width: 100%; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; right: -17px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; right: -6px; top: -17px; } .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle { left: -17px; right: auto; } /* Styling; * Giving the connect element a border radius causes issues with using transform: scale */ .noUi-target { background: #fafafa; border-radius: 4px; border: 1px solid #d3d3d3; box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb; } .noUi-connects { border-radius: 3px; } .noUi-connect { background: #3fb8af; } /* Handles and cursors; */ .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; cursor: default; box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb; } .noUi-active { box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb; } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ''; display: block; position: absolute; height: 14px; width: 1px; background: #e8e7e6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled] .noUi-connect { background: #b8b8b8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } /* Base; * */ .noUi-pips, .noUi-pips * { box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } /* Values; * */ .noUi-value { position: absolute; white-space: nowrap; text-align: center; } .noUi-value-sub { color: #ccc; font-size: 10px; } /* Markings; * */ .noUi-marker { position: absolute; background: #ccc; } .noUi-marker-sub { background: #aaa; } .noUi-marker-large { background: #aaa; } /* Horizontal layout; * */ .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .noUi-value-horizontal { transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 15px; } /* Vertical layout; * */ .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { transform: translate(0, -50%); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { transform: translate(0, -50%); top: 50%; right: 120%; } .noUi-horizontal .noUi-origin>.noUi-tooltip { transform: translate(50%, 0); left: auto; bottom: 10px; } .noUi-vertical .noUi-origin>.noUi-tooltip { transform: translate(0, -18px); top: auto; right: 28px; } /* A place for CSS rules that probably should be part of a component but require duplicated code to be abstracted to a new component or general refactoring. */ /*Animate hamburger icon when nav open*/ .mobile-nav-trigger path, .site-nav__compress-menu path { transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } .mobile-nav-trigger[aria-expanded='true'] path:nth-child(1), .site-nav__compress-menu[aria-expanded='true'] path:nth-child(1), .mobile-nav-trigger.is-active path:nth-child(1), .site-nav__compress-menu.is-active path:nth-child(1) { transform: rotate(45deg); transform-origin: 65% 36%; } .mobile-nav-trigger[aria-expanded='true'] path:nth-child(2), .site-nav__compress-menu[aria-expanded='true'] path:nth-child(2), .mobile-nav-trigger.is-active path:nth-child(2), .site-nav__compress-menu.is-active path:nth-child(2) { opacity: 0; } .mobile-nav-trigger[aria-expanded='true'] path:nth-child(3), .site-nav__compress-menu[aria-expanded='true'] path:nth-child(3), .mobile-nav-trigger.is-active path:nth-child(3), .site-nav__compress-menu.is-active path:nth-child(3) { transform: rotate(-45deg); transform-origin: 40% 73%; } /* ------------------------------------- Shared PDP Styles ------------------------------------- */ @media only screen and (min-width: 769px) { .product-single__sticky { position: sticky; top: 20px; } .modal--quick-shop .product-single__sticky { top: 0; } .product-full-width { margin-top: 40px; } } @media only screen and (max-width: 768px) { .grid--product-images-right { display: flex; flex-wrap: wrap; } .grid--product-images-right .grid__item:first-child { order: 2; } /* Custom full-width layout for product tabs on mobile */ /* .product-full-width .page-width--narrow { max-width: none; } */ .product-full-width .product-block--tab { margin-left: calc(var(--page-width-padding) * -1); margin-right: calc(var(--page-width-padding) * -1); } .product-full-width .product-block--tab .collapsible-trigger-btn { padding-left: var(--page-width-padding); padding-right: var(--page-width-padding); } .product-full-width .product-block--tab .collapsible-trigger__icon { right: var(--page-width-padding); } } .page-content--product { padding-top: 10px; padding-bottom: 0; } .page-cart { display: block; width: 100%; background: url(https://cdn.shopify.com/s/files/1/0916/2742/2005/files/magic_bus_-_backrgound.png?v=1749563696); background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (max-width: 768px) { .page-content--product { padding-top: 15px; } } /* Prevent jittery sizing while loading in quick view */ .modal--quick-shop .page-content--product { width: var(--page-width); max-width: 100%; } .product-single__meta { padding: 24px; border-radius: 8px; background: #FFF; margin-bottom: 40px; } @media only screen and (max-width: 768px) { .product-single__meta { padding-top: 0; padding-left: 0; margin-top: calc(var(--gutter) / 2); margin-bottom: calc(var(--gutter) / 2); } } .grid--product-images-right .product-single__meta { padding-left: 0; padding-right: 45px; } @media only screen and (max-width: 768px) { .grid--product-images-right .product-single__meta { padding-right: 0; } } .product-single__meta .social-sharing { margin-top: var(--gutter); } .product-single__meta .rte { text-align: left; } html[dir='rtl'] .product-single__meta .rte { text-align: right; } .product-single__meta>*:first-child { padding-top: 0; } /*Hide selectable elements when slide is not active*/ .flickity-enabled .product-main-slide:not(.is-selected) button, .flickity-enabled .product-main-slide:not(.is-selected) video, .flickity-enabled .product-main-slide:not(.is-selected) iframe, .flickity-enabled .product-main-slide:not(.is-selected) model-viewer { display: none; } .product-main-slide { display: none; width: 100%; overflow: hidden; } @media only screen and (max-width: 768px) { /* Set initial width to prevent layout shifts */ .grid--product-images--partial .product-main-slide { width: 75%; margin-left: auto; margin-right: auto; } } /*Hide all but first slide to prevent page reflows prior to init*/ .product-main-slide:first-child { display: block; } @media only screen and (max-width: 768px) { .product-main-slide { border: 1px solid; border-color: var(--color-border); border-radius: 8px; } } [data-media-gallery-layout='stacked'] .product-main-slide { display: block; margin: 8px auto; } .flickity-slider .product-main-slide { display: block; /*show a bit of the next image*/ } @media only screen and (max-width: 768px) { .grid--product-images--partial .flickity-slider .product-main-slide { width: 100%; } } .grid-product__price sup { display: none; margin-left: 1px; font-size: 60%; top: -0.4em; } /*Used anywhere unit price is visible*/ .product__unit-price { font-size: calc(var(--type-base-size) - 3px); opacity: 0.65; } .return-link { text-align: center; padding: 15px 25px; } .return-link .icon { width: 20px; margin-right: 8px; } /*Product page mobile*/ @media only screen and (max-width: 768px) { .product--images { order: 1; } } @media only screen and (max-width: 768px) { .product--description { order: 3; } } /* ------------------------------------- Sections ------------------------------------- */ .index-section { margin: var(--index-section-padding) 0; /*Required so box-shadow on .main-content doesn't appear when first section has no background*/ } .index-section:not(.index-section--sub-product):first-child { margin-top: 0; padding-top: var(--index-section-padding); } .index-section+.index-section, .index-section+.index-section--hidden { margin-top: 0; } .page-width .index-section .page-width { padding-left: 0; padding-right: 0; } .index-section--flush { margin: 0; } .section--divider { border-top: 1px solid; border-top-color: var(--color-border); padding-top: var(--index-section-padding); } /*Hide footer sections on /challenge page*/ .template-challange .index-section--footer { display: none; } .theme-block { margin-bottom: 30px; } .theme-block:last-child { margin-bottom: 0; } /* ------------------------------------- Rich Text ------------------------------------- */ .rich-text-container { display: flex; width: calc(100% - 40px); padding: 40px 80px 60px 80px; flex-direction: column; justify-content: center; align-items: flex-start; border-radius: 16px; background: #FFF; margin: 0 auto 168px auto; } @media (max-width: 767px) { .rich-text-container { padding: 16px 15px 40px 15px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; align-self: stretch; border-radius: 8px; } } .theme-block>h2 { color: #141414; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; /* 27px */ margin-bottom: -10px; } .rte>p { color: #141414; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ } .index-section { margin: 55px 43px 40px 43px; } @media(max-width: 768px) { .index-section { margin: 55px 24px 40px 24px; } .section-header__title { font-size: 20px; } } .theme-block:first-child { margin-bottom: 42px; } .theme-block:nth-child(2) { margin-bottom: 22px; } .rte>ul { list-style-type: disc; color: #141414; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; } @media (max-width: 767px) { .theme-block>h2 { font-size: 14px; } .rte>p { font-size: 14px; } .theme-block:first-child { margin-bottom: 0; } .theme-block:nth-child(2) { margin-bottom: 7px; } .rte>ul { font-size: 14px; } } /* ------------------------------------- Article Tags + Elements ------------------------------------- */ .article-tag { display: inline-block; background-color: var(--color-body); color: var(--color-text-body); border: 1px solid; border-color: var(--color-text-body); padding: 3px 9px; margin: 5px; font-size: 12px; font-weight: var(--type-header-weight); letter-spacing: 0.15em; text-transform: uppercase; } .tag--inline .article-tag { margin: 0; } .article-tag:hover, .article-tag:active { background-color: var(--color-body); color: var(--color-text-body); } @media only screen and (max-width: 768px) { .article-tag { padding: 4px 6px; font-size: 10px; margin: 3px; } } /*Date, comments, author*/ .article__sub-meta { opacity: 0.65; font-size: calc(var(--type-base-size) - 2px); } .article__sub-meta>span { position: relative; display: inline-block; margin-bottom: 2px; margin-right: 10px; } [dir='rtl'] .article__sub-meta>span { margin-right: 0; margin-left: 10px; } .article__sub-meta>span:not(:last-child):after { content: '\b7'; display: inline-block; margin-left: 10px; } [dir='rtl'] .article__sub-meta>span:not(:last-child):after { margin-left: 0; margin-right: 10px; } .section-header .article__sub-meta { margin-top: 20px; } .article__sub-meta-date { text-transform: uppercase; } .article__title { font-weight: var(--type-header-weight); } /* ------------------------------------- Color Swatches ------------------------------------- */ [data-color-swatch], .color-swatch { position: relative; display: block; text-indent: -9999px; overflow: hidden; margin: 0 4px 4px; background-position: center; background-size: cover; background-repeat: no-repeat; width: 2.5em; border: 3px solid; border-color: var(--color-body); border-radius: var(--swatch-border-radius); box-shadow: 0 0 0 1px var(--color-border); transition: box-shadow 0.1s ease; width: var(--swatch-size); height: var(--swatch-size); } .is-active[data-color-swatch], .color-swatch.is-active { box-shadow: 0 0 0 1px var(--color-text-body); } /* ------------------------------------- Modals ------------------------------------- */ .modal { display: none; bottom: 0; left: 0; opacity: 1; overflow: hidden; position: fixed; right: 0; top: 0; z-index: var(--z-index-modal); color: #fff; align-items: center; justify-content: center; } .modal.modal--quick-shop { align-items: flex-start; } .modal a:not(.btn), .modal a:not(.btn):hover { color: inherit; } .modal-open .modal .modal__inner { animation: modal-open 0.3s forwards; } .modal-open .modal:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-modal-bg); animation: overlay-on 0.3s forwards; cursor: pointer; } .modal-closing .modal .modal__inner { animation: modal-closing 0.15s forwards; } .modal-closing .modal:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-modal-bg); animation: overlay-off 0.15s forwards; } .modal-open--solid .modal:before { background-color: var(--color-modal-bg); } .modal--is-closing { display: flex !important; /*override .is-transitioning styles*/ overflow: hidden; } .modal--is-active { display: flex !important; /*override .is-transitioning styles*/ overflow: hidden; } /*Class on body element when modal open. Only medium-up because iOS jumps to top otherwise*/ @media only screen and (min-width: 769px) { .modal-open { overflow: hidden; /*Reserves space for the scrollbar, even when hidden, to maintain a consistent layout.*/ scrollbar-gutter: stable; } } .modal__inner { transform-style: preserve-3d; flex: 0 1 auto; margin: calc(var(--gutter) / 2); max-width: calc(100% - 30px); display: flex; align-items: center; box-shadow: 0 12px 25px rgb(0 0 0 / 15%); border-radius: var(--roundness); } @media only screen and (min-width: 769px) { .modal__inner { margin: 40px; max-width: calc(100% - 80px); } } .modal--square .modal__inner { background-color: var(--color-body); color: var(--color-text-body); border-radius: var(--roundness); } .modal__inner .scheme-image { border-radius: calc(var(--roundness) + 2px); } /*No max height on product images*/ .modal__inner .image-wrap img { max-height: none; } .modal__centered { position: relative; flex: 0 1 auto; min-width: 1px; /*ie10 thing*/ max-width: 100%; } .modal--square .modal__centered-content { max-height: 80vh; padding: 30px; min-width: 200px; min-height: 200px; border-radius: var(--roundness); overflow: auto; -webkit-overflow-scrolling: touch; } @media only screen and (min-width: 769px) { .modal--square .modal__centered-content { padding: calc(var(--gutter) * 1.5); max-height: 90vh; max-width: 1200px; } } .modal--square .modal__centered-content--padded { padding: 60px; } /*Always a .btn .btn--circle .btn--icon*/ .modal__close { border: 0; padding: 6px; position: absolute; top: 0; right: 0; transform: translate(25%, -25%); z-index: 2; transition: transform 0.15s ease-out; } .modal__close:hover { transform: translate(25%, -25%) scale(1.08); } .modal__close .icon { width: 28px; height: 28px; } .modal--is-closing .modal__close { display: none; } /*Ajax page adjustments*/ .modal .page-content, .modal .page-width { padding: 0; } @media only screen and (max-width: 768px) { .modal--mobile-friendly { top: auto; bottom: 20px; overflow: auto; } .modal--mobile-friendly.modal--square .modal__centered-content { padding: 30px; } .modal--mobile-friendly.modal--is-active { overflow: visible; } .modal-open .modal--mobile-friendly:before { display: none; } .modal--mobile-friendly .modal__inner { margin: 0; } .modal--mobile-friendly .h1 { padding-right: 25px; } .modal--mobile-friendly input { font-size: 16px !important; } .modal--mobile-friendly .text-close { display: none; } } /*Always sits on modal overlay (light), so hardcode black*/ .modal__footer-text { padding: calc(var(--gutter) / 2) var(--gutter); text-align: center; } .modal__footer-text a { color: currentColor; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } /* ------------------------------------- Hero Elements ------------------------------------- */ :root { --z-index-hero-image: 1; --z-index-hero-video: 2; --z-index-hero-image-overlay: 3; --z-index-hero-text: 4; --slideshow-image-animation-amount: 200px; --slideshow-image-animation-speed: 0.5s; } .hero--padded { margin-top: var(--page-width-padding); margin-bottom: var(--page-width-padding); /*Required so box-shadow on .main-content doesn't appear when this is the first section*/ } .index-section--hero:first-child .hero--padded { margin-top: 0; padding-top: var(--page-width-padding); } .index-section--hero { max-height: 600px; display: block; } .index-section--hero * { max-height: 600px; } .hero { display: block; position: relative; overflow: hidden; background-color: var(--color-large-image-bg); color: #fff; } .hero.loaded { background-color: transparent; transition: background-color 0.2s ease 0.3s; } .hero--padded .hero { border-radius: var(--roundness); } .hero--padded .hero .hero__media { overflow: hidden; border-radius: var(--roundness); } .hero__image-wrapper { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .hero__image { position: relative; width: 100%; height: 100%; z-index: var(--z-index-hero-image); object-fit: cover; /* object-position: top center; */ } @media (min-width: 769px) and (max-width: 1306px) { .hero__image { max-width: 100%; height: auto; display: block; } } /*Mobile only vimeo play button*/ .vimeo-mobile-trigger { display: block; position: absolute; width: 100%; z-index: 2; margin-top: 90px; } .hero__text-content .vimeo-mobile-trigger { bottom: 120%; } .vimeo-mobile-trigger .icon { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; padding: 10px; } .hero__slide-link { display: block; position: absolute; height: 100%; width: 100%; z-index: calc(var(--z-index-hero-text) + 1); } .hero__slide-link:hover~.hero__text-wrap .btn:not(.btn--secondary):not(.btn--inverse) { background: var(--color-button-primary-light); transition-delay: 0.25s; } .hero__text-wrap { position: relative; height: 100%; } .video-interactable .hero__text-wrap { pointer-events: none; } .hero__text-wrap .page-width { display: table; width: 100%; height: 100%; } .hero__text-content { position: relative; padding: calc(var(--gutter) / 2) 0; z-index: var(--z-index-hero-text); } @media only screen and (min-width: 769px) { .hero__text-content { padding: calc(var(--gutter) * 1.5) 0; } } @media (min-width: 769px) and (max-width: 1000px){ .slideshow-wrapper .flickity-viewport .hero__text-content { padding: 0 } .slideshow-wrapper .flickity-viewport .hero__text-content .hero__text-shadow p{ font-size: 20px; } } [data-dots='true'] .hero__text-content { padding-bottom: 40px; } .hero__text-shadow { --z-index-overlay: -1; position: relative; display: inline-block; text-shadow: 0 3px 7px rgb(0, 0, 0, 0.15); } .hero__text-shadow:after { background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, transparent 60%); margin: -100px -200px -100px -200px; } .hero__text-shadow .btn { text-shadow: none; } .horizontal-left .hero__text-shadow { max-width: 500px; } .horizontal-right .hero__text-shadow { max-width: 500px; text-align: left; } @media only screen and (max-width: 768px) { .horizontal-left .hero__text-shadow { max-width: 85%; } .horizontal-right .hero__text-shadow { max-width: 85%; } } .hero__top-subtitle, .hero__title, .hero__subtitle { margin-bottom: 10px; } @media only screen and (min-width: 769px) { .hero__top-subtitle, .hero__title, .hero__subtitle { margin-bottom: 15px; } } .hero__top-subtitle { letter-spacing: 0.07em; font-size: 1.1em; } .hero__title { display: block; } .hero__title p { margin-bottom: 0; } .hero__subtext { margin-top: 20px; } .hero__subtitle { display: block; vertical-align: middle; } @media only screen and (min-width: 769px) { .hero__subtitle { font-size: 1.3em; } } .hero__link { position: relative; display: block; } .video-interactable .hero__link { pointer-events: auto; } .hero__link .btn { margin: 4px 15px 15px 0; } @media only screen and (max-width: 768px) { .hero__link .btn { margin: 4px 10px 6px 0; } .small--text-center .hero__link .btn { margin: 4px 10px 6px; } } /*Play icon in button*/ .hero__link .btn .icon-play { position: relative; top: -2px; margin-right: 5px; } .hero__link .btn--inverse { color: currentColor; border-color: currentColor; } /*Text alignment*/ .hero__text-content { display: table-cell; } .hero__text-content .hero__link { margin-top: calc(var(--gutter) / 4); } @media only screen and (min-width: 769px) { .hero__text-content .hero__link { margin-top: calc(var(--gutter) / 2); } } .hero__text-content.horizontal-left { text-align: left; } .hero__text-content.horizontal-center { text-align: center; } .hero__text-content.horizontal-right { text-align: right; } .hero__text-content.vertical-center { vertical-align: middle; } .hero__text-content.vertical-bottom { vertical-align: bottom; } /*Top padding adjustment to account for overlaid header*/ .overlaid-header .index-section--hero:first-child .hero__text-content.vertical-center { padding-top: 50px; } @media only screen and (min-width: 769px) { .overlaid-header .index-section--hero:first-child .hero__text-content.vertical-center { padding-top: 90px; } } .hero[data-natural] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /*Hero and slideshow shared starting animation*/ /*Default positioning pre-animation*/ .hero .slideshow__slide .hero__animation-contents { opacity: 0; transform: translateY(10px); transition: none; } .no-js .hero .slideshow__slide .hero__animation-contents { opacity: 1; } @media only screen and (max-width: 768px) { .hero .slideshow__slide .hero__animation-contents { transform: translateY(7px); } } .hero .slideshow__slide .hero__text-shadow:after { opacity: 0; } /*Override lazyload style*/ .hero .slideshow__slide:not(.animate-out) .hero__image { opacity: 0; transition: none; } .hero .slideshow__slide .hero__link .btn { opacity: 0; transition: none; } .no-js .hero .slideshow__slide .hero__link .btn { opacity: 1; } /*Disable animations when not active or fading out*/ .hero .slideshow__slide .hero__image-wrapper { transform: scale(1.15); opacity: 0; transition: none; } .hero .slideshow__slide .hero__sidebyside { opacity: 0; transition: none; } .no-js .hero .slideshow__slide .hero__sidebyside { opacity: 1; } .hero .slideshow__slide .hero__sidebyside-image .hero__image { opacity: 0; transform: scale(1.15); transition: none; } .no-js .hero .slideshow__slide .hero__sidebyside-image .hero__image { opacity: 1; } /*Hero and slideshow shared active animation */ .hero.loaded .slideshow__slide.is-selected .hero__animation-contents { opacity: 1; transform: translateY(0px); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.26, 0.54, 0.32, 1); } .hero.loaded .slideshow__slide.is-selected .hero__link .btn { opacity: 1; transition: opacity 1s ease; } .hero.loaded .slideshow__slide.is-selected .hero__text-shadow:after { opacity: 1; transition: all 0.4s ease 0.2s; } .hero.loaded .slideshow__slide.is-selected .hero__title .hero__animation-contents { transition-delay: 0.2s; } .hero.loaded .slideshow__slide.is-selected .hero__subtitle .hero__animation-contents { transition-delay: 0.4s; } .hero.loaded .slideshow__slide.is-selected .hero__link .btn { transition-delay: 0.6s; } .hero.loaded .slideshow__slide.is-selected .hero__link .btn:nth-child(2) { transition-delay: 0.8s; } .hero.loaded .slideshow__slide.is-selected .hero__media, .hero.loaded .slideshow__slide.is-selected .hero__image, .hero.loaded .slideshow__slide.is-selected .hero__image--svg { opacity: 1; transition: none; } .hero.loaded .slideshow__slide.is-selected .hero__image-wrapper { opacity: 1; transform: scale(1); transition: transform 1s cubic-bezier(0.18, 0.63, 0.25, 1), opacity 0.7s ease; } .hero.loaded .slideshow__slide.is-selected .hero__sidebyside { opacity: 1; transition: opacity calc(var(--slideshow-image-animation-speed) + 0.2s) ease; } .hero.loaded .slideshow__slide.is-selected .hero__sidebyside-image .hero__image { opacity: 1; transform: scale(1); animation: none; transition: transform calc(var(--slideshow-image-animation-speed) + 0.2s) cubic-bezier(0.13, 0.55, 0.25, 1); } /*Slideshow fading out animation*/ .hero .slideshow__slide.animate-out .hero__animation-contents { opacity: 0; transition: none; } .hero .slideshow__slide.animate-out .hero__image-wrapper { opacity: 0; transform: scale(1); transition: transform var(--slideshow-image-animation-speed) ease-in 0.05s, opacity var(--slideshow-image-animation-speed) ease-in 0.05s; } :root { --announcement-animation-speed: 0.5s; } .announcement-bar { position: relative; font-size: 13px; font-weight: var(--type-header-weight); text-align: center; padding: 7px 0; } @media only screen and (min-width: 769px) { .announcement-bar { padding: 6px 0; font-size: 14px; text-align: left; } [dir='rtl'] .announcement-bar { text-align: right; } } .announcement-slider__slide { position: relative; overflow: hidden; width: 100%; } .announcement-slider__content { opacity: 0; transform: translateY(100%); transition: all var(--announcement-animation-speed) ease; } .announcement-slider__content p { margin: 0; } .announcement-slider__content a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .animate-out .announcement-slider__content { opacity: 0; transform: translateY(-100%); } .is-selected .announcement-slider__content { opacity: 1; transform: translateY(0); } /*Article grid items*/ .grid-article { flex: 0 0 100%; display: flex; flex-wrap: wrap; text-align: center; margin-bottom: 40px; } @media only screen and (min-width: 769px) { .grid-article[data-style='medium'], .grid-article[data-style='large'] { display: block; } } .grid-article:last-child { margin-bottom: 0; } .grid-article__image { position: relative; flex: 0 0 100%; } .grid-article__image .image-wrap { border-radius: var(--roundness); } /* Overlaid on article grid item image */ .grid-article__tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; overflow: visible; text-align: center; } .grid-article__tags .article-tag { transform: translateY(-50%); } .grid-article__meta { flex: 0 0 100%; } .grid-article[data-style='large'] .article__title { font-size: calc(var(--type-base-size) + 10px); } @media only screen and (max-width: 768px) { .grid-article[data-style='large'] .article__title { font-size: calc(var(--type-base-size) + 7px); } } .grid-article[data-style='large'] .article__sub-meta>span { margin: 0 5px 2px; } .grid-article[data-style='medium'] { flex: 0 0 50%; } .grid-article[data-style='medium'] .article__title { font-size: calc(var(--type-base-size) + 2px); } @media only screen and (min-width: 769px) { .grid-article[data-style='medium'] .article__sub-meta>span { margin: 0 5px 2px; } } /*Compact grid article styles*/ .grid-article[data-style='compact'] { flex: 0 0 100%; flex-wrap: nowrap; text-align: left; margin-bottom: 20px; padding: 0; } .grid-article[data-style='compact'] .grid-article__image { flex: 0 0 40%; align-self: flex-start; } .grid-article[data-style='compact'] .grid-article__meta { flex: 0 0 60%; padding-left: 15px; } .grid-article[data-style='compact'] .article__title { font-size: calc(var(--type-base-size) + 1px); } .grid-article[data-style='compact'] .article-tag { font-size: 10px; } /*Only show fist tag*/ .grid-article[data-style='compact'] .article-tag:not(:first-child) { display: none; } /*Medium on large screens matches compact styles on small screens*/ @media only screen and (max-width: 768px) { .grid-article[data-style='medium'] { flex: 0 0 100%; flex-wrap: nowrap; text-align: left; margin-bottom: 20px; } .grid-article[data-style='medium'] .grid-article__image { flex: 0 0 40%; align-self: center; } .grid-article[data-style='medium'] .grid-article__meta { flex: 0 0 60%; padding-left: 15px; } .grid-article[data-style='medium'] .article__title { font-size: calc(var(--type-base-size) + 1px); } .grid-article[data-style='medium'] .article-tag { font-size: 10px; } /*Only show fist tag*/ .grid-article[data-style='medium'] .article-tag:not(:first-child) { display: none; } } /*Hide Shopify Payment Buttons if no variant*/ .add-to-cart[disabled]+.shopify-payment-button { display: none; } .product__policies { font-size: 0.85em; } .shopify-payment-terms { margin: 15px 0; } .shopify-payment-terms:empty { display: none; } .quick-shop-modal .shopify-payment-terms { display: none; } [data-on-sale] .block-price__regular { display: none; } .block-price__save { display: none; } [data-on-sale] .block-price__save { display: block; } .block-price__sale { display: none; } [data-on-sale] .block-price__sale { display: flex; gap: 10px; } .block-price__unit-price { display: none; } [data-unit-price] .block-price__unit-price { display: block; } .block-price__container { display: flex; align-items: baseline; flex-wrap: wrap; } .product__price { color: var(--color-price); margin-right: 5px; font-size: calc(var(--type-base-size) + 3px); font-weight: normal; } @media only screen and (max-width: 768px) { .product__price { font-size: 20px; font-style: normal; font-weight: 700; line-height: 140%; } } @media only screen and (min-width: 769px) { .product__price { color: #141414; font-family: Outfit; font-size: 32px; font-style: normal; font-weight: 700; line-height: 28px; /* 87.5% */ } } .licensor-TM { font-size: 8px; position: relative; top: -5px; right: 2px; } .product__price sup { margin-left: 1px; font-size: 100%; top: 0; } .product__price sup::before { content: "."; } .product__price-savings { color: var(--color-text-savings); white-space: nowrap; } .product__quantity label { display: block; margin-bottom: 10px; } .sales-points { list-style: none; padding: 0; margin: 0; } .multi-sales-points { margin: 0; display: flex; gap: 44px; } @media only screen and (max-width: 768px) { .multi-sales-points { display: none; } } .multi-sales-points .sales-point .icon-and-text svg { margin-right: 5px; } .multi-sales-points .sales-point:first-child { width: 26%; } .multi-sales-points .sales-point:first-child .icon-and-text { line-height: normal; } .quick-add-modal .sales-points { display: none; } .sales-point { display: block; margin-bottom: 10px; } .sales-point:last-child { margin-bottom: 0; } .sales-point .icon { position: relative; width: 25px; height: 25px; margin-right: 8px; } .sales-point .icon.icon-checkmark-grey { width: 18px; height: 18px; } [dir='rtl'] .sales-point .icon { margin-right: 0; margin-left: 10px; } .product-block--sales-point+.product-block--sales-point { margin-top: -20px; } .gift-cart-product-page .product-block--sales-point+.product-block--sales-point { margin-top: -24px; } .gift-cart-product-page .product-block--sales-point:last-of-type { margin-bottom: 10px; } .gift-cart-product-page .product-block-custom { margin-top: 29px; } .gift-cart-product-page .product-block-custom h5 { letter-spacing: -.47px; font-size: 16px; line-height: 1.6; margin-bottom: 8px; } .gift-cart-product-page .product-block-custom ul { list-style-type: disc; margin-left: 27px; } .gift-cart-product-page .product-block-custom li { letter-spacing: 0; } .product-block.product-block--tab { margin-bottom: 30px; } .product-block--tab+.product-block--tab { margin-top: -30px; } .product-breadcrumbs { padding: 8px 4px 4px 0; display: inline-flex; margin-bottom: 8px; } .product-breadcrumbs a, .product-breadcrumbs span { color: #878787; text-align: center; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } @media only screen and (max-width: 769px) { .product-breadcrumbs a, .product-breadcrumbs span { font-size: 10px; } } .product-breadcrumbs span:last-child { color: #FF3333; } .product-single__title { margin-bottom: 16px; word-wrap: break-word; font-family: Outfit; font-size: 28px; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: 0; } .product-single__vendor-sku { opacity: 0.65; } .product-single__vendor-sku>span { display: inline-block; margin-right: 20px; } .product-single__vendor { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .product-single__sku { font-size: calc(var(--type-base-size) - 3px); } .block-variant-picker { display: grid; gap: 25px; } .block-variant-picker[data-picker-type='dropdown'] { display: block; gap: normal; } .breadcrumb { font-size: calc(var(--type-base-size) * 0.85); margin: 0 0 18px; } @media only screen and (max-width: 768px) { .breadcrumb { margin-bottom: calc(var(--gutter) / 2); } } .breadcrumb__divider { color: currentColor; opacity: 0.2; padding: 0 5px; } /* General cart item styles */ .cart__item { display: grid; grid-template-areas: 'cartImage cartTitle cartTitle' 'cartImage cartPrice cartQuantity' 'cartImage cartPrice cartRemove'; grid-template-columns: 150px auto auto; grid-column-gap: 20px; align-items: center; margin-bottom: 22px; padding-bottom: 10px; border-bottom: 1px solid; border-bottom-color: var(--color-border); position: relative; /*Smaller image in drawer*/ } .cart__item:last-child { margin-bottom: 0; padding-bottom: 0; } .cart__view-cart { height: 50px; border: 1px solid rgba(255, 51, 51, 1); border-radius: 8px; color: rgba(255, 51, 51, 1); background-color: transparent; margin-top: 12px; width: 100%; } .site-header__cart .cart__item { grid-template-columns: 104px auto auto; grid-column-gap: 10px; } @media only screen and (max-width: 959px) { .cart__item { grid-template-areas: 'cartImage cartTitle cartTitle' 'cartImage cartTitle cartTitle' 'cartImage cartPrice cartQuantity'; } } .cart__item:last-of-type { border-bottom: 0; } .cart__image { grid-area: cartImage; align-self: flex-start; } .cart__image a { position: relative; display: block; width: 100%; height: 104px; } .cart__image img { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; object-fit: contain; } .cart__item-title { grid-area: cartTitle; margin-top: 3px; } .cart__page .cart__item-title { padding-right: 60px; } .cart__item-quantity { text-align: end; grid-area: cartQuantity; } .cart__item-remove { position: absolute; top: -5px; left: -11px; width: 22px; height: 22px; background-color: #7B7B7B; border-radius: 100%; } .cart__item--variant-select { display: flex; align-items: center; gap: 8px; } .cart__item--variant-select label { font-size: 12px !important; line-height: 1; font-weight: 500 !important; margin-bottom: 0; } .cart__item--variant-select select { height: 23px; width: 44px; font-size: 10px; font-weight: 500; padding: 2px 10px 6px 9px; border-radius: 4px; } .cart__item-remove a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .cart__item-remove svg { width: 10px; height: 10px; } .cart__item-price { grid-area: cartPrice; } .cart__item-name { display: block; font-weight: 400; font-size: 11px; line-height: 18px; letter-spacing: 0; margin-bottom: 12px; } .cart__item--variants { font-size: 12px; margin-bottom: 25px; } .cart__item--variants span { font-weight: var(--type-header-weight); } .cart__benefits { display: flex; align-items: center; margin: 16px 32px 17px 24px; padding: 12px 9px; gap: 12px; background-color: #FFF4F5; border-radius: 8px; } .cart__benefits-item { display: flex; align-items: center; gap: 6px; } .cart__benefits-item svg { min-width: 24px; min-height: 24px; } .cart__benefits-item p { font-weight: 300; font-size: 12px; line-height: 14px; letter-spacing: 0; margin-bottom: 0; text-transform: capitalize; } .cart__benefits-item:nth-child(1) { width: 99px; } .cart__benefits-item:nth-child(2) { width: 93px; } .cart__benefits-item:nth-child(3) { width: 118px; } .cart__price { display: block; text-align: left; margin-bottom: -8px; } .cart__price:not(.cart__price--strikethrough) { font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 2px); } .cart__price--strikethrough { -webkit-text-decoration: line-through; text-decoration: line-through; } /* Cart properties */ .cart__item--properties { font-size: calc(var(--type-base-size) - 2px); margin-bottom: 10px; line-height: 1.3; } .cart__item--properties span { font-weight: 700; } .note-icon svg { position: relative; top: -1px; width: 16px; height: 16px; margin-left: 5px; } .add-note { margin-bottom: 20px; } .add-note.is-active .note-icon--open { display: none; } .note-icon--close { display: none; } .add-note.is-active .note-icon--close { display: inline; } /*Recommended products*/ .cart__recommended-title { margin-bottom: 20px; } .collapsible-trigger { color: inherit; position: relative; } /*button element cannot be display:flex, so add child span to style*/ .collapsible-trigger__layout { display: flex; align-items: center; justify-content: space-between; } .collapsible-trigger__layout>span { display: block; padding-right: 10px; } .collapsible-trigger__layout--inline { position: relative; justify-content: flex-start; } .collapsible-trigger__layout--inline>span { padding-right: 15px; } .collapsible-trigger__layout--inline .collapsible-trigger__icon { position: static; transform: none; } .collapsible-trigger__icon { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--collapsible-icon-width); height: var(--collapsible-icon-width); } .collapsible-trigger__icon .icon { display: block; width: var(--collapsible-icon-width); height: var(--collapsible-icon-width); transition: all 0.1s ease-in; } .collapsible-trigger.is-open .collapsible-trigger__icon>.icon-chevron-down { transform: rotate(180deg); } .collapsible-trigger--inline { font-weight: var(--type-header-weight); padding: 11px 0 11px 20px; } .collapsible-trigger--inline .collapsible-trigger__icon { right: auto; left: 0; } .collapsible-content { transition: opacity 0.2s ease, height 0.15s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-10px); } .collapsible-content.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, height 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collapsible-content--all { visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } @media only screen and (min-width: 769px) { .collapsible-content--all.is-open { overflow: initial; visibility: visible; opacity: 1; height: auto; } } .collapsible-content--all.is-open { border-bottom: 1px solid; border-color: var(--color-border); } .filter-wrapper .collapsible-content--all.is-open { border: 0; } @media only screen and (max-width: 768px) { .collapsible-content--small { visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } .collapsible-content--small .collapsible-content__inner { transform: translateY(40px); } .cart__item-name { margin-bottom: 8px; } .cart__item--variants { margin-bottom: 12px; } .cart__price span { font-size: 12px; line-height: 1; font-weight: 500; } } @media only screen and (min-width: 769px) { .collapsible-content__inner { padding: 0 0 35px; } } .collapsible-trigger[aria-expanded='true'] .collapsible-label__closed { display: none; } .collapsible-label__open { display: none; } .collapsible-trigger[aria-expanded='true'] .collapsible-label__open { display: inline-block; } .collection-item { position: relative; display: block; flex: 1 1 100%; text-align: center; margin-bottom: 5px; } @media only screen and (min-width: 769px) { .collection-item { margin-bottom: 15px; } } .collection-image-wrap { position: relative; transition: all 0.2s ease; } .collection-image-wrap.collection-image-color--undefined { --z-index-overlay: 1; } .collection-image-wrap.collection-image-color--undefined:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image-color--white:before { background-color: #fff; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image-color--grey { --z-index-overlay: 1; } .collection-image-wrap.collection-image-color--grey:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; transition: all 0.2s ease; border-radius: var(--roundness); } .collection-image-wrap.collection-image--circle:hover { border-radius: 50%; } .collection-image-wrap:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgb(0, 0, 0, 0.1); border-radius: var(--roundness); } .collection-image-wrap:hover:after { background-color: rgba(0, 0, 0, 0); } .collection-item:active .collection-image-wrap { transform: scale(0.97); transition: transform 0.05s ease-out; } .collection-image { position: static; } .collection-image img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: contain; padding: 0 } .collection-image img, .collection-image svg { border-radius: var(--roundness); } .collection-image--is-collection img, .collection-image-fill-space--true img { object-fit: cover; border-radius: 8px; } .collection-image--placeholder { opacity: 1; } .collection-image--placeholder svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .collection-image--circle { border-radius: 50%; overflow: hidden; } .collection-image--circle:after { border-radius: 50%; } .collection-image--circle, .collection-image--square { padding-bottom: 100%; } .collection-image--landscape { padding-top: 125%; } .collection-image--portrait { padding-top: 150%; } .collection-item__title { display: block; margin-top: 12px; font-weight: var(--type-header-weight); padding: 0 7%; } .overlay--before::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-index-overlay, auto); } .scheme-image, .scheme-darken, .scheme-squiggle, .scheme-swirl, .scheme-dots, .scheme-notebook, .scheme-wave, .scheme-minimal-wave, .scheme-plants, .scheme-cold-blur, .scheme-warm-blur, .scheme-custom-texture-1, .scheme-custom-texture-2, .scheme-custom-texture-3 { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; } [data-animate].scheme-image { object-fit: cover; pointer-events: none; mix-blend-mode: multiply; opacity: 1; /*Specific styles on some textures*/ } .scheme-image[data-animate][data-texture='space.jpg'] { mix-blend-mode: screen; } [data-animate].scheme-texture--linen, [data-animate].scheme-texture--sand, [data-animate].scheme-texture--stone, [data-animate].scheme-texture--wildflower { opacity: 0.24; } /*Darken is CSS, not image*/ .scheme-darken { --z-index-overlay: 1; z-index: 1; pointer-events: none; } .scheme-darken:after { background-color: rgba(0, 0, 0, 0.027); pointer-events: none; } /* SVG images as backgrounds - larger images are cached external assets that are only loaded when used */ .scheme-swirl { background-image: var(--url-swirl-svg); opacity: 0.12; } .scheme-squiggle { background: url("data:image/svg+xml,%3Csvg width='150' height='75' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .scheme-dots { background-image: radial-gradient(rgba(0, 0, 0, 0.15) 0.5px, transparent 2px); background-size: 16px 16px; } .scheme-notebook { background-image: url(notebook.svg); opacity: 0.5; } .scheme-wave { background-image: url(wave.svg); background-size: cover; opacity: 0.5; } .scheme-minimal-wave { background-image: url(minimal-wave.svg); opacity: 0.5; background-size: cover; } .scheme-plants { background-image: url(plants.svg); background-size: cover; } .scheme-cold-blur { background-image: url(cold-blur.svg); background-size: cover; } .scheme-warm-blur { background-image: url(warm-blur.svg); background-size: cover; } .scheme-custom-texture-1 { background-image: url(custom-texture-1.svg); background-size: cover; } .scheme-custom-texture-2 { background-image: url(custom-texture-2.svg); background-size: cover; } .scheme-custom-texture-3 { background-image: url(custom-texture-3.svg); background-size: cover; } .content-over-media { --container-max-width: calc(var(--page-width) - var(--page-width-padding) * 2); --container-gutter: 40px; --content-over-media-gap: var(--container-gutter); --content-over-media-column-gap: var(--content-over-media-gap); --content-over-media-row-gap: var(--content-over-media-gap); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--container-max-width), 100% - var(--content-over-media-column-gap) * 2)) minmax(0, 1fr); grid-template-rows: 0 minmax(0, 1fr) 0; gap: var(--content-over-media-row-gap) var(--content-over-media-column-gap); place-items: center; position: relative; overflow: hidden; } .content-over-media[overlay='true']:before { content: ''; background-color: rgb(0, 0, 0, 0.3); pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .content-over-media> :not(.content-over-media__content) { position: relative; grid-area: 1 / 1 / span 3 / span 3; place-self: stretch; width: 100%; height: var(--content-over-media-height); min-height: 100%; max-height: 100%; object-fit: cover; object-position: center; overflow-wrap: anywhere; transform-origin: top; -webkit-user-select: none; user-select: none; } .content-over-media__content { color: white; position: relative; grid-row-start: 2; grid-column-start: 2; grid-row-end: auto; grid-column-end: span 1; max-width: var(--content-over-media-content-max-width, 650px); z-index: 1; } .content-over-media[data-height='small'] { --content-over-media-height: 400px; } .content-over-media[data-height='medium'] { --content-over-media-height: 600px; } .content-over-media[data-height='large'] { --content-over-media-height: 800px; } .content-over-media[data-height='full'] { /* TODO: figure out logic for when we create new header with transparency */ /* --content-over-media-height: calc(100vh - var(--safe-sticky-height) ; */ --content-over-media-height: 100vh; } /* TODO: this should be part of a more generalized media file */ picture img { width: 100%; max-height: 100%; min-height: inherit; } /* TODO: this should be part of a more generalized media file */ .content-over-media iframe { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); aspect-ratio: 16 / 9; } .content-over-media__content[data-mobile-content-position='start'] { place-self: start; text-align: left; } .content-over-media__content[data-mobile-content-position='top-center'] { place-self: start center; text-align: center; } .content-over-media__content[data-mobile-content-position='top-end'] { place-self: start end; text-align: right; } .content-over-media__content[data-mobile-content-position='center-start'] { place-self: center start; text-align: left; } .content-over-media__content[data-mobile-content-position='center'] { place-self: center center; text-align: center; } .content-over-media__content[data-mobile-content-position='center-end'] { place-self: center end; text-align: right; } .content-over-media__content[data-mobile-content-position='end-start'] { place-self: end start; text-align: left; } .content-over-media__content[data-mobile-content-position='end-center'] { place-self: end center; text-align: center; } .content-over-media__content[data-mobile-content-position='end'] { place-self: end end; text-align: right; } @media only screen and (min-width: 769px) { .content-over-media__content[data-desktop-content-position='start'] { place-self: start; text-align: left; } .content-over-media__content[data-desktop-content-position='top-center'] { place-self: start center; text-align: center; } .content-over-media__content[data-desktop-content-position='top-end'] { place-self: start end; text-align: right; } .content-over-media__content[data-desktop-content-position='center-start'] { place-self: center start; text-align: left; } .content-over-media__content[data-desktop-content-position='center'] { place-self: center center; text-align: center; } .content-over-media__content[data-desktop-content-position='center-end'] { place-self: center end; text-align: right; } .content-over-media__content[data-desktop-content-position='end-start'] { place-self: end start; text-align: left; } .content-over-media__content[data-desktop-content-position='end-center'] { place-self: end center; text-align: center; } .content-over-media__content[data-desktop-content-position='end'] { place-self: end end; text-align: right; } } .recipient-form { display: block; position: relative; margin: 2em auto; } .recipient-form .field { position: relative; } .recipient-form .field__label { position: absolute; top: 0; left: 0; pointer-events: none; color: inherit; padding: 8px 10px; transform-origin: 0 0; transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; margin: 0; } @media only screen and (max-width: 959px) { .recipient-form .field__label { padding: 10px; } } .recipient-form .field__label:not(.variant__button-label):not(.text-label), .recipient-form label:not(.variant__button-label):not(.text-label) { font-weight: normal; } .recipient-form .field__input { margin-bottom: 1.5em; } @media only screen and (max-width: 959px) { .recipient-form .field__input { margin-bottom: 0.6em; } } .recipient-form .field__input.text-area { margin-bottom: 0; height: 150px; } .recipient-form .field__input::-webkit-input-placeholder { color: transparent; } .recipient-form .field__input::-moz-placeholder { color: transparent; } .recipient-form .field__input:focus~label, .recipient-form .field__input:not(:placeholder-shown)~label { opacity: 0.65; transform: scale(0.85) translateY(-0.4em) translateX(0.15em); font-size: 0.8em; } .recipient-form .field__input:focus, .recipient-form .field__input:not(:placeholder-shown) { padding: 16px 10px 0; } .recipient-form .field__input--error { border-color: var(--error-red); background-color: var(--error-red-bg); color: var(--error-red); } .recipient-form .field__input--error~label { color: var(--error-red); } .recipient-form .recipient-form__checkbox-wrapper { display: flex; align-items: center; margin-bottom: 2em; } @media only screen and (max-width: 959px) { .recipient-form .recipient-form__checkbox-wrapper { margin-bottom: 1.5em; } } .recipient-form input[type='checkbox'] { height: 16px; width: 16px; background-color: inherit; border: 1px solid; border-color: var(--color-border); border-radius: var(--input-radius); } .recipient-form .checkbox-label { display: block; cursor: pointer; margin-bottom: 0; } .recipient-form .recipient-form-field-label--space-between>span { font-size: 0.8em; } .recipient-form .recipient-fields { display: none; } .site-header__cart-empty { display: none; padding: 20px; } .is-empty .site-header__cart-empty { display: block; } .cart-drawer.is-empty form { display: none; } /*Scrollable products, fixed footer*/ .cart__drawer-form { max-height: 75vh; max-height: calc(100dvh - var(--header-nav-height, 0px)); display: flex; flex-direction: column; } .cart__scrollable { overflow-y: auto; padding: 16px 32px 0 24px; height: calc(83dvh - var(--header-nav-height, 0px) - 350px); } .cart__scrollable .scrollable-grid { padding-top: 20px; padding-left: 20px; margin-left: -20px; padding-bottom: 2px; } .cart__footer { border-top: 1px solid; border-top-color: #E9E9E9; padding: 12px 32px 16px 24px; } .cart__note { margin-bottom: 20px; } .site-nav__dropdown.megamenu, .megamenu { padding: 40px 0 0; line-height: 1.8; } .text-center .site-navigation { margin: 0 auto; } .site-navigation--below { margin-left: calc(var(--site-nav-item-padding) * -1); /*Top border*/ } .site-navigation--below:before { position: absolute; left: 0; right: 0; content: ''; display: block; border-top: 1px solid; border-top-color: var(--color-nav-text); width: 100%; opacity: 0.1; transition: opacity 0.5s ease 0.3s; z-index: 1; } .is-light .site-navigation--below:before { border-color: var(--color-sticky-nav-links); } .header-wrapper--compressed .site-navigation--below:before { opacity: 0; } .site-header__element.is-active .site-navigation--below:before { opacity: 0.15; } .site-nav__item { position: relative; display: inline-block; margin: 0; } .site-nav__item li { display: block; margin: 0; } .site-nav__item .icon-chevron-down { width: var(--desktop-menu-chevron-size); height: var(--desktop-menu-chevron-size); } .site-nav--is-megamenu.site-nav__item { position: static; } .megamenu__wrapper { display: flex; } .collection-size { height: 200px } /*Always on right side*/ .megamenu__featured { flex: 0 0 19%; padding-bottom: 40px; } [data-grid-style='simple'] .megamenu__featured .grid-product { border: 1px solid; border-color: var(--color-border); } .megamenu__cols { flex: 1 1 81%; flex-flow: column wrap; columns: 3; } .megamenu__cols:has([data-image-type]) { display: flex; flex-direction: row; } .megamenu--collections .megamenu__cols { display: flex; flex: 1; flex-flow: row; gap: 20px; columns: auto auto; padding-bottom: 40px; } .megamenu__cols a:hover { /*background-color: var(--color-body)*/; -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .megamenu__col { padding: 0 8px 24px 0; page-break-inside: avoid; break-inside: avoid; max-width: 157px; } .megamenu--collections .megamenu__col { padding: 0; flex-basis: 210px; } .megamenu__col:has([data-image-type]) { display: flex; flex-direction: column; gap: 12px; flex-basis: 440px; } .megamenu__col:has([data-image-type]) [data-image-type] { width: 100%; } .megamenu__col-title a { font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 1px); } /*Center grid items in megamenu when logo centered*/ .text-center .megamenu .float-grid { text-align: center; } .text-center .megamenu .float-grid .grid__item { float: none; display: inline-block; vertical-align: top; text-align: left; } .site-nav__dropdown-link { display: block; padding: 8px 11px 9px; white-space: nowrap; font-size: calc(var(--type-base-size) - 1px); letter-spacing: .4px; } .megamenu .site-nav__dropdown-link { padding: 1px 0; white-space: normal; } .site-nav__link--underline { position: relative; } .site-nav__link--underline.last-chance { color: #ff3434; } .site-nav__link--underline:hover, details[open] .site-nav__link--underline { background: rgba(255, 51, 51, 0.3); border-radius: 4px; } .site-nav__link--underline:hover .menu-chevron, details[open] .site-nav__link--underline .menu-chevron { transform: rotate(180deg); } /*White underline when no dropdown*/ .is-light .site-nav__item:not(.site-nav--has-dropdown) .site-nav__link--underline:after { border-bottom-color: #fff; } .site-nav__item:hover .site-nav__link--underline:after { display: block; } .site-nav--has-dropdown.is-focused>a, .site-nav--has-dropdown:hover>a { color: var(--color-text-body) !important; background-color: var(--color-body); opacity: 1; transition: none; } .site-nav__menu-item { display: flex; align-items: center; border-bottom: 1px solid #D4D4D4; } .site-nav__menu-item:hover svg circle { fill: #FF3333; } .site-nav__menu-item:hover { border-bottom: 1px solid #FF3333; } .site-nav__menu-item:hover .site-nav__dropdown-link { font-weight: 700; } .site-nav__collection-display-container { transition: opacity 0.3s ease-in-out; opacity: 0; position: absolute; left: 100%; top: 0; display: none; padding: 24px 24px 13px 24px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; flex: 1 0 0; width: calc(100% + 284px); height: 100%; align-self: stretch; box-shadow: 1px 0px 23.6px 0px rgba(0, 0, 0, 0.08); border-radius: 0 18px 0 0; background: #FFF; z-index: var(--z-index-header-submenu); overflow: auto; } .site-nav__collection-display-container::-webkit-scrollbar { width: 0px; } .site-nav__collection-display-container.is-active { display: flex; opacity: 1; } .site-nav__collection-image { border-radius: 8px; position: relative; height: 88%; object-fit: cover !important; max-height: 229px; font-family: 'object-fit: cover'; z-index: 1; } .site-nav__collection-heading { color: #000; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 500; line-height: 22px; /* 137.5% */ margin-top: -3.6%; } .site-nav__collection-link-container { display: flex; padding: 20px 0px; justify-content: flex-end; align-items: flex-start; gap: 8px; align-self: stretch; } .site-nav__collection-products-container { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 12px; justify-content: space-between; align-items: flex-start; gap: 10px; flex: 1 0 0; align-self: stretch; margin-top: -4%; } .site-nav__product-collection-label { overflow: hidden; color: #7B7B7B; text-overflow: ellipsis; font-family: Outfit; font-size: 10px; font-style: normal; font-weight: 400; line-height: 140%; /* 14px */ text-transform: capitalize; } .site-nav__product-title-label { color: #141414; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 500; line-height: 110%; /* 13.2px */ text-transform: capitalize; text-align: left; } .site-nav__product-price-label { color: #141414; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } .site-nav__product-text-container { display: flex; gap: 6px; flex-direction: column; justify-content: flex-start; align-items: flex-start; } .site-nav__dropdown { /*display: block;*/ visibility: hidden; position: absolute; display: flex; padding: 13px 24px 16px 180px; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 500px; border-top-left-radius: 8px; border-bottom-left-radius: 8px; /* right: 0; */ background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 25.51%, #FFF 65.08%), url('https://cdn.shopify.com/s/files/1/0916/2742/2005/files/menu-bg-hq.png?v=1752766876'), #FFF; box-shadow: 1px 0px 23.6px 0px rgba(0, 0, 0, 0.08); z-index: var(--z-index-header-submenu); /* position: fixed; */ left: 0; top: 62px; /* min-width: 100%; */ /*padding: calc(var(--gutter) / 3) 0 5px;*/ } #site-nav-item--1 .site-nav__dropdown { left: -25vw; } #site-nav-item--2 .site-nav__dropdown { position: absolute; left: auto; padding-top: 12px; border-radius: 8px; top: 74px; } #site-nav-item--2 .page-width { padding: 0 12px; } details[open] .site-nav__dropdown { visibility: visible; } .site-nav__dropdown-list { margin: 0; } .site-nav__dropdown-animate { transform: translateY(-10px); opacity: 0; max-height: calc(100vh - 100px); overflow: overlay; } .site-nav__dropdown-animate::-webkit-scrollbar { width: 8px; } .site-nav__dropdown-animate::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; } .site-nav__dropdown-animate::-webkit-scrollbar-thumb { background-color: #999; border-radius: 4px; border: 2px solid #f1f1f1; } .site-nav__dropdown-animate::-webkit-scrollbar-thumb:hover { background-color: #666; } details[open] .site-nav__dropdown-animate { opacity: 1; transform: translateY(0px); transition: opacity 0.3s ease 0.05s, transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.05s; } .site-nav__deep-dropdown { background-color: var(--color-body); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09); position: absolute; top: 0; left: 100%; margin: 0; visibility: hidden; opacity: 0; z-index: var(--z-index-header); transform: translate3d(-12px, 0, 0); } .site-nav__deep-dropdown-trigger:hover .site-nav__deep-dropdown, .is-focused+.site-nav__deep-dropdown { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); transition: all 300ms cubic-bezier(0.2, 0.06, 0.05, 0.95); } .site-nav__deep-dropdown:before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 10px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.09), transparent); pointer-events: none; } .site-nav__deep-dropdown-trigger:hover .site-nav__dropdown-link--has-children { background-color: var(--color-body-dim); } .site-nav__dropdown-link--has-children:hover, .site-nav__dropdown-link--has-children:focus { background-color: var(--color-body-dim); } /*Rotate to face right*/ .site-nav__deep-dropdown-trigger .icon-chevron-down { position: absolute; top: 50%; right: 10px; width: var(--desktop-menu-chevron-size); height: var(--desktop-menu-chevron-size); transform: rotate(-90deg) translateX(50%); } .site-nav__details { cursor: pointer; color: var(--color-nav-text); } .site-header__drawer { display: none; position: fixed; /* left: 0; */ top: 83px; max-height: calc(100vh - 83px); overflow-y: auto; background-color: var(--color-body); color: var(--color-text-body); box-shadow: var(--drawer-box-shadow); z-index: var(--z-index-header-drawers); transition: all var(--slide-curve); transform: translateY(-100%); width: 500px; height: 100%; padding: 13px 12px 16px 16px; flex-direction: column; align-items: flex-start; gap: 16px; flex-shrink: 0; align-self: stretch; } @media screen and (min-width: 769px) and (max-width: 1188px) { .site-header__drawer { height: 66%; } } .site-header__drawer.is-active { display: flex; transform: translateY(0); border-radius: 16px 0 0 16px; } @media(max-width: 768px) { .site-header__drawer { height: calc(100vh - 52px); border-radius: 0px!important; width: 100%!important; } .site-header__drawer.is-active { max-height: none; top: 52px; } } .payment-buttons .btn.cart__checkout { background-color: #FF3333; color: white; text-transform: uppercase; border: 0; } .payment-buttons .btn.cart__checkout, .cart__view-cart { display: flex; align-items: center; justify-content: center; gap: 8px; } .cart__info { padding: 0; } .cart__info small { font-size: 14px; font-weight: 300; color: rgba(55, 65, 81, 1); } .site-header__drawer-animate { width: 100%; transform: translateY(-20px); opacity: 0; } .is-active .site-header__drawer-animate { opacity: 1; transform: translateY(0px); transition: opacity 0.3s ease 0.15s, transform 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s; } .site-nav__close-cart { display: none; } .cart-open .site-nav__close-cart { display: block; } .site-nav__icon-label { margin-left: 15px; } /*Cart link and bubble*/ .cart-link { position: relative; display: inline-block; } .cart-link__bubble { display: none; position: absolute; top: 50%; right: -4px; font-size: 12px; line-height: 1; font-weight: var(--type-header-weight); letter-spacing: 0; text-align: center; } .cart-link__bubble:before { content: ''; display: block; position: absolute; top: 50%; left: 50%; background-color: var(--color-cart-dot); border-radius: 50px; width: 150%; height: 0; padding: 10px; transform: translate(-50%, -50%); } /*Slight position change with cart icon*/ [data-icon='cart'] .cart-link__bubble { top: -2px; right: 0; } .cart-link__bubble-num { position: relative; color: var(--color-cart-dot-text); } .cart-link__bubble--visible { display: block; } /*Height changes based on active subnav*/ .slide-nav__wrapper { --z-index-overlay: 1; position: relative; overflow: hidden; display: block; } /*Element slides left/right to reveal current nav level*/ .slide-nav { width: fit-content; margin: 0; list-style: none; transition: transform var(--slide-curve); } @media (max-width: 767px) { .slide-nav { width: 50%; } } [data-level='2'] .slide-nav { transform: translateX(-100%); } [data-level='3'] .slide-nav { transform: translateX(-200%); } /*button element cannot be flex, so make invisible and style child*/ .slide-nav__button { display: block; background: none; border: 0; padding: 0; width: 100%; text-align: left; } [dir='rtl'] .slide-nav__button { text-align: right; } .slide-nav__link { position: relative; display: flex; width: 100%; padding: 10px 20px; align-items: center; /* justify-content: space-between; */ color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: 22px; /* 157.143% */ text-transform: uppercase; } .mobile-login-nav__link { position: relative; display: flex; width: 100%; padding-left: 7px; gap: 6px; align-items: center; justify-content: flex-start; text-transform: uppercase; } .mobile-login-nav__link .icon { width: 22px; height: 22px; margin-left: -10px; } .mobile-login-nav__link:hover { color: #F33; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 700; line-height: 22px; /* 157.143% */ } .slide-nav__link>span { display: block; flex: 1 1 auto; } .slide-nav__link .icon { width: 13px; height: 13px; margin-left: -10px; } /*Collection link image*/ .slide-nav__image { position: absolute; width: 40px; height: 40px; left: 15px; top: 50%; margin-top: -20px; } .slide-nav__image img { object-fit: cover; width: 100%; height: 100%; } .slide-nav__image+span { padding-left: 45px; } @media (max-width: 1189px) { .header-layout { height: 52px; padding-top: 3px; } .site-header__drawer { top: 70px; max-height: calc(100vh - 70px); z-index: var(--z-index-header-drawers-mobile); padding-top: 19px; } .slide-nav__link { padding: 0 21px 5px 0; } .mobile-nav__item:not(:first-child) { margin-top: 10px; } } /*Hot Fix for Shop Mobile Submenu*/ .menu-level2 { border-bottom: 1px solid #eaeaea; padding-bottom: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; } .menu-level2 svg { display: none !important; } .menu-level2 .mobile-nav__dropdown-link { text-transform: uppercase; padding-left: 0; cursor: default; border-bottom: 1px solid transparent; } .menu-level2 ul { padding: 0; margin: 0; } .menu-level2 ul li { border-bottom: 1px solid transparent; } .menu-level2 ul li:hover, .menu-level2 ul li:focus, .menu-level2 ul li:active { border-bottom: 1px solid black; } /*Slightly different style, icon on left*/ .slide-nav__link--back { font-weight: var(--type-header-weight); justify-content: flex-start; } .slide-nav__link--back>span { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .slide-nav__link--back .icon { margin-right: 15px; margin-left: 0; transform: rotate(180deg); } /*list item*/ .slide-nav__item { display: block; width: 100%; margin: 0; border-bottom: 1px solid #D4D4D4; } .slide-nav__item:first-child { padding-top: 10px; } .slide-nav__item:last-child { padding-bottom: 10px; } .slide-nav__item a { color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: 22px; /* 157.143% */ } .slide-nav__dropdown { display: none; visibility: hidden; position: absolute; width: 100%; top: 0; right: -100%; margin: 0; opacity: 0; transition: all var(--slide-curve); padding: 13px 12px 40px 10px; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 0 0; } .slide-nav__item:hover { color: #F33; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 700 !important; line-height: 22px; /* 157.143% */ border-bottom: 1px solid #FF3333; } .slide-nav__item:hover a { color: #F33; } .slide-nav__item:hover .slide-nav__dropdown { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .slide-nav__dropdown.is-active { display: flex; visibility: visible; opacity: 1; transition: all 0.55s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s forwards; } .mobile-nav__dropdown { display: flex; position: absolute; top: 0; right: 0; z-index: 100; margin: 0; transition: all var(--slide-curve); padding: 5px 12px 5px 9px; flex-direction: column; align-items: flex-start; gap: 8px; background: #f9f9f9; padding-right: 0; } .mobile-nav__dropdown-list { width: 320px; margin: -5px 0 5px 0px; } .mobile-nav__menu-item:not(:first-child) { margin-top: 9px; } .mobile-nav__menu-item svg { width: 4px; height: 4px; } .mobile-nav__item { display: block; width: 100%; margin: 0; border-bottom: 1px solid #D4D4D4; } .mobile-nav__item:last-child { border-bottom: 0; } .mobile-nav__item a { color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: 22px; /* 157.143% */ } .mobile-nav__item:hover .slide-nav__link { font-weight: 700; } .slide-nav__dropdown { display: none; visibility: hidden; position: absolute; width: 100%; top: 0; right: -100%; margin: 0; opacity: 0; transition: all var(--slide-curve); padding: 13px 12px 40px 10px; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 0 0; } .mobile-nav__item:hover { color: #F33; font-family: Outfit; font-size: 14px; font-style: normal; line-height: 22px; /* 157.143% */ border-bottom: 1px solid #FF3333; } .mobile-nav__item:hover .slide-nav__link { color: #F33; } .slide-nav__link.last-chance { color: #ff3434; margin-left: 7px; } .mobile-nav__item:last-child:hover { border-bottom: 0; } .mobile-nav__item:hover .slide-nav__dropdown { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .mobile-nav__menu-item { display: flex; align-items: center; border-bottom: 1px solid #D4D4D4; width: 100%; } .mobile-nav__menu-item li { width: 100%; margin-bottom: 0; } .mobile-nav__menu-item:hover svg circle { fill: #FF3333; } .mobile-nav__menu-item:hover { border-bottom: 1px solid #FF3333; } .mobile-nav__menu-item:hover .mobile-nav__dropdown-link { font-weight: 700; } .mobile-nav__dropdown-link { display: block; padding: 3px 6px; white-space: normal; font-size: calc(var(--type-base-size) - 1px); line-height: 18px !important; } /*Adjustments to footer menus when inside mobile nav*/ .site-header__mobile-nav .footer__section--menus { margin-top: 20px; margin-left: calc(var(--page-width-padding) * -1); margin-right: calc(var(--page-width-padding) * -1); } header-nav { display: block; } .site-header__search-container { display: none; align-items: center; position: absolute; top: 0; left: 0; bottom: 0; right: 0; /* background: var(--color-nav); */ color: var(--color-nav-text); z-index: var(--z-index-header-search); } .site-header__search-container.is-active { display: flex; } body:has(.site-header__search-container.is-active) :is(.header-item.header-item--icons, .header-item--navigation) { display: none; } .site-header__search-container .page-width { display: flex; width: 100%; position: relative; } .site-header__search { display: flex; width: 100%; } .site-header__search .icon { width: 26px; height: 26px; } .site-header__search>is-land { width: 100%; } /* Override the above for our stroke-only icons */ svg.icon { display: inline-block; vertical-align: middle; width: var(--icon-width-size, var(--icon-size, 20px)); height: var(--icon-height-size, var(--icon-size, 20px)); } svg.icon.icon--line { stroke-width: var(--icon-stroke-width, 2px); stroke-linejoin: var(--icon-stroke-line-join, miter); } /*Unload ajax styles*/ .collection-grid__wrapper.unload { min-height: 180px; position: relative; } @media only screen and (min-width: 769px) { .collection-sidebar { padding-right: 10px; margin-bottom: 20px; margin-top: 44.6%; } } .collection-grid { margin-bottom: var(--index-section-padding); margin-left: -10px; width: calc(100% + 20px); } body:has(.filter-wrapper.is-active) .collection-filter__inner { display: none; } /*Collection sidebar turns into a slide-down drawer on mobile*/ @media only screen and (max-width: 768px) { /*Slight padding above grid when quick view buttons extend above grid item*/ [data-grid-style='simple'] .collection-grid, [data-grid-style*='grey'] .collection-grid, [data-grid-style*='white'] .collection-grid { padding-top: 10px; } } .unload [data-section-type='collection-template'] { animation: grid-product__loading 1.5s ease infinite 1.5s; } .unload .collection-grid { opacity: 0.2; transition: opacity 0.3s; } .item-grid__sidebar { min-height: 0; position: sticky!important; top: 0px!important; height: fit-content; /*updated with sticky header JS*/ /* max-height: 90vh; */ overflow-y: auto; margin-bottom: 200px; } @media (max-width: 767px) { .item-grid__sidebar { display: none; } } .collection-mobile-filters .collapsible-trigger__layout--inline { justify-content: space-between; } collection-mobile-filters.is-open .mobile-filters-header { margin-left: 0 !important; margin-right: 0 !important; padding: 20px 15px 0 8px !important; border-bottom: 0 !important; } .mobile-filters-header-left { width: 100%; border-bottom: 1px solid #C8C8C8; padding-bottom: 8px; } @media only screen and (max-width: 768px) { .collection-mobile-filters .collapsible-trigger-btn { padding-right: 17px; padding-left: 17px; } .collection-mobile-filters .collapsible-trigger__icon { right: 17px; } .collection-mobile-filters .filter-wrapper { display: none; transition: all var(--slide-curve); background-color: var(--color-body); transform: translateY(-100%); max-height: calc(100vh - 54px); height: 100%; overflow: auto; box-shadow: var(--drawer-box-shadow); } .collection-mobile-filters .filter-wrapper.is-active { display: block; transform: translateY(0); padding: 0 15px 0 12px; } button.collapsible-trigger.collapsible-trigger-btn.collapsible--auto-height.tag-list__header { /*display: none;*/ } .collection-mobile-filters { position: absolute; left: 0; right: 0; bottom: 0; height: 0; overflow: visible; z-index: 100; } span.collapsible-trigger__layout.collapsible-trigger__layout--inline>span:first-child { font-size: 17px !important; } .mobile-filters-clear-all { min-width: 79px; } .mobile-filters-header-right { border-bottom: 1px solid #C8C8C8; padding-bottom: 8px; } } /*.collection-filter { margin-bottom: calc(var(--gutter) / 2); }*/ @media only screen and (max-width: 768px) { .collection-filter { position: sticky; top: 0; /*updated with JS based on sticky header height*/ z-index: 2; margin-left: calc(var(--page-width-gutter-small) * -1); margin-right: calc(var(--page-width-gutter-small) * -1); margin-bottom: 0; } } .collection-filter__inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; } @media only screen and (max-width: 768px) { .collection-filter__inner { position: relative; z-index: 2; justify-content: space-between; background: var(--color-body); padding: 0 var(--page-width-gutter-small); } .collection-filter__inner:after { content: ''; position: absolute; height: 20px; top: 100%; left: 0; right: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0)); } } .collection-filter__inner select { display: block; width: 100%; border: 0; } .collection-filter__btn { padding: 12px 0; font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 1px); } .collection-filter__btn .icon { vertical-align: middle; width: 25px; height: 25px; margin-top: -1px; margin-right: 5px; } .collection-filter__btn path { transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } /*Animate SVG to become close icon*/ .collection-filter__btn.is-active path:nth-child(3) { transform: rotate(45deg); transform-origin: 70% 90%; } .collection-filter__btn.is-active path:nth-child(1), .collection-filter__btn.is-active path:nth-child(2), .collection-filter__btn.is-active path:nth-child(4), .collection-filter__btn.is-active path:nth-child(5) { opacity: 0; } .collection-filter__btn.is-active path:nth-child(6) { transform: rotate(-45deg); transform-origin: 80% 44%; } .collection-filter__item { flex: 0 1 auto; } .collection-filter__item--drawer { flex: 0 1 50%; padding-right: calc(var(--gutter) / 4); } .collection-filter__item--count { flex: 1 1 50%; text-align: center; } @media only screen and (max-width: 768px) { .collection-filter__item--count { order: 3; flex: 1 1 100%; } } /*Swap product grid layouts*/ .grid-view-btn { display: block; padding: 10px 8px; opacity: 0.15; } .grid-view-btn:hover { opacity: 0.4; } .grid-view-btn.is-active { opacity: 1; color: #FF3333; } .grid-view-btn svg { display: block; width: 32px; height: 32px; } @media only screen and (max-width: 768px) { .grid-view-btn svg { width: 20px; height: 20px; } } .collection-filter__item--right { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; } .collection-filter__item--right>.inline-list { margin-right: -7px; } .collection-mobile-filters__drawer { height: 100dvh; } .collection-mobile-filters__holder { height: calc(100vh - 54px); } @media only screen and (max-width: 768px) { .collection-filter__sort select { margin-left: -8px; } .collection-filter__item--right>.inline-list { margin-right: 0; } } @media only screen and (min-width: 769px) { .collection-filter__sort { padding-right: 15px; /*border-right: 1px solid; border-right-color: var(--color-border);*/ min-width: 100px; } } .image-filter__wrapper ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .image-filter__wrapper ul label { height: 100%; align-items: flex-start; border: 1px solid transparent; } .image-filter__wrapper ul label:active, .image-filter__wrapper ul label:hover, .image-filter__wrapper ul label:focus-within { border-color: var(--color-border); } .image-filter__wrapper ul .tag__text { margin-left: 0; } .image-filter__wrapper .tag--active label { border-color: var(--color-text-body); border: 2px solid; } .image-filter__image-wrapper { display: flex; flex-direction: column; gap: 10px; text-align: center; } .tag-list--active-tags:empty { display: none; } /*Collection Head + Breadcrumbs*/ .collection-heading { margin-top: 16px; gap: 8px; display: flex; flex-direction: column; } .collection-heading .collection-breadcrumbs { padding: 8px 4px 4px 0; display: inline-flex; } .collection-heading .collection-breadcrumbs a, .collection-heading .collection-breadcrumbs span { color: #878787; text-align: center; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } .collection-heading .collection-breadcrumbs span:last-child { color: #FF3333; } .collection-heading .collection-header h1 { color: #141414; font-family: Outfit; font-size: 40px; font-style: normal; font-weight: 900; line-height: 130%; /* 52px */ text-transform: uppercase; margin-bottom: 0; letter-spacing: 0; } .collection-header-mobile .collection-title-mobile { display: none; } .collection-grid__wrapper>div:first-of-type { display: flex; justify-content: space-between; align-items: flex-end; } /*Collection Filters*/ .collection-sidebar__group .collapsible-trigger-btn { padding: 20px 14px 24px 0 !important; } .collection-sidebar__group .facet-toggle-icon { position: relative; width: 16px; height: 16px; margin-left: 0.5rem; display: inline-block; } .collection-sidebar__group .facet-toggle-icon::before, .collection-sidebar__group .facet-toggle-icon::after { content: ''; position: absolute; background-color: #000; transition: transform 0.2s ease; } .collection-sidebar__group .facet-toggle-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .collection-sidebar__group .facet-toggle-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .collection-sidebar__group .collapsible-trigger.is-open .facet-toggle-icon::after { opacity: 0; } span.collapsible-trigger__layout.collapsible-trigger__layout--inline>span:first-child { font-size: 20px; font-style: normal; font-weight: 700; line-height: 24px; } .collapsible-trigger__layout--inline { justify-content: space-between !important; } label.tag__checkbox-wrapper { margin: 0; padding: 8px 16px 8px 0 !important; } label.tag__checkbox-wrapper span:nth-child(3) { color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; margin-left: 10px; } .collection-sidebar__group.collection-sidebar__group--sort { display: none; } @media only screen and (max-width: 768px) { .collection-sidebar__group .collapsible-trigger-btn { padding-bottom: 12px !important; } } /*Grid Dropdown & Views buttons*/ .collection-filter { margin-right: -10px; margin-bottom: -11px; } .collection-filter__item--count { margin-top: 24px; margin-bottom: 10px; font-size: 12px; } .collection-filter__item--count p { color: #141414; font-weight: 400; } .collection-filter__inner select { border-radius: 4px; border: 1px solid #D9D9D9; color: #141414; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: 130%; display: flex; flex-direction: column; } @media screen and (max-width: 768px) { .collection-filter__inner select { width: 100px; } } .grid-view-btn:not(.is-active) { color: #D9D9D9; opacity: 1; } /*-----Grid Products-----*/ .grid-product__image-wrap { margin: 0 !important; } .home-page-featured .grid__image-ratio img.grid__image-contain { background-color: #e5e2e3; } .home-page-featured .grid__image-ratio, .home-page-featured .grid__image-ratio is-land[data-image-type] { aspect-ratio: 4/4.8; height: auto; } .product__collection-name { overflow: hidden; color: #7B7B7B; text-overflow: ellipsis; font-family: Outfit; font-size: 11px; font-style: normal; font-weight: 400; line-height: 140%; /* 15.4px */ text-transform: capitalize; } [data-view='large'] .grid__image-ratio.grid__image-ratio--square { width: 380px; height: 450px; flex-shrink: 0; } [data-view='large'] .grid-product__title { font-size: 14px; font-weight: 600; } [data-view='medium'] .grid__image-ratio.grid__image-ratio--square { width: 296px; height: 352px; flex-shrink: 0; aspect-ratio: 37/44; } [data-view='list'] .grid-product__image-wrap { width: 130px; height: 160px; } [data-view='list'] .grid__image-ratio.grid__image-ratio--square { width: 130px; height: 160px; } .grid-product__price--current { overflow: hidden; color: #141414; text-overflow: ellipsis; font-family: Outfit; font-size: 20px !important; font-style: normal; font-weight: 400 !important; line-height: normal; text-transform: capitalize; } @media(max-width: 768px) { .grid-product__title { font-size: 11px !important; } .grid-product__price--current { font-size: 12px !important; } } .grid-product__price--current sup { display: none; } /*Callout Desktop - START*/ .collection-callout .page-width { display: flex; padding: 40px 100px; justify-content: center; align-items: center; gap: 40px; margin-top: 60px; } .collection-callout__content { flex: 1 1 50%; gap: 28px; display: flex; flex-direction: column; align-items: flex-start; } .collection-callout h2 { color: #141414; text-align: center; font-family: Outfit; font-size: 40px; font-style: normal; font-weight: 900; line-height: 100%; /* 40px */ text-transform: uppercase; margin-bottom: 0; } .collection-callout p { color: #141414; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 300; line-height: 120%; /* 19.2px */ margin-bottom: 0; } .cta-button { display: flex; width: 257px; height: 52px; padding: 16px; justify-content: center; align-items: center; gap: 8px; background-color: #f33; border-radius: 8px; color: #FFF; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } .collection-callout__video { flex: 1 1 43%; border-radius: 26px; min-height: 394px; position: relative; } .collection-callout__video video { width: 100%; height: 394px; display: block; border-radius: 26px; /*object-position: 0px -230px !important;*/ } .collection-callout .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; cursor: pointer; } .callout-header-mobile { display: none; } /*Callout Desktop - END*/ /*----Mobile View START----*/ @media only screen and (max-width: 768px) { div[data-collection-count] { /*Hiding the Product Count on mobile*/ display: none; } .collection-grid__wrapper>div:first-of-type { flex-direction: column; align-items: flex-start; } .collection-heading { margin-top: 0; gap: 3px } .collection-filter { width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .collection-filter:has(.filter-wrapper.is-active) { width: 70vw !important; right: 0 !important; left: auto; position: fixed; top: 0 !important; z-index: 1000; } .collection-filter:has(.filter-wrapper.is-active)::before { content: ''; width: 100vw; height: 100dvh; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.627); z-index: 100; } .grid-view-btn { padding: 0 4px; } .collection-filter__item--right { margin-left: 10px; } .collection-filter__btn span { font-size: 14px; font-style: normal; font-weight: 600; line-height: 130%; } .collection-heading .collection-header h1 { /*Hiding the Collection Header on mobile*/ display: none; } .collection-header-mobile .collection-title-mobile { display: flex; font-size: 20px; justify-content: center; margin-top: 19px; margin-bottom: 12px; text-transform: uppercase; text-align: center; width: 100%; } .collection-filter__item--count { margin: 12px 0 0 0; font-size: 10px; } .collection-heading .collection-breadcrumbs a, .collection-heading .collection-breadcrumbs span { font-size: 10px; } .collection-breadcrumbs svg { width: 12px; height: 12px; } .collection-heading .collection-breadcrumbs { padding: 8px 0px 0px 0; } [data-view='large'] .grid__image-ratio.grid__image-ratio--square { width: 345px; height: 400px; flex-shrink: 0; } [data-view='medium'] .grid__image-ratio.grid__image-ratio--square { width: 100%; height: 190px; } [data-view='list'] .grid__image-ratio.grid__image-ratio--square { width: 110px; height: 130px; } [data-view='list'] .grid-product__image-wrap { width: 110px; height: 130px; } .grid-item { margin-bottom: 5px; } [data-view='medium'] .grid-item { margin-bottom: 8px; padding: 0 3px; } [data-view=list] .grid-item { border-bottom: 0 !important; } [data-view='list'] .product__collection-name, [data-view='medium'] .product__collection-name { font-size: 9px; } [data-view=large] .grid-item__meta { margin: 9px; } [data-view=medium] .grid-item__meta { margin: 6px 0 0 0; } [data-view='medium'] .grid-product__title { white-space: normal; font-size: 11px; line-height: 112%; } [data-view='list'] .grid-product__title { white-space: normal; line-height: 130%; margin-bottom: 12px; } [data-view='medium'] .grid-product__price--current span { font-size: 12px; } [data-view='list'] .grid-product__price--current span { font-size: 14px; } [data-view='large'] .grid-product__actions { width: 345px; padding: 10px 0; } .quick-add-btn .btn--circle { display: inline-flex; background: unset; } [data-view='large'] .quick-add-btn .btn--circle { gap: 10px; } [data-view='medium'] .quick-add-btn .btn--circle, [data-view='list'] .quick-add-btn .btn--circle { gap: 6px; padding: 0; font-size: 10px; } .quick-add-btn .btn--circle svg { color: #FF3333; } [data-view='large'] .quick-add-btn .btn--circle svg { height: 20px; width: 20px; } [data-view='medium'] .quick-add-btn .btn--circle svg, [data-view='list'] .quick-add-btn .btn--circle svg { height: 12px; width: 12px; } .quick-add-btn .btn--circle:after { content: "Quick Shop"; overflow: hidden; color: #141414; text-align: center; text-overflow: ellipsis; font-family: Outfit; font-style: normal; font-weight: 500; line-height: 120%; /* 16.8px */ text-transform: capitalize; } [data-view='medium'] .grid-product__actions>button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { margin-bottom: 0 !important; } [data-view='large'] .quick-add-btn .btn--circle:after { font-size: 14px; margin-top: 3px; } [data-view='medium'] .quick-add-btn .btn--circle:after, { font-size: 10px; } /*Quick Add END*/ /*Callout Mobile - START*/ .collection-callout .page-width { flex-direction: column-reverse; padding: 16px 24px 32px 24px; gap: 16px; margin-top: 32px; } .callout-header-mobile { display: flex; justify-content: center; } .collection-callout h2 { font-size: 16px; font-weight: 900; line-height: 100%; text-align: center; margin-bottom: 16px; } .collection-callout__video { min-height: 196px; width: 327px; } .collection-callout__video video { height: 197px; } video-media>video:not(:fullscreen) { /*object-position: 0px -138px !important;*/ max-width: 100vw; } .collection-callout__content { align-items: center; text-align: center; padding: 0; gap: 26px; } .collection-callout__content h2 { display: none; } .collection-callout__content p { font-size: 14px; margin-top: 12px; line-height: 1.1; } .cta-button { width: 257px; height: 42px; font-size: 12px; padding: 12px 8px; } /*Callout Mobile - END*/ } /*----Mobile View END----*/ @media (min-width: 400px) and (max-width: 1400px) { [data-view='large'] .grid__image-ratio.grid__image-ratio--square { width: auto; } } @media (min-width: 375px) and (max-width: 768px) { [data-view='large'] .grid-product__actions { width: 100%; } } @media (min-width: 769px) and (max-width: 1400px) { [data-view='medium'] .grid__image-ratio.grid__image-ratio--square { width: auto; height: auto; } .collection-callout .page-width { flex-direction: column-reverse; padding: 40px; } .collection-callout__video { min-height: 0; } .collection-callout__video video { height: 100%; } .collection-callout h2 { align-self: center; } .cta-button { align-self: center; } } @media only screen and (max-width: 768px) { .tag-list--active-tags { margin: 20px 20px 10px; display: none; } /*.collection-sidebar__group { border-top: 1px solid; border-top-color: var(--color-border); }*/ } .collection-sidebar__group { overflow: hidden; border-bottom: 1px solid #C8C8C8; } @media only screen and (max-width: 768px) { .collection-sidebar__group .tag-list:not(.tag-list--swatches) { columns: 1; list-style: none; } } .collection-sidebar__group .tag-list a:hover { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } @media only screen and (min-width: 769px) { .collection-sidebar__group .collapsible-trigger-btn { padding-top: 5px; } } :root { --tag-active-icon-size: 16px; --tag-active-icon-size-active: 10px; } .tag-list__header { text-align: left; } .tag-list .tag-list { margin-left: calc(var(--gutter) / 2); } .tag-list a, .tag-list button, .tag-list label { cursor: pointer; display: block; padding: 1px 0; } .tag--swatch label { margin: 0; } .tag-list label:hover, .tag:focus-within label { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .tag--active>a, .tag--active>button, .tag--active>label { font-weight: 900; } .tag-list--checkboxes { padding-bottom: 6px; } .tag-list--checkboxes a { position: relative; padding-left: 25px; } .tag-list--checkboxes a:before, .tag-list--checkboxes a:after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .tag-list--checkboxes a:before { border: 1px solid; border-color: var(--color-border); height: var(--tag-active-icon-size); width: var(--tag-active-icon-size); } .tag-list--checkboxes a:after { height: var(--tag-active-icon-size-active); width: var(--tag-active-icon-size-active); left: 3px; } .tag-list--checkboxes .tag--active a:after, .tag--active .tag__checkbox:after, input:checked~.tag__checkbox:after { background-color: #FF3333; border-color: var(--color-text-body); } .tag.tag--active .tag__checkbox:before { background: #FF3333; border-color: #FF3333; } .tag.tag--active .tag__checkbox:after { content: '✔'; color: #FFF; left: 4px; top: 3px; background-color: unset; font-size: 10px; } @media only screen and (max-width: 768px) { .tag.tag--active .tag__checkbox:after { left: 3px; top: 6px; font-size: 12px; } } /*Remove tags (top of sidebar)*/ .tag--remove, .tag--inline { display: inline-block; position: relative; margin: 0 10px 13px 0; } .tag--remove a, .tag--inline a { display: block; text-align: left; padding: 7px 15px 7px 36px; min-width: 0; } /*X icon sits over button, not in it*/ .tag--remove .icon, .tag--inline .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; /* color: var(--color-button-primary-text); */ color: #141414; } .tag--inline a { padding: 7px 15px 7px 15px; } /*Color swatches in sidebar*/ .tag-list--swatches { margin-top: 2px; margin-left: -2px; } .drawer .tag-list--swatches { margin-left: -2px; } .tag-list--swatches li { display: inline-block; } label.tag__checkbox-wrapper { display: flex; } .tag__checkbox { position: relative; padding-left: 25px; overflow: hidden; } .tag__checkbox:before, .tag__checkbox:after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .tag__checkbox:before { border: 1px solid; border-color: #000; border-radius: 5px; height: var(--tag-active-icon-size); width: var(--tag-active-icon-size); } .tag__checkbox:after { height: var(--tag-active-icon-size-active); width: var(--tag-active-icon-size-active); left: 3px; } .tag__input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /*Sidebar color swatches*/ .tag--swatch { display: inline-block; } .tag--swatch .color-swatch { width: 35px; height: 35px; flex-shrink: 0; } .tag--active .color-swatch:hover:after { position: absolute; content: ''; left: 50%; top: 0; bottom: 0; border-left: 1px solid; border-color: var(--color-border); transform: rotate(45deg); } .tag:not(.tag--active) label:hover .color-swatch:hover, .tag:focus-within .color-swatch { box-shadow: 0 0 0 1px var(--color-text-body); } .tag--active .color-swatch { box-shadow: 0 0 0 2px var(--color-text-body); } .tag--show-label { width: 100%; } .tag--show-label label { display: flex; align-items: center; } .tag--show-label .tag__text { display: block !important; margin-left: 0.5rem; margin-bottom: 4px; } .map { display: block; height: 100%; position: relative; } /* TODO: should be added as a object-cover utility class */ .map__image { width: 100%; height: 100%; object-fit: cover; } .map__onboarding { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; z-index: 0; } .product-image-main { position: relative; } .product-image-main[data-size] img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .product-image-main[data-size='square'] .image-wrap { padding-bottom: 100% !important; border-radius: 18px; } .product-image-main[data-size='landscape'] .image-wrap { padding-bottom: 75% !important; } .product-image-main[data-size='portrait'] .image-wrap { padding-bottom: 150% !important; } .product__model-wrapper model-viewer { width: 100%; height: 100%; } .product-options-row { display: flex; flex-wrap: nowrap; gap: 1rem; align-items: center; margin-bottom: 1.5rem; flex-direction: row-reverse; justify-content: space-between; margin-top: 29px; } /* HOTFIX FOR MOBILE smallest resolutions*/ @media (min-width: 768px) { .sticky-bar { display: none!important; } } @media (max-width: 490px) { .gift-cart-product-page .product-options-row,.product-options-row { flex-direction: column!important; } .product-page block-buy-buttons { order:1; } .product-page .sticky-bar__controls block-quantity-selector { order: 3; } .product-page .block-variant-picker { order:2; margin-top: 25px; width: 100%!important; } .product-page .sticky-bar__controls { display: flex!important; flex-direction: column-reverse!important; } .gift-cart-product-page .product-options-row .product-block,.product-options-row { align-self: start!important; width: 100%; } .gift-cart-product-page .variant-button-wrap .variant__label,.product-options-row { text-align: left; } .gift-cart-product-page .product-grid__container .variant-button-wrap, .product-options-row { justify-content: flex-start!important; } } .gift-cart-product-page .product-options-row { margin-bottom: 33px; } .product-options-row .product-block { margin-bottom: 0; align-self: end; } .product__video-wrapper { background-color: var(--color-small-image-bg); /*Put overlay on muted videos because they cannot be interacted with*/ } .product__video-wrapper.loaded[data-video-style='muted']:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /*Unless low power mode requires them to be touched to start*/ .product__video-wrapper.video-interactable:before { display: none; } /*Make sure states don't overlap*/ .product__video-wrapper.loaded:after { display: none; } .product__video-wrapper.loading iframe { opacity: 0.01; /*sneaky way to avoid talking to an invisible YT iframe*/ } .product__video-wrapper.loaded iframe { opacity: 1; } .product__video-wrapper__grippy { position: absolute; left: 0; width: calc(50% - 50px); top: 32px; bottom: 40px; z-index: 3; } .product__video-wrapper__grippy:before { position: absolute; display: block; content: ''; width: 60%; height: 35%; top: 0; left: 100%; } .product__video-wrapper__grippy+.product__video-wrapper__grippy { left: auto; right: 0; } .product__video-wrapper__grippy+.product__video-wrapper__grippy:before { bottom: 0; top: auto; right: 100%; left: auto; } .product-video-trigger { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*Zoom button*/ .product__photo-zoom { position: absolute !important; bottom: 0; right: 0; cursor: zoom-in; border: 0; /*Only show active slide's zoom button (mobile)*/ } @media only screen and (max-width: 768px) { .product__photo-zoom { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); padding: 8px; } .product__photo-zoom .icon { width: 21px; height: 21px; } .product__main-photos .product__photo-zoom { margin-bottom: 10px; margin-right: 10px; } /*Hide zoom button on all slides*/ .product-slideshow .product__photo-zoom { opacity: 0; transition: opacity 0.5s ease-out; } .product-slideshow .is-selected .product__photo-zoom { opacity: 1; } } /*Visually hidden, covers full image on desktop*/ @media only screen and (min-width: 769px) { .product__photo-zoom { opacity: 0; width: 100%; top: 0; left: 0; margin: 0; border-radius: 0; } .product__photo-zoom svg, .product__photo-zoom span { display: none; } } .product-single__close-media { position: absolute; top: 10px; right: 10px; z-index: 2; } .multi-selectors { display: flex; justify-content: center; flex-wrap: wrap; } .multi-selectors__item { margin: 0 20px; } .toolbar .multi-selectors__item { margin-right: 0; margin-bottom: 0; } .multi-selectors--footer { justify-content: flex-start; } .multi-selectors--footer .multi-selectors__item { margin-bottom: 20px; margin-left: 0; } .currency-flag { position: relative; display: inline-block; width: 22px; height: 22px; object-fit: cover; vertical-align: middle; overflow: hidden; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3) inset; border-radius: 50%; background-clip: padding-box; /* Fix for android devices */ } @media only screen and (max-width: 768px) { [data-disclosure-currency] .disclosure-list { left: 50%; transform: translateX(-50%); max-width: 90vw; } [data-disclosure-currency] .disclosure-list--single-true { left: 0; transform: none; } } :root { --max-height-disclosure: 60vh; --min-height-disclosure: 92px; } .disclosure { position: relative; } .disclosure__toggle { white-space: nowrap; } .disclosure-list { background-color: var(--color-body); color: var(--color-text-body); bottom: 100%; padding: 10px 0; margin: 0; position: absolute; display: none; min-height: var(--min-height-disclosure); max-height: var(--max-height-disclosure); overflow-y: auto; border-radius: var(--input-radius); box-shadow: 0 0 20px rgba(0, 0, 0, 0.09); z-index: 1; } .disclosure-list a, .disclosure-list .disclosure-list__item a { color: currentColor; } .disclosure-list--down { bottom: auto; top: 100%; } .disclosure-list--left { right: 0; } .disclosure-list--visible { display: block; } .disclosure-list__item { white-space: nowrap; padding: 5px 15px 4px; text-align: left; } .disclosure-list__option:focus .disclosure-list__label, .disclosure-list__option:hover .disclosure-list__label { -webkit-text-decoration: underline; text-decoration: underline; } .disclosure-list__item--current .disclosure-list__label { -webkit-text-decoration: underline; text-decoration: underline; } .disclosure-list__label { display: inline-block; vertical-align: middle; text-underline-offset: 0.2rem; } [data-disclosure-currency] .disclosure-list__label { padding-left: 10px; } .disclosure-list__label span { border-bottom: 2px solid transparent; } .is-active .disclosure-list__label span { border-bottom: 2px solid currentColor; } .newsletter__input-group { /*margin: 0 auto 20px; max-width: 400px;*/ gap: var(--input-button-gap); } .newsletter__input-group:last-of-type { margin-bottom: 0; } .newsletter__input::-webkit-input-placeholder { color: var(--color-text-body); opacity: 1; } .newsletter__input:-moz-placeholder { color: var(--color-text-body); opacity: 1; } .newsletter__input::-moz-placeholder { color: var(--color-text-body); opacity: 1; } .newsletter__input:-ms-input-placeholder { color: var(--color-text-body); } .newsletter__input::-ms-input-placeholder { color: var(--color-text-body); opacity: 1; } .form__submit--small { line-height: 0; } @media only screen and (max-width: 768px) { .form__submit--large { display: block; } .form__submit--small { display: none; } } @media only screen and (min-width: 769px) { .form__submit--large { display: block; } .form__submit--small { display: none; } } .shopify-challenge__container { padding: 30px 22px; } @media only screen and (min-width: 769px) { .shopify-challenge__container { padding: 120px 0; } } .input-group { display: flex; } .input-group .input-group-field:first-child, .input-group .input-group-btn:first-child .btn, .input-group input[type='hidden']:first-child+.input-group-field { border-radius: var(--input-radius) 0 0 var(--input-radius); } .input-group .input-group-field:last-child { border-radius: 0 var(--input-radius) var(--input-radius) 0; } .input-group .input-group-btn:first-child .btn, .input-group input[type='hidden']:first-child+.input-group-btn .btn { border-radius: var(--button-radius) 0 0 var(--button-radius); } [dir='rtl'] .input-group .input-group-btn:first-child .btn, [dir='rtl'] .input-group input[type='hidden']:first-child+.input-group-btn .btn { border-radius: 0 var(--button-radius) var(--button-radius) 0; } .input-group .input-group-btn:last-child .btn { border-radius: 0 var(--button-radius) var(--button-radius) 0; } [dir='rtl'] .input-group .input-group-btn:last-child .btn { border-radius: var(--button-radius) 0 0 var(--button-radius); } /*Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons*/ .input-group input::-moz-focus-inner { border: 0; padding: 0; margin-top: -1px; margin-bottom: -1px; } .input-group-field { flex: 1 1 auto; margin: 0; min-width: 0; } .input-group-btn { flex: 0 1 auto; margin: 0; display: flex; /*forces .btn full height*/ } .input-group-btn .icon { vertical-align: initial; } .input-group-btn .btn { min-width: 0; } /* Newsletter reminder */ newsletter-reminder { position: fixed; left: 20px; bottom: 20px; transition: ease-in-out 0.3s opacity; box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); max-width: 240px; z-index: 10; } @media only screen and (max-width: 768px) { newsletter-reminder { max-width: calc(100% - 40px); } } newsletter-reminder[data-enabled='false'] { opacity: 0; visibility: hidden; pointer-events: none; } newsletter-reminder[class*='color-scheme-']:not(.color-scheme-none) { position: fixed; } newsletter-reminder .color-scheme-none { color: var(--color-button-primary-text); background-color: var(--color-button-primary); } .newsletter-reminder__message.h3 { cursor: pointer; padding: var(--newsletter-reminder-padding); margin: 0; } .pagination { width: 100%; margin: calc(var(--gutter) * 2) 0; text-align: center; } .pagination>span { display: inline-block; vertical-align: middle; line-height: 1; } .pagination a { display: inline-block; } .pagination a:not(.btn), .pagination .page.current { padding: 13px 18px; } .pagination span:not(:has(*)) { padding: 13px 18px; } .pagination .page { border-radius: 4px; border: 1px solid #EAEAEA; background: #FAFAFA; color: #141414; } .pagination .page.current { background: #141414; color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 4px; } .pagination span.next { border-radius: 4px; border: 1px solid #EAEAEA; background: #FAFAFA; } .pagination span.next a { color: #141414; border: none; background: #FAFAFA; } .pagination span.prev { border-radius: 4px; border: 1px solid #EAEAEA; background: #FAFAFA; } .pagination span.prev a { color: #141414; border: none; background: #FAFAFA; } .pagination .btn { transition: transform 0.15s ease-out; } .pagination .btn:hover { transform: scale(1.08); } .pagination .btn .icon { width: 13px; height: 13px; } .parallax-image img { width: 100%; height: 100%; object-fit: cover; } .parallax-image { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: transform 0.05s linear; } .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; touch-action: none; z-index: 15000; -webkit-text-size-adjust: 100%; -webkit-backface-visibility: hidden; outline: none; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { cursor: zoom-in; } .pswp--zoomed-in .pswp__img { cursor: grab; } .pswp--dragging .pswp__img { cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--color-body); opacity: 0; transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; } .pswp__container, .pswp__zoom-wrap { touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; transform-origin: left top; /* for open/close transition */ transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; } .pswp--ie .pswp__img { width: 100% !important; height: auto !important; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; line-height: 16px; margin-top: -8px; color: #ccc; } .pswp__error-msg a { color: #ccc; -webkit-text-decoration: underline; text-decoration: underline; } .pswp__button { position: relative; /*Because JS listens to click on button element itself*/ } .pswp__button:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } /*Ignore clicks on svgs inside button*/ .pswp__button svg { pointer-events: none; } .pswp__button--arrow--left .icon, .pswp__button--arrow--right .icon { width: 13px; height: 13px; margin: 8px; } .pswp__button[disabled] { opacity: 0; pointer-events: none; } .pswp__ui { position: absolute; display: flex; justify-content: center; align-items: center; bottom: var(--gutter); left: 0; right: 0; transform: translateY(0); transition: transform 0.25s 0.6s; } .pswp__ui .btn { margin: 15px; border: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); } .pswp__ui--hidden { transform: translateY(150%); transition: transform 0.25s; } /* Fixes for iOS15 */ /* See https://gist.github.com/dimsemenov/0b8c255c0d87f2989e8ab876073534ea */ html.pswp-open-in-ios, html.pswp-open-in-ios body { background: #444; height: var(--window-inner-height); overflow: hidden; box-sizing: border-box; } /* Hide page content via CSS when PhotoSwipe opens */ .pswp-open-in-ios body>* { display: none; } .pswp-open-in-ios body .pswp.pswp--open { display: block; } .placeholder-noblocks { padding: 40px; text-align: center; } .placeholder-svg { fill: #999; background-color: #e1e1e1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; display: block; padding: 30px 0; } .placeholder-svg--no-padding { padding: 0; } predictive-search { display: flex; align-items: center; position: relative; width: 100%; max-width: 960px; margin: 0 auto; } predictive-search.is-active { flex: 99; } predictive-search.is-active .predictive__screen { display: block; z-index: 3; } predictive-search.is-active .btn--close-search { display: flex; align-items: center; justify-content: center; } .site-header__search-island { display: block; width: 100%; } .site-header__search-results { position: absolute; top: 100%; transform: translateY(var(--header-padding-bottom)); left: 0; right: 0; background-color: var(--color-body); color: var(--color-text-body); max-height: 70vh; max-height: calc(90vh - 100%); overflow: auto; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.09); transition: transform 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } .header-wrapper--compressed .site-header__search-results { transform: translateY(0); } .site-header__search-results-wrapper { padding: 15px 0; } @media only screen and (min-width: 769px) { .site-header__search-results { max-height: calc(100vh - 100% - 33px); /*search bar + toolbar*/ } .site-header__search-results-wrapper { padding: 30px 0; } } .predictive__label { margin-top: 20px; border-bottom: 1px solid; border-bottom-color: var(--color-border); padding-bottom: 5px; margin-bottom: 20px; } :root { /*Layout for article/images*/ --predictive-gap: 10px; } .predictive-result__layout { display: flex; flex-wrap: wrap; padding: var(--predictive-gap); margin-left: calc(var(--predictive-gap) * -1); margin-right: calc(var(--predictive-gap) * -1); } .predictive-result__layout>div { margin: 0 var(--predictive-gap) var(--gutter); } .predictive-result__layout>div:last-child { margin-bottom: 0; } .predictive-result__layout [data-type-products] { flex: 1 1 60%; margin-bottom: 0; } .predictive-result__layout [data-type-products] img { object-fit: contain; } .predictive-result__layout [data-type-products] .predictive-image-fill-space--true img { object-fit: cover; } .predictive-result__layout [data-type-collections], .predictive-result__layout [data-type-pages] { flex: 1 1 200px; } .predictive-result__layout [data-type-articles] { flex: 1 1 60%; } .predictive-result__layout [data-type-articles] .grid-item__meta { margin-left: 10px; } .predictive__image-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .predictive__image-wrap img { object-position: 50% 0; } .predictive-results__footer { padding: 0 0 30px; } .predictive-overflow-hidden { overflow: hidden; } @media only screen and (max-width: 768px) { .predictive-overflow-hidden { overflow: auto; } } [data-dark='true'] input { color: #fff !important; } [data-dark='true'] .btn--search path { stroke: #fff !important; } [data-dark='false'] input { color: #000 !important; } [data-dark='false'] .btn--search path { stroke: #000 !important; } .predictive__screen { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; background: var(--color-modal-bg); display: none; } predictive-search form { display: flex; flex-wrap: wrap; z-index: 4; position: relative; width: 100%; padding-top: 24px; } .search__input-wrap { position: relative; flex: 5; transition: flex 0.3s ease-in-out; } .search__input { background: #505050; color: var(--color-body-text); flex: 1; width: 100%; padding-left: 16px; padding-right: 16px; /*prevent zooming on mobile*/ font-size: 16px; border-radius: 8px; } .search__input:focus { background: #505050; border-color: #ffffff; } header .btn--close-search .icon path { stroke: #ffffff !important; } .btn--search { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; } .btn--search .icon { height: 25px; width: 25px; } @media only screen and (min-width: 769px) { .btn--search { right: 10px; } } [dir='rtl'] .btn--search { right: auto; left: 15px; } @media only screen and (min-width: 769px) { [dir='rtl'] .btn--search { left: 10px; } } .btn--close-search { display: none; flex: 30px 0 0; margin-left: 10px; } .btn--close-search .icon { height: 25px; width: 25px; } .btn--close-search .icon path { stroke: var(--color-nav-text) !important; } .search__results { background: var(--color-body); color: var(--color-body-text); position: absolute; width: 100%; min-width: 400px; max-width: 920px; border-radius: 8px; top: 100%; padding: 0; display: none; margin-top: 5px; container-type: inline-size; max-height: 80vh; overflow-y: auto; word-break: break-all; } @media only screen and (max-width: 768px) { .search__results { width: calc(100% + var(--page-width-padding, 17px) * 2); margin-left: calc(var(--page-width-padding, 17px) * -1); margin-right: calc(var(--page-width-padding, 17px) * -1); max-height: 75vh; } .template-search .page-content .search__results { max-height: 50vh; } } .price-range__slider-wrapper { padding: 0 8px; margin-bottom: 8px; } @media only screen and (max-width: 768px) { .price-range__slider-wrapper { padding: 0 10px; } } .price-range__input { display: none; } .price-range__display-wrapper { display: flex; flex: 1 1 auto; justify-content: space-between; padding: 0; margin-bottom: 8px; width: 100%; } @media only screen and (max-width: 768px) { .price-range__display-wrapper { padding: 0; } } .noUi-horizontal .noUi-handle { border: 0; border-radius: 50%; background: var(--color-text-body); box-shadow: 0 0 1px 2px rgb(255 255 255); width: 12px; height: 12px; cursor: pointer; right: -6px; top: -3px; } .noUi-horizontal .noUi-handle:hover, .noUi-horizontal .noUi-handle:focus { width: 14px; height: 14px; right: -7px; top: -4px; } .noUi-horizontal .noUi-handle:before, .noUi-horizontal .noUi-handle:after { content: none; } .noUi-target { background: #f4f4f4; border: 0; box-shadow: none; } .noUi-connect { background: var(--color-text-body); } .noUi-horizontal { height: 6px; } product-recommendations[data-intent='complementary'] { display: block; overflow: hidden; } product-recommendations[data-intent='complementary'] .product-recommendations__title { margin-top: 40px; width: 100%; max-width: 72%; margin-bottom: 20px; text-align: left; } product-recommendations[data-intent='complementary'] .float-grid { margin-left: 0; } product-recommendations[data-intent='complementary'] .grid__item, product-recommendations[data-intent='complementary'] .grid-item { margin-bottom: 1rem; padding-left: 0; padding-bottom: 8px; } @media only screen and (max-width: 768px) { product-recommendations[data-intent='complementary'] .grid__item, product-recommendations[data-intent='complementary'] .grid-item { margin-left: 0 !important; flex: 0 0 100%; } } product-recommendations[data-intent='complementary'] .grid-product__image-wrap { min-width: 90px; } product-recommendations[data-intent='complementary'] .grid__image-ratio { background-color: transparent; } product-recommendations[data-intent='complementary'] img.image-style--circle { border-radius: 50%; object-fit: cover; width: 85%; height: 85%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } product-recommendations[data-intent='complementary'] .grid__item-image-wrapper .grid-product__link { width: 100%; display: block; } product-recommendations[data-intent='complementary'] .grid__item-image-wrapper, product-recommendations[data-intent='complementary'] .grid-product__link, product-recommendations[data-intent='complementary'] .grid-item__link { display: flex; align-items: center; } product-recommendations[data-intent='complementary'] .grid__item-image-wrapper .grid-product__image-mask, product-recommendations[data-intent='complementary'] .grid-product__link .grid-product__image-mask, product-recommendations[data-intent='complementary'] .grid-item__link .grid-product__image-mask, product-recommendations[data-intent='complementary'] .grid__item-image-wrapper .grid-product__image-wrap, product-recommendations[data-intent='complementary'] .grid-product__link .grid-product__image-wrap, product-recommendations[data-intent='complementary'] .grid-item__link .grid-product__image-wrap, product-recommendations[data-intent='complementary'] .grid__item-image-wrapper .image-wrap, product-recommendations[data-intent='complementary'] .grid-product__link .image-wrap, product-recommendations[data-intent='complementary'] .grid-item__link .image-wrap { width: 112px; margin: 0; } product-recommendations[data-intent='complementary'] .grid__item-image-wrapper .grid-product__meta, product-recommendations[data-intent='complementary'] .grid-product__link .grid-product__meta, product-recommendations[data-intent='complementary'] .grid-item__link .grid-product__meta { margin-left: 48px; width: calc(100% - 112px); text-align: left; } product-recommendations[data-intent='complementary'] .grid-product__actions { top: 0; right: 0; } product-recommendations[data-intent='complementary'] .grid-product__tag { top: initial; right: initial; left: 0; bottom: 0; } product-recommendations[data-intent='complementary'] .flickity-viewport { width: 100%; } product-recommendations[data-intent='complementary'] .flickity-previous { left: auto; top: -32px; right: 50px; } @media only screen and (max-width: 768px) { product-recommendations[data-intent='complementary'] .flickity-previous { right: 45px; } } product-recommendations[data-intent='complementary'] .flickity-next { right: 0; top: -32px; } product-recommendations[data-intent='complementary'] .flickity-page-dots { top: -41px; right: 0; width: auto; bottom: auto; } product-recommendations[data-intent='complementary'] .flickity-button:disabled { display: block; opacity: 0.35; } .product-recommendations__slide { display: block; overflow: hidden; width: 100%; margin: 0; padding: 0; } @media only screen and (max-width: 768px) { .product-recommendations__slide { display: flex; flex-wrap: wrap; } } .product-recommendations__slide .grid__item:last-child { margin-bottom: 0; padding-bottom: 0; } .product-recommendations--title-missing { margin-top: 80px; } product-recommendations[data-intent='complementary'] .grid-product__actions { top: 0; right: 5px; } @media only screen and (min-width: 769px) { product-recommendations[data-intent='complementary'] .grid-product__actions .btn--icon { padding: 10px; } product-recommendations[data-intent='complementary'] .grid-product__actions .icon { width: 25px; height: 25px; } } product-recommendations[data-intent='complementary'] .grid-product__tags { margin-left: 0; } product-recommendations[data-intent='complementary'] .grid-item { padding: 8px; } [data-grid-style*='grey'] product-recommendations[data-intent='complementary'] .grid-item__content, [data-grid-style*='grey-round'] product-recommendations[data-intent='complementary'] .grid-item__content, [data-grid-style*='white'] product-recommendations[data-intent='complementary'] .grid-item__content, [data-grid-style*='white-round'] product-recommendations[data-intent='complementary'] .grid-item__content { padding: 0 8px; } @media only screen and (max-width: 768px) { [data-grid-style*='gridlines'] product-recommendations[data-intent='complementary'] .grid-product__actions { top: -6px; right: -6px; } } [data-grid-style*='gridlines'] product-recommendations[data-intent='complementary'] .product-recommendations__slide .grid-product:last-child:after { border-top: 0; } [data-grid-style*='gridlines'] product-recommendations[data-intent='complementary'] .product-recommendations__slide .grid-product:first-child:after { border-top: solid var(--grid-thickness) var(--color-border); } [data-grid-style*='gridlines'] product-recommendations[data-intent='complementary'] .grid-product { padding: 8px; margin-bottom: 0; } [data-grid-style*='gridlines'] product-recommendations[data-intent='complementary'] .grid-product:after { padding: 0 8px; box-shadow: none; border: solid var(--grid-thickness) var(--color-border); } .template-product .grid-product--prefix { margin-top: 16px; margin-bottom: 16px; } .product-grid-item { width: 100%; /*required to prevent double grid border styles*/ background-color: var(--color-body); container: product-grid-item / inline-size; } .grid-product__colors { display: flex; flex-wrap: wrap; line-height: 25px; margin: 0 0 5px -4px; } .grid-product__colors+.grid-product__colors { margin-top: 4px; } .grid-product__colors .color-swatch { width: 25px; height: 25px; border-width: 2px; } .color-swatch__more { line-height: 25px; margin-left: 5px; font-weight: var(--type-header-weight); } @media only screen and (min-width: 769px) { .product-grid[data-view='list'] .product-tile-layout--inline .grid-product__price--current { font-size: calc(var(--type-base-size) + 2px); } } @media only screen and (max-width: 959px) { .product-tile-layout--inline.grid-item { flex: 0 0 100%; } } @media only screen and (max-width: 959px) { .scrollable-grid--small .product-tile-layout--inline.grid-item { flex: 0 0 85%; } } .product-tile-layout--inline .grid-item__link { display: flex; gap: 32px; padding: 16px 16px 8px 16px; } @media only screen and (min-width: 769px) { .product-tile-layout--inline .grid-item__link { padding: 20px; } } .product-tile-layout--inline .grid-product__image-wrap { width: 100%; margin: calc(var(--product-tile-margin) / 2) calc(var(--product-tile-margin) / 2) 0; } .product-tile-layout--inline .grid-item__meta { width: 100%; display: flex; flex-direction: column; justify-content: center; flex: 0 0 35%; margin: 0; } @media only screen and (min-width: 769px) { [data-view='small'] .product-tile-layout--inline .grid-item__meta { justify-content: flex-start; margin-top: 20px; } } .product-tile-layout--inline .grid-item__meta-main { display: flex; flex-direction: column; justify-content: center; } .product-tile-layout--inline .grid-item__meta-main .grid-product__colors { margin-top: 5px; } .product-tile-layout--inline .grid-item__meta-secondary { flex: initial; } [data-view='list'] .product-tile-layout--inline .grid-item__meta-secondary { text-align: left; } /*Product grid variations*/ [data-grid-style*='gridlines'] .product-grid { margin-left: 0; margin-right: 0; } [data-grid-style*='gridlines'] .grid-product { position: relative; padding: 0; margin: 0; } [data-grid-style*='gridlines'] .grid-product:after { pointer-events: none; box-shadow: 0 0 0 var(--grid-thickness) var(--color-border); } /*Small gridline variations*/ @media only screen and (max-width: 768px) { [data-grid-style*='gridlines'] .product-grid { margin-left: calc(var(--page-width-padding) * -1); margin-right: calc(var(--page-width-padding) * -1); padding: var(--grid-thickness) calc(var(--page-width-padding) + var(--grid-thickness)); } /*Make flush on mobile*/ [data-grid-style*='gridlines'] .collection-grid { padding: 0; } /*Prevent overflow on product lists*/ [data-grid-style*='gridlines'] is-land.home-page-featured [data-section-id*='featured-collection'], [data-grid-style*='gridlines'] .index-section--sub-product { overflow-x: hidden; } } is-land.home-page-featured [data-section-id*='featured-collection'] .section-header { margin-bottom: 32px; margin-left: -40px; } is-land.home-page-featured [data-section-id*='featured-collection'] { overflow: hidden; margin-right: -40px; } is-land.home-page-featured [data-section-id*='featured-collection']>.page-width:last-child { min-width: calc(100vw - (100vw - 1580px) / 2); margin-left: calc((100vw - 1740px) / 2); max-width: none; margin-left: 0; padding-right: 0; margin-right: 0; box-sizing: content-box; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] { margin-top: -47px; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .section-header { margin-bottom: 20px; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .section-header__title { font-size: 24px; line-height: 1; font-weight: 900; text-transform: uppercase; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .new-grid { margin: 0; gap: 28px 24px; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .grid-item.grid-product.grid-product-image-breathing-room--true { min-width: calc((100% / 5) - (24px * 4 / 5)); width: calc((100% / 5) - (24px * 4 / 5)); padding: 0; } is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .grid__image-ratio { aspect-ratio: 1/1.215; } @media(max-width: 1640px) { is-land.home-page-featured [data-section-id*='featured-collection']>.page-width:last-child { min-width: calc(100vw - 40px - 43px); max-width: none; padding-left: 0; margin-left: 0; } } @media(max-width: 1440px) { is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .grid-item.grid-product.grid-product-image-breathing-room--true { min-width: calc((100% / 4) - (24px * 3 / 4)); width: calc((100% / 4) - (24px * 3 / 4)); } } @media(max-width: 1024px) { is-land:not(.home-page-featured) [data-section-id*='featured-collection'] .grid-item.grid-product.grid-product-image-breathing-room--true { min-width: calc((100% / 3) - (24px * 2 / 3)); width: calc((100% / 3) - (24px * 2 / 3)); } } @media(max-width: 768px) { is-land.home-page-featured [data-section-id*='featured-collection']>.page-width:last-child { min-width: calc(100vw - 17px - 24px); } } [data-grid-style*='grey'] .grid-product, [data-grid-style*='white'] .grid-product { position: relative; } [data-grid-style*='grey'] .grid-product:after, [data-grid-style*='white'] .grid-product:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--product-grid-padding) / 2); right: calc(var(--product-grid-padding) / 2); pointer-events: none; } [data-grid-style*='grey'] .grid-product:after { background-color: var(--color-text-body); opacity: 0.027; } [data-grid-style*='grey'] .grid-product.grid-product-image-breathing-room--false { padding-left: calc(var(--product-grid-margin) / 2); padding-right: calc(var(--product-grid-margin) / 2); } [data-grid-style*='white'] .grid-item__content { background-color: #fff; } [data-grid-style*='white'] .grid-product:after { background-color: #fff; z-index: -1; } [data-grid-style*='white'] .grid-product.grid-product-image-breathing-room--false { padding-left: calc(var(--product-grid-margin) / 2); padding-right: calc(var(--product-grid-margin) / 2); } [data-grid-style='grey-round'] .grid-product:after { border-radius: var(--product-radius); } [data-grid-style='white-round'] .product-grid-item { border-radius: var(--product-radius); } [data-grid-style='white-round'] .grid-item__content { border-radius: var(--product-radius); } [data-grid-style='white-round'] .grid-product:after { border-radius: var(--product-radius); } /*Part 1 of product card is just image*/ .grid-product__image-wrap { position: relative; margin: var(--product-tile-margin) var(--product-tile-margin) 0; } [data-view='list'] .grid-product__image-wrap { margin-bottom: var(--product-tile-margin); } .grid-item__meta-secondary { margin-top: 5px; flex: 1 0 auto; } /*Remove margin when simple grid and not in list mode*/ [dir='ltr'] [data-grid-style='simple'] .new-grid:not([data-view='list']) .grid-item__meta { margin-left: 0; } [dir='rtl'] [data-grid-style='simple'] .new-grid:not([data-view='list']) .grid-item__meta { margin-right: 0; } /* Product list view (full width) */ [data-view='list'] .grid-item__link { display: flex; flex-wrap: nowrap; align-items: center; } [data-view='list'] .grid-product__image-wrap { flex: 1 1 45%; max-width: 130px; margin: calc(var(--product-tile-margin) / 4); margin-right: 0; } [data-view='list'] .grid-item { border-bottom: 1px solid #EAEAEA; padding-bottom: 6px; } [data-view='list'] .grid-item:last-child { border-bottom: 0; } [data-view='list'] .grid-item__meta { flex: 1 1 55%; padding-right: 0px; } @media only screen and (min-width: 769px) { [data-view='list'] .grid-item__meta { display: flex; padding-right: 0; flex-direction: column; align-items: flex-start; } [data-view='list'] .grid-item__meta-secondary { margin: 0 20px 0 0; text-align: right; } [data-view='medium'] .grid-product__title { font-size: 14px; font-weight: 600; } [data-view='list'] .grid-product__title { font-size: 16px; font-family: Outfit; font-style: normal; font-weight: 600; line-height: 140%; margin-top: 6px; margin-bottom: 8px; } } [data-view='list'] .grid-product__price--current { font-size: calc(var(--type-base-size) + 6px); } [data-view='list'] .grid-item__meta-secondary { margin-right: 40px; } /* Prevent long words from breaking out of available space */ .grid-product__title { /*word-break: break-word; -webkit-hyphens: auto; hyphens: auto;*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; /* or inline-block */ max-width: 100%; font-size: 14px; } .grid-product__image { display: block; margin: 0 auto; width: 100%; height: auto; } .grid-product__vendor { margin-bottom: 5px; margin-top: 5px; opacity: 0.65; font-size: calc(var(--type-base-size) - 3px); } .grid-product__vendor:empty { margin: 0; } .grid-product__price { color: var(--color-price); display: flex; align-items: flex-end; } [data-view='list'] .grid-product__price { gap: 8px; } .grid-product__price--current { display: inline-block; font-weight: var(--type-header-weight); margin-right: 5px; font-size: calc(var(--type-base-size) + 2px); } .grid-product__price--original { display: inline-block; font-family: Outfit; font-size: 17px; font-style: normal; font-weight: 400; line-height: normal; -webkit-text-decoration: line-through; text-decoration: line-through; margin-right: 8px; } @media only screen and (max-width: 768px) { [data-view='medium'] .grid-product__price--original, [data-view='list'] .grid-product__price--original { font-size: 12px; } [data-view='list'] .grid-product__price { flex-direction: column; align-items: flex-start; gap: 0; } .grid-item__content:has(.grid-product__tag--sold-out) .grid-product__actions { display: none; } [data-view='large'] .grid-product__price--current { line-height: 20px; } [data-view='medium'] .grid-product__price--current { line-height: 15px; } } .grid-product__price--savings { display: inline-block; color: var(--color-text-savings); white-space: nowrap; font-size: 0.9em; line-height: normal; } [data-view='list'] .grid-product__price--current, [data-view='list'] .grid-product__price--original, [data-view='list'] .grid-product__price--savings { display: block; margin-right: 0; } [data-view='list'] .grid-product__price--from span:not(.money) { display: block; } .grid-product__tags { position: absolute; top: 0; left: 0; margin-left: 0; z-index: 1; } .grid-product__add-to-cart { margin: 0 16px 16px; flex: 0 0 auto; } .grid-product__tag { float: left; clear: left; line-height: 1; padding: 5px 7px; border-radius: 0 2px 2px 0; background-color: var(--color-button-primary); color: var(--color-button-primary-text); font-size: 10px; text-transform: uppercase; font-weight: var(--type-header-weight); letter-spacing: 0.05em; z-index: 1; transition: opacity 0.4s ease; } .grid-product__tag.grid-product__tag--sold-out { background-color: var(--color-body); color: var(--color-text-body); } @media only screen and (min-width: 769px) { .grid-product__tag { padding: 6px 8px; font-size: 11px; } } .grid-product__tag--sale { background-color: var(--color-sale-tag); color: var(--color-sale-tag-text); } /*Large screen sizing*/ @media only screen and (min-width: 769px) { .grid-product__price--current { font-size: calc(var(--type-base-size) + 2px); } } /*Quick add form*/ .quick-add-modal .modal__centered-content { min-width: 70vw; min-height: 350px; max-width: 100%; } @media only screen and (min-width: 769px) { .quick-add-modal .modal__centered-content { min-width: 500px; } } .quick-add-modal .page-width { padding: 0; max-width: none; } /*Hide product layout items*/ .quick-add-modal .product-grid__container>.grid__item { display: none; } /*Except the div with the form*/ .quick-add-modal .product-grid__container .product-grid__content { display: block; width: 500px; max-width: 100%; } .page-content--product .page-width { max-width: 1480px; } @Media (max-width: 768px) { .page-content--product { padding: 17px 17px 0; } .page-content--product .page-width { background-color: white; padding: 8px 15px; overflow: hidden; border-radius: 8px; } .flickity-prev-next-button, .flickity-prev-prev-button { display: none; } } /*.product-grid__container.product--images > .grid__item:first-child { width: 52%; padding-right: 18px; }*/ .product-grid__container.product--images>.grid__item:last-child { width: 48%; } .gift-cart-product-page .product-grid__container.product--images>.grid__item:first-child { width: 56.4%; } .gift-cart-product-page .product-grid__container.product--images>.grid__item:last-child { width: 43.6%; } .quick-add-modal .product-single__meta { padding: 0; } .gift-cart-product-page .product-single__meta { padding: 24px 0px 24px 16px; } .quick-add-modal .collapsibles-wrapper, .quick-add-modal .social-sharing { display: none; } .grid-product__secondary-image { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; opacity: 0; background-color: var(--color-body); transition: opacity 0s cubic-bezier(0.26, 0.54, 0.32, 1); pointer-events: none; } [data-grid-style*='gridlines'] .grid-product__secondary-image { top: 0; left: 0; right: 0; } .grid-product__secondary-image img { height: 100%; width: 100%; object-fit: cover; } .grid-product:hover .grid-product__secondary-image { transition-duration: 0.2s; opacity: 1; } .grid-product__color-image { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; background-repeat: no-repeat; background-size: cover; background-position: center; opacity: 0; background-color: var(--color-body); } .grid-product__color-image.is-active { opacity: 1; } .grid-product__price--from span:not(.money) { font-size: calc(var(--type-base-size) - 5px); } /*Large screen sizing*/ @media only screen and (min-width: 769px) { .grid-product__price--from span:not(.money) { font-size: calc(var(--type-base-size) - 3px); } } /*Quick view and quick add elements*/ .grid-product__actions { position: absolute; bottom: 0; left: 0; width: 100%; z-index: 1; } .grid-product__actions>button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { display: block; } @media only screen and (max-width: 768px) { [data-grid-style*='gridlines'] .grid-product__actions { top: 0; right: 0; } .gift-cart-product-page .product-grid__container.product--images>.grid__item:last-child, .gift-cart-product-page .product-grid__container.product--images>.grid__item:first-child { width: 100%; } } /*Visual button lives inside actual button element so we can create larger tap areas with smaller visuals*/ @media only screen and (max-width: 768px) { [data-grid-style*='gridlines'] .quick-add-btn .btn { padding: 6px; margin: 0 0 12px 12px; /* override btn--circle */ border-radius: 0 0 0 10px; } /*Make sure button stays round*/ .quick-add-btn .btn--circle { line-height: 0; } .quick-add-btn .icon { width: 12px; height: 12px; } } /*Quick actions appear on hover on larger screens*/ @media only screen and (min-width: 769px) { .grid-product__actions { opacity: 0; transform: translateY(5px); transition: opacity 0.25s ease, transform 0.25s ease-out; } .grid-product:hover .grid-product__actions { opacity: 1; transform: translateY(0); } .grid-product__actions>button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { transition: transform 0.1s ease-out; } /* .grid-product__actions>button:hover, .grid-product__actions .quick-add-btn:hover, .grid-product__actions .quick-product__btn:hover { transform: scale(1.15); } */ .grid-product:focus-within .grid-product__actions { opacity: 1; transform: translateY(0); transition: opacity 0.25s ease, transform 0.25s ease-out; } } @container product-grid-item (max-width: 235px) { .grid-product__add-to-cart:not([data-available='true'][data-variants-size='1']) { display: none; } .at-add-to-cart__button--add.btn { display: none; } .at-add-to-cart__content { display: flex; } } .grid-product__actions .quick-product__btn { display: flex; align-items: center; justify-content: center; gap: 11px; background: #FFFFFFB2; backdrop-filter: blur(16px); height: 52px; border: 0 !important; width: 100%; border-radius: 0; } .grid-product__actions .quick-product__btn svg { color: #FF3333 !important; } .grid-product__actions .quick-product__btn span { font-weight: 500; font-size: 14px; line-height: 120%; letter-spacing: 0%; text-align: center; text-transform: capitalize; color: #141414; } @media(max-width: 768px) { .grid-product__actions .quick-product__btn { height: 26px; gap: 5px; } .grid-product__actions .quick-product__btn svg { width: 10.5px; height: 10.5px; } .grid-product__actions .quick-product__btn span { font-size: 10px; } .grid-product__actions { opacity: 1 !important; } } .product__photos--beside { display: flex; width: 100%; } .product__photos { direction: ltr; /*margin-top: 10px;*/ } .product__photos a { display: block; max-width: 100%; } .product__photos img { display: block; margin: 0 auto; max-width: 100%; width: 100%; opacity: 0; } @media only screen and (max-width: 768px) { .page-content--full .product__photos { margin-top: 0; } } .product__main-photos { position: relative; flex: 1 1 auto; } .product__main-photos img { display: none; } .product__main-photos .flickity-page-dots { /*display: none;*/ } .product__main-photos .product-slideshow { /*border: 1px solid; border-color: var(--color-border);*/ } @media only screen and (max-width: 768px) { .product__main-photos .product-slideshow { border: 0; } } @media only screen and (max-width: 768px) { .product__main-photos { /* margin-bottom: 30px; margin-left: calc(var(--page-width-gutter-small) * -1); margin-right: calc(var(--page-width-gutter-small) * -1); margin-left: -17px; margin-right: -34px;*/ border: 0; /* if no slideshow exists don't create the margin for slideshow dots */ } [data-has-slideshow='false'] .product__main-photos { margin-bottom: 0; } .product__main-photos .flickity-page-dots { display: none; } } .product__thumbs { position: relative; } .product__thumbs--below { margin-top: calc(var(--grid-gutter-small) / 2); } .product__thumbs--below.small--hide { display: block !important; } @media only screen and (min-width: 769px) { .product__thumbs--below { margin-top: 46px; } } @media only screen and (max-width: 768px) { .product__thumbs--below { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 60px; } } .product__thumbs--beside { flex: 0 0 60px; max-width: 60px; margin-left: calc(var(--grid-gutter-small) / 2); } @media only screen and (min-width: 769px) { .product__thumbs--beside { flex: 0 0 80px; max-width: 80px; margin-left: calc(var(--gutter) / 2); } .product__thumbs--beside.product__thumbs-placement--left { order: -1; margin-left: 0; margin-right: calc(var(--gutter) / 2); } } .product__thumbs--scroller { scrollbar-width: none; scroll-behavior: smooth; -ms-overflow-style: -ms-autohiding-scrollbar; } .product__thumbs--scroller::-webkit-scrollbar { height: 0; width: 0; } .product__thumbs--below .product__thumbs--scroller { overflow-x: scroll; white-space: nowrap; text-align: center; /*padding-top: 24px;*/ } .product__thumbs--beside .product__thumbs--scroller { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; overflow-y: scroll; } .product__thumb-item { border: 2px solid transparent; } .product__thumb-item a:focus, .product__thumb-item a.is-active { outline: none; } /* .product__thumb-item a:focus:before, .product__thumb-item a.is-active:before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 0 2px var(--color-text-body); z-index: 1; } */ .product__thumb-item a.is-active img, .product__thumb-item a:focus img { border-color: #141414; } /*Don't pre-focus thumbnails*/ .product__thumb-item a:active:before { content: none; } .product__thumbs--beside .product__thumb-item { margin-bottom: calc(var(--grid-gutter-small) / 2); } @media only screen and (min-width: 769px) { .product__thumbs--beside .product__thumb-item { margin-bottom: calc(var(--gutter) / 2); } } .product__thumbs--beside .product__thumb-item:last-child { margin-bottom: 0; } .product__thumbs--below .product__thumb-item { display: inline-block; vertical-align: middle; margin-right: calc(var(--grid-gutter-small) / 2); max-width: 80px; } @media only screen and (min-width: 769px) { .product__thumbs--below .product__thumb-item { margin-right: calc(var(--gutter) / 2); } } @media(max-width: 768px) { .product__thumbs--below .product__thumbs--scroller { text-align: left; margin-top: 8px; } .product__thumbs--below .product__thumb-item { max-width: 43px; margin-right: 5px; } .product__thumbs--scroller { margin-left: -3px; } .product__thumb .image-wrap img { border-radius: 6px; } .product-single__title { margin-bottom: 0; font-size: 20px; font-style: normal; font-weight: 500; line-height: 120%; letter-spacing: -0.4px; } .product-block { margin-bottom: 16px; } .product-block:has(h1.product-single__title) { margin-bottom: 8px; } .product-block--sales-point { margin-bottom: 23px; } } .product__thumbs--below .product__thumb-item:last-child { margin-right: 0; } .product__thumb .image-wrap img { border: 1px solid #D4D4D4; border-radius: 8px; overflow: hidden; padding: 4px; position: static; } .image-wrap.image-wrap__thumbnail { background: transparent; } /* When image sets are enabled, hide slides that aren't in the slider */ .product-slideshow.flickity-enabled .product-main-slide { display: none; } .product-slideshow.flickity-enabled .flickity-viewport .product-main-slide { display: block; } /*Thumb images counter*/ @media only screen and (min-width: 768px) { .product__image-counter { display: none; } } .product__image-counter { color: #141414; font-family: Outfit; font-size: 12px; font-style: normal; font-weight: 400; line-height: 140%; border-radius: 14px; border: 1px solid #E6E6E6; background: var(--Tailwind-Shades-White, #FFF); box-shadow: 0px 2px 4px 0px rgba(15, 28, 51, 0.06); padding: 5px 8px; } @media only screen and (max-width: 768px) { .product__image-counter { padding: 5px 14px; } } /*Thumb slider arrows*/ .product__thumb-arrow { display: none; position: absolute; background: var(--color-body); color: var(--color-text-body); transform: none; padding: 10px; z-index: 2; border-radius: 6px 0px 0px 6px; background: rgba(255, 255, 255, 0.60); backdrop-filter: blur(2px); } .product__thumb-arrow.product__thumb-arrow--next { right: 0; top: 50%; } .product__thumb-arrow.product__thumb-arrow--prev { top: 42%; } .product__thumb-arrow .icon { display: inline-block; width: 17px; height: 20px; } @media only screen and (max-width: 768px) { .product__thumb-arrow { display: none; } } .product__thumbs[data-position='below'] .product__thumb-arrow { top: 0; height: 100%; width: 25px; } .product__thumbs[data-position='below'] .product__thumb-arrow.product__thumb-arrow--prev { left: 0; text-align: left; } .product__thumbs[data-position='below'] .product__thumb-arrow.product__thumb-arrow--next { right: 0; text-align: right; } .product__thumbs[data-position='beside'] .product__thumb-arrow { width: 100%; } .product__thumbs[data-position='beside'] .product__thumb-arrow .icon { margin: 0 auto; transform: rotate(90deg); } .product__thumbs[data-position='beside'] .product__thumb-arrow.product__thumb-arrow--prev { top: 0; left: auto; padding-bottom: 10px; } .product__thumbs[data-position='beside'] .product__thumb-arrow.product__thumb-arrow--next { top: auto; bottom: 0; right: auto; padding-top: 10px; } .product__thumb { position: relative; display: block; cursor: pointer; } .product__thumb-icon { position: absolute; top: 5px; right: 5px; background-color: var(--color-text-body); border-radius: 100px; padding: 6px; z-index: 1; opacity: 1; font-size: 0; } .product__thumb-icon .icon { fill: var(--color-body); width: 10px; height: 10px; } @media only screen and (min-width: 769px) { .product__thumb-icon .icon { width: 13px; height: 13px; } } /*Model viewer controls*/ .shopify-model-viewer-ui .shopify-model-viewer-ui__controls-area { opacity: 1; /*always show controls*/ background: var(--color-body); border-color: var(--color-text-body-alpha-005); border-radius: 50px; } .shopify-model-viewer-ui .shopify-model-viewer-ui__button { color: var(--color-text-body); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:hover { color: var(--color-text-body); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:active, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control.focus-visible:focus { color: var(--color-text-body); background-color: var(--color-text-body-alpha-005); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--control:not(:last-child):after { border-color: var(--color-text-body-alpha-005); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster { background-color: var(--color-text-body); color: var(--color-body); border-radius: 100%; border: 1px solid; border-color: var(--color-body-alpha-005); } .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:hover, .shopify-model-viewer-ui .shopify-model-viewer-ui__button--poster:focus { color: var(--color-body); } /*View in space button*/ .product-single__view-in-space { display: block; color: var(--color-text-body); background-color: var(--color-text-body-alpha-008); width: 80%; width: calc(80% - 4px); /*4px = right margin on product-image-main*/ margin: 40px 10% 10px; padding: 5px 10px 10px; } .product-single__view-in-space[data-shopify-xr-hidden] { display: none; } .product-single__view-in-space-text { font-size: calc(var(--type-base-size) * 0.85); display: inline-block; vertical-align: middle; margin-left: 5px; } /*Model viewer container*/ .shopify-model-viewer-ui, .shopify-model-viewer-ui model-viewer { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .shopify-model-viewer-ui__button[hidden] { display: none; } /*Inventory indicator*/ @keyframes inventory-pulse { 0% { opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } .icon--inventory:before, .icon--inventory:after { width: 9px; height: 9px; background: #54c63a; border-radius: 9px; position: absolute; left: 0; top: 0; content: ''; margin: 8px; } .icon--inventory:before { animation: inventory-pulse 2s linear infinite; } .inventory--low .icon--inventory:before, .inventory--low .icon--inventory:after { background: #f4af29; } product-inventory { padding-top: 20px; } .product-inventory__points { list-style: none; padding: 0; margin: 0; } .quick-add-modal .product-inventory__points { display: none; } .product-inventory__point { display: block; margin-bottom: 10px; } .product-inventory__point:last-child { margin-bottom: 0; } .product-inventory__point .icon { position: relative; width: 25px; height: 25px; margin-right: 10px; } [dir='rtl'] .product-inventory__point .icon { margin-right: 0; margin-left: 10px; } .product-block--sales-point+.product-block--inventory-point { margin-top: -20px; } .product-tags { --gap: 6px; display: flex; gap: var(--gap); } .product-grid-item .product-tags { padding: 0 16px 16px; } @media only screen and (max-width: 959px) { .product-grid-item .product-tags { padding: 0 15px 15px; } } .product-tag { display: inline-flex; align-items: center; justify-content: space-between; padding: 0.2rem 0.4rem; margin-right: 2px; margin-top: 4px; margin-bottom: 4px; white-space: nowrap; border: 1px solid; font-size: 13px; transition: ease-in-out 0.3s opacity; } .product-tag.product-tag--has-link:hover { opacity: 0.7; } .product-tag .icon { display: flex; width: 14px; height: 14px; margin-right: 0.25rem; } .product-tag a { display: inline-flex; align-items: center; justify-content: space-between; } .product-tag--style-round { border-radius: 20px; } .product-tag--none { border-color: var(--color-text-body-alpha-008); } .product-tag--scheme_1 { background-color: var(--color-scheme-1-bg); border-color: var(--color-scheme-1-bg); color: var(--color-scheme-1-text); } .product-tag--scheme_1 a { color: var(--color-scheme-1-text); } .product-tag--scheme_2 { background-color: var(--color-scheme-2-bg); border-color: var(--color-scheme-2-bg); color: var(--color-scheme-2-text); } .product-tag--scheme_2 a { color: var(--color-scheme-2-text); } .product-tag--scheme_3 { background-color: var(--color-scheme-3-bg); border-color: var(--color-scheme-3-bg); color: var(--color-scheme-3-text); } .product-tag--scheme_3 a { color: var(--color-scheme-3-text); } .js-qty__wrapper { display: inline-block; position: relative; max-width: 148px; min-width: 60px; overflow: visible; background-color: var(--color-body); color: var(--color-text-body); } .js-qty__wrapper .js-qty__adjust svg { stroke-width: 8px; width: 14px; height: 14px; } @media only screen and (max-width: 768px) { .js-qty__wrapper .js-qty__adjust svg { width: 10px; height: 10px; } } .js-qty__wrapper.is-loading { opacity: 0.5; pointer-events: none; } .js-qty__num { display: block; background: none; text-align: center; width: 100%; padding: 15px 20px; height: 54px; border-radius: 6px; margin: 0; border-color: #D4D4D4; } .js-qty__adjust { cursor: pointer; position: absolute; display: block; top: 0; bottom: 0; border: 0 none; background: none; text-align: center; overflow: hidden; padding: 0 10px; line-height: 1; -webkit-user-select: none; user-select: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: background-color 0.1s ease-out; z-index: 1; fill: var(--color-text-body); } .cart__item .js-qty__adjust { width: 28px; padding: 5px; background-color: #141414; color: white; } .cart__item .js-qty__adjust--minus { border-radius: 4px 0 0 4px; } .cart__item .js-qty__adjust--plus { border-radius: 0 4px 4px 0; } .cart__item .js-qty__num { height: 25px; max-width: 89px; padding: 13px 20px 14px; } .js-qty__adjust .icon { display: block; font-size: 8px; vertical-align: middle; width: 10px; height: 10px; fill: inherit; } .js-qty__adjust:hover { background-color: var(--color-body-dim); color: var(--color-text-body); } .js-qty__num:active~.js-qty__adjust, .js-qty__num:focus~.js-qty__adjust { border-color: var(--color-text-body); } .js-qty__adjust--plus { right: 0; } .js-qty__adjust--minus { left: 0; } advanced-accordion { display: block; border-bottom: 1px solid var(--color-border); } advanced-accordion[data-disabled='true'] .accordion__title { cursor: default; } .advanced-accordion--1-per-row .accordion__content-block { width: 100%; } .advanced-accordion--2-per-row .accordion__content-block { width: 50%; } .advanced-accordion--3-per-row .accordion__content-block { width: 33.333%; } .advanced-accordion--4-per-row .accordion__content-block { width: 25%; } .advanced-accordion--5-per-row .accordion__content-block { width: 20%; } .accordion__content { display: flex; flex-direction: row; flex-wrap: wrap; } .accordion__title { width: 100%; background: transparent; border: 0; padding: 20px 0; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion__title h2 { margin: 0; } .accordion__title svg.icon { --icon-size: 24px; stroke-width: calc(var(--icon-stroke-width) / 1.125); transition: ease-in-out 0.3s transform; } details[open] .accordion__title svg { transform: rotate(180deg); } .accordion__content-block { padding: 20px; } @media only screen and (max-width: 768px) { .accordion__content-block { flex: 100% 0 0 !important; padding: 0 15px 20px 15px; } .cart__item .js-qty__adjust { padding: 0 9px; } } @media only screen and (max-width: 768px) { .accordion__content-block.two-per-row-mobile { flex: 50% 0 0 !important; } } .accordion__content-block .content-block__image { margin-bottom: 20px; } .accordion__content-block img { height: auto; } a.accordion-link-block__link { display: flex; justify-content: space-between; } a.accordion-link-block__link svg { height: 1rem; margin-left: 10px; } .custom-content { display: flex; align-items: stretch; flex-wrap: wrap; width: auto; margin-bottom: calc(var(--grid-gutter) * -1); margin-left: calc(var(--grid-gutter) * -1); } /*Privacy Policy - Start*/ body:has(.policy-heading) .shopify-section:nth-of-type(2){ background: url("https://retrokid-testing.myshopify.com/cdn/shop/files/contact-us-bg.png?v=1749051933"); background-size: contain; background-position: center; background-repeat: repeat-y; overflow: hidden; } /*Privacy Policy - END*/ /*Return & Exchange - Start*/ .shopify-section:has(.return-exchange) { background: url("https://retrokid-testing.myshopify.com/cdn/shop/files/contact-us-bg.png?v=1749051933"); background-size: contain; background-position: center; overflow: hidden; } .return-exchange{ background: #FFF; margin: 40px auto 40px auto; border-radius: 16px; } /*Return & Exchange - END*/ /*Partnerships - Start*/ .shopify-section:has(.partnerships) { background: url("https://retrokid-testing.myshopify.com/cdn/shop/files/contact-us-bg.png?v=1749051933"); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } .partnerships{ background: #FFF; margin: 40px auto 40px auto; border-radius: 16px; } /*Partnerships - END*/ /*About Us - Desktop - Start*/ .index-section:has(.about-us-section) { background: url("https://retrokid-testing.myshopify.com/cdn/shop/files/contact-us-bg.png?v=1749051933"); background-size: cover; background-position: center; background-repeat: no-repeat; } .custom-content.about-us-section { width: 1030px; padding: 40px 80px 40px 80px; border-radius: 16px; background: #FFF; margin: auto; position: relative; top: -50px; } .custom-content.about-us-section>.custom__item.one-whole.align--center { padding: 0; } .custom-content.about-us-section h2 { color: #141414; text-align: center; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 900; line-height: 100%; /* 20px */ text-transform: uppercase; margin-bottom: 22px; } .custom-content.about-us-section p { color: #141414; text-align: center; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 400; line-height: 150%; /* 27px */ margin-bottom: 10px; } .custom-content.about-us-section span { color: #141414; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 500; line-height: 150%; } .about-us-section .image-wrap { border-radius: 8px; } .custom-content.about-us-section .rte.clearfix { text-align: center; } /*About Us - Desktop - END*/ /*About Us - Mobile - START*/ @media only screen and (max-width: 768px) { .custom-content { margin-bottom: calc(var(--grid-gutter-small) * -1); margin-left: calc(var(--grid-gutter-small) * -1); } .custom-content.about-us-section { width: auto; top: -7vh; padding: 24px 24px 30px 24px } .custom-content.about-us-section h2 { font-size: 18px; } .custom-content.about-us-section p { font-size: 14px; font-weight: 300; margin-bottom: 4px; } .custom-content.about-us-section span { font-size: 14px; } .custom__item { margin-bottom: 14px } .about-us-section .image-wrap { min-height: 152px; border-radius: 6px; } .about-us-section .image-wrap img { height: 152px; } } /*About Us - Mobile - END*/ @media (min-width: 500px) and (max-width: 768px) { .about-us-section .image-wrap { min-height: auto; } .about-us-section .image-wrap img { height: auto; } } @media (min-width: 769px) and (max-width: 1100px) { .custom-content.about-us-section { width: auto; } } @media (min-width: 769px) and (max-width: 900px) { .custom-content.about-us-section { top: -35px; } } .custom__item { flex: 0 0 auto; margin-bottom: var(--grid-gutter); padding-left: var(--grid-gutter); max-width: 100%; } @media only screen and (max-width: 768px) { .custom__item { flex: 0 0 auto; padding-left: var(--grid-gutter-small); margin-bottom: var(--grid-gutter-small); } .custom__item.small--one-half { flex: 1 0 50%; max-width: 400px; margin-left: auto; margin-right: auto; } } .custom__item img { display: block; } .custom__item-inner { position: relative; display: inline-block; text-align: left; max-width: 100%; width: 100%; } .custom__item-inner--video, .custom__item-inner--html { display: block; } .custom__item-inner--image { width: 100%; } .custom__item-inner--html img { display: block; margin: 0 auto; } .custom__item-inner--placeholder-image { width: 100%; } .align--top-middle { text-align: center; } .align--top-right { text-align: right; } .align--middle-left { align-self: center; } .align--center { align-self: center; text-align: center; } .align--middle-right { align-self: center; text-align: right; } .align--bottom-left { align-self: flex-end; } .align--bottom-middle { align-self: flex-end; text-align: center; } .align--bottom-right { align-self: flex-end; text-align: right; } /* Age verification popup */ .age-verification-popup .rte { margin-top: 20px; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .age-verification-popup .rte { margin-bottom: 30px; } } .age-verification-popup .age-verification-popup__btns-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .age-verification-popup__background-image-wrapper { overflow: hidden; width: 100%; height: 100%; position: absolute; } .age-verification-popup__background-image { object-fit: cover; width: 100%; height: 100%; } .age-verification-popup__content--active { opacity: 1; transition: opacity 1.5s ease-in; } .age-verification-popup__content--inactive, .age-verification-popup__content--inactive *, .age-verification-popup__content--inactive .btn { opacity: 0; width: 0; height: 0; position: absolute; visibility: hidden; padding: 0; border: 0; margin: 0; line-height: 0; font-size: 0; } .age-verification-popup__decline-content--inactive, .age-verification-popup__decline-content--inactive *, .age-verification-popup__decline-content--inactive .btn { opacity: 0; width: 0; height: 0; position: absolute; visibility: hidden; padding: 0; border: 0; margin: 0; line-height: 0; font-size: 0; } .age-verification-popup__decline-content--active { opacity: 1; transition: opacity 1.5s ease-in; } .age-verification-popup__content-wrapper { text-align: center; max-width: 520px; margin: 0 auto; } /* Expanse specific styles */ .age-verification-popup { top: 0; bottom: 0; } .age-verification-popup.age-verification-popup--image-false { position: fixed !important; z-index: 30 !important; } .age-verification-popup.age-verification-popup--image-false.modal:before { background-color: transparent; animation: none; } .age-verification-popup.age-verification-popup--image-false .modal__inner { box-shadow: none; background-color: transparent; } .age-verification-popup.age-verification-popup--image-false.color-scheme-none { background-color: var(--color-body); } /* We may want to move this to the global color scheme stylesheet */ .age-verification-popup.color-scheme-none .btn.color-scheme-reversed { color: var(--color-button-primary); background-color: var(--color-button-primary-text); border-color: var(--color-button-primary); } /* * This is the stylesheet entrypoint for the apps section. * This file and all its inclusions will be processed through postcss */ /* Standalone tag style */ .article-tag__wrapper { margin-bottom: 20px; } .article-tag__wrapper .label { margin-right: 10px; } .article__comment { margin-bottom: 20px; } .article__comment:last-child { margin-bottom: 0; } .comment-author { margin-bottom: 0; } .comment-date { font-size: calc(var(--type-base-size) * 0.85); display: block; margin-top: 3px; } @media only screen and (max-width: 768px) { .comment-date { margin-bottom: calc(var(--gutter) / 2); } } .background-media-text { position: relative; width: 100%; overflow: hidden; background: var(--color-large-image-bg); } .background-media-text__inner { position: absolute; z-index: 2; width: 100%; height: 100%; } .background-media-text__aligner { margin: calc(var(--gutter) * 2); } .background-media-text__text { text-align: left; font-size: 1.1em; background: var(--color-body); padding: var(--gutter); width: 380px; border-radius: var(--roundness); overflow: hidden; } html[dir='rtl'] .background-media-text__text { text-align: right; } @media only screen and (max-width: 768px) { .background-media-text__text { text-align: center; } } .background-media-text__text .btn { margin-top: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .background-media-text--right>div { float: right; } } /*Section height*/ .background-media-text__container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media only screen and (max-width: 768px) { .background-media-text__container { position: relative; height: 240px; } .background-media-text__inner { position: relative; bottom: 0; } .background-media-text__aligner { margin: -10px 10px 10px; } .background-media-text__text { padding: calc(var(--gutter) * 0.75); width: auto; } .background-media-text.loading:before, .background-media-text.loading:after { top: 117px; } } @media only screen and (min-width: 769px) { .background-media-text--450 { min-height: 450px; } .background-media-text--550 { min-height: 550px; } .background-media-text--650 { min-height: 650px; } .background-media-text--750 { min-height: 750px; } .background-media-text__image { height: 100%; object-fit: cover; } .background-media-text__image, .background-media-text__image svg { opacity: 0; } } .background-media-text__image { opacity: 0; animation: none; transition: none; } .loaded .background-media-text__image, .loaded .background-media-text__image svg { animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; } @media only screen and (min-width: 769px) { .loaded .background-media-text__inner .animation-contents { transform: translateY(0); opacity: 1; transition: all 0.8s cubic-bezier(0.26, 0.54, 0.32, 1) 0.5s; } } .blog-layout { display: flex; flex-wrap: nowrap; flex-direction: column; } .blog-layout__main { margin-bottom: 20px; } .blog-layout__sidebar { order: 1; } /* Any section that isn't the main layout or sidebar should be full width */ .blog-layout>div:not(.blog-layout__main):not(.blog-layout__sidebar) { flex: 1 0 100%; } @media only screen and (min-width: 769px) { .blog-layout { flex-direction: row; flex-wrap: wrap; } .blog-layout__main { flex: 1 1 calc(60% - 90px); } .blog-layout__sidebar { order: 0; flex: 0 0 calc(40% - 90px); align-self: flex-start; padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--color-border); } [dir='rtl'] .blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--color-border); } .blog-layout__main+.blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--color-border); } [dir='rtl'] .blog-layout__main+.blog-layout__sidebar { padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--color-border); } } .article-tag { display: inline-block; background-color: var(--color-body); color: var(--color-text-body); border: 1px solid; border-color: var(--color-text-body); padding: 3px 9px; margin: 5px; font-size: 12px; font-weight: var(--type-header-weight); letter-spacing: 0.15em; text-transform: uppercase; } .tag--inline .article-tag { margin: 0; } .article-tag:hover, .article-tag:active { background-color: var(--color-body); color: var(--color-text-body); } @media only screen and (max-width: 768px) { .article-tag { padding: 4px 6px; font-size: 10px; margin: 3px; } } /*Remove tags (top of sidebar)*/ .tag--remove, .tag--inline { display: inline-block; position: relative; margin: 0 10px 13px 0; } .tag--remove a, .tag--inline a { display: block; text-align: left; padding: 7px 15px 7px 36px; min-width: 0; } /*X icon sits over button, not in it*/ .tag--remove .icon, .tag--inline .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; /* color: var(--color-button-primary-text); */ color: #141414; } .tag--remove:hover .icon { color: var(--color-button-primary-text); } .tag--inline a { padding: 7px 15px 7px 15px; } .blog-layout { display: flex; flex-wrap: nowrap; flex-direction: column; } .blog-layout__main { margin-bottom: 20px; } /* Any section that isn't the main layout or sidebar should be full width */ .blog-layout>div:not(.blog-layout__main):not(.blog-layout__sidebar) { flex: 1 0 100%; } .video-section { display: flex; gap: 24px; } .video-section video-media { aspect-ratio: 1 / 1.73; --default-aspect-ratio: 1 / 1.73; } .video-review-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1640px; padding: 0 var(--page-width-padding); margin: 38px auto 69px; } .video-review-wrap h2 { font-size: 40px; letter-spacing: 0; } .video-review-wrap .video-review { border-radius: 16px; overflow: hidden; position: relative; flex: 1; } .video-review-wrap .video-review .play-button { display: flex; justify-content: center; align-items: center; width: 46.67px; height: 46.67px; position: absolute; inset: 0; margin: auto; border-radius: 100%; border: 4px solid #FFFFFF66; } .video-review-wrap .video-review .play-button svg { fill: #FFFFFF66; width: 20px; height: 20px; } @media(max-width: 1440px) { .video-section { flex-wrap: wrap; justify-content: center; } .video-review-wrap .video-review { flex: 1 1 calc((100% - 72px) / 4); } } @media(max-width: 1024px) { .video-review-wrap .video-review { flex: 1 1 calc((100% - 48px) / 3); max-width: calc((100% - 24px) / 1.5); } } @media(max-width: 768px) { .video-review-wrap .video-review { flex: 1 1 calc((100% - 24px) / 2); max-width: none; } .video-review-wrap .video-review video-media>video:not(:fullscreen) { object-position: initial !important; } } @media only screen and (min-width: 769px) { .blog-layout { flex-direction: row; flex-wrap: wrap; } .blog-layout__main { flex: 1 1 calc(60% - 90px); } .blog-layout__main+.blog-layout__sidebar { padding-right: 0; margin-right: 0; border-right: 0; padding-left: 45px; margin-left: 45px; border-left: 1px solid; border-left-color: var(--color-border); } [dir='rtl'] .blog-layout__main+.blog-layout__sidebar { padding-left: 0; margin-left: 0; border-left: 0; padding-right: 45px; margin-right: 45px; border-right: 1px solid; border-right-color: var(--color-border); } } .collection-hero { position: relative; width: 100%; height: 122px; overflow: hidden; background-color: var(--color-large-image-bg); } @media only screen and (min-width: 769px) { .collection-hero { height: 300px; } } /*@media only screen and (max-width: 768px) { .collection-hero { height: 100px; } }*/ .collection-hero__content { --z-index-overlay: -1; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; display: flex; align-items: flex-end; padding: calc(var(--gutter) / 2) 0; color: #fff; z-index: 1; } .collection-hero__content.overlay { display: none; } @media only screen and (min-width: 769px) { .collection-hero__content { padding: var(--gutter) 0; } } .collection-hero__content a { color: #fff; } /*Account for overlayed header/toolbar*/ .overlaid-header .collection-hero__content { padding-top: 70px; } @media only screen and (min-width: 769px) { .overlaid-header .collection-hero__content { padding-top: 100px; } } .collection-hero__content .page-width { width: 100%; } .collection-hero__content:after { background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), transparent 50%); pointer-events: none; } /*Apply animations*/ .collection-hero__image { transform: scale(1); transition: transform 1s cubic-bezier(0.18, 0.63, 0.25, 1), opacity 0.7s ease; animation: none; object-fit: cover; } @media only screen and (max-width: 768px) { .has-mobile-banner .collection-hero__image { object-position: 15% center; } } /*Return to collection link*/ .return-section { margin-top: var(--index-section-padding); padding: var(--index-section-padding) 0; } .return-link { text-align: center; padding: 15px 25px; } .return-link .icon { width: 20px; margin-right: 8px; } .note, .errors { border-radius: var(--input-radius); padding: 6px 12px; margin-bottom: calc(var(--gutter) / 2); border: 1px solid transparent; text-align: left; } .note ul, .errors ul, .note ol, .errors ol { margin-top: 0; margin-bottom: 0; } .note li:last-child, .errors li:last-child { margin-bottom: 0; } .note p, .errors p { margin-bottom: 0; } .note { border-color: var(--color-border); } .errors ul { list-style: disc outside; margin-left: 20px; } .note--success { color: var(--success-green); background-color: var(--success-green-bg); border-color: var(--success-green); } .note--success a { color: var(--success-green); -webkit-text-decoration: underline; text-decoration: underline; } .note--success a:hover { -webkit-text-decoration: none; text-decoration: none; } .form-error, .errors { color: var(--error-red); background-color: var(--error-red-bg); border-color: var(--error-red); } .form-error a, .errors a { color: var(--error-red); -webkit-text-decoration: underline; text-decoration: underline; } .form-error a:hover, .errors a:hover { -webkit-text-decoration: none; text-decoration: none; } .contact-form--content-position-left, .contact-form--content-position-right { --index-section-padding: 0; } .contact-form--content-position-left .grid__item, .contact-form--content-position-right .grid__item { width: 100%; } .contact-form--content-position-left .page-width, .contact-form--content-position-right .page-width { max-width: none; padding: 0; display: grid; } @media only screen and (min-width: 769px) { .contact-form--content-position-left .page-width, .contact-form--content-position-right .page-width { grid-template-columns: 1fr 1fr; } } .contact-form--content-position-left [data-image-type], .contact-form--content-position-right [data-image-type] { position: relative; grid-area: image; } .contact-form--content-position-left [data-image-type]:after, .contact-form--content-position-right [data-image-type]:after { content: ''; position: absolute; top: 0; height: 100%; width: 100%; } .contact-form--content-position-left .section-header, .contact-form--content-position-right .section-header { padding: 40px 32px 16px; margin: 0; grid-area: heading; } @media only screen and (min-width: 769px) { .contact-form--content-position-left .section-header, .contact-form--content-position-right .section-header { padding: 80px 80px 24px; } } .contact-form--content-position-left .form-vertical, .contact-form--content-position-right .form-vertical { padding: 0 32px 24px; margin: 0; grid-area: form; } @media only screen and (min-width: 769px) { .contact-form--content-position-left .form-vertical, .contact-form--content-position-right .form-vertical { padding: 0 80px 80px; } } .contact-form--content-position-left[class*='color-scheme-']:not(.color-scheme-none) input, .contact-form--content-position-right[class*='color-scheme-']:not(.color-scheme-none) input, .contact-form--content-position-left[class*='color-scheme-']:not(.color-scheme-none) textarea, .contact-form--content-position-right[class*='color-scheme-']:not(.color-scheme-none) textarea { background: transparent; } .contact-form--content-position-left .form-vertical .btn[type='submit'], .contact-form--content-position-right .form-vertical .btn[type='submit'] { width: 100%; } .contact-form--content-position-left.contact-form--overlay.color-scheme-none [data-image-type]:after, .contact-form--content-position-right.contact-form--overlay.color-scheme-none [data-image-type]:after { background: linear-gradient(0deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-1-bg) 90%); } .contact-form--content-position-left.contact-form--overlay.color-scheme-1 [data-image-type]:after, .contact-form--content-position-right.contact-form--overlay.color-scheme-1 [data-image-type]:after { background: linear-gradient(0deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-1-bg) 90%); } .contact-form--content-position-left.contact-form--overlay.color-scheme-2 [data-image-type]:after, .contact-form--content-position-right.contact-form--overlay.color-scheme-2 [data-image-type]:after { background: linear-gradient(0deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-2-bg) 90%); } .contact-form--content-position-left.contact-form--overlay.color-scheme-3 [data-image-type]:after, .contact-form--content-position-right.contact-form--overlay.color-scheme-3 [data-image-type]:after { background: linear-gradient(0deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-3-bg) 90%); } .contact-form--content-position-left .page-width { grid-template-areas: 'image' 'heading' 'form'; } @media only screen and (min-width: 769px) { .contact-form--content-position-left .page-width { grid-template-areas: 'heading image' 'form image'; } } @media only screen and (min-width: 769px) { .contact-form--content-position-left.contact-form--overlay [data-image-type]:after { left: 0; } } @media only screen and (min-width: 769px) { .contact-form--content-position-left.contact-form--overlay.color-scheme-none [data-image-type]:after { background: linear-gradient(270deg, rgba(53, 14, 14, 0) 25%, var(--color-body) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-left.contact-form--overlay.color-scheme-1 [data-image-type]:after { background: linear-gradient(270deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-1-bg) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-left.contact-form--overlay.color-scheme-2 [data-image-type]:after { background: linear-gradient(270deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-2-bg) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-left.contact-form--overlay.color-scheme-3 [data-image-type]:after { background: linear-gradient(270deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-2-bg) 90%); } } .contact-form--content-position-right .page-width { grid-template-areas: 'heading' 'form' 'image'; background: inherit; } @media only screen and (min-width: 769px) { .contact-form--content-position-right .page-width { grid-template-areas: 'image heading' 'image form'; } } @media only screen and (min-width: 769px) { .contact-form--content-position-right.contact-form--overlay [data-image-type]:after { right: 0; } } @media only screen and (min-width: 769px) { .contact-form--content-position-right.contact-form--overlay.color-scheme-none [data-image-type]:after { background: linear-gradient(90deg, rgba(53, 14, 14, 0) 25%, var(--color-body) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-right.contact-form--overlay.color-scheme-1 [data-image-type]:after { background: linear-gradient(90deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-1-bg) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-right.contact-form--overlay.color-scheme-2 [data-image-type]:after { background: linear-gradient(90deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-2-bg) 90%); } } @media only screen and (min-width: 769px) { .contact-form--content-position-right.contact-form--overlay.color-scheme-3 [data-image-type]:after { background: linear-gradient(90deg, rgba(53, 14, 14, 0) 25%, var(--color-scheme-3-bg) 90%); } } .contact-form__image { opacity: 1; } @media only screen and (min-width: 769px) { .contact-form__image { height: 100%; width: 100%; object-fit: cover; } } /* Countdown */ .countdown-wrapper { position: relative; } .countdown__background-image-wrapper { width: 100%; height: 100%; position: absolute; } .countdown__background-image { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } .countdown__mobile-image-wrapper { width: 100%; height: 100%; position: absolute; } .countdown__mobile-image { width: 100%; height: 100%; object-fit: cover; } .countdown-layout--banner .countdown__content { padding: 2rem; } @media only screen and (min-width: 769px) { .countdown-layout--banner .countdown__content { display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; gap: 1rem; padding: 1.6rem 2rem; } } .countdown-layout--banner.countdown-blocks--2.page-width .countdown__content { justify-content: space-around; } .countdown-layout--banner.countdown-blocks--2 .countdown__content { justify-content: center; } @media only screen and (min-width: 769px) { .countdown-layout--banner .countdown__block { width: 33%; } } .countdown__content { width: 100%; height: auto; max-height: 650px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 2rem; text-align: center; } .page-width .countdown__content { position: relative; } @media only screen and (min-width: 769px) { .countdown-layout--hero .countdown__content { height: 100vh; } } .countdown__block { width: 100%; margin: 1rem auto; z-index: 3; } .countdown__block--content { display: flex; flex-direction: column; justify-content: center; align-items: center; } .countdown__block--content .countdown__block--button { width: 100%; margin: 0; /* Nested button will get spacing from text above it */ } @media only screen and (min-width: 769px) { .countdown-blocks--2.countdown-layout--banner .countdown__block--timer, .countdown-blocks--2.countdown-layout--banner .countdown__block--content { width: 50%; } } @media only screen and (min-width: 769px) { .countdown-blocks--2.countdown-layout--banner .countdown__block--button.button-block-active { width: 50%; } } .countdown__text-wrapper { display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 769px) { .countdown-layout--hero .countdown__text-wrapper { width: 50%; } } .countdown__text-wrapper--content-alignment-left { text-align: left; } .countdown__text-wrapper--content-alignment-right { text-align: right; } .countdown__display { display: flex; justify-content: center; } .countdown__display--loaded { opacity: 1; visibility: visible; transition: opacity ease-in 0.3s; } .countdown__display--visible+.countdown__timer-message--visible { margin-top: 1.5rem; } .countdown__display--hidden { visibility: hidden; opacity: 0; width: 0; height: 0; margin: 0; transition: opacity ease-out 3s; } .countdown__display-block { display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; border-right: 1px solid; padding: 0 1rem; } .countdown__display-block h2 { margin-bottom: 16px; } @media only screen and (min-width: 769px) { .countdown__display-block h2 { margin-bottom: 4px; } } .countdown__display-block span { font-size: 0.6rem; letter-spacing: 1.7px; } @media only screen and (min-width: 769px) { .countdown__display-block span { font-size: 0.75rem; } } .countdown__display-block:last-child { border-right: none; } [dir='rtl'] .countdown__display-block:last-child { border-right: 1px solid; } [dir='rtl'] .countdown__display-block:first-child { border-right: none; } .countdown__timer-message { opacity: 0; visibility: hidden; margin: 0; height: 0; } .countdown__timer-message--visible { opacity: 1; visibility: visible; transition: opacity ease-in 1s; height: auto; } .countdown__block--hidden { opacity: 0; visibility: hidden; margin: 0; transition: opacity ease-out 1s; width: 0 !important; } .countdown__overlay::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: var(--countdown-overlay-rgba); } /* Expanse specific styles */ .countdown__image--blur-true img { filter: blur(4px); transform: scale(1.03); } .countdown__image--blur-true .countdown__background-image-wrapper { overflow: hidden; } .countdown__image--blur-true .countdown__mobile-image-wrapper { overflow: hidden; } .countdown-wrapper.page-width .countdown__content, .countdown-wrapper.page-width .countdown__background-image-wrapper, .countdown-wrapper.page-width .countdown__background-image, .countdown-wrapper.page-width .countdown__mobile-image-wrapper, .countdown-wrapper.page-width .countdown__mobile-image, .countdown-wrapper.page-width .countdown__overlay::after { border-radius: var(--roundness); } .countdown__block--content .countdown__block--button { margin-top: 1.5rem; } .color-scheme-1 .countdown__button.btn--secondary { background-color: transparent; color: var(--color-scheme-1-text); border-color: var(--color-scheme-1-text); } .color-scheme-2 .countdown__button.btn--secondary { background-color: transparent; color: var(--color-scheme-2-text); border-color: var(--color-scheme-2-text); } .color-scheme-3 .countdown__button.btn--secondary { background-color: transparent; color: var(--color-scheme-3-text); border-color: var(--color-scheme-3-text); } .collapsible-trigger { color: inherit; position: relative; } .product-block .collapsible-trigger { color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; } /*button element cannot be display:flex, so add child span to style*/ .collapsible-trigger__layout { display: flex; align-items: center; justify-content: space-between; } .collapsible-trigger__layout--inline { position: relative; justify-content: flex-start; } .collapsible-trigger__layout--inline>span { padding-right: 15px; } .collapsible-trigger__layout--inline .collapsible-trigger__icon { position: static; transform: none; } .collapsible-trigger__icon { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: var(--collapsible-icon-width); height: var(--collapsible-icon-width); } [dir='rtl'] .collapsible-trigger__icon { left: 0; right: auto; } .collapsible-trigger__icon .icon { display: block; width: var(--collapsible-icon-width); height: var(--collapsible-icon-width); transition: all 0.1s ease-in; } .collapsible-trigger.is-open .collapsible-trigger__icon>.icon-chevron-down { transform: rotate(180deg); } .collapsible-trigger--inline { font-weight: var(--type-header-weight); padding: 11px 0 11px 20px; } .collapsible-trigger--inline .collapsible-trigger__icon { right: auto; left: 0; } .collapsible-content { transition: opacity 0.2s ease, height 0.15s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(-10px); } .collapsible-content.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, height 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .collapsible-content--all { visibility: hidden; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } @media only screen and (min-width: 769px) { .collapsible-content--all.is-open { overflow: initial; visibility: visible; opacity: 1; height: auto; } } .collapsible-content--all.is-open { border-bottom: 1px solid; border-color: var(--color-border); } .filter-wrapper .collapsible-content--all.is-open { border: 0; } @media only screen and (max-width: 768px) { .collapsible-content--small { visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; height: 0; } .collapsible-content--small .collapsible-content__inner { transform: translateY(40px); } } @media only screen and (min-width: 769px) { .collapsible-content__inner { padding: 0 0 16px; } } .product-block .collapsible-content a { /* background: #F33; */ color: #F33; /* padding: 15px; */ font-family: Outfit; text-decoration: none !important; border-radius: 8px; font-size: 14px; font-weight: 800; } .collapsible-trigger[aria-expanded='true'] .collapsible-label__closed { display: none; } .collapsible-label__open { display: none; } .collapsible-trigger[aria-expanded='true'] .collapsible-label__open { display: inline-block; } .index-section--faq { margin-bottom: 20px; } .featured-collection__carousel { display: flex; } .progress-scroll-bar { width: 100%; max-width: 83.4%; height: 1px; background-color: #D9D9D9; border-radius: 20px; position: relative; overflow: hidden; margin-top: 15px; margin-left: 8px; } .progress-thumb { width: 120px; /* fixed thumb width */ height: 100%; background-color: #141414; border-radius: 20px; position: relative; transition: left 0.3s ease; } .featured-slider-controls { display: flex; width: 100%; gap: 24px; } .featured-slider-buttons { display: flex; gap: 11px; } .featured-slider-buttons button { position: relative; width: 32px; height: 32px; border-radius: 100%; border: 1px solid #D9D9D9; } .featured-slider-buttons button:hover { background-color: #D9D9D9; } .featured-slider-buttons button .flickity-button-icon { fill: #141414; } @media(max-width: 768px) { is-land.home-page-featured [data-section-id*='featured-collection'] { margin-right: -24px; } .featured-slider-controls { padding-right: 22px; } is-land.home-page-featured [data-section-id*='featured-collection']>.page-width:last-child .product-grid { padding-right: 0; } .featured-slider-buttons button { width: 24px; height: 24px; } } [data-section-type="collection-template"] .scrollable-grid__controls { display: flex; } [data-section-type="collection-template"] .progress-container { height: 3px; background: #eee; position: relative; margin-top: -10px; margin-bottom: 2rem; } [data-section-type="collection-template"] .progress-bar { height: 3px; background: #888; width: 0%; transition: width 0.3s ease; } [data-section-type="collection-template"] .carousel-nav { top: -12px; right: 0; display: flex; gap: 0.5rem; } [data-section-type="collection-template"] .carousel-nav button { width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 50%; background: white; cursor: pointer; } @media only screen and (max-width: 959px) { .featured-collection__carousel { flex-direction: column; } } .featured-collection__carousel .grid-product__actions { top: var(--product-grid-margin); right: 0; } .featured-collection__carousel .featured-collection__block-wrapper { display: flex; flex-direction: column; flex: 0 0 25%; padding-right: 20px; } @media only screen and (max-width: 959px) { .featured-collection__carousel .featured-collection__block-wrapper { padding-right: var(--page-width-padding); } } .featured-collection__block-wrapper-content-position--top { justify-content: flex-start; } .featured-collection__block-wrapper-content-position--center { justify-content: center; } .featured-collection__block-wrapper-content-position--bottom { justify-content: flex-end; } .featured-collection__block { padding-bottom: 20px; } .featured-collection__block:last-child { padding-bottom: 0; } @media only screen and (max-width: 959px) { .featured-collection__block:last-child { padding-bottom: 20px; } } .featured-collection__carousel-grid-items { display: flex; flex-wrap: nowrap; overflow-x: auto; width: 100%; } .featured-collection__carousel .grid-item { flex: 1 0 40%; margin-bottom: 0; } @media only screen and (max-width: 959px) { .featured-collection__carousel .grid-item { flex: 1 0 60%; } } @media only screen and (max-width: 959px) { .svg-mask--disabled-mobile .image-element { -webkit-mask-image: none !important; mask-image: none !important; } } @media only screen and (max-width: 959px) { .medium-down--banner-image .image-wrap { padding-bottom: 35% !important; } .medium-down--banner-image .image-element { height: 100%; } } .page-width--no-right-padding.page-width { padding-right: 0; } /* Footer */ .footer-top { border-bottom: 1px solid #2C2C2C; display: flex; justify-content: space-between; } .footer-top-left { flex: 4; } .footer-top-right { flex: 2; margin-top: 14px; } .footer__logo_footer_image-image { margin-bottom: 20px; margin-top: 10px; } .footer__custom-socials { display: flex; padding-bottom: 40px; gap: 16px; } .footer__custom-socials a { width: 36px; height: 36px; } .footer-bottom { display: flex; margin-top: 40px; padding-bottom: 23px; justify-content: space-between; border-bottom: 1px solid #2C2C2C; } h2.footer__title.h4 { color: #FFF; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } p.footer__title { color: #FFF; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .footer__menu li { color: #FFF; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px; /* 175% */ } ul.no-bullets.site-footer__linklist>li { color: #FFF; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 400; line-height: 28px; /* 175% */ margin-bottom: 8px; } .footer__block { min-width: 247px; } .footer__payment-heading { color: #FFF; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ margin-bottom: 16px; } .footer__payment-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; max-width: 370px; } .page-width.text-center.small--text-left>.footer__base-links { color: #FFF; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .page-width.text-center.small--text-left>.footer__base-links a { text-decoration: none; } .footer__section.footer__section--menus { padding-bottom: 4px; } div.footer__section:nth-child(2) { padding-top: 24px !important; } @media only screen and (max-width: 768px) { .footer__section { padding-top: 22px !important; } .footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #2C2C2C; padding-bottom: 20px; } .footer-top-left { display: flex; justify-content: space-between; } .footer__custom-socials { padding-bottom: 12px; align-items: center; gap: 8px; } .footer__custom-socials a { width: 25px; height: 25px; } .footer__logo_footer_image-image { width: 135px; height: 25px; } .footer-bottom { flex-direction: column; margin-top: 18px; padding-bottom: 14px; } .footer__blocks { flex-wrap: nowrap !important; justify-content: normal !important; gap: 25px !important; min-width: 50%; border-bottom: 1px solid #2C2C2C; margin-bottom: 16px; } .footer__block { min-width: 0; } h2.footer__title.h4 { color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 800; line-height: 30px; /* 208.333% */ } p.footer__title { color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 800; line-height: 30px; /* 208.333% */ margin-bottom: 8px; } .footer__menu li { color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 30px; /* 208.333% */ } ul.no-bullets.site-footer__linklist>li { color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 30px; /* 208.333% */ margin-bottom: 4px; } .footer__menu li a { padding: 2px 0; } .footer__payment-heading { color: #FFF; text-align: center; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 800; line-height: 30px; /* 208.333% */ margin-top: -7px; margin-bottom: 9px; } .footer__payment-grid { grid-template-columns: repeat(5, 0fr); justify-content: center; gap: 8px; margin: auto; } .footer__payment-item { width: 36px; height: 25px; } .page-width.text-center.small--text-left>.footer__base-links { font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; text-align: center; } .footer__section.footer__section--menus { padding-bottom: 0; } div.footer__section:nth-child(2) { padding-top: 0 !important; } .footer__base-links a, .footer__base-links span { padding: 2px 5px 2px 0; } } @media (min-width:547px) and (max-width:768px) { .footer-top-left { flex-direction: column; flex: 2; } .footer-top-right { margin: 0; flex: 3; } } @media (min-width:769px) and (max-width:967px) { .footer-bottom { flex-direction: column; } .footer__payment-logos { margin: auto; padding-top: 30px; } .footer__blocks { justify-content: space-between !important; } } .site-footer { display: block; font-size: calc(var(--type-base-size) - 1px); background-color: var(--color-footer); color: var(--color-footer-text); } .site-footer a { color: var(--color-footer-text); } .site-footer .faux-select { font-size: calc(var(--type-base-size) - 1px); min-width: -webkit-max-content; min-width: max-content; } .footer__section { padding: 30px 0; /*border-top: 1px solid; border-top-color: var(--color-border);*/ } .site-footer .footer__section { border-top-color: var(--color-footer-border); } .site-footer:not(:has([data-type="menu"])) .footer__section { padding-top: 0; border-top-width: 0; } @media only screen and (min-width: 769px) { .footer__section--menus { padding-top: 50px; } } /* Mimic a standalone section on mobile */ @media only screen and (max-width: 768px) { .footer__mobile-section { margin-left: calc(var(--page-width-padding) * -1); margin-right: calc(var(--page-width-padding) * -1); padding: 20px var(--page-width-padding) 0; border-top: 1px solid; border-top-color: var(--color-footer-border); } } .footer__title { margin-bottom: 15px; } .footer__subscribe { font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 2px); } .footer__subscribe p { color: #FFF; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; /* 20px */ } .footer__menu { margin: 0 0 20px; padding: 0; list-style: none; } @media only screen and (max-width: 768px) { .footer__menu { margin-bottom: 0; } .footer__subscribe p { color: #FFF; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 900; line-height: 30px; } } .footer__menu li { margin: 0; } .footer__menu a { display: inline-block; padding: 4px 0; } .footer__menu .icon { margin-right: 10px; } [dir='rtl'] .footer__menu .icon { margin-right: 0; margin-left: 10px; } .footer__menu--underline a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .footer__newsletter { display: flex; justify-content: center; align-items: flex-start; padding: 0; flex-direction: column; gap: 30px; } .footer__newsletter form { align-self: stretch; } @media (min-width: 769px) and (max-width: 1200px) { .footer__newsletter .input-group-field.newsletter__input::placeholder { font-size: 14px; } } @media (max-width: 1200px) { .multi-sales-points { flex-direction: column; gap: 0; } .multi-sales-points .sales-point:first-child { width: 100%; } } @media(max-width: 768px) { .product-grid__container.product--images>.grid__item:first-child, .product-grid__container.product--images>.grid__item:last-child { width: 100%; } } @media (min-width: 547px) and (max-width: 768px) { .footer__newsletter .input-group-field.newsletter__input::placeholder { font-size: 12px; } } @media only screen and (max-width: 546px) { .footer__newsletter .input-group-field.newsletter__input::placeholder { font-size: 14px; } } .footer__newsletter>* { padding: 0; } .footer__newsletter .newsletter__input-group { margin-bottom: 0; background: #FFF; color: #141414; border-radius: 8px; } .footer__newsletter .newsletter__input-group input { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; padding: 13px 10px; } .footer__newsletter .newsletter__input-group input::placeholder { color: #9A9A9A; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; } .footer__newsletter .input-group-btn { border-radius: 8px; } .footer__newsletter .input-group-btn button { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; color: #FFF; background-color: #ff3333; border: 0; font-family: Outfit; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; padding: 10px 30px; } @media only screen and (max-width: 768px) { .footer__newsletter { flex-wrap: wrap; text-align: center; justify-content: center; gap: 10px; align-items: center; } .footer__newsletter>* { padding: 0; } .footer__newsletter .newsletter__input-group { max-width: none; } .footer__newsletter .newsletter__input-group .btn { min-width: auto; } .footer__newsletter form { width: 100%; /*margin: 20px auto 0;*/ } .footer__newsletter .newsletter__input-group input { padding: 9px 10px; } } @media only screen and (max-width: 374px) { .footer__newsletter .newsletter__input-group input { width: 160px; } .footer__newsletter .newsletter__input-group .btn { padding: 10px 6px; } .mobile-nav__item a { padding-right: 10px; } .mobile-nav__dropdown { width: calc(100vw - 140px); } .mobile-nav__dropdown-list { width: 100%; } } .footer__blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .footer__block { flex: 0 1 25%; max-width: 210px; } @media only screen and (max-width: 768px) { .footer__blocks--mobile { display: flex; flex-wrap: wrap; justify-content: center; } .footer__block, .footer__block--mobile { max-width: none; flex: 1 1 50%; } .footer__block[data-type='payment'], .footer__block[data-type='contact'] { flex: 1 0 100%; } :scope .multi-selectors--footer .multi-selectors__item { margin: 0; } .site-header__drawer { width: 375px; } .mobile-nav__dropdown-list { width: 200px; } } .footer__social { margin: 0; } form+.footer__social { margin-top: var(--gutter); } .footer__social li { display: inline-block; margin: 0 15px 15px 0; } .footer__social a { display: block; } .footer__social .icon { width: 21px; height: 21px; } .footer__social .icon.icon--wide { width: 40px; } .payment-icons { -webkit-user-select: none; user-select: none; cursor: default; margin-bottom: 20px; } @media only screen and (max-width: 768px) { .payment-icons { margin-bottom: 0; } } .payment-icons li { cursor: default; margin: 0 8px 4px 0; } /* Footer of the footer */ .footer__base-links { font-size: 13px; } .footer__base-links a, .footer__base-links span { display: inline-block; padding: 2px 20px 2px 0; } .footer__base-links a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } @media only screen and (max-width: 768px) { .footer-promotions .grid__item { margin-bottom: 32px; } .footer-promotions .grid__item:last-child { margin-bottom: 0; } } .footer-promotion { width: 100%; text-align: center; padding: 22px; border-radius: var(--roundness); overflow: hidden; } @media only screen and (min-width: 769px) { .footer-promotion { padding: 30px; } } .footer-promotion .scheme-image { border-radius: calc(var(--roundness) + 2px); } .footer-promotion[class*='color-scheme-']:not(.color-scheme-none) .btn { border: 0; } .footer__grid-image { display: block; text-align: center; margin-bottom: 17px; } @media only screen and (min-width: 769px) { .footer__grid-image { margin-bottom: 20px; } } .footer__grid-image img { display: block; } .color-scheme-none.footer-promotion { border: 1px solid; border-color: var(--color-border); } .giftcard-header { padding: calc(var(--gutter) * 2) 0; font-size: 1em; text-align: center; } .giftcard-header .site-header__logo a { display: block; margin: 0 auto; color: var(--color-text-body); } .section-header { margin-bottom: var(--section-header-bottom); } .section-header select { display: inline-block; vertical-align: middle; } .section-header--flush { margin-bottom: 0; } .section-header--with-link { display: flex; align-items: center; } .section-header--with-link select { flex: 0 1 auto; } .section-header__title { margin-bottom: 0; letter-spacing: 0; } .four-collections { width: calc(100% + 14px); margin-left: -7px; } .four-collections .section-header { margin-bottom: 33px; } .four-collections .grid-item { padding: 0 5px; aspect-ratio: 5 / 5.89; margin-bottom: 0; } .four-collections .collection-image--landscape { padding-top: 0; height: 100%; } .logo-bar-section { margin-top: 51px; } .four-collections .collection-item { margin-bottom: 0; } .four-collections .grid-item:first-child { padding-left: 0; } .four-collections .grid-item:last-child { padding-right: 0; } .section-header--with-link .section-header__title { flex: 1 1 auto; } .section-header__title a { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; } .section-header__link { flex: 0 1 auto; margin-top: calc(var(--gutter) / 2); font-weight: var(--type-header-weight); -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .section-header--with-link .section-header__link { margin-top: 0; } @media only screen and (max-width: 768px) { .section-header__link { margin-left: 10px; } .four-collections .grid-item, .four-collections .grid-item:first-child, .four-collections .grid-item:last-child { padding: 2px; } .four-collections .section-header { margin-bottom: 16px; } .four-collections { width: 100%; margin-left: 0; } } .section-header--404 { padding-top: 80px; } .section-header select { margin: 10px 0; } .section-header p { margin: 10px 0; } header-section { display: block; } [dir='rtl'] :scope .site-header__logo { margin-left: 20px; } .site-header__drawers { height: 0; overflow: visible; z-index: 100; position: relative; } @media(max-width: 374px) { .site-header__drawer { width: 100%; } } @media only screen and (max-width: 768px) { .site-header__drawers { padding: 0; } } .site-header__drawers-container { position: relative; } [data-logo-align='center'] .header-item--search predictive-search:not(.is-active) { transform: translateX(-50px); transition: transform 0.2s ease; } .header-wrapper--compressed [data-logo-align='center'] .header-item--search predictive-search:not(.is-active) { transform: translateX(0px); } /*Submit and cancel buttons*/ .site-header__search-btn { padding: 0 8px; } .site-header__search-btn--cancel { display: none; position: absolute; top: 0; bottom: 0; right: -50px; color: var(--color-nav-text); } .site-header__search-btn--cancel:hover { color: var(--color-nav-text); } .site-header__search-container .site-header__search-btn--cancel { padding-right: 5px; } .site-header__mobile-nav { overflow-x: hidden; } .site-header__mobile-nav::-webkit-scrollbar { width: 0px; } .header-layout { display: flex; align-items: center; } [data-layout='center'] { align-items: center; } .header-item { display: flex; align-items: center; flex: 1 1 auto; } .header-item--navigation { padding-left: min(2.8%, 43px); } .header-item--compress-nav { visibility: hidden; flex: 0 0 auto; width: 0; opacity: 0; transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); overflow: hidden; } .header-wrapper--compressed .header-item--compress-nav { visibility: visible; opacity: 1; width: 50px; transform: translateX(calc(var(--site-nav-icon-padding) * -1)); } .header-item--logo { flex: 0 0 auto; word-break: break-all; } .header-item--search { flex: 1 1 100%; max-width: 475px; } [data-layout='center'] .header-item--search { max-width: none; } [data-layout='center'] .header-item--search form { max-width: 320px; } .header-item--search .site-nav__compress-menu { opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); width: 50px; } .header-wrapper--compressed .header-item--search .site-nav__compress-menu { visibility: visible; opacity: 1; transform: translateX(calc(var(--site-nav-icon-padding) * -1)); } [dir='rtl'] .header-wrapper--compressed .header-item--search .site-nav__compress-menu { transform: translateX(0); } .header-item--icons { justify-content: flex-end; flex: 1 1 auto; } @media only screen and (min-width: 769px) { .header-layout[data-logo-align='center'] .header-item--logo { margin: 0 30px; } } .header-layout[data-logo-align='center'] .header-item--navigation, .header-layout[data-logo-align='center'] .header-item--icons, .header-layout[data-logo-align='center'] .header-item--search { flex: 1 1 33%; } @media only screen and (min-width: 769px) { .header-layout[data-logo-align='left'] .site-header__logo { margin-right: 30px; } } /*Icon alignment*/ .header-item--left .site-nav { margin-left: calc(var(--site-nav-icon-padding) * -1); } @media only screen and (max-width: 768px) { .header-item--left .site-nav { margin-left: calc(var(--site-nav-item-padding) / -2); } } .header-item--icons .site-nav { margin-right: calc(var(--site-nav-icon-padding) * -1); } @media only screen and (max-width: 768px) { .header-item--icons .site-nav { margin-right: calc(var(--site-nav-item-padding) / -2); } } /*Hide search icon in mobile nav when not in compressed mode*/ @media only screen and (max-width: 768px) { .header-wrapper:not(.header-wrapper--compressed) [data-nav='below'] .js-search-header { display: none; } } /*Animate hamburger icon when nav open*/ .mobile-nav-trigger path, .site-nav__compress-menu path { transition: all 0.3s cubic-bezier(0.18, 0.77, 0.58, 1); } .mobile-nav-trigger.is-active path:nth-child(1), .site-nav__compress-menu.is-active path:nth-child(1) { transform: rotate(45deg); transform-origin: 65% 36%; } .mobile-nav-trigger.is-active path:nth-child(2), .site-nav__compress-menu.is-active path:nth-child(2) { opacity: 0; } .mobile-nav-trigger.is-active path:nth-child(3), .site-nav__compress-menu.is-active path:nth-child(3) { transform: rotate(-45deg); transform-origin: 40% 73%; } /*Same default logo and icon container size, logo block width overrides*/ [data-layout='left-center'] .header-item--logo, [data-layout='left-center'] .header-item--icons { flex: 0 0 200px; max-width: 50%; } @media only screen and (min-width: 769px) { [data-layout='left-center'] .header-item--logo, [data-layout='left-center'] .header-item--icons { min-width: 0; } } .toolbar-section { position: relative; z-index: var(--z-index-toolbar); } .header-section { position: sticky; top: 0; z-index: var(--z-index-header); padding-bottom: var(--header-padding-bottom); pointer-events: none; } .header-section+.toolbar-section { z-index: calc(var(--z-index-header) - 1); } .header-section--overlay { padding-bottom: 0; } [data-section-type='header'] { pointer-events: auto; } .site-header { position: relative; } .site-header--password { color: var(--color-nav-text); } .site-header--password a, .site-header--password a:hover { color: var(--color-nav-text); } .is-light .site-header--password { color: var(--color-sticky-nav-links); } .is-light .site-header--password a, .is-light .site-header--password a:hover { color: var(--color-sticky-nav-links); } .site-header__element { position: relative; background-color: var(--color-nav); z-index: var(--z-index-header); } .is-light .site-header__element { background: transparent; box-shadow: none; } .site-header__element--top { padding: 9px 0; transition: background-color 0.2s ease; } .header-item.header-item--logo { min-height: 65px; } @media only screen and (max-width: 768px) { .site-header__element--top { padding: 0; } } .site-header__element--sub { padding: 0; z-index: var(--z-index-header-bottom-row); transition: transform 0.2s cubic-bezier(0.18, 0.77, 0.58, 1), background-color 0.2s cubic-bezier(0.18, 0.77, 0.58, 1); } .header-wrapper--compressed .site-header__element--sub { transform: translateY(-100%); display: none; } .header-wrapper--compressed .site-header__element--sub.is-active { display: block; transform: translateY(0); } .header-wrapper--init .site-header__element--sub { position: absolute; left: 0; right: 0; } .site-header__element--sub[data-type='search'] .page-width { padding-bottom: 20px; } /*Disable sticky header on short and wide screens*/ @media screen and (min-width: 700px) and (max-height: 550px) { .header-section { position: static; } } .site-header__logo { position: relative; margin: calc(var(--gutter) / 3) 0; display: block; font-size: 24px; /*when no image*/ z-index: calc(var(--z-index-header) + 1); } @media only screen and (min-width: 769px) { .text-center .site-header__logo { padding-right: 0; margin: calc(var(--gutter) / 3) auto; } } .header-layout[data-logo-align='center'] .site-header__logo { margin-left: auto; margin-right: auto; text-align: center; } @media only screen and (max-width: 768px) { .header-layout[data-logo-align='center'] .site-header__logo { text-align: left; margin-left: 0; margin-right: 0; } } .site-header__logo a { max-width: 100%; } .site-header__logo a, .site-header__logo a:hover { -webkit-text-decoration: none; text-decoration: none; } .site-header__logo img { display: block; object-fit: cover; } .header-layout[data-logo-align='center'] .site-header__logo img { margin-left: auto; margin-right: auto; } .site-header__logo-link { display: flex; align-items: center; color: var(--color-nav-text); word-break: break-word; } .site-header__logo-link:hover { color: var(--color-nav-text); } @media only screen and (max-width: 768px) { .site-header__logo-link { margin: 0 auto; } } .header-wrapper--overlay { background: none; width: 100%; position: absolute; } header-section[data-section-index='2'] .header-wrapper--overlay { position: absolute; top: 0; left: 0; right: 0; } .header-wrapper--overlay.is-light:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: -50px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, transparent); pointer-events: none; } .is-light .site-header__logo .logo--has-inverted { opacity: 0; visibility: hidden; overflow: hidden; height: 0; } .site-header__logo .logo--inverted { opacity: 0; visibility: hidden; overflow: hidden; height: 0; } .is-light .site-header__logo .logo--inverted { opacity: 1; visibility: visible; height: auto; } @media only screen and (min-width: 769px) { .site-header__logo { text-align: left; } } .site-header__logo a { color: var(--color-nav-text); } .is-light .site-header__logo a { color: var(--color-sticky-nav-links); } .is-light .site-header__logo a:hover { color: var(--color-sticky-nav-links); } .site-nav { margin: 0; } .site-nav__link { display: inline-block; vertical-align: middle; -webkit-text-decoration: none; text-decoration: none; padding: 19px var(--site-nav-item-padding); white-space: nowrap; color: var(--color-nav-text); font-family: Outfit; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: 0; text-transform: uppercase; } .site-nav__link>svg { margin-left: 4px; } .site-nav__link:hover { color: var(--color-nav-text); } .is-light .site-nav__link { color: var(--color-sticky-nav-links); } .is-light .site-nav__link:hover { color: var(--color-sticky-nav-links); } .site-nav__link .icon-chevron-down { margin-left: 5px; } @media only screen and (max-width: 959px) { .site-nav__link { padding: var(--site-nav-item-padding-top-bottom) var(--site-nav-item-padding); } } /*Header icons*/ .site-nav__icons { display: flex; align-items: center; } .site-nav__icons>.site-nav__link--icon { flex: 0 0 auto; } /*Hide when cart popup is open*/ .cart-open .site-nav__icons { display: none; } .site-nav__link--cart .icon, .site-nav__link--cart .cart-link { pointer-events: none; } .site-nav__link--icon { display: flex; align-items: center; padding-left: var(--site-nav-icon-padding); padding-right: var(--site-nav-icon-padding); } @media only screen and (max-width: 768px) { .site-nav__link--icon { padding-left: calc(var(--site-nav-item-padding) / 2); padding-right: calc(var(--site-nav-item-padding) / 2); } .site-nav__link--icon+.site-nav__link--icon { margin-left: -4px; /*~amount of inline-block space*/ } } .site-nav__link--icon .icon { width: 27px; height: 27px; } .site-nav__link--icon .icon.icon-user { position: relative; top: 1px; } @media only screen and (max-width: 768px) { .mobile-nav-open .site-nav__link:not(.mobile-nav-trigger) { display: none; } } .hero__media-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .hero__media { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: var(--z-index-hero-image); } .hero.video-parent-section { display: block; } .hero__media iframe, .hero__media video { width: 100%; height: 100%; pointer-events: none; } .video-interactable .hero__media iframe, .video-interactable .hero__media video { pointer-events: auto; } .video-parent-section.loading .hero__media iframe, .video-parent-section.loading .hero__media video { opacity: 0.01; /*sneaky way to avoid talking to an invisible YT iframe*/ } .video-parent-section.loaded .hero__media iframe, .video-parent-section.loaded .hero__media video { opacity: 1; animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; /*fixes safari animation conflict*/ } /*MP4 sizing*/ .hero__media video { position: relative; object-fit: cover; font-family: 'object-fit: cover'; } /*YouTube iframes need more specific sizing*/ .hero__media iframe { position: absolute; top: 0; left: 0; width: 300%; left: -100%; max-width: none; /*This min-width may need to change slightly depending on embedded video dimensions. Can do on a per-shop basis*/ } @media screen and (min-width: 1140px) { .hero__media iframe { width: 100%; height: 300%; left: auto; top: -100%; } } @media only screen and (max-width: 768px) { .hotspots-section .index-section { margin-bottom: 10px; } } .hotspots-section .hotspots-wrapper { display: flex; flex-wrap: wrap; } .hotspots-section .hotspots-wrapper.is-reverse { flex-direction: row-reverse; } .hotspots__title { width: 100%; padding-top: 1.5rem; } .hotspots { position: relative; width: 70%; } @media only screen and (max-width: 768px) { .hotspots { width: 100%; } } .hotspots .grid__image-ratio img { opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } [data-animate_images='true'] .hotspots .grid__image-ratio img { opacity: 1; } .hotspots__buttons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background-color: transparent; } .hotspot__button { padding: 10px; border-radius: 50%; position: absolute; line-height: 0; transform: translate(-50%, -50%); } @media only screen and (max-width: 768px) { .hotspot__button { padding: 6px; } } .hotspot__button:hover .hotspot__button-content { opacity: 1; visibility: visible; pointer-events: auto; } .hotspot__button-content { color: var(--color-text-body); background-color: var(--color-body); opacity: 0; visibility: hidden; pointer-events: none; padding: 1rem; position: absolute; top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); transition: opacity 0.3s ease-in-out; min-width: 5rem; border-radius: 5px; box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.2); } .hotspot__button-content p, .hotspot__button-content span { white-space: nowrap; margin-bottom: 0; } .hotspot__button-content:before { position: absolute; top: -10px; left: 50%; content: ''; width: 0; height: 0; border-style: solid; border-width: 0 5px 10px 5px; transform: translateX(-50%); border-color: transparent transparent var(--color-body) transparent; } .hotspot__button-content .content__prices { display: flex; flex-wrap: nowrap; } .hotspots__content { width: 30%; padding: 24px; display: flex; align-items: center; } .page-width .hotspots__content { padding-right: 0; padding-left: 40px; } @media only screen and (max-width: 768px) { .page-width .hotspots__content { padding-left: 0; } } .page-width.is-reverse .hotspots__content { padding-left: 0; padding-right: 40px; } @media only screen and (max-width: 768px) { .page-width.is-reverse .hotspots__content { padding-right: 20px; } } @media only screen and (max-width: 768px) { .hotspots__content { width: 100%; padding: 1rem 20px 0; } } .hotspot-content__block { display: none; max-height: 0; width: 100%; animation: fade-in 0.5s ease 0s forwards; position: sticky; top: 0; /* animation and position:sticky causes issues in themes where quickshop modal is nested */ } .modal-open .hotspot-content__block, .modal-closing .hotspot-content__block { animation: none; position: static; } @media only screen and (max-width: 768px) { .hotspot-content__block { align-items: center; position: relative; padding-top: 0; } } .hotspot-content__block.is-active { display: block; max-height: initial; } .hotspot-content__block .grid-product__image-wrap { margin: 0; } .hotspot-content__block .grid__item { display: block; float: none; padding: 0; } .hotspot-content__block .grid-product__tags { margin-left: 0; } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-product__tag { right: auto; left: 0; } } .hotspot-content__block .grid-item__meta, .hotspot-content__block .grid-product__meta { padding-top: 10px; } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-item__meta, .hotspot-content__block .grid-product__meta { display: flex; justify-content: center; flex-direction: column; flex-wrap: wrap; padding-left: 10px; padding-top: 0; text-align: left; } .hotspot-content__block .grid-item__meta .grid-item__meta-main, .hotspot-content__block .grid-product__meta .grid-item__meta-main, .hotspot-content__block .grid-item__meta .grid-item__meta-secondary, .hotspot-content__block .grid-product__meta .grid-item__meta-secondary { width: 100%; flex: none; } } @media only screen and (max-width: 768px) { .hotspot-content__block .grid-product { padding-right: 0; padding-left: 0; } .hotspot-content__block .quick-add-btn { display: none; } /* Class is unique to Impulse */ .hotspot-content__block .grid__item-image-wrapper { display: flex; } .hotspot-content__block .grid__item-image-wrapper .grid-product__image-mask { flex: 0 0 30%; } .hotspot-content__block .grid-item__link, .hotspot-content__block .grid-product__link { display: flex; flex-wrap: nowrap; } /* TODO: Adjust global stylings in grid.css so we don't have to add exceptions like this */ [data-grid-style='grey-round'] .hotspot-content__block .grid-item__link { border-radius: 10px 0 0 10px; } [data-grid-style='white-round'] .hotspot-content__block .grid-item__link { border-radius: 10px 0 0 10px; } .hotspot-content__block .grid-product__image-mask, .hotspot-content__block .grid-product__image-wrap, .hotspot-content__block .product-slider { width: 30%; } .hotspot-content__block .grid-product__actions { right: initial; left: 10px; top: 10px; } } /** * This is the stylesheet entrypoint for the image-compare section. * This file and all its inclusions will be processed through esbuild */ .comparison { position: relative; display: block; width: 100%; background: #222; overflow: hidden; } .comparison__draggable { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; } .comparison__image { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; -webkit-user-select: none; user-select: none; opacity: 1; animation: none; } .comparison__image-wrapper { width: 100%; height: 100%; } .comparison__button { width: 64px; height: 64px; position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-32px, -50%); cursor: pointer; z-index: 3; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; border: 3px solid #fff; padding: 0; } .comparison--style-minimal .comparison__button { border: 0; background: transparent; width: auto; transform: translate(-56px, -50%); } .comparison--style-minimal .comparison__button svg { margin: 0 20px; } @supports (-webkit-touch-callout: none) { .comparison--style-minimal .comparison__button svg { position: absolute; } .comparison--style-minimal .comparison__button svg.icon-chevron-left { left: 2px; width: 9px; } .comparison--style-minimal .comparison__button svg.icon-chevron-right { right: 2px; width: 9px; } } @media only screen and (max-width: 768px) { .comparison--style-classic .comparison__button { width: 48px; height: 48px; transform: translate(-24px, -50%); } } .comparison__button svg { width: 12px; height: auto; pointer-events: none; margin: 0 5px; } .comparison__button::before { content: ''; width: 2px; position: absolute; background-color: #fff !important; } .comparison__button::after { content: ''; width: 2px; height: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); background-color: #fff !important; } .logo-bar { text-align: center; } .logo-bar .new-grid { flex-wrap: nowrap; overflow-x: scroll; scrollbar-width: none; } .new-grid.produt-grid.scrollable-grid { scrollbar-width: thin; } /* .logo-bar .new-grid .grid-item:first-of-type { margin-left: 150px; } */ .logo-bar .new-grid .grid-item { flex-basis: auto; padding: 0 4px !important; } .logo-bar .new-grid .grid-item .logo-bar__item { padding: 0 !important; } .logo-bar .product-grid:not([data-view='6-2']) .grid-item { flex-basis: auto; } .logo-bar--layout-slider .new-grid { flex-wrap: nowrap; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; } .logo-bar--layout-slider .new-grid::-webkit-scrollbar { width: 0px; background: transparent; } .logo-bar--layout-slider .grid-item { scroll-snap-align: start; } .logo-bar--layout-carousel .new-grid { display: flex; flex-wrap: nowrap; animation-play-state: running; animation: scrolling-carousel calc(var(--move-speed) * 0.071) linear infinite; } @media (medium-down) { .logo-bar--layout-carousel .new-grid { animation: scrolling-carousel calc(var(--move-speed) * 0.038) linear infinite; } } @media(max-width: 1024px) { [data-view='8-2'] .grid-item { flex: 0 0 calc(100% / 4) !important; flex-basis: calc(100% / 4) !important; } .logo-bar .new-grid { flex-wrap: wrap; } } @media only screen and (max-width: 768px) { .logo-bar--layout-carousel .new-grid { animation: scrolling-carousel calc(var(--move-speed) * 0.019) linear infinite; } .progress-thumb { width: 70px; } .shopify-section[id*='featured-collection'] { margin: 55px 10px 40px 0; } } .logo-bar--layout-carousel .new-grid:hover, .logo-bar--layout-carousel .new-grid :focus { animation-play-state: paused; } .logo-bar--layout-carousel.logo-bar--direction-right .new-grid { animation-name: scrolling-carousel-right; } @keyframes scrolling-carousel { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @keyframes scrolling-carousel-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .logo-bar__item { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 25px 30px; /*required to prevent double grid border styles*/ background-color: var(--color-body); } [data-grid-style*='white'] .logo-bar__item { background-color: #fff; } [data-grid-style='white-round'] .logo-bar__item { border-radius: var(--product-radius); } .logo-bar__item-svg { padding: 25px 30px; } .logo-bar__image { display: block; margin: 0 auto; object-fit: cover; height: auto; width: auto; } .logo-bar__link { display: block; } .cart__discounts { margin-top: -10px; margin-bottom: 10px; } /* Cart page layout */ @media only screen and (min-width: 769px) { .cart__page { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; } .cart__page-col { border-radius: 16px; } .cart__page-col:first-child { width: calc(64.2% - 15px); padding: 16px 32px; background-color: white; } .cart__page-col:last-child { width: calc(35.8% - 15px); align-self: flex-start; overflow: hidden; position: sticky; top: 100px; padding: 72.5px 32px; background-color: white; } .cart__page-col:last-child input, .cart__page-col:last-child textarea { background-color: var(--color-body); } .medium-up--overlay::after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--z-index-overlay, auto); } } .cart__item-sub { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: center; } .cart__page-link-back { display: flex; align-items: center; gap: 32px; } .cart__page-link-back h1 { font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: 0; text-transform: capitalize; margin-bottom: 0; } .page-width--cart.page-width { padding-top: 18px; } .cart__item-row { margin-bottom: 8px; position: relative; z-index: 5; } .cart__item-row:last-child { margin-bottom: 0; } .cart__item-row.cart-recommendations { margin-bottom: 8px; } .cart-recommendations .grid-item.grid-product.grid-product-image-breathing-room--true { width: 100%; } .cart__item-row--footer { padding: 0 60px; } .cart__checkout, .cart__continue { width: 100%; } /* Cart drawer popover */ .site-header__cart { right: 0; } @media only screen and (min-width: 769px) { .site-header__cart { max-width: 408px; } } .cart__tools { display: flex; background-color: #FAFAFA; height: 49px; position: relative; width: 100%; } .cart__tools button { width: 24px; height: 24px; margin: 7px 0 0 19px; z-index: 5; } .cart__tools button svg { width: 32px; height: 32px; } .cart__tools p { font-weight: 600; font-size: 20px; line-height: 100%; letter-spacing: 0; text-transform: capitalize; color: #141414; width: 100%; text-align: center; position: absolute; inset: 0; margin: 15px auto 0; } .cart__shipping { display: flex; align-items: center; gap: 12px; background-color: #E6FFF5; margin: 16px 32px 12px 24px; padding: 8px 12px 9px 14px; border-radius: 6px; } .cart_shipping-icon { width: 32px; height: 32px; } .cart_shipping-info { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 4px; } .cart_shipping-info p { font-weight: 400; font-size: 16px; letter-spacing: 0; color: #141414; margin-bottom: 0; } .cart_shipping-progress-scroll-bar { width: 100%; height: 6px; background-color: #B6EAD5; border-radius: 18px; position: relative; overflow: hidden; } .cart_shipping-progress-thumb { height: 100%; background-color: #1BA66B; border-radius: 18px; position: relative; transition: left 0.3s ease; } .cart__checkout-wrapper .additional-checkout-buttons, .cart__checkout-wrapper .cart__continue { margin-top: 12px; } .cart__page .cart__item { grid-template-columns: 104px auto auto; grid-column-gap: 8px; } .cart__page .cart__shipping { margin: 30px 0 31px; padding: 12px 12px 9px 17px; gap: 16px; } .cart__page .cart__item-quantity { grid-area: cartPrice; max-width: 261px; } .cart__page .cart__item-name { font-size: 16px; margin-bottom: 7px; } .cart__page .cart__item .js-qty__num { height: 33px; } .cart__page .cart__price:not(.cart__price--strikethrough) { margin-bottom: -12px; } .cart__page .cart__discount { text-align: left; margin-top: 8px; } .cart__page .cart__item { margin-bottom: 19px; padding-bottom: 15px; } .cart__page .cart__item-remove { top: 0; left: auto; right: 0; width: 40px; height: 40px; } .cart__page .cart__item-remove svg { width: 24px; height: 24px; } .cart__page .cart__benefits { margin: 0; padding: 12px 36.5px; } .cart__page .cart__benefits-item:nth-child(1) { width: 38%; } .cart__page .cart__benefits-item:nth-child(2) { width: 25%; } .cart__page .cart__benefits-item:nth-child(3) { width: 37%; } .cart__row-discount { display: flex; align-items: center; gap: 16px; margin: 33px 0 10px; position: relative; z-index: 5; } .cart__row-discount input { flex: 1 1 auto; font-weight: 400; font-size: 14px; line-height: 1; letter-spacing: 0; background-color: #ffffff; border: 1px solid rgba(164, 164, 164, 1); color: rgba(0, 0, 0, 1); height: 50px; padding: 10px 15px; border-radius: 8px; } .cart__row-discount button.cart__row-discount-desktop { flex: 0 0 auto; font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0; background-color: #F33; border-radius: 8px; padding: 18px; height: 50px; color: #ffffff; } .cart__row-discount button.cart__row-discount-desktop:disabled { background-color: rgba(230, 230, 230, 1); color: rgba(164, 164, 164, 1); } .cart__price-info { margin: 19px 0 26px; } .cart__price-info-row { display: flex; justify-content: space-between; gap: 10px; width: 100%; } .cart__page .cart__item--subtotal { margin-bottom: 28px; } .cart__page .cart__item--subtotal div:first-child { font-weight: 400; } .cart__page .cart__item--subtotal div:last-child { font-weight: 600; } .cart__page .cart__checkout-wrapper button, .cart__page .cart__checkout-wrapper a { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0; text-align: center; text-transform: uppercase; height: 52px; border-radius: 8px; padding: 19px 0; } .cart__page .cart__item-row-info { color: rgba(55, 65, 81, 1); } .cart__page .cart__checkout-wrapper button { border: 0; background-color: rgba(255, 51, 51, 1); color: #ffffff; } .cart__page .cart__checkout-wrapper a { background-color: white; color: rgba(255, 51, 51, 1); border: 1px solid rgba(255, 51, 51, 1); } .cart__price-info-row:not(:last-child) { margin-bottom: 16px; } .cart__price-info-row-border { border-bottom: 1px solid rgba(212, 212, 212, 1); padding-bottom: 15px; } .cart__price-info-row p { font-weight: 400; font-size: 16px; line-height: 1; letter-spacing: 0; margin-bottom: 0; } .cart__price-info-row p.cart__price-info-price { font-weight: 600; } .site-header__cart .additional-checkout-buttons { margin: 10px 0; } .site-header__cart .additional-checkout-buttons [data-shopify-buttoncontainer] { justify-content: center; } .site-header__cart .additional-checkout-buttons [data-shopify-buttoncontainer]>* { height: auto !important; } /*Match additional cart button styles to theme*/ .additional-checkout-buttons div[role='button'] { border-radius: var(--button-radius) !important; } .cart__discount { color: var(--color-text-savings); } .cart__item--subtotal { font-weight: var(--type-header-weight); font-size: calc(var(--type-base-size) + 2px); } .cart__item--subtotal-label { font-size: 16px; font-weight: 500; } .cart__item--subtotal-price { font-size: 16px; font-weight: 700; } .cart__terms { display: flex; align-items: center; justify-content: center; } .cart__shipping-benefits { display: flex; justify-content: space-between; gap: 12px; } .cart__shipping-benefits-col { display: flex; gap: 8px; align-items: center; } .cart__shipping-benefits-col svg { min-width: 24px; min-height: 24px; } .cart__shipping-benefits-col p { font-weight: 300; font-size: 12px; line-height: 1; letter-spacing: 0; color: rgba(0, 0, 0, 1); } .cart__row-discount-mobile { display: none; } @media(max-width: 768px) { .cart__shipping { margin: 16px 15px 0; } .cart__benefits { margin: 16px 15px 17px; } .cart__footer { padding: 12px 15px 12px; } .cart__scrollable { height: calc(90dvh - var(--header-nav-height, 0px) - 100px); } .cart__item .js-qty__num { height: 28px; padding: 0; } .js-qty__adjust { width: 20px; padding: 0 6px; } } @media(max-width: 1440px) { .cart__page-col:first-child, .cart__page-col:last-child { width: calc(50% - 15px); } .cart__page .cart__benefits { padding: 10px; } } @media(max-width: 1200px) { .cart__benefits { flex-direction: column; align-items: center; justify-content: center; } .cart__page .cart__benefits-item:nth-child(1), .cart__page .cart__benefits-item:nth-child(2), .cart__page .cart__benefits-item:nth-child(3) { width: 100%; justify-content: center; } } @media(max-width: 1024px) { .cart__page { flex-direction: column; gap: 0; } .cart__page-col { width: 100% !important; border-radius: 0; } .cart__page-col:last-child { padding: 0 32px 16px; } .cart__page .cart__item-quantity { min-width: 180px; max-width: 180px; } } @media(max-width: 768px) { .cart__page { background-color: #ffffff; padding: 12px 15px; } .cart__page-col:last-child { padding: 0; } .cart__shipping-benefits { display: none; } .cart__page-link-back { order: 1; position: relative; margin-left: 10px; } .cart__page-link-back h1 { left: 0; position: absolute; right: 0; margin: auto; width: max-content; font-size: 22px; } .data-products { order: 2; position: relative; margin-top: 39px; } .cart__page .cart__shipping { order: 3; position: relative; } .cart__page-col { display: flex; flex-direction: column; } .page-width--cart.page-width { padding: 18px 0 0; } .cart__page .cart__item { grid-template-columns: 87px auto auto; } .cart__page .cart__item-name { font-size: 11px; line-height: 1.1; margin-bottom: 8px; } .cart__page .cart__item-remove { width: 22px; height: 22px; right: auto; left: -5px; top: -5px; } .cart__page .cart__item-remove svg { width: 12px; height: 12px; } .cart__page .cart__item-title { padding-right: 0; margin-top: -10px; } .cart__page .cart__item .js-qty__num { height: 28px; } .cart__page .cart__item-quantity { grid-area: cartQuantity; margin-top: -15px; } .cart__item--variants { margin-bottom: 0; } .cart__page .cart__price { margin-bottom: 0px; } .cart__page .cart__item { padding-bottom: 0px; margin-bottom: 18px; } .cart__page .cart__item:last-of-type { border-bottom: 1px solid var(--color-border); margin-bottom: 14px; } .cart__page .cart__shipping { margin: 0 0 24px; padding: 9px 12px 10px 13px; gap: 11px; } .cart__page .cart_shipping-info { gap: 3px; } .cart__page .cart__benefits { align-items: flex-start; gap: 8px; } .cart__page .cart__benefits-item:nth-child(1), .cart__page .cart__benefits-item:nth-child(2), .cart__page .cart__benefits-item:nth-child(3) { justify-content: flex-start; padding-left: 25px; } .cart__page .cart__benefits-item svg { min-width: 27px; min-height: 29px; } .cart__page .cart__benefits { order: 1; } .cart__page .cart__price-info { order: 2; margin: 45px 0 0px; } .cart__page .cart__row-discount { order: 3; margin: 13px 0 18px; justify-content: space-between; } .cart__page-col:last-child>div:not(.cart__benefits):not(.cart__price-info):not(.cart__row-discount) { order: 4; } .cart__row-discount-mobile { display: block; } .cart__row-discount-desktop { display: none; } .cart__price-info-row p { font-size: 15px; } .cart__price-info-row:not(:last-child) { margin-bottom: 11px; } .cart__row-discount-text { margin-bottom: 0; letter-spacing: 0; } .cart__page .cart__item--subtotal div:first-child { letter-spacing: 0; } .cart__page .cart__item--subtotal { margin-bottom: 12px; } .cart__page .cart__checkout-wrapper button, .cart__page .cart__checkout-wrapper a { height: 45px; font-size: 12px; } .cart__page .cart__checkout-wrapper svg { max-width: 12px; max-height: 12px; } .cart__page .cart__item-row-info { font-size: 16px; line-height: 1.3; margin-top: 1px; } } .cart__terms label { margin-bottom: 0; } /*PayPal button has unhelpful z-index*/ iframe.zoid-component-frame { z-index: 1 !important; } /*Override header drawer general styles for cart drawer*/ .site-header__cart { padding: 0; overflow: hidden; } .main-content, .shopify-section-group-footer-group { /* changed to visible to make sticky position work */ overflow: visible; } @media (max-width: 767px) { .main-content, .shopify-section-group-footer-group { /* changed to visible to make sticky position work */ overflow: hidden } } section-main-content { display: block; } @media only screen and (min-width: 769px) { section-main-content { padding-top: 0; } } .rte--collection-desc { padding: 45px 0; margin-bottom: 0; } .template-giftcard, .template-giftcard body { background: var(--color-body); } .template-giftcard a, .template-giftcard body a { -webkit-text-decoration: none; text-decoration: none; } .template-giftcard .page-width { max-width: 588px; } .template-giftcard .shop-url { display: none; } .giftcard__border { padding: 1.5em; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .giftcard__content { background-color: var(--color-body); color: var(--color-text-body); } .giftcard__header { padding: calc(var(--gutter) / 2); } .giftcard__title { float: left; margin-bottom: 0; } .giftcard__tag { display: block; float: right; background-color: var(--color-text-body); border: 1px solid transparent; color: var(--color-body); padding: calc(var(--gutter) / 3); border-radius: 4px; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; } .giftcard__tag--active { background: transparent; color: var(--color-text-body); border: 1px solid; border-color: var(--color-border); } .giftcard__wrap { position: relative; margin: calc(var(--gutter) / 2) calc(var(--gutter) / 2) var(--gutter); } .giftcard__wrap img { position: relative; display: block; border-radius: 10px; z-index: 2; } .giftcard__code { position: absolute; bottom: var(--gutter); text-align: center; width: 100%; z-index: 50; } .giftcard__code--medium { font-size: 0.875em; } .giftcard__code--small { font-size: 0.75em; } .giftcard__code__inner { display: inline-block; vertical-align: baseline; background-color: #fff; padding: 0.5em; border-radius: 4px; max-width: 450px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .giftcard__code--small .giftcard__code__inner { overflow: auto; } .giftcard__code__text { font-weight: 400; font-size: 1.875em; text-transform: uppercase; border-radius: 2px; border: 1px dashed; border-color: var(--color-border); padding: 0.4em 0.5em; display: inline-block; vertical-align: baseline; color: var(--color-text-body); line-height: 1; } .disabled .giftcard__code__text { color: #999; -webkit-text-decoration: line-through; text-decoration: line-through; } .giftcard__amount { position: absolute; top: 0; right: 0; color: #fff; font-size: 2.75em; line-height: 1.2; padding: calc(var(--gutter) / 2); z-index: 50; } .giftcard__amount strong { display: block; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1); } .giftcard__amount--medium { font-size: 2em; } .tooltip { display: block; position: absolute; top: -50%; right: 50%; margin-top: 16px; z-index: 3; color: #fff; text-align: center; white-space: nowrap; } .tooltip:before { content: ''; display: block; position: absolute; left: 100%; bottom: 0; width: 0; height: 0; margin-left: -5px; margin-bottom: -5px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 5px solid #333; border-top: 5px solid rgba(51, 51, 51, 0.9); } .tooltip__label { display: block; position: relative; right: -50%; border: none; border-radius: 4px; background: #333; background: rgba(51, 51, 51, 0.9); min-height: 14px; font-weight: 400; font-size: 12px; -webkit-text-decoration: none; text-decoration: none; line-height: 16px; text-shadow: none; padding: 0.5em 0.75em; margin-left: 0.25em; } .tooltip__label small { text-transform: uppercase; letter-spacing: 0.1em; color: #b3b3b3; font-size: 0.875em; } .giftcard__instructions { text-align: center; margin: 0 calc(var(--gutter) / 2) var(--gutter); } .giftcard__actions { position: relative; text-align: center; overflow: hidden; padding-bottom: 1em; } .template-giftcard .action-link { position: absolute; left: calc(var(--gutter) / 2); top: 50%; font-size: 0.875em; font-weight: var(--type-header-weight); display: block; padding-top: 4px; text-transform: uppercase; letter-spacing: 0.2em; margin-top: -10px; } .template-giftcard .action-link:hover, .template-giftcard .action-link:focus { color: var(--color-text-body); } .template-giftcard .action-link__print { display: inline-block; vertical-align: baseline; width: 17px; height: 17px; vertical-align: middle; margin-right: 10px; opacity: 1; background-image: url('/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png'); background-repeat: no-repeat; background-position: 0 0; } .giftcard__footer { text-align: center; padding: calc(var(--gutter) * 2) 0; } #QrCode img { padding: var(--gutter); border: 1px solid; border-color: var(--color-border); border-radius: 4px; margin: 0 auto var(--gutter); } @media only screen and (max-width: 768px) { .giftcard { font-size: 12px; } .giftcard-header { padding: var(--gutter) 0; } .header-logo { font-size: 2em; } .giftcard__border { padding: calc(var(--gutter) / 2); } .giftcard__actions { padding: calc(var(--gutter) / 2); } .giftcard__actions .btn { width: 100%; padding-left: 0; padding-right: 0; } .template-giftcard .action-link { display: none; } } /*================ Small width ================*/ @media screen and (max-width: 400px) { .giftcard__amount strong { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1); } .giftcard__wrap:before, .giftcard__wrap:after { display: none; } .giftcard__code { font-size: 0.75em; } .giftcard__code--medium { font-size: 0.65em; } .giftcard__code--small { font-size: 0.55em; } } /*================ Small height ================*/ @media screen and (max-height: 800px) { .header-logo img { max-height: 90px; } } @media print { @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } html, body { background-color: #fff; } .giftcard-header { padding: 10px 0; } .giftcard__content, .giftcard__border { border: 0 none; } .site-header__logo-link img:nth-child(2), .giftcard__actions, .giftcard__wrap:before, .giftcard__wrap:after, .tooltip, .add-to-apple-wallet { display: none; } .giftcard__title { float: none; text-align: center; } .giftcard__code__text { color: #555; } .template-giftcard .shop-url { display: block; } .template-giftcard .logo { color: #58686f; } } section-main-search { display: block; } .main-search__content { padding-top: 5px; } @media only screen and (min-width: 769px) { .main-search__content { padding-top: 60px; } } .search-bar { max-width: 100%; } .search-bar--page { max-width: 300px; margin-top: calc(var(--gutter) / -2); } .search-bar .icon { width: 24px; height: 24px; vertical-align: middle; } .map-section { display: block; position: relative; height: 650px; width: 100%; overflow: hidden; } @media only screen and (min-width: 769px) { .map-section { height: 500px; } } .map-section:not(.map-section--no-overlay) { display: grid; } .map-section:not(.map-section--no-overlay) .map-section__content:not([class*='color-scheme-']) { background-color: var(--color-body); color: var(--color-text-body); } @media only screen and (max-width: 768px) { .map-section:not(.map-section--no-overlay) .content-over-media { --content-over-media-column-gap: 20px; --content-over-media-row-gap: 20px; } .map-section:not(.map-section--no-overlay) .content-over-media .content-over-media__content { width: 100%; } .map-section:not(.map-section--no-overlay) .content-over-media .map-section__content { max-width: none; } } @media only screen and (max-width: 768px) { .map-section--no-overlay { height: auto; } .map-section--no-overlay .map-section__content { max-width: none; } } @media only screen and (min-width: 769px) { .map-section--no-overlay { display: flex; } .map-section--no-overlay .map-section__content { min-width: 380px; align-content: center; } } .map-section__map { position: relative; width: 100%; } @media only screen and (max-width: 768px) { .map-section__map { aspect-ratio: 5 / 4; } } .map-section__content { padding: var(--gutter); max-width: 380px; border-radius: var(--roundness); overflow: hidden; } .map-section--no-overlay .map-section__content { padding-top: calc(var(--gutter) * 1.25); padding-bottom: calc(var(--gutter) * 1.25); } .map-section--no-overlay .map-section__content[layout='right'] { order: 1; } .newsletter-section .errors { margin-left: auto; margin-right: auto; max-width: 520px; } .newsletter-container { margin: 0 auto !important; padding: 0 !important; } .newsletter-section { display: flex; gap: 40px; align-items: center; padding: 60px 0; } @media only screen and (max-width: 768px) { .newsletter-section { flex-direction: column; padding: 30px 0; } } .newsletter-section--image-left { flex-direction: row-reverse; } @media only screen and (max-width: 768px) { .newsletter-section--image-left { flex-direction: column-reverse; } } .newsletter-section__content { flex: 100%; max-width: 800px; padding-left: 20px; margin: 0 auto; } .newsletter-section--no-image .newsletter-section__content { flex: 100%; } .newsletter-section__content form { display: flex; width: 100%; } .text-left .newsletter-section__content form { justify-content: flex-start; } .text-center .newsletter-section__content form { justify-content: center; } .text-right .newsletter-section__content form { justify-content: flex-end; } .newsletter-section__content .newsletter__input-group { margin: 0; } .newsletter-section__image { width: 100%; } .newsletter-section__image img { opacity: 1; animation: none; display: block; margin: 0 auto; object-fit: cover; height: auto; } .newsletter-section__image--33 { flex: 33.333% 0 0; } .newsletter-section__image--50 { flex: 50% 0 0; } @media only screen and (max-width: 768px) { .newsletter-section__image--50 { max-width: 100%; } } .newsletter-section__image--66 { flex: 66.666% 0 0; } @media only screen and (max-width: 768px) { .newsletter-section__image--66 { max-width: 100%; } } /* * This is the stylesheet entrypoint for the more-products-collection section. * This file and all its inclusions will be processed through postcss */ .pagination { margin: calc(var(--gutter) * 2) 0; display: flex; justify-content: flex-end; gap: 8px; } .pagination>span { display: inline-block; vertical-align: middle; line-height: 1; } .pagination a { display: inline-block; } /* .pagination a:not(.btn), .pagination .page.current { padding: 8px 12px; } .pagination .page.current { opacity: 0.3; } */ .pagination .btn { transition: transform 0.15s ease-out; } .pagination .btn:hover { transform: scale(1.08); } .pagination .btn .icon { width: 10px; height: 10px; } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded { padding: 0; } @media only screen and (max-width: 768px) { .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded { padding: 0; } } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup { display: flex; max-width: 800px; min-width: 650px; } @media only screen and (max-width: 768px) { .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup { max-width: none; min-width: 0; } } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup.newsletter-popup--image-reversed { flex-direction: row-reverse; } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup__image-wrapper { position: relative; width: 50%; } @media only screen and (max-width: 768px) { .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup__image-wrapper { display: none; } } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup__image { width: 100%; height: 100%; object-fit: cover; position: absolute; } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup__content { padding: 40px; width: 50%; } @media only screen and (max-width: 768px) { .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .newsletter-popup__content { padding: 40px; width: 100%; } } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .form__submit--large { display: none; } .modal--mobile-friendly.modal--square .newsletter--has-image.modal__centered-content--padded .form__submit--small { display: block; } .newsletter-popup { position: relative; margin: 0 auto; max-width: 520px; text-align: center; } .newsletter-popup .h2 { margin-bottom: 0; } @media only screen and (min-width: 769px) { .newsletter-popup .h2 { margin-bottom: 0; } } .newsletter-popup .rte { margin-top: 20px; margin-bottom: 0; } @media only screen and (min-width: 769px) { .newsletter-popup .rte { margin-top: 20px; margin-bottom: 0; } } .newsletter-popup .social-icons { margin: 0; display: block; text-align: center; } .newsletter-popup .social-icons li { display: inline-block; margin: 30px 15px 0 0; } .newsletter-popup .social-icons li:last-child { margin-right: 0; } .newsletter-popup .newsletter__input-group { margin-top: 30px; } @media only screen and (max-width: 768px) { .newsletter-popup .newsletter__input-group { margin-top: 20px; } } .newsletter-button { margin-top: 30px; } .password-page__logo h1 { margin-bottom: 0; } .password__lock .icon { position: relative; top: -2px; margin-right: 4px; } #LoginModal .modal__inner { background: var(--color-body); color: var(--color-text-body); padding: 50px 50px 10px; } .password-page__toolbar { z-index: var(--z-index-toolbar); } .icon-shopify-logo { width: 60px; height: 20px; } @media only screen and (max-width: 768px) { .password-header-section .header-item--logo { width: 50%; } } .product-block { display: block; margin-bottom: 22px; } .product-block hr { margin: 0; } :root { --z-index-promo-tint: 2; --z-index-promo-color-overlay: 3; --z-index-promo-text: 3; --z-index-promo-content: 4; --z-index-promo-link: 5; } .promo-grid--space-top { padding-top: var(--index-section-padding); } .promo-grid--space-bottom { padding-bottom: var(--index-section-padding); } @media only screen and (max-width: 768px) { .promo-grid--hidden-block-images .flex-grid__item.type-image { display: none; } } .promo-grid__container { display: flex; align-items: flex-start; position: relative; background-repeat: no-repeat; border-radius: var(--roundness); overflow: hidden; } .promo-grid__container.horizontal-center { justify-content: center; text-align: center; } .promo-grid__container.horizontal-center .btn { margin: 2px 5px; } .promo-grid__container.horizontal-left .btn { margin-right: 10px; } .promo-grid__container.horizontal-right { justify-content: flex-end; text-align: right; } .promo-grid__container.horizontal-right .btn { margin-left: 10px; } .promo-grid__container .scheme-image { border-radius: calc(var(--roundness) + 2px); } .promo-grid__slide-link { display: block; position: absolute; width: 100%; height: 100%; z-index: var(--z-index-promo-link); } .promo-grid__slide-link:hover~.promo-grid__content .btn:not(.btn--secondary):not(.btn--inverse) { background: var(--color-button-primary-light); transition-delay: 0.25s; } .promo-grid__content { flex: 0 1 auto; padding: 2em 2.5em; /*Relative to text-size*/ position: relative; min-width: 200px; z-index: var(--z-index-promo-content); } .promo-grid__content p:last-child { margin-bottom: 0; } .vertical-top .promo-grid__content { align-self: flex-start; } .vertical-center .promo-grid__content { align-self: center; } .vertical-bottom .promo-grid__content { align-self: flex-end; } .video-interactable .promo-grid__content { pointer-events: none; } /*Radial gradient on only some types*/ .type-advanced .promo-grid__content:not(.promo-grid__content--sale) a, .type-simple .promo-grid__content:not(.promo-grid__content--sale) a { color: #fff; border-bottom: 2px solid; border-bottom-color: #fff; } .type-advanced .rte--strong, .type-product .rte--strong, .type-sale_collection .rte--strong { line-height: 1.1; } .type-advanced .rte--em, .type-product .rte--em, .type-sale_collection .rte--em { font: inherit; text-transform: lowercase; font-weight: bold; } .type-advanced .rte--strong, .type-product .rte--strong { font-size: 1.8em; line-height: 1.1; } @media only screen and (min-width: 769px) { .type-advanced .rte--strong, .type-product .rte--strong { font-size: 2.25em; } .type-product.flex-grid__item--50 .rte--strong, .type-product.flex-grid__item--33 .rte--strong { font-size: 1.6em; } } .promo-grid__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: left; } .promo-grid__bg .placeholder-svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: none; width: auto; padding: 0; } .video-interactable .promo-grid__bg:before { pointer-events: none; } .promo-grid__bg-image { z-index: var(--z-index-hero-image); } .promo-grid__text { position: relative; } .promo-grid__text .btn { margin-top: 2px; margin-bottom: 2px; } /*Size adjustments when items 50% width*/ @media only screen and (min-width: 769px) { .promo-grid>.flex-grid>.flex-grid__item--50 .enlarge-text { font-size: calc(var(--type-base-size) + 2px); } .promo-grid>.flex-grid>.flex-grid__item--50 .btn { padding: 9px 16px; font-size: calc(var(--type-base-size) + 1px); } } /* ======================= Type: Advanced ===================== */ .type-advanced { --z-index-overlay: -1; } .type-advanced .promo-grid__content { flex: 1 1 auto; padding: 7%; } .type-advanced .rte--block { color: #fff; text-shadow: 0 2px 3px rgb(0 0 0 / 20%); } .type-advanced .btn { margin-bottom: 10px; } @media only screen and (max-width: 768px) { .type-advanced .btn { margin-bottom: 7px; } } .type-advanced .promo-grid__content:after { background: radial-gradient(rgba(0, 0, 0, 0.3) 0%, transparent 60%); margin: -100px -200px -100px -200px; } .type-advanced .horizontal-center .rte--block { padding: 0 10%; } .type-advanced .horizontal-left .rte--block { padding: 0 20% 0 0; } .type-advanced .horizontal-right .rte--block { padding: 0 0 0 20%; } /* ======================= Type: Sale Collection ===================== */ .type-sale_collection { max-height: 600px; } .type-sale_collection .promo-grid__container { align-items: center; } .type-sale_collection .promo-grid__content { padding: 0; margin: 7%; flex: 0 1 auto; min-width: 0; } @media only screen and (max-width: 768px) { .type-sale_collection .promo-grid__content { font-size: 0.9em; } } @media only screen and (min-width: 769px) { .type-sale_collection .promo-grid__content:not(.promo-grid__content--small-text) { font-size: 1.5em; } } /*Custom typography styles*/ .type-sale_collection .rte--block { margin-bottom: 7.5px; } .type-sale_collection .rte--block:last-child { margin-bottom: 0; } .type-sale_collection .rte--strong { position: relative; display: block; font-size: 6.5em; line-height: 1; white-space: nowrap; text-align: left; } @media only screen and (max-width: 768px) { .type-sale_collection .rte--strong { font-size: 6em; } } .type-sale_collection .rte--strong sup { font-size: 0.5em; top: -0.3em; } .type-sale_collection .rte--em, .type-sale_collection .enlarge-text { text-align: left; padding-left: 8px; } @media only screen and (max-width: 768px) { .type-sale_collection .rte--em, .type-sale_collection .enlarge-text { padding-left: 4px; } } /*Custom type layout for "off" when following "%"*/ .type-sale_collection small { display: inline; font-size: 0.4em; margin-left: -1.7em; letter-spacing: 0; } .type-sale-images { flex: 1 1 50%; margin: 7% 7% 7% 3%; } .type-sale-images svg { display: block; } .type-sale-images__crop { overflow: hidden; width: 100%; } /* ======================= Type: Simple ===================== */ .type-simple { --z-index-overlay: 1; } .type-simple .promo-grid__content { align-self: flex-end; padding: calc(var(--gutter) / 1); } @media only screen and (max-width: 768px) { .type-simple .promo-grid__content { padding: calc(var(--gutter) / 2); } } .type-simple .promo-grid__text { color: #fff; } .type-simple .promo-grid__bg:after { background: linear-gradient(15deg, rgba(0, 0, 0, 0.6), transparent 40%); } .promo-grid__title:last-child { margin-bottom: 0; } /* ======================= Type: Image ===================== */ .type-image .promo-grid__container { background: none; } .type-image img, .type-image a, .type-image .image-wrap { width: 100%; } /*================ Type: Banner ================*/ .type-banner p { margin: 7px; display: inline-block; vertical-align: middle; line-height: 1.2; } .type-banner__link { display: block; flex: 1 1 100%; } .type-banner__content { width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 10px; } .type-banner__text { flex: 0 1 auto; padding: 12px; display: flex; align-items: center; } @media only screen and (max-width: 959px) { .type-banner__text { flex-wrap: wrap; justify-content: center; } } .type-banner h2 { margin: 10px; } @media only screen and (min-width: 769px) { .type-banner__text { padding: 20px; } } /*================ Type: Product ================*/ .type-product__wrapper { flex: 1 1 100%; align-self: center; position: relative; padding: 2em 0; z-index: var(--z-index-promo-content); } .promo-grid__product { display: flex; align-items: center; } @media only screen and (min-width: 769px) { .flex-grid__item--25 .promo-grid__product { flex-direction: column-reverse; } } .type-product__text { flex: 1 1 40%; } .promo-grid__product-images { position: relative; flex: 1 1 60%; } @media only screen and (max-width: 768px) { .promo-grid__product-images { padding-left: 1em; padding-right: 1em; } } @media only screen and (min-width: 769px) { .flex-grid__item--25 .promo-grid__product-images { width: 100%; margin: 0; } } .promo-grid__product-text, .promo-grid__product-images { margin: 6%; } .promo-grid__product-images { margin-left: 0; } .type-product__image { position: relative; } .type-product__image:first-child { width: 100%; } .type-product__image:nth-child(2) { position: absolute; bottom: 40px; right: 0; width: 100%; max-width: 40%; } @media only screen and (max-width: 768px) { .promo-grid__product { flex-wrap: wrap; } .promo-grid__product-text, .promo-grid__product-images { margin: 3%; } .promo-grid__product-text { order: 2; } } .type-product__labels { z-index: var(--z-index-promo-text); display: flex; justify-content: center; gap: 1em; margin-bottom: 2em; } @media only screen and (min-width: 769px) { .type-product__labels { justify-content: flex-start; } .type-product__labels .flex-grid__item--50, .type-product__labels .flex-grid__item--33 { font-size: 0.9em; } } .type-product__label { padding: 4px 12px; background-color: var(--color-button-primary); color: var(--color-button-primary-text); border-radius: var(--roundness); } .type-product__label--secondary { background-color: var(--color-body); color: var(--color-text-body); } .flex-grid { display: flex; flex-wrap: wrap; flex: 1 1 100%; } [data-center-text='true'] .flex-grid { justify-content: center; } .flex-grid--center { align-items: center; } .flex-grid--gutters { margin-top: calc(var(--gutter) / -2); margin-left: calc(var(--gutter) / -2); } .flex-grid__item { flex: 0 1 100%; display: flex; align-items: stretch; } .flex-grid--gutters .flex-grid__item { padding-top: calc(var(--gutter) / 2); padding-left: calc(var(--gutter) / 2); } .flex-grid__item>* { flex: 1 1 100%; } .flex-grid__item--stretch { flex: 1 1 100%; } /*Flex grid sizing from theme settings*/ @media only screen and (min-width: 769px) { .flex-grid__item--25 { flex-basis: 25%; } .flex-grid__item--33 { flex-basis: 33.33%; } .flex-grid__item--50 { flex-basis: 50%; } .flex-grid__item--66 { flex-basis: 66.66%; } .flex-grid__item--75 { flex-basis: 75%; } } .background-media-text__video { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; z-index: 0; } @media only screen and (max-width: 768px) { .background-media-text__video { width: 300%; left: -100%; } } .background-media-text__video iframe, .background-media-text__video video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; pointer-events: none; } @media only screen and (min-width: 769px) { .background-media-text__video iframe, .background-media-text__video video { height: 120%; max-width: none; left: -100%; height: 150%; width: 300%; } } /*This min-width may need to change slightly depending on embedded video dimensions. Can do on a per-shop basis*/ @media screen and (min-width: 1140px) { .background-media-text__video iframe, .background-media-text__video video { width: 100%; height: 300%; left: auto; top: -100%; } } .video-interactable .background-media-text__video iframe, .video-interactable .background-media-text__video video { pointer-events: auto; } .loaded .background-media-text__video { animation: zoom-fade 1s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards; transition: none; } @media only screen and (min-width: 769px) { .background-media-text--450 .background-media-text__video { min-height: 450px; } .background-media-text--550 .background-media-text__video { min-height: 550px; } .background-media-text--650 .background-media-text__video { min-height: 650px; } .background-media-text--750 .background-media-text__video { min-height: 750px; } .background-media-text__video { opacity: 0; } } @media only screen and (min-width: 769px) { .rich-text-section .background-svg--wave .page-width { padding-bottom: 20px; } } .scrolling-text { overflow: hidden; } .scrolling-text__inner { visibility: visible; white-space: nowrap; display: inline-flex; margin: 0.15em 0; animation: scrolling-text var(--move-speed) linear infinite; animation-play-state: running; } .scrolling-text__inner--right { transform: translateX(-50%); animation: scrolling-text-right var(--move-speed) linear infinite; } .scrolling-text span { white-space: nowrap; } .scrolling-text:hover .scrolling-text__inner, .scrolling-text:focus .scrolling-text__inner { animation-play-state: paused; } @keyframes scrolling-text { 0% { transform: translateX(0); -webkit-transform: translateX(0); } 100% { transform: translateX(-100%); -webkit-transform: translateX(-100%); } } @keyframes scrolling-text-right { 0% { transform: translateX(-50%); -webkit-transform: translateX(-50%); } 100% { transform: translateX(0); -webkit-transform: translateX(0); } } .results { padding: 0 20px 20px; display: block; width: 100%; } .results ul { list-style: none; padding: 0; margin: 0; } .results li { transition: background 0.2s ease; padding: 6px 0; margin-bottom: 0; } .results li:hover { background: rgba(0, 0, 0, 0.05); } .results li a { display: flex; align-items: center; } .results--queries span { font-weight: bolder; } .results--queries mark { background-color: transparent; font-weight: normal; } .results-products__info>span { margin-left: 10px; } .results--products #predictive-search-products { margin-bottom: 2px; } .results-products__image { width: 100%; min-width: 80px; max-width: 80px; height: 80px; } .results-products__info { display: flex; flex-direction: column; } .predictive-search-results { display: flex; flex-wrap: wrap; flex-direction: column; overflow-y: auto; padding: 40px 0 0; } .predictive-search-results h3 { padding-bottom: 10px; border-bottom: 1px solid; border-color: #D4D4D4; margin-bottom: 2px; } .predictive-search-results--none { padding-top: 20px; } .predictive-search__no-results { display: block; width: 100%; } .predictive-search__no-results:hover { opacity: 0.5; } .results__group-1 { flex: 100% 0 0; } .results__group-1>div:not(.results--queries) { display: none; } .results__group-2 { flex: 100% 0 0; } .results__search-btn { width: 100%; padding: 10px; transition: background-color 0.2s ease; border: 1px solid; border-color: var(--color-border); } .results__search-btn:hover { background-color: rgba(0, 0, 0, 0.05); } .results__search-btn .icon { width: 14px; height: 14px; } @container (min-width: 800px) { .predictive-search-results { flex-direction: row; flex-wrap: nowrap; } .results { padding: 0 40px 20px; } .results__group-1 { flex: 1 0 0; } .results__group-1 div:not(.results--queries) { display: block; } .results__group-2 { flex: 2 0 0; } .results__group-2>div:not(.results--products) { display: none; } .results__search-btn { text-align: left; padding: 10px 0 10px 40px; } } @media(max-width: 1080px) { .search__input-wrap { width: calc(100vw - 140px); max-width: calc(100vw - 140px); } .search__results { width: calc(100vw - 140px); max-width: calc(100vw - 140px); } } @media(max-width: 768px) { .search__input-wrap { width: calc(100vw - 100px); max-width: calc(100vw - 100px); } .search__results { min-width: auto; margin-left: 0; width: calc(100vw - 60px); max-width: calc(100vw - 60px); } .predictive-search-results { padding: 16px 0 0; } .predictive-search-results h3 { font-size: 16px; } } .slideshow-wrapper { position: relative; } /*Pause button (focusable by keyboard only)*/ .slideshow__pause:focus { clip: auto; width: auto; height: auto; margin: 0; color: var(--color-button-primary-text); background-color: var(--color-button-primary); padding: 10px; z-index: 10000; transition: none; } .video-is-playing .slideshow__pause:focus { display: none; } .slideshow__pause-stop { display: block; } .is-paused .slideshow__pause-stop { display: none; } .slideshow__pause-play { display: none; } .is-paused .slideshow__pause-play { display: block; } .slideshow__slide { display: none; width: 100%; height: 100%; position: relative; overflow: hidden; } .slideshow__slide:first-child { display: block; } .flickity-slider .slideshow__slide { display: block; } .hero--padded .slideshow__slide { border-radius: var(--roundness); overflow: hidden; } .hero__image-wrapper--no-overlay:before { content: none; } /* Hero side by side layout */ .hero__sidebyside { height: 100%; display: flex; } .hero__sidebyside.color-scheme-none { background-color: var(--color-body); color: var(--color-text-body); } .hero__sidebyside-content { position: relative; } .hero__sidebyside-content-inner { align-self: center; flex: 1; padding: 30px; } .hero__sidebyside-image { overflow: hidden; } .hero__sidebyside-image-link { display: block; height: 100%; } .hero__sidebyside-image--indented .hero__image { padding: 30px 30px 0; object-fit: contain; } .hero__sidebyside-image--indented .placeholder-svg { margin: 30px 30px 0; height: calc(100% - 60px); width: calc(100% - 60px); } @media only screen and (max-width: 768px) { .hero__sidebyside { flex-direction: column; } .hero__sidebyside-image { position: relative; flex: 1 1 auto; } .hero__image-wrapper>is-land:first-child, .bobbys-slider .hero__image-wrapper>is-land:first-child { display: none; } .hero__image-wrapper>is-land:last-child { display: block; } .hero__sidebyside-image .hero__image, .hero__sidebyside-image .placeholder-svg { position: absolute; top: 0; left: 0; } .hero__sidebyside-content { flex: 0 1 auto; display: flex; order: 2; } } @media only screen and (min-width: 769px) { .hero__sidebyside-content { flex: 1 1 auto; display: flex; max-width: 40%; } .hero__sidebyside-content-inner { padding: 5vw; } .hero__sidebyside-text--right .hero__sidebyside-content { order: 2; } .hero__sidebyside-text--left .hero__sidebyside-content-inner--indented { padding-right: 0; } .hero__sidebyside-text--right .hero__sidebyside-content-inner--indented { padding-left: 0; } .hero__sidebyside-image { flex: 0 1 60%; } .hero__sidebyside-image--indented .hero__image { padding: 80px; object-position: center right; } .hero__sidebyside-text--right .hero__sidebyside-image--indented .hero__image { object-position: center left; } } .tool-tip-trigger { background: none; border: 0; cursor: pointer; } .tool-tip-trigger__title { display: flex; justify-content: space-between; color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; } .tool-tip-trigger__title:hover, .tool-tip-trigger__title:focus { /*-webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px;*/ } .tool-tip-trigger__content { display: none !important; /* Ensure our content is always hidden */ } /* Size chart trigger */ .size-chart__standalone { padding: 17px 0; border-bottom: 1px solid #E4E4E4; } .size-chart__standalone svg { margin-left: var(--size-chart-icon-margin); width: 24px; height: 24px; } .size-chart { width: 100%; border-collapse: collapse; font-family: Outfit; } .size-chart th, .size-chart td { border: 1px solid #333; padding: 10px; text-align: center; } .size-chart th { background: #fff; color: #141414; text-align: center; font-size: 16px; font-style: normal; font-weight: 800; line-height: normal; } .size-chart th:has(.size-chart-table-header) { text-align: right; } .size-chart td:has(.size-chart-table-header) { text-align: right; } .size-chart .size-chart-table-header { text-align: right; font-size: 16px; font-style: normal; font-weight: 800; line-height: normal; } .size-chart th strong { color: #141414; text-align: right; font-size: 16px; font-style: normal; font-weight: 800; line-height: normal; } .size-chart th small { color: #141414; text-align: right; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .sizing-chart h1 { color: #141414; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 800; line-height: normal; text-transform: uppercase; } [data-tool-tip='size-chart'] .tool-tip__close { border: 0; padding: 6px; position: absolute; top: 16px; right: 16px; transform: translate(25%, -25%); z-index: 2; color: #141414; } [data-tool-tip='size-chart'] .tool-tip__close:hover { color: #141414; background-color: #fff; } tool-tip { display: none; } tool-tip.quick-shop-modal .page-content--product { max-width: 100%; width: 1500px; } /*Ajax page adjustments*/ tool-tip .page-content, tool-tip .page-width { padding: 0; } tool-tip[data-tool-tip-open='true'] { display: flex; justify-content: center; align-items: center; z-index: 10001; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } tool-tip[data-tool-tip-open='true']:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #e0e0e0; background-color: var(--color-modal-bg); animation: overlay-on 0.3s forwards; cursor: pointer; } .tool-tip__inner { animation: modal-close 0.3s forwards; opacity: 0; color: var(--color-text-body); } tool-tip[data-tool-tip-open='true'] .tool-tip__inner { animation: modal-open 0.3s forwards; display: block; position: fixed; background: var(--color-body); box-shadow: 0 10px 20px #00000017; padding: 30px; min-width: 250px; min-height: 250px; border-radius: 12px; } @media only screen and (max-width: 768px) { tool-tip[data-tool-tip-open='true'] .tool-tip__inner { width: calc(100% - 20px); max-width: 500px; } } @media only screen and (min-width: 769px) { .tool-tip__inner { margin: 40px; max-width: calc(100% - 80px); max-height: 90vh; padding: calc(var(--gutter) * 1.5); } .quick-shop-modal .tool-tip__inner { max-width: 1200px; width: calc(100% - 80px); } } .tool-tip__content { max-height: 80vh; overflow: auto; } .quick-shop-modal .tool-tip__content, .quick-add-modal .tool-tip__content { padding: 1rem; } [data-tool-tip='store-availability'] .tool-tip__content { padding: 0; } @media only screen and (max-width: 768px) { .tool-tip__content { font-size: 0.85em; } } .tool-tip__close { position: absolute; top: 0; right: 0; border: 0; padding: 6px; transform: translate(25%, -25%); z-index: 2; transition: transform 0.15s ease-out; } .tool-tip__close:hover { /*transform: translate(25%, -25%) scale(1.08);*/ } .tool-tip__close .icon { width: 28px; height: 28px; } .store-availability { margin-top: var(--gutter); display: flex; justify-content: space-around; } .store-availability .icon { margin: 6px 0 0; width: 12px; height: 12px; } .store-availability .icon-in-stock { fill: var(--success-green); } .store-availability .icon-out-of-stock { fill: var(--error-red); } .store-availability+.store-availability { margin-top: 20px; } .store-availability__info { flex: 0 1 90%; text-align: left; margin-left: 10px; } .store-availability__info>div { margin-bottom: 5px; } .store-availability__info>div:last-child { margin-bottom: 0; } .store-availability__info a { -webkit-text-decoration: underline; text-decoration: underline; } .store-availability__small { font-size: 0.8em; } .store-availability__small a { display: block; margin-top: 10px; } .quick-shop-modal .store-availability__small--link { display: none; } /* * This is the stylesheet entrypoint for the testimonials section. * This file and all its inclusions will be processed through postcss */ .quote-icon { display: block; margin: 0 auto 20px; } .testimonial-stars { display: block; font-size: 16px; letter-spacing: 0.2em; margin-bottom: 10px; } @media only screen and (min-width: 769px) { .testimonial-stars { font-size: 18px; margin-bottom: 15px; } } .testimonials-slide { display: none; opacity: 0; padding: 0 0 55px; width: 33%; /*Hide all but first slide to prevent page reflows prior to init*/ } .testimonials-slide:first-child { display: block; } .flickity-slider .testimonials-slide { display: block; opacity: 1; } .testimonials-slide .testimonials-slider__text { transform: scale(0.95); transition: transform 0.5s ease, box-shadow 0.5s ease; } .testimonials-slide.is-selected .testimonials-slider__text { transform: scale(1.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; } @media only screen and (max-width: 768px) { .testimonials-slide { width: 100%; padding: 0 0 25px; } .testimonials-slide .testimonials-slider__text { transform: scale(0.86); } .testimonials-slide.is-selected .testimonials-slider__text { transform: scale(1); } } .testimonials-slider__text { margin: 0 30px; padding: 30px calc(var(--gutter) / 2); background: var(--color-body); color: var(--color-text-body); margin-bottom: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .testimonials-slider__text { margin: 0; padding: 30px; margin-bottom: 0; } } .testimonials-slider__text cite { font-style: normal; font-weight: var(--type-header-weight); } @media only screen and (min-width: 769px) { .testimonials-slider__text cite { font-size: calc(var(--type-base-size) + 1px); } } .testimonials-slider__text p { margin-bottom: calc(var(--gutter) / 4); } .testimonials-slider__text p+cite { margin-top: 0; } .testimonials__info { font-size: calc(var(--type-base-size) - 1px); } :root { testimonial-image-size: 142px; testimonial-image-size-round: 65px; } .testimonial-image { max-width: var(testimonial-image-size); background-color: var(--color-body); } .text-right .testimonial-image { margin-left: auto; } .text-center .testimonial-image { margin-left: auto; margin-right: auto; } .testimonial-image .image-wrap { background: none; width: 100%; height: 100%; } .testimonial-image--round { width: var(testimonial-image-size-round); height: var(testimonial-image-size-round); max-width: none; border-radius: var(testimonial-image-size-round); /*fix animation bug in Safari*/ } .testimonial-image--round img { overflow: hidden; border-radius: var(testimonial-image-size-round); height: 100%; } .testimonials-section { display: block; padding: var(--index-section-padding) 0; } .testimonials-section .flickity-page-dots { bottom: 0; } .feature-row-wrapper { overflow: hidden; direction: ltr; } .feature-row { margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } @media (--widescreen) { .feature-row { margin: 0 6%; } } @media only screen and (max-width: 768px) { .feature-row { flex-direction: column; margin: 0; } } @media only screen and (max-width: 959px) { .feature-row--small-none { display: block; } } .feature-row__item { flex: 0 1 57%; margin: 0 auto; } @media only screen and (max-width: 768px) { .feature-row__item { flex: 1 1 auto; max-width: 100%; min-width: 100%; } } .feature-row__image { display: block; margin: 0 auto; order: 1; } @media only screen and (min-width: 769px) { .feature-row__image { order: 2; } } .feature-row__text { padding: 0; } @media only screen and (max-width: 768px) { .feature-row__text { order: 2; margin-top: 0; padding: 30px 20px 0; padding-bottom: 0; /*always last element on mobile*/ } } .feature-row__text .rte { margin: 0; } .feature-row__text .btn { margin-top: calc(var(--gutter) / 2); } @media only screen and (min-width: 769px) { .feature-row__text--left { padding-left: calc(var(--gutter) * 2); padding-right: 20px; } .feature-row__text--right { padding-right: calc(var(--gutter) * 2); padding-left: 20px; } } .feature-row__item--overlap-images { display: flex; justify-content: space-between; align-items: center; padding: 0 0 15px; margin: 0 0 0 -30px; } @media only screen and (min-width: 769px) { .feature-row__item--overlap-images { padding: 50px 0; margin: 0 auto; } } .feature-row__item--overlap-images>*:first-child { z-index: 1; transform: translate(30px, 30px); } @media only screen and (min-width: 769px) { .feature-row__item--overlap-images>*:first-child { transform: translate(50px, 50px); } } .feature-row__item--overlap-images svg { border: 2px solid; border-color: var(--color-body); } .feature-row__item--overlap-images .feature-row__first-image { width: 55%; } .feature-row__item--overlap-images .feature-row__second-image { width: 60%; } .feature-row__item--placeholder-images .placeholder-image-wrap { width: 50%; } .feature-row-wrapper .feature-row__images { width: 100%; min-width: 0; } @media only screen and (max-width: 959px) { .feature-row-wrapper .feature-row__images { padding-top: 30px; } } .feature-row-wrapper .feature-row__text { width: 100%; min-width: 0; } @media only screen and (min-width: 769px) { .feature-row-wrapper .feature-row__text { min-width: 43%; flex: 0 1 43%; } } .feature-row--33 .feature-row__images { max-width: 50%; } @media only screen and (min-width: 769px) { .feature-row--33 .feature-row__images { max-width: none; flex: 0 1 33.333%; } } .feature-row--50 .feature-row__images { max-width: 100%; padding-right: 20px; padding-left: 20px; } @media only screen and (min-width: 769px) { .feature-row--50 .feature-row__images { max-width: none; flex: 0 1 50%; padding-right: 0; padding-left: 0; } } .feature-row--66 .feature-row__images { max-width: 100%; padding-right: 20px; padding-left: 20px; } @media only screen and (min-width: 769px) { .feature-row--66 .feature-row__images { max-width: none; flex: 0 1 66.666%; padding-right: 0; padding-left: 0; } } /* Shared styles */ .text-with-icons__blocks { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -10px; margin-right: -10px; margin-top: min(6.75vw, 128px); margin-bottom: min(5.2vw, 102px); } @media only screen and (max-width: 768px) { .text-with-icons__blocks { flex-direction: column; margin: 0; } } .has-1-per-row .text-with-icons__block { width: 100%; } .has-2-per-row .text-with-icons__block { width: 50%; } .has-3-per-row .text-with-icons__block { width: 33.333%; } .has-4-per-row .text-with-icons__block { width: 25%; } .has-5-per-row .text-with-icons__block { width: 20%; } .text-with-icons__blocks .text-with-icons__block { display: flex; flex-direction: column; flex: none; padding: 30px; } @media only screen and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block { width: 100%; padding: 0 0 60px; } } .text-with-icons__block-icon { display: block; margin-bottom: 24px; } .text-with-icons__block-icon .icon { width: 70px; height: 70px; } .text-with-icons .text-with-icons__block-title h3 { margin-bottom: 4px; } @media only screen and (max-width: 768px) { .text-with-icons__block-icon .icon { width: 60px; height: 60px; } } .text-with-icons__button { display: flex; justify-content: center; } /* Expanse specific styles */ .text-with-icons { margin-bottom: -22px; } .text-with-icons__blocks .text-with-icons__block { padding: 0 22px 22px; } @media only screen and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block { padding: 0 0 22px; } } .text-with-icons__button { padding-bottom: 20px; } .toolbar { position: relative; background: var(--color-toolbar); color: var(--color-toolbar-text); font-size: calc(var(--type-base-size) * 0.85); } .toolbar a { color: var(--color-toolbar-text); } .is-light .toolbar { background-color: transparent; color: var(--color-sticky-nav-links); } .is-light .toolbar a { color: var(--color-sticky-nav-links); } .toolbar:after { position: absolute; left: 0; right: 0; bottom: 0; content: ''; display: block; border-bottom: 1px solid; border-bottom-color: var(--color-toolbar-text); width: 100%; opacity: 0.15; } .is-light .toolbar:after { border-color: var(--color-sticky-nav-links); } .toolbar__content { display: flex; justify-content: flex-end; align-items: center; } .toolbar__item { flex: 0 1 auto; padding: 0 5px; } .toolbar__item:first-child { padding-left: 0; } .toolbar__item:last-child { padding-right: 0; } .toolbar__item select, .toolbar__item .faux-select { font-size: 14px; padding-top: 5px; padding-bottom: 5px; padding-left: 0; border: 0; background: transparent; color: currentColor; } .toolbar__item--announcements { flex: 1 1 auto; } .toolbar__social { text-align: right; } .toolbar__social a { display: block; padding: 5px; } .toolbar__social .icon { position: relative; vertical-align: middle; width: 16px; height: 16px; } .social-sharing__title { font-size: calc(var(--type-base-size) * 0.85); display: inline-block; vertical-align: middle; padding-right: 15px; padding-left: 3px; } .footer__social { margin: 0; } form+.footer__social { margin-top: var(--gutter); } .footer__social li { display: inline-block; margin: 0 15px 15px 0; } .footer__social a { display: block; } .footer__social .icon { width: 21px; height: 21px; } .footer__social .icon.icon--wide { width: 40px; } .social-sharing { display: inline-flex; flex-wrap: wrap; gap: 10px 20px; } .social-sharing .icon { height: 18px; width: 18px; } .blog-layout__sidebar .social-sharing { margin-bottom: 40px; } .social-sharing__link { display: inline-block; color: var(--color-text-body); border-radius: 2px; margin: 0 18px 0 0; -webkit-text-decoration: none; text-decoration: none; font-weight: normal; } .social-sharing__link:last-child { margin-right: 0; } .variant__label-info { /*undo accent stack styles*/ text-transform: none; font-weight: normal; letter-spacing: 0; } :root { --label-bottom-margin: 12px; } .variant-button-wrap { border: 0; padding: 0; margin: 0 0 -6px; position: relative; } .variant-button-wrap label { position: relative; display: inline-block; padding: 17px 0; margin: 0 7px 0 0; background-color: #FAFAFA; color: #141414; box-shadow: 0 0 0 1px var(--color-border); border-radius: 1px; overflow: hidden; text-align: center; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; border-radius: 4px; width: 54px; height: 50px; } .gift-cart-product-page .variant-button-wrap label { width: 92.5px; background-color: rgba(255, 255, 255, 1); margin: 0 6px 0 0; } .gift-cart-product-page .variant-button-wrap input[type='radio']:checked+label { border: 2px solid rgba(20, 20, 20, 1); background-color: rgba(255, 255, 255, 1); box-shadow: none; color: rgba(20, 20, 20, 1); } .variant-button-wrap label:last-child { margin-right: 2px; } .variant-button-wrap label[data-color-swatch] { padding: 0; background-color: var(--swatch-bg-color); background-image: var(--swatch-bg-image); } .variant-button-wrap input[type='radio']:focus+label { box-shadow: 0 0 0 1px var(--color-text-body); outline: 2px auto Highlight; outline: 2px auto -webkit-focus-ring-color; outline-offset: 1px; } .variant-button-wrap input[type='radio']:checked+label { box-shadow: 0 0 0 2px var(--color-text-body); background-color: #141414; color: #FFF; } .variant-button-wrap input[data-disabled]+label { color: #141414; } .variant-button-wrap input[data-disabled]+label:after { position: absolute; content: ''; left: 50%; top: 0; bottom: 0; border-left: 2px solid; transform: rotate(45deg); } .variant-button-wrap .variant__label, .variant-button-wrap .variant__label[for] { display: block; margin-bottom: 12px; cursor: default; color: #141414; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal; } .sticky-bar__controls .product-block.block-buy-buttons { margin-top: 0; margin-bottom: 0; } .sticky-bar__controls .product-block { margin-bottom: 0; } section:has(.sticky-bar) { position: fixed; width: 100%; top: auto; bottom: 0; background-color: white; padding: 10px 0; z-index: 2; } .gift-cart-product-page .product-grid__container .js-qty__adjust { padding: 0 17px; } .gift-cart-product-page .product-grid__container .js-qty__num { padding: 15px 30px; } @media only screen and (max-width: 768px) { .variant-button-wrap .variant__label { margin-bottom: 10px; text-align: right; } .product-single__meta { padding: 0; } .variant-button-wrap label { padding: 9px 0; flex: 1 0 34px; min-width: 34px; width: auto; height: 36px; margin: 0; } .product-options-row .block-variant-picker { width: calc(100% - 87px - 20px); } .gift-cart-product-page .product-grid__container .js-qty__num { max-width: 87px; padding: 15px 10px; height: 41px; } .gift-cart-product-page .product-grid__container .js-qty__adjust { padding: 0 5px; } .gift-cart-product-page .product-grid__container .variant-button-wrap { flex-wrap: wrap; justify-content: flex-end; } .product-options-row { flex-direction: row-reverse; } .variant-button-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; } legend.variant-button-wrap .variant__label { width: 100%; } .js-qty__wrapper { max-width: 120px; } .js-qty__num { height: 36px; font-size: 12px; } .variant-button-wrap input[type='radio']:checked+label { box-shadow: none; } .product-block.block-buy-buttons button { height: 41px; min-height: 41px; } .shopify-payment-button { margin-top: 8px; } tool-tip[data-tool-tip-open='true'] .tool-tip__inner { padding: 16px; } .size-chart th small { font-size: 14px; } .sizing-chart h1 { font-size: 16px; } .size-chart th { font-size: 14px; } .size-chart th:not(:first-child) { width: 34px; padding: 0; height: 52px; } .sticky-bar .sticky-bar__inner .sticky-bar__controls { flex-wrap: wrap; justify-content: space-between !important; gap: 10px; padding-bottom: 10px; } .sticky-bar__controls .product-block:has(div.product__quantity) { flex: 0; } .sticky-bar__controls .product-block.block-buy-buttons { width: 100%; } .gift-cart-product-page .variant-button-wrap label { min-width: 56.5px; width: 100%; max-width: 56.5px; height: 40px; padding: 14px 0 10px; font-size: 10px; margin: 0; } .variant-button-wrap input[type='radio']:checked+label { padding: 12px 0; } .gift-cart-product-page .product-block-custom h5, .gift-cart-product-page .product-block-custom li { font-size: 14px; line-height: 1.5; } } .variant-wrapper+.variant-wrapper { margin-top: var(--size-6) } video-media { --default-aspect-ratio: 16 / 9; display: block; position: relative; height: 100%; aspect-ratio: var(--aspect-ratio, var(--default-aspect-ratio)); } video-media>video, video-media>iframe, video-media>img, video-media>svg { border-radius: inherit; width: 100%; height: 100%; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; } video-media>img, video-media>svg, video-media>video:not(:fullscreen) { object-fit: cover; object-position: center; } .video-media[data-background='true']>video-media { position: absolute; height: 100%; width: 100%; } video-media:not([loaded])>video, video-media:not([loaded])>iframe, video-media[loaded]>img, video-media[loaded]>svg { visibility: hidden; opacity: 0; } /* Last Chance Header Styling*/ .last-chance-header-section { min-height: 300px; background: #FF3030; display: flex; justify-content: center; } .last-chance-header-section .page-width { display: flex; justify-content: center; align-content: center; position: relative; left: -10%; } h2.last-chance-heading { color: #FFF; font-family: Outfit; font-size: 70px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: 3.5px; text-transform: uppercase; margin-top: 72px; margin-left: 70px; } @media only screen and (max-width: 768px) { h2.last-chance-heading { color: #FFF; font-family: Outfit; font-size: 30px; font-style: normal; font-weight: 900; line-height: 105%; text-transform: uppercase; letter-spacing: 0; max-width: 133px; margin: 26px 0 0 26px; } .last-chance-header-section { min-height: 101px; max-height: 101px; overflow: hidden; justify-content: flex-start; } .last-chance-header-graphic { width: 79px; } .last-chance-header-section .page-width { margin: 0; left: 0; } } @media only screen and (min-width: 769px) and (max-width: 982px) { .last-chance-header-section .page-width { left: -18%; } h2.last-chance-heading { font-size: 43px; margin-top: 110px; margin-left: 35px; } } @media only screen and (min-width: 983px) and (max-width: 1300px) { h2.last-chance-heading { margin-left: 30px; } } /* Contact Us Page Styling*/ .contact-form-header-section { min-height: 381px; background: #FF3030; display: flex; justify-content: center; } .contact-form-header-section .page-width { display: flex; justify-content: center; align-content: center; position: relative; left: -10%; } .contact-form-wrapper { background: url("https://retrokid-testing.myshopify.com/cdn/shop/files/contact-us-bg.png?v=1749051933"); background-size: cover; background-position: top center; background-repeat: no-repeat; margin-bottom: -50px; } @media (max-width: 1100px) { .contact-form-wrapper { min-height: 700px; max-height: 800px; } } h2.contact-form-heading { color: #FFF; font-family: Outfit; font-size: 70px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: 3.5px; text-transform: uppercase; margin-top: 72px; margin-left: 70px; } .contact-form-wrapper form-embed { width: 769px; margin: auto; top: -218px; position: relative; } @media only screen and (max-width: 768px) { .contact-form-wrapper { max-height: 558px; } .contact-form-wrapper form-embed { width: 100%; } h2.contact-form-heading { color: #FFF; font-family: Outfit; font-size: 30px; font-style: normal; font-weight: 900; line-height: 105%; /* 31.5px */ text-transform: uppercase; margin: auto; letter-spacing: 0; } .contact-form-header-section { min-height: 134px; } .contact-form-wrapper form-embed { top: -62px; } .contact-header-graphic { width: 120px; } } @media only screen and (min-width: 769px) and (max-width: 982px) { .contact-form-header-section .page-width { left: -18%; } h2.contact-form-heading { font-size: 43px; margin-top: 110px; margin-left: 35px; } } @media only screen and (min-width: 983px) and (max-width: 1300px) { h2.contact-form-heading { margin-left: 30px; } .site-nav__dropdown { padding-left: 90px; } } /* ----------FAQ Header Styling - START ----------*/ .faq-header-section { min-height: 300px; background: #FF3030; display: flex; justify-content: center; } .faq-header-section .page-width { display: flex; justify-content: flex-start; position: relative; max-width: 1380px; width: 100%; } h2.faq-heading { color: #FFF; font-family: Outfit; font-size: 70px; font-style: normal; font-weight: 900; line-height: 1.04; letter-spacing: 3.5px; text-transform: uppercase; margin-top: 51px; margin-left: 44px; max-width: 750px; } .faq-header-graphic img { min-width: 303px; max-width: 303px; height: 300px; } @media only screen and (max-width: 768px) { h2.faq-heading { color: #FFF; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 900; line-height: 105%; text-transform: uppercase; margin-top: 12px; margin-left: 9px; letter-spacing: 0; } .faq-header-section { min-height: 83px; max-height: 83px; overflow: hidden; } .faq-graphic { width: 120px; } } @media only screen and (min-width: 769px) and (max-width: 982px) { .faq-header-section .page-width { left: -18%; } h2.faq-heading { font-size: 43px; margin-top: 110px; margin-left: 35px; } } @media only screen and (min-width: 983px) and (max-width: 1300px) { h2.faq-heading { margin-left: 30px; } } /* ----------FAQ Header Styling - END ----------*/ /* ----------FAQ Tabs Styling - START ----------*/ .faq-tabs__nav { display: flex; width: 100%; flex-wrap: wrap; gap: 6px; margin-bottom: 38px; } .tab { flex: 1 1 0; text-align: center; background: none; border: none; font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: 0; padding-bottom: 0.5rem; border-bottom: 3px solid transparent; cursor: pointer; } .faq-tabs__nav .tab { color: rgba(123, 123, 123, 1); } .tab.active { border-color: #FF3333; color: #FF3333; } .tab-content { display: none; } .tab-content.active { display: block; } .accordion-item { border-top: 1px solid #D4D4D4; margin-bottom: 0.5rem; } .accordion-wrapper .accordion-item:first-child { border-top: none; } .accordion-question { display: flex; justify-content: space-between; width: 100%; background: none; border: none; font-weight: 600; width: 100%; text-align: left; padding: 16px 29px 20px; font-size: 20px; letter-spacing: 0; cursor: pointer; position: relative; z-index: 1; } .accordion-answer { /* display: none; */ opacity: 0; padding: 0 29px; letter-spacing: 0; height: 0; transition-duration: .1s; transition-timing-function: ease-in-out; } .accordion-item.active .accordion-answer { /* display: block; */ padding: 0.5rem 29px 1rem; opacity: 1; height: 100%; font-weight: 400; color: rgba(74, 74, 74, 1); } .faq-tabs-section { background-image: url('https://cdn.shopify.com/s/files/1/0916/2742/2005/files/faq-bg.png?v=1752686203'); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 0 1rem 4.5rem; } .faq-tabs__container { background-color: white; max-width: 1366px; margin: 0 auto; padding: 61px 80px 67px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); top: -48px; position: relative; } .accordion-item:not(:first-child) { padding-top: 21px; } .accordion-item.active .accordion-question__icon svg { transform: rotate(180deg); } @media only screen and (min-width: 768px) { .faq-tabs__dropdown { display: none; } } @media only screen and (max-width: 1440px) { .faq-tabs__container { padding: 45px 28px 30px; } } @media only screen and (max-width: 768px) { .faq-tabs__nav { display: none; } .faq-header-graphic img { min-width: 111px; height: 110px; margin-left: -13px; margin-top: -13px; } .faq-tabs__container { top: 0; padding: 26px 16px 34px; } .faq-tabs-section { padding: 12px 24px 32px; } .faq-tabs__mobile-heading { width: 100%; text-align: center; font-weight: 900; font-size: 18px; letter-spacing: 0; line-height: 1; text-transform: uppercase; } #faq-tabs-select { width: 100%; height: 50px; border-radius: 8px; font-family: Outfit; font-weight: 900; font-size: 14px; line-height: 1; letter-spacing: 0; text-transform: uppercase; padding-left: 10px; padding-right: 23px; color: rgba(255, 51, 51, 1); } .accordion-question, .accordion-answer { font-size: 14px; } .accordion-question { padding: 3px 14px; line-height: 1.25; } .accordion-item.active .accordion-answer { padding: 0.5rem 13px 0.5rem; line-height: 1.5; } .faq-tabs__content { margin-top: 33px; } .accordion-item { margin-bottom: 7px; } .accordion-item:not(:first-child) { padding-top: 20px; } .accordion-question__text { padding-right: 5px; } } /* ----------FAQ Tabs Styling - END ----------*/ /*----------Home Page - About Us Section - START----------*/ .index-section:has(.home-page-about-us-section) { margin: 0; padding: 0; } .home-page-about-us-section { background-image: url('https://cdn.shopify.com/s/files/1/0916/2742/2005/files/image_5.png?v=1752067583'); /*background-image: url("https://cdn.shopify.com/s/files/1/0916/2742/2005/files/home-about-us.png?v=1750965062");*/ background-size: cover; background-position: center; justify-content: center; margin: 0; padding-top: 60px; } .home-page-about-us-section .custom__item { margin: 0; padding: 0; } .home-page-about-us-section p { color: #FFF; font-family: Outfit; font-size: 28px; font-style: normal; font-weight: 300; line-height: 120%; margin-bottom: 16px; } .home-page-about-us-section span { color: #FFF; text-align: center; font-family: Outfit; font-size: 28px; font-style: normal; font-weight: 500; line-height: normal; display: block; } .home-page-about-us-section span.home-about-us-whoweare { font-weight: 400; } .home-page-about-us-section a { display: inline-block; justify-content: center; text-decoration: none !important; color: #FFF; border-radius: 8px; border: 1px solid #FFF; padding: 16px 90px; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-top: 40px; } .home-page-about-us-section .image-wrap { background: transparent; width: 249px; height: 46px; } .home-page-about-us-section .custom__item-inner--image { display: flex; justify-content: center; } .home-page-about-us-section .custom__item-inner--liquid { display: flex; justify-content: center; align-items: center; text-align: center; padding: 32px 0 50px 0; position: relative; } .home-page-about-us-section .rte.clearfix { max-width: 60%; margin: 0 auto; text-align: center; } /*Home Page - About Us Section - END*/ /* Existing CSS */ .section-home-customer-testimonials { background: #fafafa; padding: 40px 0; } .section-home-customer-testimonials .testimonial-text, .section-home-customer-testimonials .testimonial-author { font-size: 13px; font-weight: 300; font-family: Outfit; color: #141414; } .section-home-customer-testimonials .testimonial-text P { margin-bottom: 5px; font-size: 14px; letter-spacing: 0; line-height: 1.3; } .shopify-section:has(customer-testimonials-slider) { margin-bottom: -60px; } .flickity-page-dots li:first-child:last-child { display: none; } .section-home-customer-testimonials .testimonial-author { font-weight: 600; } .section-home-customer-testimonials H2 { text-align: center; font-family: Outfit; font-size: 40px; color: #141414; margin-bottom: 36px; } .block-price__sale.product__price span:has(s) { margin-top: -4px; } .block-price__sale.product__price s { font-size: 20px; color: #646464; } .grid-item.grid-product.grid-product-image-breathing-room--true { width: calc(90% / 4 + 6px); } @media(max-width: 1024px) { .grid-item.grid-product.grid-product-image-breathing-room--true { width: calc(90% / 3); } } @media(max-width: 768px) { .grid-item.grid-product.grid-product-image-breathing-room--true { width: calc(90% / 2); } } .grid-item.grid-product.grid-product-image-breathing-room--true>div { width: 100%; } /* Original grid layout for desktop */ @media screen and (min-width: 769px) { /* Adjust breakpoint to match JS */ .section-home-customer-testimonials .testimonials-grid { /*display:flex;*/ justify-content: space-between; gap: 24px; /*margin-top:calc(40px + 50px);*/ } /*.section-home-customer-testimonials .testimonials-grid .testimonial-item {*/ /* flex-basis: ca\lc(33.33% - (24px * 2 / 3)); !* Adjust for 3 columns with gap *!*/ /* max-width: calc(33.33% - (24px * 2 / 3));*/ /* !* Reset Flickity specific widths on desktop *!*/ /* width: auto !important; !* Override Flickity's inline width *!*/ /* margin-left: 0 !important; !* Override Flickity's inline margin *!*/ /*}*/ } .section-home-customer-testimonials .testimonials-grid { max-width: 1400px; margin: 0 auto; padding-left: 7px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap { padding-top: 50px; width: calc(100% / 3 - 16px); /* 3 columns with gap */ } .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap:not(:last-child) { margin-right: 24px; } @media(max-width: 1024px) { .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap { width: calc(100% / 2 - 12px); /* 2 columns with gap */ } } @media(max-width: 768px) { .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap { width: calc(80% - 10px); } .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap:not(:last-child), .section-home-customer-testimonials .testimonials-grid .testimonial-item-wrap:last-child { margin-right: 20px; } .footer__newsletter .newsletter__input-group input { width: 180px; } .block-price__sale.product__price span:has(s) { margin-top: -1px; } .block-price__sale.product__price s { font-size: 12px; color: #646464; } } .section-home-customer-testimonials .testimonials-grid .testimonial-item { background: #fff; position: relative; padding: 24px 32px; text-align: center; border-radius: 15px; padding-top: 50px; display: flex; justify-content: center; align-content: center; align-items: center; flex-direction: column; /* max-width: 400px; */ } .section-home-customer-testimonials .testimonials-grid .testimonial-item .home-testimonial-image { margin-top: -99px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .home-testimonial-image IMG { border-radius: 50px; border: 2px #ff3333 solid; width: 100px; /* Ensure images are 100x100 */ height: 100px; object-fit: cover; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .testimonial-stars { display: flex; justify-content: center; gap: 0px; margin-bottom: 0; margin-top: 14px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .star.filled { font-size: 24px; color: #FF3333; line-height: 1; } /* Flickity Specific Styles for Mobile (adjust breakpoint to match JS) */ @media screen and (max-width: 768px) { .section-home-customer-testimonials H2 { font-size: 20px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .home-testimonial-image { margin-top: -82px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .home-testimonial-image IMG { width: 66px; height: 66px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .testimonial-stars { margin-top: 6px; } .section-home-customer-testimonials .testimonials-grid .testimonial-item .star.filled { font-size: 19px; } .section-home-customer-testimonials .testimonial-text P { font-size: 12px; padding: 0 7px; } .section-home-customer-testimonials .testimonial-text { margin-top: 10px; } .section-home-customer-testimonials .testimonial-author { font-size: 12px; margin-top: 8px; } .section-home-customer-testimonials { padding-bottom: 80px; } .section-home-customer-testimonials .flickity-viewport { /*padding:50px 0*/ } .section-home-customer-testimonials .testimonials-grid { /* Flickity will handle display, so remove flex for mobile */ display: block; /* Important: Override your flex for Flickity */ margin-top: 2px; /* Keep margin consistent */ } .section-home-customer-testimonials H2 { margin-bottom: 0; } /* Flickity dots styling */ .flickity-page-dots { bottom: -30px; /* Adjust position as needed */ margin-top: 20px; /* Space between content and dots */ } .flickity-page-dots .dot, .flickity-page-dots .dot.is-selected { background: #ccc; /* Inactive dot color */ opacity: 0.5; width: 6px; height: 6px; margin: 0 3px; } .flickity-page-dots .dot.is-selected { background: #FF3333; /* Active dot color */ opacity: 1; } } @media only screen and (max-width: 768px) { .home-page-about-us-section { background-image: url("https://cdn.shopify.com/s/files/1/0916/2742/2005/files/home-about-us-mobile.png?v=1751030338"); padding-top: 42px; } .home-page-about-us-section .image-wrap { width: 171px; height: 31px; } .home-page-about-us-section .rte.clearfix { max-width: 73%; } .home-page-about-us-section p { text-align: center; font-size: 14px; font-style: normal; font-weight: 300; line-height: 120%; } .home-page-about-us-section span { text-align: center; font-size: 14px; font-style: normal; font-weight: 600; line-height: normal; } .home-page-about-us-section span.home-about-us-whoweare { margin-top: 12px; } .home-page-about-us-section a { padding: 12px 57px; } } /*----------Home Page - About Us Section - END----------*/ /*----------Home Page - 4x Sales Points Section - START----------*/ .text-with-icons .text-with-icons__block-title h3 { color: #F33; text-align: center; font-family: Outfit; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; } .text-with-icons .text-with-icons__block-text p { color: #141414; text-align: center; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; } @media only screen and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block { display: flex; flex-direction: row; gap: 20px; } .text-with-icons__blocks .text-with-icons__block .text-with-icons__block-icon svg { height: 40px; width: 45px; } .text-with-icons__block-content { display: flex; flex-direction: column; justify-content: center; } .text-with-icons .text-with-icons__block-title h3 { text-wrap: nowrap; text-align: left; font-size: 16px; margin-bottom: 2px; } .text-with-icons .text-with-icons__block-text p { text-wrap: nowrap; text-align: left; font-size: 12px; } } /* @media only screen and (min-width: 420px) and (max-width: 768px) { .text-with-icons__blocks .text-with-icons__block{ justify-content: space-evenly; } } */ /*----------Home Page - 4x Sales Points Section - END----------*/ /*----------Home Page - Bobby's World Section - START----------*/ .bobbys-slider, .bobbys-slider .slideshow-wrapper { min-height: 400px; } .bobbys-slider .slideshow-wrapper .hero { overflow: visible; } .bobbys-slider .slideshow-wrapper .flickity-page-dots { position: relative; bottom: auto; margin-top: 22px; } .bobbys-slider .slideshow-wrapper is-land { display: flex; height: 100%; } .bobbys-slider .horizontal-right .hero__text-shadow { margin-right: 4.3vw; margin-top: -1.8%; } .bobbys-slider .horizontal-right .hero__text-shadow h2 { line-height: 1.25; letter-spacing: 0; } .bobbys-slider .hero__text-content .hero__link { margin-top: 20px; } .homepage-slider .flickity-page-dots { bottom: 32px; } .bobbys-slider .slideshow-wrapper .flickity-page-dots .dot:not(.is-selected) { background-color: #E6E6E6; border: 0; } .bobbys-slider .slideshow-wrapper .hero__text-wrap .hero__link a { border-radius: 8px; color: #FF3333 !important; text-align: center; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 700; line-height: 140%; text-transform: uppercase; padding: 17px 20px; box-shadow: 0px 101px 28px 0px rgba(0, 0, 0, 0.00), 0px 65px 26px 0px rgba(0, 0, 0, 0.01), 0px 36px 22px 0px rgba(0, 0, 0, 0.05), 0px 16px 16px 0px rgba(0, 0, 0, 0.09), 0px 4px 9px 0px rgba(0, 0, 0, 0.10); } .homepage-slider .slideshow-wrapper { overflow: hidden; } .homepage-slider is-land { display: flex; height: 100%; } .cart-recommendations .cart__suggestions-heading { font-size: 16px; font-weight: 600; line-height: 1.1; } .cart__suggestions-list { display: flex; flex-direction: column; gap: 16px; } .cart__suggestion-item { display: flex; width: 100%; gap: 8px; } .cart__suggestion-item>a { width: 104px; height: 104px; border-radius: 4px; } .cart__suggestion-item-right { display: flex; flex-direction: column; width: calc(100% - 104px - 8px); } .cart__suggestion-title { display: block; font-weight: 400; font-size: 11px; line-height: 18px; letter-spacing: 0; margin-bottom: 12px; } .cart__suggestion-details-info { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; } .cart__suggestion-price { font-weight: 500; font-size: 12px; margin-bottom: 0; } .cart__suggestion-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; } .cart__suggestion-actions .cart__item-quantity { height: 23px; } .cart__suggestion-actions .js-qty__num { width: 61px; height: 23px; padding: 8px 0; font-size: 14px; } .cart__suggestion-actions .js-qty__adjust { display: flex; justify-content: center; align-items: center; background-color: #141414; color: #ffffff; width: 20px; height: 23px; padding: 8px 0; } .cart__suggestion-actions .js-qty__adjust--minus { border-radius: 4px 0 0 4px; } .cart__suggestion-actions .js-qty__adjust--plus { border-radius: 0px 4px 4px 0px; } .cart__suggestion-actions .js-qty__adjust svg { width: 8px; height: 8px; } .cart__suggestion-actions>button.btn { display: flex; justify-content: center; align-items: center; gap: 6px; background-color: #FF3333; color: #ffffff; border-radius: 4px; width: 73px; height: 23px; border: 0; padding: 0; font-size: 12px; font-weight: 500; } .cart__suggestion-actions>button.btn svg { width: 10px; height: 10px; stroke-width: 10px; } @media only screen and (max-width: 768px) { .site-header__cart .cart__item { grid-template-columns: 87px auto auto; } .cart__image a { height: 87px; } .cart__suggestion-item>a { width: 87px; height: 87px; } .cart__benefits { align-items: flex-start; padding-left: 32px; } .cart__benefits-item:nth-child(1), .cart__benefits-item:nth-child(2), .cart__benefits-item:nth-child(3) { width: 100%; } } @media only screen and (max-width: 1300px) { .flickity-prev-next-button, .flickity-prev-prev-button { width: 28px; height: 31px; padding: 10px !important; } .homepage-slider .flickity-prev-next-button, .homepage-slider .flickity-prev-prev-button { top: 54% !important; } } /* Add to Cart Sticky Header on Product Page - START*/ .sticky-bar .sticky-bar__inner .sticky-bar__controls { display: flex; justify-content: space-between; align-items: flex-end; gap: 5px; margin-top: 20px; } .sticky-bar.page-width { max-width: 1480px; } .sticky-bar__controls .product-block.block-buy-buttons { max-width: 580px; width: 100%; } .sticky-bar__controls .variant-button-wrap { display: flex; align-items: center; margin-bottom: 0; } .sticky-bar__controls .variant-button-wrap .variant__label { display: inline; margin-bottom: 0; margin-right: 16px; } .sticky-bar__controls .variant-button-wrap label { margin-right: 10px; } @media only screen and (max-width: 1300px) { .sticky-bar__controls .product-block.block-buy-buttons { max-width: none; width: max-content; } } @media only screen and (max-width: 768px) { .sticky-bar__controls .variant-button-wrap { flex-wrap: wrap; justify-content: flex-end; margin-top: -25px; } .sticky-bar__controls .variant-button-wrap .variant__label { display: block; width: 100%; text-align: right; margin-right: 3px; } .sticky-bar__controls .js-qty__wrapper { min-width: 100px; } .sticky-bar__controls .product-block:has(div.product__quantity) { width: 100px; } .sticky-bar__controls .product-block.block-buy-buttons { width: 100%; grid-column: 1 / -1; } .sticky-bar__controls .product-block.block-buy-buttons form { max-width: 450px; margin: 16px auto 0; } .sticky-bar__controls .variant-button-wrap label { margin-right: 4px; min-width: 33px; max-width: 33px; } .variant-button-wrap .variant__label { width: 100%; } } /* Add to Cart Sticky Header on Product Page - END*/ @media only screen and (max-width: 768px) { .homepage-slider .flickity-page-dots { bottom: 12px; } .bobbys-slider, .bobbys-slider .slideshow-wrapper { min-height: 200px; } .bobbys-slider .slideshow-wrapper .flickity-page-dots { margin-top: 16px; } .bobbys-slider .slideshow-wrapper .flickity-page-dots .dot { width: 8px; height: 8px; } .bobbys-slider .slideshow-wrapper .hero__text-wrap .hero__link a { padding: 10px 16px; } .bobbys-slider .slideshow-wrapper .hero__text-wrap .hero__text-shadow h2 { line-height: 130%; } .bobbys-slider .horizontal-right .hero__text-shadow { margin-right: 0; margin-top: 0; } .homepage-slider .slideshow-wrapper>div { min-height: 260px; } .sticky-bar .sticky-bar__inner .sticky-bar__controls { display: grid; grid-template-columns: 30% 70%; grid-template-rows: auto auto; gap: 10px; } } /*----------Home Page - Bobby's World Section - END----------*/ /*----------Predictive Search Styling - START---------- */ .popular-search-terms { padding: 24px; } .popular-search-terms h3 { text-transform: uppercase; font-size: 20px; font-style: normal; font-weight: 900; line-height: 100%; letter-spacing: normal; margin-bottom: 16px; padding-bottom: 6px; } .popular-search-terms ul { margin: 0; display: flex; flex-direction: column; gap: 12px; } .popular-search-terms li { color: #141414; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .popular-search-terms li a { display: block; } @media only screen and (max-width: 768px) { .popular-search-terms h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; } .popular-search-terms li { font-size: 14px; } } /*----------Predictive Search Styling - END---------- */ /*----------How it Works - START---------- */ .how-it-works-inline { text-align: center; margin-bottom: 24px; } .how-it-works__title { color: #F33; text-align: center; font-family: Outfit; font-size: 24px; font-style: normal; font-weight: 600; line-height: 36px; margin-bottom: 16px; } .how-it-works__steps { display: flex; flex-wrap: wrap; gap: 23px; justify-content: center; } .how-it-works__step { background: #FFE3E3; border-radius: 12px; padding: 10px 16px; width: 200px; flex: 1 1 auto; color: #141414; text-align: center; font-family: Outfit; font-size: 14px; font-style: normal; font-weight: 400; line-height: 130%; /* 18.2px */ display: flex; flex-direction: column; align-items: center; gap: 12px; } .how-it-works__step svg { background: #FFF; width: 76px; height: 76px; padding: 18px; align-items: center; border-radius: 120px; } @media only screen and (min-width: 1450px) { .how-it-works__step::after { content: ''; position: absolute; top: 50%; right: -2rem; width: 32px; height: 4px; background-color: #FFE3E3; transform: translateY(-50%); z-index: 0; } .how-it-works__step:last-child::after { display: none; } .how-it-works__step { position: relative; } } @media only screen and (max-width: 457px) { .how-it-works__title { font-size: 17px; margin-bottom: 12px; } .how-it-works__steps { gap: 6px; } .how-it-works__step { flex-direction: row; text-align: left; font-size: 12px; } .how-it-works__step br { display: none; } .how-it-works__step svg { width: 32px; height: 32px; padding: 8px; } } /*----------How it Works - END---------- */ /*----------Made to Order - START---------- */ .made-to-order-header-section { min-height: 300px; background: #FF3030; display: flex; justify-content: center; } h2.made-to-order-heading { color: #FFF; font-family: Outfit; font-size: 70px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: 3.5px; text-transform: uppercase; margin-top: 72px; margin-left: 70px; } .made-to-order-header-section .page-width { display: flex; justify-content: center; align-content: center; position: relative; left: -10%; } @media only screen and (max-width: 768px) { h2.made-to-order-heading { color: #FFF; font-family: Outfit; font-size: 30px; font-style: normal; font-weight: 900; line-height: 105%; /* 31.5px */ text-transform: uppercase; margin: 26px auto 0; letter-spacing: 0; } .made-to-order-header-section { min-height: 101px; max-height: 101px; overflow: hidden; } .made-to-order-header-graphic { width: 95px; margin-right: 19px; } .made-to-order-header-section .page-width { left: 0; } } @media only screen and (min-width: 769px) and (max-width: 982px) { .made-to-order-header-section .page-width { left: -18%; } h2.made-to-order-heading { font-size: 43px; margin-top: 110px; margin-left: 35px; } } @media only screen and (min-width: 983px) and (max-width: 1300px) { h2.made-to-order-heading { margin-left: 30px; } } .shopify-section:has(.made_to_order_faq) { background: #F8F8F8; margin: 0; padding-bottom: 50px; } .made_to_order_faq .section-header__title { color: #0A0909; text-align: center; font-family: Outfit; font-size: 40px; font-style: normal; font-weight: 900; line-height: 130%; text-transform: uppercase; } .made_to_order_faq .collapsible-trigger__layout { padding-left: 30px; } .made_to_order_faq .collapsible-trigger__layout span { color: #0A0909; font-size: 20px; font-style: normal; font-weight: 600; line-height: 25px; } .made_to_order_faq .collapsible-content__inner { padding: 0 30px 25px 30px; } .made_to_order_faq .collapsible-content__inner p { color: #4A4A4A; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 400; line-height: 26px; } .made_to_order_faq .collapsible-trigger { background: #FFF; margin-top: 16px; } .made_to_order_faq .collapsible-trigger__icon .icon { width: 24px; height: 24px; } .made_to_order_faq .collapsible-content { background: #FFF; } .made_to_order_faq .collapsible-content.collapsible-content--all.is-open { height: auto; } .made_to_order_faq .collapsible-trigger__layout>span { padding-right: 60px } @media only screen and (max-width: 768px) { .made_to_order_faq { padding: 0 15px; } .made_to_order_faq .section-header__title { font-size: 20px; } .made_to_order_faq .collapsible-trigger__layout span { font-size: 14px; line-height: 1; } .made_to_order_faq .collapsible-trigger__layout .collapsible-trigger__icon { top: auto; } .made_to_order_faq .is-open .collapsible-trigger__layout .collapsible-trigger__icon { transform: translateX(-56%) translateY(70%) rotate(180deg); } .made_to_order_faq .collapsible-content__inner p { font-size: 14px; line-height: 1.5; } } /*----------Made to Order - END---------- */ /*----------404 Page Styling - START---------- */ .section-header--404 { background-image: url('https://cdn.shopify.com/s/files/1/0916/2742/2005/files/404-page-BG.png?v=1752508703'); background-size: cover; background-position: center; background-repeat: no-repeat; } .section-header--404.section-header { padding-top: 34px; } .section-header--404 img { margin: auto; width: 100%; max-width: 392px; } .section-header--404 h1 { color: #141414; text-align: center; font-family: Outfit; font-size: 40px; font-style: normal; font-weight: 900; line-height: 100%; text-transform: uppercase; margin-bottom: 16px; margin-top: -21px; } .section-header--404 p { color: #141414; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 300; line-height: 130%; max-width: 660px; margin: auto; padding-bottom: 46px; letter-spacing: 0; } .section-header--404 a { color: white; text-align: center; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; text-decoration: none !important; border-radius: 8px; background: #F33; padding: 16px 40px; align-items: center; } .section-header--404 a::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 1.71875C10.4312 1.71875 10.7812 2.06875 10.7812 2.5V9.21875H17.5C17.7072 9.21875 17.9059 9.30106 18.0524 9.44757C18.1989 9.59409 18.2812 9.7928 18.2812 10C18.2812 10.2072 18.1989 10.4059 18.0524 10.5524C17.9059 10.6989 17.7072 10.7812 17.5 10.7812H10.7812V17.5C10.7812 17.7072 10.6989 17.9059 10.5524 18.0524C10.4059 18.1989 10.2072 18.2812 10 18.2812C9.7928 18.2812 9.59409 18.1989 9.44757 18.0524C9.30106 17.9059 9.21875 17.7072 9.21875 17.5V10.7812H2.5C2.2928 10.7812 2.09409 10.6989 1.94757 10.5524C1.80106 10.4059 1.71875 10.2072 1.71875 10C1.71875 9.7928 1.80106 9.59409 1.94757 9.44757C2.09409 9.30106 2.2928 9.21875 2.5 9.21875H9.21875V2.5C9.21875 2.06875 9.56875 1.71875 10 1.71875Z' fill='white'/%3E%3C/svg%3E"); background-size: cover; margin: 0 8px 5px 0; vertical-align: middle; } .section-header--404 .rte { padding-bottom: 70px; } .shop-all-button-container { display: flex; justify-content: center; } .shop-all-button-container .shop-all-button__link { padding: 16px; border-radius: 8px; border: 1px solid #141414; background: rgba(255, 51, 51, 0.00); color: #141414; text-align: center; font-family: Outfit; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; display: flex; width: 257px; justify-content: center; align-items: center; gap: 8px; } .shop-all-button-container .shop-all-button__link::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: contain; } @media only screen and (max-width: 768px) { .section-header--404 img { width: 155px; padding-bottom: 20px; } .section-header--404 h1 { font-size: 20px; } .section-header--404 p { width: 100%; padding-bottom: 42px; } .section-header--404 a { font-size: 12px; font-weight: 600; } .section-header--404 a::before { width: 12px; height: 12px; } .section-header--404 .rte { padding-bottom: 150px; } } /* TABLET and MOBILE HOTFIX */ @media (max-width: 1100px) { .collection-hero { height: 200px; } .image-fit { object-position: 32.5% 50% ; } } @media (max-width: 767px) { .collection-hero{ height: 122px; } } /* HOT FIX TO MOVE NAV BAR DOWN BELOW BANNER ON SALES (I've got to add the section ID so it doesn't change all heroes)*/ .sales-banner .hero { overflow: visible; } .sales-banner .hero .flickity-page-dots { position: relative!important; bottom: auto; margin: 25px 0; } .sales-banner .hero .flickity-page-dots .dot:not(.is-selected) { background: #E6E6E6!important; border: 1px solid #E6E6E6!important; } @media (max-width: 990px) { .sales-banner { display: block; min-height: 300px; } .sales-banner .flickity-viewport { height: 250px; } .flickity-viewport img { height: 100%; } .main-hero-banner .flickity-viewport, .main-hero-banner .hero__image-wrapper is-land, .main-hero-banner .slideshow-wrapper,.main-hero-banner .index-section--hero, .flickity-viewport { height: 300px; } } @media (max-width: 768px) { .sales-banner { min-height: 250px; } .main-hero-banner .flickity-viewport, .main-hero-banner .hero__image-wrapper is-land, .main-hero-banner .slideshow-wrapper,.main-hero-banner .index-section--hero, .flickity-viewport { height: 590px; } .sales-banner .flickity-viewport img { height: 100%; } .sales-banner .hero .flickity-page-dots { margin: 15px 0; } .sales-banner.hero .flickity-page-dots .dot:not(.is-selected) { width: 8px; height: 8px; } .flickity-viewport img { height: 100%; } .hero .flickity-page-dots { margin: 15px 0; } .hero .flickity-page-dots .dot:not(.is-selected) { width: 8px; height: 8px; } } /*----------404 Page Styling - START---------- */ .header-wrapper--compressed{ top: 44px; } @media (max-width: 700px) { .header-wrapper--compressed{ top: 33px; } } /* .header-wrapper--compressed .site-nav__dropdown{ top: 78px; } */ /* .site-nav__dropdown{*/ /* top: 127px;*/ /*}*/ #fsb_background { z-index: 1 !important; } .template-collection .section-header__title { display: block!important }