/* AR-примерка в карточке товара (assets/js/ar.js). */
.graphics-ar-open { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; width: 100%; margin: 12px 0 0; padding: 10px 14px; border: 1px solid #dedede; border-radius: 10px; background: #fff; color: #111; font: 14px/1.3 var(--font-ui); text-align: left; cursor: pointer; }
.graphics-ar-open:hover { border-color: #111; }
.graphics-ar-open svg { grid-row: span 2; width: 26px; height: 26px; }
.graphics-ar-open small { font-size: 11px; color: #888; }
.graphics-ar { border: 0; padding: 0; width: min(620px, 100vw); max-width: 100vw; max-height: 100dvh; border-radius: 12px; background: #fff; color: #111; font-family: var(--font-ui); }
.graphics-ar::backdrop { background: rgba(0, 0, 0, .45); }
.graphics-ar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.graphics-ar__head b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.graphics-ar__x { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #dedede; border-radius: 50%; background: #fff; color: #111; cursor: pointer; }
.graphics-ar__x:hover { border-color: #111; }
.graphics-ar__x svg { width: 18px; height: 18px; }
.graphics-ar__items { display: flex; gap: 6px; padding: 0 16px 12px; overflow-x: auto; }
.graphics-ar__items[hidden] { display: none; }
.graphics-ar__items button { flex: none; padding: 8px 14px; border: 1px solid #dedede; border-radius: 8px; background: #fff; color: #111; font: 14px/1.2 var(--font-ui); cursor: pointer; }
.graphics-ar__items [aria-checked=true] { border-color: #111; background: #111; color: #fff; }
.graphics-ar__stage { position: relative; height: min(58vh, 460px); background: #ece9e4; }
.graphics-ar__stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.graphics-ar__wait { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: 16px; background: rgba(236, 233, 228, .85); color: #666; text-align: center; }
.graphics-ar__wait[hidden] { display: none; }
.graphics-ar__go { position: absolute; left: 16px; right: 16px; bottom: 16px; min-height: 46px; border: 0; border-radius: 10px; background: #111; color: #fff; font: 600 15px/1 var(--font-ui); cursor: pointer; }
.graphics-ar__exit { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #1b1b1b; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.graphics-ar__exit svg { width: 22px; height: 22px; }
.graphics-ar__note { margin: 10px 16px 16px; font-size: 13px; line-height: 1.4; color: #666; }
.graphics-ar__qr-row { display: flex; align-items: center; gap: 14px; margin: 0 16px 16px; font-size: 13px; line-height: 1.4; color: #444; }
.graphics-ar__qr-row p { margin: 0; }
.graphics-ar__qr { flex: none; width: 128px; height: 128px; background: #fff; }
.graphics-ar__qr svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) { .graphics-ar { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; } .graphics-ar__stage { height: calc(100dvh - 180px); } }