/* ===== Mobile Responsive Base ===== */
@media(max-width:768px){
    body{font-size:14px}
    /* Force 2-column grid on all mobile */
    .grid,.products-grid,.pool-grid,.home-products-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important;min-width:0!important}
    .grid > *,.products-grid > *,.pool-grid > *,.home-products-grid > *{min-width:0!important}
    .container{padding:0 12px!important}

    /* Grid systems */
    .grid-4{grid-template-columns:repeat(2,1fr)!important}
    .grid-3{grid-template-columns:repeat(2,1fr)!important}
    .grid-2{grid-template-columns:1fr!important}
    .grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}

    /* Top nav */
    .top{position:sticky!important;top:0;z-index:100}
    .top-inner{height:52px!important;padding:0 12px!important;gap:10px!important}
    .logo{font-size:16px!important;letter-spacing:1px!important}
    .search{max-width:none!important;flex:1}
    .search input{padding:8px 36px 8px 12px;font-size:13px;border-radius:20px}
    .nav{gap:12px!important;font-size:12px!important}

    /* Hero */
    .hero-inner{height:300px!important;padding:0 20px!important}
    .hero-text h1{font-size:26px!important;line-height:1.15!important}
    .hero-text p{font-size:13px!important}
    .hero-text .cta{padding:10px 20px!important;font-size:12px!important}

    /* Sections */
    .section{padding:28px 12px!important}
    .section-header{flex-direction:column!important;align-items:flex-start!important;gap:6px}
    .section-header h2{font-size:18px!important}

    /* Category pills */
    .category-pills{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;gap:8px!important;padding-bottom:6px}
    .cat-pill{white-space:nowrap;flex-shrink:0;padding:8px 14px!important;font-size:12px!important}

    /* Products */
    .products-grid,.pool-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
    .product-card{border-radius:10px!important}
    .product-card .product-img{height:140px!important}
    .product-card .product-name{font-size:13px!important;padding:8px 8px 4px!important}
    .product-card .product-price{font-size:15px!important;padding:0 8px 8px!important}

    /* ===== Cart ===== */
    .cart-item{flex-direction:column!important;align-items:stretch!important;gap:12px;padding:14px!important}
    .cart-item img{width:100%!important;height:160px!important;object-fit:cover;border-radius:8px}
    .cart-item .right{display:flex!important;justify-content:space-between!important;align-items:center!important}
    .qty-control{display:flex!important;align-items:center!important;gap:8px}
    .qty-control button{width:32px!important;height:32px!important}
    .qty-control span{min-width:24px;text-align:center}
    .cart-item .del{padding:6px 12px!important;font-size:12px!important}
    .row{font-size:13px!important}
    .total{font-size:16px!important;padding:12px!important}
    .btn-checkout{width:100%!important;padding:14px!important;font-size:15px!important;letter-spacing:1px}
    h1{font-size:22px!important;margin-bottom:20px!important}

    /* ===== Account ===== */
    .sign-in{max-width:95%!important;margin:40px auto!important}
    .sign-in h2{font-size:22px!important}
    .card{padding:20px!important}
    .tabs{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
    .tab{white-space:nowrap;flex-shrink:0;padding:10px 14px!important;font-size:12px!important}
    .form-group input{padding:10px 12px!important;font-size:13px}
    .btn{padding:10px 20px!important;width:100%!important;text-align:center}
    table{display:block;overflow-x:auto;font-size:12px!important}
    th,td{padding:8px!important;white-space:nowrap}
    .badge{padding:3px 8px!important;font-size:10px!important}

    /* ===== Seller Login ===== */
    .login-box,.reg-box{width:95%!important;padding:24px!important;margin:16px auto!important}
    .login-box h2,.reg-box h2{font-size:20px!important}
    .tabs{flex-wrap:nowrap!important;overflow-x:auto!important}
    .tab{padding:10px 16px!important;font-size:13px}

    /* ===== Seller Dashboard ===== */
    .seller-header{flex-direction:column!important;align-items:flex-start!important;gap:8px}
    .seller-header .title{font-size:18px!important}
    .nav-tabs{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;gap:0!important}
    .nav-tab{white-space:nowrap;flex-shrink:0;padding:10px 12px!important;font-size:12px!important}

    /* Stats */
    .stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
    .stat-card{padding:12px!important}
    .stat-card .value{font-size:18px!important}
    .stat-card .label{font-size:11px!important}

    /* Orders summary */
    .orders-summary{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}

    /* Finance */
    .finance-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
    .finance-item .fi-val{font-size:14px!important}

    /* Wallet */
    .wallet-balance .amount{font-size:26px!important}
    .wallet-actions{flex-wrap:wrap!important}
    .wallet-actions .btn{flex:1;min-width:80px}

    /* Level card */
    .level-card{padding:16px!important}
    .level-card .level-name{font-size:14px!important}
    .level-card .level-header{flex-direction:column!important;gap:10px!important}

    /* Chart */
    .chart-container{padding:12px!important}

    /* Quick actions */
    .quick-actions{grid-template-columns:1fr!important}

    /* Filter bars */
    .filter-bar{flex-direction:column!important;align-items:stretch!important}
    .filter-bar input{width:100%!important}
    .filter-bar .tabs{overflow-x:auto;flex-wrap:nowrap}
    .filter-bar .sort-btns{overflow-x:auto;flex-wrap:nowrap}

    /* Order cards */
    .order-card{flex-direction:column!important;align-items:flex-start!important}
    .order-card .order-status{text-align:left!important;margin-top:8px}

    /* Settings */
    .settings-list li{flex-direction:column!important;align-items:flex-start!important;gap:8px}

    /* Modal */
    .modal{width:95%!important;padding:20px!important;margin:10px!important}
    .modal h3{font-size:16px!important}

    /* Page header */
    .page-header{flex-direction:column!important;align-items:flex-start!important;gap:8px}
    .page-header h1{font-size:18px!important}

    /* ===== Store Page ===== */
    .store-banner{height:160px!important}
    .store-banner .banner-text h2{font-size:20px!important}
    .store-banner .banner-text p{font-size:12px!important}
    .shop-info-bar .container{flex-direction:column!important;text-align:center!important;padding:14px!important}
    .shop-logo{width:60px!important;height:60px!important;margin-top:-30px!important;font-size:24px!important}
    .shop-meta .shop-name{font-size:18px!important}
    .shop-meta .shop-stats{justify-content:center!important;flex-wrap:wrap!important;gap:10px!important}
    .shop-actions{justify-content:center!important;margin-top:10px}
    .category-bar{overflow-x:auto!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch;gap:6px!important;padding:10px 12px!important}
    .category-chip{white-space:nowrap;flex-shrink:0;padding:6px 12px!important;font-size:12px!important}

    /* ===== Product Detail ===== */
    .product-page{grid-template-columns:1fr!important;gap:16px!important}
    .gallery{position:static!important}
    .gallery .main{height:300px!important}
    .gallery .thumbs{gap:6px!important}
    .gallery .thumbs img{width:50px!important;height:50px!important}
    .info h1{font-size:20px!important}
    .info .price{font-size:22px!important}
    .features{grid-template-columns:1fr!important}
    .buy-btns{flex-direction:column!important}
    .buy-btns button{width:100%!important;padding:14px!important}
    .qty-selector{flex-wrap:wrap!important;gap:8px}

    /* Reviews */
    .review-card{padding:12px!important}
    .review-card .review-text{font-size:13px!important}

    /* ===== Search ===== */
    .products-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
    .filters{flex-direction:column!important;align-items:flex-start!important;gap:6px}
    .filters select{width:100%!important}

    /* ===== Chat ===== */
    .chat-layout{grid-template-columns:1fr!important;height:calc(100vh - 52px)!important}
    .conv-list{border-right:none!important}
    .chat-back{display:flex!important;align-items:center!important;gap:8px;padding:12px!important;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--text2)}
    .conv-list.hide-mobile{display:none!important}
    .chat-area.show-mobile{display:flex!important}

    /* ===== Admin ===== */
    .layout{flex-direction:column!important}
    .sidebar{width:100%!important;min-height:auto!important;position:fixed!important;top:0;left:-100%;z-index:200;transition:left 0.3s ease}
    .sidebar.open{left:0}
    .sidebar nav a{padding:14px 20px!important;font-size:14px}
    .main{margin-left:0!important;padding:56px 12px 12px!important}
    .admin-menu-btn{display:block!important;position:fixed;top:10px;left:10px;z-index:201;background:var(--s1);border:1px solid var(--bd);color:var(--t1);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:16px}
    .topbar{flex-direction:column!important;align-items:flex-start!important;gap:8px}
    .topbar h1{font-size:16px!important}
    table{min-width:500px!important;font-size:12px!important}
    td,th{padding:5px 6px!important}
}

@media(max-width:360px){
    .grid{grid-template-columns:1fr!important}
    .products-grid,.pool-grid{grid-template-columns:1fr!important}
    .stats-grid{grid-template-columns:1fr!important}
    .orders-summary{grid-template-columns:repeat(2,1fr)!important}
    .finance-grid{grid-template-columns:repeat(2,1fr)!important}
    .hero-inner{height:240px!important}
    .hero-text h1{font-size:22px!important}
}