/* v2.css — Phone Inventory, the new layout (v2.php / v2.js, Luis, 2026-10-16).
   Apple-light like the rest of the POS. House colours: plum for sales, the
   in-house green for profit; amber and red only for phones that have sat too
   long. Arrivals in the house curve (--ease-liquid, index.css). */

.pv2-page { --pv2-ink: #1d1d1f; --pv2-mid: #6e6e73; --pv2-soft: #86868b; --pv2-line: rgba(0, 0, 0, .08);
            --pv2-plum: #6b3744; --pv2-green: #2f6152; --pv2-card: #ffffff; --pv2-slab: #ececef; }
.pv2-main { padding-bottom: 120px; }   /* clear of the dock */
.pv2-wrap { max-width: 1560px; margin: 0 auto; padding: 22px 28px 0; color: var(--pv2-ink); }
.pv2-i { width: 18px; height: 18px; flex: none; }

/* ── Header ── */
.pv2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.pv2-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--pv2-ink); }
.pv2-sub { margin: 4px 0 0; font-size: 13px; color: var(--pv2-mid); }
.pv2-oldlink { color: var(--pv2-mid); text-decoration: underline; text-underline-offset: 2px; }
.pv2-oldlink:hover { color: var(--pv2-ink); }
.pv2-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pv2-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px;
           background: var(--pv2-card); border: 1px solid var(--pv2-line); color: var(--pv2-ink) !important;
           font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pv2-btn:hover { background: #f5f5f7; }
.pv2-btn-primary { background: var(--pv2-ink); border-color: var(--pv2-ink); color: #fff !important; }
.pv2-btn-primary:hover { background: #3a3a3c; }
button.pv2-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ── The owner switch and the view switch: the house slab with a gliding pill ── */
.pv2-owner, .pv2-view { display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px;
                        background: var(--pv2-slab); box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(31, 45, 61, .10); }
.pv2-owner { margin-bottom: 18px; }
.pv2-seg { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px;
           border: 0; border-radius: 999px; background: transparent; color: var(--pv2-mid);
           font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
           transition: color .25s ease; }
.pv2-seg:hover { color: var(--pv2-ink); }
.pv2-seg.on { color: var(--pv2-ink); }
.pv2-seg b { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(0, 0, 0, .06);
             font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; color: inherit; }
.pv2-seg.on b { background: rgba(0, 0, 0, .08); }
.pm-glide.pv2-glide { box-shadow: 0 2px 6px rgba(31, 45, 61, .14), 0 0 0 1px rgba(255, 255, 255, .9); }
.pv2-view .pv2-seg { height: 34px; padding: 0 14px; font-size: 13px; }

/* ── The five figures ── */
.pv2-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pv2-tile { position: relative; padding: 16px 18px 14px; border-radius: 18px; background: var(--pv2-card);
            border: 1px solid var(--pv2-line); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); min-height: 108px; overflow: hidden; }
.pv2-tile-l { font-size: 12px; font-weight: 600; color: var(--pv2-mid); }
.pv2-tile-v { margin-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-family: var(--font-num, inherit); }
.pv2-tile-s { margin-top: 2px; font-size: 12px; color: var(--pv2-soft); }
.pv2-tile-s .up { color: var(--pv2-green); font-weight: 700; }
.pv2-tile-s .down { color: #b3261e; font-weight: 700; }
.pv2-tile-profit .pv2-tile-v { color: var(--pv2-green); }
.pv2-tile-wk { padding-right: 112px; }
.pv2-bars { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.pv2-bars i { display: block; width: 9px; border-radius: 3px; }
.pv2-bars.sales i { background: rgba(107, 55, 68, .55); }
.pv2-bars.profit i { background: rgba(47, 97, 82, .55); }
.pv2-bars i.z { opacity: .35; }

/* ── Search, view, sort ── */
.pv2-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pv2-search { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px;
              border-radius: 999px; background: var(--pv2-card); border: 1px solid var(--pv2-line); color: var(--pv2-soft); }
.pv2-search:focus-within { border-color: rgba(0, 0, 0, .22); box-shadow: 0 0 0 4px rgba(0, 0, 0, .04); }
.pv2-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important;
                    font: inherit; font-size: 14px; color: var(--pv2-ink); padding: 0 !important; height: auto !important; }
/* The Apple theme gives every input its own capsule and a focus ring
   (apple.css, body.apple-mode :is(input…)). Here the pill around it is the
   field, so the input inside stays bare; the pill shows the focus instead. */
body.apple-mode.pv2-page .pv2-search input,
body.apple-mode.pv2-page .pv2-search input:focus {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; outline: 0 !important;
}
.pv2-select { height: 44px; padding: 0 38px 0 16px; border-radius: 999px; border: 1px solid var(--pv2-line); background-color: var(--pv2-card);
              font: inherit; font-size: 13px; font-weight: 600; color: var(--pv2-ink); cursor: pointer;
              appearance: none; -webkit-appearance: none;
              background-image: linear-gradient(45deg, transparent 50%, #86868b 50%), linear-gradient(135deg, #86868b 50%, transparent 50%);
              background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }

/* ── Filter chips and their menus ── */
.pv2-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pv2-chip { display: inline-flex; align-items: center; height: 32px; border-radius: 999px; background: var(--pv2-card);
            border: 1px solid var(--pv2-line); overflow: hidden; }
.pv2-chip-btn, .pv2-chip-x { border: 0; background: transparent; font: inherit; color: var(--pv2-mid); cursor: pointer; }
.pv2-chip-btn { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 12px 0 14px; font-size: 12.5px; font-weight: 600; }
.pv2-chip-btn b { color: var(--pv2-ink); font-weight: 700; }
.pv2-chip-btn:hover { color: var(--pv2-ink); }
.pv2-caret { width: 12px; height: 12px; opacity: .7; }
.pv2-chip.on { background: var(--pv2-ink); border-color: var(--pv2-ink); }
.pv2-chip.on .pv2-chip-btn, .pv2-chip.on .pv2-chip-btn b, .pv2-chip.on .pv2-chip-x { color: #fff; }
.pv2-chip-x { display: inline-flex; align-items: center; height: 100%; padding: 0 10px 0 2px; }
.pv2-chip-x .pv2-i { width: 13px; height: 13px; }
.pv2-clear { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--pv2-mid);
             text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 0 6px; }
.pv2-menu { position: fixed; z-index: 1300; min-width: 200px; max-height: 340px; overflow-y: auto; padding: 6px;
            border-radius: 14px; background: #fff; border: 1px solid var(--pv2-line);
            box-shadow: 0 18px 44px rgba(29, 29, 31, .16), 0 2px 8px rgba(29, 29, 31, .06);
            animation: pv2MenuIn .3s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); transform-origin: top left; }
@keyframes pv2MenuIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } }
.pv2-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; height: 36px; padding: 0 12px;
           border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--pv2-ink);
           cursor: pointer; text-align: left; }
