/** Shopify CDN: Minification failed

Line 3118:28 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;
}

[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__InputError {
    display: none;
    color: var(--color-text-critical);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top: 0.125rem;
}

.Form__InputError svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.25rem;
    vertical-align: bottom;
}

label.error input {
    border-color: var(--color-text-critical);
}

label.error .Form__InputError {
    display: block;
}

.spr-form-input-text,
.spr-form-input-email,
.spr-form-input-textarea {
    -webkit-appearance: none;
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-border-input);
    width: 100%;
    height: 100%;
    line-height: normal;
    resize: none;
    transition: border-color 0.1s ease-in-out;
    background: transparent;
}

.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-border-input-active);
    outline: none;
}

.spr-form-input-text:hover,
.spr-form-input-email:hover,
.spr-form-input-textarea:hover {
    /* border-color: rgba(var(--text-color-rgb), 0.8); */
    border-color: var(--color-border-input-hovered);
    outline: none;
}

.spr-form-input-text::-moz-placeholder, .spr-form-input-email::-moz-placeholder, .spr-form-input-textarea::-moz-placeholder {
    color: var(--color-text-secondary);
}

.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);
}

.spr-form-input-text::placeholder,
.spr-form-input-email::placeholder,
.spr-form-input-textarea::placeholder {
    color: var(--color-text-secondary);
}

.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--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 {
    aspect-ratio: var(--ratio);
    min-height: 0;
    min-width: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
}

.AspectRatio img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.AspectRatio:has(.img-loading)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
    background: #E0E3E6;
    z-index: 1;
}

.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
 * --------------------------------------------------------------------
 */

.AspectRatio.VideoWrapper {
    height: initial;
}

.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    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, 0px) + 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.5rem 0.25rem;
}

.QuantitySelector--small {
    padding: 0.125rem;
}

.QuantitySelector__Input {
    border: none;
    font-size: 1.25rem;
    line-height: 2rem;
    text-align: center;
    width: 1.75rem;
    color: var(--color-text-primary);
}

