.user-status{display:flex;align-items:center;gap:1rem;margin-left:1.25rem}.user-status-item{display:inline-flex;align-items:center;gap:.3rem;color:#b6c8ed;text-decoration:none;font-size:.78rem;letter-spacing:.04em;white-space:nowrap}.user-status-item:hover,.user-status-name:hover{color:#fff}.user-status-name{color:#fff;font-weight:700}.user-status-item span{color:#89a3d4}.cart-status{font-size:1rem}.status-logout{display:inline;margin-left:.75rem}.status-logout button{background:none;border:0;color:#89a3d4;cursor:pointer;font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}@media(max-width:760px){.mode-topbar{align-items:flex-start;flex-wrap:wrap;gap:.75rem}.mode-topbar nav{width:100%;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.65rem}.user-status{order:3;width:100%;justify-content:space-between;margin:0;padding:.65rem .75rem;border:1px solid rgba(145,170,220,.25);background:rgba(5,14,32,.65);gap:.45rem}.user-status-item{font-size:.68rem}.status-logout{margin-left:0}.status-logout button{font-size:.64rem}}.mode-topbar nav{display:flex;align-items:center;flex:1;gap:0;margin-left:1.5rem}.header-primary{display:flex;align-items:center}.header-account{display:flex;align-items:center;gap:1rem;margin-left:auto}.status-logout{margin-left:0}.status-logout button{font-size:.68rem;font-weight:800;line-height:1;letter-spacing:.1em;padding:.55rem .8rem}@media(max-width:760px){.mode-topbar nav{flex:1;justify-content:flex-end;margin-left:.75rem;gap:.65rem}.header-primary{flex:0 0 auto}.header-account{width:100%;margin-left:0;justify-content:space-between;gap:.45rem}.status-logout button{font-size:.64rem;line-height:1;padding:.45rem .35rem}}
.logged-in-header{gap:1rem}.header-left,.header-account{display:flex;align-items:center;gap:1rem}.header-left{min-width:0}.mode-switch{color:#b6c8ed;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-decoration:none}.mode-switch:hover,.user-status-item:hover{color:#fff}.header-account{margin-left:auto}.header-account .user-status-item{display:inline-flex;align-items:center;gap:.3rem;color:#b6c8ed;text-decoration:none;font-size:.78rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}.header-account .user-status-name{color:#fff}.header-account .user-status-item span{color:#89a3d4}.header-account .cart-status{font-size:1rem}.header-account .status-logout{display:inline;margin:0}.header-account .status-logout button{padding:0;border:0;color:#b6c8ed;background:none;cursor:pointer;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;line-height:1;white-space:nowrap}.header-account .status-logout button:hover{color:#fff}@media(max-width:760px){.logged-in-header{align-items:flex-start;flex-wrap:wrap;gap:.75rem}.header-left{width:100%;justify-content:space-between}.header-account{width:100%;margin-left:0;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding:.65rem .75rem;border:1px solid rgba(145,170,220,.25);background:rgba(5,14,32,.65)}.header-account .user-status-item,.header-account .status-logout button{font-size:.68rem}.header-account .cart-status{font-size:.9rem}}

/* Bite 4B: consistent shared-header groups and responsive page rhythm. */
.logged-in-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.logged-in-header .header-left{display:flex;align-items:center;gap:1rem;flex:0 1 auto}
.logged-in-header .mode-brand{padding:0;flex:0 0 auto}
.logged-in-header .mode-brand img{width:72px}
.logged-in-header .mode-switch{max-width:15rem;padding:.7rem .8rem;border:1px solid var(--line);line-height:1.45}
.logged-in-header nav.header-account{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:0;gap:.85rem}
.logged-in-header .header-account .user-status-item{padding:.35rem 0;min-height:2.5rem;font-size:.72rem;letter-spacing:.025em}
.logged-in-header .header-account .user-status-name{max-width:15rem;white-space:normal;overflow-wrap:anywhere}
.logged-in-header .header-account .status-logout button{min-height:2.5rem;font-size:.72rem}
.logged-in-header a:focus-visible,.logged-in-header button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.mode-page{background:transparent;padding-top:clamp(2rem,5vh,3.5rem)}
.mode-page .mode-eyebrow{font-size:.75rem;letter-spacing:.14em;margin-bottom:1rem}
.mode-page .mode-copy{margin:1.25rem 0 2rem}
@media(max-width:1050px){
 .logged-in-header .header-left{width:100%;justify-content:space-between}
 .logged-in-header nav.header-account{width:100%;justify-content:flex-start;padding:.7rem 1rem;border:1px solid var(--line);background:var(--panel);gap:.7rem 1.25rem}
 .logged-in-header .header-account .status-logout{margin-left:auto}
}
@media(max-width:480px){
 .logged-in-header{gap:.75rem;padding:1rem 0}
 .logged-in-header .mode-brand img{width:60px}
 .logged-in-header .mode-switch{max-width:13rem;font-size:.65rem}
 .logged-in-header nav.header-account{display:grid;grid-template-columns:1fr auto auto;gap:.2rem .85rem;padding:.65rem .8rem}
 .logged-in-header .header-account .user-status-name{grid-column:1 / -1;max-width:none}
 .logged-in-header .header-account .user-status-item:nth-child(2){grid-column:1 / -1}
 .logged-in-header .header-account .status-logout{margin-left:0;justify-self:end}
 .mode-page h1{font-size:2.35rem;line-height:1.06;overflow-wrap:anywhere}
}

.mode-page h1{max-width:52rem;font-size:clamp(2.35rem,4vw,3.5rem);line-height:1.06}