/** * Atelier — Modal shell (C12). Dim overlay + centered panel, reused by * Quick View (T13) and future modal-based flows (size guide, etc). */ .atl-modal-overlay { min-height: 100vh; background: var(--atl-overlay-scrim); display: grid; place-items: center; padding: 40px; } .atl-modal-panel { background: var(--atl-surface); max-width: 880px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; } /* IV-06: the .atl-modal-close rules are deleted with their only markup. product-view.phtml's quick-view branch was the sole element carrying that class, and the button was dead (no handler anywhere, and inside an iframe it could not have closed the parent's modal). Leaving the rules would be dead CSS for an element nothing renders. */ .atl-modal-media { aspect-ratio: 1/1; overflow: hidden; } .atl-modal-media img { display: block; width: 100%; height: 100%; object-fit: cover; } .atl-modal-body { padding: 34px; display: flex; flex-direction: column; gap: 13px; } /* Standalone quick-view (?pdp=quickview) — e.g. loaded inside the category quick-view iframe. Strip the surrounding full-page chrome so the modal panel shows cleanly instead of a dimmed page behind a scrim. Class set on by the quick-view branch of product-view.phtml. */ .atl-qv-embed .page-header, .atl-qv-embed .page-footer, .atl-qv-embed .nav-sections, .atl-qv-embed .atl-home-banner, .atl-qv-embed .breadcrumbs, .atl-qv-embed .page-title-wrapper { display: none !important; } .atl-qv-embed .page-main { margin-top: 0; padding-top: 0; } .atl-qv-embed .atl-modal-overlay { background: var(--atl-bg); padding: 24px; min-height: auto; } /* IV-117: releasing .atl-modal-overlay above was not enough — the document was still held at exactly the viewport height by base `.page-wrapper{min-height:100vh}`, so the embedded render always reported the frame's own height and the parent modal could never learn how tall its content really was. Measured on the live render at 880px: page-wrapper 900px (== viewport) vs. the real product block 444px. Those two resets are what let the document hug its content, which is what the T13 comp specifies — its panel has NO height at all, only `max-width:880px` and a 1:1 media cell. */ .atl-qv-embed .page-wrapper { min-height: 0; } .atl-qv-embed .columns, .atl-qv-embed .column.main { min-height: 0; } @media (max-width: 767px) { .atl-modal-overlay { padding: 0; } .atl-modal-panel { grid-template-columns: 1fr; max-width: none; min-height: 100vh; } .atl-modal-body { padding: 24px 20px; } }