header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
}

header > * {grid-column: span 3;}
@media only screen and (min-width: 768px) {
    header > * {grid-column: span 6;}
}
header a.header-link,
header button.header-link,
header #cart-button {
    color: white !important;
}

/* PAGES */
.header_pages-active li {opacity: .3;}
.header_pages-active li.active {opacity: 1;}

.header-pages li {
    margin-bottom: .3rem;
    width: fit-content;
}

@media only screen and (min-width: 768px) {
   #header-about {display: flex;} 
   #header-about ul {margin-left: .75rem;}
   #header-about li {margin-bottom: .3rem;}
}

@media (hover: hover) {
    .header-pages li {transition: opacity 500ms ease;}
    
    .header-pages:hover li {opacity: .3;}
    .header-pages li:hover {opacity: 1;}
}

/* LOGO */
header #raba-logo {fill: white !important;}
.header-logo {
    position: absolute;
    top: .75rem;
    left: 50vw;
    transform: translateX(-50%);
    width: 30vw;
}
@media only screen and (min-width: 768px) {
    .header-logo {
        width: 15vw;
        grid-column: 1/-1;
    }
}
@media only screen and (min-width: 1024px) {
    .header-logo {
        width: 12rem;
        top: 1.1rem;
    }
}

/* CART */
header #cart-button {
    top: 0;
    width: fit-content;
    text-align: end;
    margin-left: auto;
}

body[data-template='shopify.product'] header,
body[data-template='about'] header,
body[data-template='default'] header {mix-blend-mode: difference;}