website

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>ShivBazaar</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Lora:ital,wght@0,400;1,400;1,600&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<style>
:root {
--bg:#0f0c08; --surface:#161208; --card:#1c1610;
--border:#2a2218; --gold:#f0a500; --saffron:#e86a2a;
--cream:#f5ede0; --text:#f0e8d8; --muted:#7a6a58;
--ff-display:'Syne',sans-serif; --ff-serif:'Lora',serif;
--ff-body:'Outfit',sans-serif; --r:5px;
--ease:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--ff-body);overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:999;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
opacity:0.03;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}
a{text-decoration:none;color:inherit;}
button{font-family:var(--ff-body);}

@keyframes fadeUp{from{opacity:0;transform:translateY(32px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes spinRev{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}

.sb-reveal{opacity:0;transform:translateY(28px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.sb-reveal.visible{opacity:1;transform:none;}
.sb-reveal-d1{transition-delay:0.1s;}
.sb-reveal-d2{transition-delay:0.2s;}
.sb-reveal-d3{transition-delay:0.3s;}

/* ── ANNOUNCE BAR ── */
#announce-bar{background:linear-gradient(90deg,var(--saffron),var(--gold));color:#0f0c08;text-align:center;padding:10px 16px;font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;}
#announce-bar span{margin:0 20px;}

/* ── NAVBAR ── */
#navbar{position:sticky;top:0;z-index:200;background:rgba(15,12,8,0.8);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:all 0.4s ease;}
#navbar.scrolled{background:rgba(15,12,8,0.95);border-bottom-color:var(--border);box-shadow:0 4px 40px rgba(0,0,0,0.5);}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:68px;}
.nav-logo{font-family:var(--ff-display);font-size:26px;font-weight:800;letter-spacing:0.04em;color:var(--text);}
.nav-logo .gold{color:var(--gold);}
.nav-logo .saffron{color:var(--saffron);margin-left:2px;}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center;}
.nav-links a{color:var(--muted);font-size:13px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;transition:color 0.3s;}
.nav-links a:hover{color:var(--gold);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.nav-icon-btn{background:none;border:none;color:var(--muted);cursor:pointer;padding:8px;display:flex;align-items:center;transition:color 0.3s;}
.nav-icon-btn:hover{color:var(--gold);}
.nav-icon-btn.heart:hover{color:var(--saffron);}
#cart-btn{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--border);color:var(--text);padding:8px 18px;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.3s;}
#cart-btn:hover{border-color:var(--gold);color:var(--gold);}
#cart-count{background:var(--gold);color:#0f0c08;font-size:10px;font-weight:800;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.hamburger{background:none;border:none;cursor:pointer;padding:4px;display:flex;flex-direction:column;gap:5px;}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--text);transition:all 0.3s;}

/* ── MOBILE MENU ── */
#mobile-menu{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;padding:80px 40px 40px;animation:fadeIn 0.3s ease;display:none;}
#mobile-menu.open{display:flex;}
#menu-close{position:absolute;top:24px;right:28px;background:none;border:none;color:var(--text);font-size:28px;cursor:pointer;}
#mobile-menu ul{list-style:none;display:flex;flex-direction:column;}
#mobile-menu a{font-family:var(--ff-display);font-size:52px;letter-spacing:0.02em;color:var(--text);display:block;padding:10px 0;border-bottom:1px solid var(--border);transition:color 0.3s;}
#mobile-menu a:hover{color:var(--gold);}

/* ── HERO ── */
#hero{min-height:92vh;display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 70% 50%,rgba(240,165,0,0.06) 0%,transparent 70%);pointer-events:none;}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:80px 48px 80px 32px;max-width:700px;animation:fadeUp 0.9s ease both;}
.hero-tag-line{display:flex;align-items:center;gap:12px;margin-bottom:24px;}
.hero-tag-line .line{width:40px;height:1px;background:var(--gold);}
.hero-tag-line span{font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);}
.hero-h1{font-family:var(--ff-display);font-size:clamp(60px,7.5vw,108px);line-height:0.88;letter-spacing:0.01em;font-weight:800;margin-bottom:12px;}
.hero-h1 .italic{font-family:var(--ff-serif);font-style:italic;color:var(--gold);font-size:0.88em;}
.hero-p{color:var(--muted);max-width:420px;font-size:15px;line-height:1.75;margin-bottom:40px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:40px;margin-top:56px;padding-top:28px;border-top:1px solid var(--border);}
.hero-stat-n{font-family:var(--ff-display);font-size:34px;color:var(--gold);line-height:1;font-weight:800;}
.hero-stat-l{font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-top:4px;}
.hero-right{position:relative;overflow:hidden;animation:fadeIn 1.2s ease both 0.2s;}
.hero-right-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(232,106,42,0.08) 0%,transparent 55%);z-index:1;pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%;padding:40px 0 40px 24px;}
.hero-main-img{grid-column:1/-1;border-radius:10px;overflow:hidden;height:300px;background:var(--card);position:relative;}
.hero-main-img img{width:100%;height:100%;object-fit:cover;}
.hero-main-img .badge{position:absolute;top:14px;right:14px;background:var(--gold);color:#0f0c08;font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:5px 12px;border-radius:2px;}
.hero-sub-img{border-radius:10px;overflow:hidden;height:200px;background:var(--card);}
.hero-sub-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.hero-sub-img:hover img{transform:scale(1.06);}
.hero-deco{position:absolute;border-radius:50%;pointer-events:none;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-body);font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:14px 28px;border-radius:var(--r);border:none;cursor:pointer;transition:all 0.3s var(--ease);text-decoration:none;}
.btn-primary{background:var(--gold);color:#0f0c08;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(240,165,0,0.3);}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--border);}
.btn-outline:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,0.3);border-color:var(--gold);}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}

