/* ============================================================
   天兴旺电子商城 · 商城侧公共样式
   给「结算页 / 购物车 / 支付结果页 / 预算段页」共用。
   —— 首页 index.html 是单文件、内联样式，刻意没有改成引用本文件，
      所以首页原有视觉一行都没动（见 README 说明）。
   —— 配色：白底 + 京东红主色。主色抽成 --brand，需要换品牌色时只改这一行。
      ⚠️ 不要再出现大面积深色底（黑 banner / 黑页脚）——客户明确不喜欢；
         深色只允许用在文字上。（2026-10 客户反馈后统一）
   ============================================================ */

:root{
  --ink:#1a1a1a;          /* 主文字 / 深色块 */
  --ink-2:#333;
  --ink-3:#555;
  --gray:#888;
  --gray-2:#aaa;
  --line:#e8e8e8;
  --line-2:#d9d9d9;
  --soft:#fafafa;         /* 填充式输入框底色 */
  --bg:#f5f5f6;           /* 页面底 */
  --card:#ffffff;
  --warn:#b42318;
  --radius:10px;
  --brand:#e1251b;        /* ← 换主色只改这里（京东红）*/
  --brand-dark:#c01a17;   /* 主按钮 hover */
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,"宋体",sans-serif;
  font-size:14px;line-height:1.6;color:var(--ink-2);
  background:var(--bg);-webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:14px;color:var(--ink);}
input:focus,textarea:focus,select:focus{outline:none;}

.container{width:1180px;margin:0 auto;padding:0 16px;}
.money{font-family:Arial,Helvetica,sans-serif;}

/* ============================================================
   一、头部（logo + 面包屑/步骤 + 客服电话 + 购物车入口）
   ============================================================ */

.shop-head{background:#fff;border-bottom:1px solid var(--line);}
.shop-head .container{display:flex;align-items:center;min-height:68px;gap:20px;}

/* 店名用主色（与首页一致）。原来这里是深色 var(--ink)，内页看过去就是"黑logo" */
.shop-logo{font-size:19px;font-weight:bold;letter-spacing:1px;color:var(--brand);white-space:nowrap;}

.shop-crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray);white-space:nowrap;}
.shop-crumb .sep{color:var(--line-2);}
.shop-crumb b{color:var(--ink);font-weight:600;}

.shop-head .right{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap;}
.shop-head .tel{font-size:13px;color:var(--gray);}
.shop-head .tel b{color:var(--ink);font-size:15px;}

