/* ===========================================================
   远橙租赁 · 客户端（用户端商城）样式
   移动端优先，桌面居中显示
   =========================================================== */
:root{
  --shop-max:480px;
}
.shop-body{background:#eceef2; overflow:auto;}
.shop-body .toast-root{position:fixed;}

.shop-app{
  max-width:var(--shop-max); margin:0 auto; min-height:100vh; background:#f5f6f8;
  position:relative; box-shadow:0 0 30px rgba(20,30,60,.08); display:flex; flex-direction:column;
}

/* ---------- 顶部 ---------- */
.shop-header{
  position:sticky; top:0; z-index:40; background:linear-gradient(135deg,#2b6cff,#1f4fd8);
  color:#fff; padding:12px 14px; border-radius:0 0 16px 16px;
}
.shop-header.plain{background:#fff; color:var(--text); border-bottom:1px solid var(--border); border-radius:0;}
.sh-top{display:flex; align-items:center; gap:10px;}
.sh-title{font-size:17px; font-weight:600; flex:1; min-width:0;}
.sh-back{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); flex:0 0 auto;}
.shop-header.plain .sh-back{background:var(--bg); color:var(--text);}
.sh-search{
  flex:1; display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.95); border-radius:20px;
  height:36px; padding:0 14px; color:#8f959e; font-size:13px;
}
.sh-search input{flex:1; border:none; background:transparent; outline:none; font-size:13px;}
.sh-admin{margin-left:auto; font-size:12px; color:rgba(255,255,255,.92); white-space:nowrap;}

/* ---------- 主体 ---------- */
.shop-main{flex:1; padding:12px 12px 78px;}
.shop-sec{margin-bottom:14px;}
.sec-head{display:flex; align-items:center; justify-content:space-between; margin:16px 2px 10px;}
.sec-head h3{margin:0; font-size:16px; font-weight:600;}
.sec-head h3 small{font-size:12px; color:var(--text-3); font-weight:400; margin-left:6px;}
.sec-head .more{color:var(--text-3); font-size:12px; display:flex; align-items:center; gap:2px;}

/* Banner */
.sh-banner{position:relative; border-radius:14px; overflow:hidden; height:150px; margin-bottom:14px;}
.sh-banner .slide{
  position:absolute; inset:0; opacity:0; transition:opacity .5s; display:flex; flex-direction:column;
  justify-content:center; padding:22px; color:#fff;
}
.sh-banner .slide.on{opacity:1;}
.sh-banner .slide h2{margin:0 0 6px; font-size:21px; letter-spacing:.5px;}
.sh-banner .slide p{margin:0; opacity:.92; font-size:13px;}
.sh-banner .slide .pill{display:inline-block; margin-top:12px; background:rgba(255,255,255,.22); padding:5px 12px; border-radius:20px; font-size:12px; width:fit-content;}
.sh-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:6px;}
.sh-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5);}
.sh-dots i.on{background:#fff; width:16px; border-radius:4px;}

/* 卖点条 */
.sh-promise{display:flex; gap:8px; margin-bottom:14px;}
.sh-promise div{
  flex:1; background:#fff; border-radius:12px; padding:11px 6px; text-align:center; font-size:11.5px; color:var(--text-2);
  box-shadow:0 2px 8px rgba(20,30,60,.05);
}
.sh-promise b{display:block; font-size:14px; color:var(--blue); margin-bottom:3px;}

/* 分类 */
.cat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; background:#fff; border-radius:14px; padding:14px 8px; box-shadow:0 2px 8px rgba(20,30,60,.05);}
.cat-item{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11.5px; color:var(--text-2);}
.cat-item .ico{width:42px; height:42px; border-radius:13px; display:grid; place-items:center; font-size:21px;}

/* 商品卡 */
.prod-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
.pcard{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(20,30,60,.06);}
.pcard-img{height:132px; display:grid; place-items:center; font-size:56px; position:relative;}
.pcard-tag{position:absolute; left:8px; top:8px; background:rgba(0,0,0,.35); color:#fff; font-size:10.5px; padding:2px 7px; border-radius:10px; backdrop-filter:blur(4px);}
.pcard-body{padding:9px 10px 11px;}
.pcard-name{font-size:13.5px; font-weight:600; line-height:1.35; height:37px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.pcard-spec{font-size:11px; color:var(--text-3); margin:4px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pcard-price{display:flex; align-items:baseline; gap:3px; color:#ff4d2e;}
.pcard-price b{font-size:18px; font-family:"SFMono-Regular",Consolas,monospace;}
.pcard-price span{font-size:11px; color:var(--text-3);}
.pcard-old{font-size:11px; color:var(--text-4); text-decoration:line-through; margin-left:5px;}

/* 横排商品（分类页） */
.plist{display:flex; flex-direction:column; gap:10px;}
.prow{display:flex; gap:11px; background:#fff; border-radius:14px; padding:11px; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.prow-img{width:88px; height:88px; border-radius:11px; display:grid; place-items:center; font-size:40px; flex:0 0 auto;}
.prow-body{flex:1; min-width:0; display:flex; flex-direction:column;}
.prow-name{font-size:14px; font-weight:600; margin-bottom:4px;}
.prow-spec{font-size:11.5px; color:var(--text-3); margin-bottom:auto;}
.prow-foot{display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px;}

/* 分类页侧栏 */
.cat-layout{display:flex; gap:10px;}
.cat-side{width:96px; flex:0 0 96px; display:flex; flex-direction:column; gap:4px;}
.cat-side button{
  text-align:left; padding:11px 10px; border-radius:10px; font-size:12.5px; color:var(--text-2); background:#fff;
}
.cat-side button.on{background:var(--blue); color:#fff; font-weight:600;}
.cat-side button.on::before{content:""; display:inline-block; width:3px; height:3px;}

/* 详情 */
.detail-hero{height:250px; display:grid; place-items:center; font-size:96px; border-radius:0 0 20px 20px; margin:-12px -12px 0;}
.detail-card{background:#fff; border-radius:14px; padding:14px; margin-top:12px; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.detail-price{display:flex; align-items:baseline; gap:6px; color:#ff4d2e;}
.detail-price b{font-size:30px; font-family:"SFMono-Regular",Consolas,monospace;}
.detail-name{font-size:17px; font-weight:600; margin:8px 0 6px;}
.detail-sub{font-size:12.5px; color:var(--text-3);}
.opt-row{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--border-2);}
.opt-row:last-child{border-bottom:none;}
.opt-label{width:62px; flex:0 0 62px; color:var(--text-3); font-size:13px;}
.chip{padding:6px 14px; border-radius:20px; background:var(--bg); font-size:12.5px; color:var(--text-2); border:1px solid transparent;}
.chip.on{background:var(--blue-w); color:var(--blue); border-color:var(--blue); font-weight:600;}
.chips{display:flex; flex-wrap:wrap; gap:8px;}

/* 底部操作条 */
.shop-actionbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--shop-max);
  background:#fff; border-top:1px solid var(--border); padding:9px 12px; display:flex; align-items:center; gap:9px; z-index:45;
}
.shop-actionbar .ab-ico{display:flex; flex-direction:column; align-items:center; gap:1px; font-size:10.5px; color:var(--text-3); width:46px;}
.shop-actionbar .ab-ico svg{width:20px; height:20px;}
.shop-actionbar .btn{flex:1; height:42px; border-radius:21px; font-size:15px;}

/* 底部导航 */
.shop-tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--shop-max);
  background:#fff; border-top:1px solid var(--border); display:flex; z-index:50;
  padding-bottom:env(safe-area-inset-bottom);
}
.shop-tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 7px;
  font-size:10.5px; color:var(--text-3); position:relative;
}
.shop-tabbar a svg{width:22px; height:22px;}
.shop-tabbar a.on{color:var(--blue); font-weight:600;}
.shop-tabbar .badge{
  position:absolute; top:4px; left:50%; margin-left:6px; min-width:15px; height:15px; line-height:15px;
  background:#ff4d2e; color:#fff; border-radius:8px; font-size:10px; padding:0 4px; text-align:center;
}

/* 订单卡（客户端） */
.ocard{background:#fff; border-radius:14px; padding:13px; box-shadow:0 2px 10px rgba(20,30,60,.05); margin-bottom:11px;}
.ocard-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.ocard-head .oid{font-size:11.5px; color:var(--text-3); font-family:"SFMono-Regular",Consolas,monospace;}
.ostatus{font-size:12.5px; font-weight:600;}
.ocard-body{display:flex; gap:11px;}
.ocard-img{width:74px; height:74px; border-radius:11px; display:grid; place-items:center; font-size:34px; flex:0 0 auto;}
.ocard-info{flex:1; min-width:0;}
.ocard-name{font-size:13.5px; font-weight:600; margin-bottom:4px;}
.ocard-meta{font-size:11.5px; color:var(--text-3); line-height:1.7;}
.ocard-foot{display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:10px; border-top:1px solid var(--border-2);}
.ocard-total b{color:#ff4d2e; font-size:15px;}

/* 结算 */
.checkout-block{background:#fff; border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.ck-addr{display:flex; gap:10px; align-items:flex-start;}
.ck-addr svg{color:var(--blue); flex:0 0 auto; margin-top:2px;}
.ck-line{display:flex; justify-content:space-between; font-size:13.5px; padding:7px 0; color:var(--text-2);}
.ck-line b{color:var(--text);}
.ck-total{display:flex; justify-content:flex-end; align-items:baseline; gap:6px; padding-top:10px; border-top:1px dashed var(--border); font-size:13px;}
.ck-total b{color:#ff4d2e; font-size:20px; font-family:"SFMono-Regular",Consolas,monospace;}

/* 我的 */
.mine-top{background:linear-gradient(135deg,#2b6cff,#1f4fd8); color:#fff; padding:20px 16px 46px; border-radius:0 0 20px 20px;}
.mine-user{display:flex; align-items:center; gap:13px;}
.mine-avatar{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.22); display:grid; place-items:center; font-size:24px;}
.mine-name{font-size:17px; font-weight:600;}
.mine-phone{font-size:12.5px; opacity:.85; margin-top:3px;}
.mine-stat{display:flex; background:#fff; border-radius:14px; margin:-34px 12px 12px; padding:14px 0; box-shadow:0 4px 14px rgba(20,30,60,.08);}
.mine-stat a{flex:1; text-align:center; font-size:11.5px; color:var(--text-3);}
.mine-stat a b{display:block; font-size:18px; color:var(--text); margin-bottom:3px;}
.mine-list{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(20,30,60,.05); margin-bottom:12px;}
.mine-row{display:flex; align-items:center; gap:11px; padding:14px; border-bottom:1px solid var(--border-2); font-size:14px;}
.mine-row:last-child{border-bottom:none;}
.mine-row .mr-ico{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:0 0 auto;}
.mine-row .arrow{margin-left:auto; color:var(--text-4); display:flex;}

/* 底部弹层 */
.sheet-mask{position:fixed; inset:0; background:rgba(15,20,30,.45); z-index:100;}
.sheet{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--shop-max);
  background:#fff; border-radius:18px 18px 0 0; z-index:101; max-height:82vh; overflow-y:auto; padding-bottom:16px;
  animation:sheetUp .25s ease;
}
@keyframes sheetUp{from{transform:translate(-50%,30px); opacity:.5;} to{transform:translate(-50%,0); opacity:1;}}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border-bottom:1px solid var(--border-2); position:sticky; top:0; background:#fff; z-index:2;}
.sheet-head h3{margin:0; font-size:16px;}
.sheet-body{padding:14px 16px;}

/* 登录 */
.shop-login{position:fixed; inset:0; z-index:300; background:linear-gradient(160deg,#2b6cff,#16348f); display:flex; align-items:center; justify-content:center; padding:22px;}
.shop-login.hide{display:none;}
.sl-card{width:100%; max-width:360px; background:#fff; border-radius:18px; padding:28px 22px 22px; text-align:center; box-shadow:0 16px 44px rgba(0,0,0,.22);}
.sl-logo{width:56px; height:56px; border-radius:16px; margin:0 auto 12px; display:grid; place-items:center; font-size:28px; font-weight:800; color:#fff; background:linear-gradient(135deg,#ff9a3d,#ff6a00);}
.sl-card h2{margin:0 0 4px; font-size:21px;}
.sl-card > p{margin:0 0 20px; color:var(--text-3); font-size:12.5px;}
.sl-field{display:block; text-align:left; margin-bottom:13px;}
.sl-field > span{display:block; font-size:12.5px; color:var(--text-2); margin-bottom:6px;}
.sl-field input{width:100%; height:42px; border:1px solid #e3e6eb; border-radius:10px; padding:0 12px; font-size:14px; background:#fbfcfd;}
.sl-field input:focus{border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px var(--blue-w);}
.sl-code{display:flex; gap:8px;}
.sl-code input{flex:1;}
.sl-code button{flex:0 0 auto; padding:0 12px; border-radius:10px; background:var(--blue-w); color:var(--blue); font-size:12.5px; font-weight:600;}
.sl-code button:disabled{opacity:.5; color:var(--text-3); background:var(--bg);}
.sl-btn{width:100%; height:46px; border-radius:23px; background:var(--blue); color:#fff; font-size:16px; font-weight:600; margin-top:6px; letter-spacing:2px;}
.sl-btn:active{background:var(--blue-d);}
.sl-tip{margin-top:12px; font-size:11.5px; color:var(--text-3);}
.sl-admin{display:inline-block; margin-top:16px; font-size:12px; color:var(--text-3);}

/* 空状态 */
.shop-empty{text-align:center; padding:70px 20px; color:var(--text-3);}
.shop-empty svg{width:56px; height:56px; opacity:.3; margin-bottom:12px;}

@media (min-width:520px){
  .shop-body{background:#e4e7ec;}
  .shop-main{padding-left:14px; padding-right:14px;}
}

/* ===========================================================
   支付（收银台 / 支付结果）
   =========================================================== */
.pay-amount{background:linear-gradient(135deg,#2b6cff,#1f4fd8); color:#fff; border-radius:16px; padding:22px 18px; text-align:center; margin-bottom:14px;}
.pa-label{font-size:12.5px; opacity:.85;}
.pa-num{font-size:38px; font-weight:700; margin:8px 0 4px; font-family:"SFMono-Regular",Consolas,monospace;}
.pa-num span{font-size:22px; margin-right:2px;}
.pa-sub{font-size:12.5px; opacity:.85;}
.pa-count{margin-top:12px; font-size:12px; background:rgba(255,255,255,.18); display:inline-block; padding:5px 12px; border-radius:16px;}
.pa-count b{font-family:"SFMono-Regular",Consolas,monospace; font-size:13px;}
.pay-block{background:#fff; border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.pay-block-title{font-size:13.5px; font-weight:600; margin-bottom:10px;}
.pay-method{display:flex; align-items:center; gap:11px; padding:13px 2px; border-bottom:1px solid var(--border-2); cursor:pointer;}
.pay-method:last-child{border-bottom:none;}
.pm-ico{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:20px; flex:0 0 auto;}
.pm-body{flex:1; display:flex; flex-direction:column;}
.pm-body b{font-size:14px;}
.pm-body i{font-style:normal; font-size:11.5px; color:var(--text-3); margin-top:2px;}
.pm-radio{width:19px; height:19px; border-radius:50%; border:2px solid #d6dae1; flex:0 0 auto; position:relative;}
.pay-method.on .pm-radio{border-color:var(--blue);}
.pay-method.on .pm-radio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue);}
.pay-tip{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--text-3); padding:6px 4px 20px;}
.pay-mask{position:fixed; inset:0; background:rgba(15,20,30,.55); z-index:400; display:flex; align-items:center; justify-content:center;}
.pay-loading{background:#fff; border-radius:16px; padding:28px 40px; text-align:center;}
.spinner{width:34px; height:34px; margin:0 auto; border:3px solid #e9ebf0; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.pay-success{text-align:center; padding:36px 18px;}
.ps-ico{width:76px; height:76px; border-radius:50%; background:#e7f8f0; color:#17b26a; display:grid; place-items:center; margin:0 auto 16px;}
.ps-title{font-size:20px; font-weight:600;}
.ps-amount{font-size:30px; font-weight:700; color:#17b26a; margin:10px 0 4px; font-family:"SFMono-Regular",Consolas,monospace;}
.ps-sub{font-size:12.5px; color:var(--text-3);}
.ps-card{background:#fff; border-radius:14px; padding:14px; margin:18px 0; text-align:left; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.ps-actions{display:flex; gap:10px;}

/* ===========================================================
   电子合同
   =========================================================== */
.contract-scroll{max-height:none;}
.contract-paper{background:#fff; border-radius:14px; padding:18px 16px; box-shadow:0 2px 10px rgba(20,30,60,.05); border:1px solid #eef0f3;}
.contract-title{text-align:center; font-size:17px; font-weight:700; letter-spacing:2px; margin-bottom:8px;}
.contract-no{text-align:center; font-size:11px; color:var(--text-3); margin-bottom:16px; padding-bottom:12px; border-bottom:1px dashed var(--border);}
.contract-party p{margin:0 0 6px; font-size:12.5px; line-height:1.9;}
.contract-party{padding-bottom:10px; border-bottom:1px dashed var(--border); margin-bottom:12px;}
.contract-clause p{margin:0 0 11px; font-size:12.5px; line-height:2; color:#333; text-align:justify;}
.contract-clause b{color:#111;}
.contract-sign-area{display:flex; gap:14px; margin-top:18px; padding-top:14px; border-top:1px dashed var(--border);}
.cs-col{flex:1; text-align:center;}
.cs-label{font-size:12px; color:var(--text-3); margin-bottom:8px;}
.cs-stamp{font-size:12.5px; font-weight:600; color:#2b6cff; padding:10px 6px; border:1px dashed #b9cdfa; border-radius:8px; background:#f6f9ff;}
.cs-sign{max-width:100%; height:64px; object-fit:contain; border-bottom:1px solid #333;}
.cs-unsigned{height:64px; display:grid; place-items:center; color:#c0c4cc; font-size:12px; border-bottom:1px dashed #d6dae1;}
.cs-date{font-size:11.5px; color:var(--text-3); margin-top:8px;}
.contract-seal{text-align:center; margin-top:16px; padding-top:12px; border-top:1px solid var(--border-2); color:#17b26a; font-size:12px;}
.sign-block{background:#fff; border-radius:14px; padding:14px; margin-top:14px; box-shadow:0 2px 10px rgba(20,30,60,.05);}
.sign-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:14px;}
.sign-canvas{width:100%; height:170px; border:1.5px dashed #c8ccd4; border-radius:12px; background:#fbfcfd; touch-action:none; display:block;}
.sign-hint{font-size:11.5px; color:var(--text-3); margin-top:7px; text-align:center;}
.sign-agree{display:flex; gap:9px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:var(--text-2); line-height:1.7;}
.sign-agree input{width:16px; height:16px; accent-color:var(--blue); margin-top:2px; flex:0 0 auto;}