/* ── TAG ── */
.tag{display:inline-block;font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:4px 12px;border-radius:2px;}

/* ── MARQUEE ── */
#marquee-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:13px 0;overflow:hidden;background:var(--surface);}
.marquee-inner{display:flex;gap:48px;width:max-content;animation:marquee 32s linear infinite;}
.marquee-item{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--saffron);display:inline-block;flex-shrink:0;}

/* ── CATEGORIES ── */
#categories{padding:100px 0;}
.section-inner{max-width:1280px;margin:0 auto;padding:0 32px;}
.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap;}
.section-h2{font-family:var(--ff-display);font-size:clamp(40px,5vw,68px);line-height:0.92;letter-spacing:0.01em;font-weight:800;margin:12px 0 0;}
.section-h2 .gold{color:var(--gold);}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.cat-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;transition:transform 0.3s var(--ease);}
.cat-card.span2{grid-column:span 2;aspect-ratio:auto;min-height:460px;}
.cat-card:hover{transform:translateY(-4px);}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.7s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.88) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;}
.cat-name{font-family:var(--ff-display);font-size:26px;letter-spacing:0.03em;margin-bottom:5px;font-weight:700;}
.cat-card.span2 .cat-name{font-size:32px;}
.cat-count{font-size:12px;color:rgba(255,255,255,0.5);letter-spacing:0.1em;text-transform:uppercase;}
.cat-arrow{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.1);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(6px);transition:all 0.3s var(--ease);font-size:16px;}
.cat-card:hover .cat-arrow{opacity:1;transform:translateY(0);}