/* 步骤条 */
.steps{display:flex;align-items:center;gap:0;font-size:13px;}
.steps .s{display:flex;align-items:center;gap:7px;color:var(--gray-2);}
.steps .s i{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-style:normal;color:var(--gray-2);background:#fff;
}
.steps .s.on{color:var(--ink);font-weight:600;}
.steps .s.on i{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700;}
.steps .s.done i{background:#fff;border-color:var(--brand);color:var(--brand);}
.steps .ln{width:38px;height:1px;background:var(--line-2);margin:0 12px;}

/* ============================================================
   一·补、顶部细条（欢迎语 + 快捷入口）
   —— 与首页 index.html 的顶部条保持一致
   ============================================================ */

.topbar{background:#f7f7f8;border-bottom:1px solid var(--line);font-size:12px;color:var(--gray);}
.topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:36px;gap:12px;}
.topbar .hello{color:var(--gray);}
.topbar .hello b{color:var(--ink-2);font-weight:500;}
.topbar .quick{display:flex;align-items:center;white-space:nowrap;}
.topbar .quick a{color:var(--gray);margin-left:16px;}
.topbar .quick a:hover{color:var(--ink);}
.topbar .quick .sp{color:#dcdcdc;margin-left:16px;}

/* ============================================================
   二、页脚
   ============================================================ */

/* 内容少时把页脚推到窗口底部，避免下面留一大片空白 */
body{display:flex;flex-direction:column;min-height:100vh;}
body > .container{flex:1 0 auto;display:flex;flex-direction:column;}
body > .container > .shop-foot{margin-top:auto;}
body > .shop-foot{margin-top:auto;}

.shop-foot{background:#f7f7f8;border-top:1px solid var(--line);color:#888;padding:28px 0;font-size:13px;text-align:center;line-height:2;}
.shop-foot b{color:#222;font-size:15px;}
.shop-foot .links{margin-bottom:10px;}
.shop-foot .links a{margin:0 10px;color:#888;}
.shop-foot .links a:hover{color:var(--brand);}

/* ============================================================
   三、卡片 / 区块
   ============================================================ */

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;}
.card-head{
  display:flex;align-items:baseline;gap:10px;
  padding:16px 22px;border-bottom:1px solid var(--line);
}
.card-head h2{font-size:16px;font-weight:600;color:var(--ink);}
.card-head small{font-size:12px;color:var(--gray-2);font-weight:normal;}
.card-body{padding:22px;}

.page-title{font-size:22px;font-weight:600;color:var(--ink);padding:22px 0 14px;}

/* ============================================================
   四、表单（标签在上 + 填充式输入框）
   ============================================================ */

.field{margin-bottom:18px;}
.field > label{display:block;font-size:13px;color:var(--ink-3);margin-bottom:7px;font-weight:500;}
.req{color:var(--warn);margin-left:3px;font-style:normal;}

.input,.textarea{
  width:100%;border:1px solid transparent;background:var(--soft);
  border-radius:6px;padding:11px 13px;transition:background .15s,border-color .15s;
}
.input::placeholder,.textarea::placeholder{color:#bfbfbf;}
.input:hover,.textarea:hover{background:#f2f2f3;}
.input:focus,.textarea:focus{background:#fff;border-color:var(--brand);}
.textarea{resize:vertical;min-height:80px;line-height:1.65;}
.input.bad,.textarea.bad{background:#fff;border-color:var(--warn);}

.err{color:var(--warn);font-size:12px;margin-top:6px;}
.tip{font-size:12px;color:var(--gray-2);margin-top:6px;line-height:1.7;}

.field-row{display:flex;gap:14px;}
.field-row > .field{flex:1;}

/* 单选（发票类型） */
.radios{display:flex;gap:10px;flex-wrap:wrap;}
.radios label{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:6px;padding:9px 16px;
  font-size:13px;color:var(--ink-3);background:#fff;transition:.15s;
}
.radios label:hover{border-color:var(--ink-3);}
.radios label.on{border-color:var(--brand);color:var(--ink);font-weight:600;background:#fafafa;}
.radios input{accent-color:var(--brand);}

/* 折叠 */
.collapse-head{
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  user-select:none;padding:16px 22px;
}
.collapse-head h2{font-size:15px;font-weight:600;color:var(--ink);}
.collapse-head .arw{color:var(--gray-2);font-size:12px;transition:transform .2s;}
.collapse.open .arw{transform:rotate(180deg);}
.collapse-body{display:none;padding:0 22px 22px;}
.collapse.open .collapse-body{display:block;}

/* ============================================================
   五、商品卡片（与首页完全一致，从 index.html 原样搬过来）
   ============================================================ */

.goods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.goods-item{border:1px solid var(--line-2);background:#fff;display:flex;flex-direction:column;transition:.15s;}
.goods-item:hover{border-color:var(--brand);}
.goods-img{
  /* ⚠️ 原来是固定 height:200px（横盒子 275×200），而商品图大多是竖图（宽高比 0.5~1.0）
     → 竖图被 contain 缩成中间一根窄条、两边大片灰底（客户反馈"图片被压缩成啥了"）。
     改成【正方形 + cover】：卡片整齐饱满、大小统一，这就是淘宝/京东商品卡的做法。
     若发现长图上下被裁掉了重要内容，把下面的 cover 改成 contain 即可（只改这一个词）。 */
  /* ⚠️ 兼容性修复：光写 aspect-ratio 时，Edge/Chrome 与 Firefox 对「flex 列项」的高度
     计算可能不一致（客户实测：一个浏览器正常、一个图片变小）。
     flex:none 让这个盒子不参与 flex 拉伸/收缩，width:100% 明确宽度，
     再由 aspect-ratio 推高度 —— 两个浏览器就一致了。 */
  flex:none;width:100%;aspect-ratio:1 / 1;background:var(--soft);border-bottom:1px solid #f0f0f0;
  display:flex;align-items:center;justify-content:center;
  color:#ccc;font-size:13px;position:relative;overflow:hidden;
}
.goods-img img{width:100%;height:100%;object-fit:cover;}
.goods-img .tag{position:absolute;left:0;top:0;background:var(--brand);color:#fff;font-size:11px;padding:2px 10px;}
.goods-info{padding:14px;flex:1;display:flex;flex-direction:column;}
.goods-info h3{font-size:13.5px;font-weight:500;line-height:1.5;color:#333;height:42px;overflow:hidden;}
.goods-fit{font-size:12px;color:#999;margin-top:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.goods-price{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:1px dashed #eee;}
.goods-price .price{font-size:20px;font-weight:bold;color:var(--brand);}
.goods-price .price small{font-size:12px;font-weight:normal;color:#999;}
.goods-price .sold{font-size:11px;color:#bbb;}
.goods-btns{display:flex;gap:8px;margin-top:12px;}
.goods-btns button{flex:1;padding:9px 0;font-size:13px;transition:.15s;border-radius:4px;}
.btn-buy{background:var(--brand);border:1px solid var(--brand);color:#fff;}
.btn-buy:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.btn-cart{background:#fff;border:1px solid var(--line-2);color:#666;}
.btn-cart:hover{border-color:var(--brand);color:var(--brand);}

/* ============================================================
   六、商品行（购物车 / 订单摘要共用）
   ============================================================ */

.line-list{display:flex;flex-direction:column;}
.line{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 22px;border-bottom:1px solid #f2f2f2;
}
.line:last-child{border-bottom:0;}
.line .pick{flex:none;padding-top:26px;}
.line .pick input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.line .pic{
  width:80px;height:80px;flex:none;border-radius:8px;border:1px solid var(--line);
  background:var(--soft);display:flex;align-items:center;justify-content:center;
  color:#c8c8c8;font-size:11px;overflow:hidden;
}
.line .pic img{width:100%;height:100%;object-fit:contain;}
.line .info{flex:1;min-width:0;}
.line .info h4{font-size:14px;font-weight:500;color:var(--ink);line-height:1.5;margin-bottom:5px;}
.line .info .fit{font-size:12px;color:var(--gray-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.line .info .unit{font-size:13px;color:var(--gray);margin-top:7px;}
.line .info .unit b{color:var(--ink);font-weight:600;}
.line .ops{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex:none;}
.line .sub{font-size:15px;font-weight:bold;color:var(--ink);}
.line .del{font-size:12px;color:var(--gray-2);background:none;border:0;padding:0;}
.line .del:hover{color:var(--warn);}
.line .stock-tip{font-size:12px;color:var(--warn);}

/* 数量步进器 */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#fff;}
.stepper button{
  width:30px;height:30px;border:0;background:#fff;color:var(--ink-3);
  font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.stepper button:hover:not(:disabled){background:#f5f5f5;color:#000;}
.stepper button:disabled{color:#e0e0e0;cursor:not-allowed;}
.stepper input{
  width:46px;height:30px;border:0;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2);
  text-align:center;font-size:13px;background:#fff;
}

/* ============================================================
   七、订单摘要（右栏，跟随滚动）
   ============================================================ */

.summary{position:sticky;top:20px;}
.summary .rows{padding:6px 22px 0;}
.summary .row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-3);padding:9px 0;}
.summary .row b{color:var(--ink);font-weight:600;}
.summary .total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 22px;border-top:1px solid var(--line);margin-top:8px;
}
.summary .total span{font-size:14px;color:var(--ink-3);}
.summary .total b{font-size:26px;color:var(--brand);font-weight:bold;font-family:Arial,Helvetica,sans-serif;}
.summary .total b small{font-size:14px;font-weight:normal;}
.summary .cta-box{padding:0 22px 20px;}

.cta{
  display:block;width:100%;height:50px;border:0;border-radius:6px;
  background:var(--brand);color:#fff;font-size:16px;font-weight:600;letter-spacing:1px;
  transition:.15s;
}
.cta:hover:not(:disabled){background:var(--brand-dark);}
.cta:disabled{background:#d2d2d2;cursor:not-allowed;letter-spacing:0;}
.cta-note{font-size:12px;color:var(--gray-2);text-align:center;margin-top:11px;line-height:1.7;}
.cta-err{font-size:12px;color:var(--warn);text-align:center;margin-top:10px;line-height:1.7;}

/* 信任条 */
.trust{display:flex;justify-content:space-between;gap:8px;padding:16px 22px;border-top:1px solid var(--line);}
.trust div{font-size:12px;color:var(--gray);text-align:center;line-height:1.5;flex:1;}
.trust div b{display:block;color:var(--ink-2);font-weight:600;font-size:12px;}

/* ============================================================
   八、工具条 / 空状态 / 提示
   ============================================================ */

.toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 22px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:16px;
}
.toolbar .spacer{flex:1;}
.toolbar .count{font-size:13px;color:var(--gray);}
.toolbar label.pickall{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);cursor:pointer;}
.toolbar label.pickall input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;}
.link{font-size:13px;color:var(--ink-3);}
.link:hover{color:var(--ink);}

.empty-state{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:80px 20px;text-align:center;color:var(--gray);
}
.empty-state h3{font-size:17px;color:var(--ink-2);font-weight:600;margin-bottom:10px;}
.empty-state p{font-size:13px;color:var(--gray);line-height:2;}
.empty-state a.go{
  display:inline-block;margin-top:22px;padding:11px 34px;border-radius:6px;
  background:var(--brand);color:#fff;font-size:14px;
}
.empty-state a.go:hover{background:var(--brand-dark);}

.skeleton{color:var(--gray-2);text-align:center;padding:90px 0;font-size:14px;}

/* ============================================================
   九、支付结果页
   ============================================================ */

.result-card{
  width:600px;max-width:100%;margin:44px auto 34px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:48px 44px 38px;text-align:center;
}
.mark{width:72px;height:72px;margin:0 auto 24px;border:2px solid var(--brand);border-radius:50%;position:relative;}
.mark::after{
  content:"";position:absolute;left:24px;top:15px;width:15px;height:29px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
}
.mark.pending::after{left:21px;top:33px;width:26px;height:0;border-right:0;border-bottom:2px solid var(--brand);transform:none;}
.mark.fail{border-color:var(--line-2);}
.mark.fail::after{
  left:22px;top:33px;width:26px;height:26px;border-right:0;border-bottom:0;transform:none;
  background:
    linear-gradient(45deg,transparent 46%,var(--gray-2) 46%,var(--gray-2) 54%,transparent 54%),
    linear-gradient(-45deg,transparent 46%,var(--gray-2) 46%,var(--gray-2) 54%,transparent 54%);
}

.result-card h2{font-size:25px;color:var(--ink);font-weight:bold;letter-spacing:1px;margin-bottom:8px;}
.result-card .sub{font-size:14px;color:var(--gray);margin-bottom:28px;}

.info-block{border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;padding:18px 0;margin-bottom:28px;text-align:left;}
.info-block .r{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px;}
.info-block .r .k{color:var(--gray);}
.info-block .r .v{color:var(--ink);font-weight:600;font-family:Arial,Helvetica,sans-serif;}
.info-block .r .v.big{font-size:22px;}

.btns{display:flex;gap:12px;justify-content:center;}
.btns a{
  flex:1;max-width:200px;height:46px;display:flex;align-items:center;justify-content:center;
  font-size:15px;border-radius:6px;transition:.15s;
}
.btns a.primary{background:var(--brand);color:#fff;border:1px solid var(--brand);}
.btns a.primary:hover{background:var(--brand-dark);}
.btns a.plain{background:#fff;color:var(--ink);border:1px solid var(--line-2);}
.btns a.plain:hover{border-color:var(--brand);}

/* ============================================================
   十、响应式
   ============================================================ */

@media (max-width:1220px){ .container{width:100%;} }

@media (max-width:960px){
  .layout-2col{flex-direction:column;}
  .layout-2col .side{width:100% !important;}
  .summary{position:static;}
  .steps .ln{width:16px;margin:0 6px;}
  .shop-crumb{display:none;}
  .goods-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:620px){
  .shop-head .container{flex-wrap:wrap;min-height:0;padding-top:12px;padding-bottom:12px;gap:10px;}
  .shop-head .right{margin-left:0;width:100%;justify-content:space-between;}
  .steps{font-size:12px;}
  .steps .s span{display:none;}
  .card-body{padding:16px;}
  .card-head,.line,.toolbar,.summary .rows,.summary .cta-box,.trust{padding-left:16px;padding-right:16px;}
  .line{gap:10px;}
  .line .pic{width:64px;height:64px;}
  .goods-grid{grid-template-columns:1fr;}
  .result-card{margin:20px 12px 26px;padding:34px 20px 28px;}
  .result-card h2{font-size:21px;}
  .btns{flex-direction:column;}
  .btns a{max-width:none;}
  .field-row{flex-direction:column;gap:0;}
}

/* ===== 商品图统一高度（追加在最后，覆盖前面的写法；2026-10-07 修） ===== */
.goods-img{height:210px !important;min-height:210px !important;overflow:hidden !important;}
.goods-img img{display:block !important;width:100% !important;height:210px !important;object-fit:cover !important;}

/* ===== 每行 3 个 + 正方形图片框（2026-10-07 按客户要求） ===== */
.goods-grid{grid-template-columns:repeat(3,1fr) !important;}
.goods-img{height:320px !important;min-height:320px !important;overflow:hidden !important;}
.goods-img img{display:block !important;width:100% !important;height:320px !important;object-fit:cover !important;}
@media (max-width:960px){
  .goods-grid{grid-template-columns:repeat(2,1fr) !important;}
  .goods-img,.goods-img img{height:220px !important;min-height:220px !important;}
}