.QuantitySelector--small .QuantitySelector__Input {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.QuantitySelector button:not([aria-disabled="true"]) {
    color: var(--color-text-primary);
}

.QuantitySelector button[aria-disabled="true"] {
    color: var(--color-text-disabled);
    pointer-events: none;
}

/**
 * ----------------------------------------------------------------------------
 * 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);
}

/**
 * ----------------------------------------------------------------------------
 * 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--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;
}

/**
 * ----------------------------------------------------------------------------
 * 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 img[src*="16x16.svg"] {
    width: 16px;
    height: auto;
}
.Rte img[src*="32x32.svg"] {
    width: 32px;
    height: auto;
}
.Rte img[src*="50x50.svg"] {
    width: 50px;
    height: auto;
}
.Rte img[src*="100x100.svg"] {
    width: 100px;
    height: auto;
}
.Rte img[src*="160x160.svg"] {
    width: 160px;
    height: auto;
}
.Rte img[src*="240x240.svg"] {
    width: 240px;
    height: auto;
}
.Rte img[src*="480x480.svg"] {
    width: 480px;
    height: auto;
}
.Rte img[src*="600x600.svg"] {
    width: 600px;
    height: auto;
}
.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: 2rem;
    line-height: 2.75rem;
    margin: 4.5rem 0 2rem;
}
.Rte h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
    margin: 4.5rem 0 2rem;
}
.Rte h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    margin: 4rem 0 1.5rem;
}
.Rte h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin: 3rem 0 1.5rem;
}
.Rte h5 {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 2.5rem 0 1.25rem;
}
.Rte h6 {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 2rem 0 1.25rem;
}

@media (min-width: 768px) {
    .Rte h1 {
        font-size: 2.25rem;
        line-height: 3rem;
    }
    .Rte h2 {
        font-size: 2rem;
        line-height: 2.75rem;
    }
    .Rte h3 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
    .Rte h4 {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .Rte h5 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.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--clipped {
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
}

.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 {
    border-top: 1px solid var(--color-border-primary);
}

.shopify-section--spacedDefault:not(:empty), .Section--spacingNormal {
    padding: 4rem 0;
}

@media screen and (min-width: 1024px) {
    .shopify-section--spacedDefault:not(:empty), .Section--spacingNormal {
        padding: 5rem 0;
    }
}

.SectionFooter {
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .SectionFooter {
        margin-top: 3rem;
    }
}

/**
 * ----------------------------------------------------------------------------
 * 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);
    position: relative;
    border-radius: var(--border-radius-assignment-surface);
}

.ProductItem:hover .ProductItem__ImageWrapper {
    background: var(--color-background-surface-secondary-hovered);
}
.ProductItem .ProductItem__ImageWrapper:active {
    background: var(--color-background-surface-secondary-pressed);
}

.ProductItem__Image {
  padding: 2rem 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__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__ImageWrapper > div {
    align-items: center;
}

.ProductItem__ImageWrapper > div > img {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.ProductItem--compact .ProductItem__ImageWrapper {
    width: 72px;
    flex-shrink: 0;
    align-self: start;
}

.ProductItem--compact .ProductItem__ImageWrapper .AspectRatio {
  aspect-ratio: 1;
}
.ProductItem--compact .ProductItem__ImageWrapper img {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ProductItem--compact .ProductItem__Image {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.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__ImageWrapper > div > img {
    width: 100%;
}

.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 > div > div {
    height: 70px;
    width: 100%;
}


/* .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__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;
    flex-shrink: 0;
}

.Cart__CrossSell .ProductItem .ProductItem__ImageWrapper .AspectRatio {
    aspect-ratio: 1.0526;
}

.Cart__CrossSell .ProductItem .ProductItem__ImageWrapper img {
    padding-top: 6px;
    padding-bottom: 6px;
}


.Cart__CrossSell .ProductItem .ProductItem__Image {
    padding-left: 6px;
    padding-right: 6px;
}

.Cart__CrossSell .ProductItem .ProductItem__InfoWrapper {
    flex-grow: 1;
    margin-top: 0;
}

.Cart__CrossSell .ProductItem .ProductItem__InfoWrapper .ProductItem__QuickAdd {
    display: block;
}

.CartClubSlider .Slider__Slide {
    width: 80%;
    max-width: 320px;
}

/**
 * ----------------------------------------------------------------------------
 * 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;
}

.TeamMember__ImageWrapper {
    position: relative;
}

.TeamMember__ImageWrapper > * {
    position: absolute;
    width: 100%;
}

.TeamMemberItem__ImageWrapper img {
    width: 100%;
}


/**
 * ----------------------------------------------------------------------------
 * 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__Content > div > img {
    width: 100%;
}

.CollectionItem--compact {
    max-width: unset;
}

.CollectionItem--compact .CollectionItem__Content {
    flex-direction: row;
    align-items: center;
}

.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__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;
    }
}

/**
 * ----------------------------------------------------------------------------
 * Product carousel
 * ----------------------------------------------------------------------------
 */

.ProductList--carousel {
    white-space: nowrap;
}

.ProductList--carousel .Slider__Slide {
    width: 65%;
}

@media (min-width: 768px) {
    .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 {
        margin-right: 0;
    }

    .FeatureText--imageLeft .FeatureText__ContentWrapper {
        padding-left: 40px;
    }

    .FeatureText--imageLeft .FeatureText__Content {
        margin-left: 0;
    }
}

@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__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, .ShopHeader__MainMenu .ShopHeader__MainMenuItem:hover .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[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 .shopify-section--spacedDefault {
    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__Handbook {
    margin-top: 1rem;
}

.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;
}

.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: 0.75em;
    align-self: center;
    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;
}

/**
 * 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;
}

/**
 * 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;
    }
}

/**
 * ----------------------------------------------------------------------------
 * 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: 1.25rem 3.25rem 1.25rem 1.25rem;
    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 0.25rem;
    border-radius: 2px;
}
.Search__Input:focus-visible {
    outline: none;
}
.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 > div > img {
    object-fit: cover;
    width: 100%;
}

.InstagramPosts__Embeds {
    white-space: nowrap;
}

.InstagramPosts__Embeds .Slider__Slide * {
    pointer-events: all;
}

@media (min-width: 1024px) {
    .InstagramPosts .Slider__Footer {
        display: none;
    }
}

/**
 * ----------------------------------------------------------------------------
 * 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__Image--secondary-container {
    position: absolute;
    width: 100%;
}

.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;
}

.Shortcode--article .AspectRatio {
    height: 100%;
}

/**
 * ----------------------------------------------------------------------------
 * 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__ImageWrapper img.DescriptionStory__Image {
    width: 100%;
    -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__ImageContainer > div {
    height: 100%;
}

.Slideshow__ImageContainer:focus-visible img {
    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset-inside);
    box-shadow: var(--focus-visible-box-shadow-inside);
}

.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;
    }
}

.ProductReviews .Rating__Stars {
    color: #cc8100;
}

/**
 * ----------------------------------------------------------------------------
 * 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: calc(100% + var(--slide-spacing, 0) * 0.5rem);
    margin: 0 calc(-1 * var(--slide-spacing, 0) * 0.25rem);
    display: flex;
    flex-direction: column-reverse;
}

.Slider.is-hidden, .Slider .is-hidden {
    visibility: hidden;
}

.Slider [disabled], .Slider [aria-disabled="true"] {
    cursor: default;
    opacity: 0.5;
    color: var(--color-text-secondary);
}

@media (min-width: 768px) {
    .Slider.disable-mobile::after {
        content: "slider";
        display: none;
    }
}

@media (max-width: 1023px) {
    .Slider.disable-desktop::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-initialized.is-draggable .Slider__Viewport {
    cursor: grab;
}

.Slider.is-dragging .Slider__Viewport {
    cursor: grabbing;
}

@media (max-width: 1023px) {
    .Slider--overflowContainer .Slider__Viewport {
        overflow: visible;
    }
}

.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;
    padding: 0 calc(var(--slide-spacing, 0) * 0.25rem);
}

.Slider:not(.is-initialized) .Slider__Slide {
    position: static;
    display: inline-block;
    flex-shrink: 0;
}

.Slider--equalSlideHeights.is-initialized:not(.is-resizing) .Slider__Slide {
    height: var(--slider-height);
}

.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;
    z-index: 1;
}

.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:not([aria-disabled="true"]):hover {
    background: var(--color-background-surface-primary-hovered);
}
.Slider__Control:not([aria-disabled="true"]):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--overflowContainer .Slider__Footer {
    padding: 0 1rem;
}

.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);
    box-shadow: inset 0 0 0 1px var(--color-text-on-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;
    pointer-events: none;
}

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__Section .Collapsible__Button, .LabVerification__Section .Collapsible__Content {
    padding-left: 0;
}

/**
 * ----------------------------------------------------------------------------
 * 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;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: none;
}

body.is-tabbing :focus-visible {
    outline: var(--focus-visible-outline);
    outline-offset: var(--focus-visible-outline-offset);
    box-shadow: var(--focus-visible-box-shadow);
}

body.is-tabbing .focus-visible-inside :focus-visible, body.is-tabbing .focus-visible-inside:focus-visible, body.is-tabbing .Collapsible :focus-visible, body.is-tabbing .scroll-list :focus-visible {
    outline-offset: var(--focus-visible-outline-offset-inside);
    box-shadow: var(--focus-visible-box-shadow-inside);
}

/* Conditional blocks */

.ConditionalBlocks .shopify-block + .shopify-block:not(:empty, .none) {
    margin-top: 2rem;
}

/**
 * ----------------------------------------------------------------------------
 * Table of contents
 * ----------------------------------------------------------------------------
 */

.TableOfContentsSidenav .TableOfContents__Header {
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border-primary);
}

