/*html {*/
/*    line-height: 1.15;*/
/*    -webkit-text-size-adjust: 100%*/
/*}*/

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bold
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

@font-face {
    font-family: Soleil W01;
    src: url(/fonts/71d413d0-7756-4df0-a3cd-3b4f9f04c8f4.woff2) format("woff2"), url(/fonts/4f8fefe7-7b0a-44ca-ac95-4aac1c3ab3fc.woff) format("woff");
    font-weight: 300;
    font-display: swap
}

@font-face {
    font-family: Soleil W01;
    src: url(/fonts/6561a656-6f33-48a9-a9b4-c923cacb6769.woff2) format("woff2"), url(/fonts/5328f8ac-8b9c-4408-8a29-d1e6a757f7e7.woff) format("woff");
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: Soleil W01;
    src: url(/fonts/72f785a5-1060-4b4d-8759-8d20e91712be.woff2) format("woff2"), url(/fonts/53496adb-e93b-4a9c-8bf0-a7efa8e71d59.woff) format("woff");
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: Soleil W01;
    src: url(/fonts/73ddc1b6-6974-48db-9557-4256b3cf5738.woff2) format("woff2"), url(/fonts/f7bd0d1e-59d9-4853-9cf0-e26e47617a17.woff) format("woff");
    font-weight: 800;
    font-display: swap
}

:root {
    --breakpoint-m: 1024px;
    --base: 1;
    --spacing-4xs: .25rem;
    --spacing-3xs: .5rem;
    --spacing-2xs: .75rem;
    --spacing-xs: 1rem;
    --spacing-s: 1.5rem;
    --spacing-m: 2rem;
    --spacing-l: 2.5rem;
    --spacing-xl: 3.25rem;
    --spacing-2xl: 4.5rem;
    --spacing-3xl: 6.25rem;
    --body-padding-outer: var(--spacing-2xl);
    --module-padding-vertical: var(--spacing-2xl);
    --font-sans: "Soleil W01", Arial, sans-serif;
    --font-serif: Times, "Times New Roman", serif;
    --weight-normal: 400;
    --weight-bold: 500;
    --text-xs: .875rem;
    --text-base: 1rem;
    --text-s: 1rem;
    --text-m: 1.25rem;
    --text-l: 1.75rem;
    --text-xl: 2.375rem;
    --text-2xl: 3.375rem;
    --text-3xl: 4.625rem;
    --text-4xl: 7.375rem;
    --leading-uppercase: 1;
    --leading-headlines: 1.3;
    --leading-copy: 1.43;
    --flex-typo-base-size: .5rem;
    --flex-typo-factor: .5vw;
    --flex-typo-max-size: 1.75rem;
    --color-dark: #343434;
    --color-light: #fff;
    --color-black: #343434;
    --color-white: #fff;
    --color-gray-lighter: #EEEEEC;
    --color-gray-light: #D8D8D8;
    --color-gray-dark: #707070;
    --color-green: #03BF10;
    --color-red: #DC0302;
    --color-orange: #F6684D;
    --grid-columns: 12;
    --grid-gap: var(--spacing-s);
    --grid-columns-text: 8
}

@media screen and (max-width:1280px) {
    :root {
        --body-padding-outer: var(--spacing-m);
        --module-padding-vertical: var(--spacing-2xl)
    }
}

@media(max-width:768px) {
    :root {
        --body-padding-outer: var(--spacing-xs);
        --module-padding-vertical: var(--spacing-xl)
    }
}

@media(min-width:1800px) {
    :root {
        --body-padding-outer: calc(var(--spacing-2xl) * 1.5)
    }
}

.grid {
    --columns: var(--grid-columns);
    --columns-text: var(--grid-columns-text);
    --column-gap: var(--grid-gap);
    --row-gap: var(--grid-gap);
    display: grid !important;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-column-gap: var(--column-gap);
    grid-row-gap: var(--row-gap)
}

.grid__column {
    --span: calc(var(--grid-columns) / 2);
    grid-column: span var(--span) / span var(--span)
}

.grid__column.grid__span--1 {
    --span: 1
}

.grid__column.grid__span--2 {
    --span: 2
}

.grid__column.grid__span--3 {
    --span: 3
}

.grid__column.grid__span--4 {
    --span: 4
}

.grid__column.grid__span--5 {
    --span: 5
}

.grid__column.grid__span--6 {
    --span: 6
}

.grid__column.grid__span--7 {
    --span: 7
}

.grid__column.grid__span--8 {
    --span: 8
}

.grid__column.grid__span--9 {
    --span: 9
}

.grid__column.grid__span--10 {
    --span: 10
}

.grid__column.grid__span--11 {
    --span: 11
}

.grid__column.grid__span--12 {
    --span: 12
}

.grid__column--inner {
    grid-column-start: 1;
    grid-column-end: 13
}

.grid__column--large {
    grid-column-start: 2;
    grid-column-end: 12
}

.grid__column--full {
    grid-column-start: 1;
    grid-column-end: 13
}

@media screen and (max-width:960px) {
    .grid__column--inner {
        grid-column-start: 1;
        grid-column-end: 13
    }

    .grid__column.grid__span--6 {
        --span: 12
    }
}

* {
    box-sizing: border-box
}

/*html {*/
    /* font-family: var(--font-sans); */
/*    font-weight: 300;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*    color: var(--color-black)*/
/*}*/

/*@media screen and (min-width:1440px) {*/
/*    @supports (font-size: min(1rem + 1vw, 2rem)) {*/
/*        html {*/
/*            min-width: 1vw;*/
/*            font-size: min(calc(var(--flex-typo-base-size) + var(--flex-typo-factor)), var(--flex-typo-max-size))*/
/*        }*/
/*    }*/
/*}*/

button {
    color: inherit
}

img,
figure,
iframe {
    vertical-align: middle;
    margin: 0
}

img {
    max-width: 100%
}

a {
    text-decoration: none;
    color: currentColor
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    margin: 0
}

main {
    margin-top: var(--spacing-l)
}

main>:first-child {
    margin-top: 0
}

.no-scroll {
    overflow: hidden
}

.alert {
    padding: var(--spacing-s);
    margin-bottom: var(--spacing-s);
    font-size: var(--text-m);
    line-height: var(--leading-copy);
    font-weight: var(--weight-bold)
}

.alert--success {
    background: var(--color-green);
    color: var(--color-white)
}

.alert--error {
    background: var(--color-red);
    color: var(--color-white)
}

.alert :where(p, ul, ol):first-child {
    margin-top: 0
}

.alert :where(p, ul, ol):last-child {
    margin-bottom: 0
}

.badge {
    width: 1.4em;
    height: 1.4em;
    border-radius: 100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 800;
    line-height: 1.25;
    background: var(--color-orange);
    color: var(--color-white)
}

.badge--on-edge {
    position: absolute;
    top: -.2em;
    right: -.8em
}

.button {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    padding: var(--spacing-2xs) var(--spacing-m);
    transition: opacity 70ms ease-in-out
}

.button:hover {
    opacity: .9
}

.button:active {
    opacity: .85
}

.button--primary {
    background: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white)
}

.button--secondary {
    background: transparent;
    border-color: var(--color-dark);
    color: var(--color-dark)
}

