:root{
	--bg: #f6f7fb;
	--card: #ffffff;
	--accent: #0d6efd;
	--muted: #6b7280;
	--text: #0f172a;
	--surface-shadow: rgba(15,23,42,0.06);
}

/* Base ---------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family:Inter,Segoe UI,Arial,sans-serif;
	background:var(--bg);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header -------------------------- */
.site-header{background:transparent;padding:18px 0}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.brand h1{font-size:20px;margin:0}

.header-actions{display:flex;align-items:center;gap:12px}
#search{padding:8px 12px;border-radius:8px;border:1px solid #e6e9ef;min-width:220px}
.cart-btn{background:#fff;border:1px solid #e6e9ef;padding:8px 12px;border-radius:8px;cursor:pointer;position:relative}
#cart-count{background:var(--accent);color:#fff;padding:2px 6px;border-radius:999px;margin-left:8px;font-weight:600}

/* Hero / Banner ------------------- */
.hero{margin-top:8px;background:linear-gradient(90deg,#fff 60%,rgba(13,110,253,0.04));padding:28px 0}
.hero-inner{display:flex;gap:24px;align-items:center}
.hero-text h2{margin:0;font-size:28px}
.hero-text p{color:var(--muted);margin-top:8px}
.hero-img{width:420px;height:200px;object-fit:cover;border-radius:8px;box-shadow:0 8px 24px rgba(13,110,253,0.08)}

/* Sections ------------------------ */
.section-title{margin:20px 0 12px;font-size:18px}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;padding-bottom:40px}

/* Product Card -------------------- */
.card{
	background:var(--card);
	padding:16px;
	border-radius:12px;
	box-shadow:0 6px 18px var(--surface-shadow);
	transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(15,23,42,0.08)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px}
.card h3{margin:12px 0 6px;font-size:16px}
.meta{display:flex;justify-content:space-between;align-items:center}
.price{color:var(--accent);font-weight:700}
.card .actions{display:flex;gap:8px;margin-top:12px}

/* Buttons ------------------------- */
.btn{padding:8px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn.secondary{background:#fff;border:1px solid #e6e9ef}
.btn.primary{background:var(--accent);color:#fff}
.primary{background:var(--accent);color:#fff;border-radius:8px;padding:10px 14px;border:0;cursor:pointer}

/* Modal / Cart -------------------- */
.modal{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(2,6,23,0.45);display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-content{background:#fff;padding:18px;border-radius:12px;width:92%;max-width:560px}
.modal-header{display:flex;justify-content:space-between;align-items:center}
.close{background:transparent;border:0;font-size:20px;cursor:pointer}
.cart-list{margin-top:12px;max-height:320px;overflow:auto}
.cart-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f5f9}
.cart-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.cart-total{font-weight:700}

/* Footer ------------------------- */
.site-footer{padding:24px 0;text-align:center;color:var(--muted)}

/* Responsive ---------------------- */
@media (max-width:720px){
	.hero-inner{flex-direction:column}
	.hero-img{width:100%;height:180px}
	#search{min-width:140px}
}

/* Utility helpers (small, commonly used) */
.hidden{display:none}