/* Ember — specialty coffee ordering (warm editorial, light app) */
:root {
  --bg-0: #17100c;
  --bg-1: #251913;
  --glow: rgba(232, 118, 59, 0.30);
  --glow-2: rgba(192, 69, 42, 0.18);
  --accent: #e8763b;
  --accent-2: #c0452a;
  --on-accent: #241109;
  --app-bg: #f7f1e9;
  --app-bg-2: #efe6da;
  --ink: #2a1c14;
  --muted: #8a7a6c;
  --line: rgba(42, 28, 20, 0.1);
  --card: #ffffff;
}

.home-head { padding: 6px 22px 4px; }
.home-head .row { display: flex; align-items: center; justify-content: space-between; }
.home-head .hello { font-size: 13px; color: var(--muted); }
.home-head .name { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--ink); }
.e-ava { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 700; }

.hero-card { margin: 14px 22px 4px; border-radius: 26px; padding: 22px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, #3a2418, #1c110b); min-height: 172px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; }
.hero-card .steam { position: absolute; right: 24px; top: 20px; font-size: 58px; color: #e7b671; }
.hero-card .steam .gi *, .sheet .hero-img .gi * { vector-effect: normal; stroke-width: 1.5; }
.hero-card .tag { align-self: flex-start; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #e7b671; font-weight: 700; margin-bottom: 8px; }
.hero-card h3 { font-family: var(--font-display); font-size: 25px; font-weight: 600; max-width: 62%; }
.hero-card p { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 6px; max-width: 66%; }
.hero-card .cta { margin-top: 15px; align-self: flex-start; background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; font-size: 13px; padding: 11px 18px; border-radius: 999px; cursor: pointer; }

.e-sec { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 12px; }
.e-sec h4 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.e-sec a { font-size: 12px; color: var(--accent); font-weight: 600; }

.cats { display: flex; gap: 10px; padding: 0 22px 4px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: #fff; border-radius: 16px; padding: 10px 15px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cat span { display: inline-grid; place-items: center; width: 17px; height: 17px; color: var(--accent); }
.cat span .gi { width: 17px; height: 17px; }
.cat.active { background: var(--ink); color: var(--app-bg); border-color: var(--ink); }
.cat.active span { color: var(--app-bg); }

.prod-list { padding: 6px 22px 10px; display: flex; flex-direction: column; gap: 12px; }
.prod { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 20px; padding: 12px; border: 1px solid var(--line); cursor: pointer; transition: transform 0.18s; }
.prod:active { transform: scale(0.98); }
.prod .thumb { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; display: grid; place-items: center; font-size: 30px; color: var(--accent); background: linear-gradient(150deg, var(--app-bg-2), #fff); }
.prod .info { flex: 1; min-width: 0; }
.prod .info h5 { font-size: 15px; font-weight: 600; color: var(--ink); }
.prod .info .desc { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod .info .meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.prod .info .price { font-weight: 700; font-size: 14px; color: var(--ink); }
.prod .info .rating { font-size: 11.5px; color: var(--muted); }
.prod .add { width: 34px; height: 34px; border-radius: 12px; flex: 0 0 auto; border: none; background: var(--ink); color: var(--app-bg); font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: transform 0.15s, background 0.2s; }
.prod .add:active { transform: scale(0.85); background: var(--accent); }

.screen-h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); padding: 6px 22px 4px; }
.screen-sub { font-size: 13px; color: var(--muted); padding: 0 22px 10px; }

.loyalty { margin: 8px 22px; border-radius: 24px; padding: 22px; color: #fff; background: linear-gradient(135deg, #b5451f, #7a2b17); position: relative; overflow: hidden; }
.loyalty::after { content: ""; position: absolute; right: -46px; bottom: -56px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(231,182,113,0.28), transparent 70%); }
.loyalty .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #e7b671; font-weight: 700; }
.loyalty .big { font-family: var(--font-display); font-size: 34px; font-weight: 600; margin-top: 6px; }
.loyalty .small { font-size: 12.5px; color: rgba(255,255,255,0.75); margin-top: 4px; }
.stamps { display: flex; gap: 9px; margin-top: 16px; }
.stamp { width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,0.4); display: grid; place-items: center; font-size: 15px; color: rgba(255,255,255,0.55); }
.stamp.filled { background: #e7b671; border-style: solid; border-color: #e7b671; color: #3a2418; }
.reward-item { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 0 22px 10px; }
.reward-item .ic { width: 44px; height: 44px; border-radius: 13px; background: var(--app-bg-2); display: grid; place-items: center; font-size: 22px; color: var(--accent); }
.reward-item .t { flex: 1; }
.reward-item .t h5 { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.reward-item .t p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.reward-item .pts { font-size: 12px; font-weight: 700; color: var(--accent-2); }

.bag-empty { text-align: center; padding: 70px 30px; color: var(--muted); }
.bag-empty .em { font-size: 54px; color: var(--accent); display: inline-flex; }
.bag-empty h4 { font-family: var(--font-display); font-size: 20px; color: var(--ink); margin: 14px 0 6px; }
.bag-empty p { font-size: 13px; line-height: 1.5; }
.bag-list { padding: 6px 22px 4px; display: flex; flex-direction: column; gap: 12px; }
.bag-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; }
.bag-row .thumb { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 26px; color: var(--accent); background: linear-gradient(150deg, var(--app-bg-2), #fff); flex: 0 0 auto; }
.bag-row .bi { flex: 1; min-width: 0; }
.bag-row .bi h5 { font-size: 14px; font-weight: 600; color: var(--ink); }
.bag-row .bi span { font-size: 11.5px; color: var(--muted); }
.qty { display: flex; align-items: center; gap: 10px; }
.qty button { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line); background: var(--app-bg); font-size: 16px; cursor: pointer; color: var(--ink); display: grid; place-items: center; }
.qty b { font-size: 14px; min-width: 14px; text-align: center; color: var(--ink); }
.summary { margin: 16px 22px 4px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.summary .line { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.summary .line.total { color: var(--ink); font-weight: 700; font-size: 16px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 3px; }
.checkout-bar { padding: 4px 22px 22px; }

/* detail sheet */
.sheet .hero-img { height: 168px; border-radius: 24px; display: grid; place-items: center; font-size: 88px; color: var(--accent); background: radial-gradient(120% 120% at 70% 10%, #fff, var(--app-bg-2)); margin-bottom: 16px; position: relative; }
.sheet .cat-pill { position: absolute; top: 14px; left: 14px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent-2); background: #fff; padding: 6px 10px; border-radius: 999px; }
.sheet h2 { font-family: var(--font-display); font-size: 25px; font-weight: 600; color: var(--ink); }
.sheet .d-meta { display: flex; align-items: center; gap: 14px; margin: 8px 0 12px; font-size: 12.5px; color: var(--muted); }
.sheet .d-meta .price { font-size: 20px; font-weight: 700; color: var(--ink); }
.sheet .d-desc { font-size: 13.5px; line-height: 1.6; color: #5f5044; margin-bottom: 18px; }
.opt-group { margin-bottom: 16px; }
.opt-group .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.opt-row { display: flex; gap: 9px; flex-wrap: wrap; }
.opt { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 15px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.opt.sel { border-color: var(--ink); background: var(--ink); color: var(--app-bg); }
.opt small { opacity: 0.7; font-weight: 500; }
.qtybox { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; background: #fff; }
.qtybox button { border: none; background: none; font-size: 20px; cursor: pointer; color: var(--ink); }
.qtybox b { font-size: 15px; min-width: 16px; text-align: center; color: var(--ink); }