/* ── PRODUCTS ── */
#products{padding:100px 0;background:var(--surface);}
.filter-bar{display:flex;gap:8px;margin-bottom:40px;flex-wrap:wrap;}
.filter-btn{font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:8px 20px;border-radius:100px;border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all 0.3s;}
.filter-btn.active{border-color:var(--gold);background:var(--gold);color:#0f0c08;}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.prod-card{background:var(--card);border-radius:10px;overflow:hidden;border:1.5px solid var(--border);transition:all 0.35s var(--ease);cursor:pointer;}
.prod-card:hover{border-color:var(--gold);transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,0.5);}
.prod-img-wrap{position:relative;aspect-ratio:1;overflow:hidden;background:#1a1408;}
.prod-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.prod-card:hover .prod-img-wrap img{transform:scale(1.08);}
.prod-badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:4px 10px;border-radius:2px;}
.badge-new{background:var(--gold);color:#0f0c08;}
.badge-hot{background:var(--saffron);color:#fff;}
.badge-sale{background:#c0392b;color:#fff;}
.prod-actions{position:absolute;bottom:0;left:0;right:0;padding:16px 12px;display:flex;gap:8px;background:linear-gradient(to top,rgba(0,0,0,0.95) 0%,transparent 100%);transform:translateY(100%);transition:transform 0.35s var(--ease);}
.prod-card:hover .prod-actions{transform:translateY(0);}
.add-btn{flex:1;background:var(--gold);color:#0f0c08;border:none;border-radius:4px;font-size:11px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:10px 6px;cursor:pointer;transition:background 0.2s;}
.add-btn:hover{background:#f5c840;}
.wish-btn{flex:0 0 auto;background:rgba(255,255,255,0.08);border:none;color:var(--text);padding:10px 12px;border-radius:4px;cursor:pointer;font-size:14px;}
.prod-info{padding:16px;}
.prod-brand{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.prod-name{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;}
.prod-price{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.price-cur{font-size:16px;font-weight:700;color:var(--gold);}
.price-old{font-size:13px;color:var(--muted);text-decoration:line-through;}
.stars{display:flex;gap:2px;}
.star{font-size:12px;}
.star.on{color:var(--gold);}
.star.off{color:var(--border);}
.reviews{font-size:11px;color:var(--muted);margin-left:2px;}
.load-more{text-align:center;margin-top:48px;}

/* ── PROMO BANNER ── */
#promo{padding:100px 0;background:linear-gradient(135deg,#100a00 0%,#1c1200 40%,var(--bg) 100%);position:relative;overflow:hidden;}
.promo-watermark{position:absolute;right:-60px;top:50%;transform:translateY(-50%);font-family:var(--ff-display);font-size:220px;color:rgba(240,165,0,0.04);line-height:1;pointer-events:none;user-select:none;white-space:nowrap;}
.promo-inner{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;flex-wrap:wrap;}
.countdown{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;}
.cd-box{background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:16px 20px;text-align:center;min-width:76px;}
.cd-num{font-family:var(--ff-display);font-size:38px;line-height:1;color:var(--gold);font-weight:800;}
.cd-label{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.spin-circle{width:240px;height:240px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--saffron));display:flex;align-items:center;justify-content:center;animation:spin 25s linear infinite;flex-shrink:0;}
.spin-inner{text-align:center;animation:spinRev 25s linear infinite;color:#0f0c08;}
.spin-big{font-family:var(--ff-display);font-size:80px;line-height:0.85;font-weight:800;}
.spin-off{font-size:13px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;}
.spin-sub{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(0,0,0,0.4);margin-top:6px;}

/* ── FEATURES ── */
#about{padding:80px 0;border-top:1px solid var(--border);}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1.5px solid var(--border);border-radius:12px;overflow:hidden;}
.feat-card{background:var(--surface);padding:40px 28px;display:flex;flex-direction:column;gap:12px;transition:background 0.3s;}
.feat-card:hover{background:var(--card);}
.feat-icon{width:50px;height:50px;border-radius:10px;background:rgba(240,165,0,0.1);border:1px solid rgba(240,165,0,0.2);display:flex;align-items:center;justify-content:center;font-size:22px;}
.feat-title{font-size:15px;font-weight:700;}
.feat-desc{font-size:13px;color:var(--muted);line-height:1.65;}

/* ── TESTIMONIALS ── */
#testimonials{padding:100px 0;}
.testi-header{text-align:center;margin-bottom:56px;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.testi-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:32px;transition:border-color 0.3s;}
.testi-card:hover{border-color:rgba(240,165,0,0.4);}
.testi-stars{display:flex;gap:2px;margin-bottom:12px;}
.testi-quote{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:24px;font-style:italic;}
.testi-open{color:var(--gold);font-size:28px;line-height:0;vertical-align:-10px;margin-right:4px;font-family:var(--ff-serif);}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:44px;height:44px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.testi-name{font-size:14px;font-weight:600;}
.testi-loc{font-size:12px;color:var(--muted);}

/* ── NEWSLETTER ── */
#contact{padding:100px 0;background:var(--surface);border-top:1px solid var(--border);}
.news-inner{max-width:640px;margin:0 auto;padding:0 32px;text-align:center;}
.news-p{color:var(--muted);margin-bottom:36px;line-height:1.7;font-size:15px;}
.news-form{display:flex;gap:8px;max-width:480px;margin:0 auto;}
.news-input{flex:1;background:var(--card);border:1.5px solid var(--border);color:var(--text);padding:14px 20px;border-radius:var(--r);font-family:var(--ff-body);font-size:14px;outline:none;transition:border-color 0.3s;}
.news-input:focus{border-color:var(--gold);}
.news-note{font-size:12px;color:var(--muted);margin-top:12px;}

/* ── CART DRAWER ── */
#cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:400;opacity:0;pointer-events:none;transition:opacity 0.35s;}
#cart-overlay.open{opacity:1;pointer-events:all;}
#cart-drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--surface);border-left:1.5px solid var(--border);z-index:401;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.45s var(--ease);}
#cart-drawer.open{transform:translateX(0);}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--border);}
.cart-title{font-family:var(--ff-display);font-size:22px;font-weight:700;letter-spacing:0.04em;}
.cart-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:22px;transition:color 0.3s;}
.cart-close:hover{color:var(--gold);}
.cart-body{flex:1;overflow-y:auto;padding:24px;}
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--muted);text-align:center;}
.cart-empty-icon{font-size:52px;opacity:0.3;}
.cart-item{display:grid;grid-template-columns:70px 1fr auto;gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--border);}
.cart-item-img{border-radius:8px;overflow:hidden;aspect-ratio:1;background:var(--card);}
.cart-item-img img{width:100%;height:100%;object-fit:cover;}
.cart-item-name{font-size:14px;font-weight:600;margin-bottom:3px;}
.cart-item-size{font-size:12px;color:var(--muted);margin-bottom:8px;}
.qty-ctrl{display:flex;align-items:center;border:1px solid var(--border);border-radius:4px;overflow:hidden;width:fit-content;}
.qty-btn{background:none;border:none;color:var(--muted);padding:4px 10px;cursor:pointer;font-size:16px;}
.qty-num{font-size:13px;padding:4px 8px;border-left:1px solid var(--border);border-right:1px solid var(--border);}
.cart-item-price{font-size:15px;font-weight:700;color:var(--gold);}
.cart-footer{padding:24px;border-top:1px solid var(--border);}
.cart-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.cart-total-label{font-size:15px;}
.cart-total-amt{font-family:var(--ff-display);font-size:26px;color:var(--gold);font-weight:800;}
.checkout-btn{width:100%;background:linear-gradient(135deg,var(--gold),var(--saffron));color:#0f0c08;border:none;border-radius:var(--r);font-family:var(--ff-body);font-size:13px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:16px;cursor:pointer;transition:opacity 0.2s;}
.checkout-btn:hover{opacity:0.88;}
.cart-note{font-size:11px;color:var(--muted);text-align:center;margin-top:10px;}

/* ── FOOTER ── */
footer{background:#060400;border-top:1px solid var(--border);padding:80px 0 40px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:60px;}
.foot-brand{font-family:var(--ff-display);font-size:30px;font-weight:800;letter-spacing:0.04em;margin-bottom:16px;}
.foot-p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:24px;max-width:280px;}
.foot-socials{display:flex;gap:10px;}
.social-link{width:36px;height:36px;border-radius:8px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.3s;color:var(--muted);}
.social-link:hover{border-color:var(--gold);background:rgba(240,165,0,0.05);}
.foot-col-title{font-size:11px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--text);margin-bottom:20px;}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:10px;}
.foot-links a{color:var(--muted);font-size:14px;transition:color 0.3s;}
.foot-links a:hover{color:var(--gold);}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:28px;border-top:1px solid var(--border);flex-wrap:wrap;gap:16px;}
.foot-copy{font-size:12px;color:var(--muted);}
.foot-copy strong{color:var(--gold);}
.pay-badges{display:flex;gap:8px;flex-wrap:wrap;}
.pay-badge{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:0.04em;color:var(--muted);}

/* ── TOAST ── */
#toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--gold),var(--saffron));color:#0f0c08;font-size:13px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:14px 28px;border-radius:100px;z-index:9000;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s;}
#toast.show{animation:toastIn 0.4s var(--ease) both;opacity:1;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
.prod-grid,.cat-grid{grid-template-columns:repeat(2,1fr);}
.feat-grid,.testi-grid{grid-template-columns:repeat(2,1fr);}
.foot-grid{grid-template-columns:1fr 1fr;}
#hero{grid-template-columns:1fr;}
.hero-right{display:none;}
.promo-inner{grid-template-columns:1fr;}
.spin-circle{display:none;}
}
@media(max-width:768px){
.nav-links{display:none;}
.prod-grid,.feat-grid,.testi-grid,.cat-grid{grid-template-columns:1fr;}
.foot-grid{grid-template-columns:1fr;}
.news-form{flex-direction:column;}
.hero-stats{flex-wrap:wrap;}
}
</style>
</head>
<body>