.pv2-opt i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--pv2-soft); }
.pv2-opt.on { color: var(--pv2-plum); }
.pv2-opt[disabled] { opacity: .35; cursor: default; }
.pm-glide.pv2-menu-glide { background: rgba(0, 0, 0, .05); box-shadow: none; }
.pv2-opt[hidden] { display: none; }
.pv2-opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv2-menu { overscroll-behavior: contain; }
.pv2-menu.has-find { min-width: 260px; padding-top: 0; }
/* The find box at the top of a long menu (models, carriers): it stays put
   while the list scrolls under it. */
.pv2-menu-find { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
                 margin: 0 -6px 6px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--pv2-line); color: var(--pv2-soft); }
.pv2-menu-find .pv2-i { width: 16px; height: 16px; flex: none; }
.pv2-menu-find input { flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--pv2-ink); }
.pv2-menu-find input,
body.apple-mode .pv2-menu-find input,
body.apple-mode .pv2-menu-find input:focus {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
    box-shadow: none !important; outline: 0 !important; padding: 0 !important; height: auto !important;
}
.pv2-menu-none { padding: 14px 12px; font-size: 12.5px; color: var(--pv2-soft); text-align: center; }
.pv2-menu-none[hidden] { display: none; }

/* ── The table: every phone a row, no groups (Luis, 2026-10-16) ── */
.pv2-table { border-radius: 20px; background: var(--pv2-card); border: 1px solid var(--pv2-line); overflow: hidden; }
.pv2-cols, .pv2-row { display: grid; align-items: center; gap: 14px;
                      grid-template-columns: 24px 44px minmax(180px, 2fr) 90px 64px 84px minmax(170px, 1.2fr) 96px; }
