*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background:#f4f6f8;color:#17202a}header{height:64px;background:#111827;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 5vw}header a{color:white;text-decoration:none}header span{opacity:.6;font-weight:400}main{max-width:1400px;margin:auto;padding:32px 5vw}.hero{background:white;padding:28px;border-radius:18px;box-shadow:0 4px 20px #0000000a}.hero h1{margin:0 0 5px}.hero p{color:#64748b}form{display:flex;gap:10px;flex-wrap:wrap}input,select,button{padding:13px 15px;border:1px solid #dbe1e8;border-radius:10px;font-size:15px}input[name=q]{flex:1;min-width:260px}button,.scan{background:#111827;color:white;border:0;cursor:pointer}.toolbar{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}.card{background:white;border-radius:14px;padding:18px;text-decoration:none;color:inherit;border:1px solid #e8edf2;transition:.15s}.card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000000d}.card h3{margin:8px 0}.cat{font-size:11px;font-weight:800;color:#64748b;letter-spacing:.08em}.meta{border-top:1px solid #eef2f6;margin-top:14px;padding-top:12px;color:#64748b;display:flex;justify-content:space-between}.product{display:grid;grid-template-columns:300px 1fr;gap:30px;background:white;padding:28px;border-radius:18px}.photo{height:260px;border:2px dashed #d6dde6;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}.photo div{font-size:55px}.details{background:white;margin-top:18px;padding:28px;border-radius:18px}.attrs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#e9eef3}.attrs div{background:white;padding:12px;display:flex;justify-content:space-between;gap:20px}.attrs span{text-align:right;color:#475569}@media(max-width:700px){header{padding:0 18px}main{padding:18px}.product{grid-template-columns:1fr}.photo{height:220px}.attrs{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.hero{padding:20px}}