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

   Strategy: override `max-width` on existing layout containers and widen
   grids. Existing class hierarchy is reused so each page works without any
   per-page restructuring.
   ============================================================================ */

@media (min-width: 1024px) {

  /* ----- Header / wrap containers ----- */
  /* Every customer page uses one of these patterns. We standardize all of
     them to a single comfortable maximum that matches Amazon's content
     width while still keeping page chrome readable. */
  .header-in,
  .wrap,
  .wrap-inner,
  .container {
    max-width: 1400px !important;
  }

  /* Page body padding becomes more generous so cards don't crowd the edges */
  .wrap {
    padding: 24px 32px !important;
  }

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

  /* Header gains breathing room on desktop */
  .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
     Sidebar-left filters + wider main grid (5-col)
     ============================================================ */

  /* Many pages structure their content as <div class="wrap"> directly with
     filters on top. We turn that into a 2-column desktop layout when an
     element with class .catalog-layout or .products-layout is present.
     For pages that don't use those wrappers, the grid widens itself: */
  .products-grid,
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 18px !important;
  }

  /* Slightly taller product cards on desktop for better visual weight */
  .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
     Wider gallery + right column
     ============================================================ */
  .pd-layout,
  .product-layout {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 36px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
  }

  /* ============================================================
     CART — cart.html
     Items list + sticky summary
     ============================================================ */
  .cart-layout {
    grid-template-columns: 1fr 360px !important;
    gap: 22px !important;
  }

  /* ============================================================
     CHECKOUT — checkout.html
     Already a 2-col layout (main + summary); just widen it.
     ============================================================ */
  .layout {
    grid-template-columns: 1fr 380px !important;
    gap: 24px !important;
  }

  /* ============================================================
     ACCOUNT — account.html
     Profile sidebar + content panel (Amazon "Your Account")
     ============================================================ */
  /* Page already uses a single 760px column. Widen container and turn the
     stat tiles into a 4-col fixed row regardless of the page's local
     responsive rules. */
  .stats {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
  }
  .stat .num { font-size: 24px !important; }

  /* Menu items get bigger on desktop */
  .menu-item { padding: 16px 22px !important; }
  .menu-item .mtext { font-size: 14.5px !important; }
  .menu-item .mic { font-size: 22px !important; }

  /* Wallet hero card */
  .wallet-card { padding: 22px 26px !important; }
  .wallet-card .wb { font-size: 30px !important; }
  .wallet-card .wic { font-size: 40px !important; }

  /* ============================================================
     ORDERS — orders.html
     Wider cards; thumbs row stays the same but text breathes
     ============================================================ */
  .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; }

  /* ============================================================
     ORDER DETAIL — order-detail.html
     Already vertical card stack; pages widen automatically through .wrap.
     Bump card padding so the wider space doesn't look empty.
     ============================================================ */
  .card { padding: 22px !important; }

  /* ============================================================
     WISHLIST — wishlist.html
     Already grid; widen to 5+ columns at desktop
     ============================================================ */
  /* .grid override above handles this */

  /* ============================================================
     NOTIFICATIONS — notifications.html
     Already vertical list; just constrain a bit narrower since each row
     is text-heavy and overly long lines hurt readability.
     ============================================================ */
  .n-item { padding: 16px 22px !important; }
  .n-title { font-size: 15px !important; }
  .n-text { font-size: 13.5px !important; }

  /* ============================================================
     LOGIN — login.html
     Already centered card; nothing to do.
     ============================================================ */

  /* ============================================================
     HOMEPAGE — index.html
     Hero banner + category strip + product rails
     ============================================================ */
  .hero,
  .hero-banner {
    padding: 60px 48px !important;
  }
  .hero h1, .hero-banner h1 { font-size: 38px !important; }

  /* Category row pills become roomier */
  .cat-strip { gap: 14px !important; }
  .cat-pill { padding: 14px 18px !important; }
}

/* ============================================================================
   Optional: very large screens (>1600px) get even more breathing room.
   ============================================================================ */
@media (min-width: 1600px) {
  .header-in, .wrap, .wrap-inner, .container { max-width: 1500px !important; }
  .products-grid, .grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  }
}