
:root{--ink:#171717;--muted:#6b6b6b;--border:#e7e7e7;--accent:#111}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
a{color:inherit;text-decoration:none}.container{max-width:1240px;margin:auto;padding:0 20px}
.announcement{background:#111;color:#fff;font-size:13px;padding:9px;text-align:center}
.header{border-bottom:1px solid var(--border);background:#fff}.header-inner{min-height:76px;display:flex;align-items:center;gap:28px}
.logo{font-weight:800;font-size:24px;white-space:nowrap}.nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;font-size:14px}.header-actions{margin-left:auto;display:flex;gap:14px;align-items:center}.search{border:1px solid var(--border);padding:9px 12px;border-radius:4px}
.hero{padding:56px 0;text-align:center;background:#f7f7f7}.hero h1{font-size:42px;margin:0 0 12px}.hero p{color:var(--muted);max-width:680px;margin:0 auto 24px;line-height:1.6}
.btn{display:inline-block;background:#111;color:#fff;padding:12px 20px;border-radius:3px}.section{padding:44px 0}.section-title{text-align:center;font-size:28px;margin:0 0 26px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.card{border:1px solid var(--border);background:#fff}.card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}.card-body{padding:14px}.card h3{font-size:15px;line-height:1.4;margin:0 0 8px}.price{font-weight:700}.compare{text-decoration:line-through;color:#999;font-weight:400;margin-left:7px;font-size:13px}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.category{border:1px solid var(--border);padding:26px;text-align:center}.category h3{margin:0 0 8px}.category p{color:var(--muted);font-size:14px;line-height:1.5}
.product{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;padding:50px 0}.product img{width:100%}.product h1{font-size:34px;line-height:1.2}.product .price{font-size:24px;margin:18px 0}.product-form{display:grid;gap:12px}.product-form input,.product-form select{padding:12px;border:1px solid var(--border)}
.footer{background:#111;color:#fff;margin-top:40px}.footer-inner{padding:44px 20px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer p,.footer a{color:#ccc;line-height:1.7}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:1fr 1fr}.nav{display:none}.product{grid-template-columns:1fr}.hero h1{font-size:32px}.footer-inner{grid-template-columns:1fr}}
@media(max-width:520px){.grid,.category-grid{grid-template-columns:1fr 1fr;gap:10px}.container{padding:0 12px}.header-inner{gap:12px}.logo{font-size:20px}}
