/* @license GPL-2.0-or-later https://www.drupal.org/licensing/faq */
@layer reset, common, components, utils;

@layer reset {

    body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0
    }

    body {
        -webkit-font-smoothing: antialiased
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    caption, th {
        text-align: start
    }

    th, td {
        padding: 0
    }


    button, input, select, textarea, ::file-selector-button {
        color: inherit;
        font: inherit;
        padding: 0
    }

    button, input:where([type=submit], [type=button], [type=reset], [type=image]), ::file-selector-button {
        appearance: none;
        background: none;
        border: none;
        border-radius: 0
    }

    button:not(:disabled), input:where([type=submit], [type=button], [type=reset], [type=image], ::file-selector-button):not(:disabled) {
        cursor: pointer
    }

    input:where([type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=range], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]), select, textarea, table {
        inline-size: 100%
    }

    input:where([type=color], [type=date], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]), select, textarea {
        appearance: none;
        border: none;
        border-radius: 0
    }

    blockquote:not(:has(p)):not([class]):before {
        content: open-quote
    }

    blockquote:not(:has(p)):not([class]):after {
        content: close-quote
    }

    :where(ul, ol)[class]:not(.RichText :where(ul, ol)) {
        padding-inline-start: 0
    }

    :where(ul, ol)[class]:not(.RichText :where(ul, ol)) li::marker {
        font-size: 0
    }
}

@layer common {
    html {
        --c-primary-green: #00937d;
        --c-white: hsl(0 0% 100%);
        --c-grey-200: hsl(150 4% 91%);
        --c-grey-300: hsl(153 11% 84%);
        --c-black: hsl(45 11% 14%);
        --c-lime-300: #00a651;
        --c-lime-200: hsl(80 60% 93%);
        --c-lime-100: hsl(76 58% 96%);
        --c-sand-100: hsl(36 38% 95%);
        --c-yellow: hsl(56 93% 82%);
        --c-orange-light: hsl(38 100% 85%);
        --c-peach: hsl(25 100% 89%);
        --c-rose: hsl(331 68% 85%);
        --c-lilac: hsl(289 26% 84%);
        --c-sky-light: hsl(199 66% 90%);
        --c-turquoise-light: hsl(182 57% 86%);
        --c-green-forest: #004c5c;
        --c-orange-dark: #f7941d;
        --c-red-dark: hsl(350 63% 54%);
        --c-berry-dark: hsl(330 35% 38%);
        --c-berry: hsl(322 33% 49%);
        --c-magenta: hsl(332 69% 65%);
        --c-blue: hsl(222 54% 45%);
        --c-sky: hsl(199 68% 61%);
        --c-turquoise: hsl(182 100% 36%);
        --c-focus: var(--c-green-forest);
        --c-transparent-black: color-mix(in srgb, var(--c-black), transparent 90%);
        --c-border: var(--c-grey-200)
    }
}

@layer common {
    html {
        --z-index-skip-link: 999;
        --z-index-header: 100;
        --z-index-dialog: 90;
        --z-index-conversational-ui: 110
    }
}

@layer common {
    html {
        --color-decoration-disabled: hsl(221 27% 94%);
        --color-decoration-success: hsl(137 100% 32%);
        --color-decoration-error: hsl(346 81% 50%);
        --color-decoration-error-disabled: hsl(346 81% 90%);
        --color-dialog-backdrop: rgb(0 0 0 / .5);
        --color-status-messages-border: rgb(0 0 0 / .25);
        --color-typo-disabled: hsl(221 27% 94%)
    }
}

@layer common {
    html {
        --size-xxxs: .25rem;
        --size-xxs: .5rem;
        --size-xs: .75rem;
        --size-s: 1rem;
        --size-m: 1.5rem;
        --size-l: 2rem;
        --size-l-plus: 2.5rem;
        --size-xl: 3rem;
        --size-xxl: 4rem;
        --size-xxxl: 6rem;
        --icon-size: 1.5rem
    }
}

@layer common {
    html[lang=el] {
        --greek-heading-font-family: "Sofia Sans Extra Condensed";
        --greek-default-font-family: "Roboto";
        --greek-handwrittenHeading-font-family: "Mansalva"
    }

    html {
        --heading-font-weight: 700;
        --heading-font-family: var(--greek-heading-font-family, "Bebas Neue Pro"), system-ui, sans-serif;
        --default-font-weight: 500;
        --default-font-weight-bold: 700;
        --default-font-family: var(--greek-default-font-family, "Lato"), system-ui, sans-serif;
        --handwrittenHeading-font-weight: 700;
        --handwrittenHeading-font-family: var(--greek-handwrittenHeading-font-family, "Kalam"), system-ui, sans-serif;
        --typo-HeadingTitle-font-size: 6rem;
        --typo-HeadingTitle-line-height: .95;
        --typo-HeadingTitle-font-family: var(--heading-font-family);
        --typo-HeadingTitle: var(--heading-font-weight) var(--typo-HeadingTitle-font-size) / var(--typo-HeadingTitle-line-height) var(--typo-HeadingTitle-font-family);
        --typo-HeadingXL-font-size: 3rem;
        --typo-HeadingXL-line-height: 1;
        --typo-HeadingXL-font-family: var(--heading-font-family);
        --typo-HeadingXL: var(--heading-font-weight) var(--typo-HeadingXL-font-size) / var(--typo-HeadingXL-line-height) var(--typo-HeadingXL-font-family);
        --typo-HeadingL-font-size: 3.5rem;
        --typo-HeadingL-line-height: 1;
        --typo-HeadingL-font-family: var(--heading-font-family);
        --typo-HeadingL: var(--heading-font-weight) var(--typo-HeadingL-font-size) / var(--typo-HeadingL-line-height) var(--typo-HeadingL-font-family);
        --typo-HeadingM-font-size: 2.25rem;
        --typo-HeadingM-line-height: 1.25;
        --typo-HeadingM-font-family: var(--heading-font-family);
        --typo-HeadingM: var(--heading-font-weight) var(--typo-HeadingM-font-size) / var(--typo-HeadingM-line-height) var(--typo-HeadingM-font-family);
        --typo-HeadingS-font-size: 1.5rem;
        --typo-HeadingS-line-height: 1.4;
        --typo-HeadingS-font-family: var(--default-font-family);
        --typo-HeadingS: var(--default-font-weight-bold) var(--typo-HeadingS-font-size) / var(--typo-HeadingS-line-height) var(--typo-HeadingS-font-family);
        --typo-HeadingXS-font-size: 1.125rem;
        --typo-HeadingXS-line-height: 1.45;
        --typo-HeadingXS-font-family: var(--default-font-family);
        --typo-HeadingXS: var(--default-font-weight-bold) var(--typo-HeadingXS-font-size) / var(--typo-HeadingXS-line-height) var(--typo-HeadingXS-font-family);
        --typo-DefaultLead-font-size: 1.5rem;
        --typo-DefaultLead-line-height: 1.4;
        --typo-DefaultLead-font-family: var(--default-font-family);
        --typo-DefaultLead-letter-spacing: 0;
        --typo-DefaultLead: var(--default-font-weight) var(--typo-DefaultLead-font-size) / var(--typo-DefaultLead-line-height) var(--typo-DefaultLead-font-family);
        --typo-DefaultBody-font-size: 1.125rem;
        --typo-DefaultBody-line-height: 1.5;
        --typo-DefaultBody-font-family: var(--default-font-family);
        --typo-DefaultBody-letter-spacing: 0;
        --typo-DefaultBody: var(--default-font-weight) var(--typo-DefaultBody-font-size) / var(--typo-DefaultBody-line-height) var(--typo-DefaultBody-font-family);
        --typo-DefaultSmall-font-size: 1rem;
        --typo-DefaultSmall-line-height: 1.25;
        --typo-DefaultSmall-font-family: var(--default-font-family);
        --typo-DefaultSmall: var(--default-font-weight) var(--typo-DefaultSmall-font-size) / var(--typo-DefaultSmall-line-height) var(--typo-DefaultSmall-font-family);
        --typo-DefaultXSmall-font-size: .875rem;
        --typo-DefaultXSmall-line-height: 1.25;
        --typo-DefaultXSmall-font-family: var(--default-font-family);
        --typo-DefaultXSmall: var(--default-font-weight) var(--typo-DefaultXSmall-font-size) / var(--typo-DefaultXSmall-line-height) var(--typo-DefaultXSmall-font-family);
        --typo-HandwrittenHeadingXL-font-size: 4.5rem;
        --typo-HandwrittenHeadingXL-line-height: 1.15;
        --typo-HandwrittenHeadingXL-font-family: var(--handwrittenHeading-font-family);
        --typo-HandwrittenHeadingXL: var(--handwrittenHeading-font-weight) var(--typo-HandwrittenHeadingXL-font-size) / var(--typo-HandwrittenHeadingXL-line-height) var(--typo-HandwrittenHeadingXL-font-family);
        --typo-HandwrittenHeadingL-font-size: 3.5rem;
        --typo-HandwrittenHeadingL-line-height: calc(64.4 / 56);
        --typo-HandwrittenHeadingL-font-family: var(--handwrittenHeading-font-family);
        --typo-HandwrittenHeadingL: var(--handwrittenHeading-font-weight) var(--typo-HandwrittenHeadingL-font-size) / var(--typo-HandwrittenHeadingL-line-height) var(--typo-HandwrittenHeadingL-font-family);
        --typo-HandwrittenHeadingM-font-size: 2.5rem;
        --typo-HandwrittenHeadingM-line-height: calc(48 / 40);
        --typo-HandwrittenHeadingM-font-family: var(--handwrittenHeading-font-family);
        --typo-HandwrittenHeadingM: var(--handwrittenHeading-font-weight) var(--typo-HandwrittenHeadingM-font-size) / var(--typo-HandwrittenHeadingM-line-height) var(--typo-HandwrittenHeadingM-font-family);
        --typo-HandwrittenHeadingS-font-size: 1.125rem;
        --typo-HandwrittenHeadingS-line-height: 1.25;
        --typo-HandwrittenHeadingS-font-family: var(--handwrittenHeading-font-family);
        --typo-HandwrittenHeadingS-baseline-offset: .125rem;
        --typo-HandwrittenHeadingS: var(--handwrittenHeading-font-weight) var(--typo-HandwrittenHeadingS-font-size) / var(--typo-HandwrittenHeadingS-line-height) var(--typo-HandwrittenHeadingS-font-family)
    }

    @media(width<48rem) {
        html {
            --typo-HeadingTitle-font-size: 4rem;
            --typo-HeadingTitle-line-height: 1;
            --typo-HeadingXL-font-size: 3.5rem;
            --typo-HeadingXL-line-height: 1;
            --typo-HeadingL-font-size: 2.75rem;
            --typo-HeadingL-line-height: 1;
            --typo-HeadingM-font-size: 2rem;
            --typo-HeadingM-line-height: 1.25;
            --typo-HeadingS-font-size: 1.3125rem;
            --typo-HeadingS-line-height: 1.25;
            --typo-HeadingXS-font-size: 1.125rem;
            --typo-HeadingXS-line-height: 1.25;
            --typo-DefaultLead-font-size: 1.25rem;
            --typo-DefaultLead-line-height: calc(28 / 20);
            --typo-DefaultBody-font-size: 1.0625rem;
            --typo-DefaultBody-line-height: 1.5;
            --typo-DefaultSmall-font-size: .9375rem;
            --typo-DefaultSmall-line-height: 1.4;
            --typo-DefaultXSmall-font-size: .75rem;
            --typo-DefaultXSmall-line-height: 1.4;
            --typo-HandwrittenHeadingXL-font-size: 3rem;
            --typo-HandwrittenHeadingXL-line-height: 1.15;
            --typo-HandwrittenHeadingL-font-size: 2rem;
            --typo-HandwrittenHeadingL-line-height: 1.15;
            --typo-HandwrittenHeadingM-font-size: 1.5rem;
            --typo-HandwrittenHeadingM-line-height: 1.2;
            --typo-HandwrittenHeadingS-font-size: 1.0625rem;
            --typo-HandwrittenHeadingS-line-height: 1.25
        }
    }
}

@layer common {
    html {
        --container-max-inline-size: 120rem;
        --content-block-padding-inline-size: clamp(1.5rem, 6.25vw, 7.5rem);
        --content-block-padding-block-size: 5rem;
        --logo-size-mobile: 4.6875rem;
        --logo-size-desktop: 7.25rem;
        --border-size: .0625rem;
        --border-radius: 3rem;
        --divider-line: .125rem solid var(--c-lime-300);
        --teaser-border-radius: var(--size-m);
        --teaser-box-shadow: .25rem .25rem .6rem 0 var(--c-transparent-black);
        --underline-offset: .2em;
        --underline-thickness: .09375em;
        --outline-size: .1875rem;
        --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus));
        --focus-outline-offset: var(--outline-size);
        --input-button-lh: 1.2;
        --input-button-padding-y: .75em;
        --link-transition: all .1s ease
    }

    @media(width<48rem) {
        html {
            --component-spacing-y: var(--size-xl);
            --component-spacing-x: var(--size-s)
        }
    }

    @media(width>=48rem) {
        html {
            --component-spacing-y: var(--size-xxxl);
            --component-spacing-x: var(--size-l)
        }
    }
}

