/** Shopify CDN: Minification failed Line 13851:1 Unexpected bad string token Line 13851:2 Unterminated string token **/ /* 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: 1500px; --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: 20px; --site-nav-item-padding-top-bottom: 15px; --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); } .page-width--narrow { max-width: var(--page-narrow); } .page-width--tiny { max-width: 450px; } @media only screen and (max-width: 768px) { .page-width--flush-small { padding: 0; } } .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; } } /*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); } .variant__button-label { min-width: 7rem; } 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); } */ h4, .h4 { 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*/ .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 (max-width: 1024px) { .medium--hide { display: none !important } } @media only screen and (min-width: 769px) { .medium-up--hide { display: none !important; } } @media only screen and (min-width: 1025px) { .large-up--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; margin-left: calc(var(--grid-gutter) * -1); } @media only screen and (min-width: 1024px) { .float-grid { /* Rico */ display: flex; } .item-grid__sidebar { /* Rico */ min-width: 250px; } } @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='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% / 3); } /* 2 per row, 2 per row mobile */ [data-view='large'] .grid-item { flex: 0 0 50%; } /* 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='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); } .grid-item__meta { margin: 12px; } @media only screen and (min-width: 768px) { .grid-item__meta { margin: 12px; } } .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*/ } .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: 20%; } .medium-up--two-fifths { width: 40%; } .medium-up--three-fifths { width: 60%; } .medium-up--four-fifths { width: 80%; } .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 only screen and (min-width: 1024px) { .large-up--four-fifths { width: 80%; } .large-up--one-fifth { width: 20%; } .grid--uniform .large-up--one-fifth:nth-of-type(5n + 1) { clear: both; } } 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; border-radius: var(--button-radius); color: var(--color-button-primary-text); background: var(--color-button-primary); } .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-buy-it-now-button[disabled] button, .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; } .btn--secondary, .block-buy-buttons[data-show-dynamic-checkout] .btn, .rte .btn--secondary { border: 1px solid; border-color: var(--color-text-body); color: var(--color-text-body); background-color: var(--color-body); } .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); } .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)); } .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: 15px 0; font-weight: var(--type-base-weight); font-size: calc(var(--type-base-size) - 1px); } @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 17px 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: 10px; } .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; } 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: var(--color-button-primary-text); background: var(--color-button-primary); border-radius: 50%; } .flickity-button:hover { cursor: pointer; opacity: 1; } .flickity-button:disabled { display: none; cursor: auto; pointer-events: none; } .flickity-prev-next-button { top: 50%; width: 40px; height: 40px; 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:hover { transform: translateY(-50%) scale(1.12); } .flickity-prev-next-button:active { transform: translateY(-50%) scale(1); transition: transform 0.05s ease-out; } .flickity-previous { left: 10px; } .flickity-next { right: 10px; } .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: currentColor; z-index: 2; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin: 0 5px; border-radius: 100%; cursor: pointer; background-color: currentColor; opacity: 0.2; } .flickity-page-dots .dot:hover { opacity: 0.6; } .flickity-page-dots .dot.is-selected { opacity: 1; background-color: currentColor; width: 9px; height: 9px; } .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; } /* 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: 20% 30%; } .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: 15% 66%; } /* ------------------------------------- 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: 40px; padding-bottom: 0; } @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%; } .grid-product__price sup { 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; } /* ------------------------------------- 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; } /*Mobile only vimeo play button*/ .vimeo-mobile-trigger { display: block; position: absolute; width: 100%; z-index: 2; margin-top: 90px; } .vimeo-mobile-trigger .icon { width: 40px; height: 40px; background-color: #fff; border-radius: 50%; padding: 10px; } /*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) + 4px); } @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) + 4px); } .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; } .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 (min-width: 769px) { .product__price { font-size: calc(var(--type-base-size) + 6px); } } .product__price sup { margin-left: 1px; font-size: 60%; top: -0.4em; } .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; } .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: 10px; } [dir='rtl'] .sales-point .icon { margin-right: 0; margin-left: 10px; } .product-block--sales-point + .product-block--sales-point { margin-top: -20px; } .product-block.product-block--tab { margin-bottom: 30px; } .product-block--tab + .product-block--tab { margin-top: -30px; } .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; } .cart__price { display: block; } .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; } .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; /* max-height: 200px; */ overflow: hidden; } @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 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: var(--collection-tile-margin); } .collection-image img, .collection-image svg { border-radius: var(--roundness); } .collection-image--is-collection img, .collection-image-fill-space--true img { object-fit: cover; } .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: 75%; } .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; } /* TODO: this should be part of a more generalized media file */ picture img { width: 100%; max-height: 100%; min-height: inherit; } .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; } .cart__note { margin-bottom: 20px; } .site-header__drawer { display: none; position: absolute; top: 1px; padding: 20px; width: 100%; max-height: 75vh; max-height: var(--max-drawer-height); 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%); } @media only screen and (max-width: 768px) { .site-header__drawer { top: 0; z-index: var(--z-index-header-drawers-mobile); } } .site-header__drawer.is-active { display: block; transform: translateY(0); } .header-wrapper--compressed .site-header__drawer { top: 0; } .site-header__drawer-animate { 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; } /*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; } /* 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); } .map { display: block; height: 100%; position: relative; } .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; } .product-image-main[data-size='landscape'] .image-wrap { padding-bottom: 75% !important; } .product-image-main[data-size='portrait'] .image-wrap { padding-bottom: 150% !important; } .multi-selectors { display: flex; justify-content: center; flex-wrap: wrap; } .multi-selectors__item { margin: 0 20px; } .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: none; } .form__submit--small { display: block; } } @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: 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: 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; } .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; } .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 (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'] [data-section-id*='featured-collection'], [data-grid-style*='gridlines'] .index-section--sub-product { overflow-x: hidden; } } [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: 200px; margin: calc(var(--product-tile-margin) / 4); margin-right: 0; } [data-view='list'] .grid-item__meta { flex: 1 1 55%; padding-right: 20px; } @media only screen and (min-width: 769px) { [data-view='list'] .grid-item__meta { display: flex; justify-content: space-between; padding-right: 0; } [data-view='list'] .grid-item__meta-secondary { margin: 0 20px 0 0; text-align: right; } [data-view='list'] .grid-product__title { font-size: calc(var(--type-base-size) + 3px); } } [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; } .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); } .grid-product__price--current { display: inline-block; font-weight: var(--type-header-weight); margin-right: 5px; } .grid-product__price--original { display: inline-block; font-weight: var(--type-header-weight); -webkit-text-decoration: line-through; text-decoration: line-through; /* font-size: 0.9em; */ margin-right: 8px; } .grid-product__price--savings { display: inline-block; color: var(--color-text-savings); white-space: nowrap; /* font-size: 0.9em; */ } [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; } /* for variant list view */ [data-view='list'] .variant-view { display: flex !important; flex-direction: column; gap: 8px; max-width:100%; } [data-view='list'] .product__meta > div:not(:first-child) { padding: 0 8px; } [data-view='list'] .product__meta > div:first-child { padding: 0 8px 0 0; } [data-view='list'] .product__meta > div + div { border-left: 1px solid #BDBBBA; } [data-view='list'].new-grid { margin-left: 0px !important; } [data-view='list'].new-grid .grid-item.grid-product { padding: 0px !important; } [data-view='list'] .grid-product__actions, [data-view='list'] .grid-item__meta { display: none !important; } [data-view='list'] .grid-product__image-wrap, [data-view='list'] .grid__image-ratio, [data-view='list'] .grid-item__link { width: 140px; height: 140px; max-width:140px; align-self: start; } [data-view='list'] .js-qty__num { max-height: 38px; box-shadow: none; border-width: 1px; } [data-view='list'] .js-qty__adjust--minus { border-right: 1px solid var(--color-border) !important; } [data-view='list'] .js-qty__adjust--plus { border-left: 1px solid var(--color-border) !important; } [data-view='list'] .js-qty__wrapper { max-width: 130px; } .grid-product__tags { position: absolute; top: 0; left: 0; margin-left: calc(var(--product-tile-margin) * -1); 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; margin-top: 5px; 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); } .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; top: calc(var(--product-grid-margin) * -1); right: calc(var(--product-grid-margin) * -1); z-index: 1; } .grid-product__actions > button, .grid-product__actions .quick-add-btn, .grid-product__actions .quick-product__btn { display: block; margin-bottom: 5px; } @media only screen and (max-width: 768px) { [data-grid-style*='gridlines'] .grid-product__actions { top: 0; right: 0; } } /*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; } } /*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*/ /*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; } .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: 100px; min-width: 60px; overflow: visible; background-color: var(--color-body); color: var(--color-text-body); } .js-qty__wrapper.is-loading { opacity: 0.5; pointer-events: none; } .js-qty__num { display: block; background: none; text-align: center; width: 100%; padding: 5px 20px; margin: 0; } .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); } .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; } } @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); } @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__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; } .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; } } /*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); } .tag--inline a { padding: 7px 15px 7px 15px; } /*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; } /*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 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; } .index-section--faq { margin-bottom: 20px; } @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; } .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; } .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; } .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: none; text-decoration: none; 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; } } .section-header--404 { padding-top: 80px; } .section-header select { margin: 10px 0; } .section-header p { margin: 10px 0; } .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; } } .modal-open .hotspot-content__block, .modal-closing .hotspot-content__block { animation: none; position: static; } /** * 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 .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 only screen and (max-width: 768px) { .logo-bar--layout-carousel .new-grid { animation: scrolling-carousel calc(var(--move-speed) * 0.019) linear infinite; } } .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 page layout */ @media only screen and (min-width: 769px) { .cart__page { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 1200px; margin: 0 auto; } .cart__page-col:first-child { flex: 1 1 65%; padding-right: 100px; } .cart__page-col:last-child { --z-index-overlay: -1; flex: 0 1 35%; align-self: flex-start; position: sticky; top: 130px; padding: 30px; } .cart__page-col:last-child:after { background-color: var(--color-text-body); opacity: 0.03; } .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__checkout, .cart__continue { width: 100%; } .cart__checkout-wrapper .additional-checkout-buttons, .cart__checkout-wrapper .cart__continue { margin-top: 12px; } /*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); } /*PayPal button has unhelpful z-index*/ iframe.zoid-component-frame { z-index: 1 !important; } section-main-content { display: block; } @media only screen and (min-width: 769px) { section-main-content { padding-top: 60px; } } .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; } /* * 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; 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: 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: 13px; height: 13px; } .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; } .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: 20px; } .product-block hr { margin: 0; } [data-view='list'] .product-block{ margin: 0 !important; } :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: 10px; 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: 20px; } .results-products__image { width: 100%; min-width: 80px; max-width: 80px; height: 80px; } .results-products__info { display: flex; flex-direction: column; } .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; } } .tool-tip-trigger { background: none; border: 0; cursor: pointer; } .tool-tip-trigger__title { display: inline-block; } .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 { margin: var(--size-chart-margin); } .size-chart__standalone svg { margin-left: var(--size-chart-icon-margin); } [data-tool-tip='size-chart'] .tool-tip__close { border: 0; padding: 6px; position: absolute; top: 0; right: 0; transform: translate(25%, -25%); z-index: 2; color: var(--color-button-primary-text); background: var(--color-button-primary); border-radius: 50%; } 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; } @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: -30px; margin-right: -30px; } @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: 10px; } .text-with-icons__block-icon .icon { width: 70px; height: 70px; } @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; } .social-sharing__title { font-size: calc(var(--type-base-size) * 0.85); display: inline-block; vertical-align: middle; padding-right: 15px; padding-left: 3px; } .social-sharing { display: inline-flex; flex-wrap: wrap; gap: 10px 20px; } .social-sharing .icon { height: 18px; width: 18px; } .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 calc(var(--label-bottom-margin) * -1); position: relative; } .variant-button-wrap label { font: inherit; position: relative; display: inline-block; font-weight: normal; padding: 7px 15px 7px; margin: 0 8px var(--label-bottom-margin) 0; background-color: var(--color-body); box-shadow: 0 0 0 1px var(--color-border); border-radius: 1px; /* overflow: hidden; */ } .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 1.25px var(--color-text-body); } .variant-button-wrap input[data-disabled] + label { color: var(--color-border); } .variant-button-wrap input[data-disabled] + label:after { position: absolute; content: ''; left: 50%; top: 0; bottom: 0; border-left: 2px solid; border-color: var(--color-border); transform: rotate(45deg); } .variant-button-wrap .variant__label, .variant-button-wrap .variant__label[for] { display: block; margin-bottom: 10px; cursor: default; } .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; } div#shopify-block-ARTBUa1NacDJ4Q2NDM__18208872656243357035 { display: none; } .error-toast{ display: flex; padding: 8px 32px; align-items: flex-start; gap: 16px; align-self: stretch; border-radius: 8px; border: 0; border-left: 4px solid #F44336; background: white; } .error-toast-cotext{ padding: 8px 0; display: flex; flex-direction: column; gap: 8px; } .error-toast-title { color: #0A0401; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; } .error-toast-message { color: #6C6867; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } @media only screen and (max-width: 768px) { .collapsible-content__inner { padding: 0 0 12px; } } /* label.tag__checkbox-wrapper { display: flex; align-items: center; } */ /* .tag__radio { position: relative; padding-left: 36px; overflow: hidden; width:22px; height: 22px; } */ /* .tag__checkbox:before, .tag__checkbox:after { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 22px !important; width: 22px !important; border: 2px solid black; } .tag__checkbox:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 1px solid var(--color-border); height: var(--tag-active-icon-size); width: var(--tag-active-icon-size); background: transparent; } .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: var(--color-text-body); border-color: var(--color-text-body); content: '\2713'; display: block; text-align: center; line-height: 20px; color: white; font-size:16px; } */ .uppercase{ text-transform: uppercase; } .btn.stoq-btn { background-color: #F44336 !important; } .default-product-title { font-size: calc(var(--type-base-size) - 2px); } /* ==== merged from overrides.css (2026-04-21) ==== */ :root { --page-width: 1264px; --section-header-bottom: 32px; --mobile-breakpoint: 768px; --tablet-breakpoint: 1024px; --main-nav-background: #ececeb; --product-grid-margin: 18px; --font-heading-scale: 0.5; --small-hero-subtitle-size: 16px; } /* Rico */ @media only screen and (max-width: 1024px) { :root { --section-header-bottom: 20px; --product-grid-margin: 16px; } } /* Common */ .z-index-99999999999 { z-index: 99999999999; } @media only screen and (min-width: 769px) and (max-width: 1025px) { .tablet--hide { display: none; } } .truncate-1-lines { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .truncate-2-lines { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .truncate-3-lines { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Inbox Chat Bubble */ .chat-app button { height: 48px; min-width: 48px; width: 48px; } .chat-app button svg { height: 36px; } /* Grid Item */ [data-view="xxsmall"] .grid-item { flex: 0 0 calc(100% / 6); } [data-view="small"] .grid-article { flex: 0 0 25%; } @media only screen and (min-width: 769px) { [data-view="small"] .grid-item:nth-last-child(-n + 4) { /* Adjust based on items per row (4 in this example) */ margin-bottom: 0; /* Remove space from the last row */ } [data-product-count="5"][data-view="small"] .grid-item { margin-bottom: 0; } } @media only screen and (max-width: 768px) { .scrollable-grid--small .grid-item, .scrollable-grid--small[data-view="xxsmall"] .grid-item { flex: 0 0 49%; } .page-width--flush-small .scrollable-grid--small { padding-left: calc( var(--page-width-gutter-small) - var(--product-grid-margin) ); } } tool-tip[data-tool-tip-open="true"] { z-index: 9999999999999999999999; } /* Index Section */ .index-section:not(.index-section--sub-product):first-child { padding-top: 0px; } /* Featured Collection Subtitle */ .section-header__subtitle-wrapper { flex: 1 1 auto; display: flex; align-items: center; } .section-header__title--with-subtitle { border-right: 3px solid var(--color-button-primary); padding-right: 16px; margin-right: 16px; margin-bottom: 0px; } .seven-cigars-section-header__subtitle { color: #5f5a58; font-family: var(--type-base-primary), var(--type-base-fallback); font-weight: var(--type-base-weight); letter-spacing: var(--type-base-spacing); line-height: var(--type-base-line-height); text-transform: var(--type-base-transform); margin: 0 !important; } @media only screen and (max-width: 768px) { .seventy-cigars-section-header__link { width: 100%; margin-top: var(--section-header-bottom); padding-right: var(--page-width-padding); padding-left: var(--page-width-padding); } .seventy-cigars-section-header__link .btn.color-scheme-reversed { width: 100%; color: var(--color-button-primary); background-color: var(--color-button-primary-text); border-color: var(--color-button-primary); } .section-header__title--with-subtitle { margin-bottom: 8px; padding-right: 8px; margin-right: 8px; width: fit-content; } .section-header__subtitle-wrapper { flex-wrap: wrap; webkit-flex-wrap: wrap; flex-direction: column; align-items: start; } /* .seven-cigars-section-header__subtitle { font-size: var(--type-base-size); } */ } @media only screen and (min-width: 1024px) { .product-grid-with-banner { width: 68%; } } /* Dynamic Collection */ .dynamic-collection__tab-container, .subcollection__tab-container, .product-detail__tab-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ margin-bottom: var(--section-header-bottom); } .dynamic-collection__tab-container::-webkit-scrollbar, .subcollection__tab-container::-webkit-scrollbar, .product-detail__tab-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .dynamic-collection__tabs, .subcollection__tabs, .product-detail__tabs { display: flex; min-width: max-content; border-bottom: 1px solid #bdbbba; margin: 0; padding: 0; list-style: none; } .dynamic-collection__tab-item, .subcollection__tab-item, .product-detail__tab-item { padding: 12px 24px; cursor: pointer; position: relative; color: var(--color-text-body); transition: color 0.3s; margin-bottom: 0px; white-space: nowrap; } .dynamic-collection__tab-item:first-child, .subcollection__tab-item:first-child, .product-detail__tab-item:first-child { padding-left: 0; } .subcollection__tab-item a { color: unset; } .dynamic-collection__tab-item:hover, .subcollection__tab-item:hover, .product-detail__tab-item:hover { color: var(--color-button-primary); } .dynamic-collection__tab-item.active, .subcollection__tab-item.active, .product-detail__tab-item.active { color: var(--color-button-primary); } .dynamic-collection__tab-item.active div, .subcollection__tab-item.active div, .product-detail__tab-item.active div { position: relative; } .dynamic-collection__tab-item.active div::after, .subcollection__tab-item.active div::after, .product-detail__tab-item.active div::after { content: ""; position: absolute; bottom: -13px; left: 0; width: 100%; height: 2px; background-color: var(--color-button-primary); transition: transform 0.3s ease; } @media (max-width: 640px) { .dynamic-collection__tab-item, .subcollection__tab-item, .product-detail__tab-item { padding: 12px 16px; } } .dynamic-collection__tab-content { display: none; animation: fadeIn 0.3s ease-in-out; } .dynamic-collection__tab-content.active { display: flex; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Product Page */ .page-content--product { padding-top: var(--section-header-bottom); padding-bottom: var(--section-header-bottom); } @media only screen and (max-width: 768px) { .page-content--product { padding-top: 0px; } } .page-content--product .breadcrumb { margin: 0 0 8px; } .product-single__meta .jdgm-preview-badge, .product-block, .product-single__title { margin-bottom: 8px; } /* Product Specs */ .spec-table-wrapper { width: 100%; border: 1px solid #bdbbba; } .specs-container { max-width: 800px; margin: 20px auto; padding: 0 15px; } .specs-header { display: flex; padding: 16px 24px; width: 100%; font-weight: var(--type-header-weight); background-color: #f6f5f5; } .header-column { width: 50%; padding: 15px; text-transform: uppercase; font-weight: bold; font-size: var(--type-base-size); } .specs-table { column-count: 2; column-gap: 40px; padding: 0; } .spec-row { break-inside: avoid; padding: 16px 24px; display: flex; } .spec-label { width: 40%; padding-right: 16px; font-weight: var(--type-header-weight); word-wrap: break-word; font-weight: var(--type-base-weight); text-transform: uppercase; font-size: var(--type-base-size); } .spec-value { width: 60%; font-weight: 400; font-size: var(--type-base-size); } @media screen and (max-width: 768px) { .specs-table { column-count: 1; } } /* Card */ .card { background: #ffff; margin-bottom: var(--section-header-bottom); } .card-header { padding: 20px 20px; border-bottom: 1px solid #e3e2e1; margin-bottom: 0px; } .card-content { padding: 32px 20px; } @media only screen and (min-width: 769px) { .card-header { padding: 20px 40px; } .card-content { padding: 32px 40px; } } /* Product Buy Buttons */ .product-buy-buttons { display: grid; grid-template-columns: 1fr; gap: 16px; /* Optional: space between items */ } @media only screen and (min-width: 769px) { .product-buy-buttons { grid-template-columns: 1fr 1fr; } } .product-buy-buttons[disabled] { grid-template-columns: 1fr; } .product-buy-buttons button { text-transform: uppercase; } block-buy-buttons.disabled .js-qty__adjust, block-buy-buttons.disabled .js-qty__num, shopify-buy-it-now-button[disabled] button { cursor: default; color: var(--disabled-grey-text); background-color: var(--disabled-grey); outline: none; border: none; } .product-restock-notify { width: 100%; } .product-buy-buttons .shopify-payment-button { margin-top: 0px; } /* Product Meta */ .product-meta-block { margin-bottom: 28px; } .product-meta { background: #f6f5f5; display: flex; padding: 4px 16px; align-items: center; gap: 24px; align-self: stretch; } .meta { display: flex; align-items: center; font-size: var(--type-base-size); } /* Product Highlight */ .product-highlight-block, .block-variant-picker, .page-content--product .product__quantity { margin-bottom: 28px; } .product-highlight-title { margin-bottom: 10px; font-weight: bold; font-size: var(--type-base-size); } .product-highlight { font-size: var(--type-base-size); } .product-highlight.errors { width: fit-content; } .product-highlight ul { list-style: initial; } .product-highlight p, .product-highlight ul, .product-highlight li { margin-bottom: 0px; font-weight: 400; color: #3a3430; font-weight: 400; line-height: normal; } /* Product Price */ .block-price__regular.product__price, span.product__price { font-weight: 500; color: var(--color-text-body); font-size: var(--type-header-size); } @media only screen and (min-width: 769px) { .block-price__regular.product__price, span.product__price { font-size: var(--type-header-size); } } [data-on-sale] .block-price__sale { gap: 8px; align-items: baseline; } /* Product Variant / Qunatity Selector */ .js-qty__num, .variant-button-wrap label { padding: 12px 24px; } .js-qty__num { box-shadow: 0 0 0 1px var(--color-text-body); } .variant-button-wrap input[type="radio"]:focus + label, .js-qty__num:focus { outline: none; } quantity-selector:not(.disabled) .variant-button-wrap input[type="radio"]:focus + label, quantity-selector:not(.disabled) .js-qty__num:focus { box-shadow: 0 0 0 1px var(--color-text-body); } /* Product Grid Item */ .grid-product__title { word-break: break-word; -webkit-hyphens: auto; hyphens: auto; width: 100%; height: 38px; font-weight: 800; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .grid-item__meta .jdgm-widget { margin-top: 8px; } [dir="ltr"] [data-grid-style="simple"] .new-grid:not([data-view="list"]) .grid-item__meta { margin-left: 0; margin-right: 0; } .grid-product__price--original { color: #5f5a58; } .grid-item__meta-secondary { margin-top: 8px; } .grid-product__tags { display: flex; } .grid-product__tag { line-height: 1.1rem; padding: 2px 6px; margin-top: 2px; font-size: 11px; letter-spacing: 0.01em; } .grid-product__tag.grid-product__tag--sold-out { background-color: rgb(var(--sold-out-label-bg-color)); color: rgb(var(--sold-out-label-text-color)); } .grid-product__tag--sale { background-color: rgb(var(--sale-label-bg-color)); color: rgb(var(--sale-label-text-color)); } .grid-product__tag--new { background-color: rgb(var(--new-label-bg-color)); color: rgb(var(--new-label-text-color)); } .grid-product__tag--preorder { background-color: rgb(var(--preorder-label-bg-color)); color: rgb(var(--preorder-label-text-color)); } .grid-product__tag--custom { background-color: rgb(var(--custom-label-bg-color)); color: rgb(var(--custom-label-text-color)); } .grid-product__tag--best-seller { background-color: rgb(var(--best-seller-label-bg-color)); color: rgb(var(--best-seller-label-text-color)); } /* Article Grid Item */ .grid-article .grid-article__meta { padding: 16px; min-height: 165px; border: 1px solid var(--color-button-primary); background: white; box-shadow: 8px 8px 16px 0px rgba(0, 0, 0, 0.08); } .grid-article[data-style="70style"] { display: block; } .grid-article[data-style="70style"] .article__title { width: fit-content; margin-bottom: var(--product-grid-margin); margin-left: auto; margin-right: auto; padding-bottom: var(--product-grid-margin); border-bottom: 1px solid var(--color-button-primary); } @media only screen and (max-width: 768px) { .scrollable-grid--small[data-view="small"] .grid-article { flex: 0 0 81%; } } @media only screen and (max-width: 768px) { .icon--payment svg { width: 60px; height: 40px; } } /* Account Page */ .account-page .grid__item { margin-bottom: var(--section-header-bottom); } .account-widget { width: 100%; border: solid 1px #1d1d1d9e; overflow: hidden; margin-bottom: var(--grid-gutter); } .account-widget__head { padding: 0 var(--grid-gutter); display: flex; align-items: center; } .account-widget__head { background-color: #0000000d; height: 3.4375rem; border-bottom: solid 1px #1d1d1d9e; } .account-widget__body { padding: var(--grid-gutter) var(--grid-gutter); } .account-order-table { } .account-order-table, .account-order-table .table-section { background: white; } .account-order-table thead { padding: 0 var(--gutter); /* border-bottom: 1px solid #1d1d1d9e; */ } .account-order-table th { background: #F7F0E6; } .account-order-table thead td, .account-order-table tbody td { padding: var(--gutter) 15px; } @media only screen and (max-width: 768px) { .account-order-table thead td:first-child, .account-order-table tbody td:first-child { background-color: #f2f2f2; padding: 15px 15px; border-bottom: solid 1px #1d1d1d9e; } .account-order-table thead td, .account-order-table tbody td { padding: calc(var(--gutter) * 0.3) 15px; } .account-order-table .table__section:not(:first-child) { margin-top: 20px; padding-top: 0px; } .account-order-table .table__section + .table__section:after { content: unset; } .account-order-table.table--responsive td:before { font-size: 14px; } } .account-order-table thead tr, .account-order-table tbody tr { /* border: 1px solid #1d1d1d9e; */ } .account-order-table tbody tr { border-bottom: 1px solid #e3e2e1; } @media only screen and (min-width: 769px) { .account-order-table thead tr, .account-order-table tbody tr { height: 3.4375rem; } .main-order-history .account-order-table thead tr, .main-order-history .account-order-table tbody tr { height: auto; } } .account-order-table .href-link a, .primary-text-link { -webkit-text-decoration: underline; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; color: var(--color-button-primary); } .account-order-table .mobile-cta { width: 100%; margin: auto; } .order-details-section .account-order-table{ width: 100%; table-layout: fixed; /* makes it fill the container and respect column % */ border-collapse: collapse; } .order-details-section .account-order-table th, .order-details-section .account-order-table td{ padding: 8px 24px; vertical-align: top; word-break: break-word; /* wrap long text in fixed layout */ overflow-wrap: anywhere; } /* If your theme’s responsive table turns into blocks, you can ensure full width on desktop: */ @media (min-width: 750px){ .order-details-section .table--responsive{ display: table; width: 100%; } } /* Order Page */ .order-page tfoot { border-left: 1px solid #1d1d1d9e; border-right: 1px solid #1d1d1d9e; border-bottom: 1px solid #1d1d1d9e; } .order-page tfoot td { font-size: 16px; } /* Gift Card */ .giftcard-header { padding: 0 0; } .giftcard__smalltopmargin { margin-top: 16px; } .giftcard__topmargin { margin-top: 32px; } .giftcard__doubletopmargin { margin-top: 40px; } .actions__cell { /* gap: 16px; flex-direction: column; */ max-width: 229px; margin: auto; } .actions__cell .button { width: 100%; margin-bottom: 16px; } .button__cell { border-radius: 0px; min-width: 196px; } .button__cell a { padding: 16px 32px; } .primary-btn { color: #fff; background: #604317; font-size: 12px; line-height: 24px; /* 150% */ text-transform: uppercase; } .secondary-btn { background: white; border: 1px solid #140d09; } .secondary-btn a { line-height: 24px; /* 150% */ font-size: 12px; text-transform: uppercase; color: #140d09; } .giftcard__smalltext { padding-bottom: 16px; } .giftcard__balance { text-align: center; font-family: Roboto; font-size: 28px; font-style: normal; font-weight: 600; line-height: normal; text-transform: capitalize; } .giftcard__code { position: relative; bottom: unset; padding-bottom: var(--gutter); font-size: 28px; font-weight: 600; } .giftcard__code, .giftcard__title, .giftcard__balance { color: #604317; } .giftcard__title { text-align: center; font-family: Roboto; font-size: 44px; font-style: normal; font-weight: 900; line-height: normal; text-transform: uppercase; } .giftcard__subtitle { color: #3a3430; text-align: center; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-transform: capitalize; } .giftcard__message-wrapper { padding: 60px 60px 40px 60px; text-transform: capitalize; border: 1px solid #060c0b; background: url("/cdn/shop/files/Gift_Card_Message_Bg.png?v=1734370539"); } .giftcard__message { text-align: center; font-family: Roboto; font-size: 24px; font-style: normal; font-weight: 400; line-height: 40px; /* 166.667% */ } .giftcard__message-wrapper, .giftcard__message-from { color: #140d09; } .giftcard__message-footer { margin-top: 40px; text-align: center; } .giftcard__message-signature { color: #140d09; text-align: center; font-family: "Vujahday Script"; font-size: 40px; font-style: normal; font-weight: 400; margin-top: 0px; line-height: normal; font-style: italic; text-transform: capitalize; } .collapsible-trigger.is-open .collapsible-trigger__icon > .icon-70cigars_plus > line:last-child { display: none; } .collapsible-trigger__icon { margin-left: auto; } .collection-image-wrap.collection-image-color--undefined:after { background-color: transparent; } ul, ol, menu { list-style: disc; } .collection-image-fit--cover img { object-fit: cover; } .collection-image-fit--contain img { object-fit: contain; } .collection-image-bg-color--light_grey { background: #e3e2e1; position: relative; } .overlay-title-container::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 25%; background: linear-gradient( 180deg, rgba(58, 52, 48, 0) 0%, rgba(58, 52, 48, 1) 100% ); opacity: 0.7; } .overlay-title-container + .collection-item__title { color: white; position: absolute; bottom: 10px; left: -4px; } .section-header .rte--collection-desc { font-weight: 400; padding-top: 16px; padding-bottom: 16px; } .section-header-divider { border-top: 1px solid var(--color-border-light-grey); } .section-header-divider-with-margin { border-top: 1px solid var(--color-border-light-grey); margin-top: 16px; } @media only screen and (min-width: 769px) { .grid-article[data-style="small"] { display: block; } } .grid-article[data-style="small"] { flex: 0 0 33.3%; } .grid-article[data-style="small"] .article__title { font-size: calc(var(--type-base-size) + 2px); } .grid-article__meta .rte { font-weight: 400; margin-top: 12px; } @media only screen and (min-width: 769px) { .grid-article[data-style="small"] .article__sub-meta > span { margin: 0 5px 2px; } } @media only screen and (max-width: 480px) { .blog-layout__main .new-grid { gap: 8px; } .grid-article[data-style="small"], .grid-article[data-style="medium"] { flex-direction: column; height: max-content; } .grid-article[data-style="small"] .grid-article__image, .grid-article[data-style="medium"] .grid-article__image { width: 100%; } } @media only screen and (max-width: 768px) { .grid-article[data-style="small"] { flex: 0 0 100%; flex-wrap: nowrap; text-align: left; margin-bottom: 20px; } .grid-article[data-style="small"] .grid-article__image { flex: 0 0 40%; align-self: center; } .grid-article[data-style="small"] .grid-article__meta { flex: 0 0 60%; padding-left: 15px; } .grid-article[data-style="small"] .article__title { font-size: calc(var(--type-base-size) + 2px); } .grid-article[data-style="small"] .article-tag { font-size: 10px; } /*Only show fist tag*/ .grid-article[data-style="small"] .article-tag:not(:first-child) { display: none; } .blog-layout .new-grid .grid__item.grid-article { padding-left: 20px; padding-right: 20px; } .blog-layout .new-grid .grid__item.grid-article .grid-article__image, .blog-layout .new-grid .grid__item.grid-article .grid-article__image * { height: 100%; } } /* Faq Spacing */ .index-section--faq { margin: 48px 0 8px 0 !important; } .faq-question { font-weight: 600; } .faq-container .collapsible-content__inner { margin-left: 24px; font-weight: 400; } .faq-container .collapsible-content__inner p { margin-bottom: 16px; } .faq-container .faq-item { margin-bottom: 16px; } @media only screen and (max-width: 768px) { .faq-container .collapsible-content__inner { margin-left: 0; } } /* Aov Joy */ /* DealForToday*/ body.mobile-nav-open #Avada-DealForToday__OuterWrapper, body.mobile-nav-open #shopify-chat { display: none; } #Avada-Joy_FloatingButton .Avada-Joy_ButtonWidget { bottom: 90px; } .Avada-DealForToday__Container .Avada-DealForToday__Main .Avada-ProductImage { width: 66px; } .Avada-DealForToday__Container .Avada-DealForToday__Main .Avada-ProductImage img { position: absolute; top: 0; width: 100%; height: 100%; } /* Chat Box */ @media only screen and (max-width: 768px) { .Avada-DealForToday__Floating--Button { transform: rotate(270deg) translate(50%, 50%) !important; right: 0; } .Avada-DealForToday__Floating--Button .Avada-DealForToday__Floating--ButtonWrapper { top: -34px !important; height: 30px !important; } .Avada-DealForToday__Floating--Button .Avada-CountDeals { transform: rotate(-270deg) !important; } #shopify-chat inbox-online-store-chat { right: 1px !important; } #Avada-Joy_FloatingButton .Avada-Joy_ButtonWidget.right { right: 8px; } } /* MinCart */ .mincart-popup { z-index: 999999999999999999999; position: fixed; top: 0; width: 100%; height: 100%; background: #00000087; } #mincart-title { font-size: var(--type-header-size) !important; } #mincart-popup-container { font-size: 16px !important; } /* Landing Page Setting */ .landing-page .product-count-section { display: none; } .landing-page .collectoin0 { display: none; } /* Main Account Sidebar menu and mobile dropdown menu */ .main-account-information { width: 100%; display: flex; padding: 0px; gap: 20px; flex-direction: column; margin-bottom: var(--section-header-bottom); min-width: 0; /* prevent overflow with long content */ } .account-membership-card { padding: 24px; background: white; flex: 1; display: flex; height: 100%; text-align: center; align-items: center; flex-direction: column; } .app-download-shell { padding: 24px; background: white; } .app-download-shell { padding: 24px; background: white; } .app-download-card { position: relative; border-radius: 18px; /* gradient border without :before */ background: linear-gradient(#fff, #fff) padding-box, /* inner fill */ linear-gradient(45deg, #F7C749, #FA862E) border-box; /* border */ border: 2px solid transparent; } .app-download-card .body { padding: 24px; position: relative; z-index: 2; border-radius: 16px; /* optional: inner rounding if you like */ background: white; /* no need for white if using the layer above */ } /* --- Top Section --- */ .app-download-card .eyebrow { font-size: 18px; text-transform: uppercase; line-height: 1.15; font-weight: 800; letter-spacing: 0.2px; margin: 4px 0 6px; } .app-download-card .subhead { font-size: var(--type-base-size); color: #111827; /* gray-900 */ opacity: 0.85; margin: 0 0 16px; } .app-download-card .divider { height: 1px; background: linear-gradient(90deg, rgba(249, 168, 37, 0.25), rgba(249, 168, 37, 0.15), transparent); border: 0; margin: 12px 0; } /* --- Note --- */ .app-download-card .download-note { font-size: 14px; line-height: 1.45; color: #475569; /* slate-600 */ margin: 0 0 14px; } /* --- Meta grid --- */ .app-download-card .meta { display: grid; grid-template-columns: 1fr auto; gap: 8px 8px; align-items: center; } .app-download-card .label { font-size: 14px; color: #64748b; /* slate-500 */ margin-bottom: 4px; } .app-download-card .value { font-size: 14px; font-weight: 600; color: #0f172a; } /* --- Status --- */ .app-download-card .status { display: flex; align-items: center; gap: 8px; } .app-download-card .dot { width: 16px; height: 16px; border-radius: 50%; background: #22c55e; /* green-500 */ box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15); flex: 0 0 auto; } .app-download-card .status-text { font-size: 14px; font-weight: 600; } .app-download-card .cta-wrap { margin-top: -10px; position: relative; z-index: 1; } /* --- CTA --- */ .app-download-card .cta { display: inline-flex; align-items: center; gap: 10px; width: 100%; justify-content: center; text-decoration: none; font-weight: 800; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; letter-spacing: .3px; padding: 24px 18px 18px 18px; background: var(--Color, linear-gradient(90deg, #F7C749 0%, #FA862E 100%)); color: white; /* gray-800 */ transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .app-download-card .cta:hover, .app-download-card .cta:focus-visible { filter: brightness(1.03); } @media only screen and (min-width: 768px) { .main-account-information { flex-direction: row; gap: 0px; background: white; padding: 24px; } .main-account-information > * { flex: 1; } .app-download-shell { background: unset; } } .main-account__tab-container { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ margin-bottom: var(--section-header-bottom); } .main-account__tab-container::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } @media only screen and (max-width: 768px) { .main-account__tab-container { } } .main-account__tabs { display: flex; min-width: max-content; flex-direction: rows; margin: 0; padding: 0; list-style: none; } .main-account__tab-item { padding: 12px 24px; cursor: pointer; position: relative; color: var(--color-text-body); transition: color 0.3s; margin-bottom: 0px; white-space: nowrap; } .main-account__tab-item.active, .mobile-account-nav__item.active { background-color: #f7f0e6; } .main-account__tab-item.active a, .mobile-account-nav__item.active a { color: #96682c; } .main-account__tab-item:not(.active):hover a, .mobile-account-nav__item:not(.active):hover a { color: #96682c; transition: color 0.2s linear; } .main-account__tab-item:hover { color: var(--color-button-primary); } .main-account__tab-item.active { color: var(--color-button-primary); } .main-account__tab-item.active div { position: relative; } .main-account__tab-item > a > div { display: flex; align-items: center; justify-content: start; column-gap: 16px; transform: translateX(-20px); padding: 12px 24px; } @media (min-width: 769px) { .main-account__tabs { flex-direction: column; } } @media only screen and (max-width: 768px) { .main-account__tab-item { padding: 12px 16px; } .main-account__tabs { border-bottom: 1px solid #bdbbba; } } @media (min-width: 769px) { .main-account__tabs { flex-direction: column; } } /* landing page image*/ @media only screen and (max-width: 768px) { .landing-page .shopify-section:nth-of-type(2) { margin-top: 0; } .landing-page .collection-image--landscape { padding-top: 50%; } } /*Product detail*/ @media only screen and (max-width: 768px) { .product-detail { padding-top: 24px; } .product-detail .card-content { padding: 24px; } .product-detail .page-width { padding: 0; } .product-detail .specs-table { padding: 8px 0; } .product-detail .spec-row { padding: 8px 24px; flex-direction: column; row-gap: 8px; } .product-detail .spec-row .spec-label, .product-detail .spec-row .spec-value { width: 100%; } .product-detail .jdgm-rev-widg__header { width: calc(100% + 48px); position: relative; left: -24px; background-color: #34240d; color: white; padding: 24px; } .product-detail .jdgm-rev-widg { padding-top: 0 !important; } .product-detail .jdgm-row-stars .jdgm-widget-actions-wrapper { margin-bottom: 0px; } .product-detail .jdgm-write-rev-link { background-color: white !important; color: black !important; } .product-detail .jdgm-histogram__bar { background-color: white !important; } .product-detail .jdgm-histogram__frequency { color: white !important; } .product-description, .product-description .rte { margin-bottom: 0; } } /* Main account home page*/ .main-account__tab-content { display: none; animation: fadeIn 0.3s ease-in-out; } .main-account__tab-content.active { display: block; } .main-account__tab-content[id="1"].active { display: flex !important; } .main-account__tab-content .greeting { display: flex; align-items: start; } .main-account__tab-content .greeting > div h1 { margin-bottom: 18px; } .main-account__tab-content .greeting > div p { margin-bottom: 32px; font-size: 20px; font-weight: 300; max-width: 450px; } .main-account__tab-content .greeting > button { background-color: white; color: #996c49; padding: 12px 36px; border-radius: 10px; align-self: center; letter-spacing: 4px; margin-left: 0; } .main-account-content-wrapper { display: flex; flex-direction: column; width: 100%; } .quick-access { display: flex; column-gap: 40px; margin-top: 32px; } .quick-access_item { flex: 1; display: flex; flex-direction: column; row-gap: 12px; background-color: #f2f0f0; padding: 40px; align-items: center; } .quick-access .btn { align-self: center; padding: 30px; } .quick-access .btn svg { width: 40px; height: 40px; } .quick-access_title { font-size: 22px; font-weight: bold; } .quick-acces_description { font-size: 18px; font-weight: 300; text-align: center; } @media only screen and (max-width: 768px) { .quick-access { flex-direction: column; row-gap: 40px; } .greeting { flex-direction: column; } } @media only screen and (max-width: 768px) { .main-account__tab-container { display: none; } } @media only screen and (max-width: 768px) { .mobile-nav-account-open .site-nav__link:not(.mobile-nav-account-trigger) { display: none; } .site-header_mobile-account-nav { padding-bottom: 0; } } @media only screen and (max-width: 768px) { .table--responsive th, .table--responsive td { text-align: left; } .table--responsive td.block-order__payment-status { border-right: 1px solid #bdbbba; padding-right: 24px; } .table--responsive td.block-order__fullfillment-status { padding-left: 24px; } .table--responsive td.block-order__payment-status, .table--responsive td.block-order__fullfillment-status { display: inline-block; width: 50%; clear: unset; } .table--responsive td.block-order__fullfillment-status > div, .table--responsive td.block-order__payment-status > div { width: 100% !important; } .account-order-table tbody td:first-child { background-color: white; border-width: 0; } .main-account__tab-content .section-header__subtitle-wrapper.section-header { padding-bottom: 16px; border-bottom: 1px solid #e3e2e1; } .account-order-table .btn.btn--secondary.mobile-cta { margin: 8px 0 16px 0; border: 1px solid #96682c; } .block-order__payment-status::before, .block-order__fullfillment-status::before { margin-bottom: 8px; } .main-account__tab-content .main-account__shortcut-list { grid-template-columns: repeat(1, 1fr) !important; } .main-account__tab-content { flex-direction: column; } .page-width.main-account__tab-content { padding: 0; } .page-width.main-account__tab-content nav { padding: var(--page-width-padding); } } .main-account-container > div:first-child { display: flex; } .page-content.main-account__tab-container { max-width: 300px; flex: 0 0 25%; } .main-account__shortcut-list { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .main-account__shortcut-list a .card { width: 100%; border: 1px solid #e3e2e1; display: flex; align-items: start; column-gap: 16px; padding: 16px; margin-bottom: 0; } .main-account__shortcut-list a > .card > div:first-child { background-color: #b9802d; height: 48px; width: 48px; color: white; } .main-account__tab-content .rewards-club-wrapper a.btn { width: 100%; max-width: 300px; } .main-account__tab-content .rewards-club-wrapper a.btn > h4 { margin: 2px 2px; } .page-width.main-account__tab-content { flex-wrap: wrap; column-gap: 30px; } .main-account__shortcut--title { margin-bottom: 4px; } .main-account__shortcut--subtitle { margin-bottom: 4px; } .main-account__shortcut--subtitle { font-weight: 400; } .main-account__shortcut { padding: 24px; flex: 1; flex-basis: 100%; } .main-account__shortcut { padding: 24px; flex: 1; flex-basis: 100%; } @media only screen and (max-width: 768px) { .main-account__shortcut { flex-basis: 100%; } } .card-content--center { padding: 24px; flex: 1; display: flex; text-align: center; align-items: center; flex-direction: column; } .page-width.main-account__tab-content:first-of-type { flex-wrap: wrap; column-gap: 30px; } .main-account-breadcrumb { width: 100%; font-size: var(--type-base-size); } .main-account-breadcrumb span, .main-account-breadcrumb a { color: #989593; } .main-account-dashboard { background-color: #f6f5f5; flex: 1 0 75%; } .main-account-section--orders { flex: 1; flex-basis: 100%; } /*Orders History Table Status Dot*/ .status-dot { width: 16px; height: 16px; border-radius: 50%; position: relative; } .status-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .status-dot-error { background-color: #f4433620; } .status-dot-error::after { background-color: #f44336; } .status-dot-success { background-color: #4caf5020; } .status-dot-success::after { background-color: #4caf50; } .status-dot-warning { background-color: #ff980020; } .status-dot-warning::after { background-color: #ff9800; } .status-dot-info { background-color: #1976d220; } .status-dot-info::after { background-color: #1976d2; } /* ============================================ QR Payment – Order List Badge & Quick Preview Modal ============================================ */ /* "Scan to Pay" solid CTA badge — shown inline when a QR code is ready. Option A: solid green fill + pulsing "ready" dot + QR icon + chevron. */ .label-qr-pay-pending { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 14px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; background-color: #4CAF50; color: #ffffff; border: none; line-height: 1.4; box-shadow: 0 1px 2px rgba(76, 175, 80, 0.35); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } .label-qr-pay-pending:hover, .label-qr-pay-pending:focus-visible { background-color: #43A047; box-shadow: 0 3px 8px rgba(76, 175, 80, 0.45); outline: none; } .label-qr-pay-pending:active { transform: translateY(0.5px); } /* Pulsing "ready for your action" dot */ .label-qr-pay-pending__dot { width: 6px; height: 6px; border-radius: 50%; background-color: #ffffff; flex-shrink: 0; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); animation: qr-pay-ready-pulse 1.6s ease-out infinite; } @keyframes qr-pay-ready-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); } 70% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* QR icon inside the badge */ .label-qr-pay-pending__qr-icon { width: 13px; height: 13px; flex-shrink: 0; } /* Trailing chevron — signals "opens something" */ .label-qr-pay-pending__chevron { width: 12px; height: 12px; flex-shrink: 0; margin-left: 2px; transition: transform 0.15s ease; } .label-qr-pay-pending:hover .label-qr-pay-pending__chevron, .label-qr-pay-pending:focus-visible .label-qr-pay-pending__chevron { transform: translateX(2px); } /* Accessibility: honor reduced-motion */ @media (prefers-reduced-motion: reduce) { .label-qr-pay-pending__dot { animation: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4); } .label-qr-pay-pending__chevron, .label-qr-pay-pending:hover .label-qr-pay-pending__chevron { transition: none; transform: none; } } /* Mobile full-width variant — same language, scaled up */ .btn-qr-pay-now-mobile { width: 100%; margin: 8px 0 4px 0; padding: 12px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 4px; background-color: #4CAF50; color: #ffffff; font-size: 14px; font-weight: 700; text-align: center; border: none; cursor: pointer; box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35); transition: background-color 0.15s ease, box-shadow 0.15s ease; } .btn-qr-pay-now-mobile:hover, .btn-qr-pay-now-mobile:focus-visible { background-color: #43A047; box-shadow: 0 4px 10px rgba(76, 175, 80, 0.45); outline: none; } .btn-qr-pay-now-mobile .label-qr-pay-pending__dot { width: 8px; height: 8px; } .btn-qr-pay-now-mobile .label-qr-pay-pending__qr-icon { width: 18px; height: 18px; } .btn-qr-pay-now-mobile .label-qr-pay-pending__chevron { width: 16px; height: 16px; } /* "Preparing" badge — amber variant for QR codes still generating */ .label-qr-pay-preparing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; background-color: #fff4e0; color: #B26A00; outline: 1px solid #FF9800; border: none; line-height: 1.4; transition: background-color 0.15s ease; } .label-qr-pay-preparing:hover { background-color: #ffe0b2; } /* Shared spinner (used in badge and mobile button) */ .label-qr-pay-preparing__spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: qr-pay-spin 0.8s linear infinite; flex-shrink: 0; } @keyframes qr-pay-spin { to { transform: rotate(360deg); } } /* Mobile "Preparing" button variant */ .btn-qr-pay-preparing-mobile { width: 100%; margin: 8px 0 4px 0; border-radius: 4px; background: #fff4e0; color: #B26A00; border: 1px solid #FF9800; font-size: 14px; font-weight: 700; text-align: center; padding: 10px 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .btn-qr-pay-preparing-mobile .label-qr-pay-preparing__spinner { width: 14px; height: 14px; } /* Quick Preview Modal – overlay */ .qr-quick-pay-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; justify-content: center; align-items: center; } .qr-quick-pay-overlay.is-active { display: flex; } .qr-quick-pay-overlay::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); cursor: pointer; } /* Quick Preview Modal – card */ .qr-quick-pay__inner { position: relative; z-index: 1; background: white; border-radius: 12px; max-width: 420px; width: calc(100% - 32px); max-height: 90vh; overflow-y: auto; padding: 32px; animation: modal-open 0.25s ease forwards; } .qr-quick-pay-overlay:not(.is-active) .qr-quick-pay__inner { animation: modal-close 0.2s ease forwards; } /* Close button */ .qr-quick-pay__close { position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #5F5A58; transition: background-color 0.15s ease; } .qr-quick-pay__close:hover { background-color: #f6f5f5; } .qr-quick-pay__close svg { width: 20px; height: 20px; } /* Header section */ .qr-quick-pay__header { text-align: center; margin-bottom: 24px; } .qr-quick-pay__title { font-size: 18px; font-weight: 700; color: #140D09; margin-bottom: 8px; } /* UnionPay provider indicator */ .qr-quick-pay__provider { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; margin-bottom: 12px; background-color: #f6f5f5; border: 1px solid #e3e2e1; border-radius: 999px; font-size: 12px; line-height: 1; color: #5F5A58; } .qr-quick-pay__provider-logo { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex-shrink: 0; } .qr-quick-pay__provider-logo img, .qr-quick-pay__provider-logo svg { width: 100%; height: 100%; display: block; object-fit: contain; } .qr-quick-pay__provider-name { font-weight: 700; color: #00447C; letter-spacing: 0.02em; } .qr-quick-pay__order-name { font-size: 14px; color: #140D09; font-weight: 700; } .qr-quick-pay__total-price { font-size: 36px; font-weight: 900; color: #4CAF50; margin-top: 8px; } /* QR image */ .qr-quick-pay__qr-wrap { display: flex; justify-content: center; margin-bottom: 16px; } .qr-quick-pay__qr-wrap img { max-width: 240px; max-height: 240px; border-radius: 8px; border: 1px solid #E3E2E1; } .qr-quick-pay__scan-label { text-align: center; margin-bottom: 24px; line-height: 1.4; word-spacing: 0.08em; } .qr-quick-pay__scan-prefix { font-size: 14px; font-weight: 400; color: #5F5A58; } .qr-quick-pay__app-name { font-size: 15px; font-weight: 700; color: #00447C; letter-spacing: 0.02em; margin-left: 6px; border-bottom: 2px solid #00447C; padding-bottom: 1px; } /* Action buttons */ .qr-quick-pay__actions { display: flex; flex-direction: column; gap: 10px; } .qr-quick-pay__btn-pay { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 4px; background: #4CAF50; color: white; font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; transition: background-color 0.15s ease; border: none; cursor: pointer; } .qr-quick-pay__btn-pay:hover { background: #43A047; color: white; text-decoration: none; } .qr-quick-pay__btn-view { display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 4px; background: transparent; color: #5F5A58; font-size: 14px; font-weight: 400; text-decoration: underline; text-align: center; } .qr-quick-pay__btn-view:hover { color: #140D09; } /* Info note explaining automatic processing after payment */ .qr-quick-pay__info-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 12px 14px; background-color: #f0f8f1; border: 1px solid #c8e6c9; border-radius: 8px; } .qr-quick-pay__info-note-icon { flex-shrink: 0; width: 20px; height: 20px; color: #4CAF50; margin-top: 1px; } .qr-quick-pay__info-note-icon svg { width: 100%; height: 100%; } .qr-quick-pay__info-note-body { flex: 1; min-width: 0; } .qr-quick-pay__info-note-title { font-size: 13px; font-weight: 700; color: #2e7d32; line-height: 1.4; margin-bottom: 4px; } .qr-quick-pay__info-note-desc { font-size: 12px; font-weight: 400; color: #5F5A58; line-height: 1.5; } /* ----- QR modal state toggles (ready vs preparing) ----- */ .qr-quick-pay__preparing-only { display: none; } .qr-quick-pay-overlay.is-preparing .qr-quick-pay__ready-only { display: none; } .qr-quick-pay-overlay.is-preparing .qr-quick-pay__preparing-only { display: block; } /* Preparing card (replaces the QR image area when preparing) */ .qr-quick-pay__preparing-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background-color: #fffaf0; border: 1px dashed #FF9800; border-radius: 12px; margin-bottom: 16px; } .qr-quick-pay__preparing-spinner { width: 48px; height: 48px; margin-bottom: 16px; } .qr-quick-pay__preparing-spinner svg { width: 100%; height: 100%; animation: qr-pay-spin 1s linear infinite; } .qr-quick-pay__preparing-spinner circle { stroke: #FF9800; stroke-dasharray: 90 160; stroke-linecap: round; } .qr-quick-pay__preparing-title { font-size: 16px; font-weight: 700; color: #B26A00; margin-bottom: 8px; } .qr-quick-pay__preparing-desc { font-size: 13px; font-weight: 400; color: #5F5A58; line-height: 1.5; margin-bottom: 4px; } .qr-quick-pay__preparing-hint { font-size: 12px; font-weight: 400; color: #989593; line-height: 1.5; font-style: italic; } /* Support contact line shown in preparing state */ .qr-quick-pay__support-note { font-size: 13px; color: #5F5A58; text-align: center; padding: 12px 0; border-top: 1px solid #E3E2E1; margin-top: 8px; line-height: 1.5; } /* Footer actions (always visible: View Full Order link) */ .qr-quick-pay__footer-actions { display: flex; justify-content: center; margin-top: 12px; } /* Desktop "View Details" column button */ .btn-view-details { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 4px; border: 1px solid #96682c; background: transparent; color: #96682c; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; } .btn-view-details:hover { background: #96682c; color: white; text-decoration: none; } /* Mobile: hide the pay link button if QR link is empty */ .qr-quick-pay__btn-pay[href=""], .qr-quick-pay__btn-pay:not([href]) { display: none; } @media only screen and (max-width: 768px) { .qr-quick-pay__inner { padding: 24px 20px; max-width: calc(100% - 24px); } .qr-quick-pay__total-price { font-size: 28px; } .qr-quick-pay__qr-wrap img { max-width: 200px; max-height: 200px; } } /*Membership Label*/ .label-membership-entry { background-color: #f9f5ee; outline: 2px solid #b9802d; color: #b9802d; } .label-membership-entry span { color: black; } .label-membership-select { background-color: #f5ecea; outline: 2px solid #9b4631; color: #9b4631; } .label-membership-vip { background-color: #ebeff9; outline: 2px solid #345cc1; color: #345cc1; } .label-membership-luxury { background-color: #fbf3e5; outline: 2px solid #d88b00; color: #d88b00; } .main-account__membership-label { justify-self: center; display: flex; align-items: center; column-gap: 8px; width: max-content; padding: 8px; border-radius: 4px; text-align: center; } .special-tag-label { width:100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 4px; } .special-tag-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; width: 100%; } .special-discount { padding: 2px 6px; font-weight: bold; font-size: 10px; color: rgb( var(--custom-label-text-color) ); /* Replace with your theme color */ background-color: #CC0C39; border: 1px solid #CC0C39; border-radius: 0px; max-width: 100%; word-wrap: break-word; white-space: normal; } .special-display-name { font-size: 10px; font-weight: bold; color: #CC0C39; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; } .special-checkout-note { font-size: 10px; font-weight: bold; color: rgba(255, 0, 0, 0.8); } .variant-discount-label { position: absolute; top: -5px; right: -1.3px; padding: 0px 4px; font-size: 10px; background: red; color:white; font-weight:bold } @media only screen and (min-width: 768px) { .special-discount, .special-display-name, .special-checkout-note, .variant-discount-label, .v-discount { font-size: 11px; } } .template-product .special-tag-label { margin-bottom: 4px; } .template-product .special-discount, .template-product .special-display-name, .template-product .special-checkout-note { font-size: 14px; } .main-order-history{ background-color: #f6f5f5; flex: 1 0 75%; } .main-order-history .order-grid-container { display: grid; grid-template-columns: max-content 1fr; row-gap: 1rem; column-gap: 1.5rem; align-items: baseline; } .information-container { display: grid; grid-template-columns: max-content 1fr; row-gap: 0.5rem; column-gap: 1.5rem; align-items: baseline; } .order-summary__header { display: flex; align-items: center; gap: 24px; } .order-summary .order-summary__title { font-size: 24px; } .order-summary .order-summary__name { font-size: 30px; font-weight: 700; } .order-details-container{ border-radius: 4px; background: #FFF; display: flex; padding: 24px 32px 32px 32px; flex-direction: column; align-items: flex-start; gap: 24px; align-self: stretch; } .qrc-payment { width: 100%; display: flex; flex-direction: row; gap:40px; align-items: start; } .qrc-payment__total { color: #989593; font-size: 24px; font-weight:500; } .qrc-payment__total-price { color: #4CAF50; font-size: 64px; font-weight:900; margin-top: 8px; } .qrc-image-container { display: flex; flex-direction: column; gap: 16px; justify-content: start; align-items: center; margin-left: auto; } .order-details-section{ border-radius: 8px; border: 1px solid var(--text-88, #E3E2E1); display: flex; padding: 24px 24px 32px 24px; flex-direction: column; align-items: flex-start; gap: 24px; align-self: stretch; } .order-details-section .header{ color: var(--text-0, #140D09); font-family: Roboto; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; } .order-details-section .title{ color: var(--text-32, #5F5A58); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } @media (max-width: 640px) { .main-order-history .order-details-container{ padding: 20px; } .main-order-history .order-details-section{ padding: 0; border: 0; } .main-order-history .infromation-wrapper { grid-template-columns: 1fr !important; } .main-order-history .order-summary{ padding: 16px 8px !important; } .main-order-history .order-status{ justify-content: center; } .order-summary__header { gap: 16px; } .order-summary .order-summary__title { font-size: 20px; } .order-summary .order-summary__name { font-size: 20px; font-weight: 700; } .qrc-payment { flex-direction: column; gap:20px; align-items: unset; } .qrc-payment__total { font-size: 20px; } .qrc-payment__total-price { font-size: 40px; } .qrc-image-container { margin-left: unset; } } /* ----- Order detail page: QR payment preparing state ----- */ /* Right column (where QR image would render) — match QR image 300px width */ .qrc-image-container--preparing { max-width: 320px; width: 100%; } .qrc-image-container--preparing .qrc-preparing-card { width: 100%; min-height: 300px; justify-content: center; margin-bottom: 0; } .qrc-image-container--preparing .qrc-preparing-card .qr-quick-pay__preparing-spinner { width: 56px; height: 56px; } /* Support note when stacked under the preparing card on the detail page — drop the divider line */ .qrc-image-container--preparing .qrc-preparing-support { border-top: 0; padding-top: 12px; margin-top: 12px; width: 100%; } /* Disabled payment button placeholder while QR is being generated */ .qrc-preparing-disabled-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; width: 100%; border-radius: 4px; background: #fff4e0; color: #B26A00; border: 1px dashed #FF9800; font-weight: 700; font-size: 14px; cursor: not-allowed; user-select: none; } .qrc-preparing-disabled-btn .label-qr-pay-preparing__spinner { width: 14px; height: 14px; } @media (max-width: 640px) { .qrc-image-container--preparing { max-width: 100%; } .qrc-image-container--preparing .qrc-preparing-card { min-height: 260px; } } .order-line-thumb { padding: 0px; } .order-lines-mobile { display: flex; flex-direction: column; gap: 16px; width:100%; } .order-line { padding: 12px 0; } .order-line__top { display: flex; gap: 16px; align-items: center; } .order-line__thumb { width: 64px; min-width: 64px; } .order-line__info a { display: inline-block; font-weight: 600; line-height: 1.3; } .order-line__grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin-top: 16px; } .order-line__label { color: #6C6867; font-weight: 600; } .order-line__value { text-align: right; } .cart__price--strikethrough { text-decoration: line-through; opacity: .6; margin-right: 6px; } .cart__discount { font-weight: 700; } /* Optional: tighten the table on desktop only */ @media (min-width: 750px) { .order-line { border: 0; } } .order-status-container{ margin-left: -24px; margin-right: -24px; } .main-order-history .cart-icon svg{ width:24px; height:24px; display:block } #Avada-Joy_FloatingButton{ position: fixed; z-index: 99; } #shopify-chat{ position: fixed; z-index: 99; } .filter-title { font-size: 16px; } /* Product List Layout */ [data-view='list'] .image-variant-wrapper { display: flex; align-items: center; gap: 24px; }' [data-view=list] .add-to-cart { align-self: center } [data-view=list] .variant-view .special-tag-label { flex-direction: row; justify-content: start; align-items: center; gap: 8px; } [data-view=list] .variant-view .special-tag-row { width: auto !important; } [data-view='list'] .image-variant-wrapper .variant-view.discount-header-wrapper{ display: none !important; } @media only screen and (max-width: 480px) { } @media only screen and (max-width: 768px) { [data-view=list] .variant-view .special-tag-label { flex-wrap: wrap; margin-bottom: 0!important; } [data-view='list'] .product__meta { display: none !important; } [data-view='list'] .image-variant-wrapper { flex-direction: column; } [data-view='list'] .image-header-wrapper { display: flex !important; gap: 16px; align-self: start } [data-view='list'] .variant-view.discount-header-wrapper{ display: none !important; } [data-view='list'] .image-variant-wrapper .variant-view.discount-header-wrapper{ display: flex !important; } [data-view='list'].new-grid { margin: 0px !important; } } :root{ --thumb-w-desktop:147px; --thumb-w-mobile:64px; --cta-w-desktop:147px; --cta-w-mobile:64px; --variant-title-w:15%; /* fixed variant title width on desktop */ --surface:#ffffff; --border:#e7e7ea; --text:#1a1a1c; --muted:#6b6f76; --muted-2:#9aa0a6; --brand:#b8762a; /* cart button color */ --danger:#e14b44; /* sold out / notify color */ --ok:#1a7f37; --radius:14px; --gap-lg:20px; --gap:14px; --gap-sm:10px; --bp:768px; } /* Make the whole variant list take the remaining width in the row */ .variant-view.variant-list { width: 100%; flex: 1 1 auto; } /* The row card */ .variant-row{ display:grid; grid-template-columns: var(--variant-title-w) 1fr var(--cta-w-desktop); grid-template-areas: "vtitle vmeta vcta"; gap:var(--gap); align-items:center; padding:14px; background:#fff; } .variant-row .v-discount { width: max-content; width: -webkit-max-content; background: red; color:white; font-weight:bold; padding: 2px 4px; font-size: 10px; } .v-title{ grid-area:vtitle; font-weight:700; font-size: var(--type-base-size); letter-spacing:.2px; } /* metadata grid: equal-width cells */ .v-meta{ grid-area:vmeta; display:grid; grid-template-columns: repeat(4, 1fr); /* price | original | availability | qty */ gap:var(--gap); align-items:center; } .cell{min-width:0} .cell .label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:4px; } .cell .value{font-weight:700;} .price .value{color: var(--color-button-primary);} .price .inline-orig-price { display: none; text-decoration: line-through; color: black; } .orig .value{text-decoration:line-through} .stock .value{font-weight:800} .stock .in-stock{color:var(--ok)} .stock .sold-out{color:var(--danger)} /* quantity control */ .qty .qty-ctrl{ display:flex; align-items:center; border:1px solid var(--border); overflow:hidden; height:44px; max-width:240px; } .qty-ctrl button{ width:40px;height:44px;border:0;background:#f4f5f7;cursor:pointer;font-size:20px;line-height:1 } .qty-ctrl input{ width:72px;height:44px;border:0;border-inline:1px solid var(--border); text-align:center;font-weight:600;font-size:16px;outline:none;background:#fff } /* CTA column */ .v-cta{grid-area:vcta;width:var(--cta-w-desktop);justify-self:end} .v-cta .btn { width: 100%; min-width: unset; gap: 8px; display: flex; font-size: var(--type-base-size); justify-content: center; align-items: center; } .v-cta .btn[disabled]{cursor:not-allowed; background: #F44336; color:white;} /* cart / bell icons (inline SVG sizing) */ .v-cta .btn svg{width:22px;height:22px;display:block} /* sold-out variant adjustments */ .variant-row.is-sold-out .qty-ctrl{opacity:.5;pointer-events:none} .variant-row.is-sold-out .btn{background:var(--danger)} @media (min-width: 769px) { .variant-row { border:1px solid var(--border); border-radius:12px; } } @media (max-width: 1024px) { :root{ --variant-title-w:20% } .variant-row { grid-template-columns: var(--variant-title-w) 1fr var(--cta-w-mobile); } .v-meta { grid-template-columns: repeat(3, 1fr); } .v-cta { width: var(--cta-w-mobile); } .v-cta .add-to-cart--text, .stock{display:none} } /* ----- Mobile styles ----- */ @media (max-width: 768px){ .product-card{ grid-template-columns: var(--thumb-w-mobile) 1fr; gap:var(--gap); padding:14px; } .product-thumb{width:var(--thumb-w-mobile)} .product-header h2{font-size:18px} .product-attrs{font-size:13px} /* Variant becomes 2-row layout on mobile */ .variant-row{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) var(--cta-w-mobile); grid-template-areas: "vtitle price price" "qty qty vcta"; column-gap: 0.5rem; row-gap: 0.5rem; align-items: center; /* grid-template-columns: 1fr var(--cta-w-mobile); grid-template-rows: auto auto; grid-template-areas: "vtitle price" "qty vcta"; */ padding:12px; } /* allow children of .v-meta to participate in the parent grid */ .v-meta{display:contents} /* map metadata children to mobile grid areas */ .price{grid-area:price;justify-self:end;text-align:right} .orig, .price .label, .qty .label{display:none} /* hide on mobile per spec */ .price .value { font-size: 18px; } .price .inline-orig-price { display: inline; margin-right: 8px; } .qty{grid-area:qty} .v-cta{grid-area:vcta;width:var(--cta-w-mobile)} } [data-view='list'] .title-rating-wrapper { display: flex !important; gap: 16px; } @media (max-width: 768px) { [data-view='list'] .js-qty__wrapper { width: 100%; max-width: 100%; } [data-view='list'] .product__quantity { width: 100%; } [data-view='list'] .add-to-cart--text { display: none; } [data-view='list'] .btn.add-to-cart:disabled .svg-wrapper{ display: block !important; } [data-view='list'] .btn.add-to-cart { height: 38px; width: 100%; min-width: 0 !important; } [data-view='list'] .v-label { display: none; } [data-view='list'] .v-row { padding: 16px !important; } [data-view=list] .compare-at-price-wrapper{ display: flex !important; align-items: end; } [data-view=list] .now-price-wrapper{ justify-content: end; font-size: 20px; } [data-view=list] .now-price-wrapper .v-val { color: black !important; } [data-view=list] .compare-at-price-wrapper .v-val.grid-product__price--savings{ font-size: 14px !important; color: #989593 !important; } [data-view='list'] .variant-view{ gap: 0 !important; } [data-view='list'] .variant-view .v-row{ border: 0 !important; } [data-view='list'] .grid-item.grid-product{ border-radius: 8px; border: 1px solid #E3E2E1; } [data-view='list'] .product-grid-item, [data-view='list'] .grid-item__content{ border-radius: 8px !important; } [data-view='list'] .grid-item__content{ border-radius: 8px !important; } .image-variant-wrapper{ border-radius: 8px; gap: 0 !important; } [data-view='list'] .image-header-wrapper{ border-radius: 8px 8px 0 0; padding: 16px; border-bottom: 1px solid #E3E2E1; width: 100%; } [data-view='list'] .grid-product__image-wrap, [data-view='list'] .grid__image-ratio, [data-view='list'] .grid-item__link { width: 100px; height: 100px; max-width:100px; align-self: start; } .variant-view.variant-list block-buy-buttons.product-block { border-bottom: 1px solid #E3E2E1; } .variant-view.variant-list block-buy-buttons.product-block:last-of-type { border: 0 !important; } [data-view='list'] .title-rating-wrapper{ flex-direction: column-reverse; gap: 8px; } } .brand-subcollection-template .v-col--original-price, .collection-brand-template .v-col--original-price { display: flex; } .v-col--our-price .v-val{ color: #B9802D; } /* Contact form -> match Order Support Request card look */ .contact-form .osr-root, .contact-form-[id] .osr-root, [class*="contact-form-"] .osr-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 16px; color: rgba(0,0,0,.92); } [class*="contact-form-"] .osr-card{ background:#fff; border:1px solid rgba(0,0,0,.10); border-radius:16px; overflow:hidden; } [class*="contact-form-"] .osr-card__header{ padding:24px 24px 12px; } [class*="contact-form-"] .osr-title{ margin:0 0 8px; } [class*="contact-form-"] .osr-subtitle{ margin:0; opacity:.85; } [class*="contact-form-"] .osr-card__body{ padding: 24px 24px 24px; } [class*="contact-form-"] .osr-grid{ display:grid; gap:16px; } [class*="contact-form-"] .osr-grid--2{ grid-template-columns: 1fr 1fr; } @media (max-width: 768px){ [class*="contact-form-"] .osr-grid--2{ grid-template-columns: 1fr; } } [class*="contact-form-"] .osr-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } [class*="contact-form-"] .osr-input, [class*="contact-form-"] .osr-textarea{ width:100%; border:1px solid #e3e2e1; border-radius:12px; padding:14px 16px; background:#fff; outline:none; } [class*="contact-form-"] .osr-input:focus, [class*="contact-form-"] .osr-textarea:focus{ border-color: rgba(0,0,0,.35); box-shadow: 0 0 0 3px rgba(0,0,0,.06); } [class*="contact-form-"] .osr-actions{ margin-top: 8px; } [class*="contact-form-"] .osr-btn{ display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; padding:14px 28px; cursor:pointer; font-weight:700; background: var(--color-button-primary); color: var(--color-button-primary-text); } [class*="contact-form-"] .osr-note{ border-radius:12px; padding:12px 14px; margin: 0 0 16px; } [class*="contact-form-"] .osr-note--success{ background: rgba(76,175,80,.10); border: 1px solid rgba(76,175,80,.25); } [class*="contact-form-"] .osr-note--error{ background: rgba(244,67,54,.08); border: 1px solid rgba(244,67,54,.20); } [class*="contact-form-"] .osr-disclaimer{ margin-top: 14px; font-size: 14px; opacity: .8; } .page-width.page-get-in-tocuh-max-width{ width: 100%; margin-left: auto; margin-right: auto; }.product-single__meta { padding-top: 65px; padding-left: 45px; } @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; } .product__policies { font-size: 0.85em; } .product-single__title { margin-bottom: 20px; word-wrap: break-word; } .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); } .product-single__meta { padding-top: 10px; }