:root{--bg:#ffffff;--fg:#111827;--muted:#6b7280;--brand:#047857;--card:#fff;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
.header{position:sticky;top:0;background:#ffffffcc;backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid #e5e7eb}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:10px}
.nav a.active,.nav a:hover{background:#ecfdf5;color:#065f46}
.brand{display:flex;align-items:center;gap:10px;padding:14px 0}
.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;background:#ecfdf5;color:#065f46;font-size:12px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;padding:56px 0}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card .p{padding:16px}
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #e5e7eb;background:white}
.btn.primary{background:#065f46;color:white;border-color:#065f46}
.footer{border-top:1px solid #e5e7eb;margin-top:40px;background:linear-gradient(#fff,#f0fdf4)}
.footer .cols{display:grid;gap:24px;grid-template-columns:repeat(4,minmax(0,1fr));padding:32px 0}
.kicker{font-size:14px;color:var(--muted)}
.muted{color:var(--muted)}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.prod-card{border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:white;display:flex;flex-direction:column}
.prod-card .imgwrap{aspect-ratio:4/3;display:grid;place-items:center;background:white}
.prod-card img{width:100%;height:100%;object-fit:contain}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tag{border:1px solid #e5e7eb;border-radius:999px;padding:4px 10px;font-size:12px;color:#374151}
.controls{display:grid;gap:8px;grid-template-columns:1fr 160px 160px}
input,select,textarea{padding:10px 12px;border:1px solid #e5e7eb;border-radius:12px;width:100%}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:32px 0}
@media(max-width:900px){.hero{grid-template-columns:1fr}.detail{grid-template-columns:1fr}.footer .cols{grid-template-columns:1fr 1fr}}