@layer common {

    *, *:before, *:after {
        box-sizing: border-box
    }

    html {
        scroll-padding-block-start: calc(var(--Header-block-size, 0px) + var(--drupal-displace-offset-top, 0px))
    }

    html:has(dialog:modal[open]) {
        overflow: clip
    }


    h1, h2 {
        color: var(--c-theme-text-accent, var(--c-theme-text-body, currentColor))
    }

    h3, h4, h5, h6 {
        color: var(--c-theme-text-body, currentColor)
    }

    h1 {
        font: var(--typo-HeadingTitle)
    }

    h2 {
        font: var(--typo-HeadingXL)
    }

    h3 {
        font: var(--typo-HeadingL)
    }

    h4 {
        font: var(--typo-HeadingM)
    }

    h5 {
        font: var(--typo-HeadingS)
    }

    h6 {
        font: var(--typo-HeadingXS)
    }

    @container (inline-size < 32em) {
        h1 {
            font: var(--typo-HeadingXL)
        }

        h2 {
            font: var(--typo-HeadingL)
        }

        h3 {
            font: var(--typo-HeadingM)
        }
    }

    a {
        color: inherit
    }

    a:is(:not([class]), [class=""]) {
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset)
    }

    a:is(:not([class]), [class=""]):focus-visible {
        text-decoration: none
    }

    img {
        block-size: auto;
        display: block;
        inline-size: 100%
    }

    abbr {
        text-underline-offset: var(--underline-offset)
    }

    :focus-visible {
        isolation: isolate;
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    table {
        border-collapse: collapse
    }

    tr {
        border-block-end: .0625rem solid var(--c-grey-200)
    }

    th, td {
        padding-inline: var(--size-s)
    }

    th {
        font-weight: var(--default-font-weight-bold);
        text-align: start
    }

    thead tr {
        background: var(--c-grey-200)
    }

    thead :is(th, td) {
        padding-block: var(--size-s)
    }

    tbody :is(th, td) {
        padding-block: var(--size-xs);
        vertical-align: top
    }
}

@layer components {
    .BackLink {
        background-color: var(--c-theme-background, transparent);
        border-block-end: var(--divider-line);
        display: block;
        font: var(--typo-DefaultSmall);
        padding-block: var(--size-xxxs)
    }

    :where(.BackLink[referrer-status=unset]) .BackLink-button, :where(.BackLink[data-js=false]) .BackLink-button {
        visibility: hidden !important
    }

    .BackLink-button {
        --outline-size: 3px;
        align-items: center;
        border-radius: var(--border-radius);
        display: inline-flex;
        gap: var(--size-xxs);
        padding-block: var(--size-xxs)
    }

    .BackLink-button:focus-visible {
        --focus-outline: var(--outline-size) solid currentColor;
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }
}

@layer components {
    .Button {
        --aspect-ratio: initial;
        --block-size: 2.75rem;
        --border-size: .125rem;
        --outline-size: .1875rem;
        --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus));
        --padding-inline: 1.5em;
        align-items: stretch;
        appearance: none;
        aspect-ratio: var(--aspect-ratio);
        border-radius: var(--border-radius);
        border-style: solid;
        border-width: var(--border-size);
        box-sizing: border-box;
        display: inline-flex;
        font: var(--typo-DefaultSmall);
        gap: var(--size-s);
        justify-content: center;
        min-block-size: var(--block-size);
        padding-block: 0;
        padding-inline: var(--padding-inline);
        text-align: center;
        text-decoration: none
    }

    .Button--iconOnly {
        --aspect-ratio: 1/1;
        --padding-inline: initial
    }

    .Button:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .Button-icon, .Button-label {
        align-items: center;
        display: inline-flex;
        gap: var(--size-xxs)
    }

    .Button--primary {
        background-color: var(--c-primary-green);
        border-color: transparent;
        color: var(--c-white)
    }

    .Button--primary[aria-pressed=true] {
        background-color: var(--c-green-forest)
    }

    .Button--primary:where(:not(:disabled)):hover {
        background-color: var(--c-green-forest)
    }

    .Button--primary:disabled {
        background-color: var(--c-grey-200)
    }

    .Button--ghost {
        background-color: transparent;
        border-color: color-mix(in srgb, currentColor, transparent 50%);
        color: currentColor
    }

    .Button--ghost[aria-pressed=true] {
        background-color: var(--c-lime-300)
    }

    .Button--ghost:focus-visible {
        border-color: currentColor
    }

    .Button--ghost:where(:not(:disabled)):hover {
        border-color: currentColor
    }

    .Button--ghost:disabled {
        border-color: color-mix(in srgb, currentColor, transparent 75%);
        color: color-mix(in srgb, currentColor, transparent 75%)
    }
}

@layer components {
    .DateTimeForm {
        display: grid;
        gap: var(--size-xs);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr))
    }
}

@layer components {
    .DateTime-title+.DateTime-content {
        margin-block-start: var(--size-xs)
    }

    .DateTime-errors {
        margin-block-start: var(--size-xs)
    }
}

@layer components {
    .Dialog {
        border: none;
        margin: auto;
        max-block-size: 100dvh;
        max-inline-size: 100dvw;
        overflow-y: auto;
        padding: var(--size-l)
    }

    .Dialog::backdrop {
        background-color: var(--color-dialog-backdrop)
    }

    .Dialog-header {
        align-items: start;
        display: flex;
        gap: var(--size-m);
        justify-content: space-between
    }

    .Dialog-closeButton {
        border-color: transparent;
        flex-shrink: 0
    }

    .Dialog-content {
        margin-block-start: var(--size-l)
    }
}

@layer components {
    .EmptyState {
        background-color: var(--c-theme-background, var(--c-white));
        text-align: center
    }

    .EmptyState-title {
        font: var(--typo-HeadingM)
    }

    .EmptyState-copy {
        margin-block-start: var(--size-m)
    }

    .EmptyState-footer {
        display: flex;
        justify-content: center;
        margin-block-start: var(--size-l)
    }
}

@layer components {
    .Error {
        color: var(--color-decoration-error);
        font-size: var(--typo-DefaultSmall-font-size)
    }

    .Error:empty {
        min-block-size: calc(var(--typo-DefaultSmall-font-size) * var(--typo-DefaultSmall-line-height))
    }

    .Error>*+* {
        margin-block-start: 1em
    }
}

@layer components {
    .FileUploadInput {
        display: block
    }

    .FileUploadInput[aria-invalid=true] {
        color: var(--color-decoration-error)
    }

    .FileUploadInput::file-selector-button {
        margin-inline-end: var(--size-xs)
    }
}

@layer components {
    .FileUpload {
        display: flex;
        gap: var(--size-m)
    }
}

@layer components {
    .FilterListItem {
        display: block
    }

    .FilterListItem-link {
        align-items: center;
        background-color: var(--background-color, var(--c-primary-green));
        border-radius: var(--border-radius);
        color: var(--c-white);
        display: inline-flex;
        font: var(--typo-DefaultSmall);
        gap: var(--size-xxs);
        padding: var(--size-xxs) var(--size-s);
        text-decoration: none;

        &:focus-visible {
            --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus))
        }
    }

    .FilterListItem-linkIsActive:before {
        background-clip: content-box;
        background-color: currentColor
    }

    .FilterListItem-linkIsActive {
        --background-color: var(--theme-color, var(--c-lime-300));
        color: var(--c-black)
    }
}

@layer components {
    .FilterList-title {
        font: var(--typo-HeadingS)
    }

    .FilterList-list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-s);
        margin-block-start: var(--size-s)
    }
}

@layer components {
    .FormElementLabel {
        display: inline-block;
        font: var(--typo-DefaultXSmall);
        padding-block-end: .25em
    }

    .FormElementLabel.is-required:after {
        content: " *"
    }
}

@layer components {
    .Checkbox {
        --bg-image--checked: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E")
    }
}