.pv2-cols { padding: 10px 22px 10px 19px; border-left: 3px solid transparent; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
            color: var(--pv2-soft); border-bottom: 1px solid var(--pv2-line); background: #fafafa; }
.pv2-cols .r, .pv2-r-price { text-align: right; }
.pv2-row { padding: 8px 22px 8px 19px; font-size: 13px; cursor: pointer; border-left: 3px solid transparent; }
.pv2-row + .pv2-row { border-top: 1px solid rgba(0, 0, 0, .05); }
.pv2-row:hover { background: #f6f7f9; }
.pv2-row.sel { background: rgba(10, 132, 255, .06); }
.pv2-row.cur { border-left-color: var(--pv2-ink); background: #f0f1f3; }
.pv2-r-img { width: 44px; height: 44px; }
.pv2-r-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-r-stor { color: var(--pv2-mid); font-weight: 600; white-space: nowrap; }
.pv2-r-imei { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pv2-r-imei code, .pv2-p-imei code { font-family: var(--font-num, ui-monospace, monospace); font-size: 12.5px; color: var(--pv2-mid); }
.pv2-r-price { font-size: 14px; font-weight: 700; font-family: var(--font-num, inherit); }

/* The pager under the table: ten a page */
.pv2-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 0 6px; }
.pv2-pg-info { font-size: 12.5px; font-weight: 600; color: var(--pv2-mid); font-family: var(--font-num, inherit); }
.pv2-pg-btns { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--pv2-card); border: 1px solid var(--pv2-line); }
.pv2-pg-n, .pv2-pg-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px;
                           border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600;
                           color: var(--pv2-ink); cursor: pointer; font-family: var(--font-num, inherit);
                           transition: background .25s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)), color .25s; }
