/* ============================================================================
 * delivery-address-book.desktop.css — DESKTOP / TABLET · light-2026 (media ≥768)
 * ----------------------------------------------------------------------------
 * MOBILE Source-of-Truth (the page's inline <style>) is NEVER touched by this
 * file — it only loads at ≥768px and only restyles beside the AppShell sidebar
 * (body.ptshell, added by ptcargo-shell.js). Direction reference (approved):
 * account-hub.css + profile.desktop.css — a light neutral canvas (#F4F5F7),
 * white cards with NEUTRAL (#E8EAEF) hairline borders + soft shadow, NO
 * dark/coffee/orange hero (a light header bar instead), orange (--sun) used only
 * as a sparing accent. The address list renders as FLAT rows (hairline dividers)
 * inside ONE card — not per-item white boxes. Layout + skin only.
 * NOTE: AppShell already de-fixes .addbar (position:relative !important) and sets
 * .page-header sticky top:88px on desktop — this file cooperates with that.
 * ========================================================================== */
@media (min-width:768px){

  /* light neutral canvas (beside the shell sidebar) */
  body.ptshell{background:#F4F5F7}

  /* centered, capped content column */
  body.ptshell main.page{max-width:880px;margin-inline:auto;padding:10px 24px 48px}

  /* --- page header → light white bar (nav lives in the shell sidebar/topbar) --- */
  body.ptshell header.page-header{background:#fff;border-bottom:1px solid #E8EAEF;backdrop-filter:none;-webkit-backdrop-filter:none}
  body.ptshell header.page-header .ib{display:none}                 /* back = shell sidebar */
  body.ptshell header.page-header .htitle{font-size:18px;color:#181A1D}
  body.ptshell .hcount{background:#F4F5F7;color:var(--sun-deep)}

  /* intro note → soft neutral banner (keep the accent icon only) */
  body.ptshell .note{background:#fff;border:1px solid #E8EAEF;color:var(--ink-2);box-shadow:0 14px 40px -30px rgba(20,25,35,.2)}
  body.ptshell .note b{color:var(--ink)}

  /* --- add action: an inline pill at the TOP of the content (not a bottom bar).
     .addbar is moved inside main.page in the HTML; on mobile it stays
     position:fixed (SoT), on desktop AppShell makes it flow here. --- */
  body.ptshell .addbar{background:none;padding:0;margin:0 0 18px}
  body.ptshell .addbtn{width:auto;height:46px;padding:0 22px;box-shadow:0 14px 28px -16px rgba(239,95,6,.7)}
  body.ptshell .addbtn:hover{filter:brightness(1.03)}

  /* --- address list = ONE white card, FLAT rows with hairline dividers --- */
  body.ptshell .list{display:block;gap:0;background:#fff;border:1px solid #E8EAEF;border-radius:18px;box-shadow:0 18px 44px -30px rgba(20,25,35,.24);overflow:hidden}
  body.ptshell .addr{background:none;border:0;border-radius:0;box-shadow:none;padding:18px 22px;border-bottom:1px solid #F0F1F4;animation:none;transition:background .12s}
  body.ptshell .addr:last-child{border-bottom:none}
  body.ptshell .addr:hover{background:#F7F8FA}
  /* default row: sparing orange accent (left rail + faint tint) — no full orange box */
  body.ptshell .addr.is-def{background:#FFF9F4;box-shadow:inset 3px 0 0 var(--sun-deep)}
  body.ptshell .addr-acts{border-top-color:#F0F1F4}
  body.ptshell .abtn{transition:background .12s,border-color .12s,color .12s}
  body.ptshell .abtn:hover{background:#F7F8FA}
  body.ptshell .abtn.set:hover{background:#FFF3E7}
  body.ptshell .abtn.del:hover{background:#FFF1EE}

  /* loading skeletons flow as rows inside the same card */
  body.ptshell .sk{background:none;border:0;border-radius:0;box-shadow:none;padding:18px 22px;border-bottom:1px solid #F0F1F4}

  /* empty / error → centered inside a light card */
  body.ptshell .empty{background:#fff;border:1px solid #E8EAEF;border-radius:18px;box-shadow:0 18px 44px -30px rgba(20,25,35,.24)}

  /* --- add/edit + delete: bottom sheet → centered dialog --- */
  body.ptshell .ov{align-items:center}
  body.ptshell .sheet{border-radius:22px;max-width:560px;max-height:88vh}
  body.ptshell .confirm{max-width:420px;margin:0 auto}

  /* softer, modern form inputs (light-2026) */
  body.ptshell .field input,body.ptshell .field select,body.ptshell .field textarea{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .field input:focus,body.ptshell .field select:focus,body.ptshell .field textarea:focus{background:#fff;border-color:var(--sun);box-shadow:0 0 0 3px rgba(242,86,11,.12)}
  body.ptshell .seg button{background:#F7F8FA;border-color:#E8EAEF}
  body.ptshell .seg button.on{background:linear-gradient(160deg,#FFF3E7,#FFEFE2);border-color:var(--sun)}
  body.ptshell .toggle{background:#F7F8FA;border-color:#E8EAEF}
}

/* ≥1280: a touch wider content column beside the expanded sidebar */
@media (min-width:1280px){
  body.ptshell main.page{max-width:960px}
}