<div id="announce-bar">
<span>🪔 Free shipping over $50</span>
<span>✦</span>
<span>Use code SHIV20 for 20% off</span>
<span>✦</span>
<span>⚡ Same-day dispatch on in-stock items</span>
</div>

<nav id="navbar">
<div class="nav-inner">
<a href="#" class="nav-logo">SHIV<span class="gold">BAZAAR</span><span class="saffron">🪔</span></a>
<ul class="nav-links">
<li><a href="#categories">Shop</a></li>
<li><a href="#products">New Arrivals</a></li>
<li><a href="#promo">Deals</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="nav-actions">
<button class="nav-icon-btn" aria-label="Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</button>
<button class="nav-icon-btn heart" aria-label="Wishlist">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
</button>
<button id="cart-btn" onclick="toggleCart()">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
Bag <span id="cart-count">0</span>
</button>
<button class="hamburger" onclick="document.getElementById('mobile-menu').classList.add('open')" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</nav>

<div id="mobile-menu">
<button id="menu-close" onclick="document.getElementById('mobile-menu').classList.remove('open')">✕</button>
<ul>
<li><a href="#categories" onclick="document.getElementById('mobile-menu').classList.remove('open')">Shop</a></li>
<li><a href="#products" onclick="document.getElementById('mobile-menu').classList.remove('open')">New Arrivals</a></li>
<li><a href="#promo" onclick="document.getElementById('mobile-menu').classList.remove('open')">Deals</a></li>
<li><a href="#about" onclick="document.getElementById('mobile-menu').classList.remove('open')">About</a></li>
<li><a href="#contact" onclick="document.getElementById('mobile-menu').classList.remove('open')">Contact</a></li>
</ul>
</div>

