*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f4ef;color:#1f2922;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
img{display:block;max-width:100%}
.public-shell{width:min(1080px,calc(100% - 28px));margin-inline:auto}

.public-header{position:sticky;top:0;z-index:30;background:rgba(246,244,239,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(45,56,48,.08)}
.header-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.public-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.public-brand img,.brand-placeholder{width:38px;height:38px;border-radius:12px;object-fit:cover;background:#23382b;color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 5px 14px rgba(35,56,43,.12)}
.public-brand div{display:grid;gap:1px;min-width:0}
.public-brand strong{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.public-brand small{font-size:10px;color:#7a837b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.login-link{text-decoration:none;color:#34473a;border:1px solid #d8ddd7;background:#fff;border-radius:999px;padding:8px 13px;font-size:11px;font-weight:750;transition:.18s ease}
.login-link:hover{background:#23382b;color:#fff;border-color:#23382b}

.menu-hero{padding:34px 2px 26px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.hero-kicker{font-size:9px;font-weight:850;letter-spacing:.18em;color:#9a7447}
.menu-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,5.2vw,54px);line-height:.98;letter-spacing:-.035em;margin:9px 0 11px;font-weight:650}
.menu-hero p{margin:0;color:#707a72;font-size:13px;max-width:500px;line-height:1.6}
.hero-cup{font-size:60px;filter:drop-shadow(0 12px 14px rgba(74,54,31,.13));transform:rotate(-7deg);opacity:.9}

.menu-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 17px;border-top:1px solid #e3dfd7}
.category-scroll{display:flex;gap:6px;overflow:auto;padding:1px;scrollbar-width:none}
.category-scroll::-webkit-scrollbar{display:none}
.filter-chip{white-space:nowrap;border:1px solid #ddd9d1;background:#fbfaf7;color:#566158;border-radius:999px;padding:7px 11px;cursor:pointer;font-size:11px;font-weight:750;transition:.18s ease}
.filter-chip:hover{border-color:#b9c2ba}
.filter-chip.active{background:#23382b;color:#fff;border-color:#23382b}
.menu-search{width:220px;background:#fff;border:1px solid #ddd9d1;border-radius:999px;padding:0 11px;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.menu-search span{color:#879087;font-size:16px}
.menu-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;padding:8px 0;color:#1f2922;font-size:11px}

.public-products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:42px}
.menu-card{background:#fff;border-radius:17px;overflow:hidden;border:1px solid #e5e1d9;box-shadow:0 5px 18px rgba(43,55,47,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.menu-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(43,55,47,.08);border-color:#d9d4cb}
.menu-card[hidden]{display:none}
.menu-photo{position:relative;aspect-ratio:1.45/1;background:#ebe6dd;overflow:hidden}
.menu-photo img{width:100%;height:100%;object-fit:cover;transition:transform .28s ease}
.menu-card:hover .menu-photo img{transform:scale(1.025)}
.sold-out .menu-photo img{filter:grayscale(.45);opacity:.58}
.sold-badge{position:absolute;top:9px;right:9px;background:rgba(255,255,255,.94);color:#a33d32;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:850;box-shadow:0 4px 14px rgba(0,0,0,.07)}

.menu-card-body{padding:11px 12px 13px}
.menu-category{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#9a7447;font-weight:850}
.menu-name-row{display:flex;gap:9px;align-items:flex-end;justify-content:space-between;margin-top:5px}
.menu-name-row h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:16px;line-height:1.08;font-weight:650}
.menu-name-row strong{white-space:nowrap;font-size:11px;color:#23382b;background:#f0f3ef;padding:5px 7px;border-radius:999px}
.menu-empty{padding:38px;text-align:center;color:#727a73;background:#fff;border:1px dashed #d8d3ca;border-radius:18px;margin-bottom:42px;font-size:12px}

.public-footer{border-top:1px solid #e2ded6;background:#f0ede6}
.footer-inner{min-height:52px;display:flex;align-items:center;justify-content:center;gap:5px;color:#758078;font-size:10px}
.footer-inner strong{color:#3f4d43;font-weight:750}
.footer-coffee{font-size:13px}

@media(max-width:950px){
  .public-products{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:720px){
  .public-shell{width:min(100% - 20px,1080px)}
  .header-inner{min-height:58px}
  .public-brand img,.brand-placeholder{width:34px;height:34px;border-radius:10px}
  .public-brand strong{font-size:14px;max-width:180px}
  .public-brand small{display:none}
  .login-link{padding:7px 10px;font-size:10px}
  .menu-hero{padding:26px 2px 18px}
  .menu-hero h1{font-size:36px}
  .menu-hero p{font-size:12px}
  .hero-cup{display:none}
  .menu-controls{align-items:stretch;flex-direction:column;gap:9px;padding:11px 0 14px}
  .menu-search{width:100%}
  .public-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-bottom:34px}
  .menu-card{border-radius:14px}
  .menu-photo{aspect-ratio:1.18/1}
  .menu-card-body{padding:9px 10px 11px}
  .menu-name-row{align-items:flex-start;flex-direction:column;gap:6px}
  .menu-name-row h2{font-size:15px}
  .menu-name-row strong{font-size:10px}
}

@media(max-width:420px){
  .public-shell{width:calc(100% - 16px)}
  .menu-hero{padding-top:22px}
  .menu-hero h1{font-size:32px}
  .menu-hero p{font-size:11px;line-height:1.55}
  .filter-chip{padding:6px 10px;font-size:10px}
  .public-products{gap:8px}
  .menu-photo{aspect-ratio:1/1}
  .menu-card-body{padding:8px}
  .menu-name-row h2{font-size:14px}
  .menu-category{font-size:7px}
  .menu-name-row strong{font-size:9px;padding:4px 6px}
}