.site-header {
     position: sticky;
     top: 0;
     z-index: 1000;
     background: rgba(255, 255, 255, .97);
     border-bottom: 1px solid var(--border);
     backdrop-filter: blur(12px)
 }

 .header-inner {
     min-height: 78px;
     display: flex;
     align-items: center;
     gap: 24px
 }

 .brand {
     flex: 0 0 auto
 }

 .brand-name {
     display: block;
     font-family: Georgia, serif;
     font-size: 1.55rem;
     font-weight: 700;
     color: var(--brown)
 }

 .brand-tagline {
     display: block;
     color: var(--brown-light);
     font-size: .66rem
 }

 .main-nav {
     display: flex;
     align-items: center;
     gap: 18px;
     margin-left: auto
 }

 .main-nav a {
     position: relative;
     color: var(--brown);
     font-size: .84rem;
     font-weight: 700;
     padding: 8px 0;
     white-space: nowrap
 }

 .main-nav a:after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 1px;
     width: 0;
     height: 2px;
     background: var(--pink-dark);
     transition: width .25s ease
 }

 .main-nav a:hover:after {
     width: 100%
 }

 .header-tools {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-left: 6px
 }

 .search-trigger {
     border: 0;
     background: transparent;
     color: var(--brown);
     font-size: 1.1rem;
     cursor: pointer
 }

 .cart-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: .84rem;
     font-weight: 700;
     color: var(--brown);
     white-space: nowrap
 }

 .cart-count {
     min-width: 21px;
     height: 21px;
     padding: 0 5px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--pink);
     color: #fff;
     font-size: .68rem
 }

 .menu-toggle {
     display: none;
     border: 0;
     background: transparent;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--brown)
 }

 .search-panel {
     display: none;
     border-top: 1px solid var(--border);
     background: #fff;
     padding: 14px 0
 }

 .search-panel.active {
     display: block
 }

 .search-form {
     display: flex;
     gap: 10px
 }

 .search-form input {
     flex: 1;
     border: 1px solid var(--border);
     border-radius: 999px;
     padding: 12px 18px;
     outline: none
 }

 .search-form button {
     border: 0;
     border-radius: 999px;
     padding: 0 22px;
     background: var(--brown);
     color: #fff;
     font-weight: 700
 }

 .account-link {
     display: inline-flex;
     align-items: center;
     color: var(--brown);
     font-size: .84rem;
     font-weight: 700;
     white-space: nowrap
 }

 .account-link:hover {
     color: var(--pink-dark)
 }
 /* =========================================
   LOGOUT BUTTON
========================================= */

.logout-button {
    border: none;
    background: transparent;
    color: var(--brown);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.logout-button:hover {
    color: var(--pink-dark);
}
.header-inner {
flex-wrap: nowrap;
}

.header-tools {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
flex-shrink: 0;
}

.account-link,
.logout-button,
.header-order-button {
flex-shrink: 0;
white-space: nowrap;
}

.header-order-button {
display: inline-flex;
align-items: center;
justify-content: center;
}

/* Prevent logout from increasing header height */
.logout-button {
white-space: nowrap;
line-height: 1.2;
}

/* Keep the header usable on smaller screens */
@media screen and (max-width: 1100px) and (min-width: 769px) {
.header-inner {
gap: 12px;
}

.main-nav {
    gap: 10px;
}

.header-tools {
    gap: 7px;
    margin-left: 0;
}

.brand-name {
    font-size: 1.3rem;
}

.header-order-button {
    padding: 0 15px;
    font-size: 0.82rem;
}

}
/* =========================================
   MOBILE: COMPACT CART ICON
========================================= */

@media screen and (max-width: 768px) {
    .cart-link {
        font-size: 0;
        gap: 0;
        justify-content: center;
    }

    .cart-link > span:first-child {
        display: none;
    }

    .cart-link::before {
        content: "🛒";
        font-size: 20px;
        line-height: 1;
    }

    .cart-count {
        font-size: 11px;
        margin-left: 3px;
    }
}