/* 2026-08-28 v1.4
 * - Stacked mobile product links and anchored social links to the drawer bottom.
 * 2026-08-24 v1.3
 * - Faded the desktop product navigation after half a viewport while retaining the logo and menu control.
 * 2026-08-21 v1.2
 * - Added palette-aware initial and scrollfocus header contrast variants.
 * 2026-08-21 v1.1
 * - Kept drawer contrast independent from pale website palettes.
 * 2026-08-21 v1.0
 * - Added the shared responsive Holthinrichs header and accessible drawer styling.
 */

.header-main,
.header-main * ,
.header-menu-drawer,
.header-menu-drawer * {
    box-sizing:border-box;
}
.header-main {
    --header-light:var(--bgcolor_light,var(--concept_light,#f6f3ec));
    --header-dark:var(--heading-color,var(--headcolor,#271c13));
    --header-accent:var(--headcolor,var(--concept_sand,#d0c2b6));
    position:fixed;
    z-index:60;
    top:0;
    right:0;
    left:0;
    width:100%;
    color:var(--header-light);
    pointer-events:none;
}
.header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(24px,4vw,64px);
    width:min(100%,1600px);
    min-height:104px;
    margin:0 auto;
    padding:20px clamp(24px,5vw,80px);
}
.header-main a,
.header-main button {
    color:inherit;
    pointer-events:auto;
}
.header-logo {
    display:flex;
    align-items:center;
    flex:0 1 230px;
    min-width:150px;
}
.header-logo img {
    display:block;
    width:100%;
    max-width:230px;
    max-height:58px;
    object-fit:contain;
    object-position:left center;
}
.header-logo-dark { display:none!important; }
.header-navigation {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(22px,3vw,46px);
    min-width:0;
}
.header-product-links,
.header-product-list {
    min-width:0;
    margin:0;
    padding:0;
}
.header-product-links {
    opacity:1;
    visibility:visible;
    transition:opacity .25s ease,visibility 0s linear 0s;
}
body[scrolled-passed-window-half="1"] .header-product-links {
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility 0s linear .25s;
}
.header-product-list {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:clamp(18px,2.3vw,38px);
    list-style:none;
}
.header-product-list li {
    min-width:0;
    margin:0;
    padding:0;
}
.header-product-list a {
    display:block;
    position:relative;
    padding:10px 0;
    color:inherit;
    font-size:clamp(10px,.72vw,12px);
    font-weight:500;
    line-height:1.35;
    letter-spacing:.12em;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    white-space:nowrap;
}
.header-product-list a::after {
    content:"";
    position:absolute;
    right:0;
    bottom:4px;
    left:0;
    height:1px;
    background:currentColor;
    opacity:0;
    transform:scaleX(.65);
    transition:opacity .2s ease,transform .2s ease;
}
.header-product-list a:hover::after,
.header-product-list a:focus-visible::after,
.header-product-list a[aria-current="page"]::after {
    opacity:1;
    transform:scaleX(1);
}
.header-menu-button,
.header-menu-close {
    display:grid;
    place-items:center;
    position:relative;
    width:44px;
    min-width:44px;
    height:44px;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    cursor:pointer;
}
.header-menu-button span {
    position:absolute;
    width:25px;
    height:1px;
    background:currentColor;
}
.header-menu-button span:first-child { transform:translateY(-7px); }
.header-menu-button span:last-child { transform:translateY(7px); }
.header-menu-backdrop {
    position:fixed;
    z-index:70;
    inset:0;
    background:rgba(20,12,7,.48);
    opacity:0;
    transition:opacity .3s ease;
}
.header-menu-backdrop.is-open { opacity:1; }
.header-menu-drawer {
    --header-light:#f6f3ec;
    --header-dark:#15110f;
    --header-accent:#a58970;
    position:fixed;
    display:flex;
    flex-direction:column;
    z-index:80;
    top:0;
    right:0;
    bottom:0;
    width:min(460px,100%);
    padding:clamp(78px,12vh,130px) clamp(30px,6vw,72px) 46px;
    overflow-y:auto;
    background:var(--header-dark);
    color:var(--header-light);
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .35s ease,visibility 0s linear .35s;
}
.header-menu-drawer.is-open {
    transform:translateX(0);
    visibility:visible;
    transition-delay:0s;
}
.header-menu-close {
    position:absolute;
    top:30px;
    right:clamp(24px,5vw,52px);
}
.header-menu-close span {
    position:absolute;
    width:27px;
    height:1px;
    background:currentColor;
    transform:rotate(45deg);
}
.header-menu-close span:last-child { transform:rotate(-45deg); }
.header-menu-content {
    display:flex;
    flex:1 0 auto;
    flex-direction:column;
    gap:clamp(30px,5vh,54px);
}
.header-menu-content nav,
.header-menu-content ul {
    margin:0;
    padding:0;
}
.header-menu-content ul { list-style:none; }
.header-menu-content li { margin:0; padding:0; }
.header-primary-links {
    display:flex;
    flex-direction:column;
    gap:12px;
}
.header-primary-links a {
    display:inline-block;
    padding:5px 0;
    color:inherit;
    font-size:clamp(24px,3vw,36px);
    line-height:1.15;
    text-decoration:none;
}
.header-menu-product-links,
.header-website-links,
.header-social-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
}
.header-menu-content .header-social-navigation {
    margin-top:auto;
    margin-bottom:0;
}
.header-menu-product-links a,
.header-website-links a,
.header-social-links a,
.header-account-navigation a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:8px 0;
    color:inherit;
    font-size:12px;
    line-height:1.35;
    letter-spacing:.1em;
    text-decoration:none;
    text-transform:uppercase;
}
.header-menu-content a {
    transition:color .2s ease,opacity .2s ease;
}
.header-menu-content a:hover,
.header-menu-content a:focus-visible,
.header-menu-content a[aria-current="page"] {
    color:var(--header-accent);
}
.header-menu-products { display:none; }
.header-cart-count { margin-left:8px; }
.header-skip-link {
    position:fixed;
    z-index:100;
    top:8px;
    left:8px;
    padding:10px 14px;
    background:#fff;
    color:#111;
    transform:translateY(-150%);
}
.header-skip-link:focus { transform:translateY(0); }
.header-visually-hidden {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
.header-main :focus-visible,
.header-menu-drawer :focus-visible {
    outline:2px solid currentColor;
    outline-offset:4px;
}
body.header-menu-open { overflow:hidden; }
.header-main.header-on-light,
body[scrollfocus-is-white="1"]:not(.header-menu-open) .header-main {
    color:var(--header-dark);
}
body[scrollfocus-is-white="0"]:not(.header-menu-open) .header-main { color:var(--header-light); }
.header-main.header-on-light .header-logo-light,
body[scrollfocus-is-white="1"]:not(.header-menu-open) .header-logo-light { display:none!important; }
.header-main.header-on-light .header-logo-dark,
body[scrollfocus-is-white="1"]:not(.header-menu-open) .header-logo-dark { display:block!important; }
body[scrollfocus-is-white="0"]:not(.header-menu-open) .header-logo-light { display:block!important; }
body[scrollfocus-is-white="0"]:not(.header-menu-open) .header-logo-dark { display:none!important; }

@media (max-width:900px) {
    .header-inner {
        min-height:78px;
        padding:12px 18px;
    }
    .header-logo {
        flex-basis:165px;
        min-width:120px;
    }
    .header-logo img {
        max-width:165px;
        max-height:48px;
    }
    .header-product-links { display:none; }
    .header-menu-products { display:block; }
    .header-menu-product-links {
        flex-direction:column;
        flex-wrap:nowrap;
        gap:16px;
    }
    .header-navigation { gap:0; }
    .header-menu-drawer {
        width:min(400px,100%);
        padding:88px 26px 36px;
    }
    .header-menu-close {
        top:18px;
        right:18px;
    }
}

@media (prefers-reduced-motion:reduce) {
    .header-product-links,
    .header-product-list a::after,
    .header-menu-backdrop,
    .header-menu-drawer,
    .header-menu-content a {
        transition:none;
    }
}