/* Hamburger navigation for every viewport. Brand and cart stay visible; everything else lives in the panel. */
header{position:relative;z-index:6}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Desktop floats over the artwork: light lavender pills. Mobile sits on the paper band: solid purple. */
.header-actions .bag,.menu-toggle,body:has(.hero:not([hidden])) header .bag{background:#f3ecf7;border:1px solid #c9b3d9;color:#684484;box-shadow:0 6px 18px #49345f1f}
@media(hover:hover) and (pointer:fine){.header-actions .bag:hover,.menu-toggle:hover,body:has(.hero:not([hidden])) header .bag:hover{background:#684484;border-color:#684484;color:#fff}}
@media(max-width:750px){.header-actions .bag,.menu-toggle,body:has(.hero:not([hidden])) header .bag{background:#684484;border-color:#ffffff40;color:#fff;box-shadow:0 6px 18px #49345f2e}}
.menu-toggle{position:relative;width:46px;height:46px;border-radius:50%;padding:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:background-color .18s var(--snap,ease),transform .18s cubic-bezier(.22,1,.36,1)}
.menu-toggle:active{transform:scale(.94)}
.menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s}
header.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
header.menu-open .menu-toggle span:nth-child(2){opacity:0;transform:scaleX(.2)}
header.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

header nav#siteMenu{position:absolute;top:calc(100% + 8px);right:5%;z-index:2;display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(320px,90vw);max-width:none;padding:8px 22px 14px;border:1px solid #ffffff30;border-radius:16px;background:#49345ff2;color:#fff;box-shadow:0 18px 50px #25163833;visibility:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .22s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.22,1,.36,1),visibility 0s .3s}
header.menu-open nav#siteMenu{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
body:has(.hero:not([hidden])) header nav#siteMenu{right:5%;padding:8px 22px 14px}
#siteMenu>*{display:block;width:100%;margin:0;padding:15px 0;border:0;border-bottom:1px solid #ffffff1f;border-radius:0;background:none;color:#fff;font-size:15px;text-align:left;line-height:1.4;opacity:0;transform:translateY(-6px);transition:opacity .25s cubic-bezier(.2,0,0,1),transform .3s cubic-bezier(.22,1,.36,1)}
header.menu-open #siteMenu>*{opacity:1;transform:none}
#siteMenu>*:nth-child(1){transition-delay:.04s}#siteMenu>*:nth-child(2){transition-delay:.08s}#siteMenu>*:nth-child(3){transition-delay:.12s}#siteMenu>*:nth-child(4){transition-delay:.16s}#siteMenu>*:nth-child(5){transition-delay:.2s}
#siteMenu>*:last-child{border-bottom:0}
#siteMenu #discordLogin{margin-top:10px;padding:13px 16px;border-radius:10px;background:#fff;color:var(--ink);text-align:center;font-size:14px}
#siteMenu #discordLogin[disabled]{opacity:.6}
#siteMenu>a:focus-visible,#siteMenu>button:focus-visible{outline-color:#fff;outline-offset:-3px}
@media(hover:hover) and (pointer:fine){#siteMenu>a:hover,#siteMenu>button.clean:hover{opacity:.75}#siteMenu #discordLogin:hover{background:#eee5f3;opacity:1}}

/* Desktop: the cart summary floats at the bottom right at all times. */
@media(min-width:751px){.mobile-cart{display:inline-flex;align-items:center;position:fixed;right:24px;bottom:24px;left:auto;width:auto;min-height:0;padding:14px 22px;border:1px solid #ffffff55;border-radius:40px;background:#684484;color:#fff;box-shadow:0 10px 30px #49345f40;z-index:20;font-size:14px;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background-color .18s}.mobile-cart:hover{background:#76508d;transform:translateY(-2px);box-shadow:0 14px 34px #49345f4d}.mobile-cart:active{transform:scale(.97)}body:has(dialog[open]) .mobile-cart{display:none}}

header::after{content:'';position:fixed;inset:0;z-index:1;background:#28193855;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.2,0,0,1)}
header.menu-open::after{opacity:1;pointer-events:auto}

@media(max-width:750px){body:has(.hero:not([hidden])) header{align-items:center;min-height:0;padding:8px 5%}header nav#siteMenu{width:calc(100% - 10%);right:5%;left:5%}}
@media(max-width:540px){#siteMenu>a{display:block}.header-actions .bag{padding:9px 13px;font-size:12px}.menu-toggle{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){header nav#siteMenu{transition:none}header.menu-open nav#siteMenu{visibility:visible}#siteMenu>*{transition:none}}