/* ============================================================
   儋州商城（mall.html）专属样式 — 与门户设计系统同源
   前缀 m- 避免与全站组件冲突
   ============================================================ */

/* --- 演示提示 --- */
.m-note{
  display:flex;gap:.8em;align-items:flex-start;
  background:#fff7ec;border:1px solid #ffdfae;border-radius:14px;
  padding:.9em 1.2em;margin-bottom:1.1rem;
  color:#8a5a14;font-size:.86rem;line-height:1.7;
}
.m-note b{color:#b26a00}

/* --- 商城操作台 --- */
.m-panel{
  background:#fff;border:1px solid var(--line-soft);border-radius:20px;
  box-shadow:0 10px 34px rgba(10,49,144,.06);
  padding:1.2rem 1.4rem 1.8rem;
}
.m-panel.sticky-pad{padding-top:1.1rem}
.m-toolbar{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  position:sticky;top:74px;z-index:40;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line-soft);border-radius:16px;
  padding:.55rem .7rem;margin-bottom:1.1rem;
  box-shadow:0 8px 24px rgba(10,49,144,.07);
}
.m-tab{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--sans);font-weight:600;font-size:.94rem;
  color:var(--ink);background:#f2f5fb;border:1px solid transparent;
  padding:.55em 1.05em;border-radius:999px;cursor:pointer;transition:.2s;
}
.m-tab:hover{background:#e8eefb}
.m-tab.on{background:var(--navy);color:#fff}
.m-tab .bdg{
  background:#fff;color:var(--navy);border-radius:999px;
  font-size:.7rem;font-weight:800;padding:.08em .55em;min-width:1.4em;text-align:center;
}
.m-tab.on .bdg{background:var(--accent);color:#fff}
.m-tab .bdg.zero{opacity:.4}
.m-toolbar .m-spacer{flex:1}
.m-tool-help{font-size:.76rem;color:var(--faint)}

/* --- 品类 chips --- */
.m-cats{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.15rem}
.m-cat{
  font-size:.86rem;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid #dbe3f2;border-radius:999px;
  padding:.45em 1.15em;cursor:pointer;transition:.18s;
}
.m-cat:hover{border-color:var(--navy);color:var(--navy)}
.m-cat.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* --- 商品卡 --- */
.m-cards .card{position:relative;overflow:hidden;cursor:default}
.m-cards .card.flash{animation:mflash 1.6s ease}
@keyframes mflash{0%,60%{box-shadow:0 0 0 3px var(--accent),var(--shadow)}100%{box-shadow:var(--shadow)}}
.m-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e8edf4}
.m-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.card:hover .m-media img{transform:scale(1.06)}
.m-letter{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0a3190,#1f4fd0);
  color:rgba(255,255,255,.16);font-family:"Geist","Lexend Deca",sans-serif;
  font-weight:800;font-size:4.4rem;user-select:none;
}
.m-catname{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;
  color:var(--navy);background:#eaf0fc;border-radius:6px;padding:.3em .8em;
  text-transform:uppercase;align-self:flex-start;
}
.m-price{font-family:var(--sans);color:var(--navy-deep,#0a4fbf);font-size:1.35rem;font-weight:800}
.m-price small{font-size:.66rem;color:var(--faint);font-weight:600;margin-left:.2em}
.m-unit{font-size:.8rem;color:var(--faint)}
.m-btns{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.m-btns .btn{padding:.55em 1.05em;font-size:.85rem}
.m-ghost-add{
  background:#fff;color:var(--navy);border:1px solid #bcd0f2;
}
.m-ghost-add:hover{background:#eaf0fc;border-color:var(--navy)}

/* --- 购物车 --- */
.m-cart-empty,.m-orders-empty{
  text-align:center;padding:3.6rem 1rem;color:var(--faint);
}
.m-cart-empty b,.m-orders-empty b{display:block;font-size:1.15rem;color:var(--muted);margin-bottom:.5em}
.m-cart-list{display:grid;gap:.8rem;margin-bottom:1rem}
.m-citem{
  display:grid;grid-template-columns:92px 1fr auto;gap:1rem;align-items:center;
  background:#fafcff;border:1px solid #e6ecf7;border-radius:14px;padding:.8rem 1rem;
}
.m-citem .m-ithumb{width:92px;height:64px;border-radius:10px;object-fit:cover;background:#e8edf4}
.m-citem .m-ithumb.letter{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,#0a3190,#1f4fd0)}
.m-itin{min-width:0}
.m-itin h4{font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.4}
.m-itin .m-sub{font-size:.78rem;color:var(--faint);margin-top:.25em}
.m-qty{display:inline-flex;align-items:center;border:1px solid #dbe3f2;border-radius:999px;overflow:hidden;background:#fff}
.m-qty button{width:30px;height:30px;border:0;background:transparent;font-size:1.05rem;cursor:pointer;color:var(--navy);font-weight:700}
.m-qty button:hover{background:#eaf0fc}
.m-qty em{min-width:34px;text-align:center;font-style:normal;font-size:.9rem;font-weight:700;color:var(--ink)}
.m-line-total{font-family:var(--sans);color:var(--navy-deep,#0a4fbf);font-weight:800;font-size:1.02rem;white-space:nowrap}
.m-cart-foot{
  display:flex;align-items:center;gap:1.2rem;justify-content:flex-end;flex-wrap:wrap;
  border-top:1px dashed #dbe3f2;padding-top:1.05rem;
}
.m-cart-foot .m-sum{font-size:.92rem;color:var(--muted)}
.m-cart-foot .m-sum b{font-family:var(--sans);font-size:1.7rem;color:var(--navy-deep,#0a4fbf)}
.m-cart-foot .m-sum small{color:var(--faint);font-size:.72rem}
.m-del-line{color:var(--faint);font-size:.78rem;background:none;border:0;cursor:pointer;padding:.2em .3em}
.m-del-line:hover{color:#d33}

/* --- 我的订单 --- */
.m-order{
  background:#fafcff;border:1px solid #e6ecf7;border-radius:16px;
  padding:1.1rem 1.2rem;margin-bottom:.9rem;
}
.m-ohead{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;border-bottom:1px dashed #e6ecf7;padding-bottom:.7rem;margin-bottom:.7rem}
.m-ohead .m-ono{font-family:"Geist","Lexend Deca",var(--sans);font-weight:700;font-size:.8rem;color:var(--ink-2);letter-spacing:.04em}
.m-ohead time{font-size:.76rem;color:var(--faint)}
.m-st{font-size:.72rem;font-weight:800;padding:.28em .85em;border-radius:999px;letter-spacing:.04em}
.m-st.pending{background:#fff3dd;color:#b26a00}
.m-st.paid{background:#e5f6ec;color:#0a7a3d}
.m-oitems{display:grid;gap:.45rem}
.m-oitem{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted)}
.m-oitem .code{font-family:"Geist","Lexend Deca",monospace;font-weight:700;color:#0a7a3d;background:#eef7f1;border-radius:6px;padding:.15em .6em;font-size:.82rem;letter-spacing:.06em}
.m-ototal{text-align:right;font-size:.9rem;color:var(--muted);margin-top:.55rem}
.m-ototal b{font-family:var(--sans);color:var(--navy-deep,#0a4fbf);font-size:1.25rem}
.m-oacts{display:flex;gap:.6rem;justify-content:flex-end;align-items:center;margin-top:.7rem;flex-wrap:wrap}
.m-oacts .hint{font-size:.75rem;color:var(--faint)}

/* --- 结算浮层 --- */
.m-mask{
  position:fixed;inset:0;z-index:120;background:rgba(6,18,48,.5);
  display:flex;align-items:flex-end;justify-content:center;
  padding:1.2rem;opacity:0;pointer-events:none;transition:.25s;
}
.m-mask.show{opacity:1;pointer-events:auto}
.m-dialog{
  width:min(680px,100%);max-height:88vh;overflow:auto;
  background:#fff;border-radius:22px;padding:1.6rem 1.8rem;
  transform:translateY(26px);transition:.28s cubic-bezier(.2,.6,.2,1);
  box-shadow:0 30px 80px rgba(4,12,36,.35);
}
.m-mask.show .m-dialog{transform:none}
.m-dialog .m-x{position:absolute;right:1rem;top:.9rem;border:0;background:#f0f3fa;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;color:var(--muted)}
.m-dialog .m-x:hover{background:#e3eafb;color:var(--navy)}
.m-field{margin-bottom:1rem}
.m-field label{display:block;font-size:.84rem;font-weight:700;color:var(--ink);margin-bottom:.4em}
.m-field input,.m-field textarea,.m-field select{
  width:100%;padding:.72rem .95rem;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:.95rem;background:#fff;
}
.m-field input:focus,.m-field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,49,144,.12)}
.m-dialog .m-total-line{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px dashed #dbe3f2;margin:.4rem 0 1rem;padding-top:1rem;
}
.m-dialog .m-total-line b{font-family:var(--sans);font-size:1.6rem;color:var(--navy-deep,#0a4fbf)}

/* --- toast --- */
.m-toast{
  position:fixed;left:50%;bottom:110px;z-index:200;transform:translate(-50%,14px);
  background:rgba(10,26,66,.94);color:#fff;font-size:.9rem;padding:.7em 1.5em;border-radius:999px;
  opacity:0;pointer-events:none;transition:.25s;max-width:88vw;text-align:center;box-shadow:0 12px 34px rgba(4,12,36,.3);
}
.m-toast.show{opacity:1;transform:translate(-50%,0)}
body.m-modal-open{overflow:hidden}

/* --- 承接提示条 --- */
.m-incoming{
  display:none;align-items:center;gap:1rem;flex-wrap:wrap;
  background:linear-gradient(120deg,#0a3190,#1f4fd0);border-radius:16px;color:#fff;
  padding:1.1rem 1.4rem;margin-bottom:1.1rem;box-shadow:0 12px 30px rgba(10,49,144,.2);
}
.m-incoming.show{display:flex}
.m-incoming .m-ic{flex:1;min-width:230px}
.m-incoming .m-ic b{font-size:1.05rem;display:block;margin-bottom:.2em}
.m-incoming .m-ic span{color:rgba(255,255,255,.8);font-size:.85rem;line-height:1.7}
.m-incoming .m-ic b em{font-style:normal;color:#ffc876}
.m-incoming .btn{margin-left:.4rem}

/* --- 定制横幅（分类内） --- */
.m-custom{
  margin-top:1.2rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#eef4ff;border:1px solid #d9e3f4;border-radius:16px;padding:1.1rem 1.4rem;
}
.m-custom b{color:var(--navy);font-size:1rem}
.m-custom p{color:var(--muted);font-size:.85rem;margin-top:.25em}
.m-custom a{white-space:nowrap}

/* --- 响应式 --- */
@media(max-width:760px){
  .m-toolbar{top:60px}
  .m-panel{padding:1rem .9rem 1.4rem}
  .m-citem{grid-template-columns:74px 1fr;row-gap:.6rem}
  .m-citem .m-ithumb{width:74px;height:56px}
  .m-line-total,.m-del-line{grid-column:2}
  .m-dialog{padding:1.3rem 1.15rem}
  .m-tab{font-size:.86rem;padding:.5em .85em}
}