<section id="hero">
<div class="hero-bg"></div>
<div class="hero-left">
<div class="hero-tag-line">
<div class="line"></div>
<span>Premium Drop Shipping</span>
</div>
<h1 class="hero-h1">INDIA'S<br/><span class="italic">finest</span><br/>DELIVERED.</h1>
<p class="hero-p">ShivBazaar brings you thousands of curated premium products — from fashion to electronics — shipped directly to your doorstep with Shopify's seamless checkout.</p>
<div class="hero-btns">
<button class="btn btn-primary" onclick="document.getElementById('products').scrollIntoView({behavior:'smooth'})">Shop Now →</button>
<a href="#categories" class="btn btn-outline">Browse Categories</a>
</div>
<div class="hero-stats">
<div><div class="hero-stat-n">50K+</div><div class="hero-stat-l">Products</div></div>
<div><div class="hero-stat-n">120+</div><div class="hero-stat-l">Countries</div></div>
<div><div class="hero-stat-n">4.9★</div><div class="hero-stat-l">Avg Rating</div></div>
</div>
</div>
<div class="hero-right">
<div class="hero-right-overlay"></div>
<div class="hero-grid">
<div class="hero-main-img">
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=900&q=80" alt="Collection"/>
<div class="badge">New Season</div>
</div>
<div class="hero-sub-img"><img src="https://images.unsplash.com/photo-1583391733956-6c78276477e2?w=400&q=80" alt=""/></div>
<div class="hero-sub-img"><img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=400&q=80" alt=""/></div>
</div>
</div>
<div class="hero-deco" style="bottom:-80px;right:-80px;width:400px;height:400px;border:1px solid rgba(240,165,0,0.08);"></div>
<div class="hero-deco" style="bottom:-60px;right:-60px;width:320px;height:320px;border:1px solid rgba(240,165,0,0.05);"></div>
</section>

<div id="marquee-bar">
<div class="marquee-inner" id="marquee-inner"></div>
</div>

<section id="categories" style="padding:100px 0;">
<div class="section-inner">
<div class="section-header sb-reveal">
<div>
<span class="tag">Browse</span>
<h2 class="section-h2">SHOP BY<br/><span class="gold">CATEGORY</span></h2>
</div>
<a href="#products" class="btn btn-outline">View All →</a>
</div>
<div class="cat-grid sb-reveal" id="cat-grid"></div>
</div>
</section>

<section id="products">
<div class="section-inner">
<div class="sb-reveal" style="margin-bottom:48px;">
<span class="tag">Collection</span>
<h2 class="section-h2" style="margin:12px 0 12px;">TRENDING<br/><span class="gold">PRODUCTS</span></h2>
<p style="color:var(--muted);font-size:15px;line-height:1.7;max-width:440px;">Handpicked bestsellers shipped directly to you through our Shopify-powered store.</p>
</div>
<div class="filter-bar sb-reveal" id="filter-bar"></div>
<div class="prod-grid" id="prod-grid"></div>
<div class="load-more sb-reveal"><button class="btn btn-outline">Load More Products ↓</button></div>
</div>
</section>

