:root{
  --brand:#b1402e;        /* 暖红, 糕饼店感 */
  --brand-dark:#8c2f20;
  --accent:#e8a13a;
  --bg:#faf6f1;
  --card:#ffffff;
  --ink:#2b2622;
  --muted:#8a817a;
  --line:#ece5dd;
  --ok:#2e9e6b;
  --shadow:0 2px 12px rgba(60,40,30,.08);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;
  padding-bottom:90px;
}
a{color:inherit;text-decoration:none}

/* ---------- 顶部 ---------- */
.topbar{
  background:var(--brand);color:#fff;position:sticky;top:0;z-index:40;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.topbar-inner{
  max-width:960px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:20px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:17px}
.brand-text span{font-size:11px;opacity:.85;letter-spacing:.5px}
.topbar-right{display:flex;gap:6px}
.lang-pill{
  font-size:12px;padding:4px 10px;border:1px solid rgba(255,255,255,.5);
  border-radius:20px;cursor:pointer;transition:.15s;
}
.lang-pill.active,.lang-pill:hover{background:#fff;color:var(--brand);border-color:#fff}

/* ---------- 分类导航 ---------- */
.catnav{
  background:var(--card);position:sticky;top:62px;z-index:30;
  border-bottom:1px solid var(--line);
}
.catnav-inner{
  max-width:960px;margin:0 auto;padding:0 8px;
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
}
.catnav-inner::-webkit-scrollbar{display:none}
.cat-link{
  white-space:nowrap;padding:13px 14px;font-size:14px;color:var(--muted);
  border-bottom:3px solid transparent;font-weight:600;
}
.cat-link.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- 主体 ---------- */
.container{max-width:960px;margin:0 auto;padding:18px 14px}
.section{margin-bottom:28px}
.section-title{
  font-size:16px;margin-bottom:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.section-title::before{
  content:"";width:4px;height:18px;background:var(--brand);border-radius:2px;
}
.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}

/* ---------- 商品卡 ---------- */
.card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.card-img{
  position:relative;aspect-ratio:1/1;background:#f1ebe3;
  display:grid;place-items:center;overflow:hidden;
}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img.noimg::after{content:"🍪";font-size:46px;opacity:.4}
.badge{
  position:absolute;top:8px;left:8px;font-size:10px;font-weight:700;
  padding:3px 8px;border-radius:20px;color:#fff;letter-spacing:.4px;
  background:var(--muted);
}
.badge-bestseller{background:var(--ok)}
.badge-new{background:var(--accent);color:#3a2c10}
.badge-promo{background:var(--brand)}
.card-body{padding:11px 12px 13px;display:flex;flex-direction:column;flex:1}
.card-name{font-size:14px;font-weight:700;line-height:1.3}
.card-sub{font-size:11px;color:var(--muted);margin:2px 0 8px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.card-price{margin-top:auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price-old{font-size:12px;color:var(--muted);text-decoration:line-through}
.price-now{font-size:16px;font-weight:800;color:var(--brand)}
.price-unit{font-size:11px;color:var(--muted)}

/* 加减 */
.qty-row{
  margin-top:10px;display:flex;align-items:center;justify-content:space-between;
  background:#f6f1ea;border-radius:24px;padding:3px;
}
.qty-row button{
  width:32px;height:32px;border:none;border-radius:50%;background:#fff;
  font-size:20px;font-weight:700;color:var(--brand);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.1);display:grid;place-items:center;
}
.qty-row button:active{transform:scale(.92)}
.qty-val{font-weight:700;min-width:24px;text-align:center}

/* ---------- 购物车 FAB ---------- */
.cart-fab{
  position:fixed;right:16px;bottom:18px;z-index:50;
  background:var(--brand);color:#fff;border:none;border-radius:30px;
  padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(140,47,32,.4);display:flex;align-items:center;gap:8px;
}
.fab-count{
  background:#fff;color:var(--brand);border-radius:20px;min-width:22px;
  padding:1px 7px;font-size:13px;text-align:center;
}

/* ---------- 抽屉 ---------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;
  opacity:0;visibility:hidden;transition:.25s;
}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(400px,90vw);z-index:70;
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s ease;
  box-shadow:-4px 0 24px rgba(0,0,0,.18);
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  padding:16px;display:flex;justify-content:space-between;align-items:center;
  background:var(--brand);color:#fff;
}
.drawer-head h3{font-size:17px}
.drawer-close{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;line-height:1}
.drawer-body{flex:1;overflow-y:auto;padding:12px}
.empty-hint{text-align:center;color:var(--muted);padding:50px 0}
.ci{
  background:var(--card);border-radius:12px;padding:11px 12px;margin-bottom:10px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);
}
.ci-info{flex:1;min-width:0}
.ci-name{font-size:14px;font-weight:600;line-height:1.3}
.ci-price{font-size:12px;color:var(--muted);margin-top:2px}
.ci-qty{display:flex;align-items:center;gap:4px;background:#f6f1ea;border-radius:20px;padding:2px}
.ci-qty button{width:28px;height:28px;border:none;border-radius:50%;background:#fff;
  font-size:17px;color:var(--brand);cursor:pointer;font-weight:700}
.ci-qty span{min-width:20px;text-align:center;font-weight:700;font-size:14px}
.drawer-foot{padding:14px 16px;border-top:1px solid var(--line);background:var(--card)}
.totals div{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px;color:var(--muted)}
.totals .grand{font-size:18px;font-weight:800;color:var(--ink);margin-top:8px;
  padding-top:10px;border-top:1px dashed var(--line)}
.btn-checkout{
  width:100%;margin-top:12px;padding:14px;border:none;border-radius:12px;
  background:var(--brand);color:#fff;font-size:16px;font-weight:700;cursor:pointer;
}
.btn-checkout:disabled{background:#cfc6bd;cursor:not-allowed}

/* ---------- 结账弹窗 ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80;
  display:none;align-items:center;justify-content:center;padding:16px;
}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border-radius:16px;width:min(440px,100%);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden}
.modal-head{padding:16px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--line)}
.modal-head h3{font-size:17px}
.modal-close{background:none;border:none;font-size:26px;cursor:pointer;color:var(--muted)}
.modal-body{padding:16px;overflow-y:auto}
.modal-body label{display:block;font-size:13px;font-weight:600;margin:10px 0 5px}
.modal-body input,.modal-body textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;background:#fcfaf7;
}
.modal-body input:focus,.modal-body textarea:focus{outline:none;border-color:var(--brand)}
.form-err{color:var(--brand);font-size:13px;margin-top:10px;min-height:18px}
.modal-foot{padding:14px 16px;border-top:1px solid var(--line)}
.btn-submit{width:100%;padding:14px;border:none;border-radius:12px;
  background:var(--ok);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.btn-submit:disabled{opacity:.6}

@media(max-width:480px){
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .brand-text span{display:none}
}