.button--success {
    background: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-white)
}

.button--error {
    background: var(--color-red);
    border-color: var(--color-red);
    color: var(--color-white)
}

.button--dark {
    background: var(--color-light);
    border-color: var(--color-light);
    color: var(--color-dark)
}

.button--full {
    display: block;
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-s)
}

.button--inline {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-block;
    font: inherit
}

.cart__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-2xs);
    padding-bottom: var(--spacing-2xs);
    border-bottom: 1px solid var(--color-gray-light)
}

.cart__item:first-child {
    border-top: 1px solid var(--color-gray-light)
}

.cart__item__image {
    width: var(--spacing-2xl)
}

.cart__item__image img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover
}

.cart__item__details {
    width: 40%;
    font-weight: 300;
    font-size: var(--text-base)
}

.cart__item__details strong {
    font-weight: 700;
    text-transform: uppercase
}

.cart__item__remove {
    margin-left: auto
}

.cart__item__remove [type=submit] {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: 0;
    cursor: pointer;
    font-size: var(--text-l)
}

.cart__summary {
    list-style: none;
    margin: 0;
    padding: 0
}

@media(max-width:768px) {
    .cart__item {
        flex-wrap: wrap
    }

    .cart__item__remove {
        order: 3
    }

    .cart__item__amount {
        order: 4;
        margin-left: calc(var(--spacing-2xl) + var(--spacing-xs))
    }
}

.copy {
    font-weight: 300;
    line-height: var(--leading-copy)
}

.copy p+p {
    margin-top: calc(1rem * var(--leading-copy))
}

.copy a {
    color: currentColor;
    text-decoration: underline
}

.copy a[href^=http]:not([class]):after {
    content: " ›"
}

.dialog__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 10
}

.dialog__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px)
}

.dialog__panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--spacing-m)
}

.dialog__panel--search {
    display: block;
    padding: 0
}

.dialog {
    position: relative;
    width: 100%;
    max-width: 100ch;
    overflow-y: auto;
    background: var(--color-light);
    color: var(--color-dark);
    padding: var(--spacing-s);
    box-shadow: 0 2px 9px rgba(0, 0, 0, .05)
}

.dialog--search {
    box-shadow: none;
    background: transparent;
    max-width: none;
    padding: var(--spacing-2xl) var(--body-padding-outer)
}

.dialog--search h3 {
    font-size: var(--text-xl)
}

.dialog--search .dialog__header {
    margin-bottom: var(--spacing-l)
}

.dialog__header {
    display: flex;
    align-items: baseline;
    margin-bottom: var(--spacing-m);
    gap: var(--spacing-xs)
}

.dialog__close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: 0;
    cursor: pointer;
    margin-left: auto
}

.dialog__close .icon {
    font-size: var(--text-xl);
    line-height: 1
}

.dialog__hint {
    text-align: center;
    color: var(--color-gray-dark);
    margin: 2em 0 1em
}

.dialog__hint a {
    color: currentColor;
    text-decoration: underline
}

.dialog__footer {
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-xs)
}

.dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: flex-end
}

.dialog__actions .reset {
    margin-right: auto;
    color: currentColor;
    text-decoration: underline
}

@media(max-width:768px) {
    .dialog__panel {
        padding: var(--spacing-xs)
    }

    .dialog h3 {
        font-size: var(--text-m)
    }

    .dialog__header {
        align-items: center;
        margin-bottom: var(--spacing-s)
    }

    .dialog--search {
        padding: var(--spacing-l) var(--body-padding-outer)
    }

    .dialog--search h3 {
        font-size: var(--text-l)
    }

    .dialog--search .dialog__header {
        margin-bottom: var(--spacing-m)
    }

    .dialog__actions {
        flex-direction: column
    }

    .dialog__hint {
        margin-bottom: 0
    }

    .dialog__footer {
        padding-top: var(--spacing-s)
    }

    .dialog__actions .button,
    .dialog__actions .button--inline {
        text-align: center;
        width: 100%
    }

    .dialog__actions .button--inline {
        margin-bottom: var(--spacing-s)
    }
}

.form-amount__wrapper {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3xs)
}

.form-amount {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: textfield;
    outline: 0;
    display: block;
    width: 5em;
    text-align: center;
    padding-top: var(--spacing-2xs);
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    padding-bottom: calc(var(--spacing-2xs) - 2px);
    background: var(--color-gray-lighter);
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid currentColor;
    font: inherit
}

.form-amount::-webkit-outer-spin-button,
.form-amount::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0
}

.form-amount__label {
    font-weight: 700
}

.form-colour {
    text-align: center;
    cursor: pointer
}

.form-colour input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.form-colour input:checked~.form-colour__indicator {
    border-color: currentColor;
    box-shadow: inset 0 0 0 2px var(--color-light)
}

.form-colour__indicator {
    display: block;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: var(--color);
    margin-left: auto;
    margin-right: auto
}

.form-colour :not(input:checked)~.form-colour__indicator[style="--color: #ffffff"] {
    border: 1px solid var(--color-gray-light)
}

.form-colour :not(input:checked)~.form-colour__indicator[style="--color: #123456"] {
    border: 0
}

.form-colour__indicator[style="--color: #123456"] {
    background-image: conic-gradient(from 1.5708rad at 50% 50%, #ff3f3f, #ffee50 23%, #5cfffe 51%, #946bff 71%, #ff66bc)
}

.form-colour__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 300;
    margin-top: var(--spacing-4xs)
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    cursor: pointer
}

.form-checkbox input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.form-checkbox input:checked~.form-checkbox__box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'%3E%3Cpath d='m14.199.514 2.373 1.834-9.375 12.133L.885 9.062l1.954-2.277 3.915 3.362z' fill='%23232323' fill-rule='nonzero'/%3E%3C/svg%3E");
    background-position: center center;
    background-size: 80%;
    background-repeat: no-repeat
}

.form-checkbox__box {
    flex-shrink: 0;
    display: block;
    width: var(--spacing-s);
    height: var(--spacing-s);
    border: 2px solid var(--color-black)
}

.form-checkbox__label {
    margin-left: var(--spacing-2xs);
    position: relative;
    top: 2px
}

.form-checkbox__label a {
    text-decoration: underline
}

.form-radio {
    display: flex;
    align-items: flex-start;
    cursor: pointer
}