.TableOfContents {
    padding: 0 20px;
}

.TableOfContentsSidenav .TableOfContents {
    padding: 12px 20px;
    overflow: auto;
    max-height: calc(100vh - var(--header-height) - 30px - 30px - 50px);
    /* --header-height - margin-top - margin-bottom - table of contents header height */
}

.TableOfContents .Linklist__Item:not([data-toc-level="2"]).is-active::before {
    content: "";
    position: absolute;
    left: -20px;
    width: 2px;
    background-color: var(--color-text-primary);
    top: 0;
    bottom: var(--linklist-item-padding, 0);
}

.TableOfContents .Linklist__Item:not(:last-of-type) {
    --linklist-item-padding: 10px;
    border-bottom: 1px solid var(--color-border-primary);
    padding-bottom: var(--linklist-item-padding);
    margin-bottom: 10px;
}

.TableOfContents .Linklist--indent .Linklist__Item:first-of-type {
    border-top: 1px solid var(--color-border-primary);
    padding-top: var(--linklist-item-padding);
    margin-top: 10px;
}

.TableOfContents .Linklist__Item:last-of-type {
    --linklist-item-padding: 0;
}

.TableOfContentsSidenav {
    font-size: 0.875em;
}

.TableOfContents .Collapsible__Button {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
}

