:root{
  --black:#121212; --char:#1d1d1d; --steel:#5f6368; --steel2:#8a8f94; --silver:#c9cdd1;
  --off:#eeebe5; --wood:#6b5440; --wood2:#3b2f25;
  --top:56px; --foot:44px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--black);color:var(--off);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.top{height:var(--top);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;background:var(--black);border-bottom:1px solid #2a2a2a;z-index:5}
.brand{display:flex;align-items:center;gap:10px;color:var(--off);text-decoration:none}
.brand img{width:60px;height:40px;object-fit:contain;display:block}
.brand b{display:block;font-size:16px;letter-spacing:.3px}
.brand small{display:block;font-size:12px;color:var(--steel2)}
.tabs{display:flex;background:var(--char);border:1px solid #333;border-radius:8px;overflow:hidden}
.tabs button{appearance:none;border:0;background:transparent;color:var(--silver);font:600 14px/1 inherit;
  padding:9px 14px;cursor:pointer;font-family:inherit}
.tabs button.on{background:var(--silver);color:var(--black)}
main{flex:1 1 auto;position:relative;min-height:0}
.store,.list{position:absolute;inset:0}
.pan{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y}
.pan::-webkit-scrollbar{display:none}
.pan.drag{cursor:grabbing}
.stage{position:relative;user-select:none;-webkit-user-select:none}
.stage img{display:block;width:100%;height:100%;pointer-events:none;background:#2b231c}
.spot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;padding:0;
  background:transparent;cursor:pointer}
.spot i{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:#f4f4f2;box-shadow:0 0 0 3px rgba(18,18,18,.55),0 0 14px 4px rgba(255,255,255,.55)}
.spot i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}}
.spot span{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);white-space:nowrap;
  background:rgba(18,18,18,.82);color:var(--off);font:600 12px/1 inherit;font-family:inherit;padding:6px 8px;border-radius:6px;
  border:1px solid rgba(201,205,209,.35)}
.spot span em{font-style:normal;color:var(--silver);font-weight:500;margin-left:6px}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(18,18,18,.85);
  color:var(--off);font-size:13px;padding:8px 12px;border-radius:20px;pointer-events:none;transition:opacity .6s;white-space:nowrap}
.hint.gone{opacity:0}
.list{overflow:auto;padding:14px 12px 20px;background:#171717}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;max-width:1100px;margin:0 auto}
.item{background:var(--char);border:1px solid #2e2e2e;border-radius:10px;overflow:hidden;color:var(--off);
  text-align:left;padding:0;cursor:pointer;font-family:inherit}
.item .ph{aspect-ratio:4/5;background:#26272a center/cover no-repeat}
.item .tx{padding:10px}
.item b{display:block;font-size:15px}
.item small{display:block;color:var(--silver);font-size:13px;margin-top:4px}
.item .tag{display:inline-block;margin-top:6px;font-size:11px;color:var(--steel2)}
.foot{height:var(--foot);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 12px calc(env(safe-area-inset-bottom)) 12px;background:var(--black);border-top:1px solid #2a2a2a;font-size:13px;color:var(--silver)}
.foot a{color:var(--off);font-weight:600;text-decoration:none;white-space:nowrap}
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.card{position:relative;width:100%;max-width:520px;max-height:92dvh;overflow:auto;background:#1b1b1b;
  border-radius:14px 14px 0 0;border:1px solid #333;animation:up .22s ease-out}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
@media (min-width:760px){.sheet{align-items:center}.card{border-radius:14px}}
.x{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(18,18,18,.75);color:#fff;font-size:24px;line-height:36px;cursor:pointer}
.photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:#232427}
.photos::-webkit-scrollbar{display:none}
.photos figure{flex:0 0 100%;width:100%;margin:0;position:relative;scroll-snap-align:center}
.photos img,.photos video{display:block;width:100%;height:min(52dvh,420px);object-fit:contain;background:#232427}
.photos figcaption{position:absolute;left:10px;right:10px;bottom:10px;background:rgba(18,18,18,.8);color:var(--off);
  font-size:13px;padding:7px 10px;border-radius:6px;text-align:center}
.pdots{display:flex;justify-content:center;gap:6px;padding:8px 0 0}
.pdots b{width:7px;height:7px;border-radius:50%;background:#555}
.pdots b.on{background:var(--silver)}
.body{padding:8px 16px 18px}
.body h2{margin:4px 0 2px;font-size:21px}
.price{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--silver)}
.body p{line-height:1.45;margin:0 0 10px}
.note{font-size:13px;color:var(--steel2)}
.note:empty,.price:empty{display:none}
.btns{display:grid;gap:10px;margin-top:12px}
.btn{display:block;text-align:center;padding:14px;border-radius:10px;font-weight:700;text-decoration:none;font-size:16px}
.call{background:var(--off);color:var(--black)}
.fb{background:transparent;color:var(--off);border:1px solid var(--steel2)}
@media (max-width:420px){.foot{font-size:12px}}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:56px;border:0;border-radius:8px;
  background:rgba(18,18,18,.55);color:var(--off);font-size:32px;line-height:56px;padding:0;cursor:pointer;z-index:3}
.arrow.l{left:6px}.arrow.r{right:6px}.arrow[hidden]{display:none}