/* ============================================================
   DesignMall — Sundar Theme (2026-11-03)
   Halki safed background, gehra purple→neela gradient, sunehra accent,
   bade bold Poppins headings, gol kinare aur naram saaye.
   style.css ke baad, responsive-app.css se pehle load hoti hai.
   ============================================================ */

:root {
    --primary: #7046df;
    --primary-light: #8b5cf6;
    --primary-dark: #5b21b6;
    --accent: #ffb020;
    --accent-light: #ffcf4d;
    --gradient-1: linear-gradient(135deg, #7046df, #3d7bfa);
    --gradient-2: linear-gradient(135deg, #ffb020, #f97316);
    --gradient-3: linear-gradient(135deg, #7046df, #3d7bfa);
    --card-shadow: rgba(76, 29, 149, 0.10);
}

/* ---------- Headings: Poppins, bade aur bold ---------- */
h1, h2, h3, .hero-title, .section-title, .nav-logo, .product-card-title, .footer h4 {
    font-family: 'Poppins', 'Inter', 'Noto Sans Devanagari', sans-serif;
}
.hero-title { font-weight: 800; letter-spacing: -0.015em; }
.section-title { font-weight: 700; letter-spacing: -0.01em; }
::selection { background: rgba(112, 70, 223, 0.25); }

/* ---------- Buttons: gol ghumav, gradient, naram saaya ---------- */
.btn { border-radius: 999px; }
.btn-primary {
    background: var(--gradient-1); border: none; color: #fff;
    box-shadow: 0 8px 20px rgba(112, 70, 223, 0.35);
}
.btn-primary:hover { box-shadow: 0 10px 26px rgba(112, 70, 223, 0.45); transform: translateY(-1px); }
.btn-whatsapp-sm { border-radius: 999px; }

/* ---------- Offer strip (hero ke upar wali patti) ---------- */
.offer-strip {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    background: linear-gradient(90deg, #151b3b, #4c1d95 55%, #7046df);
    color: #fff; padding: 10px 16px; text-align: center;
    margin-top: 120px; /* fixed navbar (72 + 48) ke neeche se shuru */
}
.offer-pill {
    background: #ffcf4d; color: #151b3b; font-weight: 800; font-size: 0.68rem;
    letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.offer-text { font-size: 0.88rem; }
.offer-text strong { color: #ffcf4d; }
.offer-btn {
    background: #fff; color: #5b21b6; font-weight: 700; font-size: 0.8rem;
    padding: 6px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
}

/* ---------- Hero: khula, bada, gradient chamak ---------- */
.hero { padding-top: 64px; }
.hero {
    background:
        radial-gradient(600px 300px at 12% 0%, rgba(112, 70, 223, 0.14), transparent 60%),
        radial-gradient(700px 340px at 95% 10%, rgba(61, 123, 250, 0.13), transparent 60%),
        radial-gradient(500px 260px at 55% 110%, rgba(255, 176, 32, 0.10), transparent 60%),
        var(--hero-bg);
}
.hero-badge {
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
    background: var(--surface); border: 1px solid var(--hero-border); color: var(--primary);
    box-shadow: 0 4px 14px rgba(112, 70, 223, 0.10);
}
.gradient-text { background: linear-gradient(92deg, #7046df, #3d7bfa); -webkit-background-clip: text; background-clip: text; }

/* Hero ke andar wali badi search bar */
.hero-search {
    display: flex; align-items: center; gap: 8px; max-width: 620px; margin: 20px auto 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 6px 6px 18px; box-shadow: 0 12px 32px rgba(21, 27, 59, 0.12);
}
.hero-search i { color: var(--text-muted); }
.hero-search input {
    flex: 1; border: none; outline: none; background: transparent; color: var(--text);
    font-size: 0.95rem; min-width: 0;
}
.hero-search button {
    background: var(--gradient-1); color: #fff; border: none; cursor: pointer;
    font-weight: 700; font-size: 0.88rem; padding: 11px 22px; border-radius: 999px; white-space: nowrap;
}

/* ---------- Sections: zyada saans, eyebrow style badge ---------- */
.section-badge {
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
    color: var(--primary); background: rgba(112, 70, 223, 0.09); border: 1px solid rgba(112, 70, 223, 0.16);
}
.categories-section { background: var(--surface-2); }

/* ---------- Product cards: bade gol kinare, naram saaya ---------- */
.product-card {
    border-radius: 18px; border: 1px solid #eceef7;
    box-shadow: 0 6px 22px rgba(21, 27, 59, 0.06);
}
.product-card:hover { box-shadow: 0 16px 38px rgba(76, 29, 149, 0.16); }
.product-card-image { border-radius: 18px 18px 0 0; }
.product-card-price { color: var(--primary-dark); font-family: 'Poppins', sans-serif; }

/* ---------- Category tiles: pastel icon chip ---------- */
.category-card { border-radius: 18px; box-shadow: 0 6px 20px rgba(21, 27, 59, 0.05); }
.category-card .cat-icon {
    width: 54px; height: 54px; margin: 0 auto; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #efe9ff, #e3efff); color: var(--primary);
}
.category-card .cat-icon i { font-size: 1.35rem; }

/* ---------- CTA band: gehra gradient ---------- */
.cta-section {
    background: linear-gradient(120deg, #3b1178, #7046df 55%, #3d7bfa);
    color: #fff;
}
.cta-section .section-title, .cta-section h2 { color: #fff; }
.cta-section .section-desc, .cta-section p { color: rgba(255, 255, 255, 0.85); }
.cta-section .btn-primary { background: #fff; color: #5b21b6; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25); }

/* ---------- Desktop par khula spacing ---------- */
@media (min-width: 1025px) {
    .hero-title { font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1.16; }
    .section { padding-top: 72px; padding-bottom: 72px; }
    .product-grid { gap: 24px; }
    .categories-grid { gap: 20px; }
}

/* ---------- Mobile par theme ki chaap (app layout ke saath) ---------- */
@media (max-width: 768px) {
    .offer-strip { gap: 7px; padding: 8px 10px; }
    .offer-text { font-size: 0.76rem; }
    .offer-btn { font-size: 0.72rem; padding: 5px 11px; }
    .hero-search { margin: 14px 0 2px; padding: 4px 4px 4px 14px; box-shadow: 0 8px 22px rgba(21, 27, 59, 0.12); }
    .hero-search input { font-size: 0.85rem; }
    .hero-search button { padding: 9px 15px; font-size: 0.8rem; }
    .hero-content { text-align: left; }
    .hero-search { margin-left: 0; margin-right: 0; }
    .product-card { border-radius: 16px; }
    .category-card .cat-icon { width: 42px; height: 42px; border-radius: 12px; }
    .category-card .cat-icon i { font-size: 1.05rem; }
}

/* ---------- Product detail: specs, license, share, related ---------- */
.detail-specs { margin-top: 20px; border-top: 1px solid var(--border); }
.spec-row {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 11px 2px; border-bottom: 1px solid var(--border); font-size: 0.88rem;
}
.spec-row span { color: var(--text-muted); }
.spec-row strong { font-weight: 600; text-align: right; }
.detail-license {
    margin-top: 14px; font-size: 0.78rem; color: var(--text-muted); line-height: 1.55;
    background: var(--surface-2); border-radius: 12px; padding: 10px 12px;
}
.detail-license i { color: var(--primary); margin-right: 5px; }
.detail-share { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.detail-share > span { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.share-btn {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff; text-decoration: none;
}
.share-btn.wa { background: #25d366; }
.share-btn.fb { background: #1877f2; }
.share-btn.tg { background: #229ed9; }
.share-btn.copy { background: var(--surface-3); color: var(--text); }
.detail-related { grid-column: 1 / -1; margin-top: 10px; }
.detail-related-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 16px; }