@layer components {
    .Radio {
        --border-radius: 50%;
        --bg-image--checked: radial-gradient(#fff 30%, transparent 30%)
    }
}

@layer components {
    .Option input {
        inset-block-start: 0;
        inset-inline-start: 0;
        opacity: .01;
        position: absolute
    }

    .Option .FormElementLabel {
        display: flex;
        padding: 0
    }

    .Option .FormElementLabel:before {
        --border-radius: .25rem;
        --size: 1.5em;
        background-color: var(--c-white);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        block-size: var(--size);
        border-color: transparent;
        border-radius: var(--border-radius);
        border-style: solid;
        border-width: var(--border-size);
        content: "";
        display: block;
        flex-shrink: 0;
        inline-size: var(--size);
        inset-block-start: calc(var(--size) / 2);
        inset-block-start: .5lh;
        margin-inline-end: .75em;
        position: relative;
        transform: translateY(-50%)
    }

    .Option :checked+.FormElementLabel:before {
        background-image: var(--bg-image--checked)
    }

    .Option :focus-visible+.FormElementLabel:before {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .Option :not(:disabled):not(:checked)[aria-invalid=true]+.FormElementLabel:before {
        background-color: transparent;
        border-color: var(--color-decoration-error)
    }

    .Option :not(:disabled):not([aria-invalid=true]):checked+.FormElementLabel:before {
        background-color: var(--c-green-forest);
        border-color: transparent
    }

    .Option :not(:checked):not([aria-invalid=true]):disabled+.FormElementLabel:before {
        background-color: transparent;
        border-color: var(--color-typo-disabled)
    }

    .Option :not(:checked):not([aria-invalid=true]):disabled+.FormElementLabel {
        color: var(--c-grey-200)
    }

    .Option :not(:disabled)[aria-invalid=true]:checked+.FormElementLabel:before {
        background-color: var(--color-decoration-error);
        border-color: transparent
    }

    .Option :not(:checked):disabled[aria-invalid=true]+.FormElementLabel:before {
        background-color: var(--color-decoration-error-disabled);
        border-color: transparent
    }

    .Option :not(:checked):disabled[aria-invalid=true]+.FormElementLabel {
        color: var(--c-grey-200)
    }

    .Option :not([aria-invalid=true]):disabled:checked+.FormElementLabel:before {
        background-color: var(--color-typo-disabled);
        border-color: transparent
    }

    .Option :not([aria-invalid=true]):disabled:checked+.FormElementLabel {
        color: var(--c-grey-200)
    }

    .Option [aria-invalid=true]:disabled:checked+.FormElementLabel:before {
        background-color: var(--color-decoration-error-disabled);
        border-color: transparent
    }

    .Option [aria-invalid=true]:disabled:checked+.FormElementLabel {
        color: var(--c-grey-200)
    }
}

@layer components {
    .FormElement {
        position: relative
    }

    .FormElement-description {
        font-size: var(--typo-DefaultSmall-font-size);
        margin-block-start: .35em
    }

    .FormElement-error {
        margin-block-start: var(--size-xs)
    }

    .FormElement-error:has(.Error:empty) {
        visibility: hidden
    }
}

@layer components {
    .Fieldset {
        border: var(--border-size) solid var(--c-grey-300);
        min-inline-size: 0;
        padding: 0
    }

    .Fieldset-legend {
        display: contents;
        float: inline-start;
        inline-size: 100%
    }

    .Fieldset-label {
        display: block;
        line-height: 1rem;
        padding-block-start: 1rem;
        padding-inline: 1rem
    }

    .Fieldset-label.has-error {
        color: var(--color-decoration-error)
    }

    .Fieldset-description {
        font: var(--typo-DefaultXSmall);
        margin-block-start: var(--size-s)
    }

    .Fieldset-wrapper {
        margin: 1rem
    }

    .Fieldset-wrapper>*+*:where(:not(input[type=hidden])) {
        margin-block-start: var(--size-m)
    }
}

@layer components {
    .Form>*+*:where(:not(input[type=hidden])) {
        margin-block-start: var(--size-m)
    }
}

@layer components {
    .Icon {
        --color: currentColor;
        aspect-ratio: 1/1;
        block-size: var(--icon-size);
        color: var(--color);
        display: flex
    }
}

@layer components {
    .Input {
        --border-radius: .5rem;
        appearance: none;
        background-color: var(--c-white);
        border-color: var(--c-border);
        border-radius: var(--border-radius);
        border-style: solid;
        border-width: var(--border-size);
        color: var(--c-black);
        display: block;
        font: var(--typo-DefaultSmall);
        inline-size: 100%;
        line-height: var(--input-button-lh);
        padding-block: var(--input-button-padding-y);
        padding-inline: 1em
    }

    .Input:disabled {
        pointer-events: none
    }

    .Input::placeholder {
        color: var(--c-grey-300);
        opacity: 1
    }

    .Input:not(:disabled)[aria-invalid=true] {
        border-color: var(--color-decoration-error)
    }

    .Input:not([aria-invalid=true]):disabled {
        color: var(--c-grey-200)
    }

    .Input:disabled[aria-invalid=true] {
        border-color: var(--color-decoration-error-disabled);
        color: var(--c-grey-200)
    }

    .Input:focus-visible {
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .Input:focus {
        border-color: transparent
    }
}

@layer components {
    load-more-observer {
        display: block
    }
}

@layer components {
    .NestedFilterList-parent {
        display: block
    }

    .NestedFilterList-parentTitle {
        font: var(--typo-DefaultLead);
        font-weight: var(--default-font-weight-bold)
    }

    .NestedFilterList-items {
        margin-block-start: var(--size-s)
    }

    .NestedFilterList-items>*+* {
        margin-block-start: var(--size-xs)
    }

    .NestedFilterList-item {
        display: block
    }
}

@layer components {
    .Options {
        display: var(--Options-display, flex);
        flex-direction: var(--Options-flex-direction);
        flex-wrap: var(--Options-flex-wrap);
        gap: var(--Options-gap, var(--size-m))
    }

    .Options--radios {
        --Options-display: var(--Radios--display);
        --Options-flex-direction--col: var(--Radios-flex-direction--col);
        --Options-flex-direction--row: var(--Radios-flex-direction--row);
        --Options-flex-wrap--col: var(--Radios-flex-direction--row);
        --Options-flex-wrap--row: var(--Radios-flex-wrap--col);
        --Options-gap: var(--Radios--gap);
        --Options-margin: var(--Radios--margin)
    }

    .Options--checkboxes {
        --Options-display: var(--Checkboxes--display);
        --Options-flex-direction--col: var(--Checkboxes-flex-direction--col);
        --Options-flex-direction--row: var(--Checkboxes-flex-direction--row);
        --Options-flex-wrap--col: var(--Checkboxes-flex-direction--row);
        --Options-flex-wrap--row: var(--Checkboxes-flex-wrap--col);
        --Options-gap: var(--Checkboxes--gap);
        --Options-margin: var(--Checkboxes--margin)
    }

    .Options--col {
        --Options-flex-direction: var(--Options-flex-direction--col, column);
        --Options-flex-wrap: var(--Options-flex-wrap--col, none)
    }

    .Options--row {
        --Options-flex-direction: var(--Options-flex-direction--row, row);
        --Options-flex-wrap: var(--Options-flex-direction--row, wrap)
    }

    .Options--checkboxes {
        --Options-display: var(--Checkboxes--display);
        --Options-flex-direction--col: var(--Checkboxes-flex-direction--col);
        --Options-flex-direction--row: var(--Checkboxes-flex-direction--row);
        --Options-flex-wrap--col: var(--Checkboxes-flex-direction--row);
        --Options-flex-wrap--row: var(--Checkboxes-flex-wrap--col);
        --Options-gap: var(--Checkboxes--gap);
        --Options-margin: var(--Checkboxes--margin)
    }

    .Options--radios {
        --Options-display: var(--Radios--display);
        --Options-flex-direction--col: var(--Radios-flex-direction--col);
        --Options-flex-direction--row: var(--Radios-flex-direction--row);
        --Options-flex-wrap--col: var(--Radios-flex-direction--row);
        --Options-flex-wrap--row: var(--Radios-flex-wrap--col);
        --Options-gap: var(--Radios--gap);
        --Options-margin: var(--Radios--margin)
    }

    .Options .FormElement+.FormElement {
        margin-block-start: 0
    }
}

@layer components {
    .PageTitle {
        background-color: var(--c-theme-background, transparent);
        padding-block-start: var(--content-block-padding-block-size)
    }

    .PageTitle:where(:not(.PageTitle-hasBottomBorder)) {
        padding-block-end: var(--size-l-plus)
    }

    :where(.PageTitle-hasBottomBorder) .PageTitle-layout {
        border-block-end: .1875rem solid var(--c-primary-green);
        padding-block-end: var(--size-l-plus)
    }
}

@layer components {
    .Range {
        inline-size: 100%;
        margin: 0
    }
}

@layer components {
    .Input--select {
        --border-radius: 3rem;
        --border-size: .0625rem;
        background-color: transparent;
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><path fill='none' stroke-width='1.5' d='M1 1L7 7L13 1' stroke='hsl(45 11% 14%)'/></svg>");
        background-position: calc(100% - 1em) 50%;
        background-repeat: no-repeat;
        background-size: 1em;
        border: var(--border-size) solid color-mix(in srgb, currentColor, transparent 50%);
        border-radius: var(--border-radius);
        color: currentColor;
        inline-size: fit-content;
        min-inline-size: 12rem;
        padding: var(--size-xs) calc(var(--size-m) + 1.5em) var(--size-xs) var(--size-m)
    }

    [dir=rtl] .Input--select {
        background-position-x: 1em
    }
}

@layer components {
    .Slider {
        --max-visible-item-count: var(--Slider-max-visible-item-count, 1);
        --partial-item-fraction: var(--Slider-partial-item-fraction, 0);
        --min-item-inline-size: var(--Slider-min-item-inline-size, 15.625rem);
        align-self: flex-start;
        display: block;
        max-inline-size: 100%;
        min-inline-size: 0
    }

    .Slider-isShowingAllItems {
        --partial-item-fraction: 0 !important
    }

    .Slider-titleButtonWrapper {
        display: flex;
        flex-wrap: wrap
    }

    .Slider:where(:not(.Slider-isShowingAllItems)) .Slider-titleButtonWrapper, .Slider:where(:not(.Slider-hasHiddenTitle)) .Slider-titleButtonWrapper {
        margin-block-end: var(--size-l-plus)
    }

    :where(.Slider-isShowingAllItems) .Slider-actions {
        display: none !important
    }

    .Slider-actions {
        align-items: center;
        display: flex;
        gap: var(--size-xs);
        margin-inline-start: auto
    }

    :where(content-slider[data-js=false]) .Slider-actions {
        display: none
    }

    .Slider-scrollContainer {
        --item-gap: var(--size-xs);
		justify-content:center;
        align-items: stretch;
        display: flex;
        margin-inline: calc(-1 * var(--item-gap));
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding-block: var(--item-gap);
        scroll-snap-type: x mandatory
    }

    @media not (prefers-reduced-motion) {
        .Slider-scrollContainer {
            scroll-behavior: smooth
        }
    }

    .Slider-scrollContainer>* {
        --integer-item-count: round(down, var(--fractional-item-count, var(--max-visible-item-count)), 1);
        --item-count: clamp(1, var(--integer-item-count), var(--max-visible-item-count));
        --item-inline-size: max(var(--min-item-inline-size), calc(100% / (var(--item-count) + var(--partial-item-fraction))));
        display: flex;
        flex-basis: var(--item-inline-size);
        flex-direction: column;
        flex-shrink: 0;
        justify-content: stretch;
        max-inline-size: 100%;
        padding-inline: var(--item-gap);
        scroll-snap-align: start
    }
}

@layer components {
    .StatusMessages p:empty {
        display: none
    }

    .StatusMessages-container {
        border: var(--border-size) solid var(--color-status-messages-border);
        padding-block: var(--size-m)
    }

    .StatusMessages-heading {
        font-weight: var(--default-font-weight-bold)
    }

    .StatusMessages-container+.StatusMessages-container {
        margin-block-start: 1rem
    }

    .StatusMessages-container--error {
        background-color: var(--color-decoration-error);
        color: var(--c-white)
    }

    .StatusMessages-container--success {
        background-color: var(--color-decoration-success);
        color: var(--c-white)
    }

    .StatusMessages-container--info, .StatusMessages-container--status {
        background-color: var(--c-grey-200)
    }

    :is(.StatusMessages-container--error, .StatusMessages-container--success) .StatusMessages-messages li::marker {
        color: currentColor !important
    }
}

@layer components {
    .Teaser {
        container-name: teaser;
        container-type: inline-size
    }

    .Teaser-isMediaBackground {
        inline-size: 100%
    }

    .Teaser :is(.Teaser-link, .Teaser-actionButton) {
        outline: none
    }

    .Teaser:focus-within .Teaser-layout {
        --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus));
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .Teaser-layout {
        border-radius: var(--teaser-border-radius);
        box-shadow: var(--teaser-box-shadow);
        color: var(--c-black);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        inline-size: 100%;
        overflow: hidden;
        position: relative
    }

    .Teaser:not(.Teaser-isMediaBackground) .Teaser-layout {
        block-size: 100%
    }

    :where(.Teaser:not(.Teaser-isMediaBackground):not(.Teaser-isHighlight)) .Teaser-layout {
        background-color: var(--c-white)
    }

    .Teaser-media {
        position: relative
    }

    .Teaser:not(.Teaser-isMediaBackground):not(.Teaser-isHighlight) .Teaser-media {
        aspect-ratio: 1;
        min-block-size: 0
    }
	
	.gia-tri-cot-loi .Teaser:not(.Teaser-isMediaBackground):not(.Teaser-isHighlight) .Teaser-media { aspect-ratio: 1/.8; }
	.gia-tri-cot-loi .Teaser-layout .Teaser-footer { font-size:2em; }

    .Teaser-isMediaBackground .Teaser-media {
        flex-grow: 1
    }

    :where(.Teaser-isMediaBackground, .Teaser-isHighlight) .Teaser-media:before {
        background-color: color-mix(in srgb, var(--overlay-background-color, transparent), transparent 50%);
        content: "";
        inset: 0;
        position: absolute
    }

    .Teaser-mediaOverlay {
        align-items: flex-end;
        display: flex;
        inset: 0;
        padding: var(--size-xxs) var(--size-xs);
        position: absolute
    }

    .Teaser-badgeList {
        align-items: center;
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--size-xxs)
    }

    .Teaser-badge {
        align-items: center;
        background-color: var(--c-sand-100);
        border-radius: .25rem;
        color: var(--c-black);
        display: inline-flex;
        font: var(--typo-DefaultSmall);
        gap: var(--size-xxxs);
        padding: var(--size-xxxs) var(--size-xxs)
    }

    .Teaser-text {
        color: var(--color, currentColor);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        gap: var(--size-s);
        padding: var(--size-m) var(--size-m) var(--size-s) var(--size-m)
    }

    :where(.Teaser-isMediaBackground) .Teaser-text {
        inset: 0;
        padding: var(--size-xl) var(--size-xl) var(--size-l-plus) var(--size-xl);
        position: absolute;
        z-index: 1
    }

    :where(.Teaser-isHighlight) .Teaser-text {
        background-color: var(--overlay-background-color, transparent);
        flex-direction: row;
        flex-grow: 0;
        justify-content: space-between;
        margin-block-start: auto;
        padding: var(--size-m) var(--size-m) var(--size-m) var(--size-l-plus);
        z-index: 1
    }

    .Teaser-text:only-child {
        block-size: 100%;
        flex-basis: 100%
    }

    .Teaser-header {
        display: flex;
        flex-direction: column;
        gap: var(--size-xs);
        min-block-size: 0
    }

    .Teaser-link {
        font: var(--typo-DefaultLead);
        font-weight: var(--default-font-weight-bold);
        hyphens: auto;
        word-break: break-word
    }

    .Teaser-link:after {
        content: "";
        inset: 0;
        position: absolute
    }

    :where(.Teaser-isMediaBackground) .Teaser-link {
        font: var(--typo-HeadingL)
    }

    :where(.Teaser-isHighlight) .Teaser-link {
        font: var(--typo-HeadingM)
    }

    .Teaser-body {
        flex-grow: 1;
        font: var(--typo-DefaultSmall)
    }

    .Teaser-footer {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xxs);
        justify-content: space-between
    }

    :where(.Teaser:not(.Teaser-isHighlight)) .Teaser-footer {
        margin-block-start: auto
    }

    .Teaser-preparationTime {
        --u-baseline-offset: var(--typo-HandwrittenHeadingS-baseline-offset);
        align-items: center;
        display: inline-flex;
        font: var(--typo-HandwrittenHeadingS);
        gap: var(--size-xxxs);
        white-space: nowrap
    }

    .Teaser-actionIcon {
        margin-inline-start: auto
    }

    .Teaser-actionButton {
        inline-size: 100%;
        justify-content: space-between
    }

    .Teaser-country {
        font: var(--typo-HandwrittenHeadingS)
    }
}

@layer components {
    .Textarea {
        block-size: 10em;
        line-height: inherit;
        padding-block: calc(var(--input-button-padding-y) - (1lh - var(--input-button-lh) * 1em) / 2);
        resize: none
    }
}

