Header: Checkout

.header {
    &__wrapper {
        background-color: $black;
        display: grid;
        grid-template-areas: "overflow";

        & .container {
            grid-area: overflow;
            position: relative;
        }
    }

    &__background {
        grid-area: overflow;

        & .image {
            object-fit: fill;
            object-position: top;
            height: 100%;
        }

        &--category-page {
            background: url('/images/hero/vso-hero-category-small.jpg');
            background-repeat: repeat;
        }
    }

    &__top {
        display: grid;
        grid-template: "logo header-buttons";
        margin: $spacer--medium;
        position: relative;
        @include mq($screen-m) {
            margin: $spacer--large 0;
        }

        &--logo {
            grid-area: logo;
            display: flex;
            align-items: center;
        }

        &--header-buttons {
            grid-area: header-buttons;

            display: flex;
            justify-content: flex-end;
            align-items: center;

            & .keurmerk,
            & .phonenumber,
            & .customer-account {
                margin: 0 5px;
            }
        }
    }

    &__bottom {
        position: relative;
        display: flex;
        justify-content: space-between;

        background-color: $red;
        border-top-left-radius: $border-radius;
        border-top-right-radius: $border-radius;
    }

    &__search {
        position: absolute;
        right: 0;
        width: 50%;

        @include mq($screen-l) {
            width: 20%;
        }
        @include mq($screen-xl) {
            width: 25%;
        }
    }

    & .header__search.popup--active {
        width: 100%;

        @include mq($screen-m) {
            width: 50%;
        }

        @include mq($screen-l) {
            width: 40%;
        }
        @include mq($screen-xl) {
            width: 35%;
        }
    }
}