.form-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.form-radio input:checked~.form-radio__box {
    background-image: radial-gradient(circle at 50% 50%, currentColor 0%, currentColor 40%, #FFFFFF 40%, #FFFFFF 50%)
}

.form-radio__box {
    flex-shrink: 0;
    display: block;
    width: var(--spacing-s);
    height: var(--spacing-s);
    border: 2px solid var(--color-black);
    border-radius: 100%
}

.form-radio__label {
    margin-left: var(--spacing-2xs);
    position: relative;
    top: 2px
}

h1,
.h1 {
    font-size: var(--text-xl);
    font-size: var(--text-m);
    line-height: var(--leading-uppercase);
    text-transform: uppercase;
    font-weight: 800
}

h2,
.h2 {
    font-size: var(--text-xl);
    font-size: var(--text-m);
    line-height: var(--leading-headlines);
    font-weight: 800;
    text-transform: none
}

h3,
.h3 {
    font-size: var(--text-l);
    font-size: var(--text-m);
    line-height: var(--leading-headlines);
    font-weight: 800
}

h4,
.h4 {
    font-size: var(--text-m);
    line-height: var(--leading-headlines);
    font-weight: 800
}

h5,
.h5 {
    font-size: var(--text-base);
    line-height: var(--leading-uppercase);
    text-transform: uppercase;
    font-weight: 800
}

@media(max-width:768px) {

    h1,
    .h1,
    h2,
    .h2 {
        font-size: var(--text-l)
    }

    h3,
    .h3 {
        font-size: var(--text-s)
    }

    h4,
    .h4,
    h5,
    .h5 {
        font-size: var(--text-base)
    }
}

.logo {
    color: inherit
}

.logo__figure {
    display: block;
    max-width: 10rem;
    padding: 0;
    margin: 0;
    padding-bottom: .25rem
}

.logo svg {
    width: 100%;
    height: auto;
    fill: currentColor
}

@media(max-width:768px) {
    .logo__figure {
        max-width: 7.5rem
    }
}

.link {
    display: flex;
    align-items: center;
    gap: .15em;
    padding-bottom: .1rem;
    color: currentColor;
    transition: opacity 70ms ease-in-out
}

.link:hover {
    opacity: .85
}

.link:active {
    opacity: .75
}

.link__text {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--text-m);
    border-bottom: 2px solid
}

.link__carrot {
    width: 1em;
    height: 1em;
    background: url(/img/ic-carrot-black.svg) no-repeat center center;
    background-size: .5em
}

.link__carrot--left {
    transform: rotate(180deg);
    transform-origin: center center
}

.link--category {
    --padding-horizontal: var(--spacing-s);
    --padding-top: var(--spacing-3xs);
    --padding-bottom: var(--spacing-2xs);
    --carrot-width: 11px;
    --carrot-margin: var(--spacing-2xs);
    display: block;
    color: currentColor;
    font-weight: 800;
    text-transform: uppercase;
    font-size: var(--text-xl);
    border: 2px solid;
    padding: var(--padding-top) calc(var(--carrot-margin) + var(--carrot-width) + var(--padding-horizontal)) var(--padding-bottom) var(--padding-horizontal);
    background: url(/img/ic-carrot-black-large.svg) no-repeat bottom 50% right calc(var(--padding-horizontal));
    background-size: var(--carrot-width);
    transition: opacity 70ms ease-in-out
}

.link--category:hover {
    opacity: .85
}

.link--category:active {
    opacity: .75
}

@media(max-width:768px) {
    .link--category {
        --padding-horizontal: var(--spacing-xs);
        --padding-top: var(--spacing-4xs);
        --padding-bottom: var(--spacing-3xs);
        --carrot-width: 7px;
        --carrot-margin: var(--spacing-3xs);
        border-width: 1.5px;
        font-size: var(--text-m)
    }

    .link__text {
        font-size: var(--text-s)
    }
}

.nav-breadcrumb {
    padding-top: var(--spacing-s);
    padding-bottom: var(--module-padding-vertical);
    font-size: var(--text-xs);
    font-weight: 300
}

.nav-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0
}

.nav-breadcrumb__item {
    display: flex;
    align-items: center
}

.nav-breadcrumb__item:not(:last-child):after {
    content: "";
    display: block;
    width: 1.5em;
    height: .75em;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='21px' height='8px' viewBox='0 0 21 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path' fill='%23343434' fill-rule='nonzero' points='15.7810234 1 16.4881302 0.292893219 20.1952369 4 16.4881302 7.70710678 15.7810234 7 18.281 4.5 0.5 4.5 0.5 3.5 18.281 3.5'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    margin: 0 var(--spacing-3xs)
}

.nav-breadcrumb__item a {
    color: inherit;
    text-decoration: underline
}

@media(max-width:768px) {
    .nav-breadcrumb__list {
        row-gap: var(--spacing-3xs)
    }

    .nav-breadcrumb {
        padding-bottom: var(--spacing-s)
    }
}

.nav-fineprint__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-l);
    list-style-type: none;
    padding: 0;
    margin: 0
}

.nav-fineprint__item {
    font-weight: 300
}

.nav-fineprint__item a {
    color: currentColor
}

.nav-footer a {
    display: block;
    padding-top: var(--spacing-3xs);
    padding-bottom: var(--spacing-3xs)
}

.nav-footer__list {
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: calc(var(--spacing-3xs) * -1)
}

.nav-footer__item+.nav-footer__item {
    margin-top: var(--spacing-m)
}

.nav-footer__item a {
    color: var(--color-white)
}

.nav-footer__sublist {
    list-style: none;
    padding: 0;
    margin: 0
}

.nav-footer__subitem a {
    font-weight: 300
}

.nav-main {
    width: 50vw
}

.nav-main__list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between
}

.nav-main__item {
    display: block;
    text-transform: uppercase
}

.nav-main__item a {
    display: block;
    text-align: center;
    padding: .25em .5em;
    font-size: var(--text-m);
    font-weight: 700;
    color: inherit;
    text-decoration: none
}

@media screen and (max-width:1280px) {
    .nav-main__item a {
        padding: .25em var(--spacing-xs)
    }
}

@media(max-width:1024px) {
    .nav-main {
        display: none
    }
}

@media(max-width:1024px) {
    .nav-meta {
        margin-left: auto
    }
}

.nav-meta__list {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: var(--spacing-4xs)
}

.nav-meta__item {
    display: block;
    margin: 0 var(--spacing-3xs);
    position: relative
}

.nav-meta__interactive {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-decoration: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.nav-meta__interactive svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
    background: none
}

@media screen and (max-width:1024px) {
    .nav-meta__item--language {
        display: none
    }
}

.nav-mobile {
    display: none;
    margin: 0;
    transition: all .1s ease-in-out
}

.nav-mobile ul {
    margin: 0;
    list-style: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: calc(var(--spacing-xl) - var(--spacing-xs) + 106px);
    padding-bottom: var(--spacing-xl)
}

.nav-mobile__item {
    display: block;
    text-transform: uppercase
}

.nav-mobile__item a {
    display: block;
    text-align: center;
    padding: var(--spacing-xs) .5em;
    font-size: var(--text-m);
    font-weight: 700;
    color: inherit;
    text-decoration: none
}

@media(max-width:1024px) {
    .header--open+.nav-mobile {
        display: block;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: auto;
        background: var(--color-dark);
        color: var(--color-light)
    }
}

.nav-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: none;
    gap: var(--spacing-xs);
    align-items: center;
    margin-left: var(--spacing-4xs);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: inherit;
    padding-top: .5em;
    padding-bottom: .5em;
    font-size: var(--text-s)
}

.nav-toggle__icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 2em;
    height: 1em
}

.nav-toggle__icon span {
    display: block;
    height: 2px;
    background: currentColor;
    transform-origin: center
}

.nav-toggle--active .nav-toggle__icon span:first-child {
    transform: rotate(45deg);
    position: relative;
    top: 45%
}

.nav-toggle--active .nav-toggle__icon span:last-child {
    transform: rotate(-45deg);
    position: relative;
    top: -45%
}

