.bw-custom-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #efefef;
    border-bottom: none;
}

:root {
    --bw-surface-glass-bg: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 34%), linear-gradient(180deg, rgba(24, 24, 24, 0.88) 0%, rgba(11, 11, 11, 0.92) 100%);
    --bw-surface-glass-blur: blur(24px);
    --bw-surface-glass-border: 1px solid rgba(255, 255, 255, 0.1);
}

.bw-surface-glass {
    background: var(--bw-surface-glass-bg);
    backdrop-filter: var(--bw-surface-glass-blur);
    -webkit-backdrop-filter: var(--bw-surface-glass-blur);
    border: var(--bw-surface-glass-border);
}

/*
 * ALWAYS-FIXED HEADER
 * When JS is active (bw-has-sticky-header on body), the header is ALWAYS
 * position: fixed. A spacer div (.bw-header-spacer) reserves the space in
 * the document flow. Because the position never changes from relative to
 * fixed, the mobile compositor thread cannot cause a layout jolt.
 *
 * Show/hide on scroll is handled purely with transform (GPU-composited).
 */
body.bw-has-sticky-header:not(.elementor-editor-active) .bw-custom-header {
    position: fixed;
    top: var(--bw-header-top-offset, 0px);
    left: 0;
    right: 0;
    z-index: 9998;
}

/* Spacer: reserves the header's space in the flow */
.bw-header-spacer {
    display: none;
}

body.bw-has-sticky-header:not(.elementor-editor-active) .bw-header-spacer {
    display: block;
    height: var(--bw-header-body-padding, 0px);
}

/* Slide transitions (only active in smart-scroll mode) */
.bw-custom-header.bw-header-hidden,
.bw-custom-header.bw-header-visible {
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

/* Hidden State: Slide Up */
.bw-custom-header.bw-header-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

/* Visible State: Slide Down */
.bw-custom-header.bw-header-visible {
    transform: translateY(0);
    pointer-events: auto;
}

/* LEGACY / HELPER CLASSES (Keep minimal set required for layout) */

.bw-custom-header__inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px 28px;
    box-sizing: border-box;
}

.bw-custom-header__desktop {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    min-height: 54px;
}

.bw-custom-header__desktop-logo,
.bw-custom-header__desktop-right {
    flex: 0 0 auto;
}

.bw-custom-header__desktop-panel {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 100%;
    box-sizing: border-box;
}

.bw-custom-header__desktop-center {
    min-width: 0;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
}

.bw-custom-header__desktop-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

.bw-custom-header__desktop-right .bw-navshop__account-dropdown {
    margin-right: 20px;
}

.bw-custom-header__desktop-right .bw-header-navshop .bw-navshop {
    gap: 20px;
}

.bw-custom-header__desktop-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* Blur Effect Logic (Simplified) */
.bw-custom-header__desktop-panel.is-blur-enabled {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px) !important;
    background-color: rgba(255, 255, 255, 0.00) !important;
    padding: 10px;
    margin: 0;
    border-radius: 12px;
    position: relative;
    z-index: 1;
    isolation: isolate;
    transition: background-color 0.4s ease;
}

/* Scrolled state: subtle tinted background */
.bw-custom-header.bw-header-scrolled .bw-custom-header__desktop-panel.is-blur-enabled {
    background-color: rgba(102, 102, 102, 0.15) !important;
}

@supports not (backdrop-filter: blur(20px)) {
    .bw-custom-header__desktop-panel.is-blur-enabled {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
}

.bw-custom-header__desktop-menu {
    min-width: 0;
}

.bw-custom-header__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    line-height: 1;
}

.bw-custom-header__logo-image {
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.bw-custom-header__logo-fallback {
    display: inline-flex;
    width: 54px;
    height: 54px;
}

.bw-custom-header__logo-fallback svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bw-custom-header__mobile {
    display: none;
    width: 100%;
}

.bw-custom-header__mobile-panel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* Mobile Blur Effect (mirrors desktop panel blur) */
.bw-custom-header__mobile-panel.is-blur-enabled {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px) !important;
    background-color: rgba(255, 255, 255, 0.00) !important;
    padding: 10px 10px 10px 20px;
    border-radius: 50px;
    isolation: isolate;
    transition: background-color 0.4s ease;
}

/* Scrolled state: subtle tinted background */
.bw-custom-header.bw-header-scrolled .bw-custom-header__mobile-panel.is-blur-enabled {
    background-color: rgba(102, 102, 102, 0.15) !important;
}

@supports not (backdrop-filter: blur(20px)) {
    .bw-custom-header__mobile-panel.is-blur-enabled {
        background-color: rgba(255, 255, 255, 0.15) !important;
    }
}

.bw-custom-header__mobile-left {
    justify-self: start;
    display: flex;
    align-items: center;
}

