:root {
    --color-primary: #b5191d;
    --slide-in-height: 50vh;
}

body {
    font-family: "Inter";
}

.grid {
    display: grid;
}

.site-header {

    > .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 2em;

        .title-area {
            display: none;
        }
    }

    &.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        > .wrap {
            flex-direction: row;
            justify-content: space-between;

            &::before {
                content: none;
            }

            img {
                max-height: 40px;
                width: auto;
            }
        }
    }
}

#genesis-nav-primary {

    a {
        font-weight: bold;
    }

    .menu-item-81 {

        position: relative;

        .watchlist-count {
            position: absolute;
            top: 0;
            right: -5px;
            background: var(--color-primary);
            color: #fff;
            border-radius: 50%;
            font-size: .75em;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            aspect-ratio: 1;
        }
    }
}

#genesis-nav-tertiary {
    padding-top: 0;

    .sticky & {
        padding-top: 15px;
    }
    
    a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

#customer-button {
    position: absolute;
    right: max(2em, calc(((100% - 1440px) / 2) + 2em));

    .sticky & {
        right: 2em;

        img {
            width: 100px;
        }
    }

    img {
        width: 250px;
        height: auto;
    }
}

.site-inner {
    width: 100%;
    max-width: 1440px;
}

.content {
    width: 100%;
}

h1, h2, h3, h4 {
    color: var(--color-primary);
    font-weight: 900;
}

/* h1 */
.entry-title {
    font-size: 70px;
    text-transform: uppercase;
    
}

h2 {
    font-size: 38px;
}

h3 {
    font-size: 28px;
}

button,
a.button {
    background: var(--color-primary);
    font-weight: normal;
    color: #fff;

    &:hover {
        background: #333;
    }
}

#produktsuche {
    margin: 4em 0 4em 0;

    .inner-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
    }

    label {
        white-space: nowrap;
        font-weight: bold;
        font-size: 1.2em;
    }

    .input {
        flex-grow: 1;
        position: relative;

        input {
            border-radius: 3px;
        }

        &::after {
            content: '\f002';
            font-family: "Font Awesome 5 Pro";
            position: absolute;
            right: 1em;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, .05); */
    z-index: 100;
    /* backdrop-filter: blur(1px); */
    display: none;

    &.show {
        display: block;
    }
}

.result {
    width: 100%;
    /* max-width: 480px; */
    max-height: 80vh;
    overflow: auto scroll;
    background: #fff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .1);
    position: absolute;
    top: 100%;
    z-index: 200;
    display: none;

    &.show {
        display: block;
    }

    .item {
        padding: 10px;
        display: grid;
        /* grid-template-columns: auto 1fr auto; */
        grid-template-columns: 1fr auto;
        gap: 10px;
        align-items: center;
        /* display: flex;
        justify-content: space-between;
        align-items: center; */

        &:hover {
            background-color: #eef;
        }

        &:hover,
        &:focus-within {

            .actions {
                display: flex;
            }
        }

        &:not(:last-child) {
            border-bottom: 1px solid #eee;
        }

        .product-image {

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        /* .product-details {
            display: grid;
            grid-template-rows: repeat(2, auto) 1fr;
        } */

        .product-title {
            font-size: 20px;
            color: var(--color-primary);
        }

        .actions {
            /* align-self: flex-end; */
            display: none;

            &.has-been-added::after {
                content: '\f00c';
                font-family: "Font Awesome 5 Pro";
                color: #0c0;
                font-size: 1.5em;
                margin-left: auto;
                margin-right: 20px;
                align-self: center;
            }

            input {
                width: 3.5em;
                padding: 10px;
            }

            button {
                padding: 11px 20px;
                white-space: nowrap;
            }
        }
    }
}

.product-list {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: space-between; */
    display: grid;
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(6, 1fr);
    gap: 40px;

    .product {
        /* width: calc((100% - 120px) / 4); */
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;

        .product-image {
            width: 100%;
            aspect-ratio: 1;
            border: 1px solid #f2f2f2;
            margin-bottom: 1em;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .product-details {

            h3 {
                font-weight: 900;
                font-size: 18px;
            }
        }

        .actions {
            margin-top: auto;
            display: flex;
            flex-wrap: wrap;

            &.has_been_added::after {
                content: '\f00c';
                font-family: "Font Awesome 5 Pro";
                color: #0c0;
                font-size: 1.5em;
                margin-left: auto;
                margin-right: 20px;
                align-self: center;
            }

            input {
                width: 4.5em;
            }

            select {
                width: auto;
                flex-grow: 1;
            }

            button {
                flex-grow: 1;
            }
        }
    }

    li {
        width: calc((100% - 40px) / 3);
        list-style: none;

        .product-picture {
            width: 100%;
            aspect-ratio: 4 / 3;
            background: #eee
        }
    }
}

.watchlist {
    padding: 0;
    margin: 2em 0 4em 0;
    width: 100%;
    max-width: 640px;

    .entry-content & {
        margin-left: 0;
    }

    input, select, button {
        padding: 10px;
    }

    button {
        border-radius: 5px;
    }

    .item {
        /* display: flex;
        justify-content: flex-end;
        align-items: center; */
        display: grid;
        grid-template-columns: auto 1fr 5em 6em auto;
        align-items: center;
        position: relative;
        gap: 10px;
        margin-bottom: .5em;

        /* .pos,.title,.amount {
            padding: 0 10px;
        } */

        &.has-been-added::after {
            content: '\f00c';
            font-family: "Font Awesome 5 Pro";
            color: #0c0;
            font-size: 1.5em;
            margin-left: auto;
            margin-right: 20px;
            align-self: center;
            position: absolute;
            right: -2em;
        }

        &.has-been-removed {
            background: #fee;

            :not(.title) {
                opacity: 0;
            }

            &::before,
            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after {
                height: 5px;
                top: unset;
                bottom: 0;
                background: var(--color-primary);
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-name: removing;
                animation-fill-mode: forwards;
            }
        }
    }
}

.filter {

    margin-top: 2em;
    margin-bottom: 4em;

    form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        h3 {
            width: 100%;
        }

        .form-field {
            display: flex;
            gap: 20px;
            align-items: center;
        }
    }
}

.form-row {
    max-width: 640px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;

    .datepicker {
        max-width: 50%;
    }

    textarea {
        min-height: 8em;
    }
}

.site-footer {
    position: relative;

    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 5px;
        background: var(--color-primary);
        position: absolute;
        top: 0;
        left: 0;
    }
}

