/* Suumerch draft look: Suumer's own colors. (The colored-pencil look Wyatt wants is a later design pass.) */
:root{--ink:#29272b;--cream:#fcf8ee;--pink:#f7476f;--teal:#36b9c1;--orange:#f76b45;--purple:#7443b5;--line:#e6e0d2}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cream)}
a{color:var(--purple)}
.strip{background:var(--ink);color:#fff;font-size:13px;padding:8px 14px;text-align:center}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:4px solid var(--pink);background:#fff}
.logo img{height:40px;width:auto;display:block}
.cartlink{font-weight:700;text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:6px 14px}
.cartlink span{background:var(--pink);color:#fff;border-radius:999px;padding:0 7px;margin-left:4px}
main{max-width:1080px;margin:0 auto;padding:16px}
h1{font-size:28px;line-height:1.15;margin:.4em 0}
h2{font-size:20px;margin:1.6em 0 .6em}
.hero h1{font-size:34px}
.small{font-size:13px;color:#5d5a60}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:720px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.card img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff}
.card .name{font-weight:700;padding:8px 10px 0}
.card .meta{font-size:13px;padding:0 10px 10px;color:#5d5a60}
.card.gone img{opacity:.45}
.designer-ask{background:#fff;border:2px dashed var(--teal);border-radius:14px;padding:12px 14px;margin:12px 0;font-size:15px}
.designer-ask b{display:block}
.product{display:grid;gap:16px}
@media(min-width:720px){.product{grid-template-columns:1fr 1fr}}
.product .pic img{width:100%;border-radius:14px;background:#fff}
.price{font-size:24px;font-weight:800;margin:.2em 0}
fieldset{border:0;padding:0;margin:12px 0}
legend{font-weight:700;margin-bottom:6px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:40px;height:40px;border-radius:50%;background:var(--c);border:2px solid #bbb;cursor:pointer}
.sw.on{outline:3px solid var(--purple);outline-offset:2px}
.sw:disabled{opacity:.35;cursor:not-allowed;background-image:linear-gradient(135deg,transparent 46%,#c00 46%,#c00 54%,transparent 54%)}
.chosen{margin:6px 0 0;font-size:14px}
select,input,textarea{font:inherit;padding:10px;border:1px solid #bbb;border-radius:10px;width:100%;background:#fff}
.buy{display:block;width:100%;font:inherit;font-weight:800;font-size:18px;padding:14px;border:0;border-radius:999px;background:var(--pink);color:#fff;cursor:pointer;margin:14px 0}
.buy:disabled{background:#b9b4bb;cursor:not-allowed}
.note{background:#e9f8f8;border-radius:10px;padding:10px}
.notice{background:#fff4e0;border:1px solid #f0c27a;border-radius:10px;padding:10px 12px}
.err{color:#b00020;font-weight:600}
.empty{text-align:center;padding:30px 10px;color:#5d5a60}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:8px;margin-bottom:8px;border:1px solid var(--line)}
.line img{width:72px;height:72px;object-fit:cover;border-radius:8px}
.line .qty{display:flex;gap:6px;align-items:center}
.line .qty button{width:32px;height:32px;border-radius:50%;border:1px solid #bbb;background:#fff;font-weight:700}
.line.bad{border-color:#b00020}
.doc{max-width:720px}
.doc label{display:block;margin:12px 0;font-weight:600}
.doc label.check{font-weight:400;display:flex;gap:8px;align-items:flex-start}
.doc label.check input{width:auto;margin-top:5px}
form.closed{opacity:.5}
footer{max-width:1080px;margin:30px auto 0;padding:16px;font-size:13px;color:#5d5a60;border-top:1px solid var(--line)}
.later{margin:18px 0 0;font-size:15px}