:root{--page: #eef1f6;--card: #ffffff;--ink: #10131a;--muted: #6b7280;--line: #e6e8ee;--accent: #4f46e5;--accent-ink: #ffffff;--good: #0ca30c;color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:32px 16px;background:radial-gradient(700px 400px at 90% -5%,#e0e7ff,transparent),var(--page);color:var(--ink);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.checkout{width:min(860px,100%);display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 24px 60px -32px #10131a59}.thumb{width:100%;height:150px;border-radius:14px;display:grid;place-items:center;font-size:60px;background:linear-gradient(135deg,#6366f1,#22d3ee);margin-bottom:18px}.product h1{font-size:21px;margin:0 0 6px;letter-spacing:-.02em}.blurb{color:var(--muted);margin:0 0 14px}.unit{font-size:22px;font-weight:700;margin-bottom:18px}.unit span{font-size:14px;font-weight:400;color:var(--muted)}label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:11px;font-size:15px;color:var(--ink);background:#fbfbfd}input:focus{outline:2px solid var(--accent);outline-offset:1px}.summary h2{font-size:16px;margin:0 0 16px}.promo{display:flex;gap:8px}.promo input{flex:1}.promo button{padding:0 18px;border:0;border-radius:11px;background:var(--ink);color:#fff;font-weight:600;cursor:pointer}.chip{margin-top:12px;display:inline-block;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--good);background:color-mix(in oklab,var(--good) 12%,#fff);border:1px solid color-mix(in oklab,var(--good) 30%,transparent)}.lines{margin:18px 0;display:grid;gap:10px}.lines>div{display:flex;justify-content:space-between}.lines dt,.lines dd{margin:0}.lines dt{color:var(--muted)}.grand{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}.grand dt{color:var(--ink);font-weight:700;font-size:18px}.grand dd,#total{font-size:26px;font-weight:700;letter-spacing:-.02em}.pay{width:100%;padding:13px;border:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:600;cursor:pointer}.pay:hover{filter:brightness(1.07)}.confirm{margin:14px 0 0;color:var(--good);font-weight:600;text-align:center}@media (max-width: 680px){.checkout{grid-template-columns:1fr}}