/* ============================================================================
   customer-desktop.css — Amazon/Flipkart-style desktop layout enhancements
   ----------------------------------------------------------------------------
   Loaded on every customer page. Activates only at desktop widths (≥1024px).
   Mobile / tablet layouts remain exactly as each page's own CSS defines them.

   Strategy:
   - Content lives inside a centered container (~1440px) — not edge-to-edge.
     Wide screens get blank margins instead of stretched content, matching
     Amazon, Flipkart, and most professional e-commerce sites.
   - Product grid auto-fits ~220px cards: that's 5 per row at 1440px container,
     6+ on ultrawide. No forced column count.
   - Filter sidebar is a slim 220px column so the catalogue gets most space.
   ============================================================================ */

@media (min-width: 1024px) {

  /* ----- Site-wide content container ----------------------------------- */
  .header-in,
  .wrap,
  .wrap-inner,
  .container,
  .cust-footer-in,
  .cust-foot-bottom {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Page body — comfortable horizontal padding, not flush to edges */
  .wrap {
    padding: 28px 32px !important;
  }

  /* Bottom mobile nav: hide on desktop */
  .bottom-nav { display: none !important; }
  .pad-bottom { height: 0 !important; }

  /* Header inner row — same padding to align with .wrap below */
  .header-in {
    padding: 14px 32px !important;
    gap: 22px !important;
  }
  .logo { font-size: 24px !important; }
  .header-title { font-size: 18px !important; }

  /* ============================================================
     CATALOG — products.html & search results
     ============================================================ */
  .products-grid,
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }
  .layout {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }
  .pcard .pimg { font-size: 56px !important; }
  .pcard .pn { font-size: 13.5px !important; min-height: 38px !important; }
  .pcard .pp { font-size: 16px !important; }

  /* ============================================================
     PRODUCT DETAIL — product.html
     ============================================================ */
  .pd-layout,
  .product-layout {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 40px !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
  }

  /* ============================================================
     CART — cart.html
     ============================================================ */
  .cart-layout {
    grid-template-columns: 1fr 380px !important;
    gap: 28px !important;
  }

  /* ============================================================
     CHECKOUT — checkout.html  (uses .layout with 2 cols)
     ============================================================ */
  .layout {
    grid-template-columns: 1fr 400px !important;
    gap: 28px !important;
  }
  .wrap > .layout:has(.filters) {
    grid-template-columns: 220px 1fr !important;
    gap: 24px !important;
  }

  /* ============================================================
     ACCOUNT — account.html
     ============================================================ */
  .stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .stat .num { font-size: 24px !important; }
  .menu-item { padding: 16px 22px !important; }
  .menu-item .mtext { font-size: 14.5px !important; }
  .menu-item .mic { font-size: 22px !important; }
  .wallet-card { padding: 22px 26px !important; }
  .wallet-card .wb { font-size: 30px !important; }
  .wallet-card .wic { font-size: 40px !important; }

  /* ============================================================
     ORDERS — orders.html
     ============================================================ */
  .order-card { margin-bottom: 16px !important; }
  .oc-body { padding: 16px 22px !important; gap: 18px !important; }
  .oc-head { padding: 14px 22px !important; }
  .oc-thumb { width: 60px !important; height: 60px !important; }
  .oc-items-text { font-size: 14px !important; }
  .oc-total { font-size: 17px !important; }

  .card { padding: 22px !important; }

  .n-item { padding: 16px 22px !important; }
  .n-title { font-size: 15px !important; }
  .n-text { font-size: 13.5px !important; }

  /* ============================================================
     HOMEPAGE — index.html
     ============================================================ */
  .hero,
  .hero-banner {
    padding: 60px 48px !important;
  }
  .hero h1, .hero-banner h1 { font-size: 38px !important; }
  .cat-strip { gap: 14px !important; }
  .cat-pill { padding: 14px 18px !important; }
}

/* ============================================================================
   Extra-wide screens (>1600px) — keep content at a comfortable 1500px so
   wide monitors get clean blank margins instead of stretched content.
   ============================================================================ */
@media (min-width: 1600px) {
  .header-in,
  .wrap,
  .wrap-inner,
  .container,
  .cust-footer-in,
  .cust-foot-bottom {
    max-width: 1500px !important;
  }
}