:root{
  --cream:#f4efe3;
  --cream-2:#efe8d8;
  --ink:#3b3a2e;
  --ink-soft:#6a6857;
  --green:#5a7445;
  --green-deep:#42592f;
  --green-soft:#86a36a;
  --green-mist:#e6ecd9;
  --card:#fffdf7;
  --shadow:0 10px 28px rgba(66,89,47,.14);
  --shadow-sm:0 4px 12px rgba(66,89,47,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Mali',system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  background-image:
    radial-gradient(120% 60% at 50% -10%, #fbf8ef 0%, var(--cream) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 8c-4 4-4 10 0 14 4-4 4-10 0-14z' fill='%235a7445' fill-opacity='0.035'/%3E%3C/svg%3E");
  line-height:1.55;min-height:100vh;padding:0 0 48px;
}
.wrap{max-width:468px;margin:0 auto;padding:0 20px;position:relative}

/* hero */
.hero{position:relative;text-align:center;padding:46px 0 22px}
.hero.sm{padding:34px 0 14px}
.leaf-row{font-size:20px;letter-spacing:8px;opacity:.55;margin-bottom:6px}
.brand{font-family:'Pacifico',cursive;font-size:62px;line-height:1;color:var(--green-deep);letter-spacing:.5px;text-shadow:0 2px 0 #fff,0 6px 16px rgba(66,89,47,.18)}
.brand.sm{font-size:44px}
.badge{display:inline-block;margin-top:14px;background:var(--green);color:#fdfcf5;font-weight:600;font-size:15px;padding:7px 18px;border-radius:999px;box-shadow:var(--shadow-sm);transform:rotate(-1.5deg)}
.sub{margin-top:14px;font-size:16px;color:var(--ink-soft);font-weight:500}
.sub b{color:var(--green-deep)}
.page-title{font-size:24px;color:var(--green-deep);font-weight:700;margin-top:10px}
.page-title .e{font-size:26px}

/* section */
.sec{margin-top:30px}
.sec-h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--green-deep);margin:0 4px 12px}
.sec-h::before,.sec-h::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#cbd3b6,transparent)}

/* big button */
.menu-btn{display:flex;align-items:center;gap:14px;width:100%;background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);color:#fdfcf5;border:none;text-decoration:none;padding:18px 22px;border-radius:22px;box-shadow:var(--shadow);font-size:19px;font-weight:700;transition:transform .15s ease,box-shadow .15s ease;position:relative;overflow:hidden;margin-bottom:12px}
.menu-btn .ico{font-size:26px}
.menu-btn small{display:block;font-weight:500;font-size:13px;opacity:.85;margin-top:1px}
.menu-btn .arrow{margin-left:auto;font-size:22px;opacity:.8}
.menu-btn:active{transform:scale(.98)}
.menu-btn.alt{background:linear-gradient(135deg,#8a9f6b,#6f8a4f)}
.menu-btn.cocoa{background:linear-gradient(135deg,#a98a63,#876b46)}

/* branch card */
.card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:18px 18px 16px;margin-bottom:16px;border:1px solid #efe9d6;position:relative}
.card .pin{position:absolute;top:-12px;left:18px;background:var(--green-soft);color:#fff;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;box-shadow:var(--shadow-sm)}
.card h3{font-size:19px;color:var(--green-deep);margin:8px 0 2px;font-weight:700;line-height:1.25}
.card .hours{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-soft);font-weight:500;background:var(--green-mist);padding:4px 11px;border-radius:999px;margin:6px 0 4px}
.card .addr{font-size:13.5px;color:var(--ink-soft);margin:8px 0 14px;line-height:1.5}
.actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;background:var(--cream-2);color:var(--green-deep);font-size:12.5px;font-weight:600;padding:11px 4px;border-radius:14px;transition:background .15s ease,transform .15s ease}
.act .e{font-size:20px}
.act:active{transform:scale(.96)}
.act.line{background:#06c755;color:#fff}
.act.call{background:#e9dfc7}
.act:hover{background:#e3ddc8}
.act.line:hover{background:#05b34c}
.act.map-wide{grid-column:1/-1;flex-direction:row;justify-content:center;gap:8px;background:var(--green);color:#fff;padding:13px}
.act.map-wide:hover{background:var(--green-deep)}

/* social */
.social{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.soc{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#fdfcf5;font-weight:600;font-size:14px;padding:13px 6px;border-radius:16px;box-shadow:var(--shadow-sm);transition:transform .15s ease}
.soc:active{transform:scale(.96)}
.soc.ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.soc.fb{background:#1877f2}
.soc.tt{background:#111}

/* features / chips */
.feats{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:24px}
.feat{background:#fffdf7;border:1px solid #e8e2cf;color:var(--ink-soft);font-size:13px;font-weight:500;padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm)}

/* note */
.note{margin-top:24px;text-align:center;background:var(--green-mist);border-radius:20px;padding:18px 20px;color:var(--green-deep);font-size:14px;font-weight:500;line-height:1.6}
.note .big{display:block;font-size:16px;font-weight:700;margin-bottom:3px}

/* delivery specifics */
.hero-banner{background:linear-gradient(135deg,var(--green),var(--green-deep));color:#fdfcf5;border-radius:26px;padding:26px 22px;text-align:center;box-shadow:var(--shadow);margin-top:8px}
.hero-banner .big{font-size:26px;font-weight:700;display:block}
.hero-banner .free{font-size:40px;font-weight:700;display:block;margin:6px 0;line-height:1}
.hero-banner small{font-size:14px;opacity:.9}
.terms{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:12px}
.terms li{display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid #efe9d6;border-radius:18px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.terms .ic{font-size:24px;flex-shrink:0}
.terms b{color:var(--green-deep);display:block;font-size:15px}
.terms span{font-size:13.5px;color:var(--ink-soft)}
.mock{margin-top:18px;text-align:center;border:2px dashed #c2cda8;border-radius:18px;padding:16px;color:var(--green-soft);font-size:13px;font-weight:600;background:#fbfaf3}

/* back link */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--green-deep);text-decoration:none;font-weight:600;font-size:14px;margin:18px 4px 0;background:var(--cream-2);padding:8px 16px;border-radius:999px}
.back:hover{background:#e3ddc8}

footer{text-align:center;margin-top:28px;color:var(--ink-soft);font-size:12px;opacity:.8}
footer .heart{color:var(--green-soft)}

@media(max-width:360px){.brand{font-size:52px}.actions{gap:7px}.act{font-size:11.5px}}