* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: 'PnC Body', sans-serif; color: var(--ink, #111); background: var(--bg, #eee); -webkit-tap-highlight-color: transparent; }
canvas.gl { position: fixed; inset: 0; display: block; touch-action: none; }
button { font: inherit; color: inherit; }
.hud { position: fixed; z-index: 5; pointer-events: none; }
.hud * { pointer-events: auto; }
.hint { bottom: 16px; left: 16px; font-size: 13px; max-width: 46ch; background: rgba(255,255,255,.85); color: #111; padding: 6px 10px; border: 2px solid #111; }
.btn { font-family: 'PnC Pixel Arcade'; font-size: 14px; border: 2px solid #111; background: #fff; color: #111; padding: 10px 16px; cursor: pointer; box-shadow: 3px 3px 0 #111; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111; }

/* top bar */
.sbar { position: fixed; z-index: 15; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px; pointer-events: none; }
.sbar > * { pointer-events: auto; }
.sbar a, .sbar button { font-family: 'PnC Pixel Term'; font-size: 16px; line-height: 1; text-decoration: none; background: #fff; color: #111; border: 2px solid #111; padding: 8px 10px; cursor: pointer; white-space: nowrap; }
.sb-name { font-family: 'PnC Display'; font-size: 22px; text-transform: uppercase; color: #fff; background: #111; padding: 6px 10px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-bag { background: #111 !important; color: #fff !important; }
#cart-badge { display: inline-block; min-width: 1.2em; text-align: center; }

/* all items */
#slist { position: fixed; z-index: 25; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: #fff; color: #111; border-left: 2px solid #111; transform: translateX(105%); transition: transform .3s ease; display: flex; flex-direction: column; }
#slist.on { transform: none; }
.sl-head { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 2px solid #111; }
.sl-head b { font-family: 'PnC Display'; font-size: 22px; text-transform: uppercase; margin-right: auto; }
.sl-head a, .sl-head button { font-family: 'PnC Pixel Term'; font-size: 15px; color: #111; background: #fff; border: 2px solid #111; padding: 6px 8px; text-decoration: none; cursor: pointer; }
.sl-grid { overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.sl-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 2px solid #111; background: #f4f1ea; padding: 6px; cursor: pointer; }
.sl-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.sl-grid span { font-size: 13px; line-height: 1.2; }
.sl-grid em { font-style: normal; font-family: 'PnC Pixel Term'; font-size: 16px; }

/* product sheet */
#sheet { position: fixed; z-index: 20; left: 50%; bottom: 16px; transform: translate(-50%, 150%); transition: transform .35s cubic-bezier(.2,1.3,.4,1);
  display: flex; gap: 12px; align-items: center; background: #fff; color: #111; padding: 10px 14px 10px 10px; border: 2px solid #111; box-shadow: 6px 6px 0 #111; width: max-content; max-width: calc(100vw - 32px); }
#sheet.on { transform: translate(-50%, 0); }
#sheet .ph { padding: 0; border: 0; background: #f2f2f2; cursor: zoom-in; flex: none; }
#sheet img { width: 96px; height: 96px; object-fit: contain; display: block; }
#sheet .sh-body { min-width: 0; }
#sheet b { display: block; font-family: 'PnC Display'; font-size: 20px; text-transform: uppercase; line-height: 1; }
#sheet small { display: block; font-size: 12px; opacity: .7; margin-top: 2px; }
#sheet small.note { font-family: 'PnC Pixel Term'; font-size: 14px; opacity: 1; color: #c00a0a; margin: 0 0 2px; }
#sheet .sh-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
#sheet em { font-style: normal; font-family: 'PnC Pixel Term'; font-size: 22px; }
#sheet select { font: inherit; font-size: 14px; border: 2px solid #111; padding: 3px; background: #fff; }
#sheet .add { background: #111; color: #fff; border: 2px solid #111; padding: 7px 12px; font-family: 'PnC Pixel Term'; font-size: 16px; cursor: pointer; }
#sheet .add:disabled { opacity: .4; cursor: default; }
#sheet .spin, #sheet a { background: #fff; color: #111; border: 2px solid #111; padding: 7px 10px; font-family: 'PnC Pixel Term'; font-size: 16px; cursor: pointer; text-decoration: none; }
#sheet .x { position: absolute; top: -14px; right: -10px; border: 2px solid #111; background: #fff; cursor: pointer; font-family: 'PnC Pixel Term'; font-size: 13px; padding: 2px 6px; }

#stoast { position: fixed; z-index: 30; top: 64px; left: 50%; transform: translate(-50%, -300px); visibility: hidden; transition: transform .3s ease, visibility .3s; display: flex; gap: 10px; align-items: center; background: #111; color: #fff; padding: 8px 10px 8px 14px; font-size: 14px; max-width: calc(100vw - 32px); }
#stoast.on { transform: translate(-50%, 0); visibility: visible; }
#stoast a { color: #111; background: #fff; padding: 4px 8px; text-decoration: none; font-family: 'PnC Pixel Term'; font-size: 16px; }

/* inspect */
#inspect { position: fixed; inset: 0; z-index: 40; background: rgba(245,242,234,.97); display: none; flex-direction: column; }
#inspect.on { display: flex; }
.in-stage { flex: 1; position: relative; min-height: 0; }
.in-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.in-stage img { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; display: none; }
#inspect.photo canvas { display: none; } #inspect.photo img { display: block; } #inspect.photo .in-hint { display: none; }
#inspect.noscan .in-view { display: none; }
.in-bar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 2px solid #111; background: #fff; color: #111; }
.in-bar b { font-family: 'PnC Display'; font-size: 22px; text-transform: uppercase; margin-right: auto; }
.in-bar em { font-style: normal; font-family: 'PnC Pixel Term'; font-size: 22px; }
.in-bar button { font-family: 'PnC Pixel Term'; font-size: 16px; border: 2px solid #111; background: #fff; padding: 6px 10px; cursor: pointer; }
.in-hint { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); font-family: 'PnC Pixel Term'; font-size: 15px; color: #111; }

/* phone stick */
.stick { position: fixed; z-index: 12; left: 20px; bottom: 24px; width: 110px; height: 110px; border-radius: 50%; background: rgba(0,0,0,.25); border: 3px solid #fff; touch-action: none; display: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; }
@media (pointer: coarse) { .stick { display: block; } }

@media (max-width: 600px) {
  .sbar { padding: 8px; gap: 6px; }
  .sbar a, .sbar button { font-size: 14px; padding: 7px 7px; }
  .sb-name { font-size: 16px; padding: 6px 7px; }
  #sheet { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; transform: translateY(150%); }
  #sheet.on { transform: none; }
  #sheet img { width: 76px; height: 76px; }
  #sheet b { font-size: 17px; }
  .hint { left: 8px; right: 8px; bottom: 8px; font-size: 12px; }
  .in-bar b { font-size: 17px; }
}