/* vr-my-wall.css — v20260911-1
   "Find a piece for your wall" flow (desktop) + its Showcase entry banner. */

/* entry banner on the showcase page */
.vr-mw-entry {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 18px 22px;
  border: 1px solid var(--vr-border, rgba(128,128,128,.2)); border-radius: 16px;
  background: var(--vr-card, rgba(128,128,128,.05));
}
.vr-mw-entry-art { flex: 0 0 auto; width: 84px; height: 56px; border-radius: 6px; overflow: hidden; background: #F3F1EC; position: relative; }
.vr-mw-entry-art i { position: absolute; left: 30px; top: 12px; width: 24px; height: 20px; background: #3a5fa0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.vr-mw-entry-art b { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #B79A78; }
.vr-mw-entry-text { flex: 1 1 320px; min-width: 0; }
.vr-mw-entry-text h2 { margin: 0 0 4px; font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.25rem; }
.vr-mw-entry-text p { margin: 0; font-size: .9rem; color: var(--vr-text-muted); line-height: 1.45; }
.vr-mw-entry .vr-button { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 860px) { .vr-mw-entry { display: none; } }

/* modal */
html.vr-mw-open { overflow: hidden; }
.vr-mw { position: fixed; inset: 0; z-index: 1210; }
.vr-mw[hidden] { display: none; }
.vr-mw-backdrop { position: absolute; inset: 0; background: rgba(8,12,10,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vr-mw-dialog {
  position: absolute; inset: 24px; margin: auto; max-width: 1080px; max-height: 820px;
  display: flex; flex-direction: column;
  background: var(--vr-bg-elevated, #fff); color: var(--vr-text, #111);
  border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  font-family: var(--vr-font-body, 'DM Sans', system-ui, sans-serif);
}
.vr-mw-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--vr-border, rgba(128,128,128,.3)); background: var(--vr-card, #fff); color: var(--vr-text, #111);
  font-size: .9rem; cursor: pointer; font-family: inherit;
}
.vr-mw-steps { display: flex; gap: 18px; padding: 18px 28px 0 28px; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--vr-text-faint); }
.vr-mw-step { display: inline-flex; align-items: center; gap: 7px; }
.vr-mw-step i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .7rem; border: 1px solid currentColor; }
.vr-mw-step.is-current { color: var(--vr-text); }
.vr-mw-step.is-current i { background: var(--vr-primary, #2E9E4F); border-color: var(--vr-primary, #2E9E4F); color: #fff; }
.vr-mw-step.is-done { color: var(--vr-primary, #2E9E4F); }
.vr-mw-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 28px 26px; }
.vr-mw-title { margin: 6px 0 4px; font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif); font-style: italic; font-weight: 400; font-size: 1.6rem; }
.vr-mw-lead { margin: 0 0 18px; font-size: .95rem; color: var(--vr-text-muted); line-height: 1.5; }
.vr-mw-tip, .vr-mw-hint { font-size: .8rem; color: var(--vr-text-muted); line-height: 1.5; margin: 10px 0 0; }
.vr-mw-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vr-text-faint); margin: 0 0 8px; }
.vr-mw-inline { display: flex; align-items: center; gap: 8px; }
.vr-mw-inline .vr-input { width: 120px; }
.vr-mw .vr-input {
  display: block; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; font: inherit; font-size: .9rem;
  border: 1px solid var(--vr-border, rgba(128,128,128,.28)); background: var(--vr-card, rgba(128,128,128,.07)); color: var(--vr-text, inherit);
}
.vr-mw textarea.vr-input { width: 100%; resize: vertical; }
.vr-mw select.vr-input { width: 100%; }

/* step 0 */
.vr-mw-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 44px 20px; border: 2px dashed var(--vr-border, rgba(128,128,128,.35)); border-radius: 16px;
  background: var(--vr-card, rgba(128,128,128,.04)); transition: border-color .15s, background .15s;
}
.vr-mw-drop:hover, .vr-mw-drop.is-over { border-color: var(--vr-primary, #2E9E4F); background: color-mix(in srgb, var(--vr-primary, #2E9E4F) 6%, transparent); }
.vr-mw-drop-icon { font-size: 2rem; }
.vr-mw-drop small { color: var(--vr-text-muted); }

/* step 1 */
.vr-mw-measure { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.vr-mw-stage { position: relative; display: inline-block; max-width: 100%; user-select: none; -webkit-user-select: none; }
.vr-mw-stage img { display: block; max-width: 100%; max-height: 58vh; border-radius: 10px; }
.vr-mw-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vr-mw-dot {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; cursor: grab; touch-action: none;
  background: var(--vr-primary, #2E9E4F); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.vr-mw-dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.vr-mw-side { display: flex; flex-direction: column; gap: 10px; }
.vr-mw-readout { margin: 6px 0 0; font-size: .9rem; font-weight: 600; }
.vr-mw-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.vr-mw-actions .vr-button { font: inherit; cursor: pointer; }
.vr-mw-status { font-size: .82rem; color: var(--vr-text-muted); }

/* step 2 */
.vr-mw-q { margin: 0 0 18px; }
.vr-mw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vr-mw-chips .vr-chip {
  padding: 7px 13px; border-radius: 999px; font-size: .84rem; font-family: inherit; cursor: pointer;
  border: 1px solid var(--vr-border, rgba(128,128,128,.25)); background: var(--vr-card, rgba(128,128,128,.06)); color: var(--vr-text, inherit);
  -webkit-appearance: none; appearance: none;
}
.vr-mw-chips .vr-chip[data-active="true"] { border-color: var(--vr-primary, #2E9E4F); background: color-mix(in srgb, var(--vr-primary, #2E9E4F) 14%, transparent); font-weight: 600; }

/* step 3 */
.vr-mw-grid[hidden] { display: none; }
.vr-mw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.vr-mw-card { border: 1px solid var(--vr-border, rgba(128,128,128,.18)); border-radius: 12px; overflow: hidden; background: var(--vr-card, rgba(128,128,128,.04)); display: flex; flex-direction: column; }
.vr-mw-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--vr-surface-alt, rgba(128,128,128,.08)); display: block; }
.vr-mw-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vr-mw-card-title { font-family: var(--vr-font-heading, 'Playfair Display', Georgia, serif); font-style: italic; font-size: 1rem; line-height: 1.25; }
.vr-mw-card-sub { font-size: .78rem; color: var(--vr-text-muted); }
.vr-mw-card-why { font-size: .72rem; color: var(--vr-primary, #2E9E4F); }
.vr-mw-card-btn { margin-top: auto; align-self: flex-start; font: inherit; font-size: .8rem; padding: 7px 12px; cursor: pointer; }
.vr-mw-more { margin: 14px 0 10px; }
.vr-mw-more .vr-chip { padding: 7px 13px; border-radius: 999px; font: inherit; font-size: .84rem; cursor: pointer; border: 1px solid var(--vr-border, rgba(128,128,128,.25)); background: var(--vr-card, rgba(128,128,128,.06)); color: var(--vr-text, inherit); }
.vr-mw-empty { font-size: .9rem; color: var(--vr-text-muted); }

@media (max-width: 860px) {
  .vr-mw-dialog { inset: 0; max-width: none; max-height: none; border-radius: 0; }
  .vr-mw-measure { grid-template-columns: 1fr; }
}