.pv2-pg-n:hover, .pv2-pg-arrow:hover:not([disabled]) { background: rgba(0, 0, 0, .06); }
.pv2-pg-n.on { background: var(--pv2-ink); color: #fff; cursor: default; }
.pv2-pg-arrow { padding: 0; }
.pv2-pg-arrow .pv2-i { width: 15px; height: 15px; }
.pv2-pg-arrow.prev .pv2-i { transform: rotate(90deg); }
.pv2-pg-arrow.next .pv2-i { transform: rotate(-90deg); }
.pv2-pg-arrow[disabled] { opacity: .3; cursor: default; }
.pv2-pg-gap { min-width: 22px; text-align: center; color: var(--pv2-soft); font-size: 13px; }

/* ── Small parts shared by rows, cards and the panel ── */
.pv2-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none;
           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.pv2-thumb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
             border-radius: 10px; background: linear-gradient(165deg, #f2f5fa, #e6ebf3); overflow: hidden; color: #b8bfca; }
.pv2-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
                 filter: brightness(1.04) contrast(1.06); }
.pv2-thumb-ph { width: 55%; height: 55%; }
/* The glyph is only for a phone with no photo: the photo is multiplied onto
   its ground, so a glyph under it would show through. */
.pv2-thumb:has(img) .pv2-thumb-ph { display: none; }
.pv2-carrier { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
               letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-carrier.un { background: rgba(47, 97, 82, .10); color: var(--pv2-green); }
.pv2-carrier.lk { background: rgba(0, 0, 0, .06); color: var(--pv2-mid); }
/* The grade badge is the size of the battery ring beside it (Luis, 2026-10-16):
   42px in the table, 38px on the cards, 46px in the sheet. */
.pv2-grade { width: 42px; height: 42px; display: block; flex: none; }
.pv2-p-row .pv2-grade { width: 46px; height: 46px; }
.pv2-gradetxt { font-size: 12px; font-weight: 700; color: var(--pv2-mid); }
/* The battery ring (Luis, 2026-10-16, after the AirPods widget): the arc is
   the battery's percentage of the track, drawn from the top clockwise, and
   comes round on the house curve when it appears. Green from 90%, amber
   from 50%, red under — the same bands as the Battery filter. */
.pv2-ring { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle;
            width: 42px; height: 42px; --ring: #34c759; }
.pv2-ring.med { --ring: #ff9f0a; }
.pv2-ring.low { --ring: #ff3b30; }
.pv2-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pv2-ring circle { fill: none; stroke-width: 3.2; }
.pv2-ring .pv2-ring-t { stroke: rgba(0, 0, 0, .09); }
.pv2-ring .pv2-ring-a { stroke: var(--ring); stroke-linecap: round; stroke-dasharray: var(--p) 100;
                        animation: pv2RingIn .9s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)) .08s both; }
@keyframes pv2RingIn { from { stroke-dasharray: 0 100; } }
.pv2-ring .pv2-ring-n { position: relative; display: inline-flex; align-items: baseline; color: var(--pv2-ink);
                        font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-family: var(--font-num, inherit); }
/* The % sign smaller than the number, in the same ink (a span, not <small>,
   which the theme greys and sizes). */
.pv2-ring .pv2-ring-n .pv2-ring-pc { font-size: .62em; font-weight: 700; color: inherit; margin-left: .5px; }
.pv2-ring.sm { width: 38px; height: 38px; }
.pv2-ring.sm .pv2-ring-n { font-size: 9.5px; }
.pv2-ring.lg { width: 46px; height: 46px; }
.pv2-ring.lg .pv2-ring-n { font-size: 11.5px; }
.pv2-age { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.pv2-age.ok { background: rgba(0, 0, 0, .05); color: var(--pv2-mid); }
.pv2-age.warn { background: #fef3c7; color: #92400e; }
.pv2-age.old { background: #fee2e2; color: #991b1b; }
.pv2-owner-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
                 background: #e8e5f5; color: #4c3f8f; white-space: nowrap; }
.pv2-sold-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: rgba(107, 55, 68, .12); color: var(--pv2-plum); }
.pv2-muted { color: var(--pv2-soft); }
.pv2-copy { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 8px;
            background: transparent; color: var(--pv2-soft); cursor: pointer; }
.pv2-copy:hover { background: rgba(0, 0, 0, .06); color: var(--pv2-ink); }
.pv2-copy .pv2-i { width: 15px; height: 15px; }
.pv2-tick { position: relative; display: inline-flex; width: 20px; height: 20px; cursor: pointer; }
.pv2-tick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pv2-tick span { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(0, 0, 0, .25); background: #fff;
                 transition: background .15s ease, border-color .15s ease; }
.pv2-tick input:checked + span { background: var(--pv2-ink); border-color: var(--pv2-ink);
                                 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
                                 background-size: 14px; background-position: center; background-repeat: no-repeat; }
.pv2-tick input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 0, 0, .15); }

/* ── Cards ── */
.pv2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.pv2-card { position: relative; padding: 14px 14px 16px; border-radius: 20px; background: var(--pv2-card); border: 1px solid var(--pv2-line);
            cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; }
.pv2-card:hover { box-shadow: 0 10px 28px rgba(29, 29, 31, .10); transform: translateY(-2px); }
.pv2-card.sel { box-shadow: 0 0 0 2px var(--pv2-ink); }
.pv2-card.cur { box-shadow: 0 0 0 2px var(--pv2-ink), 0 10px 28px rgba(29, 29, 31, .10); }
/* The name leads the card now (Luis, 2026-10-16), so the tick box sits in the top-right corner. */
.pv2-card .pv2-tick { position: absolute; top: 14px; right: 14px; z-index: 2; }
.pv2-card-photo { height: 160px; margin-bottom: 10px; }
.pv2-card-img { width: 100%; height: 100%; border-radius: 14px; }
/* Two lines of room for every name, so the photos in a row line up. */
.pv2-card-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; min-height: 2.5em; margin: 0 30px 10px 2px;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv2-card-meta { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; color: var(--pv2-mid); }
.pv2-card-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pv2-card-tags .pv2-grade { width: 38px; height: 38px; }
.pv2-card-price { margin-top: 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-family: var(--font-num, inherit); }

.pv2-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 60px 20px; border-radius: 20px;
             background: var(--pv2-card); border: 1px solid var(--pv2-line); color: var(--pv2-mid); font-size: 13px; }
.pv2-empty .pv2-i { width: 34px; height: 34px; color: var(--pv2-soft); }
.pv2-empty b { color: var(--pv2-ink); font-size: 15px; }
.pv2-other { margin-top: 10px; height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, .06);
             font: inherit; font-size: 12.5px; font-weight: 600; color: var(--pv2-ink); cursor: pointer; }
.pv2-other:hover { background: rgba(0, 0, 0, .1); }

/* ── The phone's sheet: down from under the top bar, laid out across ──
   (Luis, 2026-10-16: "instead of the side panel do a pull-down panel from the
   bottom of the top bar, make the panel horizontal"). It sits one layer under
   the bar (99) and the side menu (98), so it comes out from beneath the bar
   rather than over it, and spans the page beside the side menu. */
.pv2-scrim { position: fixed; inset: 64px 0 0 0; z-index: 96; background: rgba(15, 23, 42, .10); opacity: 0; pointer-events: none;
             transition: opacity .2s ease; }
/* As wide as the page's column, not the window: v2.js sets left and right
   from .pv2-wrap (these are only until it has). Frosted glass (Luis,
   2026-10-16): the page behind shows through, blurred and lifted. */
.pv2-panel { position: fixed; top: 64px; left: 92px; right: 28px; z-index: 97; max-height: min(460px, calc(100vh - 140px)); overflow-y: auto;
             border-radius: 0 0 26px 26px; color: var(--pv2-ink);
             background: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(250, 250, 252, .70) 100%);
             -webkit-backdrop-filter: blur(26px) saturate(180%);
             backdrop-filter: blur(26px) saturate(180%);
             border: 1px solid rgba(255, 255, 255, .75); border-top: 0;
             box-shadow: 0 24px 60px rgba(29, 29, 31, .16), inset 0 -1px 0 rgba(255, 255, 255, .9), inset 0 1px 0 rgba(0, 0, 0, .04);
             transform: translateY(-104%); visibility: hidden;
             transition: transform .22s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .22s; }
