/* Caddelle Virtual Gallery */
.vg-stage { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100dvh - var(--nav-h)); min-height: 520px; background: #151514; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.vg-stage:fullscreen { height: 100vh; }
#vg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
#vg-canvas.dragging { cursor: grabbing; }
#vg-canvas.hot { cursor: pointer; }

.vg-hover { position: absolute; transform: translateX(-50%); background: rgba(17,17,16,.82); color: #fff; font-size: .72rem; letter-spacing: .08em; padding: .45rem .8rem; pointer-events: none; white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; }

/* Intro */
.vg-intro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(250,250,248,.94); backdrop-filter: blur(6px); padding: 1.5rem; z-index: 5; transition: opacity .5s; }
.vg-intro.gone { opacity: 0; pointer-events: none; }
.vg-intro-card { max-width: 520px; text-align: center; }
.vg-intro-card p { font-size: .92rem; margin: 1rem auto 0; line-height: 1.8; }
.vg-help { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; font-size: .78rem; color: var(--ink-soft); line-height: 2; }
.vg-help b { color: var(--ink); font-weight: 500; letter-spacing: .06em; }
.vg-help-touch { display: none; }
.vg-intro .btn[disabled] { opacity: .6; cursor: wait; }
.is-touch .vg-help-desk { display: none; }
.is-touch .vg-help-touch { display: list-item; }

/* HUD */
.vg-hud { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 3; }
.vg-chip { background: rgba(250,250,248,.92); color: var(--ink); font-family: var(--display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; padding: .7rem 1rem; border: 1px solid var(--line); }
.vg-chip:hover { background: #fff; color: var(--teal-deep); }
.vg-stick { position: absolute; left: 22px; bottom: 28px; width: 112px; height: 112px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); z-index: 3; pointer-events: none; }
.vg-stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.55); }

/* Works list */
.vg-list { position: absolute; top: 60px; right: 14px; width: min(320px, calc(100% - 28px)); max-height: calc(100% - 90px); overflow: auto; background: rgba(250,250,248,.97); border: 1px solid var(--line); z-index: 4; }
.vg-list-head { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; font-family: var(--display); font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: inherit; }
.vg-list-head button, .vg-panel-close { font-size: 1.5rem; line-height: 1; color: var(--ink); padding: 0 .3rem; }
.vg-list ol { list-style: none; margin: 0; padding: 0; counter-reset: w; }
.vg-list li button { display: flex; gap: .8rem; align-items: center; width: 100%; text-align: left; padding: .55rem 1rem; font-size: .8rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.vg-list li button:hover { background: var(--teal-bg); }
.vg-list li img { width: 40px; height: 40px; object-fit: cover; flex: none; background: var(--paper-3); }

/* Artwork panel */
.vg-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); background: var(--paper); border-left: 1px solid var(--line); z-index: 6; overflow: auto; animation: vgIn .3s ease; }
@keyframes vgIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.vg-panel-close { position: absolute; top: 10px; right: 12px; z-index: 2; background: rgba(250,250,248,.9); width: 36px; height: 36px; border-radius: 50%; }
.vg-p-img { background: var(--paper-3); padding: 1.6rem; }
.vg-p-img img { margin: 0 auto; max-height: 42vh; width: auto; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.vg-p-body { padding: 1.6rem 1.8rem 2rem; }
.vg-p-body h2 { font-family: var(--serif); font-weight: 300; font-size: 1.9rem; line-height: 1.1; color: var(--ink); margin-bottom: .8rem; }
.vg-p-body p { font-size: .88rem; line-height: 1.8; margin-bottom: 1rem; }
.vg-p-price { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin-bottom: 1.3rem; }
.vg-p-body .eyebrow { margin-bottom: .7rem; }
.vg-p-body .eyebrow:empty { display: none; }

.vg-noscript { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; z-index: 9; background: #151514; }
.vg-about { padding-top: 3rem; padding-bottom: 3rem; }

@media (max-width: 720px) {
  .vg-hud { top: 10px; right: 10px; gap: 6px; }
  .vg-chip { padding: .6rem .7rem; }
  #vg-full-btn { display: none; }
  .vg-panel { top: auto; height: 62%; width: 100%; border-left: 0; border-top: 1px solid var(--line); animation-name: vgUp; }
  @keyframes vgUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .vg-p-img { padding: 1rem; } .vg-p-img img { max-height: 22vh; }
  .vg-p-body { padding: 1.1rem 1.3rem 1.6rem; } .vg-p-body h2 { font-size: 1.5rem; }
}