/* =========================================================
   SONNIA fixed header stack
   - Topbar + main header are one fixed stack.
   - No relative-to-fixed switch while scrolling.
   - The compact state only changes padding, logo width and shadow.
   - Old body.scrolled rules are neutralized here.
   ========================================================= */

:root {
    --sonnia-header-stack-height: 178px;
    --sonnia-header-z: 100000;
    --sonnia-header-bg: #ffffff;
    --sonnia-topbar-bg: #faf8f4;
    --sonnia-header-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
    --sonnia-header-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sonnia-header-duration: 280ms;
    --sonnia-header-pad-y-full: clamp(2.2222222222rem, 1.9005847953rem + 0.9356725146vw, 2.7777777778rem);
    --sonnia-header-pad-y-compact: clamp(0.62rem, 0.46rem + 0.42vw, 0.92rem);
    --sonnia-header-pad-x: calc(clamp(1.6666666667rem, 0.4766081871rem + 3.4619883041vw, 3.7222222222rem) * 1.4);
    --sonnia-logo-width-full: clamp(8.8rem, 6.2rem + 6.2vw, 13.5rem);
    --sonnia-logo-width-compact: clamp(5.9rem, 5.1rem + 1.8vw, 7.4rem);
    --sonnia-admin-bar-offset: 0px;
}

html body,
html body.scrolled {
    padding-top: var(--sonnia-header-stack-height) !important;
    margin-top: 0 !important;
}

/* WordPress adds margin to html when the admin bar is visible. We keep it intact
   and place the fixed header underneath the admin bar. */
html body.admin-bar {
    --sonnia-admin-bar-offset: 32px;
}

@media (max-width: 782px) {
    html body.admin-bar {
        --sonnia-admin-bar-offset: 46px;
    }
}

/* Hide the legacy Top-Bar snippet that is printed directly after wp_body_open. */
html body > .sonnia-topbar {
    display: none !important;
}

/* The real, theme-owned fixed stack. */
html body .sonnia-site-header-wrap {
    position: fixed !important;
    top: var(--sonnia-admin-bar-offset) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: var(--sonnia-header-z) !important;
    background: var(--sonnia-header-bg) !important;
    box-sizing: border-box !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform;
    box-shadow: none !important;
    transition: box-shadow var(--sonnia-header-duration) ease, background-color var(--sonnia-header-duration) ease !important;
}

html body.sonnia-header-compact .sonnia-site-header-wrap,
html body.scrolled .sonnia-site-header-wrap {
    box-shadow: var(--sonnia-header-shadow) !important;
}

/* Theme-owned Topbar inside the fixed stack. */
html body .sonnia-site-header-wrap > .sonnia-topbar,
html body #page .sonnia-site-header-wrap > .sonnia-topbar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    background: var(--sonnia-topbar-bg) !important;
    color: #7a7a7a !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    padding: 8px 18px 7px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .sonnia-topbar-inner {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    line-height: 1.45 !important;
}

html body .sonnia-topbar-text {
    display: inline-block !important;
}

html body .sonnia-topbar-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #6b6b6b !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: opacity 180ms ease !important;
}

html body .sonnia-topbar-link:hover {
    opacity: 0.65 !important;
}

html body .sonnia-topbar-link-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ee6a62 !important;
    line-height: 1 !important;
}

html body .sonnia-topbar-link-icon svg {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    fill: currentColor !important;
}

/* Main header inside the fixed stack. It is NOT sticky/fixed itself anymore. */
html body #masthead.site-header,
html body.scrolled #masthead.site-header,
html body.wwg-resnav-state-open #masthead.site-header,
html body.scrolled.wwg-resnav-state-open #masthead.site-header,
html body .sonnia-site-header-wrap #masthead.site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 2 !important;
    background: var(--sonnia-header-bg) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: var(--sonnia-header-pad-y-full) !important;
    padding-bottom: var(--sonnia-header-pad-y-full) !important;
    padding-left: var(--sonnia-header-pad-x) !important;
    padding-right: var(--sonnia-header-pad-x) !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    box-shadow: none !important;
    transition:
        padding var(--sonnia-header-duration) var(--sonnia-header-ease),
        background-color var(--sonnia-header-duration) ease !important;
    will-change: padding;
}

html body.sonnia-header-compact #masthead.site-header,
html body.sonnia-header-compact.scrolled #masthead.site-header {
    padding-top: var(--sonnia-header-pad-y-compact) !important;
    padding-bottom: var(--sonnia-header-pad-y-compact) !important;
}

html body #masthead.site-header > .col-full,
html body #masthead.site-header .storefront-primary-navigation > .col-full {
    padding: 0 !important;
    margin: 0 !important;
}

