/* cart 页（/zh/cart、/en/cart）。共用的 token、按钮、徽章、卡片、.price-tbd 在 base.css；
   这里的类名都带 cart- 前缀。版式学 aibao.fun：白卡片、大圆角、留白多，橙色只给按钮和链接。
   桌面：左边一张白卡片放组件（行与行之间细线隔开），右边小结卡片跟着滚动（sticky）。
   ≤ 834px：小结排到组件下面。≤ 640px：每行改成「图 + 名字」一排、「数量 + 价格」一排。 */

.cart-page{padding-bottom:8px}
.cart-head .section-sub{margin-bottom:36px}
.cart-noscript{margin-bottom:24px}

.cart-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;
}

/* ---------------------------------------------------------------- 组件列表 */
.cart-lines{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:4px 28px 8px;min-width:0;
}
.cart-lines-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:20px 0 14px;border-bottom:1px solid var(--gray-5);
}
.cart-lines-title{font-size:17px;font-weight:600;letter-spacing:-.01em}
.cart-more{font-size:14px}

.cart-line{
  display:grid;
  grid-template-columns:128px minmax(0,1fr) auto;
  grid-template-areas:
    "thumb info  price"
    "thumb ctrls ctrls";
  column-gap:22px;row-gap:14px;
  padding:24px 0;
}
.cart-line + .cart-line{border-top:1px solid var(--gray-5)}

/* 插图：和 aibao.fun 的卡片图一样，浅灰底 + 圆角，图按比例放进去不裁 */
.cart-thumb{
  grid-area:thumb;align-self:start;position:relative;
  width:100%;aspect-ratio:4/3;border-radius:var(--radius-inner);overflow:hidden;
  background:var(--gray-6);
}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-thumb.is-photo img{object-fit:cover}
.cart-thumb-icon{display:flex;align-items:center;justify-content:center;font-size:34px}
/* 「示意图」小字：贴在图的左下角，小而清楚，不抢图 */
.cart-thumb-note{
  position:absolute;left:6px;bottom:6px;
  font-size:10px;font-weight:500;line-height:1;letter-spacing:.02em;color:var(--gray-2);
  background:rgba(255,255,255,.86);padding:3px 6px;border-radius:var(--radius-pill);
}

.cart-info{grid-area:info;min-width:0;display:grid;gap:8px;align-content:start}
.cart-name{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.cart-name-link{transition:color .2s}
.cart-name-link:hover{color:var(--accent-dark)}
.cart-meta,.cart-caps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
/* 很窄的屏（320px）上长徽章「Firmware flashed, not yet tested」比这一栏还宽：cart.js 用 base.css 的
   .status-wrap / .cap-tag-wrap（AC.statusBadge(s, { wrap: true })）让它折行，不撑出卡片 */
.cart-role{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12px;font-weight:500;color:var(--gray-1);line-height:1.4;
  background:var(--gray-6);padding:2px 10px 2px 8px;border-radius:var(--radius-pill);white-space:nowrap;
}
/* emoji 在不同字体下宽度不一样：给它一个固定的格子 */
.cart-role-icon{display:inline-block;width:1.25em;text-align:center;font-size:13px;line-height:1}

.cart-line-price{grid-area:price;text-align:right;font-size:15px;padding-top:2px}

/* ---------------------------------------------------------------- 数量 + 移除 */
.cart-controls{grid-area:ctrls;display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px}
.cart-stepper{
  display:inline-flex;align-items:center;
  border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--gray-4);background:#fff;
}
.cart-step{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:400;line-height:1;color:var(--gray-1);
  transition:background .2s,color .2s;
}
.cart-step:hover{background:var(--gray-6);color:var(--black)}
.cart-step:focus-visible{outline-offset:0;border-radius:50%}
.cart-step[aria-disabled="true"],.cart-step[aria-disabled="true"]:hover{
  color:var(--gray-4);background:transparent;cursor:not-allowed;
}
.cart-qty{min-width:22px;text-align:center;font-size:15px;font-weight:600}
.cart-max{font-size:12px;color:var(--gray-3)}
.cart-remove{
  font-size:13px;color:var(--gray-2);padding:6px 2px;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.cart-remove:hover{color:var(--accent-dark);border-bottom-color:currentColor}

/* ---------------------------------------------------------------- 小结 */
.cart-summary{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:14px}
.cart-summary-card{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:26px 26px 22px;
}
.cart-summary-title{font-size:17px;font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.cart-totals{display:grid}
.cart-totals-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:10px 0;font-size:15px;color:var(--gray-1);
}
.cart-totals-row dd{font-weight:500;color:var(--black)}
.cart-totals-sum{border-top:1px solid var(--gray-5);margin-top:4px;padding-top:14px;font-size:17px;font-weight:600;color:var(--black)}
.cart-totals-sum dd .price-tbd{font-size:17px}
.cart-price-note{font-size:13px;color:var(--gray-3);line-height:1.5;margin:2px 0 20px}
.cart-checkout{padding-top:13px;padding-bottom:13px}
/* 橙点跟着文字走（行内），折成两行时整段居中，点不会单独挂在左上角 */
.cart-demo-note{
  font-size:13px;color:var(--gray-2);line-height:1.5;margin-top:12px;text-align:center;text-wrap:balance;
}
.cart-demo-note::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-right:7px;vertical-align:.12em;
}
/* 「还没实测」点名：灰底小字，和 .notice-quiet 一个语气 —— 是提醒，不是警报 */
.cart-untested{
  font-size:13px;line-height:1.55;color:var(--gray-1);
  background:var(--gray-6);border:1px dashed var(--gray-4);border-radius:16px;padding:12px 16px;
}

