/* Text image */

.text-image .portrait {
    max-width: min(26rem, 90%, 70vw);
    margin-inline: auto;
}

.text-image .square {
    max-width: min(26rem, 100%, 80vw);
    margin-inline: auto;
}

.text-image .text h1, .text-image .text h2, .text-image .text h3 {
    translate: var(--indent-min-1) 0;
}


/* Multi columns */

[class*="columns-"].has-images-landscape .h4, [class*="columns-"].has-images-square .h4 {
    margin-top: 1.125em;
}


/* Quote or headline */

blockquote.quotes:before {
    content: open-quote;
    margin-right: -0.2em;
}

blockquote.quotes:after {
    content: close-quote;
    margin-left: -0.2em;
}

blockquote.quotes {
    quotes: "“" "”" "‘" "’";
}

blockquote {
    font-weight: var(--heavy);
    font-size: calc(var(--h3) * 1.125);
    line-height: 1.1;
    margin-block: .375em;
}

blockquote.small {
    font-size: calc(var(--h4) * 1.125);
    line-height: 1.3;
}

blockquote.smaller {
    font-size: var(--h4);
    line-height: 1.3;
}

blockquote+figcaption {
    margin-inline: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    line-height: 1.25;
}

blockquote+figcaption .name {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

blockquote+figcaption .name svg {
    transform: scaleX(-1);
    width: auto;
    height: .375em;
    margin-top: .375em;
}

.quote {
    --row-gap: .5rem;
    --column-gap: 1rem;
}

.quote .image {
    --flex-basis: 200px;
    max-width: min(75vw, 20rem);
    margin-inline: auto;
}

.quote .text {
    --flex-basis: 400px;
}

.review figure {
    padding-left: var(--site-padding);
}

.review .stars {
    font-size: 1.125rem;
}

@media(min-width: 992px) {
    .review figure {
        padding-left: 0;
    }

    .review.container-sm {
        --max-width: calc(var(--container-sm) + var(--space-5));
    }

    .review .stars {
        font-size: 1.375rem;
        margin-left: -1em;
    }
}

@media(min-width: 1200px) {
    .review .stars {
        margin-left: -2.25em;
    }
}


/* Streamer */

.streamer {
    /* rotate: -1deg; */
    line-height: 1.32;
}

.flagline {
    display: flex;
    justify-content: center;
    column-gap: min(3%, 1rem);
    margin-inline: auto;
    padding-inline: 1%;
}

.flagline .flags {
    max-width: min(160px, 33.33%);
}

@media(max-width: 480px) {
    .flagline .flags:nth-child(n+4) {
        display: none;
    }
}

@media(max-width: 768px) {
    .flagline .flags:nth-child(n+5) {
        display: none;
    }
}




/* Foldouts (details summary, also partially used for FAQ items) */

details.foldout {
    border-bottom: 1px solid currentColor;
}

details.foldout summary {
    display: flex;
    font-weight: bold;
    padding-block: .75rem;
    transition: 200ms ease-in-out, color 0ms;
}

details.foldout summary:before {
    content: '';
    width: 0;
    height: 0;
    border-top: .25rem solid transparent;
    border-bottom: .25rem solid transparent;
    border-left: .375rem solid currentColor;
    margin-top: .375rem;
    margin-right: .5rem;
    transition: transform 100ms;
}

details.foldout[open] summary {
    padding-block: 1.25rem;
}

details.foldout[open] summary:before {
    color: var(--orange);
    transform: rotate(90deg);
}

details.foldout summary:hover {
    color: var(--orange);
}

details.foldout summary:active {
    color: var(--orange);
    background-color: var(--darken);
    transform: translateY(1px);
}

details.foldout .text {
    max-width: 46em;
    margin-top: -.75rem;
    padding-bottom: .5rem;
    padding-left: .875rem;
}


/* Image gallery */

.no-js .image-slider {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
}

.no-js .image-slider>* {
    flex-grow: 1;
    flex-basis: 400px;
    max-width: var(--container-xs);
}

.js .image-slider {
    align-items: center !important;
}

.image-slider .keen-slider__slide>* {
    --unit: .5rem;
    padding: calc(var(--unit) * 1.5) var(--unit);
    box-sizing: content-box;
}

.image-slider[data-variation="image-portrait"] .keen-slider__slide>* {
    --unit: 1rem;
}

@media(min-width: 768px) {
    .image-slider .keen-slider__slide>* {
        --unit: 1rem;
    }
}

.image-slider figure {
    max-height: min(85vh, 36rem);
}

.image-slider figure.variation-1 img {
    transform: rotate(var(--tilt-min-1));
}

.image-slider figure.variation-2 img {
    transform: translateY(calc(var(--unit) * 1.125)) rotate(var(--tilt-plus-3));
}

.image-slider figure.variation-3 img {
    transform: translateY(calc(var(--unit) * .75)) rotate(var(--tilt-min-3));
}

.image-slider figure.variation-4 img {
    transform: translateY(calc(var(--unit) * -.75)) rotate(var(--tilt-plus-2));
}

.image-slider figure.variation-5 img {
    transform: translateY(calc(var(--unit) * -1.125)) rotate(var(--tilt-min-3));
}

.image-slider figure.variation-6 img {
    transform: translateY(calc(var(--unit) * .375)) rotate(var(--tilt-plus-1));
}

.image-slider figure.variation-7 img {
    transform: rotate(var(--tilt-min-4));
}

.image-slider figure.variation-8 img {
    transform: translateY(calc(var(--unit) * -.625)) rotate(var(--tilt-plus-1));
}


/* Video */

.no-js .lazyload-video {
    display: none;
}

.js .lazyload-video {
    width: 100%;
    position: relative !important;
    overflow: hidden;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.js .lazyload-video::before {
    content: '';
    width: 100%;
    display: block;
    position: relative;
    padding-top: 56.25%;
    background-color: #000;
}

.js .lazyload-video .play-btn {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23004C43' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E");
    background-position: 50%;
    background-size: calc(35px + 10%) auto;
    background-repeat: no-repeat;
}

.js .lazyload-video .play-btn:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23289928' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E");
}

.js .lazyload-video iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    border: 0;
}