/* Neutralize old scrollstate spacing. */
html body #tobarbuttons,
html body.scrolled #tobarbuttons,
html body:not(.scrolled) #tobarbuttons,
html body .main-navigation ul.nav-menu,
html body.scrolled .main-navigation ul.nav-menu,
html body:not(.scrolled) .main-navigation ul.nav-menu {
    margin-bottom: 0 !important;
}

html body #tobarbuttons,
html body.scrolled #tobarbuttons,
html body:not(.scrolled) #tobarbuttons {
    transition: transform var(--sonnia-header-duration) var(--sonnia-header-ease), opacity 180ms ease !important;
}

html body .storefront-primary-navigation,
html body .main-navigation .menu,
html body .main-navigation ul {
    align-items: center !important;
}

html body .main-navigation ul.nav-menu > li > a {
    transition:
        padding var(--sonnia-header-duration) var(--sonnia-header-ease),
        opacity 180ms ease !important;
}

html body.sonnia-header-compact .main-navigation ul.nav-menu > li > a {
    padding-top: clamp(0.75rem, 0.5rem + 0.6vw, 1.05rem) !important;
    padding-bottom: clamp(0.75rem, 0.5rem + 0.6vw, 1.05rem) !important;
}

/* Logo: no hard swap to background image, no display none. */
html body #masthead.site-header .site-branding,
html body.wwg-resnav-state-open.scrolled .site-branding,
html body:not(.scrolled) .site-branding,
html body.sonnia-header-compact .site-branding {
    display: block !important;
    margin-top: 0 !important;
    transition:
        margin var(--sonnia-header-duration) var(--sonnia-header-ease),
        transform var(--sonnia-header-duration) var(--sonnia-header-ease) !important;
}

html body #masthead.site-header .custom-logo-link,
html body.scrolled:not(.wwg-resnav-state-open) #masthead.site-header .custom-logo-link,
html body.sonnia-header-compact #masthead.site-header .custom-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background-image: none !important;
    background: none !important;
    background-size: auto !important;
}

html body #masthead.site-header .site-branding img,
html body.scrolled:not(.wwg-resnav-state-open) #masthead.site-header .site-branding img,
html body.sonnia-header-compact #masthead.site-header .site-branding img {
    display: block !important;
    width: var(--sonnia-logo-width-full) !important;
    max-width: none !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition:
        width var(--sonnia-header-duration) var(--sonnia-header-ease),
        opacity 180ms ease !important;
    will-change: width;
}

html body.sonnia-header-compact #masthead.site-header .site-branding img,
html body.sonnia-header-compact.scrolled:not(.wwg-resnav-state-open) #masthead.site-header .site-branding img {
    width: var(--sonnia-logo-width-compact) !important;
}

/* Search and dropdowns must remain visible in the fixed stack. */
html body #masthead.site-header .site-search.open,
html body.sonnia-header-compact #masthead.site-header .site-search.open,
html body #tobarbuttons .site-search.open,
html body.sonnia-header-compact #tobarbuttons .site-search.open,
html body.scrolled #tobarbuttons .site-search.open {
    overflow: visible !important;
    background: #ffffff !important;
}

html body.sonnia-header-compact #tobarbuttons .site-search.open,
html body.scrolled #tobarbuttons .site-search.open {
    top: calc(100% + 10px) !important;
    bottom: auto !important;
}

/* Mein Konto/Login: breadcrumb stays removed. */
html body.woocommerce-account .storefront-breadcrumb {
    display: none !important;
}

@media (max-width: 781px) {
    :root {
        --sonnia-header-pad-y-full: 1.45rem;
        --sonnia-header-pad-y-compact: 0.7rem;
        --sonnia-logo-width-full: clamp(8rem, 35vw, 12.5rem);
        --sonnia-logo-width-compact: clamp(6.2rem, 28vw, 9rem);
    }

    html body #masthead.site-header,
    html body.scrolled #masthead.site-header,
    html body.wwg-resnav-state-open #masthead.site-header {
        align-items: flex-start !important;
    }

    html body #toparmobilebuttons,
    html body.scrolled:not(.wwg-resnav-state-open) #toparmobilebuttons,
    html body.sonnia-header-compact #toparmobilebuttons {
        top: var(--sonnia-header-pad-y-full) !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: top var(--sonnia-header-duration) var(--sonnia-header-ease) !important;
    }

    html body.sonnia-header-compact #toparmobilebuttons {
        top: var(--sonnia-header-pad-y-compact) !important;
    }
}

@media (max-width: 600px) {
    html body .sonnia-site-header-wrap > .sonnia-topbar,
    html body #page .sonnia-site-header-wrap > .sonnia-topbar {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    html body .sonnia-topbar-inner {
        gap: 6px !important;
        line-height: 1.35 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body #masthead.site-header,
    html body #masthead.site-header *,
    html body .sonnia-site-header-wrap,
    html body .sonnia-topbar-link {
        transition: none !important;
        animation: none !important;
    }
}