/* App shell: the top bar, the navigation (a compact workspace bar on desktop, a tab bar on phone/tablet), the page
   layout and page headers, and product thumbnails. Tokens: 00-base.css. Components: 15-ui.css. */

/* ---------- top bar ---------- */
.appbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.appbar-in{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.brand svg{width:26px;height:26px;flex:none}
.wordmark{font-stretch:75%;font-weight:700;font-size:21px;letter-spacing:.07em;text-transform:uppercase;line-height:1}
.shopname{min-width:0;padding-left:10px;border-left:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}
.shopname:empty{display:none}
.global-actions{display:flex;align-items:center;gap:4px;flex:none}
.global-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:650;color:var(--ink-2);white-space:nowrap}
.global-btn svg{width:18px;height:18px;flex:none}.global-btn:hover,.global-btn:focus-visible{background:var(--wash);color:var(--ink)}
.global-btn.quick{border:1px solid var(--line);background:var(--bg)}.global-btn.quick:hover{border-color:var(--line-2);background:var(--wash)}
.sync{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2);padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg);white-space:nowrap;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.sync:hover{border-color:var(--line-2);background:var(--wash)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.sync.ok i{background:var(--good)} .sync.wait i{background:var(--warn);animation:pulse 1.2s infinite} .sync.off i{background:var(--crit)}
@keyframes pulse{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
@media (max-width:599px){
  .appbar-in{min-height:52px;padding:6px 12px;gap:8px}
  .wordmark{font-size:18px;letter-spacing:.05em}.brand svg{width:22px;height:22px}
  .brand .wordmark:has(+ .shopname:not(:empty)){display:none}
  .shopname{border-left:0;padding-left:0;font-size:15px;font-weight:700;color:var(--ink);max-width:16ch}
  .global-actions{gap:1px}.global-btn{width:36px;min-height:36px;padding:7px}.global-btn span,.global-btn.agent{display:none}
  .sync{width:36px;min-height:36px;justify-content:center;padding:5px}.sync span{display:none}
}
@media (min-width:600px) and (max-width:999px){.global-btn span{display:none}.global-btn{width:38px;padding:7px}.global-btn.agent{display:none}}

/* ---------- navigation (app/navigation.js) ----------
   The workspace bar stays deliberately small. Contextual page tabs hold task-level destinations; More holds the rest. */
.nav{z-index:35;background:var(--bg)}
.navi{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-body);color:var(--ink-2);text-align:left;transition:background var(--t-fast),color var(--t-fast)}
.navi svg{width:19px;height:19px;flex:none;color:var(--ink-3);transition:color var(--t-fast)}
.navi > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navi:hover{background:var(--wash);color:var(--ink)}
.navi:hover svg{color:var(--ink-2)}
.navi[aria-current="page"],.navi[aria-selected="true"]{background:var(--wash-2);color:var(--ink)}
.navi[aria-current="page"] svg,.navi[aria-selected="true"] svg{color:var(--ink)}
.navmore{display:none}
@media (min-width:1000px){
  .nav{position:sticky;top:calc(57px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:4px;min-height:50px;padding:5px 24px;border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(17,20,32,.025)}
  .nav .navi{width:auto;min-height:38px;padding:8px 13px;gap:8px;font-size:14px}
  .nav .navi svg{width:18px;height:18px}
  .nav .navmore{display:flex;align-items:center;gap:8px;min-height:38px;padding:8px 13px;border-radius:var(--r-sm);font-weight:600;font-size:14px;color:var(--ink-2);margin-left:auto}
  .nav .navmore svg{width:18px;height:18px}
  .nav .navmore:hover,.nav .navmore[aria-current="page"]{background:var(--wash);color:var(--ink)}
}
@media (max-width:999px){
  .nav{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:stretch;justify-content:space-around;gap:2px;height:calc(var(--tabbar) + env(safe-area-inset-bottom,0px));padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(17,20,32,.05)}
  .nav .navi:not(.pb){display:none}
  .nav .navi,.nav .navmore{flex:1 1 0;max-width:120px;min-width:0;flex-direction:column;justify-content:center;gap:3px;min-height:0;padding:4px 2px;font-size:11.5px;font-weight:600;text-align:center;color:var(--ink-3);border-radius:var(--r-md)}
  .nav .navmore{display:flex;align-items:center;order:9}
  .nav .navi.pb{order:var(--pbo,0)}
  .nav .navi svg,.nav .navmore svg{width:22px;height:22px;color:inherit}
  .nav .navi:hover,.nav .navmore:hover{background:none;color:var(--ink)}
  .nav .navi[aria-current="page"]{background:none;color:var(--ink-3)}
  .nav .navi[aria-current="page"] svg{color:inherit}
  .nav .navi.areaon,.nav .navmore[aria-current="page"]{background:none;color:var(--ink)}
  .nav .navi.areaon svg,.nav .navmore[aria-current="page"] svg{background:var(--wash-2);border-radius:var(--r-sm);padding:2px 10px;width:22px;box-sizing:content-box;margin:-2px 0}
}
/* "More": every other destination, in groups */
.navsheet{max-width:520px}
.navgrp + .navgrp{margin-top:14px}
.navgrp > h4{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.navgrp .navlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.navitem{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:10px 14px;font-weight:600;font-size:15px;color:var(--ink);text-align:left}
.navitem + .navitem{border-top:1px solid var(--line)}
.navitem svg{width:20px;height:20px;flex:none;color:var(--ink-2)}
.navitem::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:rotate(45deg);flex:none}
.navitem:hover,.navitem:focus-visible{background:var(--wash)}
.navitem[aria-current="page"]{background:var(--accent-soft)}
.navitem small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3)}