<section id="promo">
<div class="promo-watermark">50% OFF</div>
<div class="section-inner">
<div class="promo-inner">
<div class="sb-reveal">
<span class="tag">Limited Time</span>
<h2 class="section-h2" style="margin:16px 0 16px;">FLASH <span class="gold">SALE</span><br/>ENDS SOON</h2>
<p style="color:var(--muted);max-width:460px;font-size:15px;line-height:1.7;margin-bottom:32px;">Massive discounts on premium products. Shopify-secured checkout. Don't miss out — these deals disappear when the timer hits zero.</p>
<div class="countdown">
<div class="cd-box"><div class="cd-num" id="cd-h">08</div><div class="cd-label">Hours</div></div>
<div class="cd-box"><div class="cd-num" id="cd-m">47</div><div class="cd-label">Mins</div></div>
<div class="cd-box"><div class="cd-num" id="cd-s">32</div><div class="cd-label">Secs</div></div>
</div>
<a href="#products" class="btn btn-primary">Shop the Sale →</a>
</div>
<div class="sb-reveal sb-reveal-d2" style="display:flex;align-items:center;justify-content:center;">
<div class="spin-circle">
<div class="spin-inner">
<div class="spin-big">50</div>
<div class="spin-off">% OFF</div>
<div class="spin-sub">Selected Items</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="about">
<div class="section-inner">
<div class="feat-grid sb-reveal">
<div class="feat-card"><div class="feat-icon">🚚</div><div class="feat-title">Fast Shipping</div><div class="feat-desc">Free on orders over $50. Express delivery in 120+ countries. Same-day dispatch on in-stock items.</div></div>
<div class="feat-card"><div class="feat-icon">🔒</div><div class="feat-title">Secure Checkout</div><div class="feat-desc">256-bit SSL. Pay via card, PayPal, Apple Pay, or Google Pay through Shopify's trusted platform.</div></div>
<div class="feat-card"><div class="feat-icon">↩️</div><div class="feat-title">Easy Returns</div><div class="feat-desc">30-day hassle-free return policy. Not satisfied? We'll make it right — guaranteed, no questions.</div></div>
<div class="feat-card"><div class="feat-icon">💬</div><div class="feat-title">24/7 Support</div><div class="feat-desc">Our team is available around the clock via live chat, email, or phone. Always here when you need us.</div></div>
</div>
</div>
</section>

<section id="testimonials">
<div class="section-inner">
<div class="testi-header sb-reveal">
<span class="tag">Reviews</span>
<h2 class="section-h2" style="margin:12px 0 0;">LOVED BY<br/><span class="gold">THOUSANDS</span></h2>
</div>
<div class="testi-grid sb-reveal">
<div class="testi-card"><div class="testi-stars">★★★★★</div><p class="testi-quote"><span class="testi-open">"</span>ShivBazaar is the best online shopping experience I've had. The products are premium and arrived in 3 days. Completely blown away!</p><div class="testi-author"><div class="testi-avatar">👩🦱</div><div><div class="testi-name">Priya Sharma</div><div class="testi-loc">Mumbai, India</div></div></div></div>
<div class="testi-card"><div class="testi-stars">★★★★★</div><p class="testi-quote"><span class="testi-open">"</span>I love the Indian-inspired collection here. The silk kurta I ordered is absolutely beautiful and the quality is incredible.</p><div class="testi-author"><div class="testi-avatar">👨</div><div><div class="testi-name">Ravi Mehta</div><div class="testi-loc">London, UK</div></div></div></div>
<div class="testi-card"><div class="testi-stars">★★★★★</div><p class="testi-quote"><span class="testi-open">"</span>Shopify checkout was seamless. ShivBazaar has become my go-to for everything from gadgets to home decor. Highly recommend!</p><div class="testi-author"><div class="testi-avatar">👩</div><div><div class="testi-name">Ananya Gupta</div><div class="testi-loc">Toronto, CA</div></div></div></div>
</div>
</div>
</section>

<section id="contact">
<div class="news-inner">
<div class="sb-reveal">
<span class="tag">Stay in the loop</span>
<h2 class="section-h2" style="margin:16px 0 16px;">GET <span class="gold">EXCLUSIVE</span> DEALS</h2>
<p class="news-p">Subscribe and be first to know about flash sales, new arrivals, and exclusive ShivBazaar coupon codes.</p>
<div class="news-form">
<input type="email" id="news-email" class="news-input" placeholder="your@email.com"/>
<button class="btn btn-primary" onclick="subscribeNewsletter()">Subscribe</button>
</div>
<p class="news-note">No spam, ever. Unsubscribe anytime.</p>
</div>
</div>
</section>