.nav-toggle--active .nav-toggle__icon span:nth-child(2) {
    opacity: 0
}

@media(max-width:1024px) {
    .nav-toggle {
        display: block
    }
}

.nav-socials {
    margin-top: var(--spacing-l)
}

.nav-socials__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spacing-xs)
}

.nav-socials__item a {
    color: currentColor
}

.nav-socials__item svg {
    width: 1.5em;
    height: 1.5em;
    fill: var(--color-gray-lighter)
}

.product-card {
    background: var(--color-white);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
    align-self: self-start
}

.product-card__preview {
    width: 100%
}

.product-card a {
    display: block;
    color: inherit
}

.product-card__preview img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%
}

.product-card__head {
    padding: var(--spacing-xs);
    position: relative
}

.product-card__title {
    font-size: var(--text-m);
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: var(--spacing-2xs)
}

.product-card__meta {
    font-size: var(--text-xs);
    line-height: var(--leading-copy);
    font-weight: 300
}

.product-card__variants {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4xs);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--spacing-xs);
    background: var(--color-white)
}

.product-card__variant {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%
}

.product-card__variant[style="background-color: #ffffff"] {
    border: 1px solid var(--color-gray-light)
}

.product-card__variant[style="background-color: #123456"] {
    background-image: conic-gradient(from 1.5708rad at 50% 50%, #ff3f3f, #ffee50 23%, #5cfffe 51%, #946bff 71%, #ff66bc) !important
}

.product-card__variants-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xs);
    padding: var(--spacing-xs);
    padding-top: 0;
    font-weight: 300
}

.product-card__variants-count__indicator {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 100%;
    background-image: conic-gradient(from 1.5708rad at 50% 50%, #ff3f3f, #ffee50 23%, #5cfffe 51%, #946bff 71%, #ff66bc)
}

@media(max-width:768px) {
    .product-card__variants {
        display: none
    }

    .product-card__head {
        padding: var(--spacing-2xs)
    }

    .product-card__variants-count {
        padding: var(--spacing-2xs);
        padding-top: 0
    }

    .product-card__title {
        font-size: var(--text-s);
        margin-bottom: var(--spacing-4xs)
    }
}

.product-filter {
    font-size: var(--text-m);
    border-top: 1px solid var(--color-gray-light)
}

.product-filter__title {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-weight: 700;
    font-size: 1.125rem;
    padding: var(--spacing-2xs) 0;
    cursor: pointer;
    text-align: left
}

.product-filter__title__sub {
    font-size: 1rem;
    color: var(--color-gray-dark);
    font-weight: 400;
    margin-bottom: var(--spacing-xs)
}

.product-filter__icon {
    display: flex;
    align-items: center;
    margin-right: var(--spacing-2xs)
}

.product-filter__icon svg {
    width: 12px;
    height: auto;
    transform-origin: center center;
    transition: transform .1s ease-in-out
}

.product-filter__icon--open svg {
    transform: rotate(-180deg)
}

.product-filter__form {
    font-size: 1.125rem;
    padding-bottom: var(--spacing-xs)
}

.htmx-request .product-filter__form {
    pointer-events: none;
    opacity: .5
}

.product-filter__form--list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs)
}

.product-filter__form--grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-right: calc(var(--spacing-xs) * -1)
}

.product-filter__form--colours {
    padding-top: var(--spacing-2xs)
}

.product-filter__form--colours>* {
    width: 20%
}

.product-image {
    position: relative;
    cursor: zoom-in
}

.product-image img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%
}

.product-image__zoomed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: zoom-out;
    z-index: 1
}

.product-variants__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px
}

.product-variant {
    display: block;
    width: 3em;
    height: 3em;
    position: relative;
    color: currentColor
}

.product-variant img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: auto
}

.product-variant__frame {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent
}

.product-variant--selected .product-variant__frame {
    display: block;
    border-color: currentColor;
    box-shadow: inset 0 0 0 2px var(--color-light)
}

.product-variants__selection {
    margin-top: var(--spacing-3xs);
    font-weight: 700
}

@media(max-width:768px) {
    .product-variant {
        width: 12.5vw;
        height: 12.5vw
    }
}

.prose {
    font-size: var(--text-m);
    font-size: var(--text-s);
    font-weight: 300;
    line-height: var(--leading-copy)
}

.prose :where(p, ul, ol) {
    margin: 0
}

.prose :where(p):not(:last-child) {
    margin-bottom: var(--spacing-s)
}

.prose :where(ul, ol, h4):not(:last-child) {
    margin-bottom: var(--spacing-m)
}

.prose :where(ul, ol) {
    padding-right: 15%
}

.prose :where(ul, ol) li {
    padding-left: var(--spacing-3xs)
}

.prose :where(ul, ol) li+li {
    margin-top: var(--spacing-4xs)
}

.prose *+:where(p, ul, ol) {
    margin-top: var(--spacing-s)
}

.prose *+:where(h4) {
    margin-top: var(--spacing-m)
}

.prose :where(h2, h3):not(:first-child) {
    margin-top: var(--spacing-xl)
}

.prose a {
    text-decoration: underline
}

.prose :where(b, strong) {
    font-weight: 800
}

.prose h4 {
    font-size: var(--text-l);
    font-weight: 300;
    line-height: var(--leading-copy)
}

@media(max-width:768px) {
    .prose {
        font-size: var(--text-s)
    }

    .prose h4 {
        font-size: var(--text-m)
    }

    .prose :where(ul, ol) {
        padding-right: 0
    }
}

.section {
    /*padding-left: var(--body-padding-outer);*/
    /*padding-right: var(--body-padding-outer)*/
}

.section>:where(h1, h2, h3) {
    margin-bottom: var(--spacing-m)
}

.section--full {
    padding-left: 0;
    padding-right: 0
}

.section--breath {
    padding-top: var(--spacing-l);
    padding-bottom: var(--spacing-l)
}

.section--breath--top {
    padding-top: var(--spacing-xl)
}

.section--breath--bottom {
    padding-bottom: var(--spacing-xl)
}

@media(max-width:1024px) {
    .section>:where(h1, h2, h3) {
        margin-bottom: var(--spacing-s)
    }
}

.sidecart {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    max-width: 60ch;
    background: var(--color-gray-lighter);
    padding: var(--spacing-l);
    transition: transform .15s ease-in-out, opacity .15s ease-in-out
}

.sidecart--invisible {
    transform: translate(100%);
    opacity: 0
}

.sidecart--visible {
    transform: translate(0);
    opacity: 1
}

.sidecart__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-m)
}

.skipper {
    position: absolute;
    transform: translateY(-100%);
    display: inline-block;
    padding: var(--spacing-xs);
    background: var(--color-black);
    color: var(--color-white);
    text-transform: uppercase
}

.skipper:focus {
    transform: translateY(0);
    z-index: 1
}

.tablist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap
}

.tablist__item {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    border: 0;
    border-bottom: 1px solid var(--color-gray-light);
    color: var(--color-gray-dark);
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
    padding-top: var(--spacing-2xs);
    padding-bottom: calc(var(--spacing-3xs) + 2px)
}

.tablist__item--selected {
    padding-bottom: var(--spacing-3xs);
    border-bottom: 3px solid currentColor;
    color: var(--color-dark)
}

