/* checkout 页（/zh/checkout、/en/checkout）：演示结账。共用的 token、按钮、徽章、.field 表单样式在 base.css；
   这里的类名都带 co- 前缀。版式学 aibao.fun：每一步一张白卡片，大圆角，橙色只给强调和按钮。
   桌面：左边表单（四张卡片 + 最后一步），右边小结跟着滚动（sticky）。
   ≤ 834px：一栏，小结用 order 排到表单上面（DOM 里表单在前，键盘先走表单）。 */

.co-head{padding-bottom:20px}
.co-title{margin-bottom:0}
.co-noscript{margin-top:20px}

/* ---------------------------------------------------------------- 顶上那句「演示结账」（第一遍）
   比横幅显眼一档：横幅在页面最上面、一滚就没了，这句是给正要填表的人看的。 */
.co-notice{
  display:flex;align-items:flex-start;gap:16px;
  background:#fff4ea;border:1px solid rgba(255,122,26,.28);border-radius:20px;
  padding:20px 24px;margin-bottom:28px;
}
.co-notice-mark{
  flex-shrink:0;width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;
  box-shadow:0 6px 16px rgba(255,122,26,.28);
}
.co-notice-body{min-width:0;padding-top:1px}
.co-notice-main{font-size:17px;line-height:1.5;color:var(--black);letter-spacing:-.005em}
.co-notice-main b{color:var(--accent-dark);font-weight:700}
.co-notice-sub{font-size:14px;color:var(--gray-2);margin-top:4px;line-height:1.5}

/* ---------------------------------------------------------------- 购物车是空的 */
.co-empty{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:56px 28px;text-align:center;
}
.co-empty-title{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px}
.co-empty-title:focus{outline:none}
.co-empty-text{font-size:17px;color:var(--gray-2);max-width:460px;margin:0 auto 28px;line-height:1.5}
.co-empty-actions{justify-content:center}

/* ---------------------------------------------------------------- 版面 */
.co-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:24px;align-items:start;
}
.co-form{display:grid;gap:16px;min-width:0}
.co-summary{position:sticky;top:calc(var(--nav-h) + 20px);min-width:0}

/* ---------------------------------------------------------------- 错误汇总 */
.co-errors{
  background:#fff;border-radius:18px;padding:18px 22px;
  box-shadow:inset 0 0 0 1.5px var(--accent-dark),var(--shadow-card);
}
.co-errors:focus{outline:none}
.co-errors:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.co-errors-title{font-size:15px;font-weight:600;color:var(--accent-dark);margin-bottom:6px}
.co-errors-list{display:grid;gap:4px;font-size:14px;line-height:1.5}
.co-errors-list a{color:var(--gray-1);border-bottom:1px solid var(--gray-4);transition:color .2s,border-color .2s}
.co-errors-list a:hover{color:var(--accent-dark);border-bottom-color:currentColor}

/* ---------------------------------------------------------------- 每一步一张卡片 */
.co-section{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:26px 28px 28px;min-width:0;
}
.co-section-title{
  display:flex;align-items:center;gap:12px;
  font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:20px;
}
.co-step{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-tint);color:var(--accent-dark);
  font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
}
.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
.co-span{grid-column:1/-1}
.co-section .field{gap:7px;align-content:start}
.co-optional{font-weight:400;color:var(--gray-3)}

