/*
Header
==================================================
Contains custom styles for the header at the top of the page.
The header contains the shop logo, the search form and various actions like the offcanvas cart button.
*/

.header-row {
    padding: $spacer-sm 0;
}

.header-logo-col {
    margin: $spacer 0;
}

.header-logo-main {
    text-align: center;
    display: block;
}

.header-logo-main-link {
    width: 100%;
}

.header-logo-picture {
    display: block;
    max-width: 300px;
    min-width: 200px;
    margin: auto;
}

.header-search {
    margin: $spacer-sm 0;
}

.header-search-form {
    position: relative;
}

.header-search-btn {
    .loader ~ .header-search-icon {
        display: none;
    }
}

.header-cart-total {
    display: none;
}

.header-cart .header-cart-badge,
.header-wishlist .header-wishlist-badge {
    position: absolute;
    right: -0.25rem;
}

.header-actions-btn {
    position: relative;
}

@include media-breakpoint-up(sm) {
    .header-row {
        padding-bottom: $spacer;
    }

    .header-logo-col {
        padding-bottom: $spacer-sm;
    }

    .header-search-col {
        .collapse:not(.show) {
            display: block;
        }
    }

    .header-search {
        max-width: 400px;
        margin: auto;
    }

    .header-cart-total {
        display: inline-block;
        margin-left: $spacer-sm;
    }
}

@include media-breakpoint-up(lg) {
    .header-logo-col {
        margin: 0;
    }
}