body.pv2-panel-open .pv2-panel { transform: none; visibility: visible;
                                  transition: transform .46s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)), visibility 0s; }
body.pv2-panel-open .pv2-scrim { opacity: 1; pointer-events: auto; }
.pv2-p-x { position: absolute; top: 14px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
           width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .6); color: var(--pv2-ink); cursor: pointer;
           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.pv2-p-x:hover { background: rgba(255, 255, 255, .9); }
.pv2-p-grid { display: grid; max-width: 1560px; margin: 0 auto; padding: 0 12px;
              grid-template-columns: minmax(330px, 1.45fr) minmax(190px, .75fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr); }
.pv2-p-col { padding: 22px 22px 24px; min-width: 0; }
.pv2-p-col + .pv2-p-col { border-left: 1px solid var(--pv2-line); }
.pv2-p-h { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pv2-soft); }
.pv2-p-h2 { margin-top: 16px; }

/* The phone: photo, then what it is and what it costs */
.pv2-p-id { display: flex; align-items: flex-start; gap: 18px; }
.pv2-p-photo { flex: none; }
.pv2-p-img { width: 128px; height: 128px; border-radius: 20px; }
.pv2-p-idtext { min-width: 0; }
.pv2-p-name { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pv2-p-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--pv2-mid); }
.pv2-p-shelf { margin-top: 8px; }
.pv2-p-shelf .pv2-age { font-size: 12.5px; padding: 4px 12px; }
.pv2-p-price { margin-top: 8px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-family: var(--font-num, inherit); }
.pv2-p-imei { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }

