/* Simple logo-left, navigation-right header. */
.child-header-logo-compact {
    display: none;
}

body.child-header-configured #masthead.site-header {
    padding: 0;
    --child-header-active-height: var(--child-header-normal-height, 112px);
    --child-header-active-logo-height: var(--child-header-logo-height, 72px);

}

body.child-header-configured #masthead.child-header-is-compact {
    --child-header-active-height: var(--child-header-compact-height, 72px);
    --child-header-active-logo-height: var(--child-header-compact-logo-height, 44px);

}

body.child-header-configured #masthead .child-header-inner {
    min-height: var(--child-header-active-height);
    padding-top: 0;
    padding-bottom: 0;
    transition: min-height 280ms ease-in-out;
}

body.child-header-configured #masthead .child-header-branding .custom-logo {
    width: auto;
    height: var(--child-header-active-logo-height);
    max-width: 100%;
    max-height: none;
    border-radius: 0;
    transition: height 280ms ease-in-out;
}

body.child-header-configured .child-header-branding {
    display: grid;
    justify-items: start;
    isolation: isolate;
    transform: translateY(var(--child-header-logo-offset-y, 0px));
}

body.child-header-configured .child-header-logo-normal,
body.child-header-configured .child-header-logo-compact {
    display: block;
    grid-area: 1 / 1;
    align-self: center;
    transition: none;
}

body.child-header-configured .child-header-logo-normal {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: opacity 280ms ease-in-out, visibility 0s;
}

body.child-header-configured .child-header-logo-compact {
    z-index: 1;
    pointer-events: none;
}

#masthead.child-header-is-compact .child-header-branding:has(.child-header-logo-compact) .child-header-logo-normal {
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms ease-in-out, visibility 0s 280ms;
}

body.child-header-configured #masthead.child-header-is-compact .child-header-logo-compact {
    pointer-events: auto;
}

body.child-header-configured #masthead.child-header-is-measuring .child-header-inner,
body.child-header-configured #masthead.child-header-is-measuring .custom-logo,
body.child-header-configured #masthead.child-header-is-measuring .child-header-logo-normal,
body.child-header-configured #masthead.child-header-is-measuring .child-header-logo-compact {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    body.child-header-configured #masthead .child-header-inner,
    body.child-header-configured #masthead .custom-logo,
    body.child-header-configured .child-header-logo-normal,
    body.child-header-configured .child-header-logo-compact {
        transition: none;
    }
}

body.child-header-hidden #masthead.site-header {
    display: none;
}

.child-header-flow-spacer {
    height: 0;
    pointer-events: none;
    overflow-anchor: none;
}

@media (max-width: 767px) {
    body.child-header-configured #masthead.site-header {
        --child-header-active-height: var(--child-header-mobile-height, 88px);
        --child-header-active-logo-height: var(--child-header-mobile-logo-height, 48px);
    }

    body.child-header-configured #masthead.child-header-is-compact {
        --child-header-active-height: var(--child-header-mobile-compact-height, 64px);
        --child-header-active-logo-height: var(--child-header-mobile-compact-logo-height, 32px);
    }
}
#masthead.site-header {
    position: sticky;
    top: var(--wp-admin--admin-bar--height, 0px);
    z-index: 1000;
    padding: 1.25rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid var(--child-color-border-light, #e8e8e8);
}

#masthead .child-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

@media (min-width: 768px) {
    body.child-header-configured #masthead .child-header-inner {
        column-gap: .25rem;
    }
}

#masthead .child-header-inner {
    position: relative;
    z-index: 2;
}

#masthead .child-header-inner.child-header-has-hover-pill {
    position: relative;
    isolation: isolate;
}

.child-header-hover-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    background: rgb(var(--child-color-surface-hover-rgb, 0 0 0) / 5%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.child-header-hover-pill.is-positioned {
    transition: transform 220ms ease, width 220ms ease, height 220ms ease, opacity 180ms ease;
}

.child-header-hover-pill.is-visible {
    opacity: 1;
}

#masthead .child-header-has-hover-pill :is(.child-header-navigation a, .child-header-help, .child-header-icon):is(:hover, :focus-visible, [aria-expanded="true"]) {
    background-color: transparent;
}

#masthead .child-header-inner::before,
#masthead .child-header-inner::after {
    display: none;
}

.child-header-branding {
    flex: 0 0 auto;
    max-width: 100%;
}

.child-header-branding .custom-logo-link {
    display: block;
}

.child-header-branding .custom-logo {
    width: auto;
    max-width: 220px;
    max-height: 72px;
    object-fit: contain;
}

.child-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
}

.child-header-navigation {
    min-width: 0;
    margin-left: auto;
}

.child-header-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.child-header-navigation > ul,
.child-header-navigation > .child-header-menu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.25rem;
}

