:root{--p:#7c3aed;--p2:#ec4899;--bg:#faf7ff;--ink:#241b3a;--mut:#6b6485;--line:#e6dff5;--ok:#16a34a}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.hero{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;text-align:center;padding:36px 16px}
.hero h1{margin:0 0 6px;font-size:clamp(1.6rem,4vw,2.4rem)}
.hero p{margin:0 0 14px;opacity:.95}
.layout{max-width:1200px;margin:0 auto;padding:20px 16px 90px;display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.card-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:20px;box-shadow:0 2px 10px #7c3aed10}
h2{margin:0 0 14px;display:flex;align-items:center;gap:10px;font-size:1.3rem}
h2 i{font-style:normal;background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:.95rem}
h3{margin:18px 0 8px}h3 small,.hint{color:var(--mut);font-weight:400;font-size:.88rem}
label{display:block;font-weight:600;font-size:.9rem}
input,select,textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px #7c3aed22}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{border:2px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:.15s}
.card.selected{border-color:var(--p);box-shadow:0 0 0 3px #7c3aed25}
.card .media{aspect-ratio:16/10;background:linear-gradient(135deg,#ede9fe,#fce7f3);display:grid;place-items:center;font-size:2.5rem}
.card .media img,.card .media video,.card .media iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.card .body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h4{margin:0;font-size:1.05rem}.card p{margin:0;color:var(--mut);font-size:.9rem;flex:1}
.meta{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}
.price{font-weight:800;color:var(--p)}
.pick{display:flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--p);color:var(--p);background:#fff;border-radius:10px;padding:10px;font-weight:700;cursor:pointer;font:inherit;font-weight:700}
.card.selected .pick{background:var(--p);color:#fff}
.pick input{width:auto;margin:0;accent-color:var(--p)}
.pick[disabled],.pick.locked{opacity:.7;cursor:not-allowed}
.tag{background:#dcfce7;color:var(--ok);font-size:.75rem;padding:2px 8px;border-radius:99px;font-weight:700}
ul.inc{margin:4px 0 0;padding-left:18px;font-size:.85rem;color:var(--mut)}
.rows{display:grid;gap:8px}
.row{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:10px;cursor:pointer}
.row.selected{border-color:var(--p);background:#f5f0ff}
.row input{width:auto;margin:0;accent-color:var(--p)}
.row img{width:56px;height:56px;border-radius:10px;object-fit:cover}
.row .t{flex:1}.row .t b{display:block}.row .t span{color:var(--mut);font-size:.85rem}
.choice{display:flex;gap:12px}.choice label{display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:12px 22px;cursor:pointer}
.choice input{width:auto;margin:0}
.summary{position:sticky;top:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 4px 18px #7c3aed18}
.summary h3{margin:0 0 10px}.summary ul{list-style:none;padding:0;margin:0;font-size:.9rem;display:grid;gap:6px}
.summary li{display:flex;justify-content:space-between;gap:10px}
.total{display:flex;justify-content:space-between;align-items:center;border-top:2px dashed var(--line);margin-top:12px;padding-top:12px;font-size:1.2rem}
.total strong{color:var(--p);font-size:1.6rem}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:14px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;flex:1}
.btn.ghost{background:#fff;border:2px solid var(--p);color:var(--p)}
.btn.light{background:#fff;color:var(--p)}
.btn:disabled{opacity:.6;cursor:wait}
.msg{min-height:1.4em;font-weight:600}.msg.err{color:#dc2626}.msg.ok{color:var(--ok)}
.wa{position:fixed;right:18px;bottom:18px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 4px 14px #0004;z-index:20}
.modal{position:fixed;inset:0;background:#0006;display:grid;place-items:center;z-index:30;padding:16px}.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:18px;padding:24px;max-width:460px;width:100%;display:grid;gap:14px}
.modal-box input{font-size:.85rem}
@media(max-width:900px){.layout{grid-template-columns:1fr}.summary{position:static;order:-1}.grid2{grid-template-columns:1fr}}
.pick input{pointer-events:none}