:root { --ink:#1c1917; --muted:#78716c; --line:#e7e5e4; --bg:#fafaf9; --accent:#9a3412; }
* { box-sizing:border-box; }
body { margin:0; font-family: Georgia, "Times New Roman", serif; color:var(--ink); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); background:#fff; }
header a { color:inherit; text-decoration:none; }
.logo { font-size:22px; letter-spacing:.06em; }
.cart { font-family: system-ui, sans-serif; font-size:14px; }
main { max-width:1040px; margin:0 auto; padding:28px 20px 80px; }
.banner { font-family: system-ui, sans-serif; font-size:13px; background:#fff7ed; border:1px solid #fed7aa; color:#7c2d12; padding:10px 14px; border-radius:8px; margin-bottom:24px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; }
.card img { width:100%; aspect-ratio:9/11; object-fit:cover; display:block; }
.card div { padding:12px 14px; }
.price { font-family: system-ui, sans-serif; color:var(--muted); font-size:15px; }
.pdp { display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:start; }
.pdp img { width:100%; border-radius:10px; border:1px solid var(--line); background:#fff; }
h1 { font-weight:400; font-size:32px; margin:0 0 8px; }
.desc { font-family: system-ui, sans-serif; color:#44403c; line-height:1.6; font-size:15px; }
form { font-family: system-ui, sans-serif; margin-top:22px; }
select { width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; font-size:15px; margin-bottom:12px; background:#fff; }
.add { width:100%; background:var(--ink); color:#fff; border:0; padding:14px; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; font-family:system-ui,sans-serif; padding:10px 16px; border-radius:8px; font-size:14px; opacity:0; transition:opacity .2s; pointer-events:none; }
.toast.show { opacity:1; }
.help { font-family: system-ui, sans-serif; font-size:13px; color:var(--muted); margin-top:18px; line-height:1.55; }
.help a { color:var(--accent); }
@media (max-width: 720px) { .pdp { grid-template-columns:1fr; } }