/* The Mantis online menu: extends /styles.css */
body.shop{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
.th{display:block;font-size:.85em;opacity:.8;font-weight:500}
.small{font-size:.86rem;color:var(--mute)}
.narrow{max-width:640px}
button.lang{background:transparent;color:var(--green);cursor:pointer;font:inherit;font-weight:700}
/* age gate */
.agegate{position:fixed;inset:0;z-index:100;background:#070b09f2;display:grid;place-items:center;padding:18px;overflow:auto}
.age-ok .agegate{display:none}
html:not(.age-ok) body{overflow:hidden}
.ag-box{max-width:440px;width:100%;background:var(--card);border:1px solid #ffffff1a;border-radius:18px;padding:24px 20px;text-align:center}
.ag-box img{margin:0 auto 10px;border-radius:50%}
.ag-box h1{font-size:1.7rem;margin:.1em 0}
.ag-box .th{margin:0 0 .6em}
.ag-box p{margin:.4em 0}
.btn{cursor:pointer;font:inherit;font-weight:700}
.btn.big{width:100%;justify-content:center;flex-direction:column;padding:14px 18px;font-size:1.02rem;margin-top:10px}
.btn.big .th{font-size:.82em}
/* hero / chips */
.shop-hero{padding:22px 0 6px}
.shop-hero h1{margin:.2em 0 .2em}
.rules{margin:10px 0 14px}.rules p{margin:.2em 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;position:sticky;top:58px}
.chips a{flex:none;background:var(--card);border:1px solid #ffffff1a;border-radius:99px;padding:6px 12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.9rem}
/* menu */
.msec{padding:26px 0;scroll-margin-top:64px}.msec:nth-child(even){background:var(--bg2)}
.msec h2{margin:0 0 .1em}.msec .snote{color:var(--mute);margin:0 0 14px;font-size:.92rem}
.groups{display:grid;gap:14px}
@media(min-width:760px){.groups{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.groups.g4{grid-template-columns:repeat(4,1fr)}}
.grp{background:var(--card);border-radius:var(--r);border:1px solid #ffffff10;border-top:3px solid var(--c,var(--green));padding:14px}
.grp h3{display:flex;justify-content:space-between;align-items:baseline;margin:0;color:var(--c)}
.grp h3 .p{font-size:1.5rem}.grp h3 .p small{font-size:.6em;color:var(--mute)}
.grp .gdesc{color:var(--mute);font-size:.86rem;margin:.2em 0 .6em}
.item{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #ffffff10}
.item:first-of-type{border-top:0}
.item .thumb{width:56px;height:56px;object-fit:cover;border-radius:10px;flex:none}
.item .info{flex:1;min-width:0}
.item .nm{font-weight:700;line-height:1.25}
.item .meta{font-size:.8rem;color:var(--mute)}
.item .meta .t{color:var(--c,var(--green));font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.tag{display:inline-block;font-size:.68rem;font-weight:800;text-transform:uppercase;background:var(--gold);color:#111;border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
.item .pr{font-weight:800;white-space:nowrap}
.ask{color:var(--gold);font-weight:700;font-size:.85rem;white-space:nowrap}
.simple{background:var(--card);border-radius:var(--r);padding:4px 14px;border:1px solid #ffffff10}
.notes{margin:0;padding-left:18px;color:var(--mute)}
/* DM to order: hero box */
.chatorder{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 14px}
.chatorder h2{margin:0 0 .25em;font-size:1.3rem;color:var(--line)}
.chatorder p{margin:0 0 10px}
.chatorder .btn.big1{font-size:1.05rem;padding:12px 22px;flex:1 1 auto;justify-content:center}
.chatorder .btn.wa{flex:0 0 auto}
/* per-item DM buttons */
.acts{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.acts a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;border-radius:9px;min-height:34px}
.acts .o-line{background:var(--line);color:#fff;padding:6px 12px;font-size:.85rem}
.acts .o-wa{background:var(--wa);color:#073b1c;width:34px}
.pick{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--mute);cursor:pointer;padding:4px 2px}
.pick input{width:17px;height:17px;accent-color:var(--line);margin:0}
.tiers{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.8rem;color:var(--mute);margin:0 0 6px}
.tiers span{white-space:nowrap}
/* sticky DM bar (always visible; body has bottom padding so nothing is covered) */
.chatbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(10px);border-top:1px solid #ffffff22}
.chatbar .cb-label{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.chatbar .cb-label strong{font-size:1rem}.chatbar .cb-label small{color:var(--mute);font-size:.78rem}
.chatbar .cb-btns{display:flex;gap:8px;flex:none}
.chatbar .btn{padding:10px 16px}
.chatbar .btn.line{padding:10px 22px}
.chatbar.has-list{border-top:2px solid var(--line)}
html:not(.age-ok) .chatbar{display:none}
@media(min-width:860px){.chatbar{left:auto;right:20px;bottom:20px;border-radius:14px;border:1px solid #ffffff22;min-width:380px}}
@media(max-width:360px){.chatbar .btn.wa{padding:10px 10px;font-size:.85rem}}
[hidden]{display:none!important}
.grp h3 .p{white-space:nowrap;margin-left:8px}
/* floating chat launcher on /menu/: sits above the sticky DM bar, hidden behind the age gate */
body.shop .mchat{--mc-b:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:860px){body.shop .mchat{--mc-b:104px}}
html:not(.age-ok) .mchat{display:none}