/*
 * desktop.css — Paobee Bakery PWA
 * Desktop layout overrides (min-width: 1024px)
 *
 * TABLE OF CONTENTS:
 *   1. LAYOUT RESET & TOP NAV
 *   2. MAIN CONTENT AREA & CART SIDEBAR
 *   3. HOME — Hero, Stats, Category Pills, Product Grid
 *   4. ABOUT SECTION & FOOTER
 *   5. ORDERS / SETTINGS PANELS
 *   6. MANAGER — Sidebar, Content Area
 *   7. AUTH ON DESKTOP
 *   8. CART PANEL HEADER & CHECKOUT GRID
 */

@media (min-width:1024px) {

  /* ── Reset mobile constraints ─────────────────── */
  body { max-width:100%; overflow-x:hidden; }

  /* ── Desktop top nav ──────────────────────────── */
  .bnav { display:none !important; }
  .wa-btn { bottom:24px; right:24px; }

  #dt-nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(250,247,244,0.97);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center;
    padding:0 48px; height:64px; gap:0;
  }
  body.dark #dt-nav { background:rgba(26,17,24,0.97); }
  .dt-logo { font-family:Georgia,serif; font-size:26px; color:var(--pink); margin-right:48px; cursor:pointer; flex-shrink:0; }
  .dt-links { display:flex; gap:4px; flex:1; }
  .dt-link { padding:8px 16px; border-radius:10px; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; border:none; background:none; font-family:'DM Sans',sans-serif; transition:all .2s; white-space:nowrap; }
  .dt-link:hover { color:var(--text); background:var(--sbg); }
  .dt-link.active { color:var(--pink); background:var(--pl); font-weight:600; }
  .dt-actions { display:flex; align-items:center; gap:10px; }
  .dt-cart-btn { background:var(--pink); color:#fff; border:none; border-radius:50px; padding:9px 20px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; }
  .dt-user-btn { background:var(--card); border:1.5px solid var(--border); border-radius:50px; padding:7px 16px; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; color:var(--text); }

  /* ── Main layout wrapper ──────────────────────── */
  #dt-layout { display:flex; min-height:100vh; padding-top:64px; }
  .screen { display:none !important; }

  /* ── Main content area ────────────────────────── */
  #dt-main { flex:1; min-width:0; padding-bottom:60px; }

  /* ── Cart sidebar ─────────────────────────────── */
  #dt-cart-panel {
    width:380px; flex-shrink:0;
    position:fixed; top:64px; right:0; bottom:0;
    background:var(--card); border-left:1px solid var(--border);
    overflow-y:auto; transform:translateX(100%);
    transition:transform .3s ease; z-index:90;
  }
  #dt-cart-panel.open { transform:translateX(0); }
  #dt-main.cart-open { margin-right:380px; }

  /* ── Home: hero ───────────────────────────────── */
  .dt-hero {
    display:grid; grid-template-columns:1fr 1fr;
    align-items:stretch; padding:0 0 0 64px;
    gap:0; min-height:540px;
    background:linear-gradient(135deg,var(--pl),var(--cream));
    overflow:hidden;
  }
  .dt-hero-text { display:flex; flex-direction:column; justify-content:center; padding:64px 48px 64px 0; }
  .dt-hero-tag { font-size:12px; font-weight:600; color:var(--pink); letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; }
  .dt-hero-title { font-family:Georgia,serif; font-size:52px; line-height:1.1; color:var(--text); margin-bottom:16px; }
  .dt-hero-title em { color:var(--pink); font-style:italic; }
  .dt-hero-sub { font-size:16px; color:var(--sub); line-height:1.7; margin-bottom:32px; max-width:440px; }
  .dt-hero-btns { display:flex; gap:14px; }
  .dt-hero-img { overflow:hidden; }

  /* ── Stats strip ──────────────────────────────── */
  .dt-stats { display:flex; gap:0; margin:0 64px 48px; background:var(--card); border-radius:20px; border:1px solid var(--border); overflow:hidden; }
  .dt-stat { flex:1; padding:24px; text-align:center; border-right:1px solid var(--border); }
  .dt-stat:last-child { border-right:none; }
  .dt-stat-num { font-family:Georgia,serif; font-size:28px; color:var(--pink); font-weight:600; }
  .dt-stat-lbl { font-size:12px; color:var(--muted); margin-top:4px; }

  /* ── Section headers ──────────────────────────── */
  .dt-sec { padding:0 64px; margin-bottom:32px; }
  .dt-sec-hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
  .dt-sec-title { font-family:Georgia,serif; font-size:28px; color:var(--text); }
  .dt-sec-title em { color:var(--pink); font-style:italic; }

  /* ── Category pills ───────────────────────────── */
  .dt-cats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
  .dt-cat { background:var(--card); border:1.5px solid var(--border); border-radius:14px; padding:10px 18px; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text); transition:all .2s; }
  .dt-cat:hover { border-color:var(--pink); color:var(--pink); }
  .dt-cat.active { background:var(--pink); color:#fff; border-color:var(--pink); }

  /* ── Product grid ─────────────────────────────── */
  .dt-pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .dt-pgrid .pcard { border-radius:20px; }
  .dt-pgrid .pcard-img { height:380px; font-size:80px; }

  /* ── About section ────────────────────────────── */
  .dt-about { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:48px 64px; background:var(--card); margin:0 0 0 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); align-items:center; }
  .dt-about-img { border-radius:24px; background:linear-gradient(135deg,var(--pm),var(--pl)); height:320px; display:flex; align-items:center; justify-content:center; font-size:120px; }
  .dt-about-title { font-family:Georgia,serif; font-size:32px; color:var(--text); margin-bottom:16px; line-height:1.2; }
  .dt-about-p { font-size:15px; color:var(--sub); line-height:1.8; margin-bottom:12px; }
  .dt-about-tags { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
  .dt-about-tag { background:var(--pl); color:var(--pink); font-size:12px; font-weight:600; padding:6px 16px; border-radius:50px; }
  .dt-contact-row { display:flex; gap:12px; }
  .dt-cbtn { display:flex; align-items:center; gap:10px; padding:12px 22px; border-radius:14px; font-size:14px; font-weight:600; cursor:pointer; border:none; font-family:'DM Sans',sans-serif; text-decoration:none; }
  .dt-cbtn.wa { background:#25D366; color:#fff; }
  .dt-cbtn.ig { background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }

  /* ── Footer ───────────────────────────────────── */
  .dt-footer { background:var(--card); border-top:1px solid var(--border); padding:32px 64px; display:flex; align-items:center; justify-content:space-between; }
  .dt-footer-logo { font-family:Georgia,serif; font-size:22px; color:var(--pink); }
  .dt-footer-copy { font-size:13px; color:var(--muted); }
  .dt-footer-links { display:flex; gap:16px; }
  .dt-footer-link { font-size:13px; color:var(--muted); cursor:pointer; text-decoration:none; }
  .dt-footer-link:hover { color:var(--pink); }

  /* ── Orders / Settings desktop panels ─────────── */
  .dt-panel { padding:48px 64px; }
  .dt-panel-title { font-family:Georgia,serif; font-size:32px; color:var(--text); margin-bottom:24px; }
  .dt-2col { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .dt-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }

  /* ── Manager desktop ──────────────────────────── */
  #dt-mgr-layout { display:flex; gap:0; }
  #dt-mgr-sidebar {
    width:220px; flex-shrink:0;
    background:var(--card); border-right:1px solid var(--border);
    padding:32px 16px; min-height:calc(100vh - 64px);
    position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto;
  }
  .dt-mgr-link { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:500; color:var(--muted); cursor:pointer; margin-bottom:4px; border:none; background:none; font-family:'DM Sans',sans-serif; width:100%; text-align:left; }
  .dt-mgr-link:hover { background:var(--sbg); color:var(--text); }
  .dt-mgr-link.active { background:var(--pl); color:var(--pink); font-weight:600; }
  .dt-mgr-link-icon { font-size:18px; }
  #dt-mgr-content { flex:1; padding:32px 48px; min-width:0; }

  /* ── Auth on desktop ──────────────────────────── */
  #auth-screen { align-items:center; justify-content:center; animation:none !important; }
  #auth-screen .auth-card { max-width:420px; }

  /* ── User pill repositioned ───────────────────── */
  .user-pill { display:none !important; } /* shown in dt-nav instead */

  /* ── Cart panel header ────────────────────────── */
  .dt-cart-hdr { padding:20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--card); z-index:1; }
  .dt-cart-hdr-title { font-family:Georgia,serif; font-size:20px; color:var(--text); }
  .dt-cart-close { background:var(--border); border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; color:var(--text); display:flex; align-items:center; justify-content:center; }

  /* ── Checkout on desktop ──────────────────────── */
  .dt-checkout-grid { display:grid; grid-template-columns:1fr 380px; gap:32px; padding:48px 64px; align-items:start; }
}