@media(max-width:768px) {
    .tablist__item {
        font-size: var(--text-xs)
    }
}

.tabpanel__item {
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m)
}

.text-headline {
    margin-bottom: .55em
}

.text-headline--tighter {
    margin-bottom: .3em
}

.text-paragraph {
    margin-bottom: 1.25em;
    line-height: 143%
}

.text--thin {
    font-weight: 300
}

.text--regular {
    font-weight: 400
}

.text--bold {
    font-weight: 700
}

.text--extraBold {
    font-weight: 800
}

.text--italic {
    font-family: Soleil Regular Italic
}

.text--uppercase {
    text-transform: uppercase
}

.text-hl__m {
    font-size: var(--text-l)
}

.text-hl__l {
    font-size: var(--text-xl)
}

.text-copy__m {
    font-size: var(--text-m)
}

.text-copy__l {
    font-size: var(--text-l)
}

.text-xs {
    font-size: var(--text-xs);
    line-height: 145%
}

.text-s {
    font-size: var(--text-s);
    line-height: 145%
}

.text-m {
    font-size: var(--text-m)
}

.text-l {
    font-size: var(--text-l);
    line-height: 130%
}

.text-xl {
    font-size: var(--text-xl)
}

.tippy-box[data-animation=fade][data-state=hidden] {
    opacity: 0
}

[data-tippy-root] {
    max-width: calc(100vw - 10px)
}

.tippy-box {
    position: relative;
    background-color: var(--color-dark);
    color: var(--color-light);
    font-size: var(--text-xs);
    line-height: var(--leading-copy);
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity
}

.tippy-box[data-placement^=top]>.tippy-arrow {
    bottom: 0
}

.tippy-box[data-placement^=top]>.tippy-arrow:before {
    bottom: -7px;
    left: 0;
    border-width: 8px 8px 0;
    border-top-color: initial;
    transform-origin: center top
}

.tippy-box[data-placement^=bottom]>.tippy-arrow {
    top: 0
}

.tippy-box[data-placement^=bottom]>.tippy-arrow:before {
    top: -7px;
    left: 0;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
    transform-origin: center bottom
}

.tippy-box[data-placement^=left]>.tippy-arrow {
    right: 0
}

.tippy-box[data-placement^=left]>.tippy-arrow:before {
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
    right: -7px;
    transform-origin: center left
}

.tippy-box[data-placement^=right]>.tippy-arrow {
    left: 0
}

.tippy-box[data-placement^=right]>.tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
    transform-origin: center right
}

.tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11)
}

.tippy-arrow {
    width: 1em;
    height: 1em;
    color: var(--color-dark)
}

.tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid
}

.tippy-content {
    position: relative;
    padding: var(--spacing-4xs) var(--spacing-3xs);
    z-index: 1
}

.bulletlist {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl)
}

.bulletlist__list {
    background: var(--color-gray-lighter);
    padding: var(--spacing-l);
    padding-bottom: var(--spacing-s);
    list-style: none;
    margin: 0;
    columns: 2;
    gap: var(--spacing-s)
}

.bulletlist__list--dark {
    background: var(--color-dark);
    color: var(--color-light)
}

.bulletlist__list li {
    position: relative;
    margin-bottom: var(--spacing-s);
    padding-left: calc(var(--spacing-s) * 2);
    font-size: var(--text-m);
    font-weight: 300;
    line-height: var(--leading-copy);
    break-inside: avoid
}

.bulletlist__list li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: calc(var(--spacing-s) * 1.25);
    height: calc(var(--spacing-s) * 1.25);
    background: url(/img/ic-check-large.svg);
    background-size: 100% 100%
}

.contact {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl)
}

.contact__box {
    background: var(--color-gray-lighter);
    padding: var(--spacing-l);
    padding-bottom: var(--spacing-xl)
}

.contact__text {
    margin-top: var(--spacing-s);
    margin-bottom: var(--spacing-s)
}

.contact__buttons {
    display: flex;
    gap: var(--spacing-xs)
}

@media(max-width:768px) {
    .contact {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .contact h3 {
        font-size: var(--text-l)
    }

    .contact__box {
        padding: var(--spacing-s);
        padding-bottom: var(--spacing-l)
    }

    .contact__text {
        margin-top: var(--spacing-xs);
        margin-bottom: var(--spacing-xs)
    }

    .contact__buttons {
        flex-direction: column
    }

    .contact__buttons .button {
        text-align: center
    }
}

@media(min-width:1800px) {
    .contact__box {
        /*grid-column-start: 4;*/
        /*grid-column-end: 10*/
    }
}

.details-table--columned {
    columns: 2
}

.details-table__row {
    display: flex;
    padding: var(--spacing-xs) 0
}

.details-table__row:not(:last-child) {
    border-bottom: 1px solid var(--color-gray-lighter)
}

.details-table--compressed .details-table__row {
    border: 0;
    padding: var(--spacing-4xs) 0
}

.details-table__row a {
    text-decoration: underline
}

.details-table__label {
    font-weight: 700;
    width: 33%;
    padding-right: var(--spacing-3xs)
}

.details-table--compressed .details-table__label {
    font-weight: 400;
    width: 25%
}

.details-table__value {
    font-weight: 400
}

.details-table--compressed .details-table__value {
    font-weight: 300
}

@media(max-width:768px) {
    .details-table--columned {
        columns: 1
    }

    .details-table__row {
        flex-wrap: wrap
    }

    .details-table__label,
    .details-table--compressed .details-table__label {
        width: 100%
    }
}

.footer__top {
    background-color: var(--color-dark);
    color: var(--color-light);
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl)
}

.footer__top>* {
    grid-column: auto / span 3
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-s) var(--body-padding-outer);
    background-color: var(--color-gray-lighter)
}

.footer__credits {
    font-weight: 700
}

@media(max-width:1024px) {
    .footer__top {
        --row-gap: var(--spacing-xl);
        padding-top: var(--spacing-m);
        padding-bottom: var(--spacing-m)
    }

    .footer__top>* {
        grid-column: 1 / -1
    }

    .footer__bottom {
        display: block
    }

    .footer__credits {
        margin-bottom: var(--spacing-m)
    }
}

.form__row+.form__row {
    margin-top: var(--grid-gap)
}

.form__row--hidden {
    display: none;
    margin-top: 0
}

.form-field--align__left {
    text-align: left
}

.form-field--align__center {
    text-align: center
}

.form-field--align__right {
    text-align: right
}

.form-field__label {
    font-weight: 700;
    display: block;
    margin-bottom: var(--spacing-3xs)
}

.form-field__label--required:after {
    content: "*"
}

.form-field__input {
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    display: block;
    width: 100%;
    padding-top: var(--spacing-2xs);
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    padding-bottom: calc(var(--spacing-2xs) - 2px);
    background: var(--color-gray-lighter);
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid currentColor;
    font: inherit
}

.form-field__input:focus,
.form-field__input--errors {
    border: 2px solid currentColor;
    padding-top: calc(var(--spacing-2xs) - 2px);
    padding-left: calc(var(--spacing-xs) - 2px);
    padding-right: calc(var(--spacing-xs) - 2px)
}

.form-field__input--errors {
    color: var(--color-red)
}

