/* The three homes — Products, the Product page, Listings (SCREENS lane, 2026-09-23). Same tokens as styles.css. */

/* ---------- Products: fewer, wider cards (6 per row at most), the whole photo shown ---------- */
#tab-products .grid { grid-template-columns: repeat(auto-fill, minmax(max(210px, calc((100% - 5 * 12px) / 6)), 1fr)); }
.thumb.contain { background: #fff; position: relative; border-bottom: 1px solid var(--line); }
.thumb.contain img, .contain img { object-fit: contain; }
.thumb.broken::after, .contain.broken::after { content: "photo did not load"; color: #aab; font-size: 12px; }
.ph-src { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); background: rgba(255,255,255,.92); border: 1px solid var(--line);
  border-radius: 6px; font-size: 11px; padding: 1px 6px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-src.small { color: #b42318; border-color: #f3c3bd; }
.pcard .card-body { gap: 4px; }
.pcard .card-title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.card-flags { text-transform: none; letter-spacing: 0; }
.card-cost { font-size: 13px; font-weight: 600; }
.card-stores { font-size: 12.5px; color: var(--ink); line-height: 1.35; }
.card-stores .sp.loss { color: #b42318; font-weight: 600; }
.card-stores .sp.low { color: #b56a12; }
.card-ready { font-size: 12px; line-height: 1.3; }
.card-ready.ready { color: var(--ok); font-weight: 600; }
.card-ready.blocked { color: #8a4b12; }
.card-ready.listed { color: var(--accent); }
.card-stock { font-size: 11.5px; color: var(--muted); }
.warnword { color: #b42318; font-weight: 600; }
.muted { color: var(--muted); }
.okword { color: var(--ok); font-weight: 600; }
.chipbtn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.fl-body { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.fl-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fl-row:empty { display: none; }
.fl-row > b { min-width: 86px; font-size: 13px; }
.ls-th { width: 34px; height: 34px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; flex: 0 0 34px; }
.ls-th.none { display: inline-block; background: #f0f1f4; }

/* ---------- The product page ---------- */
.pp-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.pp-photo { width: 260px; height: 260px; border: 1px solid var(--line); border-radius: 12px; background: #fff; display: flex; align-items: center;
  justify-content: center; overflow: hidden; cursor: zoom-in; flex: 0 0 auto; }
.pp-photo img { width: 100%; height: 100%; object-fit: contain; }
.pp-main { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.pp-main .detail-title { margin: 0; }
.pp-sub { color: var(--muted); font-size: 13px; }
.pp-cost { font-size: 14px; }
.pp-stores { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-st { font-size: 12.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
.pp-st.live { border-color: #b8c6f5; background: var(--accent-soft); color: #243c9e; }
.pp-st.live.loss { border-color: #f3c3bd; background: #fdecea; color: #b42318; }
.pp-st.live.low { border-color: #f5d9a8; background: var(--warn-soft); color: var(--warn); }
.pp-st.ready { color: var(--ok); border-color: #bfe3cf; background: var(--ok-soft); }
.pp-st.no { color: var(--muted); }
.pp-ready { font-size: 13px; }
.pp-ready.ready { color: var(--ok); font-weight: 600; }
.pp-ready.blocked { color: #8a4b12; }
.pp-phline { margin: 0; }
.pp-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pp-approved { color: var(--ok); font-weight: 700; font-size: 14px; }
.pp-wait { border: 1px solid #f5d9a8; background: var(--warn-soft); border-radius: 10px; padding: 8px 10px; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.pp-wait-h { font-weight: 700; font-size: 13.5px; color: var(--warn); }
.pp-wait-h .hint { font-weight: 400; margin: 0; }
.pp-wait-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; border-top: 1px solid rgba(154, 103, 0, .15); }
.pp-wait-row > b { min-width: 86px; }
.pp-wait-v { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.pp-wait-v .mfinput { width: 100%; box-sizing: border-box; }
.pp-wait-b { display: flex; gap: 4px; margin-left: auto; }
.pp-wait-img { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; vertical-align: middle; }
.pp-wait-row.bad { color: #b42318; background: #fdecea; border-radius: 6px; padding: 4px 6px; border-top-color: transparent; }
.pp-wait-flag { font-weight: 600; }
.pp-folds { display: flex; flex-direction: column; gap: 8px; }
.pp-fold { border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.pp-fold > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 14px; list-style: revert; }
.pp-fold > summary .hint { font-weight: 400; margin: 0; }
.pp-fold-b { padding: 4px 12px 12px; }
.pp-sub-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted); margin: 6px 0; }
.pp-prices td, .pp-prices th { vertical-align: top; }
.pp-prices tr.pp-nl td { color: var(--muted); }
.pp-says { max-width: 260px; }
.pp-loop { border-top: 1px solid var(--line); padding: 8px 0; font-size: 13px; }
.pp-loop:first-child { border-top: 0; }
.pp-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tblwrap { overflow-x: auto; }
.imgbox { width: 92px; height: 92px; border-radius: 8px; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.imgcell.primary .imgbox { border-color: var(--accent); }
.imgbox img { width: 100%; height: 100%; object-fit: contain; border: 0; cursor: zoom-in; }
.imgcell { width: 104px; }
.imgsrc, .imgsize { font-size: 10.5px; color: var(--muted); line-height: 1.25; margin-top: 2px; word-break: break-word; }
.imgsize.small { color: #b42318; }

/* ---------- Listings (was Pricing) ---------- */
.ls-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 8px; }
.ls-bar select, .ls-bar input { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.ls-menu { position: relative; }
.ls-menu > summary { list-style: none; cursor: pointer; }
.ls-menu > summary::-webkit-details-marker { display: none; }
.ls-menu-b { position: absolute; z-index: 20; top: 110%; left: 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12); padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 230px; }
.ls-menu-b a.btn-sm { text-decoration: none; color: inherit; text-align: left; }
.ls-tbl td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.ls-tbl .badge, .pp-prices .badge { white-space: nowrap; }
.ls-listing { display: flex; gap: 8px; align-items: center; min-width: 200px; max-width: 280px; }
.ls-tbl th { white-space: nowrap; }
.ls-tbl td, .ls-tbl th { padding-left: 6px; padding-right: 6px; }
.ls-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ls-row td { white-space: nowrap; vertical-align: middle; }
.ls-row td.ls-listing { white-space: normal; }
.ls-listing a { color: var(--ink); }
.ls-says { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ls-why { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-open td { background: #fafbfc; }
.ls-pic { font-size: 13px; line-height: 1.5; }
.ls-over { margin-top: 6px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qhelp { display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: #eef0f3; color: var(--muted);
  font-size: 10px; font-weight: 700; cursor: help; }

@media (max-width: 640px) {
  #tab-products .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 10px 20px; }
  .pp-photo { width: 100%; height: 280px; }
  .ls-listing { min-width: 180px; }
}

#storePick { max-width: 340px; }
@media (max-width: 640px) { #storePick { max-width: 100%; } }