/* Global app styles - modernized */
:root{
		--brand-blue:#0d6efd;
		--brand-green:#10b981;
		--bg:#f7f8fb;
		--muted:#64748b;
		--card:#ffffff;
		--radius:12px;
}
html,body{height:100%;}
body{font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;background:var(--bg);margin:0;color:#0f172a}

/* Fixed header */
.topbar{position:sticky;top:0;left:0;right:0;z-index:1200;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(2,8,23,.06)}
body{padding-top:84px} /* header height */

/* Hero */
.hero{margin-top:6px;padding:54px 0;background:linear-gradient(180deg,rgba(13,110,253,0.04),rgba(16,185,129,0.02))}
.hero-card{display:flex;gap:28px;align-items:center;padding:14px}
.hero-illustration{flex:1}
.hero-content{flex:1}
.hero .title{font-size:40px;font-weight:900;margin:0}
.hero .subtitle{color:var(--muted);font-weight:700;margin-top:8px}

/* Categories scroll */
.chips{overflow:auto;white-space:nowrap;padding-bottom:8px}
.chip{display:inline-block;margin:0 6px}

/* Product grid */
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
@media(max-width:1200px){.p-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}
@media(max-width:768px){.p-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.p-grid{grid-template-columns:1fr}}

/* Card modern touch */
.p-card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(15,23,42,.04);transition:box-shadow .18s ease,transform .12s ease}
.p-card:hover{box-shadow:0 12px 40px rgba(2,6,23,.06);transform:translateY(-6px)}
.p-card img{width:100%;height:180px;object-fit:cover}
.p-card .title{font-weight:800}
.p-card .meta{color:var(--muted);font-weight:700}

.product-badge{position:absolute;top:12px;left:12px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));color:#fff;padding:6px 10px;border-radius:999px;font-weight:800}

.cart-drawer{position:fixed;right:18px;bottom:18px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 8px 40px rgba(17,24,39,.08)}
.cart-btn{background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));color:#fff;border:none;border-radius:999px;padding:10px 16px}

.footer{padding:36px 0;background:#fff;border-top:1px solid rgba(15,23,42,.04);margin-top:36px}

@media (max-width:768px){
	.topbar .nav-link.d-none.d-md-inline{display:none!important}
	.hero{padding:36px 0}
	.p-card img{height:160px}
}