@layer components {

    .VideoEmbed, .VideoEmbed-iframe {
        aspect-ratio: var(--aspect-ratio)
    }

    .VideoEmbed {
        display: flex;
        justify-content: center;
        margin-inline: auto
    }

    .VideoEmbed:where([mode=regular]) {
        --aspect-ratio: 16/9
    }

    .VideoEmbed:where([mode=shorts]) {
        --aspect-ratio: .5625;
        max-block-size: 100dvh;
        max-inline-size: 30rem;
        min-block-size: 15rem
    }

    .VideoEmbed-iframe {
        block-size: 100%;
        border: none;
        display: block;
        inline-size: 100%
    }

    :where(.VideoEmbed[data-js=false]) .VideoEmbed-iframe {
        display: none !important
    }

    .VideoEmbed-fallbackLink {
        margin: var(--size-l)
    }
}

@layer components {
    .RichText {
        background-color: var(--c-theme-background, transparent);
        word-break: break-word
    }

    .RichText :is(h1, h2, h3, h4, h5, h6) {
        text-wrap: balance
    }

    .RichText>*+*:not(.increase-specificity) {
        margin-block-start: var(--size-l-plus)
    }

    .RichText h1+h2, .RichText h2+h3, .RichText h3+h4 {
        margin-block-start: var(--size-m)
    }

    .RichText :where(h1, h2, h3, h4)+* {
        margin-block-start: var(--size-m)
    }

    .RichText :where(h5, h6)+* {
        margin-block-start: var(--size-s)
    }

    .RichText :not(h1)+h2, .RichText :not(h2)+h3 {
        margin-block-start: var(--size-l-plus)
    }

    .RichText :not(h3)+h4 {
        margin-block-start: var(--size-m)
    }

    .RichText li+li, .RichText :is(ul, ol) :is(ul, ol) li:first-child {
        margin-block-start: var(--size-xs)
    }

    @container (inline-size < 32em) {

        .RichText h1,     .RichText h2,     .RichText h3 {
            hyphens: auto;
            word-break: break-word
        }
    }

    .RichText :is(img, picture) {
        display: inline-block
    }

    .RichText :is(pre, pre code, iframe, img, picture, table) {
        inline-size: 100%
    }

    :where(.RichText) pre {
        align-items: center;
        display: flex;
        margin: 0;
        white-space: pre-wrap;
        word-wrap: break-word
    }

    :where(.RichText pre) code {
        display: block
    }

    :where(.RichText) pre, :where(.RichText) code:not(:is(pre>code)) {
        background-color: var(--c-grey-200);
        color: var(--c-black);
        display: inline-flex
    }

    :where(.RichText) pre {
        padding-block: var(--size-xxs);
        padding-inline: var(--size-xs)
    }

    :where(.RichText) code:not(:is(pre>code)) {
        padding-inline: var(--size-xxs)
    }

    .RichText :is(ul, ol) {
        list-style: revert;
        padding-inline-start: revert
    }

    .RichText :is(strong, b) {
        font-weight: var(--default-font-weight-bold)
    }

    .RichText :is(em, i) {
        font-style: italic
    }

    .RichText :is(sub, sup) {
        all: revert;
        line-height: 1
    }

    .RichText blockquote {
        font: var(--typo-HandwrittenHeadingM)
    }

    .RichText blockquote>*+*:not(.increase-specificity) {
        margin-block-start: var(--size-m)
    }

    .RichText blockquote>*:not(p:has(cite)) {
        font: var(--typo-HandwrittenHeadingM)
    }

    .RichText blockquote p:has(>cite):not(.increase-specificity) {
        margin-block-start: 0
    }

    .RichText img.iconify-icons-ckeditor {
        aspect-ratio: 1/1;
        block-size: var(--icon-size);
        display: inline-block;
        inline-size: auto;
        vertical-align: middle
    }

    .RichText p img.iconify-icons-ckeditor {
        aspect-ratio: 1/1;
        block-size: var(--icon-size);
        display: inline-block;
        inline-size: auto;
        vertical-align: text-bottom
    }
}

@layer components {
    .PressContact {
        container-name: press-contact;
        container-type: inline-size
    }

    .PressContact-layout {
        --item-min-inline-size: var(--PressContact-item-min-inline-size, 25rem);
        background-color: var(--c-theme-background, transparent);
        display: grid;
        gap: var(--size-l);
        grid-template-columns: repeat(auto-fit, minmax(var(--item-min-inline-size), 1fr))
    }

    .PressContact-title {
        font: var(--typo-HeadingM);
        margin-block-end: var(--size-s)
    }

    @container press-contact (inline-size <=64rem) {
        .PressContact-layout {
            grid-template-columns: 1fr 1fr
        }
    }

    @container press-contact (inline-size <=38.5rem) {
        .PressContact-layout {
            grid-template-columns: 1fr
        }
    }
}

@layer components {
    .Article {
        container-name: article;
        container-type: inline-size
    }

    @container article (inline-size >=60rem) {

        .Article .main-content>*:not(.Hero):not(.TeaserList):not(.TeaserSlider):not(.TextMedia),     .Article .main-content>.Hero>.Hero-textWrapper {
            --content-block-padding-inline-size: max(var(--size-m), 15%)
        }
    }

    .Article .main-content>.TeaserList {
        --TeaserList-item-min-inline-size: 30rem
    }

    .Article .main-content>.RichText {
        padding-block: calc(var(--content-block-padding-block-size) / 2)
    }

    .Article .main-content>.RichText:first-child {
        padding-block-start: var(--content-block-padding-block-size)
    }

    .Article .main-content>.RichText:last-child {
        padding-block-end: var(--content-block-padding-block-size)
    }

    .Article .main-content>.DownloadLink, .Article .main-content>.RichText {
        padding-inline: var(--content-block-padding-inline-size)
    }
}

@layer components {
    .Facts {
        container-name: facts;
        container-type: inline-size
    }

    .Facts-copy {
        margin-block-start: var(--size-m)
    }

    .Facts-list {
        column-gap: var(--size-m);
        display: grid;
        margin-block-start: var(--size-l)
    }

    .Facts-listItem {
        display: block
    }

    .Facts-itemText {
        margin-block-start: var(--size-s)
    }

    @container facts (inline-size >=32rem) {
        .Facts-list {
            grid-template-columns: repeat(3, 1fr);
            row-gap: var(--size-xxl)
        }
    }

    @container facts (inline-size < 32rem) {
        .Facts-list {
            grid-template-columns: 1fr 1fr;
            row-gap: var(--size-xl)
        }
    }

    @container facts (inline-size < 24rem) {
        .Facts-list {
            grid-template-columns: 1fr;
            row-gap: var(--size-l)
        }
    }
}

@layer components {
    .FooterMenu-nav {
        display: flex;
		flex-direction:column;
        flex-wrap: wrap;
        gap: var(--size-l)
    }

    .FooterMenu-nav>* {
        flex-basis: 0;
        flex-grow: 1
    }

    .FooterMenu-list>*+*, .FooterMenu-list {
        margin-block-start: var(--size-s)
    }

    .FooterMenu-listLabel {
        font: var(--typo-HeadingS)
    }

    .FooterMenu-link {
        align-items: center;
        display: inline-flex;
        gap: var(--size-xxs)
    }
}

@layer components {
    .LegalMenu-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-l)
    }
}

@layer components {

    .FooterSocialLinks-layout, .FooterSocialLinks-list {
        align-items: start;
        display: inline-flex;
        flex-direction: column
    }

    .FooterSocialLinks-layout {
        gap: var(--size-xs)
    }

    .FooterSocialLinks-list {
        gap: var(--size-xxs)
    }

    .FooterSocialLinks-label {
        font: var(--typo-HeadingS)
    }

    .FooterSocialLinks-link {
        align-items: center;
        display: inline-flex;
        gap: var(--size-xxs)
    }
}

@layer components {
    .Footer {
        background-color: var(--c-theme-background, transparent);
        color: var(--c-white);
        padding-block-end: calc(1.5 * var(--content-block-padding-block-size)) !important;

        :focus-visible {
            --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus))
        }
		inline-size: min(100%, calc(var(--container-max-inline-size) + var(--component-spacing-x)));
		margin:0 auto;
    }

    .Footer a:not(.Button) {
        color: var(--c-lime-200)
    }

    .FooterSocialLinks-link>.Icon {
        color: var(--c-white)
    }

    .Footer-wrapperPrimary {
        display: flex;
		flex-direction:column;
        gap: var(--size-l)
    }

    .Footer-menu {
        flex-basis: 0;
        flex-grow: 1
    }

    .Footer-wrapperSecondary {
        border-block-start: 1px solid currentColor;
        display: flex;
        font: var(--typo-DefaultSmall);
        gap: var(--size-l);
        justify-content: space-between;
        margin-block-start: var(--size-m);
        padding-block-start: var(--size-m)
    }

    .Footer-buttonWrapper {
        align-self: end;
        display: flex;
        gap: var(--size-s)
    }

    .Footer-socialMenu {
        display: flex;
        flex-direction: column;
        gap: var(--size-m);
        justify-content: space-between
    }

    /* .Footer-backToTopIcon {
        transform: rotate(-90deg)
    } */
}

@layer components {
    @container header (inline-size < 62.5rem) {
        .HeaderOverlay {
            display: flex
        }

        .HeaderOverlay-logo {
            flex-shrink: 0;
            inline-size: var(--logo-size-mobile)
        }

        .HeaderOverlay-logoImage {
            transform: translateY(4px)
        }

        .HeaderOverlay-logoLink {
            display: block
        }

        .HeaderOverlay-header {
            align-items: center;
            background-color: var(--c-lime-200);
            border-block-end: var(--divider-line);
            color: var(--c-black);
            display: flex;
            gap: var(--size-s);
            justify-content: space-between;
            padding-block: var(--size-xxxs);
            padding-inline: var(--content-block-padding-inline-size)
        }

        .HeaderOverlay-toggle {
            border-color: transparent
        }

        .HeaderOverlay-wrapper {
            background-color: var(--c-white);
            block-size: 100dvb;
            inset-block-start: var(--gin-toolbar-height, 0);
            inset-inline: 0;
            overflow-block: auto;
            overflow-y: auto;
            overscroll-behavior: contain;
            position: fixed
        }

        .HeaderOverlay[data-js=false] .HeaderOverlay-wrapper:not(:target),     .HeaderOverlay[data-js=true][data-open=false] .HeaderOverlay-wrapper,     .HeaderOverlay[data-js=false] .HeaderOverlay-header,     .HeaderOverlay[data-js=true][data-open=false] .HeaderOverlay-header {
            display: none
        }

        .HeaderOverlay-content {
            padding-block: var(--size-s);
            padding-inline: var(--content-block-padding-inline-size)
        }
    }

    @container header (inline-size >=62.5rem) {

        .HeaderOverlay-header,     .HeaderOverlay-toggle {
            display: none
        }
    }
}

