/* ========= THEME / COMMON ========= */
:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#6f6f6f;
  --line:#e7e7e7;
  --coffee:#8b5a2b;
  --shadow: 0 10px 28px rgba(0,0,0,.08);
  --r:18px;
  --r2:14px;
  --max:1180px;
}

/* reset-ish */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  line-height:1.6;
}
a{ color:inherit; text-decoration:none; }

/* layout */
.wrap{ width:100%; max-width:var(--max); margin:0 auto; padding:0 18px; }

/* ui components */
.btn{
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:#333;
  padding:0 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.btn:hover{ background:#f6f6f6; }
.btn.coffee{
  border-color: var(--coffee);
  background: var(--coffee);
  color:#fff;
}

.iptS{
  width: 260px;
  max-width: 44vw;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  padding:0 12px;
  color:var(--text);
  outline:none;
}
.iptS::placeholder{ color:#aaa; }

.badge{
  min-width:18px;
  height:18px;
  border-radius:999px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  background:#f3e8dd;
  border:1px solid rgba(139,90,43,.6);
  color: var(--coffee);
}

/* common pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:999px;
  background:#fafafa;
  white-space:nowrap;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--coffee);
  box-shadow: 0 0 0 4px rgba(139,90,43,.14);
}

/* responsive helpers */
@media (max-width: 980px){
  .hide-md{ display:none !important; }
}
@media (max-width: 520px){
  .hide-sm{ display:none !important; }
}
/* ===== 飞入购物车动画 ===== */
.fly-item {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition:
    transform .7s cubic-bezier(.22,.61,.36,1),
    opacity .7s;
}

.fly-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 购物车抖动 */
@keyframes cart-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.cart-bounce {
  animation: cart-bounce .35s ease;
}