:root{
	--bg: #f6f7fb;
	--card: #ffffff;
	--muted: #6b6b7a;
	--accent: #4f46e5;
	--nav-height: 64px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:var(--bg);
	color:#0f172a;
}

.site-nav{
	position:fixed;top:0;left:0;right:0;
	height:var(--nav-height);
	display:flex;align-items:center;justify-content:space-between;
	padding:0 20px;background:#fff;z-index:40;
	box-shadow:0 2px 8px rgba(15,23,42,0.06);
}
.nav-left,.nav-center,.nav-right{display:flex;align-items:center}
.logo{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem}
.logo-dot{color:var(--accent)}
.nav-center{flex:1;justify-content:center;font-weight:600}

.main-content{padding-top:calc(var(--nav-height) + 20px);padding-bottom:60px}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.product-grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;
}
.product-card{display:block;background:var(--card);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 8px 24px rgba(15,23,42,0.04)}
.product-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,0.08)}
.product-media{width:100%;aspect-ratio:1/1;background:#eef2ff;display:flex;align-items:center;justify-content:center}
.product-media img{width:100%;height:100%;object-fit:cover;display:block}
.product-meta{padding:14px 12px;text-align:center}
.product-title{margin:0;font-size:1rem;font-weight:600}

.site-footer{margin-top:40px;padding:28px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700}
.legal{color:var(--muted);font-size:0.9rem}

/* Responsive */
@media (max-width:900px){
	.product-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
	.product-grid{grid-template-columns:1fr}
	.nav-center{font-size:0.98rem}
	.site-nav{padding:0 12px}
}