:root {
    --wf-white: #ffffff;
    --wf-darkgrey: #333333;
    --wf-grey: #f5f5f5;
    --wf-select-grey: rgb(209 213 219 / var(--tw-ring-opacity, 1)) !important;
    --wf-accent: #ff6600;
    --wf-accent-light: #ffcc99;
    --wf-blue: #253848;
    --wf-red: #ff0000;
    --wf-orange: #ec5130;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    flex: 1;
}

select, input[type="number"], input[type="text"], textarea {
    border: 1px solid var(--wf-select-grey);
}

footer {
    margin-top: auto;
}

.facto-font {
    font-family: 'Facto', sans-serif !important;
}



/* Bestellen */
body {
    flex: 1;
}

select {
    border: 1px solid var(--wf-select-grey);
}

footer {
    margin-top: auto;
}

ul.bg-product li {
    background: #fff;
    padding: 10px;
}

/* Ensure the image is on top */
img {
    position: relative;
    z-index: 10;
}

/* Ensure the span has a lower z-index */
span.absolute {
    z-index: 5;
}

.lightboxOverlay, .lightbox {
    /*all: unset;*/
}

#productModal {
    z-index: 999999999999999999 !important;
}

@keyframes moveToTop {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-15%, -40%) scale(0.15) translateY(-200px);
        opacity: 0;
    }
}

.animate-move-to-top {
    animation: moveToTop 1s ease-out forwards;
}

/* cart */
body {
    flex: 1;
}
select {
    border: 1px solid var(--wf-select-grey);
}

footer {
    margin-top: auto;
}

ul.bg-product li {
    background: #fff;
    padding: 10px;
}

/* Ensure the image is on top */
img {
    position: relative;
    z-index: 10;
}

/* Ensure the span has a lower z-index */
span.absolute {
    z-index: 5;
}

.lightboxOverlay, .lightbox {
    /*all: unset;*/
}

li ul li {
    cursor: pointer;
}

.hide-product {
    display: none !important;
}

.product-item.hide-product {
    display: none !important;
}

/* Ensure all product cards have the same height and the button is always at the bottom */
.product-item {
    display: flex;
    flex-direction: column;
    height: 550px; /* Adjust as needed for your content */
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}
.product-item .group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.product-item .orderModal {
    margin-top: auto;
}