/* BH-CH-404 viewer layout (owner 2026-10-19: "user friendly ... check steel"). Same idea as the Bongshai Steel
   configurator: the model is never covered - one toolbar holds every control, the details live in a side panel
   beside the model (desktop full screen) or a drawer (smaller screens); embedded in the model page there is no
   panel at all, only a name/price chip and the toolbar. Loaded after bh3d.css. */
:root{--side:340px}
#scene{inset:0 auto 0 0;width:100%}
.chip{position:fixed;z-index:3;top:calc(10px + env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px));
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;max-width:calc(100% - 24px);
  background:rgba(255,253,246,.94);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:4px;padding:6px 12px;
  font:600 12.5px var(--body);color:#3a3f45;box-shadow:0 2px 10px rgba(28,31,35,.10)}
.chip b{font:800 14px var(--display);color:var(--ink)}
.chip .price{color:var(--priceInk);font-weight:700}

/* toolbar: one strip at the bottom of the model, grouped, as Steel */
.bar{position:fixed;z-index:3;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;pointer-events:none}
.bar .grp{display:flex;gap:3px;pointer-events:auto}
.bar button,.bar a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:38px;padding:0 11px;
  border:1px solid var(--gold-dk);border-radius:0;background:rgba(255,253,246,.96);color:#5C4108;
  font:800 12.5px var(--display);letter-spacing:.03em;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:0 1px 4px rgba(28,31,35,.10)}
.bar button:hover,.bar a:hover{background:#FFF4D1}
.bar button[aria-pressed="true"]{background:#5C4108;color:#fff;border-color:#5C4108}
.bar button[data-nav="in"],.bar button[data-nav="out"]{font-size:18px;min-width:38px;padding:0}
.bar .primary{background:#C9962B;color:#1C1F23;border-color:#A87A12}
.bar .primary:hover{background:#E0AE3E}
.bar [data-nav="info"],.bar .full,.bar .back{display:none}
.bar button:disabled{opacity:.55;cursor:progress}

/* details panel */
.info{position:fixed;z-index:4;top:0;right:0;bottom:0;width:var(--side);overflow:auto;box-sizing:border-box;
  background:var(--paper);border-left:1px solid var(--line);padding:20px 20px 28px;display:flex;flex-direction:column;gap:12px;
  box-shadow:-6px 0 24px rgba(28,31,35,.08)}
.info small{font:700 10.5px var(--mono);letter-spacing:.12em;color:var(--gold)}
.info h1{margin:0;font:800 22px var(--display);line-height:1.15}
.info .facts{display:flex;flex-wrap:wrap;gap:6px}
.info .facts span{font:600 12.5px var(--body);border:1px solid var(--line);border-radius:4px;padding:3px 9px;background:#fff}
.info .price{font:800 20px var(--display);color:var(--priceInk)}
.info .price em{font:600 12px var(--body);color:var(--muted);font-style:normal;margin-left:6px}
.info .cta{display:flex;align-items:center;justify-content:center;height:44px;border-radius:6px;font:800 14px var(--display);letter-spacing:.03em;text-decoration:none;
  background:#C9962B;color:#1C1F23;border:1px solid #A87A12}
.info .cta.wa{background:#25D366;border-color:#1da851;color:#fff}
.info .link{font:700 13.5px var(--body);color:#1d4ed8}
.info h2{margin:6px 0 0;font:700 11px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.info ul{margin:0;padding-left:18px;font-size:13px;line-height:1.55;color:#3a3f45}
.info kbd{font:700 11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:0 4px;background:#fff}
.info .x{position:absolute;top:10px;right:10px;width:36px;height:36px;min-height:0;padding:0;font-size:22px;line-height:1;border-radius:50%;display:none}

/* desktop full screen: panel docked right, model and toolbar to its left, chip not needed */
@media (min-width:1000px){
  html:not(.embed) #scene{width:calc(100% - var(--side))}
  html:not(.embed) .bar{right:calc(var(--side) + 12px)}
  html:not(.embed) .chip{display:none}
  html:not(.embed) .bar .back{display:inline-flex}
}
/* smaller full screen: the panel is a drawer opened from the toolbar */
@media (max-width:999px){
  html:not(.embed) .bar [data-nav="info"]{display:inline-flex}
  .info{transform:translateX(105%);transition:transform .25s;width:min(var(--side),92vw)}
  .info.open{transform:none}
  .info .x{display:inline-flex}
}
/* embedded in the model page: no panel, a full-screen link instead */
.embed .info{display:none}
.embed .bar .full{display:inline-flex}
.embed .chip{font-size:12px;padding:5px 10px}
/* phones: one row that scrolls sideways, never wraps over the model */
@media (max-width:640px){
  .bar{left:0;right:0;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:0 10px 2px;scrollbar-width:none;pointer-events:auto}
  .bar::-webkit-scrollbar{display:none}
  .bar button,.bar a{height:40px}
  .chip span:not(.price){display:none}
}
@media (prefers-reduced-motion: reduce){.info{transition:none}}