/* AR mode — boutique cards over the live camera. Uses tokens from v2.css. */
.ar { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #1b1a18; touch-action: none; user-select: none; -webkit-user-select: none; }
.ar-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar.no-cam .ar-cam { display: none; }
.ar.no-cam { background: linear-gradient(180deg, #cfd9e0 0%, #e9e4da 52%, #b9ab95 56%, #8b7d69 100%); }
.ar-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(22,22,22,.35), transparent 22%, transparent 70%, rgba(22,22,22,.45)); }

.ar-top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(14px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(251,249,245,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.ar-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid var(--hair); }
.ar .ar-top .brand { font-size: 22px; line-height: 1; white-space: nowrap; }
.ar-tag { flex: 1; text-align: right; font: italic 500 15px/1 var(--serif); color: var(--gold); letter-spacing: .04em; }
.ar-close { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); display: grid; place-items: center; background: var(--white); }

.ar-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ar-card { position: absolute; left: 0; top: 0; width: 138px; transform-origin: 0 0; pointer-events: auto;
  background: rgba(251,249,245,.96); border: 1px solid var(--hair); border-radius: 3px; padding: 4px; text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.28); will-change: transform; }
.ar-card::before { content: ''; position: absolute; inset: 2px; border: 1px solid rgba(184,147,95,.25); border-radius: 2px; pointer-events: none; }
.ar-card.off { display: none; }
.ar-media { height: 70px; background: var(--bg) center/cover; border-radius: 1px; }
.ar-body { padding: 7px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ar-body h3 { margin: 0; font: 600 16px/1.05 var(--serif); letter-spacing: .02em; color: var(--ink); }
.ar-icons { display: flex; gap: 5px; color: var(--gold); }
.ar-icons svg { width: 14px; height: 14px; stroke-width: 1.4; }
.ar-meta { display: flex; gap: 8px; align-items: center; font: 500 10px/1 var(--mono); color: var(--grey); text-transform: uppercase; }
.ar-usd b { color: var(--ink); } .ar-usd .off { opacity: .3; }
.ar-stem { position: absolute; left: 50%; top: 100%; width: 1px; height: var(--stem, 20px); background: linear-gradient(var(--gold), rgba(184,147,95,.2)); }
.ar-sun { position: absolute; left: 50%; top: calc(100% + var(--stem, 20px)); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff6e4 0 30%, var(--gold) 34% 100%); box-shadow: 0 0 0 3px rgba(251,249,245,.55), 0 0 14px rgba(255,216,175,.9); }

.ar-edges { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ar-chip { position: absolute; left: max(8px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 6px; pointer-events: auto;
  background: rgba(251,249,245,.9); border: 1px solid var(--hair); border-radius: 999px; padding: 5px 11px 5px 7px; max-width: 46vw; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.ar-chip.right { left: auto; right: max(8px, env(safe-area-inset-right, 0px)); flex-direction: row-reverse; padding: 5px 7px 5px 11px; }
.ar-chip.right .ar-arrow { transform: scaleX(-1); }
.ar-chip.off { display: none; }
.ar-arrow { font: 600 20px/1 var(--serif); color: var(--gold); font-style: normal; }
.ar-chip span { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.ar-chip.right span { text-align: right; }
.ar-chip b { font: italic 600 13px/1.1 var(--serif); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-chip em { font: 500 9px/1.2 var(--mono); color: var(--grey); font-style: normal; text-transform: uppercase; }

.ar-note { position: absolute; z-index: 6; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 86px); transform: translateX(-50%); width: min(320px, 86vw); margin: 0;
  text-align: center; font: italic 500 14px/1.3 var(--serif); color: var(--ink); background: rgba(251,249,245,.94); border: 1px solid var(--hair); padding: 8px 12px; border-radius: 3px; }

.ar-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: rgba(251,249,245,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hair); }
.ar-where { text-align: center; font: 500 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.ar-where .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grey); }
.ar-where .dot.live { background: #a8cf9b; box-shadow: 0 0 0 3px rgba(168,207,155,.35); }
.ar-compass { position: relative; height: 34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.ar-rib { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.ar-rib .tick { position: absolute; top: 0; width: 1px; height: 6px; background: var(--hair); }
.ar-rib .tick.big { height: 10px; background: var(--gold); }
.ar-rib b { position: absolute; top: 14px; transform: translateX(-50%); font: 500 12px/1 var(--serif); color: var(--grey); letter-spacing: .1em; }
.ar-rib b.cd { font: 600 14px/1 var(--serif); color: var(--ink); }
.ar-rib .pdot { position: absolute; top: 2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--ivory); }
.ar-needle { position: absolute; left: 50%; top: 0; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid var(--ink); }
body.ar-on .top, body.ar-on .bar, body.ar-on .zoom, body.ar-on .list { visibility: hidden; }

.ctrl.ar-btn { font: 600 11px/1 var(--serif); letter-spacing: .12em; color: var(--gold); border: 1px solid var(--hair); }
.ar-dbg { text-align: center; font: 500 8px/1 var(--mono); color: #b9b6b0; margin: -2px 0 6px; letter-spacing: .04em; }