/* ---------------------------------------------------------------- 空购物车 */
.cart-empty{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:64px 28px 60px;text-align:center;
}
.cart-empty-mark{
  width:88px;height:88px;border-radius:50%;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;color:var(--accent-dark);
  background:radial-gradient(circle at 35% 30%,#fff 0%,rgba(255,122,26,.10) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,122,26,.18);
}
.cart-empty-mark svg{width:40px;height:40px}
.cart-empty-title{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.cart-empty-title:focus{outline:none}
.cart-empty-text{font-size:17px;color:var(--gray-2);max-width:440px;margin:0 auto 28px;line-height:1.5}
.cart-empty-actions{justify-content:center}

/* ---------------------------------------------------------------- 「只存在你这台浏览器里」 */
/* 宽屏：一段居中的字，锁的小图标跟着第一行的字走（行内）。用 flex 的话，字一折行 span 就占满一整行，
   图标会被甩到最左边、和居中的字分家（700px 宽时看得到）。 */
.cart-local{
  max-width:640px;margin:36px auto 0;text-align:center;text-wrap:balance;
  font-size:13px;color:var(--gray-3);line-height:1.55;
}
.cart-local-icon{display:inline-block;vertical-align:-2px;margin-right:6px}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:834px){
  .cart-layout{grid-template-columns:minmax(0,1fr)}
  .cart-summary{position:static}
}
@media (max-width:640px){
  .cart-head .section-sub{margin-bottom:24px}
  .cart-lines{padding:0 18px 4px}
  .cart-lines-head{padding:16px 0 12px}
  .cart-line{
    grid-template-columns:92px minmax(0,1fr) auto;
    grid-template-areas:
      "thumb info  info"
      "ctrls ctrls price";
    column-gap:14px;row-gap:14px;padding:20px 0;
  }
  .cart-name{font-size:16px}
  .cart-line-price{align-self:center;padding-top:0}
  .cart-controls{gap:6px 12px}
  .cart-summary-card{padding:22px 20px 20px}
  .cart-empty{padding:48px 20px 44px}
  .cart-empty-title{font-size:24px}
  .cart-empty-text{font-size:16px}
  .cart-empty-actions .btn-primary,.cart-empty-actions .btn-secondary{flex:1 1 160px}
  /* 手机：靠左，图标单独一栏，折行的字和第一行对齐 */
  .cart-local{display:flex;align-items:flex-start;gap:8px;text-align:left;margin-top:28px}
  .cart-local-icon{flex-shrink:0;margin:.2em 0 0}
}