/* ============================================================
   DesignMall — Responsive App Layout (2026-11-03)
   Desktop (>1024px): website jaisa hi (purana layout barkarar)
   Tablet (769–1024px): beech ka layout — 3 column grid
   Mobile (≤768px): bilkul app jaisa — compact app bar, chhota hero,
   2-column product grid, neeche app-style tab bar
   Ye file style.css ke BAAD load hoti hai, isliye iske niyam jeet-te hain.
   ============================================================ */

/* ---------- Bottom app tab bar (sirf mobile par dikhega) ---------- */
.app-tabbar { display: none; }

/* ---------- Mobile menu ki marammat (har size par) ----------
   Category wale link ek dabbe ke andar inline beh rahe the — dabba hata kar
   har link ko seedhi puri line bana diya, aur behne wali neeli line band kar di. */
#mobileMenuCategoryLinks { display: contents; }
.mobile-menu-links a { display: flex; align-items: center; gap: 10px; }
.mobile-menu-links a::after { display: none !important; }

@media (max-width: 1024px) and (min-width: 769px) {
    /* ===== TABLET ===== */
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 18px; }
    .categories-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hero { padding-left: 24px; padding-right: 24px; }
    .hero-title { font-size: 2.1rem; }
    .section { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
    /* ===== MOBILE = APP LAYOUT ===== */
    html { -webkit-text-size-adjust: 100%; }
    body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
    * { -webkit-tap-highlight-color: transparent; }

    /* --- Upar wali app bar --- */
    .nav-container { height: auto; min-height: 54px; padding: 6px 10px; gap: 6px; flex-wrap: wrap; }
    .nav-logo { font-size: 1.15rem; gap: 7px; }
    .nav-logo i { font-size: 1.25rem; }
    .nav-actions { gap: 4px; margin-left: auto; }
    .nav-icon-btn { width: 38px; height: 38px; }
    .theme-toggle { width: 38px; height: 38px; }
    .btn-free-nav { padding: 7px 9px; }
    /* Header me bheed kam: Designer Login neeche wali tab bar + menu me hai, bhasha bhi menu me hai */
    .nav-actions a[href="user-dashboard.html"] { display: none !important; }
    .nav-actions .lang-toggle { display: none !important; }

    /* --- Search khulne par: dabne ke bajaye categories ke UPAR apni alag line --- */
    .nav-search { order: 5; flex: 1 1 100%; max-width: none; margin: 4px 0 6px; }
    .nav-search input { height: 42px; font-size: 16px; border-radius: 12px; }

    /* Category chips — ek line me side-scroll */
    .nav-categories { padding: 7px 10px; gap: 7px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nav-categories::-webkit-scrollbar { display: none; }
    .cat-link { white-space: nowrap; padding: 7px 13px; font-size: 0.8rem; border-radius: 999px; flex: 0 0 auto; }

    /* --- Hero: chhota, app-style --- */
    .offer-strip { margin-top: 112px; }
    .hero { padding: 22px 16px 18px; min-height: 0; }
    .hero-shape, .float-icons { display: none !important; }
    .hero-content { text-align: left; }
    .hero-badge { font-size: 0.68rem; padding: 5px 10px; }
    .hero-title { font-size: 1.55rem; line-height: 1.3; margin: 10px 0 8px; }
    .hero-subtitle { font-size: 0.85rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
    .hero-actions .btn { height: 46px; font-size: 0.85rem; padding: 0 10px; border-radius: 12px; justify-content: center; }
    .hero-actions .btn:first-child { grid-column: 1 / -1; }
    .hero-trust-msg { font-size: 0.75rem; margin-top: 10px; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
    .hero-stats .hero-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 9px 4px; }
    .hero-stats .stat-number { font-size: 1.05rem; }
    .hero-stats .stat-label { font-size: 0.62rem; }

    /* --- Sections: ghane, saaf --- */
    .section { padding: 20px 12px 8px; }
    .section-header { margin-bottom: 12px; gap: 8px; }
    .section-title { font-size: 1.12rem; line-height: 1.3; }
    .section-desc { font-size: 0.78rem; }
    .section-badge { font-size: 0.66rem; padding: 4px 9px; }
    .section-header .btn { padding: 8px 12px; font-size: 0.78rem; }

    /* --- Product grid: 2 column, app cards --- */
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .product-card { border-radius: 14px; }
    .product-card:hover { transform: none; }
    .product-card-badge { font-size: 0.58rem; padding: 3px 6px; }
    .quick-view-btn { width: 30px; height: 30px; font-size: 0.72rem; }
    .product-card-body { padding: 9px 10px 11px; }
    .product-card-category { font-size: 0.58rem; letter-spacing: 0.04em; }
    .product-card-title { font-size: 0.8rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em; }
    .product-card-meta { font-size: 0.68rem; gap: 9px; margin: 5px 0 8px; }
    .product-card-footer { flex-direction: column; align-items: stretch; gap: 7px; }
    .product-card-price { font-size: 1rem; }
    .product-card-price .old-price { font-size: 0.72rem; }
    .btn-whatsapp-sm { width: 100%; height: 36px; justify-content: center; font-size: 0.8rem; border-radius: 10px; }

    /* --- Category tiles: 3 chhote column --- */
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .category-card { padding: 13px 5px 11px; border-radius: 14px; }
    .category-card:hover { transform: none; }
    .category-card .cat-icon { font-size: 1.25rem; margin-bottom: 5px; }
    .category-card h3 { font-size: 0.72rem; line-height: 1.25; }
    .category-card p { font-size: 0.6rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

    /* --- CTA / footer --- */
    .cta-section .btn { width: 100%; height: 48px; justify-content: center; }
    .footer { padding-bottom: 14px; }
    .footer-content { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom { padding-bottom: 8px; font-size: 0.75rem; }

    /* --- Popups / detail: pure screen ke hisaab se --- */
    .modal-content, .product-modal-content, .quick-view-content { width: 94vw !important; max-width: 94vw !important; max-height: 92vh; overflow-y: auto; border-radius: 16px; }

    /* --- Neeche wali app tab bar --- */
    .app-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
        background: var(--surface); border-top: 1px solid var(--border);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 18px rgba(0,0,0,0.06);
    }
    .app-tabbar .tab-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 8px 2px 7px; color: var(--text-muted); text-decoration: none;
        font-size: 0.62rem; font-weight: 600;
    }
    .app-tabbar .tab-item i { font-size: 1.15rem; }
    .app-tabbar .tab-item.active { color: var(--primary); }
    .app-tabbar .tab-item:active { color: var(--primary); }
}

@media (max-width: 380px) {
    .product-card-title { font-size: 0.76rem; }
    .hero-title { font-size: 1.4rem; }
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
}