.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    z-index: 100;
}

.symchope-bottom-menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;

    @media screen and (min-width: 750px) {
        display: none !important;
    }
}

.symchope-bottom-menu-dropdown {
    position: relative;
    margin-top: calc((var(--wp--preset--spacing--large) + var(--wp--preset--spacing--small)) * -1);

    & > details {
        padding: unset;
        border-radius: 20px;

        &[open] {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        & > summary {
            backdrop-filter: blur(3px);
            padding-top: var(--wp--preset--spacing--x-small);
            padding-right: var(--wp--preset--spacing--small);
            padding-bottom: var(--wp--preset--spacing--x-small);
            padding-left: var(--wp--preset--spacing--small);
        }

        & > *:not(summary) {
            background-color: rgba(0, 0, 0, 0.7);
            border: 1px solid var(--wp--preset--color--text-30);
            border-top: none;
            border-radius: 0 0 20px 20px;
            position: absolute;
            overflow-y: scroll;
            left: -1px;
            top: 100%;
            margin-top: 0;
            width: calc(100% + 2px);
            max-height: 40vh;
            max-height: 40lvh;
            backdrop-filter: blur(3px);

            &:after {
                content: "";
                position: sticky;
                display: block;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 35px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3C!-- Icon from Material Design Icons by Pictogrammers - https://github.com/Templarian/MaterialDesign/blob/master/LICENSE --%3E%3Cpath fill='%23ffffff' d='m12 6l-5 5h10zm-5 7l5 5l5-5z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: bottom center;
                background-size: contain;
                pointer-events: none
            }
        }
    }

    &:has( > details[open]) {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom: none !important;
    }

    @media screen and (min-width: 782px) {
        display: none !important;
    }
}

.symchope-z-2 {
    z-index: 2;
}

.symchope-hide-temp {
    display: none !important;
}

@keyframes --timeline-train {
    0% {
        transform: translateX(-4%);
    }
    100% {
        transform: translateX(4%);
    }
}

@keyframes --timeline-train-slow {
    0% {
        transform: translateX(-2%);
    }
    100% {
        transform: translateX(0%);
    }
}

.symchope-train-bg {
    overflow: clip;

    & figure {
        animation: --timeline-train ease-out forwards;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 100%;
        scale: 110%;

        & img {
            min-height: 100px;
            width: auto;
            min-width: 110%;
            object-fit: cover;
            mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
        }
    }
}

footer .symchope-train-bg {
    & figure {
        animation: --timeline-train-slow ease-out forwards;
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: contain 0%;
    }
}

.symchope-canettes-page-container:has(.symchope-canettes-prevente-container .wp-block-query:empty) {
    & .symchope-canettes-prevente-container {
        display: none;
    }

    & .symchope-canettes-prevente-btn {
        display: none;
    }
}

.symchope-canettes-prevente-container:not(:has(.wp-block-query)) {
    display: none;
}

.symchope-canettes-prevente-btn {

}