/** * Simul • Morf Product Headless — front-end styles. * * Scoped to the Morf-injected widgets so the rules stay portable: * - "View in AR" button (bottom-right of the gallery) * - QR-code modal that opens on desktop AR clicks */ .morf-ar-btn { position: absolute; right: 24px; top: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 11px; background: #fff; color: var(--color-primary, #1d1d1d); border: none; border-radius: 50%; font-size: 14px; font-weight: 600; cursor: pointer; line-height: normal; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); } .morf-ar-btn .label-short { display: none; } @media (max-width: 1299px) { .morf-ar-btn { right: 16px; top: 16px; padding: 8px; font-size: calc(9.5px + 0.390625vw); } .morf-ar-btn .label-full { display: none; } .morf-ar-btn .label-short { display: inline; } } /* QR-code modal — appended to by front.js on desktop AR clicks. */ .morf-ar-qr { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; } .morf-ar-qr__panel { position: relative; background: #fff; border-radius: 16px; padding: 56px 56px 40px; width: 100%; max-width: 540px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } @media (max-width: 576px) { .morf-ar-qr__panel { padding: 48px 24px 28px; } } .morf-ar-qr__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #ededed; border: none; border-radius: 50%; color: #555; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .morf-ar-qr__close:hover { background: #dcdcdc; color: #000; } .morf-ar-qr__image { display: block; width: 240px; height: 240px; margin: 0 auto 28px; } @media (max-width: 576px) { .morf-ar-qr__image { width: 200px; height: 200px; margin-bottom: 20px; } } .morf-ar-qr__lead { font-size: 15px; color: #1d1d1d; margin: 0 0 24px; line-height: 1.5; } @media (max-width: 576px) { .morf-ar-qr__lead { font-size: 14px; margin-bottom: 18px; } } .morf-ar-qr__requirements { font-size: 12px; color: #777; margin: 0; line-height: 1.5; } .morf-ar-qr__requirements span { font-weight: 600; }