/* ═══════════════════════════════════════════════════════════════════
  }
    max-width: 1300px !important;

  #app {
    padding-bottom: 0 !important;
  }


  /* ═══════════════════════════════════════════════════════
     2. CATALOG PAGE DESKTOP ENHANCEMENTS
     ═══════════════════════════════════════════════════════ */

  /* ── 2.1 Constrain & Center Content ── */
  body[data-page="katalog"] .prod-container {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 32px 60px;
  }

  /* ── 2.2 Convert Vertical List → Multi-Column Grid ── */
  body[data-page="katalog"] .prod-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 24px !important;
    flex-direction: row !important;
  }

  /* ── 2.3 Transform Horizontal Cards → Vertical Cards ── */
  body[data-page="katalog"] .prod-card-list {
    flex-direction: column !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1.5px solid #EBF7FC !important;
    box-shadow: 0 2px 12px rgba(11, 61, 110, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  body[data-page="katalog"] .prod-card-list:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(20, 128, 176, 0.12) !important;
    border-color: #BAE6F7 !important;
  }

  /* Image: full width, taller */
  body[data-page="katalog"] .prod-list-img {
    width: 100% !important;
    height: 200px !important;
    border-radius: 0 !important;
  }

  body[data-page="katalog"] .prod-list-img img {
    border-radius: 0 !important;
  }

  /* Body: proper card padding */
  body[data-page="katalog"] .prod-list-body {
    padding: 16px 16px 14px !important;
  }

  /* Action buttons adapt to vertical layout */
  body[data-page="katalog"] .prod-card-list .prod-footer,
  body[data-page="katalog"] .prod-card-list .prod-list-actions {
    padding: 0 16px 16px !important;
  }

  /* ── 2.4 Toolbar — Centered & Wider ── */
  body[data-page="katalog"] .toolbar {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 32px 12px;
  }

  /* ── 2.5 Page Header — Wider Padding ── */
  body[data-page="katalog"] .page-header-premium {
    padding: 32px 48px 48px;
  }

  body[data-page="katalog"] .page-title {
    font-size: 2.2rem;
  }

  /* ── 2.6 Result Meta ── */
  body[data-page="katalog"] .result-meta {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
  }

  /* ── 2.7 Category Scroll — Center & Wrap ── */
  body[data-page="katalog"] .cat-scroll {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    overflow-x: visible;
    scrollbar-width: auto;
    padding: 0 32px 20px;
  }

  body[data-page="katalog"] .cat-item {
    width: 72px;
  }

  body[data-page="katalog"] .cat-circle {
    width: 72px;
    height: 72px;
  }

  /* ── 2.8 Empty State ── */
  body[data-page="katalog"] .empty {
    grid-column: 1 / -1;
  }


  /* ═══════════════════════════════════════════════════════
     3. PROFILE PAGE DESKTOP ENHANCEMENTS
     ═══════════════════════════════════════════════════════ */

  /* ── 3.1 Container ── */
  .pf-page {
    max-width: 500px !important;
    margin: 40px auto 80px !important;
    padding: 0 0 40px !important;
    border-radius: 32px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08) !important;
    display: block !important;
    overflow: hidden !important;
    min-height: auto !important;
  }

  /* ── 3.2 Adjustments for Centered Layout ── */
  .pf-header {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 32px 20px 8px !important;
  }

  .pf-profile-card {
    padding: 24px 24px 32px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .pf-menu-section, .pf-logout-section {
    padding: 24px 20px 0 !important;
  }


  /* ── 3.6 Edit Panel → Desktop Slide-In ── */
  .pf-edit-panel {
    max-width: 500px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100%) !important;
    right: auto !important;
    border-radius: 32px !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15) !important;
  }
  .pf-edit-panel.show {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* ── 3.7 Modals ── */
  .pf-modal-card {
    max-width: 400px !important;
  }


  /* ═══════════════════════════════════════════════════════
     4. PRODUCT DETAIL DESKTOP ENHANCEMENTS
     ═══════════════════════════════════════════════════════ */

  /* ── 4.1 Expand All Content Widths & Two-Column Grid ── */
  body[data-page="produk"] .pd-desktop-grid {
    display: grid !important;
    grid-template-columns: 1fr 400px !important;
    gap: 32px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px 32px 60px !important;
    align-items: start !important;
  }

  body[data-page="produk"] .pd-grid-left {
    position: sticky !important;
    top: 32px !important;
  }

  body[data-page="produk"] .pd-hero {
    max-width: 100% !important;
    border-radius: 24px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    box-shadow: 0 8px 30px rgba(11, 61, 110, 0.06) !important;
  }

  body[data-page="produk"] .pd-hero img {
    object-fit: contain !important;
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
    border-radius: 24px !important;
  }

  body[data-page="produk"] .pd-grid-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body[data-page="produk"] .pd-main-card {
    max-width: 100% !important;
    padding: 32px 32px 28px !important;
    border-radius: 24px !important;
    margin-top: 0 !important;
    border: 1px solid #EBF7FC !important;
    box-shadow: 0 4px 20px rgba(11, 61, 110, 0.04) !important;
  }

  body[data-page="produk"] .pd-name {
    font-size: 1.8rem;
  }

  body[data-page="produk"] .pd-price {
    font-size: 2rem;
  }

  body[data-page="produk"] .pd-section,
  body[data-page="produk"] .pd-seller,
  body[data-page="produk"] .pd-tip {
    max-width: 100% !important;
    margin-top: 0 !important;
  }

  body[data-page="produk"] .pd-card,
  body[data-page="produk"] .pd-seller-card,
  body[data-page="produk"] .pd-tip-card {
    padding: 24px 32px !important;
    border-radius: 20px !important;
  }

  body[data-page="produk"] .pd-wrap {
    max-width: 100% !important;
  }

  /* ── 4.2 Related Products — Grid ── */
  body[data-page="produk"] .related-section {
    max-width: 1200px !important;
    margin: 0 auto 60px !important;
    padding: 0 32px !important;
  }

  body[data-page="produk"] .related-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px !important;
  }

  body[data-page="produk"] .rel-img {
    height: 160px;
  }

  /* ── 4.3 Bottom Bar — In Flow ── */
  body[data-page="produk"] .pd-bottom-bar {
    position: static !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(11, 61, 110, 0.04) !important;
    padding: 24px 32px !important;
    border: 1px solid #EBF7FC !important;
    animation: none !important;
  }

  body[data-page="produk"] .pd-bar-buy {
    padding: 0 32px;
    font-size: .95rem;
    height: 48px;
  }
  
  body[data-page="produk"] .pd-bar-fav,
  body[data-page="produk"] .pd-bar-cart {
    width: 48px;
    height: 48px;
  }

  /* ── 4.4 Breadcrumb ── */
  body[data-page="produk"] .pd-breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    border-bottom: none;
    padding: 24px 32px 0;
  }

} /* END @media (min-width: 1024px) */


/* ═══════════════════════════════════════════════════════════════
   EXTRA WIDE SCREENS (≥ 1440px) — Further expansions
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {

  /* Homepage */
  #app {
    max-width: 1600px !important;
  }

  .hscroll-track {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 24px !important;
  }

  .vcard-img {
    height: 180px;
  }

  /* Catalog */
  body[data-page="katalog"] .prod-container,
  body[data-page="katalog"] .toolbar,
  body[data-page="katalog"] .cat-scroll,
  body[data-page="katalog"] .result-meta {
    max-width: 1600px;
  }

  body[data-page="katalog"] .prod-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  }

  body[data-page="katalog"] .prod-list-img {
    height: 220px !important;
  }

  /* Profile */
  .pf-page {
    max-width: 1280px !important;
    grid-template-columns: 420px 1fr !important;
  }

  .pf-menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Product Detail */
  body[data-page="produk"] .pd-desktop-grid {
    max-width: 1300px !important;
    grid-template-columns: 1fr 440px !important;
    gap: 48px !important;
  }

  body[data-page="produk"] .related-section,
  body[data-page="produk"] .pd-breadcrumb {
    max-width: 1300px !important;
  }