@charset "UTF-8"; *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { width: 100%; min-width: 320px; margin: 0; overflow-x: hidden; background-color: rgba(var(--bg-color)); overflow-wrap: break-word; overflow-wrap: anywhere; } body.fixed { padding-right: var(--scrollbar-width); } body.overflow-hidden { padding-right: var(--scrollbar-width); } body.overflow-hidden::after { content: ""; position: absolute; z-index: 29; right: 0; bottom: 0; width: var(--scrollbar-width, 0); height: 100%; background: #ffffff; } body.overlay-predictive-search { overflow: hidden; } summary { overflow: hidden; list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } mark { background-color: transparent; color: inherit; font-weight: bold; } .color-scheme--1 { --bg-color: var(--color-scheme-1-bg); --bg-grad: var(--color-scheme-1-grad, "none"); --btn-bg-color: var(--color-scheme-1-btn-bg); --btn-bg-hover-color: var(--color-scheme-1-btn-bg-hover); --btn-text-color: var(--color-scheme-1-btn-text); --heading-color: var(--color-scheme-1-heading); --scrollbar-color: var(--color-scheme-1-text); --swatch-border-color-active: var(--color-scheme-1-text); --swatch-border-color-default: var(--color-scheme-1-text); --text-color: var(--color-scheme-1-text); --coll-card-border-color: rgb(var(--color-scheme-1-heading)); } .color-scheme--2 { --bg-color: var(--color-scheme-2-bg); --bg-grad: var(--color-scheme-2-grad, "none"); --btn-bg-color: var(--color-scheme-2-btn-bg); --btn-bg-hover-color: var(--color-scheme-2-btn-bg-hover); --btn-text-color: var(--color-scheme-2-btn-text); --heading-color: var(--color-scheme-2-heading); --scrollbar-color: var(--color-scheme-2-text); --swatch-border-color-active: var(--color-scheme-2-text); --swatch-border-color-default: var(--color-scheme-2-text); --text-color: var(--color-scheme-2-text); --coll-card-border-color: rgb(var(--color-scheme-2-heading)); } .color-scheme--3 { --bg-color: var(--color-scheme-3-bg); --bg-grad: var(--color-scheme-3-grad, "none"); --btn-bg-color: var(--color-scheme-3-btn-bg); --btn-bg-hover-color: var(--color-scheme-3-btn-bg-hover); --btn-text-color: var(--color-scheme-3-btn-text); --heading-color: var(--color-scheme-3-heading); --scrollbar-color: var(--color-scheme-3-text); --swatch-border-color-active: var(--color-scheme-3-text); --swatch-border-color-default: var(--color-scheme-3-text); --text-color: var(--color-scheme-3-text); --coll-card-border-color: rgb(var(--color-scheme-3-heading)); } .color-scheme--white:not(.mobile-stacked) { --bg-color: 0 0 0 0; --btn-bg-color: var(--color-scheme-white-text, 255 255 255); --btn-bg-hover-color: var(--color-scheme-white-hover, 230 230 230); --btn-text-color: var(--color-scheme-white-text-contrast, 0 0 0); --heading-color: var(--color-scheme-white-text, 255 255 255); --scrollbar-color: var(--color-scheme-white-text, 255 255 255); --swatch-border-color-active: var(--color-scheme-white-text, 255 255 255); --swatch-border-color-default: var(--color-scheme-white-text, 255 255 255); --text-color: var(--color-scheme-white-text, 255 255 255); } .color-scheme { background: var(--bg-grad); background-color: rgba(var(--bg-color)); color: rgb(var(--text-color)); } .color-scheme .section__heading, .color-scheme .section__block--heading, .color-scheme .section__block--subheading, .color-scheme .text-overlay__heading, .color-scheme .text-overlay__subheading, .color-scheme .card__title { color: rgb(var(--heading-color)); } .color-scheme a:not(.btn), .color-scheme button.link { color: inherit; } .color-scheme .custom-select__btn, .color-scheme .price-range__input-wrapper, .color-scheme .input, .color-scheme .input-with-button, .color-scheme .select::after { --input-bg-color: var(--bg-color); --input-text-color: var(--text-color); } .color-scheme:not(.color-scheme--no-btns) .btn--secondary { --btn-alt-bg-alpha: 0; --btn-alt-text-color: var(--btn-bg-color); background-color: transparent; } .color-scheme:not(.color-scheme--no-btns) .is-loading { --btn-alt-text-color: var(--btn-bg-color); --text-color: var(--btn-bg-color); } .color-scheme:not(.color-scheme--no-btns) .qty-input { --btn-alt-text-color: var(--btn-bg-color); --input-text-color: var(--btn-bg-color); border-color: rgb(var(--btn-bg-color)); background-color: transparent; } @media (min-width: 600px) { .color-scheme--white { --bg-color: 0 0 0 0; --btn-bg-color: var(--color-scheme-white-text, 255 255 255); --btn-bg-hover-color: var(--color-scheme-white-hover, 230 230 230); --btn-text-color: var(--color-scheme-white-text-contrast, 0 0 0); --heading-color: var(--color-scheme-white-text, 255 255 255); --scrollbar-color: var(--color-scheme-white-text, 255 255 255); --swatch-border-color-active: var(--color-scheme-white-text, 255 255 255); --swatch-border-color-default: var(--color-scheme-white-text, 255 255 255); --text-color: var(--color-scheme-white-text, 255 255 255); } } :root { --fluid-vw: 100vw; --fluid-max-vw: 1536; --fluid-calc: (var(--fluid-vw) - 32rem) / (var(--fluid-max-vw) / 10 - 32) + 0.1rem; --fluid-1-065: ((1.065 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-125: ((1.125 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-2: ((1.2 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-25: ((1.25 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-3: ((1.3 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-4: ((1.4 / 10 - 0.1) * var(--fluid-calc)); --fluid-1-5: ((1.5 / 10 - 0.1) * var(--fluid-calc)); } @media (min-width: 1536px) { :root { --fluid-vw: calc(var(--fluid-max-vw) * 1px); } } :focus { outline: 0; } :focus-visible, .focus-label:focus-visible + label, .focus-label-before:focus-visible + label::before { outline: auto Highlight; outline: auto -webkit-focus-ring-color; } .is-focused, .focus-label.is-focused + label, .focus-label-before.is-focused + label::before, .no-js :focus, .no-js .focus-label:focus + label, .no-js .focus-label-before:focus + label::before { outline: auto Highlight; outline: auto -webkit-focus-ring-color; } .no-js :focus:not(:focus-visible), .no-js .focus-label:focus:not(:focus-visible) + label, .no-js .focus-label-before:focus:not(:focus-visible) + label::before { outline: 0; } .focus-inset:focus-visible { outline-offset: -2px; } .focus-inset.is-focused, .no-js .focus-inset:focus { outline-offset: -2px; } :root { --column-gap: var(--grid-column-gap); --gutter: var(--gutter-sm, 20px); --row-gap: calc(10 * var(--space-unit)); --space-unit: 0.4rem; --viewport-width: calc(100vw - var(--scrollbar-width, 0)); } .container { width: 100%; max-width: calc(var(--page-width, 1320px) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); } .page-width { width: var(--page-width, 1320px); max-width: var(--page-width, 1320px); margin-right: auto; margin-left: auto; } .reading-width { max-width: var(--reading-width, 48em); margin-right: auto; margin-left: auto; } .reading-width--inline { max-width: var(--reading-width, 48em); } .form-width { max-width: 26em; } .screen-height { min-height: var(--viewport-height, 100vh); } .shopify-section:first-child .screen-height { min-height: calc(var(--viewport-height, 100vh) - var(--content-start, 200px)); } @media (min-width: 600px) { :root { --column-gap: calc(var(--grid-column-gap) * 1.6); --gutter: var(--gutter-md, 32px); } } @media (min-width: 1280px) { :root { --gutter: var(--gutter-lg, 80px); } } .section { display: block; width: 100%; margin: calc(var(--section-gap) * var(--fluid-1-5)) auto; padding-bottom: 0.02px; } .section:empty { margin-top: 0; margin-bottom: 0; } .section--template { margin: calc(var(--section-gap) * var(--fluid-1-5)) auto; } .section--full-width { margin: 0; } .section--padded, .section--padded-default { padding: calc(var(--section-gap) * var(--fluid-1-5)) 0; } .section--padded-xsmall { padding-top: calc(3 * var(--space-unit)); padding-bottom: calc(3 * var(--space-unit)); } .section--padded-small { padding-top: calc(6 * var(--space-unit)); padding-bottom: calc(6 * var(--space-unit)); } .section--padded-medium { padding-top: calc(8 * var(--space-unit)); padding-bottom: calc(8 * var(--space-unit)); } .section__header, .section__heading { max-width: 100%; margin-bottom: var(--heading-gap); } .mb-heading { margin-bottom: var(--heading-gap); } .section-header .link { margin-top: 6px; margin-bottom: 6px; } .section__header--center { grid-template-columns: 1fr auto 1fr; } .section__block { max-width: 100%; margin-bottom: calc(4 * var(--space-unit)); } .section__block:last-child { margin-bottom: 0; } .section__block.reading-width--inline { max-width: var(--reading-width, 48em); } .section__block + .section__block--button { margin-top: calc(6 * var(--space-unit)); } .section__block + .section__block--buttons { margin-top: calc(4 * var(--space-unit)); } .section__block--buttons { align-items: flex-end; column-gap: calc(4 * var(--space-unit)); row-gap: calc(4 * var(--space-unit)); } .shopify-policy__container, .shopify-challenge__container, .shopify-email-marketing-confirmation__container { max-width: var(--reading-width, 48em) !important; padding: calc(var(--section-gap) * var(--fluid-1-5)) var(--gutter) !important; } .shopify-policy__title { text-align: var(--heading-align) !important; } .shopify-challenge__button { margin-top: calc(8 * var(--space-unit)) !important; } .cc-apps:not(:has(.shopify-app-block)) { display: none; } @media (max-width: 768.98px) { .section__header--center { grid-template-columns: 1fr; grid-template-rows: 2; } } @media (min-width: 769px) { .section__block + .section__block--button { margin-top: calc(8 * var(--space-unit)); } .section--padded-xsmall { padding-top: calc(2 * var(--space-unit)); padding-bottom: calc(2 * var(--space-unit)); } .section--padded-small { padding-top: calc(4 * var(--space-unit)); padding-bottom: calc(4 * var(--space-unit)); } .section--padded-medium { padding-top: calc(6 * var(--space-unit)); padding-bottom: calc(6 * var(--space-unit)); } } :root { --heading-type-scale: 1.2; --h6: calc(var(--body-font-size) + var(--heading-scale-start)); --h5: var(--h6) * var(--heading-type-scale); --h4: var(--h5) * var(--heading-type-scale); --h3: var(--h4) * var(--heading-type-scale); --h2: var(--h3) * var(--heading-type-scale); --h1: var(--h2) * var(--heading-type-scale); --h0: var(--h1) * var(--heading-type-scale); --h6-font-size: calc((var(--h6) / 1.065) * var(--fluid-1-065)); --h5-font-size: calc((var(--h5) / 1.125) * var(--fluid-1-125)); --h4-font-size: calc((var(--h4) / 1.2) * var(--fluid-1-2)); --h3-font-size: calc((var(--h3) / 1.3) * var(--fluid-1-3)); --h2-font-size: calc((var(--h2) / 1.4) * var(--fluid-1-4)); --h1-font-size: calc((var(--h1) / 1.5) * var(--fluid-1-5)); --h0-font-size: calc((var(--h0) / 1.5) * var(--fluid-1-5)); } body { color: rgb(var(--text-color)); font-family: 'NeueHaasUnica', sans-serif; font-size: 14px; font-style: var(--body-font-style); font-weight: var(--body-font-weight); line-height: 1.5; } .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .font-heading { margin: 0 0 0.5em; color: rgb(var(--heading-color)); font-family: 'NeueHaasUnica', sans-serif; font-style: var(--heading-font-style); font-weight: var(--heading-font-weight); line-height: calc(4px + 2.4ex); text-transform: var(--heading-text-transform); } .h0, .text-h0 { font-size: var(--h0-font-size); line-height: 1.25; } h1, .h1, .text-h1 { font-size: var(--h1-font-size); line-height: 1.25; } h2, .h2, .text-h2 { font-size: var(--h2-font-size); line-height: 1.3; } h3, .h3, .text-h3 { font-size: var(--h3-font-size); line-height: 1.3; } h4, .h4, .text-h4 { font-size: var(--h4-font-size); line-height: 1.3; } h5, .h5, .text-h5 { font-size: var(--h5-font-size); line-height: 1.3; } h6, .h6, .text-h6 { font-size: 16px; line-height: 1.4; } .font-body { color: rgb(var(--text-color)); font-family: 'NeueHaasUnica', sans-serif; font-style: var(--body-font-style); font-weight: var(--body-font-weight); line-height: 1.5; text-transform: initial; } p { margin: 0 0 1em; } p:empty { display: none; } hr { width: 100%; height: 1px; margin: calc(6 * var(--space-unit)) 0; border: 0; background-color: rgba(var(--text-color)/0.15); } address { font-style: normal; } .text-body-extra_small { font-size: 0.8em; } .text-body-small { font-size: 0.9em; } .text-body-large { font-size: 1.1em; } .text-body-extra_large { font-size: 1.2em; } .small-text { font-size: 0.875em; } .regular-text { font-size: 1em; } .enlarge-text { font-size: 1.25em; } .enlarge-text.reading-width, .enlarge-text.reading-width--inline { max-width: calc(var(--reading-width, 48em) * 0.75); } .large-text { font-size: 2rem; } .subheading { color: rgb(var(--heading-color)); font-family: 'NeueHaasUnica', sans-serif; font-style: var(--heading-font-style); font-weight: var(--heading-font-weight); text-transform: var(--subheading-text-transform); } .subheading:not(:last-child) { margin-bottom: 1em; } .subheading-case { text-transform: var(--subheading-text-transform, none); } .contained-heading { max-width: 540px; } .rte::after { content: ""; display: block; clear: both; } .rte > p:last-child { margin-bottom: 0; } .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { color: rgb(var(--heading-color)); } .rte h1:not(:first-child), .rte h2:not(:first-child), .rte h3:not(:first-child), .rte h4:not(:first-child), .rte h5:not(:first-child), .rte h6:not(:first-child) { margin-top: 0.2em; } .rte h1:not(:last-child), .rte h2:not(:last-child), .rte h3:not(:last-child), .rte h4:not(:last-child), .rte h5:not(:last-child), .rte h6:not(:last-child) { margin-bottom: 0.2em; } .rte iframe { max-width: 100%; } .rte--inherit-heading-color h1, .rte--inherit-heading-color h2, .rte--inherit-heading-color h3, .rte--inherit-heading-color h4, .rte--inherit-heading-color h5, .rte--inherit-heading-color h6 { color: inherit; } @media (max-width: 599.98px) { .xs\:regular-text { font-size: 1em; } .xs\:text-h6 { font-size: var(--h6-font-size); line-height: 1.4; } } @media (min-width: 769px) { .enlarge-text { font-size: 1.5em; } .contained-heading { max-width: 865px; } } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none{ pointer-events: none; } .pointer-events-auto{ pointer-events: auto; } .visible{ visibility: visible; } .invisible{ visibility: hidden; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: -webkit-sticky; position: sticky; } .inset-0{ inset: 0; } .bottom-0{ bottom: 0; } .left-0{ left: 0; } .right-0{ right: 0; } .top-0{ top: 0; } .z-10{ z-index: 10; } .col-span-2{ grid-column: span 2 / span 2; } .col-span-full{ grid-column: 1 / -1; } .col-start-1{ grid-column-start: 1; } .col-end-3{ grid-column-end: 3; } .row-span-2{ grid-row: span 2 / span 2; } .row-span-3{ grid-row: span 3 / span 3; } .m-0{ margin: 0; } .mx-auto{ margin-left: auto; margin-right: auto; } .mb-0{ margin-bottom: 0; } .mb-1{ margin-bottom: var(--space-unit); } .mb-10{ margin-bottom: calc(10 * var(--space-unit)); } .mb-12{ margin-bottom: calc(12 * var(--space-unit)); } .mb-16{ margin-bottom: calc(16 * var(--space-unit)); } .mb-2{ margin-bottom: calc(2 * var(--space-unit)); } .mb-3{ margin-bottom: calc(3 * var(--space-unit)); } .mb-4{ margin-bottom: calc(4 * var(--space-unit)); } .mb-5{ margin-bottom: calc(5 * var(--space-unit)); } .mb-6{ margin-bottom: calc(6 * var(--space-unit)); } .mb-8{ margin-bottom: calc(8 * var(--space-unit)); } .mb-section{ margin-bottom: calc(var(--section-gap) * var(--fluid-1-5)); } .ml-2{ margin-left: calc(2 * var(--space-unit)); } .ml-auto{ margin-left: auto; } .mr-2{ margin-right: calc(2 * var(--space-unit)); } .mr-auto{ margin-right: auto; } .mt-1{ margin-top: var(--space-unit); } .mt-10{ margin-top: calc(10 * var(--space-unit)); } .mt-12{ margin-top: calc(12 * var(--space-unit)); } .mt-16{ margin-top: calc(16 * var(--space-unit)); } .mt-2{ margin-top: calc(2 * var(--space-unit)); } .mt-3{ margin-top: calc(3 * var(--space-unit)); } .mt-4{ margin-top: calc(4 * var(--space-unit)); } .mt-5{ margin-top: calc(5 * var(--space-unit)); } .mt-6{ margin-top: calc(6 * var(--space-unit)); } .mt-8{ margin-top: calc(8 * var(--space-unit)); } .mt-section{ margin-top: calc(var(--section-gap) * var(--fluid-1-5)); } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .table{ display: table; } .grid{ display: grid; } .inline-grid{ display: inline-grid; } .contents{ display: contents; } .hidden{ display: none; } .h-full{ height: 100%; } .w-auto{ width: auto; } .w-full{ width: 100%; } .max-w-full{ max-width: 100%; } .max-w-none{ max-width: none; } .max-w-screen-lg{ max-width: 1024px; } .max-w-screen-md{ max-width: 769px; } .flex-auto{ flex: 1 1 auto; } .shrink-0{ flex-shrink: 0; } .flex-grow{ flex-grow: 1; } .grow{ flex-grow: 1; } .table-fixed{ table-layout: fixed; } .cursor-pointer{ cursor: pointer; } .resize{ resize: both; } .list-none{ list-style-type: none; } .auto-cols-1{ grid-auto-columns: 100%; } .auto-cols-2{ grid-auto-columns: calc((100% - var(--column-gap)) / 2); } .grid-flow-col{ grid-auto-flow: column; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-row{ flex-direction: row; } .flex-row-reverse{ flex-direction: row-reverse; } .flex-col{ flex-direction: column; } .flex-wrap{ flex-wrap: wrap; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .items-stretch{ align-items: stretch; } .justify-start{ justify-content: flex-start; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .gap-3{ gap: calc(3 * var(--space-unit)); } .gap-theme{ gap: var(--column-gap); } .gap-x-6{ column-gap: calc(6 * var(--space-unit)); } .gap-x-theme{ column-gap: var(--column-gap); } .gap-y-10{ row-gap: calc(10 * var(--space-unit)); } .gap-y-12{ row-gap: calc(12 * var(--space-unit)); } .gap-y-16{ row-gap: calc(16 * var(--space-unit)); } .gap-y-4{ row-gap: calc(4 * var(--space-unit)); } .gap-y-5{ row-gap: calc(5 * var(--space-unit)); } .gap-y-6{ row-gap: calc(6 * var(--space-unit)); } .gap-y-8{ row-gap: calc(8 * var(--space-unit)); } .gap-y-theme{ row-gap: var(--column-gap); } .self-start{ align-self: flex-start; } .self-center{ align-self: center; } .overflow-auto{ overflow: auto; } .overflow-hidden{ overflow: hidden; } .whitespace-nowrap{ white-space: nowrap; } .border{ border-width: 1px; } .bg-error-bg{ background-color: rgb(var(--error-bg-color)); } .bg-info-bg{ background-color: rgb(var(--info-bg-color)); } .bg-success-bg{ background-color: rgb(var(--success-bg-color)); } .bg-theme-bg{ background-color: rgba(var(--bg-color)); } .bg-theme-text{ background-color: rgb(var(--text-color)); } .object-center{ object-position: center; } .object-top{ object-position: top; } .p-4{ padding: calc(4 * var(--space-unit)); } .p-5{ padding: calc(5 * var(--space-unit)); } .p-6{ padding: calc(6 * var(--space-unit)); } .p-8{ padding: calc(8 * var(--space-unit)); } .pb-0{ padding-bottom: 0; } .pb-1{ padding-bottom: var(--space-unit); } .pb-2{ padding-bottom: calc(2 * var(--space-unit)); } .pb-3{ padding-bottom: calc(3 * var(--space-unit)); } .pb-4{ padding-bottom: calc(4 * var(--space-unit)); } .pb-6{ padding-bottom: calc(6 * var(--space-unit)); } .pl-4{ padding-left: calc(4 * var(--space-unit)); } .pl-6{ padding-left: calc(6 * var(--space-unit)); } .pr-4{ padding-right: calc(4 * var(--space-unit)); } .pr-6{ padding-right: calc(6 * var(--space-unit)); } .pt-2{ padding-top: calc(2 * var(--space-unit)); } .pt-3{ padding-top: calc(3 * var(--space-unit)); } .pt-4{ padding-top: calc(4 * var(--space-unit)); } .pt-5{ padding-top: calc(5 * var(--space-unit)); } .pt-6{ padding-top: calc(6 * var(--space-unit)); } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .text-start{ text-align: start; } .text-end{ text-align: end; } .align-middle{ vertical-align: middle; } .align-bottom{ vertical-align: bottom; } .text-sm{ font-size: 0.88em; } .text-xs{ font-size: 0.75em; } .font-bold{ font-weight: 700; } .font-normal{ font-weight: 400; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } .leading-none{ line-height: 1; } .text-current{ color: currentColor; } .text-error-text{ color: rgb(var(--error-text-color)); } .text-info-text{ color: rgb(var(--info-text-color)); } .text-inherit{ color: inherit; } .text-success-text{ color: rgb(var(--success-text-color)); } .text-theme-bg{ color: rgba(var(--bg-color)); } .text-theme-heading{ color: rgb(var(--heading-color)); } .text-theme-light{ color: rgba(var(--text-color) / 0.6); } .text-theme-text{ color: rgb(var(--text-color)); } .underline{ text-decoration-line: underline; } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .js .js-hidden, .no-js .no-js-hidden{ display: none; } @media (max-width: 768.98px) { .header__icon.js .js-hidden.md\:block,.header__icon .no-js .no-js-hidden.md\:block { display: none; } } .no-js .no-js-visible{ display: block; } .visually-hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .object-bottom { object-position: bottom; } .object-top { object-position: top; } [hidden] { display: none !important; } @media (prefers-reduced-motion) { .has-motion { transition: none !important; animation: none !important; } } @media (hover: none) { .no-hover-hidden { display: none !important; } } .color-link { color: rgb(var(--link-color)); } .border-top { border-top: 1px solid rgba(var(--text-color)/0.15); } .border-bottom { border-bottom: 1px solid rgba(var(--text-color)/0.15); } .start { left: var(--start-gutter, 0); } [dir=rtl] .start { right: var(--start-gutter, 0); left: auto; } .end { right: var(--end-gutter, 0); } [dir=rtl] .end { right: auto; left: var(--end-gutter, 0); } .mis-2 { margin-inline-start: calc(2 * var(--space-unit)); } .mis-auto { margin-inline-start: auto; } .mie-auto { margin-inline-end: auto; } .vertical-center { top: 50%; transform: translateY(-50%); } .tap-target { position: relative; } .tap-target::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); opacity: 0; } .tap-target--left::after { left: 0; transform: translateY(-50%); } .tap-target--right::after { right: 0; left: auto; transform: translateY(-50%); } .top-header-offset { top: calc(var(--header-end-padded, 0) * -1); } @media (hover: hover) and (pointer: fine) { .hover\:underline:hover { text-decoration: underline; } .hover\:lighten { transition: color 0.3s; } .hover\:lighten:hover { color: rgba(var(--text-color)/0.8); } .hover\:grow-media .card__media { overflow: hidden; } .hover\:grow-media .media { transition: transform 0.4s cubic-bezier(0.38, 0.41, 0.27, 1), border-color 0.4s; will-change: transform; } .hover\:grow-media:hover .media { transform: scale(1.03); border-color: transparent; } } @media (max-width: 768.98px) { .md-down\:text-center { text-align: center; } .md-down\:-mx-gutter { margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1); } .md-down\:p-xl { padding: 0 calc(8 * var(--space-unit)); } .md-down\:center { align-items: center; justify-content: center; } .md-down\:px-gutter { padding-right: var(--gutter); padding-left: var(--gutter); } } .visible-lg { display: none !important; } @media (min-width: 769px) { .visible-lg { display: block !important; } .md\:pt-0 { padding-top: 0 !important; } } @media (max-width: 599.98px) { .small__grid { --column-gap: 10px; row-gap: 10px; } .carousel .small__grid { --column-gap: 0px; } .carousel .small__grid .slider__item:not(:last-child) .card--product-contained:not(.card--highlight-product) { border-inline-end: 0; } .carousel .small__grid .slider__item:not(:last-child):has(.card--product-contained.card--highlight-product) + .slider__item:not(:last-child) .card--product-contained { border-inline-start: 0; } } @keyframes spinner { to { transform: rotate(360deg); } } @keyframes checkmark { 0% { width: 0; height: 0; opacity: 1; } 20% { width: 10px; height: 0; opacity: 1; } 40% { width: 10px; height: 20px; opacity: 1; } 90% { width: 10px; height: 20px; opacity: 1; } 100% { width: 10px; height: 20px; opacity: 0; } } @keyframes colorPulse { 0% { color: var(--text-color); } 50% { color: var(--speech-icon-color); } 100% { color: var(--text-color); } } @keyframes shake-n-grow { 0%, 100% { transform: rotate(0deg); transform-origin: 50% 50%; } 10% { transform: rotate(8deg); } 20%, 40%, 60% { transform: rotate(-10deg) scale(1.05); } 30%, 50%, 70% { transform: rotate(10deg) scale(1.05); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } } @keyframes shake { 0%, 100% { transform: rotate(0deg); transform-origin: 50% 50%; } 10% { transform: rotate(8deg); } 20%, 40%, 60% { transform: rotate(-10deg); } 30%, 50%, 70% { transform: rotate(10deg); } 80% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } } .alert { padding: 2rem 2.4rem; } .alert.bg-success-bg { border: 1px solid rgba(var(--success-text-color)/0.2); } .alert.bg-error-bg { border: 1px solid rgba(var(--error-text-color)/0.2); } .alert[autofocus] { outline: 0; } .text-success-text { --heading-color: rgb(var(--success-text-color)); --link-color: rgb(var(--success-text-color)); } .text-error-text { --heading-color: rgb(var(--error-text-color)); --link-color: rgb(var(--error-text-color)); } button { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: 'NeueHaasUnica', sans-serif; font-size: 1em; text-decoration: none; text-shadow: none; cursor: pointer; } .btn { display: inline-block; position: relative; max-width: 100%; padding: var(--btn-padding-y, 12px) 26px; transition: opacity 0.6s ease, color 0.6s ease, background-position 0.4s ease-out; border-radius: var(--btn-border-radius, 0); outline-offset: var(--btn-border-width); font-size: 0.88em; font-weight: 700; line-height: 1.2em; text-align: center; text-transform: var(--btn-text-transform, none); -webkit-appearance: none; appearance: none; word-break: break-word; } .btn[disabled], .btn[aria-disabled=true] { opacity: 0.4; background-position: 0 100%; cursor: default; } .btn--sm { padding: 8px 16px; font-size: 1.4rem; font-weight: normal; } .btn--narrow { padding-top: 9px; padding-bottom: 9px; } .btn--extra-narrow { padding-top: 5px; padding-bottom: 5px; } .btn--primary, .spr-button-primary, .shopify-payment-button .shopify-payment-button__button--unbranded, .shopify-challenge__button { border: var(--btn-border-width) solid rgb(var(--btn-bg-color)); outline-color: rgb(var(--btn-bg-color)); outline-offset: 3px; background: rgb(var(--btn-bg-hover-color)) linear-gradient(104deg, rgb(var(--btn-bg-hover-color)) 60%, rgb(var(--btn-bg-color)) 60%, rgb(var(--btn-bg-color)) 100%) no-repeat 100% 100%; background-size: 300% 100%; color: rgb(var(--btn-text-color)); } .btn--primary.is-loading { color: rgba(var(--btn-text-color)/0.1); } .btn--primary.is-loading::after { border-color: rgb(var(--btn-text-color)); border-top-color: transparent; } .btn--primary.is-loading::before { border-color: rgb(var(--btn-text-color)); } .btn--secondary { border: var(--btn-border-width) solid rgb(var(--btn-alt-text-color)); outline-color: rgb(var(--btn-alt-text-color)); outline-offset: 3px; background: rgba(var(--btn-alt-bg-color)/0.9) linear-gradient(104deg, rgba(var(--btn-alt-text-color)/0.07) 60%, rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)) 60%, rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)) 100%) no-repeat 100% 100%; background-size: 300% 100%; color: rgb(var(--btn-alt-text-color)); } .btn--secondary.is-loading { color: rgba(var(--btn-alt-text-color)/0.1); } .btn--secondary.is-loading::after { border-color: rgb(var(--btn-alt-text-color)); border-top-color: transparent; } .btn--secondary.is-loading::before { border-color: rgb(var(--btn-alt-text-color)); } @media (hover: hover) and (pointer: fine) { .btn--primary:not(.slider-nav__btn):not([disabled]):hover, .btn--secondary:not(.slider-nav__btn):not([disabled]):hover, .shopify-challenge__button:not([disabled]):hover, .shopify-payment-button .shopify-payment-button__button--unbranded:not([disabled]):hover { background-position: 0 100%; } } .btn--icon { padding: calc(10px - var(--btn-border-width)); border-radius: var(--btn-lg-border-radius, var(--btn-border-radius)); } .btn--icon.btn--lg { padding: calc(16px - var(--btn-border-width)); border-radius: var(--btn-icon-border-radius); } .btn--icon-with-text .icon { width: auto; height: 1.2em; margin-inline-end: calc(2 * var(--space-unit)); } .btn--arrow-with-text { padding-inline-end: 56px; } .btn--arrow-back-with-text { padding-inline-start: 56px; } .btn--arrow-with-text::after, .btn--arrow-back-with-text::after { content: ""; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; transform: translateY(-50%); transition: background-color 0.2s ease; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5' fill='none'><path d='M4.696 12h14.686m-7.007-7.5 7.5 7.5-7.5 7.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' stroke-width='1.5' fill='none'><path d='M4.696 12h14.686m-7.007-7.5 7.5 7.5-7.5 7.5'/></svg>"); } [dir=rtl] .btn--arrow-with-text::after, [dir=ltr] .btn--arrow-back-with-text::after { right: auto; left: 16px; transform: translateY(-50%) scaleX(-1); } .btn[disabled]:hover, .btn[aria-disabled=true]:hover { opacity: 0.4; background-position: 0 100%; cursor: default; } shop-login-button { --buttons-radius: var(--btn-border-radius, 0); } .custom-select__btn { display: flex; width: var(--custom-select-button-width, auto); min-width: 100%; max-width: 100%; background-color: rgb(var(--input-bg-color)); color: rgb(var(--input-text-color)); font-size: 0.88em; font-weight: bold; line-height: 0.88em; } .custom-select__btn.is-loading { color: rgba(var(--input-text-color)/0.2); } .custom-select__btn > .icon { flex-shrink: 0; width: 36px; height: 20px; margin-inline-start: auto; margin-inline-end: -5px; padding-inline-start: 16px; } .custom-select__listbox { z-index: 100; top: 5px; left: -5px; min-width: 100%; max-height: 20em; overflow-y: auto; border: var(--input-border-width) solid rgba(var(--input-text-color)/0.2); outline: 0; background-color: var(--input-bg-color-diff-3); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); color: rgb(var(--input-text-color)); font-size: 0.88em; } .custom-select__listbox[aria-hidden=false] { visibility: visible; } .custom-select__option { padding: 10px 16px; cursor: pointer; } .custom-select__option > em { flex-shrink: 0; margin-inline-start: auto; padding-inline-start: 1em; font-style: normal; } .custom-select__option.is-focused { outline: 0; background-color: var(--input-bg-color-diff-6); color: rgb(var(--input-text-color)); } .custom-select__option--visual-group-end:not(:last-child) { position: relative; margin-bottom: 0.8em; } .custom-select__option--visual-group-end:not(:last-child)::after { content: ""; position: absolute; top: calc(100% + 0.4em); left: 0; width: 100%; border-bottom: 1px solid rgb(var(--input-text-color)); opacity: 0.1; pointer-events: none; } .checkbox { position: absolute; opacity: 0; } .checkbox + label { display: inline-flex; position: relative; align-items: flex-start; margin: 0; font-size: 1em; line-height: 1.5; vertical-align: top; cursor: pointer; } .checkbox + label::before { content: ""; display: block; flex-shrink: 0; width: 22px; height: 22px; margin-top: calc(0.75em - 11px); margin-inline-end: 0.75em; border: var(--input-border-width) solid rgb(var(--text-color)); border-radius: 2px; background-color: rgb(var(--input-bg-color)); } .checkbox:checked + label::before { border-color: rgb(var(--text-color)); background-color: rgb(var(--text-color)); } .checkbox:checked + label::after { content: ""; position: absolute; top: calc(0.75em - 1.5px); left: 11px; width: calc((22px - (var(--input-border-width) * 2)) * 0.375); height: calc((22px - (var(--input-border-width) * 2)) * 0.75); transform: translate(-50%, -50%) rotate(45deg); border: solid rgba(var(--bg-color)); border-width: 0 2px 2px 0; } [dir=rtl] .checkbox:checked + label::after { right: 11px; left: auto; transform: translate(50%, -50%) rotate(45deg); } .checkbox[disabled] + label { opacity: 0.5; cursor: default; } .radio { position: absolute; opacity: 0; } .radio + label { display: inline-flex; position: relative; align-items: flex-start; margin: 0; font-size: 1em; line-height: 1.5; vertical-align: top; cursor: pointer; } .radio + label::before { content: ""; display: block; flex-shrink: 0; margin-inline-end: 0.75em; border: var(--input-border-width) solid rgb(var(--text-color)); border-radius: 2px; background-color: rgb(var(--input-bg-color)); width: 22px; height: 22px; margin-top: calc(0.75em - 11px); border-radius: 50%; } .radio:checked + label::after { content: ""; position: absolute; top: 0.75em; left: 11px; width: calc((22px - (var(--input-border-width) * 2)) * 0.625); height: calc((22px - (var(--input-border-width) * 2)) * 0.625); transform: translate(-50%, -50%); border-radius: 50%; background-color: rgb(var(--text-color)); } [dir=rtl] .radio:checked + label::after { right: 11px; left: auto; transform: translate(50%, -50%); } .custom-select__option > em { padding-inline-start: 2em; } .custom-select__listbox { min-width: max(100%, 165px); border-radius: var(--modal-border-radius); } fieldset { margin: 0; padding: 0.35em 0.75em 0.625em; } legend { padding: 0; } .label { display: block; margin: 0 0 calc(2 * var(--space-unit)); font-size: 0.88em; font-weight: 700; text-align: start; } .label--inline { display: inline-block; margin: 0; } .is-required > label:not(.required-inline)::after { content: " *"; } input, textarea, select { background-clip: padding-box; font-family: 'NeueHaasUnica', sans-serif; font-size: 16px; line-height: 1.5; } input[type=date] { min-height: calc((var(--input-padding-y, 11px) + var(--input-border-width)) * 2 + 1.2em); -webkit-appearance: none; } .input, select { max-width: 100%; margin: 0; padding: var(--input-padding-y, 11px) 24px; transition: border-color 0.2s, box-shadow 0.2s, outline 0.2s; border: var(--input-border-width) solid rgba(var(--input-text-color)/0.2); border-radius: var(--input-border-radius, 0); background-color: rgb(var(--input-bg-color)); color: rgb(var(--input-text-color)); font-size: 0.88em; line-height: 1.2em; } .input:focus, select:focus { border-color: rgba(var(--input-text-color)/0.6); outline: 0; box-shadow: 0 0 0 1px rgba(var(--input-text-color)/0.6); } .input::placeholder { color: rgba(var(--input-text-color)/0.5); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; border: var(--input-border-width) solid rgba(var(--input-text-color)/0.2); box-shadow: 0 0 0 1000px rgb(var(--input-bg-color)) inset; -webkit-text-fill-color: rgb(var(--input-text-color)); } .input-with-button input:-webkit-autofill, .input-with-button input:-webkit-autofill:hover, .input-with-button input:-webkit-autofill:focus, .input-with-button textarea:-webkit-autofill, .input-with-button textarea:-webkit-autofill:hover, .input-with-button textarea:-webkit-autofill:focus, .input-with-button select:-webkit-autofill, .input-with-button select:-webkit-autofill:hover, .input-with-button select:-webkit-autofill:focus { border-color: transparent; } [type=email], [type=tel] { text-align: start; } [type=number] { -moz-appearance: textfield; } [type=search] { outline-offset: -2px; -webkit-appearance: none; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button, [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { margin: 0; -webkit-appearance: none; } textarea { border-radius: var(--textarea-border-radius) !important; vertical-align: top; resize: vertical; } select { padding-inline-end: 48px; font-weight: 700; -webkit-appearance: none; appearance: none; } .select::after { content: ""; position: absolute; top: calc(50% - 10px); right: 20px; width: 20px; height: 20px; background-color: rgb(var(--input-text-color)); pointer-events: none; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path d='M20 8.5 12.5 16 5 8.5' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'><path d='M20 8.5 12.5 16 5 8.5' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>"); } [dir=rtl] .select::after { right: auto; left: 20px; } .input-with-button { display: flex; align-items: center; border-radius: var(--input-lg-border-radius, var(--input-border-radius)); background-color: rgb(var(--input-bg-color)); box-shadow: inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/0.2); } .input-with-button:focus-within { box-shadow: inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/0.6); } .input-with-button > .input { flex: 1 1 auto; margin-inline-start: 3px; margin-inline-end: calc((var(--input-border-radius, 0px) + var(--btn-border-radius, 0px)) * -1); padding-inline-end: 0; border: 0; background-color: transparent; box-shadow: none; } .input-with-button > .btn { flex: 0 0 auto; padding: var(--btn-padding-y, 12px) 26px; border-radius: var(--input-with-btn-inner-radius, 0) var(--input-border-radius, 0) var(--input-border-radius, 0) var(--input-with-btn-inner-radius, 0); } .input-with-button > .btn:not(.btn--primary) { color: rgb(var(--input-text-color)); } .input-with-button > .btn--icon { padding: 12px 16px; } .checkbox:checked + label::after { top: calc(0.75em - 2px); } .form__field { margin-bottom: calc(6 * var(--space-unit)); text-align: start; } .form > .form__field:last-of-type { margin-bottom: 0; } .form__field-error { margin: 0.5em 0 0; color: rgb(var(--error-text-color)); } .form__actions > .btn { margin-inline-end: calc(6 * var(--space-unit)); } .checkbox--small + .label, .checkbox--small:checked + .label { align-items: center; font-size: 0.88em; } .checkbox--small + .label::before, .checkbox--small:checked + .label::before { width: 16px; height: 16px; margin-top: -1px; } .checkbox--small + .label::after, .checkbox--small:checked + .label::after { content: ""; left: 8px; width: calc((16px - var(--input-border-width) * 2) * 0.375); height: calc((16px - var(--input-border-width) * 2) * 0.75); } @media (max-width: 768.98px) { .input-with-button--md-up { display: block; border-radius: var(--input-border-radius, 0); background: none; box-shadow: none; } .input-with-button--md-up:focus-within { box-shadow: none; } .input-with-button--md-up > .input { padding: var(--input-padding-y, 11px) 24px; border: var(--input-border-width) solid rgba(var(--input-text-color)/0.2); background-color: rgb(var(--input-bg-color)); } .input-with-button--md-up > .input:focus { border-color: rgba(var(--input-text-color)/0.6); } .input-with-button--md-up > .btn { width: 100%; margin-top: calc(4 * var(--space-unit)); border-radius: var(--btn-border-radius, 0); } .input-with-button > .btn { padding: var(--btn-padding-y, 12px) 18px; } } img { max-width: 100%; height: auto; vertical-align: top; } [loading=lazy] { transition: opacity 0.5s ease-out; opacity: 1; } [loading=lazy]:not([src]) { opacity: 0; } .media { overflow: hidden; } .media--has-overlay::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .media__placeholder { background-color: #d8d8d8; fill: #777; vertical-align: top; } .media__placeholder.dark { background-color: #d5d5d5; } .img-fit, .md\:img-fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .img-fit.img-fit--contain, .md\:img-fit.img-fit--contain { object-fit: contain; } .icon { vertical-align: top; pointer-events: none; } [dir=rtl] .has-ltr-icon .icon { transform: scaleX(-1); } .image-blend { background-color: var(--blend-bg-color) !important; } .image-blend img { mix-blend-mode: multiply; } @media (max-width: 768.98px) { .md\:img-fit { position: static; } } a, .link, .product-spec__value a { color: rgb(var(--link-color)); text-decoration: none; } a[aria-disabled=true], .link[aria-disabled=true], .product-spec__value a[aria-disabled=true] { opacity: 0.4; cursor: default; } .link, .rte a, .product-spec__value a { transition: opacity 0.3s; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2rem; } .link:hover, .rte a:hover, .product-spec__value a:hover { opacity: 0.6; } .skip-link.btn { position: absolute; z-index: 999; top: 16px; left: var(--gutter); } .skip-link.btn:focus { width: auto; height: auto; clip: auto; } ol, ul { margin: 0; padding: 0; } ul { list-style: none; } .rte ol, .rte ul { display: inline-block; margin: 0 0 1em; padding: 0; padding-inline-start: 2rem; text-align: start; } .rte ol:last-child, .rte ul:last-child { margin-bottom: 0; } .rte ol { margin-inline-start: 1em; } .styled-list { padding-inline-start: 2rem; } .rte ol li { padding-inline-start: 0.25em; } .rte ol li:not(:last-child) { margin-bottom: 0.5em; } .rte ul li, .styled-list > li { padding-inline-start: 1.5em; } .rte ul li:not(:last-child), .styled-list > li:not(:last-child) { margin-bottom: 0.5em; } .rte ul li::before, .styled-list > li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-top: -2px; margin-inline-start: -1.25em; margin-inline-end: 0.75em; border-radius: 50%; background-color: currentColor; vertical-align: middle; } .overlay { visibility: hidden; z-index: 30; transition: visibility 0.3s, z-index 0s 0.3s, opacity 0.3s; opacity: 0; background-color: rgba(var(--modal-overlay-color)/var(--modal-overlay-opacity)); pointer-events: none; } .overlay.is-visible { visibility: visible; transition: visibility 0.3s, z-index 0s, opacity 0.3s; opacity: 1; pointer-events: initial; } .overlay.overlay--over-nav { z-index: 31; } .overlay--nav { z-index: 20; } .is-loading::after { content: ""; position: absolute; top: calc(50% - 10px); right: calc(50% - 10px); width: 20px; height: 20px; transition: opacity 0.2s; animation: spinner 0.6s linear infinite; border: 2px solid; border-radius: 50%; border-color: rgb(var(--text-color)); border-top-color: transparent; } .is-loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 20px; margin-top: -2px; transform: scaleX(-1) rotate(135deg) translateX(-50%) translateY(-50%); transform-origin: left top; border-top: 2px solid rgb(var(--text-color)); opacity: 0; border-inline-end: 2px solid rgb(var(--text-color)); } .is-success.is-loading::after { opacity: 0; } html:not([dir=rtl]) .is-success::before { animation: checkmark 1.4s ease; } .panel { --heading-color: var(--panel-heading-color); padding: calc(5 * var(--space-unit)); background-color: rgba(var(--panel-bg-color)); color: rgb(var(--panel-text-color)); } @media (min-width: 1024px) { .panel { padding: calc(8 * var(--space-unit)); } } table { margin: 0; border-spacing: 0; border-collapse: collapse; } th, td { padding: 1em; border-collapse: collapse; border: 1px solid rgba(var(--text-color)/0.15); text-align: start; } .discount { padding: 6px 14px; background-color: rgba(var(--text-color)/0.1); } .discount .icon { flex-shrink: 0; width: 20px; height: 20px; margin-inline-end: calc(2 * var(--space-unit)); } .scrollable-table { display: inline-block; margin-bottom: var(--element-margin-bottom, 2em); } @media (max-width: 768.98px) { .scrollable-table { display: flex; overflow: auto; overflow-wrap: normal; } .scrollable-table > table { flex-shrink: 0; width: auto; min-width: 100%; max-width: 640px; } .modal .rte .scrollable-table > table { margin-right: 0; margin-left: 0; } } .breadcrumbs { min-height: 1.5em; margin: calc(5 * var(--space-unit)) 0; font-size: 0.75em; } .breadcrumbs .icon { display: inline-block; width: 1.2em; height: 1.2em; margin-inline-start: 0.125em; margin-inline-end: 0.25em; } .breadcrumbs-list { flex: 1 1 auto; flex-wrap: wrap; line-height: 1em; } .breadcrumbs-list__link { color: currentColor; } .breadcrumbs-prod-nav { margin-inline-start: auto; margin-inline-end: -7px; } .breadcrumbs-prod-nav__link--next { margin-inline-end: 0; } .breadcrumbs-prod-nav__link--next::before { content: "·"; position: relative; margin: 0 0.75em; opacity: 0.5; } .breadcrumbs-list__link--rss { margin-inline-start: 1em; } @media (min-width: 769px) { .breadcrumbs { overflow: auto; } .breadcrumbs-list { flex: 1 0 auto; } .product-breadcrumbs .breadcrumbs-list__link { max-width: 20em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-breadcrumbs .breadcrumbs-list__link:hover { text-decoration: underline; } } .card { flex-direction: column; max-width: 768px; margin: 0 auto; } @media (hover: hover) and (pointer: fine) { .card__main-image, .card__media.has-hover-image:hover .card__hover-image { visibility: visible; transition: opacity 0.5s, visibility 0s; opacity: 1; } .card__hover-image, .card__media.has-hover-image:hover .card__main-image { visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; opacity: 0; } } .card__info { padding-top: calc(4 * var(--space-unit)); } .card.color-scheme .card__info { padding: calc(6 * var(--space-unit)) calc(6 * var(--space-unit)) calc(8 * var(--space-unit)) calc(6 * var(--space-unit)); } .card-link::after { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; } .card:not(.card--related) .price { padding-top: 12px; } .card:not(.card--related):not(.card--no-lines) .price--top { margin-top: calc(3 * var(--space-unit)); border-top: 1px solid rgba(var(--text-color)/0.15); } .card:not(.card--related).card--no-lines .price { padding-top: calc(2 * var(--space-unit)); } .card:not(.card--related).card--no-lines .price--bottom, .card:not(.card--related) .price--bottom { padding-top: calc(4 * var(--space-unit)); } .card__quick-add { display: none; } .card__tags--links { z-index: 3; } .card--wide { max-width: none; } .card--row, .main-products-grid[data-layout=list] .card { flex-direction: row; max-width: none; } .main-products-grid[data-layout=list].transition-ready .card { transition: padding-top 0.3s; } .main-products-grid[data-layout=list] .card--product { padding-top: calc(6 * var(--space-unit)); } .main-products-grid[data-layout=list] .card--product .card__info { position: relative; padding-top: 0; } .main-products-grid[data-layout=list][data-compare=true] .card--product { padding-top: calc(5 * var(--space-unit)); } .main-products-grid[data-layout=list] .card .card__media { z-index: 1; flex: 0 0 calc(50% - var(--gutter) * 2); margin-inline-end: var(--gutter); background-color: inherit; } .main-products-grid[data-layout=list] .card .card__info-container { display: flex; flex-direction: column; justify-content: center; } .main-products-grid[data-layout=list] .card .card__info-inner { width: auto; } .card--related { max-width: none; margin-top: calc(4 * var(--space-unit)); padding: 12px; background-color: rgba(var(--text-color)/0.05); } .card--related .card__media { flex: 0 0 88px; } .card--related .card__info { padding-top: 0; padding-inline-start: calc(4 * var(--space-unit)); } .card--related .price { margin-bottom: calc(2 * var(--space-unit)); } .card--related .btn { z-index: 3; } .slider__grid .card--related { margin-top: 0; } .card__link-list { padding-top: calc(2 * var(--space-unit)); } .card__link-list li { margin-bottom: var(--space-unit); } .card__link-list-item { padding: var(--space-unit) 0 calc(2 * var(--space-unit)); } .card__title-wrapper { padding-top: calc(4 * var(--space-unit)); padding-bottom: calc(2 * var(--space-unit)); } .card--product .card__info { flex: 1; } .card--product .carousel__controls { visibility: hidden; z-index: 3; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; } .card--product .carousel__controls .slider-nav__btn { pointer-events: auto; } .card--product:hover .carousel__controls, .tab-used .card--product:focus-within .carousel__controls { visibility: visible; opacity: 1; } .card--product .slider-nav { padding: 0 5px; } .card--product .slider-nav .slider-nav__btn { overflow: visible; background-color: rgba(var(--bg-color)); } .card--product .slider-nav__btn svg { width: 18px; height: 18px; color: rgb(var(--text-color)); } .card--product-contained { --text-color: var(--card-text-color); padding: calc(5 * var(--space-unit)); border: 1px solid var(--card-border-color); background-color: var(--card-bg-color); color: rgb(var(--card-text-color)); } .card--product-contained .text-theme-light { opacity: 0.7; } .card--highlight-product { --card-text-color: var(--card-highlight-text-color); --card-border-color: var(--card-highlight-border-color); --card-bg-color: var(--card-highlight-bg-color); color: rgb(var(--card-text-color)); } .card--highlight-product:not(.card--product-contained)::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--card-border-color); background-color: var(--card-bg-color); pointer-events: none; } .card--highlight-product .card__info-container { --text-color: var(--card-highlight-text-color); } .main-products-grid[data-layout=list][data-compare=false] .card--highlight-product:not(.card--product-contained) { padding-top: 0; } .carousel .card--highlight-product:not(.card--product-contained) { padding: calc(3 * var(--space-unit)); } .carousel .card--highlight-product:not(.card--product-contained)::before { inset: 0; } .card--article .btn--icon { z-index: 2; } .card--article.card--row { flex-direction: column; } .card__collection--with-border .card__media { border: 1px solid var(--coll-card-border-color); } .card__collection .media { background-color: var(--coll-card-bg-color); } .card__media--circle, .card__media--circle .media { border-radius: 50%; } .card--article.card--featured .card__info { padding: var(--gutter-sm, 20px); } @media (max-width: 768.98px) and (pointer: coarse) { .card__hover-image { display: none; } } @media (max-width: 768.98px) { [data-layout=list] .card--highlight-product:not(.card--product-contained)::before { inset: calc(8 * var(--space-unit) / 2 * -1) calc(var(--gutter) * -1); } .grid-cols-2 .card--product-contained, .auto-cols-2 .card--product-contained { padding: calc(3 * var(--space-unit)); } .cc-product-card-grid .grid:not(.slider__grid) .card--highlight-product:not(.card--product-contained)::before { inset: -1px; } .cc-product-card-grid .grid:not(.slider__grid) .card--highlight-product:not(.card--product-contained) .card__info-container { padding: calc(3 * var(--space-unit)); } } @media (min-width: 769px) { .main-products-grid[data-layout=list] .card--product { padding-top: calc(10 * var(--space-unit)); } .card--highlight-product:not(.card--product-contained)::before { inset: calc(8 * var(--space-unit) / 2 * -1); } .carousel .card--highlight-product:not(.card--product-contained) { padding: calc(5 * var(--space-unit)); } .grid-cols-2:not(.small-cards-mobile) .card--product-contained, .auto-cols-2:not(.small-cards-mobile) .card--product-contained, .small-cards-desktop .card--product-contained { padding: calc(4 * var(--space-unit)); } .main-products-grid[data-layout=list] .card .card__media { flex: 0 0 calc(33.333333% - calc(8 * var(--space-unit))); max-width: 245px; margin-inline-end: calc(10 * var(--space-unit)); } .main-products-grid[data-layout=list] .card .card__info { flex: 1 1 auto; } .main-products-grid[data-layout=list] .card .card__info-container { flex-direction: row; align-items: center; } .card--article.card--featured { flex-direction: row; } .card--article.card--featured .card__media { flex: 0 0 50%; } .card--article.card--featured .card__info { min-height: 250px; padding: calc(8 * var(--space-unit)); } .card.color-scheme .card__info { padding: calc(8 * var(--space-unit)); } .card--product .price__current { font-size: 1.2em; } .card--product .price__was { font-size: 1em; } } @media (min-width: 1280px) { .card.color-scheme .card__info { padding: calc(10 * var(--space-unit)); } .card--article.card--featured .card__info { min-height: 350px; } } @media (hover: none) { .card__hover-image { display: none; } } .countdown__grid { grid-template-columns: repeat(4, auto); font-size: calc(var(--countdown-size, 24) * var(--fluid-1-5)); gap: var(--countdown-gap, 1em); } .countdown__item:not(:last-child) .countdown__number::after { content: ":"; position: absolute; top: 0; left: calc(100% + var(--countdown-gap, 1em) / 2); padding-top: 0.45em; transform: translateX(-50%); color: rgb(var(--text-color)); } [dir=rtl] .countdown__item:not(:last-child) .countdown__number::after { right: calc(100% + var(--countdown-gap, 1em) / 2); left: auto; transform: translateX(50%); } .countdown__number { box-sizing: content-box; min-width: 2ch; margin-bottom: 6px; padding: 0.45em; border: 0; border-radius: 0.4em; background-color: rgb(var(--text-color)); color: rgba(var(--bg-color)); line-height: 1; white-space: nowrap; } .countdown__unit { font-size: 14px; } .countdown__grid + .countdown__text { margin-top: calc(var(--countdown-size, 24) * var(--fluid-1-5) / 2); } @media (max-width: 599.98px) { .countdown__grid { --countdown-gap: 14px; font-size: 22px; } } .color-scheme--white .text-overlay__block:not(.countdown-timer__custom-colors) .countdown__number { color: #000; } @media (max-width: 599.98px) { .color-scheme--white.mobile-stacked .text-overlay__block:not(.countdown-timer__custom-colors) .countdown__number { color: rgba(var(--bg-color)); } } .countdown__block { margin-top: calc(8 * var(--space-unit)); margin-bottom: calc(8 * var(--space-unit)); } .countdown__block:last-child { margin-bottom: 0; } .section__block--countdown:not(:first-child) { margin-top: calc(6 * var(--space-unit)); margin-bottom: calc(6 * var(--space-unit)); } .countdown__text { margin-top: calc(4 * var(--space-unit)); } .countdown-large-endtext .countdown__text { font-size: 1.25em; } @media (max-width: 768.98px) { .countdown__item { padding-right: 0; padding-left: 0; } } @media (max-width: 599.98px) { .countdown__unit { font-size: 0.5em; } } .disclosure > summary { padding: calc(6 * var(--space-unit)) 0; } .disclosure--row { border: 1px solid rgba(var(--text-color)/0.15); border-width: 1px 0; } details-disclosure + details-disclosure .disclosure--row { border-top: 0; } .js .disclosure__panel { overflow: hidden; transition: height 0.3s cubic-bezier(0.2, 0.6, 0.4, 1); } .disclosure__toggle { margin-inline-start: calc(3 * var(--space-unit)); } .disclosure__toggle > .icon { display: block; width: 20px; height: 20px; } .disclosure[open]:not(.is-closing) .disclosure__toggle > .icon { transform: scaleY(-1); } .disclosure[open]:not(.is-closing) .v-line { display: none; } .disclosure__title { max-width: 100%; margin-bottom: 0; } .disclosure__title > .icon { flex-shrink: 0; margin: 0; margin-inline-end: calc(4 * var(--space-unit)); } .disclosure__title > .icon--washing, .disclosure__title > .icon--truck, .disclosure__title > .icon--silhouette, .disclosure__title > .icon--lock { margin-top: -2px; } .disclosure__content { padding-bottom: calc(6 * var(--space-unit)); } .js .disclosure__content { transition: opacity 0.3s ease 0s; opacity: 0; } .js .disclosure[open]:not(.is-closing) .disclosure__content { transition: opacity 0.3s ease 0.1s; opacity: 1; } .image-banner .rte a, .image-banner .rte a:hover { color: inherit; } @media (min-width: 600px) { .image-banner.auto-height::after { content: ""; padding-top: 56.25%; } } @media (max-width: 599.98px) { .mobile-stacked .image-banner { flex-direction: column; } .mobile-stacked .image-banner .image-banner__image::after { display: none; } .mobile-stacked .image-banner > .container { height: 100%; padding: 0; overflow: hidden; } .mobile-stacked .image-banner:not(.slideshow__slide) .media, .mobile-stacked .auto-height:not(.slideshow__slide) .media::after { position: relative; } .mobile-stacked--spaced { margin-bottom: calc(var(--section-gap) * 0.1rem); } } .main-menu { --nav-line-color: rgba(var(--nav-child-text-color) / 0.2); font-family: 'NeueHaasUnica', sans-serif; font-style: var(--navigation-font-style); font-weight: var(--navigation-font-weight); } .main-menu .badge { white-space: normal; } .grandchild-nav__item, .main-nav__item--go, .mega-nav--pills.mega-nav--no-grandchildren .main-nav__item:not(.main-nav__item-header) { font-family: 'NeueHaasUnica', sans-serif; font-style: var(--body-font-style); font-weight: var(--body-font-weight); } .main-menu__toggle { position: relative; width: 44px; height: 44px; margin-inline-start: 10px; margin-inline-end: -10px; } .main-menu__toggle::before, .main-menu__toggle::after, .main-menu__toggle-icon::before, .main-menu__toggle-icon::after { content: ""; display: block; position: absolute; left: 12px; width: 20px; height: 2px; transform: rotate(0deg); transition: 0.3s ease-in-out; transition-property: transform, width, top, left; background: currentColor; } .main-menu__toggle-icon::before { top: 14px; } .main-menu__toggle::before, .main-menu__toggle::after { top: 21px; } .main-menu__toggle-icon::after { top: 28px; } .no-js .main-nav__item-content { pointer-events: none; } .main-menu__disclosure.is-open .main-menu__toggle-icon::before, .main-menu__disclosure.is-open .main-menu__toggle-icon::after, .no-js .main-menu__disclosure[open] .main-menu__toggle-icon::before, .no-js .main-menu__disclosure[open] .main-menu__toggle-icon::after { top: 21px; left: 22px; width: 0; } .main-menu__disclosure.is-open .main-menu__toggle::before, .no-js .main-menu__disclosure[open] .main-menu__toggle::before { transform: rotate(45deg); } .main-menu__disclosure.is-open .main-menu__toggle::after, .no-js .main-menu__disclosure[open] .main-menu__toggle::after { transform: rotate(-45deg); } .main-nav__item, .secondary-nav__item { color: currentColor; } .secondary-nav__cta .icon { flex-shrink: 0; } .secondary-nav__cta .icon + span { margin-inline-start: 10px; } .secondary-nav__item.secondary-nav__cta--button { padding: 0.3em 0.9em; transition: background-position 0.4s ease-out; border-radius: var(--btn-border-radius, 0); background: rgb(var(--cta-bg-hover-color)) linear-gradient(104deg, rgb(var(--cta-bg-hover-color)) 60%, rgb(var(--cta-bg-color)) 60%, rgb(var(--cta-bg-color)) 100%) no-repeat 100% 100%; background-size: 300% 100%; line-height: 1.2; } .main-nav__item--toggle .icon, .main-nav__item--back .icon, .main-nav__item--go .icon { flex-shrink: 0; width: 20px; height: 20px; margin-inline-start: 5px; transition: transform 0.3s; } .main-nav__item--go { display: flex; align-items: center; color: rgba(var(--nav-child-text-color)/0.7); } .main-nav__item--go .icon, .main-nav__icon-circle .icon { width: 15px; height: 15px; margin-inline-start: calc(2 * var(--space-unit)); padding: 1px; border: 1px solid; border-radius: 50%; } .child-nav details[open]:not(.is-closing) .icon { transform: scaleY(-1); } .main-nav__item--toggle { width: auto; } .main-nav__item--toggle .main-nav__item-content { display: inline-flex; align-items: center; } .main-nav__item--toggle .main-nav__item--primary { align-items: flex-end; } .main-nav__item--toggle .icon { transform: rotate(0deg); } .main-nav__link--featured { color: rgb(var(--header-accent-color)); } .main-nav__grandchild { padding: 0 16px 2.5rem; } .main-nav__grandchild .main-nav__item { display: block; } .main-nav__grandchild .main-nav__item, .main-nav__grandchild .main-nav__item--go { padding: 8px 0; } .main-menu .custom-select__listbox { top: auto; bottom: 5px; } .main-nav__collection-image--flex { flex: 0 0 auto; } .main-nav__collection-image { flex-basis: var(--image-size, 40px); width: var(--image-size), 40px; height: var(--image-size, 40px); } .main-nav__collection-image--standard { --image-size: 30px; } .main-nav__collection-image--large { --image-size: 40px; } .main-nav__collection-image-circle { border-radius: 50%; } @media (hover: none) { .main-nav__item-content { pointer-events: none; } } @media (hover: hover) and (pointer: fine) { .secondary-nav__item.secondary-nav__cta--button:hover { background-position: 0 100%; box-shadow: none; } } @media (max-width: 768.98px) { .secondary-nav__item { font-weight: normal; } .main-menu--left-mob { order: -1; } .main-menu--left-mob .main-menu__toggle { margin-top: 0; margin-bottom: 0; margin-inline-start: -10px; margin-inline-end: 10px; } .main-menu__content { visibility: hidden; width: 100vw; min-width: 0; max-width: none; padding-bottom: calc(8 * var(--space-unit)); overflow: hidden; box-shadow: 0 -1px 0 var(--nav-line-color); } .main-menu__content, .js .main-nav__child { position: fixed; z-index: 30; top: var(--header-end, 100px); left: 0; width: 100vw; height: calc(var(--viewport-height) - var(--header-end, 100px)); padding-right: var(--gutter); padding-bottom: 60px; padding-left: var(--gutter); overflow-y: scroll; background-color: rgb(var(--nav-child-bg-color)); color: rgb(var(--nav-child-text-color)); } .main-menu__disclosure.is-closing > .main-menu__content, .main-menu__disclosure > .main-menu__content { transition: opacity 0.3s, visibility 0.3s; opacity: 0; } .main-menu__disclosure.is-open > .main-menu__content { opacity: 1; } .main-menu__content--no-focus { overflow: hidden; } .main-nav > li, .child-nav > li, .grandchild-nav > li { border-bottom: 1px solid var(--nav-line-color); } .main-nav__item { display: block; width: 100%; padding-top: 2.4rem; padding-bottom: 2.4rem; padding-inline-start: 16px; padding-inline-end: 44px; line-height: 1.5; } .main-nav__item-content { display: flex; align-items: center; justify-content: space-between; pointer-events: none; } .main-nav__item--toggle .icon { position: absolute; right: 16px; margin-inline-end: -4px; } [dir=rtl] .main-nav__item--toggle .icon { right: auto; left: 16px; } .main-nav__item--toggle .main-nav__item:not(.child-nav__item) .icon { transform: rotate(-90deg); } [dir=rtl] .main-nav__item--toggle .main-nav__item:not(.child-nav__item) .icon { transform: rotate(90deg); } .main-nav__item--back { color: rgb(var(--header-accent-color)); } .main-nav__item--back .main-nav__item-content { justify-content: flex-start; } .main-nav__item--back .main-nav__item-content > .icon { margin-inline-start: -4px; margin-inline-end: calc(2 * var(--space-unit)); } .mega-nav > .container { padding: 0; } .mega-nav .main-nav__item--toggle { padding-top: 0; padding-bottom: 0; } .no-js .mega-nav .main-nav__item--toggle { margin-top: 0; } .js .is-open > .main-menu__content, .no-js [open] > .main-menu__content { visibility: visible; pointer-events: initial; } .js .main-nav__child, .js .main-nav__child.is-closing { transform: translate3d(100%, 0, 0); transition: transform 0.2s ease-out; } .js .is-open:not(.is-closing) > .main-nav__child { transform: translate3d(0, 0, 0); } .no-js .main-nav__item--toggle .icon { transform: rotate(0); } .no-js .main-nav__child { padding: 0 0 0 16px; } .no-js .main-nav__child .md\:hidden { display: none; } .no-js .child-nav > li, .no-js .main-nav__grandchild > li { border-bottom: 0; } .no-js .child-nav__item { padding: 1.6rem 0; } .secondary-nav { margin-top: calc(12 * var(--space-unit)); padding: 0 16px; } .secondary-nav > li:not(:only-child) { margin-top: 2rem; } .secondary-nav__item.secondary-nav__cta--button { padding: 0.5em 1.1em; } .main-menu .localization { margin-top: calc(12 * var(--space-unit)); padding: 0 16px; } .mob__localization .localization__selector { margin-bottom: calc(4 * var(--space-unit)); } .mob__localization .localization__selector:last-child { margin-bottom: 0; } .main-nav__grandchild li:first-child .main-nav__item { padding-top: 0; } .main-nav__grandchild { max-width: none !important; } .main-nav__collection-image { margin-inline-start: 16px; } } @media (min-width: 769px) { body:not(.tab-used) .main-nav__item--toggle { outline: none !important; } .main-menu { width: 100%; background-color: rgb(var(--nav-bg-color)); color: rgb(var(--nav-text-color)); } .main-menu .localization { display: none; } .main-nav { flex-wrap: wrap; } .main-nav, .secondary-nav { display: flex; align-items: flex-end; margin: 0 -1.2rem; } .secondary-nav { min-height: calc(2rem + 1.2em); } .main-nav__item--primary, .secondary-nav__item { display: block; margin: 0 1.2rem; padding-top: 1rem; padding-bottom: 1rem; transition: box-shadow 0.1s; line-height: 1.2em; } .main-nav__item--primary:hover, .main-nav__item--primary.is-active, .is-open > summary > .main-nav__item--primary, .secondary-nav__item:hover, .secondary-nav__item.is-active, .is-open > summary > .secondary-nav__item { box-shadow: inset 0 -2px 0 0 currentColor; } .secondary-nav__cta { display: flex; white-space: nowrap; } .secondary-nav__item.secondary-nav__cta--button { line-height: 1; } .secondary-nav__item:not(.secondary-nav__cta) { color: rgba(var(--nav-text-color)/0.6); white-space: nowrap; } .child-nav__item--toggle .main-nav__item-content { pointer-events: initial; } .child-nav__item, .child-nav__item--toggle, .grandchild-nav__item { transition: color 0.3s; } .child-nav__item:hover, .child-nav__item--toggle:hover, .grandchild-nav__item:hover { color: rgba(var(--nav-child-text-color)/0.7); } [open] > .main-nav__item--primary .icon { transform: rotate(180deg); } .main-nav__child { visibility: hidden; position: absolute; z-index: 10; top: 100%; min-width: 170px; max-height: max(100vh - var(--content-start, 150px) - 70px, 60vh); padding: 2rem 1.2rem; overflow: auto; transition: transform 0.3s, opacity 0.2s, visibility 0.3s; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); border-top: 1px solid var(--nav-line-color); background-color: rgb(var(--nav-child-bg-color)); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); color: rgb(var(--nav-child-text-color)); } .main-nav__child.mega-nav { left: 0; width: var(--viewport-width, 100vw); padding: calc(8 * var(--space-unit)) 0; transition-delay: 0.3s; } .is-closing > .main-nav__child, .main-nav__child { z-index: -1; transform: translateY(-10px); opacity: 0; } .is-open > .main-nav__child, .no-js details[open] .main-nav__child { visibility: visible; transform: translateY(0); transition-delay: 0s; opacity: 1; } .main-nav__child--offset-right { right: 5px; } .child-nav--dropdown { max-width: 300px; } .main-nav__grandchild .main-nav__item, .main-nav__grandchild .main-nav__item--go { padding: 8px 0; font-size: 0.88em; } .child-nav__item { padding-top: 1rem; padding-bottom: 1rem; } .child-nav__item, .main-nav__grandchild { display: block; padding-right: 2rem; padding-left: 2rem; } .child-nav--dropdown .main-nav__grandchild { padding-bottom: 0.5em; } .child-nav--dropdown .child-nav__item--toggle { position: relative; padding-inline-end: 5rem; } .child-nav--dropdown .child-nav__item--toggle .main-nav__item-content, .child-nav--dropdown .child-nav__item--toggle .child-nav__item { width: 100%; } .child-nav--dropdown .child-nav__item--toggle .icon { position: absolute; right: 2rem; margin-top: 2px; margin-inline-start: 10px; } [dir=rtl] .child-nav--dropdown .child-nav__item--toggle .icon { right: auto; left: 2em; } } @media (min-width: 835px) { .main-menu__content { display: flex; } .secondary-nav { margin-top: 1px; padding-inline-start: calc(12 * var(--space-unit)); } } .pagination--modern { max-width: 250px; } .pagination[aria-disabled=true], .pagination--modern[aria-disabled=true] { opacity: 0.4; cursor: default; } .pagination.is-loading li { opacity: 0.3; cursor: default; pointer-events: none; } .pagination__arrow[aria-disabled=true] { opacity: 0.4; } .pagination__arrow-icon svg { width: 18px; } .pagination__next-label { margin-inline-end: calc(2 * var(--space-unit)); } .pagination__item { flex: 1; } .pagination__page-link, .pagination__page-current { padding: 8px 14px; } .pagination__page-link { color: rgba(var(--text-color)/0.8); } .pagination__page-link:hover, .pagination__page-current { background: linear-gradient(to top, currentColor 2px, transparent 2px) no-repeat center bottom/1.3em; } .pagination__bar { height: 2px; background-color: rgba(var(--text-color)/0.2); } .pagination__bar::before { content: ""; position: absolute; top: 0; left: 0; width: var(--pagination-percent); height: 2px; transition: width 0.3s; background-color: rgb(var(--text-color)); } @media (min-width: 1280px) { .pagination { justify-content: center; width: auto; overflow-wrap: normal; } .pagination__item--arrow { flex: 0; } .pagination__arrow { margin: 0 calc(2 * var(--space-unit)); padding: 0 26px; } .pagination__arrow--prev { margin-inline-end: calc(8 * var(--space-unit)); } .pagination__arrow--next { margin-inline-start: calc(8 * var(--space-unit)); } } .price__current { padding-inline-end: 0.5rem; font-size: 1em; white-space: nowrap; } .price__was { color: rgba(var(--text-color)/0.8); font-size: 0.8em; white-space: nowrap; } .price__was--supercents { position: relative; text-decoration: none; } .price__was--supercents::before { content: ""; position: absolute; top: 50%; right: 0; left: 0; transform: rotate(-10deg); border-top: 1px solid currentColor; } .unit-price { font-size: 0.8em; white-space: nowrap; } .unit-price::before { content: "("; } .unit-price::after { content: ")"; } .predictive-result__info .price__current { font-size: 1.6rem; font-weight: normal; } .predictive-result__info .price__was { font-size: 1.3rem; } sup { position: relative; top: -0.5em; margin-left: 1px; font-size: 60%; vertical-align: baseline; } .qty-input { --padding: var(--btn-padding-y, 12px); --size: calc((var(--btn-border-width) + var(--padding)) * 2 + 1.4rem); } .qty-input__input { width: var(--size); margin: 0; padding-top: var(--padding); padding-bottom: var(--padding); border: var(--btn-border-width) solid rgba(var(--input-text-color)/0.2); text-align: center; } .qty-input__btn { position: relative; z-index: 1; width: var(--size); height: var(--size); padding: 0; border: var(--btn-border-width) solid rgba(var(--input-text-color)/0.2); border-radius: var(--btn-border-radius, 0); background-color: rgb(var(--input-bg-color)); color: rgb(var(--input-text-color)); } .btn--minus::before, .btn--minus::after, .btn--plus::before, .btn--plus::after { content: ""; position: absolute; top: 50%; right: 50%; width: 12px; height: 2px; transform: translate(50%, -50%); background-color: currentColor; } .btn--minus::after, .btn--plus::after { width: 2px; height: 12px; } .btn--minus::after { display: none; } .js .qty-input--combined { border: var(--btn-border-width) solid rgba(var(--input-text-color)/0.2); border-radius: var(--btn-border-radius, 0); background-color: rgb(var(--input-bg-color)); } .js .qty-input--combined:focus-within { border-color: rgba(var(--input-text-color)/0.6); box-shadow: 0 0 0 1px rgba(var(--input-text-color)/0.6); } .js .qty-input--combined .qty-input__input, .js .qty-input--combined .qty-input__btn { border: 0; background: none; color: rgb(var(--input-text-color)); } .js .qty-input--combined .qty-input__input { padding: var(--padding) 0; border-radius: 0; box-shadow: none; } .js .qty-input--combined .qty-input__btn { width: calc(var(--padding) * 2 + 1.4rem); height: calc(var(--padding) * 2 + 1.4rem); } .qty-input { height: 100%; } .qty-input__input { flex: 1 1 auto; width: 2.5em; } .no-js .qty-input__input { width: 4em; padding-right: 5px; padding-left: 5px; } .js .qty-input--combined:focus-within { box-shadow: 0 0 0 0 rgba(var(--input-text-color)/0.6); } .qty-input--secondary-btn .qty-input { --input-text-color: var(--btn-alt-text-color); border-color: rgb(var(--btn-alt-text-color)); background-color: rgba(var(--btn-alt-bg-color)/var(--btn-alt-bg-alpha)); } .qty-input--secondary-btn .qty-input:focus-within { border-color: rgb(var(--btn-alt-text-color)); box-shadow: 0 0 0 1px rgb(var(--btn-alt-text-color)); } .rating, .rating__count { line-height: 1.5rem; } .rating__stars { --no-rating-col: rgba(var(--star-color)/0.2); --percent: calc((var(--rating) / var(--rating-max) + 0.01) * 100%); background: linear-gradient(90deg, rgb(var(--star-color)) var(--percent), var(--no-rating-col) var(--percent)); -webkit-background-clip: text; background-clip: text; font-family: 'NeueHaasUnica', sans-serif; font-size: 1.125em; letter-spacing: -0.1em; line-height: 1; -webkit-text-fill-color: transparent; } .rating__count { margin-inline-start: 0.5em; } .spr-stars > span { display: flex; align-items: center; height: 100%; } .spr-star { margin-inline-end: 2px; } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } .scrolling-banner--pausable:hover { --play-state: paused; } .scrolling-banner__items-container { direction: ltr; } .scrolling-banner__items { animation: marquee var(--duration, 10s) linear infinite var(--play-state, running) var(--direction); } [dir=rtl] .scrolling-banner__items { direction: rtl; } .scrolling-banner__items, .scrolling-banner__item { white-space: nowrap; } a.scrolling-banner__item { transition: opacity 0.3s; color: currentColor; } a.scrolling-banner__item:hover { opacity: 0.6; } .scrolling-banner__text { margin-bottom: 0; } .search { position: relative; margin: 6px 0; transition: margin var(--header-transition-speed); } .search__form { position: relative; } .search__input { --input-text-color: var(--text-color); padding-inline-start: 54px; padding-inline-end: 54px; border: 0; border-radius: var(--input-lg-border-radius, var(--input-border-radius)); background-color: var(--search-bg-color, rgba(var(--text-color)/0.08)); color: rgb(var(--text-color)); font-size: var(--body-font-size); line-height: 1em; text-transform: initial; } body:not(.tab-used) .search__input { outline: none; } .search__input::placeholder { color: rgba(var(--text-color)/0.5); } .search__submit { top: calc(50% - 22px); min-height: 44px; padding: 12px 24px; padding-inline-end: 0; } @media (max-width: 768.98px) { .search__submit { padding-inline-start: 20px; } .search-is-collapsed .header__search--collapsible-mob .search { margin: 0; } } @media (min-width: 769px) { .search { margin: 0 0 15px; } } @media (min-width: 1024px) { .search__input { padding-top: 12px; padding-bottom: 12px; } .cc-main-search .search__input { width: 600px; } } .drawer { --longest-transition-in-ms: 700; visibility: hidden; z-index: 40; max-width: 540px; height: var(--viewport-height, 100vh); overflow: auto; transform: translate3d(100%, 0, 0); transition: visibility 0s 0.6s, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); outline: 0; background-color: rgba(var(--drawer-bg-color)); color: rgb(var(--drawer-text-color)); } .drawer[open] { visibility: visible; transform: translate3d(0, 0, 0); transition: visibility 0s 0s, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1); } .drawer:not(.facets) { border-radius: var(--drawer-border-radius) 0 0 var(--drawer-border-radius); box-shadow: -2px 1px 10px 2px rgba(0, 0, 0, 0.2); } .drawer[aria-modal] { --bg-color: var(--drawer-bg-color); --heading-color: var(--drawer-text-color); --link-color: var(--drawer-text-color); --text-color: var(--drawer-text-color); --swatch-border-color-active: var(--drawer-text-color); } .cart-drawer-popup__content shipping-calculator h2, .cart-drawer-popup__content cart-note h2 { margin-bottom: calc(6 * var(--space-unit)); } .drawer__header { justify-content: space-between; border-bottom: 1px solid rgba(var(--drawer-text-color)/0.2); } .drawer__header--no-border { border-bottom: 0; } .drawer__close-btn, .drawer__back-btn, .cart-drawer-popup__btn { margin: -10px; padding: 10px; color: rgb(var(--heading-color)); } .drawer__content { overflow: auto; transition: opacity 0.6s; } .js .drawer__content { display: none; opacity: 0; } .js [open] > .drawer__content:not(.drawer__content--out) { display: block; opacity: 1; } .js [open] > .drawer__content:not(.drawer__content--out).drawer__content--flex { display: flex; flex-direction: column; } .js .dom-loaded-plus-2 .drawer__content { display: block; } .cart-drawer__summary--top, .cart-drawer__summary--top .cart-drawer-popup { border-bottom: 1px solid rgba(var(--drawer-text-color)/0.2); } .cart-drawer-summary-top.cart-drawer--checkout--sticky-true { z-index: 10; } .cart-drawer__summary { background-color: rgba(var(--drawer-bg-color)); } .cart-drawer--checkout--sticky-true { position: -webkit-sticky; position: sticky; top: calc(var(--cart-drawer__summary-height, 0) * -1 + var(--cart-drawer__checkout-buttons-height, 0) + 6 * var(--space-unit) + 2px); } .cart-drawer__summary--top.cart-drawer--checkout--sticky-true { z-index: 10; border-top: 1px solid rgba(var(--drawer-text-color)/0.2); } .drawer__footer:empty, .cart-drawer__summary:empty { display: none; } [open] > .drawer__footer:not(.drawer__footer--out), [open] > .cart-drawer__summary:not(.drawer__footer--out) { transform: translate3d(0, 0, 0); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s, opacity 0.7s; opacity: 1; } .drawer__footer { z-index: 5; transform: translate3d(0, 100%, 0); transition: transform 0s 0.4s, opacity 0.7s; opacity: 0; box-shadow: 0 -2px 8px 0 rgba(var(--drawer-text-color)/0.08); } .cart-drawer-popup { z-index: 2; max-height: 100vh; overflow: auto; transition: height 0.3s cubic-bezier(0.2, 0.6, 0.4, 1); background-color: rgba(var(--drawer-bg-color)); } .drawer__header, .drawer__footer, .drawer__content, .cart-drawer-popup__content, .cart-drawer__summary { padding: var(--gutter); } .drawer--cart .cart-recommendations, .cart-drawer__promoted-products, .cart-drawer__media-promotion { padding: 0 var(--gutter) var(--gutter) var(--gutter); } .drawer--cart .cart-recommendations, .cart-drawer__promoted-products { max-width: 100%; padding-top: 0; } .drawer--cart .drawer__header, .quick-add__header { position: -webkit-sticky; position: sticky; z-index: 4; top: 0; background-color: rgba(var(--bg-color)); } .drawer--cart .drawer__content { padding: 0; } .cart-drawer__content { padding: var(--gutter); } .cart-drawer-popup__btn { --end-gutter: var(--gutter); top: calc(6 * var(--space-unit)); } .cart-drawer-popup__btn > .icon { display: block; } .overlay--drawer { z-index: 4; background-color: rgba(0, 0, 0, 0.25); } .cc-main-cart .icon--cart { display: none; } [data-empty=true] .cart-empty svg { display: block; width: 44px; height: 44px; margin-bottom: 1em; } .drawer__empty-with-promotions { flex-direction: column; } .drawer__empty-with-promotions .cart-drawer__content { display: flex; flex-grow: 1; } .cart-drawer__media-promotion-container { position: -webkit-sticky; position: sticky; top: 100%; } @media (max-width: 767px) { .drawer { top: auto; bottom: 0; height: calc(var(--viewport-height, 100vh) - 100px); transform: translate3d(0, 100%, 0); } .drawer:not(.facets) { border-radius: var(--drawer-border-radius) var(--drawer-border-radius) 0 0; } } @media (min-width: 769px) { .drawer__header, .drawer__footer, .drawer__content, .cart-drawer-popup__content, .cart-drawer__content, .cart-drawer__summary { padding: calc(6 * var(--space-unit)) calc(8 * var(--space-unit)); } .cart-drawer__content { padding-bottom: calc(8 * var(--space-unit)); } .drawer--cart .cart-recommendations, .cart-drawer__promoted-products, .cart-drawer__media-promotion { padding: 0 calc(8 * var(--space-unit)) calc(8 * var(--space-unit)) calc(8 * var(--space-unit)); } .cart-drawer-popup__btn { --end-gutter: calc(8 * var(--space-unit)); } } .slider { --scrollbar-border-width: 11px; padding-bottom: calc(4 * var(--space-unit)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgb(var(--scrollbar-color, 60 60 60)) rgba(var(--scrollbar-color, 60 60 60)/0.05); scroll-behavior: smooth; } .slider[data-overlayscrollbars-viewport] { position: static; scroll-snap-type: none; scroll-behavior: auto; width: 100% !important; margin: 0 !important; padding: 0 0 calc(10 * var(--space-unit)) 0 !important; } .slider.is-grabbable { cursor: grab; -webkit-user-select: none; user-select: none; } .slider.is-grabbable img { pointer-events: none; } .slider.is-grabbing { cursor: grabbing; } @supports selector(::-webkit-scrollbar) { .slider::-webkit-scrollbar { height: 24px; } .slider::-webkit-scrollbar-thumb { border: var(--scrollbar-border-width) solid transparent; border-radius: var(--btn-border-radius, 0); box-shadow: inset 0 0 0 2px rgb(var(--scrollbar-color, 60 60 60)); } .slider::-webkit-scrollbar-thumb:hover { border-width: 10px; } .slider::-webkit-scrollbar-track { margin: 0 calc(var(--gutter) - var(--scrollbar-border-width)); border: var(--scrollbar-border-width) solid transparent; border-radius: var(--btn-border-radius, 0); box-shadow: inset 0 0 0 2px rgba(var(--scrollbar-color, 60 60 60)/0.3); } } .os-scrollbar-horizontal { right: var(--gutter) !important; left: var(--gutter) !important; } .os-scrollbar.os-theme-dark { --os-size: 14px; --os-padding-perpendicular: 6px; --os-handle-bg: rgb(var(--scrollbar-color, 60 60 60)); --os-handle-bg-hover: rgb(var(--scrollbar-color, 60 60 60)); --os-handle-bg-active: rgb(var(--scrollbar-color, 60 60 60)); --os-track-bg: rgba(var(--scrollbar-color, 60 60 60) / 0.3); --os-track-bg-hover: rgba(var(--scrollbar-color, 60 60 60) / 0.3); --os-track-bg-active: rgba(var(--scrollbar-color, 60 60 60) / 0.3); } .slider.slider--no-scrollbar { padding: 0; scrollbar-width: none; } .slider.slider--no-scrollbar::-webkit-scrollbar { display: none; } .carousel.slider, .carousel[inactive]> div > .slider { padding-bottom: 0; } .carousel[inactive] > .slider-nav, .carousel[inactive] > div > .slider-nav { display: none; } .carousel[inactive] > .slider::-webkit-scrollbar-thumb, .carousel[inactive] > div > .slider::-webkit-scrollbar-thumb { display: none; } .carousel[inactive] > .slider::-webkit-scrollbar-track, .carousel[inactive] > div > .slider::-webkit-scrollbar-track { display: none; } .slider__item { scroll-snap-align: start; } .slider-nav--show-on-hover { transition: opacity 0.3s; opacity: 0; } .slider-nav--show-on-hover .slider-nav__btn { transform: translateX(20px); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.6, 0.4, 1); } .carousel:hover .slider-nav--show-on-hover { opacity: 1; } .carousel:hover .slider-nav--show-on-hover .slider-nav__btn { transform: translateX(0); } .carousel:hover .slider-nav--show-on-hover .slider-nav__btn:nth-child(2) { transition-delay: 0.05s; } .slider-nav { --btn-border-radius: var(--btn-icon-border-radius); } .slider-nav:not(.slide-nav--inline) { z-index: 3; top: 50%; right: var(--gutter); transform: translate(50%, -50%); } [dir=rtl] .slider-nav:not(.slide-nav--inline) { right: auto; left: var(--gutter); transform: translate(-50%, -50%); } .slider-nav__btn { display: block; margin-top: calc(3 * var(--space-unit)); margin-bottom: calc(3 * var(--space-unit)); } .slider-nav__btn:not([disabled]) .icon { transition: transform 0.3s; } .slider-nav__btn:not([disabled]):hover .icon { transform: scale(1.25); } .slide-nav--inline .slider-nav__btn { margin-top: 0; margin-bottom: 0; overflow: hidden; color: currentColor; } .slider-nav__btn--offset { margin-inline-end: -10px; } [dir=rtl] .slider-nav__btn.has-ltr-icon .icon { transform: rotate(180deg); } [dir=rtl] .slider-nav__btn.has-ltr-icon:not([disabled]):hover .icon { transform: rotate(180deg) scale(1.25); } .slider-nav > .btn { padding: calc(8px - var(--btn-border-width)); } @media (max-width: 599.98px) { .slider .slider__grid { width: calc(100% - var(--column-gap)); } .drawer--cart .slider__grid { width: 100%; } .carousel[disable-mobile=true] > .slider, .carousel[disable-mobile=true] > div > .slider { overflow: auto; cursor: auto; -webkit-user-select: auto; user-select: auto; scroll-snap-type: none; } .carousel[disable-mobile=true] > .slider > .slider__grid, .carousel[disable-mobile=true] > .slider > div > .slider__grid, .carousel[disable-mobile=true] > div > .slider > .slider__grid, .carousel[disable-mobile=true] > div > .slider > div > .slider__grid { grid-auto-flow: row; } product-card-image-slider[disable-mobile=true] > div > .slider { overflow: hidden !important; } product-card-image-slider[disable-mobile=true] > div > .slider > .slider__grid { grid-auto-flow: column !important; } } @media (min-width: 600px) { .carousel[disable-desktop=false] > .slider, .carousel[disable-desktop=false] > div > .slider { overflow: auto; cursor: auto; -webkit-user-select: auto; user-select: auto; scroll-snap-type: none; } .carousel[disable-desktop=true] > .slider > div > .slider__grid, .carousel[disable-desktop=true] > div > .slider > div > .slider__grid { grid-auto-flow: row; overflow: hidden; } } @media (min-width: 769px) { .carousel:not([inactive]) .section__heading { text-align: start; } carousel-slider[disable-desktop=true] > [data-overlayscrollbars-viewport], carousel-slider[disable-desktop=true] > div > [data-overlayscrollbars-viewport], product-comparison-grid[disable-desktop=true] [data-overlayscrollbars-viewport] { padding: 0 !important; } } @media (max-width: 1023.98px) { .carousel > .container { padding: 0; } .carousel__header { padding: 0 var(--gutter); } .slider:not(.slider--no-scrollbar) { width: 100%; scroll-padding-left: var(--gutter); } [dir=rtl] .slider:not(.slider--no-scrollbar) { scroll-padding-right: var(--gutter); scroll-padding-left: 0; } .slider:not(.slider--contained) .slider__item:last-child { width: calc(100% + var(--gutter)); border-inline-end: var(--gutter) solid transparent; } } @media (min-width: 1024px) { .slider::-webkit-scrollbar-track { margin: 0 calc(var(--scrollbar-border-width) * -1); } .slider[data-overlayscrollbars-viewport] { padding-bottom: calc(14 * var(--space-unit)) !important; } .slider > .container { padding: 0; } } @media (min-width: 1280px) { .slider-nav:not(.slide-nav--inline) { transform: translate(calc(100% + var(--gutter-lg, 80px) / 4), -50%); } [dir=rtl] .slider-nav:not(.slide-nav--inline) { transform: translate(-50%, -50%); } } .social { margin: -10px; } .social__link { width: 44px; height: 44px; padding: 10px; color: rgb(var(--text-color)); } .social__link > .icon { width: auto; max-width: 100%; height: 100%; } .social__link > .icon, .social__link > img { transition: transform 0.3s ease-out; } .social__link:hover > .icon, .social__link:hover > img { transform: scale(1.2); } .social-share__heading { margin-inline-end: calc(4 * var(--space-unit)); } [data-swatch]::before { background-color: var(--swatch-color, var(--native-swatch-color, rgb(var(--text-color)/0.08))); background-image: var(--swatch-image, var(--native-swatch-image, none)); } .card__swatches { z-index: 3; flex-wrap: wrap; padding: calc(3 * var(--space-unit)) 0 0; padding-inline-end: 2px; row-gap: calc(3 * var(--space-unit)); } .card__swatches > .opt-label { width: var(--swatch-card-size, 24px); height: var(--swatch-card-size, 24px); margin-top: 0; margin-inline-start: 2px; margin-inline-end: 8px; border-width: 1px; } .card__swatches > .opt-label.swatch-shape--portrait { height: calc(var(--swatch-card-size, 24px) / 0.75); } .card__swatches > .opt-label.swatch-shape--natural.swatch--variant-image { height: auto; } .swatch-shape--natural.swatch--native { height: auto; } .swatch-shape--natural.swatch--native::before { display: none; } .option-selector__btns:has(.swatch-shape--natural.swatch--native) { align-items: flex-start; } label[data-swatch], .filter__label[data-swatch]::before { width: var(--swatch-variant-picker-size, 36px); min-width: 0; height: var(--swatch-variant-picker-size, 36px); padding: 0; overflow: hidden; transition: box-shadow 0.1s, border-color 0.2s ease-out; border: 1px solid rgb(var(--swatch-border-color-default)); border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--text-color)/0); cursor: pointer; } label[data-swatch]:hover, .filter__label[data-swatch]:hover::before { border: 2px solid rgba(var(--bg-color)); box-shadow: 0 0 0 2px rgb(var(--swatch-border-color-default)); } input:checked + .opt-label--swatch, input:checked + .filter__label[data-swatch]::before { border: 2px solid rgba(var(--bg-color)); box-shadow: 0 0 0 2px rgb(var(--swatch-border-color-active)); } label[data-swatch]::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: cover; } .swatch-shape--not-circle[data-swatch], .swatch-shape--not-circle[data-swatch]::before { border-radius: 0; } .is-unavailable + .opt-label--swatch .opt-label__media::after, .is-unavailable + .opt-label--swatch:not(.opt-label--image)::after { background: linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(var(--bg-color)) calc(50% - 1px), rgba(var(--bg-color)) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat !important; } .is-unavailable + .opt-label--swatch:not(.opt-label--image)::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .custom-select__btn[data-swatch]::before, .custom-select__option[data-swatch]::before { border: 1px solid rgb(var(--swatch-border-color-default)); } .tablist::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 25px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(var(--bg-color)) 50%); } .tablist__scroller { overflow-x: auto; white-space: nowrap; } .tablist__tab { margin-inline-end: 3rem; padding: 1.2rem 0; color: rgba(var(--text-color)/0.7); white-space: nowrap; } .tablist__tab[aria-selected=true] { color: rgb(var(--text-color)); text-decoration: underline; text-underline-offset: 0.8rem; text-decoration-thickness: 2px; } .cc-compare { display: none; } .theme-metafield-color { display: inline-block; width: 24px; height: 24px; border-radius: 50%; } .product-label-container { z-index: 2; } .product-info__block .product-label-container { display: flex; flex-wrap: wrap; align-items: flex-start; } .product-label-wrapper:not(:last-child) { margin-bottom: 2px; } .product-info__block .product-label-wrapper { margin-bottom: 3px; } .product-label, .collection-label { display: inline-flex; align-items: center; padding: 2px 6px; font-size: 1.1rem; line-height: 1.7rem; } .product-info__block .product-label, .product-info__block .collection-label { margin-inline-end: 3px; } .badge.collection-label { position: absolute; z-index: 1; top: 8px; left: 8px; max-width: calc(100% - 16px); margin: 0; background-color: #fff; box-shadow: 1px 2px 4px -1px rgba(128, 128, 137, 0.52); color: rgb(var(--collection-label-color)); white-space: normal; } .badge.collection-label::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 2em; background-color: rgba(var(--collection-label-color)/0.1); } .badge.collection-label--circle { top: 5%; right: 5%; left: auto; } .product-label .icon, .collection-label .icon { position: relative; top: -0.5px; flex-shrink: 0; margin-inline-end: 0.5em; } .product-label--custom { background-color: rgb(var(--custom-label-bg-color)); color: rgb(var(--custom-label-text-color)); } .product-label--sale { background-color: rgb(var(--sale-label-bg-color)); color: rgb(var(--sale-label-text-color)); } .product-label--sold-out { background-color: rgb(var(--sold-out-label-bg-color)); color: rgb(var(--sold-out-label-text-color)); } .product-label--new { background-color: rgb(var(--new-label-bg-color)); color: rgb(var(--new-label-text-color)); } .product-label--preorder { background-color: rgb(var(--preorder-label-bg-color)); color: rgb(var(--preorder-label-text-color)); } @media (max-width: 599.98px) { [data-layout=list] .product-label-container { position: relative; top: calc(2 * var(--space-unit)); } .product-label .icon { width: 12px; } } @media (min-width: 769px) { .product-label { padding: 4px 8px; font-size: 1.3rem; } .xl\:auto-cols-4 .badge.collection-label--circle { top: 7%; right: 7%; } } /* stylelint-disable */ /*! * OverlayScrollbars * Version: 2.5.0 * * Copyright (c) Rene Haas | KingSora. * https://github.com/KingSora * * Released under the MIT license. */ .os-size-observer, .os-size-observer-listener { box-sizing: border-box; direction: inherit; overflow: hidden; pointer-events: none; scroll-behavior: auto !important; visibility: hidden; } .os-size-observer, .os-size-observer-listener, .os-size-observer-listener-item, .os-size-observer-listener-item-final { left: 0; position: absolute; top: 0; writing-mode: horizontal-tb; } .os-size-observer { border: inherit; bottom: 0; box-sizing: inherit; contain: strict; display: flex; flex-direction: row; flex-wrap: nowrap; left: 0; margin: -133px; padding: inherit; right: 0; top: 0; transform: scale(0.1); z-index: -1; } .os-size-observer:before { box-sizing: inherit; content: ""; flex: none; height: 10px; padding: 10px; width: 10px; } .os-size-observer-appear { animation: os-size-observer-appear-animation 1ms forwards; } .os-size-observer-listener { border: inherit; box-sizing: border-box; flex: auto; margin: -133px; padding: inherit; position: relative; transform: scale(10); } .os-size-observer-listener.ltr { margin-left: 0; margin-right: -266px; } .os-size-observer-listener.rtl { margin-left: -266px; margin-right: 0; } .os-size-observer-listener:empty:before { content: ""; height: 100%; width: 100%; } .os-size-observer-listener:empty:before, .os-size-observer-listener > .os-size-observer-listener-item { border: inherit; box-sizing: content-box; display: block; flex: auto; padding: inherit; position: relative; } .os-size-observer-listener-scroll { box-sizing: border-box; display: flex; } .os-size-observer-listener-item { bottom: 0; direction: ltr; flex: none; overflow: hidden; right: 0; } .os-size-observer-listener-item-final { transition: none; } @keyframes os-size-observer-appear-animation { 0% { cursor: auto; } to { cursor: none; } } .os-trinsic-observer { border: none; box-sizing: border-box; contain: strict; flex: none; height: 0; margin: 0; max-height: 1px; max-width: 0; overflow: hidden; padding: 0; position: relative; top: calc(100% + 1px); z-index: -1; } .os-trinsic-observer:not(:empty) { height: calc(100% + 1px); top: -1px; } .os-trinsic-observer:not(:empty) > .os-size-observer { height: 1000%; min-height: 1px; min-width: 1px; width: 1000%; } .os-environment { height: 200px; opacity: 0; overflow: scroll; position: fixed; scroll-behavior: auto !important; visibility: hidden; width: 200px; z-index: -1; } .os-environment div { height: 200%; margin: 10px 0; width: 200%; } .os-environment.os-environment-flexbox-glue { display: flex; flex-direction: row; flex-wrap: nowrap; height: auto; min-height: 200px; min-width: 200px; width: auto; } .os-environment.os-environment-flexbox-glue div { flex: auto; height: auto; margin: 0; max-height: 100%; max-width: 100%; width: auto; } .os-environment.os-environment-flexbox-glue-max { max-height: 200px; } .os-environment.os-environment-flexbox-glue-max div { overflow: visible; } .os-environment.os-environment-flexbox-glue-max div:before { content: ""; display: block; height: 999px; width: 999px; } .os-environment, [data-overlayscrollbars-viewport] { -ms-overflow-style: scrollbar !important; } .os-environment-scrollbar-hidden, [data-overlayscrollbars-initialize], [data-overlayscrollbars-viewport~=scrollbarHidden], [data-overlayscrollbars~=scrollbarHidden] { scrollbar-width: none !important; } .os-environment-scrollbar-hidden::-webkit-scrollbar, .os-environment-scrollbar-hidden::-webkit-scrollbar-corner, [data-overlayscrollbars-initialize]::-webkit-scrollbar, [data-overlayscrollbars-initialize]::-webkit-scrollbar-corner, [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar, [data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner, [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar, [data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner { -webkit-appearance: none !important; appearance: none !important; display: none !important; height: 0 !important; width: 0 !important; } [data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body) { overflow: auto; } html[data-overlayscrollbars] { box-sizing: border-box; margin: 0; } html[data-overlayscrollbars~=body], html[data-overlayscrollbars~=body] > body { height: 100%; width: 100%; } html[data-overlayscrollbars~=viewport] > body { overflow: visible; } [data-overlayscrollbars-padding], [data-overlayscrollbars~=host] { align-items: stretch !important; display: flex; flex-direction: row !important; flex-wrap: nowrap !important; } [data-overlayscrollbars-padding], [data-overlayscrollbars-viewport] { border: none; box-sizing: inherit; flex: auto !important; height: auto; margin: 0; min-width: 0; padding: 0; position: relative; width: 100%; z-index: 0; } [data-overlayscrollbars-viewport] { --os-vaw:0; --os-vah:0; } [data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before { content: ""; height: var(--os-vah); min-height: 1px; min-width: 1px; pointer-events: none; position: absolute; width: var(--os-vaw); z-index: -1; } [data-overlayscrollbars-padding], [data-overlayscrollbars-viewport] { overflow: hidden; } [data-overlayscrollbars~=host], [data-overlayscrollbars~=viewport] { overflow: hidden; position: relative; } [data-overlayscrollbars-padding~=overflowVisible], [data-overlayscrollbars-viewport~=overflowVisible], [data-overlayscrollbars~=overflowVisible] { overflow: visible; } [data-overlayscrollbars-overflow-x=hidden] { overflow-x: hidden; } [data-overlayscrollbars-overflow-x=scroll] { overflow-x: scroll; } [data-overlayscrollbars-overflow-x=hidden] { overflow-y: hidden; } [data-overlayscrollbars-overflow-y=scroll] { overflow-y: scroll; } [data-overlayscrollbars~=scrollbarPressed], [data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport] { scroll-behavior: auto !important; } [data-overlayscrollbars-content] { box-sizing: inherit; } [data-overlayscrollbars-contents]:not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]) { display: contents; } [data-overlayscrollbars-grid], [data-overlayscrollbars-grid] [data-overlayscrollbars-padding] { display: grid; grid-template: 1fr/1fr; } [data-overlayscrollbars-grid] > [data-overlayscrollbars-padding], [data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport], [data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport] { height: auto !important; width: auto !important; } .os-scrollbar { contain: size layout; contain: size layout style; opacity: 0; pointer-events: none; position: absolute; transition: opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s; visibility: hidden; } body > .os-scrollbar { position: fixed; z-index: 99999; } .os-scrollbar-transitionless { transition: none; } .os-scrollbar-track { border: none !important; direction: ltr !important; padding: 0 !important; position: relative; } .os-scrollbar-handle { position: absolute; } .os-scrollbar-handle, .os-scrollbar-track { height: 100%; pointer-events: none; width: 100%; } .os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle, .os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track { pointer-events: auto; touch-action: none; } .os-scrollbar-horizontal { bottom: 0; left: 0; } .os-scrollbar-vertical { right: 0; top: 0; } .os-scrollbar-rtl.os-scrollbar-horizontal { right: 0; } .os-scrollbar-rtl.os-scrollbar-vertical { left: 0; right: auto; } .os-scrollbar-visible { opacity: 1; visibility: visible; } .os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden { opacity: 0; visibility: hidden; } .os-scrollbar-interaction.os-scrollbar-visible { opacity: 1; visibility: visible; } .os-scrollbar-unusable, .os-scrollbar-unusable *, .os-scrollbar-wheel, .os-scrollbar-wheel * { pointer-events: none !important; } .os-scrollbar-unusable .os-scrollbar-handle { opacity: 0 !important; } .os-scrollbar-horizontal .os-scrollbar-handle { bottom: 0; } .os-scrollbar-vertical .os-scrollbar-handle { right: 0; } .os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle { left: 0; right: auto; } .os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless, .os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl { left: 0; right: 0; } .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless, .os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl { bottom: 0; top: 0; } .os-scrollbar { --os-size:0; --os-padding-perpendicular:0; --os-padding-axis:0; --os-track-border-radius:0; --os-track-bg:none; --os-track-bg-hover:none; --os-track-bg-active:none; --os-track-border:none; --os-track-border-hover:none; --os-track-border-active:none; --os-handle-border-radius:0; --os-handle-bg:none; --os-handle-bg-hover:none; --os-handle-bg-active:none; --os-handle-border:none; --os-handle-border-hover:none; --os-handle-border-active:none; --os-handle-min-size:33px; --os-handle-max-size:none; --os-handle-perpendicular-size:100%; --os-handle-perpendicular-size-hover:100%; --os-handle-perpendicular-size-active:100%; --os-handle-interactive-area-offset:0; } .os-scrollbar .os-scrollbar-track { background: var(--os-track-bg); border: var(--os-track-border); border-radius: var(--os-track-border-radius); transition: opacity 0.15s, background-color 0.15s, border-color 0.15s; } .os-scrollbar .os-scrollbar-track:hover { background: var(--os-track-bg-hover); border: var(--os-track-border-hover); } .os-scrollbar .os-scrollbar-track:active { background: var(--os-track-bg-active); border: var(--os-track-border-active); } .os-scrollbar .os-scrollbar-handle { background: var(--os-handle-bg); border: var(--os-handle-border); border-radius: var(--os-handle-border-radius); } .os-scrollbar .os-scrollbar-handle:before { bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; } .os-scrollbar .os-scrollbar-handle:hover { background: var(--os-handle-bg-hover); border: var(--os-handle-border-hover); } .os-scrollbar .os-scrollbar-handle:active { background: var(--os-handle-bg-active); border: var(--os-handle-border-active); } .os-scrollbar-horizontal { height: var(--os-size); padding: var(--os-padding-perpendicular) var(--os-padding-axis); right: var(--os-size); } .os-scrollbar-horizontal.os-scrollbar-rtl { left: var(--os-size); right: 0; } .os-scrollbar-horizontal .os-scrollbar-handle { height: var(--os-handle-perpendicular-size); max-width: var(--os-handle-max-size); min-width: var(--os-handle-min-size); transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s; } .os-scrollbar-horizontal .os-scrollbar-handle:before { bottom: calc(var(--os-padding-perpendicular) * -1); top: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1); } .os-scrollbar-horizontal:hover .os-scrollbar-handle { height: var(--os-handle-perpendicular-size-hover); } .os-scrollbar-horizontal:active .os-scrollbar-handle { height: var(--os-handle-perpendicular-size-active); } .os-scrollbar-vertical { bottom: var(--os-size); padding: var(--os-padding-axis) var(--os-padding-perpendicular); width: var(--os-size); } .os-scrollbar-vertical .os-scrollbar-handle { max-height: var(--os-handle-max-size); min-height: var(--os-handle-min-size); transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s; width: var(--os-handle-perpendicular-size); } .os-scrollbar-vertical .os-scrollbar-handle:before { left: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1); right: calc(var(--os-padding-perpendicular) * -1); } .os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before { left: calc(var(--os-padding-perpendicular) * -1); right: calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1); } .os-scrollbar-vertical:hover .os-scrollbar-handle { width: var(--os-handle-perpendicular-size-hover); } .os-scrollbar-vertical:active .os-scrollbar-handle { width: var(--os-handle-perpendicular-size-active); } .os-theme-none.os-scrollbar, [data-overlayscrollbars~=updating] > .os-scrollbar { display: none !important; } .os-theme-dark, .os-theme-light { --os-size:10px; --os-padding-perpendicular:2px; --os-padding-axis:2px; --os-track-border-radius:10px; --os-handle-interactive-area-offset:4px; --os-handle-border-radius:10px; box-sizing: border-box; } .os-theme-dark { --os-handle-bg:rgba(0,0,0,.44); --os-handle-bg-hover:rgba(0,0,0,.55); --os-handle-bg-active:rgba(0,0,0,.66); } .os-theme-light { --os-handle-bg:hsla(0,0%,100%,.44); --os-handle-bg-hover:hsla(0,0%,100%,.55); --os-handle-bg-active:hsla(0,0%,100%,.66); } /* stylelint-enable */ .badge { display: inline-flex; position: relative; top: -2px; align-items: center; margin: -0.6em 0; padding: 0.6em 0.9em; border-radius: 2em; background: rgb(var(--text-color)); color: rgba(var(--bg-color)); font-size: 1rem; font-weight: bold; line-height: 1rem; white-space: nowrap; } .cc-header--sticky { position: -webkit-sticky; position: sticky; z-index: 30; top: -1px; } .header { display: block; position: relative; z-index: 30; padding: calc(2 * var(--space-unit)) 0; border-bottom: 1px solid rgba(var(--text-color)/0.15); background-color: rgba(var(--bg-color)); color: rgb(var(--text-color)); } .header__logo { flex: 1; } .logo__h1 { line-height: 0; } .logo__text { font-size: var(--logo_font-size); } .header__icons { flex: 0 0 auto; margin-inline-end: -10px; } .header__icon { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; color: inherit; text-align: center; } .header__icon > .icon { width: 100%; height: 100%; } .header__icon .icon--cart { width: 28px; height: 28px; } .header__icon--cart-shake { animation: shake-n-grow 0.9s var(--shake-delay) cubic-bezier(0.455, 0.03, 0.515, 0.955) 2 both; } .header__icon--cart-shake .header__cart-count { animation: shake 1s calc(var(--shake-delay) + 1.2s) ease-out 1 both; } .header__cart-count { top: 2px; right: 2px; min-width: 18px; min-height: 18px; padding: 0 5px; border-radius: 9px; background-color: rgb(var(--header-accent-color)); box-shadow: 0 0 0 2px rgba(var(--bg-color)); color: rgba(var(--bg-color)); font-size: 11px; font-weight: bold; line-height: 18px; } .header__search { flex: 0 0 100%; order: 2; } @media (max-width: 768.98px) { .header__search--collapsible-mob predictive-search, .header__search--collapsible-mob > .search { max-height: 64px; overflow: hidden; transition: max-height var(--header-transition-speed), margin var(--header-transition-speed); } .search-is-collapsed .header__search--collapsible-mob predictive-search, .search-is-collapsed .header__search--collapsible-mob > .search { max-height: 0; } .search-is-visible .header__search--collapsible-mob predictive-search, .search-is-visible .header__search--collapsible-mob > .search { max-height: none; overflow: visible; } .header__icon.hidden.md\:block { display: none; } } @media (min-width: 769px) { .header { padding: calc(4 * var(--space-unit)) 0 0; } .header__logo, .header__icons { flex: 1 1 auto; margin-bottom: 16px; padding-inline-start: calc(6 * var(--space-unit)); } .header__logo { order: 0; padding-inline-start: 0; padding-inline-end: calc(6 * var(--space-unit)); } .header__search { display: block; flex: 6 1 auto; order: 1; margin-top: 0; } .header__search.header__search--collapsible predictive-search { display: block; } .header__search > .header__icon--search-left { padding: 10px; transition: transform 0.2s; transform: translateX(-37px); } .header__icon--search-left-search { display: none; } .header__grid .header__icon--search-left-close svg { width: 24px; height: 24px; } .search-is-collapsed .header__icon--search-left { transform: translateX(-12px); } .search-is-collapsed .header__icon--search-left-search { display: block; } .search-is-collapsed .header__icon--search-left-close { display: none; } .header__icons { order: 2; } .main-menu { order: 3; } .header__grid--centered-logo .header__search { flex: 1 1 33%; order: 0; } .header__grid--centered-logo .header__logo { flex: 1 1 34%; justify-content: center; order: 1; padding-inline-start: calc(6 * var(--space-unit)); } .header__grid--centered-logo .header__icons { flex: 1 1 33%; } .cc-header--sticky .main-menu__disclosure { max-height: var(--menu-height); overflow: hidden; transition: max-height var(--header-transition-speed), margin-top var(--header-transition-speed); } .cc-header--sticky .header { margin-bottom: 0; transition: margin-bottom var(--header-transition-speed); } .cc-header--sticky .header.is-out { margin-bottom: var(--menu-height); } .cc-header--sticky .header.is-out .main-menu__disclosure { max-height: 0; margin-top: 0; } .cc-header--sticky .header__cart-count-number { position: relative; top: 0.05em; } .header__search--collapsible-desktop predictive-search, .header__search--collapsible-desktop > .search { transition: opacity 0.2s, visibility 0.2s, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); } .search-is-collapsed .header__search--collapsible-desktop predictive-search, .search-is-collapsed .header__search--collapsible-desktop > .search { visibility: hidden; transform: translateX(50px); opacity: 0; } } @media (min-width: 1024px) { .header__icon { padding: 6px; } .header__icon svg { width: 32px; height: 32px; } .header__icon + .header__icon { margin-inline-start: 12px; } } @media (min-width: 1280px) { .header__icon { padding: 6px; } .header__cart-count { top: 0; right: 0; } } .last\:mb-0:last-child{ margin-bottom: 0; } .last\:pb-0:last-child{ padding-bottom: 0; } .hover\:underline:hover{ text-decoration-line: underline; } @media (min-width: 600px){ .sm\:col-span-2{ grid-column: span 2 / span 2; } .sm\:col-span-3{ grid-column: span 3 / span 3; } .sm\:block{ display: block; } .sm\:flex{ display: flex; } .sm\:grid{ display: grid; } .sm\:w-auto{ width: auto; } .sm\:auto-cols-2{ grid-auto-columns: calc((100% - var(--column-gap)) / 2); } .sm\:auto-cols-3{ grid-auto-columns: calc((100% - var(--column-gap) * 2) / 3); } .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-8{ grid-template-columns: repeat(8, minmax(0, 1fr)); } .sm\:flex-wrap{ flex-wrap: wrap; } .sm\:gap-x-theme{ column-gap: var(--column-gap); } .sm\:gap-y-8{ row-gap: calc(8 * var(--space-unit)); } .sm\:text-end{ text-align: end; } } @media (min-width: 769px){ .md\:col-span-1{ grid-column: span 1 / span 1; } .md\:mb-0{ margin-bottom: 0; } .md\:mb-12{ margin-bottom: calc(12 * var(--space-unit)); } .md\:mb-14{ margin-bottom: calc(14 * var(--space-unit)); } .md\:mb-6{ margin-bottom: calc(6 * var(--space-unit)); } .md\:mb-8{ margin-bottom: calc(8 * var(--space-unit)); } .md\:mr-2{ margin-right: calc(2 * var(--space-unit)); } .md\:mt-14{ margin-top: calc(14 * var(--space-unit)); } .md\:mt-16{ margin-top: calc(16 * var(--space-unit)); } .md\:block{ display: block; } .md\:inline{ display: inline; } .md\:flex{ display: flex; } .md\:inline-flex{ display: inline-flex; } .md\:grid{ display: grid; } .md\:hidden{ display: none; } .md\:h-auto{ height: auto; } .md\:w-auto{ width: auto; } .md\:auto-cols-2{ grid-auto-columns: calc((100% - var(--column-gap)) / 2); } .md\:auto-cols-3{ grid-auto-columns: calc((100% - var(--column-gap) * 2) / 3); } .md\:auto-cols-4{ grid-auto-columns: calc((100% - var(--column-gap) * 3) / 4); } .md\:grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex-row{ flex-direction: row; } .md\:flex-row-reverse{ flex-direction: row-reverse; } .md\:flex-wrap{ flex-wrap: wrap; } .md\:items-center{ align-items: center; } .md\:gap-y-16{ row-gap: calc(16 * var(--space-unit)); } .md\:gap-y-6{ row-gap: calc(6 * var(--space-unit)); } .md\:gap-y-8{ row-gap: calc(8 * var(--space-unit)); } .md\:self-start{ align-self: flex-start; } .md\:p-8{ padding: calc(8 * var(--space-unit)); } .md\:pt-0{ padding-top: 0; } } @media (min-width: 1024px){ .lg\:col-span-1{ grid-column: span 1 / span 1; } .lg\:col-span-2{ grid-column: span 2 / span 2; } .lg\:col-span-3{ grid-column: span 3 / span 3; } .lg\:col-span-4{ grid-column: span 4 / span 4; } .lg\:col-start-1{ grid-column-start: 1; } .lg\:col-start-2{ grid-column-start: 2; } .lg\:row-start-1{ grid-row-start: 1; } .lg\:mt-0{ margin-top: 0; } .lg\:mt-8{ margin-top: calc(8 * var(--space-unit)); } .lg\:block{ display: block; } .lg\:hidden{ display: none; } .lg\:auto-cols-3{ grid-auto-columns: calc((100% - var(--column-gap) * 2) / 3); } .lg\:auto-cols-4{ grid-auto-columns: calc((100% - var(--column-gap) * 3) / 4); } .lg\:auto-cols-5{ grid-auto-columns: calc((100% - var(--column-gap) * 4) / 5); } .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:overflow-hidden{ overflow: hidden; } } @media (min-width: 1280px){ .xl\:col-span-2{ grid-column: span 2 / span 2; } .xl\:col-span-3{ grid-column: span 3 / span 3; } .xl\:auto-cols-4{ grid-auto-columns: calc((100% - var(--column-gap) * 3) / 4); } .xl\:auto-cols-5{ grid-auto-columns: calc((100% - var(--column-gap) * 4) / 5); } .xl\:auto-cols-6{ grid-auto-columns: calc((100% - var(--column-gap) * 5) / 6); } .xl\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .xl\:grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .xl\:grid-cols-8{ grid-template-columns: repeat(8, minmax(0, 1fr)); } } } /* Center the text container */ .cc-multi-column .card__info { display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; height: 100%; padding: 1rem; } a.text-theme-text.inline-flex.card__collection--arrow { display: none !important; } /*Remove footer line divider*/ hr.footer__hr { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; } /**For footer terms, policy, and payment moving*/ .custom-footer-legal-wrapper { width: 100%; display: flex; justify-content: flex-end; padding: 1rem 0; } .custom-footer-legal { display: flex; align-items: center; gap: 5rem; font-size: 1.6rem; opacity: 0.8; } .custom-footer-legal a { text-decoration: none; color: inherit; } .custom-footer-legal a:hover { text-decoration: underline; opacity: 1; } @media (max-width: 768px) { .custom-footer-legal-wrapper { justify-content: center; text-align: center; } .custom-footer-legal { flex-direction: column; gap: 0.5rem; } } /*Removes all prices from featured collections section*/ .card__price.theme-money { display: none !important; } /* Splide product gallery styles */ #product-gallery { max-width: 500px; margin: 0 auto 2rem; } .splide__slide img { width: 100%; height: auto; object-fit: contain; } /* Accordion Tabs */ .product-tabs { max-width: 1000px; margin: 0 auto; } .product-tab { border-top: 1px solid #ddd; } .product-tab summary { cursor: pointer; font-weight: 600; padding: 1em; text-align: left; background: none; font-size: 1.1rem; } .product-tab[open] summary { background: #f7f7f7; } .product-tab .tab-content { padding: 1em; font-size: 0.95rem; color: #444; } /* Splide Gallery Tweaks */ .splide { max-width: 600px; } .splide__slide img { width: 100%; height: auto; object-fit: cover; } .accordion-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 1rem; font-weight: 500; padding: 1em; background: transparent; border: none; border-bottom: 1px solid #ccc; cursor: pointer; text-align: left; position: relative; } .accordion-toggle .chevron { display: inline-block; transition: transform 0.3s ease; font-size: 1rem; margin-left: 1rem; } /* When active/expanded */ .accordion-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); /* Rotates the chevron down */ } .accordion-wrapper { border-top: 1px solid #ddd; max-width: 900px; margin: 2rem 0; } .accordion-item { border-bottom: 1px solid #ddd; } .accordion-toggle { width: 100%; background: none; border: none; padding: 1rem 0; font-size: 1rem; font-weight: 500; text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .accordion-toggle .chevron { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.3s ease; } .accordion-item.open .chevron { transform: rotate(180deg); } .accordion-content { display: none; padding: 0.5rem 0 1rem 0; color: #444; font-size: 0.95rem; } .accordion-item.open .accordion-content { display: block; } /* Typography Refinement */ .product-title { font-family: 'NeueHaasUnica', sans-serif; font-size: 2.4rem; font-weight: 400; letter-spacing: 0.3px; text-transform: none; margin-bottom: 20px; } .product-price { font-family: 'NeueHaasUnica', sans-serif; font-size: 1.1rem; font-weight: 400; letter-spacing: 0.2px; margin-bottom: 30px; } .accordion-toggle, .accordion-content { font-family: 'NeueHaasUnica', sans-serif; font-size: 0.95rem; letter-spacing: 0.2px; line-height: 1.6; color: #222; } .accordion-toggle { font-size: 1.05rem; font-weight: 500; } .accordion-content { font-weight: 400; } /* Hide footer copyright but keep payment icons */ .footer__content-bottom .site-footer__copyright { display: none !important; } /* target the p under each logo‐item */ .logo-list__logo p { font-size: 1rem; /* ← 16px */ line-height: 1.3; /* tweak as you like */ text-align: left; padding-left: 12px; } /* optional: smaller on phones */ @media (max-width: 640px) { .logo-list__logo p { font-size: 0.875rem; /* ← 14px */ } .top-level-text.no-link { pointer-events: none; cursor: default; }