@layer components {
    .HeaderMenuNav-entry {
        align-items: center;
        display: flex;
        font-weight: var(--default-font-weight-bold);
        gap: var(--size-xxs);
        padding-block: .5rem;
        text-decoration: none
    }

    .HeaderMenuNav-entry[aria-current=page] {
        font-weight: var(--default-font-weight-bold)
    }

    .HeaderMenuNav-toggleIcon {
        display: flex
    }

    .HeaderMenuNav-entry[aria-expanded=true] .HeaderMenuNav-toggleIcon {
        transform: rotate(-180deg)
    }

    .HeaderMenuNav-list--lvl2 {
        display: none
    }

    .HeaderMenuNav-entry[aria-expanded=true]+.HeaderMenuNav-list {
        display: block
    }

    .HeaderMenuNav-entry--lvl2 {
        font-size: var(--typo-DefaultSmall-font-size);
        font-weight: var(--default-font-weight);
        padding-inline: var(--size-xxs)
    }

    @container header (inline-size >=62.5rem) {
        .HeaderMenuNav-list--lvl1 {
            display: flex;
            flex-wrap: wrap
        }

        .HeaderMenuNav-list--lvl2 {
            background-color: var(--c-white);
            box-shadow: 0 .5rem 1rem var(--c-transparent-black);
            inset-block-start: 100%;
            inset-inline-start: 0;
            min-inline-size: 100%;
            padding-block: var(--size-s);
            position: absolute;
            z-index: 1
        }
		
		.HeaderMenuNav-list--lvl2 a { color:#000!important; }

        .HeaderMenuNav-item {
            align-items: center;
            display: flex;
            position: relative
        }

        .HeaderMenuNav-entry {
            padding-inline: var(--HeaderMenuNav-padding-inline, var(--size-xs));
            text-align: left
        }

        .HeaderMenuNav-entry--lvl2 {
            padding-inline: var(--size-s);
            white-space: nowrap
        }
    }

    .HeaderMenuNav-entry {
        --underline-offset: 8px
    }

    @container header (inline-size >=90.25rem) {
        .HeaderMenuNav-entry {
            --HeaderMenuNav-padding-inline: var(--size-s)
        }
    }
}

@layer components;

@layer components {
    .HeaderSearchInput {
        flex: 1
    }
}

@layer components {
    .HeaderSearch-form {
        align-items: center;
        display: flex;
        gap: var(--size-xxs);
        position: relative
    }

    .HeaderSearch-form .Input {
        padding-inline-end: 3rem
    }

    .HeaderSearch-form .Button {
        --border-radius: .5rem;
        background: none;
        border-color: transparent;
        color: currentColor;
        inset-block-start: 50%;
        inset-inline-end: var(--border-size);
        position: absolute;
        transform: translateY(-50%)
    }
}

@layer components {
    .Header {
        align-items: center;
        background-color: var(--c-theme-background, transparent);
        border-block-end: var(--divider-line);
        container-name: header;
        container-type: inline-size
    }

    .Header-wrapper {
        padding-inline: var(--Header-padding-inline, 1.5rem)
    }

    .Header-inner {
        --logo-size: var(--logo-size-desktop);
        align-items: center;
        display: flex;
        gap: var(--size-s);
        padding-block: var(--size-xxxs)
    }

    .Header-logo {
        flex-shrink: 0;
        inline-size: var(--logo-size)
    }

    .Header-logoImage {
        transform: translateY(4px)
    }

    .Header-logoLink {
        display: block
    }

    .Header-searchLocaleSwitcherWrapper {
        align-items: center;
        display: flex;
        gap: var(--size-m)
    }

    .Header-searchLocaleSwitcherWrapper .Input {
        max-inline-size: 10rem
    }

    @container header (inline-size < 62.5rem) {
        .Header-inner {
            --logo-size: var(--logo-size-mobile)
        }

        .Header-logo {
            margin-inline-end: auto
        }
    }

    @container header (inline-size >=62.5rem) {
        .Header-inner {
            justify-content: space-between
        }
    }

    @container header (inline-size >=90.25rem) {
        .Header-wrapper {
            --Header-padding-inline: var(--content-block-padding-inline-size)
        }
    }
}

@layer components {
    .TeaserGrid {
        background-color: var(--c-theme-background, transparent);
        container-name: teaser-grid;
        container-type: inline-size
    }

    :where(.TeaserGrid-centered) .TeaserGrid-title, :where(.TeaserGrid-centered) .TeaserGrid-copy {
        display: flex;
        justify-content: center;
        text-align: center
    }

    .TeaserGrid-copy {
        font: var(--typo-DefaultLead)
    }

    .TeaserGrid-copy:not(:first-child) {
        margin-block-start: var(--size-m)
    }

    :where(.TeaserGrid-centered) .TeaserGrid-copy {
        margin-inline: auto;
        max-inline-size: 80%
    }

    .TeaserGrid-items {
        --item-block-size: var(--TeaserGrid-item-block-size, auto);
        --item-min-block-size: var(--TeaserGrid-item-min-block-size, 25rem);
        --item-min-inline-size: var(--TeaserGrid-item-min-inline-size);
        --item-max-inline-size: var(--TeaserGrid-item-max-inline-size, 28rem)
    }

    .TeaserGrid-items:not(:first-child) {
        margin-block-start: var(--size-l-plus)
    }

    .TeaserGrid-items>:not(.MiniTeaser) {
        min-block-size: var(--item-min-block-size)
    }

    .TeaserGrid-items>* {
        block-size: var(--item-block-size);
        display: flex
    }

    @container teaser-grid (inline-size >=36rem) {
        .TeaserGrid-items {
            align-items: stretch;
            display: grid;
            gap: var(--size-m);
            grid-auto-flow: dense;
            grid-template-columns: repeat(auto-fill, minmax(var(--item-min-inline-size), 1fr));
            justify-content: center
        }

        .TeaserGrid-items:has(>:only-child) {
            grid-template-columns: repeat(1, minmax(var(--item-min-inline-size), var(--item-max-inline-size)))
        }

        .TeaserGrid-items:has(>:first-child+:last-child) {
            grid-template-columns: repeat(2, minmax(var(--item-min-inline-size), var(--item-max-inline-size)))
        }

        .TeaserGrid-items:has(>:first-child+*+:last-child) {
            grid-template-columns: repeat(3, minmax(var(--item-min-inline-size), var(--item-max-inline-size)))
        }

        .TeaserGrid-items--1-in-2>:nth-child(4n+2):not(:last-child),     .TeaserGrid-items--1-in-3>:nth-child(4n+3):not(:last-child),     .TeaserGrid-items--1-in-4>:nth-child(4n+3):not(:last-child),     .TeaserGrid-items--1-in-5>:nth-child(5n+5):not(:last-child) {
            grid-column: span var(--TeaserGrid-highlight-columns)
        }

        .TeaserGrid-items>.Teaser-isHighlight {
            grid-column: span var(--TeaserGrid-highlight-columns)
        }
    }

    @container teaser-grid (inline-size < 36rem) {
        .TeaserGrid-items>*+* {
            margin-block-start: var(--size-m)
        }
    }

    .TeaserGrid-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xs);
        justify-content: center;
        margin-block-start: var(--size-l-plus)
    }
}

@layer components {
    .ProduceStage .Stage-title {
        font: var(--typo-HeadingTitle)
    }

    .ProduceStage .Stage-media {
        
    }
}

@layer components {
    .ProduceStage .Stage-title {
        font: var(--typo-HeadingTitle)
    }

    .ProduceStage .Stage-media {
    }
}

@layer components {
    .Stage {
        --aspect-ratio: 1440/551;
        --min-block-size: 551px;
        --min-item-inline-size: 24rem;
        --allergen-block-size: 5rem;
        background-color: var(--c-lime-300);
        container-name: stage;
        container-type: inline-size;
        inline-size: 100%
    }

    .Stage-layout {
        align-items: stretch;
        block-size: 100%;
        display: flex;
        flex-wrap: wrap
    }

    @container stage (inline-size < 48rem) {
        .Stage-media {
            order: -1
        }
    }

    @container stage (inline-size >=48rem) {
        .Stage-layout {
            min-block-size: var(--min-block-size)
        }
    }

    @container stage (inline-size >=96rem) {
        .Stage-layout {
            aspect-ratio: var(--aspect-ratio)
        }
    }

    .Stage-layout>* {
        flex: 1 1 var(--min-item-inline-size);
        max-block-size: 100%
    }

    .Stage-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-inline-size: 0
    }

    .Stage-title {
        font: var(--typo-HeadingXL);
        hyphens: auto;
        overflow-wrap: break-word
    }

    .Stage-metadata {
        margin-block-start: var(--size-l-plus)
    }

    .Stage-metadata, .Stage-content {
        font: var(--typo-DefaultSmall)
    }

    .Stage-content, .Stage-allergens {
        margin-block-start: var(--size-m)
    }

    .Stage-allergensList {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-m);
        margin-block-start: var(--size-s)
    }

    .Stage-allergensListItem {
        align-items: center;
        display: inline-flex;
        flex-direction: column;
        gap: var(--size-xxs)
    }

    .Stage-allergenIcon {
        aspect-ratio: 1/1;
        block-size: var(--allergen-block-size)
    }

    .Stage-media {
        align-items: center;
        display: flex
    }
}

@layer components {
    .Template {
        background-color: var(--c-white);
        display: flex;
        flex-direction: column;
        min-block-size: 100dvb
    }

    .Template-skip {
        inset-block-start: 0;
        inset-inline-start: 50%;
        position: fixed;
        transform: translate(-50%);
        z-index: var(--z-index-skip-link)
    }

    .Template-header {
        inset-block-start: var(--gin-toolbar-height, 0);
        position: sticky;
        z-index: var(--z-index-header)
    }

    .Template-main {
        flex: 1;
        z-index: 0
    }
}

@layer components {
    .FactList {
        background-color: var(--c-theme-background, transparent);
        container-name: fact-list;
        container-type: inline-size
    }

    .FactList-layout {
        display: grid;
        grid-auto-flow: column;
        max-inline-size: 58.125rem;
        padding: var(--size-m);
        row-gap: var(--size-m)
    }

    .FactList-item {
        align-items: center;
        display: flex;
        flex-direction: column-reverse
    }

    .FactList-description {
        font: var(--typo-HandwrittenHeadingM)
    }

    @container fact-list (inline-size <=50rem) {
        .FactList-layout {
            grid-auto-flow: initial;
            grid-template-columns: 1fr 1fr
        }
    }

    @container fact-list (inline-size <=18.75rem) {
        .FactList-layout {
            grid-template-columns: 1fr
        }
    }
}

@layer components {
    .Feed-header {
        background-color: var(--c-green-forest);
        color: var(--c-white);
        padding-block-start: var(--content-block-padding-block-size)
    }

    .Feed-titleContainer {
        align-items: end;
        border-block-end: .1875rem solid var(--c-primary-green);
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-m);
        justify-content: space-between;
        padding-block-end: var(--size-l-plus)
    }

    .Feed-heading {
        font: var(--typo-HeadingXL)
    }

    .Feed-subtitle {
        color: var(--theme-color, currentColor);
        font: var(--typo-HandwrittenHeadingM);
        rotate: 2deg
    }

    .Feed-main {
        background-color: color-mix(in srgb, var(--theme-color, var(--c-white)), transparent 75%)
    }
}

@layer components {
    .LandingPageStage {
        --aspect-ratio: 1440/551;
        --min-block-size: 551px;
        align-items: end;
        block-size: 100%;
        container-name: stage;
        container-type: inline-size;
        display: flex;
        position: relative
    }

    .LandingPageStage-media {
        inset: 0;
        position: absolute;
        z-index: 0
    }

    .LandingPageStage-layout {
        align-items: end;
        block-size: 100%;
        display: flex;
        inline-size: 100%;
        min-block-size: var(--min-block-size);
        padding-block: var(--size-l-plus);
        position: relative
    }

    @container stage (inline-size >=96rem) {
        .LandingPageStage-layout {
            aspect-ratio: var(--aspect-ratio)
        }
    }

    .LandingPageStage-content {
        background-color: var(--c-theme-background, transparent);
        border-radius: var(--size-m);
        inline-size: clamp(70%, 48rem, 100%);
        margin-inline: auto;
        max-block-size: 100%;
        padding: var(--size-l);
        text-align: center
    }
}

@layer utils {
    .u-columns {
        --min-column-inline-size: var(--u-columns-min-column-inline-size, 25rem);
        --gap: var(--u-columns-gap, var(--size-s));
        --columns: var(--u-columns-count, 2);
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap)
    }

    .u-columns>* {
        flex-basis: max(calc(var(--min-column-inline-size) - var(--gap) / var(--columns)), calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns)));
        flex-grow: 1
    }
}

@layer utils {
    .u-container {
        inline-size: min(100%, calc(var(--container-max-inline-size) + var(--component-spacing-x)));
        margin-inline: auto
    }
}

@layer utils {
    .u-content-block {
        padding: var(--content-block-padding-block-size) var(--content-block-padding-inline-size)
    }

    .u-content-block--flat {
        padding: calc(var(--content-block-padding-block-size) / 2) var(--content-block-padding-inline-size)
    }
	.u-content-block--flat p { margin:1em auto; }

    .u-content-block--inline {
        padding-inline: var(--content-block-padding-inline-size)
    }
}

@layer components {
    .Tag {
        --underline-offset: .15em;
        border: var(--border-size) solid currentColor;
        border-radius: var(--border-radius);
        display: block;
        font: var(--typo-DefaultXSmall);
        padding-block: .1875rem;
        padding-inline: var(--size-s)
    }
}

@layer components {
    .Tags {
        background-color: var(--c-theme-background, transparent)
    }

    .Tags-heading {
        margin-block-end: var(--size-l-plus)
    }

    .Tags-list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xxs)
    }

    .Tags-list>* {
        display: block
    }
}

@layer utils {
    .u-crop-baseline:after {
        --baseline-offset: var(--u-baseline-offset, 0rem);
        block-size: 0;
        content: "";
        display: block;
        inline-size: 0;
        margin-block-start: calc(-1 * var(--baseline-offset))
    }
}

@layer utils {
    [hidden] {
        display: none !important
    }
}

@layer components {
    .ShareList {
        background-color: var(--c-theme-background, transparent);
        justify-content: end;
        padding-block: var(--size-xxs)
    }

    .ShareList, .ShareList-list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xxs)
    }

    .ShareList-label {
        --u-baseline-offset: var(--typo-HandwrittenHeadingS-baseline-offset);
        font: var(--typo-HandwrittenHeadingS)
    }

    .ShareList-listItem {
        display: block
    }

    .ShareList-link {
        display: block;
        padding: var(--size-xs)
    }
}

