/* Header */
.page-header {
    padding-bottom: 3rem;
}

.header-image-container {
    padding: 4px;
    border: 5px solid var(--secondary);
    border-radius: 5px;
}

.header-image {
    width: 100%;
    height: 583px;
    object-fit: cover;
}

.header-qty-container {
    background: var(--secondary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 28px;
}

.header-qty-input {
    font-family: 'Source Serif Pro';
    font-size: 27px;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 2px solid var(--secondary);
    border-radius: 4px;
}

/* Hiding input number arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.header-button {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 1rem;
    color: var(--white) !important;
    padding: 16px 8px;
    border-radius: 5px;
}

.button-cart {
    background-color: var(--primary)
}

.button-buy {
    background-color: var(--accent-lighten);
}

@media (hover:hover) and (pointer:fine) {

    /* Header */
    .button-cart:hover {
        background-color: #012c01;
        color:var(--white);
    }

    .button-buy:hover {
        background-color: var(--accent-main);
        color:var(--white);
    }

}

@media only screen and (max-width: 767.98px) {

    /* Header */
    .header-image {
        height: 40vh;
    }

    .header-qty-input {
        width: 20%;
    }

}

@media only screen and (max-width: 997.98px) {

    .header-image {
        height: 35vh;
    }

}