/* ═══════════════════════════════════════════════════════════════
   Imahe — PRODUCT studio page
   Mobile: single-column stacked panels + sticky generate bar.
   Desktop ≥1024px: two-page spread — controls left, darkroom right.
   ═══════════════════════════════════════════════════════════════ */

.pr-sub { margin: 0 0 12px; font-family: var(--f-head); }

/* mobile: the spread is just a stack */
.pr-spread > .page { display: flex; flex-direction: column; gap: 14px; }

/* product count stamp */
.pr-count {
  font-family: var(--f-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-soft); background: var(--speech-fill);
  border: 2px solid var(--ink-line); border-radius: 999px; padding: 0 8px;
}

/* ── GUEST panel: dashed VIP backstage pass ── */
.pr-guest {
  border: 3px dashed var(--riso-yellow-deep);
  background:
    linear-gradient(rgba(255, 197, 49, 0.14), rgba(255, 197, 49, 0.14)),
    var(--paper-2);
}
.pr-guest-tag {
  position: absolute; top: -13px; right: 14px;
  background: var(--riso-yellow); color: var(--ink);
  font-family: var(--f-display); font-size: 14px; letter-spacing: 0.05em;
  border: 2px solid var(--ink-line); border-radius: 8px; padding: 1px 9px;
  transform: rotate(3deg);
  box-shadow: 2px 2px 0 var(--panel-shadow);
}
.pr-guest .panel-title { margin-bottom: 6px; }
.pr-guest-body { margin-top: 8px; }

/* ── scene + frame chips ── */
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-scene-note {
  margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
/* tail points UP at the dropdown */
.pr-scene-note::after {
  bottom: auto; top: -9px; left: 18px;
  transform: rotate(225deg);
}
/* shown only when a with-a-model scene is picked but no face was uploaded */
.pr-scene-model {
  margin-top: 10px; padding: 8px 10px;
  border: 2px dashed var(--riso-pink); border-radius: 10px;
  background: rgba(255, 77, 109, 0.09);
}

/* aspect-ratio glyphs */
.ar-demo { display: inline-block; border: 2px solid currentColor; border-radius: 3px; }
.ar-11 { width: 13px; height: 13px; }
.ar-916 { width: 10px; height: 16px; }
.ar-169 { width: 17px; height: 10px; }

/* ── generate bar — .wiz-nav supplies the sticky frame around it ── */
.pr-genbar { flex: 1; min-width: 0; }
.pr-genbar .bubble-btn::after { display: none; }
.pr-genbar .cost-badge { transform: rotate(-2deg); }

/* ── results ── */
.pr-resultcard { padding: 0; border: none; box-shadow: none; background: transparent; }
.pr-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-shot img {
  width: 100%;
  border: 2.5px solid var(--ink-line); border-radius: 10px;
  background: var(--paper-sunk);
}
.pr-cap { align-self: flex-start; max-width: 100%; }
.pr-actions { flex-wrap: wrap; margin-top: 4px; }

.pr-empty { padding: 26px 16px; }
.pr-empty .speech::after { left: 50%; }

/* accuracy note — desktop-only flair */
.pr-note { display: none; }

.shake-now { animation: shake 0.35s; }

/* ═══ desktop: two-page comic spread ═══ */
@media (min-width: 1024px) {
  /* nav handles stickiness */

  .pr-note {
    display: block;
    transform: rotate(-1deg);
    border-color: var(--riso-teal);
  }
  .pr-note .panel-title { color: var(--success-ink); }

  .pr-right-inner {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 24px;
  }
  .pr-results {
    max-height: calc(100vh - 200px);
    overflow: auto;
    padding: 6px;
  }
}