@layer components {
    .Recipe {
        container-name: recipe;
        container-type: inline-size
    }

    .Recipe-ingredients>*+*, .Recipe .main-content>*+* {
        margin-block-start: var(--size-l-plus)
    }

    .Recipe-anchorList:empty, .Recipe-headerSocialBlock:empty, .Recipe-socialBlock:empty {
        display: none
    }

    @container recipe (inline-size < 30rem) {
        .Recipe-headerSocialBlock {
            display: none
        }
    }

    @container recipe (inline-size >=30rem) {
        .Recipe-anchorList {
            display: none
        }
    }

    .Recipe-main {
        padding-block: var(--content-block-padding-block-size)
    }

    .Recipe-main .main-content>.MediaBlock {
        --content-block-padding-block-size: 0;
        --content-block-padding-inline-size: 0
    }

    @container recipe (inline-size < 64rem) {
        .Recipe-main {
            display: flex;
            flex-direction: column;
            gap: var(--size-l-plus)
        }

        .Recipe-ingredients {
            order: 1
        }

        .Recipe-content {
            order: 2
        }

        .Recipe-nutritionTable {
            order: 3
        }
    }

    @container recipe (inline-size >=64rem) {
        .Recipe-main {
            display: grid;
            gap: calc(2 * var(--size-l-plus)) var(--size-l-plus);
            grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
            grid-template-rows: repeat(var(--main-grid-rows), min-content)
        }

        .Recipe-ingredients {
            grid-column: 1 / span 1;
            grid-row: 1 / span var(--main-grid-rows)
        }

        .Recipe-intro,     .Recipe-content,     .Recipe-nutritionTable,     .Recipe-relatedTopics {
            grid-column: 2 / span 1
        }

        .Recipe-socialBlock {
            grid-column: 1 / span 2
        }
    }
}

@layer components {
    .NutritionFactsTable-tableWrapper>*+* {
        margin-block-start: var(--size-xs)
    }

    .NutritionFactsTable-tableWrapper {
        overflow-x: auto
    }

    .NutritionFactsTable-table {
        inline-size: 100%
    }

    .NutritionFactsTable-tableRow>:is(th, td) {
        padding: var(--size-xxs) var(--size-s)
    }

    .NutritionFactsTable-tableRow:nth-child(odd) {
        background-color: var(--c-lime-100)
    }

    .NutritionFactsTable-tableCell--label {
        vertical-align: top
    }

    .NutritionFactsTable-tableCell--value {
        text-align: right
    }

    .NutritionFactsTable-valueHeaderText, .NutritionFactsTable-sourceLink {
        font: var(--typo-DefaultSmall)
    }

    .NutritionFactsTable-byline {
        display: block
    }

    .NutritionFactsTable-footerText {
        font: var(--typo-DefaultSmall)
    }
}

@layer components {
    .ContentBlock-title {
        margin-block-end: var(--size-l-plus)
    }
}

@layer utils {

    .u-hiddenVisually:not(.u-hiddenVisually--focusVisible), .u-hiddenVisually--focusVisible:not(:focus), .visually-hidden {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px
    }
}

@layer utils {
    .u-link {
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset)
    }

    .u-link:focus-visible {
        text-decoration: none
    }
	
    .u-linkUnderline, .u-linkHover {
        text-decoration: none;
        text-decoration-color: transparent;
        text-decoration-thickness: 0;
        text-underline-offset: 0;
        transition: var(--link-transition)
    }

    .u-linkHover:where(.u-truncate) {
        padding-block-end: var(--underline-thickness)
    }

    .u-linkHover:hover, .u-linkTrigger:hover .u-linkUnderline, .u-linkTrigger:hover~.u-linkSibling .u-linkUnderline {
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-decoration-thickness: var(--underline-thickness);
        text-underline-offset: var(--underline-offset)
    }
	
	.Header .u-linkHover { color:#FFF; }
	.Header .u-linkHover:hover { text-decoration-color:#FFF!important; }
}

@layer utils {
    .u-object-fit-container>picture {
        block-size: 100%;
        display: block;
        inline-size: 100%
    }

    .u-object-fit-container>picture>img, .u-object-fit-container>img, .u-object-fit-container>video-embed {
        block-size: 100%;
        inline-size: 100%
    }

    .u-object-fit-container>picture>img, .u-object-fit-container>img {
        object-fit: var(--u-object-fit, cover)
    }
}

@layer utils {
    .u-repel-inline-start {
        margin-inline-start: auto
    }

    .u-repel-inline-end {
        margin-inline-end: auto
    }

    .u-repel-block-start {
        margin-block-start: auto
    }

    .u-repel-block-end {
        margin-block-end: auto
    }
}

@layer utils {
    .u-stack>*+* {
        margin-block-start: var(--size-m)
    }
}

@layer utils {
    .t-heading-xl {
        color: var(--c-theme-text-accent, var(--c-theme-text-body, currentColor));
        font: var(--typo-HeadingXL)
    }

    .t-heading-l {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HeadingL)
    }

    .t-heading-m {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HeadingM)
    }

    .t-heading-s {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HeadingS)
    }

    .t-heading-xs {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HeadingXS)
    }

    .t-default-lead {
        font: var(--typo-DefaultLead)
    }

    .t-default-body {
        font: var(--typo-DefaultBody)
    }

    .t-default-small {
        font: var(--typo-DefaultSmall)
    }

    .t-default-xsmall {
        font: var(--typo-DefaultXSmall)
    }

    .t-decorative-xl {
        color: var(--c-theme-text-accent, var(--c-theme-text-body, currentColor));
        font: var(--typo-HandwrittenHeadingXL)
    }

    .t-decorative-l {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HandwrittenHeadingL)
    }

    .t-decorative-m {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HandwrittenHeadingM)
    }

    .t-decorative-s {
        color: var(--c-theme-text-body, currentColor);
        font: var(--typo-HandwrittenHeadingS)
    }
}

@layer utils {
    .u-theme-block {
        --c-theme-text-accent: var(--u-c-theme-default-text-accent);
        --c-theme-text-body: var(--u-c-theme-default-text-body);
        --c-theme-background: var(--u-c-theme-default-background);
        color: var(--c-theme-text-body, currentColor)
    }

    @media(prefers-contrast:more) {
        .u-theme-block {
            --c-theme-text-body: var(--u-c-theme-default-text-body-high-contrast, var(--u-c-theme-default-text-body))
        }
    }

    .u-theme-block--inverted {
        --c-theme-text-accent: var(--u-c-theme-inverted-text-accent);
        --c-theme-text-body: var(--u-c-theme-inverted-text-body);
        --c-theme-background: var(--u-c-theme-inverted-background)
    }

    @media(prefers-contrast:more) {
        .u-theme-block--inverted {
            --c-theme-text-body: var(--u-c-theme-inverted-text-body-high-contrast, var(--u-c-theme-inverted-text-body))
        }
    }

    .u-theme-block-reset {
        --c-theme-text-accent: initial;
        --c-theme-text-body: initial;
        --c-theme-background: initial
    }
}

@layer components {
    .AccordionItem-title {
        --block-size: 2.75rem;
        --border-size: .125rem;
        --outline-size: .1875rem;
        align-items: center;
        background-color: transparent;
        border: var(--border-size) solid color-mix(in srgb, currentColor, transparent 50%);
        border-radius: var(--border-radius);
        box-sizing: border-box;
        color: currentColor;
        cursor: pointer;
        display: inline-flex;
        font: var(--typo-DefaultSmall);
        gap: var(--size-s);
        justify-content: center;
        min-block-size: var(--block-size);
        padding-inline: 1.5em;
        text-wrap: balance
    }

    .AccordionItem-title:focus-visible {
        --focus-outline: var(--outline-size) solid currentColor;
        border-color: currentColor;
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .AccordionItem-title:where(:not(:disabled)):hover {
        border-color: currentColor
    }

    .AccordionItem-title::-webkit-details-marker {
        display: none
    }

    :where(.AccordionItem[open]) .AccordionItem-title {
        margin-block-end: var(--size-s)
    }

    :where(.AccordionItem[open]) .AccordionItem-titleIcon {
        transform: rotate(-180deg)
    }
}

@layer components {
    .AnchorList {
        container-name: anchor-list;
        container-type: inline-size
    }

    .AnchorList-list {
        display: grid;
        gap: .1875rem;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr))
    }

    .AnchorList-listItem {
        display: block
    }

    .AnchorList-anchor {
        align-items: center;
        background-color: var(--c-theme-background, transparent);
        block-size: 100%;
        display: flex;
        flex-direction: column;
        padding: var(--size-m)
    }

    .AnchorList-label {
        text-align: center
    }

    @container anchor-list (inline-size <=50rem) {
        .AnchorList-list {
            grid-auto-flow: initial;
            grid-template-columns: 1fr 1fr
        }

        .AnchorList-listItem:nth-child(odd):last-child {
            grid-column: 1 / -1
        }
    }

    @container anchor-list (inline-size <=18.75rem) {
        .AnchorList-list {
            grid-template-columns: 1fr
        }
    }
}

@layer utils {
    .u-truncate {
        -webkit-box-orient: vertical;
        display: -webkit-inline-box;
        -webkit-line-clamp: var(--u-truncate-line-clamp, 2);
        overflow: hidden
    }
}

@layer components {
    .DownloadLink {
        background-color: var(--c-theme-background, transparent)
    }
}

@layer components {
    .Heading {
        word-break: break-word
    }
}

@layer components {
    .Hero {
        --aspect-ratio: 1440/551;
        container-name: hero;
        container-type: inline-size;
        max-inline-size: 100%
    }

    .Hero-main {
        padding-block: var(--content-block-padding-block-size);
        padding-inline: var(--content-block-padding-inline-size);
        position: relative
    }

    :where(.Hero-centered) .Hero-textWrapper {
        text-align: center
    }

    .Hero-title {
        margin-block-end: var(--size-m)
    }

    .Hero-mediaWrapper {
        inset: 0;
        overflow: hidden;
        position: absolute;
        z-index: 0
    }

    .Hero-cardLayout {
        position: relative
    }

    @container hero (inline-size >=48rem) {
        .Hero-cardLayout {
            aspect-ratio: var(--aspect-ratio)
        }
    }

    .Hero-card {
        background-color: var(--c-white);
        block-size: fit-content;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        max-block-size: 100%;
        min-block-size: 0;
        padding: var(--size-l)
    }

    .Hero-card>*+* {
        margin-block-start: var(--size-s)
    }

    .Hero-cardTitle {
        font: var(--typo-HeadingS);
        font-weight: var(--default-font-weight-bold)
    }

    .Hero-cardCopy {
        overflow-y: auto
    }

    .Hero-cardLink {
        align-self: start
    }

    @media(width<62rem) {
        .Hero-main {
            display: grid;
            grid-template-rows: 1fr 1fr;
            padding-block-end: 1rem;
            place-items: end
        }

        .Hero-cardLayout.Hero-cardLayout {
            aspect-ratio: unset;
            grid-row: 2
        }

        .Hero-card {
            max-block-size: 16rem;
            min-block-size: 10rem;
            padding: var(--size-m)
        }
    }

    @container hero (inline-size >=62rem) {
        .Hero-cardLayout {
            align-items: end;
            block-size: 100%;
            column-gap: var(--size-m);
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 1fr
        }

        .Hero-cardLayout>* {
            grid-row-start: 1
        }

        .Hero-cardLayout--left .Hero-card {
            grid-column: 1 / 5
        }

        .Hero-cardLayout--center .Hero-card {
            grid-column: 3 / -3
        }

        .Hero-cardLayout--right .Hero-card {
            grid-column: 8 / -1
        }
    }
}

@layer components {
    .HomepageStage {
        --aspect-ratio: 1440/801;
        --min-block-size: 801px;
        --header-min-inline-size: 24rem;
        --footer-min-inline-size: 24rem;
        background-color: var(--c-theme-background, transparent);
        block-size: 100%;
        container-name: stage;
        container-type: inline-size;
        position: relative
    }

    .HomepageStage-media {
        inset: 0;
        position: absolute;
        z-index: 0
    }

    .HomepageStage-layout {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-l-plus);
        justify-content: space-between;
        position: relative
    }

    @container stage (inline-size >=48rem) {
        .HomepageStage-layout {
            min-block-size: var(--min-block-size)
        }
    }

    @container stage (inline-size >=96rem) {
        .HomepageStage-layout {
            aspect-ratio: var(--aspect-ratio)
        }
    }

    .HomepageStage-header {
        flex: 2;
        min-inline-size: min(100%, var(--header-min-inline-size))
    }

    .HomepageStage-title {
        background-color: var(--c-green-forest);
        border-radius: var(--size-xxxs);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        color: var(--c-white);
        display: inline;
        line-height: 1.4;
        padding-block-end: .6rem;
        padding-inline: var(--size-s)
    }

    @media(width<48rem) {
        .HomepageStage-title {
            line-height: 1.5;
            padding-block-end: .3rem
        }
    }

    .HomepageStage-footer {
        align-self: flex-end;
        display: flex;
        flex: 1;
        justify-content: flex-end;
        min-inline-size: min(100%, var(--footer-min-inline-size))
    }

    .HomepageStage-teaserList {
        display: flex;
        flex-direction: column;
        gap: var(--size-m)
    }

    @container stage (inline-size < 64rem) {
        .HomepageStage-teaserList>:not(:first-child) {
            display: none !important
        }
    }

    .HomepageStage .MiniTeaser {
        --MiniTeaser-max-block-size: 8rem;
        --MiniTeaser-padding: var(--size-xs)
    }
}

