:root{
  --green:#2f7d4f; --green-d:#245f3d; --green-l:#e7f2ea; --ink:#20241f; --muted:#5f6b60;
  --cream:#faf7f0; --card:#ffffff; --line:#e8e6dd; --accent:#e08a2b; --star:#e0a72b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink);font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
h1,h2{letter-spacing:-.02em;line-height:1.08;margin:.2em 0}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:700;padding:11px 20px;border-radius:999px;border:0;cursor:pointer;font-size:.95rem}
.btn:hover{background:var(--green-d)}
.btn.ghost{background:#fff;color:var(--green);border:2px solid var(--green)}
.btn.big{padding:14px 26px;font-size:1.02rem}
.btn.full{width:100%}
.price{font-weight:800;color:var(--green-d)}
.price.big{font-size:1.5rem}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line)}
.navrow{display:flex;align-items:center;gap:20px;height:66px}
.brand{font-weight:900;font-size:1.25rem;letter-spacing:-.02em;color:var(--green-d)}
.brand span{color:var(--ink)} .brand .leaf{margin-right:2px}
.links{display:flex;gap:20px;font-weight:600;font-size:.94rem}
.links a:hover{color:var(--green)}
.search{margin-left:auto}
.search input{border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:9px 16px;width:230px;font:inherit;font-size:.9rem;outline:none}
.search input:focus{border-color:var(--green)}
.acct{display:flex;align-items:center;gap:16px;font-weight:600;font-size:.94rem}

/* hero */
.hero{background:linear-gradient(160deg,#eaf3ec,#faf7f0 70%);border-bottom:1px solid var(--line)}
.herogrid{display:grid;grid-template-columns:1.2fr .9fr;gap:40px;align-items:center;padding:56px 22px 64px}
.herotext h1{font-size:3.2rem;font-weight:900;margin:.3em 0}
.herotext p{font-size:1.15rem;color:var(--muted);max-width:34ch}
.herobtns{display:flex;gap:12px;margin:22px 0 16px;flex-wrap:wrap}
.trust{color:var(--star);font-weight:800}.trust span{color:var(--muted);font-weight:600;margin-left:6px}
.herocard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:0 20px 50px -24px rgba(36,95,61,.4);text-align:center}
.bowl{font-size:6rem;line-height:1;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15))}
.bowlmeta{margin-top:14px}.bowlmeta b{display:block;font-size:1.2rem}.bowlmeta span{color:var(--muted);font-size:.9rem}.bowlmeta em{display:block;margin-top:8px;font-style:normal;font-weight:800;color:var(--green-d);font-size:1.3rem}