<footer>
<div class="section-inner">
<div class="foot-grid">
<div>
<div class="foot-brand">SHIV<span class="gold">BAZAAR</span> <span style="color:var(--saffron)">🪔</span></div>
<p class="foot-p">Your premium drop shipping destination — thousands of curated products, shipped fast, backed by world-class Shopify-powered checkout.</p>
<div class="foot-socials">
<a href="#" class="social-link">📷</a>
<a href="#" class="social-link">🐦</a>
<a href="#" class="social-link">🎵</a>
<a href="#" class="social-link">👥</a>
</div>
</div>
<div>
<div class="foot-col-title">Shop</div>
<ul class="foot-links">
<li><a href="#">All Products</a></li><li><a href="#">New Arrivals</a></li>
<li><a href="#">Sales & Deals</a></li><li><a href="#">Fashion</a></li>
<li><a href="#">Electronics</a></li><li><a href="#">Home & Living</a></li>
</ul>
</div>
<div>
<div class="foot-col-title">Support</div>
<ul class="foot-links">
<li><a href="#">Track My Order</a></li><li><a href="#">Returns & Refunds</a></li>
<li><a href="#">Shipping Policy</a></li><li><a href="#">Size Guide</a></li>
<li><a href="#">Contact Us</a></li><li><a href="#">FAQs</a></li>
</ul>
</div>
<div>
<div class="foot-col-title">Company</div>
<ul class="foot-links">
<li><a href="#">About Us</a></li><li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li><li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="foot-bottom">
<span class="foot-copy">© 2026 ShivBazaar. All rights reserved. Powered by <strong>Shopify</strong></span>
<div class="pay-badges">
<span class="pay-badge">VISA</span><span class="pay-badge">MC</span>
<span class="pay-badge">AMEX</span><span class="pay-badge">PAYPAL</span>
<span class="pay-badge">APPLE PAY</span><span class="pay-badge">G PAY</span>
</div>
</div>
</div>
</footer>

<div id="cart-overlay" onclick="toggleCart()"></div>
<div id="cart-drawer">
<div class="cart-header">
<span class="cart-title">YOUR BAG 🛍</span>
<button class="cart-close" onclick="toggleCart()">✕</button>
</div>
<div class="cart-body" id="cart-body"></div>
<div class="cart-footer" id="cart-footer" style="display:none;">
<div class="cart-total-row">
<span class="cart-total-label">Subtotal</span>
<span class="cart-total-amt" id="cart-total">$0.00</span>
</div>

<button class="checkout-btn" onclick="window.location.href='https://YOUR-STORE.myshopify.com/cart'">
Checkout via Shopify →
</button>
<p class="cart-note">Taxes & shipping calculated at checkout</p>
</div>
</div>

<div id="toast"></div>

const CATEGORIES = [
{ name:"Fashion", count:"2,400+", img:"https://images.unsplash.com/photo-1583391733956-6c78276477e2?w=700&q=80", span:true },
{ name:"Electronics", count:"8,900+", img:"https://images.unsplash.com/photo-1550009158-9ebf69173e03?w=500&q=80" },
{ name:"Home & Living",count:"5,200+",img:"https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=500&q=80" },
{ name:"Sports", count:"3,100+", img:"https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?w=500&q=80" },
{ name:"Beauty", count:"1,800+", img:"https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=500&q=80" },
];

const MARQUEE_ITEMS = ["Free Returns","Shopify Powered","Secure Checkout","50,000+ Products","Same-Day Dispatch","24/7 Support","Worldwide Shipping","Premium Quality"];
const BADGE_COLORS = { New:{bg:"var(--gold)",color:"#0f0c08"}, Hot:{bg:"var(--saffron)",color:"#fff"}, Sale:{bg:"#c0392b",color:"#fff"} };

/* ── CART STATE ── */
let cart = [];
let cartOpen = false;
let currentFilter = "all";

/* ── MARQUEE BUILD ── */
function buildMarquee() {
const items = [...MARQUEE_ITEMS, ...MARQUEE_ITEMS];
document.getElementById("marquee-inner").innerHTML = items.map(item =>
`<div class="marquee-item"><span class="marquee-dot"></span>${item}</div>`
).join("");
}

/* ── CATEGORIES BUILD ── */
function buildCategories() {
document.getElementById("cat-grid").innerHTML = CATEGORIES.map(cat => `
<div class="cat-card${cat.span ? " span2" : ""}">
<img src="${cat.img}" alt="${cat.name}" loading="lazy"/>
<div class="cat-overlay">
<div class="cat-name">${cat.name}</div>
<div class="cat-count">${cat.count} Products</div>
</div>
<div class="cat-arrow">→</div>
</div>
`).join("");
}

