#header-container {
    top: 0;
    right: 0;
    left: 0;
    gap: var(--size_s);
    z-index: 200;
}

#header-container > * {height: fit-content;}

@media only screen and (min-width: 768px) {
    #header-container {
        top: 0;
        left: 0;
        right: 60vw;
    }
}

@media only screen and (min-width: 1096px) {
    #header-container {right: unset;}
    #header-container > * {
        min-width: calc(calc(100vw - calc(var(--size) * 7)) / 6);
        max-width: calc(calc(100vw - calc(var(--size) * 7)) / 6);
    }
}


#header-container header {order: 1;}
#header-container #shopify-cart {order: 2;}

body[data-template="project"] #header-container header {order: 1;}
body[data-template="project"] #header-container #project-header {order: 2;}
body[data-template="project"] #header-container #project_h-description {order: 3;}
body[data-template="project"] #header-container #shopify-cart {order: 4;}
@media only screen and (min-width: 1096px) {
    body[data-template="project"] #header-container #project_h-slides {order: 3;}
    body[data-template="project"] #header-container #project_h-description {order: 4;}
    body[data-template="project"] #header-container #shopify-cart {order: 5;}
}

body[data-template="product"] #header-container header {order: 1;}
body[data-template="product"] #header-container #product-header {order: 2;}
body[data-template="product"] #header-container #product_h-description {order: 3;}
body[data-template="product"] #header-container #shopify-cart {order: 4;}



/* 
HEADER
*/
header {background: var(--c_black);}


/* Top */
#header-logo img {height: var(--size_m); width: auto;}

header[data-status="close"] #header-langs {visibility: hidden;}
#header-langs {column-gap: var(--size_s);}
#header-langs a:not(.--active) {opacity: var(--alpha);}

@media only screen and (min-width: 768px) {
    #header-logo img {height: 1.6rem;}
}



/* Nav */
header[data-status="close"] #header-nav {height: 0;}

#header-pages {row-gap: var(--size_xs); padding-top: .25rem;}
body:not([data-template="home"]) #header-pages a:not(.--active) {opacity: var(--alpha);}

#header-contacts dd,
#header-actions span:nth-of-type(2) {
    grid-column: 2/-1;
    column-gap: var(--size);
}


/* Toggle */
#header-toggle {
    bottom: var(--size);
    right: var(--size);
    width: var(--size_m);
    height: var(--size_m);
    z-index: 5;
}

#header-toggle img {transition: rotate 200ms ease-in-out;}
header[data-status="open"] #header-toggle img {rotate: 45deg;}

@media only screen and (min-width: 768px) {
    #header-toggle {
        width: 1.6rem;
        height: 1.6rem;
    }
}


@media (hover: hover) {
    #header-langs a,
    #header-pages a,
    #header-contacts a,
    #header-actions > *,
    #header-toggle {transition: opacity 200ms ease-in-out;}

    body[data-template="home"] #header-pages:hover a,
    #header-contacts dd:hover a,
    #header-actions:hover > * {opacity: var(--alpha);}

    #header-langs a:hover, 
    #header-pages a:hover,
    #header-contacts a:hover,
    #header-actions > *:hover {opacity: 1 !important;}
}