:root {
    --primary: #4FC3F7;
    --primary-dark: #0288D1;
    --accent: #FF6F00;
    --bg: #F5F9FC;
    --card-bg: rgba(255,255,255,0.8);
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: #333;
}
a { text-decoration: none; color: inherit; }

/* নেভিগেশন */
.navbar {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    position: sticky; top:0; z-index:1000;
    box-shadow: var(--shadow);
}
.navbar .logo { display: flex; align-items: center; gap: 10px; }
.navbar .logo img { height:40px; width:40px; border-radius:50%; object-fit:cover; }
.navbar .logo span { font-weight:bold; font-size:1.2rem; color: var(--primary-dark); }
.navbar .menu-btn { font-size:1.8rem; cursor:pointer; }
.navbar .login-btn {
    background:var(--primary); color:white; border:none; border-radius:20px;
    padding:8px 20px; font-weight:bold; cursor:pointer; transition:0.3s; display:inline-block;
}
.navbar .login-btn:hover { background:var(--primary-dark); transform:scale(1.05); }

/* সাইডবার (ক্যাটাগরি মেনু) */
.sidebar {
    height:100%; width:0; position:fixed; z-index:2000; top:0; left:0;
    background:white; overflow-x:hidden; transition:0.3s; padding-top:60px;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}
.sidebar.open { width:280px; }
.sidebar .closebtn {
    position:absolute; top:15px; right:20px; font-size:36px; cursor:pointer;
}
.sidebar h3 { padding:20px; color:var(--primary-dark); }
.sidebar a {
    display:block; padding:15px 20px; font-size:1rem;
    border-bottom:1px solid #eee; transition:0.2s;
}
.sidebar a:hover { background:var(--bg); color:var(--primary-dark); }

/* স্লাইডার */
.slider-container { position:relative; width:100%; max-height:350px; overflow:hidden; margin-top:10px; }
.slider-container img { width:100%; height:350px; object-fit:cover; transition:0.5s ease-in-out; }
.slider-dots { text-align:center; margin-top:10px; }
.slider-dots span {
    display:inline-block; width:12px; height:12px; background:#ccc;
    border-radius:50%; margin:0 5px; cursor:pointer;
}
.slider-dots .active { background: var(--primary-dark); }

/* পপআপ */
.popup-modal {
    display:none; position:fixed; z-index:1500; left:0; top:20%; width:100%;
    animation: fadeIn 0.5s;
}
.popup-content {
    background:white; max-width:400px; margin:auto; padding:25px;
    border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.3); text-align:center;
    position:relative;
}
.close-popup { position:absolute; top:10px; right:15px; font-size:24px; cursor:pointer; color:#999; }

/* ক্যাটাগরি স্ক্রল */
.cat-scroll {
    display: flex; overflow-x: auto; gap:15px; padding:15px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.cat-item {
    flex: 0 0 auto; width:85px; text-align:center;
    background: var(--card-bg); border-radius: var(--radius); padding:12px 8px;
    backdrop-filter: blur(5px); box-shadow: var(--shadow); transition:0.3s;
    cursor:pointer;
}
.cat-item:hover { transform:translateY(-5px); box-shadow:0 8px 20px rgba(0,0,0,0.15); }
.cat-item img { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.cat-item span { display:block; font-size:0.8rem; margin-top:5px; font-weight:500; }

/* হট সেলস ও প্রোডাক্ট গ্রিড */
.hot-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap:15px; padding:15px;
}
.product-card {
    background: var(--card-bg); border-radius: var(--radius); padding:10px;
    backdrop-filter: blur(10px); box-shadow: var(--shadow); transition:0.3s;
    text-align:center;
}
.product-card:hover { transform:translateY(-5px); }
.product-card img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.product-card h3 { font-size:0.95rem; margin-bottom:5px; }
.price { font-weight:bold; color:var(--accent); font-size:1.1rem; margin:5px 0; }
.buy-btn, .btn {
    background:var(--primary); color:white; border:none; padding:10px 18px;
    border-radius:20px; cursor:pointer; transition:0.3s; display:inline-block; font-weight:bold;
}
.buy-btn:hover, .btn:hover { background:var(--primary-dark); transform:scale(1.03); }

/* প্রোডাক্ট ডিটেইল */
.product-detail { max-width:600px; margin:20px auto; background:white; padding:20px; border-radius:var(--radius); }
.product-detail .image-gallery img { border-radius:10px; }
.thumb { border:2px solid transparent; cursor:pointer; }
.thumb:hover { border-color:var(--primary); }

/* ফর্ম */
input, textarea {
    width:100%; padding:12px; margin-bottom:15px;
    border:1px solid #ccc; border-radius:8px; font-size:1rem;
}
button { cursor:pointer; }

/* বটম নেভিগেশন */
.bottom-nav {
    position:fixed; bottom:0; left:0; width:100%; background:white;
    display:flex; justify-content: space-around; padding:10px 0;
    box-shadow:0 -2px 10px rgba(0,0,0,0.1); z-index:999;
}
.bottom-nav a {
    text-decoration:none; color:#666; display:flex; flex-direction:column;
    align-items:center; font-size:0.8rem;
}
.bottom-nav a i { font-size:1.5rem; }
.bottom-nav a.active { color:var(--primary-dark); }

/* অ্যানিমেশন */
.fade-in { animation: fadeIn 0.6s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0% { transform:scale(1); } 50% { transform:scale(1.05); } 100% { transform:scale(1); } }

/* মোবাইল */
@media (max-width: 768px) {
    .navbar { padding:10px; }
    .slider-container img { height:200px; }
    .hot-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Header fix: menu button beside logo */
.nav-left{display:flex;align-items:center;gap:10px;min-width:0}.navbar{gap:12px}.navbar .logo{min-width:0}.navbar .logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navbar .menu-btn{width:42px;height:42px;border:1px solid rgba(2,136,209,.14);border-radius:12px;background:#eef8ff;color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;cursor:pointer;box-shadow:0 3px 10px rgba(2,136,209,.08);transition:.25s;flex:0 0 auto}.navbar .menu-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}@media(max-width:480px){.navbar .logo span{max-width:135px}.navbar .login-btn{padding:8px 12px;font-size:.85rem}.nav-left{gap:7px}.navbar .menu-btn{width:38px;height:38px}}