@layer components {
    .LocaleSwitcher-openButtonMobile {
        border-color: transparent
    }

    /* @media(width<48rem) {
        .LocaleSwitcher-openButtonDesktop {
            display: none
        }
    } */

    @media(width>=48rem) {
        .LocaleSwitcher-openButtonMobile {
            display: none
        }
    }
}

@layer components {
    .MiniTeaser {
        --max-block-size: var(--MiniTeaser-max-block-size, 9.25rem);
        --outer-border-radius: var(--size-m);
        --padding: var(--MiniTeaser-padding, 0rem);
        background-color: var(--c-white);
        border-radius: var(--outer-border-radius);
        box-shadow: var(--teaser-box-shadow);
        color: var(--c-black);
        display: flex;
        flex-wrap: wrap;
        max-block-size: calc(var(--max-block-size) + 2 * var(--padding));
        overflow: hidden;
        padding: var(--padding);
        position: relative
    }

    .MiniTeaser a {
        outline: none
    }

    .MiniTeaser:focus-within {
        --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus));
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .MiniTeaser-imageWrapper {
        border-bottom-left-radius: calc(var(--outer-border-radius) - var(--padding));
        border-top-left-radius: calc(var(--outer-border-radius) - var(--padding));
        flex-shrink: 0;
        overflow: hidden
    }

    .MiniTeaser-imageWrapper>* {
        aspect-ratio: 1 / 1;
        max-inline-size: var(--max-block-size)
    }

    .MiniTeaser-textWrapper {
        display: flex;
        flex: 1;
        flex-direction: column;
        flex-wrap: wrap;
        min-inline-size: 0;
        padding-block: calc(var(--size-m) - var(--padding)) calc(var(--size-s) - var(--padding));
        padding-inline: var(--size-m) calc(var(--size-m) - var(--padding))
    }

    .MiniTeaser-link {
        font: var(--typo-HeadingS)
    }

    .MiniTeaser-link:after {
        content: "";
        inset: 0;
        position: absolute
    }

    .MiniTeaser .conversational-ui-button {
        text-align: initial
    }
}

@layer components {
    .Newsletter {
        background-color: var(--c-theme-background, transparent);

        :focus-visible {
            --focus-outline: var(--outline-size) solid var(--c-green-forest)
        }
    }

    .Newsletter-title>*, .Newsletter-title {
        font: var(--typo-HandwrittenHeadingXL)
    }

    .Newsletter-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-inline-end: var(--size-xxxl)
    }

    .Newsletter-formContainer {
        container-name: newsletter-form;
        container-type: inline-size;
        margin-block-start: var(--size-m);
		font-weight:bold;
		line-height:2em;
		font-size:1.5em;
		padding-left: 1em;
		border-left: 10px solid var(--c-orange-dark);
		color:#FFF;
    }

    .Newsletter-subtitle {
        font: var(--typo-HeadingS)
    }

    .Newsletter-formContainer .FormElement {
        margin-block-start: 0
    }

    .Newsletter-terms {
        font: var(--typo-DefaultSmall)
    }

    @container newsletter-form (inline-size < 24rem) {
        .Newsletter-form>*+*:not(.increase-specificity) {
            margin-block-start: var(--size-m)
        }
    }

    @container newsletter-form (inline-size >=24rem) {
        .Newsletter-form {
            display: grid;
            gap: var(--size-xxs) var(--size-m);
            grid-template-areas: "firstName firstName lastName lastName" "email email email zipCode" "terms terms terms terms" "submitButton submitButton submitButton submitButton";
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(4, min-content)
        }

        .Newsletter-firstName {
            grid-area: firstName
        }

        .Newsletter-lastName {
            grid-area: lastName
        }

        .Newsletter-email {
            grid-area: email
        }

        .Newsletter-zipCode {
            grid-area: zipCode
        }

        .Newsletter-terms {
            grid-area: terms
        }

        .Newsletter-submitButton {
            grid-area: submitButton;
            justify-self: start
        }
    }
}

@layer components {
    .ProduceTeaser-layout {
        background-color: var(--background-color, var(--c-white));
        block-size: 100%;
        border-radius: var(--teaser-border-radius);
        box-shadow: var(--teaser-box-shadow);
        color: var(--c-black);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        overflow: hidden;
        position: relative
    }

    .ProduceTeaser a {
        outline: none
    }

    .ProduceTeaser-layout:focus-within {
        --focus-outline: var(--outline-size) solid var(--c-theme-text-accent, var(--c-focus));
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .ProduceTeaser-media {
        aspect-ratio: 1;
        display: flex;
        min-block-size: 0
    }

    .ProduceTeaser-media>* {
        object-fit: cover
    }

    .ProduceTeaser-text {
        background-color: var(--c-white);
        flex-grow: 1;
        padding: var(--size-m)
    }

    .ProduceTeaser-title {
        font: var(--typo-HeadingM)
    }

    .ProduceTeaser-title:before {
        content: "";
        inset: 0;
        position: absolute
    }
}

@layer components {
    .SocialLinks {
        background-color: var(--c-theme-background, transparent);
        text-align: center
    }

    .SocialLinks-layout, .SocialLinks-list {
        align-items: center;
        display: inline-flex
    }

    .SocialLinks-layout {
        gap: var(--size-xs)
    }

    .SocialLinks-list {
        gap: var(--size-xxs)
    }

    :where(.SocialLinks.SocialLinks--vertical) .SocialLinks-layout, :where(.SocialLinks.SocialLinks--vertical) .SocialLinks-list {
        align-items: start;
        flex-direction: column
    }

    :where(.SocialLinks.SocialLinks--vertical) .SocialLinks-label {
        font: var(--typo-HeadingS)
    }

    :where(.SocialLinks:not(.SocialLinks--vertical)) .SocialLinks-label {
        --u-baseline-offset: var(--typo-HandwrittenHeadingS-baseline-offset);
        font: var(--typo-HandwrittenHeadingS)
    }

    .SocialLinks-listItem {
        display: block
    }

    .SocialLinks-link {
        align-items: center;
        display: inline-flex;
        gap: var(--size-xxs);
        padding: var(--size-xs)
    }
}

@layer components {
    .TeaserList {
        background-color: var(--c-theme-background, transparent);
        container-name: teaser-list;
        container-type: inline-size
    }

    :where(.TeaserList-centered) .TeaserList-title, :where(.TeaserList-centered) .TeaserList-copy {
        display: flex;
        justify-content: center;
        text-align: center
    }

    .TeaserList-copy:not(:first-child) {
        margin-block-start: var(--size-m)
    }

    .TeaserList-copy {
        font: var(--typo-DefaultLead)
    }

    :where(.TeaserList-centered) .TeaserList-copy {
        margin-inline: auto;
        max-inline-size: 80%
    }

    .TeaserList-items {
        --item-block-size: var(--TeaserList-item-block-size, auto);
        --item-min-block-size: var(--TeaserList-item-min-block-size, 25rem);
        --item-min-inline-size: var(--TeaserList-item-min-inline-size);
        --item-max-inline-size: var(--TeaserList-item-max-inline-size, 28rem)
    }

    .TeaserList-items:not(:first-child) {
        margin-block-start: var(--size-l-plus)
    }

    .TeaserList-items>:not(.MiniTeaser) {
        min-block-size: var(--item-min-block-size)
    }

    .TeaserList-items>* {
        block-size: var(--item-block-size);
        display: flex
    }

    @container teaser-list (inline-size >=36rem) {
        .TeaserList-items {
            align-items: stretch;
            display: grid;
            gap: var(--size-l-plus) var(--size-m);
            grid-auto-flow: dense;
            grid-template-columns: repeat(auto-fill, minmax(var(--item-min-inline-size), 1fr));
            justify-content: center
        }

        .TeaserList-items:has(>:only-child),     .TeaserList-items:has(>:first-child+:last-child),     .TeaserList-items:has(>:first-child+*+:last-child) {
            display: flex;
            flex-wrap: wrap
        }

        .TeaserList-items:has(>:only-child)>*,     .TeaserList-items:has(>:first-child+:last-child)>*,     .TeaserList-items:has(>:first-child+*+:last-child)>* {
            flex-grow: 1;
            flex-shrink: 0;
            max-inline-size: var(--item-max-inline-size);
            min-inline-size: var(--item-min-inline-size)
        }
    }

    @container teaser-list (inline-size < 36rem) {
        .TeaserList-items>*+* {
            margin-block-start: var(--size-xl)
        }
    }

    .TeaserList-footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xs);
        justify-content: center;
        margin-block-start: var(--size-l-plus)
    }
}

@layer components {
    .TeaserSlider {
        --max-row-block-size: auto;
        background-color: var(--c-theme-background, transparent)
    }

    @media(width<48rem) {
        .TeaserSlider .Slider-actions {
            display: none !important
        }
    }

    .TeaserSlider-footer {
        display: flex;
        justify-content: center
    }

    .TeaserSlider .Slider {
        --Slider-partial-item-fraction: .2
    }

    .TeaserSlider .Slider-title {
        font: var(--typo-HeadingXL)
    }

    .TeaserSlider .Slider-scrollContainer>* {
        max-block-size: var(--max-row-block-size)
    }
}