.child-header-navigation li {
    position: relative;
}

#masthead .child-header-navigation a,
#masthead button.child-header-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    padding: 0 .75rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

#masthead .child-header-navigation a,
#masthead button.child-header-help,
#masthead .child-header-icon {
    transition: background-color 180ms ease, color 180ms ease;
}

.child-header-navigation ul ul {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    min-width: 200px;
    padding: 0.5rem 1rem;
    background: var(--child-color-header-bg, #fff);
    box-shadow: 0 4px 16px rgb(var(--child-color-shadow-rgb, 0 0 0) / 12%);
}

#masthead .child-header-navigation ul ul a {
    color: var(--child-color-header-link, #333);
}

.child-header-navigation ul ul ul {
    top: 0;
    right: 100%;
}

.child-header-navigation li:hover > ul,
.child-header-navigation li:focus-within > ul {
    display: block;
}

.child-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
}


#masthead a.child-header-icon,
#masthead button.child-header-icon {
    position: relative;
    color: var(--child-color-header-link, var(--child-header-icon-color, #7f54b3));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    list-style: none;
    text-decoration: none;
}


#masthead button.child-header-icon {
    border: 0;
    background: transparent;
}

#masthead button.child-header-help {
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 .75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--child-color-header-link, var(--child-header-icon-color, #7f54b3));
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#masthead button.child-header-help:not(:last-child) {
    margin-right: 2rem;
}

#masthead button.child-header-help:focus-visible {
    outline: 2px solid var(--child-color-field-focus, currentColor);
    outline-offset: 2px;
}

.child-header-cart-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#masthead .child-header-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--child-color-header-badge-bg, #000);
    color: var(--child-color-header-badge-text, #fff);
    font-size: .625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
}

#masthead .child-header-badge[hidden] {
    display: none;
}

#masthead .child-header-tooltip {
    position: absolute;
    z-index: 1001;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: .5rem .75rem;
    border-radius: var(--child-radius-control, 6px);
    background: var(--child-color-tooltip-bg, #343a40);
    color: var(--child-color-tooltip-text, #fff);
    box-shadow: 0 4px 14px rgb(var(--child-color-shadow-rgb, 0 0 0) / 15%);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    visibility: hidden;
    opacity: 0;
}

/* Bridge the gap so the tooltip stays visible when the pointer moves over it. */
#masthead .child-header-tooltip::before {
    content: '';
    position: absolute;
    inset: -.5rem 0 100%;
}

#masthead .child-header-icon:not(.is-tooltip-dismissed):hover .child-header-tooltip,
#masthead .child-header-icon:not(.is-tooltip-dismissed):focus-visible .child-header-tooltip {
    visibility: visible;
    opacity: 1;
}

.child-header-icon .ti {
    display: block;
    flex-shrink: 0;
    font-size: 24px;
}

#masthead .child-header-icon:hover,
#masthead .child-header-icon:focus-visible,
#masthead .child-header-navigation a:hover,
#masthead .child-header-navigation a:focus-visible,
#masthead button.child-header-help:hover,
#masthead button.child-header-help:focus-visible,
#masthead button.child-header-help[aria-expanded="true"] {
    background: rgb(var(--child-color-surface-hover-rgb, 0 0 0) / 5%);
}

#masthead .child-header-icon:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

#masthead .child-header-icon:focus-visible {
    outline: 2px solid var(--child-color-field-focus, currentColor);
    outline-offset: 2px;
}

#masthead .child-header-actions-checkout { margin-left: auto; }
#masthead .child-header-shop { margin-right: .75rem; font-weight: 600; text-decoration: none; }
body.woocommerce-checkout #masthead .child-header-inner { flex-wrap: nowrap; }
body.woocommerce-checkout #masthead .child-header-branding { flex: 0 1 auto; min-width: 0; }
body.woocommerce-checkout #masthead .custom-logo { max-width: min(220px, 100%); height: auto; }

@media (max-width: 767px) {
    #masthead .child-header-inner {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .child-header-actions {
        margin-left: auto;
    }

    .child-header-navigation {
        order: 1;
        width: 100%;
        margin-left: 0;
    }

    .child-header-navigation > ul,
    .child-header-navigation > .child-header-menu > ul {
        justify-content: flex-start;
        gap: 0.25rem;
    }

    .child-header-navigation ul ul {
        display: block;
        position: static;
        min-width: 0;
        padding: 0 0 0 1rem;
        background: transparent;
        box-shadow: none;
    }

    #masthead .child-header-navigation ul ul a {
        color: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    .child-header-hover-pill,
    .child-header-hover-pill.is-positioned,
    #masthead .child-header-navigation a,
    #masthead button.child-header-help,
    #masthead .child-header-icon {
        transition: none;
    }
}