/* 下拉：去掉系统箭头，换成同一个灰度的细箭头（data: 图在 CSP 的 img-src 里放行） */
.field select.co-select{
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;
  background-color:var(--gray-6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px;
}
.field select.co-select:focus{background-color:#fff}

/* 有错的框：深橙边（和 aibao.fun 表单的报错同一个颜色），红字在框下面 */
.co-section [aria-invalid="true"]{border-color:var(--accent-dark) !important;background-color:#fffaf5 !important}
.co-err{font-size:13px;line-height:1.5;color:var(--accent-dark);font-weight:500}
.co-err::before{content:"! ";font-weight:700}

/* ---------------------------------------------------------------- 选项卡片（配送 / 付款）
   付款是 role="radio" 的按钮（原生单选要 name 才能分组，这一页不写 name）。圆点自己画。 */
.co-options{display:grid;gap:10px}
/* 付款选项一个一排（和配送那一格同宽）：排成三栏的话，表单栏一窄（1280 下每格 181px，900px 下 140px）
   「Interac e-Transfer」就挤不下，要么折成两行、要么挤出框外。 */
.co-pay{grid-template-columns:minmax(0,1fr)}
.co-opt{
  display:flex;align-items:center;gap:12px;width:100%;min-width:0;
  padding:15px 16px;border-radius:var(--radius-inner);background:#fff;text-align:left;
  font-size:15px;font-weight:500;color:var(--black);line-height:1.35;
  box-shadow:inset 0 0 0 1px var(--gray-4);
  transition:box-shadow .2s,background .2s;
}
button.co-opt:hover{box-shadow:inset 0 0 0 1px var(--gray-3)}
.co-opt[aria-checked="true"]{background:rgba(255,122,26,.05);box-shadow:inset 0 0 0 2px var(--accent)}
button.co-opt[aria-checked="true"]:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.co-opt:focus-visible{outline-offset:2px;border-radius:var(--radius-inner)}
.co-opt-dot{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--gray-3);transition:box-shadow .2s;
}
.co-opt[aria-checked="true"] .co-opt-dot{box-shadow:inset 0 0 0 6px var(--accent)}
.co-opt-body{display:grid;gap:2px;min-width:0}
.co-opt-title{min-width:0}
.co-opt-desc{font-size:13px;font-weight:400;color:var(--gray-2);line-height:1.5}
/* 配送：只有一个、而且是灰的（还没定），一看就不是能选的东西 */
.co-opt.is-static{background:var(--gray-6);box-shadow:none;color:var(--gray-1);cursor:default;align-items:flex-start}
.co-opt.is-static .co-opt-dot{background:var(--gray-6);box-shadow:inset 0 0 0 1.5px var(--gray-4),inset 0 0 0 6px var(--gray-6),inset 0 0 0 20px var(--gray-4);margin-top:1px}
.co-pay[aria-invalid="true"] .co-opt{box-shadow:inset 0 0 0 1px var(--accent-dark)}
.co-pay[aria-invalid="true"] + .co-err{margin-top:10px}

.co-pay-note{
  display:flex;align-items:flex-start;gap:8px;margin-top:14px;
  font-size:13px;color:var(--gray-2);line-height:1.55;
}
.co-pay-note::before{
  content:"i";flex-shrink:0;width:16px;height:16px;border-radius:50%;margin-top:.15em;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;font-style:italic;font-family:Georgia,serif;line-height:1;
  color:var(--gray-2);box-shadow:inset 0 0 0 1px var(--gray-3);
}

/* ---------------------------------------------------------------- 最后一步：按钮旁边再说一遍「演示，不会扣款」 */
.co-final{
  display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  background:#fff4ea;border:1px solid rgba(255,122,26,.28);border-radius:var(--radius-card);
  padding:20px 22px 20px 24px;
}
.co-final-note{flex:1 1 260px;font-size:15px;line-height:1.55;color:var(--gray-1)}
.co-final-note b{color:var(--accent-dark)}
.co-submit{flex:0 0 auto;padding:14px 30px;font-size:16px}

/* ---------------------------------------------------------------- 小结 */
.co-summary-card{
  background:#fff;border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:24px 24px 20px;
}
.co-summary-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.co-summary-title{font-size:17px;font-weight:600;letter-spacing:-.01em}
.co-edit{font-size:14px}
.co-items{display:grid}
.co-item{
  display:grid;grid-template-columns:60px minmax(0,1fr);gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--gray-5);
}
.co-thumb{
  width:60px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--gray-6);
}
.co-thumb img{width:100%;height:100%;object-fit:contain}
.co-thumb.is-photo img{object-fit:cover}
.co-thumb-icon{display:flex;align-items:center;justify-content:center;font-size:22px}
.co-item-info{display:grid;gap:4px;justify-items:start;min-width:0}
/* 名字 + 「× 件数」一排；徽章在下一行，独占整栏宽 */
.co-item-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;justify-self:stretch;min-width:0}
.co-item-name{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.005em;min-width:0}
/* 万一还是比这一栏宽（很窄的屏）：徽章折行，不撑出卡片（checkout.js 用 AC.statusBadge(s, { wrap: true })）；这里只缩小一号 */
.co-item-info .status{font-size:11px;padding:1px 8px;gap:5px;border-radius:10px}
.co-item-info .status::before{width:6px;height:6px}
.co-item-qty{font-size:14px;color:var(--gray-2);white-space:nowrap}
.co-illus-note{font-size:12px;color:var(--gray-3);margin-top:10px}
.co-totals{display:grid;margin-top:8px}
.co-totals-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;font-size:15px;color:var(--gray-1);
}
.co-totals-row dd{font-weight:500;color:var(--black)}
.co-totals-row dd.co-tbd{font-weight:500;color:var(--gray-3)}
.co-totals-sum{border-top:1px solid var(--gray-5);margin-top:4px;padding-top:12px;font-size:17px;font-weight:600;color:var(--black)}
.co-price-note{font-size:13px;color:var(--gray-3);line-height:1.5;margin-top:4px}