@layer components {
    .TextMedia {
        --gap: var(--size-xxl);
        --min-item-inline-size: var(--TextMedia-min-item-inline-size, 24rem);
        background-color: var(--c-theme-background, transparent);
        container-name: text-media;
        container-type: inline-size
    }

    .TextMedia-hasStickyMedia {
        align-items: stretch;
        display: grid
    }

    .TextMedia-heading {
        margin-block-end: .5em
    }

    .TextMedia-content {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap
    }

    .TextMedia-content>* {
        flex-basis: 50%;
        flex-grow: 1;
        min-inline-size: min(var(--min-item-inline-size), 100%)
    }

    .TextMedia-text {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .TextMedia-text>*+* {
        margin-block-start: var(--size-l-plus)
    }

    .TextMedia-text>*+.Button {
        margin-block-start: var(--size-m)
    }

    .TextMedia-text>:where(.Button) {
        display: flex;
        width: fit-content
    }

    .TextMedia-media>*, .TextMedia-media {
        font: var(--typo-HandwrittenHeadingXL)
    }

    .TextMedia-media {
        align-items: center;
        align-self: stretch;
        display: flex
    }

    @container text-media (inline-size < 48rem) {
        .TextMedia-media {
            order: -1
        }
    }

    :where(.TextMedia:not(.TextMedia-hasStickyMedia)) .TextMedia-media>* {
        max-block-size: 64rem
    }

    .TextMedia-mediaFrame {
        inline-size: 100%
    }

    @container text-media (inline-size >=48rem) {
        .TextMedia-mediaFrame {
            inset-block-end: 0;
            inset-block-start: var(--Header-block-size, 0);
            max-block-size: calc(100dvh - var(--Header-block-size, 0));
            overflow: hidden;
            position: sticky
        }
    }

    .TextMedia-media:where(:not(:has(img, .VideoEmbed))) {
        padding: var(--content-block-padding-block-size) var(--content-block-padding-inline-size)
    }
}

@layer components {
    .NutritionFactsHero-factList {
        align-items: stretch
    }

    .NutritionFactsHero-factListItem {
        display: flex;
        flex-direction: column-reverse
    }

    .NutritionFactsHero-factListDescription {
        font: var(--typo-HandwrittenHeadingL)
    }
}

@layer components {
    .Collection-headerFilters {
        background-color: var(--c-theme-background, transparent);
        padding-block-end: var(--size-l-plus);
        padding-block-start: var(--size-m)
    }

    .Collection-inlineFilters {
        padding-block-start: var(--size-l-plus)
    }
}

@layer components {

    :where(.CUI[data-js=false]) .CUI-toggleButton, :where(.CUI[open-state=collapsed]) .CUI-form, :where(.CUI:not([open-state=expanded])) .CUI-main {
        display: none !important
    }

    .CUI {
        container-name: conversational-ui;
        container-type: inline-size;
        inset-block-end: 0;
        inset-inline: 0;
        position: fixed;
        z-index: var(--z-index-conversational-ui)
    }

    .CUI-content {
        --inner-border-radius: var(--size-xs);
        --content-padding: var(--size-xs);
        background-color: var(--c-theme-background, transparent);
        display: flex;
        flex-direction: column;
        position: relative
    }

    :where(.CUI:not([open-state=collapsed])) .CUI-content {
        padding: var(--content-padding)
    }

    :where(.CUI:not([open-state=collapsed])) .CUI-content:before {
        inset-block-end: calc(-1 * var(--backdrop-padding))
    }

    .CUI-toggleButtonWrapper {
        align-items: center;
        background-color: var(--c-theme-background, transparent);
        display: flex;
        inset-block-end: 0;
        inset-inline-end: 0;
        padding: var(--size-xxxs);
        position: absolute
    }

    :where(.CUI:not([open-state=collapsed])) .CUI-toggleButtonWrapper {
        inset-block-end: 100%
    }

    .CUI-toggleButtonWrapper:before {
        border-top-left-radius: calc(var(--inner-border-radius) + var(--backdrop-padding));
        border-top-right-radius: calc(var(--inner-border-radius) + var(--backdrop-padding))
    }

    :where(.CUI[open-state=collapsed]) .CUI-toggleButtonWrapper:before {
        inset-block-end: calc(-1 * var(--backdrop-padding))
    }

    :where(.CUI:not([open-state=collapsed])) .CUI-toggleButtonWrapper:before {
        inset-block-end: calc(1 * var(--backdrop-padding))
    }

    .CUI-toggleButtonWrapper:before, :where(.CUI:not([open-state=collapsed])) .CUI-content:before {
        backdrop-filter: blur(48px);
        background-color: var(--c-transparent-black);
        content: "";
        inset-block-start: calc(-1 * var(--backdrop-padding));
        inset-inline: calc(-1 * var(--backdrop-padding));
        position: absolute;
        z-index: -1
    }

    @container conversational-ui (inline-size < 48rem) {
        .CUI-content {
            --backdrop-padding: var(--size-s);
            --content-offset-bottom: 0;
            inline-size: 100%;
            max-block-size: 80dvh
        }

        .CUI-toggleButtonWrapper {
            border-top-left-radius: var(--size-xs);
            border-top-right-radius: var(--size-xs);
            margin-inline: var(--size-s)
        }

        :where(.CUI:not([open-state=collapsed])) .CUI-toggleButtonCuiIcon {
            display: none !important
        }
    }

    @container conversational-ui (inline-size >=48rem) {
        .CUI-content {
            --backdrop-padding: var(--size-m);
            --content-offset-bottom: var(--size-s);
            inline-size: calc(max(75dvw, 48rem) - 2 * var(--backdrop-padding));
            margin-inline: auto;
            max-block-size: 70dvh
        }

        :where(.CUI:not([open-state=collapsed])) .CUI-content {
            border-end-end-radius: var(--inner-border-radius);
            border-end-start-radius: var(--inner-border-radius);
            border-start-start-radius: var(--inner-border-radius);
            margin-block-end: var(--size-s)
        }

        .CUI-toggleButtonWrapper {
            border-top-left-radius: var(--size-m);
            border-top-right-radius: var(--size-m)
        }

        :where(.CUI:not([open-state=collapsed])) .CUI-content:before {
            border-top-left-radius: calc(var(--inner-border-radius) + var(--backdrop-padding))
        }
    }

    .CUI-toggleButton {
        border-color: transparent
    }

    .CUI-toggleButtonLabel {
        align-items: center;
        display: inline-flex;
        gap: var(--size-xxs)
    }

    :where(.CUI:not([open-state=collapsed])) .CUI-toggleButtonIcon {
        transform: rotate(180deg)
    }

    .CUI-main {
        align-content: end;
        flex-grow: 1;
        margin-block-end: var(--size-m);
        min-block-size: 0;
        overflow-y: auto;
        padding: var(--size-s);
        scroll-snap-type: y proximity
    }

    .CUI-main:after {
        content: "";
        display: block;
        scroll-snap-align: end
    }

    .CUI-exchangeList>*+* {
        margin-block-start: var(--size-xxs)
    }

    .CUI-exchangeList:empty {
        display: none
    }

    .CUI-exchangeInput, .CUI-exchangeOutputBody {
        border-radius: var(--size-xxs);
        inline-size: fit-content;
        padding: var(--size-xs) var(--size-xs) var(--size-s) var(--size-xs)
    }

    .CUI-exchangeInput {
        background-color: var(--c-primary-green);
        margin-inline-start: auto
    }

    .CUI-exchangeOutput {
        align-items: start;
        display: inline-flex;
        gap: var(--size-xs);
        margin-block-start: var(--size-s);
        margin-inline-end: auto
    }

    .CUI-exchangeOutput:empty {
        display: none
    }

    .CUI-exchangerOutputIcon {
        background-color: var(--c-rose);
        border-radius: 50%;
        flex-shrink: 0;
        margin-block-start: var(--size-xs);
        padding: var(--size-xxxs)
    }

    .CUI-exchangeOutputBody {
        inline-size: fit-content;
        margin-inline-end: auto
    }

    .CUI-exchangeOutput-hasError .CUI-exchangeOutputBody {
        background-color: var(--color-decoration-error);
        color: var(--c-white)
    }

    .CUI-exchangeOutputBody+.CUI-exchangeOutputBody {
        margin-block-start: var(--size-xs)
    }

    .CUI-exchangeOutputLinkList {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-s);
        margin-block-start: var(--size-s)
    }

    .CUI-exchangeOutputLinkListItem {
        background-color: var(--c-primary-green);
        border-radius: var(--size-xxs);
        display: block;
        inline-size: 16rem;
        overflow: hidden
    }

    .CUI-exchangeOutputLink {
        block-size: 100%;
        display: flex;
        flex-direction: column
    }

    .CUI-exchangeOutputLinkLabel {
        align-items: center;
        display: flex;
        gap: var(--size-xxs);
        justify-content: space-between;
        padding: var(--size-xs)
    }

    .CUI-exchangeOutputLinkLabelIcon {
        flex-shrink: 0
    }

    .CUI-exchangeOutputLinkMedia {
        flex-grow: 1;
        inline-size: 100%;
        max-block-size: 12rem;
        object-fit: cover
    }

    .CUI:has(.CUI-exchange) .CUI-suggestions {
        display: none !important
    }

    .CUI-suggestionList {
        align-items: stretch;
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-xxs)
    }

    .CUI-applySuggestionButton {
        background-color: var(--c-primary-green);
        border-radius: var(--size-xxs);
        flex: 1;
        padding: var(--size-m) var(--size-s)
    }

    .CUI-applySuggestionButton:focus-visible {
        --c-focus: var(--c-white);
        --focus-outline: var(--outline-size) solid var(--c-focus);
        outline: var(--focus-outline);
        outline-offset: var(--focus-outline-offset)
    }

    .CUI-applySuggestionButton:where(:not(:disabled)):hover {
        background-color: var(--c-green-forest)
    }

    .CUI-form {
        flex-grow: 1
    }

    .CUI-inputWrapper {
        color: var(--c-black);
        position: relative
    }

    .CUI-inputIcon {
        inset-block-start: 50%;
        inset-inline-start: 1em;
        position: absolute;
        transform: translateY(-50%)
    }

    .CUI-input {
        padding-inline: 3.25rem
    }

    .CUI-submitButton:not(.increase-specificity) {
        --border-radius: .5rem;
        background: none;
        border-color: transparent;
        inset-block-start: 50%;
        inset-inline-end: .5em;
        position: absolute;
        transform: translateY(-50%)
    }
}

.cdot-menu--layout-inline>* {
    display: inline-block;
}

.cdot-menu--layout-stacked>* {
    display: block;
}

.cdot-menu-layout-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.cdot-menu-layout-col {
    width: 100%;
    padding: 10px;
}

.cdot-menu-layout-col--full {
    width: 100%;
}

@media screen and (min-width:992px) {
    .cdot-menu-layout-col--half {
        width: 50%;
    }

    .cdot-menu-layout-col--one-third {
        width: 33.33%;
    }

    .cdot-menu-layout-col--two-third {
        width: 66.66%;
    }
}

.cdot-menu-dropdown-content {
    position: absolute;
    z-index: 1;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.cdot-menu-navbar {
    overflow: hidden;
}

.cdot-menu-dropdown {
    overflow: hidden;
}

.cdot-menu-dropdown.js-active .cdot-menu-dropdown-content {
    display: block;
}

.cdot-menu-dropdown.js-active,
.cdot-menu-dropbtn:focus,
.cdot-menu-dropbtn:hover {
    background-color: #d0491e;
}

.cdot-menu-dropdown .Icon {
    transform: rotate(90deg);
}

.cdot-menu-dropdown[aria-expanded="true"] .Icon {
    transform: rotate(-90deg);
}

.cdot-menu-dropdown-content {
    display: none;
}

.cdot-menu {
    --color-dark: #2a2a2a;
    --color-dark-cool: #012954;
    --color-grey-darkest: #647383;
    --color-grey-dark: #cad5e0;
    --color-grey-light: #ebf0f5;
    --color-grey-lightest: #f5f7fa;
    --color-white: #fff;
    --color-primary: #0096db;
    --color-primary--accessible: #0079d2;
    --color-highlight: #ff6f40;
    --color-highlight--accessible: #d0491e;
    --color-bluey-grey: #647383;
    --color-bluey-grey-brighter: #949ea8;
    --color-secondary: #00c58e;
    --color-secondary--accessible: #008762;
    --color-transparent: rgba(1, 0, 0, 0);
}

.cl-component--cdot-menu[data-c-l-component-variant=""] {}

.cdot-menu-navbar {
    background-color: var(--color-primary--accessible);
}

.cdot-menu--level-1>a {
    margin: 0;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
    color: var(--color-white);
}

.cdot-menu--level-1 {
    text-align: center;
}

.cdot-menu--level-2 {
    text-align: left;
}

.cdot-menu--level-3 {
    text-align: left;
}

.cdot-menu-mega-footer {
    color: var(--color-white);
    background-color: var(--color-highlight--accessible);
}

.cdot-menu-mega-action {
    color: var(--color-white);
    background-color: var(--color-secondary--accessible);
}

.cdot-menu-dropdown-content {
    background-color: var(--color-grey-lightest);
}

.cdot-menu-mega-header {
    padding: 16px;
    color: var(--color-white);
    background: var(--color-highlight--accessible);
}

.cdot-menu-dropbtn {
    margin: 0;
    padding: 14px 16px;
    color: var(--color-white);
    border: none;
    background-color: inherit;
    font: inherit;
}

.cdot-menu-mega-header a {
    text-decoration: underline;
}

@keyframes gin-throbber {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.ajax-progress__throbber,
.ajax-progress__throbber--fullscreen,
.ui-dialog .ajax-progress__throbber,
.media-library-item .ajax-progress__throbber {
    border: 3px solid var(--gin-color-primary);
    border-inline-end: 3px dotted transparent;
}

.ajax-progress .ajax-progress__message {
    color: var(--gin-color-text);
}

[dir].gin--dark-mode .ajax-progress--fullscreen {
    background-color: var(--gin-color-primary);
    border-color: transparent;
    box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}

[dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber,
[dir].gin--dark-mode .ajax-progress--fullscreen .ajax-progress__throbber--fullscreen {
    border: 3px solid var(--gin-bg-app);
    border-inline-end: 3px dotted transparent;
}

.media-library-widget .ajax-progress__throbber,
.media-library-widget .ajax-progress__throbber--fullscreen {
    border: 2px solid var(--gin-color-primary);
    border-inline-end: 2px dotted transparent;
}

.ui-dialog .ajax-progress-throbber {
    padding: var(--gin-spacing-xs);
    background: var(--gin-bg-app);
    border-radius: 50%;
    box-shadow: 0 2px 6px 0 rgba(34, 35, 48, .1);
    border: 1px solid rgba(216, 217, 224, .8);
}

.gin--dark-mode .ui-dialog .ajax-progress-throbber {
    background-color: var(--gin-color-primary);
    border-color: transparent;
    box-shadow: 0 2px 6px 0 var(--gin-bg-app);
}

.ui-dialog .ajax-progress-throbber::before,
.contextual-links .ajax-progress-throbber::before {
    content: "";
    display: block;
    position: absolute;
    inset-block-start: var(--gin-spacing-xs);
    inset-inline-start: var(--gin-spacing-xs);
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--gin-color-primary);
    border-inline-end: 2px dotted transparent;
    border-radius: 50%;
    animation: gin-throbber .75s linear infinite;
}

.gin--dark-mode .ui-dialog .ajax-progress,
.gin--dark-mode .media-library-item .ajax-progress.ajax-progress.ajax-progress {
    background-color: var(--gin-bg-app);
    border-color: var(--gin-bg-app);
}

.contextual-links li {
    position: relative;
}

.contextual-links .ajax-progress-throbber {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: var(--gin-spacing-xxs);
    width: 24px;
    height: 24px;
}

.contextual-links .ajax-progress-throbber::before {
    inset-block-start: 0;
    inset-inline-start: .25em;
}

.claro-autocomplete__message {
    color: var(--gin-color-primary);
}

@media (min-width:1200px){
    .Footer-wrapperPrimary, .FooterMenu-nav { flex-direction:row; }
}