/* * shop-patch.css * * Two concerns live here: * 1. The original 8-line `clr-btn.disabled` rule (kept first to * preserve precedence — it was already shipping). * 2. EMBED MODE layout — applied when ?embed=1 is in the URL, which * adds `.embed` to from a script in the page head (see * index.html). Outside embed mode, none of this fires and the * standalone page renders exactly as before. * * Why a separate file: keeping the standalone shop-prototype intact is * worth a small dup of CSS. If someone opens * /ready-tshirt/index.html directly (no ?embed=1) they still get the * original full-page experience. */ /* ── Disabled colour swatches (limited views: Side L / Side R / Back) ── */ .clr-btn.disabled { opacity: 0.22; cursor: not-allowed; pointer-events: none; } /* ════════════════════════════════════════════════════════════════════ EMBED MODE — layout when loaded inside ShopLinkModalShell iframe ════════════════════════════════════════════════════════════════════ */ /* Root reset. * * The shell mounts this iframe in a fixed-height container (mobile: * 92svh sheet, desktop: ~520-720px centered card). The standalone * page assumed `min-height:100vh` and an unbounded body — that * combo causes double-scroll inside the iframe. We pin html/body * to 100% and hide overflow at the root so the shell stays in * charge of any outer scroll/lock. */ html.embed, html.embed body { width: 100%; height: 100%; overflow: hidden; background: #fff; } /* The .app wrapper was width-capped at 390px for "mobile look" on * the standalone page; inside the shell we want it to fill the * iframe. We also drop the side borders the wider breakpoint adds. */ html.embed .app { width: 100%; max-width: none; height: 100%; min-height: 100%; border: none; display: flex; flex-direction: column; } /* Hide the standalone page's own header (logo + Cart button). * The shell already has its own close button and the cart lives in * the global Mr.Host UI outside the iframe. */ html.embed .hdr { display: none; } /* Main fills the rest after .hdr is gone. */ html.embed .main { flex: 1; min-height: 0; height: 100%; } /* ── DESKTOP (≥ 900px) — two-column grid ─────────────────────────── * * Preview left (sticky to the column), config right (scrollable). * Order / Total stays static at the bottom of the right column so * the visitor never loses sight of the price while scrolling words. */ @media (min-width: 900px) { html.embed .main { display: grid; grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.25fr); gap: 24px; padding: 24px; align-items: stretch; overflow: hidden; } html.embed .preview-pane { position: relative; /* override the standalone `sticky` */ top: auto; flex: none; min-width: 0; height: 100%; display: flex; flex-direction: column; } html.embed .preview-wrap { height: 100%; min-height: 0; margin: 0; border-radius: 24px; display: flex; align-items: center; justify-content: center; } /* Cap the actual canvas inside the preview pane. Without this the * shirt mockup grows to whatever pixel ratio the shell gives us * and looks oversized on big monitors. */ html.embed .preview-canvas-wrap { width: min(420px, 90%); height: min(520px, 90%); } /* The mockup PNGs have generous whitespace around the shirt; a * 1.2× scale pulls the shirt closer to the canvas edges without * cropping. Tune ±0.05 if it feels too tight. */ html.embed .shirt-img { transform: scale(1.2); } html.embed .config-pane { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0; } /* Inner scroll area for cards: Color / Print Word / Size / Quantity */ html.embed .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 12px; gap: 12px; } /* Order / Total card pinned to the bottom of the right column. */ html.embed .bottom { position: static; width: 100%; max-width: none; transform: none; left: auto; flex-shrink: 0; margin-top: 0; border-radius: 16px; border: 1px solid var(--border); background: #fff; padding: 14px 18px; } } /* ── MOBILE (< 900px) — vertical stack ────────────────────────────── * * Preview on top with a capped height (so a small phone keeps the * shirt visible even when the word-grid is long), config below, * Order/Total pinned to the bottom of the iframe. */ @media (max-width: 899px) { html.embed .main { height: 100%; display: flex; flex-direction: column; overflow: hidden; } html.embed .preview-wrap { margin: 12px 16px 0; height: 38svh; /* leaves ~62svh for config + bottom */ min-height: 260px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } html.embed .preview-canvas-wrap { width: 82%; height: 88%; } html.embed .config-pane { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } html.embed .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 16px; gap: 10px; } /* Override the standalone .bottom position:fixed. Inside the shell * the iframe itself is the viewport, so a static block at the end * of config-pane is enough. Backdrop blur is dropped — not needed * once we're no longer floating over a long page. */ html.embed .bottom { position: static; width: 100%; max-width: none; transform: none; left: auto; flex-shrink: 0; backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; border-top: 1px solid var(--border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } /* Word grid uses 3 columns on the standalone mobile page; in the * shell with a narrower content width 2 columns reads better. */ html.embed .word-card .word-grid { grid-template-columns: repeat(2, 1fr); max-height: 220px; } } /* ── Print Word card — inner scroll ───────────────────────────────── * * The word list has ~30 entries. Without its own max-height + scroll, * the card stretches the right column on desktop (pushing Order off * screen) and dominates the config-pane on mobile. Capping it keeps * the visual rhythm of the card stack consistent with Color / Size. * * `.word-card` itself uses default block layout — the grid inside * determines its height. (Earlier `min-height: 0` was wrong here; it * let the card shrink to just the header while the grid rendered as * an overflowing sibling, leaving a visually empty band on mobile.) */ .word-card .word-grid { max-height: 260px; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; } .word-card .word-grid::-webkit-scrollbar { width: 4px; } .word-card .word-grid::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 999px; } .word-card .word-grid::-webkit-scrollbar-track { background: transparent; }