:root {
    --night: #1a0b2e;
    --night-2: #2a0d45;
    --maroon: #7a0f2b;
    --saffron: #ff8800;
    --gold: #ffb703;
    --gold-2: #ffd166;
    --cream: #fff8ec;
    --ink: #2b1a12;
    --mid: #b5179e;
    --heading-font: 'Montserrat', 'Poppins', serif;
    --body-font: 'Poppins', system-ui, sans-serif;
}

body { font-family: var(--body-font); background: var(--cream); color: var(--ink); }
h1, h2, h3, .display-font { font-family: var(--heading-font); letter-spacing: .3px; }
a { color: var(--maroon); }
.text-gold { color: var(--gold) !important; }
.text-light-50 { color: rgba(255,255,255,.65) !important; }

.topbar { background: linear-gradient(90deg, var(--maroon), var(--mid), var(--maroon)); color: #fff; }

.main-nav { background: linear-gradient(180deg, var(--night), var(--night-2)); box-shadow: 0 4px 20px rgba(0,0,0,.25); }
.main-nav .nav-link { color: rgba(255,255,255,.85); }
.main-nav .nav-link:hover { color: var(--gold); }
.brand-text { font-family: var(--heading-font); font-size: 1.45rem; background: linear-gradient(90deg, var(--gold-2), var(--saffron)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cat-menu { columns: 2; min-width: 460px; max-height: 70vh; overflow-y: auto; }
.cat-menu .dropdown-item { break-inside: avoid; border-radius: 6px; }
@media (max-width: 991px) { .cat-menu { columns: 1; min-width: 0; } }
.cart-badge { position: absolute; top: 0; left: 14px; font-size: .65rem; }
.search-form input { min-width: 230px; border-radius: 20px; }

.btn-gold { background: linear-gradient(135deg, var(--gold), var(--saffron)); color: #2b1600; border: none; font-weight: 600; }
.btn-gold:hover { filter: brightness(1.08); color: #2b1600; box-shadow: 0 0 18px rgba(255,183,3,.55); }
.btn-maroon { background: var(--maroon); color: #fff; border: none; }
.btn-maroon:hover { background: var(--maroon); filter: brightness(1.2); color: #fff; }

/* Hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 30% 20%, var(--night-2) 0%, var(--night) 60%, var(--night) 100%); color: #fff; padding: 80px 0 90px; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); text-shadow: 0 0 25px rgba(255,183,3,.5); }
.hero .lead { color: rgba(255,255,255,.8); }
.hero .sparkle { position: absolute; border-radius: 50%; filter: blur(1px); animation: twinkle 3s infinite ease-in-out; }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.hero-diya { width: 100%; max-width: 360px; filter: drop-shadow(0 0 40px rgba(255,160,0,.6)); animation: float 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.flame { animation: flicker 1.4s infinite alternate; transform-origin: 50% 100%; }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-1deg); } 50% { transform: scale(1.05, .95) rotate(1deg); } 100% { transform: scale(.97, 1.06) rotate(-1deg); } }

.lights-border { height: 22px; background:
    radial-gradient(circle at 10px 12px, #ff595e 5px, transparent 6px) 0 0/40px 22px,
    radial-gradient(circle at 30px 12px, #ffca3a 5px, transparent 6px) 0 0/40px 22px;
    animation: lights 1.2s steps(2) infinite; }
.lights-border.alt { background:
    radial-gradient(circle at 10px 12px, #8ac926 5px, transparent 6px) 0 0/40px 22px,
    radial-gradient(circle at 30px 12px, #c77dff 5px, transparent 6px) 0 0/40px 22px; }
@keyframes lights { 50% { filter: hue-rotate(120deg) brightness(1.3); } }

.section-title { text-align: center; margin-bottom: 2rem; }
.section-title h2 { color: var(--maroon); }
.section-title .divider { width: 120px; height: 4px; margin: .5rem auto; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), var(--saffron), var(--gold), transparent); }

/* Cards */
.art { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card { border: none; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(122,15,43,.08); transition: transform .25s, box-shadow .25s; height: 100%; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(255,136,0,.25); }
.product-card .thumb { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--night); }
.product-card .thumb .art { transition: transform .4s; }
.product-card:hover .thumb .art { transform: scale(1.06); }
.product-card .badge-feat { position: absolute; top: 10px; left: 10px; }
.product-card .badge-stock { position: absolute; top: 10px; right: 10px; }
.product-card .title { font-weight: 600; font-size: .98rem; color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.product-card .cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; color: #a0522d; }
.price { font-weight: 700; color: var(--maroon); font-size: 1.15rem; }

.cat-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 1/1; color: #fff; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.cat-tile .art { transition: transform .4s; }
.cat-tile:hover .art { transform: scale(1.08); }
.cat-tile .label { position: absolute; inset: auto 0 0 0; padding: 12px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-weight: 600; font-size: .9rem; }
.cat-tile .label small { display: block; font-weight: 400; color: var(--gold-2); }

.feature-box { background: #fff; border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.05); height: 100%; }
.feature-box i { font-size: 2rem; color: var(--saffron); }

.promo-band { background: linear-gradient(120deg, var(--maroon), var(--mid) 60%, var(--saffron)); color: #fff; border-radius: 22px; padding: 40px; position: relative; overflow: hidden; }

/* Product detail */
.detail-img { border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.qty-input { width: 90px; }

/* Forms / panels */
.panel { background: #fff; border-radius: 18px; box-shadow: 0 6px 20px rgba(0,0,0,.06); padding: 28px; }
.auth-wrap { max-width: 560px; margin: 40px auto; }
.form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(255,183,3,.25); }

/* Order tracker */
.tracker { display: flex; justify-content: space-between; position: relative; margin: 30px 0; }
.tracker::before { content: ''; position: absolute; top: 22px; left: 8%; right: 8%; height: 4px; background: #e9ecef; z-index: 0; }
.tracker .step { position: relative; z-index: 1; text-align: center; flex: 1; font-size: .8rem; color: #999; }
.tracker .step .dot { width: 48px; height: 48px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; font-size: 1.3rem; }
.tracker .step.done { color: var(--ink); font-weight: 600; }
.tracker .step.done .dot { background: linear-gradient(135deg, var(--gold), var(--saffron)); color: #fff; box-shadow: 0 0 15px rgba(255,136,0,.5); }
.tracker .step.current .dot { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,136,0,.6); } 50% { box-shadow: 0 0 0 10px rgba(255,136,0,0); } }

.site-footer { background: var(--night); color: #fff; }
.site-footer a { color: rgba(255,255,255,.8); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

.empty-state { text-align: center; padding: 60px 20px; }
.empty-state i { font-size: 4rem; color: var(--gold); }

.page-header { background: linear-gradient(120deg, var(--night), var(--maroon)); color: #fff; padding: 36px 0; }
.page-header h1 { margin: 0; font-size: 2rem; }
.list-group-item.active { background: var(--maroon); border-color: var(--maroon); }
.page-link { color: var(--maroon); }
.page-item.active .page-link { background: var(--maroon); border-color: var(--maroon); }

@media (max-width: 576px) {
    .tracker .step { font-size: .65rem; }
    .tracker .step .dot { width: 36px; height: 36px; font-size: 1rem; }
    .tracker::before { top: 16px; }
    .search-form input { min-width: 0; }
}

/* ---- Ads & social ---- */
.ad-slot { text-align: center; min-height: 90px; }
.ad-label { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: #a08b75; margin-bottom: 4px; }
.ad-placeholder { border: 2px dashed #e0c9a6; border-radius: 12px; padding: 28px 16px; color: #8a7560; background: #fffaf2; min-height: 0; }
.share-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; border: 0; text-decoration: none; font-size: 1rem; }
.share-btn:hover { color: #fff; opacity: .85; }
.share-btn.fb { background: #1877f2; } .share-btn.x { background: #000; } .share-btn.wa { background: #25d366; }
.share-btn.pin { background: #e60023; } .share-btn.copy { background: #6c5a48; }
.social-links a { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(255,255,255,.1); color: var(--gold); font-size: 1.05rem; }
.social-links a:hover { background: var(--gold); color: var(--night); }

/* ---- Theme & layout (Admin → Theme & Layout) ---- */
.hero-icon { font-size: clamp(8rem, 18vw, 14rem); color: var(--gold); text-shadow: 0 0 60px var(--gold), 0 0 120px var(--saffron); display: inline-block; animation: float 4s ease-in-out infinite; }
.hero-photo { width: 100%; max-width: 480px; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); object-fit: cover; aspect-ratio: 4/3; }
.footer-line { height: 4px; background: linear-gradient(90deg, var(--gold), var(--saffron), var(--gold)); }
.logo-icon { color: var(--gold); text-shadow: 0 0 12px var(--saffron); line-height: 1; }
.main-nav.light { background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.main-nav.light .nav-link { color: var(--ink); }
.main-nav.light .nav-link:hover { color: var(--maroon); }
.main-nav.light .brand-text { background: none; color: var(--maroon); }
.theme-minimal .hero h1 { text-shadow: none; }

/* ---- Sponsor ads ---- */
.sponsor-ad { min-height: 0; }
.sponsor-img { max-width: 100%; max-height: 250px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.sponsor-ad.banner .sponsor-img { width: 100%; max-height: 160px; object-fit: cover; }
.sponsor-text { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; background: #fff; border: 1px solid rgba(0,0,0,.08);
    border-left: 5px solid var(--gold); border-radius: 12px; padding: 14px 18px; color: var(--ink); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.sponsor-title { color: var(--maroon); }
.ad-house { min-height: 0; }
.ad-house a { display: block; border: 1px dashed rgba(0,0,0,.18); border-radius: 12px; padding: 14px; color: var(--ink); font-size: .9rem; background: rgba(255,255,255,.6); }
.ad-house a:hover { border-color: var(--gold); color: var(--maroon); }