/* ==========================================
   HEADER
========================================== */

/* A line of news across the top of every page, set by the shop owner.
   It scrolls away with the page; the header below it stays put. */

.announce-bar{
    padding:9px 16px;
    background:var(--accent);
    color:#fff6ec;
    font-size:.86rem;
    line-height:1.4;
    letter-spacing:.03em;
    text-align:center;
    overflow-wrap:anywhere;
}

.announce-bar a{
    color:inherit;
    text-decoration:underline;
    text-underline-offset:3px;
}

.header{
    position:sticky;
    top:0;
    z-index:1000;
    height:var(--header-h);
    padding:0 5%;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    background:rgba(255,250,245,.94);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    transition:height .35s var(--ease),box-shadow .35s;
}

.header.scrolled{
    height:66px;
    box-shadow:var(--shadow-sm);
}

.header-left{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:0;
}

/* ==========================================
   MENU BUTTON
========================================== */

.menu-btn{
    display:flex;
    flex:none;
    width:44px;
    height:44px;
    border-radius:50%;
    justify-content:center;
    align-items:center;
    color:var(--text);
    font-size:19px;
    transition:background .3s;
}

.menu-btn:hover{
    background:var(--bg-soft);
}

/* ==========================================
   LOGO
========================================== */

.logo{
    display:flex;
    flex-direction:column;
    align-items:center;
    font-family:var(--font-head);
    font-size:2rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.24em;
    margin-right:-.24em;
    color:var(--accent);
    white-space:nowrap;
    transition:font-size .35s var(--ease);
}

.logo small{
    font-family:var(--font-body);
    font-size:.58rem;
    font-weight:400;
    letter-spacing:.5em;
    text-transform:uppercase;
    color:var(--gold);
    margin-top:5px;
}

.header.scrolled .logo{
    font-size:1.7rem;
}

/* ==========================================
   NAV LINKS
========================================== */

.navbar{
    display:flex;
    align-items:center;
    gap:30px;
}

.navbar a{
    position:relative;
    padding:6px 0;
    font-size:.8rem;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--text);
    transition:color .3s;
}

.navbar a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:1px;
    background:var(--fill);
    transition:width .4s var(--ease),left .4s var(--ease);
}

.navbar a:hover,
.navbar a.active{
    color:var(--accent);
}

.navbar a:hover::after,
.navbar a.active::after{
    left:0;
    width:100%;
}

/* ==========================================
   SEARCH + ICONS
========================================== */

.header-right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
}

.search-wrapper{
    position:relative;
    margin-right:6px;
}

.search-wrapper input{
    width:190px;
    height:42px;
    border-radius:50px;
    padding:0 18px 0 42px;
    background:var(--surface);
    border:1px solid var(--line);
    color:var(--text);
    font-size:.9rem;
    transition:width .45s var(--ease),border-color .3s,box-shadow .3s;
}

.search-wrapper input::placeholder{
    color:#a4968f;
}

.search-wrapper input:focus{
    width:250px;
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(185,139,78,.12);
}

.search-wrapper i{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--accent);
    font-size:.85rem;
}

.icon-btn{
    position:relative;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:var(--text);
    font-size:18px;
    transition:background .3s,color .3s,transform .4s var(--ease);
}

.icon-btn:hover{
    background:var(--bg-soft);
    color:var(--accent);
    transform:translateY(-2px);
}

.icon-btn span{
    position:absolute;
    top:2px;
    right:0;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:20px;
    background:var(--fill);
    color:var(--on-fill);
    font-size:10px;
    font-weight:600;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid var(--surface);
}

.icon-btn span.bump{
    animation:bump .5s var(--ease);
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:992px){

    :root{
        --header-h:66px;
    }

    .header{
        padding:0 14px;
        gap:8px;
    }

    .navbar,
    .search-wrapper{
        display:none;
    }

    .menu-btn{
        display:flex;
    }

    .logo,
    .header.scrolled .logo{
        font-size:1.45rem;
    }

    .logo small{
        font-size:.5rem;
    }

    .header-right{
        gap:0;
    }

}