/* Triple Bean Cafe — Tap-to-Order (Beige/Walnut) with C1 emoji badges */
:root{
  --bg:#f5efe7;
  --paper:#fffaf3;
  --walnut:#5b4636;
  --walnut-2:#7a5b46;
  --ink:#6d5a49;
  --line:#e6dccf;
  --accent:#c6a27a;
  --accent-2:#9c6b3f;
  --shadow:0 10px 30px rgba(91,70,54,.12);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0; min-height:100%;
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(198,162,122,.12), transparent 60%),
    radial-gradient(900px 600px at 110% 110%, rgba(156,107,63,.12), transparent 60%),
    var(--bg);
  color:var(--walnut);
  font:18px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";}
.container{max-width:900px; margin:0 auto; padding:28px 20px 48px; display:grid; align-content:center; min-height:100dvh}
header{text-align:center; margin-bottom:18px}
.brand{display:inline-flex; gap:14px; align-items:center; justify-content:center; padding:4px 14px; border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.4)); border:1px solid var(--line); box-shadow:var(--shadow)}
.brand .logo{width:56px; height:56px; filter:drop-shadow(0 6px 14px rgba(91,70,54,.15))}
.brand h1{margin:0; font-size:clamp(28px,5vw,40px); font-weight:800; letter-spacing:.3px; background:linear-gradient(45deg, var(--walnut-2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{margin-top:10px; color:var(--ink); font-size:15px; line-height:1.5;}
.menu{margin-top:24px; background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:22px; padding:clamp(16px,4vw,32px)}
.menu h2{text-align:center; margin:0 0 12px; font-size:clamp(22px,4.2vw,30px); letter-spacing:.3px}
.note{text-align:center; font-size:14px; color:var(--ink); margin:0 0 10px}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:16px auto 10px; width:90%}
.sections{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:680px){ .sections{grid-template-columns:repeat(3,1fr); gap:18px}}
.section{background:linear-gradient(180deg,#fffdf8,#fffaf3); border:1px solid var(--line); border-radius:16px; padding:14px}
.section h3{margin:0 0 10px; text-align:center; font-size:clamp(18px,2.8vw,22px); color:var(--walnut-2)}
ul.menu-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.card{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px; border-radius:14px; border:1px solid var(--line); background:linear-gradient(180deg, #fffdf8, #fffaf3); transition:transform .12s ease, box-shadow .12s ease}
.card.orderable{cursor:pointer}
.card:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(91,70,54,.08)}
.icon{
  position:relative;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(198,162,122,.2), rgba(156,107,63,.15));
  border:1px solid var(--line);
}
/* C1 badge: tiny emoji bubble on the top-right corner */
.icon[data-badge]::after{
  content: attr(data-badge);
  position:absolute;
  top:-6px; right:-6px;
  width:20px; height:20px;
  display:grid; place-items:center;
  font-size:12px; line-height:1;
  background:#fff; border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 4px 10px rgba(91,70,54,.15);
}
.name{font-size:clamp(18px,3.6vw,22px); font-weight:800}
.meta{color:var(--ink); font-size:12px}
.qty{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:4px 8px; background:#fffdf8}
.qty button{width:28px; height:28px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer}
.qty .count{min-width:20px; text-align:center; font-weight:700}
.footer-bar{display:grid; gap:10px; margin-top:16px}
@media(min-width:680px){ .footer-bar{grid-template-columns:1fr 1fr}}
.input{padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff}
.button{padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:linear-gradient(180deg, #fffdf8, #fffaf3); cursor:pointer; font-weight:700}
.status{color:var(--ink); font-size:14px; margin-top:6px; min-height:1.2em; text-align:center}
.closed{color:#9c6b3f; text-align:center; font-weight:700; margin-top:8px}
footer{text-align:center; color:var(--ink); font-size:13px; margin-top:18px}