/* portal_phone.css (4.218.0) — the customer portal on a phone.
   Everything here hangs off body.pp, which portal_phone.js sets at 720px and
   below; the desktop portal never sees any of it. */

@media (max-width: 720px) {
  body.pp { --pp-tab-h: 62px; --pp-line: var(--line, #e3e8ef); --pp-ink: var(--ink, #0f1b2d); --pp-ink3: var(--ink-3, #6b7a90); --pp-blue: var(--blue, #2563eb); overflow-x: hidden; padding-bottom: calc(var(--pp-tab-h) + env(safe-area-inset-bottom) + 12px) !important; }
  body.pp .wrap { padding-left: 16px !important; padding-right: 16px !important; }

  /* ---------- one header row ---------- */
  body.pp header.topbar { position: sticky !important; top: 0; z-index: 60; padding-top: env(safe-area-inset-top); }
  body.pp header.topbar .wrap.topbar-row { height: auto !important; min-height: 56px; padding: 7px 12px 7px 16px !important; display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 6px 8px !important; }
  body.pp header.topbar .brand { flex: 1 1 auto; min-width: 0; gap: 10px !important; display: flex; align-items: center; }
  body.pp header.topbar .brand .mark { width: 32px !important; height: 32px !important; flex: 0 0 32px; border-radius: 9px; }
  body.pp header.topbar .brand .bt { min-width: 0; height: auto !important; }
  body.pp header.topbar .brand .bt b { font-size: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  body.pp header.topbar .brand .bt span { display: none !important; }
  body.pp header.topbar .tb-right { flex: 0 0 auto; width: auto !important; margin: 0 !important; gap: 2px !important; display: flex !important; align-items: center; }
  body.pp header.topbar .tb-right .ic { width: 40px !important; height: 40px !important; }
  body.pp header.topbar .tb-right .userchip { padding: 0 0 0 2px !important; border: 0 !important; background: none !important; height: auto !important; gap: 0 !important; }
  body.pp header.topbar .tb-right .userchip .ut,
  body.pp header.topbar .tb-right .userchip > span:not(.av) { display: none !important; }
  body.pp header.topbar .tb-right .userchip .av { width: 34px !important; height: 34px !important; }
  body.pp header.topbar #shellSignout { display: none !important; }
  body.pp header.topbar .nav { display: none !important; }
  /* Search opens its own row under the bar */
  body.pp header.topbar .pp-searchbox { display: none !important; order: 10; flex: 1 0 100% !important; width: 100% !important; max-width: none !important; margin: 2px 0 4px !important; position: relative !important; top: auto !important; left: auto !important; }
  body.pp header.topbar.pp-searching .pp-searchbox { display: block !important; }
  body.pp header.topbar .pp-searchbox input { width: 100% !important; font-size: 16px !important; height: 44px; }
  body.pp header.topbar .pp-searchbox .kbd { display: none !important; }
  body.pp header.topbar .pp-search-btn { display: grid; place-items: center; background: none; border: 0; color: var(--pp-ink); border-radius: 10px; cursor: pointer; }
  body.pp header.topbar.pp-searching .pp-search-btn { background: #eef3fb; color: var(--pp-blue); }

  /* ---------- the tab bar ---------- */
  body.pp .pp-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--pp-tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--pp-line); box-shadow: 0 -6px 20px rgba(15, 27, 45, .06); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
  body.pp .pp-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--pp-ink3); font: 600 11px/1.1 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: none; background: none; border: 0; padding: 6px 0 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  body.pp .pp-tab.on { color: var(--pp-blue); }
  body.pp .pp-tab:focus-visible { outline: 2px solid var(--pp-blue); outline-offset: -4px; border-radius: 10px; }
  body:not(.pp) .pp-tabs, body:not(.pp) .pp-sheet, body:not(.pp) .pp-sheet-bg { display: none !important; }

  body.pp .pp-sheet-bg { position: fixed; inset: 0; z-index: 1990; background: rgba(15, 27, 45, .38); }
  body.pp .pp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1995; background: #fff; border-radius: 18px 18px 0 0; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(15, 27, 45, .22); max-height: 80vh; overflow-y: auto; }
  body.pp .pp-sheet[hidden], body.pp .pp-sheet-bg[hidden] { display: none; }
  body.pp .pp-grip { width: 38px; height: 4px; border-radius: 4px; background: #d5dce6; margin: 6px auto 8px; }
  body.pp .pp-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 12px; border: 0; background: none; border-radius: 12px; color: var(--pp-ink); text-decoration: none; font: 500 15.5px/1.2 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-align: left; cursor: pointer; }
  body.pp .pp-row b { font-weight: 500; }
  body.pp .pp-row svg { color: var(--pp-ink3); flex: 0 0 auto; }
  body.pp .pp-row.on { background: #eef3fb; color: var(--pp-blue); }
  body.pp .pp-row.on svg { color: var(--pp-blue); }
  body.pp .pp-row.pp-signout { border-top: 1px solid var(--pp-line); border-radius: 0; margin-top: 6px; padding-top: 4px; }

  /* the floating helpers sit above the tab bar, and step aside while More is open */
  body.pp #faimChatBtn { bottom: calc(var(--pp-tab-h) + env(safe-area-inset-bottom) + 12px) !important; right: 12px !important; height: 48px !important; width: 48px !important; padding: 0 !important; justify-content: center; }
  body.pp #faimChatBtn { font-size: 0 !important; gap: 0 !important; }
  body.pp #faimChatBtn span { font-size: 20px !important; }
  body.pp #faimChatBtn em { position: absolute; top: -3px; right: -3px; font-size: 11px !important; }
  body.pp #faimChatPanel { bottom: calc(var(--pp-tab-h) + env(safe-area-inset-bottom) + 70px) !important; height: min(520px, calc(100vh - var(--pp-tab-h) - 150px)) !important; }
  body.pp.pp-sheet-open #faimChatBtn { display: none !important; }
  body.pp #atlasNotifyBtn, body.pp #atlasNdHandle { display: none !important; }
  body.pp .dash-reset, body.pp [data-dash-reset], body.pp .dash-handle { display: none !important; }

  /* ---------- pages fit the width ---------- */
  body.pp .page-head { padding-top: 18px !important; padding-bottom: 12px !important; }
  body.pp .page-head h1 { font-size: 24px !important; }
  body.pp .card, body.pp .overview, body.pp .qa-row > *, body.pp [class*="grid"] > * { min-width: 0; max-width: 100%; }
  body.pp .kpis { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.pp .kpis .kpi { padding: 14px !important; min-width: 0; }
  body.pp .kpis .kv { font-size: 26px !important; }
  body.pp .invgrid, body.pp .ops-g2, body.pp .ops-g3, body.pp .ops-g4, body.pp .snapgrid, body.pp .hero-grid, body.pp .g3, body.pp .g3b, body.pp .reorder { grid-template-columns: 1fr !important; }
  body.pp .card-h { flex-wrap: wrap; gap: 8px; }
  /* an order's items beside its ship-to: one above the other */
  body.pp [style*="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }
  body.pp .card-b { overflow-x: visible; }
  body.pp .footer .fl { flex-wrap: wrap; gap: 4px 14px !important; }

  /* the dashboard: the pitch gets shorter and the tiles sit two by two */
  body.pp section.hero { padding-top: 18px !important; padding-bottom: 12px !important; }
  body.pp section.hero h1 { font-size: 30px !important; line-height: 1.08 !important; }
  body.pp section.hero .lede { font-size: 15px !important; margin-bottom: 0 !important; }
  body.pp .overview { padding: 16px !important; }
  body.pp .ov-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.pp .ov-grid .ov { padding: 14px !important; min-height: 0 !important; }
  body.pp .qa-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.pp .qa-row .qa { padding: 14px !important; flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
  body.pp .qa-row .qa .arw { display: none !important; }
  body.pp #ordersBody tr:nth-child(n+7) { display: none !important; }

  /* invoice aging: the ring over its legend */
  body.pp .agwrap { flex-wrap: wrap !important; justify-content: center; gap: 14px !important; }
  body.pp .aglegs { flex: 1 1 220px !important; min-width: 0 !important; width: 100% !important; }

  /* the store's own bars */
  body.pp .acctbar-row { gap: 12px !important; }
  body.pp .store-layout { grid-template-columns: 1fr !important; }
  body.pp .toolbar { flex-wrap: wrap !important; gap: 8px !important; }
  body.pp .toolbar .bigsearch { flex: 1 0 100% !important; width: 100% !important; }
  body.pp .toolbar .bigsearch input { width: 100% !important; font-size: 16px !important; }
  body.pp .toolbar .sortsel { flex: 1 1 auto; min-width: 0; }
  body.pp .toolbar .sortsel select { min-width: 0; width: 100%; }
  body.pp .toolbar .viewtog { display: none !important; }
  body.pp .toolbar .btn { flex: 0 0 auto; }
  body.pp .store-main .prod-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  body.pp #refineRail { display: none !important; }
  body.pp.pp-refine-open #refineRail { display: block !important; position: static !important; margin-bottom: 12px; }
  body.pp .pp-refine-btn { display: inline-flex; align-items: center; gap: 6px; }
  body.pp .pp-refine-btn em { font-style: normal; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; background: var(--pp-blue); color: #fff; display: none; place-items: center; padding: 0 5px; }
  body.pp .pp-refine-btn.pp-has em { display: inline-grid; }
  body.pp.pp-refine-open .pp-refine-btn { background: #eef3fb; color: var(--pp-blue); border-color: #c9d8f5; }
  /* a product card two to a row: nothing sits on anything else */
  body.pp .prod-grid .pimg .badge { top: 44px !important; left: 10px !important; right: auto !important; }
  body.pp .prod-grid .pprice { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 2px 8px !important; }
  body.pp .prod-grid .pprice .off { white-space: nowrap; }
  body.pp .prod-grid .pprice .pbasis { flex: 1 0 100%; width: auto !important; height: auto !important; }
  body.pp .prod-grid .pfoot { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
  body.pp .prod-grid .pfoot .qty { flex: 1 0 100%; display: flex !important; width: auto !important; }
  body.pp .prod-grid .pfoot .qty input { flex: 1 1 auto; min-width: 0; width: auto !important; text-align: center; }
  body.pp .prod-grid .pfoot .qty button { flex: 0 0 40px; width: 40px !important; min-height: 38px; }
  body.pp .prod-grid .pfoot > .btn { flex: 1 0 100%; justify-content: center; min-height: 42px; }
  /* the cart: one page that scrolls, the items first, the choices full width */
  body.pp aside.drawer { width: 100vw !important; max-width: 100vw !important; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: env(safe-area-inset-top); }
  body.pp aside.drawer .drawer-h { position: sticky; top: 0; z-index: 2; background: #fff; padding: 14px 16px !important; }
  body.pp aside.drawer .drawer-items { flex: 0 0 auto !important; overflow: visible !important; padding: 4px 16px !important; }
  body.pp aside.drawer .drawer-f { padding: 16px 16px calc(20px + env(safe-area-inset-bottom)) !important; }
  body.pp aside.drawer .ln.how, body.pp aside.drawer .ln.shipto { flex-wrap: wrap; }
  body.pp aside.drawer .ln.how > span:first-child, body.pp aside.drawer .ln.shipto > span:first-child { flex: 1 0 100%; }
  body.pp aside.drawer .ln.shipto > span:last-child { text-align: left !important; }
  body.pp aside.drawer .seg { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; border-radius: 14px !important; padding: 4px !important; }
  body.pp aside.drawer .seg button { border-radius: 10px !important; min-height: 48px; }
  body.pp:has(#drawer.on) .pp-tabs, body.pp:has(#drawer.on) #faimChatBtn { display: none !important; }
  body.pp:has(#apvBack) #faimChatBtn, body.pp:has(#apvBack) .pp-tabs { display: none !important; }

  /* inputs never make iOS zoom in */
  body.pp input:not([type=checkbox]):not([type=radio]), body.pp select, body.pp textarea { font-size: 16px !important; }

  /* ---------- a table row is a card ---------- */
  body.pp table.pp-stack, body.pp table.pp-stack tbody { display: block !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; white-space: normal !important; border: 0 !important; }
  body.pp table.pp-stack thead { display: none !important; }
  body.pp table.pp-stack tr { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 2px !important; border-bottom: 1px solid var(--pp-line); background: none; height: auto !important; }
  body.pp table.pp-stack tbody tr:last-child { border-bottom: 0; }
  body.pp table.pp-stack td { display: block !important; padding: 0 !important; border: 0 !important; text-align: left !important; min-width: 0; width: auto !important; max-width: none !important; white-space: normal !important; overflow-wrap: anywhere; font-size: 14px; }
  body.pp table.pp-stack td.pp-t { grid-column: 1 / -1; font-size: 15.5px; font-weight: 650; }
  body.pp table.pp-stack td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-ink3); margin-bottom: 3px; }
  body.pp table.pp-stack td.pp-acts { grid-column: 1 / -1; display: flex !important; flex-wrap: wrap; gap: 8px; }
  body.pp table.pp-stack td.pp-acts::before { display: none; }
  body.pp table.pp-stack td.pp-acts > * { flex: 1 1 auto; justify-content: center; min-height: 40px; }
  body.pp table.pp-stack td.pp-wide { grid-column: 1 / -1; text-align: center !important; }
  body.pp table.pp-stack td.pp-empty { display: none !important; }
}