#social-nav {
    margin-top: 2em;
    margin-bottom: 2em;

    ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;

        li {
            list-style: none;
            margin: 0 1em;
        }
    }

    a {
        color: var(--color-primary);
        font-size: 36px;
    }
}

#footer-nav {
    margin-top: 2em;
    margin-bottom: 2em;

    ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;

        li {
            list-style: none;
            margin: 0 2em;

            a {
                color: #333;
                text-decoration: none;
                font-size: 1.2em;
            }
        }
    }
}

#watchlist-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    width: 360px;
    max-height: calc(--slide-in-height);
    transform: translate(80%, -50%);
    transition: transform .25s ease;
    background: #fff;
    padding: 20px 0;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    border-top: 5px solid var(--color-primary);

    &:hover,
    &:focus-within {
        transform: translate(0, -50%);
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        left: -10px;
        top: 0;
        width: 10px;
        height: 100%;
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    }

    .inner {
        padding: 0 20px;
        height: calc(var(--slide-in-height) - 40px);
        overflow: hidden scroll;
    }

    h3 {
        padding: 20px;
        margin: 0;
        position: relative;

        /* &::before {
            content: '\f46d';
            font-family: "Font Awesome 5 Pro";
            display: block;
            position: absolute;
            left: 0;
            transform: translateX(-150%);
        } */
    }

    .item {
        padding: 20px;
        display: grid;
        grid-template-columns: auto 1fr;
        border-bottom: 2px solid #eee;

        .pos {
            padding-right: 10px;
        }

        .item-content {
            display: grid;
            grid-template-columns: 2fr 3fr auto;

            .title {
                grid-column: span 3;
                padding-bottom: 10px;
            }

            .actions {
                padding-left: 20px;
            }
        }

        &.has-been-added .amount {
            position: relative;
            
            &::before {
                content: '\f00c';
                font-family: "Font Awesome 5 Pro";
                color: #0c0;
                font-size: 1.5em;
                position: absolute;
                left: -1em;
            }
        }

        &.has-been-removed {
            background: #fee;
            position: relative;

            .amount, .unit, .actions {
                opacity: 0;
            }

            &::before,
            &::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

            &::after {
                height: 5px;
                top: unset;
                bottom: 0;
                background: var(--color-primary);
                animation-duration: 2s;
                animation-timing-function: linear;
                animation-name: removing;
                animation-fill-mode: forwards;
            }
        }
    }

    input, select, button {
        padding: 10px;
    }

    button {
        border-radius: 5px;
    }
}

.pagination {
    margin: 20px 0;

    ul {
        margin: 0;
        padding: 0;
        display: flex;

        li {
            list-style: none;
            border: 1px solid #eee;

            &:not(:last-child) {
                border-right: none;
            }

            a {
                color: var(--color-primary);
                display: block;
                padding: 10px 0;
                text-decoration: none;
                width: 2em;
                text-align: center;

                .current & {
                    color: #333;
                    cursor: default;
                }
            }
        }
    }
}

.categories {
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    background: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);

    img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}

@keyframes removing {
    0% {
        width: 100%;
    }

    100% {
        width: 0%;
    }
}