/**
 * Luzi Storefront — Header (Elementor header template #76)
 * BEM hooks are assigned in the template via the css_classes control:
 *   .luzi-header(--desktop|--mobile), __logo, __logo-link, __search, __nav, __cart
 * RTL row order: logo (right) -> search (center) -> nav + cart (left).
 */
header.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 999;
}

.luzi-header {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    border-bottom: 1px solid var(--lz-glass-line);
    box-shadow: 0 6px 24px -10px rgba(15, 23, 42, 0.18);
}
/* The glass lives on ::before. A backdrop-filter on .luzi-header would become the containing block of the
   fixed-position Elementor side cart and clip it to the header height. */
.luzi-header::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background: var(--lz-glass-bg);
    -webkit-backdrop-filter: var(--lz-glass-fx);
    backdrop-filter: var(--lz-glass-fx);
    pointer-events: none;
}
.luzi-header--mobile { position: fixed; }

/* Logo: static (Elementor sets it absolute, which pushed it below the centre line) */
.luzi-header__logo {
    align-self: center;
    height: auto !important;
    min-height: 0 !important;
}
.luzi-header__logo-link {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 0;
}
.luzi-header__logo-link a { display: block; }
.luzi-header__logo-link img {
    display: block;
    width: auto !important;
    height: 52px !important;
    max-width: none;
}

/* ---------- Desktop / tablet ---------- */
@media (min-width: 1025px) {
    .luzi-header--desktop > .e-con-inner {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 24px;
    }
    .luzi-header--desktop > .e-con-inner > .e-con {
        width: auto !important;
        min-width: 0;
    }
    .luzi-header--desktop .luzi-header__logo   { order: 1; flex: 0 0 auto; }
    .luzi-header--desktop .luzi-header__search { order: 2; flex: 1 1 0; justify-content: center; }
    .luzi-header--desktop .luzi-header__nav    { order: 3; flex: 0 0 auto; }
    .luzi-header--desktop .luzi-header__cart   { order: 4; flex: 0 0 auto; }
    .luzi-header--desktop .luzi-header__search > .elementor-widget {
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
    }
}

/* ---------- Mobile + tablet (<=1024px): logo centred, search icon opens the field, cart; one row ---------- */
@media (max-width: 1024px) {
    .luzi-header--desktop { display: none !important; }
    .luzi-header--mobile { display: flex !important; }
    html body { padding-top: 64px !important; }
    .luzi-header--mobile {
        height: 64px;
        min-height: 0 !important;
        padding: 0 !important;
    }
    .luzi-header--mobile > .e-con-inner {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center !important;
        justify-items: center;
        height: 64px;
        gap: 0 !important;
        padding: 0 12px !important;
        flex-wrap: nowrap !important;
    }
    .luzi-header--mobile > .e-con-inner > .e-con {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Search icon: first cell (right side in RTL). Elementor's icon font is not loaded, so the cell draws its own glyph. */
    .luzi-header--mobile .elementor-element-5e3ffef {
        grid-column: 1;
        justify-self: start;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .luzi-header--mobile .elementor-element-5e3ffef .elementor-widget-icon { display: none !important; }
    .luzi-header--mobile .elementor-element-5e3ffef::before {
        content: '';
        width: 24px;
        height: 24px;
        background-color: var(--lz-ink, #111);
        -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>") center / contain no-repeat;
        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>") center / contain no-repeat;
    }
    /* Logo: centre cell */
    .luzi-header--mobile .luzi-header__logo {
        width: auto !important;
        grid-column: 2;
        justify-self: center;
        order: 0;
        flex: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background-image: none !important;
    }
    .luzi-header--mobile .luzi-header__logo-link img { height: 40px !important; width: auto !important; max-width: 118px; }
    /* Cart: last cell (left side in RTL) */
    .luzi-header--mobile .luzi-header__cart {
        grid-column: 3;
        justify-self: end;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
    }
    .luzi-header--mobile .luzi-header__cart > .elementor-widget { margin: 0 !important; width: 36px !important; }
    /* Search field: hidden until the icon is tapped; then a full-width bar under the header */
    .luzi-header--mobile .luzi-mobile-header-search-wrap {
        display: none !important;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        padding: 10px 12px !important;
        background: #ffffff;
        border-bottom: 1px solid var(--lz-glass-line, #e5e7eb);
        box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.25);
        z-index: 1000;
    }
    .luzi-header--mobile .luzi-mobile-header-search-wrap.is-open { display: block !important; }
    .luzi-header--mobile .luzi-search-wrap,
    .luzi-header--mobile .luzi-search-form { width: 100%; height: 44px; }
    .luzi-header--mobile .luzi-input-box { min-width: 0; }
    .luzi-header--mobile .luzi-search-submit { width: 44px; flex: 0 0 44px; }
}

/* ---------- Header cart toggle: one icon in every state ----------
   Elementor swaps the toggle's SVG for an unloaded FontAwesome <i> once the cart has items, which collapsed the
   button to 0x0. Draw the stsho cart glyph instead and hide both. */
.luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon svg,
.luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon i { display: none !important; }
.luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon::before {
    content: '\ea36';
    font-family: 'stsho' !important;
    font-size: 30px;
    line-height: 1;
    color: var(--lz-ink);
    transition: color var(--lz-dur) var(--lz-ease);
}
.luzi-header .elementor-menu-cart__toggle_button:hover .elementor-button-icon::before { color: var(--lz-pink); }
.luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; }
html body .luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon svg,
html body .luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon svg.e-toggle-cart-custom-icon,
html body .luzi-header .elementor-menu-cart__toggle_button .elementor-button-icon i {
    display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important;
}

/* ---------- Mobile header polish: three equal 44px controls, one vertical centre line, no overflow ---------- */
@media (max-width: 1024px) {
    .luzi-header--mobile {
        inset-inline: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .luzi-header--mobile > .e-con-inner > .e-con { align-self: center !important; }
    .luzi-header--mobile .elementor-element-5e3ffef,
    .luzi-header--mobile .luzi-header__cart {
        flex: none !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        color: var(--lz-ink, #111);
    }
    .luzi-header--mobile .luzi-header__cart > .elementor-widget,
    .luzi-header--mobile .luzi-header__cart .elementor-menu-cart__wrapper,
    .luzi-header--mobile .luzi-header__cart .elementor-menu-cart__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
    }
    .luzi-header--mobile .elementor-menu-cart__toggle_button .elementor-button-icon::before { font-size: 26px; }
    .luzi-header--mobile .luzi-header__search-icon {
        display: block;
        width: 26px;
        height: 26px;
        color: var(--lz-ink, #111);
    }
    .luzi-header--mobile .elementor-element-5e3ffef.luzi-has-search-svg::before { display: none; }
    .luzi-header--mobile .elementor-element-5e3ffef:focus-visible { outline: 2px solid var(--lz-pink, #cc0081); outline-offset: 2px; border-radius: 10px; }
}
@media (max-width: 1024px) {
    .luzi-header--mobile .luzi-header__logo,
    .luzi-header--mobile .luzi-header__logo-link { padding: 0 !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; }
    .luzi-header--mobile .luzi-header__logo-link a { display: flex; align-items: center; }
}