/* === Style block 1 === */
:root {
      --primary: #2563EB;
      --primary-hover: #1D4ED8;
      --primary-light: #DBEAFE;
      --primary-50: #EFF6FF;
      --accent: #EC4899;
      --accent-light: #FCE7F3;
      --success: #10B981;
      --success-light: #D1FAE5;
      --warning: #F59E0B;
      --warning-light: #FEF3C7;
      --danger: #EF4444;
      --danger-light: #FEE2E2;
      --gray-50: #F9FAFB;
      --gray-100: #F3F4F6;
      --gray-200: #E5E7EB;
      --gray-300: #D1D5DB;
      --gray-400: #9CA3AF;
      --gray-500: #6B7280;
      --gray-600: #4B5563;
      --gray-700: #374151;
      --gray-800: #1F2937;
      --gray-900: #111827;
      --white: #FFFFFF;
      --bg: #F8FAFC;
      --radius: 12px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
      --transition: all 0.2s ease;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { overflow-x:hidden; }
    body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--gray-900); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
    a { color:inherit; text-decoration:none; }
    button { font-family:inherit; cursor:pointer; border:none; outline:none; background:none; }
    img { max-width:100%; display:block; }
    .container { max-width:1280px; margin:0 auto; padding:0 24px; }

    /* SVG Icons */
    .icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
    .icon-sm { width:16px; height:16px; }
    .icon-lg { width:24px; height:24px; }
    .icon-xl { width:32px; height:32px; }

    /* Header */
    .header { background:var(--white); border-bottom:1px solid var(--gray-200); position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); background:rgba(255,255,255,0.95); }
    .header-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
    .logo { display:flex; align-items:center; gap:14px; font-size:1.55rem; font-weight:800; color:var(--primary); letter-spacing:-0.5px; }
    .logo-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--primary),#7C3AED); border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; }
    .logo-icon .icon { width:22px; height:22px; }
    .nav { display:flex; gap:4px; }
    .nav a { padding:8px 12px; border-radius:8px; font-weight:500; font-size:0.85rem; transition:var(--transition); color:var(--gray-600); white-space:nowrap; }
    .nav a:hover { background:var(--gray-100); color:var(--gray-900); }
    .nav a.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
    .nav-tradein-btn { background:linear-gradient(135deg,#f59e0b,#ef4444); color:white !important; font-weight:700; border-radius:20px; padding:6px 16px !important; margin-left:4px; box-shadow:0 2px 8px rgba(245,158,11,0.35); transition:var(--transition); white-space:nowrap; }
    .nav-tradein-btn:hover { background:linear-gradient(135deg,#d97706,#dc2626) !important; color:white !important; box-shadow:0 4px 14px rgba(245,158,11,0.5); transform:translateY(-1px); }
    .nav-tradein-btn.active { background:linear-gradient(135deg,#d97706,#dc2626) !important; color:white !important; }

    .tradein-banner:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(239,68,68,0.4) !important; }
    .nav-dropdown { position:relative; }
    .nav-dropdown-toggle { display:flex; align-items:center; gap:4px; }
    .nav-dropdown-menu { display:none; position:absolute; top:100%; left:0; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-lg); min-width:200px; padding:6px 0; z-index:200; }
    .nav-dropdown:hover .nav-dropdown-menu { display:block; }
    .nav-dropdown-menu a { display:block; padding:10px 16px; font-size:0.85rem; color:var(--gray-700); border-radius:0; }
    .nav-dropdown-menu a:hover { background:var(--gray-50); color:var(--primary); }
    .header-actions { display:flex; align-items:center; gap:10px; }
    .search-box { position:relative; }
    .search-box input { width:220px; padding:8px 12px 8px 34px; border:1px solid var(--gray-300); border-radius:8px; font-size:0.85rem; font-family:inherit; transition:var(--transition); background:var(--gray-50); }
    .search-box input:focus { width:300px; border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-light); background:white; }
    .search-box .search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gray-400); pointer-events:none; }
    .btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:8px; font-weight:600; font-size:0.875rem; transition:var(--transition); white-space:nowrap; }
    .btn-primary { background:var(--primary); color:white; }
    .btn-primary:hover { background:var(--primary-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
    .btn-accent { background:var(--accent); color:white; }
    .btn-accent:hover { background:#DB2777; }
    .btn-outline { background:transparent; border:1.5px solid var(--gray-300); color:var(--gray-700); }
    .btn-outline:hover { border-color:var(--primary); color:var(--primary); background:var(--primary-50); }
    .btn-sm { padding:6px 14px; font-size:0.8125rem; }
    .btn-ghost { color:var(--gray-500); }
    .btn-ghost:hover { background:var(--gray-100); color:var(--gray-700); }
    .btn-danger { background:var(--danger); color:white; }
    .btn-danger:hover { background:#DC2626; }
    .btn-success { background:var(--success); color:white; }
    .cart-btn { position:relative; padding:10px; border-radius:10px; transition:var(--transition); color:var(--gray-600); }
    .cart-btn:hover { background:var(--gray-100); color:var(--primary); }
    .cart-badge { position:absolute; top:2px; right:2px; background:var(--accent); color:white; font-size:0.65rem; font-weight:700; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 5px; }
    .user-menu { display:flex; align-items:center; gap:10px; }
    .avatar { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,var(--primary-light),#EDE9FE); color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; }

    /* Hero */
    .hero { background:linear-gradient(135deg,rgba(30,58,138,0.85) 0%,rgba(37,99,235,0.8) 50%,rgba(124,58,237,0.75) 100%),url('/uploads/hero-bg.png') center center/cover no-repeat; padding:52px 0; color:white; position:relative; overflow:hidden; }
    .hero::before { content:''; position:absolute; top:-50%; right:-20%; width:600px; height:600px; background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%); border-radius:50%; }
    .hero::after { content:''; position:absolute; bottom:-30%; left:-10%; width:400px; height:400px; background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%); border-radius:50%; }
    .hero-content { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
    .hero h1 { font-size:2.6rem; font-weight:900; line-height:1.1; letter-spacing:-1px; margin-bottom:16px; }
    .hero p { font-size:1.05rem; color:rgba(255,255,255,0.85); margin-bottom:28px; line-height:1.7; }
    .hero-btns { display:flex; gap:12px; }
    .hero .btn-primary { background:white; color:var(--primary); padding:12px 24px; font-size:0.9rem; }
    .hero .btn-primary:hover { background:var(--gray-100); }
    .hero .btn-outline { border-color:rgba(255,255,255,0.4); color:white; padding:12px 24px; font-size:0.9rem; }
    .hero .btn-outline:hover { background:rgba(255,255,255,0.1); border-color:white; }
    .hero-visual { display:flex; justify-content:center; }
    .hero-card { background:rgba(255,255,255,0.15); backdrop-filter:blur(20px); border-radius:var(--radius-xl); padding:28px; border:1px solid rgba(255,255,255,0.2); width:100%; max-width:420px; }
    .hero-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; text-align:center; }
    .hero-stat-value { font-size:1.6rem; font-weight:800; }
    .hero-stat-label { font-size:0.78rem; color:rgba(255,255,255,0.7); margin-top:2px; }

    /* Section */
    .section { padding:48px 0; }
    .section-header { text-align:center; margin-bottom:32px; }
    .section-header h2 { font-size:1.6rem; font-weight:800; letter-spacing:-0.5px; margin-bottom:8px; }
    .section-header p { color:var(--gray-500); font-size:0.95rem; max-width:480px; margin:0 auto; }

    /* Products */
    .products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
    .product-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); display:flex; flex-direction:column; }

    /* Home banner (Trade-in) */
    .home-banner-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:linear-gradient(135deg,#f59e0b 0%,#ef4444 50%,#dc2626 100%); border-radius:16px; padding:28px 36px; color:white; text-decoration:none; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(239,68,68,0.3); transition:var(--transition); margin-bottom:8px; }
    .home-banner-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(239,68,68,0.4); }
    .home-banner-deco { position:absolute; border-radius:50%; background:rgba(255,255,255,0.08); }
    .home-banner-deco-1 { top:-40px; right:-40px; width:160px; height:160px; }
    .home-banner-deco-2 { bottom:-60px; left:30%; width:200px; height:200px; background:rgba(255,255,255,0.05); }
    .home-banner-text { position:relative; z-index:1; flex:1; min-width:0; }
    .home-banner-title { display:flex; align-items:center; gap:10px; font-size:0.95rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; opacity:0.95; }
    .home-banner-icon { width:28px; height:28px; flex-shrink:0; }
    .home-banner-subtitle { font-size:0.9rem; opacity:0.9; margin:6px 0 0; line-height:1.4; }
    .home-banner-btn { position:relative; z-index:1; flex-shrink:0; background:white; color:#ef4444; font-weight:800; font-size:1rem; padding:12px 24px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.15); white-space:nowrap; }

    @media (max-width:768px) {
      .home-banner-card { padding:14px 16px; border-radius:12px; gap:10px; }
      .home-banner-title { font-size:0.8rem; gap:7px; letter-spacing:0.5px; }
      .home-banner-icon { width:18px; height:18px; }
      .home-banner-subtitle { font-size:0.75rem; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
      .home-banner-btn { font-size:0.8rem; padding:8px 14px; border-radius:9px; }
      .home-banner-deco-1 { width:90px; height:90px; top:-25px; right:-25px; }
      .home-banner-deco-2 { width:110px; height:110px; bottom:-35px; }
    }
    .product-card:hover { border-color:var(--gray-300); box-shadow:0 14px 28px -4px rgba(0,0,0,0.18), 0 6px 10px -3px rgba(0,0,0,0.1); transform:translateY(-3px); }
    .product-img { height:240px; background:var(--gray-100); position:relative; overflow:hidden; }
    .product-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
    .product-card:hover .product-img img { transform:scale(1.05); }
    .product-img .placeholder-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--gray-300); }
    .product-badge { position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:6px; font-size:0.75rem; font-weight:700; }
    .badge-sale { background:var(--accent); color:white; }
    .badge-new { background:var(--success); color:white; }
    .wishlist-btn { position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; transition:var(--transition); color:var(--gray-400); }
    .wishlist-btn:hover { color:var(--accent); background:white; box-shadow:var(--shadow); }
    .product-info { padding:16px 20px 20px; display:flex; flex-direction:column; flex:1; }
    .product-brand { font-size:0.75rem; color:var(--primary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
    .product-sku { font-size:0.72rem; color:var(--gray-400); margin-bottom:4px; display:flex; gap:10px; }
    .product-sku span { display:inline-flex; align-items:center; gap:3px; }
    .product-name { font-size:0.95rem; font-weight:600; margin-bottom:10px; line-height:1.4; min-height:calc(2 * 1.4em); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .product-price { display:flex; align-items:baseline; gap:8px; margin-bottom:14px; }
    .price-current { font-size:1.2rem; font-weight:800; color:var(--gray-900); }
    .price-old { font-size:0.85rem; color:var(--gray-400); text-decoration:line-through; }
    .product-actions { display:flex; gap:8px; margin-top:auto; padding-top:14px; }
    .product-actions .btn { flex:1; justify-content:center; }
    .product-meta { display:flex; align-items:center; gap:12px; margin-top:10px; padding-top:10px; border-top:1px solid var(--gray-100); font-size:0.78rem; color:var(--gray-400); }
    .product-meta span { display:flex; align-items:center; gap:4px; }

    /* Features */
    .features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

    /* Catalog Layout */
    .catalog-layout { display:grid; grid-template-columns:260px 1fr; gap:28px; }
    .sort-btn { padding:7px 14px; border:none; background:transparent; border-radius:6px; font-size:0.82rem; font-weight:500; color:var(--gray-600); cursor:pointer; transition:var(--transition); white-space:nowrap; }
    .sort-btn:hover { background:var(--white); color:var(--gray-900); }
    .sort-btn.active { background:var(--white); color:var(--primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
    .filters { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px; height:fit-content; position:sticky; top:88px; }
    .filter-group { margin-bottom:24px; }
    .filter-group:last-child { margin-bottom:0; }
    .filter-group h4 { font-size:0.75rem; font-weight:700; margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; color:var(--gray-500); }
    .filter-group label { display:flex; align-items:center; gap:8px; padding:7px 0; cursor:pointer; font-size:0.875rem; color:var(--gray-700); }
    .filter-group label:hover { color:var(--primary); }
    .filter-group input[type="checkbox"] { accent-color:var(--primary); width:16px; height:16px; }
    .filter-group select, .filter-group input[type="number"] { width:100%; padding:10px 12px; border:1px solid var(--gray-300); border-radius:8px; font-family:inherit; font-size:0.875rem; background:var(--white); }
    .filter-group input:focus, .filter-group select:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-light); }
    .price-range { display:flex; gap:8px; align-items:center; }
    .price-range input { width:50% !important; }

    /* Product Detail */
    .product-detail { display:grid; grid-template-columns:420px 1fr; gap:36px; padding:40px 0; align-items:start; }
    .detail-gallery { }
    .detail-main-img { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; height:420px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
    .detail-main-img img { width:100%; height:100%; object-fit:contain; padding:12px; }
    .detail-main-img .placeholder-icon { color:var(--gray-300); }
    .detail-thumbs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
    .detail-thumb { width:72px; height:72px; border-radius:var(--radius); overflow:hidden; cursor:pointer; border:2px solid var(--gray-200); transition:var(--transition); opacity:0.6; flex-shrink:0; }
    .detail-thumb.active { border-color:var(--primary); opacity:1; box-shadow:0 0 0 2px rgba(37,99,235,0.25); }
    .detail-thumb:hover { opacity:1; }
    .detail-thumb img { width:100%; height:100%; object-fit:cover; }
    .detail-info { }
    .detail-brand { font-size:0.8rem; color:var(--primary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
    .detail-name { font-size:1.75rem; font-weight:800; margin-bottom:12px; letter-spacing:-0.5px; line-height:1.2; }
    .detail-price { display:flex; align-items:baseline; gap:12px; margin-bottom:20px; }
    .detail-price .price-current { font-size:1.75rem; font-weight:800; }
    .detail-desc { color:var(--gray-600); margin-bottom:20px; line-height:1.7; font-size:0.92rem; }
    .detail-specs { margin-bottom:20px; }
    .detail-specs h3 { font-size:0.95rem; font-weight:700; margin-bottom:10px; color:var(--gray-900); }
    .specs-table { width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); overflow:hidden; }
    .specs-table tr { border-bottom:1px solid var(--gray-100); }
    .specs-table tr:last-child { border-bottom:none; }
    .specs-table td { padding:10px 14px; font-size:0.85rem; }
    .specs-table td:first-child { color:var(--gray-500); width:45%; background:var(--gray-50); }
    .specs-table td:last-child { font-weight:500; color:var(--gray-800); }
    .detail-qty { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
    .detail-price-row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
    .detail-cart-row { display:flex; align-items:center; gap:12px; }
    .qty-control { display:flex; align-items:center; border:1px solid var(--gray-300); border-radius:8px; overflow:hidden; }
    .qty-btn { width:36px; height:36px; font-size:1rem; font-weight:500; transition:var(--transition); color:var(--gray-600); display:flex; align-items:center; justify-content:center; }
    .qty-btn:hover { background:var(--gray-100); }
    .qty-val { width:44px; text-align:center; font-weight:600; border:none; background:transparent; font-size:0.9rem; }
    .detail-add-btn { padding:14px 28px; font-size:0.95rem; font-weight:600; border-radius:var(--radius); }
    .detail-stock { display:flex; align-items:center; gap:8px; font-size:0.85rem; color:var(--gray-500); margin-bottom:16px; }
    .stock-dot { width:8px; height:8px; border-radius:50%; }
    .stock-in { background:var(--success); }
    .stock-out { background:var(--danger); }

    /* Cart */
    .cart-page { padding:40px 0; }
    .cart-page h1 { font-size:1.75rem; font-weight:800; margin-bottom:24px; letter-spacing:-0.5px; }
    .cart-items { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
    .cart-item { display:flex; gap:16px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px; align-items:center; }
    .cart-item-img { width:90px; height:90px; border-radius:var(--radius); overflow:hidden; background:var(--gray-100); flex-shrink:0; }
    .cart-item-img img { width:100%; height:100%; object-fit:cover; }
    .cart-item-info { flex:1; }
    .cart-item-name { font-weight:600; margin-bottom:4px; font-size:0.92rem; }
    .cart-item-brand { font-size:0.78rem; color:var(--gray-400); }
    .cart-item-price { font-weight:700; color:var(--primary); margin-top:4px; font-size:0.95rem; }
    .cart-item-remove { color:var(--gray-400); transition:var(--transition); padding:6px; border-radius:6px; }
    .cart-item-remove:hover { color:var(--danger); background:var(--danger-light); }
    .cart-summary { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px; max-width:360px; margin-left:auto; }
    .cart-summary h3 { font-size:1rem; font-weight:700; margin-bottom:14px; }
    .cart-row { display:flex; justify-content:space-between; padding:6px 0; font-size:0.88rem; color:var(--gray-600); }
    .cart-total { border-top:2px solid var(--gray-200); padding-top:12px; margin-top:8px; font-weight:800; font-size:1.1rem; color:var(--gray-900); }

    /* Order Form */
    .order-page { padding:40px 0; max-width:680px; margin:0 auto; }
    .order-page h1 { font-size:1.75rem; font-weight:800; margin-bottom:24px; letter-spacing:-0.5px; }
    .form-group { margin-bottom:16px; }
    .form-group label { display:block; font-weight:600; margin-bottom:5px; font-size:0.85rem; color:var(--gray-700); }
    .form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 12px; border:1px solid var(--gray-300); border-radius:8px; font-family:inherit; font-size:0.88rem; transition:var(--transition); background:var(--white); }
    .form-group input:focus, .form-group textarea:focus { border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-light); }
    .form-group textarea { resize:vertical; min-height:72px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    /* Auth Modal */
    .modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; }
    .modal-overlay.active { opacity:1; pointer-events:all; }
    .modal { background:var(--white); border-radius:var(--radius-xl); padding:32px; width:100%; max-width:420px; box-shadow:var(--shadow-xl); transform:translateY(20px) scale(0.98); transition:transform 0.2s; }
    .modal-overlay.active .modal { transform:translateY(0) scale(1); }
    .modal h2 { text-align:center; margin-bottom:22px; font-size:1.3rem; font-weight:800; }
    .modal-close { position:absolute; top:12px; right:12px; color:var(--gray-400); transition:var(--transition); padding:6px; border-radius:6px; }
    .modal-close:hover { background:var(--gray-100); color:var(--gray-600); }
    .modal-switch { text-align:center; margin-top:14px; font-size:0.85rem; color:var(--gray-500); }
    .modal-switch a { color:var(--primary); font-weight:600; cursor:pointer; }

    /* Admin */
    .admin-layout { display:grid; grid-template-columns:240px 1fr; min-height:calc(100vh - 61px); }
    .admin-sidebar { background:var(--white); border-right:1px solid var(--gray-200); padding:16px 10px; }
    .admin-sidebar a { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; font-weight:500; font-size:0.82rem; transition:var(--transition); color:var(--gray-600); }
    .admin-sidebar a:hover { background:var(--gray-100); color:var(--gray-900); }
    .admin-sidebar a.active { background:var(--primary-light); color:var(--primary); font-weight:600; }
    .admin-content { padding:24px; background:var(--bg); }
    .admin-content h1 { font-size:1.3rem; font-weight:800; margin-bottom:20px; letter-spacing:-0.3px; }
    .admin-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:24px; }
    .stat-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:16px; }
    .stat-card h3 { font-size:0.72rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; font-weight:600; }
    .stat-card .stat-value { font-size:1.5rem; font-weight:800; color:var(--gray-900); }
    .admin-table { width:100%; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; }
    .admin-table th, .admin-table td { padding:10px 14px; text-align:left; border-bottom:1px solid var(--gray-100); font-size:0.85rem; }
    .admin-table th { background:var(--gray-50); font-weight:600; color:var(--gray-500); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.5px; }
    .admin-table tr:hover td { background:var(--gray-50); }
    .admin-table td img { width:48px; height:48px; object-fit:cover; border-radius:8px; }
    .status-badge { padding:4px 10px; border-radius:6px; font-size:0.75rem; font-weight:600; display:inline-block; }
    .status-dropdown { display:inline-flex; align-items:center; cursor:pointer; padding:4px 8px; border:1px solid var(--gray-200); border-radius:6px; transition:var(--transition); position:relative; }
    .status-dropdown:hover { border-color:var(--primary); }
    .status-dropdown-menu { position:fixed; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-lg); z-index:999; min-width:170px; padding:4px 0; }
    .status-dropdown-item { padding:8px 14px; cursor:pointer; font-size:0.8rem; font-weight:500; transition:var(--transition); white-space:nowrap; }
    .status-dropdown-item:hover { background:var(--primary-light); color:var(--primary); }
    .status-pending { background:var(--warning-light); color:#92400E; }
    .status-confirmed { background:var(--success-light); color:#065F46; }
    .status-processing { background:var(--primary-light); color:#1E40AF; }
    .status-shipped { background:#EDE9FE; color:#5B21B6; }
    .status-delivered { background:var(--success-light); color:#065F46; }
    .status-cancelled { background:var(--danger-light); color:#991B1B; }

    /* Empty state */
    .empty-state { text-align:center; padding:60px 20px; }
    .empty-icon { width:64px; height:64px; background:var(--gray-100); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--gray-400); }
    .empty-icon .icon { width:28px; height:28px; }
    .empty-state h3 { font-size:1rem; margin-bottom:6px; }
    .empty-state p { color:var(--gray-500); margin-bottom:20px; font-size:0.88rem; }

    /* Footer */
    .footer { background:var(--gray-900); color:var(--gray-400); padding:48px 0 20px; }
    .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
    .footer h4 { font-size:0.82rem; font-weight:700; color:white; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
    .footer p, .footer a { color:var(--gray-400); font-size:0.85rem; line-height:1.9; }
    .footer a:hover { color:white; }
    .footer-bottom { border-top:1px solid var(--gray-800); padding-top:18px; text-align:center; font-size:0.78rem; }

    /* Toast */
    .toast-container { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:10px; }
    .toast { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); padding:14px 20px; box-shadow:var(--shadow-xl); display:flex; align-items:center; gap:10px; font-weight:500; font-size:0.875rem; animation:slideIn 0.3s ease; }
    .toast.success { border-left:4px solid var(--success); }
    .toast.error { border-left:4px solid var(--danger); }
    @keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }

    /* Loading */
    .loading { display:flex; justify-content:center; padding:60px; }
    .spinner { width:36px; height:36px; border:3px solid var(--gray-200); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* Brands */
    .brands-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
    .brand-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px; text-align:center; transition:var(--transition); cursor:pointer; }
    .brand-card:hover { border-color:var(--primary); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
    .brand-logo { height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:1.6rem; color:var(--gray-400); }
    .brand-logo img { max-height:120px; max-width:280px; object-fit:contain; }

    /* Фикс: логотипы брендов не должны вылезать за рамки карточки */
    .brand-logo { overflow:hidden; }
    .brand-logo img { max-width:100%; width:auto; height:auto; }
    .brand-card h3 { font-size:0.95rem; font-weight:600; }
    .brand-card p { font-size:0.8rem; color:var(--gray-400); margin-top:4px; }

    .brand-detail-header { display:flex; gap:24px; align-items:flex-start; margin-bottom:32px; background:var(--white); padding:24px; border:1px solid var(--gray-200); border-radius:var(--radius-lg); }
    .brand-detail-logo { width:100px; height:100px; border-radius:var(--radius-lg); background:var(--gray-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--gray-200); }
    .brand-detail-logo img { max-height:70px; object-fit:contain; }
    .brand-detail-info h1 { font-size:1.5rem; margin-bottom:6px; }
    .brand-detail-info .brand-country { color:var(--gray-500); margin-bottom:10px; display:flex; align-items:center; gap:6px; font-size:0.88rem; }
    .brand-detail-info p { color:var(--gray-600); line-height:1.7; font-size:0.92rem; }

    .page { display:none; }
    .page.active { display:block; }
    .hidden { display:none !important; }

    .import-zone { border:2px dashed var(--gray-300); border-radius:var(--radius-lg); padding:40px; text-align:center; transition:var(--transition); cursor:pointer; background:var(--white); }
    .import-zone:hover, .import-zone.dragover { border-color:var(--primary); background:var(--primary-50); }
    .import-zone .icon { width:40px; height:40px; color:var(--gray-400); margin:0 auto 12px; }
    .import-zone p { color:var(--gray-500); font-size:0.9rem; }
    .import-results { margin-top:20px; padding:16px; border-radius:var(--radius); }
    .import-results.success { background:var(--success-light); border:1px solid #A7F3D0; }
    .import-results.error { background:var(--danger-light); border:1px solid #FECACA; }

    .notif-settings { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:28px; max-width:600px; }
    .notif-settings h3 { font-size:1.1rem; font-weight:700; margin-bottom:20px; }
    .provider-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-bottom:24px; }
    .provider-card { padding:16px; border:2px solid var(--gray-200); border-radius:var(--radius); text-align:center; cursor:pointer; transition:var(--transition); }
    .provider-card.active { border-color:var(--primary); background:var(--primary-50); }
    .provider-card .icon { margin:0 auto 8px; color:var(--gray-400); }
    .provider-card.active .icon { color:var(--primary); }
    .provider-card h4 { font-size:0.85rem; font-weight:600; }
    .provider-card p { font-size:0.75rem; color:var(--gray-400); margin-top:2px; }

    .bulk-upload-table { width:100%; border-collapse:collapse; margin-top:16px; }
    .bulk-upload-table th, .bulk-upload-table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--gray-100); font-size:0.85rem; }
    .bulk-upload-table th { background:var(--gray-50); font-weight:600; color:var(--gray-500); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.5px; }
    .bulk-upload-table tr:hover td { background:var(--gray-50); }
    .bulk-progress-bar { width:100%; height:6px; background:var(--gray-200); border-radius:3px; overflow:hidden; margin:12px 0; }
    .bulk-progress-fill { height:100%; background:var(--primary); border-radius:3px; transition:width 0.3s ease; }
    .bulk-log { max-height:200px; overflow-y:auto; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius); padding:12px; font-size:0.8rem; font-family:monospace; margin-top:12px; }
    .bulk-log-item { padding:3px 0; border-bottom:1px solid var(--gray-100); }
    .bulk-log-item:last-child { border-bottom:none; }
    .bulk-log-ok { color:var(--success); }
    .bulk-log-err { color:var(--danger); }
    .bulk-log-warn { color:var(--warning); }

    /* ===== TABLET (max-width: 1024px) ===== */
    @media (max-width:1024px) {
      .hero h1 { font-size:2.4rem; }
      .hero-content { gap:40px; }
      .products-grid { grid-template-columns:repeat(2,1fr); }
      .brands-grid { grid-template-columns:repeat(3,1fr); }
      .features-grid { grid-template-columns:repeat(2,1fr); }
      .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
      .search-box input { width:180px; }
      .search-box input:focus { width:240px; }
      .admin-content { padding:20px; }
      .admin-stats { grid-template-columns:repeat(2,1fr); }
    }

    /* ===== MOBILE (max-width: 768px) ===== */
    @media (max-width:768px) {
      .container { padding:0 16px; width:100%; max-width:100%; }
      .page { width:100%; max-width:100%; }
      .section { padding:36px 0; width:100%; max-width:100%; }

      /* Header */
      .header { width:100%; }
      .header-inner { height:56px; }
      .nav { display:none !important; }
      .hamburger-btn { display:flex !important; }
      .search-box { display:none !important; }
      .header-actions .btn-outline,
      .header-actions #authBtns { display:none !important; }
      .header-actions .user-menu { display:none !important; }
      .header-actions { gap:4px; }
      .logo span { font-size:1.1rem !important; -webkit-text-stroke:1.5px #5BA4D9 !important; }
      .logo img { height:32px !important; width:32px !important; }
      .logo { gap:8px !important; }
      .cart-btn { padding:6px; }

      /* Hero */
      .hero { padding:36px 0; overflow:hidden; }
      .hero h1 { font-size:1.8rem; letter-spacing:-0.5px; }
      .hero p { font-size:0.95rem; line-height:1.6; }
      .hero-btns { flex-direction:column; gap:10px; }
      .hero-btns .btn { width:100%; justify-content:center; padding:12px 20px; }
      .hero-visual { display:none; }
      .hero-content { gap:0; }

      /* Section */
      .section-header { margin-bottom:28px; }
      .section-header h2 { font-size:1.4rem; margin-bottom:8px; }
      .section-header p { font-size:0.9rem; }

      /* Products */
      .products-grid { grid-template-columns:1fr 1fr; gap:10px; width:100%; max-width:100%; }
      .product-card { overflow:hidden; min-width:0; max-width:100%; }
      .product-img { height:150px; }
      .product-info { padding:10px 10px 12px; overflow:hidden; min-width:0; }
      .product-name { font-size:0.85rem; margin-bottom:6px; word-wrap:break-word; overflow:hidden; }
      .product-brand { font-size:0.7rem; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .product-sku { display:none; }
      .price-current { font-size:1rem; }
      .price-old { font-size:0.75rem; }
      .product-price { overflow:hidden; }
      .product-actions { flex-direction:column; gap:6px; }
      .product-actions .btn { padding:7px 8px; font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; width:100%; }
      .product-meta { display:none; }
      .product-card:hover { transform:none; box-shadow:none; }

      /* Catalog */
      .catalog-layout { grid-template-columns:1fr; width:100%; max-width:100%; overflow:hidden; }
      .catalog-layout > * { min-width:0; max-width:100%; overflow:hidden; }
      #filterCategories, #filterBrands { max-height:40vh; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
      .filters { display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:150; background:var(--white); overflow-y:auto; overflow-x:hidden; padding:20px; border-radius:0; border:none; max-width:100vw; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
      .filters.mobile-open { display:flex; flex-direction:column; }
      .filters .filter-close { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--gray-200); background:var(--gray-50); cursor:pointer; position:sticky; top:0; z-index:2; align-self:flex-end; margin-bottom:12px; flex-shrink:0; }
      .filters .filter-close:active { background:var(--gray-100); }
      .mobile-filter-toggle { display:flex !important; }
      .sort-bar-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; width:100%; }
      .sort-bar-wrap::-webkit-scrollbar { display:none; }
      #sortBar { flex-wrap:nowrap; white-space:nowrap; }

      /* Product Detail */
      .product-detail { grid-template-columns:1fr; gap:20px; padding:20px 0; max-width:100%; overflow:hidden; }
      .detail-gallery { position:static; overflow:hidden; }
      .detail-main-img { height:280px; }
      .detail-main-img img { padding:8px; }
      .detail-thumbs { gap:6px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
      .detail-thumb { width:56px; height:56px; flex-shrink:0; }
      .detail-name { font-size:1.3rem; }
      .detail-price-row { flex-direction:column; align-items:stretch; gap:12px; }
      .detail-price { flex-wrap:wrap; gap:8px; }
      .detail-price .price-current { font-size:1.4rem; }
      .detail-cart-row { flex-direction:column; gap:10px; }
      .detail-cart-row .detail-qty { margin-bottom:0; }
      .detail-add-btn { width:100%; text-align:center; justify-content:center; }
      .detail-specs { overflow-x:auto; -webkit-overflow-scrolling:touch; }
      .specs-table { min-width:280px; }
      .detail-sku { flex-wrap:wrap; gap:8px !important; }
      .detail-info { overflow:hidden; }
      .detail-info > div:not(.detail-specs) { overflow:hidden; }
      .detail-stock { flex-wrap:wrap; }

      /* Cart */
      .cart-page { padding:24px 0; width:100%; }
      .cart-page h1 { font-size:1.4rem; margin-bottom:20px; }
      .cart-items { gap:12px; }
      .cart-item { flex-direction:column; text-align:center; padding:16px; gap:12px; }
      .cart-item-img { width:100%; height:180px; }
      .cart-item-info { width:100%; }
      .cart-item-name { font-size:0.95rem; }
      .cart-item-price { font-size:0.9rem; }
      .cart-item .qty-control { margin-right:0; }
      .cart-summary { max-width:100%; width:100%; }
      .coupon-row { flex-direction:column; }

      /* Order */
      .order-page { padding:24px 0; width:100%; }
      .order-page h1 { font-size:1.4rem; }
      .form-row { grid-template-columns:1fr; }

      /* Footer */
      .footer { padding:40px 0 16px; overflow:hidden; }
      .footer-grid { grid-template-columns:1fr; gap:28px; margin-bottom:28px; }
      .footer h4 { margin-bottom:10px; }

      /* Trade-in Banner */
      .tradein-banner { flex-direction:column; text-align:center; padding:24px 20px !important; }
      .tradein-banner h3 { font-size:1.1rem !important; }
      .tradein-banner > div:last-child { margin-left:0 !important; margin-top:16px; }

      /* Articles */
      .articles-grid { grid-template-columns:1fr; gap:16px; }
      .article-card-img { height:160px; }
      .article-detail-hero { padding:36px 0 30px; }
      .article-detail-hero h1 { font-size:1.5rem; }
      .article-detail-content { padding:24px 0 36px; }

      /* Brands */
      .brands-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
      .brand-card { padding:16px; }
      .brand-logo { height:80px; }
      .brand-detail-header { flex-direction:column; gap:16px; padding:20px; }
      .brand-detail-logo { width:80px; height:80px; }
      .brand-detail-info h1 { font-size:1.3rem; }

      /* Banner */
      .banner-slider { height:180px; border-radius:var(--radius); }
      .banner-overlay { padding:0 20px; }
      .banner-text h2 { font-size:1.1rem; }
      .banner-text p { font-size:0.85rem; display:none; }

      /* Modals */
      .modal { padding:24px; margin:12px; max-width:calc(100vw - 24px); border-radius:var(--radius-lg); }
      .modal h2 { font-size:1.2rem; }

      /* Toast */
      .toast-container { bottom:80px; right:12px; left:12px; }
      .toast { font-size:0.82rem; padding:10px 14px; }

      /* Admin */
      .admin-layout { grid-template-columns:1fr; position:relative; width:100%; }
      .admin-sidebar { display:none; position:fixed; top:60px; left:0; bottom:0; width:260px; z-index:140; border-right:1px solid var(--gray-200); box-shadow:var(--shadow-xl); overflow-y:auto; background:var(--white); }
      .admin-sidebar.mobile-open { display:block; }
      .admin-mobile-toggle { display:flex; position:fixed; top:68px; left:8px; z-index:141; }
      .admin-content { padding:16px; overflow-x:auto; }
      .admin-content h1 { font-size:1.2rem; }
      .admin-stats { grid-template-columns:1fr 1fr; gap:10px; }
      .stat-card { padding:14px; }
      .stat-card .stat-value { font-size:1.4rem; }
      .admin-table { font-size:0.78rem; }
      .admin-table th, .admin-table td { padding:6px 8px; white-space:nowrap; }
      .admin-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }

      /* Features grid (4-col inline) */
      .features-grid { grid-template-columns:1fr 1fr; gap:16px; }

      /* Static pages */
      .static-page-hero { padding:36px 0 30px; }
      .static-page-title { font-size:1.5rem; }
      .static-page-subtitle { font-size:0.9rem; }
      .static-page-content { padding:24px 0 36px; overflow:hidden; }
      .static-page-content h3 { font-size:1.1rem; margin:24px 0 12px; }
      .static-page-content p { font-size:0.9rem; word-wrap:break-word; }
      .static-page-content table { font-size:0.78rem; overflow-x:auto; display:block; max-width:100%; }
      .static-page-content th, .static-page-content td { padding:8px 10px; white-space:nowrap; }
      .static-page-content ul, .static-page-content ol { padding-left:20px; }
      .static-page-content li { font-size:0.9rem; margin-bottom:4px; }

      /* Quick View */
      .qv-content { grid-template-columns:1fr; }
      .qv-gallery { border-radius:var(--radius-lg) var(--radius-lg) 0 0; }

      /* Provider cards */
      .provider-cards { grid-template-columns:1fr 1fr; }

      /* Reviews */
      .rating-summary { flex-direction:column; text-align:center; }

      /* Wishlist */
      .empty-state { padding:40px 16px; }

      /* Coupon row */
      .coupon-row { flex-wrap:wrap; }

      /* Pages list admin */
      .page-item { padding:12px; }

      /* User account */
      .user-avatar { width:64px; height:64px; }

      /* Body padding for bottom nav */
      body { padding-bottom:70px; }
    }

    /* ===== SMALL MOBILE (max-width: 480px) ===== */
    @media (max-width:480px) {
      .products-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .product-card { min-width:0; max-width:100%; }
      .product-img { height:130px; }
      .product-info { padding:8px 8px 10px; min-width:0; }
      .product-name { font-size:0.78rem; }
      .product-brand { font-size:0.65rem; }
      .price-current { font-size:0.88rem; }
      .price-old { font-size:0.7rem; }
      .product-actions .btn { padding:6px 6px; font-size:0.7rem; }
      .hero h1 { font-size:1.5rem; }
      .hero p { font-size:0.88rem; }
      .hero { padding:28px 0; }
      .section { padding:28px 0; }
      .section-header h2 { font-size:1.2rem; }
      .brands-grid { grid-template-columns:1fr 1fr; gap:8px; }
      .brand-card { padding:12px 8px; }
      .brand-logo { height:60px; }
      .brand-card h3 { font-size:0.8rem; }
      .detail-main-img { height:220px; }
      .detail-main-img img { padding:6px; }
      .detail-name { font-size:1.15rem; }
      .detail-price .price-current { font-size:1.2rem; }
      .detail-specs { overflow-x:auto; }
      .specs-table { min-width:280px; }
      .cart-item-img { height:140px; }
      .admin-stats { grid-template-columns:1fr; }
      .features-grid { grid-template-columns:1fr; }
      .footer-grid { gap:20px; }
      .static-page-title { font-size:1.3rem; }
      .modal { padding:20px 16px; }
    }

    /* ===== HAMBURGER BUTTON ===== */
    .hamburger-btn {
      display:none;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      width:40px;
      height:40px;
      gap:5px;
      cursor:pointer;
      z-index:110;
      padding:8px;
      border-radius:8px;
      transition:var(--transition);
    }
    .hamburger-btn:hover { background:var(--gray-100); }
    .hamburger-btn span {
      display:block;
      width:20px;
      height:2px;
      background:var(--gray-700);
      border-radius:2px;
      transition:all 0.3s ease;
    }
    .hamburger-btn.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .hamburger-btn.active span:nth-child(2) { opacity:0; }
    .hamburger-btn.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

    /* ===== MOBILE SLIDE-OUT NAV ===== */
    .mobile-nav-overlay {
      display:none;
      position:fixed;
      top:0; left:0; right:0; bottom:0;
      background:rgba(0,0,0,0.5);
      z-index:199;
      opacity:0;
      transition:opacity 0.3s;
    }
    .mobile-nav-overlay.active { opacity:1; }
    .mobile-nav-panel {
      position:fixed;
      top:0; right:0; bottom:0;
      width:300px;
      max-width:85vw;
      background:var(--white);
      z-index:200;
      transform:translateX(100%);
      transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
      display:flex;
      flex-direction:column;
      box-shadow:var(--shadow-xl);
    }
    .mobile-nav-panel.active { transform:translateX(0); }
    .mobile-nav-header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 20px;
      border-bottom:1px solid var(--gray-200);
    }
    .mobile-nav-logo {
      font-family:'Comfortaa',cursive;
      font-size:1.3rem;
      font-weight:900;
      color:#5BA4D9;
    }
    .mobile-nav-close {
      width:36px;
      height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      transition:var(--transition);
      color:var(--gray-600);
    }
    .mobile-nav-close:hover { background:var(--gray-100); }
    .mobile-nav-search { padding:16px 20px; border-bottom:1px solid var(--gray-100); }
    .mobile-nav-links { flex:1; overflow-y:auto; padding:8px 0; }
    .mobile-nav-links a {
      display:flex;
      align-items:center;
      gap:12px;
      padding:12px 20px;
      font-size:0.95rem;
      font-weight:500;
      color:var(--gray-700);
      transition:var(--transition);
    }
    .mobile-nav-links a:hover,
    .mobile-nav-links a:active { background:var(--gray-50); color:var(--primary); }
    .mobile-nav-links a.nav-tradein-btn { background:linear-gradient(135deg,#f59e0b,#ef4444); color:white !important; font-weight:700; border-radius:12px; margin:4px 20px; padding:12px 16px !important; box-shadow:0 2px 8px rgba(245,158,11,0.35); }
    .mobile-nav-links a.nav-tradein-btn .icon { color:white !important; }
    .mobile-nav-links a .icon { color:var(--gray-400); width:20px; height:20px; }
    .mobile-nav-divider { height:1px; background:var(--gray-200); margin:8px 20px; }
    .mobile-nav-section-title {
      padding:4px 20px 8px;
      font-size:0.75rem;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.5px;
      color:var(--gray-400) !important;
      pointer-events:none;
    }
    .mobile-nav-footer {
      padding:16px 20px;
      border-top:1px solid var(--gray-200);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .mobile-nav-phone {
      display:flex;
      align-items:center;
      gap:8px;
      font-size:0.9rem;
      font-weight:600;
      color:var(--gray-700);
      justify-content:center;
      padding:8px;
    }

    /* ===== MOBILE BOTTOM NAV ===== */
    .mobile-bottom-nav {
      display:none;
      position:fixed;
      bottom:0;
      left:0;
      right:0;
      background:var(--white);
      border-top:1px solid var(--gray-200);
      z-index:100;
      padding:6px 0;
      padding-bottom:max(6px, env(safe-area-inset-bottom));
      box-shadow:0 -2px 10px rgba(0,0,0,0.05);
    }
    @media (max-width:768px) {
      .mobile-bottom-nav { display:flex; }
    }
    .mobile-bottom-nav-item {
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:2px;
      padding:4px 0;
      font-size:0.65rem;
      font-weight:500;
      color:var(--gray-500);
      transition:var(--transition);
      position:relative;
    }
    .mobile-bottom-nav-item.active,
    .mobile-bottom-nav-item:active { color:var(--primary); }
    .mobile-bottom-nav-item .icon { width:22px; height:22px; }
    .mobile-bottom-badge {
      position:absolute;
      top:0;
      right:calc(50% - 18px);
      background:var(--accent);
      color:white;
      font-size:0.55rem;
      font-weight:700;
      min-width:15px;
      height:15px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 4px;
    }

    /* ===== MOBILE FILTER TOGGLE ===== */
    .mobile-filter-toggle {
      display:none;
      align-items:center;
      gap:8px;
      padding:10px 20px;
      background:var(--primary);
      color:white;
      border-radius:24px;
      font-size:0.85rem;
      font-weight:600;
      z-index:90;
      box-shadow:var(--shadow-lg);
      transition:var(--transition);
      margin:0 auto 16px;
      width:fit-content;
    }
    .mobile-filter-toggle:active { transform:scale(0.95); }

    /* ===== SORT BAR MOBILE ===== */
    @media (max-width:768px) {
      .sort-btn { font-size:0.75rem; padding:6px 10px; white-space:nowrap; }
    }

    /* ===== ADMIN MOBILE TOGGLE ===== */
    .admin-mobile-toggle {
      display:none;
      align-items:center;
      justify-content:center;
      width:36px;
      height:36px;
      background:var(--white);
      border:1px solid var(--gray-200);
      border-radius:8px;
      box-shadow:var(--shadow);
      color:var(--gray-600);
    }

    /* ===== ADMIN SIDEBAR OVERLAY ===== */
    .admin-sidebar-overlay {
      display:none;
      position:fixed;
      top:60px;
      left:0;
      right:0;
      bottom:0;
      background:rgba(0,0,0,0.4);
      z-index:139;
    }
    .admin-sidebar-overlay.active { display:block; }

    /* ===== TOUCH DEVICE HOVER FIX ===== */
    @media (hover:none) {
      .product-card:hover { transform:none; box-shadow:none; }
      .brand-card:hover { transform:none; }
    }

    /* Wishlist */
    .wishlist-btn { position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; transition:var(--transition); box-shadow:var(--shadow-sm); }
    .wishlist-btn:hover { background:var(--danger-light); }
    .wishlist-btn.active svg { fill:var(--danger); stroke:var(--danger); }
    .wishlist-btn svg { width:18px; height:18px; stroke:var(--gray-500); fill:none; stroke-width:2; }

    /* Quick View */
    .qv-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:9999; padding:24px; }
    .qv-modal.active { display:flex; }
    .qv-content { background:var(--white); border-radius:var(--radius-lg); max-width:700px; width:100%; max-height:85vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:0; }
    .qv-gallery { padding:20px; display:flex; align-items:center; justify-content:center; background:var(--gray-50); border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
    .qv-gallery img { max-height:300px; object-fit:contain; }
    .qv-info { padding:24px; display:flex; flex-direction:column; gap:12px; }
    .qv-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:var(--gray-200); display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; }

    /* Reviews */
    .reviews-section { margin-top:24px; }
    .review-card { padding:14px; border:1px solid var(--gray-200); border-radius:var(--radius); margin-bottom:10px; }
    .review-header { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
    .review-stars { color:var(--warning); font-size:0.85rem; }
    .review-meta { font-size:0.78rem; color:var(--gray-400); }
    .review-pros { color:var(--success); font-size:0.82rem; }
    .review-cons { color:var(--danger); font-size:0.82rem; }
    .rating-summary { display:flex; align-items:center; gap:14px; padding:14px; background:var(--gray-50); border-radius:var(--radius); margin-bottom:16px; }
    .rating-big { font-size:2rem; font-weight:800; line-height:1; }
    .rating-bars { flex:1; }
    .rating-bar { display:flex; align-items:center; gap:8px; font-size:0.8rem; margin:2px 0; }
    .rating-bar-fill { height:6px; border-radius:3px; background:var(--warning); }
    .rating-bar-bg { height:6px; border-radius:3px; background:var(--gray-200); flex:1; }

    /* Stock Alert */
    .stock-alert-btn { margin-top:8px; }

    /* Compare */
    

    /* Banners */
    .banner-slider { position:relative; overflow:hidden; border-radius:var(--radius-lg); margin-bottom:32px; height:300px; }
    .banner-slide { position:absolute; top:0; left:0; right:0; bottom:0; display:flex; align-items:center; background-color:#e2e8f0; background-size:cover; background-position:center; transition:opacity 0.5s; }
    .banner-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,rgba(30,58,138,0.7),rgba(124,58,237,0.5)); display:flex; align-items:center; padding:0 48px; }
    .banner-text { color:white; max-width:500px; }
    .banner-text h2 { font-size:2rem; font-weight:800; margin-bottom:8px; }
    .banner-text p { font-size:1rem; opacity:0.9; margin-bottom:16px; }
    .banner-dots { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
    .banner-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; transition:var(--transition); }
    .banner-dot.active { background:white; width:28px; border-radius:5px; }

    /* Coupon */
    .coupon-row { display:flex; gap:8px; margin:12px 0; }
    .coupon-input { flex:1; padding:10px 14px; border:1px solid var(--gray-300); border-radius:var(--radius); font-size:0.9rem; }
    .coupon-applied { padding:6px 12px; background:var(--success-light); color:var(--success); border-radius:var(--radius); font-size:0.85rem; font-weight:600; }

    /* Recently Viewed */
    .recent-section { margin-top:40px; margin-bottom:24px; padding-top:24px; border-top:1px solid var(--gray-200); }
    .recent-section h2 { font-size:1.3rem; font-weight:700; margin-bottom:16px; }

    /* Articles */
    .articles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
    .article-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:var(--transition); }
    .article-card:hover { border-color:var(--gray-300); box-shadow:0 14px 28px -4px rgba(0,0,0,0.12); transform:translateY(-3px); }
    .article-card-img { height:200px; background:var(--gray-50); display:flex; align-items:center; justify-content:center; overflow:hidden; }
    .article-card-img img { width:100%; height:100%; object-fit:cover; }
    .article-card-body { padding:20px; }
    .article-card-title { font-size:1.1rem; font-weight:700; margin-bottom:8px; line-height:1.4; }
    .article-card-excerpt { font-size:0.9rem; color:var(--gray-500); line-height:1.6; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
    .article-card-date { font-size:0.8rem; color:var(--gray-400); }
    .article-detail-hero { background:linear-gradient(135deg,var(--gray-900),#1E3A5F,var(--primary)); padding:60px 0 50px; color:white; text-align:center; }
    .article-detail-hero h1 { font-size:2rem; font-weight:800; max-width:800px; margin:0 auto 12px; }
    .article-detail-hero .article-date { font-size:0.9rem; opacity:0.8; }
    .article-detail-content { padding:40px 0; }
    .article-detail-content h3 { font-size:1.2rem; font-weight:700; margin:28px 0 12px; }
    .article-detail-content p { font-size:1rem; color:var(--gray-600); line-height:1.8; margin-bottom:16px; }
    .article-detail-content ul, .article-detail-content ol { padding-left:24px; margin-bottom:16px; }
    .article-detail-content li { font-size:0.95rem; color:var(--gray-600); line-height:1.8; margin-bottom:6px; }
    .article-detail-content strong { color:var(--gray-900); }
    .article-detail-content table { width:100%; border-collapse:collapse; margin:16px 0; }
    .article-detail-content th, .article-detail-content td { padding:10px 14px; border:1px solid var(--gray-200); text-align:left; font-size:0.9rem; }
    .article-detail-content th { background:var(--gray-50); font-weight:600; }
    .article-back { display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; font-size:0.9rem; margin-bottom:24px; cursor:pointer; transition:var(--transition); }
    .article-back:hover { color:var(--primary-dark); }

    /* Recommendations */
    .recommendations-section { margin-top:20px; padding-top:16px; border-top:2px solid var(--gray-200); }
    .recommendations-header { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
    .recommendations-header .icon { width:24px; height:24px; color:var(--accent); }
    .recommendations-header h2 { font-size:1.3rem; font-weight:800; margin:0; }
    .recommendations-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; -webkit-overflow-scrolling:touch; touch-action:pan-x; cursor:grab; user-select:none; }
    .recommendations-scroll::-webkit-scrollbar { height:6px; }
    .recommendations-scroll::-webkit-scrollbar-track { background:var(--gray-100); border-radius:3px; }
    .recommendations-scroll::-webkit-scrollbar-thumb { background:var(--gray-300); border-radius:3px; }
    .rec-card { flex:0 0 200px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); text-decoration:none; color:inherit; cursor:pointer; }
    .rec-card:hover { border-color:var(--gray-300); box-shadow:var(--shadow-md); transform:translateY(-2px); }
    .rec-card-img { height:160px; background:var(--gray-50); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .rec-card-img img { width:100%; height:100%; object-fit:cover; }
    .rec-card-info { padding:12px 14px 16px; }
    .rec-card-brand { font-size:0.7rem; color:var(--primary); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px; }
    .rec-card-name { font-size:0.85rem; font-weight:600; line-height:1.3; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .rec-card-price { display:flex; align-items:baseline; gap:6px; }
    .rec-card-price .price-current { font-size:1rem; font-weight:800; color:var(--gray-900); }
    .rec-card-price .price-old { font-size:0.75rem; color:var(--gray-400); text-decoration:line-through; }

    @media (max-width:768px) {
      .recommendations-section { margin-top:32px; padding-top:24px; }
      .recommendations-header h2 { font-size:1.1rem; }
      .recommendations-scroll { overflow-x:auto; touch-action:pan-x; gap:12px; }
      .rec-card { flex:0 0 140px; }
      .rec-card-img { height:120px; }
      .rec-card-info { padding:8px 10px 12px; }
      .rec-card-name { font-size:0.8rem; }
    }
    @media (max-width:480px) {
      .rec-card { flex:0 0 130px; }
      .rec-card-img { height:110px; }
      .rec-card-info { padding:6px 8px 10px; }
    }

    .static-page-hero {
      background: linear-gradient(135deg, var(--gray-900) 0%, #1E3A5F 50%, var(--primary) 100%);
      padding: 60px 0 50px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .static-page-hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -20%;
      width: 140%;
      height: 200%;
      background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
    }
    .static-page-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      background: linear-gradient(to top, var(--bg), transparent);
    }
    .static-page-title {
      font-size: 2.2rem;
      font-weight: 800;
      color: #fff;
      margin: 0 0 12px;
      letter-spacing: -0.5px;
      position: relative;
      z-index: 1;
    }
    .static-page-subtitle {
      font-size: 1.05rem;
      color: rgba(255,255,255,0.7);
      margin: 0;
      position: relative;
      z-index: 1;
    }
    .static-page-content {
      padding: 40px 0 60px;
    }
    .static-page-content h3 {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--gray-900);
      margin: 36px 0 16px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--gray-100);
    }
    .static-page-content h3:first-child { margin-top: 0; }
    [style*="background:linear-gradient(135deg,var(--primary)"] h3,
    [style*="background: linear-gradient(135deg,var(--primary)"] h3,
    [style*="background:linear-gradient(135deg,#1D4ED8"] h3,
    [style*="background:linear-gradient(135deg,var(--success)"] h3 {
      color: #fff !important;
      border-bottom: none !important;
      padding-bottom: 0 !important;
    }
    [style*="background:linear-gradient(135deg,var(--primary)"] p,
    [style*="background: linear-gradient(135deg,var(--primary)"] p,
    [style*="background:linear-gradient(135deg,#1D4ED8"] p,
    [style*="background:linear-gradient(135deg,var(--success)"] p {
      color: rgba(255,255,255,0.9) !important;
    }
    .static-page-content p {
      font-size: 1rem;
      line-height: 1.85;
      color: var(--gray-600);
      margin-bottom: 16px;
    }
    .static-page-content ul, .static-page-content ol {
      padding-left: 24px;
      margin-bottom: 16px;
    }
    .static-page-content li {
      font-size: 0.95rem;
      line-height: 1.9;
      color: var(--gray-600);
      margin-bottom: 6px;
    }
    .static-page-content table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 24px;
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      border: 1px solid var(--gray-200);
    }
    .static-page-content th {
      background: var(--gray-50);
      padding: 14px 20px;
      text-align: left;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--gray-500);
      border-bottom: 2px solid var(--gray-200);
    }
    .static-page-content td {
      padding: 14px 20px;
      font-size: 0.92rem;
      color: var(--gray-700);
      border-bottom: 1px solid var(--gray-100);
    }
    .static-page-content strong {
      color: var(--gray-900);
    }