/* ============================================================
   鲜果集 · 水果商城 样式表
   ============================================================ */

:root{
  --green:#2f9e44;
  --green-dark:#237b34;
  --green-light:#ebfbee;
  --orange:#f76707;
  --orange-light:#fff4e6;
  --red:#e03131;
  --text:#1f2430;
  --text-2:#54606f;
  --text-3:#8b96a5;
  --line:#e8ecf1;
  --bg:#f6f8fa;
  --card:#ffffff;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --wrap:1200px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:14px;}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px;}
.muted{color:var(--text-3);}
.tiny{font-size:12px;}

/* ---------------- 顶部 ---------------- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--line);}
.topbar{background:#f1f4f7;color:var(--text-2);font-size:12.5px;border-bottom:1px solid var(--line);}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px;}
.topbar-right a{margin-left:16px;color:var(--text-2);}
.topbar-right a:hover{color:var(--green);}
.topbar-right #topbarUser{margin-right:4px;}
.topbar-hotline{color:var(--green-dark);font-weight:700;letter-spacing:.3px;}

.header-inner{
  display:flex;align-items:center;gap:22px;height:72px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark{font-size:30px;line-height:1;}
.logo-text strong{display:block;font-size:20px;letter-spacing:1px;color:var(--green-dark);line-height:1.2;}
.logo-text small{display:block;font-size:9.5px;letter-spacing:1.6px;color:var(--text-3);}

.main-nav{display:flex;gap:20px;font-size:14.5px;flex-shrink:0;}
.main-nav a{color:var(--text-2);padding:6px 0;position:relative;}
.main-nav a:hover{color:var(--green);}
.main-nav a.active{color:var(--green);font-weight:600;}
.main-nav a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);border-radius:2px;
}

.search-box{
  flex:1;min-width:150px;display:flex;border:2px solid var(--green);border-radius:20px;overflow:hidden;background:#fff;
}
.search-box input{flex:1;border:0;outline:0;padding:8px 16px;background:transparent;}
.search-box button{
  border:0;background:var(--green);color:#fff;padding:0 18px;font-size:15px;
}
.search-box button:hover{background:var(--green-dark);}

.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.cart-btn{
  display:inline-flex;align-items:center;gap:6px;position:relative;
  border:1px solid var(--line);border-radius:20px;padding:7px 16px;color:var(--text-2);
}
.cart-btn:hover{border-color:var(--green);color:var(--green);}
.badge{
  position:absolute;top:-7px;right:-6px;min-width:19px;height:19px;border-radius:10px;
  background:var(--red);color:#fff;font-size:11px;font-style:normal;
  display:flex;align-items:center;justify-content:center;padding:0 5px;
  transform:scale(0);transition:transform .18s;
}
.badge.show{transform:scale(1);}
.user-area{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.user-menu{position:relative;}
.user-menu > button{
  background:none;border:0;padding:6px 4px;color:var(--text-2);font-size:14px;
  display:flex;align-items:center;gap:6px;
}
.user-menu > button:hover{color:var(--green);}
.user-dropdown{
  display:none;position:absolute;right:0;top:34px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:150px;overflow:hidden;padding:6px 0;
}
.user-menu.open .user-dropdown{display:block;}
.user-dropdown a{display:block;padding:9px 16px;color:var(--text-2);font-size:13.5px;}
.user-dropdown a:hover{background:var(--green-light);color:var(--green-dark);}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:22px;padding:9px 20px;
  font-size:14px;background:#fff;color:var(--text-2);border-color:var(--line);
  transition:.16s;white-space:nowrap;
}
.btn:hover{border-color:var(--green);color:var(--green);}
.btn-primary{background:linear-gradient(135deg,#40c057,#2f9e44);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 6px 16px rgba(47,158,68,.25);}
.btn-primary:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px);}
.btn-orange{background:linear-gradient(135deg,#ff922b,#f76707);color:#fff;border-color:transparent;font-weight:600;box-shadow:0 6px 16px rgba(247,103,7,.25);}
.btn-orange:hover{color:#fff;filter:brightness(1.06);transform:translateY(-1px);}
.btn-danger{color:var(--red);border-color:#ffc9c9;}
.btn-danger:hover{background:#fff5f5;border-color:var(--red);color:var(--red);}
.btn-block{width:100%;}
.btn-sm{padding:5px 14px;font-size:13px;}
.btn-lg{padding:13px 34px;font-size:16px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ---------------- 首页 Hero ---------------- */
.hero{
  background:linear-gradient(120deg,#2f9e44 0%,#51cf66 45%,#ffd43b 100%);
  border-radius:20px;margin:22px 0;padding:52px 48px;color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:"🍊🍇🍎🥝🍓🥭";position:absolute;right:-10px;bottom:-26px;
  font-size:104px;letter-spacing:8px;opacity:.22;white-space:nowrap;
}
.hero h1{margin:0 0 12px;font-size:38px;line-height:1.25;letter-spacing:1px;text-shadow:0 2px 12px rgba(0,0,0,.12);}
.hero p{margin:0 0 26px;font-size:15.5px;opacity:.95;max-width:560px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}
.hero .btn-hero{
  background:#fff;color:var(--green-dark);font-weight:700;border-radius:24px;padding:12px 30px;border:0;font-size:15px;
}
.hero .btn-hero:hover{color:var(--green-dark);transform:translateY(-1px);}
.hero .btn-ghost{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.7);color:#fff;}
.hero .btn-ghost:hover{background:rgba(255,255,255,.3);color:#fff;border-color:#fff;}

/* 卖点条 */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px;}
.feature{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;
  display:flex;gap:12px;align-items:center;box-shadow:var(--shadow);
}
.feature .ico{font-size:26px;}
.feature b{display:block;font-size:14.5px;}
.feature span{font-size:12.5px;color:var(--text-3);}

/* ---------------- 板块标题 ---------------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:30px 0 16px;}
.section-head h2{margin:0;font-size:22px;letter-spacing:.5px;}
.section-head h2 em{color:var(--green);font-style:normal;}
.section-head .sub{color:var(--text-3);font-size:13px;margin-top:2px;}

/* ---------------- 分类 ---------------- */
.cats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.cat{
  border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 18px;
  color:var(--text-2);font-size:13.5px;cursor:pointer;transition:.16s;
}
.cat:hover{border-color:var(--green);color:var(--green);}
.cat.active{background:var(--green);border-color:var(--green);color:#fff;font-weight:600;}

/* ---------------- 商品网格 ---------------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px;}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;box-shadow:var(--shadow);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#d5e5d9;}
.card-thumb{
  height:168px;display:flex;align-items:center;justify-content:center;font-size:74px;
  position:relative;cursor:pointer;user-select:none;
}
.card-thumb .tag{
  position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:var(--red);
  font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:12px;letter-spacing:.5px;
}
.card-thumb .stock-out{
  position:absolute;inset:0;background:rgba(255,255,255,.66);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:var(--text-2);
}
.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;flex:1;}
.card-title{font-size:15px;font-weight:600;line-height:1.45;cursor:pointer;}
.card-title:hover{color:var(--green);}
.card-origin{color:var(--text-3);font-size:12.5px;margin:5px 0 8px;}
.card-desc{color:var(--text-3);font-size:12.5px;line-height:1.55;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-price{display:flex;align-items:baseline;gap:6px;margin:12px 0 10px;}
.card-price .num{color:var(--red);font-size:22px;font-weight:700;font-family:"DIN Alternate",Georgia,serif;}
.card-price .num::before{content:"¥";font-size:13px;margin-right:1px;}
.card-price .unit{color:var(--text-3);font-size:12.5px;}
.card-price .sales{margin-left:auto;color:var(--text-3);font-size:12px;}
.card-actions{display:flex;gap:8px;}
.card-actions .btn{flex:1;}

/* ---------------- 详情页 ---------------- */
.detail{display:grid;grid-template-columns:1fr 1.25fr;gap:34px;margin:26px 0 34px;align-items:flex-start;}
.detail-thumb{
  border-radius:var(--radius);height:360px;display:flex;align-items:center;justify-content:center;
  font-size:170px;box-shadow:var(--shadow);
}
.detail-info h1{margin:0 0 8px;font-size:26px;}
.detail-price{background:linear-gradient(90deg,#fff4e6,#fff9db);border-radius:var(--radius-sm);padding:16px 20px;margin:16px 0;}
.detail-price .num{color:var(--red);font-size:34px;font-weight:700;font-family:"DIN Alternate",Georgia,serif;}
.detail-price .num::before{content:"¥";font-size:17px;margin-right:2px;}
.detail-price .unit{color:var(--text-2);margin-left:6px;}
.meta-list{list-style:none;padding:0;margin:0 0 20px;}
.meta-list li{display:flex;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px;}
.meta-list li b{width:82px;color:var(--text-3);font-weight:400;flex-shrink:0;}
.qty-row{display:flex;align-items:center;gap:14px;margin:20px 0;}
.qty{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.qty button{width:36px;height:36px;border:0;background:#f8f9fa;font-size:17px;color:var(--text-2);}
.qty button:hover{background:var(--green-light);color:var(--green);}
.qty input{width:60px;height:36px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;outline:0;font-weight:600;}
.buy-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------------- 购物车 ---------------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.panel-head{padding:16px 22px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.panel-body{padding:8px 22px 22px;}
.cart-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.cart-item:last-of-type{border-bottom:0;}
.ci-thumb{width:76px;height:76px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:40px;flex-shrink:0;}
.ci-info{flex:1;min-width:120px;}
.ci-info b{font-size:14.5px;font-weight:600;}
.ci-info small{display:block;color:var(--text-3);font-size:12.5px;margin-top:3px;}
.ci-price{color:var(--red);font-weight:700;width:92px;text-align:right;}
.ci-sub{color:var(--red);font-weight:700;width:96px;text-align:right;}
.ci-del{background:none;border:0;color:var(--text-3);font-size:13px;}
.ci-del:hover{color:var(--red);}

.cart-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:22px;
  padding:18px 22px;border-top:1px solid var(--line);background:#fcfdfe;border-radius:0 0 var(--radius) var(--radius);
}
.cart-bar .total{font-size:15px;}
.cart-bar .total b{color:var(--red);font-size:26px;font-family:"DIN Alternate",Georgia,serif;}

.empty{text-align:center;padding:70px 20px;color:var(--text-3);}
.empty .ico{font-size:64px;margin-bottom:14px;}
.empty p{margin:0 0 20px;}

/* ---------------- 表单 ---------------- */
.form-page{display:flex;justify-content:center;padding:38px 20px 60px;}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);
  width:100%;max-width:430px;padding:36px 36px 30px;
}
.form-card h2{margin:0 0 6px;font-size:24px;}
.form-card .form-sub{color:var(--text-3);font-size:13px;margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:7px;font-weight:500;}
.field input,.field textarea,.field select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;
  outline:0;transition:.16s;background:#fcfdfe;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(47,158,68,.1);
}
.field textarea{resize:vertical;min-height:76px;}
.field .err{color:var(--red);font-size:12.5px;margin-top:5px;display:none;}
.field.has-err input,.field.has-err textarea{border-color:var(--red);}
.field.has-err .err{display:block;}
.form-foot{margin-top:22px;text-align:center;color:var(--text-3);font-size:13.5px;}
.form-foot a{color:var(--green);font-weight:600;}
.form-tip{background:var(--green-light);border-radius:var(--radius-sm);padding:10px 14px;font-size:12.5px;color:var(--green-dark);margin-bottom:20px;}

/* ---------------- 结算 ---------------- */
.checkout{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:26px 0 44px;align-items:flex-start;}
.order-line{display:flex;justify-content:space-between;padding:8px 0;font-size:13.5px;color:var(--text-2);}
.order-line.total{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;font-size:16px;color:var(--text);font-weight:600;}
.order-line.total b{color:var(--red);font-size:24px;font-family:"DIN Alternate",Georgia,serif;}
.summary-item{display:flex;gap:10px;align-items:center;padding:7px 0;font-size:13.5px;}
.summary-item .e{font-size:22px;}
.summary-item .q{color:var(--text-3);margin-left:auto;}

/* ---------------- 支付 ---------------- */
.pay-wrap{max-width:640px;margin:34px auto 60px;}
.pay-amount{text-align:center;padding:34px 20px 26px;}
.pay-amount p{margin:0;color:var(--text-3);font-size:13.5px;}
.pay-amount .amt{color:var(--red);font-size:46px;font-weight:700;font-family:"DIN Alternate",Georgia,serif;}
.pay-amount .amt::before{content:"¥";font-size:22px;margin-right:3px;}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 26px 8px;}
.pay-method{
  border:2px solid var(--line);border-radius:var(--radius-sm);padding:16px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:.16s;background:#fcfdfe;
}
.pay-method:hover{border-color:#b2f2bb;}
.pay-method.active{border-color:var(--green);background:var(--green-light);}
.pay-method .e{font-size:26px;}
.pay-method b{display:block;font-size:14.5px;}
.pay-method small{color:var(--text-3);font-size:12px;}
.pay-method input{margin-left:auto;accent-color:var(--green);}
.pay-foot{padding:22px 26px 26px;}
.pay-note{background:#fff9db;border-radius:var(--radius-sm);padding:11px 15px;font-size:12.5px;color:#846005;margin:18px 26px 0;}

.pay-success{text-align:center;padding:56px 24px;}
.pay-success .tick{
  width:84px;height:84px;border-radius:50%;background:var(--green-light);color:var(--green);
  font-size:46px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  animation:pop .45s cubic-bezier(.2,1.3,.5,1);
}
@keyframes pop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
.pay-success h2{margin:0 0 8px;font-size:24px;}
.pay-success p{color:var(--text-3);margin:0 0 8px;}

/* ---------------- 订单 ---------------- */
.tabs{display:flex;gap:6px;margin:22px 0 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.tab{
  padding:10px 20px;border:0;background:none;color:var(--text-2);font-size:14px;position:relative;
}
.tab:hover{color:var(--green);}
.tab.active{color:var(--green);font-weight:600;}
.tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--green);border-radius:2px;}

.order-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow);}
.order-head{
  display:flex;align-items:center;gap:18px;padding:13px 20px;background:#fafbfc;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--text-3);flex-wrap:wrap;
}
.order-head .no{color:var(--text-2);}
.order-head .time{margin-left:auto;}
.status{font-weight:700;font-size:13px;padding:2px 10px;border-radius:11px;}
.status.pending{background:#fff4e6;color:var(--orange);}
.status.paid{background:#e7f5ff;color:#1971c2;}
.status.shipped{background:#f3f0ff;color:#6741d9;}
.status.done{background:var(--green-light);color:var(--green);}
.status.cancelled{background:#f1f3f5;color:var(--text-3);}
.order-body{padding:14px 20px;}
.order-prod{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14px;}
.order-prod .e{font-size:30px;width:40px;text-align:center;}
.order-prod .u{color:var(--text-3);font-size:12.5px;}
.order-prod .q{color:var(--text-3);margin-left:auto;}
.order-foot{
  display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--line);
  background:#fcfdfe;flex-wrap:wrap;
}
.order-foot .sum{margin-right:auto;font-size:13.5px;color:var(--text-2);}
.order-foot .sum b{color:var(--red);font-size:20px;font-family:"DIN Alternate",Georgia,serif;}
.order-addr{font-size:13px;color:var(--text-3);padding:0 20px 12px;}

/* ---------------- 提示 ---------------- */
.toast{
  position:fixed;left:50%;top:88px;transform:translate(-50%,-24px);z-index:999;
  background:rgba(31,36,48,.94);color:#fff;padding:12px 26px;border-radius:24px;font-size:14px;
  opacity:0;pointer-events:none;transition:.26s;box-shadow:var(--shadow-lg);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0);}
.toast.err{background:rgba(201,42,42,.95);}
.toast.ok{background:rgba(35,123,52,.95);}

/* ---------------- 加载 ---------------- */
.loading{text-align:center;padding:70px 0;color:var(--text-3);}
.spinner{
  width:32px;height:32px;border:3px solid var(--line);border-top-color:var(--green);
  border-radius:50%;margin:0 auto 14px;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.breadcrumb{color:var(--text-3);font-size:13px;margin:20px 0 0;}
.breadcrumb a:hover{color:var(--green);}

/* ---------------- 底部 ---------------- */
.site-footer{background:#1f2430;color:#aeb7c2;margin-top:60px;font-size:13.5px;}
.footer-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px;padding:44px 20px 34px;}
.foot-col h4{margin:0 0 14px;font-size:15px;color:#fff;font-weight:600;}
.foot-col a{display:block;padding:4px 0;color:#aeb7c2;font-size:13px;}
.foot-col a:hover{color:#8ce99a;}
/* 页脚段落内的链接（客服热线）保持行内显示，不继承块级规则 */
.foot-col p a{display:inline;padding:0;color:#fff;font-weight:700;font-size:13px;}
.foot-col p a:hover{color:#8ce99a;}
.foot-col .muted{color:#8792a0;margin:0 0 9px;font-size:13px;line-height:1.7;}
.footer-beian{border-top:1px solid #2c323f;padding:20px 0 26px;text-align:center;}
.beian-line{margin:0 0 8px;font-size:12.5px;color:#8792a0;line-height:1.9;}
.beian-line:last-child{margin-bottom:0;}
.beian-line a{color:#aeb7c2;}
.beian-line a:hover{color:#8ce99a;}
.beian-line .sep{margin:0 10px;color:#3a4150;}

/* ---------------- 帮助中心 / 政策内容页 ---------------- */
.page-layout{display:grid;grid-template-columns:200px 1fr;gap:22px;margin:22px 0 50px;align-items:flex-start;}
.page-side{position:sticky;top:96px;}
.page-side-body{padding:8px 0 10px;}
.page-side-link{display:block;padding:11px 20px;color:var(--text-2);font-size:13.5px;border-left:3px solid transparent;}
.page-side-link:hover{background:var(--green-light);color:var(--green-dark);}
.page-side-link.active{background:var(--green-light);color:var(--green-dark);font-weight:600;border-left-color:var(--green);}

.page-article{overflow:hidden;}
.page-head{
  display:flex;align-items:center;gap:16px;padding:26px 32px;border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,#f4fbf5,#fcfdfe);
}
.page-icon{
  width:56px;height:56px;border-radius:15px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(16,24,40,.06);
}
.page-head h1{margin:0;font-size:22px;letter-spacing:.5px;}
.page-sub{color:var(--text-3);font-size:13px;margin-top:4px;}
.page-body{padding:6px 32px 26px;}
.page-h3{
  font-size:15.5px;margin:26px 0 10px;padding-left:11px;line-height:1.4;
  border-left:3px solid var(--green);color:var(--text);
}
.page-h3:first-child{margin-top:18px;}
.page-p{margin:0 0 10px;color:var(--text-2);line-height:1.95;font-size:13.5px;text-align:justify;}
.page-list,.page-steps{margin:0 0 14px;color:var(--text-2);font-size:13.5px;line-height:2;}
.page-list{list-style:none;padding-left:2px;}
.page-list li{position:relative;padding-left:20px;}
.page-list li::before{
  content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;
  border-radius:50%;background:var(--green);
}
.page-steps{padding-left:24px;}
.page-steps li{padding-left:4px;}
.page-steps li::marker{color:var(--green);font-weight:700;}
.page-table-wrap{overflow-x:auto;margin:0 0 16px;}
.page-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.page-table th{
  background:#f6f9f7;color:var(--text);font-weight:600;text-align:left;
  padding:10px 14px;border:1px solid var(--line);white-space:nowrap;
}
.page-table td{padding:10px 14px;border:1px solid var(--line);color:var(--text-2);line-height:1.7;}
.page-table tbody tr:nth-child(even){background:#fcfdfe;}
.page-note{
  background:#fff9db;border-left:3px solid #f59f00;border-radius:var(--radius-sm);
  padding:13px 18px;color:#846005;font-size:13px;line-height:1.9;margin:6px 0 14px;
}
.page-foot{
  padding:16px 32px;border-top:1px solid var(--line);background:#fafbfc;
  color:var(--text-3);font-size:12.5px;line-height:1.9;
}
.page-foot span{display:inline-block;margin-left:14px;}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .main-nav{display:none;}
  .footer-main{grid-template-columns:1fr 1fr;gap:24px;}
}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .features{grid-template-columns:1fr 1fr;}
  .detail{grid-template-columns:1fr;}
  .checkout{grid-template-columns:1fr;}
  .page-layout{grid-template-columns:1fr;}
  .page-side{position:static;}
  .page-head,.page-body,.page-foot{padding-left:20px;padding-right:20px;}
  .page-foot span{margin-left:0;display:block;margin-top:4px;}
  .header-inner{flex-wrap:wrap;height:auto;padding:12px 20px;gap:12px;}
  .search-box{order:9;flex-basis:100%;}
  .hero{padding:34px 24px;}
  .hero h1{font-size:27px;}
  .hero::after{font-size:66px;}
  .pay-methods{grid-template-columns:1fr;}
  .cart-item{flex-wrap:wrap;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:12px;}
  .card-thumb{height:124px;font-size:54px;}
  .card-price .num{font-size:18px;}
  .card-actions{flex-direction:column;}
  .topbar-inner{font-size:11.5px;}
  .topbar-right a{margin-left:10px;}
  .footer-main{grid-template-columns:1fr;}
  .form-card{padding:26px 22px;}
  .cart-bar{flex-wrap:wrap;justify-content:space-between;}
  .ci-price{width:auto;}
  .ci-sub{width:auto;}
}