/* Product feature */

.product-feature {
    align-items: center;
    gap: 1rem 2.5rem;
}

.product-feature:has(a:active:not(.button)) {
    transform: translateY(2px);
    opacity: .95;
}

.product-feature figure {
    max-width: 75vw;
    position: relative;
}

.product-feature .price {
    font-size: max(20px, 1.125rem);
    width: 5em;
    transform: rotate(-8deg);
    bottom: 12%;
    left: calc(100% - 4em);
    right: auto;
}

.product-feature .extra-sticker, .product-feature .sale-sticker {
    z-index: 2;
    top: 10%;
    right: calc(100% - 4em);
    bottom: auto;
    transform: rotate(-20deg);
    font-size: max(18px, 1.125rem);
    width: 6.25em;
}

.product-feature .sale-sticker {
    font-size: max(20px, 1.25rem);
    width: 5em;
}

.product-feature figure:hover .price {
    transform: rotate(0deg);
}

.product-feature figure a {
    display: block;
}

.product-feature figure a:hover {
    rotate: -3deg;
}

.product-feature .title a {
    text-decoration: none;
    color: var(--green-dark);
}

.product-feature .title a:hover {
    text-decoration: none;
    color: var(--green);
}

.product-feature .text {
    flex-grow: 1.25;
}

.product-feature .description {
    max-width: 25rem;
}

.product-feature .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}



/* Form block */

.form-block {
    scroll-margin-top: var(--nav-height);
}


/* USPs (not really a template flexblock but still a block that's repeated throughout the site) */

.usps [class*="columns-"] {
    --column-gap: calc(var(--site-padding) * 2);
    --row-gap: 3rem;
}

.usps [class*="columns-"] [class*="column-"] {
    text-align: center;
}

.usps [class*="columns-"] img, .usps [class*="columns-"] svg {
    width: auto;
    height: 6.5em;
    align-self: flex-start;
}

.usps [class*="columns-"] .text {
    max-width: min(24em, 75vw);
    text-align: left;
    margin-inline: auto;
}

.usps [class*="columns-"] .btn {
    margin-top: auto;
}

@media (min-width: 768px) {
    .usps [class*="columns-"] [class*="column-"] {
        text-align: left;
    }

    .usps [class*="columns-"] img, .usps [class*="columns-"] svg {
        height: 8em;
    }

    .usps [class*="columns-"] .btn {
        align-self: flex-start;
    }
}

.icon-recycle, .icon-heart, .icon-carrot {
    overflow: visible;
}

.inview .icon-recycle g {
    animation: recycle 7.5s infinite cubic-bezier(.78, .05, .46, 1);
    transform-origin: center;
}

.inview .icon-recycle g:last-child {
    animation-delay: 50ms;
}

@keyframes recycle {
    0% {
        transform: rotate(0deg);
    }
    15% {
        transform: rotate(1turn);
    }
    100% {
        transform: rotate(1turn);
    }
}

.inview .icon-heart g {
    --x1: -6%;
    --x2: -10%;
    --x3: .4%;
    --r1: -8deg;
    --r2: -13deg;
    --r3: .5deg;
    animation: heart 7.5s infinite;
    transform-origin: right bottom;
    animation-delay: 2.5s;
}

.inview .icon-heart g:last-child {
    --x1: 6%;
    --x2: 10%;
    --x3: -.4%;
    --r1: 8deg;
    --r2: 13deg;
    --r3: -.5deg;
    transform-origin: left bottom;
    animation-delay: 2.52s;
}

@keyframes heart {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    5% {
        transform: translate(var(--x1), -15%) rotate(var(--r1));
    }
    10% {
        transform: translate(var(--x1), -15%) rotate(var(--r1));
    }
    13% {
        transform: translate(var(--x2), -23%) rotate(var(--r2));
    }
    15% {
        transform: translate(var(--x3), 0%) rotate(var(--r3));
    }
    17% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.inview .icon-carrot, .inview .icon-carrot .leaf {
    --r0: -31deg;
    --r1: -30deg;
    --r2: 6deg;
    --r3: -.5deg;
    --s0: .63;
    --s1: .65;
    --s2: 1.1;
    --s3: .99;
    animation: carrot 7.5s infinite;
    animation-delay: 5s;
    transform-origin: left bottom;
}

.inview .icon-carrot .leaf {
    --r0: -21deg;
    --r1: -20deg;
    --r2: 8deg;
    --r3: -1deg;
    --s0: .53;
    --s1: .55;
    --s2: 1.1;
    --s3: .99;
    transform-origin: center;
}

@keyframes carrot {
    0% {
        transform: scale(1) rotate(0);
    }
    6% {
        transform: scale(var(--s0)) rotate(var(--r0));
    }
    9% {
        transform: scale(var(--s1)) rotate(var(--r1));
    }
    18% {
        transform: scale(var(--s1)) rotate(var(--r1));
    }
    20% {
        transform: scale(var(--s2)) rotate(var(--r2));
    }
    23% {
        transform: scale(var(--s3)) rotate(var(--r3));
    }
    25% {
        transform: scale(1) rotate(0);
    }
}