/* Item PREVIEW (founder 2026-10-17, flag itemPreview): the eye button beside BUY on a shop card and the big 360 view
   (src/app/item-preview.js + item-preview-view.js). Nothing here matches while the flag is off: the eye buttons and the
   view only exist then. */

/* The card: the eye and BUY share one row. */
.ip-actions{display:flex;gap:6px;align-items:stretch;flex:none}
.chill-shop[data-shop="merch"] .food-list .food-card .ip-actions{margin-top:auto}
.ip-actions .food-buy{flex:1 1 auto;min-width:0;margin:0}
.item-preview-btn{flex:none;display:grid;place-items:center;width:38px;min-height:34px;padding:0;border-radius:8px;
  border:1px solid #3cf0ff88;background:#0b1430;color:#9ff6ff;cursor:pointer}
.item-preview-btn:hover,.item-preview-btn:focus-visible{background:#13224a;color:#fff;box-shadow:0 0 12px #3cf0ff55;outline:none}

/* The view: above the shop and the HUD, the whole screen on a phone. */
.item-preview{position:fixed;inset:0;z-index:61;display:grid;place-items:center;padding:16px;background:#03050fd9;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:none;overscroll-behavior:contain}   /* a drag never scrolls the page */
.ip-card{position:relative;display:flex;flex-direction:column;width:min(760px,100%);height:min(700px,100%);border-radius:16px;
  overflow:hidden;background:linear-gradient(160deg,#141a38,#0b1024);border:1px solid #3cf0ff66;color:#e8f1ff;
  font:13px/1.45 var(--mono,monospace);box-shadow:0 0 50px #b07bff55}
.ip-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px 18px}
.ip-title{flex:1;min-width:0}
.ip-title b{font-size:18px;letter-spacing:.06em;color:#fff;text-shadow:0 0 12px #ff4fd8}
.ip-title span:not(.shop-badge){display:block;color:#9fd4ff}
.ip-x{flex:none;width:36px;height:36px;border:0;border-radius:8px;background:none;color:#9fb0d8;font-size:26px;line-height:1;cursor:pointer}
.ip-x:hover,.ip-x:focus-visible{color:#fff;background:#ffffff14;outline:none}
.ip-view{position:relative;flex:1;min-height:0;margin:0 12px;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse 60% 55% at 50% 40%,#28336a 0%,#121836 55%,#070a1a 100%)}
.ip-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}
.ip-canvas:active{cursor:grabbing}
.ip-canvas:focus-visible{box-shadow:inset 0 0 0 2px #3cf0ff99}
.ip-canvas[hidden]{display:none}
.ip-hint{position:absolute;left:0;right:0;bottom:10px;margin:0;text-align:center;color:#9fb6e8;font-size:11px;
  letter-spacing:.05em;pointer-events:none}
.ip-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px 14px}
.ip-foot .shop-wallet{flex:none}   /* your balance (shop-wallet.js), beside the price */
.ip-price{flex:1;min-width:0;font-size:15px;font-weight:700;color:#fff}
.ip-price svg{vertical-align:-3px}
.ip-buy{flex:none;min-height:40px;padding:9px 18px;border:0;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,#ff4fd8,#b07bff);color:#fff;font:700 13px var(--mono,monospace);letter-spacing:.06em}
.ip-buy svg{vertical-align:-3px}
.ip-buy[disabled]{cursor:not-allowed;filter:grayscale(1);opacity:.7}
@media (max-width:600px),(max-height:520px){
  .item-preview{padding:0}
  .ip-card{width:100%;height:100%;border-radius:0;border:0}
  .ip-head{padding:12px 10px 8px 14px}
  .ip-view{margin:0 8px}
  .ip-foot{padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .ip-foot .shop-wallet{flex-basis:100%;justify-content:center}
}