.form-field__errors {
    background: var(--color-red);
    color: var(--color-white);
    font-size: var(--text-xs);
    list-style: none;
    margin: 0;
    padding-top: 0;
    padding-left: var(--spacing-3xs);
    padding-right: var(--spacing-3xs);
    padding-bottom: var(--spacing-4xs)
}

.header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--spacing-xl) var(--body-padding-outer) calc(var(--spacing-m) - .25em) var(--body-padding-outer);
    color: var(--color-dark)
}

.header .logo {
    margin-right: var(--spacing-s)
}

.header--stacked {
    color: var(--color-light);
    background: linear-gradient(to bottom, rgba(52, 52, 52, .85), rgba(52, 52, 52, 0));
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100
}

@media(max-width:1024px) {
    .header {
        align-items: center;
        transition: background .1s ease-in-out, color .1s ease-in-out
    }
}

@media(max-width:768px) {
    .header {
        padding: var(--spacing-xs) var(--body-padding-outer) calc(var(--spacing-xs) - .25em) var(--body-padding-outer)
    }
}

@media(max-width:1024px) {
    .header--open {
        background: var(--color-dark);
        color: var(--color-light);
        z-index: 20;
        position: fixed;
        width: 100%
    }
}

.image {
    margin-top: var(--module-padding-vertical);
    margin-bottom: var(--module-padding-vertical)
}

.image img {
    width: 100%;
    height: auto
}

figure figcaption {
    margin-top: var(--spacing-3xs);
    font-size: var(--text-xs)
}

.introstage {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr
}

.introstage>* {
    grid-column: 1 / -1;
    grid-row: 1 / -1
}

@media(max-width:1024px) {
    .introstage__wrapper {
        height: 65vh
    }
}

.introstage__wrapper {
    height: 77vh
}

.introstage__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.introstage__content {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: var(--spacing-m) var(--body-padding-outer);
    z-index: 1
}

.news-intro .image {
    margin-top: 0;
    margin-bottom: var(--spacing-l)
}

.news-intro .image .grid__column--inner {
    grid-column-start: 4;
    grid-column-end: 10
}

.news-intro time {
    font-weight: 800;
    display: block;
    margin-top: var(--spacing-4xs)
}

.news-intro .richtext {
    margin-top: 0;
    margin-bottom: var(--spacing-s)
}

.news-intro+.richtext {
    margin-top: 0
}

.product-details {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl)
}

.product-details__grid>* {
    grid-column: span 6 / span 6
}

.product-details__description {
    max-width: 100ch;
    line-height: var(--leading-copy);
    font-weight: 300
}

@media(max-width:768px) {
    .product-details__grid {
        --row-gap: 0
    }

    .product-details__grid>* {
        grid-column: 1 / -1
    }

    .product-details__grid>:not(:last-child) {
        border-bottom: 1px solid var(--color-gray-lighter)
    }
}

.product-grid {
    --column-gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-3xl)
}

.product-grid__sidebar {
    grid-column: span 3 / span 3
}

.product-grid__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--spacing-2xs)
}

.product-grid__title button {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    font-size: var(--text-xs);
    font-weight: 300;
    cursor: pointer
}

.product-grid__products {
    grid-column: span 9 / span 9
}

.product-grid__products .grid {
    --columns: 9
}

.product-grid__products .grid>* {
    grid-column: span 3 / span 3
}

.product-grid__empty {
    position: sticky;
    top: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width:1024px) {
    .product-grid__filters__trigger {
        display: none
    }
}

@media(max-width:1024px) {
    .product-grid {
        --column-gap: 1
    }

    .product-grid__sidebar,
    .product-grid__products {
        grid-column: 1 / -1
    }

    .product-grid__products .grid {
        --columns: 2;
        gap: var(--spacing-xs)
    }

    .product-grid__products .grid>* {
        grid-column: span 1
    }

    .product-grid__filters__trigger {
        margin-bottom: var(--spacing-s);
        display: flex;
        justify-content: space-between
    }

    .product-grid__filters__trigger span {
        display: flex;
        align-items: center
    }

    .product-grid__filters__trigger span svg {
        width: 12px;
        height: auto;
        transform-origin: center center;
        transition: transform .1s ease-in-out
    }

    [data-expanded=true] .product-grid__filters__trigger span svg {
        transform: rotate(-180deg)
    }

    .product-grid__filters__list {
        height: 0;
        overflow: hidden;
        transition: height .2s ease-in-out
    }

    [data-expanded=true] .product-grid__filters__list {
        height: auto
    }
}

.product-hero {
    margin-top: var(--spacing-l);
    --column-gap: var(--spacing-l)
}

.product-hero__image {
    grid-column: span 6 / span 6
}

.product-hero__info {
    grid-column: span 5 / span 5;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m)
}

.product-hero__meta {
    margin-top: var(--spacing-4xs);
    font-size: var(--text-m);
    line-height: var(--leading-copy);
    font-weight: 300
}

.product-hero__hint {
    color: var(--color-gray-dark)
}

.product-hero__hint a {
    color: currentColor;
    text-decoration: underline
}

.product-hero__cta .product-add>* {
    margin-top: var(--spacing-3xs)
}

@media(max-width:768px) {
    .product-hero {
        --columns: 1
    }

    .product-hero__image,
    .product-hero__info {
        grid-column: 1 / -1
    }
}

.products {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl)
}

.products__grid {
    margin-top: var(--spacing-s);
    margin-bottom: var(--spacing-s)
}

.products__grid>* {
    grid-column: span 3 / span 3
}

.products__more {
    display: flex;
    justify-content: flex-end
}

@media(max-width:768px) {
    .products__grid {
        gap: var(--spacing-xs)
    }

    .products__grid>* {
        grid-column: span 6
    }
}

.richtext {
    /*margin-top: var(--module-padding-vertical);*/
    margin-bottom: var(--module-padding-vertical)
}

.richtext .grid__column--inner {
    grid-column-start: 4;
    grid-column-end: 10
}

@media screen and (max-width:960px) {
    .richtext .grid__column--inner {
        grid-column-start: 1;
        grid-column-end: 13
    }
}

.search__query {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-size: var(--text-xl);
    font-weight: 300
}

.search__results {
    margin-top: var(--spacing-l)
}

.search__noresults {
    font-size: var(--text-l);
    font-weight: 300;
    color: var(--color-gray-dark)
}

.search__results__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    margin: 0;
    padding: 0
}

.search__result {
    display: flex;
    gap: var(--spacing-s)
}

.search__result figure {
    width: var(--spacing-3xl);
    flex-shrink: 0
}

.search__result img {
    width: 100%;
    height: auto
}

.search__result div {
    max-width: 80ch
}

.search__result h4 {
    font-size: var(--text-l)
}

.search__result p {
    font-weight: 300;
    font-size: var(--text-s);
    line-height: var(--leading-copy);
    margin: 0;
    margin-top: var(--spacing-4xs)
}

@media(max-width:768px) {
    .search__query {
        font-size: var(--text-l)
    }

    .search__results {
        margin-top: var(--spacing-m)
    }

    .search__noresults {
        font-size: var(--text-m)
    }

    .search__result {
        flex-direction: column;
        gap: var(--spacing-2xs)
    }

    .search__result h4 {
        font-size: var(--text-m)
    }

    .search__result p {
        font-size: var(--text-xs)
    }
}