/* ---------------------------------------------------------------- 演示完成 */
.co-done{
  max-width:640px;margin:0 auto;text-align:center;
  background:#fff;border-radius:24px;box-shadow:var(--shadow-card);
  padding:52px 40px 40px;
}
.co-done-mark{
  width:64px;height:64px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  box-shadow:0 10px 24px rgba(255,122,26,.3);
}
.co-done-label{margin-bottom:8px}
.co-done-title{font-size:clamp(26px,3.4vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:24px}
.co-done-title:focus{outline:none}
.co-done-num{
  display:grid;gap:4px;justify-items:center;
  background:var(--gray-6);border-radius:var(--radius-inner);padding:16px 20px 18px;margin-bottom:24px;
}
.co-done-num-label{font-size:13px;font-weight:500;color:var(--gray-2)}
.co-done-num-value{
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:22px;font-weight:600;letter-spacing:.06em;color:var(--black);
  overflow-wrap:anywhere;
}
.co-done-num-note{font-size:13px;color:var(--gray-3);line-height:1.5;max-width:420px}
.co-done-text{font-size:17px;line-height:1.6;color:var(--gray-1);max-width:500px;margin:0 auto 10px;text-wrap:balance}
.co-done-text b{color:var(--accent-dark)}
.co-done-cart{font-size:15px;color:var(--gray-2);line-height:1.55;margin-bottom:26px}
.co-done-actions{justify-content:center;margin-top:26px}
.co-done-cart + .co-done-actions{margin-top:0}
.co-done-status{font-size:14px;color:var(--ok);font-weight:500;margin-top:14px;min-height:1.5em}
.co-done-status:empty{margin-top:0;min-height:0}

/* ---------------------------------------------------------------- 响应式 */
@media (max-width:834px){
  .co-layout{grid-template-columns:minmax(0,1fr)}
  .co-summary{position:static;order:-1}
}
@media (max-width:640px){
  .co-head{padding-bottom:16px}
  .co-notice{padding:16px 16px 16px 14px;gap:12px;margin-bottom:20px;border-radius:18px}
  .co-notice-mark{width:34px;height:34px;border-radius:10px}
  .co-notice-mark svg{width:19px;height:19px}
  .co-notice-main{font-size:16px}
  .co-section{padding:22px 18px 22px}
  .co-section-title{font-size:18px;margin-bottom:16px}
  .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-final{padding:18px;flex-direction:column;align-items:stretch}
  .co-final-note{flex:none}
  .co-submit{width:100%}
  .co-summary-card{padding:20px 18px 16px}
  .co-empty{padding:44px 20px}
  .co-empty-title{font-size:23px}
  .co-empty-actions .btn-primary,.co-empty-actions .btn-secondary{flex:1 1 150px}
  .co-done{padding:40px 20px 30px;border-radius:22px}
  .co-done-num-value{font-size:20px}
  .co-done-text{font-size:16px}
  .co-done-actions .btn-primary,.co-done-actions .btn-secondary{flex:1 1 150px}
}