:root { --bg: #080808; --fg: #f4f2ef; --muted: #aaa6a1; --accent: #8eff47; --line: rgba(244,242,239,.3); } /* = kod/shared/tokens.css --c-bg / --c-text / --c-muted / --c-line */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 Jost, system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); }
.logo { font-weight: 800; letter-spacing: .12em; }
.notice { margin: 0; padding: 8px 16px; background: #2a2200; color: #ffd84d; font-size: 13px; }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }
h1 { font-size: 20px; letter-spacing: .06em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 4px; }
.img { aspect-ratio: 3 / 4; background: #151515; border-radius: 10px; overflow: hidden; }
.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.name { font-size: 13px; }
.price { color: var(--muted); }
.product { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .product { grid-template-columns: 1fr 1fr; } }
.sizes { border: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sizes label { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
button { margin-top: 16px; width: 100%; padding: 14px; border: 0; border-radius: 10px; background: var(--accent); color: #000; font-weight: 800; letter-spacing: .08em; cursor: pointer; }
.lines { list-style: none; padding: 0; }
.lines li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
main a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs { color: var(--muted); font-size: 13px; }
.foot { border-top: 1px solid var(--line); padding: 16px; color: var(--muted); font-size: 13px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 16px; max-width: 1200px; margin: 0 auto 12px; }
.foot p { max-width: 1200px; margin: 0 auto; }
.bar nav { display: flex; gap: 16px; }