.teaser-card {
    --row-gap: calc(var(--module-padding-vertical) * .5);
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl)
}
.teaser-card .grid {gap: var(--spacing-xl);}
.teaser-card-item {
    grid-column: auto / span 12;
    display: flex;
    color: currentColor;
    gap:var(--spacing-xl)
}

.teaser-card-item--half {
    grid-column: auto / span 6;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: flex-end
}

.teaser-card-item:hover .teaser-card-item__image img {
    /*opacity: .85*/
}

.teaser-card-item:not(.teaser-card-item--half)>* {
    width: 50%
}

.teaser-card-item__content {
    --padding: 0;
    padding: 0;
    /*background: var(--color-gray-lighter) url(/img/ic-carrot-circle-black.svg) no-repeat calc(100% - var(--padding)) calc(100% - var(--padding));*/
    /*background-size: var(--spacing-m);*/
    flex-grow: 1
}
.teaser-card-item:nth-of-type(2n) .teaser-card-item__content{
    order:2;
}
.teaser-card-item__text {
    /*max-width: 60ch;*/
    font-weight: 300;
    font-size: var(--text-m);
    font-size: var(--text-s);
    line-height: var(--leading-copy);
    margin-bottom: 0;
    /*padding-right: var(--spacing-xl);*/
    margin-top: 1em;
}
.teaser-card-item__text ul,.teaser-card-item__text ol{
    padding-left: 1em;
}
.teaser-card-item__text  li{
    list-style: initial;
}
.teaser-card-item__text p{margin: 5px 0 0.6em;}
.teaser-card-item__image {
    aspect-ratio: 3 / 2;
    background: var(--color-light)
}

.teaser-card-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .1s ease-in-out
}

@media(min-width:1200px) {
    .grid--thirdify .teaser-card-item--half {
        grid-column: auto / span 4
    }
}

@media(min-width:1024px) {
    .grid--thirdify .teaser-card-item--half .teaser-card-item__content {
        --padding: var(--spacing-s)
    }
}

@media(max-width:1024px) {
    .teaser-card {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .teaser-card-item--half {
        grid-column: auto / span 12
    }

    .teaser-card-item {
        flex-direction: column-reverse;
        flex-wrap: wrap
    }

    .teaser-card-item:not(.teaser-card-item--half)>* {
        width: 100%
    }
}

@media(max-width:768px) {
    .teaser-card .grid {
        gap: 0px;
    }
    .teaser-card-item{
        gap:0px
    }
    .teaser-card-item .h1 {
        font-size: var(--text-m)
    }

    .teaser-card-item__text {
        font-size: var(--text-s);
        padding-right: 0px
    }

    .teaser-card-item__content {
        --padding: var(--spacing-xs);
        padding-top: var(--spacing-s);
        background-position: calc(100% - var(--padding)) calc(100% - var(--spacing-s))
    }
    .teaser-card-item:nth-of-type(2n) .teaser-card-item__content {
        order: 0;
    }
}

.teaser-links {
    margin-top: var(--module-padding-vertical);
    margin-bottom: var(--module-padding-vertical)
}

.teaser-links>* {
    grid-column: auto / span 6
}

.teaser-links__text {
    font-size: var(--text-xl);
    line-height: var(--leading-copy);
    font-weight: 300;
    padding-right: var(--spacing-m)
}

.teaser-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs)
}

@media(max-width:1024px) {
    .teaser-links>* {
        grid-column: 1 / -1
    }

    .teaser-links__text {
        margin-bottom: var(--spacing-2xs);
        padding-right: 0
    }
}

@media(max-width:768px) {
    .teaser-links {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .teaser-links__text {
        font-size: var(--text-m)
    }

    .teaser-links__list {
        gap: var(--spacing-3xs)
    }
}

.teaser-news {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl)
}

.teaser-news .grid {
    --row-gap: var(--spacing-xl)
}

.teaser-news .grid>* {
    grid-column: span 4 / span 4
}

.teaser-news .h3~.grid {
    margin-top: var(--spacing-m)
}

.teaser-news-item:hover figure img {
    /*opacity: .85*/
}

.teaser-news-item figure {
    aspect-ratio: 3 / 2;
    margin-bottom: var(--spacing-2xs);
    background: var(--color-light)
}

.teaser-news-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .1s ease-in-out
}

.teaser-news-item__date {
    display: block;
    margin-bottom: var(--spacing-2xs);
    font-size: var(--text-s);
    font-weight: 800
}

.teaser-news-item__headline {
    font-weight: 300;
    padding-right: var(--spacing-l)
}

@media(max-width:1024px) {
    .teaser-news {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .teaser-news .h3~.grid {
        margin-top: var(--spacing-s)
    }

    .teaser-news .grid {
        --row-gap: var(--spacing-m)
    }
}

@media(max-width:768px) {
    .teaser-news .grid>* {
        grid-column: 1 / -1
    }
}

.teaser-text {
    margin-top: var(--module-padding-vertical);
    margin-bottom: var(--module-padding-vertical);
    position: relative;
    overflow: hidden
}

.teaser-text--with-bg {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--module-padding-vertical);
    padding-bottom: var(--module-padding-vertical)
}

.teaser-text--dark {
    color: var(--color-light)
}

.teaser-text--dark .link__carrot {
    filter: invert(1)
}

.teaser-text :where(h1, h2, h3) {
    margin-bottom: var(--spacing-s)
}

.teaser-text.grid .teaser-text__link {
    float: right;
    margin-top: var(--spacing-m)
}

.teaser-text .grid {
    --row-gap: 0
}

.teaser-text .grid :where(h1, h2, h3, .teaser-text__text) {
    grid-column: 1 / 8
}

.teaser-text .grid .teaser-text__text--lg {
    grid-column: 1 / 9
}

.teaser-text .grid .teaser-text__link {
    grid-column: 9 / 13;
    align-self: self-end;
    justify-self: self-end;
    text-align: right
}

.teaser-text__text {
    font-size: var(--text-l);
    font-size: var(--text-s);
    line-height: var(--leading-copy);
    font-weight: 300
}

.teaser-text__text--lg {
    font-size: var(--text-xl)
}

.teaser-text__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.teaser-text__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.teaser-text__blurrer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, .5)
}

.teaser-text--dark .teaser-text__blurrer {
    background: rgba(0, 0, 0, .5)
}

@media(max-width:1024px) {
    .teaser-text .grid :where(h1, h2, h3, .teaser-text__text) {
        grid-column: 1 / -1
    }

    .teaser-text .grid .teaser-text__text--lg {
        grid-column: 1 / -1
    }

    .teaser-text .grid .teaser-text__link {
        grid-column: 1 / -1;
        margin-top: var(--spacing-s)
    }

    .teaser-text.grid .teaser-text__link {
        margin-top: var(--spacing-s)
    }

    .teaser-text__text--lg {
        margin-bottom: var(--spacing-s)
    }
}

@media(max-width:768px) {
    .teaser-text {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .teaser-text__text {
        font-size: var(--text-s)
    }

    .teaser-text__text--lg {
        font-size: var(--text-m)
    }

    .teaser-text--with-bg {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl)
    }
}

