/** * Simul • Morf Product Headless — front-end styles. * * Only what front.js builds at runtime lives here, so the file stays portable * across themes: the AR QR-code modal, which is appended to on a * desktop AR click and has no template anywhere. * * Everything that styles theme-rendered markup — the gallery slides, the 3D * thumb tile, the open/closed toggle, the "View in AR" button — belongs to the * active theme: * themes/sthemechild/src/scss/components/productpage/morf.scss */ .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; }