.TableOfContents .Collapsible__Button > :not([data-action="toggle-collapsible"]) {
    flex-grow: 1;
}

.TableOfContents [data-action="toggle-collapsible"] {
    flex-shrink: 0;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    --icon-size: 20px;
    padding: 2px;
}

.TableOfContents [data-action="toggle-collapsible"] svg {
    transform: rotate(0deg);
    transition: transform 0.3s;
}

.TableOfContents [data-action="toggle-collapsible"][aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.TableOfContents .Linklist__Item {
    overflow-x: visible !important;
}

.Linklist__Item.is-active .Collapsible__Button, .Linklist__Item.is-active > .TableOfContents__Link {
    font-weight: 600;
    color: var(--color-text-primary);
}

/**
 * ----------------------------------------------------------------------------
 * Featured Blog Posts
 * ----------------------------------------------------------------------------
 */

@media (min-width: 1024px) {
    .BlogPosts__SliderWrapper .Slider__Content {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        row-gap: 1.5rem;
    }

    .BlogPosts__SliderWrapper .Slider__Footer {
        display: none;
    }

    .BlogPosts__SliderWrapper .Slider__Viewport {
        cursor: auto;
    }

    .BlogPosts__SliderWrapper .Slider__Slide * {
        pointer-events: all;
        -webkit-touch-callout: initial;
        -webkit-user-select: initial;
        -khtml-user-select: initial;
        -moz-user-select: initial;
        -ms-user-select: initial;
        user-select: initial;
    }
}

@media (max-width: 1023px) {
    .BlogPosts__SliderWrapper {
        margin: 0 calc(-1 * var(--container-horizontal-spacing, 0));
    }

    .BlogPosts__SliderWrapper .Slider__Slide {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .BlogPosts__SliderWrapper .Slider:not(.is-resizing) .Slider__Slide {
        height: var(--slider-height);
    }

    .BlogPosts__SliderWrapper .Slider__Slide:first-of-type {
        margin-left: 0.25rem;
    }

    .BlogPosts__SliderWrapper .Slider__Slide:last-of-type {
        margin-right: 0.25rem;
    }

    .BlogPosts__SliderWrapper .Slider__Footer {
        padding: 0 1rem;
    }
}


.product_image_container {
    height: 100%;
    width: 100%;
}

.product_image_container > div {
    display: flex;
    justify-content: center;
}

.product_image_container img {
    object-fit: contain;
}
#zoom-dialog {
    display: none;
}

#zoom-dialog[open] {
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

#image-wrapper {
    overflow: hidden;
    height: 100%;
    margin: 64px 0 0;
}

.zoom-controls {
    color: #35383B;
    margin-bottom: 64px;
}

.zoom-controls button {
    line-height: 0;
    color: #35383B;
    box-shadow: 0 0.3px 1.5px 0 rgba(0, 0, 0, 0.02), 0 0.1px 1.6px 0 rgba(0, 0, 0, 0.03), 0 0.3px 2.8px 0 rgba(0, 0, 0, 0.04), 0 0.7px 2.6px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.07);
}

.zoom-controls button:disabled {
    color: #bdc1c6;
    box-shadow: none;
}

#zoom-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    object-fit: contain;
    grid-row: 1 / 2;
    transition: transform 0.3s ease-out;
}
#zoom-image.is-dragging {
    transition: none;
}

#zoom-image.is-dragging {
    transition: none;
}

#zoom-close-button svg, #minus-button svg, #plus-button svg {
    width: 24px;
    height: 24px;
}

@keyframes pulse{
    50% {
        opacity:.2
    }
}

.LabelList {
    z-index: 2;
}