/* ============================================================
   cart.html 选品车独立页 专用样式
   依赖 style.css 的 CSS 变量（--blue/--red/--line 等）
   ============================================================ */

/* ---------- 顶栏右侧动作区（原在 product.css，cart.html 不引 product.css，故在此声明） ---------- */
.pd-top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
.pd-cartlink { position: relative; }
@media (max-width: 640px) {
  .pd-top-actions { gap: 8px; }
  .acct { padding: 5px 8px; }
  .acct-txt small { display: none; }
}
.ct-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 40px; }
.ct-crumb { font-size: 13px; color: var(--ink3); padding: 12px 2px 10px; }
.ct-crumb a { color: var(--ink3); }
.ct-crumb a:hover { color: var(--blue); }
.ct-crumb .sep { margin: 0 6px; opacity: .6; }
.ct-crumb b { color: var(--ink); }

.ct-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }

/* 行栅格：勾选 | 图 | 商品 | 单价 | 箱数 | 小计 | 操作 */
.ct-row { display: grid; grid-template-columns: 74px 78px 1fr 130px 132px 116px 72px;
  align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ct-thead { background: #F6F8FA; font-size: 12.5px; color: var(--ink2); font-weight: 700; padding: 10px 14px; }
.ct-tbody .ct-row:last-child { border-bottom: none; }
.ct-tbody .ct-row:hover { background: #FFF9F4; }
.ct-row.selrow { background: #FFF6EC; }

.ct-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; font-size: 12.5px; }
.ct-check input { width: 16px; height: 16px; accent-color: var(--blue); cursor: pointer; }

.ct-thumb { width: 68px; height: 68px; border-radius: 8px; overflow: hidden; background: #F2F5F8;
  display: flex; align-items: center; justify-content: center; color: #c3c9d1; font-weight: 700; font-size: 15px; }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; }

.ct-info { min-width: 0; }
.ct-nm { font-size: 13.5px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; word-break: break-all; }
.ct-nm .st { font-size: 11px; color: #fff; background: #999; border-radius: 4px; padding: 1px 5px; font-weight: 600; margin-left: 4px; }
.ct-mt { font-size: 11.5px; color: var(--ink3); font-family: ui-monospace, Menlo, Consolas, monospace; }
.ct-remark { font-size: 11.5px; color: var(--amber); margin-top: 2px; }

.ct-price b { font-size: 15px; color: var(--red); }
.ct-price small { display: block; font-size: 11px; color: var(--ink3); margin-top: 1px; }
.ct-price .lock { font-size: 12px; color: var(--amber); }
.ct-sub b { font-size: 15px; color: var(--red); }
.ct-sub span { font-size: 12px; color: var(--ink3); }

.stepper.ct-step { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; width: fit-content; }
.stepper.ct-step button { width: 30px; height: 30px; background: #F6F8FA; border: none; cursor: pointer; font-size: 15px; color: var(--ink); }
.stepper.ct-step button:hover { background: var(--blue-l); color: var(--blue); }
.stepper.ct-step input { width: 42px; height: 30px; border: none; border-left: 1px solid var(--line);
  border-right: 1px solid var(--line); text-align: center; font-size: 13px; }

.ct-del { font-size: 12px; color: var(--ink3); cursor: pointer; }
.ct-del:hover { color: var(--red); text-decoration: underline; }

.ct-empty { padding: 60px 20px; text-align: center; color: var(--ink2); }
.ct-empty b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.ct-empty .mut { font-size: 12.5px; color: var(--ink3); }

/* 底部汇总 + 操作 */
.ct-foot { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.ct-foot .sum { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ct-foot .sum > div { display: flex; flex-direction: column; gap: 2px; }
.ct-foot .sum span { font-size: 11.5px; color: var(--ink3); }
.ct-foot .sum b { font-size: 15px; }
.ct-foot .sum .total b { font-size: 20px; color: var(--red); }
.ct-hint { font-size: 11.5px; color: var(--ink3); margin-top: 8px; line-height: 1.6; }
.ct-acts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.ct-acts .btn { flex: 1; min-width: 130px; text-align: center; }
.tolist { font-size: 12.5px; color: var(--blue); cursor: pointer; }
.tolist:hover { text-decoration: underline; }

/* 手机端操作条 */
.ct-bar { display: none; }

/* 分页条：每页条数（20/50/80/100，默认 20）+ 页码 */
.ct-pgbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 0 4px; }
.ct-pgbar .pager { margin: 0; justify-content: flex-start; gap: 5px; }
.ct-spacer { flex: 1; }
.ct-selcount { font-size: 12px; color: var(--ink3); }
.ct-linkbtn { background: none; border: none; font-size: 12.5px; color: var(--ink2); cursor: pointer; padding: 0; }

/* ============================================================
   手机端：行卡片化
   ============================================================ */
@media (max-width: 860px) {
  .ct-wrap { padding: 0 0 30px; }
  .ct-crumb { padding: 8px 12px; }
  .ct-card { border-radius: 0; border-left: none; border-right: none; }
  .ct-foot { border-radius: 0; border-left: none; border-right: none; }

  .ct-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff;
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
  .ct-spacer { flex: 1; }
  .ct-selcount { font-size: 12px; color: var(--ink3); }
  .ct-linkbtn { background: none; border: none; font-size: 12.5px; color: var(--ink2); cursor: pointer; padding: 0; }
  .ct-linkbtn.danger { color: var(--red); }

  .ct-thead { display: none; }
  .ct-row { grid-template-columns: 30px 76px 1fr; grid-template-areas:
      "chk img info" ". . price" ". . qty" ". . sub" ". . op";
    gap: 6px 10px; padding: 12px; align-items: start; }
  .ct-row > .c-chk { grid-area: chk; padding-top: 26px; }
  .ct-row > .c-img { grid-area: img; }
  .ct-row > .c-info { grid-area: info; }
  .ct-row > .c-price { grid-area: price; }
  .ct-row > .c-qty { grid-area: qty; }
  .ct-row > .c-sub { grid-area: sub; }
  .ct-row > .c-op { grid-area: op; text-align: right; }
  .ct-row > div::before { display: none; }
  .ct-row .c-price::before { content: attr(data-l) '：'; font-size: 11.5px; color: var(--ink3); margin-right: 4px; }
  .ct-row .c-qty::before { content: attr(data-l) '：'; font-size: 11.5px; color: var(--ink3); margin-right: 4px; }
  .ct-row .c-sub::before { content: attr(data-l) '：'; font-size: 11.5px; color: var(--ink3); margin-right: 4px; }
  .ct-acts .btn { min-width: 0; width: 100%; }
}