.teaser-grid .grid {
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-2xl);
    /*--row-gap: var(--spacing-l);*/
    /*gap: var(--spacing-xl);*/
    grid-column-gap: var(--spacing-xl);
    grid-row-gap: var(--spacing-xl);
}

.richtext .teaser-grid .grid{
    margin-top: 0;
     
}
.teaser-grid .h2~.grid {
    margin-top: 0
}

.teaser-grid-item:hover .teaser-grid-item__image img {
    /*opacity: .85*/
}

.teaser-grid-item__image {
    aspect-ratio: 3 / 2;
    background: var(--color-light)
}

.teaser-grid-item__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all .1s ease-in-out
}

.teaser-grid-item__content {
    padding-top: var(--spacing-xs);
    
}

.teaser-grid-item__headline {
    margin-bottom: var(--spacing-xs)
}

.teaser-grid-item__headline a {
    color: currentColor
}

.teaser-grid-item__text {
    font-weight: 300;
    font-size: var(--text-m);
    font-size: var(--text-s);
    line-height: var(--leading-copy);
    margin: 0
}
.teaser-grid-item__text ul,.teaser-grid-item__text ol{
    padding-left: 1em;
}
.teaser-grid-item__text  li{
    list-style: initial;
}
.teaser-grid-item__text p{
    margin:5px 0 0.6em
}
.teaser-grid-item {
    grid-column: auto / span 6
}

@media screen and (max-width:720px) {
    .teaser-grid {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        --row-gap: var(--spacing-m)
    }
    
    .richtext .teaser-grid {
        margin-top: 0px;
        margin-bottom: var(--spacing-xl);
        
    }
    .teaser-grid .grid {
    
    grid-column-gap: var(--column-gap);
    }
    .teaser-grid-item {
        grid-column: auto / span 12
    }

    .teaser-grid-item__headline {
        font-size: var(--text-m);
        margin-bottom: var(--spacing-4xs)
    }

    .teaser-grid-item__content {
        padding-top: var(--spacing-s)
    }

    .teaser-grid-item__text {
        font-size: var(--text-s)
    }
}

@media(max-width:1024px) {
    .teaser-grid {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }
    
    .richtext .teaser-grid {
        margin-top: 0;
        margin-bottom: 0
    }
    
    .richtext .teaser-grid .grid{
        margin-bottom: var(--spacing-xl);
    }
}

@media screen and (min-width:1980px) {
    .teaser-grid-item {
        /*grid-column: auto / span 4*/
    }
}

.timeline {
    --timeline-stream-border-threshold: var(--spacing-2xl);
    --timeline-stream-border-size: 1px;
    --timeline-stream-border-color: var(--color-gray-dark);
    --timeline-stream-item-padding: var(--spacing-2xl);
    --timeline-stream-item-headline-size: var(--text-2xl);
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-3xl)
}

.timeline__stream {
    max-width: 85rem;
    margin: 0 auto;
    padding: 0;
    list-style: none
}

.timeline__stream--start-threshold:before,
.timeline__stream--end-threshold:after {
    content: "";
    display: block;
    height: var(--timeline-stream-border-threshold);
    width: 1px;
    margin-left: calc(50% - var(--timeline-stream-border-size))
}

.timeline__stream--start-threshold:before {
    background: linear-gradient(to bottom, transparent, var(--timeline-stream-border-color))
}

.timeline__stream--end-threshold:after {
    background: linear-gradient(to top, transparent, var(--timeline-stream-border-color))
}

.timeline__loadmore {
    text-align: center;
    padding-top: var(--spacing-4xs)
}

.timeline__loadmore:before {
    content: "";
    display: block;
    height: var(--timeline-stream-border-threshold);
    width: var(--timeline-stream-border-size);
    margin-left: calc(50% - var(--timeline-stream-border-size));
    background: linear-gradient(to bottom, transparent 50%, var(--timeline-stream-border-color) 50%);
    background-size: var(--timeline-stream-border-size) 1rem
}

.timeline__item {
    width: 50%;
    padding-bottom: var(--spacing-l);
    position: relative
}

.timeline__item:before {
    content: "";
    display: block;
    width: calc(var(--timeline-stream-item-padding) - var(--spacing-xs));
    height: var(--timeline-stream-border-size);
    background: var(--timeline-stream-border-color);
    position: absolute;
    top: calc(var(--leading-uppercase) * var(--timeline-stream-item-headline-size) * .5 + var(--timeline-stream-border-size))
}

.timeline__item:nth-child(2n) {
    border-left: var(--timeline-stream-border-size) solid var(--timeline-stream-border-color);
    margin-left: calc(50% - var(--timeline-stream-border-size));
    padding-left: var(--timeline-stream-item-padding)
}

.timeline__item:nth-child(2n):before {
    left: 0
}

.timeline__item:nth-child(odd) {
    border-right: var(--timeline-stream-border-size) solid var(--timeline-stream-border-color);
    margin-right: calc(50% - var(--timeline-stream-border-size));
    padding-right: var(--timeline-stream-item-padding);
    text-align: right
}

.timeline__item:nth-child(odd):before {
    right: 0
}

.timeline__item__overline {
    margin-bottom: var(--spacing-l);
    font-size: var(--timeline-stream-item-headline-size);
    line-height: var(--leading-uppercase);
    text-transform: uppercase;
    font-weight: 800
}

.timeline__item__headline {
    margin: 0;
    text-align: left;
    font-weight: 800;
    font-size: var(--text-m);
    line-height: var(--leading-copy);
    margin-bottom: var(--spacing-4xs)
}

.timeline__item__text {
    text-align: left
}

.timeline__item__media {
    margin-top: var(--spacing-xs);
    text-align: left
}

.timeline__item__media img {
    width: 100%;
    height: auto
}

.timeline__item__caption {
    margin-top: var(--spacing-4xs);
    font-size: var(--text-2xs)
}

@media screen and (max-width:768px) {
    .timeline {
        --timeline-stream-item-padding: var(--spacing-s);
        --timeline-stream-item-headline-size: var(--text-xl);
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl)
    }

    .timeline__headline,
    .timeline__subheadline {
        text-align: left
    }

    .timeline__stream--start-threshold:before,
    .timeline__stream--end-threshold:after {
        margin-left: 0
    }

    .timeline__loadmore {
        text-align: left
    }

    .timeline__loadmore:before {
        margin-left: 0
    }

    .timeline__item {
        width: 100%;
        margin-left: 0 !important;
        padding-bottom: var(--spacing-m);
        padding-right: var(--spacing--x) !important
    }

    .timeline__item:nth-child(odd) {
        border-right: 0;
        margin-right: 0;
        border-left: var(--timeline-stream-border-size) solid var(--timeline-stream-border-color);
        padding-left: var(--timeline-stream-item-padding);
        text-align: left
    }

    .timeline__item:nth-child(odd):before {
        right: auto;
        left: 0
    }

    .timeline__item__overline {
        margin-bottom: var(--spacing-xs)
    }

    .timeline__item__headline,
    .timeline__item__text .prose {
        font-size: var(--text-xs)
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.hidden,
[x-cloak] {
    display: none
}