/* Three selectable culinary scenes. Backgrounds are real assets; dishes stay real interactive GLBs. */
body.guest { --scene-bg: #07070a; --scene-fg: #f5f5f6; --scene-muted: #b4b0af; --scene-control: rgb(12 12 15 / .8); --scene-line: rgb(255 255 255 / .22); }
body.guest[data-menu-design="restaurant"] { --scene-bg: #100b08; --panel: #1b1410; --panel-2: #251c16; --scene-control: rgb(30 20 13 / .82); }
body.guest[data-menu-design="light"] { --scene-bg: #f5f2ed; --scene-fg: #151519; --scene-muted: #57535b; --scene-control: rgb(255 255 255 / .88); --scene-line: rgb(30 30 35 / .22); --bg: #f5f2ed; }
.showroom { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--scene-bg); color: var(--scene-fg); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.showroom[open] { display: flex; flex-direction: column; animation: sr-in .3s var(--ease); }
.showroom::backdrop { background: var(--scene-bg); }
@keyframes sr-in { from { opacity: 0; } }
.sr-top { flex: none; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top) + 12px) 16px 10px; }
.sr-venue { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sr-venue b { font-size: 17px; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-count { font: 500 11px var(--mono); letter-spacing: .1em; color: var(--scene-muted); }
.sr-kind { font: 600 12px var(--mono); color: var(--scene-muted); }
.sr-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--scene-line); background: var(--scene-control); color: var(--scene-fg); backdrop-filter: blur(8px); cursor: pointer; transition: border-color .2s, transform .2s; }
.sr-btn:hover { border-color: var(--accent); }
.sr-btn:active { transform: scale(.94); }
.sr-btn:disabled { opacity: .4; cursor: wait; }
.sr-categories { display: flex; flex: none; gap: 8px; padding: 0 16px 10px; overflow-x: auto; scrollbar-width: none; }
.sr-categories button { white-space: nowrap; min-height: 40px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--scene-muted); font: 500 14px var(--font); padding: 6px 10px; cursor: pointer; }
.sr-categories [aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
body[data-menu-design="studio"] .sr-categories { display: none; }
.sr-visual { position: relative; flex: 1 0 290px; min-height: 290px; isolation: isolate; overflow: hidden; }
.sr-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; z-index: -1; }
.sr-stage { position: absolute; inset: 8px 0 76px; }
.sr-stage model-viewer { width: 100%; height: 100%; background: transparent; --poster-color: transparent; opacity: 1; transition: opacity .24s var(--ease), transform .4s var(--ease); }
.sr-stage.swapping model-viewer, .sr-stage.swapping .sr-photo, .sr-stage.swapping .sr-text { opacity: 0; }
.sr-stage.to-next model-viewer, .sr-stage.to-next .sr-photo { transform: translateX(-30px) scale(.95); }
.sr-stage.to-prev model-viewer, .sr-stage.to-prev .sr-photo { transform: translateX(30px) scale(.95); }
.sr-poster, .sr-photo { position: absolute; inset: 6% 10%; width: 80%; height: 88%; object-fit: contain; transition: opacity .24s, transform .4s; }
.sr-poster { opacity: .7; }
.sr-photo { border-radius: 18px; }
.sr-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 64px; text-align: center; }
.sr-text span { padding: 24px; border-radius: 20px; background: var(--scene-control); font-weight: 600; font-size: clamp(28px, 6vw, 44px); letter-spacing: -.04em; }
.sr-loader { display: none; position: absolute; bottom: 20%; left: 50%; width: 100px; transform: translateX(-50%); }
.sr-stage.loading .sr-loader { display: block; }
.sr-nav { position: absolute; top: calc(50% - 52px); z-index: 2; }
.sr-nav.prev { left: 12px; } .sr-nav.next { right: 12px; }
.sr-motion { position: absolute; bottom: 8px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.sr-drag { font-size: 12px; color: var(--scene-fg); background: var(--scene-control); border-radius: 20px; padding: 9px 12px; }
.sr-zoom { display: none; }
.sr-error { position: absolute; left: 16px; right: 16px; bottom: 8px; padding: 10px; background: var(--scene-control); font-size: 13px; border-radius: 12px; }
.sr-decor { flex: none; border: 0; padding: 10px 16px 6px; margin: 0 auto; width: min(100%, 660px); display: flex; align-items: center; gap: 12px; }
.sr-decor legend { float: left; padding: 0; font-weight: 600; font-size: 13px; }
#sr-scenes { flex: 1; display: flex; gap: 10px; }
.sr-scene-choice { flex: 1; min-width: 0; cursor: pointer; }
.sr-scene-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sr-scene-choice > span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sr-scene-choice img { width: 100%; height: 32px; object-fit: cover; border: 2px solid var(--scene-line); border-radius: 8px; }
.sr-scene-choice b { font-size: 11px; font-weight: 500; color: var(--scene-muted); }
.sr-scene-choice input:checked + span img { border-color: var(--accent); }
.sr-scene-choice input:checked + span b { color: var(--accent); }
.sr-scene-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.sr-panel { flex: none; padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); }
.sr-info { max-width: 628px; margin: auto; }
.sr-title { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sr-title h2 { margin: 0; font-size: clamp(21px, 5.8vw, 30px); line-height: 1.12; letter-spacing: -.045em; color: var(--scene-fg); }
.sr-price { flex: none; font-size: 23px; letter-spacing: -.04em; color: var(--accent); }
.sr-desc { margin: 8px 0 0; color: var(--scene-muted); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-desc:empty, .sr-tags:empty { display: none; }
.sr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sr-actions:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
.sr-actions .btn { flex: 1; min-width: 150px; }
.sr-actions .btn-ar { min-height: 48px; }
.sr-details { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: 100%; margin-top: 8px; border: 1px solid var(--scene-line); border-radius: 12px; background: transparent; color: var(--scene-fg); font: 500 14px var(--font); cursor: pointer; }
.sr-details .i:last-child { margin-left: auto; }
.sr-details .i:first-child { margin-right: auto; }
.sr-reason { margin: 8px 0 0; color: var(--warn); font-size: 13px; }
.sr-ar-qr { display: flex; gap: 14px; align-items: center; padding: 12px; margin-top: 12px; font-size: 13px; border: 1px solid var(--scene-line); border-radius: 12px; }
.sr-ar-qr .qr-box { flex: none; width: 100px; background: white; padding: 6px; border-radius: 8px; }
.sr-thumbs { display: flex; gap: 10px; max-width: 628px; margin: 14px auto 0; overflow-x: auto; padding: 3px; scrollbar-width: none; scroll-snap-type: x proximity; }
.sr-thumb { flex: none; width: 84px; height: 67px; position: relative; padding: 0; border: 1px solid var(--scene-line); border-radius: 12px; color: var(--scene-fg); background: var(--scene-bg); overflow: hidden; scroll-snap-align: center; cursor: pointer; }
.sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sr-thumb small { position: absolute; right: 2px; bottom: 2px; padding: 2px 5px; font-size: 9px; color: var(--scene-fg); background: var(--scene-control); border-radius: 4px; }
.sr-thumb[aria-current="true"] { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: 1px; }
.sr-thumb.text-thumb { padding: 6px 7px 15px; text-align: left; }
.sr-thumb.text-thumb span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 12px/1.25 var(--font); }
.sr-hint { display: block; text-align: center; margin-top: 8px; font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--scene-muted); }
body[data-menu-design="restaurant"] .sr-title { display: block; }
body[data-menu-design="restaurant"] .sr-price { display: block; margin-top: 6px; }
body[data-menu-design="light"] .sr-details { border-color: transparent; }
body[data-menu-design="light"] .sr-price, body[data-menu-design="light"] .sr-categories [aria-current="true"], body[data-menu-design="light"] .sr-scene-choice input:checked + span b { color: color-mix(in srgb, var(--accent) 60%, #000); }
.showroom-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 18px; min-height: 48px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font: 600 14px var(--font); cursor: pointer; }
.showroom-cta .orb { display: grid; place-items: center; }
.sheet .browse-3d { margin-top: 8px; }
#sr-cart { position: relative; }
.sr-cart-n { position: absolute; right: -3px; top: -3px; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 1px 5px; font-size: 11px; }
html.sr-open, html.sr-open body { overflow: hidden; }
.menu-search { max-width: 928px; margin: 0 auto 16px; padding: 0 16px; }
.menu-search input { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 20px; color: var(--fg); background: var(--panel-2); font: 400 15px var(--font); }
.menu-preview-note { text-align: center; color: var(--accent); font-size: 13px; }
body.guest .venue-glow, body.guest .venue-head .bg-grid { display: none; }
body[data-menu-design="restaurant"] .venue-head { background: #100b08 url('/assets/menu-scenes/restaurant-v1.webp') center 5% / cover; }
body[data-menu-design="restaurant"] .venue-id { padding: 20px; background: rgb(16 11 8 / .86); border-radius: 20px; width: fit-content; max-width: 100%; margin: 22px auto 0; }
@media (min-width: 900px) {
  /* Keep the approved food-first composition on a monitor: a deep photographic scene,
     then the product information. Do not stretch a shallow mobile stage across the screen. */
  .showroom { --desktop-menu-width: 1040px; }
  .sr-top { position: relative; max-width: var(--desktop-menu-width); width: calc(100% - 48px); min-height: 88px; margin: 0 auto; padding: 12px calc(min(37vw, 400px) + 16px) 12px 16px; }
  .sr-venue b { font-size: 24px; }
  .sr-count { font-size: 12px; }
  .sr-kind { position: absolute; left: 164px; bottom: 18px; }
  .sr-categories { justify-content: center; min-height: 46px; padding-bottom: 6px; }
  .sr-categories button { font-size: 16px; }
  .sr-visual { width: min(calc(100% - 48px), var(--desktop-menu-width)); min-height: 380px; flex-basis: 380px; margin: 0 auto; }
  .sr-stage { left: 0; right: 0; bottom: 88px; }
  .sr-backdrop { object-position: center 35%; }
  .sr-nav { width: 56px; height: 56px; }
  .sr-nav.prev { left: 16px; } .sr-nav.next { right: 16px; }
  .sr-motion { left: calc(50% - 280px); right: calc(50% - 280px); }
  .sr-drag { font-size: 14px; }
  .sr-zoom { display: grid; }
  .sr-decor { position: absolute; top: 12px; right: max(24px, calc((100% - var(--desktop-menu-width)) / 2 + 16px)); z-index: 4; width: min(37vw, 400px); margin: 0; padding: 0; gap: 12px; }
  .sr-decor legend { color: var(--scene-muted); font-size: 12px; font-weight: 500; }
  .sr-scene-choice img { height: 44px; object-position: center 35%; }
  .sr-scene-choice b { font-size: 12px; }
  .sr-panel { width: min(calc(100% - 48px), var(--desktop-menu-width)); margin: 0 auto; padding: 20px 16px 14px; }
  .sr-info { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 32px; row-gap: 10px; align-items: start; }
  .sr-title { grid-column: 1; grid-row: 1; }
  .sr-title h2 { font-size: 32px; }
  .sr-price { font-size: 28px; }
  .sr-desc { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; }
  .sr-tags { grid-column: 1; grid-row: 3; margin: 0; }
  .sr-actions { grid-column: 2; grid-row: 1; margin: 0; }
  .sr-details { grid-column: 2; grid-row: 2 / 4; margin: 0; }
  .sr-reason, .sr-ar-qr { grid-column: 1 / -1; }
  .sr-thumbs { max-width: none; justify-content: center; gap: 12px; margin-top: 16px; }
  .sr-thumb { width: 108px; height: 74px; }
  .sr-thumb.text-thumb span { font-size: 14px; }
  .sr-thumb small { font-size: 10px; }
  .sr-hint { font-size: 10px; margin-top: 10px; }
  body[data-menu-design="restaurant"] .sr-title { display: flex; }
  body[data-menu-design="restaurant"] .sr-price { margin-top: 0; }
}
@media (max-height: 720px) { .sr-visual { min-height: 250px; flex-basis: 250px; } .sr-hint { display: none; } .sr-thumbs { margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .showroom[open] { animation: none; } .sr-stage model-viewer, .sr-photo { transition: none; } .sr-stage.to-next model-viewer, .sr-stage.to-prev model-viewer { transform: none; } }