@charset "UTF-8";

html {
    overflow-y: overlay;
}

a, button, input, textarea {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--color--red), transparent 90%);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: none;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

::-webkit-scrollbar-button {
    height: 0;
    width: 0
}

@function px-to-rem($value) {
    @return calc((var(--#{$value}, $value * 1px)) / 16 * 1rem);
}

@layer reset {
    :where(*, *::before, *::after) {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

@layer print-styles {
    @media print {

        @page {
            size: A4 portrait;
            margin: 0.3cm 0.5cm;
        }

        *,
        ::before,
        ::after {
            color: #000000 !important;
            background-color: #ffffff !important;
            box-shadow: none !important;
            text-shadow: none !important;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            color-scheme: light;
        }

        a,
        a:visited {
            text-decoration: underline;
        }

        a[href]:not([href^="#"])::after {
            content: " (" attr(href) ")";
            word-break: break-all;
        }

        abbr[title]::after {
            content: " (" attr(title) ")";
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote {
            orphans: 3;
            widows: 3;
        }

        h2,
        h3,
        h4 {
            page-break-after: avoid;
        }

        blockquote,
        pre {
            border: 1px solid #777777;
            page-break-inside: avoid;
        }

        img {
            max-width: 100% !important;
            page-break-inside: avoid;
        }

        thead {
            display: table-header-group;
        }

        tr,
        img {
            page-break-inside: avoid;
        }

        .print-visible {
            display: block !important;
        }

        .print-hidden {
            display: none !important;
        }
    }
}

@layer base {
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        font-size: clamp(0.75rem, 0.875rem + ((1vw - 0.375rem) * 2), 1rem);
    }

    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }

    main {
        display: block;
        outline: none;
        min-width: 0;
    }

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

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

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

    b,
    strong {
        font-weight: bolder;
    }

    small {
        font-size: 80%;
    }

    ul,
    li {
        list-style: none;
    }

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

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    svg.icon {
        display: block;
        width: 1em;
        height: 1em;
        /*fill: var(--color--black);*/
        fill: currentColor;
        aspect-ratio: 1/1;
    }

    img,
    picture,
    video {
        max-width: 100%;
        display: block;
        border-style: none;
        height: auto;
    }

    video {
        vertical-align: middle;
        width: 100%;
    }

    picture {
        /* width: fit-content; */
    }

    button,
    input,
    select,
    textarea {
        font-family: inherit;
        font-size: 100%;
        line-height: var(--line-height--body);
    }

    input,
    select,
    textarea {
        width: 100%;
        display: block;
    }

    button,
    input {
        overflow: visible;
        cursor: pointer;
        background: transparent;
        border: 0;
    }

    button,
    select {
        text-transform: none;
    }

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

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

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

    fieldset {
        border: 0;
    }

    legend {
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
        font-family: var(--font-family--sans-geometric);
        font-size: 120%;
        margin-block: 2rem 1rem;
    }

    progress {
        vertical-align: baseline;
    }

    textarea {
        overflow: auto;
        resize: none;
    }

    [type="checkbox"],
    [type="radio"] {
        padding: 0;
    }

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

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

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

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

    details {
        display: block;
    }

    summary {
        display: list-item;
    }

    template {
        display: none;
    }

    [hidden] {
        display: none;
    }

    button {
        isolation: isolate;
        transition: .3s all ease-in-out;
        display: inline-flex;
        position: relative;
        align-items: center;
        user-select: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        will-change: auto;
        justify-content: center;
        overflow: hidden;
    }

    .form-group {
        position: relative;
    }

    .checkbox>label,
    .radio>label {
        position: relative;
        cursor: pointer;
        padding-inline-start: 2rem;
        text-align: left;
        display: flex;
        flex-direction: column;
        border: 1em solid transparent;
        border-width: 1rem 0 1rem 0;
        background-clip: content-box;
        box-sizing: content-box;
        max-width: fit-content;
    }

    .checkbox>label span,
    .radio>label span {
        padding-block-start: .2rem;
        line-height: var(--line-height--one);
    }

    .checkbox .has-8-font-size span {
        padding-block-start: .5em;
    }

    .checkbox input:not(.woocommerce-form__input),
    .radio input,
    .input-swatch input {
        width: 0;
        opacity: 0.00000001 !important;
        position: absolute;
        left: 0;
        height: 0;
    }

    .checkbox .helper {
        position: absolute;
        left: 0;
        width: 1rem;
        height: 1rem;
        z-index: 0;
        -webkit-transition: border-color 0.28s ease;
        transition: border-color 0.28s ease;
        background: var(--color--white);
        outline-color: transparent;
        outline-offset: -1px;
        outline-style: solid;
        outline-width: 1px;
    }

    .checkbox .helper::before,
    .checkbox .helper::after {
        position: absolute;
        height: 0;
        width: 0.16rem;
        background-color: var(--color--black);
        display: block;
        transform-origin: left top;
        content: '';
        transition: opacity 0.28s ease, height 0s linear 0.28s;
        opacity: 0;
    }

    .checkbox .helper::before {
        top: calc(50% + .32rem);
        left: calc(50% - .1rem);
        transform: rotate(-135deg);
    }

    .checkbox .helper::after {
        top: calc(50%);
        left: .05rem;
        transform: rotate(-45deg);
    }

    .checkbox label:hover .helper,
    .checkbox input::where(:focus-visible) .helper {
        color: var(--color--red);
    }

    .checkbox input:checked~.helper {
        color: var(--color--red);
    }

    .checkbox input[disabled]~.helper {
        filter: grayscale(100%);
        opacity: 0.5;
        color: var(--color--grey-dark);
    }

    label:has([disabled]),
    label:has([disabled]) .helper {
        cursor: default;
    }

    .checkbox input:checked~.helper::after,
    .checkbox input:checked~.helper::before {
        opacity: 1;
        transition: height 0.28s ease;
    }

    .checkbox input:checked~.helper::after {
        height: 0.4rem;
    }

    .checkbox input:checked~.helper::before {
        height: 0.8rem;
        transition-delay: 0.28s;
    }

    .checkbox input:focus~.helper {
        border-color: var(--color--red);
        accent-color: currentcolor;
    }

    .input-swatch label {
        position: relative;
        user-select: none;
    }

    .input-swatch .helper {
        position: relative;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size--x-small);
        font-weight: var(--custom--font-weight--semibold);
        line-height: 1.2em;
        background-clip: content-box;
        box-sizing: content-box;
        text-transform: uppercase;
        padding: .65em 1em;
        border: 3px solid var(--color--paper);
        border-radius: .75em;
        transition: .2s all linear;
        background: var(--color--white);
    }

    .input-swatch input:checked~.helper {
        border-color: var(--color--red);
    }

    .input-swatch label:hover input:not(:checked):not([disabled])~.helper {
        border-color: var(--color--grey);
    }

    .input-swatch input:disabled~.helper {
        opacity: 0.2;
        pointer-events: none;
    }

    .form-group-horizontal {
        display: flex;
        gap: 0 4rem;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .form-group-horizontal>* {
        margin-top: 0 !important;
    }

}

@layer animation {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes arrowOut {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }

            100% {
                transform: translate(300%, 0);
                opacity: 0;
            }
        }

        @keyframes arrowReturn {
            0% {
                transform: translate(300%, 0);
                opacity: 0;
            }

            10% {
                transform: translate(-40%, 0);
                opacity: 0;
            }

            100% {
                transform: translate(0, 0);
                opacity: 1;
            }
        }

        @keyframes loading-bar {
            from {
                transform: translateX(-100%);
            }

            to {
                transform: translateX(100%);
            }
        }

        @keyframes fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes slide-out-up {
            from {
                transform: translateY(0);
                opacity: 1;
            }

            to {
                transform: translateY(-100%);
                opacity: 0;
            }
        }

        @keyframes fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slide-in-down {
            from {
                transform: translateY(-10%);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}

@layer transition {

    html.is-transitioning,
    html.is-transitioning * {
        cursor: wait !important;
        pointer-events: none;
    }

    /*
    html.is-transitioning::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--color--red);
        animation: loading-bar 1s infinite;
        z-index: 2147483647;
    }
    */

    ::view-transition-old(root) {
        animation: 300ms ease-out both fade-out;
    }

    ::view-transition-new(root) {
        animation: 300ms ease-in both fade-in;
    }

    ::view-transition-new(header) {
        animation: 300ms ease-in both slide-in-down;
    }
}

@layer layout {
    @media (min-width: 768px) {
        body {
            --style--root--padding-right: 1.5rem;
            --style--root--padding-left: 1.5rem;
        }
    }

    @media (min-width: 959px) {
        body {
            --style--root--padding-right: 2rem;
            --style--root--padding-left: 2rem;
        }
    }

    body {
        display: grid;
        min-height: 100vh;
        grid-template-rows: auto 1fr auto;
    }

    body:has(aside) {
        grid-template-rows: auto auto 1fr auto;
    }

    .align722 {
        max-width: 722px;
    }

    .align928 {
        max-width: 928px;
    }

    .align912 {
        max-width: calc(910px + (var(--style--root--padding-left) * 2));
        max-width: 912px;
    }

    footer {
        place-content: end;
    }

    header {
        position: relative;
        background: var(--color--white);
        z-index: 100;
        will-change: transform, opacity;
        width: 100%;
        top: 0;

        &.sticky {
            position: fixed;
            animation: 300ms ease-in both slide-in-down;
        }

        &.fadeout {
            animation: 300ms ease-in both fade-out;
            pointer-events: none;
        }

        &:not(.sticky)+main {
            padding-top: 0 !important;
        }

        .header-logo {
            view-transition-name: header;
        }
    }

    .grid-wrapper {
        container-name: grid;
        container-type: inline-size;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;

        .item:not(:last-child)::after {
            content: '';
            width: 100%;
            height: 3px;
            background-color: var(--color--black);
            margin-block-start: 2rem;
        }
    }

    @container grid (min-width: 40rem) {
        .grid {
            &.grid-force-4 {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    @container grid (min-width: 50rem) {
        .grid {
            &.grid-force-4 {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }

    @container grid (min-width: 40rem) {
        .grid {
            grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));

            .item:first-child::after {
                display: none;
            }

            .item:not(:first-child) {
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    left: calc(-1.5rem - 1.5px);
                    width: 3px;
                    background-color: var(--color--black);
                    height: 100%;
                    margin-block-start: 0;
                }
            }

            &.grid-sep-light .item::after {
                width: 1px;
                background-color: var(--color--grey);
            }
        }
    }
}

@layer components {
    .validation-message {
        order: 2;
        color: var(--color--red);
        font-family: var(--font-family--sans-geometric);
        font-weight: var(--font-weight--bold);
        text-transform: uppercase;
    }

    .form-group:has(label) .validation-message {
        left: auto;
        right: 0;
        top: 2.25em;
    }

    :root :where(textarea, input:where([type=email], [type=number], [type=password], [type=search], [type=text], [type=tel], [type=url]))~.validation-message {
        position: absolute;
        top: 0;
        left: 0;
        translate: 0 -100%;
        font-size: var(--font-size--10);
        font-family: var(--font-family--sans-geometric);
        font-weight: var(--font-weight--bold);
        text-transform: uppercase;
        letter-spacing: .15em;
    }

    select {
        color: var(--color--black);

        option {
            font-weight: var(--font-weight--regular);
        }

        optgroup {
            background-color: var(--color--paper);
            font-weight: var(--font-weight--extrabold);
            font-size: var(--font-size--16);
            color: var(--color--black);

            option {
                color: var(--color--dark-grey);
                background-color: var(--color--white);
                font-size: var(--font-size--14);
            }
        }
    }

    .is-outline input {
        background-color: transparent;
        outline-color: var(--color--grey);
    }

    *:not(.is-outline)>input:where(:active, :focus-within) {
        outline-color: var(--color--red);
    }

    .is-outline .input:where(:active, :focus-within) {
        outline-color: var(--color--red);
    }

    .is-outline-grey :where(input, select, .helper) {
        outline-color: var(--color--grey);
    }

    .format-ucwords {
        text-transform: none;
    }

    .format-ucwords::placeholder {
        text-transform: uppercase;
    }

    input.has-radius {
        border-radius: 8px;
    }

    input.has-icon {
        padding-inline-end: 2em;
    }

    input.has-grey-border {
        border-color: var(--color--grey);
    }

    .toggle-password {
        position: relative;

        input[type="checkbox"],
        input[type="checkbox"]~span:empty {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 100%;
            cursor: pointer;
            aspect-ratio: 1/1;
            display: block;
            max-width: fit-content;
            width: auto;
        }

        input[type="checkbox"] {
            opacity: 0;
            margin: 0;
            fill: var(--color--paper);

            &~span:empty {
                color: var(--color--grey);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                background-color: currentColor;
                pointer-events: none;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='22' fill='none' viewBox='0 0 31 22'%3E%3Cpath stroke='%23c9c8bf' stroke-miterlimit='10' stroke-width='2' d='M15.375 15.9a4.9 4.9 0 1 0 0-9.8 4.9 4.9 0 0 0 0 9.8Z'/%3E%3Cpath stroke='%23c9c8bf' stroke-miterlimit='10' stroke-width='2' d='M29.53 11C27.472 8.04 22.9 1 15.375 1S3.274 8.044 1.219 11c2.059 2.96 6.63 10 14.156 10 7.524 0 12.1-7.043 14.155-10Z'/%3E%3C/svg%3E");
                mask-size: 1em auto;
            }

            &:checked~span:empty {
                mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z'/%3E%3C/svg%3E");
            }

            &:where(:focus-visible, :hover)~span:empty {
                color: var(--color--black-true);
            }
        }

        input::-ms-reveal,
        input::-ms-clear {
            display: none;
        }
    }

    .form-loading {
        position: relative;

        &>* {
            transition: .3s opacity ease, .3s blur ease;
        }

        &::after {
            position: absolute;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='50 0 500 300'%3E%3Cstyle%3E@keyframes rotate3351-counterclockwise%7Bto%7Btransform:rotate(-30deg)%7D%7D@keyframes rotate3351-clockwise%7Bto%7Btransform:rotate(30deg)%7D%7D@keyframes dot3351-motion%7Bto%7Btransform:translateX(-100px)%7D%7D.pacman3351-dot%7Bfill:currentColor;animation-name:dot3351-motion;animation-duration:600ms;animation-timing-function:linear;animation-iteration-count:infinite%7D%3C/style%3E%3Ccircle cx='250' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='350' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='450' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='550' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Ccircle cx='650' cy='50%25' r='10' class='pacman3351-dot'/%3E%3Cpath d='m150 150 70.4 71a100 100 0 0 0 29.6-71Z' style='fill:currentColor;animation-duration:175ms;animation-timing-function:linear;animation-direction:alternate;animation-iteration-count:infinite;transform-origin:calc(300px/2) 150px;animation-name:rotate3351-clockwise'/%3E%3Cpath d='m150 150 70.4-71a100 100 0 0 1 29.6 71Z' style='fill:currentColor;animation-duration:175ms;animation-timing-function:linear;animation-direction:alternate;animation-iteration-count:infinite;transform-origin:calc(300px/2) 150px;animation-name:rotate3351-counterclockwise'/%3E%3Cpath d='m150 150 86.6-50a100 100 0 1 0 0 100Z' style='fill:currentColor'/%3E%3C/svg%3E") center / 4em auto no-repeat;
            inset: 0;
        }

        &.loading>* {
            opacity: 0.2;
            filter: blur(1px);
        }

        &.loading::after {
            content: '';
        }
    }

    .form-group-has-button-right {
        position: relative;

        button {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            aspect-ratio: 1;
            z-index: 1;
        }
    }

    .reading-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 4px;
        background-color: var(--color--paper);
        z-index: 99999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        will-change: width;

        &.show {
            opacity: 1;
            visibility: visible;
        }

        &.hidden {
            opacity: 0;
            visibility: hidden;
        }
    }

    .btn-slim {
        padding-block: .25em;
    }

    .btn>span {
        position: relative;
        z-index: 2;
        line-height: 1;
    }

    .burger {
        min-width: 1.5rem;
        --line-offset-closed: 10px;

        .burger-wrapper {
            position: relative;
            width: 100%;
            max-width: 24px;
            height: 1.2rem;
        }

        .line {
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 2px;
            background-color: currentColor;
            transform-origin: center;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        .line:nth-child(1) {
            transform: translateY(calc(var(--line-offset-closed) * -1));
        }

        .line:nth-child(2) {
            transform: translateY(0);
        }

        .line:nth-child(3) {
            transform: translateY(var(--line-offset-closed));
        }

        &:where(:hover,:focus-visible) {
            color: var(--color-black);
        }

        body:has(#mobile-menu:popover-open) & {
            @media (prefers-reduced-motion: no-preference) {
                .line:nth-child(1) {
                    transform: translateY(0) rotate(45deg) scaleX(1.25);
                }

                .line:nth-child(2) {
                    opacity: 0;
                }

                .line:nth-child(3) {
                    transform: translateY(0) rotate(-45deg) scaleX(1.25);
                }
            }
        }
    }

    .page-headline {
        position: relative;
        margin-block-start: 2rem;
        padding-block-start: .5em;

        .close,
        .back {
            font-size: var(--font-size--24);
            padding: .5em;
            aspect-ratio: 1;
            top: -.5em;
            left: -.5em;
            display: inline-flex;
            position: absolute;
            z-index: 1;
            margin-top: 0;
            margin-left: auto;
        }

        main> :not(.products-page) & {
            @media (min-width: 768px) {
                margin: 0;
                padding: 0
            }
        }
    }

    .dialog {
        align-self: center;
        justify-self: center;
        position: fixed;
        inset: 0px;
        width: calc(var(--style--global--wide-size) - var(--style--root--padding-left) - var(--style--root--padding-right));
        max-height: 90dvh;
        height: fit-content;
        margin: auto;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 400ms ease, transform 400ms ease, display 400ms allow-discrete, overlay 400ms allow-discrete;
        max-width: calc(100% - var(--style--root--padding-left) - var(--style--root--padding-right));
        background: none;
        border: 0;
        overflow: visible;

        &:is([open], :popover-open) {
            display: flex;
            opacity: 1;
            transform: translateY(0);
        }

        &::backdrop {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(2px);
            opacity: 0;
            transition: opacity 400ms ease, display 400ms allow-discrete, overlay 400ms allow-discrete;
        }

        &:is([open], :popover-open)::backdrop {
            opacity: 1;
        }

        .scroll {
            overflow-y: scroll;
            height: inherit;
        }

        &.dialog-from-left {
            width: fit-content;
            margin: 0;
            right: auto;
            max-height: 100vh;
            height: 100%;
            background: var(--color--white);
            border-right: 1px solid var(--color--grey);
            transform: translateX(-100%);

            >.wrapper {
                padding-inline: var(--spacing--1-5);
                padding-block: var(--spacing--2);
            }

            .close {
                right: -45px;
            }

            &:is([open], :popover-open) {
                transform: translateX(0);
            }
        }

        @starting-style {
            &:is([open], :popover-open) {
                opacity: 0;
                transform: translateY(-10px);
            }

            &.dialog-from-left:is([open], :popover-open) {
                transform: translateX(-100%);
            }

            &:is([open], :popover-open)::backdrop {
                opacity: 0;
            }
        }

        .back,
        .close {
            padding: .5em;
            position: absolute;
            right: 1rem;
            top: 1rem;
            aspect-ratio: 1;
            z-index: 1;
            left: auto;
            color: var(--color--black);
        }

        .back {
            right: auto;
            left: 0;
        }

    }

    picture[style*="--blurhash"] {
        html.js & {
            background: var(--blurhash) center / cover var(--dominant-color, #cccccc);
            transition: .5s all ease;
            background-size: 104%;

            img:not([fetchpriority="high"]) {
                opacity: 0;
                transition: .4s all ease 0s !important;

                &.loaded {
                    opacity: 1;
                }
            }
        }

        html.no-js & {
            &:has(img:not([fetchpriority="high"])) img {
                background: var(--blurhash) center / cover var(--dominant-color);
            }
        }
    }

    p.has-drop-cap.has-background {
        overflow: hidden;
    }

    p :where(img, picture) {
        display: inline-flex;
    }

    aside[role="alert"] {
        interpolate-size: allow-keywords;
        opacity: 0;
        height: 0;
        overflow: hidden;
        transform-origin: bottom;
        transition: opacity 0.5s, transform 0.5s, border .5s, height 0.5s, display 0.5s allow-discrete;
        border-bottom: 0px solid transparent;

        &.visible {
            opacity: 1;
            height: auto;
            border-bottom: 1lh solid transparent;
        }

        &.visible-now {
            transition: none;
            interpolate-size: none;
        }

        .has-global-padding {
            overflow: hidden;
            width: auto;
        }

        .wrapper {
            padding: 1.1rem 1rem;
            background: var(--color--paper);
            position: relative;
            text-align: center;
            letter-spacing: 0.05em;
            font-size: 14px;
        }

        p {
            padding: 0 3rem;
        }

        a {
            text-decoration: underline;
            text-underline-offset: 0px;
        }

        .close {
            position: absolute;
            right: 0;
            top: 50%;
            translate: 0 -50%;
        }

        html.no-js & {
            opacity: 1;
            height: auto;
            /*border-bottom: 1lh solid transparent;*/
        }
    }

    :where(button, a):has(svg):where(:hover, :focus-visible) {
        color: var(--color--black);
    }

    .close,
    .back {
        font-size: var(--font-size--24);
        padding: .5em;
        aspect-ratio: 1;
        display: inline-flex;

        &:where(:hover, :focus-visible) {
            color: var(--color--red);
            opacity: 0.8;
        }
    }

    .header svg {
        width: 1.5rem;
        height: auto;
    }

    .header-cart {
        color: var(--color--red);

        &:where(:hover, :focus-visible) {
            color: var(--color--black);
        }
    }

    .header-account {
        &:where(:hover, :focus-visible) {
            color: var(--color--red);
        }

        &:has(span) {
            overflow: visible;
            min-width: auto;
            height: 2.25rem;
            align-items: center;

            span {
                white-space: nowrap;
                font-size: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 10ch;
                margin-inline-start: 1ch;

                @media (max-width: 500px) {
                    display: none;
                }
            }
        }
    }

    .header :where( :where(button, a):has(svg), .burger) {
        aspect-ratio: 1/1;
        display: flex;
        place-content: center;
        min-width: 2.25rem;
        position: relative;
    }

    .header-logo {
        width: 100%;
        display: flex;
        justify-content: center;
        text-align: center;

        img {
            max-width: 22rem;
            min-width: 10rem;
            width: 25vw;
            animation: 300ms ease-in both fade-in;
        }

        html.is-article &,
        header.sticky & {
            img {
                width: 10rem;
            }
        }
    }

    .header-top {
        width: calc(100% + .75rem);
        margin: 0 -.375rem;
        gap: 1rem;
        padding: 2.5rem 0 1rem 0;
        grid-template-columns: 1fr auto 1fr;
        align-items: self-end;

        .right {
            justify-content: flex-end;
        }

        .left,
        .right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        @media (max-width: 767px) {
            align-items: center;
        }

        html.is-article &,
        header.sticky & {
            padding: .75rem 0;
        }

        .badge-notification {
            line-height: var(--line-height--one);
            min-width: 2.5ch;
            font-size: var(--font-size--10);
            background: var(--color--red);
            display: flex;
            height: fit-content;
            color: var(--color--white);
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            aspect-ratio: 1;
            font-family: var(--font-family--sans-neo-grotesque);
            position: absolute;
            right: 0;
        }
    }

    .border-top-bottom {
        border: 1px solid var(--color--grey);
        border-width: 1px 0 1px 0;
    }

    .main-menu {
        display: grid;
        justify-content: center;
        position: relative;

        .main-menu-ul {
            overflow: hidden;

            &::before,
            &::after {
                content: '';
                background: linear-gradient(90deg, var(--color--white), transparent);
                width: 2rem;
                height: calc(100% - 10px);
                position: absolute;
                left: -1px;
                top: 0;
                z-index: 1;
            }

            &::after {
                left: auto;
                right: -1px;
                rotate: 180deg;
            }
        }

        .main-menu-ul>li {
            display: flex;
            align-items: center;
        }

        li:has(.btn) {
            padding: .75em 0;
        }

        li a {
            position: relative;
        }

        li a {
            color: var(--color--black);
            &:where(:hover,:focus-visible) {
                color: var(--color--red);
            }
        }

        .disc {
            position: relative;
        }

        .disc::before {
            color: var(--color--grey);
            scale: .5;
            translate: -50% -50%;
            position: absolute;
            left: 0;
            top: 50%;
            margin: 0;
            transform-origin: center;
        }

        .btn {
            color: var(--color--black);
            border-color: var(--color--grey);
            margin-left: 1.5em;
        }

        .is-style-outline {
            margin-inline-end: calc(1em + 1px);
        }

        .disc .is-style-outline {
            margin-inline-start: calc(1em + 1px);
        }

        span {
            display: block;
        }

        .current-menu-item> :where(a, div > a),
        .current-menu-parent> :where(a, div > a) {
            color: var(--color--red);
        }

        /*
        @media (max-width: 500px) {
            visibility: hidden;
            height: 0;
            opacity: 0;
            border: 0;
        }
        */
        .main-sub-menu {
            width: 100%;
            overflow: hidden;
            transition: .15s all ease-in-out;
            position: fixed;
            left: 0;
            right: 0;
            bottom: 1px;
            translate: 0 100%;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: .3s opacity .3s, 0s visibility .6s, .3s bottom .3s;
        }

        @media (hover: hover) {
            .main-menu-ul.lenis-smooth a {
                pointer-events: none;
            }

            .main-menu-ul:not(.lenis-smooth) .has-sub-menu:where(:focus-within, :hover, [open])>.main-sub-menu {
                opacity: 1;
                bottom: 1px;
                visibility: visible;
                pointer-events: auto;
                transition: .3s opacity 0s, 0s visibility 0s, .3s bottom 0s;

                .megamenu-column {
                    opacity: 1;
                    transition: all ease-in 0s;
                    transition-delay: 0s;
                }
            }
        }

        .megamenu-column {
            background: var(--color--white);
            border-bottom: 1px solid var(--color--grey);
            display: grid;
            grid-template-columns: minmax(12rem, 20rem) 1fr;
            grid-template-rows: 1fr;
            gap: var(--spacing--2);
            grid-auto-flow: column;
            align-items: start;
            padding-block: var(--spacing--1-5);
            opacity: 0;
            transition: all ease-in 0.3s;
            transition-delay: 0.25s;

            &>* {
                height: 100%;
            }

            .serif {
                text-transform: none;
            }
        }
    }

    .mobile-menu {
        .mobile-menu-ul>li {
            position: relative;
            border-bottom: 1px solid var(--color--grey);

            &:first-child {
                border-top: 1px solid var(--color--grey);
            }
        }

        .current-menu-item> :where(a, div > a),
        .current-menu-parent> :where(a, div > a) {
            color: var(--color--red);
        }

        a {
            padding: .5em 0;
            display: block;
            color: var(--color--black);
            &:where(:hover,:focus-visible) {
                color: var(--color--red);
            }
        }

        .toggle {
            position: absolute;
            top: 0;
            right: -.5em;
            color: var(--color--grey);
            height: 2em;
            aspect-ratio: 1;

            &:hover {
                color: var(--color--red);
            }

            svg {
                fill: currentColor;
                pointer-events: none;
            }

            .icon {
                transition: rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            &[aria-expanded="true"] .icon {
                rotate: 90deg;
            }
        }

        .sub-menu {
            display: grid;
            grid-template-rows: 0fr;
            opacity: 0;
            transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;

            >.wrapper {
                overflow: hidden;
            }

            li {
                font-size: 14px;

                &:last-child {
                    padding-block-end: 1rem;
                }
            }

            &[aria-hidden="false"] {
                grid-template-rows: 1fr;
                opacity: 1;
            }
        }

        .has-sub-menu:focus-within {
            html.no-js &>.toggle:not(:focus-within)+.sub-menu {
                grid-template-rows: 1fr;
                opacity: 1;
            }

            &>.toggle:not([aria-expanded="false"]) .icon {
                rotate: 90deg;
            }
        }

    }

    .btn-sm {
        /*
        padding: .275em 1em;
        */
        padding: .6rem 1.125rem;
        text-decoration: none;

        span {
            background: none;
        }
    }

    .block-list.flex li:first-child::before {
        display: none;
    }

    .block-list.flex {
        li {
            margin: 0;
        }

        li::before {
            translate: -50% -50%;
            position: absolute;
            top: 50%;
            margin: 0;
            margin-top: -0.1em;
            transform-origin: center;
        }
    }

    nav.sans-geometric {
        text-transform: uppercase;
    }

    .footer {
        .flex-col {
            flex: 1 1 15rem;
        }

        .flex-col:nth-child(1),
        .flex-col:nth-child(3) {
            flex: 1 1 32rem;
        }

        .social-links {
            margin-bottom: 2rem;
        }
    }

    .footer>* {
        padding-top: var(--spacing--4);
        padding-bottom: var(--spacing--2);
    }

    .footer-logo img {
        width: 10rem;
    }

    .footer-slogan {
        max-width: 12ch;
        margin-top: var(--spacing--2);
    }

    .footer-copyright {
        font-size: var(--font-size-8);
        border-top: 1px solid var(--color--dark-grey);
        padding-top: var(--spacing--1);
        margin-top: var(--spacing--2);
    }

    .footer-right-menu {
        a {
            color: var(--color--dark-grey);
            letter-spacing: .15em;
            padding-block: .75em;

            &:where(:hover, :focus-visible) {
                color: var(--color--white);
            }
        }
    }

    .footer-left-menu {
        place-content: flex-end;
        overflow: hidden;

        ul {
            margin-block: -.25em;
        }

        li:before {
            scale: .5;
        }

        a {
            color: var(--color--white);
            padding: .25em 1em;

            .current-menu-item &,
            &:hover {
                color: var(--color--red);
            }
        }
    }

    .social-links {
        svg {
            width: 2rem;
            height: 2rem;
        }

        a:hover {
            color: var(--color--paper);
        }
    }

    .newsletter-slogan {
        max-width: 20ch;
        margin-bottom: var(--spacing--1);
    }

    .form-newsletter input {
        height: 100%;
        color: var(--color--grey);
    }

    .form-newsletter input::placeholder {
        color: var(--color--grey);
    }

    .arrow {
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 99;
        display: flex;
        align-items: center;
        width: 2rem;
        height: 2rem;
        background: var(--color--black);
        text-align: center;
        opacity: 0;
        pointer-events: none;
        border: 1px solid color-mix(in srgb, var(--color--white), transparent 90%);

        &.visible {
            opacity: 1;
            pointer-events: all;
        }

        svg {
            display: block;
            transition: .3s all;
            width: 1rem;
            height: 1rem;
            fill: var(--color--white);
            margin: 0 auto;
        }

        &:hover svg {
            translate: 0 -4px;
            scale: 1.1;
        }

        @media (max-width: 450px) {
            display: none !important;
        }
    }

    [data-tab-component] {
        position: relative;
        overflow: hidden;
        display: grid;

        &>[role="region"],
        &>[role="tabpanel"] {
            grid-area: 1 / 1;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0s ease-in-out, visibility 0s;
            max-height: inherit;
            overflow: hidden;

            &[aria-hidden="false"] {
                opacity: 1;
                visibility: visible;
                transition: opacity 0.4s ease-in-out, visibility 0s;
                max-height: none;
                overflow: visible;
            }
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .lite-youtube-fallback {
        aspect-ratio: 16 / 9;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1em;
        padding: 1em;
        background-color: var(--color--grey);
        color: var(--color--white);
        text-decoration: none;
        position: relative;
        isolation: isolate;

        &::before {
            display: block;
            content: '';
            border: solid transparent;
            border-width: 2em 0 2em 3em;
            border-left-color: var(--color--dark-white);
            transition: .3s border-color ease-in-out;
        }

        &:hover::before {
            border-left-color: var(--color--dark-grey);
        }

        &:focus {
            outline: 2px solid var(--color--red);
        }

        img {
            position: absolute;
            inset: 0;
            z-index: -1;
            opacity: .3
        }
    }

    .toggle-content {
        position: relative;
        overflow: hidden;
        height: 0;
        transition: 0.25s height cubic-bezier(0.275, 0.075, 0.215, 0.94), .5s transform ease-out, .2s opacity ease-out;
        transform: translateY(10px);
        opacity: 0;
        pointer-events: none;

        &.is-visible {
            height: auto;
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto;
            z-index: 2;
            overflow: visible;
        }
    }


}

@layer article {

    .article {
        position: relative;
        display: grid;
        align-content: start;
        inline-size: fit-content;
        margin-inline: auto;
        width: 100%;

        figure:has(video) a {
            -webkit-tap-highlight-color: transparent;
        }

        .video-thumbnail {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--dominant-color);
            z-index: 0;

            video {
                position: absolute;
                inset: 0;
                object-fit: cover;
                transition: .5s opacity linear !important;
                opacity: 0.00001;
                z-index: 1;
                will-change: opacity;
                content-visibility: auto;

                &.playing {
                    width: 100% !important;
                    height: 100% !important;
                    opacity: 1;
                }

                &.ending {
                    opacity: 0 !important;
                }
            }

            .bar {
                position: absolute;
                top: 0;
                left: 0;
                width: 0%;
                background: linear-gradient(90deg, var(--color--paper), var(--color--paper));
                height: 5px;
                transition: width 0.28s linear;
                pointer-events: none;
                opacity: .3;
                backdrop-filter: blur(5px);
            }
        }

        figure:has(img) {
            position: relative;

            a {
                overflow: hidden;
                color: var(--color--black);
                display: flow-root;
            }
            img {
                margin-inline: auto;
            }

            a picture {
                transition: 3s scale ease-out .5s;
            }

            a:hover picture {
                scale: 1.05;
            }

            [role="tooltip"] {
                position: absolute;
                top: 1rem;
                right: calc(1rem - .5em);
                display: inline-flex;
                align-items: center;
                cursor: help;
                interpolate-size: allow-keywords;
                padding-inline: 0.25em .5em;
                padding-block: .25em;
                background: transparent;
                transition: .3s background ease-in-out;
                border-radius: 100px;
                margin: 0;
                font-family: var(--font-family--sans-neo-grotesque);
                letter-spacing: .05em;

                svg.icon-info {
                    width: 1.25rem;
                    height: 1.25rem;
                    fill: var(--color--white);
                }

                span.sr-only {
                    display: inline-block;
                    width: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    color: #fff;
                    border-radius: 0.25rem;
                    font-size: var(--font-size--10);
                    transition: width .3s ease, opacity .3s ease .15s;
                    opacity: 0;
                    text-shadow: 0 0 2px var(--color--black);
                    text-transform: none;
                }

                &:hover,
                &:focus-within {
                    & {
                        background: color-mix(in srgb, var(--color--paper), transparent 50%);
                        backdrop-filter: blur(5px);
                    }

                    span.sr-only {
                        width: calc-size(fit-content, size);
                        opacity: 1;
                        margin-left: 1ch;
                    }
                }
            }
        }

        .badges {
            a {
                pointer-events: initial;
                line-height: 1;
                padding: 6px 8px;
                color: var(--color--red);
            }
        }

        .media figure:has(img) {
            .badges {
            position: absolute;
            inset: 0;
            justify-content: flex-end;
            padding-inline: 1rem;
            padding-block: 1rem;
            align-content: flex-start;
            pointer-events: none;
            }
            svg.icon-platinum {
                width: unset;
            height: unset;
            position: absolute;
            bottom: 0;
            left: 50%;
            translate: -50% 50%;
            background: #ffffff;
            border-radius: 50%;
            }
        ;
            margin-inline: auto;
        }

        .details {
            margin-block-start: var(--spacing--1);
            line-height: 1;
        }

        .title-tag {
            margin-top: 0;
            padding: 12px;

















            .title-link {
                display: inline-block;
                margin: -12px;
                color: var(--color--black);
                &:where(:hover,:focus-visible) {
                    color: var(--color--red);
                }
            }
        }

        .click-area-contract:has(.icon-arrow) {
            position: absolute;
            bottom: var(--spacing--1);
            right: 0;

            a {
                color: var(--color--grey);

                &:hover {
                    color: var(--color--red);
                }
            }

            svg {
                aspect-ratio: 2 / 1;
                width: .8em;
                transition: .3s all ease-in-out;
            }
        }
    }

    .column-layout-2-1-2 {
        margin-block-end: var(--spacing--6);

        figure {
            margin-bottom: var(--spacing--1);
        }

        @media (min-width: 768px) {

            display: grid;
            grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) minmax(12rem, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: var(--spacing--1-5);

            .article-headline {
                grid-column: 2 / 3;
                grid-row: 1 / 3;
                min-height: 24rem;

                figure {
                    margin-bottom: 0;
                }
            }

            article:nth-child(2) {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                padding-top: var(--spacing--4);
            }

            article:nth-child(3) {
                grid-column: 1 / 2;
                grid-row: 2 / 3;
            }

            article:nth-child(4) {
                grid-column: 3 / 4;
                grid-row: 1 / 2;
                padding-top: var(--spacing--4);
            }

            article:nth-child(5) {
                grid-column: 3 / 4;
                grid-row: 2 / 3;
            }
        }

        @media (max-width: 767px) {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: none;
            gap: var(--spacing--block-gap);

            .article-headline {
                grid-column: auto;
                grid-row: auto;
                min-height: 18rem;
            }

            article:nth-child(3) {
                order: 3
            }

            article:nth-child(5) {
                order: 5
            }
        }
    }

    .column-layout-2-1 {
        figure {
            margin-bottom: var(--spacing--1);
        }

        @media (min-width: 768px) {

            &:has(> article:nth-child(2)) {
                display: grid;
                justify-items: center;
                grid-template-columns: repeat(3, 1fr);
                gap: 0 var(--spacing--1-5);
            }

            article {
                max-width: 16rem;
                justify-self: end;
            }

            article:nth-child(2) {
                margin-bottom: var(--spacing--3);
            }

            .article-headline {
                grid-column: 2 / 4;
                grid-row: span 3;
                min-height: 24rem;
                max-width: 34rem;
                justify-self: center;
            }
        }

        @media (max-width: 767px) {
            display: grid;
            gap: var(--spacing--block-gap);
        }
    }

    .red-stripe {
        background-color: var(--color--red);
        height: var(--spacing--4);
        margin-block-end: calc(var(--spacing--4) * -1);

        &.double {
            height: var(--spacing--10);
        }
    }

    .article-headline {
        display: grid;
        position: relative;

        .avatar {
            place-self: center;
        }

        .content {
            margin-inline: auto;
            position: relative;
            padding-block: var(--spacing--2);
        }

        .media+.content {
            width: calc(100% - var(--spacing--4));
            background: var(--color--white);
            margin-block-start: calc(-1 * var(--spacing--5-5));
            max-width: calc(40.5rem - var(--spacing--4));
            padding-block-start: 1.5em;
        }

        .media {
            width: 100%;
        }
    }

    .link-category {
        width: max-content;
        position: relative;
        z-index: 1;
        display: flex;
    }

    .hr-separator {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        hr {
            width: 100%;

            &+* {
                position: absolute;
                left: 50%;
                top: 0;
                /*
                padding-block: .75em;
                padding-inline: 1.5em;
                */
                translate: -50% -50%;
                margin: 0;
                /*
                &.has-16-font-size {
                    padding-block: .4em;
                }
                */
            }

            &+*:not(a)::before {
                display: none;
            }
        }

    }

    figure.avatar {
        --clip: polygon(45.228% 92.242%, 50% 97.268%, 54.772% 92.242%, 60.537% 96.083%, 64.068% 90.115%, 70.543% 92.573%, 72.654% 85.975%, 79.506% 86.93%, 80.099% 80.032%, 86.981% 79.439%, 86.025% 72.586%, 92.605% 70.478%, 90.148% 64.013%, 96.086% 60.497%, 92.259% 54.745%, 97.272% 49.994%, 92.259% 45.242%, 96.086% 39.49%, 90.148% 35.975%, 92.605% 29.51%, 86.025% 27.401%, 86.981% 20.548%, 80.099% 19.955%, 79.506% 13.057%, 72.654% 14.013%, 70.543% 7.414%, 64.074% 9.873%, 60.543% 3.904%, 54.778% 7.745%, 50.006% 2.713%, 45.235% 7.745%, 39.469% 3.904%, 35.938% 9.873%, 29.469% 7.414%, 27.358% 14.013%, 20.506% 13.057%, 19.914% 19.955%, 13.031% 20.548%, 13.988% 27.401%, 7.407% 29.51%, 9.864% 35.975%, 3.926% 39.49%, 7.753% 45.242%, 2.741% 49.994%, 7.753% 54.745%, 3.926% 60.497%, 9.864% 64.013%, 7.407% 70.478%, 13.988% 72.586%, 13.031% 79.439%, 19.914% 80.032%, 20.506% 86.93%, 27.358% 85.975%, 29.469% 92.573%, 35.944% 90.115%, 39.475% 96.083%, 45.241% 92.242%);
        clip-path: var(--clip);
        display: grid;
        padding: 5px;
        background: var(--color--black);
        width: fit-content;

        picture,
        &:has(:not(picture)) img {
            clip-path: var(--clip);
            max-width: 162px;
        }
    }

    .column-with-avatar {
        .media {
            display: grid;
        }

        figure {
            justify-self: center;
            margin-block: -118px var(--spacing--1);
        }

        .block-separator {
            margin-block-end: var(--spacing--2);
        }

        @media (max-width: 767px) {
            figure {
            justify-self: center;
            margin-block: -109px var(--spacing--1);
        }
            margin-block-start: var(--spacing--8);
        }


    }

    .column-with-avatar-btn {
        figure {
            margin-block: -97px var(--spacing--1);
            margin-inline-start: var(--spacing--6);
        }

        article {
            margin-block-end: var(--spacing--6);

            .content {
                display: flex;
                flex-wrap: wrap;
                gap: 1rem 2rem;
                align-items: flex-start;

                &>*:not(.title-tag) {
                    margin-block-start: var(--spacing--2);

                    @media (min-width: 768px) {
                        width: calc(40% - 1rem);
                    }
                }

                .details {
                    width: 100%;

                    @media (min-width: 768px) {
                        width: 30%;
                        padding-right: var(--spacing--4);
                    }
                }

                .title-tag {
                    min-width: 100%;
                }

                .btn {
                    width: fit-content;

                    @media (min-width: 768px) {
                        margin-top: auto;
                    }
                }
            }

            .perex {
                font-size: var(--font-size--24);
            }
        }
    }

    .column-top-posts {
        background-color: var(--color--grey);

        .has-global-padding {
            padding-block: var(--spacing--2);
        }

        article {
            display: flex;

            .media {
                margin-right: var(--spacing--1-5);
                max-width: 3rem;
                width: 100%;
            }

            svg {
                aspect-ratio: auto;
                height: auto;
                width: 100%;
            }
        }

        .articles {
            display: grid;
            padding-block: var(--spacing--1) var(--spacing--2);

            @media (min-width: 768px) {
                grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
                margin-top: var(--spacing--1);
            }
        }
    }

    .column-layout-1-1 {
        &:not(.column-layout-1hero-1) .content {
            max-width: 30rem;
        }

        article {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
            gap: var(--spacing--3);

            .media {
                max-width: fit-content;
                justify-self: center;
            }

            .content {
                justify-self: center;
                place-items: center;
                display: grid;
            }

            .title {
                margin-top: var(--spacing--2);
            }
        }

        &.reverse {
            .media {
                order: 2;
            }

            .content {
                order: 1;
            }
        }

        &.middle {
            .content {
                align-content: center;
            }
        }

        &.below {
            article {
                grid-template-columns: 1fr;
            }
        }
    }

    .column-layout-4 {
        display: grid;

        @media (min-width: 768px) {
            grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        }

        article {
            padding-inline: var(--spacing--0-5);
            padding-block-end: var(--spacing--1);
            margin-block-end: var(--spacing--2);
        }

        @media (min-width: 768px) {
            > :not(:first-child) {
                border-left: 1px solid var(--color--grey);
            }
        }
    }

    .column-layout-slider {
        .align928 {
            overflow: hidden;
            padding-bottom: 14em;
            max-width: 918px;
        }
        .wider {
            display: grid;
        }

        .slider {
            max-width: 100%;
            width: 100%;
            overflow: visible;
            perspective-origin: bottom center;
        }

        .wrapper {
            width: 100%;
        }

        .slide {
            width: 100%;
            max-width: 536px;
            &::before {
                content: '';
                background-color: var(--color--black);
                position: absolute;
                inset: 0;
                z-index: 1;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.3s ease-in-out;
            }

            &:where(.slide-next,.slide-prev)::before {
                opacity: 0.6;
                transition-delay: 0.1s;
            }
        }

        .content {
            transition: .5s opacity .2s, .3s bottom .1s ease-out;
            opacity: 0;
            justify-self: center;
            position: absolute;
            bottom: 0;
            translate: 0 calc(-1 * var(--spacing--3));
            left: 50%;
            transform: translateX(-50%) translateY(100%);
        }

        img {
            aspect-ratio: 720 / 540;
            object-fit: cover;
        }

        .slide-fully-visible .content,
        .slide-prev + .slide .content {
            opacity: 1 !important;
            transition: .1s opacity 0, .3s bottom .1s ease-out;
        }

        article {
            transition: .5s all;
            position: relative;
        }

        picture {
            transition-property: opacity, scale;
        }

        figure {
            background: var(--color--black);
        }

        .slide-prev,.slide-next {
            picture {
                opacity: .6;
            }

            .badges {
                opacity: 0;
            }
        }

        .badges {
            transition: .3s opacity;
        }

        :where(.slider-button-prev, .slider-button-next) {
            color: var(--color--white);
            padding: .6rem;
            transition: .1s padding;
            --slider-navigation-sides-offset: 0.5%;

            @media (min-width: 570px) {
                --slider-navigation-top-offset:67%;
                --slider-navigation-sides-offset: 7.5%;
            }
        }

        :where(.slider-button-prev, .slider-button-next):hover {
            color: var(--color--paper);
            padding: .2rem;
        }

        .slide {
            transform-origin: bottom center !important;
            -webkit-backface-visibility: hidden;
        }

        .slider.swiper-initialized {
            @media (min-width: 768px) {
                .slide {
                    width: 66.666%;
                }
            }
        }

        .slider:not(.swiper-initialized) {
            .wrapper {
                display: flex;
            }

            .slide:where(:not(:nth-child(1), :nth-child(2), :nth-child(3))) {
                display: none;
            }

            .slide:where(:nth-child(1), :nth-child(3)) {
                width: 1rem;
                overflow: hidden;

                .content {
                    display: none;
                }
            }

            .slide:nth-child(2) {
                width: calc(100% - 2rem);
            }

            @media (min-width: 768px) {
                & {
                    .slide:where(:nth-child(1), :nth-child(3)) {
                        width: 20%;
                        padding-top: 15%;

                        img {
                            object-fit: cover;
                            aspect-ratio: 1/1.5;
                        }
                    }

                    .slide:nth-child(2) {
                        width: 60%;
                    }
                }
            }
        }
    }

    .column-layout-row {
        article {
            display: grid;
            padding-block: var(--spacing--1);
            grid-template-columns: 162px minmax(10rem, 1fr);
            overflow: hidden;

            @media (min-width: 768px) {
                grid-template-columns: 162px minmax(10rem, 1fr) 162px;
            }
        }

        .content {
            max-width: 30ch;
            justify-self: center;
            padding-inline: var(--spacing--1);
            overflow: hidden;
        }

        figure {
            max-width: 162px;
        }
    }

    .column-layout-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
        gap: var(--spacing--3);

        .media {
            max-width: fit-content;
            justify-self: center;
        }

        figure {
            margin-bottom: var(--spacing--2);
        }
    }

    .column-layout-3 {
        .articles {
            display: grid;
            gap: var(--spacing--1-5);

            @media (min-width: 768px) {
                grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
            }

            article {
                justify-items: center;
            }
        }

        figure {
            margin-bottom: var(--spacing--1);
        }
    }

    .column-related {
        margin-block-end: var(--spacing--4);
    }

    .is-product article figure {
        justify-items: center;
    }

    .sliva {
        display: flex;
        background: #F7F3F1;
        padding-block: var(--spacing--3);

        .wrapper {
            position: relative;
            width: fit-content;
            height: fit-content;
            border: 3px solid var(--color--black);
            justify-self: center;
            max-width: 58vw;
            display: inline-flex;
            margin: 0 auto;
            isolation: isolate;
        }

        svg {
            position: absolute;
            left: 2rem;
            bottom: -3px;
            aspect-ratio: 35/32;
            width: 13rem;
            translate: -100% 0;
            z-index: -1;
            max-width: 25vw;
        }

        img {
            max-width: 25rem;
            width: 100%;
            padding: var(--spacing--1-5);
            background: var(--color--white);
        }
    }

    .pagination-next {
        padding-block: var(--spacing--4);
        margin-block-start: 0;
    }

    .reading-time {
        svg {
            width: 0.875rem;
            height: 0.875rem;
        }
    }

    .sharing {
        padding-block: var(--spacing--0-5);

        [role="navigation"] a {
            color: var(--color--grey);

            &:where(:hover,:focus-visible) {
                color: var(--color--black);
            }
        }

        svg {
            width: 1.5rem;
            height: 1.5rem;
        }

        .web-share {
            &:where(:hover,:focus-visible) {
                color: var(--color--black);
            }
        }
    }

    .video-container {
        position: relative;
        overflow: hidden;
        padding-bottom: 56.25%;
        height: 0;
        border-radius: 6px;
        background-size: cover;
        background-repeat: no-repeat;
        cursor: pointer;

        &>:where(embed, iframe, object, video) {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }
    }

    .main-article {
        width: 100%;
        margin-inline: 0;
        margin-block-start: var(--spacing--3);

        p .dot:after {
            content: '';
            display: inline-block;
            width: 0.7em;
            scale: .75;
            height: 0.7em;
            border-radius: 50%;
            background-color: currentColor;
            margin-left: .25em;
            margin-top: .05em;
        }

        .euro-plus {
            max-width: 56rem;
            border-width: 0 3px 3px;
            margin-block: var(--spacing--6);
            &> :where(.wrapper) {
                max-width: 40rem;
                justify-self: center;
                width: 100%;
            }
        }

        & *:has(+ .euro-plus) {
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, 0) 98%);
        }
    }

    .box-paper {
        background-color: var(--color--paper);
        border: 3px solid currentColor;
        text-align: center;
        display: grid;
        width: 100%;

        .wrapper {
            padding-block: var(--spacing--2);
            padding-inline: var(--spacing--2);
        }

        ul {
            text-align: left;
            max-width: 36rem;
            place-self: center;
            height: 100%;
        }
    }

    nav.pagination {
        margin: 2rem 0;

        ul.list-bare {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            align-items: center;

            li {
                display: inline-flex;
                align-items: center;
                justify-content: center;

                &>* {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                }

                .page-numbers,
                .next,
                .prev {
                    min-width: 2.5rem;
                    height: 2.5rem;
                    border: 1px solid #ccc;
                    text-decoration: none;
                    line-height: var(--line-height--one);
                    padding: 0 .5em;

                    &:is(a):hover,
                    &:is(a):focus {
                        color: var(--color--red);
                        border-color: var(--color--red);
                    }

                    svg {
                        transition: transform 180ms, stroke 180ms;
                        width: .75em;
                        height: .75em;
                    }

                    &:hover svg {
                        stroke: var(--color--paper);
                        transform: translateX(2px);
                    }

                    &.prev:hover svg {
                        transform: translateX(-2px);
                    }
                }

                .current {
                    background-color: var(--color--red);
                    border-color: var(--color--red);
                    color: #fff;
                }

                .dots {
                    color: var(--color--grey-dark);
                }
            }
        }
    }

    .form-info:not(:empty) {
        display: inline-table;
        padding: .25em .5em;
        margin-block-end: 2rem;
        background: var(--color--paper);
        font-family: var(--font-family--sans-neo-grotesque);
        font-size: var(--font-size--16);

        a,
        button {
            text-decoration: underline;
        }
    }

    .breadcrumbs-wrapper {
        display: inline-flex;

        .breadcrumbs {
            font-size: var(--font-size--14);
            font-family: var(--font-family--sans-geometric);
            text-transform: uppercase;
            letter-spacing: .05em;
        }

        ul {
            display: flex;
            gap: .2em .5em;
        }

        li:not(:last-child):after {
            content: '|';
            margin-left: 1ch;
        }
    }

    .scrolling {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        display: flex;
        gap: 1rem;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;

        cursor: grab;
    }

    .scrolling.dragging {
        cursor: grabbing;
    }

    .scrolling>* {
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    @media screen and (max-width: 767px) {
        #cc-main {
            .cm__body {
                flex-wrap: wrap !important;
            }

            .cm__btns {
                min-width: 100% !important;
            }
        }
    }

    .block-gallery {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax( min(12rem, 100%), 1fr ) );
        gap: var(--spacing--1-5);
        max-width: 100%;

        @media (min-width: 32rem) {
            grid-template-columns: repeat(4, minmax(8rem, 25%));
        }

        a {
            position: relative;

            & picture::before {
                content: '';
                position: absolute;
                inset: 0;
                background-color: var(--color--black);
                opacity: .25;
                transition: .3s all;
                z-index: 1;
            }

            &:where(:hover,:focus-visible) picture::before {
                opacity: 0;
            }
        }

        .event-partners-item picture::before {
            display: none;
        }

        .gallery-more {
            font-family: var(--font-family--sans-geometric);
            font-size: var(--font-size--38);
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color--white);
            z-index: 2;
        }
    }

    :is(.event-p-start, .event-p-start ~ *) {
        font-size: var(--font-size--20);
    }

}

@layer utilities {

    /* "ABCDiatype", sans-serif */
    .sans-neo-grotesque {
        font-family: var(--font-family--sans-neo-grotesque);
        font-weight: var(--font-weight--heavy);
        letter-spacing: .15em;
    }

    .sans-neo-grotesque:where(.has-18-font-size) {
        letter-spacing: 0;
    }

    .sans-neo-grotesque:where(.has-8-font-size, .has-10-font-size) {
        text-transform: uppercase;
    }

    /* "HW Topol", serif */
    .sans-geometric {
        font-family: var(--font-family--sans-geometric);
        font-weight: var(--font-weight--bold);
        line-height: var(--line-height--one);
    }

    .sans-geometric:where(.has-12-font-size, .has-14-font-size, .has-16-font-size) {
        letter-spacing: .05em;
    }

    .sans-geometric:where(.has-38-font-size, .has-56-font-size, .has-80-font-size) {
        letter-spacing: -.02em;
    }

    a:has(h2, h3, h4, h5, h6) {
        text-underline-offset: 0;
    }

    /* "Rhetoric Serif", serif */
    .serif {
        font-family: var(--font-family--serif);
        font-weight: var(--font-weight--regular);
    }

    :where(.has-20-font-size, .has-24-font-size, .has-32-font-size) {
        letter-spacing: -.02em;
    }

    :where(.has-56-font-size) {
        letter-spacing: -.05em;
    }

    :where(.has-24-font-size, .has-32-font-size) {
        line-height: 1.25;
    }

    :where(.has-56-font-size) {
        line-height: 1.07;
    }

    h3.serif {
        font-size: var(--font-size--24);
        line-height: 1.25;
    }

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

    .has-rounded {
        border-radius: 9999px;
    }

    a:not(.btn).has-red-color:where(:hover, :focus-visible) {
        color: var(--color--black);
    }

    .click-area-expand {
        padding: 1em;
        display: inline-flex;
    }

    .click-area-contract {
        margin-inline: -1em;
        margin-block: -1em;
        padding-inline-start: 0;
    }

    .w100 {
        width: 100%;
    }

    .h100 {
        height: 100%;
    }

    .has-opacity-50 {
        opacity: .5;
    }

    .wsn {
        white-space: nowrap;
    }

    .ns {
        user-select: none;
    }

    .ttu {
        text-transform: uppercase;
    }

    .tl {
        text-align: left;
    }

    .lh1 {
        line-height: var(--line-height--one);
    }

    .flex {
        display: flex;
    }

    .flex-2 {
        flex: 2;
        min-width: 19%;
    }

    .flex-inline {
        display: inline-flex;
    }

    .stretch {
        align-items: stretch;
    }

    .col-6, .col-4 {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    @media (min-width: 500px) {
        .col-6,.col-4 {
            flex-direction: row;
        }

        .col-6>*,.col-4>* {
            flex: 1;
        }
    }

    .row {
        flex-direction: column;
    }

    .flex-wrap {
        flex-wrap: wrap;
    }

    .align-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .max-100 {
        max-width: 100%;
    }

    .gap-0-5 {
        gap: .5rem;
    }

    .gap-1 {
        gap: 1rem;
    }

    .gap-2 {
        gap: 2rem;
    }

    .gap-3 {
        gap: 3rem;
    }

    .block-start-0 {
        margin-block-start: 0
    }

    .block-start-1 {
        margin-block-start: var(--spacing--1);
    }
    .block-start-1-5 {
        margin-block-start: var(--spacing--1-5);
    }
    .block-end-1 {
        margin-block-end: var(--spacing--1);
    }
    .block-end-4 {
        margin-block-end: var(--spacing--4);
    }
    .block-start-2 {
        margin-block-start: var(--spacing--2);
    }

    .block-start-3 {
        margin-block-start: var(--spacing--3);
    }

    .block-start-4 {
        margin-block-start: var(--spacing--4);
    }

    .block-start-5 {
        margin-block-start: var(--spacing--5);
    }

    .block-start-6 {
        margin-block-start: var(--spacing--6);
    }

    .block-start-8 {
        margin-block-start: var(--spacing--8);
    }

    .table {
        display: grid;
        width: 100%;

        > div {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(0, 1fr);
            align-items: start;

            .col {
                padding-block: .75rem;
                padding-inline-end: 1rem;
                word-break: break-word;
                height: 100%;
            }
        }

        &.table-first-col-20ch > div {
            grid-auto-columns: 20ch 1fr;
        }

        &.table-odd-border>*:not(:first-child) > * {
            border-bottom: 1px solid color-mix(in srgb, var(--color--grey), transparent 50%);
        }

        @media (max-width: 768px) {
            &:not(.table-not-responsive) {

                &.table-odd-border > *:not(:first-child)>* {
                    border-bottom: 0;
                }

                > div {
                    grid-auto-flow: row;
                    grid-template-columns: 1fr;
                    position: relative;

                    &:first-child {
                        display: none;
                    }
                    &:nth-child(odd) {
                        margin-block: var(--spacing--2);
                        &::before {
                            content: '';
                            position: absolute;
                            inset: -1rem;
                            background: color-mix(in srgb, var(--color--grey), transparent 80%);
                            border: 1px solid color-mix(in srgb, var(--color--grey), transparent 50%);
                            border-width: 1px 0;
                        }
                    }
                    .col {
                        display: grid;
                        grid-template-columns: minmax(16ch,auto) 1fr;
                        column-gap: .75rem;
                        padding-inline-end: 0;
                        padding: .25em 0;
















                        &::before {
                            content: attr(data-label);
                            font-weight: 600;
                            opacity: .75;
                        }
                    }
                }
            }
        }
    }

    .has-text-align-center {
        text-align: center;
    }

    .has-text-align-left {
        text-align: left
    }

    .has-text-align-right {
        text-align: right
    }

    .aligncenter {
        clear: both
    }

    .items-justified-left {
        justify-content: flex-start
    }

    .items-justified-center {
        justify-content: center
    }

    .items-justified-right {
        justify-content: flex-end
    }

    .items-justified-space-between {
        justify-content: space-between
    }

    .place-center {
        place-self: center;
    }

    .margin-auto {
        margin-inline: auto;
    }

    .block-image:is(.alignleft, .alignright):has(+p) {
        margin-block-end: var(--spacing--block-gap);
    }

    .block-image:is(.aligncenter, .alignleft, .alignright) {
        display: table;

        .aligncenter,
        .alignleft,
        .alignright {
            display: table;
        }
    }

    @media only screen and (min-width : 768px) {
        figure.block-image.alignleft {
            margin-inline-start: calc((100% - var(--style--global--content-size)) / 2);
        }

        figure.block-image.alignright {
            margin-inline-end: calc((100% - var(--style--global--content-size)) / 2) !important;
        }
    }

    .block-list-two-column {
        margin-block-start: .8em;

        ul {
            column-count: 2;
            column-gap: 2rem;
            column-fill: auto;
            height: 12rem;
        }

        :where(ol, ul) {
            break-inside: avoid;
            margin-bottom: 0.25rem;
        }

        .click-area-expand {
            padding: .615em;
            padding-inline-start: 0;
        }
    }

    .block-buttons {
        >.block-button {
            display: inline-block;
            margin: 0;

            &.aligncenter {
                margin-left: auto;
                margin-right: auto;
                width: 100%;
            }
        }

        &.is-vertical {
            flex-direction: column;

            >.block-button:last-child {
                margin-bottom: 0;
            }

            &.is-content-justification-left {
                align-items: flex-start;
            }

            &.is-content-justification-center {
                align-items: center;
            }

            &.is-content-justification-right {
                align-items: flex-end;
            }
        }

        &.aligncenter {
            text-align: center;
        }

        &:not(:where(.is-content-justification-space-between, .is-content-justification-right, .is-content-justification-left, .is-content-justification-center)) .block-button.aligncenter {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }
    }

}

#context-anchor {
    anchor-name: --context-anchor;
    width: 1px;
    height: 1px;
    z-index: -1;
}

.context-menu {
    position: fixed;
    inset: 0;
    border: none;
    pointer-events: none;
    transition: display .3s allow-discrete, overlay 1s allow-discrete, opacity .2s;

    .context-wrapper {
        position: fixed;
        position-anchor: --context-anchor;
        position-area: bottom right;
        position-try: flip-block, flip-inline, flip-block flip-inline;
        position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.85);
        border-radius: 12px;
        padding: 0.5rem 0;
        width: fit-content;
        white-space: nowrap;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, opacity .2s ease;
        transform: scale(0.95);
        opacity: 0.5;
        pointer-events: auto;
    }

    &::backdrop {
        background: transparent;
    }

    &[open] .context-wrapper {
        transform: scale(1);
        opacity: 1;
    }

    &.loading li:last-child:after {
        content: '';
        display: block;
        aspect-ratio: 1/1;
        width: 1em;
        height: 1em;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top-color: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        justify-self: center;
        z-index: 2147483650;
    }

    a {
        display: block;
        padding: 0.5em 1.6em;
        color: var(--color--black);
        border-radius: 5px;
        transition: all 0.2s ease;
        text-decoration: none;
        position: relative;

        &.has-children::after {
            content: '›';
            position: absolute;
            right: 1em;
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            opacity: 0.6;
            font-size: 0.9em;
        }
    }

    ul {
        list-style: none;
        margin: 0;
        padding: 0;

        li {
            position: relative;

            &:first-child a {
                padding-top: 0.75em;
            }

            &:last-child a {
                padding-bottom: 0.75em;
            }

            &:has(a:hover, a:focus-visible) {
                background: rgba(255, 255, 255, 0.4);
            }

            a:where(:hover, :focus-visible) {
                color: #000;
                transform: translateX(5px);
                outline: none;

                span {
                    text-decoration: underline;
                    display: inline-block;
                }
            }

            ul {
                position: absolute;
                position-area: right top;
                position-try: flip-block, flip-inline, flip-block flip-inline;
                position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
                backdrop-filter: blur(12px);
                background: rgba(255, 255, 255, 0.85);
                border-radius: 10px;
                padding: 0.4rem 0;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
                min-width: 180px;
                opacity: 0;
                transform: translateX(0) scale(0.95);
                pointer-events: none;
                transition: all 0.2s ease;
                z-index: 2147483649;

                li a {
                    padding: 0.4em 1.4em;
                }
            }

            &:where(:hover, :focus)>ul,
            >a:focus+ul,
            ul:has(a:focus) {
                opacity: 1;
                transform: translateX(5px) scale(1);
                pointer-events: auto;
            }
        }
    }
}