.bw-custom-header__mobile-center {
    justify-self: center;
    display: flex;
    align-items: center;
}

.bw-custom-header__mobile-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 16px;
}

.bw-custom-header .bw-header-search,
.bw-custom-header .bw-header-navshop,
.bw-custom-header .bw-header-navigation {
    width: max-content;
    max-width: 100%;
    flex: 0 0 auto;
}

.bw-custom-header .bw-header-navshop .bw-navshop {
    width: max-content;
}

.bw-custom-header .bw-navigation__desktop .bw-navigation__list {
    gap: 24px;
}

.bw-custom-header .bw-navigation__link {
    color: #000000;
    white-space: nowrap;
}

.bw-custom-header .bw-navigation__link:hover,
.bw-custom-header .bw-navigation__link:focus-visible {
    color: #4a4a4a;
}

.bw-custom-header .bw-navshop__item,
.bw-custom-header .bw-navigation__link,
.bw-custom-header .bw-search-button__label {
    font-size: 20px;
    line-height: 1;
}

.bw-custom-header .bw-navshop__item {
    color: #000000;
}

.bw-custom-header .bw-navshop__item:hover,
.bw-custom-header .bw-navshop__item:focus-visible {
    color: #4a4a4a;
}

.bw-custom-header .bw-search-button__icon,
.bw-custom-header .bw-navshop__cart-icon,
.bw-custom-header .bw-navigation__toggle-icon {
    color: currentColor;
}

.bw-custom-header .bw-search-button {
    text-decoration: none;
    color: #000000;
}

.bw-custom-header .bw-search-button__label {
    padding: 6px 8px;
    color: #000000 !important;
}

.bw-custom-header .bw-search-button:hover,
.bw-custom-header .bw-search-button:focus,
.bw-custom-header .bw-search-button:focus-visible,
.bw-custom-header .bw-search-button:hover .bw-search-button__label,
.bw-custom-header .bw-search-button:focus .bw-search-button__label,
.bw-custom-header .bw-search-button:focus-visible .bw-search-button__label,
.bw-custom-header .bw-search-button:hover .bw-search-button__icon,
.bw-custom-header .bw-search-button:focus .bw-search-button__icon,
.bw-custom-header .bw-search-button:focus-visible .bw-search-button__icon {
    color: #000000 !important;
}

.bw-custom-header .bw-navshop__item+.bw-navshop__item {
    margin-left: 24px;
}