/* Global search and quick actions */
.command-sheet{max-width:680px}.command-search{display:flex;align-items:center;gap:9px;margin-bottom:14px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--bg)}
.command-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--wash-2)}.command-search>svg{flex:none;color:var(--ink-3)}.command-search input{width:100%;min-height:48px;padding:0;border:0;outline:0;background:transparent;font-size:16px}
.command-group+.command-group{margin-top:15px}.command-group h4{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.command-group>div,.quick-list{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.command-row,.quick-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:9px 12px;text-align:left}.command-row+.command-row,.quick-row+.quick-row{border-top:1px solid var(--line)}
.command-row:hover,.command-row:focus-visible,.quick-row:hover,.quick-row:focus-visible{background:var(--wash)}.command-row>svg,.quick-row>svg{width:20px;height:20px;flex:none;color:var(--ink-2)}
.command-row span,.quick-row span{display:flex;min-width:0;flex-direction:column;gap:2px}.command-row b,.quick-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.command-row small,.quick-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:12px}
/* New: Suggested (this page's actions, what is started often) above everything else; a keyboard's number keys start them */
.quick-h{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.quick-list+.quick-h{margin-top:15px}
.quick-why{font-style:normal;font-weight:600;color:var(--ink-2)}.quick-row span{flex:1}
.quick-key{display:none;flex:none;min-width:22px;padding:1px 6px;border:1px solid var(--line-2);border-radius:6px;font:600 11.5px/18px var(--font-mono,ui-monospace,monospace);text-align:center;color:var(--ink-3);background:var(--bg)}
@media (hover:hover) and (pointer:fine){.quick-key{display:inline-block}}
.command-empty{display:grid;justify-items:center;gap:8px;padding:36px 16px;text-align:center;color:var(--ink-2)}.command-empty>svg{width:28px;height:28px;color:var(--ink-3)}.command-empty p{margin:0;color:var(--ink-3);font-size:13px}.quick-sheet{max-width:480px}

/* ---------- page layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding-inline:16px;padding-block:18px calc(var(--tabbar) + 150px + env(safe-area-inset-bottom,0px))}
@media (min-width:1000px){
  .appbar-in{padding:8px 24px}
  .wrap{max-width:1440px;margin:0 auto;padding:26px 32px 64px}
}
/* a page's header: title, one line of what it is for, its actions */
.viewhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.vt{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.15;text-wrap:balance}
.viewhead p{margin:5px 0 0;color:var(--ink-2);font-size:var(--fs-sm);max-width:68ch;line-height:1.5}
.viewhead .vh-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (min-width:1000px){.vt{font-size:26px}}
@media (max-width:599px){.viewhead{margin-bottom:var(--sp-4)}.vt{font-size:20px}}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row.c{justify-content:center;flex-wrap:wrap}

/* ---------- product thumbs ---------- */
.ph{position:relative;display:block;flex:none;background:var(--wash)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ph .ini{position:absolute;inset:0;display:grid;place-items:center;font-stretch:75%;font-weight:700;letter-spacing:.04em;line-height:1}
.ph.xs{width:30px;height:30px;border-radius:7px}.ph.xs .ini{font-size:12px}
.ph.sm{width:42px;height:42px;border-radius:9px}.ph.sm .ini{font-size:15px}
.ph.md{width:60px;height:60px;border-radius:12px}.ph.md .ini{font-size:21px}
.ph.lg{width:96px;height:96px;border-radius:14px}.ph.lg .ini{font-size:30px}