/** Shopify CDN: Minification failed
Line 3300:26 Expected ":"
**/
@charset "utf-8";
/**
* Text-level semantic ??
*/
/* :active {
outline: none;
} */
/* ?? */
/* a:active, a:hover {
outline: 0;
} */
/* need p ?? */
/* p {
margin-top: 0;
font-size: inherit;
font-weight: inherit;
} */
/* need p ?? */
/* p:last-child {
margin-bottom: 0;
} */
/* ?? */
/* Chrome on mac weirdly blurres images, this helps a bit
(https://stackoverflow.com/questions/37906602/blurry-downscaled-images-in-chrome) */
/* The rule above makes the images blurry in Safari. There is no good documentation, took it from the comments from the link above.*/
/* img {
image-rendering: -webkit-optimize-contrast;
transform: translateZ(0);
} */
/* ?? */
/* svg:not(:root) {
overflow: visible;
} */
/* ?? */
/* button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
} */
/* ?? */
/* legend {
border: 0;
} */
/**
* Tables
*/
/* ?? */
/* table {
border-spacing: 0;
} */
/* ?? */
/* td,
th {
padding: 0;
} */
/**
* ----------------------------------------------------------------------------
* Link
* ----------------------------------------------------------------------------
*/
.Link {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
text-align: left;
gap: 0.5rem;
padding: 0.5rem 0.25rem 0.25rem;
font-family: var(--font-text-family, Lato);
font-size: var(--base-font-size, 16px);
font-style: normal;
font-weight: var(--font-text-weight, 400);
line-height: var(--base-line-height, 24px);
letter-spacing: 0.16px;
color: var(--color-text-link);
cursor: pointer;
}
.Link--inline:not(.Link--blank):visited {
color: var(--color-text-link-visited);
}
.Link:hover {
color: var(--color-text-link-hovered);
}
.Link:active {
color: var(--color-text-link-pressed);
}
.Link:not(.Link--inline)::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: 0;
background-color: currentColor;
transform: scale(1);
transform-origin: left center;
transition: transform .2s ease-in-out;
}
.Link:not(.Link--inline):hover::before, .Link:not(.Link--inline):active::before {
transform: scaleX(0);
}
.Link--sm {
padding: 0.25rem;
letter-spacing: 0.14px;
font-size: 0.875rem;
line-height: 1.25rem;
}
.Link--xs {
padding: 0.25rem 0.25rem 0.125rem;
gap: 0.25rem;
letter-spacing: 0.24px;
font-size: 0.75rem;
line-height: 1rem;
}
.Link--2xs {
padding: 0.25rem 0.25rem 0.125rem;
gap: 0.25rem;
letter-spacing: 0.24px;
font-size: 0.625rem;
line-height: 0.1rem;
}
.Link--inline {
padding: 0;
line-height: inherit;
letter-spacing: inherit;
font-size: inherit;
text-decoration: underline;
text-underline-position: under;
}
.Link--blank {
text-decoration: none;
}
.Link.Link--blank::before {
content: unset;
}
.Link svg {
width: 1.5rem;
height: 1.5rem;
}
.Link--sm svg {
width: 1.25rem;
height: 1.25rem;
}
.Link--xs svg, .Link--2xs svg {
width: 1rem;
height: 1rem;
}
.Link--inline svg {
width: 1.5em;
height: 1.5em;
}
fieldset {
border: 1px solid var(--color-border-primary);
border-radius: 0.25rem;
}
.js .no-js,
.no-js .hide-no-js {
display: none !important;
}
.no-scroll {
overflow: hidden;
}
body:not(.is-tabbing) [tabindex]:focus,
body:not(.is-tabbing) button:focus,
body:not(.is-tabbing) input:focus,
body:not(.is-tabbing) select:focus,
body:not(.is-tabbing) textarea:focus {
outline: none;
}
[data-scrollable] {
overflow: auto;
/*-webkit-overflow-scrolling: touch;*/
}
/**
* Very general typographic rules that are applied site wide
*/
html {
font-size: var(--base-text-font-size);
}
body {
font-family: var(--font-text-family);
font-weight: var(--font-text-weight);
font-style: var(--font-text-style);
color: var(--color-text-secondary);
background: var(--color-background-primary);
line-height: var(--base-line-height);
}
.Heading {
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
color: var(--color-text-primary);
transition: color 0.2s ease-in-out;
}
.Heading.Heading--label {
text-transform: uppercase;
/* letter-spacing: 0.6px; */
letter-spacing: 0.05em;
}
.Heading--large {
font-size: 2em;
}
.Text--subdued {
color: var(--color-text-secondary);
}
.Text--alignLeft {
text-align: left !important;
}
.Text--alignCenter {
text-align: center !important;
}
.Text--alignRight {
text-align: right !important;
}
.LinkWrapperClickable {
position: relative;
background: transparent; /* This is used to increase the clickable area */
--clickable-surface-hovered: var(--color-background-surface-primary-hovered);
--clickable-surface-pressed: var(--color-background-surface-primary-pressed);
}
.LinkWrapperClickable--surfaceSubdued {
--clickable-surface-hovered: var(--color-background-surface-secondary-hovered);
--clickable-surface-pressed: var(--color-background-surface-secondary-pressed);
}
.LinkWrapperClickable::before {
position: absolute;
content: "";
transition: 0.08s ease;
transform: translateZ(0); /* Needed to avoid a glitch on iOS */
top: -0.25em;
right: -0.5em;
left: -0.5em;
bottom: -0.25em;
border-radius: 4px;
z-index: -1;
}
.LinkWrapperClickable:hover {
color: var(--color-text-primary);
}
.LinkWrapperClickable:hover::before {
background: var(--clickable-surface-hovered);
}
.LinkWrapperClickable:active::before {
background: var(--clickable-surface-pressed);
}
/* Icons and Logos */
svg {
display: inline-block;
width: var(--icon-size, 1em);
height: var(--icon-size, 1em);
pointer-events: none;
}
.u-visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.u-h1 {
font-size: 24px;
}
.u-h2 {
font-size: 20px;
}
.u-h3 {
font-size: 18px;
}
.u-h4 {
font-size: 16px;
}
.u-h5 {
font-size: 14px;
}
.u-h6,
.u-h7,
.u-h8 {
font-size: 12px;
}
@media screen and (min-width: 768px) {
.Text--alignCenterDesktop {
text-align: center !important;
}
}
/**
* ----------------------------------------------------------------------------
* Atomic components
* ----------------------------------------------------------------------------
*/
/**
* Icon label
*/
.IconLabel {
display: flex;
column-gap: 0.5em;
/* font-size: 1em; Allow for custom or utility-class font size value */
/* Icon/text alignment: https://css-tricks.com/improving-icons-for-ui-elements-with-typographic-alignment-and-scale/ */
--font-size: 1em;
--iconSize: 1em;
--baselineDistance: calc(var(--font-size) * var(--base-line-height));
--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * 0.5);
}
.IconLabel--spacingLoose {
column-gap: 0.75em;
}
.IconLabel--center {
justify-content: center;
}
.IconLabel__Icon {
width: var(--iconSize);
height: var(--iconSize);
/* Initially used to center the svg element inside .IconLabel__Icon, but somehow this sometimes (e.g. with li in the header) causes the parent of .IconLabel to have an increased height.
So we trying to use vertical-align: top on the svg element, which seems to align it correctly. <-- Currently reverted!! */
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: flex-start;
transform: translateY(var(--iconOffset));
}
.IconLabel__Icon svg {
width: var(--iconSize);
height: var(--iconSize);
}
.IconLabel__Icon img {
width: 100%;
max-height: 100%;
}
/**
* Dot label
*/
.DotLabel {
display: flex;
align-items: center;
gap: 0.5em;
}
.DotLabel__Dot {
width: .5em;
height: .5em;
border-radius: 100%;
background-color: var(--dot-label-color, #000);
}
/**
* Collection Chip
*/
.CollectionChip {
background-color: var(--color-background-surface-primary);
padding: 0.5em 1em;
font-size: 0.875em;
border-radius: 999px;
transition: 0.1s ease-in-out;
box-shadow: var(--elevation);
white-space: nowrap;
}
.CollectionChip:hover {
background: var(--color-background-surface-primary-hovered);
}
.CollectionChip:active {
background: var(--color-background-surface-primary-pressed);
}
/**
* ----------------------------------------------------------------------------
* Loading animation
* ----------------------------------------------------------------------------
*/
/*
* Circle setup
*/
@keyframes animation-circle {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
:is(body, .LoadingContainer, button.loading, .Button.loading, .lion-action-button--loading, .PageOverlay)::after {
/* :is(.PopoverGlobal, #sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Modal, .Product__ReviewsWidgetWrapper, body)::after,
:is(button.loading, .lion-action-button--loading)::after { */
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
}
:is(body, .LoadingContainer, button, .Button, .PageOverlay).loading::after, .lion-action-button--loading::after {
/* :is(.PopoverGlobal, #sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Modal, .Product__ReviewsWidgetWrapper, body).loading::after,
:is(button.loading, .lion-action-button--loading)::after { */
animation: animation-circle 0.75s linear infinite;
}
/*
* Container Loading
*/
:is(body, .LoadingContainer)::before {
/* :is(.PopoverGlobal, #sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Modal, .Product__ReviewsWidgetWrapper, body)::before { */
content: "";
max-width: none; /* ? */
background: var(--color-background-surface-primary);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 4;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
}
[data-section-id="main-cart"]::before, [data-section-id="main-cart"]::after {
position: fixed !important;
}
:is(.LoadingContainer).loading::before {
/* :is(#sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Product__ReviewsWidgetWrapper).loading::before { */
visibility: visible;
opacity: 0.7;
}
:is(body, .PopoverGlobal, .Modal).loading::before {
/* Somehow specificity is not higher than the CSS without .loading selector, thats why the !important */
visibility: visible !important;
opacity: 1 !important;
}
:is(body, .LoadingContainer, .PageOverlay)::after {
/* :is(.PopoverGlobal, #sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Modal, .Product__ReviewsWidgetWrapper, body)::after { */
width: 2rem;
height: 2rem;
border: .15rem solid #ccc;
/* border: .15rem solid transparent; */
border-top: .15rem solid var(--color-text-secondary);
border-left: .15rem solid var(--color-text-secondary);
border-right: .15rem solid var(--color-text-secondary);
/* Fade out
border: .15rem solid #ccc0;
border-top: .15rem solid #bfbfbf;
border-left: .1rem solid #d7d7d7;
border-right: .15rem solid #a7a7a7; */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 11;
}
:is(body, .LoadingContainer, .PageOverlay).loading::after {
/* :is(.PopoverGlobal, #sidebar-cart, #sidebar-menu, [data-section-id="main-cart"], .Modal, .Product__ReviewsWidgetWrapper, body).loading::after { */
visibility: visible;
opacity: 1;
}
body.loading::before {
z-index: 9998 !important;
}
body.loading::after {
z-index: 9999 !important;
}
/**
* ----------------------------------------------------------------------------
* Collapsible
*
* There are 3 required elements/classes for the collapsible functionality:
* .Collapsible
* .Collapsible__Button
* .Collapsible__Inner
*
* It is highly recommended to use
* .Collapsible__Content
* as well, it is not necessary for the functionality though.
*
* The .Collapsible__Content element is used a wrapper for the content.
* This is because of issues with the opening animation when there are multiple elements inside .Collapsible__Inner without the wrapper.
* Do not apply a margin to the wrapper as this also results in issues with the opening animation, use padding instead.
*
* We have the class .Collapsible--default applying the normal styling to the existing collapsible elements
* while decoupling the functional class dependencies from the visual aspects.
* This allows to have the collapsible functionality without any styles applied.
* ----------------------------------------------------------------------------
*/
/* Functional styles */
.Collapsible {
overflow: hidden;
}
.Collapsible__Inner {
display: block;
transition: height 0.3s ease-in-out, visibility 0.3s ease-in-out;
height: 0;
visibility: hidden;
}
.Collapsible__Content {
overflow: hidden;
}
.Collapsible__Inner[aria-hidden="false"] {
visibility: visible;
height: var(--collapsible-height);
}
@media screen and (min-width: 768px) {
/* When this class is applied to a collapsible, it will display as a collapsible on mobile but not on larger screen, where it will automatically appear is auto-expanded */
.Collapsible--autoExpand .Collapsible__StateIndicator {
display: none;
}
.Collapsible--autoExpand .Collapsible__Inner {
height: auto;
visibility: visible;
}
.Collapsible--default.Collapsible--autoExpand {
border: none;
margin-bottom: 32px;
}
.Collapsible--default.Collapsible--autoExpand .Collapsible__Button {
cursor: default;
padding-top: 0;
padding-bottom: 0;
margin-bottom: 2rem;
}
.Collapsible--default.Collapsible--autoExpand .Collapsible__Content {
padding-bottom: 0;
}
}
.Collapsible__StateIndicator {
transition: transform 0.3s ease-in-out;
flex-shrink: 0;
}
.Collapsible__Button[aria-expanded="true"] .Collapsible__StateIndicator {
transform: rotate(180deg);
}
/* Default styling */
.Collapsible--default:not(.Collapsible--unseparated) {
border-bottom: 1px solid var(--color-border-primary);
}
.Collapsible--default .Collapsible__Button {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
padding: 0.75rem 0.5rem;
width: 100%;
--icon-size: 1.5em;
color: var(--color-text-primary);
text-align: left;
font-size: 1rem;
font-weight: var(--font-heading-weight);
line-height: 1.5rem;
letter-spacing: 0.16px;
}
.Collapsible--default .Collapsible__Button:hover {
background-color: var(--color-background-surface-primary-hovered);
}
.Collapsible--default .Collapsible__Button:active {
background-color: var(--color-background-surface-primary-pressed);
}
.Collapsible--default .Collapsible__Content {
padding: 0.25rem 0.5rem 0.5rem;
}
.Collapsible--default .Linklist {
margin-bottom: 4px;
}
.Collapsible--default .Linklist--bordered {
margin-top: 16px;
margin-bottom: 4px;
}
/**
* ----------------------------------------------------------------------------
* Checkmark list
* ----------------------------------------------------------------------------
*/
.Checkmark__List, .Rte .Checkmark__List {
list-style: none;
margin-left: 0;
}
.Checkmark__List li {
position: relative;
}
.Checkmark__List svg {
position: absolute;
width: 1.5em;
height: 1.5em;
left: 0;
color: var(--color-brand);
}
.Checkmark__List li {
padding-left: 30px !important;
}
.Checkmark__List--centered li {
padding-left: 0 !important;
}
.Checkmark__List--centered svg {
position: relative;
margin-top: 0;
bottom: 2px;
margin-right: 6px;
}
.Checkmark__List--crossed svg {
color: var(--color-text-critical);
}
/**
* ----------------------------------------------------------------------------
* Base drawer
* ----------------------------------------------------------------------------
*/
.Drawer {
--drawer-free-space: 64px;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
width: 100vw;
max-width: min(400px, calc(100vw - var(--drawer-free-space))); /* Interestingly, 100% does not work on iOS 9 and lower */
height: 100vh;
max-height: none;
z-index: 20;
transition: transform 0.5s var(--drawer-transition-timing), visibility 0.5s var(--drawer-transition-timing);
background: var(--color-background-surface-primary);
box-shadow: none;
touch-action: manipulation; /* Animating box-shadow is slow, even on modern browsers, so we instead move it in a pseudo-element and animate opacity */
}
.Drawer.Drawer--large {
max-width: min(600px, calc(100vw - var(--drawer-free-space)));
}
@media (max-width: 420px) {
.Drawer {
--drawer-free-space: 2.5rem;
}
}
.Drawer:focus {
outline: none;
}
.Drawer::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
box-shadow: 2px 0 10px rgba(54, 54, 54, 0.2), -2px 0 10px rgba(54, 54, 54, 0.2);
opacity: 0;
transition: opacity 0.5s var(--drawer-transition-timing);
}
.Drawer--fromLeft {
transform: translateX(calc(-100vw + var(--drawer-free-space)));
}
.Drawer--fromRight {
right: 0;
left: auto;
transform: translateX(calc(100vw - var(--drawer-free-space)));
}
.Drawer[aria-hidden=false] {
visibility: visible;
transform: translateX(0);
}
.Drawer[aria-hidden=false]:not(.LoadingContainer)::before {
opacity: 1;
}
.Drawer__Container {
width: 100%;
}
/* .Drawer--fromLeft .Drawer__Container {
padding-left: 18px;
padding-right: 24px;
}
.Drawer--fromRight .Drawer__Container {
padding-left: 24px;
padding-right: 18px;
} */
.Drawer__Container {
padding: 0 1rem;
}
.Drawer__Header {
display: flex;
align-items: center;
position: relative;
height: 3.5rem;
max-height: 4rem;
background: inherit;
text-align: center;
z-index: 1;
gap: 1rem;
justify-content: space-between;
}
.Drawer__Header--flexible {
min-height: 0 !important;
max-height: none !important;
height: auto !important;
padding-top: 20px;
padding-bottom: 20px;
}
.Drawer__Header--flexible .Drawer__Close {
top: 25px;
}
@supports (--css: variables) {
.Drawer__Header {
height: max(3.5rem, var(--header-height)); /* Fallback to 3.5rem when header height is 0 */
}
}
.Drawer__Header--center {
justify-content: center;
}
.Drawer__Header--bordered {
box-shadow: 0 -1px var(--color-border-primary) inset;
}
.Drawer__Content {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
height: calc(100% - 64px);
max-height: calc(100% - 640px); /* This handles an edge case when the header is much bigger than the maximum size for content, but this only works on Safari as of today */
}
@supports (--css: variables) {
.Drawer__Content {
height: calc(100% - var(--header-height));
max-height: calc(100% - var(--header-height));
}
}
@supports (width: calc(max(100%))) {
.Drawer__Content {
height: max(calc(100% - var(--header-height)), calc(100% - 64px));
max-height: max(calc(100% - var(--header-height)), calc(100% - 64px));
}
}
.Drawer__Main {
flex: 1 1 auto;
}
.Drawer__Footer {
flex: none;
box-shadow: 0 -1px var(--color-border-primary);
padding-bottom: var(--ios-bottom-bar-height, 0);
}
.Drawer__Footer--padded {
padding: 24px;
padding-bottom: max(var(--ios-bottom-bar-height, 0), 24px);
}
.Drawer .Drawer__BottomCloseButton {
text-align: center;
letter-spacing: 0.05em;
box-shadow: 0 1px var(--color-border-primary) inset;
padding: 0.75rem 1rem max(var(--ios-bottom-bar-height, 0), 0.75rem);
line-height: 1.5rem;
overflow: unset;
text-transform: uppercase;
border-radius: 0px;
}
.Drawer__BottomCloseButton:hover {
background: var(--color-background-fill-primary-hovered);
}
.Drawer__BottomCloseButton:active {
background: var(--color-background-fill-primary-pressed);
}
@media screen and (min-width: 768px) {
.Drawer {
transform: translateX(-100%);
}
.Drawer--small {
width: 340px;
}
.Drawer--fromRight {
transform: translateX(100%);
}
.Drawer__Header {
/* max-height: 80px; */
min-height: 60px;
}
/* @supports (width: calc(max(100%))) {
.Drawer__Content {
/* This handles an edge case when the header is much bigger than the maximum size for content, but this only works on Safari as of today
height: max(calc(100% - var(--header-height)), calc(100% - 80px));
max-height: max(calc(100% - var(--header-height)), calc(100% - 80px));
}
} */
/* .Drawer--fromLeft .Drawer__Container,
.Drawer--fromRight .Drawer__Container {
padding-left: 30px;
padding-right: 30px;
} */
.Drawer__Footer--padded {
padding: 24px 30px;
padding-bottom: max(var(--ios-bottom-bar-height, 0), 24px);
}
}
/**
* ----------------------------------------------------------------------------
* Animation
* ----------------------------------------------------------------------------
*/
[data-drawer-animated-left],
[data-drawer-animated-right] {
opacity: 0;
transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}
.Drawer[aria-hidden=false] [data-drawer-animated-left],
.Drawer[aria-hidden=false] [data-drawer-animated-right] {
opacity: 1;
transform: translateX(0);
}
[data-drawer-animated-left] {
transform: translateX(-65px);
}
[data-drawer-animated-right] {
transform: translateX(65px);
}
[data-drawer-animated-bottom] {
opacity: 0;
transform: translateY(45px);
transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.Drawer[aria-hidden=false] [data-drawer-animated-bottom] {
opacity: 1;
transform: translateY(0);
transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.45s;
}
/**
* ----------------------------------------------------------------------------
* Drawer overlay
* ----------------------------------------------------------------------------
*/
.Drawer__Overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10;
background: var(--color-background-surface-overlay);
transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.Drawer__Overlay.is-visible {
opacity: .5;
visibility: visible;
}
/**
* ----------------------------------------------------------------------------
* Basic form
* ----------------------------------------------------------------------------
*/
/* radio styling mostly taken from https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
input[type="radio"] {
-webkit-appearance: none;
appearance: none;
color: currentColor;
border: 0.1em solid currentColor;
border-radius: 50%;
/*
Should acutally be -0.05 (half of the border width) but causes pixel issue
And appears to be better aligned without the transformation too */
/* transform: translateY(-0.06em); */
/* For iOS < 15 to remove gradient background */
background-color: var(--form-background, var(--color-background-surface-primary));
display: grid;
place-content: center;
cursor: pointer;
/* Proper text alignemnt */
--font-size: 1em;
--iconSize: 1.125em;
--baselineDistance: calc(var(--font-size) * var(--base-line-height));
--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * .5);
width: var(--iconSize);
height: var(--iconSize);
transform: translateY(var(--iconOffset));
}
input[type="radio"]::before {
content: "";
width: 0.625em;
height: 0.625em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-text, var(--color-text-primary));
/* Windows High Contrast Mode */
background-color: CanvasText;
}
input[type="radio"]:checked::before {
transform: scale(1);
}
input[type="radio"]:focus {
outline: max(2px, 0.15em) solid currentColor;
outline-offset: max(2px, 0.15em);
}
.Form {
width: 100%;
}
.Form__Item,
.Form__Group {
position: relative;
margin-bottom: 20px;
}
.Form__Input,
.Form__Textarea,
.spr-form-input-text,
.spr-form-input-email,
.spr-form-input-textarea {
-webkit-appearance: none;
display: block;
padding: 12px 14px;
border-radius: 0;
border: 1px solid var(--color-border-primary);
width: 100%;
height: 100%;
line-height: normal;
resize: none;
transition: border-color 0.1s ease-in-out;
/* background: transparent; */
background-color: var(--color-background-surface-secondary);
}
.Form__Input:focus,
.Form__Textarea:focus,
.spr-form-input-text:focus,
.spr-form-input-email:focus,
.spr-form-input-textarea:focus {
/* border-color: rgba(var(--text-color-rgb), 0.8); */
border-color: var(--color-text-primary);
outline: none;
}
.Form__Input::-moz-placeholder, .Form__Textarea::-moz-placeholder, .spr-form-input-text::-moz-placeholder, .spr-form-input-email::-moz-placeholder, .spr-form-input-textarea::-moz-placeholder {
color: var(--color-text-secondary);
}
.Form__Input:-ms-input-placeholder, .Form__Textarea:-ms-input-placeholder, .spr-form-input-text:-ms-input-placeholder, .spr-form-input-email:-ms-input-placeholder, .spr-form-input-textarea:-ms-input-placeholder {
color: var(--color-text-secondary);
}
.Form__Input::placeholder,
.Form__Textarea::placeholder,
.spr-form-input-text::placeholder,
.spr-form-input-email::placeholder,
.spr-form-input-textarea::placeholder {
color: var(--color-text-secondary);
}
.Form__FloatingLabel {
position: absolute;
bottom: calc(100% - 8px);
left: 10px;
padding: 0 5px;
line-height: normal;
color: var(--color-text-secondary);
font-size: 0.875em;
opacity: 0;
background: rgba(var(--color-rgb-background-surface-primary), 0);
pointer-events: none;
transform: translateY(3px);
transition: all 0.3s ease-in-out;
}
.Form__Input:not(:-moz-placeholder-shown) ~ .Form__FloatingLabel, .Form__Textarea:not(:-moz-placeholder-shown) ~ .Form__FloatingLabel {
opacity: 1;
background: var(--color-background-surface-primary);
transform: translateY(0);
}
.Form__Input:not(:-ms-input-placeholder) ~ .Form__FloatingLabel, .Form__Textarea:not(:-ms-input-placeholder) ~ .Form__FloatingLabel {
opacity: 1;
background: var(--color-background-surface-primary);
transform: translateY(0);
}
.Form__Input:not(:placeholder-shown) ~ .Form__FloatingLabel,
.Form__Textarea:not(:placeholder-shown) ~ .Form__FloatingLabel {
opacity: 1;
/* background: var(--color-background-surface-primary); */
background: linear-gradient(0deg, var(--color-background-surface-secondary) 49.5%, var(--color-background-surface-primary) 49.5%);
transform: translateY(0);
}
.Form__DataInfo {
font-size: 0.75em;
margin-top: 6px;
line-height: normal;
}
.Form__Checkbox {
position: absolute;
opacity: 0;
}
.Form__Checkbox ~ label::before {
display: inline-block;
content: "";
width: 1em;
height: 1em;
margin-right: 10px;
border: 1px solid var(--color-border-primary);
vertical-align: -2px;
}
.Form__Checkbox ~ svg {
position: absolute;
/* top: 5px;
left: 1px;
width: 12px;
height: 12px; */
top: 3px;
left: -3px;
width: 22px;
height: 22px;
transform: scale(0);
transition: transform 0.2s ease-in-out;
will-change: transform;
}
.Form__Checkbox:checked ~ label::before {
border-color: var(--color-text-secondary);
}
.Form__Checkbox:checked ~ svg {
transform: scale(1);
}
.Form__Alert:not(:empty),
.spr-form-message {
margin-bottom: 20px;
}
.Form__AlertLink {
display: inline-block;
margin: 4px 0 3px;
}
.Form__Submit:not(.Form__Group .Form__Submit) {
display: block;
margin-top: 20px;
}
.Form__Label,
.spr-form-label {
/*
padding-bottom: 8px;
font-size: 0.8125em;
text-transform: uppercase;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
letter-spacing: 0.2em;
line-height: normal; */
display: block;
padding-bottom: 6px;
line-height: normal;
font-weight: 500;
font-size: 0.875em;
}
.Form--small .Form__Input,
.Form--small .Form__Textarea {
font-size: 0.9375em;
padding-top: 10px;
padding-bottom: 10px;
}
.Form--spacingTight .Form__Item {
margin-bottom: 15px;
}
.Form--spacingTight .Form__Alert:not(:empty) {
margin-bottom: 20px;
}
.Form--multistep [data-form-step][aria-hidden="true"], .Form--multistep .Form__Alert[aria-hidden="true"], .Form--multistep .Alert__Message[aria-hidden="true"] {
display: none !important;
}
.Form--multistep [data-form-step-action] * {
pointer-events: none;
}
.Form__Group {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.Form__Group > .Form__Item {
flex: 1;
min-width: 160px;
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.Form__Item,
.Form__Alert:not(:empty),
.Form__Group {
margin-bottom: 30px;
}
}
/**
* ----------------------------------------------------------------------------
* Form elements
* ----------------------------------------------------------------------------
*/
.Form__Header {
margin-bottom: 28px;
margin-top: -0.325rem;
/* text-align: center; */
}
.Form__Hint {
margin: 24px 0 0 0;
}
.Form__Hint:not(:last-child) {
margin-bottom: 32px;
}
/* .Form__Hint--center {
text-align: center;
} */
.Form__ItemHelp {
position: absolute;
right: 12px;
top: 50%;
font-size: 0.875em;
color: var(--color-text-secondary);
transform: translateY(-50%);
}
.Form__Header .Form__Title {
margin-bottom: 5px;
}
/**
* ----------------------------------------------------------------------------
* Register/login/club page and form customisations
* ----------------------------------------------------------------------------
*/
.Form__Wrapper, .ClubLandingPage__HeroPanel {
opacity: 1;
background-color: var(--color-background-surface-primary);
z-index: 1;
width: 100%;
height: 100%;
border-radius: 3px;
}
.Form__Body {
padding: 20px;
}
.Form__Intro {
padding: 17px 20px;
border-bottom: 1px solid var(--color-border-primary);
/* box-shadow: 0 1px 6px 0 rgba(0,0,0,.07); */
}
.Club__LogoWrapper {
min-width: 35px;
max-width: 90px;
width: 100%;
--icon-size: 100%;
}
.Form__Intro .Club__LogoWrapper {
min-width: 45px;
max-width: 70px;
width: 100%;
}
.ClubLandingPage__Intro .Club__LogoWrapper {
min-width: 45px;
max-width: 90px;
width: 100%;
}
.Form__LoginWrapper {
min-height: 300px;
}
#continue_as_guest::before {
content: "";
width: calc(100% + 40px);
position: absolute;
height: 1px;
background-color: var(--color-border-primary);
left: -20px;
top: -15px;
}
#continue_as_guest {
margin-top: 38px;
position: relative;
}
@media (max-width: 767px) {
.Form__LoginWrapper {
border-bottom: 1px solid var(--color-border-primary);
padding-bottom: 30px;
}
#continue_as_guest {
margin-top: 50px;
padding-top: 13px;
padding-bottom: 4px;
}
.Form__Wrapper, .ClubLandingPage__HeroPanel {
margin-top: 25px;
margin-bottom: 25px;
}
}
@media (min-width: 768px) {
.Form__Body .row::after {
content: "";
position: absolute;
width: 1px;
height: 100%;
background-color: var(--color-border-primary);
top: 0;
left: 50%;
}
.Form__Wrapper .Form {
padding: 20px;
}
.Form__Intro {
padding: 17px 40px;
}
}
/* Club landing page */
.ClubLandingPage__Hero .PageContent {
max-width: unset;
}
.ClubLandingPage__Intro, .ClubLandingPage__Footer {
padding: 20px;
}
.ClubLandingPage__Intro, .ClubLandingPage__Text, .ClubLandingPage__Footer, .ClubLandingPage__Intro > * {
width: 100%;
}
.ClubLandingPage__Footer {
border-top: 1px solid var(--color-border-primary);
}
.ClubLandingPage .Image--contrast::after {
background-color: rgba(0,0,0,0.04);
}
@media (min-width: 768px) {
.ClubLandingPage__Intro, .ClubLandingPage__Footer {
padding: 25px;
}
.ClubLandingPage__HeroPanel {
background-color: unset;
}
}
@media (max-width: 767px) {
.ClubLandingPage__VideoWrapper {
border-left: 5px solid var(--color-brand);
border-right: 5px solid var(--color-brand);
}
}
/**
* ----------------------------------------------------------------------------
* Styled select
* ----------------------------------------------------------------------------
*/
select::-ms-expand {
display: none;
}
.Select {
position: relative;
color: currentColor;
line-height: 1;
vertical-align: middle;
}
.Select svg {
position: absolute;
line-height: normal;
pointer-events: none;
vertical-align: baseline;
fill: currentColor;
}
.Select select {
/* Disable built-in styles */
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
color: inherit;
cursor: pointer;
border-radius: 0;
line-height: normal; /* Remove the ugly blue background on IE when a value is selected */
}
.Select select:focus::-ms-value {
background: var(--color-background-surface-primary);
color: var(--color-text-secondary);
}
.Select select.invalid {
border: 1px solid var(--color-text-critical);
}
/* Make sure to have something easy to read... */
.Select option {
background: var(--color-background-surface-primary);
color: black;
}
.Select--primary::after {
content: "";
position: absolute;
right: 1px;
top: 1px;
height: calc(100% - 2px);
width: 55px;
background: linear-gradient(to right, rgba(var(--color-rgb-background-surface-primary), 0), rgba(var(--color-rgb-background-surface-primary), 0.7) 20%, var(--color-background-surface-primary) 40%);
pointer-events: none;
}
.Select--primary select {
width: 100%;
height: 45px;
padding-left: 14px;
padding-right: 28px;
border: 1px solid var(--color-border-primary);
background: var(--color-background-surface-primary);
}
.Select--primary select:active, .Select--primary select:focus {
border-color: var(--color-text-secondary);
outline: none;
}
.Select--primary svg {
top: calc(50% - 5px);
right: 15px;
width: 10px;
height: 10px;
z-index: 1;
}
.Select--transparent select {
padding-right: 15px;
background: transparent;
border: none;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
font-size: inherit;
text-transform: uppercase;
}
.Select--transparent svg {
top: calc(50% - 3px);
right: 0;
height: 6px;
}
/**
* ----------------------------------------------------------------------------
* Select button (emulate a select button without the actual select)
* ----------------------------------------------------------------------------
*/
.SelectButton {
position: relative;
color: currentColor;
padding: 2px 18px 2px 0;
background: transparent;
border: none;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
text-transform: uppercase;
}
.SelectButton svg {
position: absolute;
top: calc(50% - 3px);
right: 0;
height: 6px;
}
.HorizontalList {
list-style: none;
margin: -6px -8px;
}
.HorizontalList__Item {
display: inline-block;
margin: 6px 8px 6px 8px;
}
.HorizontalList--spacingTight {
margin: -3px -6px;
}
.HorizontalList--spacingTight .HorizontalList__Item {
margin: 3px 6px 3px 6px;
}
.HorizontalList--spacingLoose {
margin-left: -14px;
margin-right: -14px;
}
.HorizontalList--spacingLoose .HorizontalList__Item {
margin-right: 14px;
margin-left: 14px;
}
.HorizontalList--spacingExtraLoose {
margin-left: -17px;
margin-right: -17px;
}
.HorizontalList--spacingExtraLoose .HorizontalList__Item {
margin-right: 17px;
margin-left: 17px;
}
.HorizontalList--spacingFill {
display: flex;
justify-content: space-around;
justify-content: space-evenly;
}
.HorizontalList--spacingFill .HorizontalList__Item {
margin-left: 0;
margin-right: 0;
}
@media screen and (min-width: 1200px) {
.HorizontalList--spacingLooseDesktop {
margin-left: -14px;
margin-right: -14px;
}
.HorizontalList--spacingLooseDesktop .HorizontalList__Item {
margin-right: 14px;
margin-left: 14px;
}
.HorizontalList--spacingExtraLoose {
margin-left: -21px;
margin-right: -21px;
}
.HorizontalList--spacingExtraLoose .HorizontalList__Item {
margin-right: 21px;
margin-left: 21px;
}
}
/**
* ----------------------------------------------------------------------------
* Scroll list functional CSS
* ----------------------------------------------------------------------------
*/
.scroll-list {
overflow: hidden;
position: relative;
--hsl-bg-rgb: 255,255,255;
/* Not sure about that, this enables "borderless" scrolling, but has it too many negative side effects? */
width: calc(100% + (2 * var(--container-horizontal-spacing)));
margin-left: calc(var(--container-horizontal-spacing) * -1);
}
@media (min-width: 1024px) {
.scroll-list {
width: auto;
margin-left: 0;
}
}
.scroll-list.scrollable--left, .scroll-list.scrollable--right {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.scroll-list.scrollable--left .scroll-list__content, .scroll-list.scrollable--right .scroll-list__content {
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.scroll-list.dragging.scrollable--left .scroll-list__content, .scroll-list.dragging.scrollable--right .scroll-list__content {
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scroll-list.scrollable--left::before, .scroll-list.scrollable--right::after {
content: "";
width: 60px;
height: calc(100% - 1px); /* Don't overlap bottom border */
position: absolute;
top: 0;
z-index: 2;
pointer-events: none;
}
.scroll-list.scrollable--left:not(.scroll-list--blank)::before {
background-image: linear-gradient(90deg, rgb(var(--hsl-bg-rgb)) 40%, rgba(var(--hsl-bg-rgb), 0.6), rgba(var(--hsl-bg-rgb), 0));
left: 0;
}
.scroll-list.scrollable--right:not(.scroll-list--blank)::after {
background-image: linear-gradient(270deg, rgb(var(--hsl-bg-rgb)) 40%, rgba(var(--hsl-bg-rgb), 0.6), rgba(var(--hsl-bg-rgb), 0));
right: 0;
}
/* for "borderless" scrolling */
.scroll-list__item:first-child {
margin-left: var(--container-horizontal-spacing);
}
.scroll-list__item:last-child {
margin-right: var(--container-horizontal-spacing);
}
@media (min-width: 1024px) {
.scroll-list__item:first-child {
margin-left: 0;
}
.scroll-list__item:last-child {
margin-right: 0;
}
}
/*
Safari / iOS specific CSS
There is an issue where Safari and iOS don't recognize the right margin of the last child, and therefore do not expand the scrollable space.
This prevents the right arrow from disappearing, as the last child is still slightly out of view.
This is a workaround applying padding to the container.
https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices
https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only
*/
@supports (-webkit-touch-callout: none) {
.scroll-list__content {
padding-right: var(--container-horizontal-spacing);
}
}
_::-webkit-full-page-media, _:future, :root .scroll-list__content {
padding-right: var(--container-horizontal-spacing);
}
@media not all and (min-resolution:.001dpcm) { @media {
.scroll-list__content {
padding-right: var(--container-horizontal-spacing)
}
}}
.scroll-list.dragging .scroll-list__item {
pointer-events: none;
touch-action: none;
}
.scroll-list__content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
/* gap: .5rem; Not sure about giving default gap, it should only apply functional aspects */
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
min-height: 2.375em; /* Ensure min height so that the nav buttons are not clipped */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-list__content::-webkit-scrollbar {
display: none;
}
.scroll-list__nav {
position: absolute !important;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: opacity linear 0.2s, visibility linear 0.2s;
z-index: 3 !important;
}
.scroll-list--blank .scroll-list__nav {
visibility: hidden !important;
}
.scroll-list__nav.is-visible {
opacity: 1;
visibility: visible;
}
.scroll-list__nav--left {
left: 0.75rem;
}
.scroll-list__nav--right {
right: 0.75rem;
}
/**
* ----------------------------------------------------------------------------
* Price list
* ----------------------------------------------------------------------------
*/
.PriceList {
line-height: normal;
display: flex;
/* align-items: flex-end; */
align-items: baseline;
flex-wrap: wrap;
gap: 4px 10px;
}
.PriceList__Item:empty {
display: none;
}
/**
* ----------------------------------------------------------------------------
* Image overlay
* ----------------------------------------------------------------------------
*/
.Image--contrast {
position: relative;
}
.Image--contrast::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: linear-gradient(to top, rgba(4, 4, 4, 0.65), rgba(54, 54, 54, 0.2));
}
.Image--contrast > * {
z-index: 1;
}
/**
* ----------------------------------------------------------------------------
* Image lazy loader (integrates with lazy sizes)
* ----------------------------------------------------------------------------
*/
@-webkit-keyframes lazyLoader {
0%, 100% {
transform: translateX(-50%);
}
50% {
transform: translateX(100%);
}
}
@keyframes lazyLoader {
0%, 100% {
transform: translateX(-50%);
}
50% {
transform: translateX(100%);
}
}
.Image--fadeIn {
opacity: 0;
transition: opacity 0.3s ease;
}
.Image--lazyLoaded.Image--fadeIn {
opacity: 1;
}
/* If zoom is disabled we apply the same effect than fadeIn */
.Image--zoomOut {
opacity: 0;
transition: opacity 0.3s ease;
}
.Image--lazyLoaded.Image--zoomOut {
opacity: 1;
}
.Image--slideRight,
.Image--slideLeft {
transform: translateX(25px);
opacity: 0;
transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.Image--slideLeft {
transform: translateX(-25px);
}
.Image--lazyLoaded.Image--slideRight,
.Image--lazyLoaded.Image--slideLeft {
opacity: 1;
transform: translateX(0);
}
.Image__Loader {
position: absolute;
display: block;
height: 2px;
width: 50px;
left: 0;
bottom: 0;
right: 0;
top: 0;
opacity: 0;
visibility: hidden;
margin: auto;
pointer-events: none;
background-color: var(--color-border-primary);
z-index: -1;
transition: all 0.2s ease-in-out;
overflow: hidden;
}
.Image__Loader::after {
position: absolute;
content: "";
bottom: 0;
right: 0;
top: 0;
height: 100%;
width: 200%;
background-color: var(--color-text-primary);
}
.Image--lazyLoading + .Image__Loader {
opacity: 1;
visibility: visible;
z-index: 1;
}
.Image--lazyLoading + .Image__Loader::after {
-webkit-animation: lazyLoader 3s infinite;
animation: lazyLoader 3s infinite;
-webkit-animation-timing-function: cubic-bezier(0.43, 0.43, 0.25, 0.99);
animation-timing-function: cubic-bezier(0.43, 0.43, 0.25, 0.99);
}
/**
* ----------------------------------------------------------------------------
* Aspect ratio
* ----------------------------------------------------------------------------
*/
.AspectRatio {
position: relative;
margin-left: auto;
margin-right: auto;
}
.AspectRatio::before {
content: "";
display: block;
}
.AspectRatio > img, .AspectRatio wistia-player {
max-height: 100%;
max-width: 100%;
}
.AspectRatio--withFallback > img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.no-js .AspectRatio > img {
display: none !important;
}
@supports (--css: variables) {
/* For dynamic one, we use CSS variables, which makes it only compatible for newer browsers */
.AspectRatio--withFallback {
padding-bottom: 0 !important; /* For older browsers we use the padding-bottom trick, so make sure to remove it here */
}
.AspectRatio::before {
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
.AspectRatio > img,
.AspectRatio wistia-player,
.no-js .AspectRatio > noscript img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
}
.AspectRatio--square::before {
padding-bottom: 100%;
}
.AspectRatio--short::before {
padding-bottom: 75%;
}
.AspectRatio--landscape::before {
padding-bottom: 56.25%;
}
.AspectRatio--tall::before {
padding-bottom: 150%;
}
.AspectRatio--portrait::before {
padding-bottom: 177.77%;
}
.AspectRatio--square > img,
.AspectRatio--short > img,
.AspectRatio--landscape > img,
.AspectRatio--tall > img,
.AspectRatio--portrait > img,
.AspectRatio wistia-player {
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
/* transform: translate(-50%, -50%); */
/* Added the translateZ(0) to fix an issue in Safari where images are blurry due to optimize-contrast rule*/
transform: translateX(-50%) translateY(-50%) translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@supports ((-o-object-fit: contain) or (object-fit: contain)) {
.AspectRatio--square > img,
.AspectRatio--short > img,
.AspectRatio--landscape > img,
.AspectRatio--tall > img,
.AspectRatio--portrait > img,
.AspectRatio wistia-player {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
}
.Image--lazyLoad[data-sizes=auto] {
width: 100%; /* this is needed to help LazySizes calculate the correct size */
}
/**
* ----------------------------------------------------------------------------
* List
* ----------------------------------------------------------------------------
*/
.Linklist {
list-style: none;
padding: 0;
}
.Linklist__Item {
position: relative;
display: block;
margin-bottom: 12px;
width: 100%;
/* line-height: 1.5; Why change line-height? */
text-align: left;
transition: all 0.2s ease-in-out;
}
.Linklist--indent {
padding-left: 1rem;
position: relative;
}
.Linklist__Item:last-child {
margin-bottom: 0 !important;
}
.CollectionFilters .Linklist__Item::before {
position: absolute;
content: "";
display: inline-block;
width: 6px;
height: 6px;
top: calc(50% - 3px);
left: 0;
border-radius: 100%;
background: var(--color-text-secondary);
opacity: 0;
transition: opacity 0.1s ease-in-out;
}
.row > .Linklist__Item {
margin-bottom: 0; /* Remove margin when Linklist is used with .row horizontically */
}
.MenuAppearanceGroup--one .Linklist__Item {
position: initial; /* For the hover preview to position properly */
}
.d-flex > .Linklist__Item {
width: initial; /* When .d-flex is active, retain normal width, as this was probably intended */
margin-bottom: 0;
}
.Linklist--spacingLoose .Linklist__Item {
margin-bottom: 18px;
}
.Linklist__Item.is-selected {
padding-left: 18px;
}
.Linklist__Item.is-selected::before {
opacity: 1;
transition-delay: 0.1s;
}
.Linklist--bordered {
margin-left: 8px;
padding: 0 20px 0 25px;
border-left: 1px solid var(--color-border-primary);
}
.Linklist--bordered li:first-child .Linklist__Item {
margin-top: 2px;
}
.Linklist--bordered li:last-child .Linklist__Item {
margin-bottom: 2px;
}
.Linklist--borderedBottom li {
margin-bottom: 0 !important;
}
.Linklist--borderedBottom a {
padding-bottom: 17px;
padding-top: 17px;
}
.Linklist--borderedBottom li:not(:first-of-type) {
border-top: 1px solid var(--color-border-primary);
}
.Linklist--borderedBottom a:hover {
opacity: 0.6;
}
/**
* Google map
*/
.FeaturedMap {
max-width: 1150px;
margin: 0 auto;
}
.FeaturedMap__MapContainer {
position: relative;
height: 240px;
background-size: cover;
background-position: center;
}
.FeaturedMap__GMap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.FeaturedMap__Info {
position: relative;
margin: 0 auto;
background: var(--color-background-surface-tertiary);
text-align: left;
z-index: 1;
padding: 25px;
}
.FeaturedMap__Store {
display: block;
margin-bottom: 1.2em;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
}
.FeaturedMap__Address {
margin-bottom: 1.2em;
}
.FeaturedMap__Location {
margin-top: 2.7em;
}
@media screen and (min-width: 768px) {
.FeaturedMap {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
padding-top: 0;
height: 550px;
}
.FeaturedMap__MapContainer {
flex: 1 0 auto;
height: 100%;
}
.FeaturedMap__Info {
flex: none;
min-width: 370px;
width: 370px;
padding: 50px 60px;
}
}
/**
* --------------------------------------------------------------------
* VIDEO WRAPPER
* --------------------------------------------------------------------
*/
.VideoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
background-repeat: no-repeat;
background-size: 100%;
filter: none;
}
.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.VideoWrapper wistia-player {
position: absolute;
width: 100%;
height: 100%;
}
/* For native one we use a different thing */
.VideoWrapper--native::after {
display: none;
}
.VideoWrapper--native .plyr,
.VideoWrapper--native video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.VideoWrapper--native .plyr__video-wrapper,
.VideoWrapper--native video {
height: 100%;
}
/*
2:3
Calculation is for some reason 3/2 to receive 1.5, hence 150%
*/
.VideoWrapper--tall {
padding-bottom: 150%;
}
/* 1:1 */
.VideoWrapper--square {
padding-bottom: 100%;
}
/* 9:16 */
.VideoWrapper--extraTall, .VideoWrapper--portrait {
padding-bottom: 177.77%;
}
.VideoWrapper__PlayButton {
position: absolute;
left: calc(50% - 1.5em);
top: calc(50% - 1.5em);
animation: zoom-in-zoom-out 1.35s ease infinite;
color: var(--color-background-primary);
z-index: 1;
border-radius: 50%;
box-shadow: var(--elevation);
}
.VideoWrapper__PlayButton::before {
content: '';
position: absolute;
border-radius: 50%;
background-color: var(--color-text-primary);
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
z-index: -1;
}
.VideoWrapper__PlayButton, .VideoWrapper__PlayButton svg {
width: 3em;
height: 3em;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.15, 1.15);
}
100% {
transform: scale(1, 1);
}
}
/**
* --------------------------------------------------------------------
* VIDEO POPUP
* --------------------------------------------------------------------
*/
.VideoPopup {
position: relative;
}
.VideoPopup__ImageWrapper {
overflow: hidden;
background-color: var(--color-background-surface-tertiary);
display: block;
position: relative;
}
.VideoPopup__PlayButton {
position: absolute;
left: calc(50% - 1.5em);
top: calc(50% - 1.5em);
animation: zoom-in-zoom-out 1.35s ease infinite;
color: var(--color-background-primary);
z-index: 1;
border-radius: 50%;
box-shadow: var(--elevation);
}
.VideoPopup__PlayButton::before {
content: '';
position: absolute;
border-radius: 50%;
background-color: var(--color-text-primary);
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
z-index: -1;
}
.VideoPopup__PlayButton, .VideoPopup__PlayButton svg {
width: 3em;
height: 3em;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.15, 1.15);
}
100% {
transform: scale(1, 1);
}
}
.VideoPopup__Name {
margin-top: -28px;
z-index: 2;
position: relative;
width: fit-content;
margin-left: auto;
background-color: var(--color-background-surface-primary);
margin-right: -4px;
box-shadow: 0 0 5px #0000001f;
font-weight: 500;
color: var(--color-text-primary);
padding: 0.25em 0.625em;
}
.VideoPopup__Name, .VideoPopup__ImageWrapper {
cursor: pointer;
}
/**
* --------------------------------------------------------------------
* 3D MODEL WRAPPER
* --------------------------------------------------------------------
*/
.ModelWrapper {
position: relative;
padding-bottom: 100%;
}
.ModelWrapper .shopify-model-viewer-ui,
.ModelWrapper model-viewer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/**
* ----------------------------------------------------------------------------
* Anchor
* ----------------------------------------------------------------------------
*/
.Anchor {
display: block;
position: relative;
top: calc(-1 * ((var(--header-height)) + var(--navigation-height, 0px) + 1rem));
visibility: hidden;
}
/**
* ----------------------------------------------------------------------------
* Podcast Links
* ----------------------------------------------------------------------------
*/
@media (max-width: 575px) {
.PodcastLinks .HorizontalList__Item {
max-width: calc(33.33% - 16px);
}
}
/**
* ----------------------------------------------------------------------------
* Loading bar
* ----------------------------------------------------------------------------
*/
.LoadingBar {
position: fixed;
top: 0;
left: 0;
/* height: 2px; */
height: 4px;
width: 0;
opacity: 0;
/* background: var(--color-text-primary); */
background: var(--color-brand);
transition: width 0.25s ease-in-out;
z-index: 50;
pointer-events: none;
}
.LoadingBar.is-visible {
opacity: 1;
}
@media screen and (min-width: 768px) {
.LoadingBar {
height: 3px;
}
}
/**
* ----------------------------------------------------------------------------
* Placeholder (used within the theme editor only)
* ----------------------------------------------------------------------------
*/
.PlaceholderSvg {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.PlaceholderSvg--dark {
background: dimgray;
fill: #a1a1a1;
}
.PlaceholderBackground {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
opacity: 0.7;
}
.PlaceholderBackground__Svg {
height: 100% !important;
width: auto !important;
min-width: 100%;
}
/**
* ----------------------------------------------------------------------------
* Quantity selector
* ----------------------------------------------------------------------------
*/
.QuantitySelector {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-border-input);
border-radius: var(--border-radius);
white-space: nowrap;
padding: 0.25rem;
}
.QuantitySelector--small {
padding: 0.125rem;
}
.QuantitySelector__Input {
border: none;
font-size: 1rem;
line-height: 1.75rem;
padding: 0.5rem 0.75rem;
text-align: center;
width: 2.75rem;
height: 2.25rem;
}
.QuantitySelector--small .QuantitySelector__Input {
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem 0.5rem;
height: 2rem;
}
/**
* ----------------------------------------------------------------------------
* Product price
* ----------------------------------------------------------------------------
*/
.Price {
display: inline-block;
}
.Price--highlight {
color: var(--color-text-emphasis);
}
.Price.Price--compareAt, .Price--compareAt {
position: relative;
padding-left: 0.3em;
padding-right: 0.3em;
}
.Price--compareAt::before {
position: absolute;
content: "";
height: 1px;
background: currentColor;
top: 50%;
/* left: -0.4em;
width: calc(100% + 0.8em); */
left: -50%;
width: 100%;
transform: translateX(50%);
}
.UnitPriceMeasurement {
color: var(--color-text-secondary);
/* remove newline nodes between span elements */
display: flex;
}
.UnitPriceMeasurement__Separator {
margin: 0 0.25em;
}
/**
* ----------------------------------------------------------------------------
* Alerts
* ----------------------------------------------------------------------------
*/
.Alert:not(:empty),
.spr-form-message {
display: block;
padding: 10px 20px;
white-space: normal;
font-size: 1rem;
word-break: break-all;
word-break: break-word;
text-shadow: none;
}
.Alert--large {
padding: 18px 20px;
}
.Alert--error,
.spr-form-message-error {
/* background: #e4c4c4;
color: #cb2b2b; */
background: var(--color-background-surface-critical);
color: var(--color-text-critical);
}
.Alert--danger {
background: #fff7e8;
color: var(--color-text-primary);
}
.Alert--info {
background: var(--color-background-surface-tertiary);
color: var(--color-text-secondary);
}
.Alert--success:not(:empty),
.spr-form-message-success {
/* background: #d2e4c4;
color: #307a07; */
background: var(--color-background-surface-success);
color: var(--color-text-primary);
}
.Alert__ErrorList {
list-style: none;
}
.Alert[aria-hidden="true"] {
display: none;
}
@media screen and (min-width: 768px) {
.Alert--large {
padding: 18px 30px;
}
}
/**
* ----------------------------------------------------------------------------
* Segment
* ----------------------------------------------------------------------------
*/
.Segment__Title {
margin-bottom: 24px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
}
.Segment__Title--flexed {
display: flex;
justify-content: space-between;
align-items: center;
}
.Segment__ButtonWrapper {
margin-top: 32px;
}
@media screen and (min-width: 768px) {
.Segment__Title {
margin-bottom: 34px;
}
}
/**
* ----------------------------------------------------------------------------
* Empty state
* ----------------------------------------------------------------------------
*/
.EmptyState {
margin: 140px 0;
text-align: center;
}
.EmptyState__Action {
display: inline-block;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.EmptyState {
margin: 200px 0;
}
}
@media screen and (min-width: 1200px) {
.EmptyState {
margin: 250px 0;
}
}
/**
* ----------------------------------------------------------------------------
* Spinner
* ----------------------------------------------------------------------------
*/
@-webkit-keyframes bouncingSpinnerAnimation {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@keyframes bouncingSpinnerAnimation {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.BouncingSpinner {
display: block;
text-align: center;
}
.BouncingSpinner > span {
display: inline-block;
width: 10px;
height: 10px;
background-color: currentColor;
border-radius: 100%;
-webkit-animation: bouncingSpinnerAnimation 1.4s infinite ease-in-out both;
animation: bouncingSpinnerAnimation 1.4s infinite ease-in-out both;
}
.BouncingSpinner > span:first-child {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.BouncingSpinner > span:nth-child(2) {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
/**
* ----------------------------------------------------------------------------
* Video
* ----------------------------------------------------------------------------
*/
.Video__PlayButton {
display: inline-block;
transition: transform 0.2s ease-in-out;
height: 80px;
width: 80px;
cursor: pointer;
-webkit-filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}
@media (-moz-touch-enabled: 0), (hover: hover) {
.Video__PlayButton:hover {
transform: scale(1.1);
}
}
.Video__PlayButton svg {
width: 80px;
height: 80px;
pointer-events: none;
}
/**
* ----------------------------------------------------------------------------
* Announcement bar
* ----------------------------------------------------------------------------
*/
.AnnouncementBarContainer[aria-hidden="true"] {
visibility: hidden;
height: 0;
}
.AnnouncementBar {
position: relative;
text-align: center;
font-size: 14px;
line-height: 20px;
z-index: 1;
}
.AnnouncementBar__Wrapper {
padding: 12px 24px;
}
.AnnouncementBar__Wrapper .Popover__Close {
right: 10px;
}
.AnnouncementBar__Content {
color: inherit;
margin: 0;
}
/**
* ----------------------------------------------------------------------------
* Share buttons
* ----------------------------------------------------------------------------
*/
.ShareButtons {
display: table;
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.ShareButtons__Item {
display: table-cell;
width: 60px;
height: 45px;
min-height: 45px;
color: var(--color-text-secondary);
text-align: center;
vertical-align: middle;
background: var(--color-background-surface-primary);
border: 1px solid var(--color-border-primary);
outline: 1px solid transparent;
outline-offset: -1px;
transition: all 0.2s ease-in-out;
}
.ShareButtons__Item svg {
height: 18px;
width: 18px;
vertical-align: text-bottom;
}
.ShareButtons__Item--facebook:hover,
.no-supports-hover .ShareButtons__Item--facebook {
background: #4469af;
color: var(--color-text-inverse);
border-color: #4469af;
outline: 1.5px solid #4469af;
}
.ShareButtons__Item--pinterest:hover,
.no-supports-hover .ShareButtons__Item--pinterest {
background: #c8232c;
color: var(--color-text-inverse);
border-color: #c8232c;
outline: 1.5px solid #c8232c;
}
.ShareButtons__Item--twitter:hover,
.no-supports-hover .ShareButtons__Item--twitter {
background: #00aced;
color: var(--color-text-inverse);
border-color: #00aced;
outline: 1.5px solid #00aced;
}
@media screen and (min-width: 768px) {
.ShareButtons {
width: auto;
}
}
/**
* ----------------------------------------------------------------------------
* Featured quote
* ----------------------------------------------------------------------------
*/
.FeaturedQuote {
display: flex;
flex-direction: column;
justify-content: center;
padding: 120px 40px;
background: var(--color-background-surface-primary);
color: var(--color-text-primary);
font-size: 1.25em;
}
.FeaturedQuote__Author {
margin-top: 14px;
font-size: 1em;
opacity: 0.5;
}
@media screen and (min-width: 992px) {
.FeaturedQuote {
padding-top: 40px;
padding-bottom: 40px;
}
}
/**
* ----------------------------------------------------------------------------
* Shopify CAPTCHA
* ----------------------------------------------------------------------------
*/
.shopify-challenge__container {
margin-top: 80px;
margin-bottom: 80px;
text-align: center;
}
.shopify-challenge__container .shopify-challenge__button {
position: relative;
display: inline-block;
padding: 14px 28px;
line-height: normal;
border: 1px solid transparent;
border-radius: 0;
text-transform: uppercase;
font-size: 0.875em;
text-align: center;
letter-spacing: 0.2em;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
background: var(--color-background-fill-button-primary);
color: var(--color-text-on-fill-button-primary);
}
/**
* ----------------------------------------------------------------------------
* Newsletter (home page)
* ----------------------------------------------------------------------------
*/
.Newsletter .Form__Input::-moz-placeholder {
color: inherit;
}
.Newsletter .Form__Input:-ms-input-placeholder {
color: inherit;
}
.Newsletter .Form__Input::placeholder {
color: inherit;
}
.Newsletter .Form__Input:focus {
border-color: currentColor;
}
.Newsletter .Form__Submit {
width: 100%;
}
@media screen and (max-width: 767px) {
.ImageHero--newsletter {
min-height: 450px !important;
}
.ImageHero--newsletter .ImageHero__ContentOverlay {
padding-left: 25px;
padding-right: 25px;
}
}
@media screen and (min-width: 768px) {
.Newsletter__Inner {
display: flex;
}
.Newsletter .Form__Input {
min-width: 395px;
width: 395px;
}
.Newsletter .Form__Submit {
margin: 0 0 0 20px;
}
}
/**
* ----------------------------------------------------------------------------
* TOOLTIP
* ----------------------------------------------------------------------------
*/
@media (-moz-touch-enabled: 0), (hover: hover) {
[data-tooltip] {
position: relative;
}
[data-tooltip]::before {
position: absolute;
content: attr(data-tooltip);
bottom: 70%;
left: 70%;
padding: 4px 11px 3px 11px;
white-space: nowrap;
border: 1px solid var(--color-border-primary);
background: var(--color-background-surface-tertiary);
color: var(--color-text-secondary);
font-size: 0.9375em;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
z-index: 1;
}
[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
}
}
.Modal {
position: fixed;
display: flex;
flex-direction: column;
visibility: hidden;
top: 50%;
left: 50%;
width: 480px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
padding: 15px 20px 20px 20px;
z-index: 20;
opacity: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
background: var(--color-background-surface-primary);
transform: translate(-50%, -50%);
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, max-height 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
border-radius: 4px;
/* Reset row gutter variables so that the .container within the modal is not affected */
--bs-gutter-y: initial;
--bs-gutter-x: initial;
}
@supports (--css: variables) {
.Modal {
max-height: calc(var(--window-height) - 40px);
}
}
.Modal[aria-hidden=false] {
visibility: visible;
opacity: 1;
}
.Modal[aria-hidden="true"] {
max-height: 0;
padding: 0;
}
.Modal--fullScreen {
max-width: none;
max-height: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
transform: none;
}
/* Custom styles for page content modal */
.Modal--pageContent {
overflow: hidden;
-webkit-overflow-scrolling: unset;
max-width: 656px;
width: calc(100vw - 40px);
max-height: calc(100vh - 140px);
padding: 0;
}
.Modal--pageContent .PageContent {
margin: 0;
}
.Modal--pageContent .Modal__Content {
padding: 1.25rem;
}
.Modal--pageContent .Modal__Content .container {
padding: 0;
}
.Modal--pageContent .Modal__Content .shopify-section:first-of-type .Section--spacingNormal, .Modal--pageContent .Modal__Content .shopify-section--spacedDefault:first-of-type {
padding-top: 0;
}
.Modal--videoContent {
justify-content: center;
background: #000000; /* Full theatre experience ! */
color: var(--color-text-inverse);
}
.Modal__Header {
margin-bottom: 30px;
text-align: center;
}
.Modal__Content iframe {
display: none;
}
.Modal[aria-hidden=false] .Modal__Content iframe {
display: block;
}
/* We override some styles for common elements like table */
.Modal__Content th,
.Modal__Content td {
border-color: var(--color-border-primary) !important;
}
.Modal__Content thead th:empty,
.Modal__Content tbody th {
background: var(--color-background-surface-primary) !important;
}
@media screen and (min-width: 768px) {
.Modal:not(.Modal--pageContent):not(.Modal--loading) {
padding: 35px 40px 40px 40px;
}
}
@media screen and (min-width: 992px) {
.Modal {
flex-direction: column;
}
/* Creating custom style for .Modal--pageContent
.Modal--pageContent {
padding: 100px 0 80px 0;
}
.Modal--pageContent .Modal__Content {
flex: 1 0 0;
} */
}
/**
* ----------------------------------------------------------------------------
* Modal loading
* ----------------------------------------------------------------------------
*/
.Modal--loading {
/* min-height: 10rem; */
width: 100%;
overflow: hidden;
padding: var(--container-horizontal-spacing);
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.15);
}
.Modal--loading .LoadingText {
font-size: 18px;
}
.Modal--loading .LoadingContainer::after {
width: 2.5rem;
height: 2.5rem;
}
@media (min-width: 576px) {
.Modal--loading {
max-width: 26rem;
}
}
.Modal--loading::before, .Modal--loading::after {
content: unset !important;
}
.Modal--loading .LoadingContainer:not(.none) + .LoadingText {
margin-top: 0.75rem;
}
.Modal--loading .CircleWrapper {
width: 100%;
height: 3rem;
position: relative;
}
/**
* ----------------------------------------------------------------------------
* A11Y
* ----------------------------------------------------------------------------
*/
.PageSkipLinks:focus-within {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: var(--color-text-secondary);
background-color: var(--color-background-surface-primary);
padding: 1rem;
z-index: 10000;
transition: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
border-bottom-right-radius: 4px;
}
/**
* ----------------------------------------------------------------------------
* Page overlay
* ----------------------------------------------------------------------------
*/
.PageOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
visibility: hidden;
opacity: 0;
background: var(--color-background-surface-overlay);
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.PageOverlay.is-visible {
opacity: 0.5;
visibility: visible;
}
.PageOverlay--survey.is-visible {
opacity: 1;
transition: none 0s ease 0s;
background-color: var(--color-background-surface-secondary);
}
.PageOverlay.PageOverlay--menu {
z-index: 20;
}
.PageOverlay--menu.is-visible {
opacity: 0.75;
}
.PageOverlay.loading.is-visible {
background: rgba(0, 0, 0, 0.8);
opacity: 1;
}
.PageOverlay__Close {
position: absolute !important;
top: 1rem;
right: 1rem;
color: var(--color-text-inverse) !important;
}
/**
* ----------------------------------------------------------------------------
* Page header
* ----------------------------------------------------------------------------
*/
.PageHeader {
position: relative;
margin: 35px 0;
}
.PageHeader--withBackground {
display: flex;
margin: 0;
width: 100%;
min-height: 450px;
flex-direction: column;
justify-content: center;
align-items: center;
background-size: cover;
overflow: hidden;
}
.PageHeader--withBackground:not(.PageHeader--normalColor) {
color: var(--color-text-inverse);
}
.PageHeader--withBackground:not(.PageHeader--normalColor) .Heading,
.PageHeader--withBackground:not(.PageHeader--normalColor) .Rte a:not(.Button) {
color: var(--color-text-inverse);
-webkit-text-decoration-color: var(--color-text-inverse);
text-decoration-color: var(--color-text-inverse);
}
.PageHeader__ImageWrapper {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-size: cover;f
background-position: center center;
}
@supports (--css: variables) {
.PageHeader__ImageWrapper {
top: calc(-1 * 0px - 0px * 0);
top: calc(-1 * var(--announcement-bar-height, 0px) - var(--header-height, 0px) * var(--use-unsticky-header, 0));
height: calc(100% + 0px + 0px * 0);
height: calc(100% + var(--announcement-bar-height, 0px) + var(--header-height, 0px) * var(--use-unsticky-header, 0));
}
}
@media (max-width: 767px) {
.PageHeader--video {
margin-top: 0;
}
}
.PageHeader .Alert {
margin-top: 22px;
}
@media screen and (min-width: 768px) {
.PageHeader {
margin: 50px 0;
}
.PageHeader--withBackground {
min-height: 450px;
margin-top: 0;
margin-bottom: 0;
}
@supports (--css: variables) {
.PageHeader--withBackground {
min-height: calc(380px + var(--header-height) * 0);
min-height: calc(380px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--small.PageHeader--withBackground {
min-height: 420px;
}
@supports (--css: variables) {
.PageHeader--small.PageHeader--withBackground {
min-height: calc(350px + var(--header-height) * 0);
min-height: calc(350px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--large.PageHeader--withBackground {
min-height: 480px;
}
@supports (--css: variables) {
.PageHeader--large.PageHeader--withBackground {
min-height: calc(410px + var(--header-height) * 0);
min-height: calc(410px + var(--header-height) * var(--header-is-transparent, 0));
}
}
}
@media screen and (min-width: 1200px) {
.PageHeader--withBackground {
min-height: 550px;
}
@supports (--css: variables) {
.PageHeader--withBackground {
min-height: calc(450px + var(--header-height) * 0);
min-height: calc(450px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--small.PageHeader--withBackground {
min-height: 500px;
}
@supports (--css: variables) {
.PageHeader--small.PageHeader--withBackground {
min-height: calc(400px + var(--header-height) * 0);
min-height: calc(400px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--large.PageHeader--withBackground {
min-height: 620px;
}
@supports (--css: variables) {
.PageHeader--large.PageHeader--withBackground {
min-height: calc(520px + var(--header-height) * 0);
min-height: calc(520px + var(--header-height) * var(--header-is-transparent, 0));
}
}
}
@media screen and (min-width: 1800px) {
.PageHeader--withBackground {
min-height: 650px;
}
@supports (--css: variables) {
.PageHeader--withBackground {
min-height: calc(600px + var(--header-height) * 0);
min-height: calc(600px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--small.PageHeader--withBackground {
min-height: 600px;
}
@supports (--css: variables) {
.PageHeader--small.PageHeader--withBackground {
min-height: calc(550px + var(--header-height) * 0);
min-height: calc(550px + var(--header-height) * var(--header-is-transparent, 0));
}
}
.PageHeader--large.PageHeader--withBackground {
min-height: 700px;
}
@supports (--css: variables) {
.PageHeader--large.PageHeader--withBackground {
min-height: calc(650px + var(--header-height) * 0);
min-height: calc(650px + var(--header-height) * var(--header-is-transparent, 0));
}
}
}
/**
* ----------------------------------------------------------------------------
* Page layout (to create two columns) and content
* ----------------------------------------------------------------------------
*/
.PageLayout__Section:first-child {
margin-bottom: 60px;
}
.PageLayout__Section--sticky {
position: -webkit-sticky;
position: sticky;
top: 75px;
align-self: flex-start;
}
@supports (--css: variables) {
.PageLayout__Section--sticky {
top: calc(var(--header-height) + 20px);
}
}
@media screen and (min-width: 768px) {
.PageLayout {
display: flex;
flex-wrap: nowrap;
}
.PageLayout__Section {
flex: 1 0 0;
}
.PageLayout__Section:first-child {
margin-bottom: 0;
}
.PageLayout__Section--secondary {
flex: 1 1 200px;
max-width: 200px;
}
.PageLayout__Section + .PageLayout__Section {
margin-left: 30px;
min-width: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.PageLayout--breakLap {
display: block;
}
.PageLayout--breakLap .PageLayout__Section:first-child {
margin-bottom: 60px;
}
.PageLayout--breakLap .PageLayout__Section + .PageLayout__Section {
margin-left: 0;
width: 100%;
}
}
@media screen and (min-width: 992px) {
.PageLayout__Section--secondary {
flex-basis: 235px;
max-width: 235px;
}
}
@media screen and (min-width: 1200px) {
/* .PageLayout__Section + .PageLayout__Section {
margin-left: 80px;
} */
.PageLayout__Section--secondary {
flex-basis: 290px;
max-width: 290px;
}
}
/**
* ----------------------------------------------------------------------------
* Page content
* ----------------------------------------------------------------------------
*/
.PageContent {
max-width: 1000px;
margin: 35px auto;
}
.PageContent--fullWidth {
max-width: 100%;
}
.PageContent--fitScreen {
display: flex;
min-height: calc(100vh - 120px);
align-items: center;
}
@supports (--css: variables) {
.PageContent--fitScreen {
min-height: calc(var(--window-height) - var(--header-height) - 0px - 120px);
min-height: calc(var(--window-height) - var(--header-height) - var(--announcement-bar-height, 0px) - 120px);
/* 120px is the margin */
}
}
.PageContent--narrow {
max-width: 680px;
}
.PageContent--extraNarrow {
max-width: 400px;
}
.PageHeader + .PageContent {
margin-top: 0;
}
@media screen and (min-width: 768px) {
.PageContent {
margin-bottom: 80px;
margin-top: 80px;
}
.PageContent--fitScreen {
min-height: calc(100vh - 160px);
}
@supports (--css: variables) {
.PageContent--fitScreen {
min-height: calc(var(--window-height) - var(--header-height) - 0px - 160px);
min-height: calc(var(--window-height) - var(--header-height) - var(--announcement-bar-height, 0px) - 160px);
/* 160px is the margin */
}
}
}
.Pagination {
margin: 60px 0;
text-align: center;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
font-size: 0.875em;
line-height: 1;
}
.Pagination__Nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: fit-content;
margin: auto;
}
@media screen and (min-width: 768px) {
.Pagination {
margin: 80px 0;
}
}
@media screen and (min-width: 1200px) {
.Pagination {
margin: 120px 0;
}
}
.Window {
position: relative;
border: 1px solid var(--color-border-primary);
padding: 60px 24px;
}
.Window--withArrows {
margin: 0 15px;
}
.Window--flush {
padding-left: 0 !important;
padding-right: 0 !important;
}
.Window__Title {
position: absolute;
top: 0;
left: 50%;
margin: 0;
padding: 0 14px 0 18px;
transform: translate(-50%, -50%);
background: var(--color-background-surface-primary);
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.Window {
padding-left: 50px;
padding-right: 50px;
}
.Window--withArrows {
margin-left: 0;
margin-right: 0;
}
}
.Popover, .PopoverCart, .PopoverCta, .PopoverGlobal {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: var(--color-background-surface-primary);
z-index: 40;
box-shadow: 0 -2px 10px rgba(54, 54, 54, 0.2);
touch-action: manipulation;
transform: translateY(100%);
visibility: hidden;
transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
max-height: calc(80vh - var(--header-height));
display: flex; /* Need flex to enable scrolling for the content */
flex-direction: column;
}
.Popover__Content {
overflow-y: auto;
flex-grow: 1; /* Needed for scrollability */
}
.PopoverGlobal > * {
max-width: 768px;
align-self: center;
width: 100%;
}
.Popover__Hint {
padding: 1rem;
border-top: 1px solid var(--color-border-primary);
}
.Popover__Content--container {
padding-left: 1rem;
padding-right: 1rem;
}
/* Needed for the JS animation */
#dynamic-popover .Popover__Content {
height: 0;
padding: 0;
transition: height .3s ease-in-out,visibility 0s ease-in-out .3s;
}
#dynamic-popover .Popover__ValueList {
padding-left: 20px;
padding-right: 20px;
}
#dynamic-popover .Popover__Value[data-availability="sold-out"],
.PopoverCart .Popover__Value[data-availability="sold-out"] {
pointer-events: none;
}
.PopoverCta {
z-index: 6;
box-shadow: 0 -2px 10px rgba(54,54,54,.1);
}
@media (min-width: 768px) {
.PopoverCta {
max-width: 460px;
}
}
.Popover--secondary {
background: var(--color-background-surface-primary);
}
.Popover[aria-hidden=false], .PopoverCart[aria-hidden=false], .PopoverCta[aria-hidden=false], .PopoverGlobal[aria-hidden=false] {
transform: translateY(0);
visibility: visible;
}
.PopoverCart .Popover__Value, .PopoverGlobal .Popover__Value {
text-align: center;
}
.Popover__Header {
position: relative;
padding: 13px 20px;
border-bottom: 1px solid var(--color-border-primary);
}
.Popover__Close {
position: absolute !important;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.Popover__Close svg {
stroke-width: 1.1px;
}
.Popover__ValueList {
list-style: none;
padding: 18px 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.Popover__ValueList.TasteList {
/* max-height: calc(100vh - 120px); */
/*
Quick fix when the popover is scrollable --> popover content would be visible through popover header bar.
This is because the row-class has a negative top margin.
*/
margin-top: 0;
padding-top: 0;
}
@media (max-width: 386px) {
.TasteList .Popover__Value > span {
font-size: 13px;
}
}
.Popover__ValueList.TasteList .button-wrapper {
position: relative;
/* max-width: 95px; */
}
.Popover__Value {
display: block;
padding: 12px 20px;
width: 100%;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: var(--color-text-secondary);
text-align: center;
transition: color 0.2s ease-in-out;
}
/* Not sure about this */
.Popover__Value * {
pointer-events: none;
}
.Popover__Value--vegan .Value__Label {
display: block;
width: calc(100% + 12px);
margin-left: -6px;
padding: 3px 2px !important;
}
.Popover__Value--vegan .Value__Label svg {
width: 10px;
height: auto;
vertical-align: inherit;
margin-left: 4px;
}
.Value__ImageWrapper svg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: auto;
}
.TasteList .Popover__Value {
padding: 0;
max-width: 70px;
margin: 0 auto;
}
.TasteList .Popover__Value > span {
background-color: var(--color-background-surface-tertiary);
/* padding: 1px 4px; */
padding: 3px 4px;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
line-height: 1.4;
display: block;
}
.Popover__Value:focus {
background: var(--color-background-surface-primary);
outline: none;
}
.Popover__Value.is-selected {
color: var(--color-text-primary);
}
.Popover__Value.is-selected .Value__ImageWrapper {
border-color: var(--color-brand);
}
.Popover__Value[data-availability="sold-out"], .Popover__Value[data-availability="non-existent"], .ProductForm__Item[data-availability="other-option"] {
position: relative;
}
.Popover__Value[data-availability="sold-out"]:not(.is-selected) > *, .Popover__Value[data-availability="non-existent"] > * {
opacity: 0.6;
}
.ProductForm__Item[data-availability="other-option"] > *:not(svg) {
opacity: 0.7;
}
.Popover__Value[data-availability="sold-out"]::before, .Popover__Value[data-availability="non-existent"]::before, .ProductForm__Item[data-availability="other-option"]::before {
position: absolute;
z-index: 1;
font-size: 10px;
padding: 1px 4px;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.16);
border-radius: 2px;
color: var(--color-text-secondary);
}
.Popover__Value[data-availability="sold-out"]::before {
content: "Ausverkauft";
background-color: var(--color-background-surface-primary);
right: 50%;
transform: translateX(50%);
top: -2px;
}
.Popover__Value--Menge[data-availability="sold-out"]::before {
top: 50%;
transform: translateY(-50%);
right: 10px;
}
/* .ProductForm__Item[data-availability="other-option"]::before {
content: "Verfügbar in anderer Menge";
background-color: var(--color-background-surface-highlight);
width: calc(100% + 8px);
font-size: 9px;
line-height: 1.3;
padding: 3px 3px;
top: -10px;
} */
/* .ProductForm__Item[data-availability="other-option"]::before {
top: 50%;
transform: translateY(-50%);
right: 45px;
content: "Verfügbar in anderer Menge";
background-color: var(--color-background-surface-highlight);
font-size: 11px;
} */
.Popover__Value[data-availability="non-existent"]::before {
content: "Nicht verfügbar";
background-color: var(--color-background-surface-primary);
right: 50%;
transform: translateX(50%);
top: -2px;
}
.Popover__Value--Menge[data-availability="non-existent"]::before {
top: 50%;
transform: translateY(-50%);
right: 10px;
}
@media (max-width: 390px) {
.ProductForm__Item[data-availability="other-option"]::before {
font-size: 10px;
width: 80px;
text-align: center;
line-height: 1.4;
padding-top: 3px;
padding-bottom: 3px;
}
}
.Value__ImageWrapper {
border-radius: 100%;
overflow: hidden;
margin-bottom: 6px;
border: 1px solid var(--color-border-primary);
position: relative;
}
.Value__ImageWrapper img {
border-radius: 100%;
}
.Popover__FooterHelp {
width: 100%;
padding: 18px 20px;
text-align: center;
border-top: 1px solid var(--color-border-primary);
}
/*
Changed 992 (new breakpoint) beak to 1008 (old breakpoint) because of a popover bug in the range from 992-1008
(JS is probably configured to 1008)
*/
@media screen and (min-width: 1008px) {
.Popover {
transform: none;
width: auto;
bottom: auto;
left: auto;
opacity: 0;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.Popover::before {
content: "";
position: absolute;
right: 40px;
width: 10px;
height: 10px;
border-style: solid;
}
.Popover--noWrap {
white-space: nowrap;
}
.Popover--withMinWidth {
/* min-width: 375px;
max-width: 390px; */
min-width: 400px;
max-width: 420px;
}
.Popover--positionBottom::before {
bottom: 100%;
border-width: 0 10px 10px 10px;
border-color: transparent transparent var(--color-background-surface-primary) transparent;
-webkit-filter: drop-shadow(0 -2px 2px rgba(54, 54, 54, 0.2));
filter: drop-shadow(0 -2px 2px rgba(54, 54, 54, 0.2));
}
.Popover--positionTop::before {
top: 100%;
border-width: 10px 10px 0 10px;
border-color: var(--color-background-surface-primary) transparent transparent transparent;
-webkit-filter: drop-shadow(0 2px 2px rgba(54, 54, 54, 0.2));
filter: drop-shadow(0 2px 2px rgba(54, 54, 54, 0.2));
}
.Popover--positionLeft::before {
left: 100%;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent var(--color-background-surface-primary);
-webkit-filter: drop-shadow(2px 0 2px rgba(54, 54, 54, 0.2));
filter: drop-shadow(2px 0 2px rgba(54, 54, 54, 0.2));
}
.Popover--positionTop.Popover--alignCenter::before,
.Popover--positionBottom.Popover--alignCenter::before {
left: calc(50% - 10px);
}
.Popover--positionLeft.Popover--alignCenter::before {
top: calc(50% - 10px);
}
.Popover--positionLeft.Popover--alignBottom::before {
top: 15px;
}
.Popover--positionLeft.Popover--alignTop::before {
bottom: 10px;
}
.Popover[aria-hidden=false] {
opacity: 1;
transform: none;
}
/*
.Popover__Header {
display: none;
}*/
.Popover__Value {
padding-left: 50px;
padding-right: 50px;
text-align: right;
}
/* When there are more than 12 taste variants we need to limit the height so that the popup is contained within the viewport */
.Popover__ValueList.TasteList {
/* max-height: calc(100vh - 300px); */
}
.Popover--withMinWidth .Popover__Value,
.Popover__ValueList--center .Popover__Value {
text-align: center;
}
.Popover--small.Popover--positionTop::before {
border-width: 8px 8px 0 8px;
}
.Popover--small.Popover--positionBottom::before {
border-width: 0 8px 8px 8px;
}
.Popover--small .Popover__Value {
padding: 5px 32px;
font-size: 12px;
}
}
/**
* ----------------------------------------------------------------------------
* Rich text
* ----------------------------------------------------------------------------
*/
.Rte {
word-break: break-word;
/* Prevent long words to go outside the container */
/* Simple, minimum clearfix added to every Rte text to avoid issue with float */
}
.Rte::after {
content: "";
display: block;
clear: both;
}
.Rte iframe {
max-width: 100%;
border: none;
margin: 3.75rem 0;
}
.Rte img {
display: block;
margin: 2.25rem 0;
}
.Rte .Article__BodyImageWrapper img {
margin: 0;
}
.Rte a:not(.Button, .Link) {
text-decoration: underline;
text-underline-position: under;
color: var(--color-text-link);
transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out;
}
.Rte a:not(.Button, .Link):hover {
color: var(--color-text-link-hovered);
-webkit-text-decoration-color: rgba(var(--text-color-rgb), 0.6);
text-decoration-color: rgba(var(--text-color-rgb), 0.6);
}
.Rte a:not(.Button, .Link):active {
color: var(--color-text-link-pressed);
}
.Rte a:not(.Button, .Link):visited {
color: var(--color-text-link-visited);
}
.Rte p,
.Rte ul,
.Rte ol {
margin: 1.25rem 0;
}
.Rte .VideoWrapper,
.Rte .Form {
margin: 2.25rem 0;
}
.Rte ul, .Rte ol {
margin-left: 1rem;
padding-left: 0;
list-style-position: outside;
}
.Rte ul {
list-style: disc;
}
.Rte ol {
list-style: decimal;
}
.Rte li {
margin: 1rem 0 1rem 1rem;
}
.Rte li:first-of-type {
margin-top: 0;
}
.Rte li:last-of-type {
margin-bottom: 0;
}
.Rte ol li {
padding-left: 0.125rem; /* Slight gap increase, as the number is very close to the text */
}
.Rte h1,
.Rte h2,
.Rte h3,
.Rte h4,
.Rte h5,
.Rte h6 {
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
color: var(--color-text-primary);
transition: color 0.2s ease-in-out;
}
.Rte h1 {
font-size: 2.25rem;
line-height: 3rem;
margin: 4.5rem 0 2rem;
}
.Rte h2 {
font-size: 2rem;
line-height: 2.75rem;
margin: 4.5rem 0 2rem;
}
.Rte h3 {
font-size: 1.75rem;
line-height: 2.25rem;
margin: 4rem 0 1.5rem;
}
.Rte h4 {
font-size: 1.5rem;
line-height: 2rem;
margin: 3rem 0 1.5rem;
}
.Rte h5 {
font-size: 1.25rem;
line-height: 1.75rem;
margin: 2.5rem 0 1.25rem;
}
.Rte h6 {
font-size: 1rem;
line-height: 1.25rem;
margin: 2rem 0 1.25rem;
}
.Rte blockquote {
margin: 2.25rem 1rem;
padding: 1em;
border: 1px solid var(--color-border-primary);
position: relative;
border-radius: 4px;
position: relative;
font-style: italic;
}
.Rte blockquote::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0377 1.18634L13.0108 3.06888C13.4356 3.47062 13.8525 4.26691 13.1027 5.21538C12.085 6.50292 10.5731 9.72825 9.96834 11.1897C8.64811 14.3803 8.96525 17.3267 9.41358 19.379C9.72565 20.8076 10.2727 21.9086 10.8204 23.011C11.2463 23.8683 11.6727 24.7264 11.9892 25.74C12.3189 26.7956 11.9892 27.9581 10.6921 28.782L5.36577 30.8138C4.4972 29.3368 2.97912 25.9066 2.63378 24.1559C1.76678 19.7607 1.96489 17.7685 2.15025 15.9045C2.16635 15.7427 2.18235 15.5817 2.19755 15.4203C2.22772 15.0998 2.56362 11.5321 4.66561 8.01629C6.46033 5.01444 8.94725 2.18498 10.0377 1.18634ZM26.5314 1.18641L29.5045 3.06895C29.9293 3.47069 30.3462 4.26697 29.5964 5.21545C28.5787 6.50299 27.0668 9.72832 26.462 11.1898C25.1418 14.3804 25.4589 17.3268 25.9073 19.3791C26.2193 20.8076 26.7664 21.9087 27.3141 23.011C27.74 23.8684 28.1664 24.7265 28.4829 25.7401C28.8126 26.7957 28.4829 27.9582 27.1858 28.7821L21.8595 30.8139C20.9909 29.3369 19.4728 25.9067 19.1275 24.156C18.2605 19.7608 18.4586 17.7686 18.6439 15.9046C18.66 15.7427 18.676 15.5818 18.6912 15.4204C18.7214 15.0999 19.0573 11.5321 21.1593 8.01636C22.954 5.01451 25.4409 2.18505 26.5314 1.18641Z' fill='%23ABD855'/%3E%3Cpath d='M13.0108 3.06888L13.3544 2.70562L13.3192 2.67234L13.2783 2.64644L13.0108 3.06888ZM10.0377 1.18634L10.3052 0.763904L9.98209 0.559307L9.70004 0.817601L10.0377 1.18634ZM13.1027 5.21538L13.495 5.52545L13.495 5.52545L13.1027 5.21538ZM9.96834 11.1897L9.50634 10.9985L9.50634 10.9985L9.96834 11.1897ZM9.41358 19.379L8.9251 19.4857L8.9251 19.4857L9.41358 19.379ZM10.8204 23.011L10.3726 23.2334L10.3726 23.2334L10.8204 23.011ZM11.9892 25.74L12.4665 25.591L12.4665 25.591L11.9892 25.74ZM10.6921 28.782L10.8703 29.2492L10.9175 29.2312L10.9602 29.2041L10.6921 28.782ZM5.36577 30.8138L4.93477 31.0673L5.14904 31.4316L5.54398 31.281L5.36577 30.8138ZM2.63378 24.1559L3.12433 24.0592L3.12433 24.0592L2.63378 24.1559ZM2.15025 15.9045L2.64779 15.954L2.64779 15.954L2.15025 15.9045ZM2.19755 15.4203L2.69534 15.4672L2.69534 15.4672L2.19755 15.4203ZM4.66561 8.01629L4.23646 7.75971L4.23646 7.75971L4.66561 8.01629ZM29.5045 3.06895L29.8481 2.70569L29.8129 2.67241L29.772 2.64651L29.5045 3.06895ZM26.5314 1.18641L26.7989 0.763972L26.4758 0.559375L26.1937 0.81767L26.5314 1.18641ZM29.5964 5.21545L29.9887 5.52552L29.9887 5.52552L29.5964 5.21545ZM26.462 11.1898L26.924 11.381L26.924 11.381L26.462 11.1898ZM25.9073 19.3791L25.4188 19.4858L25.4188 19.4858L25.9073 19.3791ZM27.3141 23.011L27.7618 22.7886L27.7618 22.7886L27.3141 23.011ZM28.4829 25.7401L28.9602 25.5911L28.9602 25.5911L28.4829 25.7401ZM27.1858 28.7821L27.364 29.2492L27.4112 29.2312L27.4538 29.2041L27.1858 28.7821ZM21.8595 30.8139L21.4285 31.0673L21.6427 31.4317L22.0377 31.281L21.8595 30.8139ZM19.1275 24.156L19.618 24.0592L19.618 24.0592L19.1275 24.156ZM18.6439 15.9046L18.1464 15.8551L18.1464 15.8551L18.6439 15.9046ZM18.6912 15.4204L19.189 15.4673L19.189 15.4673L18.6912 15.4204ZM21.1593 8.01636L20.7301 7.75978L20.7301 7.75978L21.1593 8.01636ZM13.2783 2.64644L10.3052 0.763904L9.77025 1.60878L12.7433 3.49131L13.2783 2.64644ZM13.495 5.52545C13.9474 4.95316 14.0805 4.37584 13.9899 3.85191C13.9028 3.34821 13.6202 2.95704 13.3544 2.70562L12.6672 3.43213C12.8262 3.58245 12.9644 3.7903 13.0045 4.02229C13.0412 4.23406 13.0079 4.52913 12.7105 4.90532L13.495 5.52545ZM10.4304 11.3809C10.7277 10.6623 11.2516 9.50197 11.827 8.36273C12.4078 7.21264 13.0207 6.12549 13.495 5.52545L12.7105 4.90532C12.167 5.59281 11.5151 6.76209 10.9343 7.91192C10.3482 9.0726 9.81372 10.2557 9.50634 10.9985L10.4304 11.3809ZM9.90206 19.2723C9.4644 17.2688 9.16516 14.4385 10.4304 11.3809L9.50634 10.9985C8.13106 14.3221 8.4661 17.3846 8.9251 19.4857L9.90206 19.2723ZM11.2682 22.7885C10.7193 21.6838 10.1994 20.6333 9.90206 19.2723L8.9251 19.4857C9.25193 20.9818 9.82604 22.1334 10.3726 23.2334L11.2682 22.7885ZM12.4665 25.591C12.1365 24.5342 11.6925 23.6426 11.2682 22.7885L10.3726 23.2334C10.8002 24.094 11.2089 24.9186 11.512 25.8891L12.4665 25.591ZM10.9602 29.2041C11.6838 28.7445 12.1691 28.1691 12.417 27.5284C12.665 26.8874 12.6617 26.2161 12.4665 25.591L11.512 25.8891C11.6464 26.3196 11.6431 26.7573 11.4844 27.1675C11.3256 27.5779 10.9975 27.9957 10.424 28.3599L10.9602 29.2041ZM5.54398 31.281L10.8703 29.2492L10.5139 28.3148L5.18756 30.3466L5.54398 31.281ZM2.14323 24.2527C2.32637 25.1811 2.80947 26.5157 3.34279 27.7816C3.87871 29.0537 4.48508 30.3026 4.93477 31.0673L5.79677 30.5603C5.37789 29.8481 4.79093 28.6433 4.26434 27.3934C3.73514 26.1373 3.28653 24.8814 3.12433 24.0592L2.14323 24.2527ZM1.6527 15.8551C1.46391 17.7536 1.26431 19.7971 2.14323 24.2527L3.12433 24.0592C2.26925 19.7244 2.46587 17.7834 2.64779 15.954L1.6527 15.8551ZM1.69975 15.3734C1.68469 15.5334 1.66882 15.693 1.6527 15.8551L2.64779 15.954C2.66387 15.7924 2.68 15.6301 2.69534 15.4672L1.69975 15.3734ZM4.23646 7.75971C2.07646 11.3725 1.73205 15.0304 1.69975 15.3734L2.69534 15.4672C2.72339 15.1693 3.05078 11.6916 5.09476 8.27286L4.23646 7.75971ZM9.70004 0.817601C8.57325 1.8495 6.05568 4.71688 4.23646 7.75971L5.09476 8.27286C6.86497 5.31201 9.32125 2.52047 10.3754 1.55508L9.70004 0.817601ZM29.772 2.64651L26.7989 0.763972L26.2639 1.60885L29.237 3.49138L29.772 2.64651ZM29.9887 5.52552C30.4411 4.95323 30.5742 4.37591 30.4836 3.85198C30.3965 3.34828 30.1139 2.95711 29.8481 2.70569L29.1609 3.4322C29.3199 3.58252 29.4581 3.79037 29.4982 4.02236C29.5348 4.23413 29.5016 4.5292 29.2042 4.90539L29.9887 5.52552ZM26.924 11.381C27.2214 10.6623 27.7453 9.50204 28.3207 8.3628C28.9015 7.21271 29.5144 6.12556 29.9887 5.52552L29.2042 4.90539C28.6607 5.59288 28.0088 6.76216 27.428 7.91199C26.8418 9.07267 26.3074 10.2558 26 10.9986L26.924 11.381ZM26.3957 19.2724C25.9581 17.2689 25.6588 14.4385 26.924 11.381L26 10.9986C24.6247 14.3222 24.9598 17.3847 25.4188 19.4858L26.3957 19.2724ZM27.7618 22.7886C27.213 21.6839 26.6931 20.6333 26.3957 19.2724L25.4188 19.4858C25.7456 20.9819 26.3197 22.1334 26.8663 23.2335L27.7618 22.7886ZM28.9602 25.5911C28.6302 24.5343 28.1862 23.6426 27.7618 22.7886L26.8663 23.2335C27.2939 24.0941 27.7026 24.9187 28.0056 25.8892L28.9602 25.5911ZM27.4538 29.2041C28.1774 28.7445 28.6628 28.1692 28.9107 27.5284C29.1587 26.8875 29.1554 26.2161 28.9602 25.5911L28.0056 25.8892C28.1401 26.3197 28.1368 26.7574 27.9781 27.1676C27.8193 27.5779 27.4912 27.9957 26.9177 28.36L27.4538 29.2041ZM22.0377 31.281L27.364 29.2492L27.0076 28.3149L21.6813 30.3467L22.0377 31.281ZM18.6369 24.2528C18.8201 25.1811 19.3032 26.5158 19.8365 27.7817C20.3724 29.0538 20.9788 30.3026 21.4285 31.0673L22.2905 30.5604C21.8716 29.8481 21.2846 28.6434 20.758 27.3934C20.2288 26.1373 19.7802 24.8815 19.618 24.0592L18.6369 24.2528ZM18.1464 15.8551C17.9576 17.7536 17.758 19.7971 18.6369 24.2528L19.618 24.0592C18.7629 19.7245 18.9596 17.7835 19.1415 15.9541L18.1464 15.8551ZM18.1934 15.3735C18.1784 15.5334 18.1625 15.693 18.1464 15.8551L19.1415 15.9541C19.1576 15.7924 19.1737 15.6302 19.189 15.4673L18.1934 15.3735ZM20.7301 7.75978C18.5702 11.3726 18.2257 15.0305 18.1934 15.3735L19.189 15.4673C19.2171 15.1693 19.5445 11.6917 21.5884 8.27293L20.7301 7.75978ZM26.1937 0.81767C25.0669 1.84957 22.5494 4.71695 20.7301 7.75978L21.5884 8.27293C23.3587 5.31207 25.8149 2.52054 26.8691 1.55515L26.1937 0.81767Z' fill='%23ABD855'/%3E%3C/svg%3E");
position: absolute;
left: -0.5rem;
top: -1rem;
}
.Rte p:last-child,
.Rte blockquote:last-child,
.Rte ul:last-child,
.Rte ol:last-child,
.Rte h1:last-child,
.Rte h2:last-child,
.Rte h3:last-child,
.Rte h4:last-child,
.Rte h5:last-child,
.Rte h6:last-child {
margin-bottom: 0;
}
.Rte p:first-child,
.Rte blockquote:first-child,
.Rte ul:first-child,
.Rte ol:first-child,
.Rte h1:first-child,
.Rte h2:first-child,
.Rte h3:first-child,
.Rte h4:first-child,
.Rte h5:first-child,
.Rte h6:first-child {
margin-top: 0;
}
.shopify-policy__container {
margin-top: 50px;
margin-bottom: 50px;
max-width: 680px;
}
.shopify-section--hidden, .shopify-section:empty, .shopify-section--conditioned:has(.ReferenceListWrapper.none) {
display: none;
}
.shopify-section--bordered:not(:empty) ~ .shopify-section--bordered + .shopify-section--bordered, .shopify-section--bordered:not(:empty) + .shopify-section--bordered, .Section--bordered {
border-top: 1px solid var(--color-border-primary);
}
.Section--spacingNormal, .shopify-section--spacedDefault {
padding: 4rem 0;
}
.SectionFooter {
margin-top: 2.5rem;
text-align: center;
}
@media (min-width: 768px) {
.SectionFooter {
margin-top: 3rem;
}
}
@media screen and (min-width: 992px) {
.Section--spacingNormal, .shopify-section--spacedDefault {
/* margin: 80px 0; */
padding: 5rem 0;
}
.shopify-section--bordered > .Section--spacingNormal, .Section--spacingNormal.Section--bordered {
padding: 5rem 0;
}
}
/**
* ----------------------------------------------------------------------------
* Table styling
* - use .TableWrapper to allow for mobile scrolling with proper styling (Wrapper is automatically injected for for Rte tables)
* - use .Table class for non Rte tables instead of table tag to allow for different table situations that should not get styled this way (e.g. account.orders.liquid).
* -
* ----------------------------------------------------------------------------
*/
.TableWrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.TableWrapper::-webkit-scrollbar {
display: none;
}
.Table,
.Rte table {
width: 100%;
font-size: 0.875em;
border-collapse: separate;
/* white-space: nowrap; */
-webkit-hyphens: auto; /* EXPERIMENTAL */
-ms-hyphens: auto;
hyphens: auto;
}
.Table th,
.Table td,
.Rte table th,
.Rte table td {
padding: 16px 12px;
border-bottom: 1px solid var(--color-border-primary);
text-align: left;
}
/* For non Rte tables the length of the table headers shouldnt be extensively long */
@media (max-width: 767px) {
.Table th,
.Table td {
white-space: nowrap;
}
}
.Table--small th,
.Table--small td {
padding: 8px 12px;
}
/*
Only apply to Rte tables, as the normal data-related tables in the Shop dont need additional constraints or have issues with this constraint.
The Rte tables often have larger table header and more content in the cells, this prevents the cells from being really small and by that having many line breaks.
Only apply to mobile, as desktop has usually enough space to display the content properly. Also prevent the table to occupy more space than needed and by that unintentionally increase the containers width.
*/
@media (max-width: 767px) {
.Rte table th,
.Rte table td {
min-width: 120px;
}
}
/* .Table th:first-child,
.Table td:first-child,
.Table tfoot td:empty + td,
.Rte table th:first-child,
.Rte table td:first-child,
.Rte table tfoot td:empty + td {
padding-left: 0;
}
.Table th:last-child,
.Table td:last-child,
.Rte table th:last-child,
.Rte table td:last-child {
padding-right: 0;
} */
.Table th,
.Rte table th,
.Rte table:not(:has(> thead)) tbody tr:first-of-type /* Apply header styles to the first row of tbody only if tbody is not preceded by thead (Shopify rich text editor doesnt offer table header, so we use the first table row) */ {
color: var(--color-text-primary);
font-weight: 500;
background-color: var(--color-background-surface-tertiary);
}
.Rte table:not(:has(> thead)) tbody tr:nth-child(2n) {
background-color: unset;
}
/* This was probably used for a table that has a sticky first column, but there is currently no use for this and it would create a lot of complexity
.Table thead th:first-child:empty,
.Table tbody th:first-child,
.Rte table thead th:first-child:empty,
.Rte table tbody th:first-child {
position: -webkit-sticky;
position: sticky;
left: 0;
min-width: 40px;
max-width: 100px;
z-index: 1;
background: var(--color-background-surface-primary);
white-space: normal;
} */
.Table tbody th:first-child,
.Rte table tbody th:first-child {
border-right: 1px solid var(--color-border-primary);
}
.Table tfoot td:empty,
.Rte table tfoot td:empty {
border-bottom: none;
}
/* .Table--noBorder tbody tr:not(:last-child) td {
border-bottom: none;
} */
table tbody tr {
background-color: var(--color-background-surface-primary); /* In case the table is on a non-primary surface */
}
.Table tbody tr:nth-child(2n),
.Rte table tbody tr:nth-child(2n),
.Rte table:not(:has(> thead)) tbody tr:nth-child(2n+3) /* In case there is not table header, we need to offset by 1 as we use first row as header */ {
background-color: var(--color-background-surface-secondary);
}
/* @media screen and (max-width: 767px) {
.TableWrapper > .Table {
padding-right: 24px;
padding-left: 24px;
}
}
@media screen and (min-width: 1200px) {
.Table,
.Rte table {
white-space: normal;
}
}
*/
/* Adjust for scrollability */
.TableWrapper {
padding: 2px 0 2px 1rem; /* 2px for shadow visibility */
margin: 0 -1rem;
}
.Table,
.Rte table {
padding-right: 1rem;
position: relative;
}
/* Add shadow for better visual emphasize (and for scroll indicator on mobile) */
.Table::after,
.Rte table::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: calc(100% - 1rem);
height: 100%;
background-color: white;
z-index: -1;
box-shadow: 0 0 3px 0 rgba(0,0,0,0.2);
}
/**
* ----------------------------------------------------------------------------
* Tab list styling
* ----------------------------------------------------------------------------
*/
.TabList {
gap: 1rem;
max-width: 100%; /* Needed in case width: fit-content; is applied */
border-bottom: 1px solid var(--color-border-primary);
}
.TabList__Item {
position: relative;
font-size: 1.125em;
font-weight: 600;
}
.TabList__Item > * {
pointer-events: none;
touch-action: none;
}
.TabList__ItemTitle {
position: relative;
padding: 10px 20px;
display: inline-block;
width: 100%;
/* margin-top: -10px; */
}
.TabList__ItemTitle::after {
position: absolute;
display: block;
content: "";
opacity: 0;
bottom: 0px;
left: 0;
transform: scaleX(0);
transform-origin: left center;
transition: transform .3s,opacity .3s;
z-index: 1;
width: 100%;
height: 2px;
background-color: var(--color-text-secondary);
/* border-top-right-radius: 3px;
border-top-left-radius: 3px; */
}
.TabList__Item.is-active, .TabList__Item:hover {
color: var(--color-text-primary);
transform: 0.3 ease;
}
.TabList__Item.is-active .TabList__ItemTitle::after, .TabList__Item:hover .TabList__ItemTitle::after {
opacity: 1;
transform: scale(1);
}
.TabList__Item.is-active .TabList__ItemTitle::after {
background-color: var(--color-brand);
}
.TabList--center {
width: fit-content;
margin: 0 auto;
}
.TabList--fullWidth .TabList__Item {
flex-grow: 1;
flex-basis: 0;
}
@media (min-width: 768px) {
.TabList--fullWidthDesktop .TabList__Item {
flex-grow: 1;
flex-basis: 0;
}
.TabList--centerDesktop {
width: fit-content;
margin: 0 auto;
}
}
@media (max-width: 767px) {
.TabList--fullWidthMobile .TabList__Item {
flex-grow: 1;
flex-basis: 0;
}
.TabList--centerMobile {
width: fit-content;
margin: 0 auto;
}
}
/**
* ----------------------------------------------------------------------------
* Tab switch functional CSS
* ----------------------------------------------------------------------------
*/
.tab-panel {
display: none;
}
.tab-panel[aria-hidden=false] {
display: block;
}
/**
* ----------------------------------------------------------------------------
* Panel
* ----------------------------------------------------------------------------
*/
.Panel {
box-shadow: 0 0 5px 0 rgba(0,0,0,0.08);
box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 4px 0 rgba(0,0,0,0.11);
border-radius: 3px;
overflow: hidden;
background-color: var(--color-background-surface-primary);
position: relative;
}
.Panel > [class*="Panel"] {
padding: 1rem;
}
.Panel__Header {
border-bottom: 1px solid var(--color-border-primary);
}
.Panel__Content {
}
.Panel__Footer, .Panel__Content--bordered {
border-top: 1px solid var(--color-border-primary);
}
/* Align .Panel__Footer at the bottom if it is displayed in a grid layout */
.PanelFlexWrapper > .Panel {
display: flex;
flex-wrap: wrap;
height: 100%;
}
.PanelFlexWrapper > .Panel > [class*="Panel"] {
width: 100%;
}
.PanelFlexWrapper > .Panel > .Panel__Footer {
align-self: flex-end;
}
@media (max-width: 767px) {
.Panel {
margin: 0 calc(var(--container-horizontal-spacing) * -1);
border-radius: 0;
}
}
@media (max-width: 991px) {
.Panel--lg {
margin: 0 calc(var(--container-horizontal-spacing) * -1);
border-radius: 0;
}
}
/**
* ----------------------------------------------------------------------------
* Product item
* ----------------------------------------------------------------------------
*/
.ProductItem {
display: block;
position: relative;
}
.ProductItem__ImageWrapper {
background-color: var(--color-background-surface-secondary);
padding-top: 32px;
padding-bottom: 32px;
position: relative;
/* box-shadow: 0px 1px 2px rgba(0,0,0,0.08); */
border-radius: var(--border-radius-assignment-surface);
transition: 0.1s ease-in-out;
}
.ProductItem:hover .ProductItem__ImageWrapper {
background: var(--color-background-surface-secondary-hovered);
}
.ProductItem .ProductItem__ImageWrapper:active {
background: var(--color-background-surface-secondary-pressed);
}
.ProductItem__ImageWrapper .AspectRatio::before {
/* padding-bottom: 76%; */
padding-bottom: 84%;
}
.ProductItem__Image {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.ProductItem__InfoWrapper {
margin-top: 12px;
}
.ProductItem__Title {
line-height: 1.25;
color: var(--color-text-primary);
font-weight: 600;
font-size: 1em;
-webkit-hyphens: auto;;
hyphens: auto;
white-space: break-spaces;
}
.ProductItem__Reviews {
margin-top: 3px;
}
.ProductItem__Variant {
line-height: 1.25;
font-weight: 500;
font-size: 0.875em;
margin-top: 0.5rem;
}
.ProductItem__Price {
margin-top: 0.5rem;
}
.ProductItem__Price .Price:not(.Price--highlight) {
color: var(--color-text-primary);
}
.ProductItem__Price .UnitPriceMeasurement {
font-size: 0.625em;
}
@media (min-width: 768px) {
.ProductItem__Title {
font-size: 1.0625em;
}
.ProductItem__ImageWrapper {
padding-top: 40px;
padding-bottom: 40px;
}
.ProductItem__Image {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
}
.ProductItem__InfoWrapper {
display: flex;
justify-content: space-between;
gap: 0.75rem;
}
.ProductItem__QuickAdd {
margin-top: 2px;
}
.ProductItem__QuickAdd [data-lion-seamless-product-reward] {
min-width: 36px;
display: block;
}
.ProductItem__QuickAdd .lion-in-cart-reward__button {
font-size: 0;
line-height: 0;
padding: 0.5rem;
display: block;
color: var(--color-text-on-fill-button-tertiary);
background-color: var(--color-background-fill-button-tertiary);
box-shadow: var(--elevation);
}
.ProductItem__QuickAdd .lion-in-cart-reward__button:hover {
background-color: var(--color-background-fill-button-tertiary-hovered);
}
.ProductItem__QuickAdd .lion-in-cart-reward__button:active {
background-color: var(--color-background-fill-button-tertiary-pressed);
}
.ProductItem__QuickAdd .lion-in-cart-reward__button::before {
content: '';
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linejoin='round' stroke-width='1.5' d='M12 4v16m-8-8h16'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: block;
}
.ProductItem__QuickAdd .lion-in-cart-reward__button.lion-action-button--loading::before {
visibility: hidden;
}
.ProductItem__QuickAdd .lion-action-button.lion-action-button--disabled {
display: none;
}
.ProductItem__MetaWrapper {
flex-grow: 1;
}
.ProductItem__ClubProgressBar {
height: 8px;
border-radius: 2px;
border: 1px solid var(--color-border-primary);
width: 100%;
}
.ProductItem__ClubProgressBar::before {
content: '';
display: block;
height: 100%;
width: var(--progress);
background-color: #EAEBED;
border-radius: 2px;
}
/*
* ----------
* compact mode
* Note: there are code duplicates in areas like serach where we toggle between compact and normal view based on screen size.
* ----------
*/
.ProductItem--compact {
display: flex;
gap: 0.75rem;
font-size: 0.9375rem;
padding-bottom: 2px; /* To make button shadow visible */
}
.ProductItem--compact .ProductItem__LabelList {
display: none;
}
.ProductItem--compact .ProductItem__ImageWrapper {
width: 72px;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
flex-shrink: 0;
align-self: start;
}
.ProductItem--compact .ProductItem__Image {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.ProductItem--compact .ProductItem__ImageWrapper .AspectRatio::before {
/* Was used to support native aspect ratio, but not larger than 1:1, but fixed ratio of 1:1 seems to be better
padding-bottom: min(calc(100% / (var(--image-aspect-ratio))), calc(100% - 12px));
*/
padding-bottom: calc(100% - 1rem); /* Subtract 1rem due to the padding applied to the image wrapper */
}
.ProductItem--compact .ProductItem__InfoWrapper {
margin-top: 0;
}
/**
* ----------------------------------------------------------------------------
* Product tabs
* ----------------------------------------------------------------------------
*/
.ProductTabs:not(:empty) {
margin-top: calc(3rem - 0.5rem);
}
.ProductTabs__Button {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
text-align: left;
cursor: pointer;
padding: 0.75em 0.25em;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.ProductTabs__Button svg {
flex-shrink: 0;
--icon-size: 1.5rem;
}
/**
* ----------------------------------------------------------------------------
* Label list
* ----------------------------------------------------------------------------
*/
.LabelList {
position: absolute;
z-index: 1;
top: 0.5em;
left: 0.5em;
display: grid;
justify-items: start;
row-gap: 0.25em;
max-width: calc(100% - 1rem);
}
.LabelList__Item {
padding: 0 0.5em;
font-size: 0.75em;
box-shadow: var(--elevation);
border-radius: 4px;
background-color: var(--color-background-surface-primary);
color: var(--color-text-primary);
font-weight: 400;
}
/* Need to adjust width so that it is not displayed as a sqaure and also the offset mulitplier from 0.5 to 0.4, as the icon appears slightly to low */
.LabelList__Item .IconLabel {
column-gap: 0.3em;
--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * .4);
}
.LabelList__Item--freeShaker .IconLabel__Icon,
.LabelList__Item--freeShaker .IconLabel__Icon svg {
width: auto;
}
.LabelList__Item--freeShaker {
background-color: var(--color-background-surface-highlight);
/* color: var(--color-text-inverse);
background-color: #796563;
background-color: #704b4b; */
}
/*
.LabelList__Item--bestseller {
background-color: #f8f0e9;
background-color: #6c4e4b;
color: white;
}
*/
.LabelList__Item--onSale {
font-weight: 700;
color: var(--color-text-emphasis);
}
.LabelList__Item--soldOut {
background-color: var(--color-background-surface-secondary);
color: var(--color-text-secondary);
}
/*
@media (min-width: 768px) {
.LabelList__Item {
font-size: 0.75em;
}
} */
/**
* ----------------------------------------------------------------------------
* Page item compact
* ----------------------------------------------------------------------------
*/
.PageItem {
outline: 1px solid var(--color-border-primary) !important;
border-radius: 2px;
padding: 0.5rem 0.5rem 0.5rem 0.75rem;
display: grid;
grid-template-columns: auto 1.5rem;
align-items: center;
transition: 0.1s ease;
}
.PageItem:hover {
color: var(--color-text-primary);
background: var(--color-background-surface-primary-hovered);
}
.PageItem:active {
background: var(--color-background-surface-primary-pressed);
}
.PageItem__Icon {
font-size: 1.5rem;
line-height: 0;
}
/**
* ----------------------------------------------------------------------------
* Account/Club related elements
* ----------------------------------------------------------------------------
*/
.Customer__Initials {
color: var(--color-text-primary);
width: 35px;
height: 35px;
text-align: center;
border: 2px solid var(--color-text-primary);
border-radius: 100%;
padding: 3px;
font-size: 18px;
font-weight: 700;
display: flex;
line-height: normal;
align-items: center;
justify-content: center;
}
.Account__PointsWrapper {
white-space: nowrap;
}
.Account__Points {
line-height: normal;
font-weight: 600;
}
.Account__PointsName {
font-size: 12px;
line-height: normal;
}
.ClubExplanation__IconWrapper {
margin: 0 auto;
}
.ClubExplanation__IconWrapper svg {
width: auto;
height: 85px;
}
.ClubExplanation__Step {
min-width: 160px;
padding: 30px 20px;
}
.ClubExplanation__Number {
width: 30px;
height: 30px;
text-align: center;
background-color: var(--color-background-surface-tertiary);
color: var(--color-text-primary);
font-weight: 700;
font-size: 18px;
line-height: 30px;
border-radius: 100%;
margin-right: 10px;
display: inline-block;
}
.ClubExplanation__Text {
line-height: normal;
margin-top: 20px;
}
/**
* ----------------------------------------------------------------------------
* Article item compact
* ----------------------------------------------------------------------------
*/
.ArticleItemCompact {
display: grid;
grid-template-columns: 65px auto;
gap: 8px 15px;
align-items: start;
}
.ArticleItemCompact__ImageWrapper {
box-shadow: 0 1px 2px 0 rgba(0,0,0,.22);
}
.ArticleItemCompact__ImageWrapper,
.ArticleItemCompact__Image {
border-radius: 3px;
overflow: hidden;
}
.ArticleItemCompact__Image {
object-fit: cover !important;
}
.ArticleItemCompact__Info {
align-self: center;
}
.ArticleItemCompact__Blog {
font-size: 0.825em;
font-weight: 500;
margin-top: -1px; /* Offset difference in line height with title */
}
.ArticleItemCompact__Title {
margin-bottom: 0;
line-height: 1.4;
font-weight: 600;
color: var(--color-text-primary);
}
.ArticleItemCompact__Icon {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75em;
align-self: center;
}
.ArticleItemCompact__Excerpt {
font-size: 0.875em;
grid-column: 1 / span 2;
line-height: 1.5;
}
.ArticleItemCompact:hover .ArticleItemCompact__Blog,
.ArticleItemCompact:hover .ArticleItemCompact__Excerpt {
color: var(--color-text-secondary);
}
.ArticleItemCompact.LinkWrapperClickable:hover::before {
right: -.25em;
left: -.25em;
}
/**
* ----------------------------------------------------------------------------
* Article item
* ----------------------------------------------------------------------------
*/
.ArticleItem {
white-space: normal; /* Needed when displayed in scroll slider */
height: 100%;
background-color: var(--color-background-surface-tertiary);
display: flex;
flex-wrap: wrap;
}
/* The author image is used in article item and in the article itsself, thats why we cant put it into article.css */
.ArticleAuthor__ImageWrapper {
border-radius: 100%;
overflow: hidden;
border: 2px solid var(--color-border-primary);
width: 50px;
height: 50px;
margin-right: 12px;
flex-shrink: 0;
}
.ArticleAuthor__Image {
border-radius: 100%;
}
.ArticleAuthor__Info {
line-height: normal;
}
.ArticleAuthor__Name {
font-size: 0.925em;
margin-bottom: 5px;
}
.ArticleAuthor__UpdatedAt {
font-size: 0.875em;
}
.ArticleItem .ArticleAuthor__ImageWrapper {
width: 42px;
height: 42px;
border-color: var(--color-border-inverse);
margin-right: 10px;
}
.ArticleItem__Title {
line-height: 1.55;
margin-bottom: 0.5em;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.ArticleItem--recipe .ArticleItem__Title {
margin-bottom: 2px;
}
.ArticleItem__Content {
padding: 0 18px;
}
.ArticleItem__ContentWrapper {
width: 100%;
}
.ArticleItem__Footer {
padding: 14px;
border-top: 1px solid var(--color-border-primary);
align-self: flex-end;
width: 100%;
}
.ArticleItem--podcast .ArticleItem__ImageWrapper {
width: 70px;
align-self: flex-start;
margin: 0;
}
.ArticleItem--podcast .ArticleItem__Footer {
padding: 10px 18px;
}
.ArticleItem--podcast .ArticleItem__Image {
border-radius: 3px;
}
.ArticleItem__Header {
padding: 18px 18px 0;
margin-bottom: 12px;
}
.ArticleItem--podcast .Article__Meta svg {
height: 15px;
width: auto;
vertical-align: sub;
margin-right: 6px;
}
.ArticleItem--podcast .ArticleItem__Title {
width: 100%;
margin-left: 15px;
}
.ArticleListWrapper {
/* max-width: 1260px; */
margin: 0 auto 60px auto;
}
/* .ArticleList {
margin-bottom: -60px;
} */
.ArticleItem__ImageWrapper {
/* margin-bottom: 22px;
background-size: cover; */
display: block;
margin-bottom: 15px;
overflow: hidden;
}
.ArticleItem__Image {
/* display: block; */
-o-object-fit: cover !important;
object-fit: cover !important;
/* -o-object-position: center;
object-position: center;
font-family: "object-fit: cover; object-position: center;"; */
}
/* .ArticleItem__Content {
margin: 0 8px;
} */
.ArticleItem__Category {
display: block;
/* margin-bottom: 16px; */
margin-bottom: 3px;
}
.ArticleItem__Excerpt {
margin-bottom: 20px;
}
.ArticleItem--magazine .ArticleItem__Excerpt {
display: none;
}
@media screen and (min-width: 992px) {
.ArticleListWrapper {
margin-bottom: 100px;
}
/* .ArticleList {
margin-bottom: -100px;
} */
.ArticleItem--magazine .ArticleItem__Excerpt {
display: block;
}
}
/**
* ----------------------------------------------------------------------------
* Reference list
* ----------------------------------------------------------------------------
*/
.ReferenceList {
background-color: var(--color-background-surface-tertiary);
padding: 15px;
}
.Drawer .ReferenceList {
background-color: inherit;
padding: 0;
}
.ReferenceList__Item:not(:last-of-type) {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border-primary);
}
.ReferenceList__Item--no-link a {
display: none;
}
.ReferenceLink {
text-decoration: none !important;
}
.ReferenceLink > span {
text-decoration: underline;
}
.ReferenceItem--number {
height: 24px;
width: 24px;
line-height: 22px;
font-size: 14px;
text-align: center;
border-radius: 100%;
border: 1px solid var(--color-text-secondary);
flex-shrink: 0;
margin-right: 14px;
font-weight: 700;
}
.ReferenceItem--title {
flex-grow: 1;
margin-right: 0.5rem;
line-height: normal;
align-self: center;
}
.ReferenceItem--source {
line-height: normal;
}
/**
* ----------------------------------------------------------------------------
* Product feature
* ----------------------------------------------------------------------------
*/
.ProductFeature__ImageWrapper {
max-width: 100px;
min-width: 80px;
}
.ProductFeature__ImageWrapper .AspectRatio {
max-height: 70px;
min-height: 70px;
}
.ProductFeature--variantPreview .ProductFeature__ImageWrapper .AspectRatio {
max-height: 95px;
}
/* .ProductFeature__Image {
padding: 8px 0;
} */
.ProductFeature__Wrapper, .ProductFeature__Wrapper.ProductFeature__Wrapper--none {
padding: 0 17px 17px;
overflow: hidden;
}
.ProductFeature .PreviewItem__Values .Value__ImageWrapper {
margin-bottom: 0;
width: 34px;
height: 34px;
}
.ProductFeature .PreviewItem__Values img {
padding: 0;
}
.ProductFeature .PreviewItem__Values svg {
width: 1.5rem;
}
@media (min-width: 576px) {
.ProductFeature__Wrapper--sm {
padding: 0 25px 0 5px;
}
.ProductFeature__Wrapper:not(.ProductFeature__Wrapper--none) .ProductFeature__ImageWrapper {
width: 100%;
}
}
@media (min-width: 768px) {
.ProductFeature__Wrapper--md {
padding: 0 25px 0 5px;
}
}
/**
* ----------------------------------------------------------------------------
* Blog
* ----------------------------------------------------------------------------
*/
.Blog__Logo {
width: 150px;
}
.Blog__RssLink {
margin-left: 14px;
vertical-align: baseline;
}
.Blog__RssLink svg {
width: 10px;
height: 10px;
}
.Blog__TagList {
padding-top: 8px;
}
.Blog__PodcastLinks {
/* max-width: 460px; */
max-width: 410px;
}
.Blog__PodcastLinks .HorizontalList__Item {
width: calc(33.33% - 16px);
}
.Blog__PodcastFaq .Collapsible--defaultStyling .Collapsible--defaultStyling {
margin-left: 0;
border-top: 1px solid var(--color-border-primary);
}
.Blog__PodcastFaq .Collapsible--defaultStyling .Collapsible--defaultStyling:first-of-type {
border-top: none;
}
@media (min-width: 768px) {
.Blog__TagListWrapper {
/* background-color: var(--color-background-surface-tertiary);
padding: 20px 20px 1px; */
padding-top: 24px;
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
}
}
@media screen and (max-width: 767px) {
.Blog__TagList .HorizontalList__Item {
margin: 5px 10px;
}
}
@media screen and (min-width: 768px) {
.ArticleList + .Pagination {
margin-top: 80px;
}
}
@media screen and (min-width: 1200px) {
#shopify-section-main-blog + #shopify-section-shop-now {
margin-top: 150px;
}
}
/**
* ----------------------------------------------------------------------------
* Blog Topic List
* ----------------------------------------------------------------------------
*/
.BlogTopic {
padding: 10px 15px;
margin: -10px -15px;
transition: 0.2s ease;
}
.BlogTopic__IconWrapper {
width: 75px;
flex-shrink: 0;
}
/**
* ----------------------------------------------------------------------------
* Blog Post Section
* ----------------------------------------------------------------------------
*/
.scroll-list + .BlogPosts__Content {
margin-top: 1.5em;
}
.BlogPosts .Collapsible__Content {
display: flex;
flex-direction: column;
gap: 1.75rem;
padding-top: 1rem;
}
.BlogPosts .SectionFooter:empty {
display: none;
}
/**
* ----------------------------------------------------------------------------
* General
* ----------------------------------------------------------------------------
*/
@-webkit-keyframes cartEmptyOpening {
from {
transform: translate(-50%, calc(-50% + 35px));
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}
@keyframes cartEmptyOpening {
from {
transform: translate(-50%, calc(-50% + 35px));
opacity: 0;
}
to {
transform: translate(-50%, -50%);
opacity: 1;
}
}
.Cart__ShippingNotice {
position: -webkit-sticky;
position: sticky;
top: 0;
margin-bottom: 0;
padding-top: 9px;
padding-bottom: 9px;
font-size: 0.8125em;
border-bottom: 1px solid var(--color-border-primary);
line-height: normal;
z-index: 1;
background: var(--color-background-surface-primary);
}
.Cart__Empty {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
-webkit-animation: cartEmptyOpening 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
animation: cartEmptyOpening 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
@media screen and (min-width: 768px) {
.Cart__ShippingNotice {
font-size: 0.9375em;
}
}
/* Trustedshops Trustbadge */
#trustbadge-container-98e3dadd90eb493088abdc5597a70810 {
z-index: 4 !important;
}
@media (min-width: 992px) {
#minimized-trustbadge-98e3dadd90eb493088abdc5597a70810 {
top: calc(50% + var(--header-height) / 2) !important;
bottom: unset !important;
transform: translateY(-50%) !important;
}
}
/* Pushowl */
body .pushowl-optin {
font-family: 'Lato', -apple-system, sans-serif !important;
border-radius: 3px !important;
}
.pushowl-optin .pushowl-optin__yes-button {
text-transform: uppercase !important;
letter-spacing: 1.6px !important;
font-size: 13px !important;
line-height: 26px !important;
border-radius: 0px !important;
flex-grow: 1 !important;
text-align: center !important;
}
@media (max-width: 767px) {
body .pushowl-optin {
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
left: 0 !important;
}
.pushowl-optin .pushowl-optin__content {
padding: 25px 20px 20px !important;
}
}
/**
* ----------------------------------------------------------------------------
* Items
* ----------------------------------------------------------------------------
*/
.Cart__Head {
border-bottom: 1px solid var(--color-border-primary);
}
.CartItemWrapper {
overflow: hidden;
display: grid;
grid-template-rows: 1fr;
opacity: 1;
transition: grid-template-rows 0.5s ease-out, opacity 0.5s ease-out;
}
.CartItemWrapper.removed {
grid-template-rows: 0fr;
opacity: 0;
}
.CartItemWrapper > :first-child {
overflow: hidden;
position: relative;
}
.CartItemWrapper.removed > :first-child::after {
content: "";
position: absolute;
top: -1rem;
left: -1rem;
right: -1rem;
box-shadow: inset 0 -0.5rem 0.5rem var(--color-background-surface-primary);
height: calc(100% + 1rem);
}
.CartItem__ImageWrapper {
width: 60px;
text-align: center;
}
.CartItem__ImageWrapper .AspectRatio {
max-height: 60px;
}
.CartItem__AddToCartWrapper {
width: 60px;
}
.CartItem__Title, .CartItem__Variant {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.CartItem__Title {
font-size: 0.9375em;
}
.CartItem__PriceList, .CartItem__Variant, .CartItem__PlanAllocation {
font-size: 0.8125em;
}
.CartItem__DiscountList {
font-weight: bold;
font-size: 0.875em;
list-style: none;
}
.CartItem__Discount, .Cart__Discount {
display: inline-block;
color: var(--color-text-emphasis);
font-weight: bold;
}
.CartItem__Discount:not(:only-of-type) {
margin-bottom: 5px;
}
.CartItem__Discount svg, .Cart__Discount svg {
margin-right: 4px;
margin-bottom: 1px;
vertical-align: text-bottom;
}
.CartItem__PriceList .UnitPriceMeasurement {
font-size: 10px;
}
.CartItem__Remove {
margin: 8px 0;
font-size: 0.625em;
}
.CartItem__Remove::before {
background: var(--color-text-secondary);
}
@media screen and (min-width: 768px) {
.CartItem__Title {
font-size: 1em;
}
.CartItem__Variant {
font-size: 0.8125em;
}
.CartItem__PriceList, .CartItem__PlanAllocation {
font-size: 0.875em;
}
.CartItem__Remove {
font-size: 0.6875em;
}
}
/**
* -------------------- Upsell cart items --------------------
*/
/* Product item like it is used in the search on small screens */
.Cart__CrossSell .ProductItem {
display: flex;
align-items: flex-start;
gap: 15px;
font-size: 0.9375em;
}
.Cart__CrossSell .ProductItem .ProductItem__LabelList {
display: none;
}
.Cart__CrossSell .ProductItem .ProductItem__ImageWrapper {
width: 80px;
padding-top: 6px;
padding-bottom: 6px;
flex-shrink: 0;
}
.Cart__CrossSell .ProductItem .ProductItem__Image {
padding-left: 6px;
padding-right: 6px;
}
.Cart__CrossSell .ProductItem .ProductItem__ImageWrapper .AspectRatio::before {
padding-bottom: calc(100% - 1rem); /* Subtract 1rem due to the padding applied to the image wrapper */
}
.Cart__CrossSell .ProductItem .ProductItem__InfoWrapper {
flex-grow: 1;
margin-top: 0;
}
.Cart__CrossSell .ProductItem .ProductItem__InfoWrapper .ProductItem__QuickAdd {
display: block;
}
.CartClubSlider {
margin: 0 -1rem;
}
.CartClubSlider .Slider__Slide {
width: 80%;
max-width: 320px;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.CartClubSlider .Slider__Slide:first-of-type {
margin-left: 0.25rem;
}
.CartClubSlider .Slider__Slide:last-of-type {
margin-right: 0.25rem;
}
.CartClubSlider .Slider__Footer {
padding: 0 1rem;
}
@media (min-width: 1024px) {
.CartClubSlider {
margin: 0;
}
.CartClubSlider .Slider__Slide:first-of-type {
margin-left: -0.75rem;
}
.CartClubSlider .Slider__Slide:last-of-type {
margin-right: -0.75rem;
}
.ClubProduct__Slideshow .Slider__Footer {
padding: 0
}
}
/**
* ----------------------------------------------------------------------------
* Bottom
* ----------------------------------------------------------------------------
*/
.Cart__Total {
margin-bottom: 10px;
}
.Cart__Total .Price--compareAt {
margin-left: 14px;
}
.Cart__Total .Total__Title * {
vertical-align: sub;
display: inline-block;
line-height: normal;
}
.Cart__Total .Total__Title {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin-right: 4px;
line-height: normal;
}
@media (max-width: 430px) {
.Total__Title {
font-size: 13px;
}
}
.Total__Price {
color: var(--color-text-primary);
font-weight: 600;
}
.Total__Amount > * {
vertical-align: middle;
}
.Cart__Total .Total__Amount {
white-space: nowrap;
}
.Total__Amount s {
margin-left: 5px;
margin-right: 10px;
}
.ShippingThreshold__Notice {
font-size: 0.8125em;
}
@media screen and (min-width: 768px) {
.ShippingThreshold__Notice {
font-size: 0.9375em;
}
}
.Cart .Drawer__Footer,
.Cart__OffscreenNoteContainer {
padding: 14px 20px max(var(--ios-bottom-bar-height, 0), 20px) 20px;
}
.Cart__Checkout {
display: flex;
align-items: center;
justify-content: center;
margin-top: 18px;
}
.Cart__OffscreenNoteContainer {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 1;
background: var(--color-background-surface-primary);
border-top: 1px solid var(--color-border-primary);
transform: translateY(100%);
transition: transform 0.25s ease-in-out;
}
.Cart__OffscreenNoteContainer[aria-hidden=false] {
transform: translateY(0);
box-shadow: 1px 0 6px rgba(54, 54, 54, 0.2);
}
.Cart__Note {
margin-top: 10px;
}
.Cart__Taxes {
margin-bottom: 8px;
}
.Cart__Discount svg {
vertical-align: sub;
}
.has-note-open[aria-hidden=false] .Drawer__Header,
.has-note-open[aria-hidden=false] .Drawer__Main {
opacity: 0.4;
pointer-events: none;
transition: opacity 0.5s ease;
}
@media screen and (min-width: 768px) {
/* .Cart .Drawer__Footer,
.Cart__OffscreenNoteContainer {
padding: 20px 30px 30px 30px;
} */
.Cart__NoteButton + .Cart__Taxes {
margin-top: 4px;
}
}
/**
* ----------------------------------------------------------------------------
* Shipping and special offer threshold
* ----------------------------------------------------------------------------
*/
.ShippingThreshold__Bar, .SpecialOffer__Bar {
height: 10px;
background-color: var(--color-border-primary);
border-radius: 35px;
overflow: hidden;
position: relative;
}
.ShippingThreshold__Progress, .SpecialOffer__Progress {
height: 100%;
background-color: var(--color-text-secondary);
border-right: 2px solid var(--color-border-inverse);
}
.SpecialOffer__Progress {
background-color: var(--color-brand);
}
.ShippingThreshold__Progress.progress_100 {
background-color: var(--color-brand);
-webkit-animation-name: unset;
animation-name: unset;
border-right: unset;
}
.ShippingThreshold__Notice {
padding: 4px 12px;
background-color: var(--color-background-surface-tertiary);
margin-top: 7px;
font-weight: 600;
min-height: 30px; /* Prevent layout shift when text is inserted */
}
.AttentionIcon, .CheckmarkIcon {
width: 16px;
display: inline-block;
height: 19px;
background-size: contain;
vertical-align: middle;
background-repeat: no-repeat;
margin-right: 7px;
margin-left: -4px;
}
/**
* ----------------------------------------------------------------------------
* Special offer
* ----------------------------------------------------------------------------
*/
/* For closable container */
.Cart__SpecialOffer[aria-hidden="true"] {
display: none;
}
.Cart__SpecialOffer .ProductForm__Option {
padding-bottom: 2px;
}
.PopoverCart {
z-index: 11;
}
.Cart__SpecialOffer .ProductForm__Option {
max-width: 100%;
margin-top: 5px;
}
.Cart__SpecialOffer .SubHeading {
/* font-weight: 600; */
line-height: normal;
}
.SpecialOffer__Threshold.SpecialOffer__Threshold--line {
height: 100%;
position: absolute;
width: 2px;
top: 0;
background-color: var(--color-text-inverse);
}
.SpecialOffer__Threshold--three {
right: 0;
}
.SpecialOffer__Threshold {
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.SpecialOffer__Threshold.SpecialOffer__Threshold--three {
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.SpecialOffer__Labels {
position: relative;
font-size: 15px;
}
.SpecialOffer__Threshold.SpecialOffer__Threshold--label {
position: absolute;
top: 0;
background: var(--color-background-surface-tertiary);
color: var(--color-text-primary);
font-weight: 700;
font-size: 13px;
padding: 0 5px 1px;
border-radius: 2px;
}
/**
* ----------------------------------------------------------------------------
* Adjustments for dedicated cart page
* ----------------------------------------------------------------------------
*/
/* .Cart--expanded .Cart__Footer {
padding-top: 25px;
border-top: 1px solid var(--color-border-primary);
}
.Cart--expanded .Cart__Recap {
text-align: right;
}
.Cart--expanded .Cart__Recap,
.Cart--expanded .Cart__Recap .Cart__Checkout {
margin-top: 16px;
}
.Cart--expanded .Cart__Checkout {
margin-left: auto;
} */
@media screen and (min-width: 768px) {
.Cart--expanded .CartItem__Info > .CartItem__Actions, .Cart--expanded .CartItem__Info > .ProductForm__Option, .Cart--expanded .CartItem__Info ~ .CartItem__AddToCartWrapper {
display: none;
}
/* Cart page customisations
.Cart--expanded .Cart__Footer {
display: table;
width: 100%;
table-layout: fixed;
} */
/* .Cart--expanded .Cart__Recap, */
.Cart--expanded .Cart__NoteContainer {
width: 340px;
}
/* .Cart--expanded .Cart__Checkout {
width: auto;
} */
.Cart--expanded .PopoverCart > * {
max-width: 768px;
margin: 0 auto;
}
}
.Cart--expanded .Cart__SpecialOffer:not([aria-hidden="true"]) ~ .Cart__SpecialOffer {
margin-top: 20px;
}
.Cart--expanded .Cart__SpecialOffer .CartItem__Info > .ProductForm__Option {
display: block;
}
.Cart__SpecialOffer .Drawer__Container {
padding-bottom: 20px;
}
/**
* ----------------------------------------------------------------------------
* Cart page customisations
* ----------------------------------------------------------------------------
*/
/* Disable sticky header for cart page */
.template-cart .shopify-section--shop-header {
position: relative;
}
body.template-cart {
background-color: var(--color-background-secondary);
}
.template-cart #shopify-section-recently-viewed-products {
background-color: var(--color-background-surface-primary);
}
.Cart__PaymentMethods li {
/* margin: 3px 5px; */
margin: 0px 2px; /* Without linebreak */
max-width: 50px;
}
.Cart__Recap--mobile {
background-color: var(--color-background-surface-primary);
bottom: 0;
position: -webkit-sticky;
position: sticky;
margin-top: 20px !important;
z-index: 1;
box-shadow: 0 -2px 2px 0 rgba(0,0,0,.03);
}
.Cart__PaymentMethods ul {
list-style: none;
}
.ClubProduct__ImageWrapper {
/* width: 220px; */
margin: 0 auto;
}
.ClubProduct__ImageWrapper .ProductItem__LabelList {
z-index: 1;
}
.ClubProduct__ImageWrapper .ProductItem__Label--club-product-of-the-month {
background-color: var(--color-brand);
text-transform: uppercase;
color: var(--color-text-on-fill-button-primary);
padding: 4px 9px;
letter-spacing: .05em;
font-weight: 700;
font-size: 12px;
box-shadow: 0 0 3px #00000014;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.ClubHint__Account {
padding: 9px;
}
.lion-action-button--disabled {
font-size: 12px;
}
.Cart__ContentWrapper {
overflow: visible !important;
}
@media (min-width: 1024px) {
.Cart--expanded .Cart__Footer {
height: min-content;
top: 20px;
position: -webkit-sticky;
position: sticky;
}
[data-section-id="main-cart"] .PageContent {
max-width: none;
}
.Cart.Cart--expanded form {
display: grid;
grid-template-columns: auto 350px;
grid-template-rows: auto;
gap: 0px 20px;
grid-template-areas: "Cart__ContentWrapper Cart__Footer";
}
.Cart__ContentWrapper {
margin-bottom: auto;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
[data-section-id="main-cart"] .container {
max-width: none;
}
}
/**
* ----------------------------------------------------------------------------
* Shipping estimator
* ----------------------------------------------------------------------------
*/
.ShippingEstimator__Results {
height: 0;
overflow: hidden;
transition: height 0.25s ease-in-out;
}
.ShippingEstimator__Error,
.ShippingEstimator__ResultsInner {
margin-top: 32px;
}
.ShippingEstimator__Results p {
margin-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
.ShippingEstimator__Submit {
width: 100%;
}
.ShippingEstimator__Country,
.ShippingEstimator__Province,
.ShippingEstimator__Zip {
margin-bottom: 20px;
}
}
@media screen and (min-width: 768px) {
.ShippingEstimator__Form {
display: flex;
}
.ShippingEstimator__Form > *:not(:first-child) {
margin-left: 20px;
}
.ShippingEstimator__Country,
.ShippingEstimator__Province {
margin-bottom: 0;
}
.ShippingEstimator__Zip {
margin-bottom: 0;
max-width: 130px;
}
}
/**
* ----------------------------------------------------------------------------
* Collection item
* ----------------------------------------------------------------------------
*/
.CollectionItem {
--arrow-icon-size: 1.5rem;
padding: 1rem 0.75rem;
display: block;
background-color: var(--color-background-surface-secondary);
border-radius: 4px;
box-shadow: var(--elevation);
width: 100%;
height: 100%;
}
.CollectionItem__Content {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: start;
position: relative;
height: 100%;
}
.CollectionItem--compact {
max-width: unset;
}
.CollectionItem--compact .CollectionItem__Content {
flex-direction: row;
align-items: center;
}
.CollectionItem__ImageWrapper .AspectRatio {
width: 60px;
height: 60px;
}
.CollectionItem--compact .CollectionItem__ImageWrapper .AspectRatio {
width: 52px;
height: 52px;
}
.CollectionItem__Title {
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: var(--color-text-primary);
}
.CollectionItem__Description {
line-height: 24px;
}
.CollectionItem--compact .CollectionItem__Description {
font-size: 14px;
line-height: 20px;
}
.CollectionItem__Arrow {
display: none;
}
/* Compact view for small screens - rules need to be duplicated for CollectionItem--compact class*/
@media (max-width: 767px) {
.CollectionItem {
max-width: unset;
}
.CollectionItem .CollectionItem__Content {
flex-direction: row;
align-items: center;
}
.CollectionItem__ImageWrapper .AspectRatio {
width: 52px;
height: 52px;
}
.CollectionItem__Description {
font-size: 14px;
line-height: 20px;
}
}
/* Arrow that is only displayed in default item for big screens */
@media (min-width: 768px) {
.CollectionItem:not(.CollectionItem--compact) .CollectionItem__TextContent {
width: 100%;
}
.CollectionItem:not(.CollectionItem--compact) .CollectionItem__Description {
max-width: calc(100% - var(--arrow-icon-size) - 1rem);
}
.CollectionItem:not(.CollectionItem--compact) .CollectionItem__Arrow {
display: block;
position: absolute;
right: 0;
bottom: 0;
}
.CollectionItem:not(.CollectionItem--compact) .CollectionItem__Arrow svg {
width: var(--arrow-icon-size);
height: var(--arrow-icon-size);
}
}
/**
* ----------------------------------------------------------------------------
* Collection list
* ----------------------------------------------------------------------------
*/
.CollectionList {
--collection-list-columns: 1;
display: grid;
grid-template-columns: repeat(var(--collection-list-columns), 1fr);
grid-gap: 1.5rem;
}
@media (min-width: 768px) {
.CollectionList {
--collection-list-columns: 2;
}
}
@media (min-width: 1200px) {
.CollectionList {
--collection-list-columns: 3;
}
}
/**
* ----------------------------------------------------------------------------
* Support section
* ----------------------------------------------------------------------------
*/
.Support__Header svg {
width: 50px;
height: auto;
color: var(--color-text-brand);
}
.Team__ImageWrapper {
border-radius: 100%;
overflow: hidden;
border: 3px solid var(--color-border-inverse);
/* box-shadow: 3px 0 5px 0 rgba(0,0,0,.08); */
box-shadow: 0 0 7px 0 rgba(0,0,0,.10);
max-width: 100px;
width: 100%;
margin: 0 auto;
}
/* Fixes bug on iOS where the edges of the image flash outside the round container */
.Team__Image {
border-radius: 100%;
}
/**
* ----------------------------------------------------------------------------
* Collection header
* ----------------------------------------------------------------------------
*/
/* Utility class to mimic the width of the product grid */
.WidthAdapt--productGrid {
max-width: 100%;
}
@media (min-width: 768px) {
.WidthAdapt--productGrid {
max-width: 66.66%;
}
}
@media (min-width: 992px) {
.WidthAdapt--productGrid {
max-width: 75%;
}
}
.CollectionHeader .Breadcrumbs {
margin-bottom: 3rem;
}
@media (max-width: 767px) {
.CollectionHeader .Breadcrumbs {
display: none;
}
}
@media (min-width: 768px) {
.CollectionHeader .Breadcrumbs {
margin-bottom: 3.75rem;
}
}
/**
* ----------------------------------------------------------------------------
* Breadcrumbs
* ----------------------------------------------------------------------------
*/
.Breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0.75rem 0;
}
.Breadcrumbs li:not(:first-child) {
margin-left: 0.5rem;
}
.Breadcrumbs li:not(:last-child)::after {
content: "/";
margin-left: 0.5rem;
}
.Breadcrumbs li:last-child {
color: var(--color-text-primary);
font-weight: 600;
}
/**
* ----------------------------------------------------------------------------
* Show more
* ----------------------------------------------------------------------------
*/
.ShowMore {
transition: grid-template-rows 0.3s ease-in-out;
position: relative;
display: grid;
}
.ShowMore[data-show-more-state="collapsed"] {
overflow: hidden;
}
.ShowMore--breakText:not(.ShowMore--disabled) {
padding-bottom: 3rem;
}
.ShowMore--fade {
--padding-area-height: 5rem;
}
.ShowMore__Content {
position: relative;
overflow: hidden;
}
.ShowMore--fade > .ShowMore__Content::before {
content: "";
position: absolute;
width: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.80) 75%, var(--color-background-surface-primary) 100%);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 3;
}
.ShowMore--fade > .ShowMore__Content::after {
content: "";
position: absolute;
width: 100%;
background: var(--color-background-surface-primary);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
z-index: 3;
}
.ShowMore--fade[data-show-more-state="collapsed"] > .ShowMore__Content::before, .ShowMore--fade[data-show-more-state="collapsed"] > .ShowMore__Content::after {
opacity: 1;
visibility: visible;
}
.ShowMore__Button {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
z-index: 3;
margin: 1rem auto 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75em;
white-space: nowrap;
border-radius: 4px;
}
.ShowMore--breakText .ShowMore__Button {
bottom: 0;
width: 100%;
border-radius: 4px;
margin: 0;
}
.ShowMore__Button:hover {
background: var(--color-background-surface-primary-hovered);
}
.ShowMore__Button:active {
background: var(--color-background-surface-primary-pressed);
}
.ShowMore--fade > .ShowMore__Button {
margin-top: 2rem;
}
.ShowMore--fade[data-show-more-state="collapsed"] > .ShowMore__Button {
margin: 0 auto;
}
.ShowMore__Button--default {
border-radius: 4px;
}
.ShowMore__Button--decent {
text-decoration: underline;
padding: 0.5rem 1rem;
}
.ShowMore__Button:hover > button {
background: var(--color-background-surface-primary-hovered);
}
[data-action="show-more"] {
--icon-rotate-angle: 0deg;
}
[data-action="show-more"][aria-expanded="true"] {
--icon-rotate-angle: 180deg;
}
[data-action="show-more"] * {
pointer-events: none;
}
[data-action="show-more"][aria-expanded="true"] [data-show-more-element="more"], [data-action="show-more"][aria-expanded="false"] [data-show-more-element="less"] {
display: none;
}
[data-show-more-element="icon"] {
transform: rotate(var(--icon-rotate-angle));
transition: transform 0.3s ease-in-out;
height: fit-content;
}
[data-show-more-element="icon"] svg {
display: block;
}
/* Some instance specific styles are inside show-more.liquid */
/**
* ----------------------------------------------------------------------------
* Collection toolbar
* ----------------------------------------------------------------------------
*/
/* Used this class for various sticky bottom bars like the table of contents or navigation bars */
.CollectionToolbar {
position: -webkit-sticky;
position: sticky;
display: flex;
justify-content: space-between;
width: 100%;
background: var(--color-background-surface-primary);
box-shadow: 1px 1px var(--color-border-primary), -1px -1px var(--color-border-primary);
z-index: 2;
}
.CollectionToolbar--top {
top: calc(var(--header-height) * 0);
top: calc(var(--header-height) * var(--use-sticky-header, 0));
}
.supports-sticky .CollectionToolbar--bottom {
bottom: 0; /* as of today the best polyfill I've found does not support polyfilling sticky on bottom. As a consequence on those old
browsers, the stickiness is always at the top */
}
.CollectionToolbar__Group {
display: flex;
flex: 1 0 auto;
}
.CollectionToolbar__Item {
flex: 1 0 auto;
padding: 13px 0;
border-left: 1px solid var(--color-border-primary);
text-align: center;
vertical-align: middle;
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.CollectionToolbar__Item--layout {
flex: none;
width: 95px;
line-height: 1;
cursor: auto;
cursor: initial;
}
.CollectionToolbar__LayoutType {
margin: 0 6px;
opacity: 0.2;
transition: opacity 0.25s ease-in-out;
}
.CollectionToolbar__LayoutType svg {
width: 18px;
height: 18px;
}
.CollectionToolbar__LayoutType.is-active {
opacity: 1;
}
@media screen and (max-width: 767px) {
.CollectionToolbar__Item:first-child {
border-left: none;
}
}
@media screen and (min-width: 768px) {
.CollectionToolbar--reverse,
.CollectionToolbar__Group {
flex-direction: row-reverse;
}
.CollectionToolbar__Group {
flex: none;
}
.CollectionToolbar__Item {
padding: 18px 0;
}
.CollectionToolbar__Group .CollectionToolbar__Item {
padding-left: 45px;
padding-right: 45px;
}
.CollectionToolbar__Item--layout {
border-left: none;
width: 115px;
border-right: 1px solid var(--color-border-primary);
white-space: nowrap;
}
}
/**
* ----------------------------------------------------------------------------
* Collection filters
* ----------------------------------------------------------------------------
*/
.FilterGroup + .FilterGroup {
border-top: 1px solid var(--color-border-primary);
}
/**
* ----------------------------------------------------------------------------
* Product grid
* ----------------------------------------------------------------------------
*/
.ProductListWrapper--carousel {
margin: 0 calc(-1 * var(--container-horizontal-spacing, 0));
}
@media (min-width: 1024px) {
.ProductListWrapper--carousel {
margin: 0;
}
}
.ProductList:not(.ProductList--carousel) {
--row-gap: 48px;
--column-gap: 12px;
--items-per-row: 2;
display: grid;
grid-template-columns: repeat(auto-fill, calc((100% / var(--items-per-row)) - (((var(--items-per-row) - 1) * var(--column-gap)) / var(--items-per-row))));
row-gap: var(--row-gap);
column-gap: var(--column-gap);
}
@media (max-width: 767px) {
.ProductList--highlightFirst :first-child {
grid-column: 1 / span var(--items-per-row);
}
}
.CollectionInner {
margin-top: 2rem;
}
.Collection__BackButton {
color: var(--color-text-primary);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
width: -moz-fit-content;
width: fit-content;
margin: 4rem auto 0;
border-bottom: 1px solid var(--color-text-primary);
}
@media screen and (min-width: 768px) {
.CollectionInner {
margin-top: 2.5rem;
}
.ProductList:not(.ProductList--carousel) {
--row-gap: 48px;
--column-gap: 20px;
--items-per-row: 3;
}
}
@media screen and (min-width: 992px) {
.CollectionInner {
display: flex;
}
.Collection__BackButton {
margin-top: 6rem;
}
.CollectionInner__Sidebar {
position: -webkit-sticky;
position: sticky;
top: 200px;
flex: none;
align-self: flex-start;
width: 200px;
margin: 0 16px 0 24px;
padding-bottom: 50px;
}
.ProductList:not(.ProductList--carousel) {
--row-gap: 60px;
--column-gap: 20px;
--items-per-row: 4;
}
@supports (--css: variables) {
.CollectionInner__Sidebar {
top: calc(var(--header-height) + 50px);
}
}
@supports (--css: variables) {
.CollectionInner__Sidebar--withTopToolbar {
top: calc(var(--header-height) * 0 + 105px);
top: calc(var(--header-height) * var(--use-sticky-header, 0) + 105px);
}
}
.CollectionInner__Products {
flex: 1 0 0;
}
.CollectionInner__Sidebar .Collapsible--defaultStyling {
padding: 0;
}
}
@media screen and (min-width: 1200px) {
.CollectionInner__Sidebar {
margin-right: 10px;
margin-left: 50px;
}
.CollectionInner .Pagination {
margin-bottom: 80px;
}
}
@media (max-width: 767px) {
.BorderlessSliderSection {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
--bs-gutter-x: 0;
}
}
/**
* ----------------------------------------------------------------------------
* Product carousel
* ----------------------------------------------------------------------------
*/
.ProductList--carousel {
width: 100%;
white-space: nowrap;
}
@media (min-width: 1024px) {
.ProductList--carousel {
margin: 0 -0.75rem;
width: calc(100% + 1.5rem);
}
}
.ProductList--carousel .Slider__Viewport {
overflow: visible;
}
.ProductList--carousel .Slider__Slide {
width: 65%;
/* padding: 0 2px; Fix shadow clipping */
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.ProductList--carousel .Slider__Slide:first-of-type {
margin-left: 0.25rem;
}
.ProductList--carousel .Slider__Slide:last-of-type {
margin-right: 0.25rem;
}
.ProductList--carousel .Slider__Footer {
padding: 0 1rem;
}
@media (min-width: 768px) {
.ProductList--carousel .Slider__Viewport {
overflow: hidden;
}
.ProductList--carousel .Slider__Slide {
width: 50%;
}
}
@media screen and (min-width: 992px) {
.ProductList--carousel .Slider__Slide {
width: 33.3333%;
}
}
@media screen and (min-width: 1200px) {
.ProductList--carousel .Slider__Slide {
width: 25%;
}
}
/**
* ----------------------------------------------------------------------------
* FAQ Section
* ----------------------------------------------------------------------------
*/
.Faq__Section {
margin-bottom: 20px;
}
.Faq__Section ~ .Faq__Section {
margin-top: 34px;
}
.Faq__Item {
position: relative;
margin: 14px 0;
}
.Faq__Icon {
position: absolute;
top: 0;
left: 0;
color: var(--color-text-secondary);
transition: all 0.3s ease-in-out;
}
.Faq__Item[aria-expanded=true] .Faq__Icon {
transform: rotateZ(90deg);
color: var(--color-text-primary);
}
.Faq__ItemWrapper {
padding-left: 26px;
}
.Faq__Question {
display: block;
width: 100%;
margin-bottom: 0;
text-align: left;
color: var(--color-text-primary);
}
.Faq__AnswerWrapper {
height: 0;
overflow: hidden;
visibility: hidden;
transition: height 0.25s ease-in-out, visibility 0s ease-in-out 0.25s;
}
.Faq__Item[aria-expanded=true] .Faq__AnswerWrapper {
visibility: visible;
transition: height 0.25s ease-in-out;
}
.Faq__Answer {
padding: 16px 0 22px 0;
}
.Faq__Item--lastOfSection .Faq__Answer {
padding-bottom: 0;
}
.FaqSummary {
list-style: none;
margin: 0;
padding: 0;
}
.FaqSummary__Item {
margin-bottom: 12px;
}
.FaqSummary__Item.is-active::after {
width: 100%;
}
.FaqSummary__LinkLabel {
position: relative;
display: inline-block;
}
.FaqSummary__Item .Link::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 1px;
transform: scale(0, 1);
transform-origin: left center;
background: currentColor;
transition: transform 0.2s linear;
}
.FaqSummary__Item.is-active .Link::after {
transform: scale(1, 1);
}
@media screen and (min-width: 768px) {
.Faq__Section {
margin-bottom: 34px;
}
.Faq__Section ~ .Faq__Section {
margin-top: 60px;
}
}
/**
* As of today this section is displayed on the home page only
*/
.FeatureText {
text-align: center;
}
.FeatureText__ContentWrapper {
padding-left: 24px;
padding-right: 24px;
}
.FeatureText__ImageWrapper {
overflow: hidden;
}
.FeatureText--withImage .FeatureText__ContentWrapper {
padding-top: 50px;
padding-bottom: 20px;
}
@media screen and (max-width: 767px) {
.FeatureText--imageLeft {
display: flex;
flex-direction: column-reverse;
}
}
@media screen and (min-width: 768px) {
.FeatureText__Content {
max-width: 430px;
margin: 0 auto;
}
.FeatureText--withImage {
display: table;
width: 100%;
text-align: left;
table-layout: fixed;
}
.FeatureText--withImage .FeatureText__ContentWrapper,
.FeatureText--withImage .FeatureText__ImageWrapper {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.FeatureText--withImage .FeatureText__ContentWrapper {
padding: 50px;
}
.FeatureText--imageRight .FeatureText__ContentWrapper {
padding-right: 40px;
}
.FeatureText--imageRight .FeatureText__Content,
.FeatureText--imageRight .AspectRatio {
margin-right: 0;
}
.FeatureText--imageRight .AspectRatio {
text-align: right;
}
.FeatureText--imageLeft .FeatureText__ContentWrapper {
padding-left: 40px;
}
.FeatureText--imageLeft .FeatureText__Content,
.FeatureText--imageLeft .AspectRatio {
margin-left: 0;
}
.FeatureText--imageLeft .AspectRatio {
text-align: left;
}
}
@media screen and (min-width: 1200px) {
.FeatureText--imageRight .FeatureText__ContentWrapper {
padding-right: 100px;
}
.FeatureText--imageLeft .FeatureText__ContentWrapper {
padding-left: 100px;
}
}
.shopify-section--bordered + .shopify-section--footer {
border-top: 1px solid var(--color-border-primary);
}
/**
* ----------------------------------------------------------------------------
* Multi column section
* ----------------------------------------------------------------------------
*/
.MultiColumn .Slider__Viewport {
overflow: visible;
}
.MultiColumn .Slider__Footer {
padding: 0 1rem 0.25rem;
}
/**
* ----------------------------------------------------------------------------
* Feature text with video
* ----------------------------------------------------------------------------
*/
.FeatureText--withVideo {
text-align: left;
}
.ShopFooter {
padding: 34px 0;
background: var(--color-background-secondary);
color: var(--color-text-secondary);
}
.ShopFooter--withMargin {
margin-top: 60px;
}
.ShopFooter__Title {
color: var(--color-text-primary);
}
.ShopFooter .Form__Input::-moz-placeholder {
color: var(--color-text-secondary);
}
.ShopFooter .Form__Input:-ms-input-placeholder {
color: var(--color-text-secondary);
}
.ShopFooter .Form__Input::placeholder {
color: var(--color-text-secondary);
}
.ShopFooter__Logo {
width: 110px;
}
.ShopFooter__Block {
margin-top: 48px;
}
.ShopFooter__Block:first-child {
margin-top: 0;
}
.ShopFooter__Title {
margin-bottom: 20px;
}
.ShopFooter__Social {
margin-top: 5px;
}
.ShopFooter__Social .Button {
color: var(--color-text-secondary) !important;
}
.ShopFooter__Content + .ShopFooter__Newsletter {
margin-top: 18px;
}
.ShopFooter__Inner + .ShopFooter__Aside {
margin-top: 65px;
}
.ShopFooter__LocalizationForm {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.ShopFooter__LocalizationItem + .ShopFooter__LocalizationItem {
margin-left: 30px;
}
.ShopFooter__ThemeAuthor {
margin-top: 4px;
}
.ShopFooter__Aside {
border-top: 1px solid var(--color-border-primary);
}
.ShopFooter__Aside > * {
width: calc(100% + 40px);
}
@media screen and (min-width: 768px) {
.ShopFooter {
padding: 75px 0 42px 0;
}
.ShopFooter--withMargin {
margin-top: 80px;
}
.ShopFooter__Inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: calc(-1 * var(--container-horizontal-spacing, 0));
margin-right: calc(-1 * var(--container-horizontal-spacing, 0));
}
.ShopFooter__Block {
flex: 1 1 50%;
margin-top: 0;
margin-bottom: 50px;
padding-left: var(--container-horizontal-spacing, 0);
padding-right: var(--container-horizontal-spacing, 0);
}
.ShopFooter__Social {
margin-top: 14px;
}
.ShopFooter__Inner + .ShopFooter__Aside {
margin-top: 40px;
}
.ShopFooter__Localization {
width: 100%;
}
.ShopFooter__LocalizationForm {
justify-content: flex-start;
}
.ShopFooter__StoreName {
font-size: 0.8125em;
}
.ShopFooter__Aside {
border: none;
}
}
@media (min-width: 768px) {
.ShopFooter__Social {
max-width: 190px;
}
}
@media screen and (min-width: 1200px) {
.ShopFooter--withMargin {
margin-top: 120px;
}
.ShopFooter__Inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ShopFooter--center .ShopFooter__Inner {
justify-content: center;
}
.ShopFooter__Block {
flex: 0 1 auto;
}
.ShopFooter__Block--text,
.ShopFooter__Block--newsletter {
flex-basis: 240px;
}
.ShopFooter__Inner + .ShopFooter__Aside {
margin-top: 80px;
}
.ShopFooter__Aside > * {
width: auto;
}
}
@media screen and (min-width: 1200px) {
.ShopFooter__Block--text {
flex-basis: 400px;
}
.ShopFooter__Block--newsletter {
flex-basis: 305px;
}
}
/**
* ----------------------------------------------------------------------------
* Main header / Navigation
* ----------------------------------------------------------------------------
*/
.shopify-section--shop-header {
z-index: 5;
}
.ShopHeader--initializing .ShopHeader__Items {
visibility: hidden;
}
.ShopHeader .ShopHeader__Dropdown[aria-hidden="true"], .ShopHeader .ShopHeader__SecondaryColumn[aria-hidden="true"] {
display: none !important;
}
/* When header is overflowing due to long main menu, switch to mobile version early */
.ShopHeader.ShopHeader--overflowing .ShopHeader__Item.lg\:none, .ShopHeader.ShopHeader--overflowing .ShopHeader__Icon.lg\:none {
display: flex !important;
}
.ShopHeader.ShopHeader--overflowing .ShopHeader__Item.lg\:flex, .ShopHeader.ShopHeader--overflowing .ShopHeader__Icon.lg\:flex {
display: none !important;
}
.ShopHeader__Columns {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.ShopHeader__Dropdown {
--dropdown-margin: 0.75rem;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: min(calc(100% - 2 * var(--dropdown-margin)), 1024px);
padding-top: var(--dropdown-margin);
}
.ShopHeader__DropdownContent {
max-height: calc(100vh - var(--header-height, 60px) - 2 * var(--dropdown-margin));
overflow-y: auto;
}
.ShopHeader__MainMenu .ShopHeader__MainMenuItem[aria-expanded="true"] > a, .ShopHeader__MainMenu .ShopHeader__MainMenuItem.is-active > a {
font-weight: var(--font-heading-weight);
}
.ShopHeader .ShopHeader__ListItem[aria-expanded="true"] {
background: var(--color-background-fill-primary-pressed);
}
.ShopHeader__ListItem:hover .ShopHeader__NavItemTitle {
color: var(--color-text-primary) !important;
}
/* Styles for dynamically computed menu hover area */
svg.ShopHeader__HoverArea {
pointer-events: none;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
svg.ShopHeader__HoverArea polygon {
pointer-events: all;
}
.ShopHeader__CustomerIntials {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
line-height: 1;
}
.ShopHeader__CartDot {
position: absolute !important;
top: 10px;
right: 10px;
width: 8px;
height: 8px;
border-radius: 100%;
background-color: var(--color-text-primary);
box-shadow: 0 0 0 2px var(--color-background-surface-primary);
transform: scale(0);
transition: all 0.3s ease-in-out;
}
.ShopHeader__CartDot.is-visible {
transform: scale(1);
}
.ShopHeader__LinkSpacer {
position: absolute;
display: block;
bottom: 0;
color: transparent;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ShopHeader__LinkSpacer::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
transform: scale(0, 1);
transform-origin: left center;
border-bottom: 2px solid var(--color-text-primary);
transition: transform 0.3s, opacity 0.3s;
}
.ShopHeader__MainMenu button[aria-expanded="true"] .ShopHeader__LinkSpacer::after, .NavigationList__Item.is-active > a .ShopHeader__LinkSpacer::after {
opacity: 1;
transform: scale(1, 1);
}
.ShopHeader__NavItemText {
display: flex;
flex-direction: column;
align-items: center;
}
/* Use two pseudo elements to reserve space for the widest version of the text and prevent changing element widths when the text gets bold (on some screen sizes the browser renders bold text smaller than normal text so it can't be assumed that the bold text is always wider) */
.ShopHeader__NavItemText::before {
content: attr(data-text);
font-weight: 400;
visibility: hidden;
height: 0;
}
.ShopHeader__NavItemText::after {
content: attr(data-text);
font-weight: var(--font-heading-weight);
visibility: hidden;
height: 0;
}
.ShopHeader__LogoImage--secondary img {
height: 100%;
}
/**
* ----------------------------------------------------------------------------
* Sidebar menu
* ----------------------------------------------------------------------------
*/
.SidebarMenu {
height: 100%;
background: var(--color-background-surface-primary);
color: var(--color-text-primary);
}
/* Higher specificity to override utility styles */
.SidebarMenu .SidebarMenuButton[data-level="1"][aria-expanded="true"] {
background: var(--color-background-fill-primary-pressed) !important;
}
.SidebarMenuButton svg {
transition: transform 0.3s ease-in-out;
stroke-width: 1.5;
font-size: 1.5rem;
}
.SidebarMenuButton[aria-expanded="true"] svg {
transform: rotate(180deg);
}
/* We need to do that to add extra padding for scroll, as Safari on Mac and iOS has some issue with directly adding a padding-bottom */
.SidebarMenu .Drawer__Main::after {
display: block;
content: "";
height: 3rem;
}
/**
* ----------------------------------------------------------------------------
* Navigation bar
* ----------------------------------------------------------------------------
*/
.NavigationBar {
position: -webkit-sticky;
position: sticky;
top: calc(var(--header-height) - 1px); /* Offset by 1px to ensure there is no gap between the header and the nav bar. The gap occurs when rounding of the header height takes place. */
z-index: 4;
background: var(--color-background-surface-primary);
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
transition: top 0.3s, border-bottom 0.3s;
}
.NavigationBar[aria-hidden="true"] {
top: calc(var(--header-height) - var(--navigation-height) - 1px);
border-bottom: none;
}
.NavigationListWrapper {
font-size: 0.875em;
overflow: hidden;
position: relative;
width: calc(100% + (2 * var(--container-horizontal-spacing)));
margin-left: calc(var(--container-horizontal-spacing) * -1);
--navigation-vertical-spacing: 0.75rem;
}
@media (min-width: 768px) {
.NavigationListWrapper {
--navigation-vertical-spacing: 1.25rem;
}
}
.NavigationList .ShopHeader__LinkSpacer {
bottom: 0;
}
.NavigationList {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
list-style: none;
font-size: 0.875rem;
font-weight: var(--font-heading-weight);
line-height: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.7px;
white-space: nowrap;
color: var(--color-text-secondary);
}
/* Hide scrollbar for Chrome, Safari and Opera */
.NavigationList::-webkit-scrollbar {
display: none;
}
.NavigationList__Link {
display: block;
position: relative;
padding: var(--navigation-vertical-spacing, 1.25rem) 1rem;
}
.NavigationList__Item:first-of-type .NavigationList__Link {
padding-left: var(--container-horizontal-spacing, 1rem);
}
.NavigationList__Item:last-of-type .NavigationList__Link {
padding-right: var(--container-horizontal-spacing, 1rem);
}
.NavigationList__Item--template {
display: none;
}
.NavigationList__Item.is-active .NavigationList__Link {
color: var(--color-text-primary);
}
/**
* ----------------------------------------------------------------------------
* Blog area section
* ----------------------------------------------------------------------------
*/
.BlogArea__PostsContent {
margin-top: 40px;
}
.BlogArea__Posts .TabList__Item:not(.is-active) img {
opacity: 0.7;
}
.BlogArea__Posts .TabList__Item:hover img {
opacity: 1;
}
/**
* ----------------------------------------------------------------------------
* Coaching product item
* ----------------------------------------------------------------------------
*/
.CoachingItem__Heading {
line-height: normal;
}
.CoachingItem__Heading + *, * + .CoachingItem__Heading {
margin-top: 3px;
}
.CoachingProductList__Item--locked .CoachingItem__Heading, .CoachingProductList__Item--locked .CoachingItem__ImageWrapper {
opacity: 0.6;
}
.CoachingItem {
display: flex;
gap: 1em;
}
.CoachingItem__ImageWrapper {
width: 60px;
height: 60px;
/* align-self: center; */
position: relative;
flex-shrink: 0;
background-color: var(--color-background-fill-secondary);
border-radius: var(--border-radius);
/* box-shadow: 0px 1px 2px 0 rgba(0,0,0,0.14); */
/* box-shadow: 0 1px 2px 1px #00000014; */
padding: 0.5rem;
}
.CoachingItem__ImageWrapper svg {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/* width: 67%; */
/* height: 75%; */
/* height: 65%;
width: auto; */
width: calc(100% - 20px);
height: auto;
max-height: calc(100% - 12px);
}
.CoachingItem__Info {
align-self: center;
}
.CoachingItem__CtaIcon {
text-align: center;
align-self: center;
color: var(--color-text-primary);
margin-left: auto;
line-height: 0;
font-size: 1.25em;
}
/**
* ----------------------------------------------------------------------------
* Image with text overlay section
* ----------------------------------------------------------------------------
*/
.ImageHero {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
min-height: 380px;
width: 100%;
overflow: hidden;
}
.ImageHero--small {
min-height: 330px;
}
.ImageHero--large {
min-height: 480px;
}
.ImageHero__ImageWrapper,
.ImageHero__Image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
@media screen and (min-width: 992px) and (-moz-touch-enabled: 0), screen and (min-width: 992px) and (hover: hover) {
.ImageHero__Image--parallax {
background-attachment: fixed;
}
}
.ImageHero__ImageWrapper--hasOverlay::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.ImageHero__Wrapper {
z-index: 1;
}
.ImageHero__ContentOverlay {
position: relative;
flex-basis: 425px;
flex-grow: 0;
padding: 0 15px;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.ImageHero__TextContent {
position: absolute;
padding: 0 24px;
margin-bottom: 0 !important;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
text-align: center;
}
/* We allow embedding a video within an image hero */
.ImageHero iframe {
position: absolute;
height: 100%;
width: 200%;
left: -50%;
pointer-events: none;
}
.ImageHero--large iframe {
width: 250%;
left: -75%;
}
.ImageHero--preserveRatio {
min-height: 0;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.ImageHero--preserveRatio iframe {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.ImageHero iframe[src] {
pointer-events: auto; /* When data saver is on in Chrome, it will just set the src but prevents autoplay, so we need to make sure that we make it clickable */
}
.ImageHero__Block {
margin: 40px auto;
padding: 38px 20px;
max-width: 250px;
box-shadow: 0 1px 20px rgba(54, 54, 54, 0.3);
}
.ImageHero__Block--small {
max-width: 165px;
}
.ImageHero__Block--large {
max-width: 320px;
}
.ImageHero__BlockHeading {
margin: -0.325em 0 18px 0;
}
.ImageHero__BlockContent + .ImageHero__BlockLink {
margin-top: 18px;
}
@media screen and (max-width: 767px) {
.ImageHero__Block {
font-size: 0.8125em;
}
}
@media screen and (min-width: 768px) {
.ImageHero {
min-height: 450px;
}
.ImageHero--small {
min-height: 400px;
}
.ImageHero--large {
min-height: 500px;
}
.ImageHero iframe {
width: 100%;
height: 200%;
left: 0;
}
.ImageHero__Block {
padding: 48px 15px;
max-width: 380px;
}
.ImageHero__Block--small {
max-width: 240px;
}
.ImageHero__Block--large {
max-width: 520px;
}
.ImageHero__TextContent {
padding: 0 40px;
bottom: 40px;
top: auto;
left: 0;
transform: none;
text-align: left;
}
}
@media screen and (min-width: 1200px) {
.ImageHero {
min-height: 500px;
}
.ImageHero--small {
min-height: 450px;
}
.ImageHero--large {
min-height: 600px;
}
.ImageHero__TextContent {
padding: 0 50px;
bottom: 50px;
}
}
.NewsletterPopup {
position: fixed;
bottom: 15px;
left: 15px;
width: calc(100% - 30px);
padding: 24px 30px 30px 30px;
background: var(--color-background-surface-primary);
color: var(--color-text-primary);
z-index: 50;
text-align: center;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
visibility: hidden;
transform: translateY(25px);
opacity: 0;
transition: all 0.5s var(--drawer-transition-timing);
}
.NewsletterPopup .Heading {
color: inherit;
}
.NewsletterPopup .Form__Input::-moz-placeholder {
color: var(--color-text-primary);
}
.NewsletterPopup .Form__Input:-ms-input-placeholder {
color: var(--color-text-primary);
}
.NewsletterPopup .Form__Input::placeholder {
color: var(--color-text-primary);
}
.NewsletterPopup .Form__Input {
border-color: var(--color-text-primary);
}
.NewsletterPopup .Form__Input:focus {
border-color: var(--color-text-primary);
}
.NewsletterPopup[aria-hidden=false] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.NewsletterPopup__Close {
position: absolute;
right: 15px;
top: 15px;
}
.NewsletterPopup__Close svg {
display: block;
width: 15px;
height: 15px;
}
.NewsletterPopup__Content a {
text-decoration: underline;
text-underline-position: under;
}
.NewsletterPopup__Form {
margin-top: 32px;
}
@media screen and (min-width: 768px) {
.NewsletterPopup {
max-width: 385px;
right: 25px;
bottom: 25px;
left: auto;
padding-top: 35px;
}
.NewsletterPopup__Close svg {
width: 18px;
height: 18px;
}
}
.Password {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
width: 100%;
min-height: 100vh;
background-size: cover;
background-position: center;
}
/**
* ----------------------------------------------------------------------------
* Header
* ----------------------------------------------------------------------------
*/
.Password__Header {
position: relative;
text-align: center;
}
.Password__Logo {
display: block;
line-height: 1;
}
.Password__LogoImage {
vertical-align: middle;
}
.Password__LockAction {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.Password__LockAction svg {
margin-left: 10px;
width: 20px;
height: 20px;
vertical-align: bottom;
}
/**
* ----------------------------------------------------------------------------
* Content
* ----------------------------------------------------------------------------
*/
.Password__Content {
width: 470px;
max-width: 100%;
margin: 35px auto;
}
.Password__Newsletter {
margin-bottom: 10px;
}
.Password__Card {
padding: 24px;
background: var(--color-background-surface-tertiary);
text-align: center;
}
.Password__Message {
font-size: 0.9375em;
}
.Password__Form {
margin-top: 28px;
}
.Password__Social {
padding: 22px 25px 22px 28px;
background: var(--color-background-surface-primary);
text-align: center;
}
.Password__ShareButtons {
margin-top: 15px;
}
@media screen and (min-width: 768px) {
.Password__Content {
margin: 80px auto;
}
.Password__Card {
padding: 45px 60px 50px 60px;
}
.Password__Social {
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
}
.Password__ShareButtons {
margin-top: 0;
margin-left: 15px;
flex-shrink: 0;
}
}
/**
* ----------------------------------------------------------------------------
* Footer
* ----------------------------------------------------------------------------
*/
.Password__Footer {
text-align: center;
}
.Password__AdminLink {
display: block;
margin-top: 15px;
}
.Password__Footer svg {
width: 70px;
height: 20px;
vertical-align: bottom;
margin-left: 2px;
}
@media screen and (min-width: 768px) {
.Password__Footer {
display: flex;
justify-content: space-between;
text-align: left;
}
.Password__AdminLink {
margin-top: 0;
}
}
/**
* ----------------------------------------------------------------------------
* Modal
* ----------------------------------------------------------------------------
*/
.Password__Modal {
display: flex;
justify-content: center;
}
/**
* ----------------------------------------------------------------------------
* Product (general)
* ----------------------------------------------------------------------------
*/
.MainProduct {
padding-top: 0;
}
@media (min-width: 768px) {
.MainProduct {
padding-top: 2.5rem !important;
}
}
.Product--fill {
max-width: none;
}
@media screen and (min-width: 1200px) {
.Product--small .Product__Slideshow {
max-width: 400px;
}
.Product--medium .Product__Slideshow {
max-width: 550px;
}
}
.PhoneConsultant__ListItem {
max-width: 65px;
width: 100%;
}
.PhoneConsultant__ListItem--icon {
border: 1px solid var(--color-text-secondary);
margin-right: 30px;
border-radius: 100%;
}
.PhoneConsultant__ListItem:not(:first-of-type) {
margin-left: -12px;
}
.PhoneConsultant__ImageWrapper {
border-radius: 100%;
overflow: hidden;
border: 2px solid var(--color-border-inverse);
box-shadow: 3px 0 5px 0 rgba(0,0,0,.08);
}
.PhoneConsultant__Image {
border-radius: 100%;
}
.PhoneConsultant__ListItem--icon svg {
width: 40%;
height: 40%;
}
/**
* ----------------------------------------------------------------------------
* Product info
* ----------------------------------------------------------------------------
*/
.ProductForm {
margin-top: 2.75rem;
}
.ProductForm__Variants--containsMengeOption {
display: grid;
gap: 0.75rem;
grid-template-columns: auto 120px;
}
@media (min-width: 420px) {
.ProductForm__Variants--containsMengeOption {
grid-template-columns: auto 145px;
}
}
/* Product form */
.ProductForm__Option {
position: relative;
/* Needed for the text-overflow: ellipsis; to work on the child elements (https://css-tricks.com/flexbox-truncated-text/) */
min-width: 0;
}
.ProductForm__Option--labelled {
margin-bottom: 20px;
}
.no-js .ProductForm__Option:not(.no-js) {
display: none;
}
.ProductForm__Item {
display: flex;
gap: 0.75em;
align-items: center;
position: relative;
width: 100%;
text-align: left;
padding: 8px 40px 8px 12px;
background-color: var(--color-background-surface-primary);
border-radius: 4px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: var(--elevation);
}
.ProductForm__Item--Geschmack {
padding-left: 8px; /* For variant selector with image, decrease padding as it appear different compared to text */
}
.ProductForm__Item.ProductForm__Item--small {
padding: 4px 28px 4px 0;
min-height: 40px;
}
.ProductForm__Item > * {
pointer-events: none;
}
.ProductForm__Item .Value__ImageWrapper {
margin: 0;
height: 40px;
width: 40px;
flex-shrink: 0;
background-color: var(--color-background-surface-primary);
}
.ProductForm__Item.ProductForm__Item--small .Value__ImageWrapper {
width: 30px;
height: 30px;
margin-right: 8px;
}
.ProductForm__Item--tasteAmount.ProductForm__Item--Menge .Value__ImageWrapper, .ProductForm__Item--tasteAmount.ProductForm__Item--Größe .Value__ImageWrapper {
border: none;
border-radius: 0;
background: unset;
}
.Popover__Value.Popover__Value--Menge {
text-align: left;
margin-bottom: 10px;
background-color: var(--color-background-surface-secondary);
border: 1px solid var(--color-border-primary);
margin-left: 20px;
margin-right: 20px !important;
width: calc(100% - 40px);
padding: 8px 15px;
border-radius: 4px;
}
.Popover__Value.Popover__Value--Menge.is-selected {
border: 1px solid var(--color-text-primary);
}
.Popover__Value--Menge svg {
width: 1.4em;
height: 2.3em;
margin-right: 1rem;
}
.Popover__Value--Menge span {
pointer-events: none;
}
.ProductForm__Image {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}
.ProductForm__Item .ProductForm__OptionWrapper + svg {
position: absolute;
right: 0.75rem;
width: 1.25em;
height: 1.25em;
color: var(--color-text-primary);
}
.ProductForm__Label {
margin-top: 2.75rem;
display: block;
margin-bottom: 1rem;
}
.ProductForm__SelectedValue {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--color-text-primary);
font-weight: 500;
}
.ProductForm__OptionWrapper {
min-width: 0; /* Needed for text-overflow: ellipsis; to work on child elements (https://css-tricks.com/flexbox-truncated-text/) */
line-height: 1.5;
}
.ProductForm__OptionName {
font-size: 0.75rem;
line-height: 1rem;
}
.ProductForm__OptionCount {
float: right;
margin-right: 14px;
}
.ProductForm__Inventory {
margin-top: 8px;
font-style: italic;
color: var(--color-text-secondary);
}
.ProductForm__Error {
margin-top: 10px;
text-align: center;
}
.ProductForm__ClubHint svg {
width: 22px;
height: auto;
}
#shopify-section-main-product .ClubExplanationPage .Section--spacingNormal {
padding: 0;
}
/* Padding of 1px to fix a visual bug where a black line appears next to the video for larger screen sizes. */
.Product__VideoAndIcons .VideoWrapper {
padding-right: 1px;
}
/* Variant selection */
.GeneralVariant {
display: inline-block;
text-align: center;
min-width: 36px;
padding: 6px 10px;
border: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
cursor: pointer;
}
input[type="radio"].GeneralVariant__Radio {
display: none;
}
.GeneralVariant.is-active::after,
.GeneralVariant__Radio:checked + .GeneralVariant {
border-color: var(--color-text-primary);
color: var(--color-text-primary);
}
/* Taste variant selection */
.TasteVariantItem {
font-size: 0.9375em;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 0.375em;
padding: 0.25em 0.625em 0.25em 0.25em;
background-color: var(--color-background-surface-tertiary);
border-radius: 2em;
}
.TasteVariantItem__ImageWrapper {
width: 1.5em;
height: 1.5em;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--color-background-surface-primary);
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05);
}
.ProductForm__Variants + .ProductForm__AddToCartWrapper {
margin-top: 1.25rem;
}
.ProductForm__AddToCartWrapper + .ProductForm__Variants, .ProductPurchaseBenefits + .ProductForm__Variants {
margin-top: 2.75rem;
}
/**
* ----------------------------------------------------------------------------
* Product meta and info
* ----------------------------------------------------------------------------
*/
.ProductMeta__ImageWrapper {
display: block;
margin-bottom: 32px;
}
.ProductMeta__Vendor {
margin-bottom: 20px;
}
.ProductMeta__HeadingWrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.25em 0.75em;
flex-wrap: wrap-reverse;
}
.ReviewStars {
line-height: inherit;
display: flex;
align-items: center;
gap: 0.3125em;
}
.ReviewStars--small {
font-size: 0.75em;
}
.ReviewStars__Stars {
clip-path: url(#review-stars);
-webkit-clip-path: url(#review-stars);
background-color: #C9CED3;
width: 5.575em;
height: calc(5.575em * 0.1571); /* 0.1571 is the aspect ratio of the original svg (70px width, 11px height) */
}
.ReviewStars__Stars--large {
width: calc(1rem / 0.1571); /* 0.1571 is the aspect ratio of the original svg (70px width, 11px height) */
height: 1rem;
}
.ReviewStars__Stars::before {
content: "";
height: 100%;
display: block;
width: var(--rating-percentage, 0);
/* background-color: #ffe33e; */
background-color: #FFC700;
}
.ReviewStars--small .ReviewStars__Stars::before {
background-color: var(--color-text-secondary);
}
.ReviewStars__Number {
line-height: normal;
}
.ProductMeta__PriceWrapper {
margin-top: 1.5rem;
display: flex;
}
/* Slightly offset the unit price when the unit price is much smaller than the normal price next to it, so we try to visually align it better to the baseline
.ProductMeta__PriceList .UnitPriceMeasurement {
position: relative;
bottom: 2px;
}
*/
.ProductMeta .SaleLabel {
border-radius: 4px;
padding: 4px 8px;
box-shadow: var(--elevation);
white-space: nowrap;
line-height: normal;
font-size: 12px;
position: relative;
bottom: 3px;
background-color: var(--color-background-surface-primary);
}
.PortionPriceLabel {
border-radius: 4px;
padding: 4px 8px;
box-shadow: var(--elevation);
white-space: nowrap;
line-height: normal;
font-size: 12px;
position: relative;
bottom: 3px;
background-color: var(--color-background-surface-tertiary);
}
.PortionPriceLabel--extended::before {
content: '';
position: absolute;
top: -12px;
height: 12px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid var(--color-background-surface-info);
}
.ProductMeta .SaleLabel__Value {
color: var(--color-text-emphasis);
font-weight: 700;
margin-left: 2px;
}
.ProductMeta .SubscriptionPerDeliveryPrice {
font-size: 12px;
color: var(--color-text-secondary);
}
.ProductMeta .UnitPriceMeasurement {
font-size: 10px;
}
.ProductMeta .SubscriptionLabel {
align-self: center;
}
.SubscriptionLabel {
font-size: 0.8em;
background-color: var(--color-background-surface-tertiary);
padding: 0.175em 0.65em;
border: 1px solid var(--color-border-primary);
border-radius: 2px;
font-weight: 600;
display: inline-block;
}
.ProductMeta__TaxNotice.Rte a {
color: var(--color-text-secondary);
}
.Separation {
margin: 1.5rem 0 1.5rem calc(var(--container-horizontal-spacing) * -1);
height: 8px;
background-color: var(--color-background-secondary);
box-shadow: 0 0 4px 0 rgba(0,0,0,.09) inset;
}
.Separation {
width: calc(100% + (var(--container-horizontal-spacing) * 2));
}
.Separation--withinContainer {
width: 100%;
margin-left: 0;
}
/* .Separation--outsideContainer {
margin-left: 0 !important;
margin-right: 0 !important;
} */
.Separation--line {
height: 1px;
background-color: var(--color-border-primary);
box-shadow: none;
}
@media (min-width: 768px) {
.Separation {
height: 1px;
background-color: var(--color-border-primary);
box-shadow: none;
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
.ProductMeta__ShareButtons {
display: inline-flex;
align-items: center;
margin: 18px 0 10px 0;
}
.ProductMeta__ShareTitle {
margin-right: 6px;
}
.ProductMeta__ShareList {
font-size: 0;
}
.ProductMeta__ShareItem {
display: inline-block;
margin: 0 7px;
}
.ProductMeta__ShareItem svg {
display: block;
width: 12px;
height: 12px;
opacity: 0.6;
transition: opacity 0.2s ease-in-out;
}
.ProductMeta__ShareItem:hover svg {
opacity: 1;
}
.Product__QuickNav {
position: relative;
margin-top: 40px;
border-top: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
}
.Product__QuickNav a {
display: block;
padding: 11px 16px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateX(0deg);
}
.Product__QuickNav a:last-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: rotateX(180deg);
}
.Product__QuickNav svg {
position: absolute;
right: 18px;
top: calc(50% - 5px);
height: 10px;
width: 8px;
}
.Product__QuickNavWrapper {
transition: 0.6s;
transform-style: preserve-3d;
}
.Product__QuickNav.is-flipped .Product__QuickNavWrapper {
transform: rotateX(180deg);
}
/**
* ----------------------------------------------------------------------------
* Product Icons
* ----------------------------------------------------------------------------
*/
.Product__IconWrapper {
max-width: 65px;
margin: 0 auto;
}
.Product__IconWrapper svg {
width: 100%;
height: 100%;
}
.Product__IconTitle {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
line-height: normal;
margin-top: 8px;
}
.Product__IconListWrapper {
height: 100%;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.08);
padding: 25px 15px;
/* border: 1px solid var(--color-border-primary); */
}
.Product__IconList {
width: 100%;
}
@media (min-width: 576px) {
.Product__IconWrapper {
max-width: 75px;
}
}
@media (max-width: 767px) {
.Product__IconTitle {
font-size: 15px;
}
.Product__IconListWrapper {
box-shadow: none;
padding: 0;
padding-bottom: 25px;
}
}
/**
* ----------------------------------------------------------------------------
* Advantage package info for Daily Protein
* ----------------------------------------------------------------------------
*/
.AdvantagePackageInfo__Header {
padding: 13px 20px;
border-bottom: 1px solid var(--color-border-primary);
}
.AdvantagePackageInfo__Graphic {
font-size: 13px;
}
.AdvantagePackageInfo__InCart, .AdvantagePackageInfo__FreeInCart {
padding: 5px 8px;
border-radius: 3px;
line-height: normal;
}
.AdvantagePackageInfo__InCart {
background: unset;
color: var(--color-text-secondary);
border: 1px solid var(--color-text-secondary);
}
.AdvantagePackageInfo__FreeInCart {
background-color: var(--color-brand);
color: var(--color-text-on-fill-button-primary);
font-weight: 700;
}
/**
* ----------------------------------------------------------------------------
* Sample package info
* ----------------------------------------------------------------------------
*/
.SamplePackageReference {
z-index: 1;
position: relative;
}
.SamplePackageReference .CartItem__Price {
margin-bottom: 0px;
}
.SamplePackageReference__ImageWrapper {
width: 100px;
}
@media (max-width: 450px) {
.SamplePackageReference__ImageWrapper {
width: 75px;
}
}
/**
* ----------------------------------------------------------------------------
* Metafields
* ----------------------------------------------------------------------------
*/
.Metafield__ImageWrapper img {
margin: 0;
}
/**
* Description
*/
.Metafield.MetafieldDescription {
/* padding-top: 50px;
padding-bottom: 50px;
margin: 50px auto;
margin-bottom: 0;
overflow: hidden; */
}
.Description__Row:last-of-type {
margin-bottom: 0 !important;
}
/* .MetafieldDescription .Description__Row:last-of-type .Separation {
display: none;
} */
.Description__ImageWrapper {
min-width: 350px;
width: 350px;
position: relative;
max-height: 325px;
}
.Description__Text {
width: 100%;
}
.Description__Text .Rte {
max-width: 700px;
}
.Orientation--left .Description__Text .Rte {
margin-right: auto;
}
.Orientation--right .Description__ImageWrapper {
margin-left: auto;
}
.Description__ImageWrapper::after {
position: absolute;
content: "";
height: 79%;
width: 4px;
top: 40px;
}
.Orientation--left .Description__ImageWrapper::after {
left: -4px;
box-shadow: 4px 0 19px 0 rgba(0,0,0,0.7);
}
.Orientation--right .Description__ImageWrapper::after {
right: -4px;
box-shadow: -4px 0 19px 0 rgba(0,0,0,0.7);
}
@media (min-width: 992px) {
.Orientation--right .Description__Text .Rte {
margin-left: auto;
}
.Description__Row.Orientation--left {
padding-right: 40px;
}
.Description__Row.Orientation--right {
padding-left: 40px;
}
.Orientation--left .Description__Text {
margin-left: 80px;
}
.Orientation--right .Description__Text {
margin-right: 80px;
}
}
@media (min-width: 992px) {
.MetafieldDescription .container > div {
background-color: var(--color-background-surface-secondary);
/* padding-left: 2px;
padding-right: 2px;
padding-bottom: 0; */
box-shadow: 0 0 4px 0 rgba(0,0,0,0.12);
/* margin-left: -20px;
margin-right: -20px; */
padding-top: 60px;
overflow: hidden;
}
/* .Orientation--left .Description__ImageWrapper::before {
border-left: 2px solid var(--color-text-secondary);
left: -2px;
}
.Orientation--right .Description__ImageWrapper::before {
border-right: 2px solid var(--color-text-secondary);
right: -2px;
} */
.Description__Text {
padding: 0 20px;
}
.MetafieldDescription {
padding: 40px 0 !important;
}
.MetafieldDescription::before {
content: unset;
}
.MetafieldDescription + section::before {
content: unset !important;
}
}
@media (max-width: 991px) {
.Orientation--right .Description__ImageWrapper {
margin-right: calc(var(--container-horizontal-spacing) * -1);
}
.Orientation--left .Description__ImageWrapper {
margin-left: calc(var(--container-horizontal-spacing) * -1);
}
.MetafieldDescription .container {
overflow: hidden;
padding-top: 24px;
}
.Description__Row:not(:last-of-type)::after {
content: "";
width: calc(100% + 40px);
height: 1px;
background-color: var(--color-border-primary);
position: absolute;
bottom: 20px;
left: -20px;
}
.Description__Row:not(:last-of-type) {
position: relative;
padding-bottom: 70px;
}
}
.Description__ImageWrapper::before {
content: "";
height: calc(100% + 40px);
position: absolute;
top: -20px;
width: calc(100% + 30px);
background-size: contain;
background-repeat: no-repeat;
}
.Orientation--right .Description__ImageWrapper::before {
right: 0;
}
.Description__Image {
-o-object-fit: cover;
object-fit: cover;
}
.Description__Image--leafShape {
width: 350px;
height: 325px;
}
/**
* Component list
*/
.ComponentList__Item:first-of-type {
border-top: none;
}
.ComponentList__Item:last-of-type {
border-bottom: none;
}
/**
* Content columns
*/
.ContentColumns {
gap: 1rem;
justify-content: space-between;
}
.ContentColumns__Step {
position: relative;
flex: 33%;
min-width: min(240px, 75%);
}
@media (min-width: 768px) {
.ContentColumns__Step {
min-width: auto;
}
}
.ContentColumns__ImageWrapper {
width: 100%;
background-color: var(--color-background-surface-tertiary);
border-radius: 4px;
margin: 0 auto 1.5rem;
}
.ContentColumns__ImageWrapper--icon {
margin-bottom: 1.25rem;
}
.ContentColumns__ImageWrapper--icon .AspectRatio {
height: 5rem;
width: 5rem;
margin-left: 0;
}
/**
* Benefit list
*/
.MetafieldBenefitList .Checkmark__List li {
padding-bottom: 13px;
}
.BenefitList {
background-color: var(--color-background-surface-tertiary);
padding: 0.5rem 1rem;
}
.BenefitList__Header {
margin-bottom: 1.5rem;
}
.BenefitList__Benefit {
display: flex;
gap: 1rem;
align-items: center;
text-align: start;
width: calc(100% - var(--iconSize) - 0.5em);
padding-top: 0.5rem;
padding-right: 2rem;
padding-bottom: 0.5rem;
}
button.BenefitList__Benefit {
cursor: pointer;
}
.BenefitList .Collapsible__Content {
padding: 0.5rem 0 1rem;
margin-left: 2rem;
}
.BenefitList .Collapsible__Button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
--icon-size: 1.5rem;
}
.BenefitList .Collapsible__Button svg {
flex-shrink: 0;
}
/* Disable icons for second level lists */
.BenefitList .Collapsible__Content ul:not([class*="icon-list-"]) li::before {
content: none;
}
.BenefitList .Collapsible__Content ul:not([class*="icon-list-"]) {
list-style: disc;
margin-left: 0;
}
/**
* FAQ
*/
.FAQList .Collapsible__Content {
padding-bottom: 25px;
}
/* The Rte content is not wrapped in p element, so we need to add margin manually */
.FAQList .Collapsible__Content .Rte ul,
.FAQList .Collapsible__Content .Rte ol {
margin-top: 1.6em;
}
/**
* Reviews section
*/
#reviews .ReviewStars {
margin-bottom: 6px;
font-size: 1.25em;
gap: 0.5em;
}
#reviews .ReviewStars__Number {
font-size: 1.375em;
font-weight: 600;
color: var(--color-text-primary);
}
@media (min-width: 768px) {
#reviews .ReviewStars {
justify-content: center;
}
}
/**
* Contact page
*/
.Contact__Options ul {
list-style: none;
margin: 0;
}
.Contact__Options li:not(:last-of-type) {
border-bottom: 1px solid var(--color-border-primary);
}
.Contact__Options li {
padding: 20px 0;
}
/**
* ----------------------------------------------------------------------------
* Featured image
* ----------------------------------------------------------------------------
*/
.Product__FeatureImageWrapper {
overflow: hidden;
background-size: cover;
}
.Product__FeatureImage {
height: 415px;
background-size: cover;
background-position: center;
}
@media screen and (min-width: 768px) {
.Product__FeatureImage {
height: 500px;
}
}
@media screen and (min-width: 1200px) {
.Product__FeatureImage {
height: 600px;
}
.Product__FeatureImage--small {
height: 500px;
}
.Product__FeatureImage--large {
height: 700px;
}
}
/**
* ----------------------------------------------------------------------------
* Variant slideshow (for color carousel)
* ----------------------------------------------------------------------------
*/
@-webkit-keyframes variantSelectorInfoOpeningAnimation {
0% {
transform: translateY(10px);
opacity: 0;
}
50% {
transform: translateY(10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes variantSelectorInfoOpeningAnimation {
0% {
transform: translateY(10px);
opacity: 0;
}
50% {
transform: translateY(10px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes variantSelectorInfoClosingAnimation {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-10px);
opacity: 0;
}
}
@keyframes variantSelectorInfoClosingAnimation {
0% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(-10px);
opacity: 0;
}
}
.VariantSelector {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: var(--color-background-surface-primary);
padding: 24px 0;
z-index: 10;
box-shadow: 0 -2px 10px rgba(54, 54, 54, 0.2);
transform: translateY(100%);
visibility: hidden;
transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), visibility 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.VariantSelector[aria-hidden=false] {
transform: translateY(0);
visibility: visible;
}
.VariantSelector__Item {
padding: 0 10px;
width: 60%;
}
.VariantSelector__Info {
position: relative;
margin: 48px 24px 0 24px;
}
.VariantSelector__ImageWrapper[aria-hidden="true"] {
display: none;
}
.VariantSelector__ChoiceList {
margin-bottom: 34px;
}
.VariantSelector__Choice {
display: table;
table-layout: fixed;
width: 100%;
-webkit-animation: 0.15s variantSelectorInfoClosingAnimation forwards ease-in-out;
animation: 0.15s variantSelectorInfoClosingAnimation forwards ease-in-out;
}
.VariantSelector__Choice.is-selected {
-webkit-animation: 0.3s variantSelectorInfoOpeningAnimation forwards ease-in-out;
animation: 0.3s variantSelectorInfoOpeningAnimation forwards ease-in-out;
}
.VariantSelector__Choice:not(:first-child) {
position: absolute;
top: 0;
left: 0;
}
.VariantSelector__ChoicePrice {
font-size: 0.8125em;
}
@media screen and (min-width: 768px) {
/* Starting from tablet, the look and feel of this selector is completely different and look like a modal */
.VariantSelector {
top: 50%;
bottom: auto;
left: 50%;
width: 80%;
padding-bottom: 34px;
max-height: 100%;
max-width: 800px;
opacity: 0;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
overflow: auto;
}
.VariantSelector[aria-hidden=false] {
transform: translate(-50%, -50%);
opacity: 1;
}
.VariantSelector__Item {
padding: 0 25px;
width: 46%;
}
.VariantSelector__Info {
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.VariantSelector__ChoicePrice {
font-size: 0.9375em;
}
}
@media (min-width: 800px) and (max-height: 950px) {
.VariantSelector__ImageWrapper {
max-width: 290px !important;
}
}
/**
* ----------------------------------------------------------------------------
* Featured product (on home page)
* ----------------------------------------------------------------------------
*/
.FeaturedProduct__Gallery {
display: block;
margin-bottom: 20px;
}
.FeaturedProduct__ViewWrapper {
margin-top: 34px;
text-align: center;
}
@media screen and (min-width: 768px) {
.FeaturedProduct {
display: flex;
align-items: flex-start;
justify-content: center;
max-width: 880px;
margin: 0 auto;
}
.FeaturedProduct--center {
align-items: center;
}
.FeaturedProduct__Gallery,
.FeaturedProduct__Info {
flex: 1 1 50%;
}
.FeaturedProduct__Gallery {
margin: 0;
}
.FeaturedProduct__Info {
margin-left: 50px;
}
.FeaturedProduct__Info .ProductMeta,
.FeaturedProduct__ViewWrapper {
text-align: left;
}
}
@media screen and (min-width: 992px) {
.FeaturedProduct__Info {
margin-left: 80px;
}
}
/**
* ----------------------------------------------------------------------------
* Shopify payment button
* ----------------------------------------------------------------------------
*/
.shopify-payment-button {
margin-top: 20px;
text-align: center;
}
.shopify-payment-button__more-options {
position: relative;
display: inline-block;
transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
width: auto;
line-height: normal;
}
.shopify-payment-button__more-options[aria-hidden=true] {
display: none;
}
.shopify-payment-button__more-options::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
background: currentColor;
transform: scale(1, 1);
transform-origin: left center;
transition: transform 0.2s ease-in-out;
}
@media (-moz-touch-enabled: 0), (hover: hover) {
.shopify-payment-button__more-options:hover::before {
transform: scale(0, 1);
}
}
.shopify-payment-button__more-options:hover:not([disabled]) {
text-decoration: none;
}
/**
* ----------------------------------------------------------------------------
* Search
* ----------------------------------------------------------------------------
*/
.Search--modal {
--search-margin: 0.75rem;
display: block;
position: fixed;
top: 0;
left: var(--search-margin);
right: var(--search-margin);
background: var(--color-background-surface-primary);
margin: 0 auto;
max-width: 1200px;
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: top 0.15s ease-in-out, 0.15s ease-in-out, visibility 0.15s ease-in-out;
z-index: 30;
overflow: hidden;
transform: translateZ(0);
}
.Search--modal[aria-hidden="false"] {
visibility: visible;
opacity: 1;
pointer-events: auto;
top: calc(var(--header-height) + var(--search-margin));
}
.Search__Inner {
max-height: calc(100vh - 2 * var(--header-height) - 2 * var(--search-margin));
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.Search__SearchBar {
display: flex;
align-items: center;
gap: 2rem;
padding: 20px var(--container-horizontal-spacing);
background-color: var(--color-background-surface-tertiary);
transform: translateZ(0);
}
.Search__Form {
display: flex;
align-items: center;
flex: 1 0 auto;
}
.Search__InputWrapper {
position: relative;
width: 100%;
line-height: normal;
}
.Search__Input--hidden {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: auto !important;
}
.Search__Delete {
--input-width: 60px;
--gap: 0.825em;
position: absolute;
width: 1.25em;
height: 1.25em;
top: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.25em;
transform: translateY(-50%);
left: min(calc(var(--input-width) + var(--gap)), calc(100% + 2px));
color: var(--color-text-inverse);
background-color: var(--color-border-input);
border-radius: 50%;
--clickable-surface-hovered: transparent;
--clickable-surface-pressed: transparent;
}
.Search__Delete:hover {
background: var(--color-border-input-hovered);
}
.Search__Delete:active {
background-color: var(--color-border-input-active);
}
@media (min-width: 768px) {
.Search__Delete {
--gap: 1.25em;
}
}
.Search__Delete svg {
stroke-width: 3px;
width: .625em;
height: .625em;
}
.Search__InputIconWrapper {
position: relative;
/* For pixel perfect */
margin-right: 12px;
color: var(--color-text-secondary);
font-size: 1.125em;
line-height: 0;
}
.Search__Input {
background: none;
width: 100%;
border: none;
font-size: 1.0625em;
vertical-align: middle;
padding: 0;
border-radius: 2px;
}
.Search__Input::-moz-placeholder {
color: var(--color-text-secondary);
}
.Search__Input:-ms-input-placeholder {
color: var(--color-text-secondary);
}
.Search__Input::placeholder {
color: var(--color-text-secondary);
}
.Search__Input::-ms-clear {
display: none;
}
.Search__Close {
color: var(--color-text-secondary);
position: absolute !important;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.Search__Results {
display: none;
padding: 0 var(--container-horizontal-spacing) 30px;
}
.Search__Results[aria-hidden=false] {
display: block;
}
@media screen and (min-width: 768px) {
.Search__Inner {
--container-horizontal-spacing: 30px;
}
.Search__Input {
font-size: 1.25em;
}
.Search__InputIconWrapper {
margin-right: 20px;
}
.Search__Close {
font-size: 1.125em;
}
.Search__Close svg {
stroke-width: 1.25px;
}
}
.store-availability-container {
margin-top: 30px;
}
.store-availability-information {
display: flex;
align-items: baseline;
}
.store-availability-information-container {
margin-left: 6px;
}
.store-availability-information__title {
margin-bottom: 2px;
}
.store-availability-information__stock {
margin-bottom: 5px;
}
.store-availability-information__stock,
.store-availability-information__link,
.store-availability-list__item-info {
font-size: 0.9375em;
}
.store-availability-list__item:first-child {
margin-top: 25px;
}
.store-availability-list__item {
margin-top: 30px;
}
.store-availability-list__location,
.store-availability-list__stock {
margin-bottom: 5px;
}
.store-availability-list__stock svg {
margin-right: 3px;
}
.store-availability-list__contact {
line-height: 1.45;
}
.store-availability-list__contact p {
margin-bottom: 0; /* Remove the margin of the formatted address by Shopify */
}
/* Modal */
.store-availabilities-modal__product-information {
text-align: left;
}
/**
* For now testimonials are only used on home page but may be expanded
*/
@-webkit-keyframes testimonialOpening {
from {
visibility: hidden;
opacity: 0;
transform: translateY(15px);
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
@keyframes testimonialOpening {
from {
visibility: hidden;
opacity: 0;
transform: translateY(15px);
}
to {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes testimonialClosing {
from {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
to {
visibility: visible;
opacity: 0;
transform: translateY(-15px);
}
}
@keyframes testimonialClosing {
from {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
to {
visibility: visible;
opacity: 0;
transform: translateY(-15px);
}
}
.Testimonial {
text-align: center;
font-size: 1.25em;
}
.Testimonial__Logo {
margin-top: 54px;
}
.js .TestimonialList {
opacity: 0;
transition: opacity 0s linear 0.5s;
}
.js .TestimonialList .Testimonial {
opacity: 0;
visibility: hidden;
-webkit-animation: testimonialClosing 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
animation: testimonialClosing 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
.js .TestimonialList .Testimonial.is-selected {
opacity: 0;
visibility: hidden;
-webkit-animation: testimonialOpening 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
animation: testimonialOpening 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}
@media screen and (max-width: 767px) {
.Testimonial__Logo {
max-width: 110px;
}
}
@media screen and (min-width: 768px) {
.Testimonial {
font-size: 1.375em;
}
.Testimonial__Content {
max-width: 550px;
margin: 0 auto;
}
.Testimonial__Logo,
.TestimonialNav__Item {
max-width: 150px;
}
}
@media screen and (min-width: 992px) {
.TestimonialNav {
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
}
.TestimonialNav__Item {
margin: 0 25px;
cursor: pointer;
opacity: 0.25;
transition: opacity 0.2s ease-in-out;
will-change: opacity;
}
.TestimonialNav__Item.is-selected {
opacity: 1;
}
}
@media screen and (min-width: 1200px) {
.TestimonialNav__Item {
margin: 0 45px;
}
}
/**
* ----------------------------------------------------------------------------
* For now timeline are only used on home page but may be expanded
* ----------------------------------------------------------------------------
*/
.Timeline {
box-shadow: 0 -2px 10px rgba(54, 54, 54, 0.2);
}
.Timeline__ListItem {
position: relative;
height: 540px;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
}
.Timeline__Item {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: flex-start;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(54, 54, 54, 0.2);
pointer-events: none;
transition: opacity 0.5s ease-in-out;
}
.Timeline__ImageWrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.Timeline__Image {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transform: translateX(-50px) scale(1.1);
transform-origin: left;
transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.Timeline__Inner {
position: relative;
padding: 80px 14px 40px 14px;
max-height: 100%;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.Timeline__Header > * {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.Timeline__Item.is-selected {
opacity: 1;
pointer-events: auto;
}
.Timeline__Item.is-selected .Timeline__Image {
transform: translateX(0) scale(1.1);
}
.Timeline__Item.is-selected .Timeline__Header > * {
opacity: 1;
transition-delay: 0.5s;
transform: translateY(0);
}
@media screen and (max-width: 767px) {
.shopify-section--timeline {
border-top: none !important;
}
.shopify-section--timeline .Section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.shopify-section--timeline .container {
padding-left: 0;
padding-right: 0;
}
.Timeline__Header .Heading,
.Timeline__Header .Rte a {
color: inherit;
}
}
@media screen and (min-width: 768px) {
.Timeline__ListItem {
max-width: 1230px;
margin: 0 auto;
height: 400px;
text-shadow: none;
}
.Timeline__Item {
align-items: flex-end;
background-color: var(--color-background-surface-tertiary);
}
.Timeline__ImageWrapper,
.Timeline__Inner {
flex: none;
width: 50%;
}
.Timeline__ImageWrapper {
position: relative;
height: 100%;
}
.Timeline__ImageWrapper::after {
display: none;
/* Remove any contrast that may have been added to image */
}
.Timeline__Image {
transform: translateX(-60px) scale(1.1);
}
.Timeline__Inner {
padding: 34px 40px;
color: var(--color-text-secondary);
}
.Timeline__Header {
text-align: left;
}
}
@media screen and (min-width: 992px) {
.Timeline__ListItem {
height: 515px;
}
.Timeline__Inner {
padding: 54px 60px;
}
}
/**
* ----------------------------------------------------------------------------
* Timeline nav
* ----------------------------------------------------------------------------
*/
.Timeline__Nav {
position: relative;
font-size: 0.8125em;
font-family: var(--font-heading-family);
font-weight: var(--font-heading-weight);
font-style: var(--font-heading-style);
letter-spacing: 0.2em;
color: var(--color-text-secondary);
background: var(--color-background-surface-tertiary);
}
.Timeline__NavWrapper {
display: flex;
justify-content: flex-start;
align-items: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.Timeline__NavWrapper--center {
justify-content: center;
}
.Timeline__NavItem {
position: relative;
padding: 30px 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
letter-spacing: inherit;
vertical-align: text-bottom;
transition: all 0.25s ease-in-out;
}
.Timeline__NavItem::after {
position: absolute;
content: "";
bottom: 0;
left: 20px;
height: 3px;
width: calc(100% - 40px - 0.2em);
opacity: 0;
background: var(--color-text-secondary);
transform: scale(0, 1);
transform-origin: left center;
transition: opacity 0.3s, transform 0.3s;
}
.Timeline__NavItem.is-selected {
font-size: 1.25em;
color: var(--color-text-secondary);
}
.Timeline__NavItem.is-selected::after {
opacity: 1;
transform: scale(1, 1);
}
.Timeline__NavLabel {
display: block;
line-height: 0;
}
@media screen and (min-width: 768px) {
.Timeline {
box-shadow: none;
}
.Timeline__Nav {
margin-top: 40px;
background: none;
font-size: 0.875em;
}
.Timeline__NavWrapper {
display: block;
text-align: center;
}
.Timeline__NavItem {
padding-top: 20px;
padding-bottom: 20px;
}
}
@media screen and (min-width: 1200px) {
.Timeline__Nav {
margin-top: 65px;
}
}
/**
* ----------------------------------------------------------------------------
* Instagram posts
* ----------------------------------------------------------------------------
*/
.InstagramPosts__ImageWrapper {
box-shadow: 0 0 4px 0 rgba(0,0,0,.13);
}
/**
* ----------------------------------------------------------------------------
* Team member page
* ----------------------------------------------------------------------------
*/
.TeamMemberImage {
/* box-shadow: 0 0 3px 0 rgba(0,0,0,0.14); */
overflow: hidden;
background-color: var(--color-background-surface-tertiary);
position: relative;
border-radius: 3px;
}
.TeamMemberImage--circle {
border: 4px solid var(--color-border-inverse);
box-shadow: 0 1px 2px 0 rgba(0,0,0,.25);
border-radius: 50%;
}
.TeamMemberImage--circle .TeamMemberImage__Image {
border-radius: 50%;
}
.TeamMemberImage__Image {
transition: opacity 0.3s ease;
}
.TeamMemberImage__Image.TeamMemberImage__Image--secondary {
/* Increase specificity to take presedence over .Image--lazyLoaded.Image--fadeIn */
opacity: 0;
}
.TeamMemberImage--withSecondary:hover .TeamMemberImage__Image:not(.TeamMemberImage__Image--secondary) {
opacity: 0;
}
.TeamMemberImage--withSecondary:hover .TeamMemberImage__Image.TeamMemberImage__Image--secondary {
opacity: 1;
}
.TeamMemberImage__HoverIcon {
position: absolute;
width: 25px;
left: 10px;
top: 10px;
background: var(--color-background-surface-primary);
line-height: 0;
padding: 5px;
border-radius: 3px;
transition: 0.1s;
color: transparent;
}
.TeamMemberImage--withSecondary:hover .TeamMemberImage__HoverIcon {
color: var(--color-text-secondary);
}
.NameLabel {
display: flex;
align-items: center;
background-color: var(--color-background-surface-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.16);
color: var(--color-text-primary);
margin-top: -28px;
z-index: 2;
position: relative;
width: fit-content;
margin-left: auto;
margin-right: -4px;
padding: .375em .5em;
gap: 0.5em;
}
a.NameLabel:hover {
background: var(--color-background-surface-primary-hovered);
color: var(--color-text-primary);
}
a.NameLabel:active {
background: var(--color-background-surface-primary-pressed);
}
.NameLabel__Name {
line-height: 1.3;
}
.NameLabel__Arrow {
font-size: 0.625em;
}
@media (max-width: 767px) {
.NameLabel {
font-size: 0.9375em;
}
}
/* Unordered icon list (checkmarklist) */
.UnorderedIconList ul,
.Rte ul[class*="icon-list-"] {
list-style: none;
}
.UnorderedIconList ul {
margin-left: 0;
}
.UnorderedIconList ul li, .UnorderedIconList__Item,
.Rte ul[class*="icon-list-"] {
/* display: flex;
column-gap: .5em; */
--font-size: 1em;
--iconSize: 1.5em;
--baselineDistance: calc(var(--font-size) * var(--base-line-height));
--iconOffset: calc((var(--baselineDistance) - var(--iconSize)) * .5);
margin-left: calc(var(--iconSize) + 0.5em);
position: relative;
}
.UnorderedIconList ul li:not(:last-of-type), .UnorderedIconList__Item:not(:last-of-type),
.Rte ul[class*="icon-list-"]:not(:last-of-type) {
margin-bottom: 1rem;
}
.UnorderedIconList ul li::before, .UnorderedIconList__Item::before,
.Rte ul[class*="icon-list-"] li::before {
content: '';
width: var(--iconSize);
height: var(--iconSize);
flex-shrink: 0;
align-self: flex-start;
transform: translateY(var(--iconOffset));
background-position: center;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
margin-left: calc((var(--iconSize) + 0.5em) * -1);
}
.UnorderedIconList--checkmark ul li::before, .UnorderedIconList--checkmark .UnorderedIconList__Item::before,
.Rte ul.icon-list-checkmark li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23ABD855' fill-rule='evenodd' d='M12 22.75C6.063 22.75 1.25 17.937 1.25 12S6.063 1.25 12 1.25 22.75 6.063 22.75 12 17.937 22.75 12 22.75Zm3.247-14.81-4.794 5.23-1.761-1.762-1.415 1.414 3.239 3.239 6.206-6.77-1.475-1.352Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.UnorderedIconList--crossmark ul li::before, .UnorderedIconList--crossmark .UnorderedIconList__Item::before,
.Rte ul.icon-list-crossmark li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23CE3D3A' fill-rule='evenodd' d='M12 22.75C6.063 22.75 1.25 17.937 1.25 12S6.063 1.25 12 1.25 22.75 6.063 22.75 12 17.937 22.75 12 22.75Zm3.293-15.457L12 10.586 8.707 7.293 7.293 8.708 10.585 12l-3.292 3.292 1.414 1.415L12 13.414l3.293 3.293 1.414-1.414L13.414 12l3.293-3.293-1.414-1.414Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.Rte ul.icon-list-leaf li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 121 155'%3E%3Cpath fill='%23ABD855' d='M11.5719992,155.01765 L11.2947453,154.439016 L11.2947453,154.439016 L10.9690978,153.733492 L10.9690978,153.733492 L10.6922026,153.117035 L10.6922026,153.117035 L10.3722909,152.387787 L10.3722909,152.387787 L10.0134951,151.549258 C9.95068501,151.400591 9.88642694,151.247518 9.82080697,151.09011 L9.41143306,150.094239 C9.34070984,149.919788 9.26879691,149.741149 9.19578034,149.558395 L8.7451261,148.41308 C2.65527463,132.698392 -9.24775664,92.2167815 15.4819108,63.0197519 C31.7596666,43.801454 53.6399042,30.646196 72.4816393,20.8543789 L74.6417096,19.7393268 C74.99931,19.5559213 75.3556638,19.3737213 75.7107095,19.1927076 L77.8247954,18.120707 L77.8247954,18.120707 L79.9045379,17.0762556 L79.9045379,17.0762556 L81.946987,16.0584316 L81.946987,16.0584316 L90.5974116,11.7830296 L90.5974116,11.7830296 L92.3820196,10.8951839 L92.3820196,10.8951839 L94.1101606,10.0279754 L94.1101606,10.0279754 L95.7788847,9.1804826 C102.331014,5.82871412 107.386343,2.92800476 110.095324,0.212941043 L110.306277,0.816478182 L110.306277,0.816478182 L110.616053,1.7339613 L110.616053,1.7339613 L111.043318,3.04317915 L111.043318,3.04317915 L111.385386,4.12360694 L111.385386,4.12360694 L111.767602,5.3631173 C111.901162,5.80213354 112.040608,6.2666621 112.185137,6.75570151 L112.633164,8.29535088 C118.865631,30.046268 132.114052,90.3584923 98.9266271,122.705533 C70.6701735,150.263724 46.1949206,153.917759 29.3356942,154.402698 L27.8889639,154.437384 L27.8889639,154.437384 L26.481186,154.459125 C26.2498335,154.461837 26.0201274,154.464137 25.7920793,154.466087 L24.4437806,154.47409 L24.4437806,154.47409 L20.0461939,154.479682 L20.0461939,154.479682 L18.8838972,154.487372 L18.8838972,154.487372 L17.7644751,154.503325 C15.3859129,154.549028 13.3132054,154.674246 11.5719992,155.01765 Z'/%3E%3C/svg%3E");
}
.Rte ul.icon-list-arrow li::before {
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 18'%3E%3Cpath d='M1.5 1.5l8 7.5-8 7.5' stroke-width='2' stroke='currentColor' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3C/path%3E%3C/svg%3E"); */
background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.896164 6H14.8556M10.104 1L15.104 6L10.104 11' stroke='currentColor' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}
.Rte ul.icon-list-arrow {
--iconSize: 0.8125em;
}
.TeamMembers__TeamLabel {
color: var(--color-text-primary);
}
.TeamMemberGrid + .TeamMembers__TeamLabel {
margin-top: 3em;
}
/**
* ----------------------------------------------------------------------------
* Shortcodes
* ----------------------------------------------------------------------------
*/
.Shortcode--healthclaims {
position: absolute !important;
bottom: -10px;
}
/**
* ----------------------------------------------------------------------------
* References legal notice
* ----------------------------------------------------------------------------
*/
/* Health claims */
.HealthClaims {
margin-bottom: 1rem;
}
/* When .HealthClaims are missing */
.ReferenceListWrapper + .Disclaimer {
margin-top: 1rem;
}
.HealthClaims__Button, .ReferenceList__Button {
display: flex;
align-items: center;
gap: 0.5em;
justify-content: space-between;
position: relative;
width: 100%;
cursor: pointer;
border-bottom: 1px solid var(--color-border-primary);
padding: 0.75em 0.25em;
text-align: left; /* Overwrite default button styling of center alignment */
}
/* Drawer */
.Drawer__Container--general {
padding: 1rem 1rem;
display: flex;
flex-direction: column;
gap: 1em;
}
/* Description story */
.DescriptionStory__Section {
overflow-x: hidden;
}
.DescriptionStory__Row {
display: flex;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.DescriptionStory__Row:last-of-type {
margin-bottom: 0 !important;
}
.DescriptionStory__Row--leftaligned {
padding-right: 40px;
}
.DescriptionStory__Row--rightaligned {
flex-direction: row-reverse;
padding-left: 40px;
}
.DescriptionStory__ImageWrapper {
min-width: 350px;
width: 350px;
position: relative;
max-height: 325px;
flex-shrink: 0;
}
.DescriptionStory__ImageWrapper::before {
content: "";
height: calc(100% + 40px);
position: absolute;
top: -20px;
width: calc(100% + 30px);
background-size: contain;
background-repeat: no-repeat;
}
.DescriptionStory__Row--leftaligned .DescriptionStory__ImageWrapper::before {
left: 0;
}
.DescriptionStory__Row--rightaligned .DescriptionStory__ImageWrapper::before {
right: 0;
}
.DescriptionStory__ImageWrapper::after {
position: absolute;
content: "";
height: 79%;
width: 4px;
top: 40px;
}
.DescriptionStory__Row--rightaligned .DescriptionStory__ImageWrapper {
margin-left: auto;
}
.DescriptionStory__Row--leftaligned .DescriptionStory__ImageWrapper::after {
left: -4px;
box-shadow: 4px 0 19px 0 rgba(0,0,0,0.7);
}
.DescriptionStory__Row--rightaligned .DescriptionStory__ImageWrapper::after {
right: -4px;
box-shadow: -4px 0 19px 0 rgba(0,0,0,0.7);
}
.DescriptionStory__Image {
-o-object-fit: cover;
object-fit: cover;
}
.DescriptionStory__Image--leafShape {
width: 350px;
height: 325px;
}
.DescriptionStory__Text {
width: 100%;
}
.DescriptionStory__Text h2:first-child {
margin-top: 2.2em;
}
.DescriptionStory__Text .Rte {
max-width: 700px;
}
.DescriptionStory__Row--leftaligned .DescriptionStory__Text .Rte {
margin-right: auto;
}
@media (max-width: 991px) {
.DescriptionStory__Row:not(:last-of-type) {
padding-bottom: 70px;
}
.DescriptionStory__Row--rightaligned .DescriptionStory__ImageWrapper {
margin-right: calc(var(--container-horizontal-spacing) * -1);
}
.DescriptionStory__Row--leftaligned .DescriptionStory__ImageWrapper {
margin-left: calc(var(--container-horizontal-spacing) * -1);
}
}
@media (min-width: 992px) {
.DescriptionStory {
padding-top: 60px;
overflow: hidden;
}
.DescriptionStory__Row {
flex-wrap: nowrap;
padding-bottom: 3rem;
}
.DescriptionStory__Row--leftaligned {
padding-right: 40px;
}
.DescriptionStory__Row--rightaligned {
padding-left: 40px;
}
.DescriptionStory__Text {
padding: 0 20px;
}
.DescriptionStory__Row--leftaligned .DescriptionStory__Text {
margin-left: 80px;
}
.DescriptionStory__Row--rightaligned .DescriptionStory__Text {
margin-right: 80px;
}
.DescriptionStory__Row--rightaligned .DescriptionStory__Text > div {
margin-left: auto;
}
}
.DescriptionStory__Row--row1 .DescriptionStory__Image--leafShape, .DescriptionStory__Row--row5 .DescriptionStory__Image--leafShape, .DescriptionStory__Row--row9 .DescriptionStory__Image--leafShape {
/* clip-path: url(#leaf-shape-1);
-webkit-clip-path: url(#leaf-shape-1); Produces a bug on Safari */
clip-path: path('M0 5.54c39.38-8 93.58-8.04 132.4 10.87C194.6 46.72 229 96 262.23 145.71l3.56 5.34 7.1 10.66c22.53 33.77 45.49 67.24 77.13 95.18l-.7.46-1.03.59-.66.38-1.61.9-1.99 1.1c-25.28 13.98-124.73 65.14-217.61 64.66-25.23-.13-49.94-3.85-72.6-13.43-19.9-8.42-38.1-20.5-53.81-34.15V5.54z');
-webkit-clip-path: path('M0 5.54c39.38-8 93.58-8.04 132.4 10.87C194.6 46.72 229 96 262.23 145.71l3.56 5.34 7.1 10.66c22.53 33.77 45.49 67.24 77.13 95.18l-.7.46-1.03.59-.66.38-1.61.9-1.99 1.1c-25.28 13.98-124.73 65.14-217.61 64.66-25.23-.13-49.94-3.85-72.6-13.43-19.9-8.42-38.1-20.5-53.81-34.15V5.54z');
}
.DescriptionStory__Row--row2 .DescriptionStory__Image--leafShape, .DescriptionStory__Row--row6 .DescriptionStory__Image--leafShape {
/* clip-path: url(#leaf-shape-2);
-webkit-clip-path: url(#leaf-shape-2); */
clip-path: path('M350.02 27.35c-2.96-1.34-5.6-2.56-8.68-3.8C296.5 5.5 250.88-.09 208.01.02c-39.12.1-75.95 4.9-108.03 10.38l-4.36.76-4.29.75-4.23.75-4.17.75-6.28 1.14-12.74 2.32-5.3.95-2.6.46-4.23.74-2.5.43-2.45.4-3.2.53-1.58.25-1.56.25-2.31.35-2.26.33-2.23.3-1.45.2-1.44.2-1.42.17-1.4.16-1.38.16-1.36.15-1.34.13-1.33.12-1.3.12-1.28.1-1.26.09c-.2 0-.41.02-.62.04l-1.23.07-1.2.05-1.2.05C9 23.84 4.2 23.59.16 22.77l.18.7.32 1.2.48 1.79C9.86 58.3 77.7 286.84 234.61 317.14a411.58 411.58 0 0040.66 5.84l2.47.22a321.98 321.98 0 0050.01.48l2.08-.15c2.77-.22 5.49-.47 8.17-.76l2-.23 2-.23 1.96-.25 1.96-.27 2.9-.41 1.2-.2V27.35z');
-webkit-clip-path: path('M350.02 27.35c-2.96-1.34-5.6-2.56-8.68-3.8C296.5 5.5 250.88-.09 208.01.02c-39.12.1-75.95 4.9-108.03 10.38l-4.36.76-4.29.75-4.23.75-4.17.75-6.28 1.14-12.74 2.32-5.3.95-2.6.46-4.23.74-2.5.43-2.45.4-3.2.53-1.58.25-1.56.25-2.31.35-2.26.33-2.23.3-1.45.2-1.44.2-1.42.17-1.4.16-1.38.16-1.36.15-1.34.13-1.33.12-1.3.12-1.28.1-1.26.09c-.2 0-.41.02-.62.04l-1.23.07-1.2.05-1.2.05C9 23.84 4.2 23.59.16 22.77l.18.7.32 1.2.48 1.79C9.86 58.3 77.7 286.84 234.61 317.14a411.58 411.58 0 0040.66 5.84l2.47.22a321.98 321.98 0 0050.01.48l2.08-.15c2.77-.22 5.49-.47 8.17-.76l2-.23 2-.23 1.96-.25 1.96-.27 2.9-.41 1.2-.2V27.35z');
}
.DescriptionStory__Row--row3 .DescriptionStory__Image--leafShape, .description_7 .DescriptionStory__Image--leafShape {
/* clip-path: url(#leaf-shape-3);
-webkit-clip-path: url(#leaf-shape-3); */
clip-path: path('M0 32.52v288.4c2.32.37 5.75.75 10.28 1.14 17.45 1.24 34.93 2.22 52.44 2.94 94.78 0 164.66-78.76 202.25-135l10.78-16.12C296.05 143.5 319.59 108.82 350 70l-.56-.31-.73-.42-.9-.53-5.2-3.13-1.7-1-1.84-1.1-1.99-1.17-1.05-.6-2.21-1.29c-29.27-16.83-93.5-50.18-167.07-58C99.35-4.75 46.3 3.28 0 32.51z');
-webkit-clip-path: path('M0 32.52v288.4c2.32.37 5.75.75 10.28 1.14 17.45 1.24 34.93 2.22 52.44 2.94 94.78 0 164.66-78.76 202.25-135l10.78-16.12C296.05 143.5 319.59 108.82 350 70l-.56-.31-.73-.42-.9-.53-5.2-3.13-1.7-1-1.84-1.1-1.99-1.17-1.05-.6-2.21-1.29c-29.27-16.83-93.5-50.18-167.07-58C99.35-4.75 46.3 3.28 0 32.51z');
}
.DescriptionStory__Row--row4 .DescriptionStory__Image--leafShape, .description_8 .DescriptionStory__Image--leafShape {
/* clip-path: url(#leaf-shape-4);
-webkit-clip-path: url(#leaf-shape-4); */
clip-path: path('M350.01 5.54c-39.38-8-93.58-8.04-132.4 10.87-54.74 26.68-87.94 68.03-117.76 111.46l-2.03 2.96-2.02 2.97-2.01 2.97-2 2.98-4 5.96-3.56 5.34L76.26 163l-3.47 5.2-3.5 5.17-1.74 2.59-1.76 2.58-1.77 2.57-1.77 2.57-1.78 2.57-1.8 2.56-1.8 2.55-1.8 2.55C38.98 216.37 21.5 237.9 0 256.89l.7.46 1.24.7.45.27 1.61.9 1.99 1.1 1.6.89 1.78.97 1.95 1.04 1.04.56 2.2 1.16 2.36 1.23 2.51 1.3c37.59 19.26 123.36 57.92 204.17 57.5 25.24-.12 49.94-3.84 72.6-13.42 19.9-8.42 38.1-20.5 53.81-34.15V5.54z');
-webkit-clip-path: path('M350.01 5.54c-39.38-8-93.58-8.04-132.4 10.87-54.74 26.68-87.94 68.03-117.76 111.46l-2.03 2.96-2.02 2.97-2.01 2.97-2 2.98-4 5.96-3.56 5.34L76.26 163l-3.47 5.2-3.5 5.17-1.74 2.59-1.76 2.58-1.77 2.57-1.77 2.57-1.78 2.57-1.8 2.56-1.8 2.55-1.8 2.55C38.98 216.37 21.5 237.9 0 256.89l.7.46 1.24.7.45.27 1.61.9 1.99 1.1 1.6.89 1.78.97 1.95 1.04 1.04.56 2.2 1.16 2.36 1.23 2.51 1.3c37.59 19.26 123.36 57.92 204.17 57.5 25.24-.12 49.94-3.84 72.6-13.42 19.9-8.42 38.1-20.5 53.81-34.15V5.54z');
}
/**
* ----------------------------------------------------------------------------
* Slideshow section
* ----------------------------------------------------------------------------
*/
.Slideshow--fullscreen .Slider__Slide {
height: calc(var(--window-height, 100vh) - var(--header-height) - var(--announcement-bar-height, 0px) - 2px);
max-height: 100vh;
}
.Slideshow--fullscreen .Slider:not(.is-initialized) .Slider__Slide:not(:first-of-type) {
visibility: hidden;
}
.Slideshow--fullscreen .Slider:not(.is-initialized) .Slideshow__Content {
white-space: normal;
}
@media (min-width: 992px) {
.Slideshow--fullscreen .Slider__Slide {
max-height: 680px;
}
}
@media (max-width: 767px) {
.Slideshow--fullscreen .Slider__Slide {
/* Define a min height to avoid overlapping text with the image motive on small screen sizes */
--preferred-view-height-slideshow: calc(var(--window-height) - (var(--header-height) * var(--header-is-not-transparent, 0)) - var(--announcement-bar-height, 0px) - 2px);
--view-height-slideshow: clamp(530px, var(--preferred-view-height-slideshow), 100vh);
max-height: 100vh;
min-height: 530px;
}
.Slideshow--fullscreen .Slideshow__Carousel .Carousel--fixed,
.Slideshow--fullscreen .Carousel--fixed .Carousel__Cell,
.Slideshow--fullscreen .Slideshow__ImageContainer,
.Slideshow--fullscreen .Slideshow__Image {
height: var(--view-height-slideshow);
}
}
.Slideshow__Slide {
width: 100%;
height: 100%;
}
.Slideshow__Slide * {
-webkit-transform: translate3d(0, 0, 0); /* Force hardware acceleration because there is a display delay bug for slide content on iOS */
}
.Slideshow__ImageContainer {
height: 100%;
display: block; /* for a-tags */
}
.Slideshow--fullscreen .Slideshow__Image {
display: block;
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
@media (min-width: 520px) and (max-width: 767px) {
.Slideshow--fullscreen .Slideshow__Image {
object-position: 0px 35%;
}
}
.Slideshow__Content {
position: absolute;
padding: 0 1rem;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
max-width: 800px;
}
@media (min-width: 768px) {
.Slideshow__Content {
max-width: 390px;
}
}
@media (min-width: 1200px) {
.Slideshow__Content {
max-width: 590px;
}
}
@media (min-width: 1400px) {
.Slideshow__Content {
max-width: 800px;
}
}
.Slideshow__Content--whiteColor .Heading {
color: var(--color-text-inverse);
}
.Slideshow__Content--middleLeft,
.Slideshow__Content--bottomLeft {
text-align: left;
}
.Slideshow__Content--middleLeft .ButtonGroup,
.Slideshow__Content--bottomLeft .ButtonGroup {
justify-content: flex-start;
}
.Slideshow__Content--middleRight,
.Slideshow__Content--bottomRight {
text-align: right;
}
.Slideshow__Content--middleRight .ButtonGroup,
.Slideshow__Content--bottomRight .ButtonGroup {
justify-content: flex-end;
}
.Slideshow__Content--bottomLeft,
.Slideshow__Content--bottomCenter,
.Slideshow__Content--bottomRight {
top: auto;
bottom: 1rem;
left: 0;
transform: none;
}
.Slideshow__Content--bottomRight,
.Slideshow__Content--middleRight {
left: unset;
right: 0;
}
@media (min-width: 1280px) {
.Slideshow__Content {
padding: 0 4rem;
}
.Slideshow__Content--bottomLeft,
.Slideshow__Content--bottomCenter,
.Slideshow__Content--bottomRight {
bottom: 1.5rem;
}
}
@media (min-width: 1440px) {
.Slideshow__Content--bottomLeft,
.Slideshow__Content--bottomCenter,
.Slideshow__Content--bottomRight {
bottom: 8rem;
}
}
/**
* ----------------------------------------------------------------------------
* Nutrition and ingredients
* (Gobal scope for sales pages)
* ----------------------------------------------------------------------------
*/
.Nutrition__Header {
display: flex;
justify-content: space-between;
gap: 1rem;
width: 100%;
}
@media (min-width: 470px) {
.Nutrition__Header {
justify-content: start;
gap: 3rem;
}
}
.Nutrition__HeaderBlock {
line-height: 1.5;
max-width: 75%;
}
.Nutrition__HeaderBlockTitle {
font-size: 0.75rem;
}
.Nutrition__HeaderBlockText {
color: var(--color-text-primary);
font-weight: 500;
}
.Nutrition__HeaderBlockSelect {
color: var(--color-text-primary);
font-weight: 500;
white-space: normal;
border: none;
border-bottom: 1px solid var(--color-border-primary);
max-width: 100%;
}
.Nutrition__Heading {
margin-bottom: 0.5rem;
}
.Nutrition__ContentContainer {
margin-top: 1.5rem;
}
.Nutrition__TableTitle {
margin-bottom: 0.5rem;
font-weight: 700;
}
.Nutrition__Table + .Nutrition__TableTitle, .Nutrition__Tabel + .Nutrition__Tabel {
margin-top: 1rem;
}
.Nutrition__Footnotes:not(:empty) {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
line-height: 1.5;
font-size: 0.75rem;
}
/**
* ----------------------------------------------------------------------------
* Cart tooltip
* ----------------------------------------------------------------------------
*/
.CartTooltip {
position: relative;
display: inline-block;
color: var(--color-text-primary);
}
.CartTooltip__Content {
visibility: hidden;
width: 240px;
background-color: var(--color-text-primary);
color: var(--color-text-inverse);
padding: 4px;
border-radius: 4px;
position: absolute;
z-index: 1;
top: 125%;
left: 50%;
margin-left: -8px;
opacity: 0;
transition: opacity 0.3s;
}
.CartTooltip__Content::after {
content: "";
position: absolute;
top: -8px;
left: 8px;
margin-left: -4px;
border-width: 4px;
border-style: solid;
border-color: transparent transparent var(--color-text-primary) transparent;
}
.CartTooltip:hover .CartTooltip__Content, .CartTooltip:active .CartTooltip__Content {
visibility: visible;
opacity: 1;
}
/**
* ----------------------------------------------------------------------------
* Product Reviews
* ----------------------------------------------------------------------------
*/
.ProductReviews__ShowMore {
margin: -4px; /* Needed to avoid clipping shadows */
}
.ProductReviews__ShowMore > .ShowMore__Content {
padding: 4px;
}
.ProductReviews__ShowMore > .ShowMore__Content::before, .ProductReviews__ShowMore > .ShowMore__Content::after {
width: unset;
left: -4px;
right: -4px;
}
.ProductReviews__ShowMore .ShowMore__Button--decent {
text-decoration: none;
color: var(--color-text-primary);
font-size: 14px;
line-height: 20px;
}
@media (min-width: 768px) {
.ProductReviewsList::after {
content: "masonry";
display: none;
}
}
/**
* ----------------------------------------------------------------------------
* Review Card
* ----------------------------------------------------------------------------
*/
.ReviewCard__Avatar {
border: 1px solid var(--color-border-primary);
border-radius: 100%;
background-color: var(--color-background-surface-primary);
}
.ReviewCard__Comments {
color: var(--color-text-primary);
}
.ReviewCard__Verified .IconLabel {
--iconSize: 1.25em;
font-size: 0.75em;
}
.ReviewCard__Disclaimer {
font-size: 0.75em;
border-top: 1px solid var(--color-border-primary);
}
.ReviewCard__Disclaimer .IconLabel {
--iconSize: 1.25em;
}
.ReviewCard__Media {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.ReviewCard__Photo {
position: relative;
width: min(250px, max(30%, 120px));
}
.ReviewCard .IconLabel__Icon svg {
color: #42B6F8;
}
/**
* ----------------------------------------------------------------------------
* Custom VM Slider
* ----------------------------------------------------------------------------
*/
.Slider {
width: 100%;
}
.Slider.is-hidden, .Slider .is-hidden {
visibility: hidden;
}
.Slider [disabled] {
cursor: default;
opacity: 0.5;
color: var(--color-text-secondary);
}
@media (min-width: 768px) {
.Slider.disable-mobile::after {
content: "slider";
display: none;
}
}
.Slider__Viewport {
width: 100%;
height: var(--slider-height, auto);
overflow: hidden;
position: relative;
}
.Slider:not(.is-initialized) .Slider__Viewport {
height: auto;
}
.Slider__Content {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transform: translateX(var(--slider-offset, 0));
touch-action: pan-y;
}
.Slider:not(.is-initialized) .Slider__Content {
position: relative;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding-bottom: 30px;
margin-bottom: -30px;
width: 100%;
touch-action: pan-x pan-y;
transform: none;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.Slider:not(.is-initialized) .Slider__Content::-webkit-scrollbar {
display: none;
}
.Slider.is-draggable .Slider__Viewport {
cursor: grab;
}
.Slider.is-dragging .Slider__Viewport {
cursor: grabbing;
}
.Slider.is-dragging .Slider__Content {
transform: translate3d(var(--slider-offset, 0), 0, 0);
}
.Slider.is-initialized:not(.is-dragging) .Slider__Content {
transition: transform calc(0.4s * max(var(--slider-transition-time, 1), 0.35)) cubic-bezier(calc((1 - var(--slider-drag-speed, 0.5)) / 2), calc(0.25 + var(--slider-drag-speed, 0.5) / 4), 0.3, 1);
}
.Slider__Slide {
position: absolute;
left: var(--slide-start, 0);
box-sizing: border-box;
}
.Slider:not(.is-initialized) .Slider__Slide {
position: static;
display: inline-block;
flex-shrink: 0;
}
.Slider__Slide * {
pointer-events: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Others */
}
.Slider__Slide a, .Slider__Slide button, .Slider__Slide input, .Slider__Slide select, .Slider__Slide textarea, .Slider__Slide label, .Slider__Slide wistia-player {
pointer-events: auto;
}
.Slider.is-dragging .Slider__Slide * {
pointer-events: none;
}
.Slider__Nav {
background-color: var(--color-background-surface-tertiary);
height: 2px;
position: relative;
overflow: hidden;
}
.Slider__Nav::before, .Slider__Nav::after {
content: "";
position: absolute;
left: 0;
transform: translateX(var(--nav-start, 0));
width: var(--nav-width, 0);
background-color: var(--color-text-primary);
height: 100%;
border-radius: 0.125rem;
}
.Slider__Nav::after {
opacity: 0.2;
}
.Slider:not(.is-autoplaying) .Slider__Nav::after {
visibility: hidden;
}
.Slider:not(.is-initialized) .Slider__Nav {
visibility: hidden;
}
@keyframes slider-autoplay-nav {
0% {
width: 0;
}
100% {
width: var(--nav-width, 0);
}
}
.Slider.is-autoplaying .Slider__Nav::before {
animation: slider-autoplay-nav var(--slider-autoplay-interval, 0s) linear 1;
}
.Slider.is-dragging .Slider__Nav::before {
transform: translate3d(var(--nav-start, 0), 0, 0);
}
.Slider.is-initialized:not(.is-dragging) .Slider__Nav::before, .Slider.is-initialized:not(.is-dragging) .Slider__Nav::after {
transition: transform calc(0.4s * max(var(--slider-transition-time, 1), 0.35)) cubic-bezier(calc((1 - var(--slider-drag-speed, 0.5)) / 2), 0.25, 0.3, 1);
}
.Slider__Controls {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
}
.Slider:not(.is-initialized) .Slider__Controls {
visibility: hidden;
}
.Slider__Viewport .Slider__Controls {
position: absolute;
bottom: 1rem;
right: 1rem;
}
.Slider__Control {
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
color: var(--color-text-primary);
background-color: var(--color-background-surface-primary);
box-shadow: var(--elevation);
cursor: pointer;
text-align: center;
vertical-align: middle;
line-height: 0;
transition: opacity 0.1s ease-in-out;
}
.Slider__Control:hover {
background: var(--color-background-surface-primary-hovered);
}
.Slider__Control:active {
background: var(--color-background-surface-primary-pressed);
}
.Slider__Footer {
margin-top: 1rem;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: end;
min-height: 2.5rem;
}
.Slider__Footer--reverse {
flex-direction: row-reverse;
}
@media (max-width: 767px) {
.Slider.hide-controls-mobile .Slider__Controls{
display: none;
}
.Slider.hide-controls-mobile .Slider__Footer {
justify-content: center;
}
}
/**
* ----------------------------------------------------------------------------
* Utility for hiding elements depending on screen size, maybe remove in future
* ----------------------------------------------------------------------------
*/
@media (min-width: 768px) {
.hidden-tablet-and-up {
display: none !important;
}
}
@media (max-width: 767px) {
.hidden-mobile {
display: none !important;
}
}
/**
* ----------------------------------------------------------------------------
* Lab verification badge
* ----------------------------------------------------------------------------
*/
.Product__LabVerificationIcon {
position: absolute;
left: var(--percentual-position-button-mobile);
/* right: 23%; */
bottom: 12%;
transform: translateX(-61.8%);/* Golden ratio */
z-index: 0;
}
.LabVerificationIcon {
width: 80px;
height: 80px;
}
.LabVerificationIcon::before {
content: "";
background-color: var(--color-background-surface-primary);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
border-radius: 50%;
transition: 0.08s ease;
}
.LabVerificationIcon:hover::before, .LabVerificationIcon:active::before {
top: -8px;
bottom: -8px;
right: -8px;
left: -8px;
}
.LabVerificationIcon:hover::before {
background: var(--color-background-surface-primary-hovered);
}
.LabVerificationIcon:active::before {
background: var(--color-background-surface-primary-pressed);
}
@media (min-width: 1024px) {
.Product__SlideItem[data-media-image-type="default"] .Product__Image {
padding: 16% 3%;
}
.Product__LabVerificationIcon {
left: var(--percentual-position-button-desktop);
bottom: 16%;
}
.LabVerificationIcon {
width: 100px;
height: 100px;
}
}
.Product__LabVerificationIcon--edgePosition {
left: 16px;
transform: none;
}
.SalesPageHero__ImageWrapper {
position: relative;
}
.SalesPageHero__ImageWrapper .Product__LabVerificationIcon {
left: 100%;
bottom: 0;
transform: translate(-90%, 20%);
}
/**
* ----------------------------------------------------------------------------
* Image zoom
* ----------------------------------------------------------------------------
*/
[data-image-zoom-slide] img {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.ImageZoom__Icon {
position: absolute;
padding: 0.5rem;
line-height: 1;
right: 0.5rem;
bottom: 0.5rem;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
--icon-size: 1.25rem;
cursor: pointer;
}
/**
* ----------------------------------------------------------------------------
* Customer story grid
* ----------------------------------------------------------------------------
*/
.CustomerStoryGrid {
--items-per-row: 2;
--row-gap: 18px;
--column-gap: 18px;
display: flex;
max-width: calc(200px * var(--items-per-row));
width: 100%;
row-gap: var(--row-gap);
column-gap: var(--column-gap);
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
justify-content: left;
align-items: start;
}
.CustomerStoryGrid__Item {
width: calc((100% / var(--items-per-row)) - (((var(--items-per-row) - 1) * var(--column-gap)) / var(--items-per-row)));
}
.CustomerStoryGrid__Item .NameLabel {
/* Prevents clipping shadows in show more container */
margin-bottom: 3px;
margin-right: 2px;
}
@media (min-width: 576px) {
.CustomerStoryGrid {
--items-per-row: 3;
}
}
@media (min-width: 768px) {
.CustomerStoryGrid {
--items-per-row: 4;
}
}
/* New checkbox component
Inspired by https://moderncss.dev/pure-css-custom-checkbox-style/*/
.Checkbox {
--checkbox-color-rgb: 53, 56, 59;
display: flex;
gap: 0.75em;
align-items: center;
min-height: 36px;
color: rgb(var(--checkbox-color-rgb)); /* Dynamic colors are not working because the color needs to be hardcoded in the SVG */
padding-right: 8px;
}
.Checkbox--critical {
--checkbox-color-rgb: 206, 61, 58;
}
.Checkbox--disabled {
color: var(--color-text-disabled);
}
.Checkbox:not(.Checkbox--disabled):hover, .Checkbox input[type="checkbox"]:not(:disabled):hover {
cursor: pointer;
}
.Checkbox input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
background-color: transparent; /* For iOS < 15 to remove gradient background */
margin: 0;
width: 1.25em;
height: 1.25em;
font: inherit;
position: relative;
}
.Checkbox input[type="checkbox"]:disabled {
color: var(--color-text-disabled);
cursor: not-allowed;
}
.Checkbox input[type="checkbox"]:not(:disabled)::before {
content: "";
position: absolute;
left: -8px;
right: -8px;
top: -8px;
bottom: -8px;
border-radius: 4px;
transform: translateZ(0);
}
.Checkbox input[type="checkbox"]:hover::before {
background: var(--color-background-surface-primary-hovered);
}
.Checkbox input[type="checkbox"]:active::before {
background: var(--color-background-surface-primary-pressed);
}
.Checkbox--onsecondary input[type="checkbox"]:hover::before {
background: var(--color-background-surface-secondary-hovered);
}
.Checkbox--onsecondary input[type="checkbox"]:active::before {
background: var(--color-background-surface-secondary-pressed);
}
.Checkbox--ontertiary input[type="checkbox"]:hover::before {
background: var(--color-background-surface-tertiary-hovered);
}
.Checkbox--ontertiary input[type="checkbox"]:active::before {
background: var(--color-background-surface-tertiary-pressed);
}
.Checkbox input[type="checkbox"]::after {
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='0.75' y='0.75' width='22.5' height='22.5' fill='%2335383B' stroke='%2335383B' stroke-width='1.5'/%3E%3Cpath d='M6 12.6875L10.0625 16.75L19 7' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
background-size: 0 0;
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0.0625em solid currentColor;
transition: 0.1s background-size ease-in-out;
}
.Checkbox input[type=checkbox]:disabled::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='0.75' y='0.75' width='22.5' height='22.5' fill='%239EA4AA' stroke='%239EA4AA' stroke-width='1.5'/%3E%3Cpath d='M6 12.6875L10.0625 16.75L19 7' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
}
.Checkbox--critical input[type="checkbox"]::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='0.75' y='0.75' width='22.5' height='22.5' fill='%23ce3d3a' stroke='%23ce3d3a' stroke-width='1.5'/%3E%3Cpath d='M6 12.6875L10.0625 16.75L19 7' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E");
}
.Checkbox input[type="checkbox"]:checked::after {
background-size: 100% 100%;
background-color: currentColor;
}
/**
* ----------------------------------------------------------------------------
* Buttons
* ----------------------------------------------------------------------------
*/
.Button,
.shopify-payment-button__button--unbranded,
input.spr-button-primary,
.spr-summary-actions-newreview,
.spr-button-primary:not(input),
.spr-pagination-prev > a,
.spr-pagination-next > a,
.lion-in-cart-reward__button,
.lion-action-button,
.lion-rules-list .lion-action-button,
.lion-rewards-list .lion-action-button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: 4px;
letter-spacing: 0.64px;
font-size: 1rem;
line-height: 1.5rem;
font-family: var(--font-text-family);
font-weight: var(--font-text-weight);
font-style: var(--font-text-style);
background-color: transparent;
z-index: 1;
overflow: hidden;
-webkit-tap-highlight-color: initial;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Button--icon_only {
padding: 0.75rem;
}
.Button--small {
gap: 0.5rem;
padding: 0.5rem 1rem;
letter-spacing: 0.42px;
font-size: 0.875rem;
line-height: 1.25rem;
}
.Button--extra_small {
gap: 0.5rem;
padding: 0.25rem 0.75rem;
letter-spacing: 0.42px;
font-size: 0.875rem;
line-height: 1.25rem;
}
.Button--small.Button--icon_only, .Button--extra_small.Button--icon_only {
padding: 0.5rem;
}
.Button svg {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
.Button--small svg {
width: 1.25rem;
height: 1.25rem;
}
.Button--extra_small svg {
width: 1rem;
height: 1rem;
}
.Button--primary,
.shopify-payment-button__button--unbranded,
.spr-summary-actions-newreview,
.spr-button-primary:not(input),
.lion-in-cart-reward__button,
.lion-action-button,
.lion-rules-list .lion-action-button,
.lion-rewards-list .lion-action-button {
color: var(--color-text-on-fill-button-primary);
background-color: var(--color-background-fill-button-primary);
}
.Button--primary:hover,
.shopify-payment-button__button--unbranded:hover,
.spr-summary-actions-newreview:hover,
.spr-button-primary:not(input):hover,
.lion-in-cart-reward__button:hover,
.lion-action-button:hover,
.lion-rules-list .lion-action-button:hover,
.lion-rewards-list .lion-action-button:hover {
background: var(--color-background-fill-button-primary-hovered);
}
.Button--primary:active,
.shopify-payment-button__button--unbranded:active,
.spr-summary-actions-newreview:active,
.spr-button-primary:not(input):active,
.lion-in-cart-reward__button:active,
.lion-action-button:active,
.lion-rules-list .lion-action-button:active,
.lion-rewards-list .lion-action-button:active {
background: var(--color-background-fill-button-primary-pressed);
}
.Button--secondary,
.spr-pagination-prev > a,
.spr-pagination-next > a {
color: var(--color-text-on-fill-button-secondary);
background-color: var(--color-background-fill-button-secondary);
}
.Button--secondary:hover,
.spr-pagination-prev > a:hover,
.spr-pagination-next > a:hover {
background: var(--color-background-fill-button-secondary-hovered);
}
.Button--secondary:active,
.spr-pagination-prev > a:active,
.spr-pagination-next > a:active {
background: var(--color-background-fill-button-secondary-pressed);
}
.Button--tertiary,
.lion-isolator .lion-redeem-reward-modal__button--cancel {
color: var(--color-text-on-fill-button-tertiary);
background-color: var(--color-background-fill-button-tertiary);
box-shadow: var(--elevation);
}
.Button--tertiary:hover,
.lion-isolator .lion-redeem-reward-modal__button--cancel:hover {
background: var(--color-background-fill-button-tertiary-hovered);
}
.Button--tertiary:active,
.lion-isolator .lion-redeem-reward-modal__button--cancel:hover {
background: var(--color-background-fill-button-tertiary-pressed);
}
.Button--ghost {
color: var(--color-text-on-fill-button-ghost);
background-color: var(--color-background-fill-button-ghost);
}
.Button--ghost:hover {
background: var(--color-background-fill-button-ghost-hovered);
}
.Button--ghost:active {
background: var(--color-background-fill-button-ghost-pressed);
}
.Button--critical {
color: var(--color-text-on-fill-button-critical-primary);
background-color: var(--color-background-fill-button-critical-primary);
}
.Button--critical:hover {
background: var(--color-background-fill-button-critical-primary-hovered);
}
.Button--critical:active {
background: var(--color-background-fill-button-critical-primary-pressed);
}
.Button--critical_ghost {
color: var(--color-text-on-fill-button-critical-ghost);
background-color: var(--color-background-fill-button-critical-ghost);
}
.Button--critical_ghost:hover {
background: var(--color-background-fill-button-critical-ghost-hovered);
}
.Button--critical_ghost:active {
background: var(--color-background-fill-button-critical-ghost-pressed);
}
.Button[disabled],
.shopify-payment-button__button--unbranded[disabled],
.spr-summary-actions-newreview[disabled],
.spr-button-primary:not(input)[disabled],
.spr-pagination-prev > a[disabled],
.spr-pagination-next > a[disabled],
.lion-in-cart-reward__button[disabled],
.lion-action-button.lion-action-button--disabled,
.lion-rules-list .lion-action-button.lion-action-button--disabled,
.lion-rewards-list .lion-action-button.lion-action-button--disabled {
border: 1px solid var(--color-border-button-disabled);
background: var(--color-background-fill-button-ghost);
color: var(--color-text-disabled);
pointer-events: none;
cursor: default;
}
.Button--ghost[disabled], .Button--critical_ghost[disabled] {
border: none;
}
.ProductForm__AddToCartWrapper .lion-in-cart-reward__button {
width: 100%;
}
/**
* ----------------------------------------------------------------------------
* Button group
* Default behavior: the buttons grow to fill the available space, while the width of the buttons content is respected
* --contentSize: limits the button width to its content size
* --vertical: aligns the buttons vertically
* ----------------------------------------------------------------------------
*/
.ButtonGroup {
display: flex;
flex-wrap: wrap;
gap: 1rem;
flex-direction: column;
}
@media (min-width: 768px) {
.ButtonGroup:not(.ButtonGroup--vertical) {
flex-direction: row;
}
}
.ButtonGroup .Button {
white-space: nowrap;
flex: 1 1 0;
overflow: visible; /* To allow equal sized buttons that still wrap */
}
.ButtonGroup--contentSize .Button {
flex: 0 0 auto;
}
/* Button Loading */
button.loading,
.Button.loading,
.lion-action-button--loading {
color: transparent !important;
transition: none;
cursor: not-allowed;
}
button.loading::after,
.Button.loading::after,
.ProductItem__QuickAdd .lion-action-button--loading::after {
content: "";
width: 1rem;
height: 1rem;
border: 0.15rem solid rgba(255, 255, 255, 0.25);
border-top: 0.15rem solid var(--color-text-on-fill-button-tertiary);
border-left: 0.15rem solid var(--color-text-on-fill-button-tertiary);
border-right: 0.15rem solid var(--color-text-on-fill-button-tertiary);
}
.Button--primary.loading::after,
.lion-action-button--loading::after {
border-top: 0.15rem solid var(--color-text-on-fill-button-primary);
border-left: 0.15rem solid var(--color-text-on-fill-button-primary);
border-right: 0.15rem solid var(--color-text-on-fill-button-primary);
}
.lion-action-button--loading::after {
margin: 0;
}
/* Sales page offers */
.Offer__Buy .Button {
background-color: var(--offerv2-main-color);
color: var(--color-text-on-fill-button-primary);
padding-left: 1.25rem;
padding-right: 1.25rem;
text-transform: uppercase;
font-weight: var(--font-heading-weight);
letter-spacing: .2em;
font-size: 0.875rem;
}
.Offer__Buy .Button:hover {
opacity: 0.7;
}
/* Separator Dot */
.SeparatorDot {
display: inline-block;
/* margin: 0 18px; */
content: "";
height: 0.25em;
width: 0.25em;
border-radius: 100%;
background: currentColor;
margin: 0 0.25em;
vertical-align: middle;
margin-bottom: 1px;
}
/* Lab verification sidebar */
.LabVerification__Section + .LabVerification__Section {
margin-top: 2rem;
}
.LabVerification__Heading {
color: var(--color-text-primary);
}
.LabVerification__Label {
display: flex;
flex-wrap: nowrap;
gap: 0.5rem;
font-weight: 500;
color: var(--color-text-primary);
align-items: center;
}
.LabVerification__Label svg {
color: var(--color-brand)
}
.LabVerification__PDFViewer, .LabVerification__PDFViewer iframe {
width: 100%;
min-height: max(60vh, 450px);
}
.LabVerification__ReportTitle {
display: flex;
align-items: center;
gap: 0.5rem;
}
.LabVerification__ReportTitle svg {
color: var(--color-brand);
}
.LabVerification__Section .Collapsible__Button, .LabVerification__Section .Collapsible__Content {
padding-left: 0;
}
/* A11y */
:focus-visible {
outline: 2px auto blue;
outline-offset: 2px;
}
.Collapsible :focus-visible, .scroll-list :focus-visible {
outline-offset: -2px;
}