/* What you can do: two by two */
.pv2-p-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv2-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 64px; padding: 8px 6px;
           border: 0; border-radius: 14px; background: rgba(255, 255, 255, .55); color: var(--pv2-ink) !important; font: inherit; font-size: 12px; font-weight: 600;
           text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04); }
.pv2-act:hover { background: rgba(255, 255, 255, .9); }
.pv2-act .pv2-i { width: 20px; height: 20px; }
.pv2-act.danger { color: #b3261e !important; }
.pv2-act.danger:hover { background: rgba(253, 232, 231, .9); }

/* Label / value rows */
.pv2-p-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13px; }
.pv2-p-row span { color: var(--pv2-mid); }
.pv2-p-row b { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-align: right; min-width: 0; }
.pv2-p-row a { color: var(--pv2-ink); }
.pv2-p-profit { margin-top: 4px; padding-top: 9px; border-top: 1px dashed var(--pv2-line); font-size: 14.5px; }
.pv2-p-profit.pos b { color: var(--pv2-green); }
.pv2-p-profit.neg b { color: #b3261e; }
.pv2-p-profit i { font-style: normal; font-size: 12px; font-weight: 700; opacity: .7; }
.pv2-p-parts { display: flex; flex-wrap: wrap; gap: 6px; }
.pv2-parts { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pv2-parts .pv2-i { width: 14px; height: 14px; }
.pv2-parts.oem { background: rgba(47, 97, 82, .10); color: var(--pv2-green); }
.pv2-parts.am { background: rgba(220, 38, 38, .10); color: #b91c1c; }
.pv2-parts.rf { background: rgba(202, 138, 4, .14); color: #92400e; }

/* Narrower windows: the five columns become three, then one */
@media (max-width: 1420px) {
    .pv2-p-grid { grid-template-columns: minmax(300px, 1.3fr) minmax(220px, 1fr) minmax(220px, 1fr); }
    .pv2-p-col:nth-child(4) { border-left: 0; }
    .pv2-p-col:nth-child(n+4) { border-top: 1px solid var(--pv2-line); }
}
@media (max-width: 900px) {
    .pv2-panel { left: 0 !important; right: 0 !important; }
    .pv2-p-grid { grid-template-columns: 1fr; }
    .pv2-p-col + .pv2-p-col { border-left: 0; border-top: 1px solid var(--pv2-line); }
}

/* ── Ticked phones: a bar above the dock ── */
.pv2-bulk { position: fixed; left: 50%; bottom: 104px; z-index: 1200; transform: translateX(-50%);
            display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 999px;
            background: var(--pv2-ink); color: #fff; box-shadow: 0 16px 40px rgba(29, 29, 31, .30);
            animation: pv2BulkIn .42s var(--ease-liquid, cubic-bezier(.22, 1.12, .36, 1)); }
.pv2-bulk[hidden] { display: none; }
@keyframes pv2BulkIn { from { opacity: 0; transform: translate(-50%, 16px); } }
.pv2-bulk b { font-size: 13px; margin-right: 6px; white-space: nowrap; }
.pv2-bulk-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
                background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pv2-bulk-btn:hover { background: rgba(255, 255, 255, .2); }
.pv2-bulk-btn.primary { background: #fff; color: var(--pv2-ink); }
.pv2-bulk-btn .pv2-i { width: 16px; height: 16px; }

/* ── Narrower screens ── */
@media (max-width: 1280px) {
    .pv2-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .pv2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv2-cols, .pv2-row { grid-template-columns: 24px 44px minmax(0, 1fr) 70px 70px 84px; }
    .pv2-cols > :nth-child(5), .pv2-cols > :nth-child(7), .pv2-r-grade, .pv2-r-imei { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pv2-panel, body.pv2-panel-open .pv2-panel { transition: visibility 0s; }
    .pv2-menu, .pv2-bulk { animation: none; }
    .pv2-ring .pv2-ring-a { animation: none; }
}