/* CITRA_SHOP_HEADER_STABLE_SEARCH_STICKY_V1
   Storefront header only; does not change Citra Journal.
   IMPORTANT: Home pages may set overflow-x:hidden on html/body.  'clip'
   keeps the visual clipping without introducing a scrolling ancestor
   that prevents CSS position:sticky from working.
*/
@supports (overflow: clip) {
    html, body { overflow-x: clip !important; }
}
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    width: 100%;
}
/* Reserve space for the focused search field, instead of resizing the flex item. */
@media (min-width: 1025px) {
    .site-header .navbar {
        max-width: 1640px;
        padding-inline: clamp(16px, 2vw, 34px);
        gap: clamp(12px, 1.15vw, 20px);
    }
    .site-header .nav-menu {
        flex: 1 1 auto;
        min-width: 0;
        gap: clamp(10px, .85vw, 16px);
        margin-right: 0;
    }
    .site-header .nav-links {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: space-between;
        gap: clamp(8px, .9vw, 15px);
    }
    .site-header .nav-links a,
    .site-header .dropbtn {
        white-space: nowrap;
    }
    .site-header .nav-right {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: clamp(8px, 1vw, 16px);
    }
    .site-header .header-search {
        flex: 0 0 clamp(160px, 17vw, 280px);
        min-width: 160px;
        max-width: 280px;
        width: clamp(160px, 17vw, 280px);
    }
    .site-header .search-box {
        width: 100%;
        height: 40px;
    }
    .site-header .search-box input {
        width: calc(100% - 30px);
        min-width: 0;
        max-width: 100%;
        transition: width .22s ease, background-color .22s ease,
                    color .22s ease, border-color .22s ease;
    }
    .site-header .search-box input:focus {
        width: 100%;
    }
    .site-header .cart-header-wrapper {
        flex: 0 0 auto;
        margin-left: 4px;
        margin-right: 4px;
    }
    .site-header .auth-section { flex: 0 0 auto; }
}
/* Laptop layout: save space without ever letting menu labels wrap. */
@media (min-width: 1025px) and (max-width: 1360px) {
    .site-header .navbar { padding-inline: 14px; gap: 10px; }
    .site-header .nav-menu { gap: 9px; }
    .site-header .nav-links { gap: 8px; }
    .site-header .nav-links a,
    .site-header .dropbtn { font-size: 13px; }
    .site-header .nav-right { gap: 7px; }
    .site-header .header-search {
        flex-basis: clamp(145px, 15vw, 205px);
        width: clamp(145px, 15vw, 205px);
        min-width: 145px;
    }
    .site-header .auth-section { gap: 5px; }
    .site-header .auth-btn { padding-inline: 12px; }
}
/* Mobile keeps the existing off-canvas navigation and full-width search. */
@media (max-width: 1024px) {
    .site-header .search-box input,
    .site-header .search-box input:focus { width: 100%; }
}