@media (max-width: 1024px) {

    .bw-custom-header {
        background-color: #ffffff !important;
    }

    .bw-custom-header .bw-search-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    .bw-custom-header .bw-navigation__toggle {
        min-width: 30px !important;
        min-height: 30px !important;
        transform: translateX(-10px);
    }

    .bw-custom-header .bw-navshop__cart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 30px !important;
        min-height: 30px !important;
        transform: translateX(21px);
    }

    .bw-custom-header__mobile-right .bw-header-search .bw-search-button {
        padding: 0 !important;
        margin: 4px 0 0 0 !important;
        transform: translateX(30px);
    }

    .bw-custom-header .bw-search-button__icon {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .bw-custom-header .bw-navigation__toggle-icon,
    .bw-custom-header .bw-search-button__icon,
    .bw-custom-header .bw-navshop__cart-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .bw-custom-header .bw-navigation__toggle-icon svg,
    .bw-custom-header .bw-navigation__toggle-icon-image,
    .bw-custom-header .bw-search-button__icon svg,
    .bw-custom-header .bw-search-button__icon-image,
    .bw-custom-header .bw-navshop__cart-icon svg,
    .bw-custom-header .bw-navshop__cart-icon-image {
        width: 16px !important;
        height: 16px !important;
    }

    .bw-custom-header .bw-navshop__cart-icon {
        margin-top: 3px;
    }

    .bw-custom-header .bw-search-button,
    .bw-custom-header .bw-navigation__toggle,
    .bw-custom-header .bw-navshop__cart {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .bw-custom-header .bw-navshop__cart-count {
        font-size: 11px;
        font-weight: 400;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .bw-custom-header__mobile-right .bw-header-navshop--mobile .bw-navshop__cart-count {
        transform: translate(-15px, 0px) !important;
        min-width: 1.2em !important;
        height: 1.2em !important;
        line-height: 1 !important;
    }


    .bw-custom-header__inner {
        padding: 14px 18px;
    }

    .bw-custom-header__mobile-right {
        gap: 14px;
    }
}

/* Hide the cart badge when the cart is empty (applies to both desktop and mobile). */
.bw-custom-header .bw-navshop__cart-count.is-empty {
    display: none !important;
}

/* =============================================================
   DARK ZONE – testi, logo e icone diventano bianchi
   ============================================================= */

/* Transizioni fluide per asset immagine che cambiano via filter */
.bw-custom-header .bw-custom-header__logo-image,
.bw-custom-header .bw-navigation__toggle-icon-image,
.bw-custom-header .bw-search-button__icon-image,
.bw-custom-header .bw-navshop__cart-icon-image {
    transition: filter 0.25s ease;
}

/* Menu links — color: inherit gia ha transition in bw-navigation.css */
.bw-custom-header.bw-header-on-dark .bw-navigation__link,
.bw-custom-header.bw-header-on-dark .bw-navigation__link:hover,
.bw-custom-header.bw-header-on-dark .bw-navigation__link:focus-visible {
    color: #ffffff !important;
}

/* Account / cart text triggers */
.bw-custom-header.bw-header-on-dark .bw-navshop__item,
.bw-custom-header.bw-header-on-dark .bw-navshop__item:hover,
.bw-custom-header.bw-header-on-dark .bw-navshop__item:focus-visible {
    color: #ffffff !important;
}

/* Mobile icon triggers */
.bw-custom-header.bw-header-on-dark .bw-navigation__toggle,
.bw-custom-header.bw-header-on-dark .bw-navigation__toggle:hover,
.bw-custom-header.bw-header-on-dark .bw-navigation__toggle:focus-visible,
.bw-custom-header.bw-header-on-dark .bw-search-button,
.bw-custom-header.bw-header-on-dark .bw-search-button:hover,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus-visible,
.bw-custom-header.bw-header-on-dark .bw-search-button:hover .bw-search-button__icon,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus .bw-search-button__icon,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus-visible .bw-search-button__icon,
.bw-custom-header.bw-header-on-dark .bw-navshop__cart,
.bw-custom-header.bw-header-on-dark .bw-navshop__cart:hover,
.bw-custom-header.bw-header-on-dark .bw-navshop__cart:focus-visible {
    color: #ffffff !important;
}

/* Search label stays readable too when desktop search is visible on dark */
.bw-custom-header.bw-header-on-dark .bw-search-button__label,
.bw-custom-header.bw-header-on-dark .bw-search-button:hover .bw-search-button__label,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus .bw-search-button__label,
.bw-custom-header.bw-header-on-dark .bw-search-button:focus-visible .bw-search-button__label {
    color: #080808 !important;
}

/* Logo / uploaded icon images: filter to white */
.bw-custom-header.bw-header-on-dark .bw-custom-header__logo-image,
.bw-custom-header.bw-header-on-dark .bw-navigation__toggle-icon-image,
.bw-custom-header.bw-header-on-dark .bw-search-button__icon-image,
.bw-custom-header.bw-header-on-dark .bw-navshop__cart-icon-image {
    filter: brightness(0) invert(1);
}

/* Fallback SVG assets (usa currentColor) */
.bw-custom-header.bw-header-on-dark .bw-custom-header__logo-fallback,
.bw-custom-header.bw-header-on-dark .bw-navigation__toggle-icon,
.bw-custom-header.bw-header-on-dark .bw-search-button__icon,
.bw-custom-header.bw-header-on-dark .bw-navshop__cart-icon {
    color: #ffffff !important;
}

/* ─── Dark-zone snap: suppress colour/filter transitions for one frame ───────
   bw-header-snap-color is added by JS in showHeader() for a single rAF tick.
   During that tick the browser paints the header (still off-screen) with the
   correct dark-zone colour state.  When bw-header-snap-color is then removed
   in the same rAF as bw-header-hidden, the colour has not changed, so no
   colour transition fires — only the transform slide-in animates.           */
.bw-custom-header.bw-header-snap-color .bw-navigation__link,
.bw-custom-header.bw-header-snap-color .bw-navshop__item,
.bw-custom-header.bw-header-snap-color .bw-navigation__toggle,
.bw-custom-header.bw-header-snap-color .bw-search-button,
.bw-custom-header.bw-header-snap-color .bw-custom-header__logo-image,
.bw-custom-header.bw-header-snap-color .bw-navigation__toggle-icon-image,
.bw-custom-header.bw-header-snap-color .bw-search-button__icon-image,
.bw-custom-header.bw-header-snap-color .bw-navshop__cart-icon-image,
.bw-custom-header.bw-header-snap-color .bw-custom-header__logo-fallback,
.bw-custom-header.bw-header-snap-color .bw-navigation__toggle-icon,
.bw-custom-header.bw-header-snap-color .bw-search-button__icon,
.bw-custom-header.bw-header-snap-color .bw-navshop__cart-icon {
    transition: color 0s !important, filter 0s !important;
}

@media (prefers-reduced-motion: reduce) {

    .bw-custom-header {
        transition: none !important;
    }
}