/* 一鹿淘 Web 商城 · 与 style.css 共用设计变量（--deer/--cream/--ink…） */

/* 站头样式统一由 style.css 负责，这里不再重复定义。
   原来 .hdright/.hdsearch/.hdsearch input/.hdsearch button/.hduser 在两个文件里
   各有一份且取值不同，而 shop.css 在这 13 个页面里都排在 style.css 之后 ——
   后者胜出，导致「账户系页面」和「渠道系页面」的站头长得不一样。
   其中 .hdsearch button 把 font-size 从 0 改回 14px，使 emoji 🔍 与
   style.css 用 ::before 画的遮罩图标同时渲染，再叠上不对称的
   padding:8px 14px 8px 6px，就是右上角搜索图标看起来歪掉的原因。
   站头搜索框现在是全站每页都有的组件（logo 右侧，含渠道选择器），
   它的全部样式只在 style.css 的「站头搜索框」一节维护，这里不再复制。 */

/* 布局 */
.page { max-width: var(--wrap); margin: 0 auto; padding: 34px 24px 70px; }
.page h1 { font-size: 25px; margin-bottom: 6px; }
.page .lead { color: var(--sub); font-size: 14.5px; margin-bottom: 24px; }
.crumb { font-size: 13px; color: var(--sub); margin-bottom: 16px; }
.crumb a { color: var(--sub); }

/* 通用卡片/按钮 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; border: 0; border-radius: 30px; padding: 14px 30px; background: var(--deer); color: #fff; transition: opacity .15s; }
.btn:hover { opacity: .9; text-decoration: none; }
.btn:disabled { background: #EBC7D4; cursor: not-allowed; opacity: 1; }
.btn.ghost { background: #fff; color: var(--deer); border: 1px solid var(--deer2); }
.btn.block { width: 100%; }
.btn.sm { padding: 9px 20px; font-size: 13.5px; }

/* 商品网格 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 20px; }
.pcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: block; color: inherit; transition: transform .16s; }
.pcard:hover { transform: translateY(-3px); text-decoration: none; }
.pcard .thumb { aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: contain; }
.pcard .info { padding: 13px 15px 16px; }
.pcard .nm { font-size: 13.5px; line-height: 1.5; height: 40px; overflow: hidden; color: var(--ink); }
.pcard .hh { font-size: 11.5px; color: var(--sub); margin-top: 5px; letter-spacing: .3px; }
.pcard .pr { margin-top: 9px; font-size: 18px; font-weight: 700; color: var(--deer); }
.pcard .pr small { font-size: 11.5px; color: var(--sub); font-weight: 400; display: block; margin-top: 1px; }
.pcard .oos { display: inline-block; margin-top: 6px; font-size: 11px; color: #B04A6E; background: var(--cream); border-radius: 10px; padding: 2px 9px; }

/* 商品详情 */
.pdetail { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 40px; align-items: start; }
.pdetail .gal { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.pdetail .gal img { width: 100%; object-fit: contain; }
.pdetail h1 { font-size: 21px; line-height: 1.55; }
.pdetail .sub { color: var(--sub); font-size: 13px; margin: 8px 0 18px; }
/* 规则①：金额墨色 + 等宽数字。彩色金额看着像促销，我们要的是像账单 */
.price-lg { font-size: 32px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-lg small { display: block; font-size: 13px; color: var(--sub); font-weight: 400; margin-top: 3px; }
.sizes { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 4px; }
.size { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 15px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); text-align: center; line-height: 1.4; }
.size b { display: block; font-size: 12px; color: var(--deer); font-weight: 700; }
.size:hover:not(:disabled) { border-color: var(--deer2); }
.size.on { border-color: var(--deer); background: var(--cream); }
.size:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.seclabel { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 20px; }
.opts { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.opt { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.opt input { width: 17px; height: 17px; accent-color: var(--deer); }

/* 费用明细（后端 fees.lines 渲染，前端不算钱） */
.fees { margin-top: 8px; }
.fees .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.fees .row:last-child { border-bottom: 0; }
.fees .row .lb { color: var(--sub); }
.fees .row .lb i { display: block; font-style: normal; font-size: 11.5px; color: #C4AEB8; }
.fees .row .vl { font-weight: 700; white-space: nowrap; }
.fees .row.total { border-top: 2px solid var(--line); border-bottom: 0; margin-top: 6px; padding-top: 14px; font-size: 17px; }
.fees .row.total .vl { color: var(--deer); font-size: 20px; }
.fees .row.discount .vl { color: #4E8C5A; }
.phase-tag { display: inline-block; font-size: 11px; background: var(--cream); color: #C2527A; border-radius: 9px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.ratenote { font-size: 11.5px; color: var(--sub); margin-top: 12px; line-height: 1.6; }

/* 表单 */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; outline: 0; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--deer); }
.field .hint { font-size: 11.5px; color: var(--sub); margin-top: 5px; }
.inline { display: flex; gap: 10px; }
.inline .btn { white-space: nowrap; }

/* 结算两栏 */
.checkout { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: 28px; align-items: start; }
.sticky { position: sticky; top: 90px; }
.itemline { display: flex; gap: 14px; align-items: center; }
.itemprice { flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap; cursor: default; }
.itemline img { width: 74px; height: 74px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 11px; flex: none; }
.itemline .nm { font-size: 14px; line-height: 1.5; }
.itemline .mt { font-size: 12px; color: var(--sub); margin-top: 3px; }

/* 协议勾选 */
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--sub); line-height: 1.7; margin: 16px 0; }
.agree input { width: 17px; height: 17px; accent-color: var(--deer); flex: none; margin-top: 3px; }

/* 订单 */
.ocard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.ohead { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; color: var(--sub); border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 13px; }
.ostatus { font-weight: 700; color: var(--deer); font-size: 13px; }
.ofoot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; }
.tl { list-style: none; margin-top: 6px; }
.tl li { position: relative; padding: 0 0 18px 22px; border-left: 2px solid var(--line); font-size: 13.5px; }
.tl li:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.tl li.done::before { background: var(--deer); }
.tl li .at { display: block; font-size: 11.5px; color: var(--sub); }

/* 状态/提示块 */
.empty { text-align: center; padding: 70px 20px; color: var(--sub); }
.empty .ico { font-size: 46px; margin-bottom: 12px; }
.notice { background: #F7F5F6; border: 1px solid var(--line); border-radius: 13px; padding: 14px 17px; font-size: 13.5px; color: #B04A6E; line-height: 1.7; }
.notice.warn { background: #FDEEEA; border-color: #F3CDC3; color: #9A4A38; }
.skel { background: linear-gradient(90deg, #FBE4EC 25%, #FFF3F7 50%, #FBE4EC 75%); background-size: 400% 100%; animation: sk 1.3s infinite; border-radius: 10px; }
@keyframes sk { 0% { background-position: 100% 0 } 100% { background-position: -100% 0 } }


@media (max-width: 860px) {
  .pdetail, .checkout { grid-template-columns: 1fr; gap: 26px; }
  .sticky { position: static; }
  /* 站头（.hdsearch / 已删除的 .navlinks）的响应式规则一律在 style.css，
     不在这里再写一份 —— 见文件开头那段两文件打架的说明。 */
}