
:root{
  --bg:#f7f4f2; --card:#fff; --text:#171717; --muted:#777; --line:#e8e1dd; --accent:#171717;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Arial;color:var(--text)}
header{padding:34px 18px 22px;text-align:center}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--muted)}
h1{font-size:38px;letter-spacing:.08em;margin:7px 0 4px}
header p{margin:0;color:var(--muted)}
main{max-width:980px;margin:auto;padding:0 14px 80px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:var(--card);border-radius:18px;padding:16px;box-shadow:0 4px 18px #0000000c}
.photo{height:155px;border-radius:14px;background:linear-gradient(145deg,#eee6e2,#fff);display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.12em;color:#aaa}
.card h3{margin:13px 0 4px;font-size:16px}.card p{margin:0 0 13px;font-size:13px;color:var(--muted);min-height:35px}
.price{display:flex;justify-content:space-between;align-items:center;font-weight:700}
button{border:0;border-radius:12px;padding:10px 13px;font-weight:700;cursor:pointer}
.card button,.pay{background:var(--accent);color:#fff}
.checkout{margin-top:22px;background:#fff;padding:18px;border-radius:22px}
.checkout h2{display:flex;justify-content:space-between}
.cartline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;gap:6px;align-items:center}.qty button{padding:5px 9px;background:#eee}
input,select{width:100%;padding:13px;margin:5px 0;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:16px}
.row{display:grid;grid-template-columns:1fr auto;gap:7px}.secondary{background:#ece8e5}
.total,.grand{display:flex;justify-content:space-between;padding:10px 0}.grand{font-size:20px;border-top:1px solid var(--line);margin-top:5px}
.pay{width:100%;padding:15px;font-size:16px;margin-top:8px}
#status{text-align:center;color:var(--muted)}
@media(min-width:700px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.photo{height:190px}}