/* ── PRODUCTS BUILD ── */
function buildFilters() {
const FILTERS = [["all","All"],["fashion","Fashion"],["electronics","Electronics"],["home","Home"],["sports","Sports"]];
document.getElementById("filter-bar").innerHTML = FILTERS.map(([val, label]) =>
`<button class="filter-btn${currentFilter === val ? " active" : ""}" onclick="setFilter('${val}')">${label}</button>`
).join("");
}

function setFilter(val) {
currentFilter = val;
buildFilters();
buildProducts();
}

function starsHTML(count) {
return [1,2,3,4,5].map(i => `<span class="star ${i <= count ? "on" : "off"}">★</span>`).join("");
}

/* ── CART ── */
function addToCart(productId) {
const product = PRODUCTS.find(p => p.id === productId);
if (!product) return;
const existing = cart.find(i => i.id === productId);
if (existing) {
existing.qty++;
} else {
cart.push({ ...product, qty: 1 });
}
updateCartUI();
showToast(product.name + " added! 🛍");
// Shopify integration: POST to /cart/add.js
// fetch('/cart/add.js', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ id: SHOPIFY_VARIANT_ID, quantity: 1 }) });
}

function changeQty(idx, delta) {
cart[idx].qty += delta;
if (cart[idx].qty <= 0) cart.splice(idx, 1);
updateCartUI();
}

function updateCartUI() {
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
const count = cart.reduce((s, i) => s + i.qty, 0);
document.getElementById("cart-count").textContent = count;
document.getElementById("cart-total").textContent = "$" + total.toFixed(2);

const body = document.getElementById("cart-body");
const footer = document.getElementById("cart-footer");

if (cart.length === 0) {
footer.style.display = "none";
body.innerHTML = `
<div class="cart-empty">
<div class="cart-empty-icon">🛍</div>
<p style="font-size:15px;font-weight:600;color:var(--text);">Your bag is empty</p>
<p style="font-size:13px;">Add some products to get started.</p>
<button class="btn btn-primary" onclick="toggleCart()">Continue Shopping</button>
</div>`;
} else {
footer.style.display = "block";
body.innerHTML = cart.map((item, idx) => `
<div class="cart-item">
<div class="cart-item-img"><img src="${item.img}" alt="${item.name}"/></div>
<div>
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-size">One Size</div>
<div class="qty-ctrl">
<button class="qty-btn" onclick="changeQty(${idx},-1)">−</button>
<span class="qty-num">${item.qty}</span>
<button class="qty-btn" onclick="changeQty(${idx},1)">+</button>
</div>
</div>
<span class="cart-item-price">$${(item.price * item.qty).toFixed(2)}</span>
</div>
`).join("");
}
}

function toggleCart() {
cartOpen = !cartOpen;
document.getElementById("cart-drawer").classList.toggle("open", cartOpen);
document.getElementById("cart-overlay").classList.toggle("open", cartOpen);
document.body.style.overflow = cartOpen ? "hidden" : "";
}

/* ── TOAST ── */
let toastTimer;
function showToast(msg) {
clearTimeout(toastTimer);
const t = document.getElementById("toast");
t.textContent = msg;
t.classList.add("show");
toastTimer = setTimeout(() => t.classList.remove("show"), 2800);
}

/* ── NEWSLETTER ── */
function subscribeNewsletter() {
const email = document.getElementById("news-email").value;
if (!email || !email.includes("@")) { showToast("Please enter a valid email ✗"); return; }
showToast("Subscribed to ShivBazaar! 🎉");
document.getElementById("news-email").value = "";
}

/* ── COUNTDOWN ── */
let countdown = 8 * 3600 + 47 * 60 + 32;
function tickCountdown() {
if (countdown <= 0) return;
countdown--;
const h = String(Math.floor(countdown / 3600)).padStart(2, "0");
const m = String(Math.floor((countdown % 3600) / 60)).padStart(2, "0");
const s = String(countdown % 60).padStart(2, "0");
document.getElementById("cd-h").textContent = h;
document.getElementById("cd-m").textContent = m;
document.getElementById("cd-s").textContent = s;
}
setInterval(tickCountdown, 1000);

/* ── NAVBAR SCROLL ── */
window.addEventListener("scroll", () => {
document.getElementById("navbar").classList.toggle("scrolled", window.scrollY > 40);
});

/* ── REVEAL ON SCROLL ── */
function initReveal() {
const els = document.querySelectorAll(".sb-reveal:not(.visible)");
const io = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("visible"); });
}, { threshold: 0.1 });
els.forEach(el => io.observe(el));
}

/* ── INIT ── */
buildMarquee();
buildCategories();
buildFilters();
buildProducts();
updateCartUI();
initReveal();
</script>
</body>
</html>

Your cart is empty

website

Join our email list