/* bands + grid */
.band{padding:40px 22px}
.pill{display:inline-block;background:var(--green-l);color:var(--green-d);font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.cat{font-size:1.7rem;font-weight:800;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .12s,box-shadow .12s;display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,.35)}
.tile{height:130px;display:flex;align-items:center;justify-content:center}
.tile span{font-size:3.4rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.cbody{padding:14px 16px}.cbody b{font-size:1.05rem}.cbody p{color:var(--muted);font-size:.88rem;margin:.35em 0 .6em;min-height:2.4em}

/* detail */
.detail{display:grid;grid-template-columns:.9fr 1.1fr;gap:36px;padding:44px 22px;align-items:start}
.dtile{height:320px;border-radius:22px;display:flex;align-items:center;justify-content:center}
.dtile span{font-size:8rem}
.dbody h1{font-size:2.4rem;font-weight:900}
.lead{font-size:1.1rem;color:var(--muted)}
.addform{display:flex;flex-direction:column;gap:12px;max-width:420px;margin:18px 0}
.addform input{border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit}
.added{color:var(--green-d);font-weight:700}
.allergen{color:var(--muted);font-size:.85rem}

/* auth */
.auth{display:flex;justify-content:center;padding:60px 22px}
.authcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:36px;width:100%;max-width:420px;box-shadow:0 20px 50px -30px rgba(0,0,0,.4)}
.authcard h1{font-size:1.9rem}.authcard .sub{color:var(--muted)}
.authcard label{display:block;font-weight:700;font-size:.85rem;margin:14px 0 0}
.authcard input{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;margin-top:6px}
.authcard input:focus{border-color:var(--green);outline:none}
.authcard .btn{margin-top:20px}
.alt{color:var(--muted);font-size:.9rem;margin-top:16px}.alt a{color:var(--green);font-weight:700}
.err{background:#fdecea;border:1px solid #f5b5ae;color:#a12a1c;padding:10px 14px;border-radius:10px;margin:12px 0;font-size:.9rem}
.results{color:var(--muted)}.results b{color:var(--ink)}
.empty{color:var(--muted)}.sub{color:var(--muted)}

/* orders */
.orders{display:flex;flex-direction:column;gap:10px;max-width:640px}
.orow{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.orow span{display:block;color:var(--muted);font-size:.85rem}
.ostatus{margin-left:auto;font-weight:800;font-size:.8rem;text-transform:capitalize;padding:4px 10px;border-radius:999px;background:var(--green-l);color:var(--green-d)}
.ostatus.preparing{background:#fdf0da;color:#8a5a10}.ostatus.big{font-size:1rem;margin:0 0 12px;display:inline-block}
.ordercard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;max-width:560px}

/* promo + footer */
.promo{padding:20px 22px 60px}
.promocard{background:linear-gradient(135deg,var(--green),var(--green-d));color:#fff;border-radius:22px;padding:44px;text-align:center}
.promocard h2{font-size:2rem}.promocard p{opacity:.92;max-width:44ch;margin:8px auto 20px}
.promocard .btn{background:#fff;color:var(--green-d)}
.foot{background:#1f2a22;color:#cdd6cf;margin-top:20px;padding:44px 0 0}
.footrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.foot .brand{color:#fff}.foot p{color:#9fb0a3;font-size:.9rem;max-width:30ch}
.foot h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px}
.foot a{display:block;color:#a9b8ac;font-size:.9rem;padding:3px 0}.foot a:hover{color:#fff}
.fine{border-top:1px solid #2e3d31;margin-top:30px;padding:16px 22px;color:#849789;font-size:.82rem}

/* chat widget */
.chat-fab{position:fixed;right:22px;bottom:22px;width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;border:0;font-size:1.5rem;cursor:pointer;box-shadow:0 12px 30px -8px rgba(36,95,61,.6);z-index:50}
.chat-fab:hover{background:var(--green-d)}
.chat-fab.hide{display:none}
.chat-panel{position:fixed;right:22px;bottom:22px;width:350px;max-width:calc(100vw - 32px);height:460px;max-height:calc(100vh - 44px);background:#fff;border-radius:16px;box-shadow:0 24px 60px -16px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden;z-index:51}
.chat-panel.open{display:flex}
.chat-head{background:var(--green);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;font-weight:700}
.chat-head .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);margin-right:8px;transition:background .2s}
.chat-head .dot.on{background:#8affb0}
.chat-head .dot.off{background:#ffb0b0}
.cm.typing{display:flex;gap:4px;align-items:center}
.cm.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);display:inline-block;animation:tblink 1.2s infinite ease-in-out}
.cm.typing span:nth-child(2){animation-delay:.2s}
.cm.typing span:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.chat-head button{background:transparent;border:0;color:#fff;font-size:1rem;cursor:pointer}
.chat-body{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--cream)}
.cm{max-width:80%;padding:9px 13px;border-radius:14px;font-size:.92rem;line-height:1.4}
.cm.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.cm.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat-input input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 14px;font:inherit;outline:none}
.chat-input input:focus{border-color:var(--green)}
.chat-input button{background:var(--green);color:#fff;border:0;width:40px;border-radius:50%;cursor:pointer;font-size:1rem}

@media(max-width:820px){
  .herogrid,.detail{grid-template-columns:1fr}
  .herotext h1{font-size:2.4rem}
  .links,.search{display:none}
  .footrow{grid-template-columns:1fr 1fr}
}

/* cart + helpers */
.narrow{max-width:760px}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.cartlink{position:relative;font-size:1.1rem}
.cartbadge{position:absolute;top:-8px;right:-12px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;border-radius:999px;padding:1px 6px}
.cart{margin-top:16px;border-top:1px solid var(--line)}
.crow{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.cthumb{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.cthumb span{font-size:26px}
.cinfo{display:flex;flex-direction:column;gap:2px}
.cinfo .muted{font-size:.82rem}
.cqty input{width:58px;padding:8px;border:1.5px solid var(--line);border-radius:10px;text-align:center;font-size:.95rem;background:#fff}
.cline{font-weight:800;color:var(--green-d);white-space:nowrap}
.linkbtn{background:0;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}
.linkbtn:hover{color:#c0392b}
.cartfoot{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:16px;flex-wrap:wrap}
.carttotal{font-size:1.05rem}
.carttotal b{font-size:1.5rem;color:var(--green-d);margin-left:10px}
.placed{background:var(--green-l);border:1px solid #bfe0c9;color:var(--green-d);padding:12px 16px;border-radius:12px;margin:12px 0;font-weight:600}
.sub{color:var(--muted)}
.alt{color:var(--muted);font-size:.9rem}